/* =============================================================
   HD design system  |  hai-ai.digital
   Extracted from the approved wow-core mockup.
   Hebrew RTL, logical properties only, zero external requests.
   Display face: Heebo 800/900 (self-hosted via /fonts/fonts.css)
   Body face:    Assistant 400/600/700/800 (self-hosted)
   ============================================================= */


/* =============================================================
   01. TOKENS
   ============================================================= */
:root{
  /* surfaces */
  --bg:#0B0B0D;
  --s1:#141416;
  --s2:#1C1C1F;

  /* ink */
  --tx:#EDE9E3;
  --mu:rgba(237,233,227,.58);
  /* Raised from .34 (2.70:1, failed everywhere) to .60. Hierarchy against --mu
     is now carried by size, weight and tracking rather than by transparency. */
  --fa:rgba(237,233,227,.60);
  --line:rgba(237,233,227,.13);
  --line2:rgba(237,233,227,.22);

  /* accent */
  --amber:#FF8A2B;

  /* rhythm */
  --gut:clamp(1.15rem,5vw,5.5rem);
  --pad:clamp(5rem,12vw,12rem);
  --gap:clamp(1.2rem,2.6vw,2.6rem);

  /* motion */
  --ease:cubic-bezier(.2,.7,.25,1);

  /* families: Heebo replaces the mockup display face, Assistant stays body */
  --dsp:'Heebo','Arial Hebrew',Arial,sans-serif;
  --bdy:'Assistant','Arial Hebrew',Arial,sans-serif;

  /* shared type scale, used by the page-level blocks at the end of this file */
  --fs-display:clamp(2.75rem,8vw,7.2rem);
  --fs-1:clamp(2rem,5.2vw,4.4rem);
  --fs-2:clamp(1.5rem,3.1vw,2.7rem);
  --fs-3:clamp(1.15rem,2.1vw,1.75rem);
  --fs-4:clamp(1.05rem,1.6vw,1.3rem);
  --fs-lab:.76rem;
}


/* =============================================================
   02. BASE AND RESET BRIDGE
   ============================================================= */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:transparent;color:var(--tx);
  font:400 clamp(1rem,1.05vw,1.125rem)/1.65 var(--bdy);
  overflow-x:hidden;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
::selection{background:var(--amber);color:#160800}
:focus-visible{outline:2px solid var(--amber);outline-offset:5px;border-radius:3px}

/* body scroll lock, shared by the mobile menu */
html.lock,html.lock body{overflow:hidden}


/* =============================================================
   03. TYPOGRAPHY SCALE AND SHARED TYPE UTILITIES
   ============================================================= */

/* every latin run and every number is isolated so RTL never reorders it */
.ltr{unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* display face helpers for one-off headings on inner pages */
.t-dsp{font-family:var(--dsp);font-weight:800;letter-spacing:-.008em;line-height:1.08}
.t-display{font:900 var(--fs-display)/1.04 var(--dsp);letter-spacing:-.012em;margin:0}
.t-1{font:900 var(--fs-1)/1.05 var(--dsp);letter-spacing:-.012em;margin:0}
.t-2{font:800 var(--fs-2)/1.08 var(--dsp);letter-spacing:-.01em;margin:0}
.t-3{font:800 var(--fs-3)/1.12 var(--dsp);letter-spacing:-.006em;margin:0}

/* the small tracked label used above almost every block in the system */
.t-lab{
  display:block;font:800 var(--fs-lab)/1 var(--bdy);
  letter-spacing:.18em;color:var(--fa);
}
.t-lab-hot{color:var(--amber)}
.t-mu{color:var(--mu)}
.t-fa{color:var(--fa)}


/* =============================================================
   04. LIVING CORE  (WebGL canvas and its no-WebGL fallback)
   ============================================================= */
#core{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

/* hd.js sets html.no-gl when WebGL is missing, fails to build or is lost */
html.no-gl body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44vmax 44vmax at 74% 32%,rgba(255,138,43,.34),rgba(255,138,43,.09) 40%,rgba(11,11,13,0) 66%),
    radial-gradient(70vmax 70vmax at 16% 92%,rgba(255,138,43,.10),rgba(11,11,13,0) 68%),
    radial-gradient(30vmax 30vmax at 74% 32%,rgba(237,233,227,.10),rgba(11,11,13,0) 60%);
}


/* =============================================================
   05. NAV
   ============================================================= */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:70;
  display:flex;align-items:center;gap:var(--gap);
  padding:clamp(.85rem,1.6vw,1.35rem) var(--gut);
  transition:background-color .3s var(--ease),backdrop-filter .3s var(--ease),border-color .3s var(--ease);
  border-block-end:1px solid transparent;
}
.nav.stuck{
  background:rgba(11,11,13,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-block-end-color:var(--line);
}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tx);min-height:44px}
.brand-mark{
  width:13px;height:13px;border-radius:50%;border:1.5px solid var(--tx);
  transition:background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{background:var(--amber);border-color:var(--amber);transform:scale(1.25)}
.brand-name{font:800 1.02rem/1 var(--dsp);letter-spacing:-.005em}

.nav-links{display:flex;flex:none;gap:clamp(.6rem,1.8vw,1.9rem);margin-inline-start:auto}
.nav-links a{
  position:relative;color:var(--mu);text-decoration:none;font-size:.95rem;font-weight:600;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:.3rem;
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;inset-block-end:11px;inset-inline:.3rem;height:1px;background:var(--tx);
  transform:scaleX(0);transform-origin:right;transition:transform .24s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--tx);transform:translateY(-2px)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}

/* current page marker for the shared nav block */
.nav-links a[aria-current="page"]{color:var(--tx)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--amber)}

.nav-cta{
  display:inline-flex;flex:none;align-items:center;min-height:44px;padding-inline:1.1rem;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line2);color:var(--tx);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease);
}
.nav-cta:hover,.nav-cta:focus-visible{transform:translateY(-3px);border-color:var(--amber);background:rgba(255,138,43,.12);color:#FFD9B5}

@media (max-width:860px){.nav-links{display:none}.nav-cta{display:none}.mtog{display:inline-flex}}


/* =============================================================
   06. MOBILE MENU
   ============================================================= */
.mtog{
  display:none;width:44px;height:44px;margin-inline-start:auto;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line2);border-radius:999px;cursor:pointer;padding:0;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.mtog:hover,.mtog:focus-visible{border-color:var(--amber);background:rgba(255,138,43,.1)}
.mtog span{display:block;position:relative;width:17px;height:1.5px;background:var(--tx);border-radius:2px;transition:background-color .2s var(--ease)}
.mtog span::before,.mtog span::after{
  content:"";position:absolute;inset-inline:0;height:1.5px;background:var(--tx);border-radius:2px;
  transition:transform .28s var(--ease);
}
.mtog span::before{inset-block-start:-5.5px}
.mtog span::after{inset-block-start:5.5px}
.mtog[aria-expanded="true"] span{background:transparent}
.mtog[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.mtog[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gut) 2.4rem;background:rgba(11,11,13,.96);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  opacity:0;visibility:hidden;transition:opacity .34s var(--ease),visibility 0s .34s;overflow-y:auto;
}
.mnav.open{opacity:1;visibility:visible;transition:opacity .34s var(--ease),visibility 0s 0s}
.mnav-glow{
  position:absolute;inset-block-start:-14%;inset-inline-end:-24%;width:78vw;height:78vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,138,43,.20),rgba(255,138,43,.05) 42%,transparent 70%);
}
.mnav a{
  position:relative;color:var(--tx);text-decoration:none;display:flex;align-items:baseline;gap:.9rem;
  min-height:56px;padding-block:.55rem;border-block-end:1px solid var(--line);
  font:800 clamp(1.5rem,7.5vw,2.1rem)/1.08 var(--dsp);
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s var(--ease);
}
.mnav.open a{opacity:1;transform:none}
.mnav.open a:nth-child(2){transition-delay:.06s}
.mnav.open a:nth-child(3){transition-delay:.11s}
.mnav.open a:nth-child(4){transition-delay:.16s}
.mnav.open a:nth-child(5){transition-delay:.21s}
.mnav.open a:nth-child(6){transition-delay:.26s}
.mnav.open a:nth-child(7){transition-delay:.31s}
.mnav.open a:nth-child(8){transition-delay:.36s}
.mnav a i{font:700 .78rem/1 var(--bdy);font-style:normal;color:var(--amber);opacity:.85;direction:ltr;unicode-bidi:isolate}
.mnav a:hover,.mnav a:focus-visible{color:var(--amber)}

