/* ==========================================================================
   Article: the field manual. Loads after brand.css and pages.css. A long read, so the
   texture and glass live in the chrome (hero, contents, callouts) and the
   body stays calm, with a comfortable measure for reading.
   ========================================================================== */

/* hero: the hook, dark, with Fig. 01 set in glass */
.hero{position:relative;margin-top:calc(-1 * var(--masthead-space));padding:calc(clamp(52px,8vw,96px) + var(--masthead-space)) 0 clamp(48px,7vw,80px);
  border-radius:0 0 var(--r-lg) var(--r-lg);color:var(--on-dark);background:
  radial-gradient(50% 70% at 92% 6%,rgba(225,167,77,.24),transparent 62%),
  radial-gradient(42% 60% at 0% 100%,rgba(199,86,53,.20),transparent 62%),
  radial-gradient(36% 50% at 70% 110%,rgba(20,114,162,.22),transparent 65%),
  var(--grain-light) 0 0/200px 200px,var(--esp)}
.hero::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,167,77,.6),transparent)}
.hero__desig{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero__desig .mono{font:600 13px var(--t);letter-spacing:.04em;color:var(--mustard);white-space:nowrap}
.hero__desig .mono:last-child{color:var(--on-dark-mid)}
.rulefill{flex:1;height:1px;background:var(--on-dark-rule)}
.hero h1{font-size:clamp(44px,7vw,84px);line-height:.96;letter-spacing:-.035em;max-width:14ch;margin:0 0 24px}
.hero h1 em{font-style:normal}
.hero__deck{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--on-dark-mid);max-width:54ch;margin:0 0 22px}
.hero__by{display:flex;flex-wrap:wrap;gap:6px 10px;font:500 14px var(--t);color:var(--on-dark-mid);margin-bottom:28px}
.hero__by b{color:var(--on-dark);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(36px,5vw,56px)}

/* Fig. 01 in glass, redrawn light on dark; the FDE marker is the one mustard mark */
.hero .schematic{--rule-2:rgba(251,248,242,.3);margin:0;overflow:hidden;border-radius:var(--r-md);
  border:1px solid rgba(251,248,242,.14);background:rgba(251,248,242,.05);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 80px -36px rgba(0,0,0,.75)}
.schematic__bar{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--on-dark-rule);
  font:600 12.5px var(--t);letter-spacing:.02em;color:var(--on-dark-mid)}
.schematic__bar .mono{font:inherit}
.schematic__body{padding:clamp(14px,3vw,28px);overflow-x:auto}
.schematic svg{display:block;width:100%;min-width:560px;height:auto}
.sch-node{fill:rgba(251,248,242,.03);stroke:rgba(251,248,242,.3);stroke-width:1}
.sch-lbl{font-family:var(--t);font-size:11px;font-weight:600;letter-spacing:.03em;fill:rgba(251,248,242,.62)}
.sch-ttl{font-family:var(--d);font-size:16px;font-weight:600;fill:var(--on-dark)}
.sch-dim{stroke:rgba(251,248,242,.3);stroke-width:1}
.sch-hatch{stroke:rgba(251,248,242,.14);stroke-width:1}
.sch-sig{fill:var(--mustard)}
.sch-sig-s{stroke:var(--mustard);stroke-width:1.5;fill:none}
.sch-sig-lbl{font-family:var(--t);font-size:11px;font-weight:700;letter-spacing:.04em;fill:var(--mustard)}
@media (prefers-reduced-motion:no-preference){
  .sch-pulse{animation:pulse 3.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.5}}
}
/* the bar under Fig. 01: the product fills most of it and stalls; the FDE finishes it */
.sch-bar-track{fill:rgba(251,248,242,.05);stroke:rgba(251,248,242,.3);stroke-width:1}
.sch-bar-fill{transition:filter .6s}
.sch-bar-fill.is-fde{filter:drop-shadow(0 0 6px rgba(225,167,77,.6))}
.sch-bar-pct{font-family:var(--t);font-size:11px;font-weight:700;fill:var(--on-dark);font-variant-numeric:tabular-nums}
.sch-bar-pct.is-fde{fill:var(--mustard)}
.sch-bar-pct.is-stuck{animation:barstuck .35s steps(2) infinite}
.sch-bar-dot,.sch-fde-lbl{transition:opacity .4s}
.sch-bar-dot{transform-box:fill-box;transform-origin:center}
@keyframes barstuck{50%{opacity:.25}}

