/* ============================================================================
   INHERITING ISLAM — inheritingislam.com
   "Atelier": dark first, the artwork is the argument. Full-bleed hero imagery
   beside type on solid ground — never over it — pine-black surfaces, gold used
   as light rather than as a rule. Typography is the brand sheet's own,
   Cormorant Garamond and Source Sans 3, with Amiri for Arabic.

   One stylesheet, one font sheet, zero third-party requests.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens  */
/* Dark first: the default surface is pine-black and the light theme is a
   parchment gallery. Both are written as attribute selectors so neither can
   win on specificity by accident. */
:root{
  --brand-pine:#183C34;
  --brand-gold:#B08D57;
  --brand-ivory:#F5F0E6;
  --stone:#8C8F94;
  --sand:#DAD8D2;
  --wash:rgba(29,64,52,.05);
  --f-ar:'Amiri', 'Geeza Pro', serif;
}

:root,:root[data-theme="dark"]{
  color-scheme:dark;

  --paper:#0C1310;
  --paper-2:#121B17;
  --paper-3:#18231E;

  --ink:#F2EDE1;
  --ink-soft:#B3BDB4;
  --ink-faint:#8E9B92;

  --pine:#9CC9B3;
  --pine-2:#B6DAC6;
  --mark:#F2EDE1;
  --gold:#D9B478;
  --gold-line:#B08D57;
  --clay:#E08E72;
  --lapis:#9DB2E0;

  --line:rgba(242,237,225,.16);
  --line-soft:rgba(242,237,225,.08);
  --gold-wash:rgba(176,141,87,.16);

  --cta-bg:#B08D57;
  --cta-fg:#0C1310;
  --cta-bg-h:#C9A472;
  --ring:#D9B478;

  --shadow:0 2px 2px rgba(0,0,0,.5), 0 30px 70px -40px rgba(0,0,0,1);
  --shadow-lift:0 2px 2px rgba(0,0,0,.6), 0 44px 90px -46px rgba(0,0,0,1);

  --f-display:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --f-body:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'Source Sans 3', ui-monospace, Menlo, monospace;

  --gutter:clamp(20px,4vw,72px);
  --radius:0px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --paper:#EFE9DC;
  --paper-2:#E6DECD;
  --paper-3:#DCD2BD;
  --ink:#14201B;
  --ink-soft:#46544B;
  --ink-faint:#4B564C;
  --pine:#183C34;
  --mark:#183C34;
  --gold:#674B13;
  --gold-line:#A07C3E;
  --clay:#7C3327;
  --line:rgba(20,32,27,.18);
  --line-soft:rgba(20,32,27,.09);
  --gold-wash:rgba(160,124,62,.14);
  --cta-bg:#183C34;
  --cta-fg:#EFE9DC;
  --cta-bg-h:#0F2A24;
  --ring:#183C34;
  --shadow:0 2px 2px rgba(20,32,27,.05), 0 26px 56px -38px rgba(20,32,27,.6);
  --shadow-lift:0 2px 2px rgba(20,32,27,.06), 0 40px 84px -44px rgba(20,32,27,.7);
}

/* ---------------------------------------------------------------- base    */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.965rem + .16vw,1.075rem);
  line-height:1.68;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.nav-lock{overflow:hidden}

img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--gold-wash);color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:0}

:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-70px;left:16px;z-index:300;
  background:var(--ink);color:var(--paper);padding:.7em 1.1em;
  border-radius:var(--radius);text-decoration:none;font-weight:700;transition:top .2s
}
.skip:focus{top:16px}

/* ---------------------------------------------------------------- layout  */
/* Edge to edge. The canvas runs the full width of the screen; individual
   text blocks keep their own measure so lines never run past reading length. */
.wrap{max-width:none;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:960px}
.bleed{margin-inline:calc(-1 * var(--gutter))}
.band{padding-block:clamp(56px,8vw,116px)}
.band-tight{padding-block:clamp(40px,5.5vw,76px)}
.band-alt{background:var(--paper-2)}
.band-ink{background:var(--paper-3)}
section[id]{scroll-margin-top:96px}
.edge-top{border-top:1px solid var(--line)}

/* ---------------------------------------------------------------- type    */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2.35rem,1.3rem + 4.6vw,5.3rem);font-weight:400;letter-spacing:-.022em;line-height:1.02}
h2{font-size:clamp(1.85rem,1.25rem + 2.5vw,3.5rem);font-weight:400;letter-spacing:-.018em;line-height:1.08}
h3{font-size:clamp(1.22rem,1.08rem + .55vw,1.5rem);line-height:1.2}
h4{font-size:1.06rem;line-height:1.3}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--f-mono);font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.75em;margin:0 0 1.15rem;font-weight:400
}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor;flex:none;opacity:.8}
.eyebrow.plain::before{display:none}

