/* ============================================================================
   lbk.css — THE LEEBENS KIT
   The design language for Bill Leebens' properties:
   leebens.com · audiocynic.com · stiffipedia.com  (+ emmyspeaks.com, see note)

   A SIBLING of the house kit (assets/ttk.css), not a fork of it. Same
   architecture — class-scanned, idempotent, reduced-motion safe, zero deps,
   no build step — different tokens and a deliberately smaller component set.

   ---------------------------------------------------------------------------
   WHY IT IS SMALLER (read this before adding a component)
   ---------------------------------------------------------------------------
   The house kit carries 47 components because the house builds dashboards,
   ledgers, CRMs. Bill's properties are EDITORIAL: a magazine, a wiki, a
   brochure. They need about twenty things, done properly.

   The audience decides the rest. These are audio hobbyists, mostly 50-75.
   They read on tablets and large monitors, they zoom, and a meaningful share
   use reduced-motion. So:

     · body text is 18px, not 16px          · minimum text size is 15px, ever
     · every tap target clears 48px          · the muted tone is 5.15:1 (light)
       — not 44px — because a miss is a       and 7.61:1 (dark), so secondary
       rage-quit for a shaking hand           copy is readable, not decorative
     · labels sit ABOVE fields, always       · links are underlined in body copy,
       visible (floating labels vanish        never colour-only — colour vision
       exactly when a user looks back)        changes with age; so does contrast
     · springs run at half the house speed

   THE PALETTE IS NOT NEW. It is already canon — PREFERENCES.md per-portal
   table: Bill = Fraunces + Atkinson Hyperlegible, forest/sage/mist, written
   down as "senior-friendly … the a11y-first type choice" and reserved to him
   by docs/OWNERSHIP-BOUNDARY.md. This file is the first time that canon was
   built into a full language instead of a colour note.

   Gold is the accent because gold is the metal on every faceplate in the
   audience's living room. It is not decoration — it is the subject's own
   material. Do NOT restyle these surfaces purple (ownership boundary).

   ---------------------------------------------------------------------------
   MEASURED CONTRAST (every pair below was computed, not eyeballed)
   ---------------------------------------------------------------------------
   LIGHT  ink/bg 15.07 · ink-2/bg 8.33 · mute/bg 5.15 · gold/bg 5.54
          paper-on-pine 10.39 · paper-on-gold 5.54
   DARK   ink/bg 15.75 · ink-2/bg 12.50 · mute/bg 7.61 · gold/bg 9.39
          darkink-on-gold 9.39
   AAA (7:1) on almost every text pair; AA (4.5:1) on all of them. The rule for
   future additions: never ship a text pair under 4.5:1, and never use
   --lbk-gold-bright for text (it is 2.86:1 on paper — rules and fills only).

   ---------------------------------------------------------------------------
   ONE KIT PER PAGE. Never load lbk.css and ttk.css on the same document —
   the token names are separate but the resets fight. Audience decides the kit:
   Tomasetti surfaces get ttk-*, Bill's surfaces get lbk-*.
   ========================================================================== */

/* ===========================================================================
   1 · TOKENS
   =========================================================================== */
:root{
  color-scheme: light;

  /* surfaces — the owner's manual: warm paper, never a stark white page */
  --lbk-bg:#F7F4EC;
  --lbk-bg-2:#EFEAE0;
  --lbk-surface:#FFFDF8;
  --lbk-raised:#FFFFFF;

  /* ink — the forest, not black. Black on cream is the amateur tell. */
  --lbk-ink:#16211B;
  --lbk-ink-2:#3A4C42;
  --lbk-mute:#5A6B61;

  --lbk-line:rgba(22,33,27,.14);
  --lbk-line-2:rgba(22,33,27,.28);

  /* the two greens the canon names */
  --lbk-pine:#243F36;
  --lbk-pine-deep:#1A2E28;
  --lbk-sage:#4E6B5C;

  /* gold — the accent. --lbk-gold is the TEXT-SAFE tone (5.54:1 on paper);
     --lbk-gold-bright is the FOIL tone for hairlines and fills only. */
  --lbk-gold:#7A5E1E;
  --lbk-gold-deep:#634C18;
  --lbk-gold-bright:#B08D2A;
  --lbk-accent:var(--lbk-gold);
  --lbk-accent-ink:#FFFDF8;

  --lbk-ok:#2F6B45;
  --lbk-warn:#8A5A12;
  --lbk-err:#9B2C2C;
  --lbk-ok-bg:rgba(47,107,69,.09);
  --lbk-warn-bg:rgba(138,90,18,.10);
  --lbk-err-bg:rgba(155,44,44,.08);

  /* type roles */
  --lbk-display:'Fraunces',Georgia,'Iowan Old Style',serif;
  --lbk-story:'Source Serif 4',Georgia,'Times New Roman',serif;
  --lbk-ui:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* space — 4-based, generous by intent */
  --lbk-s1:4px;  --lbk-s2:8px;  --lbk-s3:12px; --lbk-s4:16px;
  --lbk-s5:24px; --lbk-s6:32px; --lbk-s7:48px; --lbk-s8:64px; --lbk-s9:96px;

  --lbk-r1:3px; --lbk-r2:6px; --lbk-r3:10px; --lbk-r4:16px; --lbk-pill:999px;

  /* elevation — soft, low, paper-like. No glassy drop shadows. */
  --lbk-el1:0 1px 2px rgba(22,33,27,.06);
  --lbk-el2:0 4px 14px rgba(22,33,27,.09);
  --lbk-el3:0 14px 38px rgba(22,33,27,.13);

  /* the tap floor. Every interactive box clears this. */
  --lbk-tap:48px;
  --lbk-measure:64ch;   /* body measure — narrower than the house 68ch:
                           a longer line is harder to track back from */
}

