/* ES Producation Groups Berhad, Canopy: inner pages (design-system/DESIGN-SYSTEM.md).
   Loaded AFTER css/tokens.css, which is the locked home page's stylesheet verbatim and is never edited.
   Every rule here extends the home page's own vocabulary: fine ink rules over hairlines, small-caps labels with the
   four-colour key, serif display with a soft second clause, colour chips, corner-marked figures, paper / white / stone
   grounds. No new colours, no new typefaces, no radius above 2px, no shadow cards. Smallest text 12px.
   Written 20 Oct 2026 (Canopy AEO package, design helper). */

/* ---------- page frame ---------- */
.ip-main{display:block;--c:var(--ink)}
.ip-main :is(h2,h3)[id],.ip-main [id].chap{scroll-margin-top:calc(var(--hdr) + 24px)}
.ip-main :is(.prose,.fsheet,.note,.ledger,.ledger-src,.places,.terms,.stat,.iclist,.mast__answer,.mast__meta,.ccard__row,.colophon) a:not([class]){color:var(--ink);text-decoration:underline;text-decoration-color:rgba(22,24,28,.32);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color .3s}
.ip-main :is(.prose,.fsheet,.note,.ledger,.ledger-src,.places,.terms,.stat,.iclist,.mast__answer,.mast__meta,.ccard__row,.colophon) a:not([class]):hover{text-decoration-color:var(--ink)}
.nav a[aria-current=page]::after{transform:scaleX(1)}

/* ---------- breadcrumb ---------- */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:13px;color:var(--ink-2);line-height:1.4}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:18px;height:1px;background:var(--rule-2);margin:0 10px}
.crumbs a{color:var(--ink-2);border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.crumbs a:hover{color:var(--ink);border-color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- masthead (every inner page's first screen) ---------- */
.mast{position:relative;padding:calc(var(--hdr) + clamp(22px,3.4vw,48px)) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}
.mast__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,80px);align-items:end;margin-top:clamp(28px,3.6vw,52px)}
.mast__text>.label{margin-bottom:clamp(18px,2.4vw,30px)}
.mast__h1{font-size:clamp(42px,4.9vw,76px);max-width:16ch;text-wrap:balance}
.mast__h1 .soft{color:var(--ink-3)}
.mast__answer{margin-top:clamp(20px,2.4vw,30px);font-size:clamp(17px,1.28vw,19.5px);line-height:1.58;color:var(--ink-2);max-width:54ch}
.mast__meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--ink-2)}
.mast__meta b{font-weight:600;color:var(--ink)}
/* the first screen rises in (transform only, never opacity: the heading and the answer stay paintable at once, so the
   largest paint is not held back -- the home page does the same for its answer, hero-rise) */
.js .mast__h1,.js .mast__answer{animation:hero-rise 1s var(--ease) both}
.js .mast__answer{animation-delay:.08s}
.mast__device{min-width:0}

/* the home page's label, one step darker inside inner pages (ink-2: 8:1 on paper, 6.9:1 on stone; the home's ink-3 is
   3.9:1 and 3.4:1, under the 4.5:1 small text needs) -- same face, size, tracking and key bar */
.ip-main .label{color:var(--ink-2)}
.ip-main .label b{color:var(--ink)}
/* chip label: the page's own colour beside the section label */
.label .chip{width:12px;height:12px}
.label .chip--four,.chip--four{background:var(--key)}

/* title block (a drawing's title block: the group report's cover sheet) */
.tblock{border:1px solid var(--ink);background:var(--white)}
.tblock__head{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--ink)}
.tblock__head svg{width:40px;height:33px;flex:none}
.tblock__head b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.012em;line-height:1.1}
.tblock__head span{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-top:4px}
.tblock dl{display:grid;grid-template-columns:1fr 1fr}
.tblock dl div{padding:14px 18px;border-bottom:1px solid var(--rule)}
.tblock dl div:nth-child(odd){border-right:1px solid var(--rule)}
.tblock dl div.span{grid-column:1 / -1;border-right:0}
.tblock dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.tblock dd{margin-top:4px;font-family:var(--serif);font-size:19px;letter-spacing:-.01em;line-height:1.25}
.tblock__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.tblock__foot i{display:block;width:72px;height:3px;background:var(--key)}

