/* ═══ v6 "Ink & Brass" — Stage 1: tokens, type, engraving, seal ═══
   The site stylesheet. styles.css stays published only for HTML cached
   before the v6 rollover; nothing links it now. */

/* Fonts: upstream Google Fonts latin + latin-ext subsets, unmodified, served
   locally. Licences in each font folder (OFL.txt). Space Grotesk is one
   variable file covering 400–700. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif/instrument-serif-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif/instrument-serif-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif/instrument-serif-400italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/instrument-serif/instrument-serif-400italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/space-grotesk/space-grotesk-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/space-grotesk/space-grotesk-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The only colour definitions in the design. */
:root {
  /* ink — dark surfaces */
  --ink: #060B14; --ink-2: #0C1421; --ink-3: #16202F;
  /* brass — accent only: rules, marks, small labels */
  --brass: #C9A227; --brass-lt: #E8C75C; --brass-pale: #F4E3A8;
  /* light surfaces */
  --bone: #F7F5EF; --card: #FFFFFF; --line: #E6E1D5; --line-2: #D6CFBD;
  /* text on light */
  --text: #101725; --text-2: #4B5568;
  --muted: #6F6A5B; /* spec #8A8574 failed AA: 3.69 on card, 3.39 on bone */
  /* movement — semantic only */
  --up: #1B7A52; --up-bg: #E7F2EC;
  --down: #A63A2C; --down-bg: #F8EAE6;
  --flat: #706B5E; --flat-bg: #F0EDE4; /* spec #8E8877 failed AA: 3.54 on card, 3.02 on flat-bg */

  /* approved additions (stage 2) */
  --brass-ink: #7A6012;  /* brass hue for text on light surfaces: 5.98:1 on card; --brass is 2.4:1 */
  --cream: #F3EFE4;      /* text on ink */
  --ink-deep: #03070D;   /* utility bar */
  --tick-up: #6FCB9F; --tick-down: #E08272; /* movement on ink (ticker only) */

  /* movement semantics — the one mapping every card, chip, table, ticker,
     heatmap and chart uses (item 6c). On light surfaces: */
  --adv: var(--up); --adv-bg: var(--up-bg);
  --hold: var(--flat); --hold-bg: var(--flat-bg);
  --retro: var(--down); --retro-bg: var(--down-bg);
  --cur: var(--brass-ink); --cur-rule: var(--brass); --cur-bg: var(--brass-pale);
  --unav: var(--muted);
  /* and on ink: */
  --adv-ink: var(--tick-up); --retro-ink: var(--tick-down); --cur-ink: var(--brass-lt);
  /* form errors are not movement, but share the warning hue */
  --error: var(--down); --error-ink: var(--tick-down);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Focus: 2px at 3px offset. Ink on light surfaces — brass on white is 2.42:1,
   under the 3:1 non-text minimum — and brass on dark surfaces (8.15:1).
   Every dark section carries .on-ink. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible { outline-color: var(--brass); }

/* ── Engraving ── */
.engrave, .engrave-digest, .engrave-footer { position: absolute; pointer-events: none; color: var(--brass); }
.engrave { top: 50%; left: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; opacity: .5; }
.engrave .rose { position: absolute; inset: 0; width: 100%; height: 100%; animation: v6-turn 150s linear infinite; }
.engrave .rose.rev { animation: v6-turn 210s linear infinite reverse; opacity: .6; }
.vign { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(6, 11, 20, .55) 62%, var(--ink) 100%); }
.engrave-digest { top: -240px; right: -180px; width: 640px; height: 640px; opacity: .35; }
.engrave-digest .rose { width: 100%; height: 100%; animation: v6-turn 170s linear infinite; }
.engrave-footer { bottom: -380px; left: 50%; margin-left: -400px; width: 800px; height: 800px; opacity: .3; }
.engrave-footer .rose { width: 100%; height: 100%; animation: v6-turn 200s linear infinite reverse; }
@keyframes v6-turn { to { transform: rotate(360deg); } }

/* ── Seal ── */
.seal { flex: 0 0 auto; color: var(--brass); display: block; }

/* All motion stops; the page is complete without it. */
@media (prefers-reduced-motion: reduce) {
  .engrave .rose, .engrave-digest .rose, .engrave-footer .rose { animation: none; }
}

/* ═══ Stage 2 — homepage layout ═══ */
.v6 { margin: 0; background: var(--bone); color: var(--text); font: 400 16px/1.45 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.v6 *, .v6 *::before, .v6 *::after { box-sizing: border-box; }
.v6 a { color: inherit; }
.v6 .wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Brass-coloured text on light surfaces uses --brass-ink (5.98:1 on white);
   --brass itself is 2.4:1 and stays for rules and marks. */
.eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }

