/* ════════════════════════════════════════════════════════════════
   SEPIDEH EIVAZI · DAWN OF THE EARTH — shared design system
   v5 "editorial dark" (2026-09).
   Fonts: Cormorant Garamond (display, set at 500) + Karla (text).
   v5.1 (2026-09-23): Instrument Serif retired — Cormorant Garamond keeps
   the editorial-dark register and reads cleaner. The weight/size pass for
   it lives at the END of this file.
   Keep all pages in this folder so this stylesheet resolves.
   Token NAMES are the shared contract and never change.
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#2C1107; --ink2:#1F0D07; --ink3:#151414;
  --clay:#8B5A3C; --clay-lt:#A97C5E; --gold:#85602F; --gold-lt:#D4B48A;
  --brown:#5B3F2C; --bone:#F2EBE0; --parch:#E6DBCB; --paper:#FAF6EE;
  --sage:#D8B69C; --sage-dk:#6E5039; --line:#E0D4C3; --mut:#75614F;
  /* v5 personality dial: square photography, pill buttons */
  --r:0; --pill:44px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Karla',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hair-d:rgba(250,246,238,.14);   /* hairline on dark rooms */
  --hair-l:rgba(44,17,7,.16);       /* hairline on greige rooms */
  --nav-h:72px;
  --gut:clamp(20px,4.5vw,64px);     /* page gutter */
  /* v4.1 depth tokens — retired from the chrome in v5, kept so nothing referencing them breaks */
  --card:#FFFDFA; --sh-card:none; --sh-card-hover:none; --sh-photo:none; --slab:transparent; --slab-o:0px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{font-family:var(--sans);background:var(--ink3);color:var(--paper);line-height:1.6;font-weight:300;font-size:17px;
  -webkit-font-smoothing:antialiased;padding-top:var(--nav-h)}
h1,h2,h3,h4,.fr{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.008em;text-wrap:balance;font-variant-numeric:lining-nums}
h1 em,h2 em,h3 em,h4 em,.fr em{font-style:italic;color:inherit}   /* headlines are one colour — the italic is the only accent */
::selection{background:var(--sage);color:var(--ink3)}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ── type scale ── */
.t-hero{font-size:clamp(48px,8.4vw,120px);line-height:.97;letter-spacing:-.014em}
.t-xl{font-size:clamp(42px,6vw,84px);line-height:1;letter-spacing:-.012em}
.t-l{font-size:clamp(36px,4.4vw,60px);line-height:1.02;letter-spacing:-.01em}
.t-m{font-size:clamp(28px,3vw,40px);line-height:1.06}
.ital{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(23px,2.5vw,34px);line-height:1.25;letter-spacing:0}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;line-height:1.4}
.sub-caps{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-weight:300;font-size:clamp(13px,1.2vw,16.5px);line-height:1.65}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.65;font-weight:300}
.small{font-size:13px;line-height:1.55}
.note{font-size:12.5px;line-height:1.55;font-style:italic;margin-top:20px;max-width:56ch}
.center{text-align:center;margin-left:auto;margin-right:auto}
.label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}   /* legacy alias of .kicker */