.mnav-foot{margin-block-start:2.2rem;display:flex;flex-direction:column;gap:.7rem;opacity:0;transition:opacity .4s var(--ease) .26s}
.mnav.open .mnav-foot{opacity:1}
.mnav-foot span{font:700 .74rem/1 var(--bdy);letter-spacing:.09em;color:var(--fa)}
.mnav-foot a{font:600 1rem/1.3 var(--bdy);color:var(--mu);border:0;min-height:44px;align-items:center;opacity:1;transform:none}
.mnav-foot a:hover,.mnav-foot a:focus-visible{color:var(--amber)}

/* seven chapters fill a short phone, so stop centering before the first link gets clipped */
@media (max-height:720px){.mnav{justify-content:flex-start;padding-block-start:5.2rem}}
@media (min-width:861px){.mnav{display:none}}
/* must come after the base .mtog rule so it wins at equal specificity */
@media (max-width:860px){.mtog{display:inline-flex}}


/* =============================================================
   07. CHAPTER RAIL
   ============================================================= */
.rail{
  position:fixed;z-index:40;inset-inline-end:clamp(1rem,2.1vw,2.4rem);inset-block-start:50%;
  transform:translateY(-50%);display:flex;gap:.85rem;pointer-events:none;
}
.rail-line{position:relative;width:1px;height:min(44vh,340px);background:var(--line)}
.rail-fill{
  position:absolute;inset-inline:0;inset-block-start:0;height:100%;background:var(--amber);
  transform:scaleY(var(--p,0));transform-origin:top;
}
.rail-ticks{display:flex;flex-direction:column;justify-content:space-between;height:min(44vh,340px)}
.rail-ticks span{
  font:600 .68rem/1 var(--bdy);color:var(--fa);letter-spacing:.14em;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.rail-ticks span.on{color:var(--amber);transform:translateY(-1px) scale(1.12)}
@media (max-width:1000px){.rail{display:none}}


/* =============================================================
   08. LAYOUT, SECTIONS AND CHAPTER NUMBERING
   ============================================================= */
.wrap{max-width:1460px;margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--pad)}
.sec-line{border-block-start:1px solid var(--line)}

.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-block-end:clamp(3rem,7vw,7rem)}
.ch-num{
  grid-column:1/span 2;font:800 clamp(2.6rem,6vw,5.2rem)/.85 var(--dsp);
  color:transparent;-webkit-text-stroke:1px var(--line2);letter-spacing:-.01em;
}
.ch-num.hot-num{-webkit-text-stroke:1px rgba(255,138,43,.5)}
.sec-title{grid-column:3/span 7;margin:0;font:900 clamp(2rem,5.2vw,4.4rem)/1.05 var(--dsp);letter-spacing:-.012em}
.sec-sub{grid-column:3/span 6;margin:1.1rem 0 0;color:var(--mu);max-width:48ch}
@media (max-width:860px){
  .sec-head{grid-template-columns:1fr;gap:.9rem}
  .ch-num,.sec-title,.sec-sub{grid-column:1/-1}
}


/* =============================================================
   09. SCROLL REVEAL
   hd.js adds html.js, so a no-script page shows everything.
   ============================================================= */
.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms);
}
.js [data-reveal].in{opacity:1;transform:none}


/* =============================================================
   10. HERO
   ============================================================= */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--gut) + 3.6rem) clamp(1.6rem,3vw,2.6rem);
}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);width:100%}
.eyebrow{
  grid-column:1/span 7;margin:0 0 clamp(1.1rem,2.2vw,1.9rem);
  font-size:clamp(.82rem,1.05vw,.95rem);font-weight:600;color:var(--tx);
  letter-spacing:.02em;display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(to left,var(--line),rgba(237,233,227,0))}

.h1{
  grid-column:1/span 12;margin:0;
  font:900 clamp(2.75rem,8vw,7.2rem)/1.04 var(--dsp);
  letter-spacing:-.012em;
}
.h1 .ln{display:block}
.h1 .w{display:inline-block;white-space:nowrap}
.h1 .c{
  display:inline-block;opacity:0;transform:translateY(.4em) rotate(-2.2deg);
  animation:chIn .95s var(--ease) forwards;animation-delay:calc(var(--i) * 25ms + 140ms);
}
@keyframes chIn{to{opacity:1;transform:none}}

/* the hot word reads off the amber core behind it, and falls back to flat amber with no WebGL */
.hot{mix-blend-mode:screen;color:#C4642A}
html.no-gl .hot{mix-blend-mode:normal;color:var(--amber)}

.lead{
  grid-column:3/span 5;margin:clamp(1.3rem,2.4vw,2rem) 0 0;
  color:var(--tx-read);font-size:clamp(1rem,1.3vw,1.18rem);max-width:48ch;
}
.cta-row{
  grid-column:8/span 5;align-self:end;display:flex;flex-wrap:wrap;gap:.75rem;
  margin-block-start:clamp(1.3rem,2.2vw,1.9rem);
}
.hero-strip{
  grid-column:1/-1;margin-block-start:clamp(2rem,4vw,3.4rem);
  border-block-start:1px solid var(--line);padding-block-start:1.1rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.8rem,2.6vw,2.6rem);
}
.hero-strip li{list-style:none;color:var(--tx-read);font-size:.9rem;font-weight:600;letter-spacing:.01em}
.hero-strip ul{display:flex;flex-wrap:wrap;gap:clamp(.8rem,2.6vw,2.6rem);margin:0;padding:0}
.scroll-cue{margin-inline-start:auto;display:flex;align-items:center;gap:.6rem;color:var(--fa);font-size:.82rem;font-weight:600;letter-spacing:.12em}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(to bottom,var(--line2),rgba(237,233,227,0));position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset-inline:0;height:12px;background:var(--tx);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-14px);opacity:0}30%{opacity:1}100%{transform:translateY(34px);opacity:0}}

@media (max-width:860px){
  .eyebrow,.h1,.lead,.cta-row{grid-column:1/-1}
  .hero{justify-content:center}
  .eyebrow::after{display:none}
  .cta-row .btn{width:100%;justify-content:space-between}
}
@media (min-width:861px) and (max-height:950px){
  .h1{font-size:clamp(2.6rem,5.6vw,5.2rem)}
  .hero{padding-block:calc(var(--gut) + 1.6rem) clamp(1rem,1.8vw,1.5rem)}
  .hero-strip{margin-block-start:clamp(1.2rem,2vw,1.7rem)}
  .lead{margin-block-start:clamp(1rem,1.8vw,1.5rem)}
}
@media (min-width:861px) and (max-height:720px){
  .h1{font-size:clamp(2.4rem,4.8vw,4.2rem)}
  .lead{font-size:1rem}
}


/* =============================================================
   11. BUTTONS
   forward arrows point inline-start (left) in RTL
   ============================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;min-height:52px;padding-inline:1.65rem;
  font:600 1rem/1 var(--bdy);text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease),
             box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.btn svg{transition:transform .22s var(--ease)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(-5px)}
.btn-primary{background:var(--amber);color:#190900;border-radius:999px;font-weight:600}
.btn-primary:hover,.btn-primary:focus-visible{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,138,43,.3)}
.btn-primary:active{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2);color:var(--tx);border-radius:2px;background:rgba(237,233,227,.02)}
.btn-ghost:hover,.btn-ghost:focus-visible{transform:translateY(-3px);border-color:rgba(237,233,227,.45);background:rgba(237,233,227,.07)}
.btn-ghost:active{transform:translateY(-1px)}


/* =============================================================
   12. CHAPTER 01  DOMAINS
   ============================================================= */