html[data-theme="dark"]{
  color-scheme: dark;

  /* the listening room: lights down, gear lit */
  --lbk-bg:#0E1713;
  --lbk-bg-2:#111C17;
  --lbk-surface:#16221C;
  --lbk-raised:#1E2C25;

  --lbk-ink:#F2EEE4;
  --lbk-ink-2:#CFD8D0;
  --lbk-mute:#9DAB9F;

  --lbk-line:rgba(242,238,228,.14);
  --lbk-line-2:rgba(242,238,228,.30);

  --lbk-pine:#CFE0D6;
  --lbk-pine-deep:#AFC6B8;
  --lbk-sage:#9CC0AB;

  --lbk-gold:#D9B65F;
  --lbk-gold-deep:#B08D2A;
  --lbk-gold-bright:#EFD492;
  --lbk-accent:var(--lbk-gold);
  --lbk-accent-ink:#0E1713;

  --lbk-ok:#7BD99A;  --lbk-warn:#E8C36A;  --lbk-err:#F08C8C;
  --lbk-ok-bg:rgba(123,217,154,.10);
  --lbk-warn-bg:rgba(232,195,106,.10);
  --lbk-err-bg:rgba(240,140,140,.10);

  --lbk-el1:0 1px 2px rgba(0,0,0,.4);
  --lbk-el2:0 4px 16px rgba(0,0,0,.45);
  --lbk-el3:0 16px 44px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    color-scheme: dark;
    --lbk-bg:#0E1713; --lbk-bg-2:#111C17;
    --lbk-surface:#16221C; --lbk-raised:#1E2C25;
    --lbk-ink:#F2EEE4; --lbk-ink-2:#CFD8D0; --lbk-mute:#9DAB9F;
    --lbk-line:rgba(242,238,228,.14); --lbk-line-2:rgba(242,238,228,.30);
    --lbk-pine:#CFE0D6; --lbk-pine-deep:#AFC6B8; --lbk-sage:#9CC0AB;
    --lbk-gold:#D9B65F; --lbk-gold-deep:#B08D2A; --lbk-gold-bright:#EFD492;
    --lbk-accent:var(--lbk-gold); --lbk-accent-ink:#0E1713;
    --lbk-ok:#7BD99A; --lbk-warn:#E8C36A; --lbk-err:#F08C8C;
    --lbk-ok-bg:rgba(123,217,154,.10); --lbk-warn-bg:rgba(232,195,106,.10);
    --lbk-err-bg:rgba(240,140,140,.10);
    --lbk-el1:0 1px 2px rgba(0,0,0,.4);
    --lbk-el2:0 4px 16px rgba(0,0,0,.45);
    --lbk-el3:0 16px 44px rgba(0,0,0,.5);
  }
}

/* ===========================================================================
   2 · BASE
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--lbk-bg);
  scroll-padding-top:var(--lbk-s7);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--lbk-bg);
  color:var(--lbk-ink);
  font:400 1.125rem/1.65 var(--lbk-ui);   /* 18px. This is the senior dial. */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--lbk-gold-bright);color:#16211B}

/* Links in prose are UNDERLINED, not colour-only. An older reader should never
   have to hunt for what is clickable, and colour perception dulls before
   contrast perception does. Chrome-only `text-decoration-skip-ink` stays on. */
a{color:var(--lbk-gold-deep);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--lbk-ink)}

/* One focus ring, everywhere, impossible to miss. 3px, because 2px at a
   normal desk distance on a 4K panel is a hairline. */
