/* ============================================================
   KHALEDAR — a WO! Studio case experience  (rebuild v2)
   Faithful to the brand book: Bone/Ink editorial duotone, one Gold
   thread, one Sage pulse. Cormorant (stop) × IBM Plex Sans (move).
   Signature interaction = the LOGO FORMULA built on the real mark.
   Law: ≥60% empty · isolation = hierarchy · flat colour, no gradients.
   ============================================================ */

:root{
  --ink:#1C1A17;        /* all type, mark default, dark grounds — warm near-black */
  --bone:#F2EDE4;       /* all light grounds — warm off-white, never #fff */
  --gold:#9C7A4B;       /* premium accent: thin rules / one detail, never a fill */
  --sage:#2A6B5C;       /* links, CTA, one accent per view */
  --sage-dk:#1D4A40;
  --surface:#E8E2D8;    /* cards, secondary panels */
  --mist:#615C53;       /* ALL body copy on light — darkened to clear WCAG AA (5.4:1 on Bone) */
  --mist-soft:#7A7570;  /* the book's lighter mist — labels/meta only, never long-form body */
  --charcoal:#3D3A35;
  --dim-ink:#4A463E;    /* logo-formula dimmed strokes on ink — clearly recessive so the lit K pops */

  --bone-70:rgba(242,237,228,.72);
  --bone-46:rgba(242,237,228,.46);
  --bone-20:rgba(242,237,228,.2);
  --ink-12:rgba(28,26,23,.12);
  --ink-07:rgba(28,26,23,.07);

  --f-disp:"Cormorant", Georgia, serif;
  --f-sans:"IBM Plex Sans", system-ui, sans-serif;
  --f-ar:"IBM Plex Sans Arabic","IBM Plex Sans", sans-serif;

  --pad:clamp(1.25rem, 5.5vw, 7rem);
  --maxw:1320px;
  --e:cubic-bezier(.22,.61,.36,1);
  --e-io:cubic-bezier(.4,0,.1,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.kh{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--f-sans); font-weight:400; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
em{font-style:italic}
::selection{background:var(--ink); color:var(--bone)}

/* faint paper grain only — no gradients, no blooms (brand law) */
.kh-grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* spark cursor — a tiny ink diamond */
.kh-spark{position:fixed; top:0; left:0; width:7px; height:7px; z-index:70; pointer-events:none;
  transform:translate(-50%,-50%) rotate(45deg); opacity:0; background:var(--ink); transition:opacity .3s,width .2s,height .2s,background .2s}
body.has-spark .kh-spark{opacity:.8}
.kh-spark.is-hot{width:22px; height:22px; background:transparent; box-shadow:inset 0 0 0 1px var(--gold)}

/* reading progress — a thin sage line (accent rule, ≤ the law) */
.kh-prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:65; background:transparent}
.kh-prog i{display:block; height:100%; width:0; background:var(--sage)}

/* ---------- nav ---------- */
.kh-nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.9rem,2vw,1.5rem) var(--pad); transition:transform .5s var(--e), opacity .5s, color .5s; color:var(--ink); mix-blend-mode:difference}
.kh-nav, .kh-nav a{color:#cfcabf}                 /* difference blend → reads ink on bone, bone on ink */
.kh-nav.is-hidden{transform:translateY(-120%); opacity:0}
.kh-nav__brand{display:inline-flex; align-items:center; gap:.6rem}
.kh-nav__mark{width:24px; height:24px}
.kh-nav__wm{display:block; height:13px; width:auto; color:#cfcabf}
.kh-nav__wm svg{display:block; height:100%; width:auto}
.kh-nav__case{font-family:var(--f-sans); font-weight:500; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase}
.kh-nav__back{font-family:var(--f-sans); font-weight:500; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; display:inline-flex; gap:.4em; align-items:center}
.kh-nav__back i{font-style:normal}
@media (max-width:760px){.kh-nav__case{display:none}}

.kh-badge{position:fixed; left:var(--pad); bottom:clamp(.9rem,2.4vw,1.6rem); z-index:50; display:inline-flex; align-items:baseline; gap:.4em;
  opacity:.6; transition:opacity .3s; font-family:var(--f-sans); font-weight:500; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); mix-blend-mode:difference}
.kh-badge:hover{opacity:1}
.kh-badge__wo{font-family:var(--f-disp); font-size:1rem; letter-spacing:0; color:#cfcabf}
@media (max-width:760px){.kh-badge{display:none}}

/* ---------- shared primitives ---------- */
.kh-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
main{position:relative; z-index:1}
section{position:relative}

/* section label — tracked caps, diamond mark prefix, with the thin rule ABOVE */
.kh-label{font-family:var(--f-sans); font-weight:500; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); margin:0 0 1.8rem; display:flex; align-items:center; gap:.85em}
.kh-label::before{content:""; width:7px; height:7px; transform:rotate(45deg); background:var(--gold); flex:none}
.kh-label--center{justify-content:center}
.on-ink .kh-label{color:var(--bone-46)}

/* the thin structural rule that sits above a heading block */
.kh-rule{height:1px; background:var(--ink-12); margin-bottom:clamp(2rem,5vh,3.4rem)}
.on-ink .kh-rule{background:var(--bone-20)}

/* reveal + split */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity 1.1s var(--e), transform 1.1s var(--e)}
[data-reveal].in{opacity:1; transform:none}
[data-split]{overflow:hidden}
[data-split] .w{display:inline-block; opacity:0; transform:translateY(.85em); transition:opacity .85s var(--e), transform .85s var(--e)}
[data-split].in .w{opacity:1; transform:none}

/* dark (chapter-opener) section base */
.on-ink{background:var(--ink); color:var(--bone)}
.on-ink .kh-mist{color:var(--bone-70)}

/* diamond bullet list (brand: never circles) */
.kh-list{list-style:none; padding:0; margin:0}
.kh-list li{position:relative; padding-left:1.6em; margin:.5em 0; color:var(--mist)}
.kh-list li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; transform:rotate(45deg); background:var(--gold)}

/* tag — 3px radius, never a pill */
.kh-tag{display:inline-block; font-family:var(--f-sans); font-weight:500; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.42em .8em; border-radius:3px; border:1px solid currentColor; line-height:1}

/* ============================================================
   THE SPINE — pinned signature: seed → construction → mark → formula
   ============================================================ */
.kh-spine{height:480vh; position:relative; background:var(--ink); color:var(--bone)}
.kh-spine__pin{position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center}
.kh-spine__stage{position:relative; width:min(92vmin,820px); height:min(92vmin,820px); display:grid; place-items:center}
.kh-spine-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

/* seed circles + gold diamond (p.4) */
.kh-seed{fill:none; stroke:rgba(242,237,228,.34); stroke-width:.5; opacity:0}
.kh-golddia{fill:var(--gold); opacity:0; filter:drop-shadow(0 0 6px rgba(156,122,75,.5))}

/* construction grid (p.11) — sage drafting lines, drawn on */
[data-grid]{color:var(--sage); opacity:0}
[data-grid] path{stroke-dasharray:var(--gl); stroke-dashoffset:var(--gl)}

