/* ==========================================================================
   BlackPlastic Design — the whole site as an engineer's notebook
   ------------------------------------------------------------------------
   Squared paper, a draughtsman's pencil hand, hairline rules and a red-pencil
   annotation colour. One register throughout: there is no separate "front".

   TWO HANDS, used deliberately:
     Architects Daughter — the neat drawing hand. Headings and running text.
     Caveat              — the quick pencil scrawl. Annotations and labels.

   ONE EXCEPTION, held on purpose: part numbers, ball coordinates, hex, rail
   names, code and every table stay MONOSPACE. `XCZU5CG-FBVB900` and
   `0x00300102` have to be transcribed onto a bench by someone holding a
   meter — a handwriting face makes 0/O and 1/l ambiguous, and this site
   exists to be copied from accurately. Real notebooks work the same way:
   handwriting around printed datasheets.

   Fonts are SELF-HOSTED (SIL OFL). No external requests, nothing to break.
   Committed light — every colour painted explicitly.
   ========================================================================== */

@font-face {
  font-family: 'Architects Daughter';
  src: url('/assets/fonts/architects-daughter-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Caveat';
  src: url('/assets/fonts/caveat-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

:root {
  --paper:      #F2EBD9;
  --paper-deep: #E8DFC7;
  --paper-card: #F8F3E6;

  --grid-fine:  rgba(64, 96, 128, .085);
  --grid-major: rgba(64, 96, 128, .16);

  --ink:        #1E1A13;   /* old letterpress black, warmed */
  --ink-2:      #47402F;
  --ink-3:      #7C7259;
  --rule:       #C9BE9F;
  --rule-hi:    #A2946F;

  --annot:      #A63A1C;   /* the red pencil */
  --verified:   #1F6B4F;   /* measured evidence only */

  /* --serif is the running hand; --sans is now the annotation scrawl */
  --serif: "Architects Daughter", "Segoe Print", "Bradley Hand", cursive;
  --sans:  "Caveat", "Architects Daughter", "Segoe Script", cursive;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --measure: 68ch;

  --t-xs: .70rem;
  --t-sm: .83rem;
  --t-md: clamp(1.09rem, 1.05rem + .2vw, 1.22rem);
  --t-lg: clamp(1.2rem, 1.1rem + .42vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.4rem);
  --t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);

  --sq: 23px;   /* one square of the paper */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;

  /* squared paper: fine grid with a heavier line every fifth square */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size:
    calc(var(--sq) * 5) calc(var(--sq) * 5),
    calc(var(--sq) * 5) calc(var(--sq) * 5),
    var(--sq) var(--sq),
    var(--sq) var(--sq);
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 var(--gutter); }

a { color: var(--annot); text-underline-offset: .17em; }
a:hover { color: #872F17; }
:focus-visible { outline: 2px solid var(--annot); outline-offset: 3px; }

/* ── top bar: written straight onto the page ────────────────────────────────
   No band. The bar is transparent so the squared paper runs unbroken from the
   very top - the header reads as something written on the sheet rather than a
   strip laid over it. Everything here is therefore INK ON PAPER; the old
   light-on-dark values (--paper text, #B9AE92 nav, #A99C80 dim) were only
   legible against the removed --ink background. The double rule stays: on a
   notebook page a ruled line is a divider, not a bar.
   ------------------------------------------------------------------------- */
.topbar {
  background: transparent;
  border-bottom: 3px double var(--rule-hi);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 2rem;
  padding-top: .95rem; padding-bottom: .95rem;
}
/* wordmark sits right, matching the forum's header lockup */
.brand {
  order: 2; margin-left: auto;
  position: relative;
  display: flex; align-items: center; gap: .55rem;
  padding: .42rem 1.05rem;
  font-family: var(--sans); font-size: .96rem; font-weight: 400;
  letter-spacing: -.012em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
/* Circled in red pencil. One stroke, drawn clockwise from the upper left and
   deliberately overshooting past where it began - a closed, even ellipse reads
   as a printed rule and loses the hand. preserveAspectRatio='none' lets it
   stretch to whatever the lockup measures; non-scaling-stroke keeps the line an
   even weight while it does. Purely decorative: it is a background image, so it
   is never announced by a screen reader. */
.brand::before {
  content: "";
  position: absolute; inset: -.1rem -.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M7 47C0 35 2 19 24 10C34 6 46 1 69 2C97 0 102 1 127 1C161 1 200 2 197 26C199 60 107 53 57 52C7 51 7 54 5 33C3 16 15 10 33 4' fill='none' stroke='%23A63A1C' stroke-width='2.2' stroke-opacity='.72' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.brand .wm { display: inline-flex; align-items: baseline; }
/* colour MUST still be set here: the generic `strong, b` rule below paints b in
   var(--ink) explicitly, which would freeze the wordmark at ink and kill the
   hover. Inheriting keeps it in step with .brand. */
.brand b { font-weight: 700; color: inherit; }
.brand .dim { color: var(--ink-3); font-weight: 400; }
.brand svg { display: block; flex: none; }
.brand:hover { color: var(--annot); }
.topnav { order: 1; display: flex; gap: 1.5rem; }
.topnav a {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); text-decoration: none;
}
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--annot); }
/* Below 46rem this used to be `.topnav a.opt { display: none }`, which threw
   away Reference and Faults entirely - two of the five links, and the two
   biggest pages on the site. A phone visitor simply could not reach them from
   the nav. They wrap onto a second line instead: the bar is already built to
   allow it (.topnav is flex:1 1 auto with min-width:0 below 40rem, so it gives
   way rather than shoving the brand off-screen). Losing a link is worse than
   gaining a line. The .opt class is kept as a hook but no longer hides. */
@media (max-width: 46rem) {
  .topnav { flex-wrap: wrap; gap: .35rem 1rem; }
}

@media (max-width: 40rem) {
  /* The lockup stays hard right at every width. The bar itself must NOT wrap -
     if it does, the brand drops to a second line and appears to move. Instead
     the nav wraps within itself on the left while the brand holds its corner. */
  .topbar .wrap { flex-wrap: nowrap; gap: .9rem; align-items: center; }
  .brand  { order: 2; margin-left: auto; flex: 0 0 auto; font-size: .9rem; }
  .topnav { order: 1; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: .2rem .9rem; }
}

@media (max-width: 26rem) {
  /* the circle needs room to breathe; give it less to enclose instead */
  .brand { font-size: .8rem; gap: .4rem; padding: .3rem .7rem; }
  .brand svg { width: 15px; height: 15px; }
  .topnav { gap: .15rem .7rem; }
}


/* ── masthead ───────────────────────────────────────────────────────────── */
.crumb {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 2.2rem; margin: 0 0 1rem;
}
.crumb a { text-decoration: none; }

header.mast {
  border-bottom: 3px double var(--rule-hi);
  padding-bottom: 1.6rem; margin-bottom: 2.4rem;
}
h1 {
  font-family: var(--serif); font-size: var(--t-2xl); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.08; margin: 0 0 1rem; text-wrap: balance;
}
.standfirst {
  max-width: var(--measure); font-size: var(--t-lg); line-height: 1.45;
  color: var(--ink-2); margin: 0 0 1.2rem; text-wrap: pretty;
}
.meta {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  letter-spacing: .04em; margin: 0;
}

/* ── running text ───────────────────────────────────────────────────────── */
section { margin-bottom: 3.2rem; }
h2 {
  font-family: var(--serif); font-size: var(--t-xl); font-weight: 700;
  letter-spacing: -.012em; line-height: 1.18; margin: 0 0 .9rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--rule-hi); text-wrap: balance;
}
h2 .num {
  font-family: var(--sans); font-size: .5em; font-weight: 700; letter-spacing: .12em;
  color: var(--annot); margin-right: .8em; vertical-align: .28em;
}
h3 {
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 700;
  margin: 2rem 0 .55rem; text-wrap: balance;
}
p, ul, ol { max-width: var(--measure); }
p { margin: 0 0 1.1rem; text-wrap: pretty; }
ul, ol { padding-left: 1.2rem; margin: 0 0 1.1rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--annot); }
strong, b { font-weight: 700; color: var(--ink); }
em { color: var(--ink-2); }