:focus-visible{
  outline:3px solid var(--lbk-gold);
  outline-offset:3px;
  border-radius:var(--lbk-r1);
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--lbk-pine);color:#F7F4EC;
  padding:14px 20px;font:600 1rem var(--lbk-ui);
  text-decoration:none;border-radius:0 0 var(--lbk-r2) 0;
}
.skip:focus{left:0;top:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.lbk-wrap{width:min(1100px,calc(100% - 48px));margin:0 auto}
.lbk-wrap-narrow{width:min(720px,calc(100% - 48px));margin:0 auto}

/* ===========================================================================
   3 · TYPE SCALE  (F2 — the rule IS the component)
   =========================================================================== */
.lbk-d1{
  font:600 clamp(2.6rem,5.4vw,4.4rem)/1.02 var(--lbk-display);
  letter-spacing:-.022em;margin:0;text-wrap:balance;
}
.lbk-d2{
  font:600 clamp(2rem,3.6vw,3rem)/1.08 var(--lbk-display);
  letter-spacing:-.018em;margin:0;text-wrap:balance;
}
.lbk-d3{
  font:600 clamp(1.5rem,2.4vw,2rem)/1.18 var(--lbk-display);
  letter-spacing:-.012em;margin:0;text-wrap:balance;
}
.lbk-lede{
  font:400 clamp(1.2rem,1.7vw,1.4rem)/1.62 var(--lbk-story);
  color:var(--lbk-ink-2);margin:0;max-width:56ch;
}
/* Long-form body. Source Serif 4 carries a magazine feature; Atkinson carries
   the interface. That split is the whole type strategy. */
.lbk-prose{
  font:400 1.15rem/1.78 var(--lbk-story);
  max-width:var(--lbk-measure);color:var(--lbk-ink);
}
.lbk-prose p{margin:0 0 1.35em}
.lbk-prose strong{font-weight:600}
.lbk-prose em{font-style:italic}
.lbk-small{font:400 .9375rem/1.6 var(--lbk-ui);color:var(--lbk-ink-2)}  /* 15px floor */
.lbk-meta{
  font:600 .9375rem/1.4 var(--lbk-ui);letter-spacing:.02em;
  color:var(--lbk-mute);text-transform:none;
}
/* The engraved-plate label. Replaces the 10-11px uppercase eyebrow that every
   template ships and nobody over fifty can read. */
.lbk-eyebrow{
  font:700 .8125rem/1 var(--lbk-ui);letter-spacing:.15em;
  text-transform:uppercase;color:var(--lbk-gold-deep);margin:0;
}
html[data-theme="dark"] .lbk-eyebrow{color:var(--lbk-gold)}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .lbk-eyebrow{color:var(--lbk-gold)}
}

/* ===========================================================================
   4 · THE PLATE  — engraved-brass motif
   A hairline gold-bordered box with letterspaced caps. The one structural
   device borrowed from the subject's own world: the model plate riveted to
   the front of every receiver in the audience's house.
   =========================================================================== */
.lbk-plate{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.55em .85em;
  font:700 .8125rem/1 var(--lbk-ui);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--lbk-gold-deep);
  border:1px solid color-mix(in srgb,var(--lbk-gold) 40%,transparent);
  border-radius:var(--lbk-r1);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--lbk-gold) 10%,transparent),transparent 70%),
    var(--lbk-bg-2);
}
.lbk-plate::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:0 0 5px;
  background:var(--lbk-gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--lbk-gold) 22%,transparent);
}
.lbk-plate-l{color:var(--lbk-mute);letter-spacing:.12em;font-weight:600}
html[data-theme="dark"] .lbk-plate{color:var(--lbk-gold);background:linear-gradient(180deg,rgba(217,182,95,.12),transparent 70%),var(--lbk-surface)}

/* hairline gold rule — the recurring divider */
.lbk-rule{height:1px;border:0;margin:var(--lbk-s6) 0;background:var(--lbk-line)}
.lbk-rule-gold{
  height:1px;border:0;margin:var(--lbk-s6) 0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--lbk-gold) 55%,transparent) 12%,
    color-mix(in srgb,var(--lbk-gold) 55%,transparent) 88%,transparent);
}

/* ===========================================================================
   5 · BUTTONS — three sizes, six states, all clearing the tap floor
   =========================================================================== */
