/* ═══════════════════════════════════════════════════════════════════════════
   THE SHELL — Friends of the Rappahannock County Library, round 3
   Imported after tokens.css by every page in site/. Declares NO tokens.

   What round 2 established and this file keeps:
     · structure is whitespace and a single hairline. No cards, no pills,
       no borders, no shadows, no second accent, no tinted panels.
     · a photograph is a PLATE with a caption beneath. Never full-bleed,
       never behind type.
     · hit areas are geometry. A control gets its 44/52px from padding, not
       from looking like a button.

   What round 3 adds: forms — built to the same rules.
   ═══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--t-body);line-height:1.62;
  font-variation-settings:'opsz' 16,'wght' 450;font-synthesis:none}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.008em}
p{margin:0 0 1.05em}
img{max-width:100%;height:auto;display:block}
a{color:var(--bindery);text-underline-offset:5px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--bindery);outline-offset:3px}

.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:14px 18px;background:var(--bindery);color:var(--paper)}

/* ── masthead ─────────────────────────────────────────────────────────────
   No utility bar, no sticky header, no hours strip. The first thing on the
   page is the institution's name. (RED_LINES §3d/§3e.)                    */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;padding-top:26px;padding-bottom:22px;flex-wrap:nowrap}
.lockup{display:flex;align-items:flex-start;gap:15px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.lockup img{width:var(--mark-w);margin-top:3px}
.wordmark{font-variation-settings:'opsz' 28,'wght' 400;font-size:var(--wm-size);line-height:var(--wm-lh);
  white-space:nowrap;display:block}
.wordmark span{display:block}
.wm-rule{display:block;width:var(--wm-rule-w);height:1px;background:var(--bindery);margin-top:12px}
.menu{flex:0 1 auto;display:none}
nav li{white-space:nowrap}
nav ul{list-style:none;display:flex;gap:24px;margin:0;padding:0;flex-wrap:nowrap;justify-content:flex-end}
/* Links are styled as links everywhere, navigation included. */
nav a{font-variant:small-caps;letter-spacing:var(--tr-nav);font-size:var(--t-nav);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
  display:inline-flex;align-items:center;min-height:var(--tap)}
nav a:hover{text-decoration-thickness:2px}
nav a[aria-current="page"]{color:var(--ink);text-decoration-color:var(--rule)}

/* ── sections ─────────────────────────────────────────────────────────────
   padding-block, NOT the padding shorthand: .sec and .hero share their
   element with .wrap, and a shorthand here zeroes .wrap's gutter — which at
   390px puts every section flush against the screen edge.                 */
section{border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.sec{padding-block:56px 64px}
h2{font-variation-settings:'opsz' 36,'wght' 400;font-size:var(--t-h2);line-height:1.2;margin:0 0 20px}
h3{font-variation-settings:'opsz' 32,'wght' 400;font-size:var(--t-h3);line-height:1.22;margin:0 0 10px}
.body{max-width:64ch}
.lede{font-size:var(--t-lede);line-height:1.55;max-width:58ch}
.label{font-variant:small-caps;letter-spacing:var(--tr-label);font-size:var(--t-label);
  color:var(--slate);margin:0 0 8px;display:block}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{padding-block:70px 66px}
.hero h1{font-variation-settings:'opsz' 60,'wght' 400;font-size:clamp(30px,4.4vw,42px);
  line-height:1.16;max-width:26ch;margin:0}
.page-h1{font-variation-settings:'opsz' 60,'wght' 400;font-size:clamp(30px,4.4vw,42px);
  line-height:1.16;margin:0 0 22px}

/* ── actions ──────────────────────────────────────────────────────────── */
.actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:30px}
.act{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-act);padding:0 26px;
  box-shadow:inset 0 0 0 1px var(--bindery);color:var(--bindery);text-decoration:none;
  font-variant:small-caps;letter-spacing:var(--tr-nav);font-size:var(--t-action);
  font-family:var(--serif);background:transparent;border:0;cursor:pointer;border-radius:0}
.act:hover{box-shadow:inset 0 0 0 2px var(--bindery)}
.act[disabled]{opacity:.45;cursor:default}
.act-txt{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--t-meta)}