.dom-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto auto;
  gap:0 var(--gap);
}
.dom{
  position:relative;padding-block-start:1.5rem;border-block-start:1px solid var(--line);
  display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;
  transition:transform .26s var(--ease),border-color .26s var(--ease);
}
.dom::after{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;height:1px;width:100%;
  background:var(--tx);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.dom:hover{transform:translateY(-6px)}
.dom:hover::after{transform:scaleX(1)}
.dom-a{border-block-start-color:rgba(255,138,43,.55)}
.dom-a::after{background:var(--amber)}
.dom-n{
  font:800 .8rem/1 var(--bdy);letter-spacing:.18em;color:var(--fa);display:block;margin-block-end:1rem;
  transition:color .26s var(--ease),transform .26s var(--ease);
}
.dom-a .dom-n{color:var(--amber)}
.dom:hover .dom-n{transform:translateY(-2px);color:var(--tx)}
.dom-t{margin:0;font:800 clamp(1.5rem,2.6vw,2.3rem)/1.08 var(--dsp);letter-spacing:-.01em;align-self:start}
.dom-d{color:var(--mu);margin:.9rem 0 1.6rem;max-width:34ch}
.dom-list{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.dom-list li{border-block-start:1px solid var(--line);padding-block-start:.55rem;font-size:.95rem;color:var(--tx)}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.tags li{border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;font-size:.86rem;color:var(--mu)}

@media (max-width:760px){
  .dom-grid{grid-template-columns:1fr;grid-template-rows:none;gap:2.4rem}
  .dom{grid-row:auto;grid-template-rows:none;display:block}
}


/* =============================================================
   13. CHAPTER 02  CAPABILITIES
   ============================================================= */
.blds{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.2rem,4.4vw,4rem) var(--gap)}
.bld{
  position:relative;padding-block-start:1.3rem;border-block-start:1px solid var(--line);
  transition:transform .26s var(--ease);
}
.bld::after{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;height:1px;width:100%;
  background:var(--tx);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.bld:hover{transform:translateY(-5px)}
.bld:hover::after{transform:scaleX(1)}
.bld-n{
  display:block;margin-block-end:.85rem;font:800 .76rem/1 var(--bdy);letter-spacing:.18em;color:var(--fa);
  transition:color .26s var(--ease),transform .26s var(--ease);
}
.bld:hover .bld-n{transform:translateY(-2px);color:var(--tx)}
.bld-t{margin:0;font:800 clamp(1.15rem,2.1vw,1.75rem)/1.12 var(--dsp);letter-spacing:-.006em}
.bld-d{margin:.7rem 0 0;color:var(--mu);font-size:.97rem;max-width:40ch}

/* the staggered eight-up rhythm */
.bld-1{grid-column:1/span 6}
.bld-1 .bld-t{font-size:clamp(1.45rem,2.9vw,2.4rem)}
.bld-2{grid-column:8/span 4;margin-block-start:clamp(1.2rem,4vw,4rem)}
.bld-3{grid-column:2/span 4}
.bld-4{grid-column:7/span 5;margin-block-start:clamp(0rem,2.4vw,2.4rem)}
.bld-5{grid-column:1/span 5}
.bld-6{grid-column:7/span 6;margin-block-start:clamp(1rem,3vw,3rem)}
.bld-7{grid-column:3/span 4}
.bld-8{grid-column:8/span 5;margin-block-start:clamp(0rem,2vw,2rem);border-block-start-color:rgba(255,138,43,.55)}
.bld-8::after{background:var(--amber)}
.bld-8 .bld-n{color:var(--amber)}

@media (max-width:1000px){
  .blds>*:nth-child(odd){grid-column:1/span 6}
  .blds>*:nth-child(even){grid-column:7/span 6}
  .blds>*{margin-block-start:0}
  .bld-1 .bld-t{font-size:clamp(1.3rem,2.6vw,1.9rem)}
}
/* :nth-child(n) matches all, and keeps specificity above the odd/even pair above */
@media (max-width:640px){
  .blds{gap:1.9rem}
  .blds>*:nth-child(n){grid-column:1/-1}
}

/* --- the home reading order: two rows of four, aligned tops, no zigzag ---
   Scoped to .blds-row and placed after every .blds rule above, so the home page
   wins the cascade and the inner pages keep the staggered rhythm they were
   built for. */
.blds-row{
  grid-template-columns:repeat(4,1fr);
  gap:clamp(2.2rem,3.6vw,3.2rem) var(--gap);align-items:start;
}
.blds-row>.bld{grid-column:auto;margin-block-start:0}
.blds-row>.bld-1 .bld-t{font-size:clamp(1.15rem,2.1vw,1.75rem)}
.blds-row .bld-t,.blds-row .bld-d{max-width:32ch}
/* the reveal walks along each row instead of jumping between two columns */
.blds-row>.bld:nth-child(4n+2){--d:70ms}
.blds-row>.bld:nth-child(4n+3){--d:140ms}
.blds-row>.bld:nth-child(4n+4){--d:210ms}
@media (max-width:1180px){
  .blds-row{grid-template-columns:repeat(2,1fr)}
  .blds-row>.bld:nth-child(4n+3){--d:0ms}
  .blds-row>.bld:nth-child(4n+4){--d:70ms}
}
@media (max-width:640px){
  .blds-row{grid-template-columns:1fr;gap:1.9rem}
  .blds-row>.bld{--d:0ms}
}


/* =============================================================
   14. CHAPTER 03  METHOD
   ============================================================= */
.sec-method{background:linear-gradient(to bottom,rgba(20,20,22,0),rgba(20,20,22,.42) 24%,rgba(20,20,22,.42) 76%,rgba(20,20,22,0))}
.proc{display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.proc-rail{position:relative;flex:none;width:1px;background:var(--line)}
.proc-fill{
  position:absolute;inset-inline:0;inset-block-start:0;height:100%;background:var(--amber);
  transform:scaleY(var(--p,0));transform-origin:top;transition:transform .1s linear;
}
.stages{flex:1 1 auto;min-width:0;margin:0;padding:0;list-style:none}
.stage{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,2vw,1.7rem) var(--gap);
  padding-block:clamp(1.8rem,3.4vw,3rem);border-block-start:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.stage:hover{border-block-start-color:var(--line2)}
.stage-head{grid-column:1/span 3}
.stage-n{
  display:block;font:900 clamp(2.2rem,4vw,3.4rem)/.9 var(--dsp);color:transparent;
  -webkit-text-stroke:1px var(--line2);
  transition:color .3s var(--ease),-webkit-text-stroke-color .3s var(--ease);
}
.stage.on .stage-n{color:rgba(237,233,227,.16);-webkit-text-stroke-color:var(--line)}
.stage.now .stage-n{color:var(--amber);-webkit-text-stroke-color:rgba(255,138,43,0)}
.stage-t{margin:.85rem 0 0;font:800 clamp(1.35rem,2.4vw,2.1rem)/1.1 var(--dsp);letter-spacing:-.008em}
.stage-body{grid-column:4/span 4}
.stage-p{margin:0;color:var(--mu)}
.stage-out{grid-column:9/span 4}
.stage-lab{display:block;margin-block-end:.9rem;font:800 .72rem/1 var(--bdy);letter-spacing:.16em;color:var(--fa)}
.stage-out ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.stage-out li{border-block-start:1px solid var(--line);padding-block-start:.5rem;font-size:.94rem;color:var(--tx)}
.stage-note{
  margin:clamp(1.2rem,2.2vw,1.8rem) 0 0;padding-block-start:.9rem;border-block-start:1px solid var(--line);
  color:var(--mu);font-size:.92rem;
}
.stage-note span{display:block;margin-block-end:.45rem;font:800 .72rem/1 var(--bdy);letter-spacing:.16em;color:var(--mu)}

@media (max-width:1080px){
  .stage-head{grid-column:1/span 12;display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.4rem)}
  .stage-body{grid-column:1/span 7}
  .stage-out{grid-column:9/span 4}
  .stage-t{margin-block-start:0}
}
@media (max-width:900px){
  .stage{grid-template-columns:1fr;gap:1.1rem}
  .stage-head,.stage-body,.stage-out{grid-column:1/-1}
}


/* =============================================================
   15. CHAPTER 04  SYSTEMS CATALOG AND FILTER CHIPS
   ============================================================= */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:clamp(1.5rem,3vw,2.3rem)}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding-inline:1.05rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(237,233,227,.02);
  color:var(--mu);font:600 .88rem/1 var(--bdy);cursor:pointer;
  transition:transform .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease);
}
.chip:hover,.chip:focus-visible{transform:translateY(-2px);color:var(--tx);border-color:var(--line2)}
.chip:active{transform:translateY(0)}
.chip[aria-pressed="true"]{color:var(--tx);border-color:rgba(255,138,43,.55);background:rgba(255,138,43,.10)}
.chip-n{color:var(--fa);font-size:.76rem;transition:color .22s var(--ease)}
.chip[aria-pressed="true"] .chip-n{color:var(--amber)}