/* ── rooms — every section is a full-width block: dark, greige, photo, or brown ── */
.room{position:relative;padding:clamp(84px,10vw,150px) var(--gut)}
.room-dark{background:var(--ink3);color:var(--paper)}
.room-greige{background:var(--parch);color:var(--ink)}
.room-photo{position:relative;background:var(--ink3);color:var(--paper);overflow:hidden;isolation:isolate}
.room-photo .room-bg{position:absolute;inset:0;z-index:-1}
.room-brown{color:#E9DCCB;background:radial-gradient(70% 60% at 100% 100%,rgba(212,180,138,.32),transparent 62%),linear-gradient(180deg,#1A0E08 0%,#3B2314 55%,#6A4728 100%)}
.room-greige .kicker,.room-greige .label{color:var(--clay)}
.room-dark .kicker,.room-photo .kicker,.room-dark .label,.room-photo .label{color:var(--sage)}
.room-greige .mut{color:var(--sage-dk)}
.room-dark .mut,.room-photo .mut{color:#B8A18C}
.room-greige .soft{color:#4A3527}
.room-dark .soft,.room-photo .soft{color:#DDD0C2}
.wrap{max-width:1280px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}
.sh{margin-bottom:clamp(44px,5.5vw,80px);max-width:920px}
.sh .kicker{margin-bottom:22px}
.sh p{margin-top:22px;max-width:58ch}
.sh.center p{margin-left:auto;margin-right:auto}

/* ── nav — flat, dark, inline links; hairline underneath ── */
nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);background:var(--ink3);color:var(--paper);border-bottom:1px solid var(--hair-d)}
nav.scrolled{border-bottom-color:rgba(250,246,238,.2)}
.logo{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1;letter-spacing:0;color:var(--paper);text-decoration:none}
.logo em{font-style:normal;color:inherit}
.navlinks{display:flex;gap:clamp(18px,2.6vw,38px);align-items:center}
.navlinks a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--paper);opacity:.78;text-decoration:none;transition:opacity .3s}
.navlinks a:hover,.navlinks a.on{opacity:1}
.menu-btn{display:none;align-items:center;gap:12px;background:none;border:0;color:var(--paper);cursor:pointer;padding:8px 0;
  font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.ham{display:inline-flex;flex-direction:column;gap:5px}
.ham i{display:block;width:26px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.menu-btn[aria-expanded="true"] .ham i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .ham i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .ham i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.dropdown{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:89;background:var(--ink3);display:none;flex-direction:column;
  justify-content:center;padding:0 var(--gut) 40px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.dropdown.open{opacity:1;pointer-events:auto}
.dropdown a{font-family:var(--serif);font-weight:500;font-size:clamp(32px,8.6vw,50px);line-height:1.05;color:var(--paper);text-decoration:none;
  padding:13px 0;border-bottom:1px solid var(--hair-d);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dropdown a:first-child{border-top:1px solid var(--hair-d)}
.dropdown a span{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);white-space:nowrap}
@media(max-width:900px){
  .navlinks a{display:none}
  .menu-btn{display:flex}
  .dropdown{display:flex}
  .logo{font-size:27px}
}

/* ── buttons — outlined pill by default; .btn-fill is the espresso block ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 36px;border-radius:var(--pill);border:1px solid currentColor;
  background:transparent;color:inherit;font-family:var(--sans);font-size:11.5px;line-height:1;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  text-decoration:none;cursor:pointer;text-align:center;transition:background .35s,color .35s,border-color .35s}
.room-dark .btn:hover,.room-photo .btn:hover,.hero .btn:hover,.room-brown .btn:hover{background:var(--paper);color:var(--ink3);border-color:var(--paper)}
.room-greige .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-fill,.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-fill{border-radius:10px;padding:19px 30px;letter-spacing:.14em;font-size:12px}
.room-greige .btn-fill:hover,.room-greige .btn-dark:hover,.btn-fill:hover,.btn-dark:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.room-dark .btn-fill,.room-photo .btn-fill{background:var(--paper);color:var(--ink3);border-color:var(--paper)}
.room-dark .btn-fill:hover,.room-photo .btn-fill:hover{background:var(--sage);border-color:var(--sage);color:var(--ink3)}
.btn-line{background:transparent}
/* .go — small uppercase text link, hairline underline */
.go{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid currentColor;transition:color .3s,border-color .3s}
.room-dark .go:hover,.room-photo .go:hover,.trip a:hover .go{color:var(--sage)}
.room-greige .go:hover{color:var(--clay)}

/* ── photo frame — the has-img system. A real photo: class="frame has-img" + inline background-image.
      Square corners, no shadow, a light tonal grade so mixed shots read as one set. ── */
.frame{position:relative;overflow:hidden;border-radius:var(--r);display:flex;align-items:center;justify-content:center;text-align:center;
  background:#1E1917 center/cover no-repeat;color:var(--sage);isolation:isolate}
.frame::after{content:'';position:absolute;width:54%;aspect-ratio:1;left:50%;top:46%;transform:translate(-50%,-50%);z-index:0;opacity:.08;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23D8B69C' stroke-width='1.1'%3E%3Cpath d='M50 4 58 31 85 23 67 45 96 50 67 55 85 77 58 69 50 96 42 69 15 77 33 55 4 50 33 45 15 23 42 31Z'/%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3C/g%3E%3C/svg%3E")}
.frame .ticks{display:none}
.frame .cap{position:relative;z-index:1;padding:24px;max-width:84%}
.frame .cap .tag{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-bottom:10px}
.frame .cap .tag::before{content:'❋';margin-right:8px;opacity:.8}
.frame .cap .note{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.35;opacity:.85;margin:0;max-width:none}
.f-dark{background-color:#1E1512}.f-clay{background-color:#4E3222}.f-sage{background-color:#7E624C}.f-parch{background-color:#C9B8A3;color:#4A3527}.f-gold{background-color:#6E5030}
.frame.has-img .cap,.frame.has-img::after{display:none}
.frame.has-img{filter:saturate(.9) sepia(.1) contrast(1.03)}
.frame.has-img::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(139,90,60,.08);mix-blend-mode:multiply}
.frame.has-img.plain{filter:none}
.frame.has-img.plain::before{display:none}
/* a photo that fills a whole room — heavy espresso gradient so cream type sits on it */
.room-bg.frame{filter:saturate(.85) sepia(.12) contrast(1.02)}
.room-bg.frame::before{mix-blend-mode:normal;background:linear-gradient(180deg,rgba(21,20,20,.46) 0%,rgba(21,20,20,.62) 50%,rgba(21,20,20,.9) 100%)}

/* ── inner-page hero — a photo room with the headline set low, like a title card ── */
.phero{position:relative;min-height:min(84vh,820px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;
  padding:clamp(140px,22vh,220px) var(--gut) clamp(56px,7vw,92px);background:var(--ink3);color:var(--paper)}
.phero .phero-img{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;filter:saturate(.85) sepia(.12) contrast(1.02);
  animation:heroZoom 9s var(--ease) both}
.phero .phero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,20,20,.3) 0%,rgba(21,20,20,.5) 45%,rgba(21,20,20,.92) 100%)}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.phero>*{position:relative;z-index:1}
.phero .kicker{color:var(--sage);margin-bottom:26px}
.phero h1{font-size:clamp(50px,8.4vw,120px);line-height:.97;letter-spacing:-.014em;max-width:15ch}
.phero p{margin-top:28px;max-width:58ch}
.phero .sub-caps{color:#DDD0C2}

/* ── split room — text one side, photo flush to the viewport edge on the other ── */
.rs{display:grid;grid-template-columns:1fr 1fr;min-height:min(88vh,880px)}
.rs .rs-txt{padding:clamp(64px,8vw,128px) clamp(28px,6vw,100px);display:flex;flex-direction:column;justify-content:center}
.rs .rs-txt>*+*{margin-top:22px}
.rs .rs-txt .kicker+*{margin-top:24px}
.rs .rs-txt .btn,.rs .rs-txt .btn-fill{align-self:flex-start;margin-top:34px}
.rs .rs-txt p{max-width:54ch}
.rs .rs-img{position:relative;min-height:min(60vh,600px)}
.rs .rs-img .frame{position:absolute;inset:0}
.rs.rev .rs-img{order:-1}
.rs .rs-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px clamp(20px,3vw,40px);font-family:var(--serif);font-style:italic;font-size:15px;color:#E3D3BF;
  background:linear-gradient(180deg,transparent,rgba(21,20,20,.72))}
@media(max-width:880px){
  .rs{grid-template-columns:1fr;min-height:0}
  .rs .rs-img{min-height:0;aspect-ratio:4/5;order:1}
  .rs.rev .rs-img{order:1}
  .rs.img-first .rs-img{order:-1}
  .rs .rs-txt{padding:60px var(--gut) 72px}
}

/* ── triptych — three photos edge to edge, text set into the shade at the bottom ── */
.trip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink3)}
.trip a{position:relative;display:block;aspect-ratio:3/4;color:var(--paper);text-decoration:none;overflow:hidden;isolation:isolate}
.trip a .frame{position:absolute;inset:0;transition:transform 1.8s var(--ease)}
.trip a:hover .frame{transform:scale(1.045)}
.trip a::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(21,20,20,.06) 34%,rgba(21,20,20,.82) 100%)}
.trip .tb{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(24px,3vw,44px)}
.trip .num{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1;color:var(--sage);margin-bottom:12px}
.trip h3{font-size:clamp(38px,3.8vw,56px);margin-bottom:12px}
.trip p{font-size:14.5px;line-height:1.55;max-width:36ch;color:#DDD0C2;font-weight:400}
.trip .go{margin-top:18px}
@media(max-width:880px){.trip{grid-template-columns:1fr}.trip a{aspect-ratio:4/3}}
@media(max-width:480px){.trip a{aspect-ratio:1}}

/* ── tiles — photo above, type below, hairline row for price/action. No card chrome. ── */
.tiles{display:grid;gap:clamp(20px,2.6vw,40px) clamp(18px,2.2vw,32px)}
.tiles-3{grid-template-columns:repeat(3,1fr)}
.tiles-4{grid-template-columns:repeat(4,1fr)}
.tile{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.tile .frame{aspect-ratio:4/5;margin-bottom:22px;transition:opacity .5s var(--ease)}
.tile.sq .frame{aspect-ratio:1}
.tile.land .frame{aspect-ratio:3/2}
.tile.four3 .frame{aspect-ratio:4/3}
.tile:hover .frame{opacity:.86}
.tile .meta{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.tile h3{font-size:clamp(26px,2.4vw,34px);margin:8px 0 6px;line-height:1.05}
.tile .ing{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.4}
.tile p{font-size:15px;line-height:1.55;margin-top:8px;font-weight:400}
.tile .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--hair-l)}
.tile .row:not(:first-child){margin-top:18px}
.tile p+.row{margin-top:20px}
.room-dark .tile .row{border-color:var(--hair-d)}
.tile .price{font-family:var(--serif);font-size:23px;line-height:1}
.tile-custom .frame{background:var(--ink);color:var(--paper);align-items:flex-end;justify-content:flex-start;text-align:left;padding:26px}
.tile-custom .frame::after{display:none}
.tile-custom .frame .cx{position:relative;z-index:1}
.tile-custom .frame .cx b{display:block;font:400 clamp(30px,2.6vw,38px)/1 var(--serif);margin-bottom:10px}
.tile-custom .frame .cx span{font-size:13px;line-height:1.5;color:#DDD0C2;font-weight:400;display:block;max-width:26ch}
.room-dark .tile-custom .frame{background:var(--parch);color:var(--ink)}
.room-dark .tile-custom .frame .cx span{color:#4A3527}
@media(max-width:1000px){.tiles-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){.tiles-3{grid-template-columns:1fr}}
@media(max-width:520px){.tiles-4{grid-template-columns:1fr}}

/* ── hairline list — editorial rows instead of cards ── */
.hl{list-style:none}
.hl li{display:grid;grid-template-columns:auto 1fr auto;gap:8px 30px;align-items:baseline;padding:24px 0;border-top:1px solid var(--hair-l)}
.hl li:last-child{border-bottom:1px solid var(--hair-l)}
.room-dark .hl li,.room-photo .hl li{border-color:var(--hair-d)}
.hl .n{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1;opacity:.7;min-width:2.2ch}
.hl h4{font-size:clamp(24px,2.2vw,30px);line-height:1.05}
.hl p{font-size:14.5px;line-height:1.5;margin-top:6px;font-weight:400}
.hl .st{font-size:10px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;opacity:.75;font-weight:500}
@media(max-width:600px){.hl li{grid-template-columns:auto 1fr}.hl .st{grid-column:2}}

/* ── proof strip — outlets set like wordmarks, tiny captions beneath ── */
.proof{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 40px;padding:34px var(--gut);border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d)}
.proof>div{text-align:center;flex:1 1 130px}
.proof b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,27px);line-height:1;letter-spacing:-.01em}
.proof span{display:block;margin-top:9px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;opacity:.7;font-weight:500}
.room-greige .proof{border-color:var(--hair-l)}
.proof.inset{padding-left:0;padding-right:0}
@media(max-width:640px){.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 10px;padding:28px var(--gut)}.proof b{font-size:18px}}