.lbk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:var(--lbk-tap);
  padding:0 var(--lbk-s5);
  font:600 1.0625rem/1 var(--lbk-ui);
  color:var(--lbk-ink);
  background:var(--lbk-raised);
  border:1px solid var(--lbk-line-2);
  border-radius:var(--lbk-r2);
  box-shadow:var(--lbk-el1);
  text-decoration:none;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .12s ease,color .18s ease;
}
.lbk-btn:hover{border-color:color-mix(in srgb,var(--lbk-gold) 60%,transparent);color:var(--lbk-ink)}
.lbk-btn:active{transform:translateY(1px);box-shadow:none}
.lbk-btn[disabled],.lbk-btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;box-shadow:none;transform:none
}
/* primary = gold fill. Ink is the surface tone, so it inverts per theme. */
.lbk-btn-gold{
  background:linear-gradient(180deg,var(--lbk-gold-bright),var(--lbk-gold));
  color:var(--lbk-accent-ink);border-color:color-mix(in srgb,var(--lbk-gold-deep) 55%,transparent);
  box-shadow:var(--lbk-el2);
}
html[data-theme="dark"] .lbk-btn-gold{background:linear-gradient(180deg,var(--lbk-gold-bright),var(--lbk-gold))}
.lbk-btn-gold:hover{filter:brightness(1.06);color:var(--lbk-accent-ink);border-color:var(--lbk-gold-deep)}
.lbk-btn-pine{background:var(--lbk-pine);color:#F7F4EC;border-color:var(--lbk-pine-deep)}
.lbk-btn-pine:hover{background:var(--lbk-pine-deep);color:#F7F4EC}
html[data-theme="dark"] .lbk-btn-pine{background:var(--lbk-pine);color:#0E1713;border-color:var(--lbk-pine-deep)}
html[data-theme="dark"] .lbk-btn-pine:hover{background:var(--lbk-pine-deep);color:#0E1713}
.lbk-btn-quiet{background:transparent;border-color:transparent;color:var(--lbk-gold-deep);box-shadow:none;text-decoration:underline}
.lbk-btn-quiet:hover{color:var(--lbk-ink);border-color:transparent}
html[data-theme="dark"] .lbk-btn-quiet{color:var(--lbk-gold)}
html[data-theme="dark"] .lbk-btn-quiet:hover{color:var(--lbk-ink)}
.lbk-btn-lg{min-height:58px;padding:0 var(--lbk-s6);font-size:1.1875rem}
.lbk-btn-sm{min-height:var(--lbk-tap);padding:0 var(--lbk-s4);font-size:1rem}

/* busy state: spinner + dimmed label, no layout shift */
.lbk-btn[aria-busy="true"]{cursor:progress}
.lbk-btn[aria-busy="true"] .lbk-btn-l{opacity:.6}
.lbk-spin{
  width:19px;height:19px;flex:0 0 19px;
  animation:lbk-rot 1.1s linear infinite;
}
.lbk-spin circle{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:40 18;opacity:.9}
@keyframes lbk-rot{to{transform:rotate(360deg)}}

/* ===========================================================================
   6 · FIELDS — label ABOVE the control, always visible
   The floating-label pattern is the house kit's; it is deliberately NOT used
   here. A label that moves away is a label an older reader loses mid-form.
   =========================================================================== */
.lbk-field{display:grid;gap:var(--lbk-s2);margin:0 0 var(--lbk-s5)}
.lbk-field-l{
  font:600 1rem/1.3 var(--lbk-ui);color:var(--lbk-ink);
  display:flex;align-items:baseline;gap:.5em;
}
.lbk-field-l small{font:400 .9375rem/1.3 var(--lbk-ui);color:var(--lbk-mute)}
.lbk-field input,.lbk-field textarea,.lbk-field select{
  width:100%;min-height:var(--lbk-tap);
  padding:var(--lbk-s3) var(--lbk-s4);
  font:400 1.0625rem/1.5 var(--lbk-ui);
  color:var(--lbk-ink);background:var(--lbk-raised);
  border:1px solid var(--lbk-line-2);border-radius:var(--lbk-r2);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.lbk-field textarea{min-height:150px;resize:vertical;line-height:1.6}
.lbk-field input:hover,.lbk-field textarea:hover,.lbk-field select:hover{border-color:color-mix(in srgb,var(--lbk-gold) 45%,transparent)}
.lbk-field input:focus,.lbk-field textarea:focus,.lbk-field select:focus{
  outline:none;border-color:var(--lbk-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lbk-gold) 26%,transparent);
}
.lbk-field input::placeholder,.lbk-field textarea::placeholder{color:var(--lbk-mute);opacity:.85}
.lbk-field-bad input,.lbk-field-bad textarea{border-color:var(--lbk-err)}
.lbk-field-ok input,.lbk-field-ok textarea{border-color:var(--lbk-ok)}
.lbk-hint{font:400 .9375rem/1.5 var(--lbk-ui);color:var(--lbk-mute);margin:0}
.lbk-hint-bad{color:var(--lbk-err);font-weight:600}
.lbk-hint-ok{color:var(--lbk-ok);font-weight:600}

/* checkbox / radio — 24px box, whole row is the target */
.lbk-check{
  display:flex;align-items:flex-start;gap:var(--lbk-s3);
  min-height:var(--lbk-tap);padding:var(--lbk-s2) 0;cursor:pointer;
  font:400 1.0625rem/1.5 var(--lbk-ui);color:var(--lbk-ink);
}
.lbk-check input{
  appearance:none;flex:0 0 24px;width:24px;height:24px;margin:2px 0 0;
  border:2px solid var(--lbk-line-2);border-radius:var(--lbk-r1);
  background:var(--lbk-raised);cursor:pointer;position:relative;
  transition:border-color .16s ease,background .16s ease;
}
.lbk-check input[type="radio"]{border-radius:50%}
.lbk-check input:checked{background:var(--lbk-gold);border-color:var(--lbk-gold)}
.lbk-check input:checked::after{
  content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid var(--lbk-accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);
}
.lbk-check input[type="radio"]:checked::after{
  left:5px;top:5px;width:10px;height:10px;border:0;border-radius:50%;
  background:var(--lbk-accent-ink);transform:none;
}
.lbk-check input:focus-visible{outline:3px solid var(--lbk-gold);outline-offset:3px}

/* ===========================================================================
   7 · THE TUNING BAR  — the signature component
   A slide-rule scale with one gold needle that rides to the active item.
   It is the house kit's sliding indicator (ui-kit.html #c06) rebuilt in the
   subject's own idiom: a tuning dial. Hover aims, click locks, and the needle
   springs between stations at roughly half the house speed — a needle that
   snaps looks like a glitch; a needle that settles looks like a tuner.
   Honest function: it IS the active-page indicator. Nothing here is fake.
   =========================================================================== */
.lbk-tune{
  position:relative;display:flex;align-items:stretch;gap:0;
  border-bottom:1px solid var(--lbk-line);padding-top:14px;
}
/* the tick scale — a repeating hairline, the measured part of a dial */
.lbk-tune-ticks{
  position:absolute;left:0;right:0;bottom:0;height:9px;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    var(--lbk-line-2) 0 1px,transparent 1px 9px);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  opacity:.75;
}
.lbk-tune-i{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;
  min-height:var(--lbk-tap);padding:0 var(--lbk-s5) 13px;
  font:600 1.0625rem/1 var(--lbk-ui);
  color:var(--lbk-ink-2);text-decoration:none;white-space:nowrap;
  background:none;border:0;cursor:pointer;
  transition:color .18s ease;
}
.lbk-tune-i:hover{color:var(--lbk-ink)}
.lbk-tune-i.on{color:var(--lbk-gold-deep)}
html[data-theme="dark"] .lbk-tune-i.on{color:var(--lbk-gold)}
/* the needle: a thin gold bar with a bright head, like a meter pointer */
.lbk-tune-needle{
  position:absolute;bottom:-1px;left:0;z-index:3;
  height:3px;width:0;
  background:linear-gradient(90deg,transparent,var(--lbk-gold) 18%,var(--lbk-gold-bright) 50%,var(--lbk-gold) 82%,transparent);
  border-radius:2px;
  will-change:transform,width;
}
.lbk-tune-needle::after{
  content:"";position:absolute;left:50%;top:-7px;width:9px;height:9px;
  margin-left:-4.5px;border-radius:50%;
  background:var(--lbk-gold-bright);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lbk-gold) 20%,transparent),
             0 0 12px color-mix(in srgb,var(--lbk-gold-bright) 60%,transparent);
}
.lbk-tune-needle.aim{opacity:.6}   /* hover-aim: same needle, cooled down */

/* ===========================================================================
   8 · READING PROGRESS — honest, thin, never a floating gimmick
   =========================================================================== */
.lbk-prog{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:50;
  background:linear-gradient(90deg,var(--lbk-gold-deep),var(--lbk-gold-bright));
  transition:width .12s linear;
}

/* ===========================================================================
   9 · EDITORIAL PIECES
   =========================================================================== */

/* --- story row: the magazine's workhorse. No card, no shadow — a rule and
       an image, because the kit ships no decoration that pretends to be
       structure. ------------------------------------------------------------ */
.lbk-story{
  display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:var(--lbk-s5);align-items:start;
  padding:var(--lbk-s5) 0;border-bottom:1px solid var(--lbk-line);
  text-decoration:none;color:inherit;
  transition:background .2s ease;
}
.lbk-story:hover{background:color-mix(in srgb,var(--lbk-gold) 5%,transparent)}
.lbk-story-img{
  display:block;width:100%;aspect-ratio:11/8;object-fit:cover;
  border-radius:var(--lbk-r2);background:var(--lbk-bg-2);
  border:1px solid var(--lbk-line);
  filter:saturate(.9) contrast(1.04);
}
.lbk-story-body{display:grid;gap:var(--lbk-s2);min-width:0}
.lbk-story-t{
  font:600 clamp(1.3rem,2.1vw,1.7rem)/1.2 var(--lbk-story);
  letter-spacing:-.01em;color:var(--lbk-ink);margin:0;text-wrap:balance;
}
.lbk-story:hover .lbk-story-t{text-decoration:underline;text-decoration-color:var(--lbk-gold);
  text-decoration-thickness:2px;text-underline-offset:4px}
.lbk-story-d{font:400 1.0625rem/1.6 var(--lbk-ui);color:var(--lbk-ink-2);margin:0;max-width:62ch}
.lbk-story-f{display:flex;flex-wrap:wrap;gap:var(--lbk-s2) var(--lbk-s4);align-items:center;margin-top:var(--lbk-s2)}
.lbk-story:first-child{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.lbk-story-first{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.lbk-story-first .lbk-story-img{aspect-ratio:4/3}
.lbk-story-first .lbk-story-t{font-size:clamp(1.8rem,3.4vw,2.6rem);font-family:var(--lbk-display);letter-spacing:-.02em}
@media (max-width:760px){
  .lbk-story,.lbk-story:first-child,.lbk-story-first{grid-template-columns:1fr;gap:var(--lbk-s4)}
  .lbk-story-img{aspect-ratio:16/9}
}

/* --- byline ------------------------------------------------------------- */
.lbk-byline{
  display:flex;align-items:center;gap:var(--lbk-s3);
  font:600 .9375rem/1.4 var(--lbk-ui);color:var(--lbk-mute);
}
.lbk-byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1px solid var(--lbk-line-2);background:var(--lbk-bg-2);flex:0 0 40px}
.lbk-byline b{color:var(--lbk-ink);font-weight:600}
.lbk-byline a{color:var(--lbk-gold-deep)}
html[data-theme="dark"] .lbk-byline a{color:var(--lbk-gold)}

/* --- pull quote: gold rule, serif, generous. Not italic-small-caps cliché. */
.lbk-pull{
  margin:var(--lbk-s7) 0;padding:0 0 0 var(--lbk-s5);
  border-left:3px solid var(--lbk-gold);
  font:500 clamp(1.4rem,2.4vw,1.85rem)/1.42 var(--lbk-story);
  color:var(--lbk-ink);max-width:34ch;
}
.lbk-pull cite{
  display:block;margin-top:var(--lbk-s3);
  font:600 .9375rem/1.5 var(--lbk-ui);font-style:normal;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lbk-mute);
}

/* --- BENCH NOTE: audiocynic's existing signature, promoted to a kit part.
       A plainly-labelled evidence rail that says what a piece can and cannot
       establish. This is the brand's trust surface — it must never be styled
       as a callout box with a lightbulb. ------------------------------------- */
.lbk-note{
  margin:var(--lbk-s6) 0;padding:var(--lbk-s5) 0;
  border-top:2px solid var(--lbk-gold);border-bottom:1px solid var(--lbk-line);
}
.lbk-note-h{
  display:flex;align-items:center;gap:var(--lbk-s3);margin:0 0 var(--lbk-s3);
  font:700 .8125rem/1 var(--lbk-ui);letter-spacing:.15em;text-transform:uppercase;
  color:var(--lbk-gold-deep);
}
html[data-theme="dark"] .lbk-note-h{color:var(--lbk-gold)}
.lbk-note-h::after{content:"";flex:1;height:1px;background:var(--lbk-line)}
.lbk-note p{margin:0 0 .8em;font:400 1.0625rem/1.66 var(--lbk-ui);color:var(--lbk-ink-2);max-width:64ch}
.lbk-note p:last-child{margin-bottom:0}
.lbk-note strong{color:var(--lbk-ink)}

/* --- figure ------------------------------------------------------------- */
.lbk-fig{margin:var(--lbk-s6) 0}
.lbk-fig img{display:block;width:100%;height:auto;border-radius:var(--lbk-r2);
  border:1px solid var(--lbk-line);background:var(--lbk-bg-2);
  filter:saturate(.88) contrast(1.05)}
.lbk-fig figcaption{
  margin-top:var(--lbk-s3);font:400 .9375rem/1.6 var(--lbk-ui);color:var(--lbk-mute);
  padding-left:var(--lbk-s4);border-left:2px solid var(--lbk-line-2);
}
.lbk-fig figcaption b{color:var(--lbk-ink-2);font-weight:600}

/* --- drop cap opener (feature lede only) -------------------------------- */
.lbk-prose .lbk-opener::first-letter{
  float:left;font:600 3.9em/.8 var(--lbk-display);
  color:var(--lbk-gold-deep);padding:.06em .1em 0 0;
}
html[data-theme="dark"] .lbk-prose .lbk-opener::first-letter{color:var(--lbk-gold)}

/* --- section header: plate + title + action ----------------------------- */
.lbk-sechead{
  display:flex;flex-wrap:wrap;gap:var(--lbk-s3) var(--lbk-s5);
  align-items:flex-end;justify-content:space-between;
  margin:var(--lbk-s7) 0 var(--lbk-s5);
}

/* ===========================================================================
   10 · ACCORDION — 58px rows, whole header is the target
   =========================================================================== */
.lbk-acc{border-top:1px solid var(--lbk-line)}
.lbk-acc-i{border-bottom:1px solid var(--lbk-line)}
.lbk-acc-h{
  display:flex;align-items:center;gap:var(--lbk-s4);width:100%;
  min-height:58px;padding:var(--lbk-s4) 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font:600 1.1875rem/1.35 var(--lbk-ui);color:var(--lbk-ink);
  transition:color .18s ease;
}
.lbk-acc-h:hover{color:var(--lbk-gold-deep)}
html[data-theme="dark"] .lbk-acc-h:hover{color:var(--lbk-gold)}
/* a plus that becomes a minus — clearer than a chevron for this audience */
.lbk-acc-m{
  margin-left:auto;flex:0 0 26px;width:26px;height:26px;position:relative;
  border:1px solid var(--lbk-line-2);border-radius:var(--lbk-r1);
}
.lbk-acc-m::before,.lbk-acc-m::after{
  content:"";position:absolute;left:6px;top:12px;width:12px;height:2px;
  background:var(--lbk-gold-deep);transition:transform .22s ease,opacity .22s ease;
}
html[data-theme="dark"] .lbk-acc-m::before,
html[data-theme="dark"] .lbk-acc-m::after{background:var(--lbk-gold)}
.lbk-acc-m::after{transform:rotate(90deg)}
.lbk-acc-h[aria-expanded="true"] .lbk-acc-m::after{transform:rotate(0);opacity:0}
.lbk-acc-b{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s cubic-bezier(.25,.8,.35,1);
}
.lbk-acc-h[aria-expanded="true"] + .lbk-acc-b{grid-template-rows:1fr}
.lbk-acc-in{overflow:hidden}
.lbk-acc-in > *{
  padding-bottom:var(--lbk-s5);max-width:66ch;
  font:400 1.0625rem/1.7 var(--lbk-ui);color:var(--lbk-ink-2);
}
.lbk-acc-in > *:first-child{margin-top:0}
.lbk-acc-in > *:last-child{margin-bottom:var(--lbk-s5)}

/* ===========================================================================
   11 · NOTICES + CHIPS
   =========================================================================== */
.lbk-note-box{
  display:flex;gap:var(--lbk-s3);align-items:flex-start;
  padding:var(--lbk-s4) var(--lbk-s5);border-radius:var(--lbk-r2);
  border:1px solid var(--lbk-line-2);background:var(--lbk-bg-2);
  font:400 1.0625rem/1.6 var(--lbk-ui);color:var(--lbk-ink-2);
}
.lbk-note-box b{color:var(--lbk-ink)}
.lbk-note-box-ok{background:var(--lbk-ok-bg);border-color:color-mix(in srgb,var(--lbk-ok) 40%,transparent)}
.lbk-note-box-warn{background:var(--lbk-warn-bg);border-color:color-mix(in srgb,var(--lbk-warn) 40%,transparent)}
.lbk-note-box-err{background:var(--lbk-err-bg);border-color:color-mix(in srgb,var(--lbk-err) 42%,transparent)}

.lbk-chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.4em .75em;border-radius:var(--lbk-pill);
  border:1px solid var(--lbk-line-2);background:var(--lbk-bg-2);
  font:600 .875rem/1 var(--lbk-ui);color:var(--lbk-ink-2);
}
.lbk-chip-gold{border-color:color-mix(in srgb,var(--lbk-gold) 45%,transparent);color:var(--lbk-gold-deep);
  background:color-mix(in srgb,var(--lbk-gold) 8%,transparent)}