/* the mark groups */
[data-markwrap]{opacity:0}
[data-markwrap] [data-dar],
[data-markwrap] [data-core],
[data-markwrap] [data-k]{transition:fill .6s var(--e), opacity .5s var(--e)}
/* drawing state: paths show as drawn outlines before fill arrives (set inline by JS) */

/* spine copy layers */
.kh-spine__copy{position:absolute; inset:auto 0 8vh 0; text-align:center; pointer-events:none}
.kh-spine__word{font-family:var(--f-disp); font-weight:300; font-size:clamp(2.6rem,7vw,5rem); letter-spacing:.18em; margin:0; opacity:0; color:var(--bone)}
.kh-spine__word b{color:var(--gold); font-weight:300}
.kh-spine__note{font-family:var(--f-sans); font-size:.92rem; color:var(--bone-70); margin:.7rem auto 0; max-width:34ch; opacity:0; transition:opacity .5s}
.kh-spine__phaselab{position:absolute; top:10vh; left:0; right:0; text-align:center; font-family:var(--f-sans); font-weight:500; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-46); opacity:0}

/* the title block (after assembly) — anchored LOW so the mark sits clear above it (vertical lockup) */
.kh-spine__title{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:clamp(12vh,16vh,18vh); text-align:center; pointer-events:none; opacity:0}
.kh-spine__pre{font-family:var(--f-sans); font-weight:500; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-46); margin:0 0 1.4rem}
.kh-spine__brand{display:block; width:min(60vw,560px); margin:0 auto; color:var(--bone)}
.kh-spine__brand svg{display:block; width:100%; height:auto}
.kh-spine__tag{font-family:var(--f-disp); font-style:italic; font-weight:300; font-size:clamp(1.1rem,2.6vw,1.7rem); color:var(--bone-70); margin:.4rem 0 0}
.kh-spine__cue{position:absolute; bottom:5vh; left:0; right:0; text-align:center; font-family:var(--f-sans); font-weight:500; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-46)}
.kh-spine__cue i{font-style:normal; display:block; margin-top:.5em; animation:khbob 2s var(--e) infinite}
@keyframes khbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============================================================
   META strip (right after the spine)
   ============================================================ */
.kh-meta{padding:clamp(3rem,8vh,6rem) var(--pad); background:var(--ink); color:var(--bone)}
.kh-meta__grid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border-top:1px solid var(--bone-20)}
.kh-meta__grid li{list-style:none; padding:1.2rem 1.2rem 0 0}
.kh-meta__grid b{display:block; font-family:var(--f-sans); font-weight:500; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.6em}
.kh-meta__grid span{font-size:.9rem; color:var(--bone-70)}
@media (max-width:680px){.kh-meta__grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   editorial section shell — left-weighted, mostly empty
   ============================================================ */
.kh-sec{padding:clamp(6rem,15vh,12rem) var(--pad)}
.kh-sec__in{max-width:var(--maxw); margin:0 auto}
.kh-col{max-width:46ch}                          /* left-weighted narrow column */
.kh-h{font-family:var(--f-disp); font-weight:300; line-height:1.08; margin:0; letter-spacing:-.005em}
.kh-h--xl{font-size:clamp(2.6rem,8vw,6rem)}
.kh-h--l{font-size:clamp(2rem,5.4vw,3.8rem)}
.kh-h--m{font-size:clamp(1.6rem,4vw,2.8rem)}
.kh-body{font-size:clamp(1rem,1.5vw,1.16rem); color:var(--mist); max-width:52ch}
.on-ink .kh-body{color:var(--bone-70)}
.kh-body em{color:var(--ink)}
.on-ink .kh-body em{color:var(--bone)}

/* ---------- 02 · the name ---------- */
.kh-name__build{display:flex; align-items:flex-start; gap:clamp(1.6rem,6vw,5rem); flex-wrap:wrap; margin:0 0 clamp(2.6rem,7vh,4.4rem)}
.kh-name__root{display:flex; flex-direction:column; gap:.35rem}
.kh-name__ar{font-family:var(--f-ar); font-weight:300; font-size:clamp(2.4rem,7vw,4.4rem); color:var(--gold); line-height:1}
.kh-name__rom{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.4rem,3vw,2.1rem)}
.kh-name__gloss{font-size:.82rem; color:var(--mist)}
.kh-name__plus{font-family:var(--f-disp); font-weight:300; font-size:clamp(1.8rem,4vw,3rem); color:var(--ink-12); align-self:center; padding-top:.5em}
.kh-name__result{font-family:var(--f-disp); font-weight:300; line-height:1.16; font-size:clamp(1.8rem,4.6vw,3.4rem); max-width:24ch; margin:0 0 1.6rem}

/* ---------- 03 · the idea (ink) ---------- */
.kh-idea__quote{font-family:var(--f-disp); font-weight:300; line-height:1.04; font-size:clamp(2.8rem,9vw,7rem); margin:0 0 2rem; letter-spacing:-.01em}
.kh-idea__triad{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bone-20); border:1px solid var(--bone-20); margin:clamp(2.6rem,7vh,4.6rem) 0}
.kh-tri{background:var(--ink); padding:clamp(1.4rem,3vw,2.4rem)}
.kh-tri__n{font-family:var(--f-sans); font-weight:500; font-size:.6rem; letter-spacing:.18em; color:var(--gold); display:block; margin-bottom:1.4rem}
.kh-tri b{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.3rem); display:block; color:var(--bone)}
.kh-tri i{font-style:normal; font-size:.82rem; color:var(--bone-46)}
.kh-idea__filter{font-family:var(--f-sans); font-weight:500; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-46); text-align:center; margin:0 0 1.2rem}
/* diamond framing device around the rejection-filter line (max 1/comp) */
.kh-frame{display:block; max-width:30ch; margin:0 auto; padding:clamp(1.6rem,4vw,2.6rem); position:relative; text-align:center}
.kh-frame::before{content:""; position:absolute; inset:0; border:1px solid var(--gold); transform:rotate(45deg) scale(.72); opacity:.5}
.kh-frame__t{font-family:var(--f-disp); font-style:italic; font-weight:400; font-size:clamp(1.4rem,3.6vw,2.4rem); color:var(--gold); line-height:1.2; margin:0; position:relative}

/* ---------- 04 · composition ---------- */
.kh-comp__pyr{display:flex; flex-direction:column; border-top:1px solid var(--ink-12); margin-top:clamp(2.4rem,6vh,4rem)}
.kh-row{appearance:none; background:none; border:0; border-bottom:1px solid var(--ink-12); cursor:pointer; text-align:left; color:inherit;
  display:grid; grid-template-columns:8rem 1fr; align-items:baseline; gap:.3rem 1.6rem; padding:clamp(1.1rem,2.6vw,1.8rem) 0; position:relative; transition:padding-left .4s var(--e)}