/* figure: the home page's corner-marked frame, captioned "Fig. n" */
.fig{position:relative;margin:0}
.fig__frame{position:relative;padding:clamp(10px,1.3vw,18px);background:var(--white)}
.fig__frame::before,.fig__frame::after,.fig__frame>.cm::before,.fig__frame>.cm::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--ink-4)}
.fig__frame::before{left:0;top:0;border-left-width:1px;border-top-width:1px}
.fig__frame::after{right:0;top:0;border-right-width:1px;border-top-width:1px}
.fig__frame>.cm::before{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.fig__frame>.cm::after{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.fig__frame img{width:100%;height:auto}
.fig--paper .fig__frame{background:transparent}
.fig figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.fig figcaption b{flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
/* captions in UPRIGHT serif: an italic serif anywhere on the page fetches a third font file (63 KB) during the first
   paint and pushes the phone's largest paint past 2.5 s; the home page keeps its italic, inner pages do not need it */
.fig figcaption em{font-family:var(--serif);font-style:normal;font-size:15px;color:var(--ink-2)}
/* a figure inside a chapter: the drawing beside its caption, annual-report style */
.fig--side{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.fig--side .fig__frame{max-width:640px}
@media (min-width:960px){
  .fig--side{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(28px,3.4vw,56px);align-items:start}
  .fig--side figcaption{flex-direction:column;gap:8px;margin:0;padding-top:16px;border-top:1px solid var(--ink)}
  .fig--side figcaption em{font-size:clamp(17px,1.35vw,20px);line-height:1.4;color:var(--ink)}
}

/* facts strip under a masthead (the home hero's strip, as a sheet's key figures) */
.strip{border-top:1px solid var(--ink);margin-top:clamp(36px,4.4vw,64px)}
.strip dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.strip div{padding:16px 18px 4px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.strip div+div{padding-left:20px;border-left:1px solid var(--rule)}
.strip dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.strip dd{font-family:var(--serif);font-size:clamp(18px,1.45vw,22px);letter-spacing:-.01em;line-height:1.22}

/* ---------- photographs ---------- */
.photo{position:relative;margin:0;background:var(--stone);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--band{height:clamp(260px,40vw,600px)}
.photo--frame{aspect-ratio:3/2}
.photo figcaption{position:absolute;left:var(--pad);bottom:clamp(14px,2vw,28px);max-width:min(46ch,calc(100% - 2 * var(--pad)));background:rgba(246,244,239,.92);padding:11px 15px;font-size:13px;line-height:1.45;color:var(--ink)}
.photo figcaption b{font-weight:600}
.photo--frame figcaption{left:14px;bottom:14px;max-width:calc(100% - 28px)}
.photo--product{background:radial-gradient(120% 90% at 50% 100%,#E2DDD2 0,#EFEBE3 48%,#F7F5F0 100%);aspect-ratio:12/5}
.photo--product img{object-fit:contain;padding:9% 8% 13%;filter:drop-shadow(0 22px 22px rgba(60,48,36,.16))}
.photo--product::after{content:"";position:absolute;left:18%;right:18%;bottom:11%;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,32,24,.2),transparent)}

/* ---------- the document: rail + chapters ---------- */
.doc{padding-block:clamp(56px,7vw,112px)}
.doc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.doc__rail{display:none}
.rail-m{margin:0 0 clamp(36px,5vw,56px);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.rail-m>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;cursor:pointer;list-style:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.rail-m>summary::-webkit-details-marker{display:none}
.rail-m>summary span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-left:auto}
.rail-m>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.rail-m[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.rail-m .rail__list{padding-bottom:12px}
@media (min-width:1180px){
  .doc__grid{grid-template-columns:minmax(190px,232px) minmax(0,1fr);gap:clamp(48px,4.4vw,80px)}
  .doc__rail{display:block;align-self:stretch}
  .doc__rail>div{position:sticky;top:calc(var(--hdr) + 28px);max-height:calc(100vh - var(--hdr) - 48px);overflow-y:auto;scrollbar-width:thin;padding-bottom:12px}
  .rail-m{display:none}
}
.rail__label{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.rail__label .k{width:22px;height:2px;background:var(--key);flex:none}
.rail__list{counter-reset:r}
.rail__list li{border-bottom:1px solid var(--rule)}
.rail__list a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:baseline;gap:6px;padding:9px 0;font-size:14px;line-height:1.35;color:var(--ink-2);transition:color .3s}
.rail__list a:hover{color:var(--ink)}
.rail__list a .n{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rail__list a .chip{width:9px;height:9px;align-self:center}
.rail__list a[aria-current=page],.rail__list a[aria-current=true]{color:var(--ink);font-weight:600}
.rail__list a[aria-current=page] .n{color:var(--ink)}
.rail__list a[aria-current=page]{box-shadow:inset 3px 0 0 var(--c,var(--ink));padding-left:10px;margin-left:-10px;grid-template-columns:30px minmax(0,1fr) auto}
.rail__sub{margin-top:26px}
.rail__sub .rail__list a{grid-template-columns:minmax(0,1fr);padding:7px 0 7px 12px;border-left:2px solid transparent;margin-left:-1px;font-size:13.5px}
.rail__sub .rail__list{border-left:1px solid var(--rule)}
.rail__sub .rail__list li{border-bottom:0}
.rail__sub .rail__list a[aria-current=true]{border-left-color:var(--c,var(--ink));color:var(--ink)}
.rail__foot{margin-top:24px;font-size:13px;color:var(--ink-2);line-height:1.5}
.rail__foot a{display:inline-flex;margin-top:10px}

/* a chapter: number + title, prose in the reading measure, notes in the margin, exhibits wider than the prose */
.chap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.chap+.chap{margin-top:clamp(64px,7.4vw,112px)}
.chap__head{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:20px;border-top:1px solid var(--ink);margin-bottom:clamp(22px,2.4vw,32px)}
.chap__no{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.chap__no b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.chap__no .chip{width:10px;height:10px}
.chap__title{font-family:var(--serif);font-optical-sizing:auto;font-weight:380;font-size:clamp(30px,2.9vw,44px);line-height:1.08;letter-spacing:-.018em;max-width:24ch;text-wrap:balance}
.chap__title .soft{color:var(--ink-3)}
.prose{font-size:clamp(16px,1.18vw,17.5px);line-height:1.68;color:var(--ink-2);max-width:66ch}
.prose>*+*{margin-top:1em}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose h3{font-family:var(--sans);font-weight:600;font-size:1.06em;color:var(--ink);letter-spacing:-.005em;margin-top:1.8em}
.prose h3+p{margin-top:.5em}
.prose ul.dash li{position:relative;padding-left:20px}
.prose ul.dash li+li{margin-top:.45em}
.prose ul.dash li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--ink)}
.chap .note{margin:22px 0 4px;padding:14px 0 2px 16px;border-left:2px solid var(--c,var(--ink));font-size:14px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.chap .note b{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:4px}
.wide{margin-top:clamp(34px,3.6vw,52px);margin-bottom:6px;min-width:0}
.wide+.prose{margin-top:clamp(28px,3vw,40px)}
@media (min-width:1180px){
  .chap{grid-template-columns:minmax(0,66ch) minmax(180px,1fr);column-gap:clamp(40px,4vw,64px);grid-auto-flow:row dense}
  .chap>*{grid-column:1}
  .chap>.chap__head,.chap>.wide{grid-column:1 / -1}
  .chap__head{grid-template-columns:minmax(0,66ch) minmax(180px,1fr);column-gap:clamp(40px,4vw,64px);align-items:end}
  .chap__head .chap__no{grid-column:1}
  .chap__head .chap__title{grid-column:1}
  .chap>.note{grid-column:2;grid-row:span 3;align-self:start;margin:4px 0 0;padding:2px 0 2px 16px}
}

/* ---------- fact sheet (dl) ---------- */
.fsheet{border-top:1px solid var(--ink)}
.fsheet div{display:grid;grid-template-columns:minmax(130px,200px) minmax(0,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--rule)}
.fsheet dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);font-weight:600;padding-top:4px}
.fsheet dd{color:var(--ink);line-height:1.5}
.fsheet dd small{display:block;color:var(--ink-2);font-size:13.5px;margin-top:2px}
.fsheet--two{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,48px);border-top:0}
.fsheet--two>div:nth-child(-n+2){border-top:1px solid var(--ink)}

/* ---------- ledger (a real table, the register look) ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.ledger-cap{padding:0 0 14px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.ledger-cap b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.012em;color:var(--ink);margin-bottom:4px}
.ledger-wrap--narrow{max-width:720px}
.ledger td a{overflow-wrap:anywhere}
.ledger--num td.r{font-family:var(--serif);font-size:19px;letter-spacing:-.005em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.mark{display:inline-block;width:9px;height:9px;margin-right:9px;box-shadow:inset 0 0 0 1.5px var(--ink);vertical-align:1px}
.mark--on{background:var(--ink)}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule)}
.ledger thead th{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-top:0;vertical-align:bottom}
.ledger tbody th{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.ledger td{color:var(--ink-2)}
.ledger .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:clamp(24px,4vw,64px)}
.ledger .r:last-child{padding-right:0}
.ledger .chip{width:10px;height:10px;margin-right:10px;vertical-align:baseline}
.ledger-box{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger-src{margin-top:12px;font-size:13px;color:var(--ink-2)}

/* ---------- years (milestones as a ruled timeline) ---------- */
.years{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));border-top:1px solid var(--ink)}
.years li{position:relative;padding:22px 20px 26px 0}
.years li+li{padding-left:20px;border-left:1px solid var(--rule)}
.years li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.years li+li::before{left:-4px}
.years .y{font-family:var(--serif);font-size:clamp(28px,2.5vw,38px);letter-spacing:-.02em;line-height:1}
.years .y small{font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--ink-2);margin-left:6px;font-weight:500}
.years h3{font-size:15px;font-weight:600;margin-top:12px;letter-spacing:-.005em;line-height:1.3}
.years p{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.5}

/* ---------- a single checkable figure ---------- */
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:end;padding:clamp(24px,3vw,40px);background:var(--white);box-shadow:inset 0 0 0 1px var(--rule),inset 0 4px 0 var(--c,var(--ink))}
.stat .stat__n{font-family:var(--serif);font-optical-sizing:auto;font-weight:360;font-size:clamp(64px,8vw,120px);letter-spacing:-.04em;line-height:.86}
.stat .stat__n small{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-top:14px}
.stat p{font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--ink);max-width:44ch}
.stat cite{display:block;margin-top:12px;font-style:normal;font-size:13px;color:var(--ink-2)}

/* ---------- quotation (the group's own words) ---------- */
.words{padding-top:24px;border-top:1px solid var(--ink)}
.words p{font-family:var(--serif);font-style:normal;font-size:clamp(21px,1.9vw,28px);line-height:1.36;letter-spacing:-.01em;color:var(--ink);max-width:40ch}
.words cite{display:block;margin-top:16px;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}

/* ---------- icon list (the icon family marking what a page lists) ---------- */
.ic{width:28px;height:28px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.ic .ch{fill:var(--c,var(--red));stroke:none}
.ic .ch4{stroke:none}
.ic--lg{width:40px;height:40px}
.iclist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ink)}
.iclist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:22px 24px 24px 0;border-bottom:1px solid var(--rule)}
.iclist li:nth-child(2n){padding-left:24px;border-left:1px solid var(--rule)}
.iclist h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.6vw,24px);letter-spacing:-.012em;line-height:1.15}
.iclist p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.iclist--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.iclist--three li:nth-child(2n){padding-left:0;border-left:0}
.iclist--three li:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--rule)}

/* ---------- places (where the group is) ---------- */
.places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.places li{padding:20px 20px 24px 0;display:flex;flex-direction:column;gap:6px}
.places li+li{padding-left:20px;border-left:1px solid var(--rule)}
.places .ic{margin-bottom:8px}
.places b{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.012em;line-height:1.15}
.places span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.places p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.places--three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- companies row (the five, as chips) ---------- */
.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.five a{display:flex;flex-direction:column;gap:8px;padding:18px 16px 22px 0;position:relative;transition:background .4s}
.five a+a{padding-left:16px;border-left:1px solid var(--rule)}
.five a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.five a:hover::after,.five a[aria-current=page]::after{transform:scaleX(1)}
.five .chip{width:22px;height:8px}
.five b{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.012em;line-height:1.15}
.five span{font-size:13.5px;color:var(--ink-2);line-height:1.4}