/* ── plate: photography is a plate with a caption beneath ─────────────────
   Never type over an image, never full-bleed, at any breakpoint. Each
   figure sets --w from a plate token; tokens.css collapses every plate
   measure to 100% below 760px so no plate can push a scrollbar.          */
figure{margin:40px 0 0;max-width:min(var(--w,var(--plate-mid)),100%)}
figure.tight{margin-top:26px}
figcaption{font-size:var(--t-cap);color:var(--slate);margin-top:12px;line-height:1.45;max-width:52ch}
.plates{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.plates figure{margin-top:40px}

/* ── operational facts ────────────────────────────────────────────────── */
.facts{border-top:1px solid var(--rule);padding-top:18px}
.facts .lab{font-variant:small-caps;letter-spacing:var(--tr-label);font-size:var(--t-label);color:var(--slate);margin:0 0 4px}
.facts .big{font-variant-numeric:lining-nums tabular-nums;
  font-variation-settings:'opsz' 24,'wght' 500;font-size:var(--t-fact);line-height:1.22;margin:0}
/* Status is a fact, not a signal — it never wears the one chromatic token.
   The two states differ in WORDS; they do not differ in colour. And no
   open/closed state is ever baked: a static page cannot know the day.    */
.facts .sub{font-size:var(--t-meta);margin:8px 0 0}
.facts .addr{font-variant-numeric:lining-nums tabular-nums;font-size:var(--t-meta);line-height:1.55;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--hair)}
.facts .addr a{display:inline-flex;align-items:center;min-height:var(--tap)}
address{font-style:normal;font-variant-numeric:lining-nums tabular-nums;font-size:var(--t-body);line-height:1.6}

/* ── two-column row (prose left, facts right) ─────────────────────────── */
.row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:52px;align-items:start}

/* ═══ FORMS ════════════════════════════════════════════════════════════════
   A field is a baseline rule and the space around it. No box, no fill, no
   radius, no shadow, no second accent. Nothing actionable below 19px.    */
.form{max-width:34rem}
.f{margin:0 0 28px}
.f>label,.legend{display:block;font-variant:small-caps;letter-spacing:var(--tr-label);
  font-size:var(--t-label);color:var(--slate);margin:0 0 4px}
.f .hint{font-size:var(--t-cap);color:var(--slate);margin:6px 0 0;line-height:1.45}
.f input[type=text],.f input[type=email],.f input[type=tel],.f textarea,.f select{
  width:100%;font-family:var(--serif);font-size:var(--t-input);line-height:1.5;color:var(--ink);
  background:transparent;border:0;border-bottom:var(--field-bd) solid var(--rule);
  min-height:var(--field-h);padding:8px 2px;border-radius:0;-webkit-appearance:none;appearance:none}
.f textarea{min-height:140px;resize:vertical}
/* appearance:none strips the native dropdown arrow, and without it a select
   is indistinguishable from a text field — the reader does not know there is
   a list. The chevron is drawn in --ink at the same weight as a hairline. It
   is a control indicator, not ornament. */
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%231B1E1B' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 3px center;background-size:11px 7px;
  padding-right:28px;cursor:pointer}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{
  outline:2px solid var(--bindery);outline-offset:3px}

fieldset{border:0;margin:0 0 28px;padding:0;min-width:0}
legend{padding:0}

/* the amount ladder — figures, not buttons. The selected amount is marked
   by a rule in the accent, the same instrument as the wordmark rule.      */
.amounts{display:flex;flex-wrap:wrap;gap:0 34px;margin:0}
.amt{position:relative;display:inline-flex}
.amt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.amt span{display:inline-flex;align-items:center;min-height:var(--tap-act);
  font-variant-numeric:lining-nums tabular-nums;
  font-variation-settings:'opsz' 24,'wght' 500;font-size:var(--t-fact);
  /* A resting rule is what tells a reader these are choices. Without it the
     ladder reads as four typeset amounts and nobody taps them.
     It is --rule (3.19:1 on paper), NOT --hair. --hair is 1.36:1, which is
     under the 3:1 floor for a UI component boundary (WCAG 1.4.11) — and this
     rule is the control's only resting affordance, so it has to carry it.
     tokens.css already says --hair is never the sole boundary of anything. */
  box-shadow:inset 0 -1px 0 var(--rule);color:var(--ink)}
