/* Working Surface.
   One theme (Justin, 18 Sep 2026): a white ground, a serif for reading, grey lines, and porcelain
   cobalt as the working colour. An issue is a cobalt stamp; a link is a white stamp with its
   drawing in blue. No celadon, no beige, no dark theme.
   Structure from the design spec and mocks 06 to 15. Type and spacing are the mock values times
   1.25. The perforation keeps the spec's dot sizes. */
:root {
  --blue:#2447B2; --ink:#14211B; --stock:#FFFFFF; --line:#D5D8DE; --stock-line:#E4E6EA; --stock-2:#5A6661; --stock-chip:#E8EDFA;
  --ground:#FFFFFF; --text:#1A2420; --text-hi:#14211B; --text-2:#3B4742; --text-3:#5A6661; --muted:#7A8580;
  --accent:#2447B2; --hair:#E4E6EA; --hair-2:#D5D8DE; --chip-bd:#D5D8DE; --chip-bd-h:#9AA0AA; --chip-tx:#3B4742;
  --on-bg:var(--blue); --on-fg:#FFFFFF; --on-count:#C9D5F5; --mark:var(--blue); --rule:1px;
  --on-blue-2:#E6ECFB; --on-blue-3:#BFCCF3;
  --font-ui:Inter, -apple-system, system-ui, sans-serif;
  --font-text:"Source Serif 4", "Iowan Old Style", Georgia, serif; --w-text:400; --w-head:600; --track:-0.008em;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--ground); }
body { margin:0; background:var(--ground); color:var(--text); font-family:var(--font-text); font-weight:var(--w-text); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font-ui); }
.pg { max-width:1475px; margin:0 auto; padding:35px 40px 50px; }
.ui, .eb, .lbl, .mast nav, .mast .name span, .hd, .mt, .dt, .pub, .who, .dl, .c, .k, .hint, .foot, .pn, .n, .tog, .dom, .ln, .by, .btn, .btn-in, .ref { font-family:var(--font-ui); }