/* ── the 4:44 room — an oversized numeral behind the message (drifts with scroll, see dawn.js) ── */
.four{position:relative;overflow:hidden;text-align:center}
.four .big{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:clamp(170px,30vw,420px);line-height:1;
  letter-spacing:-.04em;color:rgba(250,246,238,.07);pointer-events:none;will-change:transform;z-index:0;white-space:nowrap}
.room-greige.four .big{color:rgba(44,17,7,.06)}
.four .in{position:relative;z-index:1}
.four .sh{margin-left:auto;margin-right:auto;text-align:center}
.steps{display:flex;gap:14px 34px;justify-content:center;flex-wrap:wrap;margin:8px 0 38px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.steps b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;text-transform:none;letter-spacing:0;margin-right:8px}
.room-photo .steps b,.room-dark .steps b{color:var(--sage)}
.room-greige .steps b{color:var(--clay)}

/* ── impact numbers ── */
.impact{display:flex;gap:44px;flex-wrap:wrap;margin:10px 0 8px}
.impact div b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(48px,4.6vw,68px);line-height:1;letter-spacing:-.02em}
.impact div span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.75}

/* ── prose — long-form, large and light ── */
.prose{max-width:720px;margin:0 auto}
.prose p{font-size:clamp(18px,1.4vw,21px);line-height:1.7;margin-bottom:28px;font-weight:300}
.prose h2{font-size:clamp(36px,4vw,54px);margin:64px 0 26px}
.prose blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3vw,38px);line-height:1.25;margin:52px 0;letter-spacing:-.005em}
.room-dark .prose p{color:#E3D8CB}

/* ── quote room ── */
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,4.2vw,56px);line-height:1.15;letter-spacing:-.01em;max-width:22ch;margin:0 auto}
.quote cite{display:block;margin-top:30px;font-style:normal;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.75}