code {
  font-family: var(--mono); font-size: .87em; color: var(--ink);
  background: rgba(166, 58, 28, .07);
  border-bottom: 1px solid rgba(166, 58, 28, .22);
  padding: .05em .3em;
}
pre {
  font-family: var(--mono); font-size: var(--t-sm); line-height: 1.55;
  background: var(--paper-card); border: 1px solid var(--rule);
  border-left: 3px solid var(--annot);
  padding: 1rem 1.2rem; overflow-x: auto; color: var(--ink-2); margin: 1.4rem 0;
}
pre code { background: none; border: none; padding: 0; }

/* ── tables: as printed in an old handbook ──────────────────────────────── */
.tbl { overflow-x: auto; margin: 1.5rem 0 1.9rem; }
table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: var(--t-sm); background: var(--paper-card); }
caption {
  caption-side: top; text-align: left; font-family: var(--sans);
  font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 0 .6rem;
}
th {
  text-align: left; font-weight: 700; color: var(--ink);
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: .5rem .9rem; white-space: nowrap;
}
td { padding: .48rem .9rem; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td b { color: var(--ink); }
td code, th code { background: none; border: none; padding: 0; }

/* ── notes: a pencilled margin annotation ───────────────────────────────── */
.note {
  border: 1px solid var(--rule); border-left: 3px solid var(--annot);
  background: var(--paper-card); padding: 1rem 1.3rem;
  margin: 1.6rem 0; max-width: var(--measure);
}
.note.good { border-left-color: var(--verified); }
.note.retract { border-left-color: var(--ink-3); background: var(--paper-deep); }
.note .lbl {
  display: block; font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--annot); margin-bottom: .45rem;
}
.note.good .lbl { color: var(--verified); }
.note.retract .lbl { color: var(--ink-3); }
.note p:last-child { margin-bottom: 0; }