/* ---------- next in the report + related ---------- */
.next{border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
.next a{display:flex;flex-direction:column;gap:6px;padding:22px 24px 26px 0;transition:color .3s}
.next a+a{padding-left:24px;border-left:1px solid var(--rule);text-align:right;align-items:flex-end}
.next span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.next b{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.015em;line-height:1.12}
.next a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.related{margin-top:clamp(40px,4.4vw,64px)}
.related>p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.related>p .k{width:22px;height:2px;background:var(--key)}
.related ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.related li a{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 18px 0;font-size:15px;line-height:1.4;color:var(--ink)}
.related li+li a{padding-left:16px;border-left:1px solid var(--rule)}
.related li a .chip{margin-top:5px;width:10px;height:10px}
.related li a:hover span{text-decoration:underline;text-underline-offset:3px}

/* ---------- closing contact band ---------- */
.closer{background:var(--stone);padding-block:clamp(64px,8vw,120px)}
.closer__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,110px);align-items:end}
.closer h2{font-size:clamp(40px,5vw,80px)}
.closer h2 span{color:var(--ink-3)}
.closer p.lede{margin-top:22px;max-width:46ch}
.closer__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.closer__cta .btn--line{background:rgba(255,255,255,.5)}
.closer__k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:12px}
.closer dl{border-top:1px solid var(--ink)}
.closer dl div{display:grid;grid-template-columns:minmax(96px,124px) minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid rgba(22,24,28,.16)}
.closer dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);padding-top:3px}
.closer dd a{border-bottom:1px solid rgba(22,24,28,.25)}
.closer dd a:hover{border-color:var(--ink)}

/* ---------- company masthead (one column picked out) ---------- */
.mast--column{background:linear-gradient(var(--paper),var(--paper))}
.mast--column .mast__grid{align-items:center}
.mast__kicker{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:20px}
.mast__kicker .chip{width:14px;height:14px}
.mast__kicker b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.mast__legal{margin-top:14px;font-size:14px;color:var(--ink-2);letter-spacing:.01em}
.mast--column .mast__h1{font-size:clamp(52px,6.6vw,104px);letter-spacing:-.03em;line-height:.98}
.mast--column .fig{max-width:560px;margin-left:auto}

/* ---------- hub: contents + guide cards (update_hub.py clones the first card) ---------- */
.contents{border-top:1px solid var(--ink)}
.contents li{border-bottom:1px solid var(--rule)}
.contents a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:14px 0;font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);letter-spacing:-.01em;line-height:1.25}
.contents a .n{font-family:var(--sans);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.contents a svg{width:12px;height:12px;align-self:center;transition:transform .5s var(--ease)}
.contents a:hover svg{transform:translateX(4px)}
.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(24px,3vw,48px)}
.gcard{min-width:0}
.gcard>a{display:flex;flex-direction:column;height:100%;color:var(--ink)}
.gcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--stone)}
.gcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gcard>a:hover .gcard__media img{transform:scale(1.025)}
.gcard__body{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:3px solid var(--ink);margin-top:-3px;position:relative;flex:1}
.gcard__tag{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.gcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2vw,31px);letter-spacing:-.016em;line-height:1.12;text-wrap:balance}
.gcard p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.gcard time{margin-top:auto;padding-top:6px;font-size:13px;color:var(--ink-2)}
.gcard>a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* ---------- FAQ ---------- */
.qa-set+.qa-set{margin-top:clamp(56px,6vw,88px)}
.qa-set__head{display:flex;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.qa-set__head .ic{width:32px;height:32px}
.qa-set__head h2{font-family:var(--serif);font-weight:380;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.018em;line-height:1.08}
.qa-set__head span{margin-left:auto;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);white-space:nowrap}
.qa{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:24px 0 26px;border-bottom:1px solid var(--rule)}
.qa__n{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:6px}
.qa h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.7vw,26px);letter-spacing:-.012em;line-height:1.2;max-width:34ch}
.qa .prose{grid-column:2;margin-top:8px}
.qa__side{grid-column:2}
.qa .src{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-2);display:flex;gap:8px;align-items:baseline}
.qa .src b{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink)}
@media (min-width:1180px){
  .qa{grid-template-columns:44px minmax(0,66ch) minmax(150px,1fr);column-gap:clamp(20px,3vw,48px)}
  .qa h3{grid-column:2}
  .qa__side{grid-column:3;grid-row:1 / span 2;align-self:start}
  .qa .src{flex-direction:column;gap:4px;margin-top:6px;padding-left:14px;border-left:1px solid var(--ink)}
}