.idx{margin:0;padding:0;list-style:none;border-block-start:1px solid var(--line)}
.idx li[hidden]{display:none}
.idx a{
  position:relative;display:grid;align-items:center;gap:var(--gap);
  grid-template-columns:auto minmax(9rem,1.1fr) minmax(0,1.7fr) auto 1.5rem;
  padding:clamp(1.05rem,2.1vw,1.6rem) clamp(.5rem,1.4vw,1.2rem);
  border-block-end:1px solid var(--line);text-decoration:none;color:var(--tx);min-height:64px;
  transition:transform .24s var(--ease),background-color .24s var(--ease);
}
.idx a::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;height:1px;width:100%;
  background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease);
}
.idx a:hover,.idx a:focus-visible{background:rgba(28,28,31,.6);transform:translateY(-3px)}
.idx a .row-n,.idx a .row-name{transition:transform .24s var(--ease),color .24s var(--ease)}
.idx a:hover .row-n,.idx a:focus-visible .row-n{transform:translateX(-6px);color:var(--tx)}
.idx a:hover .row-name,.idx a:focus-visible .row-name{transform:translateX(-6px)}
.idx a:hover::before,.idx a:focus-visible::before{transform:scaleX(1)}
.row-n{font:600 .78rem/1 var(--bdy);color:var(--fa);letter-spacing:.16em}
.row-name{font:800 clamp(1.05rem,2vw,1.7rem)/1.1 var(--dsp);letter-spacing:0}
.row-desc{color:var(--mu);font-size:.98rem}
.row-tag{
  font-size:.8rem;color:var(--fa);border:1px solid var(--line);border-radius:999px;
  padding:.28rem .75rem;white-space:nowrap;
  transition:color .24s var(--ease),border-color .24s var(--ease),background-color .24s var(--ease);
}
.idx a:hover .row-tag,.idx a:focus-visible .row-tag{color:var(--tx);border-color:var(--line2);background:rgba(237,233,227,.04)}
.row-ar{color:var(--fa);transition:transform .24s var(--ease),color .24s var(--ease)}
.idx a:hover .row-ar,.idx a:focus-visible .row-ar{transform:translateX(-6px);color:var(--amber)}

.more{
  display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:58px;
  margin-block-start:clamp(1.3rem,2.4vw,2rem);padding:.8rem 1.2rem;
  border:1px solid var(--line2);border-radius:2px;background:rgba(237,233,227,.02);
  color:var(--tx);font:600 1rem/1.3 var(--bdy);cursor:pointer;text-align:center;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background-color .22s var(--ease);
}
.more[hidden]{display:none}
.more:hover,.more:focus-visible{transform:translateY(-3px);border-color:rgba(237,233,227,.45);background:rgba(237,233,227,.07)}
.more:active{transform:translateY(-1px)}
.more-ar{flex:none;color:var(--fa);transform:rotate(-90deg);transition:transform .26s var(--ease),color .26s var(--ease)}
.more:hover .more-ar,.more:focus-visible .more-ar{color:var(--tx)}
.more[aria-expanded="true"] .more-ar{transform:rotate(90deg)}

@media (max-width:900px){
  .idx a{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"n tag ar" "name name name" "desc desc desc";
    column-gap:.7rem;row-gap:.45rem;align-items:center;
  }
  .row-n{grid-area:n}
  .row-tag{grid-area:tag;justify-self:start;font-size:.76rem;padding:.24rem .6rem}
  .row-name{grid-area:name}
  .row-desc{grid-area:desc}
  .row-ar{grid-area:ar}
}
@media (max-width:400px){
  .row-tag{max-width:100%;white-space:normal}
}


/* =============================================================
   16. CHAPTER 05  TOOLS
   ============================================================= */
/* Each family is one bracket: a rule across its top and a spine down its
   inline start edge, which in RTL is the right. Name, one line of what it gives
   the business and then its items all sit inside that bracket, so no item list
   can read as if it belonged to the family printed below it. */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.8rem,4.4vw,4rem) var(--gap);align-items:start}
.tool{
  position:relative;
  padding-block:1.25rem 1.5rem;padding-inline-start:clamp(.95rem,1.5vw,1.5rem);
  border-block-start:1px solid var(--line2);
  border-inline-start:1px solid var(--line);
  transition:transform .26s var(--ease),border-color .26s var(--ease);
}
.tool:hover{border-inline-start-color:var(--line2)}
.tool::after{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;height:1px;width:100%;
  background:var(--tx);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.tool:hover{transform:translateY(-5px)}
.tool:hover::after{transform:scaleX(1)}
.tool-lead{grid-column:1/-1;border-block-start-color:rgba(255,138,43,.55)}
.tool-lead::after{background:var(--amber)}
.tool-n{
  display:block;margin-block-end:.9rem;font:800 .78rem/1 var(--bdy);letter-spacing:.18em;color:var(--fa);
  transition:color .26s var(--ease),transform .26s var(--ease);
}
.tool-lead .tool-n{color:var(--amber)}
.tool:hover .tool-n{transform:translateY(-2px);color:var(--tx)}
.tool-t{margin:0;font:800 clamp(1.15rem,1.9vw,1.6rem)/1.12 var(--dsp);letter-spacing:-.005em}
.tool-lead .tool-t{font-size:clamp(1.45rem,2.8vw,2.3rem)}
.tool-d{margin:.7rem 0 1.35rem;color:var(--mu);font-size:.97rem;max-width:42ch}
.tool-list{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.tool-list li{border-block-start:1px solid var(--line);padding-block-start:.5rem;font-size:.94rem;color:var(--tx)}
.tool-lead .tool-list{grid-template-columns:repeat(4,1fr);gap:.55rem 1.4rem}

@media (max-width:1100px){
  .tools{grid-template-columns:repeat(2,1fr)}
  .tool-lead .tool-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .tools{grid-template-columns:1fr;gap:2.4rem}
  .tool-lead .tool-list{grid-template-columns:1fr}
}


/* =============================================================
   17. CHAPTER 06  STATS
   ============================================================= */
.stats{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,4vw,3.4rem) var(--gap)}
.stat{border-block-start:1px solid var(--line);padding-block-start:1.1rem}
.num{display:block;font:900 clamp(2.6rem,5.6vw,5.2rem)/.92 var(--dsp);letter-spacing:-.02em}
.cap{display:block;margin-block-start:.7rem;color:var(--mu);font-size:.98rem}
.stat-big{grid-column:1/span 6;border-block-start-color:rgba(255,138,43,.5)}
.stat-big .num{font-size:clamp(4rem,12vw,11rem);color:var(--amber);line-height:.86}
.stat-big .cap{font-size:1.06rem;color:var(--tx)}
.stat-2{grid-column:8/span 5;align-self:end}
.stat-3{grid-column:1/span 3}
.stat-4{grid-column:5/span 3;margin-block-start:clamp(0rem,3vw,3rem)}
.stat-5{grid-column:9/span 4;margin-block-start:clamp(0rem,6vw,6rem)}
@media (max-width:900px){
  .stat-big{grid-column:1/-1}
  .stat-2,.stat-3,.stat-4,.stat-5{grid-column:span 6;margin-block-start:0}
}
@media (max-width:520px){.stat-2,.stat-3,.stat-4,.stat-5{grid-column:1/-1}}


/* =============================================================
   18. CHAPTER 07  CTA
   ============================================================= */
.talk{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.talk-num{grid-column:1/span 2}
.talk-title{grid-column:1/span 9;margin:0;font:900 clamp(2.1rem,6.4vw,5.6rem)/1.04 var(--dsp);letter-spacing:-.014em}
.talk-p{grid-column:4/span 6;margin:clamp(1.4rem,3vw,2.4rem) 0 0;color:var(--mu);font-size:clamp(1rem,1.3vw,1.2rem)}
.talk-cta{grid-column:4/span 8;margin-block-start:clamp(1.6rem,3vw,2.4rem);display:flex;flex-wrap:wrap;gap:.9rem}
.talk-meta{
  grid-column:1/-1;margin:clamp(3rem,6vw,5rem) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);
}
.talk-meta li{border-block-start:1px solid var(--line);padding-block-start:.9rem;color:var(--mu);font-size:.95rem;display:flex;align-items:center;gap:.6rem}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (max-width:900px){
  .talk-num,.talk-title,.talk-p,.talk-cta{grid-column:1/-1}
  .talk-meta{grid-template-columns:1fr}
}


/* =============================================================
   19. FOOTER
   ============================================================= */
.foot{position:relative;padding-block:clamp(4rem,9vw,9rem) clamp(2rem,4vw,3rem);border-block-start:1px solid var(--line)}
.foot-line{margin:0;color:var(--mu);max-width:44ch;font-size:clamp(1rem,1.25vw,1.15rem)}
.foot-giant{
  margin:clamp(2rem,5vw,4rem) 0 0;font:900 clamp(3.6rem,13.5vw,15rem)/.88 var(--dsp);
  letter-spacing:-.02em;color:var(--tx);
}
.foot-bottom{
  margin-block-start:clamp(2.5rem,6vw,5rem);border-block-start:1px solid var(--line);padding-block-start:1.3rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1rem,3vw,2.6rem);
}
.foot-links{display:flex;flex-wrap:wrap;gap:.2rem clamp(1rem,2.6vw,2.2rem);margin:0;padding:0;list-style:none}
.foot-links a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--mu);
  text-decoration:none;font-weight:600;font-size:.95rem;
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.foot-links a::after{
  content:"";position:absolute;inset-block-end:11px;inset-inline:0;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:right;transition:transform .26s var(--ease);
}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--tx);transform:translateY(-2px)}
.foot-links a:hover::after,.foot-links a:focus-visible::after{transform:scaleX(1)}
.foot-copy{margin-inline-start:auto;color:var(--fa);font-size:.85rem}


