/* School News Feed: the teachers' lounge board.
   A cork field in a light oak frame under a chalkboard rail; every word sits on paper, card,
   tape or slate, never on bare cork. */

:root {
  --slate: #3c523a;
  --chalk: #eef0e8;
  --chalk-dim: #c8d2c4;
  --cork: #c49b6a;
  --oak: #d3a978;
  --oak-dark: #9f7446;
  --paper: #fefefc;
  --ink: #1d2126;
  --ink-soft: #484e55;
  --pencil: #676d74;
  --ballpoint: #1f4f8f;
  --ballpoint-visited: #57408a;
  --rule-blue: #aecde6;
  --rule-red: #de6456;
  --pin-red: #cf3a2e;
  --pin-yellow: #efc132;
  --canary: #fbe98f;
  --sky: #d7eaf7;
  --goldenrod: #f4c46a;
  --tape: #1c1d1f;
  --tape-text: #f2f2ec;
  --stamp: #b3302a;
  --shadow-rest: 0 1px 1px rgb(52 30 10 / 0.22), 0 10px 20px -9px rgb(52 30 10 / 0.5);
  --shadow-lift: 0 2px 3px rgb(52 30 10 / 0.18), 0 24px 34px -14px rgb(52 30 10 / 0.55);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --line: 1.6rem;
  --measure: 68ch;
  color-scheme: light;
}

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

html {
  scrollbar-color: var(--oak-dark) #b58c5e;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 400 1.0625rem/1.6 "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  color: var(--ink);
  background: var(--cork) url("/img/cork.svg") 0 0 / 320px;
  caret-color: var(--pin-red);
  font-variant-numeric: lining-nums;
}

::selection { background: var(--canary); color: var(--ink); }

a { color: var(--ballpoint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:visited { color: var(--ballpoint-visited); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.rail :focus-visible { outline-color: var(--chalk); }

img { max-width: 100%; height: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  background: var(--paper); color: var(--ink); padding: 10px 14px; box-shadow: var(--shadow-rest);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 36px); }

/* ---------- The chalkboard rail ---------- */

.rail {
  background: var(--slate) url("/img/slate.svg") 0 0 / 480px;
  color: var(--chalk);
}
.rail-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 32px;
  align-items: end;
  padding-block: clamp(18px, 3vw, 30px) clamp(14px, 2vw, 20px);
}
.wordmark {
  margin: 0;
  font: 700 clamp(2.1rem, 1.35rem + 3vw, 3.6rem)/0.98 "Zilla Slab", Rockwell, serif;
  letter-spacing: -0.012em;
}
.wordmark a { color: var(--chalk); text-decoration: none; }
.chalk { filter: url("#chalk"); }
.tagline {
  margin: 0.45rem 0 0;
  color: var(--chalk-dim);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
}
.rail-side { display: grid; justify-items: end; gap: 10px; }
.next {
  margin: 0;
  color: var(--chalk-dim);
  font-size: 0.95rem;
  text-align: right;
}
.next strong { color: var(--chalk); font-weight: 700; }
.nav { display: flex; gap: 6px 22px; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.nav a {
  position: relative;
  display: inline-block;
  color: var(--chalk);
  font: 600 1.05rem "Zilla Slab", Rockwell, serif;
  text-decoration: none;
  padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--chalk-dim);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 140ms var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transition-duration: 200ms; }

.ledge {
  position: relative;
  height: 16px;
  background: var(--oak) url("/img/oak.svg") 0 0 / 600px 100%;
  box-shadow: 0 7px 12px -5px rgb(52 30 10 / 0.55), inset 0 -2px 0 rgb(90 58 28 / 0.35);
}
.ledge svg { position: absolute; bottom: 11px; left: clamp(24px, 34vw, 480px); width: 118px; height: 26px; }

/* ---------- The board ---------- */

.board { padding: clamp(34px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }

.paper {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-rest);
}
/* Pinned things lift off the board and straighten. Only transform and opacity move: the deeper
   shadow lives on ::after and fades in. Pointer hover animates; keyboard focus lifts instantly. */
.pinned {
  position: relative;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 220ms var(--ease-out);
}
.pinned::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pinned:hover { transform: rotate(0deg) translateY(-3px); }
  .pinned:hover::after { opacity: 1; }
}
.pinned:focus-within { transform: rotate(0deg) translateY(-3px); transition-duration: 0s; }
.pinned:focus-within::after { opacity: 1; transition-duration: 0s; }
.pin {
  position: absolute; top: -13px; left: 50%;
  width: 34px; height: 34px; margin-left: -17px;
  color: var(--pin-red);
  pointer-events: none;
}
.pin.yellow { color: var(--pin-yellow); }
.pin.left { left: 18%; }
.pin.right { left: 82%; }
.record > .pin, .quick > .pin { left: auto; right: 16px; margin-left: 0; }