/* ---------- glossary ---------- */
.az{display:flex;flex-wrap:wrap;gap:6px}
.az a,.az span{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-family:var(--serif);font-size:19px;box-shadow:inset 0 0 0 1px var(--rule-2);border-radius:2px;color:var(--ink);transition:box-shadow .3s,background .3s}
.az a:hover{box-shadow:inset 0 0 0 1px var(--ink);background:var(--white)}
.az span{color:var(--ink-4);box-shadow:inset 0 0 0 1px var(--rule)}
.terms-letter{display:flex;align-items:baseline;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--ink);margin-top:clamp(44px,5vw,72px)}
.terms-letter:first-child{margin-top:0}
.terms-letter h2{font-family:var(--serif);font-weight:380;font-size:clamp(40px,4vw,60px);line-height:1;letter-spacing:-.02em}
.terms-letter span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.terms>div{display:grid;grid-template-columns:minmax(200px,5fr) minmax(0,9fr);gap:12px clamp(20px,3vw,48px);padding:22px 0 24px;border-bottom:1px solid var(--rule)}
.terms dt{display:flex;gap:14px;align-items:flex-start}
.terms dt .ic{margin-top:2px}
.terms dt b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.6vw,25px);letter-spacing:-.012em;line-height:1.15}
.terms dt small{display:block;margin-top:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.terms dd{font-size:clamp(15.5px,1.12vw,17px);line-height:1.62;color:var(--ink-2);max-width:66ch}
.terms dd p+p{margin-top:.7em}
.terms dd .see{display:inline-flex;margin-top:12px;font-size:13.5px}

/* ---------- contact ---------- */
.mast--card .mast__h1{font-size:clamp(52px,6.4vw,104px);max-width:12ch}
.ccard{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule),inset 0 4px 0 var(--red)}
.ccard__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:18px 22px;border-bottom:1px solid var(--rule)}
.ccard__row:last-child{border-bottom:0}
.ccard__row span{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.ccard__row b,.ccard__row a.big{display:block;margin-top:3px;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.ccard__row a.big{border-bottom:0;text-decoration:underline;text-decoration-color:rgba(22,24,28,.25);text-underline-offset:4px;text-decoration-thickness:1px}
.ccard__row small{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ccard__cta{display:flex;flex-wrap:wrap;gap:10px;padding:18px 22px 22px}

/* ---------- legal notice ---------- */
.clause{padding-bottom:6px}
.clause+.clause{margin-top:clamp(48px,5vw,72px)}

/* ---------- 404 ---------- */
.lost{padding:calc(var(--hdr) + clamp(28px,4vw,56px)) 0 clamp(56px,7vw,104px)}
.lost__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center;margin-top:clamp(24px,3vw,44px)}
.lost .mast__h1{max-width:13ch}
.lost__h{margin-top:30px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.lost__links{margin-top:12px;border-top:1px solid var(--ink)}
.lost__links a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
.lost__links a span{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lost__links a svg{width:12px;height:12px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .places:not(.places--three){grid-template-columns:repeat(2,minmax(0,1fr))}
  .places:not(.places--three) li:nth-child(odd){padding-left:0;border-left:0}
  .places:not(.places--three) li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:959px){
  .mast__grid,.closer__grid,.lost__grid{grid-template-columns:1fr}
  .mast__grid{align-items:start}
  .mast--column .fig{margin-left:0;max-width:520px}
  .strip dl{grid-template-columns:1fr 1fr}
  .strip div:nth-child(3){padding-left:0;border-left:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--rule)}
  .years{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);margin-left:4px}
  .years li,.years li+li{padding:16px 0 18px 24px;border-left:0}
  .years li+li{border-top:1px solid var(--rule)}
  .years li::before,.years li+li::before{left:-4px;top:24px}
  .places--three{grid-template-columns:1fr}
  .places--three li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .iclist,.iclist--three{grid-template-columns:1fr}
  .iclist li:nth-child(2n),.iclist--three li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .five{grid-template-columns:1fr}
  .five a+a{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .five a{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:14px 0}
  .five span{flex-basis:100%}
  .five .chip{height:4px}
  .related ul{grid-template-columns:1fr}
  .related li+li a{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .guides{grid-template-columns:1fr}
  .terms>div{grid-template-columns:1fr;gap:8px}
  .fsheet--two{grid-template-columns:1fr}
  .fsheet--two>div:nth-child(2){border-top:0}
  .stat{grid-template-columns:1fr;align-items:start}
}
@media (max-width:600px){
  .mast__h1{font-size:clamp(38px,10.4vw,52px)}
  .mast--column .mast__h1{font-size:clamp(50px,15vw,72px)}
  .mast--column .fig{max-width:300px}
  .mast--card .mast__h1{font-size:clamp(46px,13vw,64px)}
  .tblock dl{grid-template-columns:1fr}
  .tblock dl div:nth-child(odd){border-right:0}
  .places,.places--three{grid-template-columns:1fr}
  .places li+li,.places li:nth-child(odd){padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .fsheet div{grid-template-columns:1fr;gap:4px}
  .next{grid-template-columns:1fr}
  .next a+a{padding-left:0;border-left:0;border-top:1px solid var(--rule);text-align:left;align-items:flex-start}
  .closer dl div{grid-template-columns:1fr;gap:4px}
  .qa{grid-template-columns:30px minmax(0,1fr);gap:4px 10px}
  .qa-set__head span{display:none}
  .ledger{font-size:14.5px}
  .ledger tbody th{font-size:17px}
  .photo figcaption{position:static;max-width:none;background:var(--paper);padding:10px 0 0;font-size:13px}
  .photo--band{height:auto}
  .photo--band img{aspect-ratio:4/3;height:auto}
  .photo--frame{aspect-ratio:auto}
  .photo--frame img{aspect-ratio:3/2;height:auto}
  .photo--frame figcaption{padding:10px 0 0}
  .stat .stat__n{font-size:clamp(64px,20vw,96px)}
}
@media (prefers-reduced-motion:reduce){
  .js .mast__h1,.js .mast__answer{animation:none}
}

/* ---------- pages without a rail (contact, the hub) ---------- */
.doc--plain .chap+.chap,.doc--plain .hubsec+.hubsec{margin-top:clamp(64px,7.4vw,112px)}

/* FAQ: the topic board beside the answer */
.topics{border-top:1px solid var(--ink)}
.topics__head{display:flex;align-items:baseline;gap:12px;padding:14px 0;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.topics__head b{font-family:var(--serif);font-size:clamp(40px,4vw,60px);font-weight:380;letter-spacing:-.03em;line-height:.9;color:var(--ink);text-transform:none}
.topics__grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.topics__grid a{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px 0;border-bottom:1px solid var(--rule);transition:background .3s}
.topics__grid a:nth-child(2n){padding-left:16px;border-left:1px solid var(--rule)}
.topics__grid a .ic{margin-bottom:6px}
.topics__grid b{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.01em;line-height:1.2}
.topics__grid span{font-size:13px;color:var(--ink-2)}
.topics__grid a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* glossary: the A-Z board */
.azbox{border-top:1px solid var(--ink);padding-top:14px}
.azbox__n{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.azbox__n b{font-family:var(--serif);font-size:clamp(40px,4vw,60px);font-weight:380;letter-spacing:-.03em;line-height:.9;color:var(--ink);margin-right:10px}
.azbox .az a,.azbox .az span{width:34px;height:34px;font-size:17px}
.azbox__kinds{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-2)}
.azbox__kinds span{display:inline-flex;align-items:center;gap:8px}
.azbox__kinds .ic{width:20px;height:20px}
.rail__az a{grid-template-columns:30px minmax(0,1fr)}
.rail__az a .n{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1}
.rail__az a span+span{font-size:12.5px;line-height:1.4}
.terms-src{margin-top:28px;font-size:13px;color:var(--ink-2);max-width:80ch}
.terms-src a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(22,24,28,.32)}

/* hub */
.contents__head{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);padding-bottom:12px}
.hubsec__head{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:20px;border-top:1px solid var(--ink);margin-bottom:clamp(28px,3vw,44px)}
.hubsec__note{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:62ch}
@media (min-width:960px){
  .hubsec__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,4vw,64px);align-items:end}
  .hubsec__head .chap__no{grid-column:1 / -1}
  .hubsec__note{grid-column:2;grid-row:2}
}

/* privacy: the notice in short, as a card */
.fsheet--card{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule),inset 0 4px 0 var(--blue);border-top:0;padding:6px 22px}
.fsheet--card div{grid-template-columns:minmax(110px,150px) minmax(0,1fr)}
.fsheet--card div:last-child{border-bottom:0}
@media (max-width:600px){.fsheet--card div{grid-template-columns:1fr}}
.clauses .chap__title{max-width:30ch}

.qa-fig,.terms-fig{padding:clamp(28px,3vw,44px) 0;border-bottom:1px solid var(--rule)}
.qa-fig .fig__frame,.terms-fig .fig__frame{max-width:520px}

/* ---------- round-1 review additions (20 Oct 2026) ---------- */
/* inline colour chips: [[red]] in the copy */
.chip--inline{width:10px;height:10px;margin:0 6px 0 2px;vertical-align:baseline;transform:translateY(-1px)}
/* company kicker: the sheet number and the company count apart */
.mast__kicker .sep{width:4px;height:4px;border-radius:50%;background:var(--ink-4);flex:none}
.mast__kicker .of{color:var(--ink-2)}
/* the title block as the sheet's contents */
.tblock__k{padding:14px 18px 4px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.tblock__toc{padding:0 18px 6px}
.tblock__toc li+li{border-top:1px solid var(--rule)}
.tblock__toc a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px 0;font-family:var(--serif);font-size:19px;letter-spacing:-.01em;line-height:1.25}
.tblock__toc a .n{font-family:var(--sans);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tblock__toc a svg{width:12px;height:12px;transition:transform .5s var(--ease)}
.tblock__toc a:hover svg{transform:translateX(4px)}
.tblock__foot{border-top:1px solid var(--ink)}
/* a margin pull quote over the four-colour key */
.chap .note--raw{border-left:0;padding:0}
.note--raw .words{border-top:0;padding-top:18px;position:relative}
.note--raw .words::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--key)}
.note--raw .words p{font-size:clamp(19px,1.5vw,22px);line-height:1.38}
/* small figures beside text */
.mfig{margin:0;max-width:300px}
.mfig .fig__frame{padding:8px}
.mfig .fig__frame img{width:100%;height:auto}
.mfig figcaption{margin-top:10px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.mfig figcaption b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-right:4px}
.qa__side .mfig{margin-top:22px;max-width:240px}
.terms dd{display:flow-root}
.mfig--float{float:right;width:min(42%,260px);margin:4px 0 12px 28px}
@media (max-width:600px){.mfig--float{float:none;width:100%;max-width:none;margin:0 0 16px}}
/* FAQ: each topic a chapter -- its head lists its own questions; topics alternate paper and white grounds */
.qa-set__head{flex-wrap:wrap}
.qa-set__qs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;padding-left:48px;font-size:13.5px;line-height:1.4}
.qa-set__qs a{display:inline-flex;gap:8px;color:var(--ink-2);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.qa-set__qs a:hover{color:var(--ink);border-color:var(--ink)}
.qa-set__qs .num{font-size:12px;color:var(--ink-2)}
.qa-set:nth-of-type(even){background:var(--white);box-shadow:0 0 0 100vmax var(--white);clip-path:inset(0 -100vmax);padding-block:clamp(36px,4vw,60px)}
.qa-set:nth-of-type(even) .qa:last-child{border-bottom:0}
@media (max-width:600px){.qa-set__qs{padding-left:0}}
/* glossary: the kinds legend as a 2 x 2 key; the letters as 13 x 2 on a phone */
.azbox__kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:600px){
  .azbox .az{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}
  .azbox .az a,.azbox .az span{width:auto;height:30px;font-size:15px}
}
/* hub: the colophon beside the answer; the newest guide as the lead, the rest as ruled rows */
.colophon{border-top:1px solid var(--ink)}
.colophon__n{display:flex;align-items:baseline;gap:12px;padding:14px 0;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.colophon__n b{font-family:var(--serif);font-size:clamp(40px,4vw,60px);font-weight:380;letter-spacing:-.03em;line-height:.9;color:var(--ink);text-transform:none}
.colophon dl div{display:grid;grid-template-columns:minmax(110px,140px) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--rule)}
.colophon dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2);padding-top:3px}
.colophon dd{font-size:15px;line-height:1.5;color:var(--ink)}
.guides{grid-template-columns:minmax(0,1fr);gap:0}
.guides>.gcard{border-top:1px solid var(--rule);padding:22px 0}
.guides>.gcard>a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:start}
.guides>.gcard .gcard__media{aspect-ratio:3/2}
.guides>.gcard .gcard__body{border-top:0;margin-top:0;padding-top:0}
.guides>.gcard:first-child{border-top:0;padding:0 0 clamp(28px,3vw,40px)}
.guides>.gcard:first-child>a{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
.guides>.gcard:first-child .gcard__media{aspect-ratio:16/10}
.guides>.gcard:first-child .gcard__body{border-top:3px solid var(--ink);padding-top:18px}
.guides>.gcard:first-child h3{font-size:clamp(28px,2.8vw,44px)}
.guides>.gcard:not(:first-child) h3{font-size:clamp(21px,1.7vw,26px)}
@media (max-width:959px){
  .guides>.gcard>a,.guides>.gcard:first-child>a{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media (max-width:600px){
  .colophon dl div{grid-template-columns:1fr;gap:4px}
  .guides>.gcard:not(:first-child)>a{grid-template-columns:110px minmax(0,1fr);gap:14px}
  .guides>.gcard:not(:first-child) .gcard__media{aspect-ratio:1/1}
  .guides>.gcard:not(:first-child) p{display:none}
}
/* privacy: the notice is one column with the ruled strip under it */
.mast--notice .mast__grid{grid-template-columns:minmax(0,1fr)}
.mast--notice .mast__device{display:none}
/* word ledgers become ruled cards on a phone; number ledgers keep their columns and scroll */
@media (max-width:600px){
  .ledger--words,.ledger--words tbody,.ledger--words tr,.ledger--words th,.ledger--words td{display:block;width:100%}
  .ledger--words thead{display:none}
  .ledger--words tbody{border-top:1px solid var(--ink)}
  .ledger--words tr{padding:14px 0 16px;border-bottom:1px solid var(--rule)}
  .ledger--words th,.ledger--words td{padding:0;border:0}
  .ledger--words td::before{content:attr(data-label);display:block;margin-top:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
  .ledger--words td{font-size:15px}
}

/* ---------- round-2 review fixes (20 Oct 2026) ---------- */
/* R2-01 the company kicker on a phone: whole parts wrap, the field takes its own line */
.mast__kicker{flex-wrap:wrap;row-gap:8px;white-space:nowrap}
.mast__kicker>*{flex:none}
@media (max-width:600px){
  .mast__kicker>span:last-child{flex-basis:100%}
  .mast__kicker i.sep:last-of-type{display:none}
}
/* R2-04 the home's numbered ruled rows ('Brand consistency principles'): number, serif lead, sentence */
.nrows{border-top:1px solid var(--ink)}
.nrows li{display:grid;grid-template-columns:56px minmax(0,5fr) minmax(0,7fr);column-gap:clamp(20px,2.6vw,44px);row-gap:6px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--rule)}
.nrows__n{font-size:.8rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.nrows__lead{font-family:var(--serif);font-size:clamp(19px,1.55vw,24px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.nrows__text{font-size:clamp(15px,1.1vw,16.5px);line-height:1.58;color:var(--ink-2)}
.nrows__text a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(22,24,28,.32);text-underline-offset:3px}
.prose+.nrows,.fsheet+.nrows{margin-top:28px}
.chap>.nrows{margin-top:28px}
@media (max-width:959px){
  .nrows li{grid-template-columns:40px minmax(0,1fr)}
  .nrows__text{grid-column:2}
}
/* the LOCATIONS register (the home's fact-sheet rows) under a chapter's prose */
.fsheet--places{margin-top:28px}
.fsheet--places dd{font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);letter-spacing:-.01em;line-height:1.3}
.fsheet--places dd small{font-family:var(--sans);font-size:13.5px;letter-spacing:0;line-height:1.5;margin-top:4px}
/* R2-05 the FAQ's white topic grounds run the full width; the block after the last one gets the section gap */
.qa-set:nth-of-type(even)+.qa-set{margin-top:clamp(36px,4vw,60px)}
.qa-set:last-of-type:nth-of-type(even)~.wide{margin-top:clamp(64px,7.4vw,112px)}
/* R2-08 hub: the lead card's text sits at the top; each row spans the column (thumbnail | title + dek | tag + date) */
.guides>.gcard:first-child>a{align-items:start}
@media (min-width:960px){
  .guides>.gcard:not(:first-child)>a{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
  .guides>.gcard:not(:first-child) .gcard__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,180px);column-gap:clamp(24px,3vw,48px);align-items:start}
  .guides>.gcard:not(:first-child) .gcard__body>*{grid-column:1}
  .guides>.gcard:not(:first-child) .gcard__tag{grid-column:2;grid-row:1;justify-self:start}
  .guides>.gcard:not(:first-child) .gcard__body>time{grid-column:2;grid-row:2;align-self:start;margin-top:8px}
}
/* R2-10 phone figures fill the column; the glossary's figure follows its definition */
@media (max-width:600px){
  .mast--column .fig{max-width:none}
  .mfig,.qa__side .mfig{max-width:none;width:100%}
  .terms dd:has(>.mfig--float){display:flex;flex-direction:column;align-items:flex-start}
  .terms dd>.mfig--float{order:1;margin:18px 0 0}
  .terms dd>.see{order:2}
}

/* ---------- citzen.html (page helper, Group B, 20 Oct 2026): the CZ-4 product plate ----------
   The CZ-4 cut-out is nearly square (948 x 685), so the projector plate's 12:5 box drew it about 200px tall on a laptop
   and 70px on a phone. This plate is taller and less padded; same ground, drop shadow and floor as .photo--product.
   On a phone its caption stays inside the plate (a static caption would be clipped by the plate's box). */
.photo--product-tall{aspect-ratio:16/9}
.photo--product-tall img{padding:5% 10% 9%}
.photo--product-tall::after{bottom:13%}
@media (max-width:600px){
  .photo--product-tall{aspect-ratio:4/3}
  .photo--product-tall img{padding:4% 8% 16%}
  .photo--product-tall::after{bottom:17%}
  .photo--product-tall figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:rgba(246,244,239,.92);padding:7px 11px}
}

/* ========== Group A pages (page helper, 20 Oct 2026): corporate-structure, corporate-identity, future-development,
   values-and-leadership. New rules only; nothing above is changed. ========== */
/* corporate-structure: the wide masthead -- the text above, the exploded drawing large across the grid, a numbered key
   either side (the pins sit on the drawing's own parts) */
.mast--exploded .mast__grid{align-items:end}
.mast--exploded .mast__device .mast__answer{margin-top:0}
.xfig{margin:clamp(36px,4.4vw,64px) 0 0}
.xfig .fig__frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);align-items:center;column-gap:clamp(24px,3.4vw,56px);padding:clamp(24px,3vw,48px) clamp(20px,3vw,48px)}
.xfig .fig__frame>.cm{position:absolute;inset:0;pointer-events:none}
.xfig__draw{position:relative;width:100%;max-width:600px;justify-self:center}
.xfig__draw img{display:block;width:100%;height:auto}
.xfig__pin{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;margin:-12px 0 0 -12px;display:grid;place-items:center;background:var(--ink);color:var(--white);font-size:12px;font-weight:600;line-height:1;border-radius:2px;font-variant-numeric:tabular-nums}
.xfig__key{border-top:1px solid var(--ink)}
.xfig__key li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:baseline;padding:16px 0 18px;border-bottom:1px solid var(--rule)}
.xfig__key .n{grid-row:1 / span 2;align-self:start;width:24px;height:24px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--ink);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.xfig__key b{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.01em;line-height:1.2}
.xfig__key p{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* corporate-structure: the register band -- the parent as the register's head row (the roof's red edge), the five under
   it in a table wider than anything else on the site */