/* =============================================================
   20. SHARED PAGE HEAD  (every inner page that is not the home hero)
   ============================================================= */
.page-head{
  position:relative;
  padding-block:calc(var(--gut) + clamp(5.5rem,10vw,8.5rem)) clamp(2.4rem,5vw,4.5rem);
}
.page-head-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.page-eyebrow{
  grid-column:1/-1;margin:0 0 clamp(1rem,2vw,1.6rem);
  font:800 .78rem/1 var(--bdy);letter-spacing:.18em;color:var(--amber);
}
.page-title{grid-column:1/span 9;margin:0;font:900 var(--fs-1)/1.05 var(--dsp);letter-spacing:-.012em}
.page-lead{
  grid-column:1/span 7;margin:clamp(1.2rem,2.4vw,1.9rem) 0 0;
  color:var(--mu);font-size:clamp(1rem,1.3vw,1.18rem);max-width:52ch;
}
.page-meta{
  grid-column:1/-1;margin:clamp(1.8rem,3.4vw,2.8rem) 0 0;padding:1.1rem 0 0;
  border-block-start:1px solid var(--line);list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem clamp(.9rem,2.6vw,2.4rem);
  color:var(--fa);font-size:.9rem;font-weight:600;
}
.page-meta li{display:flex;align-items:center;gap:.55rem}
@media (max-width:900px){
  .page-title,.page-lead{grid-column:1/-1}
}


/* =============================================================
   21. ARTICLE TYPOGRAPHY  (blog posts and any long-form page)
   ponytail: no <code> styling, the corpus has none
   ============================================================= */
.article{max-width:70ch;margin-inline:auto;padding-inline:var(--gut);color:var(--mu);font-size:clamp(1rem,1.1vw,1.13rem);line-height:1.78}
.article > :first-child{margin-block-start:0}

.article h2{
  margin:clamp(2.6rem,5vw,4rem) 0 0;color:var(--tx);
  font:800 var(--fs-2)/1.12 var(--dsp);letter-spacing:-.01em;
  padding-block-start:1.1rem;border-block-start:1px solid var(--line);
}
.article h3{margin:clamp(1.9rem,3.4vw,2.6rem) 0 0;color:var(--tx);font:800 var(--fs-3)/1.18 var(--dsp);letter-spacing:-.006em}
.article h4{margin:clamp(1.5rem,2.6vw,2rem) 0 0;color:var(--tx);font:800 1.05rem/1.3 var(--dsp)}
.article p{margin:clamp(.9rem,1.7vw,1.3rem) 0 0}
.article strong,.article b{color:var(--tx);font-weight:700}
.article a{color:var(--amber);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .2s var(--ease)}
.article a:hover,.article a:focus-visible{color:#FFD9B5}

.article ul,.article ol{margin:clamp(.9rem,1.7vw,1.3rem) 0 0;padding-inline-start:1.35rem;display:grid;gap:.5rem}
.article ul{list-style:none;padding-inline-start:0}
.article ul > li{position:relative;padding-inline-start:1.35rem}
.article ul > li::before{
  content:"";position:absolute;inset-inline-start:.35rem;inset-block-start:.68em;
  width:5px;height:5px;border-radius:50%;background:var(--amber);
}
.article ol > li::marker{color:var(--fa);font-weight:700}

.article blockquote{
  margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0 clamp(1.1rem,2.2vw,1.8rem);
  border-inline-start:2px solid var(--amber);color:var(--tx);
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;
}
.article blockquote p{margin-block-start:.6rem}
.article blockquote > :first-child{margin-block-start:0}

.article hr{margin:clamp(2.4rem,4.5vw,3.6rem) 0 0;border:0;border-block-start:1px solid var(--line)}

.article figure{margin:clamp(1.8rem,3.4vw,2.8rem) 0 0}
.article img{border:1px solid var(--line);border-radius:2px}
.article figcaption{margin-block-start:.7rem;color:var(--fa);font-size:.88rem}

/* tables carry real comparison content on the blog, so they scroll instead of overflowing */
.article .table-scroll{margin:clamp(1.8rem,3.4vw,2.8rem) 0 0;overflow-x:auto;border-block-start:1px solid var(--line)}
.article table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:34rem}
/* Legacy articles carry bare tables with no .table-scroll wrapper. Make the table
   itself the scroll container so a wide table scrolls instead of widening the page. */
.article > table{display:block;overflow-x:auto;overscroll-behavior-inline:contain;max-width:100%;min-width:0}
.article > table > thead,.article > table > tbody{display:table;width:100%;min-width:34rem}
.article .table-scroll > table{display:table}
/* Decorative glow must never widen the panel */
.mnav{overflow-x:hidden}
.article th,.article td{
  text-align:start;padding:.85rem clamp(.6rem,1.4vw,1.1rem);
  border-block-end:1px solid var(--line);vertical-align:top;
}
.article th{color:var(--tx);font:800 .82rem/1.4 var(--bdy);letter-spacing:.06em;white-space:nowrap}
.article td{color:var(--mu)}
.article tbody tr:hover td{background:rgba(28,28,31,.6);color:var(--tx)}


/* =============================================================
   22. TWO COLUMN CONTENT BLOCK
   ============================================================= */
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.4rem,5vw,4rem) var(--gap)}
.cols-main{grid-column:1/span 7;min-width:0}
.cols-side{grid-column:9/span 4;min-width:0}
.cols-side .t-lab{margin-block-end:1rem}
.cols-side > * + *{margin-block-start:clamp(1.6rem,3vw,2.4rem)}

/* a bordered aside that matches the hairline language of every other block */
.side-block{border-block-start:1px solid var(--line);padding-block-start:1.1rem}
.side-block h3{margin:0 0 .7rem;font:800 1.05rem/1.25 var(--dsp);color:var(--tx)}
.side-block p{margin:0;color:var(--mu);font-size:.95rem}
.side-block ul{margin:.8rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.side-block li{border-block-start:1px solid var(--line);padding-block-start:.55rem;font-size:.94rem;color:var(--tx)}
.side-block-hot{border-block-start-color:rgba(255,138,43,.55)}

@media (max-width:900px){
  .cols-main,.cols-side{grid-column:1/-1}
}


/* =============================================================
   23. UTILITIES
   ============================================================= */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;z-index:90;inset-block-start:.6rem;inset-inline-start:.6rem;
  transform:translateY(-160%);background:var(--amber);color:#190900;
  padding:.7rem 1.1rem;border-radius:999px;font-weight:700;text-decoration:none;
  transition:transform .22s var(--ease);
}
.skip-link:focus-visible{transform:none}

.stack > * + *{margin-block-start:var(--stack,1.2rem)}
.center{margin-inline:auto}
.hide{display:none!important}
.nowrap{white-space:nowrap}
.measure{max-width:48ch}
.hairline{border-block-start:1px solid var(--line)}
.amber{color:var(--amber)}
.muted{color:var(--mu)}
.faint{color:var(--fa)}

/* anchors sitting under the fixed nav */
[id]{scroll-margin-block-start:clamp(4.5rem,9vw,6.5rem)}


/* =============================================================
   24. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .h1 .c{opacity:1;transform:none;animation:none}
  .js [data-reveal]{opacity:1;transform:none}
  .scroll-cue i::after{display:none}
  .dot{opacity:1}
}


/* =============================================================
   25. INNER PAGE TOKENS AND CALM AMBIENT BACKGROUND
   The homepage keeps the living WebGL core. Inner pages get a
   quiet version of the same warm field so they read as family
   without ever competing with the home hero.
   hd.js sets html.no-gl on every page that has no #core, which
   would otherwise fire the loud home fallback glow, so the calm
   selector is written to outrank it and to work with no JS at all.
   ============================================================= */