.lede{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem);line-height:1.58;color:var(--ink-soft);max-width:56ch}
.measure{max-width:62ch}
.measure-tight{max-width:52ch}
.small{font-size:.88rem;line-height:1.6;color:var(--ink-soft)}
.tiny{font-size:.79rem;line-height:1.55;color:var(--ink-faint)}
.mono{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.gold{color:var(--gold)}
.pine{color:var(--pine)}
.clay{color:var(--clay)}
strong,b{font-weight:700}
.serif{font-family:var(--f-display)}

/* Arabic — sized up to sit optically with the Latin, given the leading it needs */
.ar{font-family:var(--f-ar);font-size:1.18em;line-height:1.9;font-weight:400;letter-spacing:0}
.ar-lg{font-family:var(--f-ar);font-size:clamp(2rem,1.3rem + 2.6vw,3rem);line-height:1.75;display:block}
.translit{font-style:normal;color:var(--ink-soft)}

a.link{
  color:var(--ink);text-decoration:none;font-weight:500;
  background-image:linear-gradient(var(--gold-line),var(--gold-line));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:2px;transition:color .2s,background-size .2s
}
a.link:hover{color:var(--gold)}

/* ---------------------------------------------------------------- rules   */
.rule{display:flex;align-items:center;gap:16px;color:var(--gold-line)}
.rule::before,.rule::after{content:"";height:1px;flex:1;background:currentColor;opacity:.45}
.rule svg{width:18px;height:18px;flex:none;opacity:.9}
.rule.left::before{display:none}

/* ---------------------------------------------------------------- buttons */
.btn{
  font-family:var(--f-body);font-weight:700;font-size:.955rem;letter-spacing:.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.88em 1.55em;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .22s}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--cta-bg-h)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--gold-line);color:var(--gold)}
.btn-sm{padding:.55em 1em;font-size:.85rem}
.btn-block{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------------------------------------------------------------- pills   */
.pill{
  font-family:var(--f-mono);font-size:.635rem;letter-spacing:.17em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
  padding:.42em .72em;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);line-height:1
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;opacity:.9}
.pill.live{color:var(--pine);border-color:color-mix(in srgb,var(--pine) 38%,transparent)}
.pill.dev{color:var(--gold);border-color:color-mix(in srgb,var(--gold-line) 46%,transparent)}
.pill.beta{color:var(--lapis);border-color:color-mix(in srgb,var(--lapis) 38%,transparent)}
.pill.concept{color:var(--ink-faint)}
/* No longer being built. Struck through rather than removed, because saying
   what you stopped is worth more than quietly deleting it. */
.pill.stopped{color:var(--ink-faint);text-decoration:line-through;text-decoration-thickness:1px}
.pill.stopped::before{display:none}
/* Real code, nobody on it now, and we intend to come back. A distinct state
   from stopped, and only honest if it is defined — see /apps/. */
.pill.shelf{color:var(--ink-faint);border-style:dashed}
.pill.shelf::before{background:none;border:1px solid currentColor;transform:rotate(45deg);border-radius:0}
.pill.plain::before{display:none}

/* ---------------------------------------------------------------- header  */
#header{
  position:sticky;top:0;z-index:120;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s
}
#header.is-stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--paper) 96%,transparent)}
.hbar{display:flex;align-items:center;gap:18px;height:76px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand .mark{width:68px;height:33px;flex:none}
@media (max-width:560px){.brand .mark{width:56px;height:27px}}
.brand .wm{display:block;font-family:var(--f-display);font-weight:600;font-size:1.36rem;letter-spacing:-.014em;line-height:1.05}
.brand .sub{
  display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-top:4px
}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav a{
  font-size:.925rem;text-decoration:none;color:var(--ink-soft);position:relative;
  padding-block:6px;transition:color .2s
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold-line);transition:right .25s
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.tools{display:flex;align-items:center;gap:8px}
.iconbtn{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s
}
.iconbtn:hover{border-color:var(--gold-line);color:var(--gold)}
.iconbtn svg{width:18px;height:18px}
:root[data-theme="dark"] .ic-moon{display:none}
:root:not([data-theme="dark"]) .ic-sun{display:none}
#navToggle{display:none}
#navToggle .ic-x{display:none}
#navToggle[aria-expanded="true"] .ic-menu{display:none}
#navToggle[aria-expanded="true"] .ic-x{display:block}
.hcta{display:inline-flex}

#mobileNav{
  position:fixed;inset:76px 0 0;z-index:110;background:var(--paper);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .26s,transform .26s;
  padding:22px clamp(20px,6vw,40px) 40px;overflow:auto;
  display:flex;flex-direction:column
}
#mobileNav.open{opacity:1;transform:none;pointer-events:auto}
#mobileNav a.mrow{
  display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-weight:600;font-size:1.5rem;letter-spacing:-.015em;
  padding:15px 0;border-bottom:1px solid var(--line-soft)
}
#mobileNav a.mrow .vb{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);flex:none;width:6.6em
}
#mobileNav .mcta{margin-top:26px}
#mobileNav .mfoot{margin-top:auto;padding-top:28px;color:var(--ink-soft);font-size:.88rem}