.kh-row::before{content:""; position:absolute; left:-1.5rem; top:50%; width:6px; height:6px; transform:translateY(-50%) rotate(45deg) scale(0); background:var(--gold); transition:transform .35s var(--e)}
.kh-row:hover, .kh-row.is-active{padding-left:1.5rem}
.kh-row:hover::before, .kh-row.is-active::before{transform:translateY(-50%) rotate(45deg) scale(1)}
.kh-row__k{font-family:var(--f-sans); font-weight:500; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist)}
.kh-row__note{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.5rem,3.6vw,2.6rem); grid-column:2}
.kh-row__desc{grid-column:2; font-size:.9rem; color:var(--mist); max-width:48ch; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s var(--e), opacity .5s var(--e), margin .4s}
.kh-row:hover .kh-row__desc, .kh-row.is-active .kh-row__desc{max-height:5em; opacity:1; margin-top:.5rem}
.kh-row--sig .kh-row__k{color:var(--sage)}
.kh-row--sig .kh-row__note{font-style:italic; color:var(--sage-dk)}
.kh-comp__iso{font-family:var(--f-disp); font-style:italic; font-weight:300; font-size:clamp(1.7rem,4.4vw,3rem); line-height:1.18; max-width:24ch; margin:clamp(3rem,8vh,5rem) 0 0}
@media (max-width:560px){.kh-row{grid-template-columns:1fr}.kh-row__note,.kh-row__desc{grid-column:1}}

/* ---------- 05 · the object (ink) ---------- */
.kh-obj__hero{position:relative; margin:0 0 clamp(4rem,10vh,8rem)}
.kh-obj__kv{width:100%; height:clamp(60vh,76vh,88vh); object-fit:cover}
.kh-obj__kvcap{position:absolute; left:var(--pad); bottom:clamp(1rem,3vw,2.2rem); margin:0; font-family:var(--f-disp); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,2.6vw,1.9rem); color:var(--bone); max-width:20ch; text-shadow:0 1px 30px rgba(0,0,0,.5)}
.kh-obj__anat{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:center; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.kh-anat{position:relative; margin:0; background:var(--surface); overflow:hidden}
.kh-anat__img{width:100%; mix-blend-mode:multiply}
.kh-anat__pt{position:absolute; left:0; top:var(--y); transform:translateY(-50%); display:flex; align-items:center; gap:.7rem; padding-left:clamp(.7rem,2vw,1.3rem);
  font-family:var(--f-sans); font-weight:500; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:0; transition:opacity .6s var(--e)}
.kh-anat.is-on .kh-anat__pt{opacity:1}
.kh-anat__pt i{width:clamp(1.2rem,5vw,2.8rem); height:1px; background:var(--gold)}
.kh-anat__pt b{color:var(--gold); margin-right:.3em}
.kh-obj__mat{list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:1px; border-top:1px solid var(--bone-20)}
.kh-obj__mat li{padding:1rem 1rem 0 0}
.kh-obj__mat b{display:block; font-family:var(--f-sans); font-weight:500; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.4em}
.kh-obj__mat span{font-size:.9rem; color:var(--bone-70)}
@media (max-width:820px){.kh-obj__anat{grid-template-columns:1fr; gap:2.4rem}}

/* ---------- 06 · collection ---------- */
.kh-coll__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2.2rem); margin-top:clamp(2.6rem,7vh,4.4rem)}
.kh-card{margin:0; transition:transform .5s var(--e)}
.kh-card:hover{transform:translateY(-6px)}
.kh-card__shot{background:var(--surface); aspect-ratio:4/5; overflow:hidden}
.kh-card__shot img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; transition:transform 1.1s var(--e)}
.kh-card:hover .kh-card__shot img{transform:scale(1.04)}
.kh-card figcaption{padding:1.2rem 0 0}
.kh-card__tag{margin-bottom:.9rem; color:var(--mist)}
.kh-card__tag--gold{color:var(--gold)}
.kh-card__tag--sage{color:var(--sage)}
.kh-card__name{font-family:var(--f-disp); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 .35rem}
.kh-card__note{font-size:.86rem; color:var(--mist); margin:0}
@media (max-width:760px){.kh-coll__grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto}}

/* ---------- 07 · system ---------- */
.kh-sw{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--ink-12); border:1px solid var(--ink-12); margin-top:clamp(2rem,5vh,3rem)}
.kh-sw__c{background:var(--bone); padding:.9rem .8rem 1rem; display:flex; flex-direction:column; gap:.4rem}
.kh-sw__c b{height:clamp(60px,11vh,110px); background:var(--s); display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.kh-sw__c span{font-size:.82rem}
.kh-sw__c i{font-family:var(--f-sans); font-style:normal; font-size:.58rem; color:var(--mist); letter-spacing:.03em}
.kh-sys__split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); margin-top:clamp(3rem,8vh,5rem)}
.kh-type__aa{font-family:var(--f-disp); font-weight:300; font-size:clamp(5rem,15vw,10rem); line-height:.8}
.kh-type__line{font-size:.96rem; color:var(--mist); max-width:34ch; margin:1rem 0 0}
.kh-pat{aspect-ratio:3/2; background:var(--ink); overflow:hidden; position:relative}
.kh-pat svg{position:absolute; inset:0; width:100%; height:100%}
.kh-sys__cap{font-size:.82rem; color:var(--mist); margin:.8rem 0 0}
@media (max-width:760px){.kh-sw{grid-template-columns:repeat(3,1fr)} .kh-sys__split{grid-template-columns:1fr}}

/* ---------- 08 · in the world ---------- */
.kh-world__diptych{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.6rem,1.6vw,1.4rem); margin-top:clamp(2.6rem,7vh,4.4rem)}
.kh-world__row{display:grid; grid-template-columns:1.1fr .95fr .95fr; gap:clamp(.6rem,1.6vw,1.4rem); margin-top:clamp(.6rem,1.6vw,1.4rem)}
.kh-fig{margin:0; position:relative; overflow:hidden; background:var(--surface)}
.kh-fig img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform 1.2s var(--e)}
.kh-fig--tall img{aspect-ratio:3/4}
.kh-fig:hover img{transform:scale(1.03)}
.kh-fig figcaption{position:absolute; left:.9rem; bottom:.8rem; font-family:var(--f-sans); font-weight:500; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); text-shadow:0 1px 14px rgba(0,0,0,.6)}
@media (max-width:760px){.kh-world__diptych,.kh-world__row{grid-template-columns:1fr}}

