/* Source: studio/kage-base.css */

/* ============================================================= tokens */
:root{
  --ink:#05070a;          /* page black */
  --ink-2:#0a0e12;        /* raised black */
  --bone:#dfe7e0;         /* the pale sage white of the wordmark */
  --bone-dim:#aab4ad;
  --muted:#78837c;
  --line:rgba(223,231,224,.13);
  --line-soft:rgba(223,231,224,.07);
  --vermilion:#e0231c;
  --ember:#ff5a3c;
  --gold:#c9a24a;
  --pad:clamp(20px, 3.4vw, 56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; height:100vh; }
::selection{ background:var(--vermilion); color:#fff; }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============================================================= layers */
#gl{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0; background:#05070a;
}
#grain{
  position:fixed; inset:-1px; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:180px 180px;
}
#vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(2,4,6,.55) 100%);
}
.page{ position:relative; z-index:10; }

/* ============================================================= type */
.eyebrow{
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); text-shadow:0 1px 16px rgba(3,6,8,.9);
}
.jp{ font-family:'NotoJP','Onest',sans-serif; font-weight:400; }
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:-.005em; }
.display{
  text-transform:uppercase; line-height:1.055; letter-spacing:-.012em;
  font-weight:400; text-shadow:0 2px 34px rgba(3,6,8,.72);
}
.h-hero{ font-size:clamp(26px,3.05vw,46px); }
.h-sec{ font-size:clamp(30px,4.0vw,60px); }
.body-lg{ font-size:clamp(14px,1.02vw,17px); line-height:1.72; color:#b4bfb7; font-weight:300; text-shadow:0 1px 20px rgba(3,6,8,.88); }
.body{ font-size:14px; line-height:1.68; color:#9aa5a0; font-weight:300; text-shadow:0 1px 18px rgba(3,6,8,.85); }
.num{ font-size:clamp(26px,2.5vw,36px); font-weight:300; letter-spacing:-.02em; color:var(--bone); font-variant-numeric:tabular-nums; }

/* ============================================================= reveal */
[data-rv]{ opacity:0; }
[data-rv="up"]{ transform:translate3d(0,26px,0); }
[data-rv="fade"]{ transform:none; }
[data-rv].rv-in{ opacity:1; transform:none;
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out); }
.mask-line{ display:block; overflow:hidden; }
.mask-line:not(.word-reveal) > span{ display:block; transform:translate3d(0,110%,0); }
.rv-in .mask-line:not(.word-reveal) > span, .mask-line:not(.word-reveal).rv-in > span{ transform:none; }
.mask-line:not(.word-reveal) > span{ transition:transform 1.05s var(--ease-out); }
.word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.word{
  display:inline-block; opacity:0; transform:translate3d(0,112%,0); will-change:transform,opacity;
  transition:transform .82s var(--ease-out), opacity .5s var(--ease-out);
  transition-delay:var(--word-delay,0ms);
}
.word-reveal.rv-in .word{ opacity:1; transform:none; }

/* ============================================================= preloader */
#pre{
  position:fixed; inset:0; z-index:100; background:#05070a;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#pre.done{ opacity:0; visibility:hidden; pointer-events:none; }
.pre-in{ width:min(420px,74vw); text-align:center; }
.pre-mark{ margin:0 auto 26px; width:44px; height:44px; opacity:.9; }
.pre-mark svg{ width:100%; height:100%; display:block; }
.pre-jp{ font-size:12px; letter-spacing:.5em; color:var(--bone-dim); margin-bottom:20px; }
.pre-bar{ position:relative; height:1px; background:rgba(223,231,224,.14); overflow:hidden; }
.pre-bar i{ position:absolute; inset:0 100% 0 0; background:var(--bone); transition:right .35s linear; }
.pre-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pre-meta b{ font-weight:500; color:var(--bone-dim); font-variant-numeric:tabular-nums; }

/* ============================================================= nav */
.nav{
  /* Width comes from --vw, not from right:0. A fixed element resolves its
     inset against the initial containing block, and the page's own horizontal
     overflow makes that block wider than the screen — 437 against a 390 phone,
     860 against a 768 tablet — which carried the burger off the right edge.
     --vw is the layout viewport, written on every resize. */
  position:fixed; top:0; left:0; width:var(--vw, 100%); height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
  transition:transform .55s var(--ease);
}
/* The sticky wash sits on its own layer rather than on the bar. A
   backdrop-filter promotes its element to the containing block for any
   position:fixed descendant, and the bar holds the mobile menu sheet — put the
   blur here and the sheet was measured against an 84px bar instead of the
   frame, for as long as the blur took to fade. */
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(5,7,10,.62);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1; }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1; }
.nav.hide{ transform:translate3d(0,-101%,0); }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand svg{ width:34px; height:34px; display:block; }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.brand-tx b{ font-size:12px; font-weight:500; letter-spacing:.26em; }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.34em; color:var(--muted); }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,46px); margin-left:auto; }
.nav-link{
  position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden;
}
.nav-link span{ display:block; height:15px; line-height:15px; transition:transform .55s var(--ease-out), color .3s; }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0); color:var(--bone); letter-spacing:.32em; }
.nav-link:hover span{ transform:translate3d(0,-100%,0); }
.nav-link:hover .alt{ transform:none; }
.nav-link.on{ color:var(--bone); }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--vermilion); }
.nav-burger{ margin-left:clamp(18px,2.6vw,42px); width:26px; height:16px; position:relative; flex:0 0 auto; }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone); transition:width .45s var(--ease-out), transform .45s var(--ease-out); }
.nav-burger i:nth-child(1){ top:4px; width:26px; }
.nav-burger i:nth-child(2){ top:11px; width:17px; }
.nav-burger:hover i:nth-child(2){ width:26px; }
.nav-burger:hover i:nth-child(1){ width:17px; }

/* ============================================================= hero */
.hero{ position:relative; min-height:100svh; padding:0 var(--pad); display:flex; flex-direction:column; }
.hero::before{ content:''; position:absolute; left:0; right:0; top:0; height:46%; pointer-events:none;
  background:linear-gradient(rgba(3,6,9,.72), rgba(3,6,9,.34) 46%, transparent); }
.hero-top{ padding-top:calc(var(--nav-h) + clamp(12px,2.6vh,34px)); max-width:min(560px,46vw); position:relative; z-index:2; }
.hero-top .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.hero-top .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--vermilion); box-shadow:0 0 10px var(--vermilion); }
.hero h1{ margin-bottom:18px; }
.hero-sub{ max-width:322px; text-shadow:0 1px 26px rgba(3,6,8,.95); }
.hero-spacer{ flex:1 1 auto; min-height:clamp(140px,26vh,300px); }
.hero-foot{ padding-bottom:clamp(22px,4.2vh,42px); position:relative; z-index:2; }
.hero-cue{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom:14px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.hero-cue .track{ width:54px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero-cue .track i{ position:absolute; inset:0; background:var(--bone); transform-origin:left;
  animation:cue 2.8s var(--ease-io) infinite; }
.chapters{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.4vw,40px);
  border-top:1px solid var(--line-soft); padding-top:18px;
}
.chip{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
.chip .num{ line-height:1; flex:0 0 auto; transition:color .4s, transform .5s var(--ease-out); }
.chip .tx{ min-width:0; padding-top:3px; }
.chip b{ display:block; font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:6px; transition:color .4s;
  text-shadow:0 1px 16px rgba(3,6,8,.9); }
.chip p{ margin:0; font-size:11px; line-height:1.5; color:#7d8781; max-width:22ch;
  transition:color .4s; }
.chip:hover .num{ color:var(--ember); transform:translate3d(0,-2px,0); }
.chip:hover b{ color:var(--bone); }
.chip:hover p{ color:var(--bone-dim); }
.chip.on .num{ color:var(--ember); }
.chip.on b{ color:var(--bone); }
/* the floating window: a generated Sanmon still carried over the hero */
.peek{
  position:absolute; z-index:2; right:clamp(78px,11vw,190px); top:clamp(132px,25vh,238px);
  width:clamp(150px,16vw,262px); display:block;
  transition:transform .8s var(--ease-out);
}
.peek-fr{ display:block; aspect-ratio:16/10;
  background:linear-gradient(180deg, rgba(3,6,9,.04) 24%, rgba(3,6,9,.48) 100%),
    url('studio/secret-pathways-assets/generated/kage-sanmon-preview.webp') center / cover no-repeat;
  outline:1px solid rgba(223,231,224,.16); outline-offset:-1px;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.9); transition:outline-color .5s; }
.peek:hover{ transform:translate3d(0,-5px,0); }
.peek:hover .peek-fr{ outline-color:rgba(223,231,224,.42); }
.peek-play{ position:absolute; top:0; right:0; left:0; bottom:auto; aspect-ratio:16/10;
  display:grid; place-items:center; pointer-events:none; }
.peek-play svg{ width:clamp(30px,3.2vw,46px); height:auto; filter:drop-shadow(0 2px 12px rgba(0,0,0,.7));
  transition:transform .55s var(--ease-out); }
.peek:hover .peek-play svg{ transform:scale(1.14); }
.peek-cap{ display:flex; align-items:baseline; gap:9px; margin-top:9px; }
.peek-cap b{ font-size:11px; font-weight:400; letter-spacing:.24em; color:var(--bone-dim); }
.peek-cap i{ font-style:normal; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .peek{ display:none; } }

.hero-side{
  position:absolute; z-index:2; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px; pointer-events:none;
}
.hero-side .v{ writing-mode:vertical-rl; font-size:13px; letter-spacing:.62em; color:rgba(223,231,224,.5); }
@keyframes cue{ 0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }

/* ============================================================= sections */
.sec{ position:relative; padding:clamp(88px,15vh,190px) var(--pad); }
.sec::before{
  content:''; position:absolute; inset:-22% -4%; z-index:-1; pointer-events:none;
  background:radial-gradient(110% 62% at 30% 50%, rgba(4,7,10,.88), rgba(4,7,10,.62) 42%, rgba(4,7,10,.18) 74%, rgba(4,7,10,0));
  /* A chapter's scrim is there to hold its own copy off the sanctuary, and it
     is inset -22% so its edges never land as a seam. That overshoot, plus the
     section's top padding, means it was washing most of a screen of scene
     above the chapter — the frame stayed masked long after the hero had let
     go of it. The mask takes the top of it back off: nothing at the very top,
     full strength by the time the chapter's own first line arrives. */
  -webkit-mask-image:linear-gradient(transparent, #000 44%);
          mask-image:linear-gradient(transparent, #000 44%);
}
#pathways::before{ background:radial-gradient(108% 64% at 50% 50%, rgba(4,7,10,.70), rgba(4,7,10,.44) 50%, rgba(4,7,10,0)); }
#eternity::before{ background:radial-gradient(82% 58% at 50% 46%, rgba(4,7,10,.26), rgba(4,7,10,.66) 56%, rgba(4,7,10,.90) 82%, rgba(4,7,10,0)); }
.foot::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(4,7,10,.55), rgba(4,7,10,.94) 40%, rgba(4,7,10,.98));
}
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(30px,5vh,66px); }
.sec-head .k{ font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.sec-head .k b{ color:var(--vermilion); font-weight:500; }
.rule{ flex:1 1 auto; height:1px; background:var(--line-soft); }

/* — chapter I: the gate */
.gate-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(28px,5vw,90px); align-items:start; }
.gate-grid h2{ max-width:11ch; }
.gate-copy{ padding-top:6px; }
.gate-copy .lead{ font-size:clamp(15px,1.16vw,19px); line-height:1.66; color:#c2cdc5; text-shadow:0 1px 20px rgba(3,6,8,.9); }
.gate-copy .lead + p{ margin-top:20px; }
.arrowlink{ display:inline-flex; align-items:center; gap:12px; margin-top:34px;
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); }
.arrowlink .ar{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:background .45s var(--ease), border-color .45s, transform .5s var(--ease-out); }
.arrowlink .ar svg{ width:13px; height:13px; transition:transform .5s var(--ease-out); }
.arrowlink:hover .ar{ background:var(--bone); border-color:var(--bone); }
.arrowlink:hover .ar svg{ transform:translate3d(2px,-2px,0); }
.arrowlink:hover .ar svg path{ stroke:#05070a; }
.gate-stats{ display:flex; gap:clamp(24px,4vw,62px); margin-top:clamp(46px,8vh,96px); border-top:1px solid var(--line-soft); padding-top:24px; }
.gate-stats div b{ display:block; font-size:clamp(22px,2.1vw,32px); font-weight:300; letter-spacing:-.02em; }
.gate-stats div span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* — chapter II: pathways cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); align-items:start; }
.card{ position:relative; cursor:pointer; }
.card:nth-child(1){ transform:translateY(0); }
.card:nth-child(2){ transform:translateY(clamp(26px,5vw,74px)); }
.card:nth-child(3){ transform:translateY(clamp(52px,10vw,148px)); }
/* the frame is a hole punched in the page — the scene is rendered straight
   into this rectangle with a scissored viewport, so each card is a live
   window onto a different corner of the sanctuary */
.card-fr{
  position:relative; aspect-ratio:4/5; background:transparent;
  outline:1px solid var(--line-soft); outline-offset:-1px;
  transition:outline-color .5s var(--ease);
}
.card:hover .card-fr{ outline-color:rgba(223,231,224,.30); }
.card:nth-child(1) .card-fr{
  background:
    linear-gradient(180deg,rgba(3,6,9,.04) 36%,rgba(3,6,9,.72) 100%),
    url('studio/secret-pathways-assets/generated/kage-approach.webp') center / cover no-repeat;
}
.card:nth-child(2) .card-fr{
  background:
    linear-gradient(180deg,rgba(3,6,9,.06) 36%,rgba(3,6,9,.74) 100%),
    url('studio/secret-pathways-assets/generated/kage-lantern-court.webp') center / cover no-repeat;
}
.card:nth-child(3) .card-fr{
  background:
    linear-gradient(180deg,rgba(3,6,9,.05) 36%,rgba(3,6,9,.74) 100%),
    url('studio/secret-pathways-assets/generated/kage-moonwater.webp') center / cover no-repeat;
}
.card-fr::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 46%, rgba(4,6,9,.80)); pointer-events:none; }
/* The fabric overdraws its card by CL_BLEED on every side so the billow and
   the contact shadow have somewhere to go, so the frame cannot clip it. The
   card's outline is not here at all: it is drawn in the cloth shader, where it
   can follow the folds instead of tracing the flat box behind them. */
.cloth-out{ position:absolute; pointer-events:none; z-index:1; }
.on-cloth{ background:none !important; outline:0 !important; overflow:visible; }
.on-cloth::after{ display:none; }

/* ------------------------------------------------- the lights in the stills
   The three plates each have one source in them — two blood moons and a lit
   stone lantern — and they are the only warm thing in an otherwise cold set of
   images. A glow laid over each one, screened so it adds light rather than
   painting over it, is enough to make a flat still look like it is burning.

   Two tracks per light, at durations that do not divide into each other: the
   wrapper swells, the gradient inside it pulses. One track on its own reads as
   a loop within a couple of seconds; two beating against each other do not
   come back around inside the time anyone looks at a card.

   The moon and the lantern are not the same event. A flame gutters — short,
   irregular, deep — so the lantern's track is written unevenly by hand. A moon
   only breathes through moving air, so the moons get a slow, shallow swell and
   nothing more. Giving them both a flicker is what makes this kind of thing
   look like a novelty; the difference is the whole effect. */