@media (max-width:1000px){
  .nav{display:none}
  #navToggle{display:inline-flex}
}
@media (max-width:560px){
  .hcta{display:none}
  .brand .sub{display:none}
}

/* ---------------------------------------------------------------- hero    */
.hero{padding-block:clamp(30px,3.6vw,58px) clamp(38px,5vw,76px)}
.hero h1{margin:0 0 .42em;max-width:16ch}
.hero .lede{margin-bottom:2.1em;max-width:52ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.hero-note{
  margin-top:1.6em;padding-top:1.2em;border-top:1px solid var(--line-soft);
  font-size:.86rem;color:var(--ink-soft);max-width:46ch
}
.hero-note b{color:var(--ink);font-weight:700}

/* hero artwork + its caption plate */
.hero-art{margin:0;max-width:none;display:flex;flex-direction:column}
.hero-art .frame{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow-lift);position:relative
}
.hero-art .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(176,141,87,.28)
}
.hero-art img{width:100%;height:auto;display:block}
.hero-art figcaption{
  border:1px solid var(--line);border-top:0;background:var(--paper-2);
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,24px);
  border-radius:0 0 var(--radius) var(--radius)
}
.band-alt .hero-art figcaption{background:var(--paper)}
.hero-art .ar{font-size:1.5rem;color:var(--ink);line-height:1.4}
.hero-art .gloss{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);display:block;margin-top:.15em
}
.hero-art .say{
  margin:.9em 0 0;padding-top:.9em;border-top:1px solid var(--line-soft);
  font-size:.93rem;color:var(--ink-soft);max-width:46ch
}
.hero-art .say b{color:var(--ink);font-weight:600}
@media (max-width:900px){.hero-art{max-width:560px}}

/* the thesis plate — Arabic set properly, not dropped in */
.plate-thesis{
  border:1px solid var(--line);background:var(--paper-2);padding:clamp(22px,3vw,30px);
  position:relative;border-radius:var(--radius)
}
.plate-thesis::after{
  content:"";position:absolute;inset:7px;border:1px solid var(--gold-line);opacity:.32;
  pointer-events:none;border-radius:1px
}
.plate-thesis .ar-lg{color:var(--ink);margin-bottom:.1em}
.plate-thesis .gloss{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.plate-thesis{max-width:540px;margin-left:auto}
.plate-thesis .say{max-width:46ch;margin-top:1.1em;padding-top:1.1em;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink-soft)}
.plate-thesis .say b{color:var(--ink);font-weight:500;font-family:var(--f-display);font-size:1.05rem}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .plate-thesis{max-width:420px}
}

/* ---------------------------------------------------------------- heads   */
.shead{margin-bottom:clamp(30px,4.5vw,52px);max-width:var(--maxw)}
.shead h2{max-width:20ch}
.shead .lede{margin-top:.85em}
.shead-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,4vw,54px);align-items:end}
@media (max-width:820px){.shead-split{grid-template-columns:1fr;gap:16px}}

/* ---------------------------------------------------------------- spine   */
/* received · lived · passed on — the organizing device, not decoration */
.spine{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(26px,4vw,44px)
}
.spine div{
  padding:16px 4px 15px;position:relative;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center
}
.spine div + div{border-left:1px solid var(--line-soft)}
.spine div::before{
  content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  background:var(--paper);border:1px solid var(--gold-line);transform:rotate(45deg)
}
.spine div b{display:block;color:var(--gold);font-weight:400}
@media (max-width:600px){
  .spine div{font-size:.62rem;letter-spacing:.13em;padding-inline:2px}
}