/* ---------- close · the seal ---------- */
.kh-end{background:var(--ink); color:var(--bone); padding:clamp(7rem,16vh,13rem) var(--pad) clamp(4rem,9vh,7rem); text-align:center}
.kh-seal{display:block; width:clamp(150px,24vw,210px); height:clamp(150px,24vw,210px); margin:0 auto clamp(2.6rem,6vh,4rem); color:var(--gold)}
.kh-seal svg{display:block; width:100%; height:100%; animation:khspin 80s linear infinite}
@keyframes khspin{to{transform:rotate(360deg)}}
.kh-end__pre{font-family:var(--f-sans); font-weight:500; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-46); margin:0 0 1rem}
.kh-end__big{font-family:var(--f-disp); font-weight:300; font-size:clamp(2.2rem,7vw,5.4rem); line-height:1.06; margin:0 auto clamp(3rem,8vh,5rem); max-width:18ch}
.kh-end__foot{max-width:60ch; margin:0 auto}
.kh-end__credit{font-size:1rem; color:var(--bone-70); margin:0 0 .8rem}
.kh-end__credit a{color:var(--gold); border-bottom:1px solid transparent; transition:border-color .3s}
.kh-end__credit a:hover{border-color:var(--gold)}
.kh-end__note{font-size:.76rem; color:var(--mist); line-height:1.6; margin:0}
.kh-next{display:inline-flex; flex-direction:column; gap:.3rem; margin-top:clamp(3rem,8vh,5rem); padding:1.3rem 2.4rem; border:1px solid var(--bone-20); transition:border-color .4s, background .4s}
.kh-next:hover{border-color:var(--gold)}
.kh-next__label{font-family:var(--f-sans); font-weight:500; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.kh-next__name{font-family:var(--f-disp); font-size:1.3rem; color:var(--bone)}

/* ---------- mobile spine — mark in the upper square, ALL text in a band below it ---------- */
@media (max-width:680px){
  .kh-spine__pin{align-items:start; padding-top:10vh}
  .kh-spine__stage{width:86vw; height:86vw}
  .kh-spine__copy{bottom:auto; top:calc(86vw + 4vh); inset-inline:0}
  .kh-spine__word{font-size:clamp(1.9rem,8vw,2.7rem); letter-spacing:.14em}
  .kh-spine__note{font-size:.8rem; max-width:24ch}
  .kh-spine__title{inset:auto 0 auto 0; top:calc(86vw + 3vh); justify-content:flex-start; padding-bottom:0}
  .kh-spine__pre{display:none}
  .kh-spine__brand{font-size:clamp(2.4rem,14vw,4.4rem)}
  .kh-spine__phaselab{top:4vh}
  .kh-spine__cue{bottom:3vh}
}

/* ============================================================
   STORY SECTIONS (strategy-led narrative — not brandbook pages)
   ============================================================ */
.kh-eyebrow{font-family:var(--f-sans); font-weight:500; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1.6rem; display:flex; align-items:center; gap:.85em}
.kh-eyebrow::before{content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--gold); flex:none}
.on-ink .kh-eyebrow{color:var(--gold)}
.kh-eyebrow--bone{color:var(--gold)}

/* problem — a single statement, alone */
.kh-state{display:flex; align-items:center; min-height:84vh}
.kh-state .kh-sec__in{max-width:var(--maxw); margin:0 auto; width:100%}
.kh-state__big{font-family:var(--f-disp); font-weight:300; font-size:clamp(3rem,10vw,8rem); line-height:1.0; letter-spacing:-.01em; margin:0; max-width:14ch; color:var(--bone)}
.kh-state__sub{max-width:46ch; margin:clamp(2rem,5vh,3.4rem) 0 0}

/* concept — asymmetric two-part */
.kh-concept{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,6vw,5rem); align-items:end}
.kh-concept__lead .kh-h{margin:0}
.kh-triad{margin-top:clamp(2rem,5vh,3.2rem); border-top:1px solid var(--ink-12)}
.kh-triad__r{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--ink-12)}
.kh-triad__r b{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.3rem,2.4vw,1.8rem)}
.kh-triad__r span{font-size:.82rem; color:var(--mist)}
@media (max-width:820px){.kh-concept{grid-template-columns:1fr; gap:2.4rem}}

/* name — two roots, then the result */
.kh-name__roots{display:flex; gap:clamp(2rem,8vw,6rem); flex-wrap:wrap; margin:0 0 clamp(2.4rem,6vh,4rem)}
.kh-name__root{display:flex; flex-direction:column; gap:.3rem}
.kh-name__ar{font-family:var(--f-ar); font-weight:300; font-size:clamp(2.4rem,7vw,4.2rem); color:var(--gold); line-height:1}
.kh-name__rom{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.4rem,3vw,2rem)}
.kh-name__gloss{font-size:.82rem; color:var(--mist)}
.kh-name__result{max-width:22ch}

/* positioning — strategy, the spine */
.kh-pos{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.2rem,6vw,5rem); align-items:center}
.kh-pos__head .kh-h{margin:.2rem 0 1.4rem}
.kh-filter{margin:0; padding:clamp(2rem,4vw,3rem); border:1px solid var(--bone-20); position:relative}
.kh-filter::after{content:""; position:absolute; left:clamp(1.4rem,3vw,2.2rem); right:auto; top:0; width:7px; height:7px; transform:translateY(-50%) rotate(45deg); background:var(--gold)}
.kh-filter figcaption{margin-bottom:1.2rem}
.kh-filter__q{font-family:var(--f-disp); font-style:italic; font-weight:400; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.18; color:var(--gold); margin:0 0 1.2rem}
.kh-filter__n{font-size:.92rem; color:var(--bone-70); margin:0}
@media (max-width:820px){.kh-pos{grid-template-columns:1fr; gap:2.2rem}}