/* utility bar */
.util { background: var(--ink-deep); color: var(--cream); border-bottom: 1px solid rgba(201,162,39,.25); }
.util .wrap { display: flex; align-items: center; gap: .9rem; padding: .45rem 1.25rem; font-size: .75rem; flex-wrap: wrap; }
.util span { color: color-mix(in srgb, var(--cream) 72%, transparent); }
.util .live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--brass-lt); letter-spacing: .08em; }
.util .live i { width: 5px; height: 5px; border-radius: 50%; background: var(--brass-lt); animation: v6-pulse 2.6s infinite; }
.util .sep { color: color-mix(in srgb, var(--cream) 30%, transparent); }
@keyframes v6-pulse { 0% { box-shadow: 0 0 0 0 rgba(232,199,92,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(232,199,92,0); } }

/* hero */
.hero { position: relative; background: var(--ink); color: var(--cream); overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--brass), var(--brass-lt), var(--brass), transparent); }
.hero .wrap { position: relative; z-index: 3; }
.nav { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 0; flex-wrap: wrap; border-bottom: 1px solid rgba(201,162,39,.2); }
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.logo .txt { font-family: var(--serif); font-size: 1.3rem; line-height: 1; }
.logo .txt em { font-style: italic; color: var(--brass-lt); }
.nav .links { margin-left: auto; display: flex; gap: .15rem; flex-wrap: wrap; }
.nav .links a { text-decoration: none; font-size: .8125rem; font-weight: 600; color: color-mix(in srgb, var(--cream) 78%, transparent); padding: .4rem .75rem; border-radius: 3px; transition: background .2s, color .2s; }
.nav .links a:hover, .nav .links a[aria-current] { background: rgba(201,162,39,.14); color: var(--brass-pale); }
.headline { padding: 3rem 0 2.25rem; display: grid; grid-template-columns: 1.04fr .96fr; gap: 3.25rem; align-items: center; }
.plate { display: inline-flex; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; color: var(--brass-pale); border: 1px solid rgba(201,162,39,.4); padding: .35rem .8rem; border-radius: 2px; background: rgba(201,162,39,.07); }
.h-big { font-family: var(--serif); font-size: clamp(2.9rem, 6.4vw, 4.9rem); line-height: .98; font-weight: 400; letter-spacing: -.015em; margin: 1.1rem 0 0; }
.h-big em { font-style: italic; background: linear-gradient(94deg, var(--brass-lt), var(--brass-pale) 45%, var(--brass)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-sub { font-size: 1.0625rem; color: color-mix(in srgb, var(--cream) 74%, transparent); margin: 1.15rem 0 0; max-width: 44ch; line-height: 1.6; }

/* checker (static until Stage 3) */
.checker { background: linear-gradient(170deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); border: 1px solid rgba(201,162,39,.32); border-radius: 6px; padding: 1.6rem; box-shadow: 0 30px 70px rgba(0,0,0,.55); position: relative; margin: 0; }
.checker::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201,162,39,.16); border-radius: 3px; pointer-events: none; }
.checker h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin: 0; letter-spacing: -.01em; }
.checker .note { font-size: .75rem; color: color-mix(in srgb, var(--cream) 70%, transparent); margin: .3rem 0 1.25rem; }
.field { margin-bottom: .8rem; position: relative; }
.field label { display: block; font-size: .625rem; font-weight: 700; color: color-mix(in srgb, var(--cream) 72%, transparent); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.field select, .field input { width: 100%; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--cream); background: rgba(255,255,255,.05); border: 1px solid rgba(201,162,39,.28); border-radius: 3px; padding: .65rem .75rem; color-scheme: dark; }
.field select option { color: var(--text); background: var(--card); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.go { width: 100%; margin-top: .45rem; font: inherit; font-weight: 700; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: linear-gradient(96deg, var(--brass), var(--brass-lt)); border: 0; border-radius: 3px; padding: .8rem; cursor: pointer; transition: filter .2s, transform .2s; }
.go:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ticker */
.ticker { position: relative; z-index: 3; border-top: 1px solid rgba(201,162,39,.22); overflow: hidden; padding: .6rem 0; background: rgba(0,0,0,.25);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.ticker ul { display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; width: max-content; animation: v6-ticker 48s linear infinite; }
.ticker:hover ul { animation-play-state: paused; }
@keyframes v6-ticker { to { transform: translateX(-50%); } }
.ticker li { display: flex; gap: .45rem; font-size: .75rem; font-weight: 600; white-space: nowrap; letter-spacing: .05em; color: color-mix(in srgb, var(--cream) 85%, transparent); }
.ticker .u { color: var(--adv-ink); } .ticker .d { color: var(--retro-ink); } .ticker .c { color: var(--cur-ink); } .ticker .f, .ticker .x { color: color-mix(in srgb, var(--cream) 55%, transparent); }

/* trust */
.trust { background: var(--card); border-bottom: 1px solid var(--line); }
.trust .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding: 0; }
.trust .wrap > div { padding: 1.3rem 1.25rem; border-left: 1px solid var(--line); }
.trust .wrap > div:first-child { border-left: 0; }
.trust .n { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--text); }
.trust .l { font-size: .6875rem; color: var(--muted); font-weight: 600; margin-top: .45rem; letter-spacing: .06em; text-transform: uppercase; }