/* A school sign: slate in an oak frame, for section headings. */
.sign {
  display: inline-block;
  margin: 0 0 clamp(22px, 3vw, 32px);
  padding: 10px 20px 11px;
  background: var(--slate) url("/img/slate.svg") 0 0 / 480px;
  color: var(--chalk);
  border: 7px solid var(--oak);
  border-image: url("/img/oak.svg") 7 stretch;
  box-shadow: var(--shadow-rest);
  transform: rotate(-0.8deg);
}
.sign h2, .sign h1 {
  margin: 0;
  font: 700 clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem)/1.1 "Zilla Slab", Rockwell, serif;
}
.sign p { margin: 4px 0 0; color: var(--chalk-dim); font-size: 0.95rem; }

/* Board sections are spaced; sections inside a report are spaced by their own rules. */
.board .wrap > * + section { margin-top: clamp(52px, 7vw, 88px); }

/* ---------- This week: the pinned report and the flyer ---------- */

.week {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(26px, 3.5vw, 48px);
  align-items: start;
}
.lead {
  --tilt: -0.55deg;
  padding: clamp(30px, 4vw, 54px) clamp(22px, 4vw, 56px) clamp(26px, 3vw, 40px);
}
.stamp {
  position: absolute;
  top: clamp(18px, 2.4vw, 26px);
  right: clamp(16px, 2.4vw, 28px);
  transform: rotate(7deg);
  padding: 7px 11px 6px;
  border: 2.5px solid var(--stamp);
  border-radius: 5px;
  color: var(--stamp);
  font: 800 0.82rem/1.05 "Big Shoulders Text", "Arial Narrow", sans-serif;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  filter: url("#ink");
  opacity: 0.92;
}
.stamp b { display: block; font-size: 1.25rem; letter-spacing: 0.06em; }
.lead-title {
  margin: 0 clamp(88px, 11vw, 124px) 0.65rem 0;
  font: 700 clamp(1.95rem, 1.2rem + 2.6vw, 3.05rem)/1.07 "Zilla Slab", Rockwell, serif;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.lead-title a { color: inherit; text-decoration: none; }
.lead-title a:hover { text-decoration: underline; text-decoration-color: var(--rule-red); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.dek {
  margin: 0 0 1.5rem;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  line-height: 1.5;
}
.lead-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* An index card: white, red top rule, blue lines on the reading rhythm. */
.index, .report > .sec-record, .report > .sec-answers, .quick {
  --head: 2.75rem;
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, transparent var(--head), var(--rule-red) var(--head), var(--rule-red) calc(var(--head) + 2px), transparent calc(var(--head) + 2px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule-blue) calc(var(--line) - 1px), var(--rule-blue) var(--line));
  background-position: 0 0, 0 calc(var(--head) + 2px + 0.35rem);
  background-size: 100% 100%, 100% calc(100% - var(--head) - 2px - 0.35rem);
  background-repeat: no-repeat;
  box-shadow: var(--shadow-rest);
}
.quick { background-image: linear-gradient(to bottom, transparent var(--head), var(--rule-red) var(--head), var(--rule-red) calc(var(--head) + 2px), transparent calc(var(--head) + 2px)); }
.index h3, .index .card-head, .quick .card-head, .report > .sec-record h2, .report > .sec-answers h2 {
  margin: 0;
  padding-top: 0.65rem;
  font: 700 1.08rem/2.1rem "Zilla Slab", Rockwell, serif;
}
.index p, .index li { line-height: var(--line); }

.record {
  grid-column: 1 / -1;
  --tilt: 0.7deg;
  padding: 0 20px 14px;
}
.record p { margin: calc(0.35rem + 2px) 0 0; }

.note {
  position: relative;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-rest);
}
.note.home { background: var(--canary); --tilt: -1.1deg; }
.note.class { background: var(--sky); --tilt: 0.9deg; }
.note h3 {
  margin: 0 0 0.35rem;
  font: 800 0.8rem/1.2 "Big Shoulders Text", "Arial Narrow", sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.note p { margin: 0; font-size: 1rem; line-height: 1.5; }

.lead-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px dashed rgb(29 33 38 / 0.3);
}
.go {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink);
  font: 700 1.15rem "Zilla Slab", Rockwell, serif;
  text-decoration: none;
}
.go:visited { color: var(--ink); }
.go svg { width: 22px; height: 14px; transition: transform 200ms var(--ease-out); }
.go:hover { text-decoration: underline; text-decoration-color: var(--rule-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.go:hover svg { transform: translateX(4px); }
.meta { color: var(--ink-soft); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.first {
  --tilt: -0.55deg;
  padding: clamp(30px, 4vw, 54px) clamp(22px, 4vw, 56px) clamp(26px, 3vw, 40px);
}
.first ol { margin: 0; padding: 0 0 0 1.3rem; }
.first li { margin: 0.2rem 0; }
.first li::marker { font: 700 1rem "Zilla Slab", Rockwell, serif; color: var(--rule-red); }

/* Label-maker tape for topic labels. */
.tapes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tape {
  display: inline-block;
  padding: 6px 9px 5px;
  background: var(--tape);
  color: var(--tape-text);
  font: 800 0.74rem/1 "Big Shoulders Text", "Arial Narrow", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 7%, 100% 0, 99.4% 93%, 0.6% 100%);
  transition: background-color 150ms ease;
}
.tape:visited { color: var(--tape-text); }
.tape:hover { background: #33363a; }

.week-side { display: grid; gap: clamp(34px, 4vw, 48px); align-content: start; }
.quick { --tilt: -1.2deg; position: relative; padding: 0 20px 20px; }
.quick .tapes { margin-top: calc(0.35rem + 10px); }

/* The hallway flyer with tear-off tabs. */
.flyer {
  --tilt: 1.4deg;
  /* The sheet ends at the cut line; each tab below is its own strip, so a torn one shows cork. */
  background: linear-gradient(var(--goldenrod), var(--goldenrod)) 0 0 / 100% calc(100% - 8.8rem) no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgb(52 30 10 / 0.25)) drop-shadow(0 9px 10px rgb(52 30 10 / 0.3));
  padding: clamp(26px, 3vw, 34px) clamp(20px, 2.6vw, 28px) 0;
  scroll-margin-top: 24px;
}
.flyer::after { display: none; }
.flyer h2 {
  margin: 0 0 0.5rem;
  font: 700 clamp(1.45rem, 1.2rem + 0.9vw, 1.8rem)/1.1 "Zilla Slab", Rockwell, serif;
  text-wrap: balance;
}
.flyer p { margin: 0 0 1rem; }
.flyer label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; }
.flyer input[type="email"] {
  width: 100%;
  padding: 8px 2px 6px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.08rem;
}
.flyer input[type="email"]::placeholder { color: #6b4f1a; }
.flyer input[type="email"]:focus-visible { outline: none; border-bottom-width: 3px; background: rgb(255 255 255 / 0.35); }
.btn {
  margin-top: 14px;
  padding: 12px 18px 11px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font: 700 1.02rem "Zilla Slab", Rockwell, serif;
  cursor: pointer;
  box-shadow: 0 2px 4px rgb(29 33 38 / 0.3);
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.btn:hover { background: var(--slate); }
.btn:active { transform: scale(0.97); }
.flyer .said { font-weight: 700; }
.flyer .oops { color: #7d1d17; font-weight: 700; }
.hp { position: absolute; left: -10000px; }
.tabs {
  display: flex;
  margin: 22px calc(-1 * clamp(20px, 2.6vw, 28px)) 0;
  border-top: 2px dashed rgb(29 33 38 / 0.45);
}
.tab {
  flex: 1;
  height: 8.8rem;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px dashed rgb(29 33 38 / 0.35);
  background: var(--goldenrod);
  color: #5b4213;
  writing-mode: vertical-rl;
  font: 800 0.7rem/1 "Big Shoulders Text", "Arial Narrow", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tab:first-child { border-left: 0; }
.tab.torn { background: transparent; color: transparent; border-left-color: transparent; }
.tab.tearing { animation: tear 0.46s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes tear {
  30% { transform: translateY(6px) rotate(-3deg); }
  100% { transform: translateY(46px) rotate(-14deg); opacity: 0; }
}

/* ---------- Topics: rows of index cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr));
  gap: clamp(26px, 3vw, 34px) clamp(18px, 2.4vw, 28px);
  margin: 0; padding: 0; list-style: none;
}
.topic {
  position: relative;
  padding: 0 18px 12px;
  min-height: calc(2.75rem + 2px + 0.35rem + 4 * var(--line));
}
.cards > li:nth-child(4n + 1) .topic { --tilt: -1deg; }
.cards > li:nth-child(4n + 2) .topic { --tilt: 0.6deg; }
.cards > li:nth-child(4n + 3) .topic { --tilt: -0.3deg; }
.cards > li:nth-child(4n) .topic { --tilt: 1.1deg; }
.topic .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.topic .card-head a { color: var(--ink); text-decoration: none; }
.topic .card-head a:hover { text-decoration: underline; text-decoration-color: var(--rule-red); text-underline-offset: 4px; }
.count { color: var(--ink-soft); font: 400 0.85rem "Atkinson Hyperlegible Next", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.topic ul { margin: calc(0.35rem + 2px) 0 0; padding: 0; list-style: none; }
.topic li a {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  color: var(--ink); text-decoration: none; font-size: 0.98rem; line-height: var(--line);
}
.topic li a:hover { color: var(--ballpoint); text-decoration: underline; }
.topic li time { color: var(--ink-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-right: 6px; }
.blank { margin: calc(0.35rem + 2px) 0 0; color: var(--pencil); font-style: italic; }

/* ---------- Earlier reports: a scatter of pinned notices ---------- */

.notices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3.4vw, 40px) clamp(20px, 2.6vw, 30px);
  margin: 0; padding: 0; list-style: none;
}
.notice { padding: 28px 22px 20px; height: 100%; }
.notices > li:nth-child(3n + 1) .notice { --tilt: 0.8deg; }
.notices > li:nth-child(3n + 2) .notice { --tilt: -0.7deg; }
.notices > li:nth-child(3n) .notice { --tilt: 0.3deg; }
.notice time { display: block; color: var(--ink-soft); font-size: 0.88rem; font-variant-numeric: tabular-nums; margin-bottom: 0.25rem; }
.notice h3 { margin: 0 0 0.45rem; font: 700 1.28rem/1.15 "Zilla Slab", Rockwell, serif; text-wrap: balance; }
.notice h3 a { color: var(--ink); text-decoration: none; }
.notice h3 a::after { content: ""; position: absolute; inset: 0; }
.notice h3 a:hover { text-decoration: underline; text-decoration-color: var(--rule-red); text-underline-offset: 4px; }
.notice p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notice .tapes { position: relative; z-index: 1; }

/* A red-pencil check on reports this reader has read. */
.checkmark { display: none; position: absolute; top: 10px; right: 12px; width: 34px; height: 28px; color: var(--pin-red); }
.lead .checkmark { right: auto; left: 16px; top: 16px; }
.is-read > .checkmark, .is-read .checkmark { display: block; }
.topic li.is-read a::after {
  content: ""; display: inline-block; width: 1.05em; height: 0.85em; margin-left: 0.35em;
  background: var(--pin-red);
  -webkit-mask: url("/img/check.svg") center / contain no-repeat; mask: url("/img/check.svg") center / contain no-repeat;
}

/* Pins alternate red and yellow down the board. */
.cards > li:nth-child(even) .topic > .pin,
.notices > li:nth-child(even) .notice > .pin { color: var(--pin-yellow); }

/* ---------- A report: one long typed sheet ---------- */

.sheet {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 66px) clamp(20px, 5vw, 76px) clamp(30px, 4vw, 52px);
}
.sheet h1 {
  margin: 0 0 0.7rem;
  font: 700 clamp(2.05rem, 1.3rem + 2.8vw, 3.3rem)/1.06 "Zilla Slab", Rockwell, serif;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.sheet > header .dek { max-width: none; }
.byline { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.photo {
  margin: 2rem auto 2.2rem;
  max-width: 640px;
  padding: 12px 12px 10px;
  background: #fff;
  box-shadow: var(--shadow-rest);
  transform: rotate(-0.9deg);
}
.photo img { display: block; width: 100%; }
.photo figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 0.85rem; }

.report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; }
.report > * { grid-column: 1 / -1; }
.report p, .report li { max-width: var(--measure); }
.report h2 {
  margin: 2.3rem 0 0.7rem;
  font: 700 clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem)/1.2 "Zilla Slab", Rockwell, serif;
  text-wrap: balance;
  scroll-margin-top: 20px;
}
.report h3 { margin: 1.6rem 0 0.4rem; font: 700 1.2rem/1.25 "Zilla Slab", Rockwell, serif; }
.report blockquote { margin: 1.4rem 0; padding: 0 0 0 1.4rem; font: italic 500 1.2rem/1.45 "Zilla Slab", Rockwell, serif; color: var(--ink-soft); }
.sec-lede > p:first-child { font-size: 1.14rem; }

.report > .sec-record {
  margin: 2rem 0 0.6rem;
  padding: 0 24px 16px;
  transform: rotate(-0.4deg);
}
.report > .sec-record { position: relative; }
.sec-record p { margin: calc(0.35rem + 2px) 0 0; line-height: var(--line); }
.sec-record p + p { margin-top: var(--line); }
.sec-record ul, .sec-record ol { margin: calc(0.35rem + 2px) 0 0; padding-left: 1.2rem; line-height: var(--line); }

.report > .sec-home, .report > .sec-class {
  margin: 1.8rem 0 0.4rem;
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-rest);
}
.report > .sec-home { grid-column: 1; background: var(--canary); transform: rotate(-0.7deg); }
.report > .sec-class { grid-column: 2; background: var(--sky); transform: rotate(0.6deg); }
.sec-home h2, .sec-class h2 {
  margin: 0 0 0.5rem;
  font: 800 0.86rem/1.2 "Big Shoulders Text", "Arial Narrow", sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sec-home p, .sec-class p { font-size: 1rem; line-height: 1.55; }
.sec-home > :last-child, .sec-class > :last-child { margin-bottom: 0; }

.sec-also { margin-top: 2.6rem; padding-top: 0.4rem; border-top: 2px dashed rgb(29 33 38 / 0.3); }
.report > .sec-answers { margin-top: 2.6rem; padding: 0 24px 14px; }
.sec-answers h3 { margin: var(--line) 0 0; font-size: 1.04rem; line-height: var(--line); }
.sec-answers h2 + h3 { margin-top: calc(0.35rem + 2px); }
.sec-answers p { margin: 0; line-height: var(--line); }

.sources { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid rgb(29 33 38 / 0.2); }
.sources h2 { margin: 0 0 0.5rem; font: 700 1.2rem "Zilla Slab", Rockwell, serif; }
.sources ol { margin: 0; padding-left: 1.3rem; font-size: 0.95rem; }
.sources li { margin: 0.25rem 0; }

.page-sign .sign { transform: rotate(-1deg); }

.notice .site-name {
  display: block; margin-top: 0.1rem; color: var(--ink-soft);
  font: 800 0.74rem/1.2 "Big Shoulders Text", "Arial Narrow", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
}
.notice-title { margin: 0 0 0.45rem; font: 700 1.28rem/1.15 "Zilla Slab", Rockwell, serif; text-wrap: balance; }
.notice-title a { color: var(--ink); text-decoration: none; }
.notice-title a::after { content: ""; position: absolute; inset: 0; }
.notice-title a:hover { text-decoration: underline; text-decoration-color: var(--rule-red); text-underline-offset: 4px; }
.empty-topic { max-width: 760px; margin: 0 auto; }
.empty-topic .lead-title { margin: 0 0 0.6rem; }
.all-topics { gap: 10px 12px; }

/* About: a lounge memo. */
.memo h2 { margin: 2rem 0 0.8rem; font: 700 1.35rem "Zilla Slab", Rockwell, serif; }
.memo .tapes { margin-bottom: 1.6rem; }
.memo-head {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0 0 1.6rem;
  padding: 0 0 1rem;
  border-bottom: 2px solid var(--ink);
}
.memo-head dt { font: 800 0.8rem/1.9 "Big Shoulders Text", "Arial Narrow", sans-serif; letter-spacing: 0.13em; text-transform: uppercase; }
.memo-head dd { margin: 0; line-height: 1.6; }
.memo p { max-width: var(--measure); }

/* ---------- Footer: the oak ledge ---------- */

.foot {
  background: var(--oak) url("/img/oak.svg") 0 0 / 600px 100%;
  color: var(--ink);
  border-top: 1px solid rgb(90 58 28 / 0.45);
  box-shadow: inset 0 10px 14px -10px rgb(52 30 10 / 0.5);
}
.foot-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px;
  padding-block: 22px 26px;
  font-size: 0.95rem;
}
.foot p { margin: 0; }
.foot a, .foot a:visited { color: var(--ink); }
.foot .buzzz a { font-weight: 700; }
.foot form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.foot label { font-weight: 700; }
.foot input[type="email"] {
  min-width: 220px; padding: 8px 10px; border: 1px solid rgb(29 33 38 / 0.5); border-radius: 3px;
  background: rgb(255 255 255 / 0.8); color: var(--ink); font: inherit;
}
.foot .btn { margin: 0; padding: 9px 14px 8px; font-size: 0.95rem; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .week { grid-template-columns: 1fr; }
  .quick { display: none; }
  .flyer { max-width: 560px; }
}
@media (max-width: 680px) {
  .rail-inner { grid-template-columns: 1fr; align-items: start; }
  .rail-side { justify-items: start; }
  .next { text-align: left; }
  .nav { justify-content: flex-start; }
  .lead-body { grid-template-columns: 1fr; }
  .lead-title { margin-right: 0; margin-top: 3.2rem; }
  .report { display: block; }
  .report > .sec-home, .report > .sec-class { transform: none; }
  .ledge svg { display: none; }
  .topic { min-height: 0; padding-bottom: 8px; }
  .cards { gap: 26px; }
}

/* Reduced motion: nothing moves; fades and color changes stay, since they help show state. */
@media (prefers-reduced-motion: reduce) {
  .pinned { transition: none; }
  .pinned:hover, .pinned:focus-within { transform: rotate(var(--tilt, 0deg)); }
  .go svg { transition: none; }
  .go:hover svg { transform: none; }
  .btn { transition: background-color 200ms ease; }
  .btn:active { transform: none; }
  .nav a::after { transform: scaleX(1); opacity: 0; transition: opacity 200ms ease; }
  .nav a:hover::after, .nav a[aria-current="page"]::after { opacity: 1; }
  .tab.tearing { animation: none; }
}

@media print {
  body { background: #fff; }
  .rail, .ledge, .foot, .flyer, .pin { display: none; }
  .paper, .pinned { box-shadow: none; transform: none; }
}