/* persona — big quote */
.kh-persona__q{max-width:18ch; margin:0 0 clamp(2.4rem,6vh,4rem)}
.kh-persona__cols{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
@media (max-width:680px){.kh-persona__cols{grid-template-columns:1fr; gap:1.6rem}}

/* pattern — contained printed-material panel (never a full-page bg) */
.kh-pattern{background:var(--ink); color:var(--bone); padding:clamp(5rem,12vh,9rem) var(--pad); overflow:hidden}
.kh-pattern__in{max-width:var(--maxw); margin:0 auto; position:relative; z-index:1}
.kh-pattern__line{max-width:15ch}
.kh-pattern__note{max-width:40ch}
.kh-pattern__field{position:absolute; inset:-10% 0 -10% 60%; opacity:.8; -webkit-mask:linear-gradient(90deg,transparent,#000 34%); mask:linear-gradient(90deg,transparent,#000 34%); pointer-events:none}
.kh-pattern__line{margin:.4rem 0 0}
.kh-pattern__note{font-size:clamp(1rem,1.5vw,1.16rem); color:var(--bone-70); max-width:42ch; margin:1.4rem 0 0}
@media (max-width:760px){.kh-pattern__in{grid-template-columns:1fr} .kh-pattern__field{inset:auto 0 0 0; top:62%; -webkit-mask:linear-gradient(#000,#000); mask:linear-gradient(#000,#000); opacity:.5}}

/* end pre */
.kh-end__pre{font-family:var(--f-sans); font-weight:500; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-46); margin:0 0 1rem}

/* ============================================================
   v5 — ONE Khaledar ENVIRONMENT (no flat colour-block slides) +
   a creative-director pass on the Cormorant. Overrides the above.
   ============================================================ */
:root{ --bone-58:rgba(236,231,219,.58); }
body.kh{ background:#15120C; color:var(--bone-70); }
/* atmosphere: a deep, warm, resinous ground with contained light — not flat ink */
body.kh::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 85% at 50% -12%, rgba(156,122,75,.10), transparent 50%),
    radial-gradient(120% 80% at 85% 112%, rgba(42,107,92,.05), transparent 55%),
    radial-gradient(150% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.34)); }
.kh-grain{ opacity:.05; mix-blend-mode:overlay; }
main{ position:relative; z-index:1; }

/* every section floats in the one environment — kill the bone/ink fills */
.kh-sec, .kh-meta, .kh-coll, .kh-spine, .kh-pattern, .kh-end{ background:transparent !important; }
.on-ink{ background:transparent; color:var(--bone); }

/* text, re-set for the dark environment */
.kh-h, .kh-state__big, .kh-idea__quote, .kh-name__result, .kh-persona__q, .kh-pattern__line,
.kh-concept__lead .kh-h, .kh-row__note, .kh-card__name, .kh-triad__r b, .kh-name__rom, .kh-anat__pt{ color:var(--bone); }
.kh-body, .kh-row__desc, .kh-card__note, .kh-pattern__note, .kh-triad__r span, .kh-name__gloss,
.kh-row__k, .kh-obj__body{ color:var(--bone-70); }
.kh-body em, .kh-h em{ color:var(--bone); }
.kh-name__gloss, .kh-row__k, .kh-triad__r span{ color:var(--bone-58); }
.kh-row--sig .kh-row__note{ color:#6FB39B; }
.kh-row--sig .kh-row__k{ color:var(--sage); }
.kh-triad, .kh-triad__r, .kh-comp__pyr, .kh-row, .kh-obj__mat, .kh-meta__grid{ border-color:var(--bone-14) !important; }
.kh-row::before, .kh-triad__r{ }
.kh-anat{ background:#E8E2D8; }   /* the bottle still sits on its bone material card */

/* creative-director Cormorant: less tracking, more presence, tighter rhythm */
.kh-h, .kh-state__big, .kh-idea__quote, .kh-name__result, .kh-persona__q, .kh-pattern__line,
.kh-concept__lead .kh-h, .kh-filter__q, .kh-row__note, .kh-card__name{ letter-spacing:0; }
.kh-h, .kh-pattern__line, .kh-name__result{ font-weight:400; }
.kh-h--xl, .kh-state__big{ font-weight:380; line-height:.98; letter-spacing:-.008em; }
.kh-h--l{ font-weight:420; line-height:1.04; }
.kh-h--m{ font-weight:440; line-height:1.08; }
.kh-eyebrow{ letter-spacing:.2em; color:var(--gold); }

/* spine: tighter title + the resolve line that was overlapping the mark */
.kh-spine__pre{ letter-spacing:.18em; color:var(--bone-46); }
.kh-spine__tag{ letter-spacing:0; }
.kh-spine__word{ font-weight:400; letter-spacing:.01em; font-size:clamp(1.6rem,3.6vw,2.6rem); }
.kh-spine__word b{ font-style:italic; font-weight:400; letter-spacing:.04em; color:var(--gold); font-size:.9em; }
.kh-spine__note{ color:var(--bone-58); letter-spacing:.01em; }

/* ============================================================
   v7 — directorial round: bug fixes + interactive pattern +
   journey depth + better applications + mobile hero/pattern.
   ============================================================ */
/* object anatomy — portrait bottle, never stretched */
.kh-obj__anat{align-items:center}
.kh-anat{align-self:center; max-width:420px; margin-inline:auto; background:var(--surface)}
.kh-anat__img{display:block; width:100%; height:auto; object-fit:contain; mix-blend-mode:multiply}

/* clean rotating founding seal (hand-built — no missing font) */
.kh-seal{position:relative; display:grid; place-items:center; width:clamp(160px,26vw,220px); height:clamp(160px,26vw,220px); margin:0 auto clamp(2.6rem,6vh,4rem); color:var(--gold)}
.kh-seal__ring{position:absolute; inset:0; width:100%; height:100%; animation:khspin 90s linear infinite}
.kh-seal__t{fill:currentColor; font-family:var(--f-sans); font-weight:500; font-size:9.4px; letter-spacing:.16em}
.kh-seal__mark{position:relative; width:34%; height:34%; color:var(--gold)}
.kh-seal__mark svg{width:100%; height:100%}
@keyframes khspin{to{transform:rotate(360deg)}}

/* THE PATTERN — interactive drag-to-reveal between the two colourways */
.kh-pattern__in{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; max-width:var(--maxw); margin:0 auto; position:relative; z-index:1}
.kh-pattern__txt>*{max-width:42ch}
.kh-pattern__hint{font-family:var(--f-sans); font-weight:500; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-46); margin:1.6rem 0 0}
.kh-pattern__hint i{color:var(--gold); font-style:normal}
.kh-patshow{position:relative; aspect-ratio:4/3; overflow:hidden; cursor:ew-resize; -webkit-user-select:none; user-select:none; box-shadow:inset 0 0 0 1px var(--bone-14); touch-action:pan-y}
.kh-patshow__layer{position:absolute; inset:0; background-repeat:repeat; background-position:center}
.kh-patshow__layer--bone{background-color:#F2EDE4; background-image:url('assets/pattern/pattern-light.svg'); background-size:880px}
.kh-patshow__layer--ink{background-color:#1C1A17; background-image:url('assets/pattern/pattern-dark.svg'); background-size:880px; clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.kh-patshow__div{position:absolute; top:0; bottom:0; left:var(--x,50%); width:1px; background:var(--gold)}
.kh-patshow__div i{position:absolute; top:50%; left:50%; width:36px; height:36px; transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--gold); background:rgba(20,18,13,.35)}
.kh-patshow__lab{position:absolute; bottom:12px; font-family:var(--f-sans); font-weight:500; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase}
.kh-patshow__lab--l{left:14px; color:#F2EDE4}
.kh-patshow__lab--r{right:14px; color:#1C1A17}
@media (max-width:760px){ .kh-pattern__in{grid-template-columns:1fr; gap:2rem} .kh-patshow{aspect-ratio:1/1} }

/* THE PHILOSOPHY / journey depth */
.kh-phil__lead{max-width:16ch; margin:.2rem 0 0}
.kh-phil__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start; margin-top:clamp(2.4rem,6vh,4rem)}
.kh-vals{list-style:none; padding:0; margin:0; border-top:1px solid var(--bone-14)}
.kh-vals li{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--bone-14)}
.kh-vals b{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.2rem,2.2vw,1.65rem); color:var(--bone)}
.kh-vals span{font-size:.8rem; color:var(--bone-58)}
@media (max-width:760px){ .kh-phil__grid{grid-template-columns:1fr; gap:1.6rem} }

/* applications — more cinematic */
.kh-world__head{margin:.2rem 0 clamp(2.6rem,7vh,4.4rem)}
.kh-world__diptych .kh-fig img{aspect-ratio:16/10}

/* mobile hero — mark above centre (room for text), construction lines reach every edge */
@media (max-width:680px){
  .kh-spine-svg{overflow:visible}
  .kh-spine__pin{align-items:center; padding-top:0}
  .kh-spine__stage{width:74vw; height:74vw; transform:translateY(-11vh)}
  .kh-spine__copy{bottom:auto; top:calc(74vw + 7vh)}
  .kh-spine__title{bottom:auto; top:calc(74vw + 5vh); justify-content:flex-start; padding-bottom:0}
  .kh-spine__cue{bottom:4vh}
}

/* ============================================================
   v8 — the identity SYSTEM, as components (not brandbook pages)
   ============================================================ */
.kh-sys__head{margin:.2rem 0 0}
.kh-comp{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--bone-14); border:1px solid var(--bone-14); margin-top:clamp(2.4rem,6vh,4rem)}
.kh-comp__c{margin:0; background:#191510; display:flex; flex-direction:column}
.kh-comp__c--wide{grid-column:span 2}
.kh-comp__art{flex:1; min-height:172px; display:grid; place-items:center; padding:1.7rem; color:var(--bone)}
.kh-comp__c figcaption{padding:0 1.3rem 1.2rem; font-family:var(--f-sans); font-size:.72rem; color:var(--bone-58)}
.kh-comp__c figcaption b{display:block; font-weight:500; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.4em}
.kh-lock{display:flex; align-items:center; justify-content:center; color:var(--bone)}
.kh-lock--v{flex-direction:column; gap:16px}
.kh-lock--h{flex-direction:row; gap:20px}
.kh-lock__m{display:block; width:56px; height:56px; color:var(--bone)}
.kh-lock__m svg{width:100%; height:100%}
.kh-lock__m--lg{width:92px; height:92px}
.kh-lock__w{display:block; height:16px; color:var(--bone)}
.kh-lock__w svg{display:block; height:100%; width:auto}
.kh-lock__w--lg{height:26px}
.kh-lock--v .kh-lock__w{height:14px}
.kh-cols{display:flex; gap:14px; width:100%; height:100%; align-items:stretch}
.kh-cols span{flex:1; display:flex; flex-direction:column; font-size:.78rem; color:var(--bone)}
.kh-cols b{display:block; flex:1; min-height:70px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(236,231,219,.14); margin-bottom:.6rem}
.kh-cols i{font-style:normal; font-size:.58rem; color:var(--bone-46); margin-top:.1rem}
.kh-typ{display:flex; gap:1.6rem; width:100%; align-items:center; justify-content:space-around}
.kh-typ__b{display:flex; flex-direction:column; align-items:center; gap:.6rem}
.kh-typ__aa{font-size:clamp(2.6rem,5vw,3.6rem); line-height:.9; color:var(--bone)}
.kh-typ__b i{font-style:normal; font-size:.62rem; color:var(--bone-46); max-width:18ch; text-align:center; line-height:1.4}
@media (max-width:820px){ .kh-comp{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .kh-comp{grid-template-columns:1fr} .kh-comp__c--wide{grid-column:span 1} .kh-typ{gap:1rem} }

/* ============================================================
   v9 — THE GRAND REVEAL (the identity, in full) + motion
   ============================================================ */
.kh-idn{padding:clamp(5rem,12vh,10rem) 0; overflow:hidden}
.kh-idn__open{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.kh-idn__title{margin:.2rem 0 1.4rem}
.kh-idn__open .kh-body{max-width:50ch}

/* the primary lockup — a hero moment */
.kh-idn__hero{position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3vw,34px);
  padding:clamp(4.5rem,11vh,9rem) var(--pad); margin:clamp(2.4rem,6vh,4.5rem) 0}
.kh-idn__hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 64% at 50% 48%, rgba(156,122,75,.10), transparent 72%)}
.kh-idn__hero>*{position:relative}
.kh-idn__mark{display:block; width:clamp(96px,14vw,170px); height:clamp(96px,14vw,170px); color:var(--bone)}
.kh-idn__mark svg{width:100%; height:100%}
.kh-idn__wm{display:block; width:min(60vw,540px); color:var(--bone)}
.kh-idn__wm svg{display:block; width:100%; height:auto}
.kh-idn__tag{font-family:var(--f-disp); font-style:italic; font-weight:400; font-size:clamp(1rem,2vw,1.45rem); color:var(--gold); letter-spacing:.02em}
.kh-idn__cap{font-family:var(--f-sans); font-weight:500; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-46); margin-top:.5rem}

/* the lockup family */
.kh-idn__vars{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bone-14); border:1px solid var(--bone-14)}
.kh-idn__var{margin:0; background:#191510; display:flex; flex-direction:column}
.kh-idn__var>div{flex:1; min-height:150px; display:grid; place-items:center; padding:1.7rem; color:var(--bone)}
.kh-idn__var figcaption{padding:0 1.3rem 1.1rem; font-family:var(--f-sans); font-weight:500; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.kh-idn__var [data-markslot]{display:block; width:48px; height:48px; color:var(--bone)} .kh-idn__var [data-markslot] svg{width:100%;height:100%}
.kh-idn__var .kh-lock__m--lg{width:78px; height:78px}
.kh-idn__var .kh-lock__w{display:block; height:15px; color:var(--bone)} .kh-idn__var .kh-lock__w svg{height:100%; width:auto; display:block}
.kh-idn__var .kh-lock__w--lg{height:24px}
.kh-idn__var .kh-lock--h{display:flex; align-items:center; gap:18px}

/* colour — shown in the proportion it is used (60/40 anchors, thin accents) */
.kh-idn__colwrap{max-width:var(--maxw); margin:clamp(3rem,7vh,5rem) auto 0; padding-inline:var(--pad)}
.kh-idn__cols{display:flex; height:clamp(170px,28vh,280px); border:1px solid var(--bone-14); overflow:hidden}
.kh-idn__col{flex:var(--f); background:var(--c); color:var(--bone); display:flex; flex-direction:column; justify-content:flex-end; gap:.15rem; padding:1.3rem; min-width:0; transition:flex .55s var(--e)}
.kh-idn__col b{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.1rem,2vw,1.55rem)}
.kh-idn__col span{font-size:.66rem; opacity:.82; white-space:nowrap}
.kh-idn__col i{font-family:var(--f-sans); font-style:normal; font-size:.55rem; letter-spacing:.04em; opacity:.6; margin-top:.3rem}
.kh-idn__col:hover{flex:calc(var(--f) + 16)}

/* type */
.kh-idn__type{max-width:var(--maxw); margin:clamp(3rem,7vh,5rem) auto 0; padding-inline:var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem)}
.kh-idn__face{margin:0; display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.6rem)}
.kh-idn__aa{font-size:clamp(5rem,13vw,9.5rem); line-height:.78; color:var(--bone)}
.kh-idn__face figcaption{font-size:.95rem; color:var(--bone-70); max-width:24ch}
.kh-idn__face figcaption b{font-family:var(--f-disp); font-weight:400; font-size:1.25em; color:var(--bone); display:block; margin-bottom:.25em}
.kh-idn__face figcaption em{color:var(--bone); font-style:italic}
@media (max-width:820px){ .kh-idn__vars{grid-template-columns:1fr} .kh-idn__type{grid-template-columns:1fr; gap:2.2rem} }
@media (max-width:560px){ .kh-idn__cols{height:auto; flex-direction:column} .kh-idn__col{flex:none; min-height:88px} }