/* controls */
.controls { position: sticky; top: 0; z-index: 30; background: rgba(247,245,239,.92); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
.ctl-row { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; padding: .7rem 0; }
.ctl { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ctl-lab { font-size: .625rem; font-weight: 700; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; flex-wrap: wrap; background: var(--card); }
.seg button { appearance: none; background: none; border: 0; border-right: 1px solid var(--line); font: inherit; font-size: .8125rem; font-weight: 600; color: var(--text-2); padding: .42rem .85rem; cursor: pointer; transition: background .18s, color .18s; white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--brass-pale); }
/* Without JS the controls cannot switch views, so they are hidden and every
   view is shown in sequence instead: all dates stay reachable. */
html:not(.js) .controls { display: none; }
html:not(.js) .view[hidden] { display: block !important; }

/* sections */
.shead { display: flex; align-items: baseline; gap: .85rem; margin: 2.75rem 0 1.1rem; flex-wrap: wrap; }
.shead h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; margin: 0; letter-spacing: -.01em; }
.shead .hint { font-size: .8125rem; color: var(--muted); }
.shead .more { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--brass-ink); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid rgba(201,162,39,.5); padding-bottom: 2px; }
h2.sec { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 400; letter-spacing: -.01em; margin: .5rem 0 0; }
.sec-sub { color: var(--text-2); font-size: .9375rem; margin: .6rem 0 0; max-width: 58ch; line-height: 1.6; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.tile { grid-column: span 2; position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1.35rem; text-decoration: none; display: flex; flex-direction: column; min-width: 0; transition: border-color .3s, box-shadow .3s, transform .3s; }
.tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brass), transparent); transform: scaleX(0); transform-origin: left; transition: transform .45s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16,23,37,.12); border-color: var(--line-2); }
.tile:hover::before { transform: scaleX(1); }
.tile.lead { grid-column: span 3; }
.tile .code { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.tile.lead .code { font-size: 2.5rem; }
.tile .rel { font-size: .75rem; color: var(--muted); font-weight: 600; line-height: 1.35; margin-top: .15rem; min-height: 2.1em; }
.tile .date { font-family: var(--serif); font-size: 2.3rem; line-height: 1.05; margin-top: .9rem; white-space: nowrap; letter-spacing: -.015em; }
.tile.lead .date { font-size: 3rem; }
.tile.is-current .date, .ebc .date.cur { color: var(--cur); }
.meta { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.chip { display: inline-flex; font-size: .875rem; font-weight: 700; padding: .24rem .6rem; border-radius: 2px; letter-spacing: .02em; }
.chip.up { color: var(--adv); background: var(--adv-bg); }
.chip.down { color: var(--retro); background: var(--retro-bg); }
.chip.cur { color: var(--cur); background: var(--cur-bg); }
.chip.unav { color: var(--unav); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.chip.flat { color: var(--hold); background: var(--hold-bg); font-size: .75rem; }
.wait { font-size: .6875rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wait b { color: var(--text); font-size: 1rem; font-family: var(--serif); font-weight: 400; }
.spark { display: block; width: 100%; height: 40px; margin-top: auto; padding-top: .9rem; overflow: visible; }
.spark .ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .pt { fill: currentColor; }
.spark.up { color: var(--adv); } .spark.down { color: var(--retro); } .spark.flat { color: var(--hold); } .spark.cur { color: var(--cur); } .spark.unav { color: var(--unav); }
.js .spark .ln { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.js .spark .pt { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .tile.seen .spark .ln { animation: v6-draw 1.5s cubic-bezier(.3,.9,.3,1) forwards; }
.js .tile.seen .spark .pt { animation: v6-pop .5s 1s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes v6-draw { to { stroke-dashoffset: 0; } }
@keyframes v6-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

/* employment strip */
.eb { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.ebc { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: .9rem 1.05rem; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ebc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,23,37,.1); border-color: var(--line-2); }
.ebc .code { font-family: var(--serif); font-size: 1.25rem; }
.ebc .rel { font-size: .6875rem; color: var(--muted); font-weight: 600; }
.ebc .date { font-family: var(--serif); font-size: 1.5rem; margin-top: .4rem; white-space: nowrap; }

/* features */
.band-sec { margin-top: 4.25rem; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: .75rem; margin-top: 1.6rem; }
.fcard { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1.5rem; text-decoration: none; transition: transform .28s, box-shadow .28s, border-color .28s; }
.fcard:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(16,23,37,.1); border-color: var(--line-2); }
.fcard .num { font-family: var(--serif); font-size: 1rem; color: var(--brass-ink); border-bottom: 1px solid rgba(201,162,39,.45); padding-bottom: .5rem; display: block; margin-bottom: .8rem; }
.fcard h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin: 0 0 .45rem; letter-spacing: -.01em; }
.fcard p { font-size: .8125rem; color: var(--text-2); margin: 0; line-height: 1.6; }
.fcard .go2 { font-size: .6875rem; font-weight: 700; color: var(--brass-ink); margin-top: .9rem; display: block; letter-spacing: .08em; text-transform: uppercase; }

/* directory */
.dir { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1.6rem; margin-top: 1.6rem; }
.dcol { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.dcol:first-child { border-top: 0; }
.dcol .nm { font-family: var(--serif); font-size: 1.2rem; }
.dcol .nm small { display: block; font-family: var(--ui); font-weight: 600; font-size: .625rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; margin-top: .15rem; }
.dcol .ls { display: flex; flex-wrap: wrap; gap: .35rem; }
.dcol .ls a { font-size: .75rem; font-weight: 600; text-decoration: none; color: var(--text-2); border: 1px solid var(--line); padding: .3rem .65rem; border-radius: 2px; transition: background .18s, color .18s, border-color .18s; }
.dcol .ls a:hover { background: var(--ink); color: var(--brass-pale); border-color: var(--ink); }
.sec-sub a { color: var(--text); }

/* footer */
.site-foot { margin-top: 4.25rem; background: var(--ink); color: var(--cream); padding: 3rem 0 2.5rem; position: relative; overflow: hidden; border-top: 3px solid var(--brass); }
.site-foot .wrap { position: relative; z-index: 2; }
.fcols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(201,162,39,.2); }
.fcols h4 { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 .9rem; }
.fcols a { display: block; text-decoration: none; font-size: .8125rem; color: color-mix(in srgb, var(--cream) 74%, transparent); padding: .24rem 0; }
.fcols a:hover { color: var(--brass-pale); }
.fcols a.logo { display: flex; padding: 0; color: var(--cream); }
.blurb { font-size: .8125rem; color: color-mix(in srgb, var(--cream) 70%, transparent); line-height: 1.65; margin: .8rem 0 0; max-width: 34ch; }
.legal { padding-top: 1.6rem; font-size: .75rem; color: color-mix(in srgb, var(--cream) 66%, transparent); line-height: 1.75; max-width: 82ch; margin: 0; }
.legal b { color: var(--cream); }

@media (max-width: 1000px) {
  .headline { grid-template-columns: 1fr; gap: 2.25rem; padding-top: 2rem; }
  .fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile.lead { grid-column: span 1; }
  .tile.lead .date { font-size: 2.3rem; }
  .tile.lead .code { font-size: 2rem; }
  .trust .wrap > div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .fcols, .dcol, .two { grid-template-columns: 1fr; }
  .tile .date, .tile.lead .date { font-size: 2.1rem; white-space: normal; }
  .shead .more { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .util .live i, .ticker ul { animation: none; }
  .js .spark .ln { stroke-dashoffset: 0; animation: none; }
  .js .spark .pt { opacity: 1; animation: none; }
  .tile, .ebc, .fcard, .go, .tile::before { transition: none; }
}

/* ═══ Stage 3 — priority date checker ═══ */
.checker .result { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(201,162,39,.25); outline: none; }
.checker .result .big { font-family: var(--serif); font-size: 2.4rem; line-height: 1.05; background: linear-gradient(94deg, var(--brass-lt), var(--brass-pale)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checker .result .l { font-size: .8125rem; color: color-mix(in srgb, var(--cream) 74%, transparent); margin: .5rem 0 0; line-height: 1.55; }
.checker .result .err { color: var(--error-ink); font-size: .875rem; margin: 0; }
.checker .result a { color: var(--brass-pale); }

.page-head { background: var(--ink); color: var(--cream); border-bottom: 3px solid var(--brass); }
.pd-page { padding-top: 2rem; }
.pd-tool { background: var(--ink); border-radius: 6px; padding: 1.25rem; color: var(--cream); max-width: 44rem; }
.pd-tool h1 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 400; margin: 0; letter-spacing: -.01em; }
.pd-asof { font-size: .8125rem; color: var(--muted); margin: .6rem 0 0; }
.prose { max-width: 44rem; margin-top: 2.5rem; }
.prose h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin: 2rem 0 .5rem; letter-spacing: -.01em; }
.prose p, .prose dd { font-size: .9375rem; line-height: 1.65; color: var(--text-2); margin: 0 0 .75rem; }
.prose a { color: var(--brass-ink); }
.prose .cats { display: grid; grid-template-columns: 4rem 1fr; gap: .35rem 1rem; margin: 0; }
.prose .cats dt { font-family: var(--serif); font-size: 1.2rem; color: var(--text); }
.prose .cats dd { margin: 0; }
.prose .legal-note { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8125rem; }

/* Stage 3b — visual result: figures + cutoff history chart */
.checker .result .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.checker .result .fig { background: color-mix(in srgb, var(--cream) 5%, transparent); border: 1px solid rgba(201,162,39,.2); border-radius: 3px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.checker .result .fig .k { font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 66%, transparent); }
.checker .result .fig .v { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--cream); overflow-wrap: anywhere; }
.checker .result .fig.lead { grid-column: 1 / -1; border-color: rgba(201,162,39,.45); background: color-mix(in srgb, var(--brass) 8%, transparent); }
.checker .result .fig.lead .v { font-size: 2.4rem; background: linear-gradient(94deg, var(--brass-lt), var(--brass-pale)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pd-chart { margin: 1rem 0 .25rem; }
.pd-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.pd-chart.loading { height: 180px; border-radius: 3px; background: color-mix(in srgb, var(--cream) 5%, transparent); }
.pd-chart .tick line { stroke: color-mix(in srgb, var(--cream) 10%, transparent); stroke-width: 1; }
.pd-chart .tick text, .pd-chart .xl { fill: color-mix(in srgb, var(--cream) 62%, transparent); font: 600 11px var(--ui); }
.pd-chart .cut-line { fill: none; stroke: var(--brass-lt); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pd-chart .cut-dot { fill: var(--brass-lt); stroke: var(--ink); stroke-width: 2; }
.pd-chart .you-line { stroke: var(--cream); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pd-chart .you-label { fill: var(--cream); font: 700 11px var(--ui); letter-spacing: .04em; }
.pd-chart .gap line { stroke: var(--brass-pale); stroke-width: 1.5; }
.pd-chart .gap text { fill: var(--brass-pale); font: 400 20px var(--serif); }
.pd-chart figcaption { font-size: .6875rem; color: color-mix(in srgb, var(--cream) 62%, transparent); margin-top: .35rem; }
.js .pd-chart .cut-line { stroke-dasharray: 3000; }

/* /priority-date: form left, result right on wide screens */
.pd-tool { max-width: none; padding: 1.5rem; }
@media (min-width: 900px) {
  .pd-tool .checker { display: grid; grid-template-columns: minmax(17rem, 21rem) 1fr; column-gap: 2rem; align-items: start; }
  .pd-tool .checker > :not(.result) { grid-column: 1; }
  .pd-tool .checker .two { grid-template-columns: 1fr; }
  .pd-tool .checker .result { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; padding: 0 0 0 2rem; border-top: 0; border-left: 1px solid rgba(201,162,39,.25); }
  .pd-tool .checker .result[hidden] { display: block !important; visibility: hidden; }
}

/* Chart on narrow screens: the SVG scales down, so text is set larger in
   user units and strokes keep their on-screen width. */
.pd-chart .cut-line, .pd-chart .you-line, .pd-chart .gap line, .pd-chart .tick line { vector-effect: non-scaling-stroke; }
.checker .result .figs { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
@media (max-width: 600px) {
  .pd-chart .tick text, .pd-chart .xl { font-size: 22px; }
  .pd-chart .you-label { font-size: 22px; }
  .pd-chart .gap text { font-size: 34px; }
  .checker .result .fig .v { font-size: 1.15rem; }
}

/* Stage 3c — movement infographics and the reveal sequence */
.pd-more { display: grid; gap: 1.25rem; margin: 1.25rem 0 .5rem; }
.pd-more figure { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(201,162,39,.2); }
.pd-more h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; margin: 0 0 .5rem; color: var(--cream); }
.pd-more svg { display: block; width: 100%; height: auto; overflow: visible; }
.pd-more figcaption { font-size: .6875rem; color: color-mix(in srgb, var(--cream) 62%, transparent); margin-top: .4rem; line-height: 1.5; }


.pd-heat .hm-wrap { max-width: 26rem; }
.pd-heat .hm-m, .pd-heat .hm-y { fill: color-mix(in srgb, var(--cream) 62%, transparent); font: 600 10px var(--ui); }
.hm.adv, .hm-sw.adv { fill: var(--adv-ink); background: var(--adv-ink); }
.hm.hold, .hm-sw.hold { fill: color-mix(in srgb, var(--cream) 16%, transparent); background: color-mix(in srgb, var(--cream) 16%, transparent); }
.hm.retro, .hm-sw.retro { fill: var(--retro-ink); background: var(--retro-ink); }
.hm.cur, .hm-sw.cur { fill: var(--cur-ink); background: var(--cur-ink); }
.hm.unav, .hm-sw.unav { fill: color-mix(in srgb, var(--cream) 5%, transparent); stroke: color-mix(in srgb, var(--cream) 35%, transparent); stroke-dasharray: 2 2; background: transparent; }
.hm.none { fill: color-mix(in srgb, var(--cream) 8%, transparent); }
.pd-heat .legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.pd-heat .lg { display: inline-flex; align-items: center; gap: .35rem; }
.hm-sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
.hm-sw.unav { border: 1px dashed color-mix(in srgb, var(--cream) 45%, transparent); }

@media (min-width: 900px) {
  .pd-more { grid-template-columns: 1.35fr 1fr; align-items: start; }
}
@media (max-width: 600px) {
  .pd-heat .hm-m, .pd-heat .hm-y { font-size: 12px; }
}

/* Reveal sequence, only once the full result is in (.play):
   figures rise in → cutoff line draws → your date slides in → gap appears →
   year bars grow left to right → calendar rows fill top to bottom. */
.result.play .fig { animation: v6-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
.js .result:not(.play) .pd-chart .cut-line { stroke-dashoffset: 3000; animation: none; }
.js .result.play .pd-chart .cut-line { animation: v6-draw 1.6s cubic-bezier(.3,.9,.3,1) .35s both; }
.result.play .pd-chart .you-line, .result.play .pd-chart .you-label { animation: v6-slide .6s cubic-bezier(.2,.8,.2,1) 1.6s both; }
.result.play .pd-chart .gap, .result.play .pd-chart .cut-dot { animation: v6-fade .45s ease 2.05s both; }
.result.play .pd-heat g { animation: v6-fade .35s ease both; animation-delay: calc(2.4s + var(--r) * 90ms); }
@keyframes v6-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v6-slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes v6-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v6-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .result.play .fig, .result.play .pd-chart .you-line, .result.play .pd-chart .you-label, .result.play .pd-chart .gap,
  .result.play .pd-chart .cut-dot, .result.play .pd-heat g { animation: none; }
  .js .result .pd-chart .cut-line { stroke-dashoffset: 0 !important; animation: none !important; }
}

/* Fiscal-year rows (replaces the column chart) */
.pd-more { grid-template-columns: 1fr !important; }
.yb { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .35rem; }
.yb li { display: grid; grid-template-columns: 4.2rem 1fr 5.5rem; align-items: center; gap: .75rem; }
.yb .fy { font: 700 .8125rem var(--ui); color: color-mix(in srgb, var(--cream) 78%, transparent); letter-spacing: .03em; line-height: 1.1; }
.yb .fy small { display: block; font-size: .5625rem; font-weight: 600; color: color-mix(in srgb, var(--cream) 55%, transparent); text-transform: uppercase; letter-spacing: .08em; }
.yb .track { position: relative; height: 14px; border-radius: 2px; background: color-mix(in srgb, var(--cream) 6%, transparent); overflow: hidden; }
.yb .fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 2px; transform-origin: left; }
.yb .track.two::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: color-mix(in srgb, var(--cream) 30%, transparent); }
.yb .track.two .fill { left: 50%; width: calc(var(--w) / 2); }
.yb .down .track.two .fill { left: auto; right: 50%; transform-origin: right; }
.yb .up .fill { background: var(--adv-ink); }
.yb .down .fill { background: var(--retro-ink); }
.yb .held .track { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cream) 14%, transparent) 0 6px, transparent 6px 10px); }
/* Outlier break: two slashes cut through the end of a capped bar. */
.yb .over .fill { background: linear-gradient(105deg, var(--adv-ink) 0 calc(100% - 22px), transparent calc(100% - 22px) calc(100% - 18px), var(--adv-ink) calc(100% - 18px) calc(100% - 12px), transparent calc(100% - 12px) calc(100% - 8px), var(--adv-ink) calc(100% - 8px)); }
.yb .val { font: 400 1.05rem var(--serif); color: var(--cream); text-align: right; white-space: nowrap; }
.yb .held .val, .yb .na .val { font: 600 .75rem var(--ui); color: color-mix(in srgb, var(--cream) 62%, transparent); text-transform: uppercase; letter-spacing: .06em; }
.result.play .yb .fill { animation: v6-grow-x .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(2.2s + var(--i) * 70ms); }
.result.play .yb .val { animation: v6-fade .3s ease both; animation-delay: calc(2.4s + var(--i) * 70ms); }
@keyframes v6-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 600px) {
  .yb li { grid-template-columns: 3.4rem 1fr 4.6rem; gap: .5rem; }
  .yb .val { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .result.play .yb .fill, .result.play .yb .val { animation: none; }
}
.yb-more { margin-top: .35rem; }
.yb-more summary { cursor: pointer; font: 700 .6875rem var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-pale); padding: .35rem 0; list-style: none; }
.yb-more summary::-webkit-details-marker { display: none; }
.yb-more summary::before { content: "+ "; }
.yb-more[open] summary::before { content: "− "; }
.yb-more[open] summary { margin-bottom: .35rem; }
.yb-more[open] .fill { animation: v6-grow-x .45s cubic-bezier(.2,.8,.2,1) both; }
.pd-heat .lg-note { flex-basis: 100%; color: color-mix(in srgb, var(--cream) 55%, transparent); }
.pd-heat .yb-more[open] g { animation: v6-fade .3s ease both; animation-delay: calc(var(--r) * 50ms); }

/* Trust pages: /about, /contact, /privacy */
.trust-page { padding-top: 2.25rem; }
.trust-h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 400; letter-spacing: -.015em; margin: .4rem 0 0; }
.trust-page .prose { margin-top: 1.25rem; }
.trust-page .prose ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.trust-page .prose li { font-size: .9375rem; line-height: 1.65; color: var(--text-2); margin-bottom: .45rem; }
.trust-page .prose li strong { color: var(--text); }

/* ═══ Stage 4 — archive pages: month, archive index, category, charts, analysis ═══
   The same server-rendered components as before, restyled on the v6 tokens.
   Scoped under .page where a class name is shared with the homepage. */
.page { padding-top: 2rem; }
.page .masthead { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.page .masthead h1 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.015em; margin: .45rem 0 0; }
.page .masthead .effective { color: var(--text-2); font-size: .9375rem; margin-top: .5rem; }
.page .masthead .provenance { margin-left: auto; text-align: right; font-size: .75rem; color: var(--muted); line-height: 1.7; }
.page .masthead .provenance a, .page .intro a { color: var(--brass-ink); }

.d-up { color: var(--adv); font-weight: 700; }
.d-down { color: var(--retro); font-weight: 700; }
.d-flat { color: var(--hold); }

.page .movers { display: flex; gap: 1.5rem; overflow-x: auto; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .8125rem; white-space: nowrap; }
.page .movers .label { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); align-self: center; }
.page .movers .m { display: inline-flex; gap: .4rem; align-items: baseline; }
.page .movers .who { color: var(--text-2); font-weight: 600; }

.page .intro { margin: 1.5rem 0; }
.page .intro p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); max-width: 64ch; margin: 0; }