/* ---------------------------------------------------------------- arms    */
.arms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
@media (max-width:800px){.arms{grid-template-columns:1fr}}
.arm{
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  padding:clamp(22px,3vw,30px);position:relative;
  transition:border-color .25s,transform .25s,box-shadow .25s,background-color .25s
}
.arm:hover{border-color:var(--gold-line);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.band-alt .arm{background:var(--paper)}
.arm .top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.arm .verb{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.arm h3{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;font-size:1.55rem;font-weight:600}
.arm h3 .ar{font-size:1.02em;color:var(--ink-soft)}
.arm p{color:var(--ink-soft);font-size:.965rem;margin:0}
.arm .go{
  margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:.5em;
  font-weight:700;font-size:.92rem;color:var(--ink)
}
.arm .go svg{width:1em;height:1em;transition:transform .25s;color:var(--gold)}
.arm:hover .go svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- prose   */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,38px)}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,52px)}
@media (max-width:860px){.cols{grid-template-columns:1fr;gap:26px}.cols-2{grid-template-columns:1fr;gap:30px}}
.col h3{margin-bottom:.5em}
.col p{color:var(--ink-soft);font-size:.97rem;margin:0}
.col .n{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;color:var(--gold);
  display:block;margin-bottom:1em
}

/* numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.steps li{
  display:grid;grid-template-columns:3.4rem 1fr;gap:clamp(14px,2.5vw,28px);
  padding:22px 0;border-bottom:1px solid var(--line-soft);align-items:start
}
.steps li .num{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--gold);padding-top:.35em}
.steps li h3{font-size:1.18rem;margin-bottom:.3em}
.steps li p{color:var(--ink-soft);font-size:.955rem;margin:0}
@media (max-width:520px){.steps li{grid-template-columns:1fr;gap:6px}}

/* fact list with hairline checks */
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:.97rem
}
.facts li svg{width:15px;height:15px;color:var(--gold);flex:none;margin-top:.42em}
.facts li b{font-weight:700}

/* ---------------------------------------------------------------- figures */
figure{margin:0}
.figure{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);
  padding:10px;box-shadow:var(--shadow)
}
.figure img{border:1px solid var(--line-soft);border-radius:1px;width:100%}
.figure figcaption{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:11px;padding-inline:4px;line-height:1.75;text-align:center
}
.figure-pair{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(12px,2vw,20px);align-items:start}
@media (max-width:720px){.figure-pair{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- ledger  */
/* apps + anything that reads as an honest index */
.ledger{border-top:1px solid var(--line)}
.lrow{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) auto;
  gap:clamp(12px,2.5vw,32px);align-items:start;
  padding:24px 0;border-bottom:1px solid var(--line-soft)
}
.lrow .name{display:flex;align-items:center;gap:.55em;flex-wrap:wrap;font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.15}
.lrow .name .tile{margin-right:.35em}
.lrow .name .ar{font-size:.92em;color:var(--ink-soft)}
.lrow .what{color:var(--ink-soft);font-size:.955rem}
.lrow .what .kind{
  display:block;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.45em
}
.lrow .meta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right}
.lrow.is-concept{opacity:.7}
@media (max-width:820px){
  .lrow{grid-template-columns:1fr;gap:8px}
  .lrow .meta{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:12px;margin-top:4px}
}