/* ── evidence flags ─────────────────────────────────────────────────────── */
.flag {
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .04em .32em; border: 1px solid; white-space: nowrap; vertical-align: .08em;
}
.f-m { color: var(--verified); border-color: var(--verified); }
.f-i { color: var(--annot); border-color: var(--annot); }

/* ── status pill ────────────────────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--annot); color: var(--annot);
  padding: .25rem .8rem; margin-bottom: 1rem;
}
.dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--annot); }

/* ── the trigger block, fault pages ─────────────────────────────────────── */
.hero-trigger {
  background: var(--paper-card); border: 1px solid var(--rule);
  border-left: 3px solid var(--annot); padding: 1.3rem 1.5rem;
  margin: 0 0 1.4rem; max-width: var(--measure);
}
.hero-trigger table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--t-md); background: none; }
.hero-trigger td { padding: .42rem 0; border-bottom: 1px solid var(--rule); }
.hero-trigger tr:last-child td { border-bottom: none; color: var(--annot); font-weight: 700; }
.hero-trigger td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ── forms and controls ─────────────────────────────────────────────────── */
input[type=search], input[type=text], select, textarea {
  width: 100%; font-family: var(--mono); font-size: var(--t-md);
  padding: .6rem .8rem; border: 1px solid var(--rule-hi);
  background: var(--paper-card); color: var(--ink); border-radius: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--annot); outline: none; }
textarea { min-height: 11rem; resize: vertical; line-height: 1.5; font-family: var(--serif); }
label {
  display: block; font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 700; color: var(--ink); margin-bottom: .35rem;
}
.help { font-family: var(--serif); font-size: .93rem; font-weight: 400; color: var(--ink-3); margin: .1rem 0 .5rem; }
button, .btn {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; letter-spacing: .04em;
  background: var(--annot); color: var(--paper); border: 1px solid var(--annot);
  padding: .65rem 1.5rem; cursor: pointer; border-radius: 0;
}
button:hover { background: #872F17; border-color: #872F17; }
button[disabled] { opacity: .5; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--ink-2); border-color: var(--rule-hi); }
button.ghost:hover { background: transparent; color: var(--annot); border-color: var(--annot); }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer.site {
  border-top: 3px double var(--rule-hi); margin-top: 3rem;
  padding: 1.6rem 0 3.5rem;
}
footer.site p {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-3);
  max-width: var(--measure); margin: 0 0 .8rem; line-height: 1.6;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: .4rem 2rem; }
footer.site nav a { font-family: var(--sans); font-size: var(--t-sm); text-decoration: none; }

