/* THE BENCH LOG - the theme stylesheet for a persona who files verdicts (theme "bench-log").
   HAND WRITTEN, not compiled: this theme uses semantic class names, so it needs no Tailwind pass and
   no class inventory. It is linked INSTEAD of static/site.css by templates-bench-log/partials/head.html,
   and it loads no font, no script and no third party origin, so the strict CSP in nginx.conf covers it
   with nothing added. Contrast measured with the WCAG relative luminance formula: ink on paper 16.07:1,
   ink2 on paper 8.34:1, the copper link 4.62:1, and the footer inverts to paper on ink.
   Source of record for the design decisions: S1YZ/next24/site-designs/ezra-kane/DESIGN.md.
   Do not add a rule here for a class no template uses; do not use it on another theme. */
:root{
  --paper:#F5F3EE; --panel:#EAE7DF; --ink:#15181B; --ink2:#3F464B; --ink3:#5A6167;
  --rule:#D6D2C8; --no:#8C1D18; --yes:#1F5C3A; --flag:#8A3B12; --box:#DCD8CF;
  --text:"Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,"Liberation Serif",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Liberation Sans",Arial,sans-serif;
  --data:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:19px;line-height:30px}
a{color:var(--flag);text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.label{font-family:var(--data);font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.num{font-family:var(--data);font-variant-numeric:tabular-nums}

/* header */
header{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:5}
.bar{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;padding:14px 0}
.mark{font-family:var(--ui);font-weight:600;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.mark span{display:block;font-family:var(--data);font-size:11px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;font-weight:400}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0}
nav a{font-family:var(--data);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:8px 0;display:inline-block;min-height:24px}
nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--ink)}
nav a:hover{color:var(--ink)}
/* the disclosure sits in the header, visible, static, not a marquee */
.disclose{border-top:1px solid var(--rule);background:var(--panel);font-family:var(--data);font-size:12.5px;line-height:18px;letter-spacing:.04em;color:var(--ink);padding:8px 0}
.disclose b{font-weight:700}

/* hero verdict */
.verdict{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding:40px 0 24px;border-bottom:1px solid var(--rule)}
h1{font-family:var(--ui);font-weight:600;font-size:34px;line-height:40px;margin:8px 0 12px;max-width:26ch}
.meta{font-family:var(--data);font-size:13px;line-height:20px;color:var(--ink2)}
.score{text-align:right;border-left:1px solid var(--rule);padding-left:24px}
.score .big{font-family:var(--data);font-size:64px;line-height:64px;font-weight:500;font-variant-numeric:tabular-nums;display:block}
.score .scale{font-family:var(--data);font-size:12px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}
.stamp{display:inline-block;font-family:var(--data);font-size:13px;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;padding:6px 10px}
.stamp.no{color:var(--no)}
.stamp.yes{color:var(--yes)}
.stamprow{margin:14px 0 0}

/* two column text plus margin notes */
.cols{display:grid;grid-template-columns:minmax(0,68ch) 1fr;gap:48px;padding:32px 0;border-bottom:1px solid var(--rule)}
.cols p{margin:0 0 18px}
aside.notes{font-family:var(--ui);font-size:15px;line-height:24px;color:var(--ink2)}
aside.notes p{border-top:1px solid var(--rule);padding-top:10px;margin:0 0 20px}
aside.notes strong{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:block;color:var(--ink3);font-weight:400;margin-bottom:4px}

/* receipt table */
table{width:100%;border-collapse:collapse;margin:8px 0 0}
caption{text-align:left;font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);padding-bottom:10px}
th,td{font-family:var(--data);font-size:16px;line-height:24px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--panel);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel)}

/* figures */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:32px 0;border-bottom:1px solid var(--rule)}
figure{margin:0}
.box{background:var(--box);border:1px solid var(--rule);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);text-align:center;padding:16px}
figcaption{font-family:var(--data);font-size:14px;line-height:20px;color:var(--ink2);padding-top:10px}
figcaption b{color:var(--ink);font-weight:700}

