/* ============================================================
   ENGL 2640 · Children's Literature
   ------------------------------------------------------------
   SHARED LIT BASE, copied from the 1730 site. The component set
   and the two constraints below are meant to be identical across
   1730 / 2640 / 2855.

   ⚠️ PALETTE NOT YET CHOSEN. This file currently inherits 1730's
   green → blue → violet spectrum verbatim. Per the cross-site
   convention each course gets its own accent, so the token block
   under "1. TOKENS" is the thing to change — nothing below it
   should need touching.
   ============================================================ */

/* ============================================================
   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;

  /* set by js/nav.js when a sticky offset is needed; 0 on the real site */
  --top-offset: 0px;
}

@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.       */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding: 18px 34px;
  background: var(--surface);
  position: relative; z-index: 3;
}

.wordmark { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1px; }
.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 */
}
.wordmark-name { font-size: 11.5px; color: var(--ink-2); letter-spacing: .02em; }

.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; }
}

/* ---- 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; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .reading { grid-template-columns: 1fr; gap: 10px; }
  .reading-meta > div { grid-template-columns: 1fr; gap: 1px; }

  /* ---- 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 */
  .bb-item.is-wip { color: var(--ink-2); opacity: .42; cursor: default; }
  .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; }
}