/* ---------------------------------------------------------------- pricing */
.rate{border-top:1px solid var(--line)}
.rrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);
  padding:24px 0;border-bottom:1px solid var(--line-soft);align-items:baseline
}
.rrow .lbl h3{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;margin-bottom:.35em}
.rrow .lbl p{color:var(--ink-soft);font-size:.95rem;margin:0;max-width:54ch}
.rrow .amt{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  white-space:nowrap;text-align:right;letter-spacing:-.01em
}
.rrow .amt .per{font-family:var(--f-body);font-weight:400;font-size:.8rem;color:var(--ink-faint);letter-spacing:0}
.rrow .amt .was{
  display:block;font-family:var(--f-body);font-size:.82rem;font-weight:400;
  color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--clay);
  text-decoration-thickness:1.5px;margin-bottom:.15em;letter-spacing:0
}
.rrow.gift{background:var(--gold-wash)}
.rrow.gift .amt{color:var(--ink)}
@media (max-width:600px){
  .rrow{grid-template-columns:1fr;gap:10px}
  .rrow .amt{text-align:left}
  .rrow .amt .was{display:inline-block;margin-right:.6em;margin-bottom:0}
}
.care{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.care div{background:var(--paper);padding:20px 18px}
.care .plan{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.7em}
.care .amt{font-family:var(--f-display);font-weight:600;font-size:1.35rem;line-height:1;margin-bottom:.55em}
.care .amt span{font-family:var(--f-body);font-weight:400;font-size:.78rem;color:var(--ink-faint)}
.care p{font-size:.88rem;color:var(--ink-soft);margin:0}
.band-alt .care div{background:var(--paper)}
@media (max-width:860px){.care{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.care{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- quote   */
.quote{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,1.1rem + 1.5vw,2.05rem);line-height:1.34;letter-spacing:-.012em;
  margin:0;max-width:24ch
}
.founder{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(26px,5vw,64px);align-items:start}
@media (max-width:860px){.founder{grid-template-columns:1fr;gap:26px}}
.founder .body p{color:var(--ink-soft);font-size:1.02rem}
.founder .body p:first-child{color:var(--ink)}
.sig{
  margin-top:1.7em;padding-top:1.2em;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap
}
.sig .nm{font-family:var(--f-display);font-weight:600;font-size:1.08rem}
.sig .rl{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}

/* an illuminated opening letter, once per site */
.dropcap::first-letter{
  font-family:var(--f-display);font-weight:600;float:left;
  font-size:3.5em;line-height:.82;padding:.06em .12em 0 0;color:var(--gold)
}

/* ---------------------------------------------------------------- qaidah  */
/* The first lessons, set as type rather than scanned from someone's book. */
.huruf{
  direction:rtl;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden
}
.huruf span{
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-ar);font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);line-height:1;
  padding:.62em .2em;color:var(--ink);transition:background-color .25s,color .25s
}
.band-alt .huruf span{background:var(--paper)}
.huruf span:hover{background:var(--gold-wash);color:var(--gold)}
@media (max-width:520px){.huruf{grid-template-columns:repeat(4,minmax(0,1fr))}}

.shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shapes div{background:var(--paper);padding:18px 8px;text-align:center}
.band-alt .shapes div{background:var(--paper)}
.shapes .gl{
  font-family:var(--f-ar);font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);line-height:1.5;
  display:block;color:var(--ink);direction:rtl
}
.shapes .lb{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-top:.5em
}
.shapes .lb b{display:block;font-weight:400;color:var(--gold);letter-spacing:.1em;margin-top:.25em}
@media (max-width:480px){.shapes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- notes   */
.note{
  border:1px solid var(--line);border-left:2px solid var(--gold-line);
  background:var(--paper-2);padding:clamp(18px,2.5vw,24px);border-radius:var(--radius)
}
.note h3{font-size:1.08rem;margin-bottom:.45em}
.note p{color:var(--ink-soft);font-size:.94rem;margin:0}
.note p + p{margin-top:.7em}
.band-alt .note{background:var(--paper)}

.slot{
  border:1px dashed var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,30px);
  color:var(--ink-faint);display:flex;flex-direction:column;gap:10px;justify-content:center
}
.slot .mono{color:var(--ink-faint)}
.slot p{margin:0;font-size:.95rem}

/* ---------------------------------------------------------------- form    */
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label:not(.checkrow){font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.field label .req{color:var(--clay)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:.78em .9em;width:100%;transition:border-color .2s,background-color .2s
}
.band-alt .field input,.band-alt .field select,.band-alt .field textarea{background:var(--paper)}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-line);outline-offset:1px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4em}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.formnote{font-size:.88rem;color:var(--ink-soft);min-height:1.4em}
.formnote.ok{color:var(--pine)}

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:34px}}
.direct{list-style:none;margin:0;padding:0}
.direct li{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.direct li:first-child{border-top:1px solid var(--line)}
.direct .k{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.3em}
.direct .v{font-family:var(--f-display);font-weight:600;font-size:1.12rem;word-break:break-word}
.direct a{text-decoration:none}
.direct a:hover{color:var(--gold)}
.copybtn{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);
  padding:.4em .7em;cursor:pointer;margin-left:.6em;transition:border-color .2s,color .2s
}
.copybtn:hover{border-color:var(--gold-line);color:var(--gold)}

/* ---------------------------------------------------------------- cta band*/
.cta-band{border-top:1px solid var(--line);background:var(--paper-2)}
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center}
.cta-inner h2{max-width:18ch}
.cta-inner p{color:var(--ink-soft);margin-top:.7em;max-width:48ch}
@media (max-width:820px){.cta-inner{grid-template-columns:1fr;gap:22px}}

/* ---------------------------------------------------------------- footer  */
footer{border-top:1px solid var(--line);background:var(--paper);padding-block:clamp(44px,6vw,72px) 30px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.8fr));gap:clamp(24px,4vw,44px)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
.fcol h4{
  font-family:var(--f-mono);font-weight:400;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.1em
}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcol a{text-decoration:none;color:var(--ink-soft);font-size:.93rem;transition:color .2s}
.fcol a:hover{color:var(--ink)}
.fbrand p{color:var(--ink-soft);font-size:.93rem;margin-top:1em;max-width:34ch}
.fbot{
  margin-top:clamp(32px,5vw,56px);padding-top:22px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;
  font-size:.83rem;color:var(--ink-faint)
}
.fbot .vow{display:flex;align-items:center;gap:.55em}
.fbot .vow svg{width:14px;height:14px;color:var(--gold)}