html[data-theme="dark"] .lbk-chip-gold{color:var(--lbk-gold)}
.lbk-dot{width:8px;height:8px;border-radius:50%;background:var(--lbk-ok);flex:0 0 8px}

/* ===========================================================================
   12 · JOURNAL — the tick-marked list divider used across all three sites
   =========================================================================== */
.lbk-journal{display:grid;gap:0;border-top:1px solid var(--lbk-line)}
.lbk-journal-i{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--lbk-s4);align-items:baseline;
  padding:var(--lbk-s4) 0;border-bottom:1px solid var(--lbk-line);
  text-decoration:none;color:inherit;transition:background .2s ease;
}
.lbk-journal-i:hover{background:color-mix(in srgb,var(--lbk-gold) 5%,transparent)}
.lbk-journal-n{
  font:700 .9375rem/1.5 var(--lbk-ui);color:var(--lbk-gold-deep);
  letter-spacing:.06em;min-width:2.4em;
}
html[data-theme="dark"] .lbk-journal-n{color:var(--lbk-gold)}
.lbk-journal-t{font:500 1.15rem/1.45 var(--lbk-story);color:var(--lbk-ink)}
.lbk-journal-d{font:400 .9375rem/1.5 var(--lbk-ui);color:var(--lbk-mute)}