.reg{padding-top:clamp(56px,7vw,104px)}
.reg__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,4.5vw,80px);align-items:end;margin-bottom:clamp(28px,3.2vw,44px)}
.reg__head h2{margin-top:18px;font-family:var(--serif);font-optical-sizing:auto;font-weight:380;font-size:clamp(30px,2.9vw,44px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.reg__head h2 .soft{color:var(--ink-3)}
.reg__lede{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.reg__parent{border-top:4px solid var(--red);background:var(--white);padding:0 clamp(16px,1.8vw,26px) 6px;margin-bottom:clamp(28px,3vw,40px)}
.reg__k{padding-top:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.reg__parent .strip{margin-top:10px;border-top:1px solid var(--rule)}
.reg__parent .strip dd{font-size:clamp(18px,1.6vw,24px)}
.reg .ledger tbody th a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(22,24,28,.32);text-underline-offset:4px;text-decoration-thickness:1px}
.reg .ledger tbody th a:hover{text-decoration-color:var(--ink)}
.reg .ledger td:nth-child(3){white-space:nowrap}
@media (max-width:959px){
  .xfig .fig__frame{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:24px}
  .xfig__draw{grid-column:1 / -1;grid-row:1;max-width:520px}
  .reg__head{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .reg .ledger--words,.reg .ledger--words tbody,.reg .ledger--words th,.reg .ledger--words td{display:block;width:100%}
  .reg .ledger--words thead{display:none}
  .reg .ledger--words tbody{border-top:1px solid var(--ink)}
  .reg .ledger--words tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;padding:16px 0 18px;border-bottom:1px solid var(--rule)}
  .reg .ledger--words th,.reg .ledger--words td{padding:0;border:0}
  .reg .ledger--words th,.reg .ledger--words td:nth-child(4){grid-column:1 / -1}
  .reg .ledger--words td::before{content:attr(data-label);display:block;margin-top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
  .reg .ledger td:nth-child(3){white-space:normal}
}
@media (max-width:600px){
  .xfig .fig__frame{grid-template-columns:minmax(0,1fr)}
  .xfig__key+.xfig__key{border-top:0}
  .reg .ledger--words tr{grid-template-columns:minmax(0,1fr)}
}

/* corporate-identity: the group's own words beside the answer; four colour bands across the masthead (colour as a
   field above its name, never under text) */
.mast--swatch .words p{font-size:clamp(19px,1.5vw,23px);line-height:1.4}
.bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--ink)}
.bands{column-gap:clamp(16px,2vw,28px)}
.bands li{display:flex;flex-direction:column;gap:7px;min-width:0;padding:20px 0 4px}
.bands__c{display:block;height:clamp(72px,7.4vw,116px);margin-bottom:12px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(22,24,28,.08)}
.bands b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.02em;line-height:1}
.bands__k{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.bands__m{font-size:14px;line-height:1.45;color:var(--ink-2)}
.cledger .ledger tbody th{white-space:nowrap}
.cledger .ledger tbody th small{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-2);white-space:normal;max-width:16ch;line-height:1.35}
.cledger .ledger td:last-child{font-family:var(--serif);font-size:17px;color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums}
.cledger .ledger td::before,.aims .ledger td::before{font-family:var(--sans)}
@media (max-width:959px){
  .bands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bands li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:600px){
  .bands{grid-template-columns:minmax(0,1fr)}
  .bands li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:5px;align-content:start;padding:14px 0}
  .bands li+li{border-top:1px solid var(--rule)}
  .bands__c{grid-row:1 / span 3;height:auto;min-height:76px;margin:0}
  .cledger .ledger tbody th{white-space:normal}
  .cledger .ledger tbody th small{max-width:none}
  .reg__parent .strip dl{grid-template-columns:minmax(0,1fr)}
  .reg__parent .strip div,.reg__parent .strip div+div{padding-left:0;border-left:0}
  .reg__parent .strip div+div{border-top:1px solid var(--rule)}
}