.page .uscis { margin: 1.25rem 0; padding: .9rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 4px; font-size: .9375rem; color: var(--text); }
.page .uscis-h { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: .35rem; }
.page .uscis a { color: var(--text); }
.page .uscis-note { margin-top: .4rem; font-size: .8125rem; color: var(--muted); }

/* Matrix controls: not the homepage sticky bar, and always visible. The
   tables render without JS, but only the first is open. */
.page .controls, html:not(.js) .page .controls { position: static; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin: 2rem 0 1rem; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; }
.page .tabs { display: flex; flex: 1 1 100%; border-bottom: 1px solid var(--line-2); }
.page .tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin: 0 1.75rem -1px 0; padding: .4rem 0 .55rem; font: 400 1.5rem var(--serif); color: var(--muted); cursor: pointer; }
.page .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brass); }
.page .chart-sub { font-size: .8125rem; color: var(--muted); }
.page .chart-hl { font-size: .875rem; line-height: 1.6; color: var(--text-2); margin: 0 0 .9rem; max-width: 72ch; }

.page .matrix-wrap { overflow-x: auto; }
table.matrix { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--card); border: 1px solid var(--line); }
.matrix th, .matrix td { border: 1px solid var(--line); padding: .6rem .7rem; text-align: center; vertical-align: middle; }
.matrix thead th { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--bone); }
.matrix tbody th { text-align: left; background: var(--card); position: sticky; left: 0; }
.matrix tbody th a { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; text-decoration: none; }
.matrix tbody th a:hover { color: var(--brass-ink); }
.matrix .cat-name { display: block; font-size: .6875rem; font-weight: 600; color: var(--muted); max-width: 14rem; }
.matrix .date { font-family: var(--serif); font-size: 1.1rem; white-space: nowrap; }
.matrix .delta { display: block; font-size: .6875rem; margin-top: .1rem; }
.pill { display: inline-block; padding: .15rem .55rem; border-radius: 2px; font-size: .75rem; font-weight: 700; }
.pill.c { background: var(--cur-bg); color: var(--cur); box-shadow: inset 0 0 0 1px var(--cur-rule); }
.pill.u { background: transparent; color: var(--unav); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (max-width: 720px) {
  table.matrix, .matrix thead, .matrix tbody, .matrix tr, .matrix th { display: block; }
  table.matrix { background: none; border: 0; }
  .matrix thead { display: none; }
  .matrix tbody tr { background: var(--card); border: 1px solid var(--line); border-radius: 4px; margin-bottom: .9rem; }
  .matrix tbody th { position: static; border: 0; border-bottom: 1px solid var(--line); }
  .matrix td { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem; align-items: center; column-gap: .5rem; border: 0; border-bottom: 1px solid var(--line); text-align: right; }
  .matrix td:last-child { border-bottom: 0; }
  .matrix td::before { content: attr(data-label); grid-column: 1; text-align: left; font-size: .75rem; color: var(--text-2); font-weight: 600; }
  .matrix td .date, .matrix td .pill { grid-column: 2; justify-self: end; }
  .matrix td .delta { grid-column: 3; justify-self: end; margin: 0; white-space: nowrap; }
}

.page .month-nav { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; margin-top: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page .month-nav a { color: var(--brass-ink); text-decoration: none; }
.page .month-nav a:hover { color: var(--text); }
.page .home-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.25rem 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.page .home-links a { color: var(--brass-ink); text-decoration: none; border-bottom: 1px solid var(--brass); padding-bottom: 2px; }

.page .cat-links { margin-top: 3rem; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1.6rem; }
.page .cat-links h2, .page .explainer h2, .page .cat-h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; letter-spacing: -.01em; margin: 0 0 .4rem; }
.page .cat-links > p { color: var(--text-2); font-size: .875rem; margin: 0 0 1rem; }
.page .cat-h3 { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); margin: 1.5rem 0 .25rem; }
.page .cat-link-row { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); align-items: baseline; }
.page .cl-cat { font-family: var(--serif); font-size: 1.15rem; }
.page .cl-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.page .cl-links a { font-size: .75rem; font-weight: 600; text-decoration: none; color: var(--text-2); border: 1px solid var(--line); padding: .3rem .65rem; border-radius: 2px; transition: background .18s, color .18s, border-color .18s; }
.page .cl-links a:hover { background: var(--ink); color: var(--brass-pale); border-color: var(--ink); }