/* ===========================================================================
   13 · THEME SWITCH — labelled, not a mystery icon
   =========================================================================== */
.lbk-theme{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid var(--lbk-line-2);border-radius:var(--lbk-pill);
  padding:3px;background:var(--lbk-bg-2);
}
.lbk-theme-b{
  min-height:38px;padding:0 var(--lbk-s4);
  display:inline-flex;align-items:center;gap:.45em;
  background:none;border:0;border-radius:var(--lbk-pill);cursor:pointer;
  font:600 .875rem/1 var(--lbk-ui);color:var(--lbk-mute);
  transition:background .18s ease,color .18s ease;
}
.lbk-theme-b:hover{color:var(--lbk-ink)}
.lbk-theme-b[aria-pressed="true"]{background:var(--lbk-raised);color:var(--lbk-gold-deep);
  box-shadow:var(--lbk-el1)}
html[data-theme="dark"] .lbk-theme-b[aria-pressed="true"]{color:var(--lbk-gold)}
.lbk-theme-b svg{width:15px;height:15px;flex:0 0 15px}

/* ===========================================================================
   14 · MASTHEAD + FOOTER (shared across the three sites)
   =========================================================================== */
.lbk-masthead{
  display:flex;align-items:center;gap:var(--lbk-s5);flex-wrap:wrap;
  padding:var(--lbk-s4) 0;
}
.lbk-brand{
  display:inline-flex;align-items:center;gap:var(--lbk-s3);
  font:600 1.25rem/1 var(--lbk-display);letter-spacing:-.015em;
  color:var(--lbk-ink);text-decoration:none;
}
.lbk-brand:hover{color:var(--lbk-ink)}
.lbk-brand em{font-style:italic;color:var(--lbk-gold-deep)}
html[data-theme="dark"] .lbk-brand em{color:var(--lbk-gold)}
.lbk-masthead-side{margin-left:auto;display:flex;align-items:center;gap:var(--lbk-s4);flex-wrap:wrap}