/* future-development: a one-column masthead, then the vision as a large serif quotation set over the classroom plate */
.mast--plate{border-bottom:0;padding-bottom:clamp(32px,4vw,56px)}
.mast--plate .mast__grid{align-items:end}
.mast--plate .contents a{font-size:clamp(17px,1.3vw,19px)}
.vplate{margin:0}
.vplate__img{height:clamp(300px,42vw,640px);overflow:hidden;background:var(--stone)}
.vplate__img img{width:100%;height:100%;object-fit:cover}
.vplate__q{position:relative;margin-top:calc(-1 * clamp(96px,10vw,168px));max-width:900px;background:var(--white);padding:clamp(24px,3vw,44px) clamp(22px,3.4vw,52px) clamp(20px,2.4vw,32px)}
.vplate__q .words{border-top:0;padding-top:20px;position:relative}
.vplate__q .words::before{content:"";position:absolute;left:0;top:0;width:72px;height:3px;background:var(--key)}
.vplate__q .words p{font-size:clamp(26px,2.7vw,42px);line-height:1.2;letter-spacing:-.018em;max-width:28ch}
.vplate__cap{display:flex;gap:12px;align-items:baseline;margin-top:14px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.vplate__cap b{flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.aimtag{display:block;width:max-content;margin:0 0 8px;padding:3px 8px;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;line-height:1.3;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2);border-radius:2px}
.aims .ledger td:nth-child(2){font-family:var(--serif);font-size:17.5px;line-height:1.4;color:var(--ink)}
.ledger tbody th .ic{display:inline-block;width:24px;height:24px;margin-right:10px;vertical-align:-5px}
.aims .ledger tbody th{min-width:11ch}
@media (max-width:600px){
  .vplate__img{height:auto}
  .vplate__img img{aspect-ratio:4/3;height:auto}
  .vplate__q{margin-top:-28px;padding:20px 18px 18px}
}

/* values-and-leadership: the six values as the masthead's 2 x 3 index; under each value's line, the company values
   closest to it */
.mast--index .mast__grid{align-items:end}
.vindex{border-top:1px solid var(--ink)}
.vindex__k{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.vindex__k .k{width:22px;height:2px;background:var(--key);flex:none}
.vindex ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.vindex li{border-bottom:1px solid var(--rule)}
.vindex li:nth-child(2n){border-left:1px solid var(--rule)}
.vindex a{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px 16px 18px 0;color:var(--ink)}
.vindex li:nth-child(2n) a{padding-left:16px}
.vindex .n{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vindex b{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.55vw,23px);letter-spacing:-.01em;line-height:1.2}
.vindex a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fig--plinth .fig__frame img{aspect-ratio:2/1;object-fit:cover;object-position:50% 84%}
.nrows li[id]{scroll-margin-top:calc(var(--hdr) + 24px)}
.nrows__also{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.nrows__also b{display:block;margin-bottom:2px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink)}
/* corporate-identity: the colour table becomes ruled cards below 960px (its five columns are all words) */
@media (max-width:959px){
  .cledger .ledger--words,.cledger .ledger--words tbody,.cledger .ledger--words tr,.cledger .ledger--words th,.cledger .ledger--words td{display:block;width:100%}
  .cledger .ledger--words thead{display:none}
  .cledger .ledger--words tbody{border-top:1px solid var(--ink)}
  .cledger .ledger--words tr{padding:16px 0 18px;border-bottom:1px solid var(--rule)}
  .cledger .ledger--words th,.cledger .ledger--words td{padding:0;border:0;white-space:normal}
  .cledger .ledger--words td::before{content:attr(data-label);display:block;margin-top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
  .cledger .ledger tbody th small{max-width:none}
}
/* ========== end of Group A ========== */

/* ========== Utility pages, review round 1 fixes (utility-pages helper, 20 Oct 2026): contact, faq, glossary,
   insights, privacy. New rules and modifier classes only; nothing above is changed. ========== */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* numbered rows whose lead is not a heading (contact, privacy): bold off; --stack sets the sentence under its lead */
b.nrows__lead{font-weight:400}
.nrows--stack li{grid-template-columns:56px minmax(0,1fr)}
.nrows--stack .nrows__text{grid-column:2}
@media (max-width:959px){.nrows--stack li{grid-template-columns:40px minmax(0,1fr)}}
/* "Read next" led by an ink arrow, not a red chip */
.related--arrow li a svg{flex:none;width:14px;height:14px;margin-top:4px;color:var(--ink)}
.related--arrow>.related__h{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--sans);font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.related--arrow>.related__h .k{width:22px;height:2px;background:var(--key)}
/* small colour fields above their names (FAQ colours answer, glossary 'Group colours') */
.swatches ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;border-top:1px solid var(--ink);padding-top:14px}
.swatches li{display:flex;flex-direction:column;gap:6px;min-width:0}
.swatches__c{display:block;height:34px;margin-bottom:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(22,24,28,.08)}
.swatches b{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.swatches__m{font-size:13px;line-height:1.45;color:var(--ink-2)}
.swatches__note{margin-top:10px;font-size:13px;color:var(--ink-2)}
.terms dd .swatches{margin-top:16px}
@media (max-width:600px){.swatches ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}}

/* contact: its own headline (not the closing band's), the checked line, equal buttons on a phone, one-column places */
.mast[data-hero="contact-card"] .mast__h1{font-size:clamp(44px,4.4vw,70px);max-width:15ch}
.ccard__checked{margin-top:12px;font-size:13px;color:var(--ink-2)}
.ccard__row small a{color:var(--ink-2)}
.chap .note--raw .mfig{max-width:280px}
@media (max-width:600px){
  .mast[data-hero="contact-card"] .mast__h1{font-size:clamp(34px,9.6vw,44px)}
  .ccard__cta .btn{flex:1 1 100%;justify-content:center}
  .places.places--contact{grid-template-columns:minmax(0,1fr)}
  .places.places--contact li:nth-child(n){padding-left:0;border-left:0}
  .places.places--contact li+li{border-top:1px solid var(--rule)}
}

/* faq: the board leads with the four topics (no numeral); no folded rail (the board and each topic head list the
   questions); question numbers on their question's baseline; exhibits inside answers; the contact routes key */
.topics--lead .topics__head{padding:14px 0}
.topics--lead .topics__grid b{font-size:clamp(21px,1.8vw,27px)}
.topics--lead .topics__grid span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
[data-page-type="faq"] .rail-m{display:none}
.qa__n{padding-top:0;align-self:baseline}
.qa h3{align-self:baseline}
.qa .prose>.fsheet,.qa .prose>.ledger-wrap,.qa .prose>.swatches,.qa .prose>.fsheet--places{margin-top:16px}
.qa .prose>.fsheet+p,.qa .prose>.ledger-wrap+p,.qa .prose>.swatches+p{margin-top:16px}
.qa-routes{margin-top:22px;border-top:1px solid var(--ink)}
.qa-routes a{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.35;color:var(--ink)}
.qa-routes .ic{flex:none;width:20px;height:20px}
.qa-routes a:hover span{text-decoration:underline;text-underline-offset:3px}

/* glossary + insights: the device starts at the label line, not pushed to the foot of the text */
.mast[data-hero="a-to-z"] .mast__grid,.mast[data-hero="contents"] .mast__grid{align-items:start}
/* glossary: the letter board leads; used letters on the exhibit's white, unused on paper; 9 across on a phone */
.azbox--lead .azbox__n{margin-bottom:12px}
.azbox .az a{background:var(--white);box-shadow:inset 0 0 0 1px var(--rule-2)}
@media (max-width:600px){
  .azbox .az{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px}
  .azbox .az a,.azbox .az span{width:auto;height:36px;font-size:16px}
}
/* glossary: the plan figure in the cell under its term (its own <dd>, after the definition in reading order) */
.terms dd.terms__fig{align-self:start;max-width:250px}
@media (min-width:960px){
  .terms>div:has(>dd.terms__fig)>dd:first-of-type{grid-row:span 2}
  .terms dd.terms__fig{grid-column:1;margin-left:38px}
}
@media (max-width:959px){.terms dd.terms__fig{margin-top:6px}}

/* insights: the lead card's text runs the photo's height (date at its foot), 1px ink rule; every card keeps its tag
   above its title; the dates are labelled; the lifespan photo is drawn closer; the hand-off under the list */
.guides>.gcard:first-child>a{align-items:stretch}
.guides>.gcard:first-child .gcard__body{border-top:1px solid var(--ink);display:flex;flex-direction:column}
.guides>.gcard:first-child h3{font-size:clamp(30px,3.1vw,46px);line-height:1.06}
.guides>.gcard:first-child .gcard__body>time{margin-top:auto}
.gcard time::before{content:"Published "}
@media (min-width:960px){
  .guides>.gcard:not(:first-child) .gcard__body{display:flex;flex-direction:column}
  .guides>.gcard:not(:first-child) .gcard__body>time{margin-top:auto}
}
.gcard a[href="/classroom-projector-lifespan-daily-use.html"] .gcard__media img{scale:1.42;transform-origin:52% 56%}
.hub-handoff{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-top:clamp(28px,3vw,40px);padding-top:18px;border-top:1px solid var(--ink);font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.hub-handoff .link{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.hub-handoff .link svg{width:14px;height:14px}
.colophon__pub{padding:14px 0;border-bottom:1px solid var(--rule);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.colophon__pub b{display:block;margin-top:8px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.012em;line-height:1.15;text-transform:none;color:var(--ink)}

/* privacy: the notice in short as a 2 x 2 key beside the text (blue chips), the negative row parted by an ink rule */
.mast--legal .mast__grid{align-items:start}
.strip--key{margin-top:0}
.strip--key dl{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip--key div{padding:16px 16px 16px 0}
.strip--key div:nth-child(2n+1){padding-left:0;border-left:0}
.strip--key div:nth-child(2n){padding-left:18px;border-left:1px solid var(--rule)}
.strip--key div:nth-child(n+3){border-top:1px solid var(--rule)}
.strip--key .ic{width:26px;height:26px;margin-bottom:6px}
.fsheet--notice>div:last-child{border-top:1px solid var(--ink)}
.fsheet--notice dt:has(.ic){display:flex;align-items:center;gap:8px}
.fsheet--notice dt .ic{flex:none;width:18px;height:18px}
@media (max-width:959px){.strip--key{margin-top:8px}}
@media (max-width:600px){
  .strip--key dl{grid-template-columns:minmax(0,1fr)}
  .strip--key div,.strip--key div:nth-child(2n){display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;padding:12px 0;border-left:0}
  .strip--key div+div{border-top:1px solid var(--rule)}
  .strip--key .ic{grid-row:span 2;margin:2px 0 0}
}
/* ========== end of utility pages ========== */

/* ========== neon-plus.html, round 2 (page helper, Group B, 20 Oct 2026) ========== */
/* one copy of the rail (pages_companies._doc_one): sticky rail on wide screens, a folded list above the chapters below */
.doc--one .doc__rail{display:block;margin:0 0 clamp(36px,5vw,56px)}
.rail-one{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.rail-one>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;cursor:pointer;list-style:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.rail-one>summary::-webkit-details-marker{display:none}
.rail-one>summary span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-left:auto}
.rail-one>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.rail-one[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.rail-one .rail__list{padding-bottom:12px}
@media (min-width:1180px){
  .doc--one .doc__rail{margin:0;align-self:stretch}
  .rail-one{position:sticky;top:calc(var(--hdr) + 28px);max-height:calc(100vh - var(--hdr) - 48px);overflow-y:auto;scrollbar-width:thin;padding-bottom:12px;border:0}
  .rail-one>summary{display:none}
  .rail-one::details-content{content-visibility:visible;display:contents}
}
/* Neon+ carries all four colours: its exhibits take the four-colour key, never the parent's red */
.mast--neon~.doc .stat{position:relative;box-shadow:inset 0 0 0 1px var(--rule)}
.mast--neon~.doc .stat::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--key)}
.mast--neon~.doc .five a[href="/neon-plus.html"]::after{background:var(--key)}
/* the kicker's field carries its own separator (no dangling dot when it wraps) */
.mast__kicker--v2 .fld{display:inline-flex;align-items:center;gap:12px}
@media (max-width:600px){
  .mast__kicker.mast__kicker--v2>i.sep:last-of-type{display:block}
  .mast__kicker--v2 .fld .sep{display:none}
}
/* the lineup plate: Neon+'s own photographs, per-model shadows baked in; caption under the plate; 4:3 on phones */
.photo--lineup{background:none;overflow:visible}
.photo--lineup img{display:block;width:100%;height:auto;aspect-ratio:1600/733;object-fit:contain;padding:2% 3% 1%;background:radial-gradient(120% 90% at 50% 100%,#E2DDD2 0,#EFEBE3 48%,#F7F5F0 100%)}
.photo--lineup figcaption{position:static;max-width:none;background:none;padding:10px 0 0;font-size:13px;color:var(--ink-2)}
@media (max-width:600px){.photo--lineup img{aspect-ratio:4/3;padding:2%}}
/* the range: the ledger at prose width, its dated note in the margin beside it; phone heads short, names on one line */
.range__note{margin-top:18px;padding:2px 0 2px 16px;border-left:2px solid var(--ink);font-size:14px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.range__note b{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink);margin-bottom:4px}
.range__note a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(22,24,28,.32);text-underline-offset:3px}
.range tbody th{white-space:nowrap}
.range .dash{color:var(--ink-2)}
.range .hd-s{display:none}
@media (min-width:1180px){
  .range{display:grid;grid-template-columns:minmax(0,66ch) minmax(180px,1fr);column-gap:clamp(40px,4vw,64px);align-items:start}
  .range__note{margin-top:46px}
}
@media (max-width:600px){
  .range .hd-l{display:none}
  .range .hd-s{display:inline}
  .range .ledger td,.range .ledger th{padding-right:12px}
}
/* the next-step buttons inside a chapter */
.chap .closer__cta{margin-top:clamp(24px,2.6vw,34px)}
/* ========== end of neon-plus.html, round 2 ========== */

/* FAQ, 20 Oct 2026 (round-2 design seat): the white topic grounds (.qa-set even, full-bleed by box-shadow + clip-path)
   painted over the sticky Topics rail at 1440. The rail sits above them now. */
.doc__rail>div{z-index:2}

/* ========== about.html + the four company sheets, round 2 (21 Oct 2026) ========== */
/* the five row: each card leads with its field glyph (aeo_render.five), the names share one row so a wrapped name never
   drops its line (subgrid); on phones the row folds into one wrapping line of glyph + name, the key */
.five .ic{width:26px;height:26px}
@supports (grid-template-rows:subgrid){
  @media (min-width:960px){
    .five{grid-template-rows:auto auto auto}
    .five a{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:8px;align-content:start}
  }
}
@media (max-width:719px){
  .five{display:flex;flex-wrap:wrap;gap:12px 22px;padding-top:14px}
  .five a,.five a+a{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:0 0 7px;border:0}
  .five span{display:none}
  .five b{font-size:16px}
  .five .ic{width:20px;height:20px}
  .five a::after{height:2px}
}
/* ESP Global has no group colour: its chip and glyph corner are drawn open, never a fifth brand colour */
.chip[style*="--slate"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--slate)}
.ic[style*="--slate"] .ch{fill:none;stroke:var(--slate);stroke-width:1.1}
/* phones: a three-step breadcrumb keeps Home and this page, so no line starts with a separator */
@media (max-width:480px){.crumbs li:not(:first-child):not([aria-current]){display:none}}
/* a question inside a chapter (company sheets) */
.chap__h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.7vw,25px);letter-spacing:-.012em;line-height:1.2;margin:clamp(34px,3.4vw,46px) 0 12px;padding-top:16px;border-top:1px solid var(--ink)}
/* core values as a ruled list inside the fact sheet */
.vlist{list-style:none;margin:0;padding:0}
.vlist li{padding:6px 0;border-top:1px solid var(--rule)}
.vlist li:first-child{border-top:0;padding-top:0}
.vlist li:last-child{padding-bottom:0}
/* about: the six values as names, each linking to its row on values-and-leadership.html */
.vnames{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,36px);border-top:1px solid var(--ink)}
.vnames li{border-bottom:1px solid var(--rule)}
.vnames a{display:flex;align-items:center;gap:12px;padding:16px 0;font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.vnames a:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.vnames .ic{width:24px;height:24px}
@media (max-width:959px){.vnames{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.vnames{grid-template-columns:1fr}}
/* about: the positioning statement's name in letter-spaced capitals at small-cap size, not shouted */
.words .sc{font-size:.8em;letter-spacing:.06em}
.ledger-src.reviewed{margin-top:16px}
#leadership .ledger-wrap{max-width:68ch}
.ledger .dash{color:var(--ink-2)}
#companies .ledger :is(td[data-label="Website"],td[data-label="Based in"]){white-space:nowrap}
/* Citzen: the CZ-4 plate cut to 16:7, the notebook on the floor at the left, its caption beside it on the right */
.photo--product-wide{aspect-ratio:16/7}
.photo--product-wide img{padding:2% 44% 4% 5%;object-position:center bottom}
.photo--product-wide::after{left:9%;right:58%;bottom:6%}
.photo--product-wide figcaption{left:auto;right:clamp(20px,4vw,56px);top:50%;bottom:auto;transform:translateY(-50%);max-width:30ch;background:none;padding:2px 0 2px 16px;border-left:2px solid var(--ink);font-size:14px}
@media (max-width:600px){
  .photo--product-wide{aspect-ratio:4/3}
  .photo--product-wide img{padding:4% 8% 16%}
  .photo--product-wide::after{left:18%;right:18%;bottom:17%}
  .photo--product-wide figcaption{right:auto;left:12px;top:auto;bottom:12px;transform:none;max-width:calc(100% - 24px);background:rgba(246,244,239,.92);padding:7px 11px;border-left:0;font-size:13px}
}
/* Citzen: the school-demo answer in Citzen's own words, set in the serif with hanging quotes */
.cq{display:block;font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);line-height:1.4;letter-spacing:-.01em;color:var(--ink);quotes:"\201C" "\201D";text-indent:-.42em}
.cq__src{display:block;margin-top:8px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
/* ESP Global: the mission's three parts as a sequence (a fine rule joins the numbers), its three results as a 3-up */
.nrows--chain li{position:relative}
.nrows--chain li:not(:last-child)::after{content:"";position:absolute;left:11px;top:54px;bottom:-16px;width:1px;background:var(--ink);opacity:.5}
@media (min-width:960px){.nrows--chain li{grid-template-columns:56px minmax(150px,230px) minmax(0,1fr)}}
.chap .strip--three{margin-top:22px}
.strip--three dl{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){
  .strip--three dl{grid-template-columns:1fr}
  .strip--three div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
}
.places--two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:959px){.places--two li:nth-child(n+3){border-top:0}}
@media (max-width:600px){.places--two{grid-template-columns:1fr}}
/* ========== end of about + company sheets, round 2 ========== */

/* ========== Group A, round 2 (page helper, 21 Oct 2026): corporate-structure, corporate-identity,
   future-development, values-and-leadership. New rules on new modifier classes only (.mast--ga, .reg--ga, .five--ga,
   .fig--foot, .cledger--r2, .nlogo, .vfig, .vlead, .fsheet--gov, .vplate__row, .quiet); nothing above is changed. ===== */
/* the H1 now carries the group's full name: one size down, so it sets in two or three lines */
.mast--ga .mast__h1{font-size:clamp(36px,3.9vw,60px);max-width:22ch}
/* the masthead's two columns share a top: the answer's first line level with the kicker */
.mast--ga .mast__grid{align-items:start}
.mast--ga .mast__device>:first-child{margin-top:0}
.mast--exploded.mast--ga .xfig__draw{max-width:520px}
/* corporate-structure: the parent's registered name gets a double cell; quiet words for an empty register field */
@media (min-width:960px){.reg--ga .reg__parent .strip dl{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}}
.reg--ga .ledger .quiet{font-size:13px;color:var(--ink-2)}
/* the five companies under their colour focus: each bar always shown, Neon+ in the four-colour key, ESP Global a rule */
.five--ga a::after{transform:scaleX(1)}
.five--ga a[href="/neon-plus.html"]::after{background:var(--key)}
.five--ga a[href="/esp-global.html"]::after{background:var(--rule-2)}
/* a side figure set narrower, its caption level with the drawing's foot */
@media (min-width:960px){
  .fig--foot{grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:end}
  .fig--foot .fig__frame{max-width:420px}
}
/* corporate-identity: shorter colour bands so each shows its meaning in the first screen; the table's Represents
   column in the serif (the group's own voice), Used for in the sans */
.mast--swatch.mast--ga .bands{margin-top:clamp(28px,3.4vw,48px)}
.mast--swatch.mast--ga .bands__c{height:clamp(54px,5.4vw,86px)}
.cledger--r2 .ledger td:nth-child(2){font-family:var(--serif);font-size:16.5px;line-height:1.45;color:var(--ink)}
.cledger--r2+.five--ga,.wide>.five--ga{margin-top:0}
/* the Neon+ logo as the chapter's exhibit: on paper under a fine ink rule, its four meanings as a 2 x 2 key */
.nlogo{margin:0;padding-top:24px;border-top:1px solid var(--ink);display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px}
.nlogo__mark img{display:block;width:100%;max-width:380px;height:auto}
.nlogo__key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.nlogo__key li{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 12px 15px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.nlogo__key li:nth-child(2n){padding-left:16px;border-left:1px solid var(--rule)}
.nlogo__key .chip{flex:none;width:22px;height:8px;background:var(--c)}
.nlogo figcaption{grid-column:1 / -1;display:flex;gap:12px;align-items:baseline;font-size:13px;line-height:1.45;color:var(--ink-2)}
.nlogo figcaption b{flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink)}
@media (min-width:960px){.nlogo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(28px,3.4vw,56px);align-items:center}}
@media (max-width:600px){.nlogo__key li{font-size:17px}}
/* values-and-leadership: the base figure in the margin beside the values (numbered bays, pins as on Fig. 1 of the
   structure sheet); the leadership band under the masthead's value index; the governance statements in the serif */
.chap .note--raw:has(>.vfig){border-left:0;padding-left:0}
.vfig{max-width:380px}
.vfig .xfig__draw{max-width:none}
.vfig .xfig__pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:12px}
.vlead{margin-top:22px;border-top:1px solid var(--ink)}
.vlead ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.vlead li{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 16px 14px 0;border-bottom:1px solid var(--rule)}
.vlead li:nth-child(2n){padding-left:16px;border-left:1px solid var(--rule)}
.vlead b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.4vw,21px);letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.vlead span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;line-height:1.35;color:var(--ink-2)}
.fsheet--gov dd{font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:var(--ink)}
.mast--ga~.doc .prose+.fsheet{margin-top:24px}
.mast--ga~.doc .fsheet+.prose,.mast--ga~.doc .nrows+.prose{margin-top:24px}
/* future-development: the plate's caption under the photograph's right-hand part, beside the quotation card */
@media (min-width:960px){
  .vplate__row{display:grid;grid-template-columns:minmax(0,900px) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);align-items:start}
  .vplate__row .vplate__cap{flex-direction:column;gap:6px;margin-top:14px}
}
/* ========== end of Group A, round 2 ========== */
/* Group A round 2 addendum: future-development's milestone titles set as the years list's h3 look, without being headings */
.years .years__t{font-size:15px;font-weight:600;margin-top:12px;letter-spacing:-.005em;line-height:1.3;color:var(--ink)}
.mast--ga~.doc .nrows__lead .chip{display:inline-block;width:10px;height:10px;margin-right:10px;vertical-align:baseline}
.chap .note--raw .vfig{max-width:380px}
.mast--ga~.doc .prose+.ledger-wrap{margin-top:28px}