/* ── newsletter — a single underlined field ── */
.news form{display:flex;align-items:center;gap:0;max-width:560px;margin:38px auto 0;border-bottom:1px solid var(--hair-d)}
.news input{flex:1;min-width:0;background:none;border:0;color:inherit;font-family:var(--sans);font-size:17px;font-weight:300;padding:16px 0;outline:none}
.news input::placeholder{color:rgba(250,246,238,.5)}
.news button{background:none;border:0;color:inherit;font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer;padding:16px 0 16px 22px;transition:color .3s}
.news button:hover{color:var(--sage)}
.room-greige .news form,.room-greige.news form{border-color:var(--hair-l)}
.room-greige .news input::placeholder,.room-greige.news input::placeholder{color:rgba(44,17,7,.5)}
.room-greige .news button:hover,.room-greige.news button:hover{color:var(--clay)}

/* ── FAQ ── */
.faq{max-width:860px;margin:0 auto}
.faq details{border-top:1px solid var(--hair-d);padding:26px 0}
.faq details:last-child{border-bottom:1px solid var(--hair-d)}
.room-greige .faq details{border-color:var(--hair-l)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:clamp(22px,2.2vw,29px);line-height:1.1;display:flex;justify-content:space-between;align-items:center;gap:24px;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--sans);font-weight:300;font-size:24px;line-height:1;flex:none;opacity:.7;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--sage)}
.room-greige .faq summary:hover{color:var(--clay)}
.faq p{font-size:16px;line-height:1.6;margin-top:16px;max-width:64ch;font-weight:400}