/* ---------------------------------------------------------------- slots   */
/* Image slots. Each one already works — drop a file in and set --tex or the
   src, nothing else changes. See IMAGE-BRIEF.md for what belongs in each. */

/* A decorative texture behind a whole band. Never announced to screen readers. */
.textured{position:relative;isolation:isolate}
.textured::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--tex);background-size:cover;background-position:center;
  opacity:var(--tex-o,.55)
}
:root[data-theme="dark"] .textured::before{opacity:var(--tex-o-dark,.16)}

/* A framed piece of artwork sitting in a column. */
.art{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow)
}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.art-square{aspect-ratio:1}
.art-wide{aspect-ratio:16/9}

/* Small square art tile — arm cards and the apps ledger. */
.tile{
  width:56px;height:56px;flex:none;border-radius:var(--radius);
  border:1px solid var(--line);object-fit:cover;background:var(--paper-2)
}
.arm .tile{width:60px;height:60px;margin-bottom:2px}

/* The apps ledger carries real artwork now, so it gets a real column for it.
   Still an index rather than a showcase — the picture sits beside the honest
   status, it does not replace it. */
.lrow{grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,1.25fr) auto}
.lrow .plate{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper-2);aspect-ratio:1;box-shadow:var(--shadow)
}
.lrow .plate img{width:100%;height:100%;object-fit:cover;display:block}
.lrow .name .tile{display:none}
@media (max-width:1100px){
  .lrow{grid-template-columns:minmax(0,110px) minmax(0,1fr) auto}
  .lrow .what{grid-column:2 / -1}
}
@media (max-width:820px){
  .lrow{grid-template-columns:minmax(0,88px) minmax(0,1fr);gap:14px 18px}
  .lrow .plate{grid-row:span 2}
  .lrow .what,.lrow .meta{grid-column:2}
}
.lrow .name-with-tile{display:flex;align-items:center;gap:14px}

/* A full-bleed ornamental strip between bands. */
.strip{
  display:block;width:100%;height:clamp(46px,5vw,78px);object-fit:cover;
  border-block:1px solid var(--line)
}

/* ---------------------------------------------------------------- wide    */
/* Edge to edge means the grids get to breathe, and the measures get capped. */
.steps li div{max-width:74ch}
.facts li span{max-width:72ch}
.col p,.note p,.arm p,.rrow .lbl p,.lrow .what{max-width:60ch}

@media (min-width:1460px){
  .arms{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hero h1{max-width:15ch}
  .figure-pair{grid-template-columns:2fr 1fr}
}
@media (min-width:1900px){
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,64px)}
  .shead h2{max-width:24ch}
}

/* ---------------------------------------------------------------- reveal  */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------- utils   */
.stack-sm > * + *{margin-top:.85rem}
.stack > * + *{margin-top:1.5rem}
.stack-lg > * + *{margin-top:clamp(28px,4vw,48px)}
.center{text-align:center}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================================
   THE SHIPPED DESIGN — "Atelier"

   Where A treats images as evidence pinned to a page, B treats them as the room
   you are standing in: full-bleed heroes, text set over image, deep pine-black
   as the default surface, gold used as light rather than as a rule.
   Typography is the brand sheet's own — Cormorant Garamond and Source Sans 3.
   ========================================================================== */



/* B has a designed light mode too — parchment gallery instead of black box. */


/* ---- type: Cormorant is a display face, so it only ever gets display work -- */
body{font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.7;letter-spacing:0}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.006em}
h1{font-size:clamp(2.7rem,1.5rem + 4.6vw,5.6rem);font-weight:400;line-height:.96;letter-spacing:-.018em}
h2{font-size:clamp(2.1rem,1.4rem + 3.2vw,4.4rem);font-weight:400;line-height:1.02}
h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem);font-weight:600}
.lede{font-size:clamp(1.12rem,1.02rem + .5vw,1.42rem);line-height:1.55;max-width:50ch}
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:.72rem;letter-spacing:.26em}
.mono,.pill,.field label,.fcol h4,.lrow .what .kind,.figure figcaption,
.brand .sub,.arm .verb,.care .plan,.steps li .num,.col .n,.sig .rl,.direct .k{
  font-family:var(--f-body);font-weight:600
}
.pill{font-size:.66rem;letter-spacing:.19em;border-radius:0}
.btn{font-family:var(--f-body);font-weight:600;border-radius:0;letter-spacing:.02em}
.quote{font-weight:400;font-size:clamp(1.7rem,1.2rem + 2.4vw,3.1rem);line-height:1.18}

