/* Archive & Atlas — THE PLATE
   ---------------------------------------------------------------------------
   A shared display language for the trust surface, built 2026-08-23 after Van
   called the first /developers redesign "meh". It is the archive's own object —
   a mounted plate: crop marks, a catalogue line, one display statement, figures
   set as specimens, ghosted roman plate numbers, and full-bleed bands.

   HOW IT LAYERS. This file is loaded AFTER contribute.css and depends on it for
   the palette tokens (:root), the reset, and everything the pages still need
   that lives only there — .form, .fld, .in, .submit-row, .inq, .sent, .hp,
   .prose, .defs, .link and .ftr. That division is the whole reason this file
   exists rather than moving the pages to give.css: give.css carries the band
   vocabulary but defines NONE of the form classes, so a page with an inquiry
   form would have rendered its form unstyled. Checked before writing a line —
   that is the v348 .lib-shell regression, and it is invisible to php -l and to
   preflight.

   WHAT IT OWNS. Bands, the plate hero, plate-numbered section heads, URL rows,
   code specimens, standards cards, term columns and .lib-foot. It re-declares
   .band and .lib-foot rather than importing them, so a page loading this file
   needs give.css for nothing.

   TOKENS. Every colour is a contribute.css token. Two ink-context tokens do not
   exist there (give.css has them) so they are declared here, with the same
   values, scoped to :root so nothing else shifts:
       --on-ink      white 62%   body text on an ink band
       --on-ink-dim  white 42%   mono labels on an ink band
       --rule-ink    white 16%   hairlines on an ink band

   A NOTE ON --on-ink-dim: it measures 4.04:1 on ink, which is under AA for the
   9px labels it carries. That is the value give.css already uses on
   /library/donate, /library/patron and /digitize, so it is kept for consistency
   rather than quietly diverging on three new pages. Raising it is a house
   decision and belongs to Van, not to this file.
   --------------------------------------------------------------------------- */

:root{
  --on-ink:color-mix(in oklab,white 62%,transparent);
  --on-ink-dim:color-mix(in oklab,white 42%,transparent);
  --rule-ink:color-mix(in oklab,white 16%,transparent);
}

/* ═══ BANDS ══════════════════════════════════════════════════════════════
   Full-bleed inside .lib-shell. Each band carries its own .wrap, so the shell
   must not pad — that padding moves onto .wrap here. */
.plate .wrap{padding:0 2.6rem}
@media(max-width:620px){.plate .wrap{padding:0 1.3rem}}
.band{border-top:1px solid var(--border);padding:3.2rem 0}
@media(max-width:620px){.band{padding:2.3rem 0}}
.band.tint{background:var(--secondary)}
.band.ink{background:var(--ink);color:var(--ivory);border-top-color:var(--ink)}
.band.hero-band{border-top:none;padding-top:0;padding-bottom:0}
.band.tail{padding-bottom:4rem}

/* ═══ THE HERO PLATE ═════════════════════════════════════════════════════ */
.pl-hero{position:relative;padding:4.6rem 0 4rem}
@media(max-width:760px){.pl-hero{padding:3rem 0 2.6rem}}
/* Crop marks — how a plate is trimmed. Decoration only, never in the a11y tree. */
.pl-hero::before,.pl-hero::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;opacity:.5}
.pl-hero::before{top:1.6rem;left:0;border-top:1px solid var(--on-ink-dim);border-left:1px solid var(--on-ink-dim)}
.pl-hero::after{bottom:1.6rem;right:0;border-bottom:1px solid var(--on-ink-dim);border-right:1px solid var(--on-ink-dim)}
.pl-head{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--on-ink-dim);border-bottom:1px solid var(--rule-ink);padding-bottom:.9rem;margin-bottom:2.4rem}
.pl-head .sp{margin-left:auto}
@media(max-width:620px){.pl-head .sp{margin-left:0}}
.pl-display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(2.5rem,7.2vw,5.6rem);line-height:.98;letter-spacing:-.022em;color:var(--ivory);margin:0;max-width:17ch;overflow-wrap:break-word}
.pl-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.05rem,1.8vw,1.42rem);line-height:1.5;color:var(--on-ink);max-width:58ch;margin:1.9rem 0 0}

/* Figures as specimens: enormous tabular numerals hung on hairlines. */
.pl-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3.4rem;border-top:1px solid var(--rule-ink)}
@media(max-width:760px){.pl-figs{grid-template-columns:1fr}}
.pl-figs.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.pl-figs.two{grid-template-columns:1fr}}
.pl-fig{padding:1.5rem 1.6rem 1.3rem 0;border-right:1px solid var(--rule-ink);min-width:0}
.pl-fig:last-child{border-right:none}
@media(max-width:760px){.pl-fig{border-right:none;border-bottom:1px solid var(--rule-ink);padding-right:0}.pl-fig:last-child{border-bottom:none}}
.pl-fig .n{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:4.2rem;line-height:.85;color:var(--ivory);font-variant-numeric:tabular-nums;margin-bottom:.7rem;overflow-wrap:break-word}
.pl-fig .n.word{font-size:2.6rem;line-height:1}
.pl-fig .l{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--on-ink);line-height:1.7}