/* ══ LANDING PAGE ═══════════════════════════════════════════════════════════
   Was a separate navy stylesheet; folded in 2026-08-18 so the whole site is
   one notebook. These are the only classes the landing page adds. */

.hero { border-bottom: 3px double var(--rule-hi); }
.hero .wrap { padding-top: clamp(1.6rem, 4vw, 3rem); padding-bottom: clamp(2.2rem, 5vw, 3.6rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 1.05rem; letter-spacing: .02em; color: var(--annot);
  margin: 0 0 1.1rem; transform: rotate(-.6deg); transform-origin: left center;
}

.hero h1 {
  font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.4rem);
  line-height: 1.06; letter-spacing: 0; margin: 0 0 1.6rem; max-width: 22ch;
}
.hero h1 .thin { color: var(--ink-3); }

.hero-foot { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .hero-foot { grid-template-columns: 5fr 7fr; gap: 3rem; } }
.hero-note { color: var(--ink-2); margin: 0; max-width: 48ch; }
.hero-note p { margin: 0 0 .8rem; }
.hero-note p:last-child { margin: 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.6rem; }
.cta {
  font-family: var(--sans); font-size: 1.25rem; color: var(--annot);
  text-decoration: none; border-bottom: 2px solid var(--annot); padding-bottom: .1rem;
}
.cta:hover { color: #872F17; border-bottom-color: #872F17; }

/* the figures, boxed on the grid like a pencilled table */
.specs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-bottom: 3px double var(--rule-hi); margin: 0;
}
@media (min-width: 56rem) { .specs { grid-template-columns: repeat(4, 1fr); } }
.spec { padding: 1.1rem var(--gutter) 1.3rem; border-right: 1px solid var(--rule); }
.spec:last-child { border-right: none; }
@media (max-width: 56rem) {
  .spec { padding-left: var(--gutter); padding-right: 1rem; }
  .spec:nth-child(2n) { border-right: none; }
  .spec:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.spec dt {
  font-family: var(--sans); font-size: 1rem; color: var(--ink-3);
  margin: 0 0 .3rem; line-height: 1.25;
}
.spec dd {
  margin: 0; font-family: var(--mono); font-size: 1.55rem; font-weight: 700;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.spec dd small {
  display: block; font-family: var(--sans); font-size: .95rem; font-weight: 400;
  color: var(--ink-3); margin-top: .35rem; line-height: 1.3;
}
.spec.flag-zero dd { color: var(--annot); }

/* two-column body: heading in the margin, like a notebook's left rail */
.row { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { .row { grid-template-columns: 4fr 8fr; gap: 3rem; } }
.row > h2 { border-bottom: none; padding-bottom: 0; margin: 0; }
.row > h2 .idx {
  display: block; font-family: var(--sans); font-size: 1rem; color: var(--annot);
  margin-bottom: .2rem; letter-spacing: .04em;
}
.col > :first-child { margin-top: 0; }
.col > :last-child { margin-bottom: 0; }
section > .wrap { padding-top: clamp(1.8rem, 4vw, 3rem); padding-bottom: clamp(1.8rem, 4vw, 3rem); }
.hero + .specs + section > .wrap { padding-top: clamp(2rem, 4.5vw, 3.4rem); }

/* ruled index of entries — replaces cards */
.index { border-top: 1px solid var(--rule); }
.item {
  display: grid; gap: .3rem 1.6rem; grid-template-columns: 1fr;
  padding: 1rem 0; border-bottom: 1px solid var(--rule); color: inherit;
  text-decoration: none;
}
@media (min-width: 56rem) { .item { grid-template-columns: 4fr 8fr; align-items: baseline; } }
a.item:hover { text-decoration: none; background: var(--paper-card); }
a.item:hover .item-t { color: var(--annot); }
.item-k { font-family: var(--sans); font-size: 1rem; color: var(--ink-3); }
.item-t { font-weight: 700; margin: 0 0 .15rem; line-height: 1.25; }
.item-d { font-size: .97rem; color: var(--ink-2); margin: 0; max-width: 60ch; line-height: 1.55; }
.item.soon .item-t, .item.soon .item-d { color: var(--ink-3); }

/* section rules on the landing page only */
section { border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: none; }

/* ══ MARGIN RULE ════════════════════════════════════════════════════════════
   Replaced the coil binding on 2026-08-19. That was a tiled SVG of a wire
   spiral - a five-stop metallic gradient with highlights, radial-gradient
   punch holes and a drop-shadow gutter - which is the mid-2000s habit of
   simulating the OBJECT rather than borrowing its LANGUAGE, and it had dated
   badly against the flat drawing everywhere else on the page.

   This is what ruled paper actually gives you: the margin line. Two hairlines
   in the red pencil, the way a school exercise book prints them. No image, no
   gradients, no tiling, nothing to load, and it reads as a notebook instantly
   at any size.

   Still a FIXED strip so it holds while the page scrolls, still padded rather
   than overlapping so nothing hides behind it, and still pointer-events:none
   so it can never intercept a click. `binder.svg` is now unused - kept in the
   repo only so this decision can be reversed. */

body { padding-left: var(--margin-rule); }

:root { --margin-rule: 44px; }

body::before {
  content: "";
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--margin-rule);
  z-index: 30;
  pointer-events: none;
  /* the pair of rules sits at the right-hand edge of the margin, where the
     writing starts - not floating in the middle of the strip */
  border-right: 1px solid rgba(166, 58, 28, .38);
  box-shadow: 2px 0 0 -1px rgba(166, 58, 28, .18);
}

@media (max-width: 56rem) { :root { --margin-rule: 34px; } }
@media (max-width: 34rem) { :root { --margin-rule: 22px; } }

@media print {
  body { padding-left: 0; }
  body::before { display: none; }
}

/* ══ VISITOR TALLY ══════════════════════════════════════════════════════════
   Five-bar gate marks, the way you would actually count something in a margin.
   Strokes are drawn with a deterministic wobble so it reads as hand-scratched
   but does not twitch on every reload. */

.tally {
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px dashed var(--rule);
  max-width: 34rem;
}
/* The count, drawn in the site's own language: hex over binary. Strokes, not
   a font — see tally.js for why the gate marks and the Roman numerals both
   went. Neither number is decoration: an engineer reads 0x3C faster than
   sixty, and the binary is the same fact at a different radix. */
.tally-hex, .tally-bin { display: block; max-width: 100%; height: auto; overflow: visible; }
.tally-hex path { stroke: var(--annot); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tally-bin { margin-top: .45rem; }
.tally-bin path { stroke: var(--ink-3); fill: none; stroke-linecap: round; stroke-linejoin: round; }

.tally-cap {
  font-family: var(--sans); font-size: 1.12rem; color: var(--ink-2);
  margin: .55rem 0 0; line-height: 1.35;
}
.tally-cap b { color: var(--ink); font-weight: 700; font-family: var(--mono); font-size: .92em; }
.tally-cap .sub { display: block; font-size: .92rem; color: var(--ink-3); margin-top: .1rem; }



/* ==========================================================================
   MEMBERSHIP GATE — the "not yet unlocked" state
   --------------------------------------------------------------------------
   Applied by /assets/gate.js once /api/me has answered. Links carrying
   data-gated are left FULLY INTACT in the markup — real <a href> elements, so
   crawlers and readers without JS follow them normally and indexing is
   unaffected. The lock is drawn on afterwards.

   This is a SIGNPOST, not a security boundary. It tells a visitor what needs
   an account before they spend a click. The actual restriction is server-side
   on the resources themselves; nothing here should ever be relied on to keep
   anybody out.

   THREE TREATMENTS, switched by data-gate-style on <html>:

     grey     faded ink, dashed underline          — "unavailable"
     strike   red pencil ruled through the words   — "crossed off"
     both     faded AND ruled through

   The padlock is drawn in all three, so the only thing that varies is how the
   text itself is marked. Compare them live with ?gate=grey / strike / both.

   The strike is a HAND-DRAWN line, not text-decoration: line-through. Two
   overlaid strokes, one faint and offset, give it pencil grain, and it wobbles
   the way a ruled-off line in a notebook does. It is a background image rather
   than a text decoration so screen readers do not announce "strikethrough" —
   the meaning is carried by the title attribute gate.js sets.

   Nothing is hidden and no layout moves between locked and unlocked.
   ========================================================================== */

:root {
  /* hairline padlock, filled with currentColor via a mask */
  --gate-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' d='M3 5.2V3.4a2 2 0 0 1 4 0v1.8'/%3E%3Crect x='1.1' y='5.2' width='7.8' height='6.7' rx='1' fill='%23000'/%3E%3C/svg%3E");

  /* red pencil, ruled through — stretched to the width of whatever it marks */
  --gate-strike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23A63A1C' stroke-linecap='round'%3E%3Cpath d='M2,5.6 C30,4.2 58,6.4 86,5 C114,3.7 142,6.2 170,4.8 C182,4.2 192,5.2 198,4.6' stroke-width='2.9' opacity='.95'/%3E%3Cpath d='M2,5.5 C31,4.4 59,6.4 87,5 C115,3.8 143,6.2 171,4.8 C183,4.3 193,5.2 198,4.6' stroke-width='1.6' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");

  /* How far down the text the strike sits. Lower % = higher up the glyphs.
     Nudge this ONE value if it drifts off the letters — it is the only knob. */
  --gate-strike-y: 51%;
}

/* ── the padlock, drawn in every treatment ─────────────────────────────────── */

.gate-locked::after {
  content: "";
  display: inline-block;
  width: .62em;
  height: .78em;
  margin-left: .34em;
  vertical-align: -.06em;
  opacity: .7;
  background-color: currentColor;
  -webkit-mask: var(--gate-lock) center / contain no-repeat;
          mask: var(--gate-lock) center / contain no-repeat;
}

/* the card links carry the padlock on their title line, not on the card */
.item.gate-locked::after { display: none; }
.item.gate-locked .item-t::after {
  content: "";
  display: inline-block;
  width: .62em; height: .78em;
  margin-left: .34em; vertical-align: -.06em; opacity: .7;
  background-color: currentColor;
  -webkit-mask: var(--gate-lock) center / contain no-repeat;
          mask: var(--gate-lock) center / contain no-repeat;
}

/* ── treatment: grey ───────────────────────────────────────────────────────── */

[data-gate-style~="grey"] .gate-locked {
  color: var(--ink-3);
  text-decoration-color: var(--rule);
  text-decoration-style: dashed;
}

[data-gate-style~="grey"] .gate-locked:hover,
[data-gate-style~="grey"] .gate-locked:focus-visible {
  color: var(--annot);
  text-decoration-color: var(--annot);
}

[data-gate-style~="grey"] .cta.gate-locked,
[data-gate-style~="grey"] .item.gate-locked {
  opacity: .6;
  border-color: var(--rule);
}

[data-gate-style~="grey"] .cta.gate-locked:hover,
[data-gate-style~="grey"] .item.gate-locked:hover {
  opacity: .9;
  border-color: var(--annot);
}

[data-gate-style~="grey"] .item.gate-locked .item-t,
[data-gate-style~="grey"] .item.gate-locked .item-d { color: var(--ink-3); }

/* ── treatment: strike ─────────────────────────────────────────────────────── */
/* Ruled through where the words are. On a card that is the title line only —
   a line through an entire paragraph reads as deleted, not locked. */

[data-gate-style~="strike"] .gate-locked:not(.item),
[data-gate-style~="strike"] .item.gate-locked .item-t {
  background-image: var(--gate-strike);
  background-repeat: no-repeat;
  background-position: center var(--gate-strike-y);
  background-size: 100% .5em;
}

/* the strike replaces the underline rather than sitting under one */
[data-gate-style~="strike"] .gate-locked { text-decoration: none; }

[data-gate-style~="strike"] .gate-locked:hover,
[data-gate-style~="strike"] .gate-locked:focus-visible { color: var(--annot); }

/* the .cta already carries a 2px annotation-red underline; softened while
   locked so the strike is the thing that reads, not the border */
[data-gate-style~="strike"] .cta.gate-locked { border-bottom-color: var(--rule); }
[data-gate-style~="strike"] .cta.gate-locked:hover { border-bottom-color: var(--annot); }

/* ── shared: the signed-in name ────────────────────────────────────────────── */

.gate-who {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--verified);
  letter-spacing: .02em;
}

/* Sign out sits next to the member name, quieter than it. Added by gate.js
   only when somebody is actually signed in. */
.gate-signout {
  font-family: var(--sans);
  color: var(--ink-3);
  cursor: pointer;
}

.gate-signout:hover { color: var(--annot); }