.page .explainer { margin-top: 3rem; }
.page .explainer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.page .explainer .cols > div { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1.5rem; }
.page .explainer h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin: 0 0 .45rem; }
.page .explainer p { font-size: .875rem; color: var(--text-2); line-height: 1.65; margin: 0; }

/* archive index */
.page .archive { margin-top: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: .4rem 1.6rem; }
.page .archive .year-row { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--line); }
.page .archive .year-row:first-child { border-top: 0; }
.page .archive h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 0; }
.page .archive .months { display: flex; flex-wrap: wrap; gap: .35rem; }
.page .archive .months a { min-width: 3.2rem; text-align: center; font-size: .75rem; font-weight: 600; text-decoration: none; color: var(--text-2); border: 1px solid var(--line); padding: .3rem .5rem; border-radius: 2px; }
.page .archive .months a:hover { background: var(--ink); color: var(--brass-pale); border-color: var(--ink); }

/* category history */
.page .cat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 1.5rem 0; background: var(--card); border: 1px solid var(--line); border-radius: 5px; }
.page .cat-stats .stat { padding: 1.2rem 1.25rem; border-left: 1px solid var(--line); }
.page .cat-stats .stat:first-child { border-left: 0; }
.page .cat-stats .k { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page .cat-stats .v { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; margin-top: .4rem; }
.page .cat-h2 { margin-top: 2.5rem; }
.page .hist-wrap { overflow-x: auto; }
.hist-table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--card); border: 1px solid var(--line); }
.hist-table th, .hist-table td { text-align: left; padding: .55rem 1rem; border-bottom: 1px solid var(--line); }
.hist-table thead th { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--bone); }
.hist-table a { color: var(--text); text-decoration: none; font-weight: 600; }
.hist-table a:hover { color: var(--brass-ink); }
.hist-table .date { font-family: var(--serif); font-size: 1.05rem; }