:root{
  /* the one non-amber signal colour in the system, invalid form state only */
  --err:#FF6B4A;--tx-read:rgba(237,233,227,.86);
}

html.no-gl body.calm::before,
body.calm::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 82% 4%,rgba(255,138,43,.13),rgba(11,11,13,0) 60%),
    radial-gradient(58vmax 58vmax at 4% 86%,rgba(237,233,227,.045),rgba(11,11,13,0) 66%);
}


/* =============================================================
   26. PAGE HEAD ADDITIONS  (see 20 for the base block)
   ============================================================= */
.page-title .ln,.art-title .ln{display:block}

/* an optional closing hairline when the head is not followed by .sec-line */
.page-head-rule{
  grid-column:1/-1;margin-block-start:clamp(1.8rem,3.4vw,2.8rem);
  border-block-start:1px solid var(--line);
}


/* =============================================================
   27. ARTICLE HEAD AND ARTICLE ADDITIONS
   category, date, reading time, then a large two line title
   ============================================================= */
.art-head{
  position:relative;
  padding-block:calc(var(--gut) + clamp(5.5rem,10vw,8.5rem)) clamp(1.8rem,3.6vw,3rem);
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem clamp(.7rem,2vw,1.35rem);
  margin:0 0 clamp(1.1rem,2.2vw,1.8rem);padding:0;list-style:none;
  font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.16em;color:var(--fa);
}
.art-meta > *{display:inline-flex;align-items:center;gap:clamp(.7rem,2vw,1.35rem)}
.art-meta > * + *::before{
  content:"";flex:none;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.6;
}
.art-cat{color:var(--amber)}
/* three meta items wrap on a phone, and a wrapped line must not open with a
   separator dot, so the dots give way to the gap at narrow widths */
@media (max-width:560px){
  .art-meta{gap:.45rem 1.05rem}
  .art-meta > * + *::before{display:none}
}
.art-title{
  margin:0;max-width:20ch;
  font:900 var(--fs-1)/1.05 var(--dsp);letter-spacing:-.012em;
}
.art-lead{margin:clamp(1.2rem,2.4vw,1.9rem) 0 0;color:var(--mu);font-size:clamp(1rem,1.3vw,1.18rem);max-width:52ch}

/* chapter numbering for article headings, the same device as .ch-num */
.article{counter-reset:hd-h2}
.article h2::before{
  counter-increment:hd-h2;
  content:counter(hd-h2,decimal-leading-zero);
  display:block;margin-block-end:.5rem;
  font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.18em;color:var(--amber);
}

/* buttons inside the article keep their own colours, .article a must not win */
.article .btn{text-decoration:none}
.article .btn-primary{color:#190900}
.article .btn-ghost{color:var(--tx)}

/* a header row that reads as fixed: solid surface, heavier hairline under it */
.article thead th{background:var(--s1);border-block-end-color:var(--line2)}
.article .table-scroll{overscroll-behavior-inline:contain}

/* in article CTA, hairline led, never a heavy card */
.art-cta,.article-cta{
  margin:clamp(2.6rem,5vw,4rem) 0 0;
  padding-block-start:clamp(1.2rem,2.4vw,1.8rem);
  border-block-start:1px solid rgba(255,138,43,.55);
}
.art-cta h3,.art-cta h4,.article-cta h3,.article-cta h4{
  margin:0;color:var(--tx);
  font:800 var(--fs-3)/1.15 var(--dsp);letter-spacing:-.006em;
}
.art-cta p,.article-cta p{margin:.75rem 0 1.35rem;color:var(--mu);max-width:46ch}
@media (max-width:520px){
  .art-cta .btn,.article-cta .btn{width:100%;justify-content:space-between}
}


/* =============================================================
   28. BLOG INDEX  (editorial list, same family as .idx)
   ============================================================= */
.posts{margin:0;padding:0;list-style:none;border-block-start:1px solid var(--line)}
.posts li[hidden]{display:none}
.post{
  position:relative;display:grid;align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"cat meta" "title ex";
  gap:.6rem var(--gap);
  padding:clamp(1.3rem,2.6vw,2.1rem) clamp(.5rem,1.4vw,1.2rem);
  border-block-end:1px solid var(--line);
  text-decoration:none;color:var(--tx);
  transition:transform .24s var(--ease),background-color .24s var(--ease);
}
/* the amber hairline slides in from the reading start */
.post::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  width:100%;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease);
}
.post:hover,.post:focus-visible{transform:translateY(-3px);background:rgba(28,28,31,.6)}
.post:hover::before,.post:focus-visible::before{transform:scaleX(1)}

.post-cat{grid-area:cat;font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.18em;color:var(--amber)}
.post-meta{
  grid-area:meta;justify-self:start;display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem clamp(.6rem,1.6vw,1.1rem);margin:0;padding:0;list-style:none;
  font:600 .8rem/1 var(--bdy);letter-spacing:.06em;color:var(--fa);
}
.post-meta > * + *::before{
  content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.6;margin-inline-end:clamp(.6rem,1.6vw,1.1rem);
  vertical-align:middle;
}
.post-t{
  grid-area:title;margin:0;
  font:800 clamp(1.15rem,2.2vw,1.9rem)/1.14 var(--dsp);letter-spacing:-.006em;
  transition:transform .24s var(--ease);
}
.post:hover .post-t,.post:focus-visible .post-t{transform:translateX(-6px)}
.post-ex{grid-area:ex;margin:0;color:var(--mu);font-size:.98rem;max-width:56ch}

@media (max-width:820px){
  .post{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"cat meta" "title title" "ex ex";
    gap:.5rem clamp(.7rem,2vw,1.1rem);
  }
  .post-meta{justify-self:end}
}
@media (max-width:400px){
  .post{grid-template-columns:1fr;grid-template-areas:"cat" "meta" "title" "ex"}
  .post-meta{justify-self:start}
}


/* =============================================================
   29. FORMS
   outlines are never removed, the global :focus-visible ring stays
   ============================================================= */
.form{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.4rem)}
.field{display:grid;gap:.5rem;min-width:0}
.field label{font:700 .92rem/1.3 var(--bdy);color:var(--tx)}
.field label .req{color:var(--amber);margin-inline-start:.2rem}

.field input,.field select,.field textarea{
  width:100%;min-width:0;color-scheme:dark;
  font:400 1rem/1.5 var(--bdy);color:var(--tx);
  min-height:52px;padding:.8rem 1rem;
  background:rgba(237,233,227,.02);
  border:1px solid var(--line2);border-radius:2px;
  transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease);
}
.field textarea{min-height:9rem;line-height:1.7;padding-block:.9rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fa);opacity:1}

.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(237,233,227,.32)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(255,138,43,.55);background:rgba(255,138,43,.05);
}

/* latin and numeric fields type LTR while the text stays on the reading start */
.field input[type="email"],.field input[type="tel"],
.field input[type="url"],.field input[type="number"]{
  direction:ltr;text-align:right;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* error state, colour is never the only signal, .field-msg carries the text */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--err)}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{border-color:var(--err);background:rgba(255,107,74,.06)}

.field-note{margin:0;color:var(--fa);font-size:.86rem;line-height:1.5}
.field-msg{margin:0;color:var(--err);font-size:.86rem;font-weight:600;line-height:1.5}
.field-msg[hidden],.field-note[hidden]{display:none}

.form-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem clamp(1rem,2.4vw,1.8rem);margin-block-start:.3rem;
}
.form-note{
  margin:0;color:var(--fa);font-size:.88rem;line-height:1.55;max-width:44ch;
}
.form-note strong{color:var(--mu);font-weight:700}

@media (max-width:700px){.form-row{grid-template-columns:1fr}}
@media (max-width:520px){
  .form-actions{align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center}
}


/* =============================================================
   30. CONTACT CHANNELS
   ============================================================= */
.channels{margin:0;padding:0;list-style:none;border-block-start:1px solid var(--line)}
.channel{
  position:relative;display:flex;align-items:center;
  gap:clamp(.8rem,1.8vw,1.15rem);min-height:76px;
  padding:clamp(.9rem,1.8vw,1.25rem) clamp(.4rem,1.2vw,.9rem);
  border-block-end:1px solid var(--line);
  text-decoration:none;color:var(--tx);
  transition:transform .24s var(--ease),background-color .24s var(--ease);
}
.channel::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  width:100%;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease);
}
.channel:hover,.channel:focus-visible{transform:translateY(-3px);background:rgba(28,28,31,.6)}
.channel:hover::before,.channel:focus-visible::before{transform:scaleX(1)}