.amt:hover span{box-shadow:inset 0 -2px 0 var(--rule)}
.amt input:checked+span{color:var(--bindery);box-shadow:inset 0 -2px 0 var(--bindery)}
.amt input:focus-visible+span{outline:2px solid var(--bindery);outline-offset:4px}

/* the fee-cover line. Ships UNCHECKED. See PAYMENTS_COMPLIANCE.md §1.4:
   pre-checking is permitted only with a live total at equal weight and a
   one-tap opt-out guaranteed on a phone — which we cannot guarantee here. */
.check{display:flex;gap:14px;align-items:flex-start;margin:0}
.check input{flex:0 0 auto;width:22px;height:22px;margin:15px 0 0;accent-color:var(--bindery)}
.check label{font-size:var(--t-body);line-height:1.55;padding:8px 0;max-width:52ch}
.total{border-top:1px solid var(--rule);margin-top:26px;padding-top:16px;
  font-variant-numeric:lining-nums tabular-nums;
  font-variation-settings:'opsz' 24,'wght' 500;font-size:var(--t-fact)}

/* honeypot — visually hidden, never focusable, must stay empty */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* quiet notices and fallbacks — a hairline on the left, never a tinted box */
.notice,.fallback{border-left:2px solid var(--rule);padding-left:16px;
  font-size:var(--t-cap);color:var(--slate);line-height:1.5;max-width:56ch;margin:0 0 34px}
.fallback{font-size:var(--t-body);color:var(--ink);margin:26px 0 0}
.fallback a{display:inline-flex;align-items:center;min-height:var(--tap)}
.compliance{font-size:var(--t-legal);color:var(--slate);line-height:1.5;max-width:60ch}
[hidden]{display:none!important}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:54px 0 68px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px}
.fh{font-variant:small-caps;letter-spacing:var(--tr-label);font-size:var(--t-label);color:var(--slate);margin:0 0 14px}
.flist{list-style:none;margin:0;padding:0;font-size:var(--t-meta)}
.flist li{padding:2px 0}
.flist a{display:inline-flex;align-items:center;min-height:var(--tap)}
.legal{font-variant-numeric:lining-nums tabular-nums;font-size:var(--t-legal);color:var(--slate);
  margin:44px 0 0;padding-top:22px;border-top:1px solid var(--hair);max-width:70ch;line-height:1.5}

@media (max-width:900px){
  .row{grid-template-columns:1fr;gap:30px}
  .fgrid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  .sec{padding-block:42px 46px}
  .hero{padding-block:40px 42px}
  .masthead .wrap{align-items:flex-start;padding-bottom:16px;flex-wrap:wrap}
  .wordmark{white-space:normal}
  nav{width:100%}
  .menu{display:block;width:100%}
  .menu summary{list-style:none;cursor:pointer;font-variant:small-caps;letter-spacing:var(--tr-label);
    font-size:var(--t-meta);color:var(--bindery);display:flex;align-items:center;min-height:48px}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{border-bottom:1px solid var(--hair)}
  nav ul{flex-direction:column;gap:0}
  nav li{border-bottom:1px solid var(--hair)}
  nav li:last-child{border-bottom:0}
  nav a{min-height:var(--tap-act);width:100%}
  figure{margin-top:30px}
  .plates{gap:0}
  .amounts{gap:0 26px}
}
/* Desktop: the nav is a row and the disclosure control is not rendered. The
   <details> ships CLOSED so the mobile render is representative without a
   second file to keep in sync; at desktop ::details-content re-reveals it. */
@media (min-width:761px){
  .menu{display:block}
  .menu>summary{display:none}
  .menu::details-content{content-visibility:visible;block-size:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  .menu,.skip,.form,.act{display:none}
  body{background:#fff}
  figure{break-inside:avoid}
}