/* movement charts */
.page .hist-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin: 1.5rem 0 1.25rem; padding: 1.1rem 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: 5px; }
.page .hist-controls label { display: flex; flex-direction: column; gap: .35rem; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page .hist-controls select { font: 500 .9375rem var(--ui); color: var(--text); background: var(--bone); border: 1px solid var(--line-2); border-radius: 3px; padding: .5rem .6rem; min-width: 11rem; }
.page .chart-note { min-height: 1.3rem; font-size: .8125rem; color: var(--muted); margin-bottom: .3rem; }
.chart-box { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1rem; }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-box .line { fill: none; stroke: var(--ink); stroke-width: 1.75; }
.chart-box .grid { stroke: var(--line); stroke-width: 1; }
.chart-box .axis { fill: var(--muted); font: 600 11px var(--ui); }
.chart-box .mk-c { fill: var(--cur-rule); }
.chart-box .mk-u { fill: var(--unav); }
.chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .75rem; font-size: .8125rem; color: var(--text-2); }
.chart-legend .lg { display: inline-block; vertical-align: middle; margin-right: .35rem; }
.chart-legend .lg-line { width: 1.1rem; height: 0; border-top: 2px solid var(--ink); }
.chart-legend .lg-c { width: 4px; height: 7px; background: var(--cur-rule); }
.chart-legend .lg-u { width: 4px; height: 7px; background: var(--unav); }

/* analysis */
.page .post-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.page .post-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.page .post-list a { font-family: var(--serif); font-size: 1.5rem; color: var(--text); text-decoration: none; }
.page .post-list .meta, .page .post .byline { font-size: .75rem; color: var(--muted); }
.page .post-list p { font-size: .9375rem; color: var(--text-2); margin: .25rem 0 0; }
.page .post { max-width: 68ch; }
.page .post h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin: 2rem 0 .5rem; }
.page .post p, .page .post ul, .page .post ol { line-height: 1.7; color: var(--text-2); }
.page .post a { color: var(--brass-ink); }

@media (max-width: 600px) {
  .page .masthead .provenance { margin-left: 0; text-align: left; }
  .page .cat-link-row, .page .archive .year-row { grid-template-columns: 1fr; gap: .4rem; }
  .page .cat-stats .stat { border-left: 0; border-top: 1px solid var(--line); }
  .page .cat-stats .stat:first-child { border-top: 0; }
  .page .hist-controls label, .page .hist-controls .seg { flex: 1 1 100%; }
  .page .hist-controls select { width: 100%; min-width: 0; }
  .page .hist-controls .seg button { flex: 1; }
  .page .tabs button { font-size: 1.2rem; margin-right: 1.1rem; }
}

/* digest signup and outcome pages */
.page .digest-page { max-width: 42rem; margin-top: 1.5rem; }
.page .digest-page p { font-size: .9375rem; line-height: 1.65; color: var(--text-2); margin: .75rem 0; }
.page .digest-page a { color: var(--brass-ink); }
.digest-form fieldset { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: .9rem 1.1rem; margin: 1rem 0; }
.digest-form legend { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); padding: 0 .35rem; }
.digest-form .pick { display: inline-flex; gap: .4rem; align-items: center; margin: .3rem 1.1rem .3rem 0; font-size: .875rem; }
.digest-form label { font-size: .875rem; font-weight: 600; }
.digest-form input[type=email] { display: block; width: 100%; max-width: 26rem; font: inherit; font-size: .9375rem; color: var(--text); background: var(--card); border: 1px solid var(--line-2); border-radius: 3px; padding: .6rem .75rem; margin: .4rem 0 1rem; }
.digest-form button { font: inherit; font-weight: 700; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: linear-gradient(96deg, var(--brass), var(--brass-lt)); border: 0; border-radius: 3px; padding: .75rem 1.4rem; cursor: pointer; }
.digest-form .hp { position: absolute; left: -9999px; }
.page .form-errors { color: var(--error); }

/* compact digest signup panel: homepage, month and category pages */
.signup { position: relative; margin-top: 3rem; background: var(--ink); color: var(--cream); border-radius: 6px; border-top: 3px solid var(--brass); padding: 1.6rem; }
.signup h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 400; letter-spacing: -.01em; margin: 0; }
.signup-lede { font-size: .9375rem; line-height: 1.55; color: color-mix(in srgb, var(--cream) 78%, transparent); margin: .4rem 0 1.1rem; max-width: 60ch; }
.signup-form { display: grid; grid-template-columns: minmax(12rem, 1.6fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto; gap: .7rem; align-items: end; }
.signup-form label span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 72%, transparent); margin-bottom: .35rem; }
.signup-form input, .signup-form select { width: 100%; font: inherit; font-size: .9375rem; color: var(--cream); background: rgba(255,255,255,.05); border: 1px solid rgba(201,162,39,.35); border-radius: 3px; padding: .62rem .7rem; color-scheme: dark; }
.signup-form select option { color: var(--text); background: var(--card); }
.signup-form button { font: inherit; font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: linear-gradient(96deg, var(--brass), var(--brass-lt)); border: 0; border-radius: 3px; padding: .72rem 1.3rem; cursor: pointer; }
.signup-form .hp { position: absolute; left: -9999px; }
.signup-small { font-size: .75rem; color: color-mix(in srgb, var(--cream) 66%, transparent); margin: .9rem 0 0; }
.signup-small a { color: var(--brass-pale); }
.signup :focus-visible { outline-color: var(--brass); }
@media (max-width: 760px) { .signup-form { grid-template-columns: 1fr; } }