.chan-ico{
  flex:none;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line2);border-radius:2px;color:var(--amber);
  transition:transform .24s var(--ease),border-color .24s var(--ease);
}
.chan-ico svg{width:20px;height:20px}
.channel:hover .chan-ico,.channel:focus-visible .chan-ico{transform:translateY(-2px);border-color:rgba(255,138,43,.55)}

.chan-txt{display:grid;gap:.2rem;min-width:0}
.chan-l{font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.18em;color:var(--fa)}
.chan-v{
  font:700 1rem/1.35 var(--bdy);color:var(--tx);
  overflow-wrap:anywhere;word-break:break-word;
}
/* a latin value keeps its own run, add .ltr in the markup for email and phone */
.chan-v.ltr{text-align:right}


/* =============================================================
   31. TIMELINE  (about page, same rail language as .proc)
   ============================================================= */
.tl{
  --tl-pad:clamp(1.5rem,3.4vw,2.8rem);
  --tl-step:clamp(1.4rem,2.8vw,2.2rem);
  position:relative;margin:0;padding:0;list-style:none;
  padding-inline-start:var(--tl-pad);
}
.tl::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:1px;background:var(--line);
}
.tl-item{
  position:relative;padding-block:var(--tl-step);
  transition:transform .24s var(--ease);
}
.tl-item + .tl-item{border-block-start:1px solid var(--line)}
.tl-item::before{
  content:"";position:absolute;
  inset-block-start:calc(var(--tl-step) + .34em);
  inset-inline-start:calc((var(--tl-pad) + 3.5px) * -1);
  width:7px;height:7px;border-radius:50%;background:var(--amber);
  transition:transform .24s var(--ease);
}
.tl-item:hover{transform:translateX(-4px)}
.tl-item:hover::before{transform:scale(1.45)}

.tl-year{
  display:block;margin:0 0 .55rem;
  font:800 clamp(1.05rem,2vw,1.45rem)/1 var(--dsp);color:var(--amber);
}
.tl-t{margin:0;font:800 clamp(1.1rem,2vw,1.55rem)/1.16 var(--dsp);letter-spacing:-.006em;color:var(--tx)}
.tl-p{margin:.6rem 0 0;color:var(--mu);font-size:.97rem;max-width:52ch}

/* a quiet stage marker for progressions with no year */
.tl-stage{
  display:block;margin:0 0 .55rem;
  font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.18em;color:var(--fa);
}


/* =============================================================
   32. STATEMENT BLOCK  (founder quote, editorial, never a bubble)
   ============================================================= */
.quote{
  margin:0;padding-block-start:clamp(1.3rem,2.6vw,2.1rem);
  border-block-start:1px solid rgba(255,138,43,.55);
}
.quote-p{
  margin:0;max-width:26ch;color:var(--tx);
  font:800 var(--fs-2)/1.26 var(--dsp);letter-spacing:-.008em;
}
.quote-p + .quote-p{margin-block-start:clamp(.9rem,1.8vw,1.4rem)}
.quote-who{
  margin-block-start:clamp(1.4rem,2.8vw,2.1rem);padding-block-start:1rem;
  border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem;
}
.quote-name{font:700 1rem/1.3 var(--bdy);color:var(--tx)}
.quote-role{font:600 .9rem/1.35 var(--bdy);color:var(--fa)}


/* =============================================================
   33. FAQ  (native details and summary)
   ============================================================= */
.faq{margin:0;padding:0;border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{
  position:relative;display:flex;align-items:center;gap:var(--gap);
  min-height:66px;padding:clamp(.95rem,2vw,1.4rem) clamp(.4rem,1.2vw,.9rem);
  cursor:pointer;list-style:none;color:var(--tx);
  font:800 clamp(1.02rem,1.8vw,1.3rem)/1.3 var(--dsp);letter-spacing:-.004em;
  transition:transform .24s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:"";font-size:0}
.faq summary:hover{transform:translateX(-4px)}
/* the outline is replaced, never removed */
.faq summary:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:2px}

/* open marker: an amber tick on the reading start edge */
.faq summary::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:1px;
  background:var(--amber);transform:scaleY(0);transform-origin:top;
  transition:transform .28s var(--ease);
}
.faq details[open] > summary::before{transform:scaleY(1)}

/* rotating indicator, physical borders on purpose so the chevron never flips */
.faq summary::after{
  content:"";flex:none;margin-inline-start:auto;width:10px;height:10px;
  border-right:1.5px solid var(--fa);border-bottom:1.5px solid var(--fa);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .26s var(--ease),border-color .26s var(--ease);
}
.faq details[open] > summary::after{
  transform:translateY(2px) rotate(225deg);border-color:var(--amber);
}

.faq-a{
  margin:0;padding:0 clamp(.4rem,1.2vw,.9rem) clamp(1.2rem,2.4vw,1.8rem);
  color:var(--mu);max-width:64ch;
}
.faq-a > * + *{margin-block-start:.85rem}
.faq-a a{color:var(--amber);text-decoration:underline;text-underline-offset:.22em}


/* =============================================================
   34. CAPABILITY GRID, CARDS AND SPAN MODIFIERS
   the default rhythm is 7/5 5/7 so a row never reads as three
   identical cards, and the :where() wrapper keeps it at zero
   specificity so any .sp-* modifier wins
   ============================================================= */
.g12,.caps{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,3.4rem) var(--gap);
}

:where(.caps > :nth-child(4n+1)){grid-column-end:span 7}
:where(.caps > :nth-child(4n+2)){grid-column-end:span 5}
:where(.caps > :nth-child(4n+3)){grid-column-end:span 5}
:where(.caps > :nth-child(4n)){grid-column-end:span 7}