.card-fr{ isolation:isolate; }        /* keep the screen blend inside the card */
.glow{
  position:absolute; z-index:1; pointer-events:none;
  left:var(--gx); top:var(--gy); width:calc(var(--gr) * 2); aspect-ratio:1;
  translate:-50% -50%;                /* leaves transform free for the swell */
  mix-blend-mode:screen;
  animation:glow-swell var(--gt2) var(--ease-io) infinite alternate;
}
.glow::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(closest-side, var(--gc1), var(--gc2) 40%, transparent 72%);
  animation:glow-pulse var(--gt) var(--ease-io) infinite;
}
@keyframes glow-swell{ from{ transform:scale(.93); } to{ transform:scale(1.07); } }
@keyframes glow-pulse{ from{ opacity:.78; } 50%{ opacity:1; } to{ opacity:.78; } }
/* a flame does not breathe, it gutters */
@keyframes glow-flame{
  0%{ opacity:.74 }   6%{ opacity:.97 }  12%{ opacity:.63 }  19%{ opacity:.90 }
  27%{ opacity:.55 }  34%{ opacity:.94 } 42%{ opacity:.71 }  51%{ opacity:1 }
  58%{ opacity:.60 }  66%{ opacity:.88 } 74%{ opacity:.67 }  83%{ opacity:.96 }
  91%{ opacity:.72 } 100%{ opacity:.74 }
}
.glow--flame::before{ animation-name:glow-flame; }
.glow--flame{ animation-duration:var(--gt2); }
@media (prefers-reduced-motion:reduce){
  .glow, .glow::before{ animation:none; }
}
.no-webgl .card-fr{ background:linear-gradient(150deg,#101a1d,#0a0d10 62%,#1a0c0b); }
/* If WebGL will not start, the page stays a page: the scene simply becomes a
   still, and the wordmark moves from the 3-D layer into the document. */
.word-fb{ display:none; }
.no-webgl #gl, .no-webgl .peek-play{ display:none; }
/* fixed, or the gradient is measured against a 6000-pixel body box and the
   moon ends up somewhere around the curriculum table */
.no-webgl body{ background:
  radial-gradient(11vw 11vw at 73% 17%, rgba(232,52,28,.95), rgba(158,20,16,.62) 44%, rgba(96,12,12,.20) 64%, transparent 72%),
  radial-gradient(38vw 32vw at 50% 46%, rgba(228,104,24,.40), rgba(122,42,10,.18) 54%, transparent 74%),
  radial-gradient(120% 80% at 50% 0%, rgba(120,150,158,.16), transparent 60%), #05070a;
  background-attachment:fixed; }
.no-webgl .peek-fr{ background:linear-gradient(160deg,#162326,#0b1013 55%,#241010); }
.no-webgl .word-fb{
  display:block; position:absolute; left:0; right:0; bottom:16%; z-index:1;
  font-family:'Wordmark','Onest',sans-serif; font-weight:600; font-size:21.4vw; line-height:.78;
  letter-spacing:.052em; text-align:center; pointer-events:none;
  background:linear-gradient(#e2ece5, #97a89c); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
/* The live hero has no foot scrim, but the fallback still needs one: there it
   stands on a bright CSS sky rather than a night scene, and the chips and the
   wordmark have nothing else holding them off it. So this carries the whole
   declaration now rather than re-colouring one it used to inherit. */
.no-webgl .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  pointer-events:none; background:linear-gradient(transparent, rgba(3,5,8,.72) 52%, rgba(3,5,8,.96)); }
.no-webgl .sec::before, .no-webgl #pathways::before, .no-webgl #eternity::before{ background:none; }
.card-lab{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.card-lab b{ font-size:clamp(13px,1.15vw,17px); font-weight:400; letter-spacing:.02em; text-transform:uppercase; }
.card-lab .jp{ font-size:11px; letter-spacing:.3em; color:rgba(223,231,224,.62); }
.card-ar{ position:absolute; top:14px; right:14px; z-index:2; width:26px; height:26px;
  opacity:0; transform:translate3d(-4px,4px,0); transition:.5s var(--ease-out); }
.card:hover .card-ar{ opacity:1; transform:none; }
.card-meta{ display:flex; justify-content:space-between; margin-top:12px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* — chapter III: curriculum */
.cur-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(28px,5vw,90px); align-items:end; margin-bottom:clamp(34px,6vh,72px); }
.cur-head h2{ max-width:13ch; }
.cur{ border-top:1px solid var(--line-soft); }
.les{
  position:relative; display:grid; align-items:center;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.25fr) 86px;
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:padding .5s var(--ease-out);
}
.les::before{ content:''; position:absolute; left:calc(var(--pad) * -1); right:0; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(224,35,28,.09), transparent 46%);
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none; }
.les:hover::before{ opacity:1; }
.les:hover{ padding-left:clamp(8px,1.2vw,18px); }
.les .k{ font-size:11px; letter-spacing:.16em; color:var(--muted); font-variant-numeric:tabular-nums; transition:color .4s; }
.les:hover .k{ color:var(--vermilion); }
.les h3{ font-size:clamp(16px,1.5vw,23px); font-weight:400; letter-spacing:-.005em; }
.les h3 em{ font-style:normal; font-family:'NotoJP',sans-serif; font-size:.72em; color:var(--muted); margin-left:12px; letter-spacing:.24em; }
.les p{ margin:0; font-size:13px; line-height:1.6; color:#909b95; text-shadow:0 1px 16px rgba(3,6,8,.92); }
.les .t{ text-align:right; font-size:11px; letter-spacing:.14em; color:#8b958f; font-variant-numeric:tabular-nums; text-shadow:0 1px 16px rgba(3,6,8,.92); }
.les .bar{ position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--vermilion);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out); }
.les:hover .bar{ transform:scaleX(1); }

/* — chapter IV: eternity */
.fin{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.fin .eyebrow{ margin-bottom:26px; }
.fin h2{ font-size:clamp(38px,7.4vw,124px); line-height:.94; letter-spacing:-.03em; text-transform:uppercase; }
.fin p{ max-width:44ch; margin:26px auto 0; }
.cta{
  position:relative; display:inline-flex; align-items:center; gap:14px; margin-top:44px;
  padding:17px 30px; border:1px solid var(--line); border-radius:100px; overflow:hidden;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  transition:color .45s var(--ease), border-color .45s;
}
.cta i{ position:absolute; inset:0; background:var(--bone); transform:translate3d(0,101%,0);
  transition:transform .62s var(--ease-out); z-index:-1; }
.cta span,.cta svg{ position:relative; z-index:1; }
.cta:hover{ color:#05070a; border-color:var(--bone); }
.cta:hover i{ transform:none; }
.cta:hover svg path{ stroke:#05070a; }

/* — footer */
.foot{ position:relative; padding:clamp(50px,8vh,96px) var(--pad) clamp(26px,4vh,40px);
  border-top:1px solid var(--line-soft); }
.foot-grid,.foot-base{ position:relative; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr)); gap:clamp(22px,4vw,60px); }
.foot h4{ margin:0 0 16px; font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.foot li a{ font-size:13px; color:#8f9a93; transition:color .35s; }
.foot li a:hover{ color:var(--bone); }
.foot-brand p{ margin:16px 0 0; max-width:34ch; font-size:13px; color:#79847e; }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:clamp(38px,6vh,74px); padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================= progress rail */
.rail{ position:fixed; right:calc(var(--pad) - 4px); top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:12px; align-items:center; }
.rail button{ width:22px; height:10px; display:grid; place-items:center; }
.rail i{ display:block; width:14px; height:1px; background:rgba(223,231,224,.26); transition:.5s var(--ease-out); }
.rail button.on i{ width:22px; background:var(--bone); }
.rail button:hover i{ width:22px; background:var(--bone-dim); }

/* ============================================================= cursor */
.cur-dot{ position:fixed; z-index:80; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid rgba(223,231,224,.42); border-radius:50%; pointer-events:none;
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
             background .35s, border-color .35s, opacity .3s; opacity:0; }
.cur-dot.act{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(223,231,224,.07); border-color:rgba(223,231,224,.6); }
@media (hover:hover) and (pointer:fine){ .cur-dot{ opacity:1 } }

/* ============================================================= responsive */
@media (max-width:1080px){
  .hero-top{ max-width:none; }
  .gate-grid{ grid-template-columns:1fr; gap:26px; }
  .cur-head{ grid-template-columns:1fr; gap:18px; }
  .les{ grid-template-columns:44px minmax(0,1fr) 74px; }
  .les p{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav-links{
    display:flex; position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px);
    padding:calc(var(--nav-h) + 28px) var(--pad) 34px; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(3,6,9,.98); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .65s var(--ease-out), opacity .4s, visibility 0s linear .65s;
  }
  .nav.menu-open .nav-links{
    transform:none; opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  .nav-links .nav-link{
    width:100%; height:auto; padding:17px 0; overflow:visible; border-bottom:1px solid var(--line-soft);
    font-size:17px; line-height:1.2;
  }
  .nav-links .nav-link span{ height:auto; line-height:1.2; transform:none !important; }
  .nav-links .nav-link .alt{ position:static; margin-top:6px; font-size:10px; color:var(--muted); }
  /* The links panel leaves the flow to become the slide-in sheet, taking its
     margin-left:auto with it, so without this the burger sits tucked against
     the wordmark instead of out at the edge where a thumb reaches. */
  /* A transform *or* a backdrop-filter makes an element the containing block
     for its position:fixed descendants. This panel is a child of the bar, so
     once the bar went sticky and started hiding on scroll the open panel was
     measured against the bar instead of the viewport: 146px tall, dragged off
     the top, with the page showing through beside it. Neither may apply while
     the sheet is open — it covers the frame, so there is nothing left to blur. */
  /* A hide transform still promotes the bar, so drop it the instant the sheet
     opens. Without transition:none it eases out over .55s and the sheet spends
     that whole time measured against the bar. */
  .nav.menu-open{ transform:none; transition:none; }
  .nav-burger{ margin-left:auto; }
  .nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg); }
  .nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
  html.nav-open,html.nav-open body{ overflow:hidden; }
  .rail{ display:none; }
  .hero-side{ display:none; }
  .chapters{ grid-template-columns:repeat(2,1fr); gap:18px 14px; }
  .chip p{ font-size:10px; }
  .cards{ grid-template-columns:1fr; gap:14px; }
  .card:nth-child(2),.card:nth-child(3){ transform:none; }
  .gate-stats{ flex-wrap:wrap; gap:20px 34px; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cue{ display:none; }
}
/* ================================================== section layouts (B set)
   The six sections ship their B compositions — hero split, story spread,
   gardens mosaic, chapter atlas, gallery closing, manifesto footer. They are
   keyed off stable body data attributes so the rules above keep reading as
   the plain grammar of the page and every B override stays in one block.   */

/* — hero B · split: an editorial reading column holds the left, a compact
     numbered index sits under it, and the live scene window becomes a low,
     right-hand counterweight. The scene itself remains untouched.

     The column carried a 90° scrim over the left three-quarters of the frame.
     It has gone: the sanctuary is already near-black behind the reading, and
     measured against it the copy loses almost nothing without it — the
     headline 15.98:1 to 15.47:1, the standfirst 7.94:1 to 7.75:1, the index
     16.11:1 to 16.08:1, all far past what either needs. It was darkening the
     approach, the gate and the lower steps to buy half a point of contrast
     nobody was short of. */
body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:min(590px,46vw); }
body[data-layout-hero="b"] .hero-foot{ width:min(480px,40vw); margin-left:0; }
body[data-layout-hero="b"] .hero-cue{ justify-content:flex-start; }
body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
body[data-layout-hero="b"] .chip{ position:relative; flex-direction:column; gap:0; }
body[data-layout-hero="b"] .chip .num{ font-size:clamp(29px,3.1vw,48px); }
body[data-layout-hero="b"] .chip .tx{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}
/* the live window drops into the open right corner, away from the reading
   column and the oversized 3-D wordmark */
body[data-layout-hero="b"] .peek{
  left:auto; right:var(--pad); top:auto; bottom:clamp(38px,7vh,96px);
}
body[data-layout-hero="b"] .peek-cap b.jp{ font-size:clamp(20px,2.2vw,34px); letter-spacing:.18em; }
/* The Japanese title reads down the right edge, hung under the navigation —
   the one mark on that side of the frame now that the romanization has gone. */
body[data-layout-hero="b"] .hero-side{
  left:auto; right:var(--pad); top:calc(var(--nav-h) + clamp(14px,3vh,42px));
  bottom:auto; transform:none; display:block;
}
body[data-layout-hero="b"] .hero-side .v{
  position:static; transform:none;
  font-size:clamp(30px,3.2vw,54px); letter-spacing:.12em; color:rgba(223,231,224,.62);
}

/* — story B · spread: the title crosses two columns, the reading column is
     held to the right, and the figures become a ruled band. */
body[data-layout-story="b"] .gate-grid{
  grid-template-columns:minmax(120px,.38fr) minmax(0,1.08fr) minmax(280px,.88fr);
  gap:clamp(20px,3vw,54px);
}
body[data-layout-story="b"] .gate-grid h2{ grid-column:1 / 3; max-width:13ch; }
body[data-layout-story="b"] .gate-copy{ grid-column:3; }
body[data-layout-story="b"] .gate-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
body[data-layout-story="b"] .gate-stats div{ min-height:108px; padding:18px; border-left:1px solid var(--line-soft); }
body[data-layout-story="b"] .gate-stats div:last-child{ border-right:1px solid var(--line-soft); }

/* — gardens B · mosaic: one immersive live window beside two stacked ones.
     The cards stretch to their rows and the frames flex, so the two small
     viewports meet the tall one exactly instead of drifting apart. */
body[data-layout-gallery="b"] .cards{
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px; align-items:stretch;
}
body[data-layout-gallery="b"] .card{ transform:none; display:flex; flex-direction:column; min-height:0; }
body[data-layout-gallery="b"] .card-fr{ aspect-ratio:auto; flex:1 1 auto; min-height:0; }
body[data-layout-gallery="b"] .card:first-child{ grid-row:1 / 3; }
body[data-layout-gallery="b"] .card:first-child .card-fr{ flex:0 0 auto; height:min(72vh,760px); }
body[data-layout-gallery="b"] .card:not(:first-child) .card-fr{ min-height:200px; }

/* — chapters B · atlas: a two-then-three plate grid instead of a syllabus.
     Number and title sit at the top of each plate, the running time drops to
     the foot of it. */
body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:minmax(0,.72fr) minmax(0,1.2fr); align-items:start; }
body[data-layout-curriculum="b"] .cur{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
body[data-layout-curriculum="b"] .les{
  display:flex; flex-direction:column; align-items:flex-start; min-height:250px;
  padding:24px; gap:14px; border:0; background:rgba(5,7,10,.84); overflow:hidden;
}
body[data-layout-curriculum="b"] .les:nth-child(-n+2){ grid-column:span 3; }
body[data-layout-curriculum="b"] .les:nth-child(n+3){ grid-column:span 2; }
body[data-layout-curriculum="b"] .les::before{ left:0; background:linear-gradient(145deg,rgba(224,35,28,.13),transparent 58%); }
body[data-layout-curriculum="b"] .les:hover{ padding-left:32px; }
body[data-layout-curriculum="b"] .les h3{ font-size:clamp(20px,2vw,30px); }
body[data-layout-curriculum="b"] .les p{ display:block; max-width:34ch; }
body[data-layout-curriculum="b"] .les .t{ text-align:left; margin-top:auto; }

/* — closing B · gallery: the title hangs vertically on the right while the
     chapter mark, the last line and the call to action run down the left. */
body[data-layout-closing="b"] .fin{
  display:grid; grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr); grid-template-rows:auto auto auto;
  align-content:center; align-items:end; text-align:left;
  column-gap:clamp(40px,7vw,120px); row-gap:clamp(16px,2.6vh,30px);
}
body[data-layout-closing="b"] .fin .eyebrow{ grid-column:1; grid-row:1; margin:0; }
body[data-layout-closing="b"] .fin h2{
  grid-column:2; grid-row:1 / 4; align-self:center; justify-self:end;
  font-size:clamp(52px,6vw,82px); writing-mode:vertical-rl;
}
body[data-layout-closing="b"] .fin p{ grid-column:1; grid-row:2; margin:0; }
body[data-layout-closing="b"] .fin .cta{ grid-column:1; grid-row:3; justify-self:start; margin-top:4px; }

/* — footer B · manifesto: the statement leads, the navigation becomes a
     compact ruled index beneath it. */
body[data-layout-footer="b"] .foot-grid{ grid-template-columns:repeat(3,1fr); }
body[data-layout-footer="b"] .foot-brand{
  grid-column:1 / -1; display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center;
  padding-bottom:34px; margin-bottom:8px; border-bottom:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-brand svg{ width:54px; height:54px; }
body[data-layout-footer="b"] .foot-brand p{
  margin:0; max-width:48ch; font-size:clamp(18px,2vw,30px); line-height:1.35; color:var(--bone-dim);
}
body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){
  padding-left:clamp(18px,2.2vw,34px); border-left:1px solid var(--line-soft);
}
body[data-layout-footer="b"] .foot-base{ display:grid; grid-template-columns:1fr auto 1fr; }
body[data-layout-footer="b"] .foot-base span:last-child{ text-align:right; }

/* ================================================= foreground layers (KAGE)
   The transparent PNG library in secret-pathways-assets/foreground/png is
   introduced as a near plane. Each section carries one .fg box holding a few
   cut-outs that stand between the live sanctuary and the reading: the scene
   itself is untouched, this is only the garden that grows in front of it.

   The cut-outs are the nearest plane on the page, so they sit in front of the
   reading rather than behind it. Inside .page — itself z-index:10, above the
   #gl canvas at 0:
     -1   .sec::before / .foot::before   the section scrims
      2   headings, copy, links, cards, stats, CTA
      3   .fg                            the cut-outs: aria-hidden, inert
   .page caps everything it holds at tier 10, which is under the fixed
   furniture (rail 45, nav 50), so the chapter's live near plane is moved out
   to #fg-sky at 52 — over the layout and the navigation both, and still under
   the passes that treat the frame as one image: vignette 55, grain 60,
   cursor 80.

   A stage is only ever shown while its own chapter holds the viewport, and
   only in the fixed bottom-anchored form. Parked back in its section it is
   inert and invisible: a near plane that scrolls with the page reads as
   wallpaper printed on the document rather than as something standing between
   the camera and the scene, so there is no second, section-owned appearance.
   Every piece is therefore placed from the bottom edge of that fixed plane —
   left/right and bottom, never top.

   The entrance is driven by the chapter, not by the scroll observer: each
   [data-fg-in] piece rises from the edge it is anchored to when its stage goes
   live, one every 90ms in DOM order, and the reduced-motion block at the foot
   of this sheet flattens it. The wrapper owns the entrance and animates
   opacity and transform only; the artwork itself remains at full opacity, with
   the reading protected by the layer order rather than a translucent
   foreground treatment. */
.fg{
  position:absolute; inset:0; z-index:3;
  overflow:visible; pointer-events:none;
}
/* Nothing inside a section may widen the document. The foreground cut-outs and
   the cloth canvases are placed to hang past the frame edges on purpose, and as
   ordinary in-flow descendants they dragged the page box out with them — 194px
   past a 1440 frame. Clip the horizontal axis at the section, which is exactly
   viewport-wide, so each overhang is cut precisely where it leaves the screen.
   `clip` pairs with `visible` without coercing it, so no scroll container is
   created and every bit of vertical bleed survives. */
.sec, .foot{ overflow-x:clip; overflow-y:visible; }
/* the host for whichever chapter currently owns the near plane — no box of
   its own, since every stage it holds is position:fixed to the viewport */
#fg-sky{
  position:fixed; left:0; top:0; width:0; height:0;
  z-index:52; pointer-events:none;
}
.sec > *:not(.fg), .foot > *:not(.fg){ position:relative; z-index:2; }
.fg-el{ position:absolute; display:block; opacity:0; }
.fg-el > img{
  width:100%; height:auto;   /* the width/height attrs hold the box before the lazy image lands */
  opacity:1;
  filter:saturate(.88) brightness(.86);
}
.fg-el--flip > img{ transform:scaleX(-1); }
/* each piece waits off the edge it is anchored to until its chapter is called */
[data-fg-in="up"]   { transform:translate3d(0,13%,0); }
[data-fg-in="left"] { transform:translate3d(-11%,6%,0); }
[data-fg-in="right"]{ transform:translate3d(11%,6%,0); }
/* one slow breath, on the two lightest layers only */
@keyframes fg-sway{
  from{ transform:rotate(-.45deg) translate3d(0,2px,0); }
  to  { transform:rotate(.45deg)  translate3d(0,-6px,0); }
}
.fg-el--sway > img{ animation:fg-sway 21s var(--ease-io) infinite alternate; transform-origin:0% 45%; }

/* The active chapter owns a bottom-anchored near plane. Its former stage is
   retained only long enough to dissolve into the next chapter's scene. */
.fg.fg-active,.fg.fg-retiring{
  position:fixed; left:0; right:0; top:auto; bottom:0; height:min(56svh,680px);
  z-index:1; overflow:visible; pointer-events:none;
}
.fg.fg-active .fg-el{
  opacity:1; transform:none;
  transition:opacity 1.2s var(--ease-out), transform 1.5s var(--ease-out);
  transition-delay:var(--fg-delay,0ms);
}
.fg .fg-el:nth-child(2){ --fg-delay:90ms; }
.fg .fg-el:nth-child(3){ --fg-delay:180ms; }
.fg .fg-el:nth-child(4){ --fg-delay:270ms; }
.fg.fg-retiring .fg-el{
  opacity:0; transform:translate3d(0,8vh,0) scale(.98); filter:blur(18px);
  transition:opacity .68s var(--ease-out),transform .78s var(--ease-out),filter .78s var(--ease-out);
}

/* Placement is keyed off [data-fg] rather than the section id, because the
   stage of the live chapter is re-parented into #fg-sky and stops being a
   descendant of its own section for as long as it holds the near plane.

   Every piece is anchored from the bottom of that plane, which is the bottom
   of the viewport. The cut-outs in png/ are trimmed flush to their own lowest
   opaque row, so a negative bottom here is a real amount of artwork buried off
   the foot of the frame, not slack in the file — the ground-sitting pieces
   carry enough of it that their base line never lifts off the edge. */

/* — I · the gate: the wall runs along the lower-left frame, a pine holds the
     far edge, and one bank of grass closes the foot of the chapter */
/* Wall against the left edge, pine against the right: the chapter is framed
   by the two of them with the court open between.

   left:0, not a negative offset — the plate is trimmed to its own artwork, so
   pulling it off-frame cuts the gate itself rather than trimming empty margin.
   Its left edge sits on the viewport's. */
[data-fg="gate"] .fg-wall  { left:0; bottom:-30px; width:clamp(430px,47vw,780px); }
[data-fg="gate"] .fg-pine  { right:-4%; bottom:-46px; width:clamp(190px,21vw,370px); }
[data-fg="gate"] .fg-grass { left:3%;   bottom:-150px; width:clamp(420px,60vw,1050px); }

/* — II · still gardens: sakura and maple sweep in from the two lower corners
     and carry their whole length, a lit lantern and a low bush hold the edges */
[data-fg="pathways"] .fg-sakura { left:-6%;  bottom:-86px;  width:clamp(430px,50vw,880px); }
[data-fg="pathways"] .fg-leaves { right:-6%; bottom:-62px;  width:clamp(330px,38vw,670px); }
[data-fg="pathways"] .fg-lantern{ left:-1%;  bottom:-96px;  width:clamp(120px,13vw,215px); }
[data-fg="pathways"] .fg-bush   { right:-4%; bottom:-38px;  width:clamp(250px,30vw,530px); }
/* the lantern is the one lit object in the library — it keeps its ember */
[data-fg="pathways"] .fg-lantern > img{ filter:saturate(.96) brightness(1); }
[data-fg="pathways"] .fg-leaves > img{ transform-origin:100% 40%; }

/* — III · sacred craft: basalt and a low wall fragment bracket the atlas and
     a stand of grass ties them together, all three below the plate grid */
[data-fg="lessons"] .fg-wall   { right:-8%; bottom:-78px; width:clamp(390px,50vw,870px); }
[data-fg="lessons"] .fg-stones { left:-4%;  bottom:-48px; width:clamp(250px,30vw,530px); }
[data-fg="lessons"] .fg-grass  { left:24%;  bottom:-84px; width:clamp(280px,33vw,580px); }

/* — IV · afterlight: a far hill closes the horizon, the shrine ruins stand at
     the left of it, grass banks the right, one branch hangs into the corner */
[data-fg="eternity"] .fg-hill   { left:-8%; width:min(150vh,116%); bottom:calc(-1 * min(20vh,15.5vw)); }
[data-fg="eternity"] .fg-ruins  { left:-5%;  bottom:-32px; width:clamp(240px,28vw,500px); }
[data-fg="eternity"] .fg-grass  { right:-7%; bottom:-60px; width:clamp(300px,37vw,670px); }
[data-fg="eternity"] .fg-sakura { left:-15%; bottom:-70px; width:clamp(280px,33vw,580px); }

/* — colophon: one restrained planting along the lower edge, nothing above it */
[data-fg="foot"] .fg-bush   { left:-6%;  bottom:-110px; width:clamp(230px,28vw,480px); }
[data-fg="foot"] .fg-grass  { right:-5%; bottom:-98px;  width:clamp(255px,30vw,530px); }
[data-fg="foot"] .fg-stones { left:36%;  bottom:-104px; width:clamp(190px,22vw,370px); }

@media (max-width:1080px){
  /* the columns have collapsed and the copy has taken the width back, so the
     framing layers step down rather than crowd it */
  [data-fg="gate"] .fg-wall      { width:clamp(390px,42vw,600px); }
  [data-fg="pathways"] .fg-sakura{ width:clamp(400px,46vw,660px); }
  [data-fg="pathways"] .fg-leaves{ width:clamp(310px,35vw,500px); }
  [data-fg="lessons"] .fg-wall   { width:clamp(360px,45vw,640px); }
  [data-fg="eternity"] .fg-sakura{ width:clamp(260px,30vw,430px); }
}
@media (max-width:820px){
  /* one or two anchors per section: the stacked cards, the atlas plates and
     the call to action own the whole width here, so every duplicated piece
     of ornament goes and what stays is smaller */
  [data-fg="gate"] .fg-pine, [data-fg="pathways"] .fg-sakura,
  [data-fg="pathways"] .fg-leaves, [data-fg="lessons"] .fg-wall,
  [data-fg="eternity"] .fg-sakura, [data-fg="foot"] .fg-stones{ display:none; }
  [data-fg="gate"] .fg-wall     { left:-14%; bottom:-22px; width:min(82vw,440px); }
  [data-fg="gate"] .fg-grass    { left:auto; right:-10%; bottom:-76px; width:min(94vw,530px); }
  [data-fg="pathways"] .fg-lantern{ left:-4%;   bottom:-58px; width:clamp(80px,20vw,128px); }
  [data-fg="pathways"] .fg-bush   { right:-10%; bottom:-38px; width:min(72vw,400px); }
  [data-fg="lessons"] .fg-stones  { left:-8%; bottom:-34px; width:min(66vw,360px); }
  [data-fg="lessons"] .fg-grass   { left:auto; right:-8%; bottom:-44px; width:min(70vw,380px); }
  [data-fg="eternity"] .fg-ruins  { left:-8%;   bottom:-25px; width:min(54vw,300px); }
  [data-fg="eternity"] .fg-grass  { right:-12%; bottom:-34px; width:min(80vw,440px); }
  [data-fg="foot"] .fg-bush  { left:-12%;  bottom:-26px; width:min(68vw,340px); }
  [data-fg="foot"] .fg-grass { right:-12%; bottom:-30px; width:min(74vw,380px); }
}
@media (prefers-reduced-motion:reduce){
  .fg-el--sway > img{ animation:none; }
  .fg.fg-retiring .fg-el{ transition:none !important; filter:none !important; }
}

@media (max-width:1080px){
  body[data-layout-hero="b"] .chapters{ gap:16px 20px; }
  body[data-layout-story="b"] .gate-grid{ grid-template-columns:1fr; }
  body[data-layout-story="b"] .gate-grid h2,
  body[data-layout-story="b"] .gate-copy{ grid-column:auto; }
  body[data-layout-story="b"] .gate-grid h2{ max-width:16ch; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:span 3; }
  body[data-layout-curriculum="b"] .les:last-child{ grid-column:span 6; }
}
@media (max-width:820px){
  /* the split collapses and the copy takes the page back */
  body[data-layout-hero="b"] .hero-top{ margin-left:0; max-width:none; }
  body[data-layout-hero="b"] .hero-foot{ width:100%; }
  /* The four-column strip is set on a selector specific enough to survive the
     plain .chapters override below 820, so it has to be unset here by name or
     the chips stay four across on a phone and wrap a word to a line. */
  body[data-layout-hero="b"] .chapters{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  body[data-layout-hero="b"] .chip{ flex-direction:row; gap:14px; }
  /* Same shape of bug: the layout selector outranks the plain single-column
     rule, so the heading kept a 37% column while its words are set at 30px —
     "CHAPTERS." alone is wider than that, and it spilled over the paragraph. */
  body[data-layout-curriculum="b"] .cur-head{ grid-template-columns:1fr; gap:18px; align-items:start; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(26px,8vw,36px); }
  body[data-layout-hero="b"] .chip .tx{
    position:static; width:auto; height:auto; overflow:visible; clip:auto;
    clip-path:none; white-space:normal;
  }

  body[data-layout-story="b"] .gate-stats{ grid-template-columns:repeat(2,1fr); border-right:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div{ min-height:86px; padding:14px; }
  body[data-layout-story="b"] .gate-stats div:nth-child(-n+2){ border-bottom:1px solid var(--line-soft); }
  body[data-layout-story="b"] .gate-stats div:last-child{ border-right:0; }

  /* the mosaic unstacks, but the rhythm survives: the lead window stays the
     tall one and the two field notes stay letterbox */
  body[data-layout-gallery="b"] .cards{ grid-template-columns:1fr; grid-template-rows:auto; }
  body[data-layout-gallery="b"] .card:first-child{ grid-row:auto; }
  body[data-layout-gallery="b"] .card-fr{ flex:0 0 auto; height:auto; }
  body[data-layout-gallery="b"] .card:first-child .card-fr{ height:auto; aspect-ratio:4 / 5; }
  body[data-layout-gallery="b"] .card:not(:first-child) .card-fr{ aspect-ratio:16 / 10; min-height:0; }

  body[data-layout-curriculum="b"] .cur{ grid-template-columns:1fr; }
  body[data-layout-curriculum="b"] .les:nth-child(n){ grid-column:auto; min-height:0; padding:20px; }
  body[data-layout-curriculum="b"] .les:hover{ padding-left:20px; }

  body[data-layout-closing="b"] .fin{ display:flex; align-items:center; text-align:center; gap:0; }
  body[data-layout-closing="b"] .fin .eyebrow{ margin:0 0 26px; }
  body[data-layout-closing="b"] .fin h2{ writing-mode:horizontal-tb; font-size:clamp(38px,7.4vw,124px); }
  body[data-layout-closing="b"] .fin p{ margin:26px auto 0; }
  body[data-layout-closing="b"] .fin .cta{ margin-top:40px; }

  body[data-layout-footer="b"] .foot-grid{ grid-template-columns:1fr; }
  body[data-layout-footer="b"] .foot-brand{ grid-column:auto; grid-template-columns:minmax(0,1fr); row-gap:16px; }
  body[data-layout-footer="b"] .foot-grid > div:nth-child(n+3){ padding-left:0; border-left:0; }
  body[data-layout-footer="b"] .foot-base{ display:flex; }
  body[data-layout-footer="b"] .foot-base span:last-child{ text-align:left; }
}

/* On a phone two columns leave the chip's copy about 110px once the numeral
   and its gutter are taken out, which is narrow enough to wrap a single word
   to a line. Standing the numeral above the label gives the copy the whole
   column back. */
@media (max-width:560px){
  body[data-layout-hero="b"] .chip{ flex-direction:column; gap:4px; }
  body[data-layout-hero="b"] .chip .num{ font-size:clamp(22px,7.4vw,30px); }
  body[data-layout-hero="b"] .chip .tx{ padding-top:0; }
  body[data-layout-hero="b"] .chip p{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .mask-line > span,.word{ opacity:1 !important; transform:none !important; }
}


/* Source: studio/studio.css */
/* Mohamed Agha studio: a BIM adaptation of the Kage authored experience. */
.sec:before,.sec:after,.foot:before,.foot:after,.nav:before{display:none!important}.display,.body,.body-lg,.eyebrow,.k,.les .t{ text-shadow:none!important }.model-chapter .display{max-width:430px}
.agha-hero:before{height:100%!important}.agha-hero .display,.agha-hero .hero-sub,.agha-hero .eyebrow{ text-shadow:none!important }.agha-hero .dot{width:5px;height:5px;display:inline-block;flex-shrink:0}.hero-copy .mask-line,.hero-copy .word-mask,.hero-copy .word{background:transparent!important}
:root{--ink:#fff;--ink-2:#f2f3f1;--bone:#414343;--bone-dim:#606665;--muted:#747a78;--line:#41434328;--line-soft:#41434312;--vermilion:#F47721;--ember:#F47721;--gold:#F47721;--pad:clamp(22px,4.6vw,80px);--nav-h:90px}
body{font-family:Onest,'IBM Plex Sans Arabic',sans-serif;background:white;color:#414343}html[lang=ar] body{font-family:'IBM Plex Sans Arabic',Onest,sans-serif}::selection{background:#F47721;color:#414343}button,a,input{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid #414343;outline-offset:6px}#gl{background:#f3f3ef}#vignette{display:none}#grain{opacity:.018}#cursor{display:none}.page{position:relative;z-index:10}#pre{background:#f6f6f2;color:#414343}.pre-jp{font:700 60px Onest;letter-spacing:-5px}.pre-jp span{color:#F47721;font-size:40px;vertical-align:top}.pre-bar{background:#41434320}.pre-bar i{background:#F47721}.pre-meta{color:#414343;letter-spacing:1.5px}.pre-in{max-width:340px}.nav,.nav.stuck{color:#414343;background:#ffffffed;backdrop-filter:blur(18px);border-bottom:1px solid #41434318;padding-inline:var(--pad);height:90px}.nav .brand{gap:14px}.ma-mark{font:800 28px Manrope;letter-spacing:-3px;position:relative;padding-inline-end:8px;direction:ltr}.ma-mark i{font-style:normal;color:#F47721;font-size:28px;position:absolute;top:-13px;right:-8px}.brand-tx b{font-size:12px;letter-spacing:1.5px}.brand-tx i{font:500 8px Onest;letter-spacing:2px;margin-top:6px}.nav-links{gap:30px}.nav-link{font-size:11px;letter-spacing:0;text-transform:none}.nav-link:after{background:#F47721}.studio-language{border:1px solid #41434326;border-radius:40px;padding:7px 15px;font-size:11px;white-space:nowrap}.nav-burger{display:none}.nav-burger i{background:#414343}.rail{display:none}.eyebrow{color:#606665;letter-spacing:1.5px}.dot{background:#F47721;box-shadow:0 0 0 4px #F4772112}.agha-hero{height:auto;min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr auto;gap:45px;padding:calc(var(--nav-h) + 48px) var(--pad) 0;isolation:isolate;position:relative}.agha-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,#fff 7%,#fffffff8 40%,#ffffffe8 73%,#ffffffe8)}.agha-hero:after{content:'AGHA';position:absolute;inset-inline-start:2%;bottom:3%;font:700 26vw/.8 Onest;color:#41434305;letter-spacing:-.075em;z-index:-1;pointer-events:none}.hero-copy{align-self:center;padding-block:10px 30px;max-width:650px}.hero-copy .eyebrow{font-size:10px;line-height:1.6;margin:0 0 24px;display:flex;gap:12px;align-items:center;direction:ltr}.hero-copy h1{font-size:clamp(46px,5.05vw,82px);font-weight:400;line-height:1.12;letter-spacing:-3.2px;text-transform:none;margin:0 0 25px}.hero-copy .accent-line{color:#F47721}.hero-copy .mask-line{padding-bottom:.10em;margin-bottom:-.02em}.hero-copy .word-mask{vertical-align:bottom}.hero-copy .hero-sub{font-size:clamp(15px,1.2vw,19px);line-height:1.85;max-width:495px;margin:0 0 30px;color:#727775}.hero-actions{display:flex;flex-wrap:wrap;gap:25px;align-items:center}.primary-link{background:#F47721;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;color:#303232;font-size:12px;font-weight:500;padding:20px 25px;min-width:260px;transition:background .3s,color .3s,transform .3s}.primary-link:hover{background:#414343;color:#fff;transform:translateY(-2px)}.primary-link span{font-size:18px}.plain-link{font-size:12px;display:inline-block;padding:6px 0;border-bottom:1px solid #41434355;transition:color .2s}.plain-link:hover{color:#be4e00}.signature-row{display:flex;align-items:center;gap:25px;margin-top:36px}.signature-row>span{font:italic 27px Georgia,serif;direction:ltr}.signature-row small{font-size:9px;color:#747a78}.portrait-panel{height:clamp(460px,68vh,770px);max-height:780px;align-self:center;position:relative;border-radius:150px 3px 3px 3px;overflow:hidden;direction:ltr;will-change:transform,opacity;background:#e0e1dc;box-shadow:0 20px 80px #41434308}.portrait-panel>img{height:100%;width:100%;object-fit:cover;object-position:64% 35%}.portrait-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#292e32d9,transparent 48%)}.portrait-top{position:absolute;top:28px;right:25px;display:flex;gap:22px;align-items:start;font:600 9px/1.5 Onest}.portrait-top b{border:1px solid #41434344;padding:4px 6px;font-size:9px}.portrait-name{position:absolute;left:30px;bottom:35px;color:white;z-index:2;display:flex;flex-direction:column}.portrait-name>span{font:500 14px Onest;letter-spacing:2px}.portrait-name strong{font:600 clamp(52px,6.5vw,103px)/1.04 Onest;letter-spacing:-4px}.portrait-name strong span{font:400 18px Onest;vertical-align:top;display:inline-block;margin-top:8px;margin-left:5px}.portrait-name small{font:500 7px Onest;letter-spacing:2px;margin-top:9px}.portrait-tag{position:absolute;right:25px;bottom:45px;color:white;font:500 7px Onest;letter-spacing:1.2px;writing-mode:vertical-rl;z-index:2}.hero-baseline{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #4143431a;padding:23px 0;font:500 9px Onest;letter-spacing:1px}.hero-baseline a{font-family:inherit;display:flex;gap:30px;align-items:center}.hero-baseline a b{font-size:20px;color:#F47721;font-weight:400}.live-dot:before{content:'';width:5px;height:5px;background:#F47721;display:inline-block;vertical-align:middle;border-radius:50%;margin-inline-end:9px}.sec{padding:95px var(--pad);margin:0}.sec-head{margin-bottom:55px}.sec-head .k{font-size:10px;letter-spacing:1px;color:#606665}.sec-head .rule{background:#41434325}.model-chapter{min-height:120svh;position:relative;background:linear-gradient(90deg,#fffffff0,transparent 58%)}.model-copy{width:32%;max-width:480px;margin-top:4vh;position:relative;z-index:1}.display.h-sec{font-size:clamp(38px,4.3vw,70px);line-height:1.12;letter-spacing:-2.3px;font-weight:400;text-transform:none}.model-copy .body-lg{font-size:16px;line-height:1.9;margin-top:24px;color:#696f6c}.layer-controls{display:flex;flex-wrap:wrap;gap:7px;margin:30px 0}.layer-controls button{border:1px solid #41434338;border-radius:30px;padding:8px 12px;font-size:10px;background:#ffffffcf}.layer-controls button[aria-pressed=true]{background:#414343;color:#fff;border-color:#414343}.model-note{position:absolute;inset-inline-end:5%;bottom:6%;padding:18px 22px;background:#ffffffd9;border-inline-start:2px solid #F47721;backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:8px;max-width:340px}.model-note>span{font:500 8px Onest;letter-spacing:1px}.model-note strong{font:400 18px Onest;letter-spacing:1px}.model-note small{font-size:10px;color:#727775}.journal{background:#fafbf8ee;backdrop-filter:blur(16px)}.journal-title{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:48px}.journal-title>p{max-width:340px;font-size:16px;line-height:1.9;color:#727775}.cards{gap:25px}.card{background:none}.card-fr{display:block;aspect-ratio:1.1;height:auto;background:#ebeeea!important;border:1px solid #41434320;overflow:hidden}.card-lab{color:#414343;z-index:3;inset:20px 22px auto;display:flex;justify-content:space-between}.card-lab b{font:500 12px Onest;letter-spacing:1px}.card-lab span{font:400 10px Onest}.card-ar{border:1px solid #41434330;color:#414343;z-index:3;top:auto;bottom:20px;right:20px;background:#ffffffb0;font-size:20px}.card-meta{border:0;padding:17px 0 5px;font-size:9px;color:#727775}.card h3{font-size:21px;line-height:1.5;font-weight:500;letter-spacing:-.5px;max-width:360px;margin:8px 0 12px}.card p{font-size:13px;color:#727775;line-height:1.9;max-width:380px}.academy-chapter{background:#f1f2efef;backdrop-filter:blur(12px)}.cur-head{align-items:end;margin-bottom:35px}.cur-head .body-lg{max-width:340px;font-size:16px;color:#727775;line-height:1.9}.learning-summary{display:flex;gap:55px;border-block:1px solid #41434325;padding:30px 0;margin-bottom:25px}.learning-summary>span{display:flex;flex-direction:column;font-size:9px;gap:8px;color:#747a78}.learning-summary b{font:400 30px Onest;color:#414343;letter-spacing:-1px}.cur{border-top:0}.les{display:grid;grid-template-columns:40px 1fr 30px;min-height:75px;padding:18px 15px;border-bottom:1px solid #41434325;gap:20px;align-items:center}.les h3{font-size:20px;margin:0;font-weight:400;letter-spacing:-.4px}.les .k,.les .t{color:#747a78;font-size:11px}.les:hover{background:#fff9f3}.les:hover .t{color:#F47721}.les .bar{background:#F47721}.academy-note{font-size:12px;margin-top:25px;color:#747a78}.about-chapter{background:#fffffff2;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%;padding-block:110px}.about-photo{height:500px;position:relative;overflow:hidden}.about-photo img{width:100%;height:100%;object-fit:cover;object-position:65% 30%;filter:saturate(.65)}.about-photo:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#414343b0)}.about-photo>span{position:absolute;bottom:25px;left:25px;color:#fff;z-index:2;font:500 13px Onest;letter-spacing:1px}.about-photo>span b{font-size:8px;letter-spacing:2px;line-height:3;font-weight:400}.about-copy .body-lg{font-size:16px;line-height:2;color:#727775}.about-copy .eyebrow{font-size:10px;margin-bottom:24px}.about-copy h2{margin-bottom:28px}.foot{background:#f5f6f2f5;color:#414343;padding:60px var(--pad) 0}.footer-invitation{display:flex;flex-direction:column;gap:15px;padding-block:0 55px}.footer-invitation>span{font-size:12px;color:#747a78}.footer-invitation>a{font-size:clamp(60px,10vw,140px);line-height:1.2;letter-spacing:-5px;display:block;font-weight:400}.foot-base{border-color:#41434325;font-size:9px;letter-spacing:.3px;padding-block:25px;display:flex;justify-content:space-between;gap:20px}.foot-base button{font-size:10px}.no-webgl #gl{display:none}.no-webgl .model-chapter{background:#f0f2ed url('bim-hero.png') center right/contain no-repeat}.no-webgl .model-copy{background:#ffffffe0;padding:25px}.no-webgl .card-fr{background:#e8ebe5 url('bim-hero.png') center/cover!important}
html[dir=rtl] .hero-copy h1{line-height:1.25;letter-spacing:-2px}html[dir=rtl] .model-chapter{background:linear-gradient(-90deg,#fffffff0,transparent 58%)}html[dir=rtl] .signature-row{flex-wrap:wrap}html[dir=rtl] .display.h-sec{line-height:1.35;letter-spacing:-1px}html[dir=rtl] .hero-copy .eyebrow{font-size:9px}html[dir=rtl] .nav-link{font-size:12px}
@media(min-width:1700px){.agha-hero{max-width:2000px;margin:auto}.portrait-panel{height:73vh}.hero-copy h1{font-size:90px}}
@media(max-width:1100px){.nav-links{gap:20px}.brand-tx b{font-size:10px}.agha-hero{gap:30px;padding-top:125px}.hero-copy h1{font-size:58px}.hero-copy .eyebrow{font-size:8px}.hero-copy .hero-sub{font-size:15px}.primary-link{min-width:230px;padding:17px 20px}.hero-actions{gap:17px}.signature-row{gap:16px;margin-top:24px}.signature-row small{font-size:8px}.portrait-panel{height:560px;border-top-left-radius:115px}.portrait-top>span{font-size:8px}.portrait-top{gap:10px;right:18px}.portrait-name strong{font-size:75px}.model-copy{width:40%}.display.h-sec{font-size:46px}.card h3{font-size:19px}.about-photo{height:420px}.about-chapter{gap:7%}.hero-baseline{font-size:8px}}
@media(max-width:820px){.nav{height:76px;gap:18px}.nav-links{background:#fff!important;color:#414343;backdrop-filter:none}.nav-links .nav-link{font-size:23px}.studio-language{margin-inline-start:auto}.nav-burger{display:flex}.agha-hero{padding-top:110px;gap:28px}.hero-copy h1{font-size:43px;letter-spacing:-2px}.hero-copy .hero-sub{font-size:14px;line-height:1.8}.portrait-panel{height:510px;border-top-left-radius:95px}.portrait-top>span{display:none}.portrait-name{left:20px;bottom:28px}.portrait-name strong{font-size:60px}.portrait-tag{right:13px}.portrait-name>span{font-size:11px}.signature-row{flex-wrap:wrap;gap:10px}.signature-row>span{font-size:24px}.hero-baseline>span:last-child{display:none}.hero-copy .eyebrow{font-size:7px;letter-spacing:1px}.primary-link{min-width:200px;font-size:11px;gap:18px}.model-copy{width:44%}.model-copy .body-lg{font-size:14px}.display.h-sec{font-size:40px}.journal-title>p,.cur-head .body-lg{max-width:270px;font-size:14px}.cards{gap:16px}.card h3{font-size:17px}.card p{font-size:12px}.card-lab{inset:15px 15px auto}.card-meta{font-size:8px}.about-chapter{gap:30px}.about-copy .body-lg{font-size:14px}.about-photo{height:380px}.sec{padding-block:65px}.sec-head{margin-bottom:40px}}
@media(max-width:600px){:root{--pad:22px;--nav-h:76px}.brand-tx b{font-size:9px;letter-spacing:1px}.brand-tx i{font-size:6px;letter-spacing:1px}.ma-mark{font-size:24px}.ma-mark i{font-size:22px;top:-10px}.nav .brand{gap:9px}.nav{gap:15px}.studio-language{font-size:10px;padding:5px 10px}.nav-burger{width:22px}.agha-hero{grid-template-columns:1fr;gap:25px;padding-top:112px}.hero-copy{padding:0;max-width:none}.hero-copy .eyebrow{font-size:8px;margin-bottom:24px;letter-spacing:1.05px}.hero-copy h1{font-size:clamp(43px,10.5vw,63px);line-height:1.11;letter-spacing:-2px;margin-bottom:24px}.hero-copy .hero-sub{font-size:15px;line-height:1.85;max-width:410px;margin-bottom:26px}.hero-actions{gap:18px}.primary-link{min-width:245px;padding:17px 20px;font-size:12px}.plain-link{font-size:12px}.signature-row{margin-top:24px;gap:15px}.signature-row>span{font-size:25px}.signature-row small{font-size:9px}.portrait-panel{height:440px;border-top-left-radius:105px;margin-top:12px;will-change:auto}.portrait-panel>img{object-position:64% 27%}.portrait-top>span{display:block}.portrait-name strong{font-size:85px}.portrait-name>span{font-size:13px}.portrait-tag{right:22px;bottom:30px}.portrait-name small{font-size:7px;letter-spacing:1.7px}.portrait-top{right:22px;top:22px}.hero-baseline{font-size:7px;gap:16px;padding-block:20px}.hero-baseline a{gap:15px;font-size:9px}.model-chapter{min-height:1150px;background:linear-gradient(#fffffff2 28%,#ffffff00 60%)!important}.model-copy{width:100%;max-width:400px;margin-top:10px}.model-copy .body-lg{font-size:15px;max-width:355px}.model-copy h2{font-size:43px}.model-note{bottom:4%;inset-inline:22px;max-width:none}.layer-controls{gap:8px;margin-block:23px}.layer-controls button{font-size:11px}.sec-head{gap:12px;margin-bottom:35px}.sec-head .k{font-size:8px;line-height:1.8}.journal-title,.cur-head{display:block}.journal-title>p,.cur-head .body-lg{max-width:none;margin-top:20px;font-size:15px}.display.h-sec{font-size:42px}.cards{grid-template-columns:1fr;gap:34px}.card-fr{aspect-ratio:1.12;min-height:0}.card-lab{inset:22px 22px auto}.card-lab b{font-size:14px}.card h3{font-size:23px;max-width:none}.card p{font-size:14px;max-width:none}.card-meta{font-size:10px}.learning-summary{gap:25px;justify-content:space-between}.learning-summary b{font-size:26px}.learning-summary>span{font-size:7px}.les{grid-template-columns:25px 1fr 18px;gap:12px;padding:18px 0;min-height:85px}.les h3{font-size:18px;line-height:1.5}.les .k{font-size:10px}.academy-note{font-size:11px;line-height:1.9}.about-chapter{grid-template-columns:1fr;gap:35px}.about-photo{height:400px}.about-copy .body-lg{font-size:16px}.about-copy h2{font-size:41px}.foot{padding-top:45px}.footer-invitation>a{font-size:64px;letter-spacing:-3px}.foot-base{flex-wrap:wrap;gap:15px}.footer-invitation{padding-bottom:35px}html[dir=rtl] .hero-copy h1{font-size:49px}html[dir=rtl] .hero-copy .eyebrow{font-size:8px}.no-webgl .model-chapter{background-position:center bottom!important;background-size:100% auto!important}}
@media(prefers-reduced-motion:reduce){.portrait-panel{transform:none!important;opacity:1!important}.hero-copy [data-rv]{opacity:1;transform:none}.mask-line .word{transform:none}.agha-hero *{transition:none!important}}

/* Approved identity; all text shadows explicitly disabled. */
*,*::before,*::after{text-shadow:none!important}
.brand-lockup{display:block;position:relative;overflow:hidden;width:255px;height:54px;direction:ltr;flex-shrink:0}.brand-lockup img{position:absolute;width:430px;max-width:none;height:auto;left:-155px;top:-46px}
@media(max-width:820px){.brand-lockup{width:205px;height:44px}.brand-lockup img{width:346px;left:-125px;top:-37px}}
@media(max-width:420px){.brand-lockup{width:180px;height:40px}.brand-lockup img{width:305px;left:-110px;top:-33px}.nav{gap:12px}}


/* Source: studio/editorial.css */
/* Static first paint; Kage-inspired depth delivered through image layers. */
html{scroll-behavior:smooth;scroll-padding-top:100px}.page{overflow:clip}#pre,#vignette,#grain,#cursor,#fg-sky{display:none!important}.agha-hero{background:#fff;overflow:clip}.agha-hero:before{z-index:0;background:linear-gradient(105deg,#ffffffef 0%,#ffffffec 44%,transparent 100%);pointer-events:none}.agha-hero:after{display:none}.hero-copy,.portrait-panel,.hero-baseline{position:relative;z-index:2}.hero-image-field{position:absolute;inset:8% -10% -16% 10%;z-index:0;opacity:.085;pointer-events:none;transform:translate3d(0,var(--hero-drift,0px),0);mask-image:linear-gradient(transparent,#000 35%,#000 75%,transparent)}.hero-image-field img{height:100%;width:100%;object-fit:contain}.hero-copy .h-hero{max-width:650px}.hero-copy .accent-line{color:#414343}.hero-copy .accent-line>span{box-shadow:inset 0 -.07em #F47721}.hero-copy .hero-sub{color:#5F6666}.hero-baseline{color:#5F6666}.hero-copy .mask-line>span{transform:none!important;display:block}.hero-copy .mask-line{overflow:visible}.primary-link{color:#222525;font-weight:600;font-size:14px;min-height:48px}.primary-link:hover{color:#fff}.nav-link{min-height:44px;display:flex;align-items:center;height:auto;overflow:visible;font-size:14px}.nav-link:after{bottom:5px!important}.studio-language{min-height:44px;display:inline-flex;align-items:center;font-size:13px}.nav-burger{width:44px;height:44px;margin:0;flex-shrink:0}.nav-burger i{left:9px;right:auto;top:15px}.nav-burger i:nth-child(2){top:24px}.portrait-panel{transform:none!important;opacity:1!important}.portrait-panel img{object-position:64% 35%}.model-chapter{min-height:850px;background:#F7F7F5!important;isolation:isolate;overflow:hidden}.model-chapter .model-copy{width:34%;max-width:410px;position:relative;z-index:2}.model-chapter .model-copy h2{font-size:clamp(36px,4.2vw,62px);line-height:1.2}.model-chapter .model-copy .body-lg{color:#5F6666;font-size:17px}.model-study-image{position:absolute;inset:18% -17% 3% 30%;z-index:0;transform:translate3d(0,var(--study-drift,0px),0);mix-blend-mode:multiply;pointer-events:none}.model-study-image img{height:100%;width:100%;object-fit:contain}.model-note{bottom:6%;background:#ffffffed;z-index:2}.model-explore{display:inline-flex;align-items:center;gap:20px;padding:12px 0;min-height:44px;border-bottom:1px solid #7A8080;margin:18px 0;font-size:14px;font-weight:500}.model-copy>.plain-link{display:block;width:fit-content;margin-top:18px;font-size:13px}.model-note>span{font-size:11px}.model-note small{font-size:12px}.journal{background:#fff;backdrop-filter:none}.academy-chapter{background:#F7F7F5;backdrop-filter:none}.about-chapter{background:#fff}.foot{background:#F7F7F5}.card-fr{background-image:url('bim-white-orange-v3.webp')!important;background-size:120% auto!important;background-position:50% 60%!important;background-repeat:no-repeat!important;border:1px solid #D7DADA}.card-fr[data-cover="1"]{background-size:190% auto!important;background-position:85% 45%!important}.card-fr[data-cover="2"]{background-size:145% auto!important;background-position:35% 88%!important}.card-fr:after{display:none}.card-lab{position:absolute;background:#ffffffdf;padding:5px 8px;inset:18px 18px auto}.card-lab b,.card-lab span{font-size:12px}.card-meta{font-size:12px}.card h3{font-size:23px}.card p{font-size:15px;color:#5F6666}.sec-head .k{font-size:12px}.eyebrow{font-size:12px}.hero-copy .eyebrow{font-size:11px}.plain-link{font-size:14px;min-height:44px;display:inline-flex;align-items:center}.signature-row small{font-size:12px}.hero-baseline{font-size:11px}.hero-baseline a{min-height:44px}.body-lg{font-size:18px}.journal-title>p,.cur-head .body-lg{color:#5F6666;font-size:17px}.learning-summary>span{font-size:12px;color:#5F6666}.learning-summary b{font-size:34px}.les .k,.les .t{font-size:14px;color:#5F6666}.academy-note{font-size:14px;color:#5F6666}.about-copy .eyebrow{font-size:12px}.about-copy .body-lg{font-size:18px;color:#5F6666}.footer-invitation>span{font-size:15px}.foot-base{font-size:12px}.foot-base a,.foot-base button{min-height:44px;display:inline-flex;align-items:center;font-size:12px}.footer-brand{display:block;margin-bottom:35px;width:fit-content}*,*:before,*:after{text-shadow:none!important}[data-rv],.mask-line{opacity:1!important;transform:none!important;filter:none!important}.reveal-ready{opacity:.01!important;transform:translateY(14px)!important;transition:opacity .45s ease,transform .45s ease}.reveal-ready.entered,.motion-muted .reveal-ready{opacity:1!important;transform:none!important}.motion-muted .hero-image-field,.motion-muted .model-study-image{transform:none}.motion-muted *{scroll-behavior:auto!important;transition:none!important}html[lang=ar] .eyebrow,html[lang=ar] .k,html[lang=ar] .body,html[lang=ar] .body-lg,html[lang=ar] .card-meta,html[lang=ar] .learning-summary,html[lang=ar] .hero-baseline{letter-spacing:0;text-transform:none}html[lang=ar] .model-study-image{inset:18% 30% 3% -17%}html[lang=ar] .hero-copy .eyebrow{font-size:11px}html[lang=ar] .nav-link{font-size:14px}
@media(max-width:1100px){.nav-links{gap:20px}.nav-link{font-size:13px}.hero-copy .h-hero{font-size:56px}.model-study-image{inset-inline-start:28%}.model-copy .body-lg{font-size:16px}.model-chapter{min-height:790px}.signature-row{flex-wrap:wrap}.hero-baseline{font-size:10px}.card h3{font-size:20px}.card p{font-size:15px}}
@media(max-width:820px){.nav-links{margin:0!important;inset-inline-start:0!important;inset-inline-end:0!important;width:auto!important;border:0!important;padding:35px var(--pad)!important}.nav-link{font-size:24px!important;min-height:54px}.hero-copy .h-hero{font-size:43px}.hero-copy .eyebrow{font-size:10px}.hero-copy .hero-sub{font-size:16px}.hero-baseline{font-size:10px}.signature-row small{font-size:11px}.model-chapter .model-copy{width:43%}.model-chapter .model-copy h2{font-size:40px}.model-note{max-width:270px}.model-note strong{font-size:16px}}
@media(max-width:600px){html{scroll-padding-top:80px}.agha-hero{gap:28px}.agha-hero .hero-copy .h-hero{font-size:clamp(38px,10.5vw,54px);line-height:1.18;letter-spacing:-1.3px}.hero-copy .hero-sub{font-size:17px;line-height:1.8;margin-bottom:24px}.hero-copy .eyebrow{font-size:10px;letter-spacing:.6px;line-height:1.7}.primary-link{font-size:14px;width:100%;min-height:50px}.hero-actions{gap:12px}.signature-row{gap:15px}.signature-row small{font-size:12px}.portrait-panel{height:420px;margin-top:0}.hero-baseline{font-size:9px}.hero-baseline a{font-size:12px;max-width:48%}.hero-image-field{inset:0 -20% 30% -20%;opacity:.05}.model-chapter{min-height:0;padding-bottom:45px!important;display:flex;flex-direction:column}.model-chapter .model-copy{width:100%;max-width:none}.model-chapter .model-copy h2{font-size:40px;max-width:100%}.model-chapter .model-copy .body-lg{font-size:17px;max-width:none}.model-study-image,html[lang=ar] .model-study-image{position:relative;inset:auto;height:auto;aspect-ratio:1.25;width:calc(100% + 44px);margin:22px -22px 0}.model-note{position:relative;inset:auto;max-width:none;width:100%;margin-top:5px;padding:16px 18px}.model-note small{font-size:12px}.sec-head{margin-bottom:25px}.sec-head .k{font-size:11px}.sec-head .k:last-child{display:none}.display.h-sec{font-size:38px}.journal-title>p,.cur-head .body-lg{font-size:17px}.card h3{font-size:23px}.card p{font-size:16px}.card-meta{font-size:12px}.card-fr{aspect-ratio:1.2}.learning-summary{gap:15px}.learning-summary>span{font-size:10px;max-width:32%}.learning-summary b{font-size:26px}.les h3{font-size:19px}.les .k,.les .t{font-size:12px}.about-copy .body-lg{font-size:17px}.about-copy .eyebrow{font-size:12px}.footer-invitation>a{font-size:54px;letter-spacing:-2px}.foot-base{gap:12px;font-size:12px}html[lang=ar] .hero-copy .eyebrow{font-size:10px}html[lang=ar] .hero-copy .h-hero{font-size:44px;line-height:1.4;letter-spacing:0}html[lang=ar] .portrait-panel{height:420px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image-field,.model-study-image{transform:none!important}.reveal-ready{opacity:1!important;transform:none!important}}


/* Source: studio/manual-refinements.css */
/* Numerical decisions from the 38-reference design review. */
:root{--pad:clamp(22px,4.6vw,80px)}
.hero-copy .accent-line>span{display:inline-block!important}
.hero-copy .eyebrow,html[lang=ar] .hero-copy .eyebrow{font-size:12px;letter-spacing:.5px}
.hero-baseline,.signature-row small,.model-note>span,.sec-head .k,.learning-summary>span,.portrait-top,.portrait-top>span,.portrait-top b,.portrait-name small,.portrait-tag,.about-photo>span b{font-size:12px}
.portrait-name small{letter-spacing:.6px}.portrait-tag{display:none}.portrait-name{bottom:32px}.portrait-name strong{letter-spacing:-3px}
.primary-link,.plain-link,.studio-language,.foot-base a,.foot-base button{font-size:14px}
.card p{font-size:17px;line-height:1.7}.card h3{line-height:1.4}.card-meta,.card-lab b,.card-lab span{font-size:12px}
.sec{padding-block:96px}.sec-head{margin-bottom:40px}.model-chapter{min-height:780px}.hero-copy .hero-sub{font-size:18px;line-height:1.75}
.hero-copy .h-hero{font-size:clamp(44px,5.05vw,76px)}
.skip-link{position:fixed;top:-100px;inset-inline-start:20px;background:#414343;color:#fff;padding:12px 20px;z-index:500}.skip-link:focus{top:12px}
.brand-lockup img{mix-blend-mode:multiply}.nav{backdrop-filter:none!important;background:#fff!important}.model-note{backdrop-filter:none}
.course-preview{background:white}.course-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.course-cards article{border:1px solid #D7DADA;border-top:2px solid #F47721;padding:28px;display:flex;flex-direction:column;background:#fff}.course-cards .course-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:24px;color:#5F6666;gap:12px}.course-cards .course-top>span:first-child{font-size:28px;color:#414343}.course-cards h3{font-size:26px;font-weight:500;line-height:1.45;margin:0 0 20px}.course-cards p{font-size:17px;line-height:1.75;color:#5F6666;margin:0 0 24px}.course-cards a{margin-top:auto;width:fit-content;color:#A5420B;border-color:#A5420B}
.radar-chapter{background:#F7F7F5}.radar-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:end;margin-bottom:40px}.radar-heading p{font-size:18px;line-height:1.75;color:#5F6666;max-width:450px}.radar-rows>a{display:grid;grid-template-columns:180px 1fr 24px;gap:32px;align-items:center;padding:28px 0;border-top:1px solid #D7DADA}.radar-rows>a>span{font-size:12px;color:#5F6666}.radar-rows h3{font-size:24px;line-height:1.5;font-weight:400;margin:0}.radar-rows b{font-size:22px;font-weight:400}.radar-rows>a:hover h3{text-decoration:underline;text-decoration-color:#F47721;text-underline-offset:6px}
html[lang=ar] .display,html[lang=ar] .les h3,html[lang=ar] .card h3,html[lang=ar] .footer-invitation>a{letter-spacing:0}html[lang=ar] .hero-copy .hero-sub,html[lang=ar] .body-lg{line-height:1.95}
@media(min-width:1500px){.sec{padding-inline:max(var(--pad),calc((100vw - 1320px)/2))}.agha-hero{padding-inline:max(var(--pad),calc((100vw - 1440px)/2))}}
@media(max-width:1100px){.course-cards{gap:16px}.course-cards article{padding:22px}.course-cards h3{font-size:23px}.hero-copy .h-hero{font-size:54px}.hero-baseline>span:first-child{display:none}.portrait-top>span{display:none}}
@media(max-width:820px){.hero-copy .h-hero{font-size:44px}.sec{padding-block:64px}.course-cards{grid-template-columns:1fr}.course-cards article{padding:26px}.radar-heading{grid-template-columns:1fr;gap:24px}.radar-rows>a{grid-template-columns:1fr 24px;gap:12px}.radar-rows>a>span{grid-column:1}.radar-rows h3{grid-column:1;font-size:22px}.radar-rows b{grid-column:2;grid-row:1/3}.model-chapter{min-height:700px}.model-note>span{font-size:12px}.hero-copy .hero-sub{font-size:17px}}
@media(max-width:600px){.sec{padding-block:56px}.sec-head .k{font-size:12px}.model-chapter{min-height:0}.agha-hero .hero-copy .h-hero{font-size:clamp(36px,10.5vw,46px)}html[lang=ar] .agha-hero .hero-copy .h-hero{font-size:44px;line-height:1.35}.hero-copy .eyebrow,html[lang=ar] .hero-copy .eyebrow{font-size:12px;letter-spacing:0;flex-wrap:wrap;gap:6px}.hero-copy .hero-sub{font-size:17px}.hero-baseline,.hero-baseline a{font-size:12px;letter-spacing:0}.hero-baseline{gap:20px}.learning-summary>span{font-size:12px;line-height:1.6}.learning-summary b{font-size:26px}.les .k,.les .t{font-size:14px}.portrait-panel,html[lang=ar] .portrait-panel{height:420px}.portrait-name small{font-size:12px}.portrait-name{left:24px;right:20px}.signature-row small{font-size:12px}.footer-invitation>a{font-size:48px}.foot-base{flex-wrap:wrap}.about-photo>span b{letter-spacing:.3px}.radar-rows h3{font-size:21px}}
@media(max-width:360px){.portrait-name small{font-size:11px}.hero-copy .eyebrow{max-width:260px}.hero-baseline>span{max-width:46%}.learning-summary{gap:12px}.learning-summary b{font-size:24px}}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.template-grid>a{display:block;padding:24px;border:1px solid #D7DADA;background:#fff}.template-grid>a:hover{border-color:#414343}.template-format{display:flex;justify-content:space-between;font-size:14px;color:#A5420B;margin-bottom:24px}.template-grid h3{font-size:22px;font-weight:500;line-height:1.5;margin:0 0 12px}.template-grid p{font-size:16px;line-height:1.7;color:#606666}.templates-chapter{background:#F7F7F5}.agha-hero{min-height:0;padding-top:128px}.hero-copy .h-hero{font-size:68px;line-height:1.08}html[lang=ar] .hero-copy .h-hero{font-size:64px;line-height:1.25}.nav,.nav.stuck{height:80px}.model-chapter{min-height:700px}.portrait-panel{height:580px;max-height:70vh}.card-fr{aspect-ratio:4/3}.card-meta,.sec-head .k,.foot-base,.hero-baseline,.learning-summary>span{font-size:14px}.primary-link,.plain-link,.nav-link{font-size:16px}.hero-copy .hero-sub{background:linear-gradient(90deg,#ffffff90,#ffffffe8);border-radius:4px}.hero-image-field{opacity:.06}
@media(max-width:1199px){.hero-copy .h-hero{font-size:56px}html[lang=ar] .hero-copy .h-hero{font-size:52px}.nav,.nav.stuck{height:72px}.agha-hero{padding-top:112px}.sec{padding-block:80px}.portrait-panel{height:500px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-link{font-size:14px}.model-chapter{min-height:640px}}
@media(max-width:767px){.nav,.nav.stuck{height:64px}.agha-hero{padding-top:96px}.agha-hero .hero-copy .h-hero{font-size:40px;line-height:44px}html[lang=ar] .agha-hero .hero-copy .h-hero{font-size:38px;line-height:49.4px}.sec{padding-block:56px}.portrait-panel,html[lang=ar] .portrait-panel{height:280px;max-height:none;border-top-left-radius:80px}.portrait-panel>img{object-position:64% 30%}.portrait-name strong{font-size:54px}.portrait-name{bottom:24px}.portrait-name>span{font-size:12px}.portrait-top{top:18px}.signature-row{margin-top:20px}.hero-copy{padding-bottom:0}.template-grid{grid-template-columns:1fr;gap:16px}.model-chapter{min-height:0}.model-chapter .model-copy{width:100%}.hero-baseline{font-size:12px}.primary-link{font-size:16px}.hero-copy .hero-sub{font-size:17px}.card-meta{font-size:14px}}
@media(max-width:359px){:root{--pad:16px}.hero-baseline>span{font-size:12px}.portrait-name small{font-size:11px}.portrait-panel,html[lang=ar] .portrait-panel{height:260px}}
.card-fr[data-cover="0"]{background-image:url('cover-information.svg')!important;background-size:cover!important;background-position:center!important}.card-fr[data-cover="1"]{background-image:url('cover-ifc.svg')!important;background-size:cover!important;background-position:center!important}.card-fr[data-cover="2"]{background-image:url('cover-4d.svg')!important;background-size:cover!important;background-position:center!important}
@media(max-width:359px){.nav .brand-lockup{width:134px;height:36px}.nav .brand-lockup img{width:229px;left:-83px;top:-23px}.studio-language{font-size:12px;padding:6px 8px;min-width:42px}.nav{gap:8px}.nav-burger{min-width:44px;width:44px}.hero-copy .h-hero .accent-line>span{box-shadow:none;text-decoration:underline;text-decoration-color:#F47721;text-decoration-thickness:3px;text-underline-offset:8px}}
.portrait-top>span{display:none}
@media(min-width:601px) and (max-width:767px){.model-chapter{display:flex;flex-direction:column}.model-study-image,html[lang=ar] .model-study-image{position:relative;inset:auto;aspect-ratio:1.5;width:100%;height:auto;margin:24px 0}.model-note{position:relative;inset:auto;max-width:none;width:100%}.model-chapter .model-copy{max-width:none}.model-chapter .model-copy h2{max-width:none}.cards{grid-template-columns:1fr}.card-fr{aspect-ratio:4/3}}


/* Source: studio/visual-upgrade.css */
/* White, charcoal and warm orange. The approved artwork remains unchanged. */
:root{--font-ui:Inter,Tajawal,Arial,sans-serif;--identity:#414343;--orange:#F47721}
html[lang=ar]{--font-ui:Tajawal,Inter,Tahoma,sans-serif}
body,body *{font-family:var(--font-ui)!important}body{font-weight:400;color:#414343}
.signature-row>span,.signature{font-family:Georgia,serif!important}
*,*:before,*:after{text-shadow:none!important}
.brand-system{display:inline-flex;align-items:center;gap:8px;direction:ltr;white-space:nowrap;color:#414343}
.brand-symbol{display:block;position:relative;overflow:hidden;width:80px;height:64px;flex:none;isolation:isolate;mix-blend-mode:multiply}
.brand-symbol img{position:absolute;width:340px!important;max-width:none!important;height:auto!important;left:-20px;top:-29px;mix-blend-mode:multiply}
.brand-name{display:flex;flex-direction:column;font-family:Inter,Arial,sans-serif!important;font-size:19px;font-weight:600;letter-spacing:-.75px;line-height:1.2}
.brand-name>span{font-family:Inter,Arial,sans-serif!important;font-weight:500;font-size:8px;letter-spacing:1.55px;margin-top:8px;color:#606666}
.nav,.nav.stuck{height:88px;padding-inline:var(--pad);gap:28px}.nav-links{gap:24px}.nav-link{font-size:14px;white-space:nowrap}.site-header{padding-block:10px}.site-header .brand-system{gap:6px}
.hero-copy .h-hero{font-weight:500;letter-spacing:-3.3px;font-size:clamp(46px,4.85vw,70px);line-height:1.08}
html[lang=ar] .hero-copy .h-hero{font-size:clamp(46px,5.15vw,74px);font-weight:500;line-height:1.18;letter-spacing:0}
.hero-copy .hero-sub{font-size:18px;line-height:1.75;margin-bottom:20px;background:none;max-width:560px;color:#606666}
html[lang=ar] .hero-copy .hero-sub{font-size:21px;line-height:1.85}
.hero-copy .accent-line>span{box-shadow:none;text-decoration:underline;text-decoration-color:#F47721;text-decoration-thickness:4px;text-underline-offset:10px}
.agha-hero{padding-top:132px;gap:40px;grid-template-columns:1.1fr 1fr;background:#fff}
.hero-image-field{inset:8% -18% -9% 26%;opacity:.14;mask-image:linear-gradient(transparent,#000 22%,#000 82%,transparent)}
html[lang=ar] .hero-image-field{inset:8% 26% -9% -18%}
.agha-hero:before{background:linear-gradient(90deg,#fff 6%,#ffffffea 35%,#ffffff33 72%,transparent);z-index:1}
html[lang=ar] .agha-hero:before{background:linear-gradient(-90deg,#fff 6%,#ffffffea 35%,#ffffff33 72%,transparent)}
.hero-copy,.portrait-panel,.hero-baseline{z-index:2}.hero-expertise{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:10px;font-weight:500;letter-spacing:.8px;color:#606666;margin:0 0 28px;direction:ltr}.hero-expertise i{display:block;width:4px;height:4px;background:#F47721;border-radius:50%}
.portrait-panel{height:560px;max-height:none;border-radius:130px 4px 4px 4px;box-shadow:none;outline:1px solid #41434312}
.portrait-name strong{font-size:76px;font-weight:600;letter-spacing:-3px}.portrait-name>span{font-size:14px;letter-spacing:2px}.portrait-name small{font-size:11px;letter-spacing:.6px}.portrait-top>span{display:none}
.hero-baseline{margin-top:0;padding-block:20px;font-size:11px;letter-spacing:.8px}.signature-row{margin-top:28px}.signature-row small{font-size:13px}
.primary-link{min-height:50px;font-weight:600;font-size:15px;padding:16px 22px;border-radius:4px}.primary-link:hover{transform:none}.hero-copy .plain-link{font-size:14px}
.practice-section{padding:88px var(--pad) 80px;background:#F7F7F5;position:relative;overflow:clip}
.practice-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:end;max-width:1280px;margin:auto}
.practice-heading .eyebrow{font-size:12px;letter-spacing:1px;margin-bottom:20px;color:#606666}.practice-heading h2{font-size:clamp(36px,4.1vw,58px);font-weight:500;line-height:1.18;letter-spacing:-2px;margin:0}
.practice-heading>p{font-size:18px;line-height:1.8;max-width:400px;color:#606666;margin:0 0 4px}
.practice-visual{max-width:1320px;margin:36px auto 0;position:relative;aspect-ratio:2.1;direction:ltr;isolation:isolate;overflow:hidden;background:#fff;border:1px solid #D7DADA;border-radius:4px 4px 0 0}
.practice-image{position:absolute;inset:-24% -2% -8%;transform:translate3d(var(--practice-x,0px),var(--practice-y,0px),0) scale(1.025);transition:transform .25s ease-out;will-change:transform}
.practice-image img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.practice-frame{position:absolute;left:3%;top:9%;width:29%;height:78%;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .2s;pointer-events:none;opacity:.7}
.practice-visual[data-domain=infrastructure] .practice-frame{transform:translateX(112%)}.practice-visual[data-domain=buildings] .practice-frame{transform:translateX(224%)}
.practice-frame i{position:absolute;width:22px;height:22px;border:1px solid #F47721}.practice-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.practice-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.practice-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.practice-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.practice-image-note{position:absolute;bottom:12px;left:16px;right:16px;z-index:2;font-size:10px;letter-spacing:.8px;color:#414343;text-align:center;background:#ffffffdf;padding:7px 12px;width:fit-content;max-width:calc(100% - 32px);margin:auto;border-radius:2px}
.practice-options{display:grid;grid-template-columns:repeat(3,1fr);max-width:1320px;margin:auto;border:1px solid #D7DADA;border-top:0;background:#fff;direction:ltr;border-radius:0 0 4px 4px}
.practice-options button{display:flex;align-items:center;gap:18px;padding:25px 24px;min-height:106px;background:#fff;border:0;border-top:3px solid transparent;color:#414343;text-align:start;cursor:pointer;transition:background .18s,border-color .18s}
.practice-options button+button{border-inline-start:1px solid #D7DADA}.practice-options button[aria-pressed=true]{border-top-color:#F47721;background:#fff8f2}.practice-options button:hover{background:#F7F7F5}.domain-number{font-size:13px;color:#606666}.practice-options small{font:500 10px/1.6 Inter,sans-serif!important;letter-spacing:.7px;color:#606666;display:block;margin-bottom:7px}.practice-options strong{font-size:23px;font-weight:500}.domain-arrow{margin-inline-start:auto;font-size:22px;color:#A5420B}
.practice-description{max-width:1280px;margin:32px auto 0;display:flex;justify-content:space-between;gap:48px;align-items:start;min-height:136px}.practice-description>div{max-width:780px}.practice-description h3{font-size:23px;line-height:1.4;margin:0 0 12px;font-weight:500}.practice-description p{font-size:17px;color:#606666;line-height:1.8;margin:0;max-width:680px}.practice-description>a{flex-shrink:0;color:#A5420B}
html[lang=ar] .practice-heading h2{letter-spacing:0;line-height:1.35}html[lang=ar] .practice-heading>p{font-size:21px}html[lang=ar] .practice-options strong{font-size:25px}html[lang=ar] .practice-description p{font-size:20px;line-height:1.85}html[lang=ar] .practice-image-note{font-size:13px;letter-spacing:0;direction:rtl}html[lang=ar] .practice-options button>span:nth-child(2){direction:rtl;text-align:right}
.card-fr{transition:transform .3s ease;background-size:cover!important}.card:hover h3{text-decoration:underline;text-decoration-color:#F47721;text-underline-offset:5px}.card:hover .card-fr{transform:translateY(-3px)}
.display.h-sec{font-weight:500}.body-lg{font-size:18px}.card h3{font-size:23px;font-weight:500}.card p{font-size:16px;line-height:1.75}html[lang=ar] .card h3{font-size:25px;line-height:1.5}html[lang=ar] .card p{font-size:19px;line-height:1.8}
.reading-content p,.lesson-content section p,.policy p{font-size:19px;line-height:1.8}html[lang=ar] .reading-content p,html[lang=ar] .lesson-content section p,html[lang=ar] .policy p{font-size:21px;line-height:1.95}.reading-heading h1{font-weight:600;letter-spacing:-1.5px}html[lang=ar] .reading-heading h1{font-weight:700;letter-spacing:0}
.motion-muted .practice-image,.motion-muted .practice-frame{transform:none!important;transition:none!important}.motion-muted .practice-visual[data-domain=infrastructure] .practice-frame{transform:translateX(112%)!important}.motion-muted .practice-visual[data-domain=buildings] .practice-frame{transform:translateX(224%)!important}
@media(min-width:1500px){.practice-section{padding-inline:max(var(--pad),calc((100vw - 1280px)/2))}}
@media(max-width:1199px){.nav-links{gap:18px}.nav{gap:20px}.brand-name{font-size:18px}.brand-symbol{width:70px;height:60px}.brand-symbol img{width:312px!important;left:-19px;top:-27px}.agha-hero{gap:30px}.hero-copy .h-hero{font-size:54px}html[lang=ar] .hero-copy .h-hero{font-size:58px}.hero-expertise{gap:8px;font-size:9px}.portrait-panel{height:520px}.practice-options button{padding:22px 18px;gap:12px}.practice-options strong{font-size:20px}.practice-options small{font-size:9px}.practice-description{gap:28px}.practice-description>a{font-size:13px}}
@media(max-width:980px){.nav-links{gap:12px}.nav-link{font-size:13px}.nav{gap:16px}.brand-name{font-size:16px}.brand-name>span{font-size:7px;letter-spacing:1px}.brand-symbol{width:62px;height:54px}.brand-symbol img{width:280px!important;left:-17px;top:-24px}.portrait-panel{height:470px}.hero-copy .h-hero{font-size:46px}html[lang=ar] .hero-copy .h-hero{font-size:48px}.practice-heading{gap:30px}.practice-heading>p{font-size:16px}.practice-options strong{font-size:18px}.domain-arrow{display:none}}
@media(max-width:820px){.nav,.nav.stuck{height:76px}.nav-link{font-size:24px!important}.agha-hero{padding-top:112px}.practice-section{padding-block:64px}.practice-heading{grid-template-columns:1fr;gap:24px}.practice-heading>p{max-width:520px}.practice-description{display:block;min-height:0}.practice-description>a{margin-top:18px}.practice-visual{aspect-ratio:1.6}.practice-image{inset:-8% -8% -3%}.practice-options button{display:block;padding:18px 12px;min-height:118px}.practice-options small{font-size:8px;letter-spacing:0}.domain-number{display:block;margin-bottom:12px}.practice-options strong{font-size:17px}html[lang=ar] .practice-options strong{font-size:22px}.hero-expertise{font-size:10px}.portrait-name strong{font-size:60px}}
@media(max-width:600px){.nav,.nav.stuck{height:72px;gap:12px}.brand-system{gap:4px}.brand-symbol{width:60px;height:54px}.brand-symbol img{width:272px!important;left:-16px;top:-23px}.brand-name{font-size:15px;letter-spacing:-.6px}.brand-name>span{font-size:6.5px;letter-spacing:.65px;margin-top:6px}.studio-language{font-size:12px;padding-inline:10px}.nav-burger{width:40px;min-width:40px}.agha-hero{padding-top:104px;gap:30px}.agha-hero .hero-copy .h-hero{font-size:42px;line-height:1.1;letter-spacing:-2px}html[lang=ar] .agha-hero .hero-copy .h-hero{font-size:46px;line-height:1.2;letter-spacing:0}.hero-copy .hero-sub{font-size:17px;line-height:1.75}html[lang=ar] .hero-copy .hero-sub{font-size:20px;line-height:1.85}.hero-expertise{gap:7px;font-size:9px;letter-spacing:.25px;margin-bottom:24px}.portrait-panel,html[lang=ar] .portrait-panel{height:350px;border-top-left-radius:95px}.portrait-name strong{font-size:60px}.portrait-name small{font-size:10px}.signature-row{margin-top:20px}.signature-row small{font-size:12px}.hero-image-field,html[lang=ar] .hero-image-field{inset:30% -20% 0;opacity:.12}.hero-baseline{padding-block:18px}.practice-section{padding-block:56px}.practice-heading h2{font-size:38px;letter-spacing:-1.5px}html[lang=ar] .practice-heading h2{font-size:40px}.practice-heading>p{font-size:17px}html[lang=ar] .practice-heading>p{font-size:20px}.practice-visual{aspect-ratio:1.24;margin-top:24px}.practice-image{inset:0 -37% 0;transform:translate3d(var(--practice-mobile-x,0%),var(--practice-y,0px),0);transition:transform .55s cubic-bezier(.22,1,.36,1)}.practice-frame{display:none}.practice-image-note{font-size:9px;letter-spacing:0;bottom:8px;left:8px;right:8px;max-width:calc(100% - 16px);padding:5px 8px}html[lang=ar] .practice-image-note{font-size:11px}.practice-options{gap:0}.practice-options button{padding:14px 10px;min-height:108px;text-align:center}.practice-options button>span:nth-child(2),html[lang=ar] .practice-options button>span:nth-child(2){text-align:center}.practice-options small{display:none}.domain-number{font-size:12px;margin-bottom:12px}.practice-options strong{font-size:15px;line-height:1.45}html[lang=ar] .practice-options strong{font-size:19px}.practice-description{margin-top:24px}.practice-description h3{font-size:22px}.practice-description p{font-size:17px}html[lang=ar] .practice-description p{font-size:19px}.site-header .brand-system{gap:2px}.site-header .brand-symbol{width:54px}.site-header .brand-name{font-size:14px}.site-header .brand-name>span{font-size:6px}.site-header{padding-inline:16px;gap:8px}.reading-content p,.lesson-content section p{font-size:18px}html[lang=ar] .reading-content p,html[lang=ar] .lesson-content section p{font-size:20px;line-height:1.9}}
@media(max-width:359px){.nav{gap:6px;padding-inline:16px}.brand-symbol{width:48px;height:46px}.brand-symbol img{width:230px!important;left:-14px;top:-18px}.brand-name{font-size:13px}.brand-name>span{display:none}.studio-language{padding-inline:8px}.nav-burger{width:36px;min-width:36px}.hero-expertise{font-size:8px;gap:5px}.agha-hero .hero-copy .h-hero{font-size:38px}html[lang=ar] .agha-hero .hero-copy .h-hero{font-size:42px}}
@media(prefers-reduced-motion:reduce){.practice-image,.practice-frame,.card-fr{transition:none!important;transform:none!important}}
/* Visual review 1: preserve the whole minaret and structural silhouettes. */
@media(min-width:601px){.practice-visual{aspect-ratio:1.9}.practice-image{inset:-2% -2% -2%}.practice-image img{object-fit:contain;object-position:center}.practice-frame{top:9%;height:79%}}
.practice-section{scroll-margin-top:88px}.hero-expertise span{font-family:Inter,Arial,sans-serif!important}.practice-options small{font-family:Inter,Arial,sans-serif!important}

/* Visual review 2: improve fine-print contrast and keep the wordmark calm. */
.hero-expertise{font-size:11px;letter-spacing:.25px}.brand-name>span{color:#606666}.hero-baseline{font-size:12px;letter-spacing:.2px}.practice-options small{font-size:11px!important;letter-spacing:.25px}.practice-image-note{font-size:11px;letter-spacing:.2px}.brand-name{font-weight:600}.practice-description h3{text-wrap:balance}
@media(max-width:600px){.hero-expertise{font-size:9px;gap:7px}.practice-image-note{font-size:10px}.hero-baseline{font-size:11px}}
/* Separate, full-frame domain images: no composite crop, on every breakpoint. */
.practice-visual{aspect-ratio:1.95;background:white}.practice-image{inset:20px 36px 40px!important;transform:translate3d(0,var(--practice-y,0px),0)!important}.practice-image img{position:absolute;inset:0;object-fit:contain!important;object-position:center!important;opacity:0;transform:scale(.985);transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}.practice-image img.is-active{opacity:1;transform:scale(1)}.practice-frame{display:none!important}.practice-image-note{bottom:10px}.practice-description{min-height:160px}
@media(max-width:820px){.practice-visual{aspect-ratio:1.5}.practice-image{inset:18px 20px 44px!important}}
@media(max-width:600px){.practice-visual{aspect-ratio:1.05}.practice-image{inset:14px 8px 42px!important}.practice-description{min-height:220px}}
@media(prefers-reduced-motion:reduce){.practice-image img{transition:none!important;transform:none!important}.practice-image{transform:none!important}}
.motion-muted .practice-image,.motion-muted .practice-image img{transform:none!important;transition:none!important}
/* Visual review 3: restore the single-column phone hero and full touch targets. */
@media(max-width:600px){.agha-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:28px}.hero-copy{min-width:0;width:100%;max-width:none}.portrait-panel,html[lang=ar] .portrait-panel{width:100%;height:340px;grid-column:1;max-width:none}.hero-baseline{grid-column:1}.nav-burger{width:44px;min-width:44px;height:44px}.hero-copy .eyebrow{font-size:10px!important;letter-spacing:.1px!important;display:block}.hero-copy .eyebrow .dot{display:none}.hero-expertise{font-size:9px}.hero-copy .hero-sub{max-width:none}.practice-section{scroll-margin-top:72px}.brand-name{font-size:14px}.brand-symbol{width:52px}}
/* Visual review 4: keep reading-page headers on one line on phones. */
.paper .site-header{min-height:88px;padding-block:10px}
@media(max-width:600px){.paper .site-header,.site-header{padding:10px 16px;gap:8px;min-height:72px}.paper .site-header>.brand{flex-shrink:0}.paper .site-header .header-actions{margin-inline-start:auto}.reading-heading .eyebrow{line-height:1.7}.reading-content h2,.lesson-content section h2{line-height:1.5}}
@media(max-width:359px){.paper .site-header,.site-header{padding-inline:12px;gap:4px}.site-header .brand-name{font-size:12px}.site-header .brand-symbol{width:44px}.site-header .language{padding-inline:8px}.site-header .menu{min-width:44px}}


/* Source: studio/precision.css */
/* Authoritative layout / interaction pass. No serif, italics or invisible content. */
:root{--pad:max(32px,calc((100vw - 1280px)/2));--space-section:88px;--ink:#414343;--quiet:#606666;--line:#D7DADA;--soft:#F7F7F5;--warm:#FFF3E9;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:88px}body{font-synthesis:none}body *,body *:before,body *:after{font-style:normal!important;text-shadow:none!important}
.signature,.signature-row>span{font-family:var(--font-ui)!important;font-style:normal!important}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #A5420B;outline-offset:5px;border-radius:3px}
.sec,.practice-section{padding:var(--space-section) var(--pad);scroll-margin-top:0}.sec-head{margin:0 0 32px;gap:24px}.sec-head .k,.eyebrow{font-size:12px;line-height:1.6;letter-spacing:.8px}.sec-head .rule{height:1px;background:var(--line)}
.display.h-sec,.practice-heading h2{font-size:clamp(34px,3.6vw,52px);line-height:1.16;font-weight:500;letter-spacing:-1.7px;max-width:760px}
html[lang=ar] .display.h-sec,html[lang=ar] .practice-heading h2{line-height:1.35;letter-spacing:0}
.body-lg,.journal-title>p,.cur-head .body-lg,.radar-heading p{font-size:18px;line-height:1.8;color:var(--quiet)}
html[lang=ar] .body-lg,html[lang=ar] .journal-title>p,html[lang=ar] .cur-head .body-lg,html[lang=ar] .radar-heading p{font-size:20px;line-height:1.85}
.nav,.nav.stuck{height:88px;padding-inline:var(--pad);gap:24px;border-bottom:1px solid #41434318;background:#fffffffa!important;backdrop-filter:blur(12px)!important}
.nav-links{gap:4px}.nav-link,.site-header nav a{position:relative;padding:10px 14px;border-radius:6px;min-height:44px;font-size:14px;transition:background .18s,color .18s}
.nav-link:after,.site-header nav a:after{content:'';position:absolute;inset:auto 14px 6px;height:2px;background:#F47721;transform:scaleX(0);transform-origin:center;transition:transform .2s var(--ease);width:auto!important}
.nav-link:hover,.nav-link:focus-visible,.nav-link[aria-current=location],.site-header nav a:hover,.site-header nav a:focus-visible{background:var(--warm);color:#873906}
.nav-link:hover:after,.nav-link:focus-visible:after,.nav-link[aria-current=location]:after,.site-header nav a:hover:after{transform:scaleX(1)}
.studio-language,.language{transition:background .18s,border-color .18s}.studio-language:hover,.language:hover{background:var(--warm);border-color:#A5420B}
.brand-system{gap:8px}.brand-symbol{width:76px;height:64px}.brand-name{font-size:19px;letter-spacing:-.6px}.brand-name>span{font-size:8px;letter-spacing:1px}
.page-progress{position:fixed;top:86px;inset-inline:0;height:2px;z-index:90;pointer-events:none}.page-progress i{display:block;width:100%;height:100%;background:#F47721;transform:scaleX(var(--page-progress,0));transform-origin:left}html[dir=rtl] .page-progress i{transform-origin:right}
.agha-hero{padding:132px var(--pad) 0;gap:40px 64px;grid-template-columns:1.08fr 1fr;grid-template-rows:auto auto;min-height:0}
.hero-copy{max-width:650px;padding:16px 0;align-self:center}.hero-copy .eyebrow{margin-bottom:20px;font-size:12px!important;letter-spacing:.5px;display:block}
.hero-copy .h-hero{font-size:clamp(44px,4.55vw,64px);line-height:1.1;font-weight:500;letter-spacing:-2.5px;margin-bottom:24px}
html[lang=ar] .hero-copy .h-hero{font-size:clamp(44px,4.7vw,64px);line-height:1.24;letter-spacing:0}
.hero-copy .hero-sub{font-size:18px;line-height:1.8;max-width:510px;margin-bottom:24px;background:none}html[lang=ar] .hero-copy .hero-sub{font-size:21px;line-height:1.8}
.hero-expertise{font-size:11px;gap:10px;line-height:1.6;margin-bottom:26px;letter-spacing:0}.hero-expertise i{width:3px;height:3px}
.primary-link{background:#F47721;color:#222525;min-width:0;border:1px solid #A5420B66;border-radius:5px;padding:16px 22px;min-height:52px;gap:24px;transition:background .18s,color .18s}
.primary-link:hover{background:#414343;color:white;transform:none}.hero-actions{gap:12px 24px}.hero-reader-note{display:flex;gap:10px;align-items:center;margin-top:28px;font-size:13px;line-height:1.7;color:var(--quiet)}.reader-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#F47721}
.portrait-panel,html[lang=ar] .portrait-panel{height:548px;border-radius:112px 8px 8px 8px;max-height:none;width:100%;margin:0}.portrait-name{left:28px;bottom:32px}.portrait-name strong{font-size:72px}.portrait-top{display:none}.portrait-name small{font-size:11px;letter-spacing:.5px}
.hero-baseline{grid-column:1/-1;margin:0;padding:16px 0;min-height:68px;font-size:12px;letter-spacing:0}.hero-image-field{opacity:.1}
.hero-baseline a{min-height:44px;font-size:13px}.hero-baseline a b{transition:transform .2s}.hero-baseline a:hover b{transform:translateY(4px)}
/* Practice: illustration and its meaning share one stage. */
.practice-heading{grid-template-columns:1.15fr 1fr;max-width:none;gap:64px;margin:0 0 32px;align-items:end}.practice-heading .eyebrow{margin:0 0 16px;font-size:12px}.practice-heading>p{max-width:440px;font-size:18px;line-height:1.8}
.practice-stage{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px 8px 0 0;overflow:hidden;min-width:0}
.practice-visual{width:100%;margin:0;aspect-ratio:1.45;border:0;border-radius:0;max-width:none;min-width:0}
.practice-image{inset:18px 10px 44px!important}.practice-image-note{font-size:10px;letter-spacing:0;color:var(--quiet);padding:4px 8px;bottom:8px}
.practice-description{display:flex;flex-direction:column;gap:22px;align-items:start;justify-content:center;padding:32px 32px 32px 12px;margin:0;min-height:0;max-width:none}
html[dir=rtl] .practice-description{padding:32px 12px 32px 32px}.practice-description>div{max-width:none}.practice-description h3{font-size:27px;line-height:1.3;font-weight:500;margin-bottom:16px}.practice-description p{font-size:17px;line-height:1.85;max-width:38ch}.practice-description>a{font-size:14px;margin:0}.practice-options{border-radius:0 0 8px 8px;max-width:none;overflow:hidden}
.practice-options button{padding:20px 24px;min-height:94px;gap:18px;border-top-width:2px;transition:background .18s,border-color .18s}.practice-options small{font-size:10px!important;letter-spacing:.2px}.practice-options strong{font-size:21px}.domain-number{font-size:13px}.domain-arrow{display:block;transition:transform .2s}.practice-options button:hover .domain-arrow{transform:translate(2px,-2px)}
html[lang=ar] .practice-description h3{font-size:29px;line-height:1.4}html[lang=ar] .practice-description p{font-size:20px;line-height:1.85}html[lang=ar] .practice-heading>p{font-size:20px}html[lang=ar] .practice-options strong{font-size:23px}
/* Fix the original empty-column failure: both columns participate in one grid. */
.sec.model-chapter{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);grid-template-rows:auto auto;gap:0 56px;align-items:center;min-height:0!important;height:auto;background:var(--soft)!important;overflow:clip}
.model-chapter>.sec-head{grid-column:1/-1}.model-chapter>.model-copy{grid-column:1;grid-row:2;width:auto;max-width:none;margin:0;min-width:0;position:relative}
.model-copy .eyebrow{margin:0 0 16px;color:#A5420B}.model-chapter .model-copy h2{max-width:none;font-size:clamp(34px,3.6vw,50px);line-height:1.2}.model-chapter .model-copy .body-lg{font-size:17px;line-height:1.85;margin:20px 0 0;max-width:45ch}html[lang=ar] .model-chapter .model-copy .body-lg{font-size:20px}html[lang=ar] .model-chapter .model-copy h2{line-height:1.35}
.model-chapter>.model-figure{grid-column:2;grid-row:2;position:relative;margin:0;min-width:0;width:100%;align-self:center;background:white;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.model-figure>.model-study-image,html[lang=ar] .model-figure>.model-study-image{position:relative;inset:auto!important;width:100%;height:auto;aspect-ratio:1.07;margin:0;transform:translate3d(0,var(--study-drift,0px),0);mix-blend-mode:multiply}
.model-study-image img{width:100%;height:100%;object-fit:contain;display:block}
.model-figure figcaption{display:flex;gap:16px;justify-content:space-between;padding:18px 20px;border-top:1px solid var(--line);font-size:10px;line-height:1.6;color:var(--quiet);position:relative;background:white}
.model-principles{list-style:none;padding:0;margin:24px 0 8px}.model-principles li{display:flex;gap:16px;border-top:1px solid var(--line);padding:14px 0}.model-principles li>span{font-size:12px;line-height:24px;color:#A5420B;direction:ltr}.model-principles strong{font-size:15px;font-weight:600;display:block;line-height:1.5}.model-principles small{font-size:14px;line-height:1.7;color:var(--quiet)}html[lang=ar] .model-principles strong{font-size:18px}html[lang=ar] .model-principles small{font-size:16px}.model-explore{margin:16px 0 0;font-size:15px;color:#A5420B;gap:24px}.model-explore:hover{border-color:#A5420B}
/* Editorial hierarchy: one lead story and two compact supporting stories. */
.journal-title,.cur-head,.radar-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:end;margin-bottom:36px}.journal-title>p,.cur-head .body-lg,.radar-heading p{max-width:450px;margin:0}
.cards{display:grid;grid-template-columns:1.15fr 1fr;gap:24px 40px;align-items:start}.cards .card{min-width:0;transform:none}.cards .card:first-child{grid-row:span 2}.card h3,.card p{max-width:none}.cards .card:first-child .card-fr{aspect-ratio:1.85}.card-fr{border-radius:6px;transform:none!important}.card-meta{font-size:12px;line-height:1.6;display:flex;gap:12px;flex-wrap:wrap}.card h3{font-size:23px;line-height:1.4;margin:12px 0}.card p{font-size:16px;line-height:1.75;color:var(--quiet)}
.cards .card:not(:first-child){display:grid;grid-template-columns:148px minmax(0,1fr);gap:0 20px;align-content:start;border-bottom:1px solid var(--line);padding-bottom:24px}.cards .card:not(:first-child) .card-fr{grid-row:1/4;aspect-ratio:1;height:auto;align-self:start}.cards .card:not(:first-child) h3{font-size:20px;margin:10px 0}.cards .card:not(:first-child) .card-meta{padding:0;font-size:11px}.cards .card:not(:first-child) .card-lab{inset:8px 8px auto;padding:3px 5px}.cards .card:not(:first-child) .card-lab b,.cards .card:not(:first-child) .card-lab span{font-size:10px}.cards .card:not(:first-child) .card-ar{display:none}.card:hover h3{text-decoration-thickness:1px}
.card-fr:before{content:'';position:absolute;inset:0;border:2px solid transparent;border-radius:6px;z-index:4;transition:border-color .2s}.card-fr:hover:before{border-color:#F47721}
/* A compact, ordered learning directory. */
.academy-chapter{background:white}.learning-summary{margin:0 0 32px;padding:24px 0;gap:64px}.learning-summary>span{font-size:12px;line-height:1.6}.learning-summary b{font-size:30px;font-weight:500}
.cur{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.les{grid-template-columns:28px minmax(0,1fr) 24px;padding:20px 12px;gap:16px;min-height:82px;border-top:0}.les h3{font-size:18px;line-height:1.5;letter-spacing:0;font-weight:500}.les .k,.les .t{font-size:13px}.les:hover{background:var(--warm);border-radius:4px}.les .bar{display:none}.les .t{transition:transform .18s}.les:hover .t{transform:translate(2px,-2px)}.academy-note{font-size:14px;line-height:1.8;margin-top:24px}
.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.template-grid>a{padding:24px;border-radius:6px;transition:border-color .18s,background .18s}.template-grid>a:hover{border-color:#A5420B;background:#fffaf6}.template-format{font-size:12px;margin-bottom:20px}.template-grid h3{font-size:21px;line-height:1.4}.template-grid p{font-size:16px;line-height:1.7;margin:0}.template-grid>a:last-child{grid-column:span 3;display:grid;grid-template-columns:100px .9fr 1.4fr;align-items:center;gap:24px}.template-grid>a:last-child>*{margin:0}
.course-cards{gap:20px}.course-cards article{border-radius:6px;padding:28px;border-top-width:2px}.course-cards h3{font-size:25px;line-height:1.4}.course-cards p{font-size:16px;line-height:1.8}.course-cards .course-top>span:last-child{background:var(--soft);border-radius:20px;padding:6px 10px;line-height:1.5;font-size:12px}.course-cards .course-top>span:first-child{font-size:24px;color:#A5420B}
.radar-rows>a{transition:background .18s;padding:24px 16px;grid-template-columns:150px minmax(0,1fr) 24px}.radar-rows>a:hover{background:white}.radar-rows h3{font-size:22px;font-weight:500}.radar-rows>a>span{font-size:12px;line-height:1.6}
.about-chapter{gap:64px;grid-template-columns:1fr 1fr}.about-photo{height:440px;border-radius:8px}.about-copy .body-lg{font-size:18px;line-height:1.9;margin-bottom:20px}html[lang=ar] .about-copy .body-lg{font-size:21px}.about-copy h2{margin-bottom:24px}.about-photo>span b{font-size:11px;letter-spacing:.5px}
.foot{padding:48px var(--pad) 0}.footer-brand{margin-bottom:28px}.footer-invitation{padding-bottom:40px;gap:12px}.footer-invitation>span{font-size:14px}.footer-invitation>a{font-size:clamp(32px,4vw,56px);letter-spacing:-1.5px;line-height:1.25;max-width:1000px}.foot-base{font-size:12px;padding:18px 0;gap:20px}.foot-base a,.foot-base button{font-size:12px}
/* Shared reading pages inherit the same type and controls. */
.paper .site-header{padding-inline:var(--pad);gap:20px}.site-header nav{gap:2px}.paper .site-header nav a{font-size:14px;padding:10px}.reading-heading .eyebrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;letter-spacing:.3px}.reading-heading h1,.lesson-content h1{font-style:normal}.reading-content em,.lesson-content em{font-style:normal!important;font-weight:600}
.reveal-ready{opacity:1!important;transform:none!important}.motion-muted .scroll-enter{animation:none!important}.motion-muted .page-progress{display:none}
@media(max-width:1199px){:root{--pad:32px;--space-section:72px}.nav-link{padding-inline:10px}.nav-links{gap:0}.brand-name{font-size:17px}.brand-symbol{width:62px;height:56px}.brand-symbol img{width:280px!important;left:-17px;top:-24px}.agha-hero{gap:32px}.portrait-panel,html[lang=ar] .portrait-panel{height:500px}.hero-copy .h-hero{font-size:50px}html[lang=ar] .hero-copy .h-hero{font-size:52px}.practice-stage{grid-template-columns:1.2fr 1fr}.practice-description{padding:24px}html[dir=rtl] .practice-description{padding:24px}.practice-description h3{font-size:24px}.sec.model-chapter{gap:0 32px}.cards{gap:24px}.cards .card:not(:first-child){grid-template-columns:110px minmax(0,1fr);gap:0 16px}.cards .card:not(:first-child) p{font-size:15px}.course-cards article{padding:22px}.journal-title,.cur-head,.radar-heading,.practice-heading{gap:32px}.paper .site-header nav a{padding:8px;font-size:13px}}
@media(max-width:900px){.nav{gap:12px}.nav-links{gap:0}.nav-link{padding-inline:8px;font-size:13px!important}.brand-name{font-size:15px}.brand-name>span{font-size:7px}.brand-symbol{width:56px}.practice-stage{grid-template-columns:1.05fr 1fr}.practice-description h3,html[lang=ar] .practice-description h3{font-size:25px}.practice-description p{font-size:16px}html[lang=ar] .practice-description p{font-size:19px}.practice-options button{gap:12px;padding:18px 16px}.practice-options strong{font-size:18px}.cards .card:not(:first-child){display:block}.cards .card:not(:first-child) .card-fr{display:none}.cards .card:first-child .card-fr{aspect-ratio:1.4}.about-chapter{gap:32px}.about-photo{height:400px}.model-figure figcaption{flex-direction:column;gap:4px}.site-header .brand-name{font-size:15px}}
@media(max-width:820px){:root{--space-section:64px}.nav,.nav.stuck{height:76px}.page-progress{top:74px}.nav-links{padding:20px var(--pad)!important;gap:6px}.nav-links .nav-link{font-size:22px!important;min-height:54px;padding:12px 16px}.nav-link:after{inset-inline:16px}.agha-hero{padding-top:108px;gap:24px}.hero-copy .h-hero{font-size:43px}html[lang=ar] .hero-copy .h-hero{font-size:46px}.hero-copy .hero-sub{font-size:17px}html[lang=ar] .hero-copy .hero-sub{font-size:19px}.portrait-panel,html[lang=ar] .portrait-panel{height:460px}.hero-actions{gap:8px}.hero-expertise{font-size:9px;gap:6px}.primary-link{padding:14px 18px;font-size:14px}.hero-reader-note{font-size:12px}.practice-options button{display:flex}.practice-options small{display:none}.domain-number{margin:0}.practice-heading{grid-template-columns:1fr 1fr}.practice-heading h2{font-size:36px}.practice-heading>p,html[lang=ar] .practice-heading>p{font-size:18px}.sec.model-chapter{grid-template-columns:1fr;gap:24px}.model-chapter>.sec-head{margin:0;grid-row:1}.model-chapter>.model-copy{grid-column:1;grid-row:2}.model-chapter>.model-figure{grid-column:1;grid-row:3}.model-figure>.model-study-image,html[lang=ar] .model-figure>.model-study-image{aspect-ratio:1.55}.model-chapter .model-copy .body-lg{max-width:60ch}.model-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.model-principles li{gap:10px}.model-figure figcaption{flex-direction:row}.cur{gap:0 20px}.les h3{font-size:17px}.course-cards{grid-template-columns:1fr}.course-cards article{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.course-cards .course-top{grid-column:1/-1;margin-bottom:8px}.course-cards h3{margin:0;grid-column:1;grid-row:2/4}.course-cards p{margin:0;grid-column:2}.course-cards a{grid-column:2;margin-top:4px}.template-grid{grid-template-columns:1fr 1fr}.template-grid>a:last-child{grid-column:span 2;grid-template-columns:60px 1fr}.template-grid>a:last-child p{grid-column:2}.journal-title,.cur-head,.radar-heading{grid-template-columns:1fr;gap:20px}.journal-title>p,.cur-head .body-lg,.radar-heading p{max-width:620px}.radar-rows>a{grid-template-columns:120px minmax(0,1fr) 24px;gap:20px}.radar-rows h3{grid-column:auto;font-size:20px}.radar-rows b{grid-column:auto;grid-row:auto}.paper .site-header nav a{padding:10px 14px;font-size:18px}}
@media(max-width:600px){:root{--pad:20px;--space-section:52px}.nav,.nav.stuck{height:72px;padding-inline:var(--pad);gap:10px}.page-progress{top:70px}.brand-name{font-size:14px}.brand-name>span{font-size:6px;letter-spacing:.65px}.brand-symbol{width:48px;height:48px}.brand-symbol img{width:238px!important;left:-14px;top:-19px}.studio-language{font-size:12px;padding-inline:10px}.nav-burger{width:44px;min-width:44px}.agha-hero{grid-template-columns:minmax(0,1fr);padding-top:104px;gap:24px}.hero-copy{padding:0}.hero-copy .eyebrow{font-size:11px!important;line-height:1.7;margin-bottom:16px}.agha-hero .hero-copy .h-hero{font-size:40px;line-height:1.13;letter-spacing:-1.5px;margin-bottom:20px}html[lang=ar] .agha-hero .hero-copy .h-hero{font-size:44px;line-height:1.25;letter-spacing:0}.hero-copy .hero-sub{font-size:17px;line-height:1.75;margin-bottom:20px}html[lang=ar] .hero-copy .hero-sub{font-size:20px;line-height:1.8}.hero-expertise{font-size:9px;gap:7px;margin-bottom:20px}.hero-actions .primary-link{width:auto;flex:1;font-size:15px;min-height:50px}.hero-copy .plain-link{font-size:14px}.hero-reader-note{font-size:12px;line-height:1.6;margin-top:20px}.portrait-panel,html[lang=ar] .portrait-panel{height:320px;border-radius:72px 6px 6px 6px;grid-column:1}.portrait-name strong{font-size:58px}.portrait-name{left:24px;bottom:24px}.portrait-name small{font-size:10px}.hero-baseline{font-size:11px;padding:12px 0;min-height:60px;gap:12px}.hero-baseline a{font-size:12px;max-width:none}.hero-baseline>span:first-child{display:none}.hero-baseline>span:last-child{display:block}.practice-heading{grid-template-columns:1fr;gap:20px;margin-bottom:24px}.practice-heading h2,.display.h-sec{font-size:34px;line-height:1.2;letter-spacing:-1px}html[lang=ar] .practice-heading h2{font-size:38px}.practice-heading>p,html[lang=ar] .practice-heading>p{font-size:19px;line-height:1.75}.practice-stage{grid-template-columns:1fr}.practice-visual{aspect-ratio:1.2}.practice-description,html[dir=rtl] .practice-description{padding:24px;border-top:1px solid var(--line);min-height:0;gap:16px}.practice-description h3{font-size:25px}.practice-description p{max-width:none;font-size:17px}.practice-description>a{font-size:14px}.practice-options button{display:block;padding:16px 8px;min-height:98px}.domain-number{display:block;margin-bottom:8px;font-size:11px}.domain-arrow{display:none}.practice-options strong{font-size:14px}html[lang=ar] .practice-options strong{font-size:18px}.practice-image-note,html[lang=ar] .practice-image-note{font-size:10px}.sec-head{gap:12px;margin-bottom:24px}.sec-head .k{font-size:11px}.sec.model-chapter{gap:24px}.model-chapter .model-copy h2{font-size:36px}.model-chapter .model-copy .body-lg{font-size:17px}.model-principles{display:block;margin-top:20px}.model-principles li{gap:16px}.model-figure>.model-study-image,html[lang=ar] .model-figure>.model-study-image{aspect-ratio:1.12}.model-figure figcaption{padding:14px;flex-direction:column;font-size:10px;gap:4px}.cards{grid-template-columns:1fr;gap:28px}.cards .card:first-child{grid-row:auto}.cards .card:first-child .card-fr{aspect-ratio:1.65}.cards .card:not(:first-child){display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 16px;padding-bottom:24px}.cards .card:not(:first-child) .card-fr{display:block;grid-row:1/3}.cards .card:not(:first-child) p{grid-column:1/-1;margin-top:12px;font-size:16px}.cards .card:not(:first-child) h3{font-size:19px;line-height:1.5}.cards .card:not(:first-child) .card-lab{display:none}.card h3{font-size:23px}html[lang=ar] .card h3{font-size:24px}html[lang=ar] .cards .card:not(:first-child) h3{font-size:21px}.card p,html[lang=ar] .card p{font-size:18px;line-height:1.8}.card-meta{font-size:12px}.cur{grid-template-columns:1fr;gap:0}.les{min-height:76px;gap:12px;padding:18px 8px}.les h3{font-size:18px}.learning-summary{gap:20px;justify-content:space-between;padding:20px 0}.learning-summary>span{font-size:11px;max-width:32%}.learning-summary b{font-size:26px}.academy-note{font-size:14px}.template-grid{grid-template-columns:1fr;gap:16px}.template-grid>a{padding:24px}.template-grid>a:last-child{grid-column:auto;display:block}.template-grid>a:last-child .template-format{margin-bottom:20px}.template-grid>a:last-child h3{margin-bottom:12px}.course-cards article{display:flex;padding:24px;gap:0}.course-cards .course-top{margin-bottom:20px}.course-cards h3{font-size:25px;margin-bottom:16px}.course-cards p{margin-bottom:20px}.radar-rows>a{grid-template-columns:1fr 24px;gap:10px;padding:20px 0}.radar-rows>a>span{grid-column:1;font-size:11px}.radar-rows h3{grid-column:1;font-size:20px}.radar-rows b{grid-column:2;grid-row:1/3}.about-chapter{grid-template-columns:1fr;gap:32px}.about-photo{height:340px}.about-copy .body-lg{font-size:18px}html[lang=ar] .about-copy .body-lg{font-size:20px}.foot{padding-top:36px}.footer-invitation>a{font-size:34px;letter-spacing:-.8px}.foot-base{gap:8px 20px;flex-wrap:wrap;font-size:11px}.foot-base a,.foot-base button{font-size:12px}.paper .site-header{padding:10px 16px;gap:8px;min-height:72px}.site-header .brand-name{font-size:14px}.site-header .brand-symbol{width:48px}.reading-heading .eyebrow{font-size:12px;line-height:1.8}}
@media(max-width:359px){:root{--pad:16px}.brand-name{font-size:12px}.brand-name>span{display:none}.nav{gap:6px}.brand-system{gap:4px}.brand-symbol{width:44px}.studio-language{padding:8px;font-size:11px}.agha-hero .hero-copy .h-hero{font-size:36px}html[lang=ar] .agha-hero .hero-copy .h-hero{font-size:40px}.hero-expertise{font-size:8px;gap:5px}.hero-actions .primary-link{width:100%;flex-basis:100%}.site-header .brand-name{font-size:12px}.paper .site-header{padding-inline:12px;gap:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.page-progress{display:none}.model-figure>.model-study-image{transform:none!important}}
/* Final phone-menu and author-portrait review. */
.about-chapter{grid-template-columns:1fr 1.08fr;gap:64px}.about-photo{height:560px;background:#ede2d4}.about-photo img{filter:none;object-position:63% 35%}.about-copy .display.h-sec{font-size:clamp(38px,4vw,58px);line-height:1.1;letter-spacing:-2px;margin-bottom:24px}.about-lead{font-size:22px;line-height:1.55;font-weight:500;color:#414343;margin:0 0 24px}.about-copy .body-lg{font-size:17px;line-height:1.85;margin:0 0 18px}.about-copy .plain-link{gap:24px;font-size:15px}.about-photo>span{font-size:16px;letter-spacing:.5px;bottom:28px;left:28px}.about-photo>span b{font-size:11px;letter-spacing:1px}
@media(max-width:820px){.nav-burger{margin-inline-start:auto}.nav #navlinks{position:fixed;top:76px;bottom:auto!important;left:0!important;right:0!important;height:auto!important;min-height:0;max-height:calc(100svh - 76px);width:auto!important;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:16px 24px 24px!important;margin:0!important;overflow:auto;background:#fff!important;border-bottom:1px solid #D7DADA!important;transform:translateY(-8px)!important;opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s;z-index:100}.nav.menu-open #navlinks{opacity:1!important;transform:none!important;visibility:visible;pointer-events:auto}.nav #navlinks .nav-link{width:100%;font-size:20px!important;min-height:52px}.about-chapter{gap:32px}.about-photo{height:480px}.about-copy .display.h-sec{font-size:38px}.about-lead{font-size:19px}}
@media(max-width:600px){.nav #navlinks{top:72px;max-height:calc(100svh - 72px)}.nav .brand-name{font-size:16px}.nav .brand-name>span{display:block;font-size:6.5px;letter-spacing:.8px}.nav .brand-symbol{width:56px;height:52px}.nav .brand-symbol img{width:260px!important;left:-15px;top:-21px}.about-chapter{grid-template-columns:1fr}.about-photo{height:370px}.about-copy .display.h-sec{font-size:38px;letter-spacing:-1.4px}.about-lead{font-size:20px}.about-copy .body-lg{font-size:17px}.about-photo>span{font-size:15px;left:24px;bottom:24px}}
@media(max-width:359px){.nav .brand-name{font-size:15px}.nav .brand-name>span{font-size:6px}.nav .brand-symbol{width:50px}}
@media(max-width:600px){.practice-section{display:flex;flex-direction:column}.practice-heading{order:0}.practice-options{order:1;width:100%;border:1px solid var(--line);border-radius:6px 6px 0 0}.practice-stage{order:2;border-top:0;border-radius:0 0 6px 6px;width:100%}.practice-options button{min-height:84px}.practice-description{min-height:0}}
@media(max-width:820px){.site-header #navigation.open{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;padding:16px 0}.site-header #navigation.open a{justify-content:flex-start;min-height:52px;font-size:20px;border-bottom:1px solid #4143430c}.site-header .header-actions{margin-inline-start:auto}}
@media(max-width:600px){.site-header .brand-name{font-size:16px}.site-header .brand-name>span{display:block;font-size:6.5px;letter-spacing:.8px}.site-header .brand-symbol{width:56px;height:52px}.site-header .brand-symbol img{width:260px!important;left:-15px;top:-21px}}
@media(max-width:359px){.site-header .brand-name{font-size:15px}.site-header .brand-name>span{font-size:6px}.site-header .brand-symbol{width:50px}}
@media(min-width:821px){.site-header,.paper .site-header{padding:10px var(--pad);min-height:88px;gap:20px}.site-header nav{margin-inline-start:auto}.site-header .header-actions{margin-inline-start:0}}
@media(max-width:820px){html{scroll-padding-top:76px}}@media(max-width:600px){html{scroll-padding-top:72px}}


/* Source: knowledge-layout.css */
.knowledge-subhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 24px}.knowledge-subhead h3{font-size:19px;line-height:1.4;letter-spacing:-.025em;font-weight:550;margin:0;color:#414343}.knowledge-subhead p{font-size:14px;line-height:1.6;margin:0;color:#626969}.foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.foundation-card{display:flex;flex-direction:column;min-width:0;border:1px solid #d9dddd;border-radius:4px;background:#fff;color:#414343;text-decoration:none;overflow:hidden;transition:border-color .25s,transform .25s}.foundation-art{position:relative;min-height:210px;aspect-ratio:1.85;background:#eceeee;padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.foundation-card:first-child .foundation-art{background:#fcf1e5}.foundation-art:after{content:"";position:absolute;right:-44px;top:-76px;width:220px;height:220px;border:1px solid #d6dada;border-radius:50%;transition:transform .6s}.foundation-art>span{font-size:10px;letter-spacing:.11em;line-height:1.6}.foundation-art>b{font-size:clamp(46px,5vw,72px);line-height:1.1;letter-spacing:-.065em;font-weight:600;z-index:1}.foundation-art>small{position:absolute;right:22px;bottom:25px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.12em;color:#626969}.foundation-body{display:flex;flex:1;flex-direction:column;padding:26px}.foundation-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.5;color:#626969}.foundation-body h3{font-size:clamp(20px,1.65vw,24px);font-weight:500;line-height:1.45;letter-spacing:-.035em;margin:20px 0 12px}.foundation-body p{font-size:15px;line-height:1.85;color:#626969;margin:0 0 28px}.foundation-action{display:flex;justify-content:space-between;gap:16px;margin-top:auto;border-top:1px solid #e0e3e3;padding-top:19px;font-size:13px;line-height:1.6}.foundation-action>span{transition:transform .25s;color:#ac4509}.foundation-card:hover{border-color:#f47721;transform:translateY(-4px)}.foundation-card:hover .foundation-art:after{transform:translate(-10px,10px)}.foundation-card:hover .foundation-action>span{transform:translate(3px,-3px)}.foundation-card:focus-visible{outline:3px solid #ac4509;outline-offset:5px}.knowledge-practice-heading{margin-top:54px;padding-top:32px;border-top:1px solid #d9dddd}.journal .journal-title h2 span{color:#f47721}.journal .cards{row-gap:42px}.journal .card-fr.has-diagram{background:#f7f7f5!important;aspect-ratio:1.6;overflow:hidden}.journal .card-fr.has-diagram:before,.journal .card-fr.has-diagram:after{display:none!important}.card-fr.has-diagram img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .5s}.card-fr.has-diagram:hover img{transform:scale(1.025)}.card-fr .card-ar{z-index:2}.library-all{margin-top:32px;display:inline-block}@media(max-width:760px){.foundation-grid{grid-template-columns:1fr;gap:22px}.foundation-art{min-height:170px;aspect-ratio:2.2}.foundation-art>b{font-size:64px}.foundation-body{padding:24px}.foundation-body h3{font-size:23px}.knowledge-subhead{display:block}.knowledge-subhead p{margin-top:8px}.knowledge-practice-heading{margin-top:40px}}@media(prefers-reduced-motion:reduce){.foundation-card,.foundation-art:after,.foundation-action>span,.card-fr.has-diagram img{transition:none}.foundation-card:hover{transform:none}}

.foundation-art.has-cover{position:relative;min-width:0;overflow:hidden!important;contain:paint;isolation:isolate}
.foundation-art.has-cover>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}


.foundation-art.has-cover>span,.foundation-art.has-cover>b,.foundation-art.has-cover>small{display:none!important}


/* Latest articles: one lead, two stacked stories, then an aligned pair. */
.journal .latest-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:30px 40px;align-items:start}
.journal .latest-card{display:grid;grid-template-columns:148px minmax(0,1fr);gap:22px;min-width:0;border-bottom:1px solid #d9dddd;padding-bottom:28px}
.journal .latest-card:first-child{grid-row:span 2;display:block;border-bottom:0;padding-bottom:0}
.journal .latest-card:nth-child(n+4){border-top:1px solid #d9dddd;border-bottom:0;padding-top:30px;padding-bottom:0;grid-template-columns:148px minmax(0,1fr)}
.journal .latest-image{display:block;position:relative;aspect-ratio:1;overflow:hidden;border:1px solid #d9dddd;border-radius:5px;background:#f5f6f4}
.journal .latest-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.journal .latest-card:first-child .latest-image{aspect-ratio:1.6;margin-bottom:26px}
.journal .latest-image:hover img{transform:scale(1.035)}
.journal .latest-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:10px;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:#646c6c;margin:0 0 12px}
.journal .latest-card h3{font-weight:500;font-size:clamp(19px,1.55vw,23px);line-height:1.4;letter-spacing:-.025em;margin:0 0 12px;color:#414343}
.journal .latest-card h3 a{font:inherit;text-decoration:none;color:inherit}
.journal .latest-card h3 a:hover{color:#a84713}
.journal .latest-card p{font-size:16px;line-height:1.8;color:#626969;margin:0}
.journal .latest-card:first-child h3{font-size:25px}
.journal .latest-image:focus-visible,.journal .latest-card h3 a:focus-visible{outline:2px solid #a84713;outline-offset:5px}
.journal .library-all{display:flex;width:fit-content;gap:28px;align-items:center;margin:38px auto 0;padding:12px 0;border-bottom:1px solid #a84713;color:#a84713;font-size:15px}
@media(max-width:1000px){.journal .latest-grid{gap:28px}.journal .latest-card,.journal .latest-card:nth-child(n+4){grid-template-columns:108px minmax(0,1fr);gap:16px}.journal .latest-card p{font-size:14px}.journal .latest-meta{font-size:9px;letter-spacing:.07em}}
@media(max-width:760px){.journal .latest-grid{grid-template-columns:1fr;gap:26px}.journal .latest-card:first-child{grid-row:auto;border-bottom:1px solid #d9dddd;padding-bottom:26px}.journal .latest-card:nth-child(n+4){border-top:0;border-bottom:1px solid #d9dddd;padding-top:0;padding-bottom:26px}.journal .latest-card:last-child{border-bottom:0}.journal .latest-card h3{font-size:19px}.journal .latest-card:first-child h3{font-size:24px}.journal .latest-meta{letter-spacing:.04em}.journal .latest-card:first-child .latest-image{margin-bottom:20px}.journal .latest-card p{font-size:14px;line-height:1.7}}
@media(prefers-reduced-motion:reduce){.journal .latest-image img{transition:none}.journal .latest-image:hover img{transform:none}}

@media(max-width:760px){.journal .latest-card:not(:first-child){column-gap:16px;row-gap:10px}.journal .latest-card:not(:first-child) .latest-body{display:contents}.journal .latest-card:not(:first-child) .latest-image{grid-column:1;grid-row:1 / span 2}.journal .latest-card:not(:first-child) .latest-meta{grid-column:2;margin-bottom:0;align-self:end}.journal .latest-card:not(:first-child) h3{grid-column:2;margin-bottom:0}.journal .latest-card:not(:first-child) p{grid-column:1 / -1;margin-top:4px}}