/* ═══ PLATE-NUMBERED SECTION HEADS ═══════════════════════════════════════
   The numeral sits IN the head row, not absolutely positioned — it can never
   collide with the title or escape the band. */
.pl-sh{display:flex;align-items:flex-start;gap:1.5rem;border-bottom:1px solid var(--ink-30);padding-bottom:1rem;margin-bottom:1.9rem;flex-wrap:wrap}
.band.ink .pl-sh{border-bottom-color:var(--rule-ink)}
.pl-no{flex:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:2.7rem;line-height:.8;color:var(--ink-30);font-variant-numeric:tabular-nums;letter-spacing:-.02em;-webkit-user-select:none;user-select:none}
.band.ink .pl-no{color:color-mix(in oklab,white 30%,transparent)}
.pl-sh .t{flex:1 1 16rem;min-width:0}
.pl-sh h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(1.7rem,3.2vw,2.45rem);line-height:1.02;margin:0 0 .3rem}
.band.ink .pl-sh h2{color:var(--ivory)}
.pl-sh .meta{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-45);font-variant-numeric:tabular-nums}
.band.ink .pl-sh .meta{color:var(--on-ink-dim)}

/* ═══ DEFINITION ROWS ════════════════════════════════════════════════════
   Replaces any fixed-layout table. A table-layout:fixed cell cannot hold a URL
   or a long key without spilling across its neighbour — that was a real defect
   on /developers. A row wraps instead. */
.pl-list{border-top:1px solid var(--ink-30)}
.band.ink .pl-list{border-top-color:var(--rule-ink)}
.pl-row{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:.4rem 2.2rem;padding:.95rem 0;border-bottom:1px solid var(--ink-15);align-items:baseline}
.band.ink .pl-row{border-bottom-color:var(--rule-ink)}
@media(max-width:760px){.pl-row{grid-template-columns:1fr;gap:.3rem}}
.pl-row>*{min-width:0}
.pl-row .u{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink);word-break:break-all;overflow-wrap:anywhere}
.band.ink .pl-row .u{color:var(--ivory)}
.pl-row.k .u{font-size:12px;word-break:normal;letter-spacing:.02em}
.pl-row .u a{color:var(--gold-deep)}
.pl-row .u a:hover{text-decoration:underline;text-underline-offset:2px}
.pl-row .d{font-size:.9rem;color:var(--ink-70)}
.band.ink .pl-row .d{color:var(--on-ink)}

/* ═══ CARDS — ruled columns, never boxes, so a band keeps its air ════════ */
.pl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.2rem}
@media(max-width:860px){.pl-grid{grid-template-columns:1fr;gap:0}}
.pl-card{padding:1.8rem 0;border-top:1px solid var(--ink-15);display:flex;flex-direction:column;min-width:0}
.pl-card:nth-child(-n+2){border-top:1px solid var(--ink-30)}
@media(max-width:860px){.pl-card:nth-child(2){border-top-color:var(--ink-15)}}
.band.ink .pl-card{border-top-color:var(--rule-ink)}
.pl-card .tag{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-70);margin-bottom:.7rem}
.band.ink .pl-card .tag{color:var(--on-ink)}
.pl-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.62rem;line-height:1.08;margin-bottom:.55rem}
.band.ink .pl-card h3{color:var(--ivory)}
.pl-card p{font-size:.92rem;color:var(--ink-70);margin-bottom:0}
.band.ink .pl-card p{color:var(--on-ink)}
.pl-card p+p{margin-top:.6rem}

/* ═══ TERM COLUMNS — a rule per statement ════════════════════════════════ */
.pl-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 3.2rem}
@media(max-width:860px){.pl-terms{grid-template-columns:1fr;gap:1.5rem}}
.pl-term{border-left:2px solid var(--gold);padding:.15rem 0 .15rem 1.3rem;min-width:0}
.pl-term h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.35rem;line-height:1.14;margin-bottom:.4rem}
.band.ink .pl-term h4{color:var(--ivory)}
.pl-term p{font-size:.9rem;color:var(--ink-70);max-width:52ch}
.band.ink .pl-term p{color:var(--on-ink)}
.pl-term a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.band.ink .pl-term a{color:var(--ivory)}

/* ═══ CODE SPECIMEN — a mounted print that breaks the text column ════════ */
.pl-code{border:1px solid var(--ink);background:var(--ink);overflow:hidden;margin:0 0 1.1rem;box-shadow:0 26px 60px -40px color-mix(in oklab,var(--ink) 82%,transparent)}
.band.ink .pl-code{border-color:var(--rule-ink)}
/* Let a specimen break the text column on both sides so it reads as a mounted
   object rather than a quote inside a paragraph. Clamped to the band's own
   padding, so it can never cause a horizontal scroll - checked at 7 widths.
   The .plate .wrap padding is 2.6rem, dropping to 1.3rem under 620px. */