/* ── footer — the brown room ── */
footer{position:relative;overflow:hidden;padding:clamp(84px,9vw,124px) var(--gut) 34px}
.foot{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:48px 40px}
footer .ftit{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1;margin-bottom:22px;color:var(--paper)}
footer a{display:block;color:#E3D3BF;text-decoration:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin-bottom:13px;transition:color .25s}
footer a:hover{color:#fff}
footer .fmark{width:104px;height:auto;filter:invert(1) sepia(.3) brightness(.95);opacity:.85;margin:0 0 18px}
footer .fcol-right{text-align:right}
footer .fwm{font-family:var(--serif);font-weight:500;font-size:clamp(46px,6.4vw,96px);line-height:.98;letter-spacing:-.012em;color:var(--paper);margin-bottom:22px}
footer .blurb{font-size:15px;line-height:1.6;max-width:46ch;color:#E3D3BF;font-weight:300;margin:0 0 16px auto}
footer .byline{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--sage);margin-bottom:14px;line-height:1.3}
footer .fcol-right a{display:inline-block;margin:0 0 0 26px}
.legal{max-width:1280px;margin:64px auto 0;padding-top:20px;border-top:1px solid rgba(250,246,238,.16);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#CDB9A2;font-weight:500}
@media(max-width:880px){
  .foot{grid-template-columns:1fr 1fr}
  footer .fcol-right{grid-column:1/-1;text-align:left;order:-1}
  footer .blurb{margin-left:0}
  footer .fcol-right a{margin:0 26px 0 0}
}

/* ── reveal — a quiet fade; the drama is scale and contrast, not motion ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.tiles>.reveal:nth-child(2),.trip>.reveal:nth-child(2),.hl>.reveal:nth-child(2),.values>.reveal:nth-child(2),.proof>.reveal:nth-child(2){transition-delay:.1s}
.tiles>.reveal:nth-child(3),.trip>.reveal:nth-child(3),.hl>.reveal:nth-child(3),.values>.reveal:nth-child(3),.proof>.reveal:nth-child(3){transition-delay:.2s}
.tiles>.reveal:nth-child(4),.hl>.reveal:nth-child(4),.values>.reveal:nth-child(4),.proof>.reveal:nth-child(4){transition-delay:.3s}
.tiles>.reveal:nth-child(5),.proof>.reveal:nth-child(5){transition-delay:.4s}
.tiles>.reveal:nth-child(6),.proof>.reveal:nth-child(6){transition-delay:.5s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ── notice ribbon (optional, unused in this build; dawn.js offsets the nav beneath it) ── */
.ribbon{position:fixed;top:0;left:0;right:0;z-index:99;background:var(--sage);color:var(--ink3);font-size:10px;letter-spacing:.26em;text-transform:uppercase;text-align:center;padding:7px 10px;font-weight:500}

/* ════════════════════════════════════════════════════════════════
   GUIDED BREATHE — floating orb + full-screen guided breath
   (injected on every page by dawn.js — the 4-4-6 timing lives there)
   ════════════════════════════════════════════════════════════════ */
.breathe-orb{position:fixed;bottom:26px;right:26px;z-index:95;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 50% 66%,rgba(236,128,40,.2),rgba(112,66,170,.08) 42%,transparent 64%),rgba(21,20,20,.72);
  backdrop-filter:blur(8px);color:var(--paper);border:1px solid rgba(216,182,156,.6);cursor:pointer;box-shadow:0 0 30px rgba(112,66,170,.16);
  font-family:var(--serif);font-style:italic;font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:background .4s,transform .4s,border-color .4s,color .4s}
.breathe-orb::before,.breathe-orb::after{content:'';position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(216,182,156,.55);animation:orbpulse 6s ease-in-out infinite}
.breathe-orb::after{animation-delay:-3s}
@keyframes orbpulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
.breathe-orb:hover{background:var(--sage);border-color:var(--sage);color:var(--ink3);transform:scale(1.06)}
.breathe-orb .bo-label{position:relative;z-index:1}

.breathe-link{background:none;border:0;border-bottom:1px solid rgba(216,182,156,.45);cursor:pointer;font-family:var(--serif);font-style:italic;
  font-size:19px;line-height:1;color:var(--sage);padding:6px 0;transition:color .3s,border-color .3s}
.breathe-link:hover{color:var(--paper);border-color:var(--paper)}

/* ── the breath tool (v10, 2026-09-29) — the site's ONE breath. Opened by the orb on every page and by "Breathe with
   me" on the home hero; nothing breath-animated runs ambiently anywhere else. The canvas behind the type is drawn by
   BreathViz in dawn.js: one body of smoke that comes in, accumulates, holds alive and flows out on the 4-4-6 clock.
   The ground is the hero's neutral ink (the shader paints the same gradient, so the CSS one is the no-WebGL ground). ── */
.breathe-ov{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 38%,#1A181D,#0B0A0B 76%);opacity:0;pointer-events:none;transition:opacity .8s}
.breathe-ov.open{opacity:1;pointer-events:all}
.breathe-smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.breathe-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;padding:0 20px;pointer-events:none}
.breathe-body>*{pointer-events:auto}
/* closed: nothing inside the overlay may catch a click meant for the page beneath it */
.breathe-ov:not(.open) .breathe-body>*{pointer-events:none}
/* the stage is the body's anchor: the smoke gathers just beneath the cue */
.breathe-stage{position:relative;width:clamp(180px,36vmin,320px);height:clamp(150px,30vmin,270px);display:flex;align-items:center;justify-content:center}
.breathe-cue{position:relative;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,4.6vw,48px);color:var(--paper);letter-spacing:.01em;line-height:1;
  /* five-layer near-black halo: tight 3px/4px keep the hairlines crisp, the 16/34/14px glows darken the warm heart behind the word at inhale/hold peak */
  text-shadow:0 0 3px rgba(11,8,7,.95),0 1px 4px rgba(11,8,7,.9),0 0 16px rgba(11,8,7,.9),0 0 34px rgba(11,8,7,.85),0 3px 14px rgba(11,8,7,.7)}
/* meta tones are the journey's (#DFD1BF caps, bone italic): small type over the body's brightest reach needs the step for 4.5:1 */
.breathe-meta{position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#DFD1BF;text-align:center;padding:0 24px;font-weight:500;
  text-shadow:0 0 2px rgba(11,8,7,.9),0 2px 14px rgba(11,8,7,.8),0 0 36px rgba(11,8,7,.65)}
.breathe-meta .breathe-tip{text-transform:none;font-style:italic;font-family:var(--serif);letter-spacing:0;font-size:15px;color:var(--bone);font-weight:400}
.breathe-close{position:absolute;z-index:2;top:22px;right:26px;background:rgba(21,20,20,.4);border:1px solid rgba(216,182,156,.4);color:#D9C9B6;
  width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer;transition:.3s;line-height:1}
.breathe-close:hover,.breathe-close:focus-visible{background:rgba(216,182,156,.15);color:#fff;outline:none}
/* ── the breath journey — a ruled time axis, not a loader (v9, moved into the tool in v10). Three place-names on a
   4 · 4 · 6 line (the exhale is honestly longer), a point that travels the breath and returns home on the rest, the
   active step's count against its length, the whole-breath clock, and one line in her voice. Karla caps + Cormorant
   numerals, nude hairlines. The smoke behind it is capped by the shader (its well) so #DFD1BF stays ≥4.5:1; the
   near-black halos cut the type through whatever vapour is left. ── */
.journey{position:relative;width:min(560px,88vw);font-variant-numeric:lining-nums tabular-nums;
  text-shadow:0 0 2px rgba(11,8,7,.9),0 2px 14px rgba(11,8,7,.8),0 0 36px rgba(11,8,7,.65)}
.jsteps{list-style:none;display:grid;grid-template-columns:4fr 4fr 6fr;margin:0;padding:0;text-align:left}
.js{display:flex;align-items:baseline;gap:9px;padding:0 10px 9px 9px;border-left:1px solid rgba(216,182,156,.34);
  font-family:var(--sans);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:#DFD1BF;transition:color .6s,border-color .6s}
.js .jn{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;letter-spacing:0;text-transform:none;line-height:1;color:#DFD1BF;white-space:nowrap;transition:color .6s}
.js.on{color:var(--paper);border-left-color:var(--sage)}
.js.on .jn{color:var(--paper)}
.js.out{justify-content:space-between}
.js.out>span:first-child{display:inline-flex;align-items:baseline;gap:9px}
.js .jtot{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;letter-spacing:0;text-transform:none;line-height:1;color:var(--bone);white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.js .jtot span{font-family:var(--sans);font-style:normal;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#DFD1BF}
.jaxis{position:relative;height:1px;background:rgba(216,182,156,.26)}
.jaxis::after{content:'';position:absolute;right:0;bottom:0;width:1px;height:7px;background:rgba(216,182,156,.34)}
.jaxis i{position:absolute;top:50%;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 12px 3px rgba(250,246,238,.5),0 0 2px rgba(21,20,20,.8);transition:left 0s linear}
.jdesc{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--bone);margin:16px auto 0;max-width:48ch;min-height:1.4em;text-align:center;transition:opacity .4s}
/* No WebGL (or a lost context): no smoke — a still breath-glow in the breath's palette (violet heart, blue, a warm
   sun note) that only brightens on the inhale and dims on the exhale (4-4-6, same clock). Reduced-motion visitors
   get the living smoke at a calm pace instead — this glow is only the fallback. */
.breathe-stage.rm::before{content:'';position:absolute;inset:-34%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 56%,rgba(150,96,206,.44),rgba(54,92,186,.2) 30%,rgba(236,128,40,.1) 54%,transparent 72%);
  opacity:.38;transition:opacity 2s ease-in-out}
.breathe-stage.rm[data-phase=in]::before{opacity:1;transition-duration:4s}
.breathe-stage.rm[data-phase=hold]::before{opacity:1;transition-duration:4s}
.breathe-stage.rm[data-phase=out]::before{opacity:.3;transition-duration:6s}
.breathe-ov.still .breathe-smoke{display:none}
@media(prefers-reduced-motion:reduce){.breathe-orb::before,.breathe-orb::after{animation:none}}
@media(max-width:640px){
  .breathe-orb{width:62px;height:62px;bottom:18px;right:18px;font-size:13.5px}
  .breathe-body{gap:22px}
  .breathe-stage{height:clamp(120px,22vmin,200px)}
  .breathe-cue{font-size:clamp(30px,8.6vw,38px)}
  .journey{width:min(560px,88vw)}
  .js{padding:0 6px 8px 7px;gap:7px;font-size:9px;letter-spacing:.2em}
  .js .jn,.js .jtot{font-size:14px}
  .js .jtot span{display:none}
  .jdesc{font-size:17px}
}

/* ════════════════════════════════════════════════════════════════
   TEA QUIZ — mindful custom-blend finder (injected by dawn.js)
   ════════════════════════════════════════════════════════════════ */
.tq-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(11,8,7,.7);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .5s}
.tq-ov.open{opacity:1;pointer-events:all}
.tq-modal{background:var(--parch);color:var(--ink);border-radius:4px;max-width:580px;width:100%;
  padding:46px 44px 40px;position:relative;max-height:90vh;overflow:auto}
.tq-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:26px;color:var(--sage-dk);cursor:pointer;line-height:1}
.tq-close:hover{color:var(--clay)}
.tq-eyebrow{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);font-weight:500}
.tq-dots{display:flex;gap:7px;margin:14px 0 28px}
.tq-dots i{width:22px;height:1px;background:rgba(44,17,7,.2);transition:background .3s}
.tq-dots i.on{background:var(--ink)}
.tq-q{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,42px);line-height:1.05;margin-bottom:10px;letter-spacing:-.01em}
.tq-q em{font-style:italic;color:inherit}
.tq-sub{color:var(--sage-dk);font-size:15px;font-style:italic;font-family:var(--serif);margin-bottom:22px}
.tq-opts{display:flex;flex-direction:column}
.tq-opt{text-align:left;background:none;border:0;border-top:1px solid var(--hair-l);padding:17px 0;font-family:var(--sans);font-weight:400;
  font-size:16px;color:var(--ink);cursor:pointer;transition:.25s;display:flex;justify-content:space-between;align-items:center;gap:14px}
