/* ============================================================
   ENGL 1730 · Contemporary American Literature
   Design: "Feed / Spectrum"
   ------------------------------------------------------------
   Two principles this file is built around:

   1. NO HARD RULES. Separation is done with surface-colour value
      shifts, spacing, and gradients — never a high-contrast line.
      A crisp border reads as an interruption and competes with
      the text. If you need to divide something, change the
      surface or add space. Gradient edges are fine: they read as
      movement, and the eye keeps going.

   2. NOTHING THAT ISN'T CLICKABLE MAY LOOK CLICKABLE. The card
      /tag/pin vocabulary is borrowed from where students already
      read, but it must never imply a control that doesn't exist.
      No reaction rows, no vote arrows, no button-shaped chips.
   ============================================================ */

/* ---- 1. TOKENS ------------------------------------------------
   Light is the base; dark redefines only the token values.
   Components always style through tokens, never inside the media
   query, so a new theme is a palette change and nothing else.   */

:root {
  /* surfaces */
  --ground:     #f5f6f9;   /* page behind everything */
  --surface:    #ffffff;   /* cards, top bar, sidebar */
  --surface-2:  #e9ecf3;   /* hover, quiet chips */

  /* text */
  --ink:        #10131c;
  --ink-2:      #4e5468;   /* secondary — still AAA on --ground */

  /* accents: green → blue → violet, spectrum order */
  --accent:     #05563a;   /* green  — links, current nav */
  --accent-2:   #5c25b0;   /* violet — tags, lens numerals */
  --accent-3:   #1a49a8;   /* blue   — notes, callouts */
  --grad: linear-gradient(96deg, #0a7a53 0%, #1f5fd0 52%, #6d2ec4 100%);

  --rule:       #dbdfe9;   /* only ever used faded or as a wash edge */
  --wash:       #ebe9f7;   /* tinted fill for notes / current nav */
  --on-accent:  #ffffff;

  /* lift: replaces borders on cards */
  --lift: 0 1px 2px rgba(20, 16, 45, .055), 0 12px 30px rgba(20, 16, 45, .05);

  --radius: 14px;

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body:    "Instrument Sans", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Height of the sticky top bar, measured and written by js/nav.js.
     The sidebar sticks below it and anchor jumps clear it. Measured
     rather than hard-coded because the bar's height moves with the
     display font, and it wraps at narrow widths without JS. The 56px
     fallback is close enough that a no-JS page still looks right. */
  --top-offset: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #090d13;
    --surface:   #111722;
    --surface-2: #18202d;
    --ink:       #eef1f6;
    --ink-2:     #a3abbd;
    --accent:    #4fd6a0;
    --accent-2:  #b08cff;
    --accent-3:  #7aa8ff;
    --grad: linear-gradient(96deg, #4fd6a0 0%, #7aa8ff 52%, #b08cff 100%);
    --rule:      #212a38;
    --wash:      #17203a;
    --on-accent: #090d13;
    --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .22);
  }
}

/* explicit override must beat the media query in both directions */
:root[data-theme="dark"] {
  --ground:    #090d13;
  --surface:   #111722;
  --surface-2: #18202d;
  --ink:       #eef1f6;
  --ink-2:     #a3abbd;
  --accent:    #4fd6a0;
  --accent-2:  #b08cff;
  --accent-3:  #7aa8ff;
  --grad: linear-gradient(96deg, #4fd6a0 0%, #7aa8ff 52%, #b08cff 100%);
  --rule:      #212a38;
  --wash:      #17203a;
  --on-accent: #090d13;
  --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .22);
}

/* ---- 2. BASE -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; font-family: var(--f-body); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- 3. TOP BAR ----------------------------------------------
   Separated from the page by surface value, not a border.

   Sticky at every width. It carries the only navigation on the page
   (and the hamburger on mobile), so scrolling it away means the way
   out of a long page is "scroll all the way back up."

   Kept deliberately shallow — a bar that never leaves has to earn its
   height every screen, not just the first one.

   z-index 45 sits under the drawer scrim (55) so an open drawer still
   dims it, and clears the bottom bar (40), which it never meets anyway.

   Separation from the content sliding under it is the bottom bar's
   shadow, inverted: elevation, not a line.                        */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding: 10px 34px;
  background: var(--surface);
  position: sticky; top: 0; z-index: 45;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07), 0 14px 34px rgba(0, 0, 0, .05);
}

/* Nothing may end up underneath the sticky bar.

   Two ways that happens. Anchor jumps: every unbuilt nav link points at
   #main, so this fires constantly — and it is also what leaves "#main"
   in the URL, making a later refresh open the page already scrolled
   past the header. And keyboard focus: tabbing to a link just below the
   fold scrolls it into view, and "into view" includes the strip the bar
   is sitting on. That second one is WCAG 2.2 SC 2.4.11, Focus Not
   Obscured — which only became a risk when the bar turned sticky.

   scroll-margin-top is what browsers honour for both. */
