/* The brochure on the portal (/brochure/): Matthew J. Mercieca's "Architecture as One".

   From his beta (portal/tool betas/MJMDA_Architecture_as_One_Interactive_Brochure.html), which was
   already built on mjmda.eu's colours. What changed on the way in:
   - every rule is scoped under .brochure, and the six class names the portal also uses (hero,
     btn, card, eyebrow, lede, band) are renamed b-*, so neither stylesheet restyles the other;
   - its tokens are renamed --b-* and point at the portal's own where they are the same colour;
   - no dark mode, because the portal has none;
   - no Roboto Mono: its small labels take the portal's Roboto Condensed;
   - the eyebrows and small orange labels use --orange-text (4.5:1 on the page) rather than the
     raw orange, which is below AA at that size; on the dark bands they use --orange-on-dark;
   - the brochure's orange behind white text is the portal's --orange-fill, and its dim greys are
     darkened or lightened to clear 4.5:1 on their grounds;
   - the figures strip, the scroll cue, the brochure's own logo bar and footer are gone: the
     portal's banner and footer are above and below it. */

.brochure {
  --b-orange: var(--orange-fill);
  --b-orange-deep: var(--orange-fill-h);
  --b-orange-text: #9A5326;
  --b-orange-lift: var(--orange-on-dark);
  --b-charcoal: var(--surface-dark);
  --b-ink: var(--brand-dark);
  --b-paper: #F6F4F1;
  --b-surface: #FFFFFF;
  --b-surface-2: #EFECE7;
  --b-line: #D9D5CE;
  --b-text: #26261F;
  --b-text-dim: #66645C;
  --b-on-dark: #F2EFE9;
  --b-on-dark-dim: var(--on-dark-muted);
  --b-band: #3B3C38;
  --b-shadow: 0 18px 50px -28px rgba(26,26,24,.55);
  --b-phi: 1.618;
  --b-maxw: 1200px;
}