/* anomaly stamp: record or exceptional single-bulletin advances */
.stamp { display: inline-block; font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); border: 1px solid var(--brass); border-radius: 2px; padding: .12rem .4rem; margin-top: .35rem; white-space: nowrap; }
.tile .stamp { align-self: flex-start; }
.matrix .stamp { display: block; width: max-content; margin: .3rem auto 0; }
.page .intro p + p { margin-top: .9rem; }

/* analysis post */
.page .masthead .byline { font-size: .8125rem; color: var(--text-2); margin: .55rem 0 0; }
.page .post { margin-top: 1.75rem; }
.page .post-disclaimer { max-width: 68ch; margin-top: 2rem; padding: .9rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 4px; font-size: .8125rem; line-height: 1.6; color: var(--text-2); }
.page .post-disclaimer b { color: var(--text); }

/* checker: segmented date, help link, example result */
.datefield { border: 0; padding: 0; margin: 0 0 .8rem; min-width: 0; }
.datefield legend { float: left; width: 100%; font-size: .625rem; font-weight: 700; color: color-mix(in srgb, var(--cream) 72%, transparent); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .35rem; padding: 0; line-height: normal; }
.datefield legend + * { clear: both; }
.dparts { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: .4rem; }
/* Month / Day / Year names stay for screen readers; the placeholders show the order, so the row lines up with the fields beside it. */
.dparts label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dparts input { width: 100%; font: inherit; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cream); background: rgba(255,255,255,.05); border: 1px solid rgba(201,162,39,.28); border-radius: 3px; padding: .65rem .6rem; }
.dparts input:invalid:not(:placeholder-shown) { border-color: var(--error-ink); }
.pd-help { display: inline-block; margin-top: .45rem; font-size: .75rem; color: var(--brass-pale); }
.checker .result .sample { filter: grayscale(1); opacity: .5; user-select: none; }
.checker .result .sample-tag { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); margin: 0 0 .6rem; }
@media (max-width: 899px) { .checker .result:has(> .sample) { display: none; } }

/* homepage cards: context line, Current and near-current (item 6) */
.tile .ctx { font-size: .75rem; font-weight: 600; color: var(--text-2); margin-top: .5rem; line-height: 1.35; }
.tile.is-current::before, .tile.is-near::before { transform: scaleX(1); background: linear-gradient(90deg, var(--cur-rule), transparent); }
.tile.is-current .date { color: var(--cur); }
.tile.is-near .date { color: var(--cur); }
.near-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cur); border-bottom: 1px solid var(--cur-rule); padding-bottom: 1px; }
.tile.is-unavailable .date { color: var(--unav); }
.chip.cur, .chip.unav { font-size: .75rem; }

/* Homepage tab bar on phones: one scrolling row (~50px) instead of wrapped
   groups (~140px). Labels move to screen readers; buttons keep their names. */
@media (max-width: 600px) {
  .controls .ctl-row { flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding: .45rem 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, black 90%, transparent); mask-image: linear-gradient(90deg, black 90%, transparent); }
  .controls .ctl-row::-webkit-scrollbar { display: none; }
  .controls .ctl { flex-wrap: nowrap; flex: 0 0 auto; }
  .controls .ctl-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .controls .seg { flex-wrap: nowrap; }
  .controls .seg button { padding: .5rem .7rem; }
}