/* grander reveal motion */
[data-revealbig]{opacity:0; transform:scale(.93) translateY(34px); transition:opacity 1.4s var(--e), transform 1.4s var(--e)}
[data-revealbig].in{opacity:1; transform:none}

/* applications — bigger, more cinematic */
.kh-world__diptych .kh-fig img{aspect-ratio:4/3}
.kh-world__feature{margin:0 0 clamp(.6rem,1.6vw,1.4rem); position:relative; overflow:hidden}
.kh-world__feature img{width:100%; height:clamp(46vh,58vh,70vh); object-fit:cover}
.kh-world__feature figcaption{position:absolute; left:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); font-family:var(--f-sans); font-weight:500; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); text-shadow:0 1px 16px rgba(0,0,0,.7)}

/* ============================================================
   v10 — THE IDENTITY, REVEALED (pinned scroll sequence:
   lockup → colour → type, each built/revealed through scroll)
   ============================================================ */
.kh-rev{height:540vh; position:relative}
.kh-rev__pin{position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; padding:0 var(--pad)}
.kh-rev__chapter{position:absolute; top:11vh; left:0; right:0; text-align:center; font-family:var(--f-sans); font-weight:500; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); opacity:0; transition:opacity .5s}
.kh-rev__stage{position:relative; width:min(var(--maxw),92vw); height:min(56vh,540px)}
.kh-rev__lock,.kh-rev__cols,.kh-rev__type{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.kh-rev__line{position:absolute; bottom:11vh; left:0; right:0; text-align:center; font-family:var(--f-disp); font-weight:300; font-style:italic; font-size:clamp(1.2rem,2.6vw,1.9rem); color:var(--bone-70); opacity:0; transition:opacity .6s; padding:0 var(--pad); max-width:30ch; margin:0 auto}

/* lockup — transforms through its forms */
.kh-rev__lock{gap:clamp(1.6rem,4vh,2.6rem)}
.kh-rev__lockinner{display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.4vw,26px); transition:gap .6s var(--e)}
.kh-rev__mark{display:block; width:clamp(94px,12vw,150px); height:clamp(94px,12vw,150px); color:var(--bone); transition:width .6s var(--e),height .6s var(--e),opacity .5s}
.kh-rev__mark svg{width:100%;height:100%}
.kh-rev__wm{display:block; width:min(46vw,440px); color:var(--bone); transition:width .6s var(--e),opacity .5s}
.kh-rev__wm svg{display:block;width:100%;height:auto}
.kh-rev__lock.is-h .kh-rev__lockinner{flex-direction:row; gap:clamp(22px,3vw,42px)}
.kh-rev__lock.is-sym .kh-rev__wm{width:0;opacity:0;margin:0}
.kh-rev__lock.is-sym .kh-rev__mark{width:clamp(130px,19vw,230px);height:clamp(130px,19vw,230px)}
.kh-rev__lock.is-wm .kh-rev__mark{width:0;height:0;opacity:0}
.kh-rev__lock.is-wm .kh-rev__wm{width:min(66vw,640px)}
.kh-rev__lockcap{font-family:var(--f-sans); font-weight:500; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-46)}