:target,
#main,
a, button, [tabindex]:not([tabindex="-1"]) {
  scroll-margin-top: calc(var(--top-offset, 0px) + 14px);
}

/* Course code only. The full course name lives in the sidebar card and
   the page title; repeating it here cost the bar a second line, and the
   bar is now on screen the whole time. */
.wordmark { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.wordmark-code {
  font-family: var(--f-display); font-weight: 800; font-size: 19px;
  letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: .09em; /* background-clip:text would shear the last glyph */
}

.topnav { display: flex; gap: 3px; flex-wrap: wrap; }
.topnav a {
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; padding: 8px 14px; min-height: 24px;
  border-radius: 9px;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }
.topnav a[aria-current="page"] { color: var(--accent); font-weight: 700; }

.theme-toggle {
  appearance: none; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; min-height: 32px; border-radius: 9px;
}
.theme-toggle:hover { color: var(--ink); }

/* ---- 4. FRAME + SIDEBAR --------------------------------------- */

.frame { display: grid; grid-template-columns: 282px minmax(0, 1fr); align-items: start; }

.sidenav {
  padding: 26px 22px 90px;
  background: var(--surface);
  position: sticky; top: var(--top-offset, 0px); align-self: start;
  max-height: calc(100vh - var(--top-offset, 0px));
  overflow-y: auto;
}

.sidecard-tile {
  width: 74px; height: 74px; border-radius: 18px; background: var(--grad);
  display: grid; place-items: center; margin: 0 auto 14px;
}
.sidecard-tile span {
  font-family: var(--f-display); font-weight: 800; font-size: 19px;
  color: #fff; letter-spacing: -.03em;
}
.sidecard-title {
  font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.25;
  margin: 0 0 6px; text-align: center; text-wrap: balance;
}
.sidecard-meta {
  font-size: 11.5px; color: var(--ink-2); margin: 0 0 10px;
  text-align: center; line-height: 1.45;
}
.sidecard-stats {
  display: flex; justify-content: center; gap: 8px;
  margin: 0 0 22px; padding-bottom: 22px; position: relative;
}
.sidecard-stats span {
  font-size: 10.5px; color: var(--ink-2);
  background: var(--surface-2); padding: 3px 9px; border-radius: 99px;
}
/* a fade, not a line */
.sidecard-stats::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent);
}

.sidenav-heading {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; margin: 26px 0 7px;
}
.sidenav-heading:first-of-type { margin-top: 0; }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sidenav a {
  display: block; text-decoration: none; color: var(--ink-2);
  font-size: 14px; line-height: 1.35;
  padding: 9px 12px; min-height: 24px; border-radius: 10px;
}
.sidenav a:hover { color: var(--ink); background: var(--surface-2); }
.sidenav a[aria-current="page"] { color: var(--accent); font-weight: 700; background: var(--wash); }

/* ---- 5. CONTENT ----------------------------------------------- */

.content { padding: 44px 60px 130px; max-width: 84ch; }

.eyebrow {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600;
  margin: 0 0 16px; display: flex; align-items: center; gap: 9px;
}
.eyebrow-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--grad); flex: none; }

h1 {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2.7rem, 6.2vw, 4.5rem); line-height: .98;
  margin: 0 0 18px; text-wrap: balance;
}
h1 em {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* padding widens the paint box past the last glyph; the negative margin
     keeps following punctuation where it was */
  padding-right: .09em; margin-right: -.06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.deck {
  font-size: 1.16rem; line-height: 1.48; color: var(--ink-2);
  margin: 0; max-width: 46ch; text-wrap: pretty;
}
.head-rule { height: 4px; width: 116px; background: var(--grad); margin: 26px 0 0; border-radius: 99px; }
.page-head { margin-bottom: 44px; }

h2 {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.026em;
  font-size: 1.6rem; line-height: 1.18; margin: 0 0 16px;
  display: flex; align-items: center; gap: 11px; text-wrap: balance;
}
.h2-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex: none; }
.section-head { margin: 62px 0 12px; }
.section-intro { color: var(--ink-2); margin: 0 0 8px; max-width: 66ch; }

.content p { margin: 0 0 1.15em; max-width: 68ch; }
.lede { font-size: 1.09rem; }
.content em { font-style: italic; }

.closing { margin-top: 52px; padding-top: 30px; color: var(--ink-2); position: relative; }
.closing::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--rule) 24%, transparent 76%);
}

/* ---- 6. CARD -------------------------------------------------- */

.card {
  background: var(--surface); border: 0; box-shadow: var(--lift);
  border-radius: var(--radius); padding: 27px 32px 30px; margin: 0 0 30px;
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad);
}
.card p:last-of-type { margin-bottom: 0; }