/* masthead */
.mast { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:20px; border-bottom:var(--rule) solid var(--hair-2); }
.mast .name { font-size:27.5px; font-weight:var(--w-head); letter-spacing:var(--track); color:var(--text-hi); }
.mast .name span { color:var(--accent); font-weight:500; margin-left:12px; font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.mast nav { display:flex; align-items:baseline; gap:22px; font-size:15.5px; font-weight:500; color:var(--text-3); }
.mast nav a:hover { color:var(--text-hi); }
.foot { margin-top:55px; padding-top:18px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; font-size:14.5px; color:var(--muted); }
.foot a { color:var(--accent); }

/* shared text */
.lbl { font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:28px 0 5px; }
.std { font-size:16px; line-height:23px; color:var(--text-2); max-width:72ch; margin:0 0 15px; }
.eb { font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.pub { font-size:12px; line-height:15px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; }

/* perforation: list size by default, full size with .lg-perf (spec sizes, not scaled) */
.perf { position:relative; --g:var(--ground); }
.perf::before, .perf::after, .perf > .pl, .perf > .pr { content:""; position:absolute; pointer-events:none; }
.perf::before { left:0; right:0; top:-3px; height:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 1px 0 / 9px 6px repeat-x; }
.perf::after  { left:0; right:0; bottom:-3px; height:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 1px 0 / 9px 6px repeat-x; }
.perf > .pl { top:0; bottom:0; left:-3px; width:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 0 1px / 6px 9px repeat-y; }
.perf > .pr { top:0; bottom:0; right:-3px; width:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 0 1px / 6px 9px repeat-y; }
.perf.lg-perf::before { top:-4px; height:8px; background:radial-gradient(circle at 4px 4px, var(--g) 3.2px, transparent 3.8px) 2px 0 / 12px 8px repeat-x; }
.perf.lg-perf::after  { bottom:-4px; height:8px; background:radial-gradient(circle at 4px 4px, var(--g) 3.2px, transparent 3.8px) 2px 0 / 12px 8px repeat-x; }
.perf.lg-perf > .pl { left:-4px; width:8px; background:radial-gradient(circle at 4px 4px, var(--g) 3.2px, transparent 3.8px) 0 2px / 8px 12px repeat-y; }
.perf.lg-perf > .pr { right:-4px; width:8px; background:radial-gradient(circle at 4px 4px, var(--g) 3.2px, transparent 3.8px) 0 2px / 8px 12px repeat-y; }

/* the issue, as a cobalt stamp (mock 15, variant A) */
.istamp { background:var(--blue); color:#FFFFFF; padding:26px 34px 36px; margin-top:30px; --g:var(--ground); }
.ihd { font-family:var(--font-ui); display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:500; }
.ihd svg { width:26px; height:18px; }
.ia { display:grid; grid-template-columns:1fr 1.25fr; gap:50px; align-items:end; padding:34px 0; }
.ieb { font-family:var(--font-ui); font-size:13px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--on-blue-3); }
.istamp h1 { font-size:52px; line-height:58px; font-weight:var(--w-head); letter-spacing:-0.02em; margin:12px 0 0; }
.isum { font-size:20px; line-height:30px; margin:0; color:var(--on-blue-2); }
.iread { display:inline-block; margin-top:16px; font-family:var(--font-ui); font-size:15px; font-weight:500; color:#FFFFFF; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#8FA7E6; }
.iread:hover { text-decoration-color:#FFFFFF; }
.istamp .row4 { grid-template-columns:repeat(var(--n, 3), 1fr); }
.istamp .row4.n5 { gap:20px; }
.istamp .row4.n5 .st .tx { padding:20px 15px 14px; }
.istamp .row4.n5 .st .hd { padding:13px 15px 0; }
.istamp .row4.n5 .st .tt { font-size:16px; line-height:21px; }
@media (max-width:1250px) { .istamp .row4 { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } }
.istamp .st { --g:var(--blue); box-shadow:none; }
.istamp .hint { color:var(--on-blue-3); }

/* stamp card: source first, then the commentary */
.row4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.st { background:var(--stock); color:var(--ink); display:flex; flex-direction:column; transition:transform .15s ease; box-shadow:inset 0 0 0 1px var(--line); }
.st:hover { transform:translateY(-2px); }
.hd { font-weight:500; color:var(--mark); }
.st .hd { display:flex; justify-content:space-between; padding:15px 18px 0; font-size:15px; }
.st .hd svg { width:22px; height:15px; }
.st .tx { padding:24px 18px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.st .pub { color:var(--blue); }
.st .tt { font-size:17px; line-height:22px; font-weight:var(--w-head); letter-spacing:-0.01em; margin:0; }
.st .sb { font-size:12.5px; line-height:17px; margin:0; color:var(--stock-2); font-family:var(--font-ui); }
.st .cm { font-size:14px; line-height:20px; margin:6px 0 0; padding-top:10px; border-top:1px solid var(--stock-line); }
.st .mt { font-size:11px; line-height:15px; margin:4px 0 0; color:var(--blue); }
.st img { display:block; width:calc(100% - 24px); margin:12px 12px 0; aspect-ratio:4/3; object-fit:cover; mix-blend-mode:multiply; }
.hint { display:none; font-size:13px; color:var(--muted); padding-top:12px; }

/* archive chips */
.br { padding-top:38px; }
.tog { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:12px; }
.tog .l { font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.tog .l i { font-style:normal; }
.tog .l i::before { content:" · "; }
.tog .f { display:none; align-items:center; gap:6px; font-size:14px; color:var(--text-2); background:none; border:1px solid var(--chip-bd); border-radius:999px; padding:6px 12px; white-space:nowrap; flex-shrink:0; cursor:pointer; }
.tog .f b { font-weight:500; color:var(--text-hi); }
.tog .f svg { width:13px; height:13px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
.br.open .tog .f svg { transform:rotate(180deg); }
.br-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px; }
.br-row .k { font-size:14px; color:var(--muted); width:80px; flex-shrink:0; padding-top:6px; }
.br-row .cs { display:flex; gap:10px; flex-wrap:wrap; flex:1; }
.c { font-size:14px; font-weight:500; color:var(--chip-tx); background:none; border:1px solid var(--chip-bd); border-radius:999px; padding:5px 12px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.c:hover { border-color:var(--chip-bd-h); }
.c i { font-style:normal; color:var(--muted); }
.mast nav a.on { color:var(--blue); }
.c.on { background:var(--on-bg); color:var(--on-fg); border-color:var(--on-bg); }
.c.on i { color:var(--on-count); }
.c img { width:17px; height:17px; border-radius:4px; display:block; }

/* ledger */
.lg { display:flex; flex-direction:column; margin-top:18px; }
.lg-r { display:grid; grid-template-columns:120px 1fr auto; gap:22px; align-items:start; padding:18px 0; border-bottom:1px solid var(--hair); }
.lg-r[hidden] { display:none; }
.lg-r .th { width:120px; aspect-ratio:4/3; background:var(--stock); overflow:hidden; border:1px solid var(--line); }
.lg-r .th img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; display:block; }
.ph { background:repeating-linear-gradient(135deg, #EEF1F6 0 6px, #FFFFFF 6px 12px) !important; }
.lg-r .pub { color:var(--accent); margin-bottom:4px; }
.lg-r .tt { font-size:18px; font-weight:var(--w-head); color:var(--text-hi); letter-spacing:-0.01em; line-height:24px; }
.lg-r:hover .tt { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.lg-r .sb { font-size:13.5px; color:var(--text-3); margin-top:3px; font-family:var(--font-ui); }
.lg-r .cm { font-size:15.5px; line-height:22px; color:var(--text-2); margin-top:8px; max-width:78ch; }
.lg-r .mt { font-size:12.5px; color:var(--accent); margin-top:7px; }
.lg-r .dt { font-size:13.5px; color:var(--muted); white-space:nowrap; padding-top:2px; }

/* link page and the issue sheet */
.lk { display:grid; grid-template-columns:minmax(0, 900px) 312px; gap:45px; align-items:start; padding-top:32px; }
.sheet { background:var(--stock); color:var(--ink); padding:0 0 38px; box-shadow:inset 0 0 0 1px var(--line); }
.sheet .hd { display:flex; justify-content:space-between; align-items:center; padding:28px 38px 0; font-size:17.5px; }
.sheet .hd svg { width:32px; height:22px; }
.sheet .hero { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; mix-blend-mode:multiply; margin-top:22px; }
.sheet .body { padding:0 38px; }
.sheet .pub { color:var(--blue); font-size:13px; margin-top:28px; }
.sheet .pub + h1 { margin-top:8px; }
.sheet h1 { font-size:34px; line-height:41px; font-weight:var(--w-head); letter-spacing:-0.018em; margin:28px 0 12px; }
.sheet .sub { font-size:16px; line-height:23px; color:var(--stock-2); margin:0; font-family:var(--font-ui); }
.sheet a.u, .sheet .note-s p a, .sheet .note-s li a { text-decoration:underline; text-decoration-color:var(--blue); text-underline-offset:4px; color:var(--blue); }
.sheet .tags { font-size:14.5px; color:var(--blue); margin:12px 0 0; font-family:var(--font-ui); }
.sheet .tags a:hover { text-decoration:underline; text-underline-offset:4px; }
.sheet .btn-in { display:none; text-align:center; background:var(--blue); color:#FFFFFF; padding:12px; font-size:16px; font-weight:500; margin-top:18px; }
.sec { padding-top:30px; }
.sec .eb { color:var(--blue); margin-bottom:10px; }
.sec p, .sec li { font-size:17.5px; line-height:27px; margin:0; }
.sec p.take { font-size:21px; line-height:30px; font-weight:var(--w-head); letter-spacing:-0.012em; }
.sec ul { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.mv { display:flex; gap:15px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--stock-line); }
.mv.last { border-bottom:1px solid var(--stock-line); }
.mv .who { font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--blue); background:var(--stock-chip); padding:4px 0; border-radius:5px; white-space:nowrap; margin-top:3px; width:118px; text-align:center; flex-shrink:0; }
.mv p { flex:1; }
.srcline { font-size:15.5px !important; line-height:23px !important; color:var(--stock-2); margin-top:12px !important; }
.srcline q { font-style:italic; }
.post { padding:12px 0; border-top:1px solid var(--stock-line); }
.post .by { font-size:14px; color:var(--stock-2); margin-top:5px; }
.rail { display:flex; flex-direction:column; gap:30px; font-size:15.5px; color:var(--text-2); padding-top:8px; }
.rail .eb { margin-bottom:10px; }
.rail a.btn { display:inline-block; color:var(--on-fg); background:var(--on-bg); font-size:15.5px; font-weight:500; padding:10px 15px; }
.dl { display:grid; grid-template-columns:98px 1fr; row-gap:8px; column-gap:12px; font-size:15px; line-height:20px; margin:0; }
.dl dt { color:var(--muted); }
.dl dd { margin:0; color:var(--text); }
.dl dd a:hover { text-decoration:underline; text-underline-offset:4px; }
.rel .it { display:block; padding:12px 0; border-top:1px solid var(--hair); }
.rel .it:last-child { border-bottom:1px solid var(--hair); }
.rel .it b { display:block; color:var(--text-hi); font-weight:var(--w-head); font-size:15.5px; line-height:21px; }
.rel .it:hover b { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.rel .it span { display:block; color:var(--muted); font-size:13.5px; margin-top:4px; font-family:var(--font-ui); }
.pn2 { display:flex; justify-content:space-between; gap:12px; font-size:15px; color:var(--accent); font-family:var(--font-ui); }

/* the issue on a sheet */
.note-s .a { font-size:19px; line-height:28px; color:var(--text-2); margin:0; }
.note-s .eb { color:var(--blue); margin:32px 0 12px; }
.note-s .eb:first-child { margin-top:26px; }
.note-s p { font-size:18px; line-height:29px; margin:0 0 18px; }
.note-s p.q { color:var(--text-3); }
.note-s li { font-size:17.5px; line-height:26px; margin:0 0 10px; }
.note-s ul { margin:0; padding-left:22px; }
.note-s ul + p { margin-top:10px; font-size:17.5px; }
.rc { display:block; padding:15px 0; border-top:1px solid var(--stock-line); color:var(--ink); text-decoration:none; }
.rc.last { border-bottom:1px solid var(--stock-line); }
.rc .pub { color:var(--blue); margin-bottom:4px; }
.rc .t { font-size:18px; font-weight:var(--w-head); letter-spacing:-0.01em; line-height:24px; display:flex; justify-content:space-between; gap:15px; color:var(--ink) !important; text-decoration:none !important; }
.rc .t .ref { font-weight:500; color:var(--stock-2); font-size:13.5px; white-space:nowrap; padding-top:3px; }
.rc:hover .t > span:first-child { text-decoration:underline; text-decoration-color:var(--blue); text-underline-offset:4px; }
.rc .s { font-size:14px; color:var(--stock-2); margin:4px 0 8px; font-family:var(--font-ui); }
.rc p { font-size:16px; line-height:23px; margin:0; color:var(--ink); }

/* topics */
.md { display:grid; grid-template-columns:288px 1fr; gap:45px; padding-top:28px; align-items:start; }
.md .ls .it { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 14px; border-top:1px solid var(--hair); font-size:15.5px; line-height:21px; color:var(--text-2); }
.md .ls .it:last-child { border-bottom:1px solid var(--hair); }
.md .ls .it i { font-style:normal; font-size:13px; color:var(--muted); font-family:var(--font-ui); white-space:nowrap; flex-shrink:0; }
.md .ls .it.on { background:var(--on-bg); color:var(--on-fg); }
.md .ls .it.on i { color:var(--on-count); }
.md .ls .it:not(.on):hover { color:var(--text-hi); }
.th-h h1 { font-size:27.5px; line-height:34px; font-weight:var(--w-head); letter-spacing:-0.018em; color:var(--text-hi); margin:10px 0 10px; }
.th-h .df { font-size:17.5px; line-height:26px; color:var(--text-2); max-width:66ch; margin:0; }

/* practices: the suggested actions grouped by topic (was the Craft page's two long columns, 29 Sep 2026) */
.pmd { padding-top:14px; }
.pmd .ls { position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto; }
.lsb { display:none; }
.pmd .ls .it[hidden], .pgp[hidden] { display:none; }
.pgp { padding:4px 0 44px; scroll-margin-top:24px; max-width:860px; }
.pgp + .pgp { padding-top:36px; border-top:1px solid var(--hair-2); }
.pgp h2 { font-size:27.5px; line-height:34px; font-weight:var(--w-head); letter-spacing:-0.018em; color:var(--text-hi); margin:0 0 8px; }
.pgp .df { font-size:17.5px; line-height:26px; color:var(--text-2); max-width:66ch; margin:0; }
.pgp .gm { font-family:var(--font-ui); font-size:13.5px; color:var(--muted); margin-top:10px; }
.pgp .gm a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.prs { margin-top:18px; border-bottom:1px solid var(--hair); max-width:860px; }
.pra { display:flex; gap:18px; align-items:flex-start; padding:17px 0; border-top:1px solid var(--hair); }
.pra[hidden], .pgp.clip .pra.x { display:none; }
.pra .who { font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--blue); background:var(--stock-chip); padding:4px 0; border-radius:5px; white-space:nowrap; margin-top:3px; width:118px; text-align:center; flex-shrink:0; }
.pra > div { flex:1; min-width:0; }
.pra p { font-size:18px; line-height:27px; color:var(--text-hi); margin:0; }
.pra .ln { font-family:var(--font-ui); font-size:13.5px; line-height:19px; color:var(--muted); margin-top:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pra .ln b { color:var(--text-3); font-weight:600; }
.pra:hover .ln b { color:var(--accent); }
.pra:hover p { text-decoration:underline; text-decoration-color:var(--chip-bd-h); text-underline-offset:5px; }
.pgp .gm .ord { margin-left:12px; padding-left:12px; border-left:1px solid var(--hair-2); color:var(--accent); }
/* Jev's stamps: one per topic, each a different design (Justin, 29 Sep 2026) */
.ink-defs { position:absolute; width:0; height:0; overflow:hidden; }
.pgh { display:grid; grid-template-columns:minmax(0, 1fr) 210px; gap:24px; align-items:center; max-width:860px; }
.stw { display:flex; justify-content:center; align-items:center; }
.stp { display:block; width:var(--w); height:auto; color:var(--blue); opacity:.9; }
/* Jev's scores for a practice, on hover or keyboard focus (Justin, 29 Sep 2026); none on touch screens */
.pra { position:relative; }
.jc { position:absolute; right:0; top:calc(100% - 10px); z-index:5; width:330px; padding:12px 14px 11px; background:var(--stock);
      border:1px solid var(--line); box-shadow:0 8px 28px rgba(20,33,27,.12); font-family:var(--font-ui); font-size:12.5px; line-height:17px;
      color:var(--text-2); display:flex; flex-direction:column; gap:7px; visibility:hidden; opacity:0; transform:translateY(-4px);
      transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s; pointer-events:none; }
.pra:hover .jc, .pra:focus-visible .jc { visibility:visible; opacity:1; transform:none; transition-delay:.25s, .25s, .25s; }
.jc b { color:var(--accent); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.jr { display:grid; grid-template-columns:1fr 84px 52px; gap:10px; align-items:center; }
.jb { position:relative; height:6px; border-radius:3px; background:var(--stock-chip); }
.jb::before { content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) * 100%); border-radius:3px; background:var(--blue); }
.jb::after { content:""; position:absolute; top:-3px; bottom:-3px; left:calc(var(--p) * 100%); width:1.5px; background:var(--text-hi); }
.jr.lo .jb::before { background:#9AA6C8; }
.jn { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-hi); font-weight:500; }
.jv { color:var(--accent); font-weight:500; }
.jv.lo { color:var(--text-3); }
@media (hover:none) { .jc { display:none; } }
.std a.u { color:var(--accent); text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.pgp .more { margin-top:16px; font-size:14px; font-weight:500; color:var(--accent); background:none; border:1px solid var(--chip-bd); border-radius:999px; padding:6px 14px; cursor:pointer; }
.pgp .more:hover { border-color:var(--chip-bd-h); }

/* shipped */
.tl { position:relative; margin-top:20px; padding-left:188px; }
.tl::before { content:""; position:absolute; left:150px; top:8px; bottom:8px; width:1px; background:var(--chip-bd); }
.tl .ev { position:relative; padding:0 0 28px; }
.tl .ev[hidden] { display:none; }
.tl .ev .dt { position:absolute; left:-188px; width:118px; text-align:right; font-size:15px; color:var(--text-3); padding-top:5px; }
.tl .ev .pr { font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:600; padding-top:5px; font-family:var(--font-ui); }
.tl .ev .ft { font-size:19px; line-height:25px; font-weight:var(--w-head); color:var(--text-hi); letter-spacing:-0.012em; margin:6px 0 6px; max-width:64ch; }
.tl .ev .wc { font-size:16px; line-height:24px; color:var(--text-2); max-width:66ch; }
.tl .ev .mt { font-size:14px; color:var(--muted); margin-top:8px; }
.tl .ev .mt .tg { color:var(--accent); }
.tl .ev .mt a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.tl .ev .nd { position:absolute; left:-53px; top:0; width:30px; height:30px; border-radius:8px; overflow:hidden; background:var(--ground); box-shadow:0 0 0 5px var(--ground); }
.tl .ev .nd img { width:100%; height:100%; display:block; object-fit:cover; }
.tl .ev .nd.tx { border:1px solid var(--chip-bd); color:var(--text-2); font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); }

/* issues archive */
.ir { padding:25px 0 28px; border-bottom:1px solid var(--hair); }
.ir.first { border-top:1px solid var(--hair); margin-top:15px; }
.ist { display:block; background:var(--blue); color:#FFFFFF; padding:16px 20px 20px; --g:var(--ground); }
.ist .ihd { font-size:13px; }
.ist .ihd svg { width:20px; height:14px; }
.ir .ist .d { color:#FFFFFF; display:block; font-size:24px; line-height:30px; font-weight:var(--w-head); letter-spacing:-0.015em; margin-top:18px; }
.ir .ist .a { display:block; font-size:15.5px; line-height:23px; color:var(--on-blue-2); margin-top:8px; max-width:none; }
.ist:hover .d { text-decoration:underline; text-underline-offset:5px; text-decoration-color:#8FA7E6; }
.ir .d { font-size:19px; font-weight:var(--w-head); color:var(--text-hi); letter-spacing:-0.012em; }
.ir a.d:hover { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px; }
.ir .a { font-size:16px; line-height:23px; color:var(--text-2); margin-top:6px; max-width:78ch; }
.ir .n { font-size:14px; color:var(--muted); margin-top:6px; }
.side { display:grid; grid-template-columns:425px 1fr; gap:40px; align-items:start; }
.carwrap { position:relative; min-width:0; }
.carwrap::after { content:""; position:absolute; right:0; top:0; bottom:10px; width:70px; background:linear-gradient(90deg, transparent, var(--ground)); pointer-events:none; }
.car { display:flex; gap:20px; overflow-x:auto; padding:4px 75px 10px 4px; scrollbar-width:thin; scrollbar-color:var(--chip-bd) transparent; }
.ms { background:var(--stock); color:var(--ink); display:flex; flex-direction:column; flex-shrink:0; width:215px; box-shadow:inset 0 0 0 1px var(--line); }
.ms .hd { display:flex; justify-content:space-between; padding:11px 14px 0; font-size:12.5px; }
.ms .hd svg { width:18px; height:12px; }
.ms .tx { padding:16px 14px 11px; display:flex; flex-direction:column; gap:4px; flex:1; }
.ms .pub { font-size:9.5px; line-height:12px; color:var(--blue); }
.ms .tt { font-size:13px; line-height:17px; font-weight:var(--w-head); letter-spacing:-0.01em; margin:0; }
.ms .mt { font-size:10px; line-height:13px; margin:3px 0 0; color:var(--blue); }
.ms img, .ms .ph { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; mix-blend-mode:multiply; }
.ms .ph { mix-blend-mode:normal; background:repeating-linear-gradient(135deg, #EEF1F6 0 5px, #FFFFFF 5px 10px) !important; }

/* sources and colophon */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:0 50px; }
.grp .eb { margin:28px 0 8px; }
.sr { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline; padding:11px 0; border-top:1px solid var(--hair); font-size:16px; line-height:22px; }
.grp .sr:last-child { border-bottom:1px solid var(--hair); }
.sr b { color:var(--text-hi); font-weight:var(--w-head); letter-spacing:-0.01em; }
.sr b i { font-style:normal; font-weight:400; color:var(--text-3); font-size:14.5px; margin-left:8px; }
.dom { color:var(--accent); text-decoration:underline; text-underline-offset:4px; white-space:nowrap; font-size:14.5px; }
.col2 { display:grid; grid-template-columns:250px 1fr; gap:18px 45px; padding-top:30px; align-items:start; }
.col2 h1 { grid-column:1 / -1; font-size:34px; line-height:41px; font-weight:var(--w-head); letter-spacing:-0.018em; color:var(--text-hi); margin:0 0 10px; }
.col2 .k { font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); font-weight:600; padding-top:25px; border-top:1px solid var(--hair); font-family:var(--font-ui); }
.col2 .v { padding-top:20px; border-top:1px solid var(--hair); max-width:66ch; }
.col2 .v p { font-size:17.5px; line-height:28px; color:var(--text); margin:0 0 12px; }
.col2 .v p:last-child { margin-bottom:0; }
.col2 .v b { color:var(--accent); font-weight:600; }

/* phone, spec 15.7. The breakpoint moved from 720 to 900 px with the larger type. */
@media (max-width:899px) {
  .pg { padding:16px 18px 32px; }
  .mast { display:block; padding-bottom:0; border-bottom:none; }
  .mast .name { display:block; font-size:22px; padding:6px 0 12px; border-bottom:var(--rule) solid var(--hair-2); }
  .mast .name span { margin-left:9px; font-size:12px; }
  .mast nav { gap:18px; font-size:14.5px; padding:12px 0 0; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
  .mast nav::-webkit-scrollbar { display:none; }
  .istamp { margin:20px -12px 0; padding:18px 20px 22px; }
  .ia { display:block; padding:22px 0 24px; }
  .istamp h1 { font-size:34px; line-height:39px; margin-top:8px; }
  .isum { font-size:17px; line-height:26px; margin-top:16px; }
  .istamp .row4 { display:flex; }
  .row4 { display:flex; gap:16px; overflow-x:auto; padding:4px 4px 10px; margin:0 -4px; scrollbar-width:thin; scrollbar-color:var(--chip-bd) transparent; }
  .row4 .st { width:285px; flex-shrink:0; }
  .hint { display:block; }
  .br { padding-top:24px; }
  .tog { padding:14px 0; border-top:1px solid var(--hair); margin-bottom:0; }
  .tog .l { font-size:12px; }
  .tog .l i { display:block; color:var(--muted); letter-spacing:0; text-transform:none; font-size:13.5px; margin-top:3px; }
  .tog .l i::before { content:""; }
  .tog .f { display:inline-flex; }
  .br .rows { display:none; padding-bottom:6px; }
  .br.open .rows { display:block; }
  .br-row { display:block; margin-bottom:12px; }
  .br-row .k { display:block; width:auto; font-size:12.5px; margin-bottom:7px; }
  .br-row .cs { gap:7px; }
  .c { font-size:13.5px; padding:5px 11px; }
  .lg { margin-top:0; }
  .lg-r { grid-template-columns:76px 1fr; gap:14px; padding:14px 0; border-bottom:none; border-top:1px solid var(--hair); }
  .lg-r .th { width:76px; }
  .lg-r .pub { font-size:11px; }
  .lg-r .tt { font-size:16px; line-height:21px; }
  .lg-r .sb { font-size:12.5px; }
  .lg-r .cm { font-size:14.5px; line-height:21px; margin-top:6px; }
  .lg-r .mt { font-size:12px; }
  .lg-r .dt { grid-column:2; font-size:12.5px; margin-top:-8px; padding-top:0; }
  .lk { display:block; padding-top:20px; }
  .sheet { margin:0 -12px; }
  .sheet.lg-perf::before, .istamp.lg-perf::before { top:-3px; height:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 1px 0 / 9px 6px repeat-x; }
  .sheet.lg-perf::after, .istamp.lg-perf::after { bottom:-3px; height:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 1px 0 / 9px 6px repeat-x; }
  .sheet.lg-perf > .pl, .istamp.lg-perf > .pl { left:-3px; width:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 0 1px / 6px 9px repeat-y; }
  .sheet.lg-perf > .pr, .istamp.lg-perf > .pr { right:-3px; width:6px; background:radial-gradient(circle at 3px 3px, var(--g) 2.4px, transparent 2.9px) 0 1px / 6px 9px repeat-y; }
  .sheet .hd { padding:18px 20px 0; font-size:15px; }
  .sheet .hd svg { width:26px; height:18px; }
  .sheet .hero { margin-top:16px; }
  .sheet .body { padding:0 20px; }
  .sheet .pub { margin-top:20px; font-size:12px; }
  .sheet h1 { font-size:24px; line-height:30px; margin:20px 0 10px; }
  .sheet .sub { font-size:14.5px; line-height:21px; }
  .sheet .btn-in { display:block; }
  .sec p, .sec li { font-size:16.5px; line-height:25px; }
  .sec p.take { font-size:18.5px; line-height:26px; }
  .note-s p { font-size:16.5px; line-height:26px; }
  .note-s .a { font-size:17px; line-height:25px; }
  .rc .t { font-size:16.5px; line-height:22px; }
  .rail { padding-top:26px; }
  .rail .btn-wrap { display:none; }
  .md { display:block; }
  .md .ls { margin-bottom:28px; }
  .pgh { grid-template-columns:minmax(0, 1fr) 86px; gap:12px; align-items:start; }
  .stp { width:calc(var(--w) * .5); }
  .pgp .gm .ord { display:block; margin:4px 0 0; padding:0; border:none; }
  .pmd { display:block; padding-top:6px; }
  .pmd .ls { position:static; max-height:none; }
  /* the topic list folds under a button, like the archive's Filters (1 Oct 2026); without script it stays open */
  .js .lsb { display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; font-family:var(--font-ui); font-size:15px; color:var(--text-2); background:none; border:1px solid var(--chip-bd); border-radius:999px; padding:10px 16px; margin:4px 0 20px; cursor:pointer; }
  .lsb b { font-weight:600; color:var(--text-hi); margin-left:8px; }
  .lsb svg { width:14px; height:14px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s ease; }
  .md.open .lsb svg { transform:rotate(180deg); }
  .js .md:not(.open) .ls { display:none; }
  .pgp h2 { font-size:23px; line-height:29px; }
  .pgp .df { font-size:16px; line-height:24px; }
  .pgp + .pgp { padding-top:28px; }
  .pra { display:block; padding:14px 0; }
  .pra .who { display:inline-block; width:auto; padding:3px 8px; font-size:10.5px; margin:0 0 7px; }
  .pra p { font-size:16.5px; line-height:25px; }
  .pra .ln { font-size:12.5px; }
  .tl { padding-left:48px; }
  .tl::before { left:15px; }
  .tl .ev .dt { position:static; width:auto; text-align:left; padding:0 0 3px; font-size:13px; }
  .tl .ev .nd { left:-48px; }
  .tl .ev .ft { font-size:17.5px; line-height:23px; }
  .side { display:block; }
  .carwrap { margin-top:16px; }
  .g2 { grid-template-columns:1fr; }
  .col2 { grid-template-columns:1fr; gap:0; }
  .col2 h1 { font-size:27px; line-height:33px; }
  .col2 .v { border-top:none; padding:10px 0 24px; }
}

/* Ask (mock 17, Justin 29 Sep 2026): a cobalt stamp with the clerk robot, the answer on a white sheet */
.askst { background:var(--blue); color:#FFFFFF; margin-top:34px; padding:34px 40px 38px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:34px; align-items:start; }
.askic { width:132px; height:132px; color:#FFFFFF; --bot-bg:var(--blue); } /* the card is filled with the ground behind it */
.askst h1 { margin:0; font-size:40px; line-height:1.1; font-weight:var(--w-head); letter-spacing:-0.01em; text-wrap:balance; }
.askst .lede { margin:12px 0 0; font-size:19px; line-height:1.5; color:var(--on-blue-2); max-width:60ch; }
.askf { margin-top:24px; display:flex; max-width:760px; }
.askf input { flex:1; min-width:0; font-family:var(--font-text); font-size:18px; padding:15px 18px; border:0; background:#FFFFFF; color:var(--ink); border-radius:0; }
.askf input::placeholder { color:#8A938F; }
.askf button { font-size:15px; font-weight:600; padding:0 26px; border:0; background:var(--ink); color:#FFFFFF; cursor:pointer; }
.askf button[disabled] { opacity:.6; cursor:wait; }
.askf input:focus-visible, .askf button:focus-visible, .tries button:focus-visible { outline:3px solid var(--on-blue-3); outline-offset:0; }
.tries { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tries span { font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--on-blue-3); margin-right:4px; }
.tries button { font-size:13.5px; background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:6px 13px; cursor:pointer; }
.tries button:hover { background:rgba(255,255,255,.12); }
.askst .say { margin:10px 0 0; font-family:var(--font-ui); font-size:14px; color:var(--on-blue-3); min-height:20px; }
/* the answer desk (mock 18, layout B, Justin 30 Sep 2026): the clerk, a numbered answer card, the links used */
.desk { margin-top:40px; display:grid; grid-template-columns:150px minmax(0,1fr) 330px; gap:40px; align-items:start; }
.desk[hidden], .dside[hidden], .filed[hidden] { display:none; }
.desk .clerk { position:sticky; top:24px; text-align:center; grid-row:span 2; }
.acard { grid-column:2; grid-row:1; } .dside { grid-column:3; grid-row:1 / span 2; } .filed { grid-column:2; grid-row:2; }
.deskbot { width:150px; height:150px; color:var(--blue); }
.deskbot .eye-open { animation-delay:2.3s !important; } /* blinks out of step with the stamp's clerk */
.desk .note { font-family:var(--font-ui); font-size:13px; line-height:1.45; color:var(--text-3); margin:6px 0 0; min-height:38px; }
.acard { border:1.5px dashed var(--line); padding:26px 30px 26px; position:relative; }
.acard::before { content:"No. " attr(data-n); position:absolute; top:12px; right:16px; font-family:var(--font-ui); font-size:11.5px; font-weight:600; color:var(--blue); letter-spacing:.04em; }
.acard .q { font-size:26px; line-height:1.3; font-weight:var(--w-head); margin:0 0 16px; padding-right:60px; text-wrap:balance; color:var(--ink); }
.acard p { margin:0; font-size:19px; line-height:1.6; max-width:66ch; }
.acard p.wait { color:var(--text-3); }
.cite { font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--blue); background:var(--stock-chip); padding:1px 6px; white-space:nowrap; }
.cite:hover { background:var(--blue); color:#FFFFFF; }
.desk h2.lbl, .dside h2, .filed h2 { font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); font-weight:500; margin:0 0 12px; }
.filed { margin-top:-14px; }
.filed h2 { margin-bottom:6px; }
.filed button { display:block; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line); padding:11px 0; cursor:pointer; font-family:var(--font-text); font-size:16.5px; color:var(--text-2); }
.filed button:hover { color:var(--blue); }
.filed button span { font-family:var(--font-ui); font-size:11.5px; font-weight:600; color:var(--blue); margin-right:10px; }
.used { display:grid; gap:12px; }
.used a { display:block; border:1.5px dashed var(--line); padding:13px 16px; }
.used a:hover { border-color:var(--blue); border-style:solid; }
.used .lb { font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--blue); }
.used .pb { font-family:var(--font-ui); font-size:12.5px; color:var(--text-3); margin-top:5px; }
.used .tt { font-size:16.5px; line-height:1.35; font-weight:var(--w-head); margin-top:2px; color:var(--ink); }
.askfoot { font-family:var(--font-ui); font-size:13px; color:var(--text-3); margin:28px 0 0; line-height:1.5; max-width:760px; }
/* the clerk robot's moods (mock 18); static/ask.js sets the class */
.bot { overflow:visible; }
.bot * { transform-box:fill-box; }
.bot .eye-shut, .bot .eye-happy, .bot .m-flat, .bot .m-o, .bot .m-wobble, .bot .g-lines, .bot .g-tick, .bot .g-no, .bot .m-frown, .bot .g-closed, .bot .zz, .bot .drop { opacity:0; }
.bot .card, .bot .head, .bot .pup, .bot .whole { transition:transform .35s ease; }
.bot .whole, .bot .head { transform-origin:50% 100%; }
.bot .card { transform-origin:0% 100%; }

/* idle */
.bot.idle .eye-open { animation:blink 5s infinite; transform-origin:center; }
.bot.idle .bulb { animation:glow 3s ease-in-out infinite; }
/* listening: looks at the box as you type */
.bot.listen .pup { transform:translate(1.4px, 1.2px); }
.bot.listen .head { transform:rotate(5deg); }
.bot.listen .bulb { animation:glow 1s ease-in-out infinite; }
/* reading: lifts the card, eyes scan it */
.bot.think .whole { animation:bob 1.1s ease-in-out infinite; }
.bot.think .pup { animation:scan 1.3s ease-in-out infinite; }
.bot.think .card { transform:translateY(-3px) rotate(-6deg); animation:rock 1.3s ease-in-out infinite; }
.bot.think .g-q { opacity:0; } .bot.think .g-lines { opacity:1; }
.bot.think .bulb { animation:glow .6s ease-in-out infinite; }
.bot.think .m-smile { opacity:0; } .bot.think .m-o { opacity:1; }
/* found: a hop, happy eyes, a tick on the card */
.bot.found .whole { animation:hop .5s ease-out 1; }
.bot.found .eye-open { opacity:0; } .bot.found .eye-happy { opacity:1; }
.bot.found .g-q { opacity:0; } .bot.found .g-tick { opacity:1; }
.bot.found .g-tick path { stroke-dasharray:14; stroke-dashoffset:14; animation:draw .45s .15s ease-out forwards; }
/* not covered: a slow shrug, eyes up */
.bot.shrug .head { animation:tilt 1.8s ease-in-out infinite; }
.bot.shrug .pup { transform:translate(0, -1.3px); }
.bot.shrug .m-smile { opacity:0; } .bot.shrug .m-wobble { opacity:1; }
.bot.shrug .card { transform:rotate(12deg) translateY(3px); }
/* advice or news: shakes its head */
.bot.nope .head { animation:nope 2.6s ease-in-out infinite; transform-origin:50% 100%; }
.bot.nope .pup { animation:nopeeyes 2.6s ease-in-out infinite; }
.bot.nope .m-smile { opacity:0; } .bot.nope .m-frown { opacity:1; }
.bot.nope .card { transform:rotate(6deg) translateY(1px); }
.bot.nope .g-q { opacity:0; } .bot.nope .g-no { opacity:1; }
/* busy: a bead of sweat, a flickering antenna */
.bot.busy .drop { opacity:1; animation:drop 1.6s ease-in infinite; }
.bot.busy .bulb { animation:flicker 1.2s steps(2) infinite; }
.bot.busy .m-smile { opacity:0; } .bot.busy .m-wobble { opacity:1; }
.bot.busy .whole { animation:bob 2.2s ease-in-out infinite; }
/* asleep */
.bot.sleep .eye-open { opacity:0; } .bot.sleep .eye-shut { opacity:1; }
.bot.sleep .m-smile { opacity:0; } .bot.sleep .m-flat { opacity:1; }
.bot.sleep .zz { opacity:1; animation:zz 2.4s ease-in-out infinite; }
.bot.sleep .whole { animation:breathe 3.2s ease-in-out infinite; }
.bot.sleep .card { transform:rotate(30deg) translateY(4px); }
.bot.sleep .bulb { opacity:.3; }
/* closed region: waves the card like a sign */
.bot.wave .card { animation:wave 1.4s ease-in-out infinite; }
.bot.wave .g-q { opacity:0; } .bot.wave .g-closed { opacity:1; }
/* hello: a wave on arrival */
.bot.hello .card { animation:wave .7s ease-in-out 2; }
.bot.hello .eye-open { opacity:0; } .bot.hello .eye-happy { opacity:1; }

@keyframes blink { 0%, 93%, 100% { transform:scaleY(1); } 95% { transform:scaleY(.1); } }
@keyframes glow { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@keyframes bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes scan { 0%, 100% { transform:translate(-1.3px, .6px); } 50% { transform:translate(1.3px, .6px); } }
@keyframes rock { 0%, 100% { transform:translateY(-3px) rotate(-6deg); } 50% { transform:translateY(-4px) rotate(-2deg); } }
@keyframes hop { 0% { transform:translateY(0); } 40% { transform:translateY(-6px); } 70% { transform:translateY(0) scaleY(.96); } 100% { transform:none; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes tilt { 0%, 100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
@keyframes nope { 0%, 45%, 100% { transform:none; } 10% { transform:translateX(-2px) rotate(-4deg); } 22% { transform:translateX(2px) rotate(4deg); } 34% { transform:translateX(-1px) rotate(-2deg); } }
@keyframes nopeeyes { 0%, 45%, 100% { transform:translate(0, .4px); } 10% { transform:translate(-1px, .4px); } 22% { transform:translate(1px, .4px); } 34% { transform:translate(-.5px, .4px); } }
@keyframes shake { 0%, 100% { transform:translateX(0); } 25% { transform:translateX(-2.5px); } 75% { transform:translateX(2.5px); } }
@keyframes drop { 0% { transform:translateY(0); opacity:0; } 20% { opacity:1; } 100% { transform:translateY(9px); opacity:0; } }
@keyframes flicker { 0% { opacity:1; } 50% { opacity:.2; } }
@keyframes zz { 0%, 100% { transform:translateY(0); opacity:1; } 50% { transform:translateY(-2px); opacity:.45; } }
@keyframes breathe { 0%, 100% { transform:scaleY(1); } 50% { transform:scaleY(.975); } }
@keyframes wave { 0%, 100% { transform:rotate(-14deg); } 50% { transform:rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .bot, .bot * { animation:none !important; transition:none !important; } }
@media (max-width: 900px) {
  .askst { grid-template-columns:minmax(0,1fr); padding:26px 22px 28px; gap:14px; }
  .askic { width:84px; height:84px; }
  .askst h1 { font-size:30px; }
  .askf { flex-direction:column; }
  .askf button { padding:14px; }
  .desk { grid-template-columns:minmax(0,1fr); gap:18px; }
  .desk .clerk { position:static; display:flex; align-items:center; gap:12px; text-align:left; grid-row:auto; }
  .acard, .dside, .filed { grid-column:1; grid-row:auto; }
  .deskbot { width:72px; height:72px; }
  .acard { padding:20px 18px; }
  .acard .q { font-size:21px; }
  .acard p { font-size:17.5px; }
}

/* sources beyond the first row open in place (Justin, 29 Sep 2026) */
.more-src { display:contents; }
.more-src[hidden] { display:none !important; }
.c.more-btn { border-style:dashed; color:var(--accent); }

/* Ask on every page (Justin, 1 Oct 2026): a strip on the front page and a floating button elsewhere */
.askhome { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr); align-items:center; gap:20px; margin-top:26px; padding:18px 22px; border:1px dashed var(--line); background:var(--stock); }
.askhome .askhic { width:58px; height:58px; color:var(--blue); --bot-bg:#FFFFFF; }
.askhome .t b { display:block; font-size:21px; line-height:26px; font-weight:var(--w-head); letter-spacing:-0.01em; color:var(--text-hi); }
.askhome .t span { display:block; font-family:var(--font-ui); font-size:13.5px; line-height:19px; color:var(--text-3); margin-top:3px; }
.askhome .f { display:flex; }
.askhome input { flex:1; min-width:0; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--blue); border-right:none; border-radius:0; background:#FFFFFF; color:var(--ink); }
.askhome input:focus { outline:2px solid var(--blue); outline-offset:-1px; }
.askhome button { font-family:var(--font-ui); font-size:15px; font-weight:600; padding:0 22px; border:none; border-radius:0; background:var(--blue); color:#FFFFFF; cursor:pointer; }
.askfab { position:fixed; right:22px; bottom:22px; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 18px 10px 12px; border-radius:999px; background:var(--blue); color:#FFFFFF; font-family:var(--font-ui); font-size:15px; font-weight:600; border:2px solid #FFFFFF; box-shadow:0 4px 14px rgba(20,33,27,.28); }
.askfab svg { width:30px; height:30px; }
.askfab:hover { background:#1C3A96; }
.mast .menu { display:none; }
@media (max-width:899px) {
  .askhome { grid-template-columns:auto minmax(0,1fr); gap:12px 14px; padding:16px; margin-top:20px; }
  .askhome .askhic { width:46px; height:46px; }
  .askhome .t b { font-size:19px; }
  .askhome .f { grid-column:1 / -1; }
  .askfab { right:14px; bottom:14px; padding:9px 15px 9px 10px; }
  .foot { padding-bottom:64px; }
  /* the Menu */
  .js .mast { display:grid; grid-template-columns:1fr auto; align-items:center; border-bottom:var(--rule) solid var(--hair-2); }
  .js .mast .name { border-bottom:none; padding:6px 0 12px; }
  .js .mast .menu { display:block; font-family:var(--font-ui); font-size:14.5px; font-weight:500; color:var(--blue); background:none; border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer; }
  .js .mast nav { display:none; }
  .js .mast.open nav { display:flex; flex-direction:column; align-items:stretch; grid-column:1 / -1; gap:0; padding:0 0 6px; overflow:visible; white-space:normal; font-size:17px; }
  .js .mast.open nav a { padding:13px 2px; border-top:1px solid var(--hair); }
}

/* the floating Ask button's chat window, and the clerk's head winking (Justin, 1 Oct 2026) */
.askfab { cursor:pointer; }
.askfab.on { background:var(--ink); }
.chead .ch-eye, .chead .ch-all, .chead .ch-bulb { transform-box:fill-box; transform-origin:center; }
.chead .ch-wink { animation:ch-wink 5.5s ease-in-out infinite; }
.chead .ch-bulb { animation:ch-glow 2.6s ease-in-out infinite; }
.askfab:hover .ch-all { animation:ch-hop .45s ease-out 1; }
.askfab.busy .ch-eye { animation:ch-blink .9s ease-in-out infinite; }
.askfab.busy .ch-bulb { animation:ch-glow .5s ease-in-out infinite; }
@keyframes ch-wink { 0%, 86%, 100% { transform:scaleY(1); } 90%, 94% { transform:scaleY(.12); } }
@keyframes ch-blink { 0%, 60%, 100% { transform:scaleY(1); } 75% { transform:scaleY(.12); } }
@keyframes ch-glow { 0%, 100% { opacity:1; } 50% { opacity:.35; } }
@keyframes ch-hop { 0%, 100% { transform:translateY(0) rotate(0); } 40% { transform:translateY(-3px) rotate(-6deg); } 70% { transform:translateY(0) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .chead * { animation:none !important; } }

.askpop { position:fixed; right:22px; bottom:86px; z-index:21; width:392px; max-height:min(600px, calc(100vh - 110px)); display:flex; flex-direction:column; background:#FFFFFF; color:var(--ink); border:1px solid var(--blue); box-shadow:0 12px 36px rgba(20,33,27,.24); }
.askpop[hidden] { display:none; }
.aph { display:flex; align-items:center; gap:10px; padding:11px 12px 11px 14px; background:var(--blue); color:#FFFFFF; font-family:var(--font-ui); }
.aph svg { width:26px; height:26px; flex-shrink:0; }
.aph b { flex:1; font-size:15px; font-weight:600; }
.aph a { font-size:12.5px; color:var(--on-blue-2); text-decoration:underline; text-underline-offset:3px; }
.apx { background:none; border:none; color:#FFFFFF; font-size:24px; line-height:1; padding:0 4px; cursor:pointer; }
.apm { flex:1; min-height:120px; overflow-y:auto; padding:14px 16px 6px; }
.apm p { font-size:15.5px; line-height:23px; margin:0 0 10px; }
.apm .aphi { color:var(--text-2); }
.apm .apq { font-family:var(--font-ui); font-size:13.5px; line-height:19px; font-weight:600; color:var(--blue); margin:14px 0 6px; padding-top:12px; border-top:1px solid var(--hair); }
.apm .wait p { color:var(--muted); font-style:italic; }
.apm .cite { font-family:var(--font-ui); font-size:11.5px; color:var(--blue); background:var(--stock-chip); padding:1px 6px; border-radius:999px; white-space:nowrap; }
.apu { display:flex; flex-direction:column; gap:6px; margin:4px 0 12px; font-family:var(--font-ui); font-size:12.5px; line-height:17px; }
.apu span { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.apu a { color:var(--text-2); padding:7px 9px; border:1px dashed var(--line); }
.apu a b { color:var(--blue); font-weight:600; margin-right:4px; }
.apf { display:flex; border-top:1px solid var(--hair-2); }
.apf input { flex:1; min-width:0; font:inherit; font-size:16px; padding:13px 14px; border:none; border-radius:0; background:#FFFFFF; color:var(--ink); }
.apf input:focus { outline:2px solid var(--blue); outline-offset:-2px; }
.apf button { font-family:var(--font-ui); font-size:15px; font-weight:600; padding:0 20px; border:none; border-radius:0; background:var(--blue); color:#FFFFFF; cursor:pointer; }
.apf button:disabled { opacity:.55; cursor:default; }
.apn { font-family:var(--font-ui); font-size:11.5px; line-height:16px; color:var(--muted); margin:0; padding:8px 14px 10px; border-top:1px solid var(--hair); }
.apn a { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:899px) {
  .askpop { left:10px; right:10px; bottom:74px; width:auto; max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); }
}
.apr, .acard .retry { font-family:var(--font-ui); font-size:13.5px; font-weight:600; color:var(--blue); background:none; border:1px solid var(--blue); border-radius:999px; padding:5px 14px; margin:0 0 10px; cursor:pointer; }
.acard .retry { font-size:15px; padding:8px 18px; margin-top:6px; }
.foot .fl { display:flex; gap:18px; }

/* each topic's spot drawing, at the top of its page and beside its heading on Practices (Justin, 1 Oct 2026, mock 21) */
.tart { display:block; width:112px; height:112px; object-fit:contain; mix-blend-mode:multiply; flex-shrink:0; }
.th-h.art { display:flex; gap:24px; align-items:center; }
.pgh.art { grid-template-columns:92px minmax(0, 1fr) 210px; }
.pgh.art .tart { width:92px; height:92px; }
@media (max-width:899px) {
  .th-h.art { gap:16px; align-items:flex-start; }
  .th-h.art .tart { width:76px; height:76px; margin-top:6px; }
  .pgh.art { grid-template-columns:60px minmax(0, 1fr) 86px; }
  .pgh.art .tart { width:60px; height:60px; }
}

/* a small drawing on each row of the topic lists, and line icons on the Product, Design and Engineering chips (Justin, 1 Oct 2026) */
.md .ls .it { align-items:center; padding-top:6px; padding-bottom:6px; }
.md .ls .it .nm { flex:1; min-width:0; }
.tth { display:block; width:32px; height:32px; object-fit:contain; flex-shrink:0; background:#FFFFFF; border-radius:4px; }
.md .ls .it.on .tth { box-shadow:0 0 0 3px #FFFFFF; }
.c .fi { width:16px; height:16px; color:var(--blue); flex-shrink:0; }
.c.on .fi { color:#FFFFFF; }

/* the archive's filters (mock 22, 1 Oct 2026): "I work in" and Topic lead; Kind, Category and Source open from "More filters" */
.tog .f { display:inline-flex; }
.js .br:not(.open) .rows { display:none; }
.br .rows { border:1px solid var(--hair); padding:14px 16px 2px; margin:4px 0 16px; }
.blk { margin-bottom:16px; }
.blk .k { display:block; font-family:var(--font-ui); font-size:14px; color:var(--muted); margin-bottom:8px; }
.blk .cs { display:flex; gap:8px; flex-wrap:wrap; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:8px; }
.c.tile { border-radius:0; padding:6px 10px; gap:10px; text-align:left; font-family:var(--font-text); font-size:14.5px; line-height:18px; font-weight:400; color:var(--text-2); }
.c.tile .nm { flex:1; min-width:0; }
.c.tile i { font-family:var(--font-ui); font-size:12.5px; }
.c.tile .tth { width:36px; height:36px; }
.c.tile:hover { border-color:var(--chip-bd-h); }
.c.tile.on { background:#FFFFFF; color:var(--text-hi); border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.c.tile.on i { color:var(--blue); }
@media (max-width:899px) {
  .br .rows { padding:12px 12px 0; }
  .tiles { display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -18px; padding:0 18px; }
  .tiles::-webkit-scrollbar { display:none; }
  .c.tile { flex:0 0 168px; }
}

/* icons in the phone's Menu */
.mast nav .ni { display:none; }
@media (max-width:899px) {
  .js .mast.open nav a { display:flex; align-items:center; gap:12px; }
  .js .mast.open nav .ni { display:block; width:20px; height:20px; color:var(--blue); flex-shrink:0; }
}