/* "What changed" panel: bulletin-day changelog, built to screenshot well */
.chg { margin: 2rem 0 .5rem; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 6px; padding: 1.4rem 1.5rem 1rem; }
.chg-head h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 400; letter-spacing: -.01em; margin: .35rem 0 0; line-height: 1.1; }
.chg-list { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: chg; }
.chg-row { counter-increment: chg; display: grid; grid-template-columns: 2rem minmax(10rem, 1.1fr) auto minmax(12rem, 2fr); gap: .35rem 1rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.chg-row::before { content: counter(chg); font-family: var(--serif); font-size: 1.35rem; color: var(--brass-ink); }
.chg-who b { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.chg-who span { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); }
.chg-row .chip { justify-self: start; }
.chg-why { font-size: .875rem; color: var(--text-2); line-height: 1.45; }
.chg-none { margin-top: 1rem; font-size: .9375rem; color: var(--text-2); }
.chg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chg-foot a { color: var(--brass-ink); text-decoration: none; border-bottom: 1px solid var(--brass); }
@media (max-width: 700px) {
  .chg { padding: 1.1rem 1rem .8rem; }
  .chg-row { grid-template-columns: 1.6rem 1fr auto; }
  .chg-why { grid-column: 2 / -1; }
}

/* ═══ V1 shared visual components ═══ (all colour from the semantic tokens) */
.mchip { display: inline-flex; align-items: baseline; gap: .25rem; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mchip.up { color: var(--adv); } .mchip.down { color: var(--retro); } .mchip.flat { color: var(--hold); } .mchip.cur { color: var(--cur); } .mchip.unav { color: var(--unav); }
.badge-record { display: inline-block; font-size: .5625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cur); border: 1px solid var(--cur-rule); border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.dbar { display: block; overflow: visible; }
.dbar .dbar-track { fill: var(--line); }
.dbar.up .dbar-fill { fill: var(--adv); } .dbar.down .dbar-fill { fill: var(--retro); } .dbar.flat .dbar-fill { fill: var(--hold); } .dbar.cur .dbar-fill { fill: var(--cur-rule); } .dbar.unav .dbar-fill { fill: var(--unav); }
.dbar .dbar-break { fill: var(--card); } /* a bar longer than the scale: the break mark, with the full value in the label */
.dbar .dbar-label { font: 700 11px var(--ui); font-variant-numeric: tabular-nums; }
.dbar.up .dbar-label { fill: var(--adv); } .dbar.down .dbar-label { fill: var(--retro); } .dbar.flat .dbar-label { fill: var(--hold); } .dbar.cur .dbar-label { fill: var(--cur); } .dbar.unav .dbar-label { fill: var(--unav); }
.spark24 { display: block; overflow: visible; }
.spark24 path { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark24 circle { fill: var(--card); stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2 1.5; }
.gauge { margin: 1rem 0; max-width: 100%; }
.gauge svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.gauge .g-track { fill: var(--line); }
.gauge .g-gap { fill: var(--text-2); opacity: .35; }
.gauge .g-end { fill: var(--text); } .gauge .g-end.now { fill: var(--card); stroke: var(--text); stroke-width: 2; }
.gauge .g-mid { font: 700 13px var(--ui); fill: var(--text); }
.gauge .g-lab { font: 600 11px var(--ui); fill: var(--muted); }
.gauge.near .g-gap, .gauge.near .g-end { fill: var(--cur-rule); opacity: 1; } .gauge.near .g-mid { fill: var(--cur); }
.gauge.cur .g-track { fill: var(--cur-bg); stroke: var(--cur-rule); } .gauge.cur .g-mid { fill: var(--cur); }
.gauge.unav .g-track { fill: none; stroke: var(--unav); stroke-dasharray: 4 3; } .gauge.unav .g-mid { fill: var(--unav); }

/* The checker's bulletin heatmap on light pages */
.page .pd-heat h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin: 0 0 .5rem; color: var(--text); }
.page .pd-heat .hm-m, .page .pd-heat .hm-y { fill: var(--muted); }
.page .hm.adv, .page .hm-sw.adv { fill: var(--adv); background: var(--adv); }
.page .hm.retro, .page .hm-sw.retro { fill: var(--retro); background: var(--retro); }
.page .hm.cur, .page .hm-sw.cur { fill: var(--cur-rule); background: var(--cur-rule); }
.page .hm.hold, .page .hm-sw.hold { fill: var(--line-2); background: var(--line-2); }
.page .hm.unav, .page .hm-sw.unav { fill: var(--card); stroke: var(--unav); background: transparent; }
.page .hm.none { fill: var(--line); }
.page .pd-heat figcaption, .page .pd-heat .lg-note { color: var(--text-2); }
.page .yb-more summary { color: var(--brass-ink); }

/* ═══ V2 month page ═══ */
.scoreboard { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; margin: 1.5rem 0 .5rem; }
.sb { display: grid; grid-template-columns: auto auto; column-gap: .55rem; align-items: center; }
.sb-dot { width: .7rem; height: .7rem; border-radius: 50%; grid-row: 1 / span 2; align-self: center; }
.sb.up .sb-dot { background: var(--adv); } .sb.down .sb-dot { background: var(--retro); } .sb.flat .sb-dot { background: var(--hold); }
.sb-n { font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.sb-l { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chg-link { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 240px) auto; gap: .35rem 1rem; align-items: center; text-decoration: none; color: inherit; }
.chg-link:hover .chg-who b { color: var(--brass-ink); }
.chg-row { grid-template-columns: 2rem 1fr; }
.chg-row .chg-why { grid-column: 2; }
.chg-bar svg { max-width: 100%; height: auto; }
.page .brief { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1.3rem 1.5rem; margin: 1.5rem 0; }
.page .brief h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 400; margin: 0 0 .6rem; }
.brief-list { margin: 0 0 1rem; padding-left: 1.1rem; }
.brief-list li { font-size: .9375rem; line-height: 1.55; color: var(--text); margin: .25rem 0; font-variant-numeric: tabular-nums; }
.brief-more { margin-top: .9rem; }
.brief-more summary { cursor: pointer; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-ink); }
.brief-more p { margin-top: .75rem !important; }
.fy-bars { margin: 1rem 0; padding: .9rem 1rem; background: var(--bone); border-radius: 4px; }
.fy-bars figcaption { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.fyb-row { display: grid; grid-template-columns: 11rem minmax(0, 240px); gap: .2rem 1rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); }
.fyb-who { grid-column: 1 / -1; font-family: var(--serif); font-size: 1.1rem; }
.fyb-lab { font-size: .75rem; color: var(--text-2); }
.fyb-row svg { max-width: 100%; height: auto; }
.matrix .delta { display: block; margin-top: .15rem; }
.matrix .delta .mchip { font-size: .6875rem; }
.matrix .badge-record { display: block; width: max-content; margin: .3rem auto 0; }
@media (max-width: 700px) {
  .chg-link { grid-template-columns: 1fr auto; }
  .chg-link .chg-bar { grid-column: 1 / -1; }
  .fyb-row { grid-template-columns: 1fr; }
}
.tile .ctx { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
/* keep bars beside their labels on wide screens */
.chg-link { grid-template-columns: minmax(10rem, 19rem) minmax(0, 240px) auto; justify-content: start; }
@media (max-width: 700px) { .chg-link { grid-template-columns: 1fr auto; } }

/* ═══ V3 category page ═══ */
.cat-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: .8rem 0 0; }
.cat-verdict .mchip { font-size: 1.05rem; }
.cat-when { font-size: .8125rem; color: var(--text-2); }
.page .cat-stats .v { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-variant-numeric: tabular-nums; }
.stepchart { margin: 1.5rem 0 .25rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1rem .6rem; }
.stepchart svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.stepchart .sc-base { stroke: var(--line-2); stroke-width: 1; }
.stepchart .sc-grid { stroke: var(--line); stroke-width: 1; }
.stepchart .sc-ax { fill: var(--muted); font: 600 11px var(--ui); font-variant-numeric: tabular-nums; }
.stepchart .sc-fa { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.stepchart .sc-filing { fill: none; stroke: var(--text-2); stroke-width: 1.5; opacity: .45; stroke-linejoin: round; }
.stepchart .sc-cur { fill: var(--cur-rule); }
.stepchart .sc-unav { stroke: var(--unav); stroke-width: 3; stroke-dasharray: 4 3; }
.stepchart .sc-rec { fill: var(--card); stroke: var(--cur-rule); stroke-width: 2.5; }
.stepchart .sc-last { fill: var(--text); }
.stepchart .sc-pill rect { fill: var(--ink); }
.stepchart .sc-pill text { fill: var(--brass-pale); font: 700 11px var(--ui); font-variant-numeric: tabular-nums; }
.sc-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .5rem; font-size: .75rem; color: var(--text-2); }
.sc-legend i { display: inline-block; vertical-align: middle; margin-right: .35rem; }
.sc-legend .lg-fa { width: 1.1rem; border-top: 2px solid var(--text); }
.sc-legend .lg-df { width: 1.1rem; border-top: 2px solid var(--text-2); opacity: .5; }
.sc-legend .lg-rec { width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--cur-rule); }
.sc-legend .lg-cur { width: .9rem; height: .3rem; background: var(--cur-rule); }
.sc-legend .lg-unav { width: 1.1rem; border-top: 3px dashed var(--unav); }
.page .cat-heat { margin: 2rem 0; }
.cat-tables .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-2); margin: .6rem 0 1rem; }
.cat-tables .tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin: 0 1.5rem -1px 0; padding: .4rem 0 .55rem; font: 400 1.3rem var(--serif); color: var(--muted); cursor: pointer; }
.cat-tables .tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brass); }
html:not(.js) .cat-panel[hidden] { display: block !important; margin-top: 2rem; }
.hist-table .mchip { font-size: .75rem; }
.hist-all { margin-top: .75rem; }
.hist-all summary { cursor: pointer; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-ink); padding: .4rem 0; }
.hist-table tr:target td { background: var(--cur-bg); }