/* informational marker — deliberately not shaped like a control */
.card-flag {
  position: absolute; top: 18px; right: 24px;
  font-size: 11px; font-weight: 700; color: var(--accent);
}

/* tags are plain text, the way AO3 renders them — not buttons */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; }
.tag { font-family: var(--f-mono); font-size: 12.5px; color: var(--accent-2); }

/* ---- 7. PULL QUOTE -------------------------------------------- */

.pull {
  margin: 38px 0; padding: 26px 28px; background: var(--wash);
  border-radius: var(--radius); position: relative; overflow: hidden;
}
.pull::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--grad); }
.pull p {
  font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.28;
  margin: 0 0 8px; letter-spacing: -.022em; text-wrap: pretty;
}
.pull cite {
  font-style: normal; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ---- 8. READING LIST ------------------------------------------
   Every text gets identical fields in identical order, whatever
   it is and wherever it came from. That uniformity is the point. */

.readings { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.reading {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 18px;
  background: var(--surface); border: 0; box-shadow: var(--lift);
  border-radius: var(--radius); padding: 27px 26px 24px;
  position: relative; overflow: hidden;
}
.reading::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad);
}
.reading-rail { display: flex; }
.reading-body { min-width: 0; } /* let long titles wrap instead of widening the grid */
.reading-index {
  font-family: var(--f-mono); font-weight: 700; font-size: 15px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.reading-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reading-title {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.024em;
  font-size: 1.24rem; line-height: 1.22; margin: 0 0 3px; text-wrap: balance;
}
.reading-form {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-2);
  padding: 4px 10px; border-radius: 99px; white-space: nowrap; font-weight: 600;
}
.reading-byline { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; }
.reading-meta { margin: 0 0 13px; display: grid; gap: 5px; }
.reading-meta > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.reading-meta dt {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600;
}
.reading-meta dd { margin: 0; font-size: 14.5px; }
.reading-note { font-size: 14.5px; color: var(--ink-2); margin: 0; max-width: 62ch; line-height: 1.55; }

/* online-native texts keep their own byline phrasing */
.reading[data-form="post"] .reading-byline::before,
.reading[data-form="fic"] .reading-byline::before { content: "posted by "; }
.reading[data-form="post"] .reading-title,
.reading[data-form="fic"] .reading-title { font-size: 1.1rem; }

/* ---- 9. NOTE BOX ---------------------------------------------- */

.note {
  margin: 42px 0; padding: 22px 26px; background: var(--wash);
  border-radius: var(--radius); position: relative; overflow: hidden;
}
.note::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--accent-3); }
.note-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-3); font-weight: 700; margin: 0 0 9px;
}
.note p:last-child { margin-bottom: 0; }

/* ---- 10. LENS CARDS -------------------------------------------- */

.lenses { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 14px; margin: 26px 0 8px; }
.lens {
  background: var(--surface); border: 0; box-shadow: var(--lift);
  border-radius: var(--radius); padding: 22px; position: relative; overflow: hidden;
}
.lens::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); }
.lens-num { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent-2); }
.lens h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.018em; margin: 8px 0 8px;
}
.lens p { font-size: 14px; line-height: 1.52; margin: 0; color: var(--ink-2); }

/* ---- 11. RESPONSIVE -------------------------------------------
   Laptop first (that's where students do the work), then tablet,
   then phone.                                                    */

@media (max-width: 1100px) {
  .frame { grid-template-columns: 240px minmax(0, 1fr); }
  .content { padding: 36px 38px 110px; }
}

/* ---- DRAWER CHROME, OFF BY DEFAULT -----------------------------
   js/nav.js builds the hamburger and the drawer's close header into
   the page at EVERY width — it has no way to know the breakpoint, and
   re-inserting them on resize would be worse. So each piece is hidden
   here and switched back on inside the breakpoint, the same way
   .bottombar is further down. Without these two lines the hamburger
   and a stray "In this section / Close" header appear on a laptop,
   where there is no drawer to open or close.
   Any new mobile-only control nav.js injects needs a line here too.
   (The scrim is exempt: it carries the `hidden` attribute, which JS
   toggles. Giving it a display value here would need a matching
   display inside the media query, and that would beat `hidden` and
   leave an invisible full-page layer swallowing every click.)      */

.burger,
.drawer-head { display: none; }

/* ---- MOBILE (≤880px) -------------------------------------------
   Two moves:
     · the five course areas drop to a fixed bottom bar, in thumb reach
     · the section sidebar becomes a left drawer behind a hamburger,
       with a close button that stays put while you scroll
   Both are built by js/nav.js. Everything here is scoped to .has-js
   so that with JavaScript off the sidebar simply stays in the page
   and the top nav keeps working.                                    */