.tq-opt:last-child{border-bottom:1px solid var(--hair-l)}
.tq-opt:hover{color:var(--clay);padding-left:8px}
.tq-opt .em{font-family:var(--serif);font-style:italic;color:var(--sage-dk);font-size:14px;white-space:nowrap}
.tq-result{text-align:center}
.tq-result .tq-eyebrow{display:block;margin-bottom:12px}
.tq-rname{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,56px);color:var(--ink);margin-bottom:8px;letter-spacing:-.015em;line-height:1}
.tq-rname em{font-style:italic;color:inherit}
.tq-rbase{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-bottom:18px;font-weight:500}
.tq-rdesc{color:#3E2B20;font-size:16.5px;line-height:1.65;margin-bottom:12px;max-width:440px;margin-left:auto;margin-right:auto;font-weight:300}
.tq-ring{font-size:15px;color:var(--sage-dk);font-style:italic;font-family:var(--serif);margin-bottom:26px}
.tq-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tq-retake{display:block;margin:20px auto 0;background:none;border:none;color:var(--sage-dk);font-family:var(--sans);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;font-weight:500}
.tq-retake:hover{color:var(--clay)}
@media(max-width:520px){.tq-modal{padding:38px 26px 32px}}

/* ── reduced motion, site-wide ── */
@media(prefers-reduced-motion:reduce){
  .phero .phero-img{animation:none}
  .trip a .frame,.trip a:hover .frame{transform:none;transition:none}
  .reveal{transition-delay:0s!important}
  .btn,.tile .frame{transition:none}
}

/* ════════════════════════════════════════════════════════════════
   v5.1 DISPLAY FACE PASS — Cormorant Garamond
   Cormorant is a true old-style: small x-height, long extenders, fine
   hairlines. On near-black its 400 weight looks starved, and at 15–17px
   its italics vanish. So every element set in var(--serif) carries 500
   (the wordmark 600), and the small serif accents step up one size.
   Kept in one block, last in the file, so it wins on source order and
   the v5 rules above stay legible as the original system.
   ════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,.fr,.ital,.dropdown a,.frame .cap .note,.rs-cap,.trip .num,.tile .ing,.tile .price,.tile-custom .frame .cx b,
.hl .n,.proof b,.steps b,.impact div b,.prose blockquote,.quote blockquote,footer .ftit,footer .fwm,footer .byline,.four .big,
.faq summary,.breathe-orb,.breathe-link,.breathe-cue,.breathe-meta .breathe-tip,.tq-q,.tq-sub,.tq-opt .em,.tq-rname,.tq-ring{font-weight:500}
.logo{font-weight:600}
.four .big,.tile .price,.impact div b,.proof b,.hl .n,.trip .num{font-variant-numeric:lining-nums}   /* 4:44, prices, stats never drop to old-style figures */
.frame .cap .note{font-size:18px}
.rs-cap{font-size:16px}
.trip .num{font-size:17px}
.tile .ing{font-size:16.5px}
.tile .price{font-size:25px}
.hl .n{font-size:16px}
.proof b{font-size:clamp(22px,2vw,29px)}
.steps b{font-size:16px}
footer .byline{font-size:18px}
.breathe-orb{font-size:16px}
.breathe-link{font-size:21px}
.breathe-meta .breathe-tip{font-size:16px}
.tq-sub,.tq-ring{font-size:16px}
.tq-opt .em{font-size:15px}
.prose blockquote{line-height:1.22}
.quote blockquote{line-height:1.18}
@media(max-width:640px){.breathe-orb{font-size:14.5px}}