/* ---- the hero: a split, not an overlay --------------------------------- */
/* Text over photograph forces a choice nobody wins: scrim it enough to read
   and you have ruined the picture. So the picture keeps the right half at full
   strength, bleeding to the edge of the screen, and the type sits on solid
   ground. Both are at 100%. The seam between them is feathered, not cut. */
.hero{padding:0;position:relative}
.hero > .wrap{padding:0;max-width:none}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);gap:0;
  position:relative;align-items:center;
  min-height:min(calc(100vh - 76px), 820px);
  min-height:min(calc(100svh - 76px), 820px);
  border-bottom:1px solid var(--line)
}
.hero-grid > div:first-child{
  position:relative;z-index:2;
  padding:clamp(24px,3vw,48px) clamp(24px,2.6vw,44px) clamp(24px,3vw,48px) var(--gutter);
  max-width:none
}
.hero-art{
  position:relative;margin:0;max-width:none;align-self:stretch;
  display:block;z-index:1
}
.hero-art .frame{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* feather the seam only — the rest of the photograph is untouched */
.hero-art .frame::after{
  box-shadow:none;
  background:linear-gradient(90deg,
    var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 7%,
    transparent 17%)
}
.hero-art figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  border:0;border-top:1px solid var(--line);border-radius:0;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  padding:clamp(14px,1.7vw,20px) clamp(18px,2.2vw,28px)
}
.hero-art .say{max-width:64ch;border-top-color:var(--line-soft)}
.hero-note{border-top-color:var(--line-soft)}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-grid > div:first-child{padding:clamp(28px,5vw,44px) var(--gutter)}
  .hero-art{align-self:auto}
  .hero-art .frame{position:relative;aspect-ratio:16/10}
  .hero-art .frame::after{background:none}
  .hero-art figcaption{position:static;backdrop-filter:none;background:var(--paper-2)}
}
/* short laptop screens: the whole hero still lands above the fold */
@media (min-width:981px) and (max-height:960px){
  .hero-grid > div:first-child{padding-block:clamp(12px,1.6vw,24px)}
  .hero h1{font-size:clamp(2.3rem,1.1rem + 3.1vw,3.9rem)}
  .hero .lede{font-size:clamp(1.02rem,.98rem + .22vw,1.14rem)}
  .hero-note{margin-top:1.1em;padding-top:.85em}
}

/* ---- everything else gets quieter so the pictures carry ----------------- */
.band{padding-block:clamp(64px,9vw,140px)}
.arm,.note,.figure,.care,.slot,.field input,.field select,.field textarea,
.art,.hero-art .frame,.iconbtn{border-radius:0}
.arm{background:transparent;border-color:var(--line)}
.arm:hover{background:var(--paper-2);transform:none;box-shadow:none;border-color:var(--gold-line)}
.band-alt{background:var(--paper-2)}
.figure{background:transparent;padding:0;border:1px solid var(--line);box-shadow:var(--shadow-lift)}
.figure img{border:0}
.figure figcaption{padding:12px 14px;margin:0;text-align:left;border-top:1px solid var(--line)}
.plate-thesis{border-radius:0}
.plate-thesis::after{inset:0;border:0}
.spine div::before{background:var(--paper)}
.tile{border-radius:0}

/* section heads get the full Cormorant treatment */
.shead h2{max-width:16ch}
.eyebrow::before{width:28px}

/* the pricing table reads as a gallery label, not a spreadsheet */
.rrow .amt{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.4rem)}
.care .amt{font-family:var(--f-display);font-weight:400;font-size:1.9rem}
.rrow.gift{background:var(--gold-wash)}

footer{background:var(--paper-2)}

/* A checkbox that reads as an invitation, not a form field. The Qur'an page
   uses it so a student can ask about a sponsored seat with one tick instead of
   composing an email explaining themselves. */
.checkrow{
  display:flex;align-items:flex-start;gap:.7em;cursor:pointer;
  font-family:var(--f-body);font-size:.95rem;line-height:1.5;
  letter-spacing:0;text-transform:none;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:.85em 1em;transition:border-color .2s,background-color .2s
}
.checkrow:hover{border-color:var(--gold-line);background:var(--gold-wash)}
.checkrow input{width:1.05em;height:1.05em;flex:none;margin-top:.28em;accent-color:var(--gold-line)}
.checkrow:focus-within{border-color:var(--gold-line)}

/* ============================================================================
   ARM SECTIONS — shared chrome

   An "arm" is a section of the house with enough pages of its own to need
   local navigation: /quran/ and /studio/. These components were written for
   the Qur'an arm first and promoted here the moment the Studio needed them,
   so there is one implementation rather than two that drift.

   A page opts in with data-arm="…" on <body>. The arm's own stylesheet then
   carries only what is genuinely particular to it.
   ========================================================================== */