@media (max-width: 880px) {
  .frame { grid-template-columns: 1fr; }
  .sidenav { position: static; max-height: none; padding: 20px 22px 24px; }
  .sidenav ul { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .content { padding: 28px 22px 90px; }
  .reading { grid-template-columns: 1fr; gap: 10px; }
  .reading-meta > div { grid-template-columns: 1fr; gap: 1px; }

  /* sticky and shadowed at every width — see section 3 */
  .topbar { padding: 8px 16px; gap: 10px; }

  /* ---- with JS: top nav moves to the bottom bar ---- */
  .has-js .topnav { display: none; }
  .has-js .bottombar { display: block; }
  /* keep the last of the page clear of the fixed bar */
  .has-js .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* ---- hamburger ---- */
  .has-js .burger {
    order: -1; display: inline-flex; align-items: center; gap: 8px;
    appearance: none; border: 0; cursor: pointer;
    background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 14px; min-height: 44px; border-radius: 11px;
  }
  .has-js .burger:hover { background: var(--wash); }

  /* ---- drawer ---- */
  .has-js .sidenav {
    position: fixed; z-index: 60; inset: 0 auto 0 0;
    width: min(86vw, 360px); max-height: none;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
    border-radius: 0 22px 22px 0;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .28);
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    visibility: hidden;
  }
  .has-js.drawer-open .sidenav { transform: translateX(0); visibility: visible; }
  .has-js .sidecard { display: block; }

  /* sticky close header — reachable however far you scroll */
  .has-js .drawer-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 0 12px; margin-bottom: 6px;
    background: var(--surface);
  }
  .has-js .drawer-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, var(--rule), transparent 82%);
  }
  .has-js .drawer-title {
    font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-2); font-weight: 600;
  }
  .has-js .drawer-close {
    display: inline-flex; align-items: center; gap: 7px;
    appearance: none; border: 0; cursor: pointer;
    background: var(--surface-2); color: var(--ink);
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 14px; min-height: 44px; border-radius: 11px;
  }
  .has-js .drawer-close:hover { background: var(--wash); color: var(--accent); }

  .has-js .drawer-scrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(9, 13, 19, .55);
    opacity: 0; transition: opacity .26s ease;
  }
  .has-js.drawer-open .drawer-scrim { opacity: 1; }

  /* drawer links go back to a vertical list */
  .has-js .sidenav ul { flex-direction: column; gap: 1px; }
  .has-js .sidenav a { padding: 12px 12px; min-height: 44px; }

  body.is-locked { position: fixed; width: 100%; top: calc(-1 * var(--scroll-lock, 0px)); }
}

/* ---- BOTTOM BAR ------------------------------------------------
   Hidden until the mobile breakpoint. Gradient strip on top instead
   of a border — a line there would sit under the text all the way
   down every page.                                                 */

.bottombar { display: none; }

@media (max-width: 880px) {
  .bottombar {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    background: var(--surface);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .07), 0 -14px 34px rgba(0, 0, 0, .05);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottombar::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--grad);
  }
  .bottombar ul {
    list-style: none; margin: 0 auto; padding: 6px 4px 8px;
    max-width: 620px;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  }
  .bb-item {
    display: grid; justify-items: center; gap: 3px;
    padding: 6px 2px; min-height: 52px;
    text-decoration: none; color: var(--ink-2);
    border-radius: 12px; position: relative;
  }
  .bb-ico {
    display: grid; place-items: center; width: 44px; height: 30px;
    border-radius: 99px; position: relative; line-height: 0;
  }
  .bb-label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    text-align: center; line-height: 1.15;
  }
  .bb-item[aria-current="page"] { color: var(--accent); }
  .bb-item[aria-current="page"] .bb-ico::before {
    content: ""; position: absolute; inset: 0; border-radius: 99px;
    background: var(--grad); opacity: .16;
  }
  /* Sections that don't exist yet: visible, clearly not a dead end.
     The whole item used to sit at 42% opacity, which dropped the label
     to 2:1 — unreadable, and it's a label, not a disabled control, so
     it gets no contrast exemption. The fade now applies only to the
     icon, which is decorative and aria-hidden. The word stays at full
     secondary contrast, and "not a link" is still carried by the fact
     that these render as spans rather than anchors. */
  .bb-item.is-wip { color: var(--ink-2); cursor: default; }
  .bb-item.is-wip .bb-ico { opacity: .4; }
  .bb-item:not(.is-wip):hover { color: var(--ink); background: var(--surface-2); }
}

@media (max-width: 580px) {
  body { font-size: 16px; }
  .topnav { gap: 0; }
  .topnav a { padding: 7px 10px; font-size: 12px; }
  .lenses { grid-template-columns: 1fr; }
  .burger-text, .drawer-close-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .has-js .burger, .has-js .drawer-close { padding: 10px; min-width: 44px; justify-content: center; }
  .bb-label { font-size: 9.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}