.pl-break{margin-left:-2.6rem;margin-right:-2.6rem}
@media(max-width:620px){.pl-break{margin-left:-1.3rem;margin-right:-1.3rem}}
.pl-code .lbl{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.62rem .7rem .62rem 1.3rem;border-bottom:1px solid var(--rule-ink);font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-ink-dim)}
.pl-code pre{margin:0;padding:1.25rem 1.3rem;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.8;color:var(--ivory);white-space:pre;-webkit-overflow-scrolling:touch}
.pl-code pre::-webkit-scrollbar{height:7px}
.pl-code pre::-webkit-scrollbar-thumb{background:color-mix(in oklab,white 22%,transparent);border-radius:99px}
.pl-copy{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink);background:transparent;border:1px solid var(--rule-ink);border-radius:999px;padding:.32rem .8rem;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s,border-color .14s}
.pl-copy:hover{background:color-mix(in oklab,white 13%,transparent);color:var(--ivory)}
.pl-copy[data-done="1"]{color:oklch(0.86 0.09 158);border-color:oklch(0.62 0.09 158)}

/* ═══ NOTE ═══════════════════════════════════════════════════════════════ */
.pl-note{border-left:3px solid var(--gold-deep);background:var(--secondary);padding:.95rem 1.2rem;font-size:.89rem;color:var(--ink-70);margin-top:1.4rem;max-width:82ch}
.tint .pl-note{background:var(--paper)}
.band.ink .pl-note{background:color-mix(in oklab,white 7%,transparent);border-left-color:var(--gold);color:var(--on-ink)}
.pl-note strong{color:var(--ink)}
.band.ink .pl-note strong{color:var(--ivory)}
.pl-note a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.band.ink .pl-note a{color:var(--ivory)}
.pl-note code,.pl-row code,.pl-card code,.pl-term code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:color-mix(in oklab,var(--ink) 6%,transparent);padding:.08em .34em}
.band.ink .pl-note code,.band.ink .pl-term code,.band.ink .pl-card code{background:color-mix(in oklab,white 13%,transparent);color:var(--ivory)}

/* ═══ INK STAT STRIP — punctuation between bands ═════════════════════════ */
.pl-strip{background:var(--ink);color:var(--ivory);border-top:1px solid var(--ink)}
.pl-strip .in{display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap;padding:1.15rem 2.6rem}
@media(max-width:620px){.pl-strip .in{padding:1.15rem 1.3rem;gap:1.4rem}}
.pl-strip .f{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.pl-strip .f .n{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.pl-strip .f .l{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--on-ink-dim)}
.pl-strip .say{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;color:var(--ivory)}
.pl-strip .sp{margin-left:auto}
@media(max-width:860px){.pl-strip .sp{margin-left:0}}

/* ═══ FORM ON A BAND ═════════════════════════════════════════════════════
   contribute.css styles .form/.fld/.in; .inq adds its own top border and top
   margin, which double up when the form already sits inside a band. Neutralised
   here so the band owns the rhythm. */
.band .inq{margin-top:0;border-top:none;padding:0}

/* ═══ ARCHIVE FOOTER STRIP ═══════════════════════════════════════════════
   contribute.css does NOT define .lib-foot — a page loading only that file
   renders the strip as six unstyled inline links. Declared here so any page on
   this language gets it. */
.lib-foot{padding:12px 28px;background:var(--secondary);border-top:.5px solid var(--ink-15);display:flex;justify-content:center;flex-wrap:wrap;gap:20px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
.lib-foot a{color:inherit}
.lib-foot a:hover{color:var(--gold-deep)}

/* ═══ FORM AT NARROW WIDTHS ═ MOVED ══════════════════════════
   This file used to carry a .plate-scoped copy of the form breakpoint, because
   contribute.css was unassigned and could not be edited. It is assigned to WEB
   SURFACE now, so the fix lives at its source (contribute.css, just under .form)
   and covers every form page rather than only the ones loading this file.
   Deliberately NOT duplicated here: two copies of one rule is how they drift. */

/* ═══ NO DOUBLE RULE UNDER A SECTION HEAD ════════════════════════════════
   MEASURED on every page in this language, 2026-08-23: .pl-sh carries a
   border-bottom, and the first content block after it carried its own
   border-top ~30px lower. Two hairlines of identical weight with nothing but
   whitespace between them - which is what reads as a "double line", even
   though the borders are nowhere near adjacent and an adjacency check finds
   nothing. That wrong check is why this survived two audits.

   The section head's rule IS the boundary. Anything that follows it directly
   does not draw a second one. A block with a FILL is exempt - a filled panel's
   top edge reads as an object, not as a rule. */
.pl-sh + .pl-list{border-top:none}
.pl-sh + .pl-grid > .pl-card:nth-child(-n+2){border-top:none}
.pl-sh + .pl-terms > .pl-term:first-child{border-top:none}

/* A failed send. contribute.css styles .sent as a success (green rule); a failure must
   not wear it. Neutral ink border and a heavier left rule, so it reads as "stop", not as
   a confirmation - the whole point is that the visitor is NOT being told it worked. */
.sent.fail{border-color:var(--ink-45);border-left:3px solid var(--ink);background:var(--secondary);color:var(--ink)}