/* colour — bands build one by one, in proportion */
.kh-rev__cols{flex-direction:row; align-items:stretch}
.kh-rev__band{flex:0; overflow:hidden; background:var(--c); color:var(--t,var(--bone)); display:flex; flex-direction:column; justify-content:flex-end; gap:.15rem; padding:1.3rem; min-width:0; white-space:nowrap}
.kh-rev__band b{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.1rem,2vw,1.6rem)}
.kh-rev__band span{font-size:.66rem; opacity:.82}
.kh-rev__band i{font-family:var(--f-sans); font-style:normal; font-size:.55rem; opacity:.62; letter-spacing:.04em; margin-top:.2rem}

/* type */
.kh-rev__type{flex-direction:row; gap:clamp(2rem,6vw,6rem)}
.kh-rev__face{margin:0; display:flex; flex-direction:column; align-items:center; gap:1.1rem; opacity:0; transform:translateY(22px); transition:opacity .7s var(--e),transform .7s var(--e)}
.kh-rev__face.is-on{opacity:1;transform:none}
.kh-rev__aa{font-size:clamp(5rem,12vw,9rem); line-height:.8; color:var(--bone)}
.kh-rev__face figcaption{text-align:center; font-size:.9rem; color:var(--bone-70)}
.kh-rev__face figcaption b{font-family:var(--f-disp); font-weight:400; font-size:1.3em; color:var(--bone); display:block; margin-bottom:.25em}
.kh-rev__face figcaption em{font-style:italic; color:var(--bone-58)}
@media (max-width:680px){
  .kh-rev{height:480vh}
  .kh-rev__stage{height:min(52vh,480px)}
  .kh-rev__cols{flex-direction:column}
  .kh-rev__band{flex-direction:row; align-items:center; justify-content:space-between; padding:.9rem 1.1rem}
  .kh-rev__band i{display:none}
  .kh-rev__type{flex-direction:column; gap:2.2rem}
}

/* ============================================================
   v11 — QA pass: dark-ground contrast fixes + alignment polish
   ============================================================ */
.kh-list li{color:var(--bone-58)}                 /* persona bullets were ~invisible (mist on ink) */
.kh-card__tag{color:var(--bone-58)}               /* "Standard" tag was dark-on-dark; restore the set */
.kh-card__tag--gold{color:var(--gold)}
.kh-card__tag--sage{color:var(--sage)}
.kh-name__ar{text-align:left}                     /* lock the Arabic to its romanisation (was drifting right) */
.kh-patshow__lab--r{text-shadow:0 1px 6px rgba(242,237,228,.7)}  /* hold over the busy bone interlace */
@media (max-width:680px){
  .kh-rev__band span{display:none}                /* mobile palette: show name + hex (the spec), drop the descriptor */
  .kh-rev__band i{display:block; font-size:.6rem; opacity:.7}
  .kh-pattern__hint{margin-top:1rem}
  .kh-world__feature img{height:clamp(34vh,42vh,50vh)}
}

/* ============================================================
   v12 — clean lockup · scene snap · visual NAME · solid emblem · animated pattern field
   ============================================================ */
/* the hero lockup: mark + wordmark resolve into ONE tight unit (desktop), grid already gone */
@media (min-width:681px){
  .kh-spine__stage.is-lock .kh-spine__title{justify-content:center; padding-bottom:0; transform:translateY(8%)}
  .kh-spine__stage.is-lock .kh-spine__pre{opacity:0; height:0; margin:0; overflow:hidden}
  .kh-spine__stage.is-lock .kh-spine__brand{width:min(31vw,280px)}
  .kh-spine__stage.is-lock .kh-spine__tag{opacity:.62; font-size:clamp(.92rem,1.7vw,1.2rem); margin-top:.7rem}
}

