/* ── tokens ───────────────────────────────────────────────────────────── */
  :root {
    --paper:      #F7F8FA;   /* drafting paper — cool, faint blue-grey bias */
    --surface:    #FFFFFF;
    --surface-2:  #EFF2F6;
    --ink:        #16202B;   /* slate navy, not black */
    --ink-2:      #46586B;
    --ink-3:      #7B8C9E;
    --rule:       #DCE2E9;
    --rule-2:     #C3CDD8;

    --accent:     #E35205;   /* signal orange — site marking */
    --accent-ink: #FFFFFF;
    --accent-bg:  #FDEEE6;

    --crit:       #A81E12;   /* clay red */
    --crit-bg:    #FBEAE8;
    --warn:       #9A6100;   /* ochre */
    --warn-bg:    #FBF1E0;
    --pass:       #0F6B5C;   /* deep teal */
    --pass-bg:    #E4F2EF;
    --unk:        #5B6B7C;
    --unk-bg:     #EDF0F4;

    --shadow: 0 1px 2px rgba(22,32,43,.06), 0 8px 24px -16px rgba(22,32,43,.22);

    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --paper:      #0D1318;
      --surface:    #151E26;
      --surface-2:  #1C2831;
      --ink:        #E7EDF3;
      --ink-2:      #A2B3C3;
      --ink-3:      #6E8294;
      --rule:       #24313B;
      --rule-2:     #33444F;

      --accent:     #FF7A3D;
      --accent-ink: #1A0E06;
      --accent-bg:  #2E1A0E;

      --crit:       #F8877C;
      --crit-bg:    #331715;
      --warn:       #E2AC52;
      --warn-bg:    #2E2412;
      --pass:       #4ED5B4;
      --pass-bg:    #0F2B27;
      --unk:        #93A5B6;
      --unk-bg:     #1D262E;

      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper:#0D1318; --surface:#151E26; --surface-2:#1C2831;
    --ink:#E7EDF3; --ink-2:#A2B3C3; --ink-3:#6E8294;
    --rule:#24313B; --rule-2:#33444F;
    --accent:#FF7A3D; --accent-ink:#1A0E06; --accent-bg:#2E1A0E;
    --crit:#F8877C; --crit-bg:#331715; --warn:#E2AC52; --warn-bg:#2E2412;
    --pass:#4ED5B4; --pass-bg:#0F2B27; --unk:#93A5B6; --unk-bg:#1D262E;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 1140px; margin: 0 auto; padding-inline: 20px; }

  /* ── masthead ─────────────────────────────────────────────────────────── */
  header.masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
  }
  .mast-inner {
    display: flex; flex-wrap: wrap; gap: 16px 28px;
    align-items: baseline; justify-content: space-between;
    padding-block: 22px 20px;
  }
  .mark {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  }
  .mark h1 {
    font-family: var(--display);
    font-weight: 800; font-size: clamp(22px, 3.4vw, 30px);
    letter-spacing: -.02em; margin: 0; text-wrap: balance;
  }
  /* the accent tick — used in the masthead and on the lockscreen, so it is not
     scoped to either parent */
  .rule-tick {
    flex: none; width: 30px; height: 4px; background: var(--accent);
    border-radius: 1px; align-self: center;
  }
  .target {
    font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  }
  .target b { color: var(--ink); font-weight: 600; }
  .mast-meta {
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
    text-align: right; line-height: 1.7;
  }

  /* ── survey strip ─────────────────────────────────────────────────────── */
  .survey {
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    background: var(--rule);
    border-block: 1px solid var(--rule);
  }
  .stat { background: var(--surface); padding: 16px 18px 14px; }
  .stat .k {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px;
  }
  .stat .v {
    font-family: var(--display); font-weight: 700; font-size: 25px;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .stat .v small { font-size: 14px; font-weight: 600; color: var(--ink-3); }
  .stat .n { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
  .stat.is-crit .v { color: var(--crit); }
  .stat.is-accent .v { color: var(--accent); }

  /* ── controls ─────────────────────────────────────────────────────────── */
  .controls {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
  }
  .controls-inner {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding-block: 11px;
  }
  .chip {
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 2px; cursor: pointer;
    border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2);
    transition: background .14s, color .14s, border-color .14s;
  }
  .chip:hover { border-color: var(--ink-3); color: var(--ink); }
  .chip[aria-pressed="true"] {
    background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
  .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .spacer { flex: 1 1 auto; }
  .count-live {
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* ── sections ─────────────────────────────────────────────────────────── */
  section.band { padding-block: 44px 8px; }
  section.band + section.band { border-top: 1px solid var(--rule); }

  .band-head { margin-bottom: 26px; max-width: 62ch; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--accent); font-weight: 600;
    margin-bottom: 10px;
  }
  .eyebrow::before {
    content: ""; width: 20px; height: 2px; background: var(--accent);
  }
  .band-head h2 {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(25px, 4vw, 36px); letter-spacing: -.025em;
    margin: 0 0 9px; text-wrap: balance;
  }
  .band-head p { margin: 0; color: var(--ink-2); font-size: 15px; }
  .band-tally {
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
    margin-top: 12px; display: flex; flex-wrap: wrap; gap: 14px;
  }
  .band-tally b { font-weight: 600; }

  .group { margin-bottom: 30px; }
  .group-bar {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 8px; margin-bottom: 0;
    border-bottom: 2px solid var(--ink);
  }
  .group-bar h3 {
    font-family: var(--display); font-weight: 700; font-size: 14.5px;
    letter-spacing: .01em; margin: 0;
  }
  .group-bar .gn {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    margin-left: auto; font-variant-numeric: tabular-nums;
  }

  /* ── snag rows ────────────────────────────────────────────────────────── */
  .snag {
    display: grid;
    grid-template-columns: 78px minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 4px 22px;
    padding: 16px 0 17px;
    border-bottom: 1px solid var(--rule);
    align-items: start;
  }
  .snag.hide { display: none; }

  .snag-ref {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    padding-top: 2px; line-height: 1.5;
  }
  .snag-ref .src { display: block; color: var(--ink-3); opacity: .75; margin-top: 2px; }

  .snag-main { min-width: 0; }
  .snag-title {
    font-family: var(--display); font-weight: 700; font-size: 16px;
    letter-spacing: -.01em; margin: 0 0 5px; display: flex;
    align-items: baseline; gap: 9px; flex-wrap: wrap; text-wrap: balance;
  }
  .snag-why { margin: 0; color: var(--ink-2); font-size: 14px; }

  .snag-side { min-width: 0; }
  .evidence {
    font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
    background: var(--surface-2); border-left: 2px solid var(--rule-2);
    padding: 9px 11px; border-radius: 0 2px 2px 0; color: var(--ink-2);
    overflow-x: auto; margin: 0 0 8px;
  }
  .evidence.is-fail { border-left-color: var(--crit); }
  .evidence.is-warn { border-left-color: var(--warn); }
  .evidence.is-pass { border-left-color: var(--pass); }
  .evidence .lab {
    display: block; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 3px;
  }
  .fix {
    font-size: 13.5px; color: var(--ink-2); margin: 0;
    padding-left: 13px; border-left: 2px solid var(--accent);
  }
  .fix b {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent); display: block;
    font-weight: 600; margin-bottom: 2px;
  }

  /* status pills */
  .pill {
    font-family: var(--mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 7px; border-radius: 2px; white-space: nowrap;
    position: relative; top: -1px;
  }
  .pill.fail { background: var(--crit-bg); color: var(--crit); }
  .pill.warn { background: var(--warn-bg); color: var(--warn); }
  .pill.pass { background: var(--pass-bg); color: var(--pass); }
  .pill.unk  { background: var(--unk-bg);  color: var(--unk); }
  .pill.sev  { background: transparent; color: var(--ink-3); border: 1px solid var(--rule-2); }

  /* ── notes / footer ───────────────────────────────────────────────────── */
  .note {
    background: var(--surface); border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    padding: 18px 20px; border-radius: 2px; margin-block: 8px 34px;
    box-shadow: var(--shadow);
  }
  .note h4 {
    font-family: var(--display); font-weight: 700; font-size: 14px;
    margin: 0 0 7px;
  }
  .note p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; max-width: 74ch; }
  .note p:last-child { margin-bottom: 0; }
  .note code {
    font-family: var(--mono); font-size: 12.5px;
    background: var(--surface-2); padding: 1px 5px; border-radius: 2px;
  }

  footer.foot {
    border-top: 1px solid var(--rule); margin-top: 26px;
    padding-block: 26px 40px; color: var(--ink-3); font-size: 12.5px;
  }
  footer.foot .fgrid {
    display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between;
  }
  footer.foot b { color: var(--ink-2); font-weight: 600; }
  .mono { font-family: var(--mono); }

  .empty {
    padding: 30px 0; color: var(--ink-3); font-family: var(--mono); font-size: 12.5px;
  }

  /* five tiles in a two-column grid leaves the last one orphaned — let it span */
  @media (max-width: 620px) {
    .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }

  @media (max-width: 860px) {
    .snag { grid-template-columns: 62px minmax(0, 1fr); }
    .snag-side { grid-column: 2; margin-top: 9px; }
    .mast-meta { text-align: left; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     HERO + THE TWO ANIMATED GATES
     Motion carries the finding, it does not decorate: the SEO gate shows
     nine competing pages collapsing into one primary; the AEO gate shows a
     passage being lifted out of a page and cited. Both loop slowly, pause
     on hover, and stop dead under prefers-reduced-motion.
     ══════════════════════════════════════════════════════════════════════ */

  .livedot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pass); margin-right: 7px; vertical-align: middle;
    animation: pulse 2.6s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

  .hero { border-bottom: 1px solid var(--rule); background: var(--surface); }
  .hero-inner { padding-block: 46px 40px; }
  .hero-copy { max-width: 66ch; }
  .hero-h {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(30px, 5.2vw, 50px); line-height: 1.06;
    letter-spacing: -.033em; margin: 0 0 14px; text-wrap: balance;
  }
  .hero-p { margin: 0 0 26px; color: var(--ink-2); font-size: 16.5px; max-width: 58ch; }
  .hero-p em { color: var(--ink); font-style: normal; font-weight: 600; }

  .scorecard { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
  .sc { display: flex; flex-direction: column; gap: 2px; padding: 13px 20px 14px; flex: 1 1 150px; }
  .sc + .sc { border-left: 1px solid var(--rule); }
  .sc-k {
    font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .sc-v {
    font-family: var(--display); font-weight: 800; font-size: 30px;
    letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
  }
  .sc-v i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-3); }
  .sc-v.is-low { color: var(--crit); }
  .sc-v.is-mid { color: var(--warn); }
  .sc-n { font-size: 12px; color: var(--ink-3); }

  /* ── the two gates ─────────────────────────────────────────────────────── */
  .gates {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 20px; padding-block: 34px 8px;
  }
  .gate {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: var(--surface); border: 1px solid var(--rule);
    border-top: 3px solid var(--rule-2); border-radius: 2px; overflow: hidden;
    transition: border-top-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .gate:hover, .gate:focus-visible {
    border-top-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow);
  }
  .gate:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .gate-viz { position: relative; background: var(--surface-2); border-bottom: 1px solid var(--rule); }
  .viz { display: block; width: 100%; height: auto; }
  .viz-cap {
    position: absolute; left: 14px; bottom: 11px;
    font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
    letter-spacing: .02em;
  }
  .viz-cap b { color: var(--accent); font-weight: 600; }

  .gate-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .gate-num {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
    color: var(--accent); font-weight: 600; margin-bottom: 7px;
  }
  .gate h3 {
    font-family: var(--display); font-weight: 800; font-size: 22px;
    letter-spacing: -.022em; margin: 0 0 8px;
  }
  .gate p { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; }
  .gate-tally {
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 15px;
  }
  .gate-tally b { font-weight: 600; }
  .gate-go {
    margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
  }
  .gate-go svg { transition: transform .2s ease; }
  .gate:hover .gate-go svg { transform: translateX(3px); }

  /* ── viz 01 · consolidation ────────────────────────────────────────────── */
  .viz-seo .viz-sats rect { fill: var(--rule-2); opacity: .55; }
  .viz-seo .viz-rays line { stroke: var(--rule-2); stroke-width: 1; opacity: 0; }
  .viz-seo .viz-primary rect { fill: none; stroke: var(--accent); stroke-width: 1.6; }
  .viz-seo .viz-primary line { stroke: var(--accent); stroke-width: 1.4; opacity: .5; }

  .viz-seo .viz-sats rect { animation: satDrift 7s ease-in-out infinite; }
  .viz-seo .viz-rays line { animation: rayFade 7s ease-in-out infinite; }
  .viz-seo .viz-primary  { animation: primaryLift 7s ease-in-out infinite; transform-origin: 160px 75px; }
  .viz-seo .viz-sats rect:nth-child(2n)   { animation-delay: .12s; }
  .viz-seo .viz-sats rect:nth-child(3n)   { animation-delay: .24s; }
  .viz-seo .viz-rays line:nth-child(2n)   { animation-delay: .1s; }
  .viz-seo .viz-rays line:nth-child(3n)   { animation-delay: .2s; }

  @keyframes satDrift {
    0%, 22%   { transform: translate(0,0);            opacity: .55; }
    52%, 74%  { transform: translate(var(--tx,0),0);  opacity: .12; }
    100%      { transform: translate(0,0);            opacity: .55; }
  }
  .viz-seo .viz-sats rect:nth-child(-n+5) { --tx: 58px; }
  .viz-seo .viz-sats rect:nth-child(n+6)  { --tx: -58px; }

  @keyframes rayFade {
    0%, 18%  { opacity: 0; }
    40%, 70% { opacity: .85; }
    92%,100% { opacity: 0; }
  }
  @keyframes primaryLift {
    0%, 26%   { opacity: .45; transform: scale(.97); }
    54%, 78%  { opacity: 1;   transform: scale(1); }
    100%      { opacity: .45; transform: scale(.97); }
  }

  /* ── viz 02 · extraction ───────────────────────────────────────────────── */
  .viz-aeo .viz-page rect  { fill: none; stroke: var(--rule-2); stroke-width: 1; }
  .viz-aeo .viz-page line  { stroke: var(--rule-2); stroke-width: 2.4; stroke-linecap: round; }
  .viz-aeo .viz-page .ln-h { stroke: var(--ink-3); stroke-width: 3; }
  .viz-aeo .ln-lift rect   { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1; }
  .viz-aeo .ln-lift line   { stroke: var(--accent); }
  .viz-aeo .viz-arc path   { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0; }
  .viz-aeo .viz-answer rect { fill: var(--surface); stroke: var(--rule-2); stroke-width: 1; }
  .viz-aeo .viz-answer line { stroke: var(--rule-2); stroke-width: 2.4; stroke-linecap: round; }
  .viz-aeo .viz-answer .cite { fill: var(--accent); stroke: none; }

  .viz-aeo .ln-lift     { animation: liftPassage 7s ease-in-out infinite; }
  .viz-aeo .viz-arc path{ animation: arcDraw 7s ease-in-out infinite; }
  .viz-aeo .viz-answer  { animation: answerIn 7s ease-in-out infinite; transform-origin: 246px 68px; }
  .viz-aeo .viz-answer line { animation: fillLine 7s ease-in-out infinite; }
  .viz-aeo .viz-answer line:nth-of-type(2) { animation-delay: .14s; }
  .viz-aeo .viz-answer line:nth-of-type(3) { animation-delay: .28s; }
  .viz-aeo .viz-answer .cite { animation: citeIn 7s ease-in-out infinite; }

  @keyframes liftPassage {
    0%, 14%  { opacity: .35; transform: translateY(0); }
    30%, 82% { opacity: 1;   transform: translateY(-2px); }
    100%     { opacity: .35; transform: translateY(0); }
  }
  @keyframes arcDraw { 0%,26% { opacity: 0; } 44%,78% { opacity: .9; } 96%,100% { opacity: 0; } }
  @keyframes answerIn {
    0%, 32%   { opacity: 0; transform: scale(.96); }
    50%, 80%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(.96); }
  }
  @keyframes fillLine {
    0%, 42%  { transform: scaleX(0); opacity: 0; }
    58%, 82% { transform: scaleX(1); opacity: 1; }
    100%     { transform: scaleX(0); opacity: 0; }
  }
  .viz-aeo .viz-answer line { transform-origin: 202px 0; }
  @keyframes citeIn { 0%,56% { opacity: 0; } 68%,82% { opacity: 1; } 100% { opacity: 0; } }

  /* hovering a gate pauses its animation so the frame can be read */
  .gate:hover .viz *, .gate:focus-within .viz * { animation-play-state: paused; }

  /* row highlighting, per the data-dense dashboard pattern */
  .snag { transition: background .15s ease; }
  .snag:hover { background: var(--surface); }

  @media (max-width: 700px) {
    .sc + .sc { border-left: 0; border-top: 1px solid var(--rule); }
    .sc { flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 10px; }
    .sc-n { margin-left: auto; text-align: right; }
  }

  @media (prefers-reduced-motion: reduce) {
    .livedot, .viz * { animation: none !important; }
    /* resting frame must still read correctly with no motion at all */
    .viz-seo .viz-rays line { opacity: .85; }
    .viz-seo .viz-primary   { opacity: 1; }
    .viz-aeo .viz-arc path  { opacity: .9; }
    .viz-aeo .viz-answer    { opacity: 1; }
    .viz-aeo .viz-answer line { transform: scaleX(1); opacity: 1; }
    .viz-aeo .viz-answer .cite { opacity: 1; }
    .viz-aeo .ln-lift       { opacity: 1; }
    .gate:hover { transform: none; }
  }

  /* ══════════════════════════════════════════════════════════════════════
     DOMAIN GATE
     An access check, not a security control — see auth.js. Styled to say
     "internal tool" rather than "secure area", because it is not one.
     ══════════════════════════════════════════════════════════════════════ */

  body.is-locked { overflow: hidden; }

  .lock {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center;
    padding: 24px 20px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    overflow-y: auto;
  }

  .lock-card {
    width: 100%; max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: 2px;
    padding: 30px 30px 26px;
    box-shadow: var(--shadow);
  }

  .lock-mark { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
  .lock-title {
    font-family: var(--display); font-weight: 800; font-size: 17px;
    letter-spacing: -.015em;
  }
  .lock-h {
    font-family: var(--display); font-weight: 800;
    font-size: 27px; letter-spacing: -.028em; margin: 0 0 8px;
  }
  .lock-p { margin: 0 0 24px; color: var(--ink-2); font-size: 14.5px; }

  .lock-label {
    display: block; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 7px;
  }
  .lock-input {
    width: 100%; box-sizing: border-box;
    font-family: var(--body); font-size: 15px; color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule-2); border-radius: 2px;
    padding: 11px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .lock-input::placeholder { color: var(--ink-3); }
  .lock-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .lock-input[aria-invalid="true"] { border-color: var(--crit); }

  .lock-err {
    margin: 9px 0 0; font-size: 13px; color: var(--crit);
    display: flex; gap: 6px; align-items: flex-start;
  }
  .lock-err::before { content: "!"; font-family: var(--mono); font-weight: 600; }
  .lock-hint { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3); }
  .lock-hint b { color: var(--ink-2); font-family: var(--mono); font-size: 12px; }

  .lock-btn {
    width: 100%; margin-top: 18px; cursor: pointer;
    font-family: var(--mono); font-size: 12px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent-ink); background: var(--accent);
    border: 1px solid var(--accent); border-radius: 2px;
    padding: 12px 16px; min-height: 44px;
    transition: filter .15s ease, transform .1s ease;
  }
  .lock-btn:hover { filter: brightness(1.07); }
  .lock-btn:active { transform: translateY(1px); }
  .lock-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  .lock-note {
    margin: 24px 0 0; padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
  }
  .lock-note b { color: var(--ink-2); font-weight: 600; }

  /* signed-in strip in the masthead */
  .whoami {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 5px; font-family: var(--mono); font-size: 11px;
  }
  .whoami #lock-who { color: var(--ink-2); }
  #signout {
    cursor: pointer; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3); background: none;
    border: 1px solid var(--rule-2); border-radius: 2px;
    padding: 3px 8px; min-height: 26px;
    transition: color .15s ease, border-color .15s ease;
  }
  #signout:hover { color: var(--accent); border-color: var(--accent); }
  #signout:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (max-width: 860px) {
    .whoami { margin-top: 8px; }
  }