.lbk-foot{
  margin-top:var(--lbk-s9);padding:var(--lbk-s7) 0 var(--lbk-s6);
  border-top:1px solid var(--lbk-line);font-size:1rem;color:var(--lbk-ink-2);
}
.lbk-foot-grid{display:flex;flex-wrap:wrap;gap:var(--lbk-s5) var(--lbk-s8);justify-content:space-between}
.lbk-foot a{color:var(--lbk-gold-deep);font-weight:600}
html[data-theme="dark"] .lbk-foot a{color:var(--lbk-gold)}
.lbk-foot-fine{margin-top:var(--lbk-s5);font-size:.9375rem;color:var(--lbk-mute)}
.lbk-foot-brand{font:600 1.1rem var(--lbk-display);color:var(--lbk-ink)}

/* ===========================================================================
   15 · REDUCED MOTION — the whole point is that meaning survives
   Nothing here hides content or removes state; it removes TRAVEL.
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .lbk-tune-needle{transition:none !important}
  .lbk-prog{transition:none}
  .lbk-acc-b{transition:none}
}

/* ===========================================================================
   16 · PRINT — an audio magazine gets printed. It should look like a page.
   =========================================================================== */
@media print{
  :root{--lbk-bg:#fff;--lbk-ink:#000;--lbk-ink-2:#222;--lbk-line:#bbb;--lbk-line-2:#999}
  body{background:#fff;color:#000;font-size:11pt}
  .lbk-tune,.lbk-prog,.lbk-theme,.lbk-foot,.skip{display:none !important}
  .lbk-prose{max-width:none;font-size:11.5pt}
  a{color:#000}
  .lbk-fig,.lbk-pull,.lbk-note{break-inside:avoid}
  .lbk-story{break-inside:avoid;border-bottom:1px solid #ccc}
}