.brochure * { box-sizing:border-box }
.brochure { margin:0;background:var(--b-paper);color:var(--b-text); font-family:var(--fb); font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased; }
.brochure h1, .brochure h2, .brochure h3, .brochure h4, .brochure .cond { font-family:var(--ft);text-wrap:balance }
.brochure h1, .brochure h2, .brochure h3 { margin:0;font-weight:700;letter-spacing:.005em }
.brochure p { margin:0 }
.brochure a { color:inherit }
.brochure img { max-width:100%;display:block }
.brochure button { font:inherit;color:inherit }
.brochure :focus-visible { outline:2px solid var(--b-orange);outline-offset:3px }
.brochure .wrap { max-width:var(--b-maxw);margin:0 auto;padding-inline:22px }
.brochure .sec { padding-block:clamp(56px,8vw,104px) }
.brochure .b-eyebrow { font-family:var(--ft);font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--b-orange);margin:0 0 18px;display:flex;align-items:center;gap:12px; }
.brochure .b-eyebrow::after { content:"";flex:1;height:1px;background:var(--b-line) }
.brochure .sec-title { font-size:clamp(30px,4.4vw,52px);line-height:1.04;text-transform:uppercase;letter-spacing:-.01em }
.brochure .b-lede { font-size:clamp(18px,2vw,21px);color:var(--b-text-dim);max-width:62ch;margin-top:18px }
.brochure .b-hero { position:relative;background:var(--b-band);overflow:hidden;isolation:isolate }
.brochure .hero-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:-2 }
.brochure .b-hero::after { content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(24,25,22,.86) 0%,rgba(24,25,22,.5) 45%,rgba(24,25,22,.92) 100%); }
.brochure .lattice { position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55 }
.brochure .lattice line { stroke:var(--b-orange);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.5 }
.brochure .hero-inner { max-width:var(--b-maxw);margin:0 auto;padding:26px 22px clamp(52px,7vw,88px);position:relative }
.brochure .topnav { display:flex;gap:22px;flex-wrap:wrap }
.brochure .topnav a { font-family:var(--ft);text-transform:uppercase;letter-spacing:.16em; font-size:12px;color:var(--b-on-dark-dim);text-decoration:none;padding-block:4px;border-bottom:1px solid transparent; }
.brochure .topnav a:hover { color:var(--b-orange-lift);border-color:var(--b-orange) }
.brochure .hero-body { margin-top:clamp(56px,10vw,120px) }
.brochure .hero-kicker { font-family:var(--ft);font-size:11px;letter-spacing:.3em;text-transform:uppercase; color:var(--b-orange-lift);margin-bottom:18px; }
.brochure .b-hero h1 { color:#fff;text-transform:uppercase;font-size:clamp(34px,9.5vw,100px);line-height:.92;letter-spacing:-.02em; }
.brochure .b-hero h1 .l { display:block;overflow:hidden }
.brochure .b-hero h1 .l > span { display:block }
.anim .brochure .b-hero h1 .l > span { animation:rise .9s cubic-bezier(.19,1,.22,1) both }
.anim .brochure .b-hero h1 .l:nth-child(2) > span { animation-delay:.1s }
.anim .brochure .b-hero h1 .l:nth-child(3) > span { animation-delay:.2s }
@keyframes rise {from{transform:translateY(102%)}to{transform:translateY(0)}}
.brochure .hero-sub { color:var(--b-on-dark);margin-top:26px;max-width:46ch;font-size:clamp(17px,1.9vw,20px) }
.brochure .hero-sub b { color:var(--b-orange-lift);font-weight:400 }
.brochure .hero-cta { display:flex;gap:14px;flex-wrap:wrap;margin-top:34px }
.brochure .b-btn { display:inline-flex;align-items:center;gap:14px;text-decoration:none;cursor:pointer; font-family:var(--ft);text-transform:uppercase;letter-spacing:.16em;font-size:13px; padding:14px 22px;border:1px solid var(--b-orange);background:transparent;color:var(--b-orange-lift); transition:background .25s,color .25s,transform .25s; }
.brochure .b-btn:hover { background:var(--b-orange);color:#fff;transform:translateY(-2px) }
.brochure .b-btn.solid { background:var(--b-orange);color:#fff;border-color:var(--b-orange) }
.brochure .b-btn.solid:hover { background:var(--b-orange-deep);border-color:var(--b-orange-deep) }
.brochure .b-btn.ink { border-color:var(--b-text);color:var(--b-text) }
.brochure .b-btn.ink:hover { background:var(--b-text);color:var(--b-paper) }
.brochure .b-btn .arw { transition:transform .25s }
.brochure .b-btn:hover .arw { transform:translateX(5px) }
@keyframes sweep {0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}
.brochure .ticker { background:var(--b-charcoal);border-block:1px solid rgba(214,116,55,.35);overflow:hidden;padding-block:15px }
.brochure .ticker-track { display:flex;gap:0;width:max-content;will-change:transform }
.anim .brochure .ticker-track { animation:slide 46s linear infinite }
.brochure .ticker:hover .ticker-track { animation-play-state:paused }
@keyframes slide {to{transform:translateX(-50%)}}
.brochure .ticker span { font-family:var(--ft);text-transform:uppercase;letter-spacing:.2em;font-size:13px; color:var(--b-on-dark-dim);padding-inline:26px;white-space:nowrap; }
.brochure .ticker span.hi { color:var(--b-orange-lift) }
.brochure .ticker span::after { content:"·";margin-left:26px;color:var(--b-orange);opacity:.7 }
.brochure .phi { display:grid;grid-template-columns:1fr 1.618fr;gap:clamp(28px,5vw,64px);align-items:start }
.brochure .rule-top { border-top:3px solid var(--b-orange);padding-top:20px }
.brochure .body-copy p + p { margin-top:16px }
.brochure .pull { border-left:3px solid var(--b-orange);padding-left:22px;margin-top:28px; font-family:var(--ft);font-size:clamp(20px,2.6vw,28px);line-height:1.24; }
.brochure .credits { margin-top:26px;display:flex;flex-wrap:wrap;gap:10px }
.brochure .chip { font-family:var(--ft);font-size:11px;letter-spacing:.08em;border:1px solid var(--b-line); padding:7px 12px;color:var(--b-text-dim);background:var(--b-surface); }
.brochure .chip b { color:var(--b-orange);font-weight:500 }
.brochure .b-band { background:var(--b-charcoal);color:var(--b-on-dark) }
.brochure .b-band.textured { position:relative;isolation:isolate;overflow:hidden }
.brochure .b-band.textured .band-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42 }
.brochure .b-band.textured::before { content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,rgba(43,44,41,.97) 0%,rgba(43,44,41,.9) 42%,rgba(43,44,41,.55) 100%); }
.brochure .b-band .sec-title, .brochure .b-band h3 { color:#fff }
.brochure .b-band .b-lede { color:var(--b-on-dark-dim) }
.brochure .b-band .b-eyebrow::after { background:rgba(255,255,255,.18) }
.brochure .pillars { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:rgba(255,255,255,.14);margin-top:46px;border:1px solid rgba(255,255,255,.14) }
.brochure .pillar { background:var(--b-charcoal);padding:34px 28px 38px;position:relative;transition:background .3s }
.brochure .pillar:hover { background:rgba(214,116,55,.1) }
.brochure .pillar .num { font-family:var(--ft);font-size:11px;letter-spacing:.2em;color:var(--b-orange) }
.brochure .pillar h3 { font-size:22px;text-transform:uppercase;margin:16px 0 12px;letter-spacing:.01em }
.brochure .pillar p { color:var(--b-on-dark-dim);font-size:15.5px }
.brochure .pillar::before { content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--b-orange);transition:width .45s cubic-bezier(.19,1,.22,1) }
.brochure .pillar:hover::before { width:100% }
.brochure .belief { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:40px }
.brochure .bcard { text-align:left;background:var(--b-surface);border:1px solid var(--b-line);padding:22px 22px 22px 56px; cursor:pointer;position:relative;transition:border-color .25s,transform .25s,background .25s; }
.brochure .bcard:hover { transform:translateY(-3px);border-color:var(--b-orange) }
.brochure .bcard .box { position:absolute;left:20px;top:23px;width:20px;height:20px;border:1px solid var(--b-text-dim); display:grid;place-items:center;transition:background .2s,border-color .2s; }
.brochure .bcard .box svg { width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s }
.brochure .bcard[aria-pressed="true"] { border-color:var(--b-orange);background:color-mix(in srgb,var(--b-orange) 7%,var(--b-surface)) }
.brochure .bcard[aria-pressed="true"] .box { background:var(--b-orange);border-color:var(--b-orange) }
.brochure .bcard[aria-pressed="true"] .box svg { stroke-dashoffset:0 }
.brochure .bcard h4 { margin:0 0 8px;font-size:17px;text-transform:uppercase;letter-spacing:.04em }
.brochure .bcard p { font-size:15px;color:var(--b-text-dim) }
.brochure .verdict { margin-top:26px;border:1px solid var(--b-line);border-left:3px solid var(--b-orange);background:var(--b-surface); padding:24px 26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between; }
.brochure .verdict .score { font-family:var(--ft);font-size:12px;letter-spacing:.16em;color:var(--b-orange);text-transform:uppercase }
.brochure .verdict p { margin-top:6px;font-size:clamp(17px,2.2vw,22px);font-family:var(--ft);line-height:1.25;max-width:46ch }
.brochure .rail { display:flex;gap:0;margin-top:44px;border:1px solid rgba(255,255,255,.16);overflow-x:auto;scrollbar-width:thin }
.brochure .rail button { flex:1 0 auto;min-width:104px;background:transparent;border:0;border-right:1px solid rgba(255,255,255,.16); padding:16px 14px 18px;cursor:pointer;text-align:left;position:relative;transition:background .25s;color:var(--b-on-dark-dim); }
.brochure .rail button:last-child { border-right:0 }
.brochure .rail button:hover { background:rgba(255,255,255,.06) }
.brochure .rail .code { font-family:var(--ft);font-size:12px;letter-spacing:.12em;color:var(--b-orange) }
.brochure .rail .nm { display:block;margin-top:7px;font-family:var(--ft);font-size:13px;text-transform:uppercase;letter-spacing:.08em;line-height:1.2 }
.brochure .rail button[aria-selected="true"] { background:rgba(214,116,55,.16);color:#fff }
.brochure .rail button[aria-selected="true"] .nm { color:#fff }
.brochure .rail .bar { position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--b-orange) }
.brochure .rail button[aria-selected="true"] .bar { width:100%;transition:width 5.2s linear }
.brochure .stage { border:1px solid rgba(255,255,255,.16);border-top:0;background:rgba(0,0,0,.16); padding:clamp(26px,4vw,40px);display:grid;grid-template-columns:1fr 1.618fr;gap:clamp(24px,4vw,52px); }
.brochure .stage h3 { font-size:clamp(24px,3.4vw,36px);text-transform:uppercase;line-height:1.06 }
.brochure .stage .who { font-family:var(--ft);font-size:11px;letter-spacing:.16em;color:var(--b-orange);margin-bottom:12px;text-transform:uppercase }
.brochure .stage .blurb { color:var(--b-on-dark-dim);margin-top:16px;font-size:16px }
.brochure .deliv { list-style:none;margin:0;padding:0;columns:2;column-gap:34px }
.brochure .deliv li { break-inside:avoid;padding:9px 0 9px 22px;position:relative;color:var(--b-on-dark);font-size:15.5px; border-bottom:1px solid rgba(255,255,255,.09); }
.brochure .deliv li::before { content:"";position:absolute;left:0;top:18px;width:10px;height:1px;background:var(--b-orange) }
.brochure .stage-note { margin-top:22px;font-family:var(--ft);font-size:11.5px;letter-spacing:.05em;color:var(--b-orange-lift) }
.brochure .filters { display:flex;gap:9px;flex-wrap:wrap;margin-top:34px }
.brochure .filters button { background:var(--b-surface);border:1px solid var(--b-line);padding:9px 16px;cursor:pointer; font-family:var(--ft);text-transform:uppercase;letter-spacing:.13em;font-size:12px; color:var(--b-text-dim);transition:all .22s; }
.brochure .filters button:hover { border-color:var(--b-orange);color:var(--b-text) }
.brochure .filters button[aria-pressed="true"] { background:var(--b-orange);border-color:var(--b-orange);color:#fff }
.brochure .grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:20px;margin-top:26px }
.brochure .b-card { background:var(--b-surface);border:1px solid var(--b-line);padding:0;text-align:left;cursor:pointer; display:flex;flex-direction:column;overflow:hidden;transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s,border-color .3s; }
.brochure .b-card:hover { transform:translateY(-5px);box-shadow:var(--b-shadow);border-color:var(--b-orange) }
.brochure .b-card .ph { position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--b-surface-2) }
.brochure .b-card .ph img { width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.19,1,.22,1) }
.brochure .b-card:hover .ph img { transform:scale(1.06) }
.brochure .b-card .tag { position:absolute;left:0;bottom:0;background:var(--b-orange);color:#fff;padding:6px 12px; font-family:var(--ft);font-size:10px;letter-spacing:.14em;text-transform:uppercase; }
.brochure .b-card .meta { padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1 }
.brochure .b-card h3 { font-size:20px;text-transform:uppercase;letter-spacing:.01em;line-height:1.1 }
.brochure .b-card .place { font-family:var(--ft);font-size:11px;letter-spacing:.09em;color:var(--b-text-dim) }
.brochure .b-card .tease { font-size:15px;color:var(--b-text-dim);margin-top:4px }
.brochure .b-card .more { margin-top:auto;padding-top:14px;font-family:var(--ft);font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:var(--b-orange);display:flex;align-items:center;gap:9px; }
.brochure dialog.pv { border:0;padding:0;max-width:min(940px,94vw);width:100%;background:var(--b-surface);color:var(--b-text); box-shadow:0 40px 90px -30px rgba(0,0,0,.7); }
.brochure dialog.pv::backdrop { background:rgba(20,20,18,.82) }
.brochure .pv-img { width:100%;aspect-ratio:16/9;object-fit:cover }
.brochure .pv-body { padding:clamp(24px,4vw,38px) }
.brochure .pv-body h3 { font-size:clamp(26px,4vw,40px);text-transform:uppercase;line-height:1.04 }
.brochure .pv-facts { display:flex;gap:26px;flex-wrap:wrap;margin:16px 0 20px;padding-block:14px;border-block:1px solid var(--b-line) }
.brochure .pv-facts div { font-family:var(--ft);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--b-text-dim) }
.brochure .pv-facts b { display:block;font-size:13px;color:var(--b-text);margin-top:5px;letter-spacing:.06em }
.brochure .pv-body .cd { font-family:var(--ft);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--b-orange);margin-bottom:10px }
.brochure .pv-close { position:absolute;right:12px;top:12px;background:rgba(20,20,18,.72);border:1px solid rgba(255,255,255,.3); color:#fff;width:40px;height:40px;cursor:pointer;font-size:20px;line-height:1;transition:background .2s; }
.brochure .pv-close:hover { background:var(--b-orange);border-color:var(--b-orange) }
.brochure .pv-wrap { position:relative }
.brochure .roots { display:flex;gap:0;overflow-x:auto;margin-top:40px;padding-bottom:14px;border-bottom:1px solid var(--b-line);scrollbar-width:thin }
.brochure .root { flex:0 0 248px;padding:0 24px 26px 0;position:relative }
.brochure .root .yr { font-family:var(--ft);font-weight:700;font-size:30px;color:var(--b-orange);line-height:1 }
.brochure .root .dot { width:9px;height:9px;background:var(--b-orange);border-radius:50%;margin:16px 0 14px }
.brochure .root p { font-size:15px;color:var(--b-text-dim) }
.brochure .root::after { content:"";position:absolute;left:0;top:calc(30px + 16px + 4px);height:1px;width:100%;background:var(--b-line);z-index:-1 }
.brochure .quote-sec { position:relative;overflow:hidden;background:var(--b-band) }
.brochure .quote-bg { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.24 }
.brochure .quote-in { position:relative;max-width:860px;margin:0 auto;padding-inline:22px;text-align:center }
.brochure .quote-in blockquote { margin:0;font-family:var(--ft);color:#fff; font-size:clamp(21px,3.1vw,34px);line-height:1.26;font-weight:300; }
.brochure .quote-in blockquote b { font-weight:700;color:var(--b-orange-lift) }
.brochure .quote-in cite { display:block;margin-top:26px;font-family:var(--ft);font-style:normal;font-size:11.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--b-on-dark-dim); }
.brochure .builder { display:grid;grid-template-columns:1.618fr 1fr;gap:clamp(22px,3.4vw,40px);margin-top:40px;align-items:start }
.brochure .side { font-family:var(--ft);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--b-orange);margin:0 0 12px }
.brochure .side + .discs { margin-bottom:26px }
.brochure .discs { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }
.brochure .disc { text-align:left;background:var(--b-surface);border:1px solid var(--b-line);padding:16px 16px 18px 44px; cursor:pointer;position:relative;transition:border-color .22s,background .22s,transform .22s; }
.brochure .disc:hover { border-color:var(--b-orange);transform:translateY(-2px) }
.brochure .disc .tick { position:absolute;left:16px;top:18px;width:15px;height:15px;border:1px solid var(--b-text-dim);transition:background .2s,border-color .2s }
.brochure .disc[aria-pressed="true"] { border-color:var(--b-orange);background:color-mix(in srgb,var(--b-orange) 8%,var(--b-surface)) }
.brochure .disc[aria-pressed="true"] .tick { background:var(--b-orange);border-color:var(--b-orange) }
.brochure .disc h4 { margin:0;font-size:15.5px;text-transform:uppercase;letter-spacing:.04em;line-height:1.2 }
.brochure .disc p { margin-top:5px;font-size:13.5px;color:var(--b-text-dim) }
.brochure .apt { position:sticky;top:20px;border:1px solid var(--b-line);background:var(--b-surface);padding:26px 24px 28px;transition:background .35s,border-color .35s }
.brochure .apt.idds { background:var(--b-charcoal);border-color:var(--b-orange) }
.brochure .apt.idds h3, .brochure .apt.idds .count { color:#fff }
.brochure .apt.idds .apt-msg { color:var(--b-on-dark-dim) }
.brochure .apt.idds .meter i { background:rgba(255,255,255,.16) }
.brochure .apt.idds .meter b { color:var(--b-on-dark-dim) }
.brochure .apt .count { font-family:var(--ft);font-size:clamp(34px,4.6vw,52px);line-height:1;font-weight:700;color:var(--b-orange) }
.brochure .apt h3 { font-size:19px;text-transform:uppercase;margin:10px 0 12px;letter-spacing:.03em }
.brochure .apt-msg { font-size:15px;color:var(--b-text-dim);min-height:5.6em }
.brochure .meter { margin:20px 0 6px;display:grid;gap:10px }
.brochure .meter div { display:grid;grid-template-columns:78px 1fr 34px;align-items:center;gap:10px }
.brochure .meter b { font-family:var(--ft);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--b-text-dim);font-weight:400 }
.brochure .meter i { display:block;height:5px;background:var(--b-surface-2);position:relative;overflow:hidden }
.brochure .meter i span { position:absolute;inset:0 auto 0 0;background:var(--b-orange);width:0;transition:width .4s cubic-bezier(.19,1,.22,1) }
.brochure .meter em { font-family:var(--ft);font-style:normal;font-size:11px;color:var(--b-orange);text-align:right }
.brochure .apt .b-btn { margin-top:18px;width:100%;justify-content:space-between }
.brochure .idds-strip { margin-top:26px;border:1px solid var(--b-line);border-left:3px solid var(--b-orange);background:var(--b-surface); padding:24px 26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px; }
.brochure .idds-strip h4 { margin:0 0 6px;font-size:15px;text-transform:uppercase;letter-spacing:.05em }
.brochure .idds-strip p { font-size:14px;color:var(--b-text-dim) }
.brochure .cta { background:var(--b-orange);color:#fff }
.brochure .cta .sec-title { color:#fff }
.brochure .cta p.b-lede { color:rgba(255,255,255,.9) }
.brochure .cta .b-btn { border-color:#fff;color:#fff }
.brochure .cta .b-btn:hover { background:#fff;color:var(--b-orange-deep) }
.brochure .cta .b-btn.solid { background:var(--b-ink);border-color:var(--b-ink);color:#fff }
.brochure .cta .b-btn.solid:hover { background:#000;color:#fff }
@media (max-width:560px) {
  .brochure .discs { grid-template-columns:1fr }
}
@media (max-width:820px) {
  .brochure .phi, .brochure .stage, .brochure .builder { grid-template-columns:1fr }
  .brochure .apt { position:static }
  .brochure .deliv { columns:1 }
}
@media (prefers-reduced-motion:reduce) {
  .brochure * { animation:none!important;transition-duration:.01ms!important }
  .brochure .b-hero h1 .l > span { transform:none }
  .brochure .rail button[aria-selected="true"] .bar { width:100% }
}

/* ── on the portal ─────────────────────────────────────────────────────── */

/* Orange TEXT on the light grounds is the darker --b-orange-text (4.9:1 on the palest, 5.3:1 on
   the page); the brochure's own orange (the portal's --orange-fill) is for faces with white text
   on them, rules and marks. On the charcoal bands, the light orange. Measured on the page. */
.brochure .b-eyebrow, .brochure .chip b, .brochure .verdict .score, .brochure .pillar .num,
.brochure .stage .who, .brochure .rail .code, .brochure .root .yr, .brochure .meta .more,
.brochure .side, .brochure .meter em { color: var(--b-orange-text); }
.brochure .b-band .b-eyebrow, .brochure .b-band .pillar .num, .brochure .b-band .stage .who,
.brochure .b-band .rail .code, .brochure .b-hero .hero-kicker { color: var(--orange-on-dark); }
/* The call to action sits on the orange itself: white, all of it. */
.brochure .cta .b-eyebrow, .brochure .cta .b-lede { color: #fff; }

/* The section links at the top of the hero, now without the logo beside them. */
.brochure .hero-nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* The figures, said as a sentence rather than a strip of big numbers. */
.brochure .firm-facts { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--b-line); max-width: 62ch; font-size: clamp(17px, 1.8vw, 19px); color: var(--b-text); }
.brochure .firm-facts b { font-family: var(--ft); font-weight: 700; color: var(--brand-dark); }

.brochure .byline { margin-top: 14px; font-family: var(--ft); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--b-text-dim); }
.brochure .sec-alt { background: var(--b-surface-2); }
.brochure .pv-sub { color: var(--b-text-dim); font-weight: 400; }

/* A project with no photograph in js/brochure-images.js: its name stands in the frame instead,
   on the same charcoal as the bands. */
.brochure .b-card .ph.ph-none { display: flex; align-items: flex-end; padding: 20px; background: var(--b-charcoal); }
.brochure .b-card .ph-name { font-family: var(--ft); font-weight: 700; font-size: 26px; line-height: 1.05; text-transform: uppercase; color: #fff; }

.brochure .roots:focus-visible { outline: 2px solid var(--orange-fill); outline-offset: 4px; }

/* ── on a phone (23 September 2026) ─────────────────────────────────────────
   Measured at 375: the section links across the hero were 28px tall and the
   buttons 39px, both under the 44px a thumb needs. Nothing else here changes. */
@media (max-width: 47.99rem) {
  .brochure .topnav a { padding-block: 13px; }
  .brochure .b-btn { min-height: 44px; }
  .brochure .rail button { min-height: 44px; }
  .brochure .filters button { min-height: 44px; }
}