:root{--armbar-h:52px}

/* Two sticky rows: the house header, then the arm's own bar under it. Anchor
   targets have to clear both, so section scroll-margin grows on arm pages. */
[data-arm] section[id]{scroll-margin-top:calc(76px + var(--armbar-h) + 20px)}
@media (max-width:1000px){
  [data-arm] section[id]{scroll-margin-top:96px}
}

.armbar{
  position:sticky;top:76px;z-index:110;
  background:color-mix(in srgb,var(--paper) 93%,transparent);
  backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);
  border-bottom:1px solid var(--line)
}
.armbar .inner{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);height:var(--armbar-h)}
.armbar .who{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;color:var(--ink);
  font-family:var(--f-display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;
  white-space:nowrap;flex:none
}
.armbar .who::before{
  content:"";width:7px;height:7px;flex:none;
  background:var(--gold-line);transform:rotate(45deg)
}
/* The nav scrolls inside itself on narrow desktops rather than widening the
   page — the site's no-horizontal-overflow rule is absolute. */
.armbar nav{
  display:flex;align-items:center;gap:clamp(12px,1.8vw,24px);
  margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding-block:14px;margin-block:-14px
}
.armbar nav::-webkit-scrollbar{display:none}
.armbar nav a{
  font-size:.885rem;text-decoration:none;color:var(--ink-soft);white-space:nowrap;
  position:relative;padding-block:4px;transition:color .2s
}
.armbar nav a:hover,.armbar nav a[aria-current="page"]{color:var(--ink)}
.armbar nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold-line);transition:right .25s
}
.armbar nav a:hover::after,.armbar nav a[aria-current="page"]::after{right:0}
/* Below 1000px the bar is gone and the arm's pages live in the mobile panel. */
@media (max-width:1000px){.armbar{display:none}}

#mobileNav .mgroup{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
#mobileNav .mgroup h2{
  font-family:var(--f-body);font-weight:600;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 6px
}
#mobileNav .mgroup a{
  display:block;text-decoration:none;color:var(--ink-soft);font-size:1.02rem;
  padding:10px 0;border-bottom:1px solid var(--line-soft)
}
#mobileNav .mgroup a[aria-current="page"]{color:var(--ink)}

/* A three-across variant of the arm-card grid, for a section router. */
.arms.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.arms.trio{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- faq      */
/* Native <details>/<summary>: it opens and closes with scripts disabled, so
   an answer is never trapped behind JavaScript. */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 0;
  display:flex;align-items:flex-start;gap:16px;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.08rem,1rem + .38vw,1.28rem);line-height:1.3;color:var(--ink);
  transition:color .2s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;margin-left:auto;margin-top:.42em;
  border-right:1.5px solid var(--gold-line);border-bottom:1.5px solid var(--gold-line);
  transform:rotate(45deg);transition:transform .25s
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 22px;color:var(--ink-soft);font-size:.97rem;max-width:68ch}
.faq .a p + p{margin-top:.8em}

/* ---------------------------------------------------------------- timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--line)
}
.timeline li{position:relative;padding:0 0 clamp(22px,3vw,32px) clamp(26px,3vw,38px)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:8px;width:11px;height:11px;
  background:var(--paper);border:1px solid var(--gold-line);transform:rotate(45deg)
}
.band-alt .timeline li::before{background:var(--paper-2)}
.timeline li h3{font-size:1.12rem;margin-bottom:.3em}
.timeline li p{color:var(--ink-soft);font-size:.95rem;margin:0;max-width:62ch}
.timeline li .when{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.5em
}

/* ---------------------------------------------------------------- download */
.dl{
  display:inline-flex;align-items:center;gap:.85em;text-decoration:none;
  border:1px solid var(--line);padding:.9em 1.2em;color:var(--ink);
  transition:border-color .2s,background-color .2s;max-width:100%
}
.dl:hover{border-color:var(--gold-line);background:var(--gold-wash)}
.dl svg{width:20px;height:20px;flex:none;color:var(--gold)}
.dl .t{display:block;font-weight:600;font-size:.97rem;line-height:1.3}
.dl .m{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-top:.35em
}

/* ---------------------------------------------------------------- pending  */
/* A quiet inline note that a thing does not exist yet. Never a fake control. */
.pending{
  border:1px dashed var(--line);padding:clamp(16px,2.2vw,22px);
  color:var(--ink-faint);font-size:.93rem
}
.pending b{color:var(--ink-soft);font-weight:600}
.pending p{margin:0}
.pending p + p{margin-top:.6em}

/* Revealed by script. Anything that would be a dead control without one. */
.js-only{display:none}