section{padding:36px 0;border-bottom:1px solid var(--rule)}
h2{font-family:var(--ui);font-weight:600;font-size:24px;line-height:30px;margin:0 0 6px}
h1.pagetitle{font-size:24px;line-height:30px;margin:0 0 6px;max-width:none}
h3{font-family:var(--ui);font-weight:600;font-size:19px;line-height:26px;margin:24px 0 6px}
.lede{max-width:68ch;margin:0 0 18px}
.rowgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--rule);padding:16px;background:var(--panel)}
.card p{margin:6px 0 0;font-size:17px;line-height:26px}
.contact{display:grid;grid-template-columns:minmax(0,60ch) 1fr;gap:48px}
.mail{font-family:var(--data);font-size:18px}

footer{background:var(--ink);color:var(--paper);padding:36px 0 44px}
footer a{color:#E8C87A}
footer .label{color:#9AA3A8}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
footer p{font-family:var(--ui);font-size:16px;line-height:25px;margin:8px 0 0;max-width:46ch}
.fbot{border-top:1px solid #2E3336;margin-top:28px;padding-top:16px;font-family:var(--data);font-size:12px;letter-spacing:.06em;color:#9AA3A8;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}

@media (max-width:1023px){
  .cols,.contact{grid-template-columns:1fr;gap:24px}
  .pair,.rowgrid,.fgrid{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr}
  .score{text-align:left;border-left:0;border-top:1px solid var(--rule);padding:16px 0 0}
  h1{font-size:28px;line-height:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- what the real build needs on top of the prototype -------------------------------------- */
/* plates: a figure is a real picture now, not a grey box */
.plate img{display:block;width:100%;height:auto;background:var(--box);border:1px solid var(--rule)}
.plate .pn{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
/* the archive contact sheet */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;padding:8px 0 0}
.sheet figure{margin:0}
.sheet img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--box)}
.sheet figcaption{font-family:var(--data);font-size:12px;line-height:17px;color:var(--ink2);padding-top:6px}
.sheet .pn{color:var(--ink);font-weight:700}
.kinds{display:flex;flex-wrap:wrap;gap:14px;padding:0 0 12px;margin:0;list-style:none}
.kinds li{font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
/* the clip player: one video element, controls on, poster from the manifest */
.player{border:1px solid var(--rule);background:var(--box)}
.player video{display:block;width:auto;max-width:100%;height:auto;max-height:80vh;margin-inline:auto;background:#000}
.playermeta{font-family:var(--data);font-size:13px;line-height:20px;color:var(--ink2);padding-top:10px}
/* the label a clip carries even when there is no clip yet */
.pending{background:var(--box);border:1px solid var(--rule);aspect-ratio:16/9;max-height:320px;display:flex;align-items:center;justify-content:center;font-family:var(--data);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);text-align:center;padding:16px}
/* the facts ribbon (content.facts): the comp card of a site that has no measurements */
.ribbon{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0;padding:0;list-style:none}
.ribbon li{flex:1 1 180px;padding:12px 16px 14px;border-inline-end:1px solid var(--rule)}
.ribbon li:last-child{border-inline-end:0}
.ribbon .label{display:block;margin-bottom:2px}
.ribbon .v{font-family:var(--data);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums}
/* one shared prose block for the story paragraphs */
.prose p{margin:0 0 18px;max-width:68ch}
.envs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.envs li{font-family:var(--ui);font-size:16px;line-height:24px;color:var(--ink2);border-top:1px solid var(--rule);padding-top:8px}
@media (max-width:1023px){.envs{grid-template-columns:1fr}}

/* the spoken method: a bench note that happens to be audible */
.spoken{border-top:1px solid var(--rule);margin-top:18px;padding-top:14px}
.spoken audio{width:100%;max-width:520px;display:block;margin:8px 0 10px}
.spoken .said{font-family:var(--serif);font-size:19px;line-height:29px;margin:0 0 8px;padding-left:14px;border-left:3px solid var(--rule);color:var(--ink)}
/* SHOW ME ON THE PAGE (admin.html, owner only): a picture place is a figure with id="slot-<slot id>", so the
   link page.html#slot-<id> lands on it and this outline marks it. No script: this page ships script-src 'none'.
   The scroll margin clears the sticky header, which carries the disclosure band. */
[id^="slot-"]{scroll-margin-top:180px}
[id^="slot-"]:target{outline:3px solid var(--flag);outline-offset:6px}