:root{
  --ink:#050506;
  --paper:#EDEAE4;
  --muted:#8B8882;
  --gold:#C2A063;
  --gold-soft:#E0C892;
  --line:rgba(237,234,228,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);
  font-family:'Inter',-apple-system,Segoe UI,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* ---- opening curtain: the loading screen he asked for ---- */
#curtain{position:fixed;inset:0;background:var(--ink);z-index:99;display:grid;place-items:center;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 1.1s}
#curtain.gone{opacity:0;visibility:hidden}
#curtain .mark{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,46px);
  letter-spacing:.34em;font-weight:300;color:var(--paper);opacity:0;
  animation:markIn 1.5s .25s cubic-bezier(.2,.7,.2,1) forwards}
#curtain .rule{margin:22px auto 0;height:1px;width:0;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:ruleIn 1.5s .6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes markIn{to{opacity:1;letter-spacing:.28em}}
@keyframes ruleIn{to{width:220px}}

/* ---- atmosphere ---- */
.halo{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 55% at 68% 34%, rgba(194,160,99,.17) 0%, transparent 62%),
    radial-gradient(80% 70% at 18% 82%, rgba(150,132,110,.08) 0%, transparent 60%);
  filter:blur(2px)}
.grain{position:fixed;inset:-200%;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
60%{transform:translate(-3%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.art{position:fixed;right:-6vw;bottom:-9vh;width:84vw;height:48vh;z-index:0;pointer-events:none;
  background-image:url('/img/ribbon.jpg');background-size:cover;background-position:center;
  opacity:.85;will-change:transform;
  -webkit-mask-image:radial-gradient(58% 92% at 58% 50%,#000 18%,transparent 72%);
  mask-image:radial-gradient(58% 92% at 58% 50%,#000 18%,transparent 72%)}

/* ---- shell ---- */
.wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:34px 0;
  border-bottom:1px solid var(--line)}
.brand{font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:.3em;font-weight:400}
.brand span{color:var(--gold)}
.links{display:flex;gap:38px;align-items:center}
.links a{color:var(--muted);text-decoration:none;font-size:13.5px;letter-spacing:.08em;
  transition:color .35s}
.links a:hover{color:var(--paper)}
.call{border:1px solid var(--line);padding:11px 22px;border-radius:2px;color:var(--paper)!important;
  transition:border-color .4s,background .4s}
.call:hover{border-color:var(--gold);background:rgba(194,160,99,.07)}

/* ---- hero ---- */
header{min-height:calc(100vh - 104px);display:flex;flex-direction:column;justify-content:center;
  padding:44px 0 52px;max-width:860px}
.eyebrow{display:flex;align-items:center;gap:16px;color:var(--gold-soft);
  font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:36px}
.eyebrow i{display:block;flex:0 0 52px;width:52px;height:1px;background:var(--gold);opacity:.6}
h1{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(42px,7.2vw,92px);line-height:1.02;letter-spacing:-.015em}
h1 em{font-style:normal;color:var(--gold-soft)}
.lede{margin-top:28px;max-width:610px;font-size:clamp(16px,1.65vw,19px);line-height:1.75;
  color:#B9B5AE;font-weight:200}
.acts{margin-top:42px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 34px;border-radius:2px;
  text-decoration:none;font-size:14px;letter-spacing:.09em;transition:all .45s cubic-bezier(.3,.7,.3,1)}
.primary{background:linear-gradient(100deg,var(--gold-soft),var(--gold));color:#100D07;font-weight:500}
.primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(194,160,99,.6)}
.ghost{color:var(--paper);border:1px solid var(--line)}
.ghost:hover{border-color:rgba(237,234,228,.4)}
.beneath{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px 44px;color:var(--muted);font-size:13px;letter-spacing:.04em}
.beneath b{color:var(--paper);font-weight:400}

/* ---- entrance ---- */
.rise{opacity:0;transform:translateY(26px);
  animation:rise 1.15s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:880px){
  nav{display:block;padding:22px 0 0}
  .brand{display:block;font-size:15px;letter-spacing:.2em}
  .links{width:100%;margin-top:20px;padding-bottom:15px;gap:0;justify-content:space-between}
  .links a{font-size:11.5px;letter-spacing:.04em;white-space:nowrap}
  .call{position:absolute;top:12px;right:0;padding:9px 15px;font-size:12px}
  .art{width:170vw;right:-46vw;height:30vh;opacity:.42}
  header{min-height:auto;padding:56px 0 70px}
}

/* ============ shared across the inner pages ============ */

/* inner pages get a shorter, calmer top than the home hero */
.page-head{padding:72px 0 8px;max-width:880px}
.page-head h1{font-size:clamp(36px,5.6vw,68px)}
.page-head .lede{margin-top:26px}

h2{font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(27px,3.4vw,42px);line-height:1.12;letter-spacing:-.01em}
h3{font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(21px,2.2vw,27px);line-height:1.2;letter-spacing:.005em}
p{line-height:1.78;font-weight:200;color:#B9B5AE}

section{padding:88px 0;border-top:1px solid var(--line)}
.page-head + section{padding-top:8px}
section:first-of-type{border-top:none}
.sec-label{color:var(--gold-soft);font-size:11.5px;letter-spacing:.34em;
  text-transform:uppercase;display:flex;align-items:center;gap:16px;margin-bottom:30px}
.sec-label i{display:block;flex:0 0 52px;width:52px;height:1px;background:var(--gold);opacity:.6}
.measure{max-width:640px}
p.measure{font-size:clamp(15.5px,1.5vw,17.5px)}
h2.measure{max-width:720px}

/* the system cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  margin-top:52px;border:1px solid var(--line)}
.card{background:var(--ink);padding:clamp(28px,3.6vw,48px);position:relative;
  display:flex;flex-direction:column;transition:background .5s}
.card:hover{background:#0A0908}
.card .no{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);
  letter-spacing:.2em;display:block;margin-bottom:20px;opacity:.75}
.card h3{margin-bottom:16px}
.card p{font-size:15.5px}
.card .today{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13.5px;letter-spacing:.02em;line-height:1.7}
.card .today b{color:var(--gold-soft);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;font-size:10.5px;display:block;margin-bottom:8px}

/* numbered steps */
.steps{margin-top:56px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--ink);padding:clamp(26px,3.2vw,42px);display:grid;
  grid-template-columns:96px 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.step .n{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4.4vw,56px);
  color:var(--gold);opacity:.45;line-height:1}
.step p{font-size:15.5px;margin-top:12px;max-width:620px}

/* the live demo tiles */
.demos{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:52px}
.demo{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  padding:clamp(24px,3vw,36px);border-radius:2px;transition:border-color .45s,transform .45s,background .45s}
.demo:hover{border-color:var(--gold);background:rgba(194,160,99,.045);transform:translateY(-3px)}
.demo .kind{color:var(--muted);font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.demo h3{margin:14px 0 12px}
.demo .quote{font-family:'Cormorant Garamond',serif;font-style:normal;font-size:17.5px;
  line-height:1.55;color:#C8C3BA}
.demo .go{margin-top:24px;color:var(--gold-soft);font-size:13px;letter-spacing:.09em}

/* plain list of lines */
.lines{margin-top:44px;border-top:1px solid var(--line)}
.lines div{padding:20px 0;border-bottom:1px solid var(--line);display:flex;gap:clamp(16px,3vw,38px);
  font-size:15.5px;color:#B9B5AE;font-weight:200;line-height:1.65}
.lines div b{flex:0 0 clamp(120px,17vw,210px);color:var(--paper);font-weight:400;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding-top:3px}

/* contact */
.contact{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:52px}
.contact a{background:var(--ink);padding:clamp(30px,4vw,54px);text-decoration:none;color:inherit;
  display:block;transition:background .5s}
.contact a:hover{background:#0A0908}
.contact .kind{color:var(--gold-soft);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.contact .val{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3.2vw,38px);
  margin-top:18px;font-weight:300}
.contact .sub{color:var(--muted);font-size:13.5px;margin-top:14px;line-height:1.65}

/* closing call to action */
.close-cta{padding:96px 0 20px;border-top:1px solid var(--line);text-align:center}
.close-cta h2{max-width:760px;margin:0 auto}
.close-cta .acts{justify-content:center;margin-top:38px}

footer{border-top:1px solid var(--line);margin-top:70px;padding:38px 0 60px;
  display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between;
  color:var(--muted);font-size:12.5px;letter-spacing:.05em}
footer a{color:var(--muted);text-decoration:none;transition:color .35s}
footer a:hover{color:var(--paper)}
footer .fl{display:flex;flex-wrap:wrap;gap:14px 30px}

.note{margin-top:34px;color:var(--muted);font-size:13px;line-height:1.75;max-width:640px;
  border-left:1px solid var(--line);padding-left:20px}

@media(max-width:880px){
  .grid,.demos,.contact{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:6px}
  .step .n{font-size:32px}
  .lines div{flex-direction:column;gap:8px}
  .lines div b{flex:none}
  section{padding:62px 0}
  .page-head{padding:48px 0 0}
}


/* ============================================================
   VISUALS — added 2026-09-11 after his voice note: "I want to be
   able to visually show this to clients, not just all text
   repetitive shit." Every page below carries its own artwork and
   its own diagram so no two pages read the same.
   ============================================================ */

/* per-page artwork position, so the background is not the same
   picture in the same corner on all five pages */
body.p-build .art{background-image:url('/img/art-build.jpg');right:-12vw;left:auto;bottom:auto;top:-4vh;width:64vw;height:56vh;opacity:.5}
body.p-live  .art{background-image:url('/img/art-live.jpg');right:-14vw;bottom:auto;top:10vh;width:56vw;height:62vh;opacity:.5}
body.p-how   .art{background-image:url('/img/art-how.jpg');right:-16vw;left:auto;bottom:auto;top:2vh;width:64vw;height:60vh;opacity:.45}
body.p-talk  .art{background-image:url('/img/art-talk.jpg');right:-10vw;bottom:-8vh;width:60vw;height:62vh;opacity:.5}
@media(max-width:880px){
  body.p-build .art,body.p-live .art,body.p-how .art,body.p-talk .art{
    width:150vw;left:-30vw;right:auto;top:auto;bottom:-4vh;height:30vh;opacity:.3}
}

/* ---------- the flow: what actually happens when a call comes in ---------- */
.flow{margin-top:58px;position:relative}
.flow .rail{position:absolute;left:6%;right:6%;top:31px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(194,160,99,.42) 12%,rgba(194,160,99,.42) 88%,transparent)}
.flow .rail .pulse{position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--gold-soft);box-shadow:0 0 14px 3px rgba(224,200,146,.6);
  animation:pulse 6.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes pulse{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.flow .nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px);position:relative}
.node{text-align:left}
.node .dot{width:62px;height:62px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;background:var(--ink);position:relative;
  transition:border-color .5s,background .5s}
.node:hover .dot{border-color:var(--gold);background:#0B0907}
.node .dot svg{width:24px;height:24px;stroke:var(--gold-soft);stroke-width:1.15;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.node .t{margin-top:22px;color:var(--gold);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.node h4{margin-top:11px;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(17px,1.5vw,21px);line-height:1.25;letter-spacing:.005em}
.node p{margin-top:9px;font-size:13.5px;line-height:1.65}
@media(max-width:880px){
  .flow .rail{left:31px;right:auto;top:8%;bottom:8%;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,rgba(194,160,99,.42) 10%,rgba(194,160,99,.42) 90%,transparent)}
  .flow .rail .pulse{left:-2px;top:0;animation-name:pulseV}
  @keyframes pulseV{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
  .flow .nodes{grid-template-columns:1fr;gap:30px}
  .node{display:grid;grid-template-columns:62px 1fr;column-gap:22px;align-items:start}
  .node .dot{grid-row:1/4;grid-column:1}
  .node .t{grid-column:2;margin-top:3px}
  .node h4{grid-column:2;margin-top:8px}
  .node p{grid-column:2}
}

/* ---------- glyphs on the four system cards ---------- */
.card .glyph{width:54px;height:54px;margin-bottom:26px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;transition:border-color .5s}
.card:hover .glyph{border-color:rgba(194,160,99,.55)}
.card .glyph svg{width:23px;height:23px;stroke:var(--gold-soft);stroke-width:1.15;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.card .no{position:absolute;top:clamp(28px,3.6vw,48px);right:clamp(28px,3.6vw,48px);margin:0}

/* ---------- the phone: a real conversation, playing ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,5vw,70px);
  align-items:center;margin-top:54px}
.phone{width:340px;max-width:100%;border:1px solid rgba(237,234,228,.2);border-radius:30px;
  padding:11px;background:linear-gradient(160deg,#141210,#070707);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(194,160,99,.1)}
.phone .screen{background:#080807;border-radius:22px;padding:16px 15px 20px;min-height:472px;
  display:flex;flex-direction:column}
.phone .bar{display:flex;align-items:center;gap:9px;padding-bottom:13px;margin-bottom:16px;
  border-bottom:1px solid var(--line);color:var(--muted);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase}
.phone .bar i{width:6px;height:6px;border-radius:50%;background:#7FD18B;display:block;
  box-shadow:0 0 8px 1px rgba(127,209,139,.7);animation:live 2.6s ease-in-out infinite}
@keyframes live{50%{opacity:.35}}
.phone .msgs{display:flex;flex-direction:column;gap:12px}
.m{max-width:87%;padding:12px 15px;border-radius:14px;font-size:13.5px;line-height:1.6;
  font-weight:300;opacity:0;transform:translateY(9px);animation:msgIn .7s ease forwards}
.m.them{align-self:flex-end;background:#1A1815;color:#DCD8D1;border-bottom-right-radius:4px}
.m.it{align-self:flex-start;background:linear-gradient(150deg,rgba(194,160,99,.2),rgba(194,160,99,.09));
  border:1px solid rgba(194,160,99,.3);color:#EFE9DC;border-bottom-left-radius:4px}
@keyframes msgIn{to{opacity:1;transform:none}}
.m .who{display:block;color:var(--gold);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:7px;opacity:.85}
.phone .foot{margin-top:auto;padding-top:18px;color:var(--muted);font-size:11px;letter-spacing:.1em}
.stage .say h2{margin-bottom:22px}
.stage .say p{font-size:clamp(15.5px,1.5vw,17.5px);max-width:560px}
@media(max-width:980px){
  .stage{grid-template-columns:1fr;gap:40px}
  .phone{margin:0 auto}
}

/* ---------- the timeline on how it works ---------- */
.tl{margin-top:54px;position:relative;padding-left:clamp(30px,5vw,58px)}
.tl:before{content:'';position:absolute;left:9px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,rgba(194,160,99,.5),rgba(194,160,99,.14))}
.tl .mark{position:relative;padding-bottom:clamp(38px,4.5vw,58px)}
.tl .mark:last-child{padding-bottom:0}
.tl .mark:before{content:'';position:absolute;left:calc(-1 * clamp(30px,5vw,58px) + 4px);top:9px;
  width:11px;height:11px;border-radius:50%;background:var(--ink);border:1px solid var(--gold)}
.tl .when{color:var(--gold);font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.tl h3{margin-top:12px}
.tl p{margin-top:12px;font-size:15.5px;max-width:640px}
.tl .who{margin-top:16px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  padding:7px 15px;border-radius:2px;color:var(--muted);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase}
.tl .who.you{border-color:rgba(194,160,99,.45);color:var(--gold-soft)}

/* ---------- side by side: the same night, twice ---------- */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:52px}
.twin > div{background:var(--ink);padding:clamp(26px,3.4vw,44px)}
.twin .head{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:6px}
.twin .with .head{color:var(--gold)}
.twin .ev{display:grid;grid-template-columns:62px 1fr;gap:16px;padding:16px 0;
  border-bottom:1px solid rgba(237,234,228,.06);font-size:14.5px;line-height:1.6;
  color:#A5A19A;font-weight:200}
.twin .ev:last-child{border-bottom:none}
.twin .ev b{color:var(--muted);font-weight:400;font-size:12px;letter-spacing:.1em;padding-top:3px}
.twin .with .ev{color:#CFCAC1}
.twin .with .ev b{color:var(--gold-soft)}
.twin .out{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2vw,25px);line-height:1.3;color:var(--muted)}
.twin .with .out{color:var(--paper)}
@media(max-width:880px){.twin{grid-template-columns:1fr}}

/* ---------- a quiet strip of four line glyphs ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:48px}
.strip div{background:var(--ink);padding:clamp(24px,3vw,36px);text-align:center}
.strip svg{width:26px;height:26px;stroke:var(--gold-soft);stroke-width:1.1;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.strip b{display:block;margin-top:18px;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:19px;color:var(--paper)}
.strip span{display:block;margin-top:9px;color:var(--muted);font-size:12.5px;line-height:1.6}
@media(max-width:880px){.strip{grid-template-columns:repeat(2,1fr)}}

/* ---- "absolutely anything else": the open ended section (his ask, 09-11) ---- */
.anything{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,5vw,76px);margin-top:52px;align-items:start}
.anything .say{position:sticky;top:60px}
.anything .say p{margin-top:22px;font-size:15.5px}
.anything .say .acts{margin-top:34px}
.jobs{border-top:1px solid var(--line)}
.jobs .job{display:grid;grid-template-columns:22px 1fr;gap:18px;align-items:baseline;
  padding:17px 2px;border-bottom:1px solid var(--line);transition:padding-left .45s,color .45s;
  color:#B9B5AE;font-weight:200;font-size:15.5px;line-height:1.6}
.jobs .job:hover{padding-left:12px;color:var(--paper)}
.jobs .job i{display:block;width:11px;height:11px;position:relative;transform:translateY(-1px);
  transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.jobs .job i::before,.jobs .job i::after{content:'';position:absolute;background:var(--gold);opacity:.75}
.jobs .job i::before{left:0;right:0;top:5px;height:1px}
.jobs .job i::after{top:0;bottom:0;left:5px;width:1px}
.jobs .job:hover i{transform:translateY(-1px) rotate(90deg)}
.jobs .more{padding:20px 2px 0;color:var(--muted);font-size:13px;letter-spacing:.04em}
@media(max-width:880px){
  .anything{grid-template-columns:1fr;gap:34px}
  .anything .say{position:static}
  .jobs .job{font-size:15px}
}

/* the one line band on the home page that opens the door to it */
.band{margin-top:54px;border:1px solid var(--line);background:var(--ink);
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  transition:border-color .5s,background .5s}
.band:hover{border-color:rgba(194,160,99,.45);background:#0A0908}
.band b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(20px,2.2vw,26px);color:var(--paper);letter-spacing:.005em}
.band span{display:block;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.7;max-width:640px}
.band a{white-space:nowrap}