/* the document: contents on the left, the read on the right */
.doc{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,72px) var(--gut) 0;display:grid;
  grid-template-columns:232px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.rail{position:sticky;top:104px;padding:18px 18px 12px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.rail__hd{font:600 13px var(--t);letter-spacing:.04em;color:var(--mid);margin-bottom:8px}
.rail__list{display:grid}
.rail a{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;padding:7px 10px;margin:0 -10px;border-radius:10px;
  text-decoration:none;font:500 14px/1.35 var(--t);color:var(--mid);transition:background .2s,color .2s}
.rail a i{font:600 12.5px var(--d);font-style:normal;color:var(--rule-2);font-variant-numeric:lining-nums tabular-nums;transition:color .2s}
.rail a:hover{color:var(--ink);background:rgba(251,248,242,.6)}
.rail a.on{color:var(--ink);background:color-mix(in srgb,var(--teal) 11%,rgba(251,248,242,.7))}
.rail a.on i{color:var(--teal)}
.body{min-width:0;max-width:720px}

/* field notes: glass, with the mustard edge doing the work */
.note{position:relative;overflow:hidden;margin:30px 0;padding:22px 26px 20px 30px;max-width:68ch;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mustard)}
.note p{margin:0;font:600 clamp(19px,2vw,22px)/1.4 var(--d);letter-spacing:-.01em;color:var(--ink)}
.note cite{display:block;margin-top:10px;font:600 12.5px var(--t);font-style:normal;letter-spacing:.04em;color:var(--mid)}

/* the comparison: glass, the FDE row tinted teal */
.tablewrap{margin:28px 0;overflow-x:auto;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:15px}
caption{caption-side:top;text-align:left;padding:16px 18px 6px;font:600 13px var(--t);letter-spacing:.03em;color:var(--mid)}
th,td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th{font:600 12.5px var(--t);letter-spacing:.03em;color:var(--mid)}
tbody th{font:600 15.5px/1.3 var(--d);color:var(--ink)}
td{color:color-mix(in srgb,var(--ink) 78%,var(--oat));line-height:1.45}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tr.is-me{background:color-mix(in srgb,var(--teal) 11%,transparent)}
tr.is-me th{color:var(--teal)}

/* what it pays */
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}
.metric{padding:20px 20px 18px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.metric__n{font:600 clamp(26px,3vw,34px)/1 var(--d);letter-spacing:-.025em;color:var(--teal);font-variant-numeric:lining-nums}
.metric__l{margin-top:8px;font:600 13.5px/1.4 var(--t);color:var(--mid)}

/* questions: a glass accordion */
.faq{margin-top:10px;overflow:hidden;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--sh-1)}
.faq details{border-top:1px solid var(--rule)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:18px 54px 18px 22px;font:600 17px/1.4 var(--d);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:24px;width:9px;height:9px;border-right:1.8px solid var(--mid);
  border-bottom:1.8px solid var(--mid);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.faq summary:hover{color:var(--teal)}
.faq details[open]{background:color-mix(in srgb,var(--teal) 5%,transparent)}
.faq__a{padding:0 22px 20px}
.faq__a p{margin:0;font-size:16.5px;line-height:1.65;color:color-mix(in srgb,var(--ink) 82%,var(--oat));max-width:66ch}

/* entrances: the hero settles in on load */
@media (prefers-reduced-motion:no-preference){
  .hero .wrap > *{animation:enter .8s cubic-bezier(.2,.7,.2,1) both}
  .hero .schematic{animation-delay:.12s}
  @keyframes enter{from{opacity:0;transform:translateY(12px)}}
}
@media (prefers-reduced-motion:reduce){ .btn svg,.spoke__go svg,.rail a,.faq summary::after{transition:none} }

@media (max-width:960px){ .doc{grid-template-columns:1fr} .rail{display:none} .body{max-width:none} }
@media (max-width:600px){ .metrics{grid-template-columns:1fr} .spoke{flex-direction:column;align-items:flex-start} .sec__hd{gap:12px} .hero__desig .mono:last-child{display:none} }

/* Company marks in the byline. The logos ship in their own colours and all
   five read on espresso, so no tile needed here, unlike the spokes. */
.hero__co{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hero__co img{width:15px;height:15px;object-fit:contain;border-radius:3px;display:block}

/* Light variant of the schematic frame. Fig. 01 lives in the espresso hero;
   Fig. 02 sits mid-article on oat, so the same frame needs ink on paper. */
.schematic--light{--rule-2:var(--rule);margin:0;overflow:hidden;
  border-radius:var(--r-md);border:1px solid var(--rule);
  background:rgba(251,248,242,.62)}
.schematic--light .schematic__bar{border-bottom-color:var(--rule);color:var(--mid)}
.fig2-ax{font:600 11.5px var(--t);letter-spacing:.04em;fill:var(--mid);opacity:.85}
.fig2-zone{font:600 11.5px var(--t);letter-spacing:.02em;fill:var(--mid);opacity:.85}
.fig2-dot circle{fill:var(--d)}
.fig2-zone--me{fill:var(--teal);opacity:.75}
.fig2-role{font:600 14px var(--t);fill:var(--ink)}
.fig2-me{font:700 15px var(--t);letter-spacing:.04em;fill:var(--teal)}