/* ---- the name, explained (pinned scrub: two roots converge → the house forms) ---- */
.kh-nm{position:relative; height:300vh}
.kh-nm__pin{position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center; padding:0 var(--pad)}
.kh-nm__eyebrow{position:absolute; top:12vh; left:0; right:0; text-align:center; margin:0; color:var(--gold)}
.kh-nm__stage{position:relative; width:min(var(--maxw),92vw); display:grid; place-items:center; text-align:center}
.kh-nm__roots{grid-area:1/1; display:flex; align-items:flex-start; justify-content:center; gap:1em; will-change:transform; font-size:clamp(1rem,3vw,1.6rem)}
.kh-nm__root{display:flex; flex-direction:column; align-items:center; gap:.55rem; opacity:0; will-change:transform,opacity; max-width:20ch}
.kh-nm__ar{font-family:var(--f-ar); font-weight:300; font-size:clamp(2.6rem,8vw,5rem); color:var(--gold); line-height:1}
.kh-nm__rom{font-family:var(--f-disp); font-weight:400; font-size:clamp(1.5rem,3.4vw,2.3rem); color:var(--bone)}
.kh-nm__gloss{font-family:var(--f-sans); font-size:clamp(.76rem,1.4vw,.92rem); color:var(--bone-58); letter-spacing:.01em; line-height:1.5}
.kh-nm__plus{align-self:flex-start; font-family:var(--f-disp); font-weight:300; font-size:clamp(1.6rem,4vw,2.8rem); color:var(--gold); opacity:0; padding-top:1.1em}
.kh-nm__fuse{grid-area:1/1; display:flex; flex-direction:column; align-items:center; gap:clamp(1.3rem,3vh,2.2rem); opacity:0; will-change:transform,opacity; pointer-events:none}
.kh-nm__wm{display:block; width:min(62vw,540px); color:var(--bone)}
.kh-nm__wm svg{display:block; width:100%; height:auto}
.kh-nm__syn{font-family:var(--f-disp); font-weight:300; font-size:clamp(1.35rem,3vw,2.2rem); color:var(--bone-70); max-width:22ch; margin:0; line-height:1.22}
.kh-nm__syn em{font-style:italic; color:var(--bone)}
@media (max-width:680px){
  .kh-nm{height:auto} .kh-nm__pin{position:static; height:auto; min-height:88vh; padding:14vh var(--pad)}
  .kh-nm__eyebrow{position:static; margin-bottom:3rem}
  .kh-nm__roots{font-size:.8rem; gap:1.2rem !important; transform:none !important}
  .kh-nm__root{max-width:42vw; opacity:1 !important; transform:none !important}
  .kh-nm__plus{opacity:1 !important}
  .kh-nm__stage{display:flex; flex-direction:column; gap:3.4rem}
  .kh-nm__fuse{position:static; opacity:1 !important; transform:none !important}
}

/* ---- the solid emblem (deboss/foil master) in the reveal symbol stage ---- */
.kh-rev__emblem{display:block; width:0; height:0; opacity:0; overflow:hidden; color:var(--bone); transition:width .6s var(--e),height .6s var(--e),opacity .55s}
.kh-rev__emblem svg{width:100%; height:100%}
.kh-rev__lock.is-sym .kh-rev__mark{width:0 !important; height:0 !important; opacity:0}
.kh-rev__lock.is-sym .kh-rev__emblem{width:clamp(168px,24vw,280px); height:clamp(168px,24vw,280px); opacity:1}

/* ---- better typography reveal: glyph + a specimen line that wipes in after it ---- */
.kh-rev__glyph{display:block; font-size:clamp(4.4rem,11vw,8rem); line-height:.82; color:var(--bone)}
.kh-rev__spec{display:block; margin-top:.5rem; font-size:clamp(1.05rem,2.1vw,1.6rem); color:var(--gold); opacity:0; transform:translateY(12px); transition:opacity .6s var(--e) .18s, transform .6s var(--e) .18s; letter-spacing:.01em}
.kh-rev__face.is-on .kh-rev__spec{opacity:.95; transform:none}
.kh-rev__typedot{align-self:center; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); opacity:.5; flex:none}
@media (max-width:680px){ .kh-rev__typedot{display:none} .kh-rev__spec{white-space:normal} }

/* ---- the pattern as a full-bleed living field — ink + gold, aligned, crossfading ---- */
.kh-pattern{position:relative; overflow:hidden; min-height:104vh; display:grid; place-items:center; padding:clamp(5rem,12vh,9rem) var(--pad)}
.kh-patfield{position:absolute; inset:-14%; pointer-events:none; will-change:transform; z-index:0}
.kh-patfield__l{position:absolute; inset:0; background-repeat:repeat; background-position:center; background-size:clamp(470px,47vw,760px)}
.kh-patfield__l--ink{background-image:url('assets/pattern/pattern-ink.svg'); opacity:.4}
.kh-patfield__l--gold{background-image:url('assets/pattern/pattern-gold.svg'); opacity:0}
.kh-pattern__card{position:relative; z-index:2; max-width:50ch; text-align:center; padding:clamp(2.4rem,5vw,3.8rem) clamp(2rem,5vw,3.4rem); background:rgba(13,12,10,.56); -webkit-backdrop-filter:blur(8px) saturate(1.04); backdrop-filter:blur(8px) saturate(1.04); box-shadow:inset 0 0 0 1px var(--bone-14), 0 40px 90px -52px #000}
.kh-pattern__card .kh-eyebrow{justify-content:center}
.kh-pattern__line{max-width:18ch; margin:.5rem auto 0}
.kh-pattern__note{font-size:clamp(1rem,1.5vw,1.16rem); color:var(--bone-70); max-width:46ch; margin:1.4rem auto 0}
.kh-pattern__meta{font-family:var(--f-sans); font-weight:500; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-46); margin:1.9rem 0 0}
.kh-pattern__meta span{font-family:var(--f-ar); font-size:1.35em; color:var(--gold); letter-spacing:0; vertical-align:-.05em}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  [data-reveal],[data-split] .w,[data-revealbig]{opacity:1 !important; transform:none !important}
  .kh-rev{height:auto} .kh-rev__pin{position:static; height:auto; min-height:0; padding:8vh var(--pad)}
  .kh-rev__lock,.kh-rev__cols,.kh-rev__type{position:relative; inset:auto; opacity:1 !important; margin-bottom:6vh}
  .kh-rev__band{flex:1 !important} .kh-rev__face{opacity:1;transform:none}
  .kh-spine{height:auto} .kh-spine__pin{position:static; height:auto; min-height:100vh; padding:14vh 0}
  [data-markwrap]{opacity:1 !important} [data-grid]{opacity:.4}
  .kh-spine__title{position:static; opacity:1; margin-top:3rem}
  .kh-nm{height:auto} .kh-nm__pin{position:static; height:auto; min-height:0; padding:10vh var(--pad)}
  .kh-nm__root,.kh-nm__plus,.kh-nm__fuse{opacity:1 !important; transform:none !important}
}