.cap-card{
  position:relative;padding-block-start:1.3rem;
  border-block-start:1px solid var(--line);
  transition:transform .26s var(--ease);
}
.cap-card::after{
  content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  width:100%;height:1px;background:var(--tx);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.cap-card:hover{transform:translateY(-5px)}
.cap-card:hover::after{transform:scaleX(1)}
.cap-card:focus-within{transform:translateY(-5px)}
.cap-card:focus-within::after{transform:scaleX(1)}

.cap-n{
  display:block;margin-block-end:.85rem;
  font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.18em;color:var(--fa);
  transition:transform .26s var(--ease),color .26s var(--ease);
}
.cap-card:hover .cap-n{transform:translateY(-2px);color:var(--tx)}
.cap-t{margin:0;font:800 var(--fs-3)/1.12 var(--dsp);letter-spacing:-.006em;color:var(--tx)}
.cap-d{margin:.7rem 0 0;color:var(--mu);font-size:.97rem;max-width:44ch}
.cap-list{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.cap-list li{border-block-start:1px solid var(--line);padding-block-start:.5rem;font-size:.94rem;color:var(--tx)}

/* the one loud card per grid */
.cap-lead{border-block-start-color:rgba(255,138,43,.55)}
.cap-lead::after{background:var(--amber)}
.cap-lead .cap-n{color:var(--amber)}
.cap-lead .cap-t{font-size:clamp(1.45rem,2.8vw,2.3rem)}
.cap-lead .cap-list{grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}

/* a quiet variant with no hairline lift, for dense supporting content */
.cap-flat{border-block-start-color:transparent;padding-block-start:0}
.cap-flat::after{display:none}
.cap-flat:hover,.cap-flat:focus-within{transform:none}

/* span and offset modifiers, usable on .caps, .g12 and any 12 column grid
   grid-column-end is used so .sp-* and .push-* can be combined */
.sp-2{grid-column-end:span 2}
.sp-3{grid-column-end:span 3}
.sp-4{grid-column-end:span 4}
.sp-5{grid-column-end:span 5}
.sp-6{grid-column-end:span 6}
.sp-7{grid-column-end:span 7}
.sp-8{grid-column-end:span 8}
.sp-9{grid-column-end:span 9}
.sp-10{grid-column-end:span 10}
.sp-11{grid-column-end:span 11}
.sp-12{grid-column-end:span 12}

.push-1{grid-column-start:2}
.push-2{grid-column-start:3}
.push-3{grid-column-start:4}
.push-4{grid-column-start:5}
.push-5{grid-column-start:6}
.push-6{grid-column-start:7}

/* vertical offsets, the same device the home chapters use */
.drop{margin-block-start:clamp(1.2rem,4vw,4rem)}
.drop-lg{margin-block-start:clamp(2rem,9vw,9rem)}

@media (max-width:1000px){
  .sp-2,.sp-3,.sp-4,.sp-5{grid-column-end:span 6}
  .sp-7,.sp-8,.sp-9,.sp-10,.sp-11{grid-column-end:span 12}
  .push-1,.push-2,.push-3,.push-4,.push-5,.push-6{grid-column-start:auto}
  :where(.caps > *){grid-column-end:span 6}
  .cap-lead .cap-t{font-size:clamp(1.3rem,2.6vw,1.9rem)}
}
@media (max-width:640px){
  .g12,.caps{gap:1.9rem var(--gap)}
  .sp-2,.sp-3,.sp-4,.sp-5,.sp-6,.sp-7,.sp-8,.sp-9,.sp-10,.sp-11{grid-column-end:span 12}
  :where(.caps > *){grid-column-end:span 12}
  .drop,.drop-lg{margin-block-start:0}
  .cap-lead .cap-list{grid-template-columns:1fr}
}


/* =============================================================
   35. INNER PAGE REDUCED MOTION ADDITIONS
   the block above already kills every duration with !important,
   this only removes the states that read wrong when frozen
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  .post:hover,.post:focus-visible,
  .channel:hover,.channel:focus-visible,
  .tl-item:hover,.cap-card:hover,.cap-card:focus-within,
  .faq summary:hover{transform:none}
}


/* =============================================================
   36. NAMED CHAPTER LABEL  (inner pages)
   The home chapters open on a bare number. Inner pages carry a
   named label as well, so it takes the first row beside the
   number and the title drops to the row under it. Works in any
   twelve column head, .sec-head and .talk alike.
   ============================================================= */
.sec-lab{
  grid-column:3/span 8;align-self:end;margin:0;
  font:800 var(--fs-lab)/1 var(--bdy);letter-spacing:.18em;color:var(--amber);
}
@media (max-width:860px){.sec-lab{grid-column:1/-1}}


/* =============================================================
   37. INLINE LINK IN PROSE OUTSIDE .article
   .article a and .faq-a a already cover their own blocks. A page
   section that carries one link inside a paragraph needs the same
   amber underline without inheriting the whole article scale.
   ============================================================= */
.lnk{
  color:var(--amber);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
.lnk:hover,.lnk:focus-visible{color:#FFD9B5}


/* =============================================================
   38. REVEAL DELAY STEPS
   The home page sets --d with an inline style. Inner pages carry
   no inline styles, so the same four steps of the stagger live
   here as classes.
   ============================================================= */
.d1{--d:80ms}
.d2{--d:160ms}
.d3{--d:240ms}
.d4{--d:320ms}

/* =============================================================
   36. STATIC INDEX ROW
   The systems catalog on the home page is a list of links, one per
   destination page. The product index on /pages/development.html
   names products that have no page of their own, so the same
   editorial row is needed with no anchor and no arrow.
   Everything else, the .row-* children included, is already shared
   with .idx a, so only the row box itself is defined here.
   ============================================================= */
.idx-row{
  position:relative;display:grid;align-items:center;gap:var(--gap);
  grid-template-columns:auto minmax(9rem,1.1fr) minmax(0,1.7fr) auto;
  padding:clamp(1.05rem,2.1vw,1.6rem) clamp(.5rem,1.4vw,1.2rem);
  border-block-end:1px solid var(--line);min-height:64px;
}
@media (max-width:900px){
  .idx-row{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"n tag" "name name" "desc desc";
    column-gap:.7rem;row-gap:.45rem;
  }
}


/* =============================================================
   39. READING MODE  |  blog articles
   The living core is a home page device. Inside a long read it
   paints over static body text (fixed canvas z-index 0 beats a
   static block) and it fights the eye. Articles get a flat,
   quiet ground and a tighter vertical rhythm.
   ============================================================= */
body.reading{background:var(--bg)}
body.reading canvas#core{display:none}
body.reading::before{content:none}
/* content always above any ambient layer, whatever it is */
body.reading main,body.reading .art-head,body.reading .foot{position:relative;z-index:1}

/* body copy of a long read must be readable, not decorative */
body.reading .article{
  color:var(--tx-read);
  /* long form measure: about 62 to 70 hebrew characters a line */
  max-width:44rem;
  font-size:clamp(1.06rem,.98rem + .3vw,1.19rem);
  line-height:1.85;
}
body.reading .art-head .wrap{max-width:44rem}
/* heading scale tuned to the measure, not to the home page hero */
body.reading .article h2{font-size:clamp(1.55rem,1.2rem + 1.1vw,2.05rem);line-height:1.24}
body.reading .article h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.42rem);line-height:1.3}
body.reading .art-title{font-size:clamp(1.9rem,1.4rem + 1.9vw,2.9rem);line-height:1.14}
body.reading .article p{margin-block:clamp(.85rem,1.5vw,1.15rem) 0}
body.reading .article h2{margin-block-start:clamp(2.4rem,4vw,3.2rem)}
body.reading .article h3{margin-block-start:clamp(1.6rem,2.6vw,2.1rem)}
body.reading .article ul,body.reading .article ol{margin-block-start:clamp(.85rem,1.5vw,1.15rem)}
body.reading .article li{color:var(--tx-read)}
body.reading .article strong{color:var(--tx)}

/* header sits closer to the text it introduces */
body.reading .art-head{padding-block:calc(var(--gut) + clamp(3.4rem,6vw,5.2rem)) clamp(1.2rem,2.4vw,2rem)}

/* the further reading block was a full home page chapter */
body.reading .sec{padding-block:clamp(3rem,6vw,5rem)}
body.reading .foot{padding-block-start:clamp(3rem,6vw,5rem)}

/* header and body share one measure so the title sits over its own text */
body.reading .art-head .wrap{max-width:70ch;margin-inline:auto}


/* =============================================================
   40. SCROLLBARS AND LINE BREAKING
   Native scrollbars are light grey and read as a browser artifact
   inside a dark editorial page. Every scrollable surface on the
   site gets the brand treatment, and long headings are told how
   to break instead of leaving orphans.
   ============================================================= */

/* Firefox and the modern standard */
html{scrollbar-color:rgba(237,233,227,.22) transparent;scrollbar-width:thin}
.table-scroll,.article > table,.strip,[data-scroll]{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,138,43,.55) rgba(237,233,227,.07);
}

/* WebKit and Blink */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(237,233,227,.20);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(237,233,227,.34);background-clip:content-box}
.table-scroll::-webkit-scrollbar,.article > table::-webkit-scrollbar,.strip::-webkit-scrollbar{height:6px}
.table-scroll::-webkit-scrollbar-track,.article > table::-webkit-scrollbar-track,.strip::-webkit-scrollbar-track{
  background:rgba(237,233,227,.06);border-radius:99px;
}
.table-scroll::-webkit-scrollbar-thumb,.article > table::-webkit-scrollbar-thumb,.strip::-webkit-scrollbar-thumb{
  background:rgba(255,138,43,.5);border:0;border-radius:99px;
}
.table-scroll:hover::-webkit-scrollbar-thumb,.article > table:hover::-webkit-scrollbar-thumb{background:rgba(255,138,43,.75)}

/* a soft edge tells the reader there is more, instead of a raw bar */
.table-scroll{
  position:relative;
  padding-block-end:.55rem;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
@supports not (mask-image:linear-gradient(#000,#000)){.table-scroll{-webkit-mask-image:none;mask-image:none}}

/* narrow screens: shrink the table metrics so the scroll distance is small */
@media (max-width:700px){
  .article table{font-size:.9rem}
  .article table th,.article table td{padding:.6rem .65rem}
  .article .table-scroll > table,.article > table > thead,.article > table > tbody{min-width:27rem}
}
@media (max-width:430px){
  .article table{font-size:.86rem}
  .article table th,.article table td{padding:.55rem .5rem}
  .article .table-scroll > table,.article > table > thead,.article > table > tbody{min-width:24rem}
}

/* ---- line breaking: no orphans, no lopsided headings ---- */
h1,h2,h3,h4,
.sec-title,.art-title,.talk-title,.page-head h1,.foot-giant,.post-t,.cap-t,.bld-t,.tl-t{
  text-wrap:balance;
}
p,.sec-sub,.art-lead,.post-ex,.cap-d,.lead{text-wrap:pretty}
/* a heading must never split a word or let a lone word fall to its own line */
h1,h2,h3,h4,.sec-title,.art-title,.post-t{overflow-wrap:normal;word-break:normal;hyphens:none}