/* Dwaik — brand case study · Pixilated
   Palette, type roles and grid come from the Dwaik brand presentation (Figma embhOWp0Xo4BBVqXBwYRzC, 231:36)
   and the guidelines (X3JiPbxAzdaKSPQhjEaT2L). Stand-in faces are disclosed on the page (see #type).
   Motion rule for this world: things are laid, not floated (short settle, no float-ups). */

@font-face { font-family: "Libre Baskerville"; src: url(../fonts/LibreBaskerville-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url(../fonts/LibreBaskerville-italic-latin.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Amiri"; src: url(../fonts/Amiri-400-arabic.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "Amiri"; src: url(../fonts/Amiri-700-arabic.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }

:root {
  --ob: #0F0F0F; --em: #01443C; --silk: #FFF0E4;                       /* primary 60 % */
  --em-2: #007261; --red: #720300; --white: #FFFFFF; --char: #303030;   /* secondary 30 % */
  --em-3: #002D25; --red-2: #4F0200; --taupe: #AF9C94;                  /* accent 10 % */
  --ink: var(--silk); --ink-2: rgba(255,240,228,.72); --ink-3: rgba(255,240,228,.48);
  --rule: rgba(255,240,228,.16); --fill: rgba(255,240,228,.06); --line: rgba(255,240,228,.34);
  --serif: "Libre Baskerville", Baskerville, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ar: "Amiri", "Sakkal Majalla", "Geeza Pro", serif;
  /* the brand's desktop grid: 12 columns, 24 px gutters, 80 px margins (scaled down on small screens) */
  --m: clamp(20px, 5.6vw, 80px);
  --gut: clamp(12px, 1.7vw, 24px);
  --settle: cubic-bezier(.2, .7, .1, 1);
  --safe-b: 96px; /* the site viewer's floating bar sits at the bottom centre */
  --pat: url(../svg/pattern-tile.svg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ob); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--em-2); color: var(--silk); }
:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[lang="ar"], .ar { font-family: var(--ar); letter-spacing: 0; }
p[lang="ar"], .ar-block { direction: rtl; }

/* the Kufic pattern as a seamless mask tile, coloured by currentColor */
.pat { display: block; background: currentColor; -webkit-mask: var(--pat) repeat 0 0 / auto 100%; mask: var(--pat) repeat 0 0 / auto 100%; }

/* ───────── layout ───────── */
.wrap { padding-inline: var(--m); max-width: 1920px; margin-inline: auto; position: relative; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.sec { position: relative; padding-block: clamp(96px, 14vh, 168px); }
.sec--silk { background: var(--silk); color: var(--ob); --ink: var(--ob); --ink-2: rgba(15,15,15,.74); --ink-3: rgba(15,15,15,.52); --rule: rgba(15,15,15,.16); --fill: rgba(15,15,15,.05); --line: rgba(15,15,15,.34); }
.sec--em { background: var(--em); }
.sec--ob { background: var(--ob); }
.sec--silk ::selection { background: var(--em); color: var(--silk); }

/* ───────── type ───────── */
.kicker { display: flex; gap: .9em; align-items: baseline; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 28px; }
.kicker b { font-family: var(--serif); font-weight: 400; letter-spacing: .06em; color: var(--ink); font-size: 15px; }
.kicker i { font-style: normal; color: var(--ink-3); }
.h2 { font: 400 clamp(38px, 4.8vw, 82px)/1.04 var(--serif); letter-spacing: -.02em; margin: 0; text-wrap: balance; max-width: 18ch; }
.h2--xl { font-size: clamp(48px, 7.4vw, 132px); max-width: 15ch; }
.h3 { font: 400 clamp(24px, 2.2vw, 34px)/1.15 var(--serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.dim { color: var(--ink-3); }
.lead { font: 400 clamp(18px, 1.4vw, 21px)/1.55 var(--sans); color: var(--ink-2); max-width: 48ch; margin: 0; text-wrap: pretty; }
.opener .lead { margin-top: 28px; }
.body { color: var(--ink-2); max-width: 58ch; margin: 0; text-wrap: pretty; }
.label { display: block; font: 500 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.note { font: 400 13px/1.5 var(--sans); color: var(--ink-3); margin: 14px 0 0; max-width: 60ch; }
.src { font: 400 12px/1.55 var(--sans); color: var(--ink-3); margin: clamp(56px, 7vw, 96px) 0 0; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 110ch; }
.src::before { content: "Sources · "; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.btn { appearance: none; background: none; border: 1px solid currentColor; border-radius: 999px; height: 40px; padding: 0 18px; font: 500 12px/1 var(--sans); letter-spacing: .08em; cursor: pointer; }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--silk); border-color: var(--ink); }
.sec--silk .btn[aria-pressed="true"] { color: var(--silk); }

/* settle, not float: laid into place from slightly above */
.js [data-reveal] { opacity: 0; transform: translateY(-12px); transition: opacity .9s var(--settle), transform .9s var(--settle); }
.js [data-reveal].in { opacity: 1; transform: none; }
[data-split] .w { opacity: .18; transition: opacity .5s ease; }
[data-split] .w.on { opacity: 1; }

/* ───────── chapters: the rail column (also the menu button) ───────── */
.rail { appearance: none; position: fixed; right: max(14px, calc(var(--m) * .36)); top: 50%; transform: translateY(-50%); z-index: 35; width: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: none; transition: opacity .4s; }
@media (min-width: 1000px) { .rail { display: block; } }
.rail.hide { opacity: 0; pointer-events: none; }
.rail svg { width: 44px; height: auto; overflow: visible; }
.rail .p { fill: transparent; stroke: rgba(175,156,148,.85); stroke-width: 1; stroke-dasharray: 2 2; transition: fill .5s var(--settle), stroke .5s var(--settle), transform .7s var(--settle); }
.rail .p.on { fill: var(--silk); stroke: var(--ob); stroke-dasharray: none; }
.rail .p.lay { transform: translateY(-6px); transition: none; }
.rail .p.now { stroke: var(--taupe); stroke-width: 2; }
.rail .p.on.now { stroke: var(--ob); }
.rail:hover .p { stroke: var(--taupe); }
.rail__tip { position: absolute; right: 56px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--ob); color: var(--silk); padding: 8px 10px; border-radius: 4px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.rail:hover .rail__tip, .rail:focus-visible .rail__tip { opacity: 1; transform: translate(0, -50%); }
.chapbtn { appearance: none; position: fixed; top: 14px; right: 14px; z-index: 35; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,240,228,.5); background: var(--ob); color: var(--silk); display: grid; place-items: center; padding: 0; cursor: pointer; }
.chapbtn svg { width: 22px; }
@media (min-width: 1000px) { .chapbtn { display: none; } }
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 34; }
.progress i { display: block; height: 100%; background: var(--taupe); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 1000px) { .progress { display: none; } }

.menu { position: fixed; inset: 0; z-index: 60; background: rgba(15,15,15,.97); display: grid; place-items: center; padding: var(--m); overflow: auto; }
.menu[hidden] { display: none; }
.menu__in { width: min(880px, 100%); }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu li a { display: grid; grid-template-columns: 4em 1fr auto; align-items: baseline; gap: 16px; padding: 13px 0; text-decoration: none; border-bottom: 1px solid rgba(255,240,228,.14); font: 400 clamp(22px, 3vw, 38px)/1.15 var(--serif); color: var(--silk); }
.menu li a span { font: 400 14px/1 var(--serif); color: rgba(255,240,228,.5); }
.menu li a em { font: 500 11px/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,240,228,.45); }
.menu li a:hover, .menu li a[aria-current="true"] { color: var(--taupe); }
.menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; color: var(--silk); }
.langsw { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.langsw .label { margin: 0 8px 0 0; }
.langsw button { appearance: none; border: 1px solid var(--line); background: none; border-radius: 999px; padding: 8px 14px; font: 500 12.5px/1 var(--sans); cursor: pointer; color: var(--ink-2); }
.langsw button[lang="ar"] { font: 700 16px/1 var(--ar); padding: 6px 14px 8px; }
.langsw button[aria-pressed="true"] { background: var(--ink); color: var(--silk); border-color: var(--ink); }
.menu .langsw button { --ink: var(--silk); --ink-2: rgba(255,240,228,.72); --line: rgba(255,240,228,.34); }
.menu .langsw button[aria-pressed="true"] { color: var(--ob); }
.sec--silk .langsw button[aria-pressed="true"] { color: var(--silk); }

/* the brand grid laid over the page */
.gridlay { position: fixed; inset: 0; z-index: 30; pointer-events: none; padding: 0 var(--m); opacity: 0; transition: opacity .4s; }
.gridlay.on { opacity: 1; }
.gridlay .g12 { height: 100%; max-width: calc(1920px - 2 * var(--m)); margin: 0 auto; }
.gridlay .g12 i { background: rgba(175,156,148,.11); border-inline: 1px solid rgba(175,156,148,.28); }
.gridlay::before, .gridlay::after { content: ""; position: absolute; left: 0; right: 0; height: 80px; background: rgba(114,3,0,.10); }
.gridlay::before { top: 0; } .gridlay::after { bottom: 0; }
.gridlay em { position: absolute; top: 86px; left: var(--m); font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }

/* ───────── courses: each chapter draws its part of the column at architectural scale ───────── */
.course svg { overflow: visible; }
.course path, .course circle { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.no-js .course path, .no-js .course circle { stroke-dashoffset: 0; }
.course--stylobate { margin: 48px 0 clamp(64px, 8vw, 110px); }
.course--stylobate svg { width: 100%; height: 60px; }
.course--base { margin: 40px var(--m) clamp(56px, 7vw, 96px); }
.course--base svg { width: 100%; height: 70px; }
.course--flutes { position: absolute; top: 0; right: calc(var(--m) + 2vw); width: clamp(110px, 14vw, 230px); height: calc(clamp(96px, 14vh, 168px) + clamp(150px, 20vh, 230px)); pointer-events: none; }
.course--flutes svg { width: 100%; height: 100%; }
.course--capital { position: absolute; top: clamp(96px, 14vh, 168px); right: var(--m); width: min(30vw, 470px); pointer-events: none; }
.course--capital svg { width: 100%; height: auto; }
.course--capital path { stroke-width: 1.2; }
.course--beam { margin: 0 0 clamp(56px, 7vw, 96px); }
.course--beam svg { width: 100%; height: 64px; }
.frieze { color: var(--em); height: clamp(90px, 11vw, 170px); margin: calc(-1 * clamp(96px, 14vh, 168px)) 0 clamp(80px, 10vw, 140px); overflow: hidden; clip-path: inset(0 calc(100% - var(--fr, 0%)) 0 0); }
.frieze .pat { height: 100%; width: 100%; }
@media (max-width: 860px) { .course--flutes { opacity: .5; } .course--capital { width: 70vw; opacity: .7; } }

/* ───────── 0 · hero ───────── */
.hero { position: relative; height: 230vh; background: var(--ob); }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; background: url(../img/hero-capital.webp) center 40% / cover no-repeat; opacity: 0; transform: scale(1.1); }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(15,15,15,.8) 100%), linear-gradient(180deg, transparent 70%, var(--ob) 100%); }
.hero__pattern { position: absolute; inset: 0; color: var(--em);
  -webkit-mask-image: radial-gradient(circle at var(--mx, 42%) var(--my, 46%), #000 0, #000 var(--r, 120px), transparent calc(var(--r, 120px) + 160px));
          mask-image: radial-gradient(circle at var(--mx, 42%) var(--my, 46%), #000 0, #000 var(--r, 120px), transparent calc(var(--r, 120px) + 160px)); }
.hero__pattern .pat { width: 100%; height: 100%; -webkit-mask-size: auto 34vh; mask-size: auto 34vh; }
.hero__lock { position: absolute; left: 50%; top: 50%; width: min(86vw, 1500px); transform: translate(-50%, -50%); z-index: 2; }
.hero__dwaik { font: 700 clamp(16px, 1.7vw, 28px)/1 var(--serif); letter-spacing: .04em; margin: 0 0 1.2vw 1%; }
.hero__word { position: relative; color: var(--silk); }
.hero__word svg.beyond { width: 100%; height: auto; position: relative; z-index: 1; }
.hero__word svg.beyond path.y { opacity: 0; }
.hero__col { position: absolute; left: 30.6%; top: -9%; width: 23.5%; z-index: 2; }
.hero__col img { width: 100%; position: relative; }
.shaft { position: absolute; left: 0; right: 0; top: calc(100% - 2px); height: 200vh; background: url(../img/column-shaft.webp) center top / 100% auto repeat-y; }
.hero__col .shaft { top: auto; }
.hero__col img + .shaft { top: calc(100% - 2px); }
.hero__sub { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 2vw; gap: 24px; }
.hero__sub h1 { margin: 0 0 0 auto; font: 700 clamp(18px, 2.2vw, 36px)/1.1 var(--serif); letter-spacing: .01em; text-align: right; }
.hero__sub h1 .ar { display: block; font: 700 clamp(20px, 2.3vw, 38px)/1.5 var(--ar); color: var(--silk); direction: rtl; }
.hero__meta { font: 500 11px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,240,228,.62); margin: 0; }
.hero__after { position: absolute; left: var(--m); right: var(--m); bottom: calc(var(--safe-b) + 6vh); z-index: 3; opacity: 0; max-width: 980px; }
.hero__after p { font: 400 clamp(26px, 3.4vw, 56px)/1.14 var(--serif); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
@media (max-width: 720px) {
  .hero__lock { width: 92vw; top: 42%; }
  .hero__sub { flex-direction: column; align-items: flex-end; }
  .hero__meta { align-self: flex-start; }
}

/* ───────── I · the market ───────── */
.brief p { font: 400 clamp(26px, 3vw, 50px)/1.22 var(--serif); letter-spacing: -.012em; margin: 0; grid-column: 1 / span 11; max-width: 30ch; text-wrap: pretty; }
.facts { margin-top: clamp(64px, 8vw, 120px); }
.facts > div { border-top: 1px solid var(--rule); padding-top: 22px; }
.facts .n { font: 400 clamp(56px, 7vw, 120px)/.92 var(--serif); letter-spacing: -.03em; display: block; }
.facts .n sup { font-size: .42em; vertical-align: top; position: relative; top: .2em; }
.facts .n--word { font-size: clamp(36px, 4.2vw, 70px); line-height: 1.04; }
.facts .t { font-size: 15px; color: var(--ink-2); max-width: 28ch; margin: 14px 0 0; }
.facts > div:nth-child(1) { grid-column: 1 / span 4; } .facts > div:nth-child(2) { grid-column: 5 / span 4; } .facts > div:nth-child(3) { grid-column: 9 / span 4; }
.rings { margin-top: clamp(96px, 12vw, 170px); align-items: center; row-gap: 40px; }
.rings__fig { grid-column: 1 / span 5; margin: 0; }
.rings__fig svg { width: 100%; height: auto; overflow: visible; }
.rings__fig circle { fill: none; stroke: var(--line); stroke-width: 1; }
.rings__fig circle.c1 { fill: var(--em); stroke: none; }
.rings__fig circle.c2 { fill: rgba(255,240,228,.05); }
.rings__fig circle.c3 { stroke-dasharray: 3 6; }
.rings__fig text { font: 500 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-2); }
.rings__fig text.w { fill: var(--silk); }
.rings__fig text.place { font: 400 15px var(--serif); letter-spacing: 0; text-transform: none; }
.rings__list { grid-column: 7 / span 6; list-style: none; padding: 0; margin: 0; }
.rings__list li { padding: 20px 0; border-top: 1px solid var(--rule); }
.rings__list h3 { font: 400 22px/1.2 var(--serif); margin: 0 0 8px; display: flex; gap: 12px; align-items: baseline; }
.rings__list h3 i { font: 400 13px/1 var(--serif); font-style: normal; color: var(--ink-3); }
.rings__list p { margin: 0; font-size: 15px; color: var(--ink-2); }
.problem { margin-top: clamp(96px, 12vw, 170px); row-gap: 48px; }
.problem > div:nth-child(1) { grid-column: 1 / span 5; } .problem > div:nth-child(2) { grid-column: 7 / span 6; }
.shift { margin-top: clamp(96px, 12vw, 170px); }
.shift__line { font: 400 clamp(32px, 5vw, 88px)/1.05 var(--serif); letter-spacing: -.02em; margin: 0 0 24px; }
.shift__from { position: relative; display: inline-block; color: var(--ink-3); }
.shift__from::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .06em; background: var(--red); transform: scaleX(var(--strike, 0)); transform-origin: 0 50%; transition: transform 1.2s var(--settle) .2s; }
.shift.in .shift__from::after { --strike: 1; }
.shift__to { display: block; }
@media (max-width: 860px) { .facts > div, .problem > div, .rings__fig, .rings__list { grid-column: 1 / -1 !important; } .facts > div + div { margin-top: 28px; } }

/* ───────── II · the people ───────── */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { text-align: left; vertical-align: top; }
.ptable thead th { font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 14px 0; border-bottom: 1px solid var(--ob); }
.ptable tbody th { font: 400 clamp(20px, 1.8vw, 27px)/1.15 var(--serif); width: 24%; padding: 20px 18px 22px 0; border-bottom: 1px solid var(--rule); }
.ptable td { padding: 22px 18px 22px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 860px) {
  .ptable thead { display: none; }
  .ptable tr { display: block; border-bottom: 1px solid var(--rule); padding: 18px 0; }
  .ptable tbody th, .ptable td { display: block; border: 0; padding: 4px 0; width: auto; }
  .ptable td[data-h]::before { content: attr(data-h); display: block; font: 500 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
}
.stairs { margin-top: clamp(96px, 12vw, 170px); }
.stairs__steps { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; }
.step { position: relative; padding: 26px 26px 30px; background: var(--fill); }
.step:nth-child(1) { min-height: 300px; } .step:nth-child(2) { min-height: 380px; background: rgba(1,68,60,.10); }
.step:nth-child(3) { min-height: 460px; background: var(--em); color: var(--silk); --ink-2: rgba(255,240,228,.8); --ink-3: rgba(255,240,228,.58); --rule: rgba(255,240,228,.2); }
.step__n { font: 400 56px/1 var(--serif); color: var(--ink-3); }
.step h4 { font: 400 26px/1.15 var(--serif); margin: 18px 0 10px; }
.step p { margin: 0; font-size: 15px; color: var(--ink-2); }
.step .val { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font: italic 400 17px/1.35 var(--serif); color: inherit; }
.step .val b { display: block; font: 500 10.5px/1.3 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
@media (max-width: 860px) { .stairs__steps { grid-template-columns: 1fr; } .step { min-height: 0 !important; } }

.personas { margin-top: clamp(96px, 12vw, 170px); }
.personas__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.personas__row { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.dossier { background: var(--fill); padding: 28px 26px 30px; }
.dossier__n { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.dossier h4 { font: 400 32px/1.1 var(--serif); margin: 22px 0 4px; }
.dossier .role { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.dossier blockquote { margin: 22px 0 0; font: italic 400 20px/1.35 var(--serif); }
.dossier dl { margin: 24px 0 0; display: grid; gap: 16px; }
.dossier dt { font: 500 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.dossier dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) { .personas__row { grid-template-columns: 1fr; } }

/* language: workshop material in English or Arabic (one switch for the whole page) */
[data-l="ar"] { display: none; }
html[data-lang="ar"] [data-l="ar"] { display: revert; }
html[data-lang="ar"] [data-l="en"] { display: none; }
html[data-lang="ar"] .dossier [data-l="ar"] { direction: rtl; text-align: right; font-family: var(--ar); }
html[data-lang="ar"] .dossier dd[data-l="ar"] { display: block; font-size: 18px; line-height: 1.8; }
html[data-lang="ar"] .dossier blockquote [data-l="ar"] { display: block; font: 400 24px/1.6 var(--ar); }
html[data-lang="ar"] .dossier .role [data-l="ar"] { font: 400 16px/1.4 var(--ar); text-transform: none; letter-spacing: 0; }

/* ───────── III · strategy ───────── */
#strategy .opener, #voice .opener { max-width: 70%; }
.promise { margin-top: clamp(56px, 7vw, 100px); }
.promise p { grid-column: 1 / span 10; font: 400 clamp(40px, 6.6vw, 118px)/1.0 var(--serif); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.promise .ar { grid-column: 1 / span 9; font: 400 clamp(24px, 2.6vw, 42px)/1.6 var(--ar); color: var(--ink-2); margin-top: 24px; direction: rtl; text-align: left; }
.vm { margin-top: clamp(80px, 10vw, 150px); row-gap: 40px; }
.vm > div { border-top: 1px solid var(--rule); padding-top: 24px; }
.vm > div:nth-child(1) { grid-column: 1 / span 5; } .vm > div:nth-child(2) { grid-column: 7 / span 6; }
.vm p.v { font: 400 clamp(19px, 1.6vw, 25px)/1.45 var(--serif); margin: 0; text-wrap: pretty; }
.values { margin-top: clamp(96px, 12vw, 170px); }
.values__rings { position: relative; margin-top: 44px; display: flex; justify-content: center; }
.vring { appearance: none; position: relative; flex: 0 0 auto; width: clamp(120px, 15vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--silk); background: transparent; margin-left: calc(clamp(120px, 15vw, 240px) * -.18); display: grid; place-items: center; padding: 0 14px; text-align: center; cursor: pointer; font: 400 clamp(13px, 1.2vw, 19px)/1.2 var(--sans); color: var(--silk); transition: background .5s var(--settle), color .5s var(--settle); }
.vring:first-child { margin-left: 0; }
.vring[aria-pressed="true"] { background: var(--silk); color: var(--ob); font-weight: 700; z-index: 2; }
.values__def { margin: 36px auto 0; text-align: center; min-height: 8em; max-width: 60ch; }
.values__def h4 { font: 400 28px/1.2 var(--serif); margin: 0 0 10px; }
.values__def p { margin: 0; color: var(--ink-2); }
.values__def .ar { font-size: 19px; line-height: 1.8; margin-top: 8px; direction: rtl; color: var(--ink-3); }
@media (max-width: 720px) { .values__rings { flex-wrap: wrap; gap: 8px; } .vring { margin-left: 0; width: 29vw; padding: 0 6px; } }
.goals { margin-top: clamp(96px, 12vw, 170px); }
.goals ol { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: g; }
.goals li { counter-increment: g; display: grid; grid-template-columns: 60px minmax(0, 4fr) minmax(0, 7fr); gap: var(--gut); padding: 18px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.goals li::before { content: "0" counter(g); font: 400 14px/1 var(--serif); color: var(--ink-3); }
.goals li h4 { font: 400 19px/1.25 var(--serif); margin: 0; }
.goals li p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 860px) { .goals li { grid-template-columns: 40px 1fr; } .goals li p { grid-column: 2; } .vm > div { grid-column: 1 / -1 !important; } .promise p, .promise .ar { grid-column: 1 / -1; } #strategy .opener, #voice .opener { max-width: none; } }
.arche { margin-top: clamp(96px, 12vw, 170px); }
.arche__rows { margin-top: 32px; }
.arche__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr); gap: var(--gut); align-items: baseline; padding: 10px 0 16px; border-bottom: 1px solid var(--rule); }
.arche__row h4 { margin: 0; font-family: var(--serif); font-weight: 700; letter-spacing: -.025em; line-height: .95; }
.arche__row .pct { font: 300 clamp(24px, 3.6vw, 64px)/1 var(--sans); text-align: right; letter-spacing: -.02em; }
.arche__row p { margin: 0; color: var(--ink-2); font-size: 15px; }
.arche__row:nth-child(1) h4 { font-size: clamp(64px, 10vw, 190px); }
.arche__row:nth-child(2) h4 { font-size: clamp(40px, 5.4vw, 104px); }
.arche__row:nth-child(3) h4 { font-size: clamp(24px, 2.8vw, 56px); }
.arche__bar { display: flex; height: 10px; margin-top: 28px; }
.arche__bar i { display: block; height: 100%; transform-origin: 0 50%; }
.arche__bar i:nth-child(1) { flex: 60; background: var(--silk); } .arche__bar i:nth-child(2) { flex: 30; background: var(--taupe); } .arche__bar i:nth-child(3) { flex: 10; background: var(--red); }
@media (max-width: 860px) { .arche__row { grid-template-columns: 1fr auto; } .arche__row p { grid-column: 1 / -1; } }

/* ───────── IV · voice ───────── */
.mnn { margin-top: clamp(56px, 7vw, 100px); }
.mnn > div { border-top: 1px solid var(--rule); padding-top: 24px; }
.mnn > div:nth-child(1) { grid-column: 1 / span 4; } .mnn > div:nth-child(2) { grid-column: 5 / span 4; } .mnn > div:nth-child(3) { grid-column: 9 / span 4; }
.mnn ul { list-style: none; margin: 0; padding: 0; }
.mnn li { font: 400 clamp(32px, 4vw, 68px)/1.12 var(--serif); letter-spacing: -.015em; }
html[data-lang="ar"] .mnn li { font: 700 clamp(30px, 3.8vw, 64px)/1.4 var(--ar); }
.mnn .nice li { color: var(--ink-2); }
.mnn .never li { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: .055em; }
@media (max-width: 860px) { .mnn > div { grid-column: 1 / -1 !important; } .mnn > div + div { margin-top: 24px; } }
.spectrum { margin-top: clamp(96px, 12vw, 170px); row-gap: 32px; }
.spectrum__intro { grid-column: 1 / span 4; }
.spectrum__intro .body { margin-top: 16px; }
.spectrum__scales { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; }
.scale { display: grid; grid-template-columns: 9.5em 1fr 9.5em; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.scale > span b { display: block; font: 400 19px/1.2 var(--serif); }
.scale > span b[lang="ar"] { font: 700 22px/1.3 var(--ar); }
.scale > span small { display: block; font: 400 13px/1.4 var(--sans); color: var(--ink-3); margin-top: 2px; }
.scale > span:last-child { text-align: right; }
.scale__track { position: relative; height: 2px; background: var(--rule); }
.scale__fill { position: absolute; left: 0; top: -1px; height: 4px; background: var(--silk); width: calc(var(--v) * 1%); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--settle); }
.scale__dot { position: absolute; top: 50%; left: calc(var(--v) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--red); transform: rotate(45deg) scale(0); transition: transform .5s var(--settle) .9s; }
.spectrum.in .scale__fill { transform: scaleX(1); } .spectrum.in .scale__dot { transform: rotate(45deg) scale(1); }
@media (max-width: 860px) { .spectrum__intro, .spectrum__scales { grid-column: 1 / -1; } .scale { grid-template-columns: 6.5em 1fr 6.5em; } .scale > span b { font-size: 16px; } }

.pillars { margin-top: clamp(96px, 12vw, 170px); }
.colonnade { margin-top: 36px; display: flex; gap: 10px; align-items: stretch; }
.pillar { position: relative; flex: 1 1 0; min-width: 0; border: 1px solid var(--rule); background: transparent; transition: flex-grow .9s var(--settle), background .5s, border-color .5s; display: flex; flex-direction: column; cursor: pointer; }
.pillar[data-open="true"] { flex-grow: 3.2; background: var(--em); border-color: var(--em); cursor: default; }
.pillar__head { appearance: none; background: none; border: 0; text-align: left; padding: 26px 24px 22px; cursor: pointer; display: flex; flex-direction: column; color: var(--silk); }
.pillar[data-open="true"] .pillar__head { cursor: default; }
.pillar__n { font: 400 clamp(36px, 3.4vw, 60px)/1 var(--serif); color: var(--taupe); }
.pillar__t { font: 400 clamp(18px, 1.5vw, 24px)/1.2 var(--serif); margin: 16px 0 6px; }
.pillar__s { font: italic 400 15px/1.35 var(--serif); color: rgba(255,240,228,.62); }
.pillar__more { padding: 0 24px 26px; }
.pillar[data-open="false"] .pillar__more { display: none; }
.pillar__more .ex { font: italic 400 clamp(22px, 2vw, 32px)/1.3 var(--serif); margin: 6px 0 24px; max-width: 26ch; }
.pillar__more dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 0; }
.pillar__more dt { font: 500 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,240,228,.58); }
.pillar__more dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,240,228,.88); }
@media (max-width: 960px) { .colonnade { flex-direction: column; } .pillar, .pillar[data-open="true"] { flex: 0 0 auto; } .pillar__more dl { grid-template-columns: 1fr; } }

/* ───────── V · the mark ───────── */
#mark .opener { position: relative; z-index: 1; max-width: 64%; }
@media (max-width: 860px) { #mark .opener { max-width: none; } }
.ladder { list-style: none; margin: clamp(56px, 7vw, 100px) 0 0; padding: 0; }
.rung { display: grid; grid-template-columns: clamp(64px, 8vw, 140px) minmax(0, 1fr); gap: var(--gut); align-items: start; min-height: min(78vh, 760px); padding: 36px 0; border-top: 1px solid var(--rule); }
.rung__n { font: 400 clamp(28px, 3vw, 52px)/1 var(--serif); color: var(--ink-3); padding-top: 10px; }
.rung__body { min-width: 0; }
.rung__ar { font: 700 clamp(32px, 4.4vw, 76px)/1.5 var(--ar); margin: 0; direction: rtl; text-align: right; color: var(--ink); text-wrap: balance; }
.rung__ar--long { font-size: clamp(26px, 3vw, 50px); line-height: 1.7; }
.rung__en { font: 400 clamp(18px, 1.5vw, 23px)/1.5 var(--serif); color: var(--ink-2); margin: 18px 0 0; max-width: 46ch; }
.rung__a { font: italic 400 clamp(20px, 1.8vw, 28px)/1.35 var(--serif); margin: 26px 0 0; color: var(--em); }
.rung__a .ar { font: 700 1.2em/1.4 var(--ar); font-style: normal; margin-right: .5em; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: var(--gut); margin-top: 32px; }
.choice { text-align: center; padding: 22px 12px 16px; background: var(--fill); transition: opacity .8s var(--settle); }
.choice svg { width: 100%; height: 150px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.choice p { margin: 12px 0 0; font: 400 18px/1.2 var(--serif); }
.choice p .ar { display: block; font: 700 20px/1.4 var(--ar); }
.rung.in .choice:not(.pick) { opacity: .28; transition-delay: .8s; }
.choice.pick { background: var(--ob); color: var(--silk); }
.symbol-line { font: 400 clamp(20px, 2.2vw, 36px)/1.5 var(--serif); margin: 26px 0 0; max-width: 40ch; }
.symbol-line i { font-style: normal; color: var(--ink-3); }
@media (max-width: 720px) { .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .choice svg { height: 90px; } .rung { grid-template-columns: 44px minmax(0, 1fr); min-height: 0; } }

.direction { margin-top: clamp(64px, 8vw, 110px); row-gap: 32px; }
.direction > div { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: 24px; }
.direction h4 { font: 400 22px/1.2 var(--serif); margin: 0 0 10px; }
.direction p { margin: 0; color: var(--ink-2); font-size: 15px; }
.direction .twist { grid-column: 1 / -1; background: var(--ob); color: var(--silk); padding: 26px 28px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; border: 0; }
.direction .twist .glyphs { display: flex; align-items: center; gap: 18px; font: 400 64px/1 var(--ar); }
.direction .twist .glyphs svg { width: 74px; color: var(--silk); }
.direction .twist .glyphs s { color: rgba(255,240,228,.4); text-decoration-color: var(--red); }
.direction .twist .arrow { font: 400 28px/1 var(--sans); color: var(--taupe); }
.direction .twist p { color: rgba(255,240,228,.82); font-size: 16px; }
@media (max-width: 860px) { .direction > div { grid-column: 1 / -1; } .direction .twist { grid-template-columns: 1fr; } }

.sketch { position: relative; height: 92vh; min-height: 520px; margin: 0; background: #ddd url(../img/sketch.webp) center / cover; }
.sketch figcaption { position: absolute; left: var(--m); bottom: 18px; font: 500 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(15,15,15,.6); }

/* capital → mark (pinned, scrubbed) */
.morph { position: relative; height: 420vh; background: var(--red); }
.morph__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.morph__pattern { position: absolute; inset: 0; color: #5E0200; }
.morph__pattern .pat { width: 100%; height: 100%; -webkit-mask-size: auto 50vh; mask-size: auto 50vh; }
.morph__col { position: absolute; left: 50%; top: 22vh; width: min(30vh, 30vw); margin-left: calc(min(30vh, 30vw) / -2); }
.morph__col img { width: 100%; position: relative; }
.mlock { position: absolute; left: 50%; top: 47%; width: min(40vh, 52vw); aspect-ratio: 196 / 231; margin-left: calc(min(40vh, 52vw) / -2); transform: translateY(-50%); color: var(--silk); }
.mlock > * { position: absolute; }
.mlock__mark { left: 0; top: 0; width: 86.22%; height: 51.52%; transform-origin: 0 0; }
.mlock__mark svg { width: 100%; height: 100%; color: var(--silk); }
.mlock__mark .stone { position: absolute; inset: 0; background: url(../img/column-capital.webp) 50% 24% / 150% auto; -webkit-mask: url(../svg/mark-diacritics.svg) center / 100% 100% no-repeat; mask: url(../svg/mark-diacritics.svg) center / 100% 100% no-repeat; }
.mlock__reg { left: 89.8%; top: 6.5%; width: 10.7%; }
.mlock__ar { left: 0; top: 58%; width: 100%; }
.mlock__en { left: 0; top: 84%; width: 100%; }
.morph__copy { position: absolute; z-index: 3; left: var(--m); bottom: calc(var(--safe-b) + 2vh); width: min(520px, 36vw); color: var(--silk); }
.morph__step { margin: 0 0 12px; font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,240,228,.7); }
.morph__step b { display: block; margin-top: 6px; font: 400 clamp(22px, 2vw, 32px)/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--silk); }
.morph__text { margin: 0; font: 400 clamp(16px, 1.2vw, 19px)/1.55 var(--sans); color: rgba(255,240,228,.9); min-height: 7.8em; }
.morph__text b { font-weight: 700; }

.markroom { row-gap: 48px; align-items: center; }
.markroom__stage { grid-column: 1 / span 7; background: var(--silk); color: var(--ob); aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative; }
.markroom__stage .m { position: absolute; width: 58%; transition: opacity .7s var(--settle), transform .9s var(--settle); }
.markroom__stage .m svg { width: 100%; height: auto; }
.markroom__stage .m--plain { opacity: 0; transform: scale(.97); }
.markroom__stage[data-v="plain"] .m--dia { opacity: 0; transform: scale(1.03); }
.markroom__stage[data-v="plain"] .m--plain { opacity: 1; transform: none; }
.markroom__side { grid-column: 9 / span 4; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin: 22px 0 18px; }
.seg button { appearance: none; border: 0; background: none; border-radius: 999px; padding: 10px 16px; font: 500 12px/1 var(--sans); letter-spacing: .06em; cursor: pointer; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--silk); color: var(--ob); }
@media (max-width: 860px) { .markroom__stage, .markroom__side { grid-column: 1 / -1; } }
.build { margin-top: clamp(96px, 12vw, 170px); row-gap: 28px; }
.build figure { margin: 0; }
.build figure:nth-child(1) { grid-column: 1 / span 7; } .build figure:nth-child(2) { grid-column: 8 / span 5; }
.build .wipe { overflow: hidden; background: #e8e8e8; clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--settle); }
.build figure:nth-child(2) .wipe { background: #101010; }
.build.in .wipe { clip-path: inset(0 0 0 0); }
.build svg { width: 100%; height: auto; }
.build figcaption { margin-top: 10px; font: 400 13px/1.4 var(--sans); color: var(--ink-3); }
@media (max-width: 860px) { .build figure { grid-column: 1 / -1 !important; } }
.icon { margin-top: clamp(96px, 12vw, 170px); row-gap: 40px; align-items: end; }
.icon__tiles { grid-column: 1 / span 7; display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; }
.tile { width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: 22.5%; }
.tile svg { width: 64%; height: auto; }
.tile--ob { background: var(--ob); color: var(--silk); box-shadow: inset 0 0 0 1px rgba(255,240,228,.22); }
.tile--silk { background: var(--silk); color: var(--ob); }
.tile--em { background: var(--em); color: var(--silk); }
.tile--red { background: var(--red); color: var(--silk); }
.icon__text { grid-column: 9 / span 4; }
.icon__text .body { margin-top: 14px; }
@media (max-width: 860px) { .icon__tiles, .icon__text { grid-column: 1 / -1; } }

/* ───────── VI · the house ───────── */
.facade { max-width: 1280px; margin: clamp(56px, 7vw, 100px) auto 0; }
.facade__beam { position: relative; background: var(--silk); color: var(--ob); min-height: clamp(96px, 11vw, 150px); display: grid; place-items: center; padding: clamp(14px, 1.8vw, 24px) 20px; }
.beam__default, .beam__sub { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 48px); }
.beam__default svg { height: clamp(46px, 6vw, 92px); width: auto; }
.beam__default .names { font: 700 clamp(22px, 3vw, 46px)/1 var(--serif); letter-spacing: .03em; display: flex; flex-direction: column; gap: 6px; }
.beam__default .names .ar { font: 700 clamp(22px, 2.8vw, 44px)/1 var(--ar); }
.beam__sub svg { height: clamp(70px, 8vw, 116px); width: auto; }
.beam__sub[hidden], .beam__default[hidden] { display: none; }
.facade__frieze { height: 26px; color: var(--em-2); background-color: currentColor; border-bottom: 1px solid rgba(255,240,228,.25); }
.facade__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 2.4vw, 40px); padding: 0 clamp(10px, 3vw, 48px); }
.fcol { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--silk); display: flex; flex-direction: column; align-items: stretch; }
.fcol__cap { display: block; margin: 0 -4%; }
.fcol__cap svg { width: 100%; height: auto; color: var(--silk); }
.fcol__cap svg path { transition: fill .5s; }
.fcol__shaft { display: block; height: clamp(170px, 24vw, 340px); margin: -14% 30% 0; background: var(--silk); transition: background .5s, transform .6s var(--settle); background-image: repeating-linear-gradient(90deg, transparent 0 18%, rgba(15,15,15,.14) 18% calc(18% + 1px)); }
.fcol--open .fcol__cap svg path { fill: none; stroke: var(--silk); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fcol--open .fcol__shaft { background: none; box-shadow: inset 0 0 0 1px rgba(255,240,228,.75); }
.fcol__base { margin-top: 12px; padding: 12px 4px 0; text-align: center; border-top: 1px solid rgba(255,240,228,.3); }
.fcol__base b { display: block; font: 400 clamp(13px, 1.25vw, 19px)/1.2 var(--serif); }
.fcol__base span { display: block; font: 700 clamp(14px, 1.15vw, 18px)/1.5 var(--ar); color: rgba(255,240,228,.7); margin-top: 4px; }
.fcol:hover .fcol__shaft, .fcol[aria-pressed="true"] .fcol__shaft { transform: translateY(-6px); }
.fcol[aria-pressed="true"]:not(.fcol--open) .fcol__shaft { background-color: var(--taupe); }
.fcol[aria-pressed="true"]:not(.fcol--open) .fcol__cap svg path { fill: var(--taupe); }
.fcol[aria-pressed="true"] .fcol__base b { color: var(--taupe); }
.facade__step { height: 16px; background: rgba(255,240,228,.18); margin-top: 22px; }
.facade__step + .facade__step { height: 12px; margin: 0 -2%; background: rgba(255,240,228,.1); }
.facade__note { margin: 18px auto 0; text-align: center; color: var(--ink-2); font-size: 15px; max-width: 64ch; min-height: 3.2em; }
@media (max-width: 860px) { .facade__cols { gap: 6px; padding: 0; } .fcol__base span { display: none; } }
.rules { margin-top: clamp(80px, 10vw, 140px); row-gap: 40px; align-items: start; }
.rules__line { grid-column: 1 / span 6; font: 400 clamp(22px, 2vw, 32px)/1.35 var(--serif); margin: 0; }
.rules__line b { font-weight: 400; color: var(--taupe); }
.rules__scale { grid-column: 8 / span 5; }
.idscale { position: relative; margin: 34px 0 18px; height: 2px; background: rgba(255,240,228,.4); }
.idscale b { position: absolute; left: 74%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font: 400 12px/1 var(--serif); color: var(--silk); }
.idscale__ends { display: flex; justify-content: space-between; font: 400 17px/1.2 var(--serif); margin: 44px 0 18px; }
@media (max-width: 860px) { .rules__line, .rules__scale { grid-column: 1 / -1; } }

/* ───────── VII · the system ───────── */
.colours { margin-top: clamp(56px, 7vw, 100px); }
.ground { display: grid; grid-template-columns: 6fr 3fr 1fr; height: clamp(420px, 62vh, 640px); }
.ground__primary { display: grid; grid-template-rows: repeat(3, 1fr); }
.sw { appearance: none; border: 0; text-align: left; cursor: pointer; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; font: 500 12px/1.4 var(--sans); letter-spacing: .04em; position: relative; }
.sw b { font: 400 clamp(20px, 2vw, 30px)/1.1 var(--serif); letter-spacing: 0; }
.sw span { opacity: .82; }
.sw .cp { position: absolute; right: 16px; top: 16px; font: 500 10px/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.sw:hover .cp, .sw:focus-visible .cp, .sw.copied .cp { opacity: .85; }
.ground__col { display: flex; flex-direction: column; }
.ground__col .sw { flex: 1; }
.ground__label { display: grid; grid-template-columns: 6fr 3fr 1fr; margin-top: 12px; font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.paint { margin-top: clamp(64px, 8vw, 110px); row-gap: 32px; align-items: center; }
.paint__stage { grid-column: 1 / span 8; position: relative; aspect-ratio: 16 / 9; overflow: hidden; transition: background .8s var(--settle), color .8s var(--settle); display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 6% 6% 12%; gap: 6%; }
.paint__stage .lk svg { width: 64%; height: auto; margin: 0 auto; }
.paint__line { font: 400 clamp(24px, 3vw, 50px)/1.08 var(--serif); margin: 0; letter-spacing: -.01em; }
.paint__line .ar { display: block; font: 700 .7em/1.6 var(--ar); margin-top: 10px; direction: rtl; text-align: left; opacity: .85; }
.paint__band { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; opacity: .8; }
.paint__pick { grid-column: 9 / span 4; }
.grounds { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 6px; }
.grounds button { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 11.5px/1 var(--sans); color: var(--ink-2); }
.grounds i { width: 54px; height: 54px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(15,15,15,.15); }
.grounds button[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--silk), 0 0 0 3.5px var(--ob); }
.grounds button[aria-pressed="true"] { color: var(--ink); }
@media (max-width: 860px) { .ground { grid-template-columns: 1fr; height: auto; } .ground__primary { grid-template-rows: none; } .ground__primary .sw, .ground__col .sw { min-height: 92px; } .ground__label { display: none; } .paint__stage, .paint__pick { grid-column: 1 / -1; } }
.typeset { margin-top: clamp(96px, 12vw, 170px); row-gap: 56px; }
.face { grid-column: span 4; border-top: 1px solid var(--rule); padding-top: 24px; }
.face__spec { height: 120px; display: flex; align-items: center; gap: 24px; color: var(--ink); }
.face__spec svg { height: 100%; width: auto; max-width: 100%; }
.face h4 { font: 400 15px/1.3 var(--sans); margin: 20px 0 4px; }
.face h4 b { font-weight: 700; }
.face .role { font: 500 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.face .role [lang="ar"] { font: 700 14px/1 var(--ar); letter-spacing: 0; }
.face p { margin: 0; color: var(--ink-2); font-size: 15px; }
.face__live--sans { font: 700 clamp(56px, 6vw, 96px)/1 var(--sans); letter-spacing: -.02em; }
@media (max-width: 960px) { .face { grid-column: 1 / -1; } }
.tester { grid-column: 1 / -1; }
.tester input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 400 clamp(30px, 5vw, 84px)/1.2 var(--serif); padding: 8px 0 14px; letter-spacing: -.015em; }
.tester input:focus { outline: none; }
.tester input:focus-visible { outline: 2px solid var(--taupe); outline-offset: 8px; }
.patterntxt { margin-top: clamp(96px, 12vw, 170px); row-gap: 16px; }
.patterntxt .h3 { grid-column: 1 / span 5; } .patterntxt .body { grid-column: 7 / span 6; }
.gridspec { margin-top: clamp(96px, 12vw, 170px); row-gap: 40px; align-items: start; }
.gridspec__intro { grid-column: 1 / span 5; }
.gridspec__intro .body { margin: 14px 0 22px; }
.gridspec table { grid-column: 7 / span 6; border-collapse: collapse; width: 100%; font-size: 15px; }
.gridspec thead th { text-align: left; font: 500 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 12px 0; border-bottom: 1px solid var(--ob); }
.gridspec td, .gridspec tbody th { text-align: left; padding: 14px 10px 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-weight: 400; }
.gridspec tbody th { font: 400 18px/1.25 var(--serif); color: var(--ink); }
.gridspec small { font: 400 12px var(--sans); color: var(--ink-3); }
@media (max-width: 860px) { .gridspec__intro, .gridspec table, .patterntxt .h3, .patterntxt .body { grid-column: 1 / -1; } .gridspec table { font-size: 13px; } .btn--grid { display: none; } }
.donts { margin-top: clamp(96px, 12vw, 170px); }
.donts__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.dont { background: var(--fill); aspect-ratio: 4 / 3; position: relative; display: grid; place-items: center; overflow: hidden; }
.dont .art { width: 46%; color: var(--ob); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dont .art svg { width: 100%; height: auto; }
.dont .art .wm { font: 700 clamp(14px, 1.6vw, 24px)/1 var(--serif); letter-spacing: .03em; }
.dont p { position: absolute; left: 16px; top: 14px; margin: 0; font: 500 12.5px/1.35 var(--sans); max-width: 22ch; display: flex; gap: 8px; color: var(--ink); }
.dont p::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; background: var(--red); transform: rotate(45deg); }
.dont .x::before, .dont .x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56%; height: 1px; background: rgba(114,3,0,.5); }
.dont .x::before { transform: translate(-50%, -50%) rotate(28deg); } .dont .x::after { transform: translate(-50%, -50%) rotate(-28deg); }
.d-squeeze .art svg { transform: scaleX(.55); }
.d-align .art { align-items: flex-start; }
.d-align .art svg { width: 70%; }
.d-align .wm { align-self: flex-end; }
.d-stroke .art svg path { fill: none; stroke: currentColor; stroke-width: 2.5; }
.d-type .wm { font-family: var(--sans) !important; font-weight: 400 !important; letter-spacing: .3em !important; }
.d-space .wm { letter-spacing: .45em !important; }
.d-shadow .art svg { filter: drop-shadow(6px 8px 3px rgba(0,0,0,.45)); }
@media (max-width: 860px) { .donts__grid { grid-template-columns: 1fr 1fr; } }

/* ───────── VIII · in the world ───────── */
.world { position: relative; background: var(--ob); }
.world__head { padding-top: clamp(96px, 14vh, 168px); padding-bottom: 48px; }
.portico { position: relative; margin: 0; padding: 0 var(--m); }
.course--pediment { display: block; width: 100%; height: clamp(60px, 9vw, 140px); }
.course--pediment path { stroke: rgba(255,240,228,.55); }
.portico__img img { width: 100%; height: auto; }
.portico figcaption { margin-top: 12px; font: 400 14px/1.5 var(--sans); color: var(--ink-3); max-width: 70ch; }
.reel { position: relative; margin-top: clamp(64px, 8vw, 110px); }
.reel__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.reel__track { display: flex; gap: clamp(16px, 2vw, 32px); padding-inline: var(--m); width: max-content; height: min(64vh, 640px); align-items: stretch; will-change: transform; }
.shot { margin: 0; flex: 0 0 auto; height: 100%; display: flex; flex-direction: column; }
.shot img { height: calc(100% - 30px); width: auto; display: block; background: #161616; }
.shot figcaption { margin-top: 10px; font: 400 13px/1.4 var(--sans); color: rgba(255,240,228,.6); }
.phones { display: flex; gap: 12px; height: calc(100% - 30px); }
.phones img { height: 100%; width: auto; }
.reel__bar { position: absolute; left: var(--m); right: var(--m); top: 32px; height: 2px; background: rgba(255,240,228,.14); }
.reel__bar i { display: block; height: 100%; background: var(--silk); transform-origin: 0 50%; transform: scaleX(0); }
.reel.free .reel__pin { overflow-x: auto; overscroll-behavior-x: contain; }
.reel.free .reel__bar { display: none; }
@media (max-width: 900px) {
  .reel__pin { height: auto; display: block; overflow: visible; }
  .reel__track { width: auto; height: auto; flex-direction: column; padding-bottom: 40px; }
  .shot, .shot img { height: auto; }
  .shot img { width: 100%; }
  .phones { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
  .phones img { height: 60vh; scroll-snap-align: start; }
  .reel__bar { display: none; }
}

/* ───────── outro ───────── */
.outro { position: relative; min-height: 100vh; display: grid; align-items: center; background: var(--ob) url(../img/stone-close.webp) center / cover; }
.outro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,15,.78) 0%, rgba(15,15,15,.5) 45%, rgba(15,15,15,.9) 100%); }
.outro__in { width: 100%; padding-block: 140px calc(var(--safe-b) + 60px); display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.outro__col { width: clamp(70px, 8vw, 130px); }
.outro__col svg { width: 100%; height: auto; overflow: visible; }
.outro__col .p { fill: var(--silk); stroke: var(--ob); stroke-width: 1; }
.outro__lock svg { width: clamp(110px, 11vw, 170px); height: auto; color: var(--silk); margin-bottom: 40px; }
.outro h2 { font: 400 clamp(40px, 6vw, 110px)/1.02 var(--serif); margin: 0; letter-spacing: -.02em; max-width: 14ch; }
.outro h2 .ar { display: block; font: 700 clamp(30px, 4.4vw, 76px)/1.5 var(--ar); color: rgba(255,240,228,.8); margin-top: 8px; direction: rtl; text-align: left; }
.credits { margin-top: 60px; padding-top: 22px; border-top: 1px solid rgba(255,240,228,.22); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.credits p { margin: 0; font-size: 14.5px; color: rgba(255,240,228,.8); }
.credits .label { color: rgba(255,240,228,.5); }
@media (max-width: 860px) { .credits { grid-template-columns: 1fr 1fr; } .outro__in { grid-template-columns: 1fr; } .outro__col { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .course path, .course circle { stroke-dashoffset: 0; }
  .frieze { clip-path: none; }
}
.fcol--open .fcol__shaft { margin-top: 2px; }
@media (max-width: 720px) {
  .morph__col { top: 10vh; width: 40vw; margin-left: -20vw; }
  .mlock { top: 30%; width: 56vw; margin-left: -28vw; }
  .morph__copy { width: auto; right: var(--m); bottom: calc(var(--safe-b) + 1vh); background: rgba(114,3,0,.9); padding: 14px 14px 16px; margin: 0 -14px; }
  .morph__text { min-height: 0; font-size: 14.5px; }
  .fcol__base b { font-size: 11px; }
  .fcol__base { padding-top: 8px; }
  .hero__meta { display: none; }
}