/* =============================================================================
   site.css — Verwolf family site layout pass
   =============================================================================
   Composes verwolf.css's primitives (.vw-shell, .vw-panel, .vw-register, etc.)
   into this site's actual pages. Loaded after verwolf.css in base.html.
   Nothing here introduces new colour — only layout and a few small,
   site-specific components that the house style deliberately left open.
   ========================================================================== */


/* =============================================================================
   SHELL — masthead over one pane, at every screen size
   =============================================================================
   The house style ships a fixed left rail (.vw-shell__rail). We don't use it:
   navigation lives entirely in the slide-out menu below, so the layout is
   identical on phone, tablet and desktop rather than reflowing into a
   different shape at each breakpoint.

   Deliberately NOT inside a media query — this must override verwolf.css's
   rail-based grid at all widths. Equal specificity, later file wins.
   ========================================================================== */
.vw-shell--drawer {
  grid-template-columns: 1fr;
  grid-template-areas:
    "masthead"
    "pane";
}

/* Auth pages (login, register, password reset) centre their single panel. */
.vw-shell--auth .vw-shell__pane {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--vw-s-8);
}
@media (max-width: 60rem) {
  .vw-shell--auth .vw-shell__pane { padding-top: var(--vw-s-6); }
}


/* =============================================================================
   MASTHEAD
   ========================================================================== */

/* Menu button + wordmark, grouped so they stay together on the left. */
.vw-masthead__left {
  display: flex;
  align-items: center;
  gap: var(--vw-s-4);
  min-width: 0;                     /* lets the wordmark truncate, not overflow */
}

.vw-masthead__brand {
  display: flex;
  align-items: baseline;
  gap: var(--vw-s-4);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
/* The full wordmark, set in the display serif at every screen size — the
   masthead reads the same on a phone as on a desktop. */
.vw-masthead__name {
  font-family: var(--vw-face-display);
  font-size: var(--vw-t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}


/* =============================================================================
   HAMBURGER BUTTON
   =============================================================================
   Square and bordered to match .vw-btn. The three bars are one element plus
   its two pseudo-elements, which is what lets them animate into an X when the
   menu is open — the button always shows the action it will perform next.
   ========================================================================== */
.vw-burger {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--vw-ink);
  border-radius: var(--vw-edge);
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.vw-burger:hover { background: var(--vw-vellum-deep); }
.vw-burger:active { transform: translateY(1px); }

.vw-burger__bars {
  position: relative;
  display: block;
  width: 1.15rem;
  height: 2px;
  background: var(--vw-ink);
  transition: background-color 160ms ease;
}
.vw-burger__bars::before,
.vw-burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--vw-ink);
  transition: transform 200ms ease;
}
.vw-burger__bars::before { top: -6px; }
.vw-burger__bars::after  { top: 6px; }

/* Open state: middle bar fades, outer two cross into an X. Driven off
   aria-expanded so the visual state can never disagree with what assistive
   technology is told. */
.vw-burger[aria-expanded="true"] .vw-burger__bars { background: transparent; }
.vw-burger[aria-expanded="true"] .vw-burger__bars::before {
  transform: translateY(6px) rotate(45deg);
}
.vw-burger[aria-expanded="true"] .vw-burger__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* =============================================================================
   MASTHEAD CONTROLS — the pair on the right
   =============================================================================
   Speech bubble then bell: what you'd like to tell the site, then what the site
   is telling you. Both are 2.6rem squares matching the hamburger on the left,
   so the masthead holds three controls of one shape rather than an assortment.

   Kept tight together and treated as one group, so the wordmark between them
   and the burger has the rest of the width to truncate into.
   ========================================================================== */
.vw-masthead__right {
  display: flex;
  align-items: center;
  gap: var(--vw-s-3);
  flex: none;
}

/* The square is shared; only the contents differ. Declared together so the two
   can't drift apart when one is adjusted. */
.vw-say-btn,
.vw-bell {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--vw-ink);
  border-radius: var(--vw-edge);
  background: transparent;
  color: var(--vw-ink);
  text-decoration: none;
  transition: background-color 120ms ease;
}
.vw-say-btn:hover, .vw-bell:hover { background: var(--vw-vellum-deep); }
.vw-say-btn:active, .vw-bell:active { transform: translateY(1px); }

.vw-say-btn svg, .vw-bell svg {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
}


/* =============================================================================
   NOTIFICATION BELL
   =============================================================================
   The square itself is declared above, shared with the speech bubble. What
   follows is only what the bell has and the bubble doesn't: a count.

   The count is a badge notched over the top-right corner rather than a number
   beside the icon: it has to be legible at a glance on a phone without taking
   width the wordmark needs.
   ========================================================================== */
/* Unread: the frame thickens rather than the colour changing. A red-bordered
   control reads as an error on a page where madder already means "removed". */
.vw-bell--unread { border-width: 2px; }

.vw-bell__count {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  color: var(--vw-paper-bright);
  background: var(--vw-madder);
  /* A hairline in the page colour, so the badge stays legible where it
     overlaps the bell's own border. */
  border: 1px solid var(--vw-paper);
  border-radius: 999px;
}


/* -----------------------------------------------------------------------------
   The masthead on a phone
   -----------------------------------------------------------------------------
   THE BAR HAS A HARD MINIMUM WIDTH and it was over it. The wordmark is
   `white-space: nowrap` — correct, a brand should not wrap mid-word — so
   nothing in the bar could shrink, and the whole page scrolled sideways on
   every common phone: 35px over at 390, 65px at 360, 105px at 320.

   Measured, not guessed: with the speech bubble hidden the bar is exactly
   390px. The bell alone (Phase 11) fitted a 390px phone with nothing to spare;
   the speech bubble (Phase 12) is what pushed it over. Neither was ever looked
   at on a phone, and no test can see a horizontal scrollbar.

   So below 30rem everything in the bar gives up a little: the side padding
   halves, the three controls drop from 2.6rem to 2.25rem, the gaps tighten,
   and the wordmark steps down one size. It stays "Verwolf Family" — truncating
   a wordmark to "Verwolf Fam…" would look broken rather than tidy.
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .vw-shell__masthead {
    padding-inline: var(--vw-s-4);
    gap: var(--vw-s-3);
  }

  .vw-masthead__left { gap: var(--vw-s-3); }
  .vw-masthead__name { font-size: var(--vw-t-md); }

  /* The three stay a matched set — shrinking two of them and leaving the
     hamburger at full size is worse than the overflow was. */
  .vw-burger,
  .vw-say-btn,
  .vw-bell {
    width: 2.25rem;
    height: 2.25rem;
  }
  .vw-say-btn svg, .vw-bell svg { width: 1.2rem; height: 1.2rem; }
  .vw-masthead__right { gap: var(--vw-s-2); }

  /* The count badge pulls in with them, so it stays clear of the viewport
     edge rather than being the thing that reintroduces the overflow. */
  .vw-bell__count {
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
  }
}

/* The oldest phones still in use — a 320px iPhone SE. Two more pixels than the
   step above can find, taken from the side padding rather than from the type,
   because a wordmark that shrinks twice starts to look like a mistake. */
@media (max-width: 22rem) {
  .vw-shell__masthead { padding-inline: var(--vw-s-3); }
}


/* -----------------------------------------------------------------------------
   The dashboard greeting on a phone
   -----------------------------------------------------------------------------
   DESIGN-NOTES.md has carried this since 2026-08-01 and nobody could confirm
   it without a phone: "Welcome back, {name}" is a bare <h1>, so it takes the
   display scale's largest step, which is tuned for a full-width page. At 390px
   it broke across THREE lines — "Welcome / back, / Zane" — and pushed
   everything the dashboard is actually for below the fold.

   One step down at phone widths. Two lines is right for a greeting and reads
   as deliberate; three reads as a heading that does not fit.
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .dash__main > h1 {
    font-size: var(--vw-t-xl);
    line-height: var(--vw-lh-tight);
  }
}


/* =============================================================================
   SLIDE-OUT MENU
   ========================================================================== */

/* Dimmed backdrop. Clicking it closes the menu.
   visibility (not just opacity) matters here: a fully transparent element
   still swallows clicks across the entire page, so it has to be genuinely
   hidden while the menu is closed. */
.vw-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(23, 19, 15, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}
.vw-drawer-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.vw-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
  width: min(19rem, 82vw);
  display: flex;
  flex-direction: column;
  background: var(--vw-paper);
  /* The house style's heavy black bar, turned on its side as the menu's edge. */
  border-right: 5px solid var(--vw-rule-black);
  box-shadow: var(--vw-lift-3);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms;
}
.vw-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.vw-drawer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-s-4);
  padding: var(--vw-s-4) var(--vw-s-4) var(--vw-s-4) var(--vw-s-5);
  border-bottom: 5px solid var(--vw-rule-black);
}

.vw-drawer__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vw-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--vw-edge);
  cursor: pointer;
}
.vw-drawer__close:hover {
  background: var(--vw-vellum-deep);
  border-color: var(--vw-rule-strong);
  color: var(--vw-ink);
}

/* The scrolling middle section — long menus scroll here, not the page. */
.vw-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--vw-s-4) 0;
}

.vw-drawer__rule  { margin: var(--vw-s-4) var(--vw-s-4); }
.vw-drawer__group { display: block; padding: 0 var(--vw-s-4) var(--vw-s-2); }

.vw-drawer__foot {
  flex: none;
  padding: var(--vw-s-4) var(--vw-s-5) var(--vw-s-5);
  border-top: 1px solid var(--vw-rule);
  background: var(--vw-vellum-deep);
}
.vw-drawer__user {
  margin: var(--vw-s-1) 0 var(--vw-s-4);
  font-family: var(--vw-face-display);
  font-size: var(--vw-t-md);
  line-height: var(--vw-lh-snug);
}

/* Menu entry for a section that doesn't exist yet. Looks like a .vw-nav item
   but isn't a link — future phases replace each one with the real thing. */
.vw-nav__soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-s-3);
  padding: var(--vw-s-3) var(--vw-s-4);
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--vw-ink-faint);
  opacity: 0.55;
  border-left: 3px solid transparent;
}

/* Stops the page behind the menu from scrolling while it's open. */
body.vw-menu-open { overflow: hidden; }


/* =============================================================================
   SKIP LINK — hidden until focused by keyboard
   ========================================================================== */
.vw-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--vw-s-3) var(--vw-s-4);
  background: var(--vw-delft);
  color: var(--vw-paper-bright);
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none;
}
.vw-skip:focus {
  left: var(--vw-s-4);
  top: var(--vw-s-4);
}


/* =============================================================================
   PAGE COMPONENTS
   ========================================================================== */

/* Dashboard feature tile: a panel that also acts as a link. */
.vw-tile {
  display: flex;
  flex-direction: column;
  gap: var(--vw-s-3);
  min-height: 8.5rem;
  text-decoration: none;
  color: inherit;
}
.vw-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vw-s-3);
}

/* =============================================================================
   DASHBOARD LAYOUT
   =============================================================================
   Two columns: a rail running the length of the left side holding the family
   register (and, for staff, invites), with everything else to its right.
   ========================================================================== */
.dash {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: var(--vw-s-7);
  align-items: start;
}

/* Sticky so it stays beside the content as the page scrolls, which is what
   makes it read as a full-length rail rather than a panel that scrolls away. */
.dash__rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vw-s-5);
  max-height: calc(100dvh - 9rem);
}

/* The register takes whatever height is left and scrolls inside itself, so a
   long member list never stretches the page — the house style's bounded-pane
   rule applied to a sidebar. */
.dash__register {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.dash__register-head { padding: var(--vw-s-5) var(--vw-s-5) var(--vw-s-3); }
.dash__register-head h4 { margin: var(--vw-s-2) 0 0; }
.dash__register-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 0 var(--vw-s-5) var(--vw-s-5);
}
.dash__invites { flex: none; }

/* Phones: the rail is hidden entirely and the register lives in the slide-out
   menu instead (see .vw-drawer__register). Putting a tall sidebar first on a
   narrow screen is exactly the problem that moved navigation into the menu. */
@media (max-width: 60rem) {
  .dash { grid-template-columns: 1fr; gap: var(--vw-s-5); }
  .dash__rail { display: none; }
}

/* -- Truncated register inside the slide-out menu ---------------------------
   The phone-sized counterpart to the dashboard's left rail. Capped in height
   so it can never push the account section out of reach. */
.vw-drawer__register {
  flex: none;
  padding: var(--vw-s-4) var(--vw-s-5) var(--vw-s-3);
  border-top: 1px solid var(--vw-rule);
}
.vw-drawer__register-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-s-3);
  margin-bottom: var(--vw-s-3);
}
.vw-drawer__members {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 11rem;
  overflow-y: auto;
  font-size: var(--vw-t-sm);
}
.vw-drawer__members li {
  padding: var(--vw-s-2) 0;
  border-bottom: 1px solid var(--vw-rule);
  line-height: var(--vw-lh-snug);
}
.vw-drawer__members li:last-child { border-bottom: 0; }


/* =============================================================================
   DRAFT NOTICE
   =============================================================================
   Shown on the dashboard to someone who left a recipe unfinished. Unfinished
   drafts are deleted after a month, so this carries the countdown — a deletion
   somebody was told about every time they signed in is fair; a silent one
   isn't.

   Dark ink-soft ground with paper-bright text: the one place on the site that
   reverses the palette, which is what makes it read as a notice rather than as
   another panel of the page.
   ========================================================================== */

.draft-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--vw-s-4);
  margin-bottom: var(--vw-s-6);
  padding: var(--vw-s-4) var(--vw-s-5);
  background: var(--vw-ink-soft);
  color: var(--vw-paper-bright);
  border-radius: var(--vw-edge);
  border-left: 5px solid var(--vw-ochre);
  box-shadow: var(--vw-lift-2);
}

.draft-notice__body { flex: 1 1 auto; min-width: 0; }

.draft-notice__title {
  font-family: var(--vw-face-label);
  font-size: var(--vw-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin: 0 0 var(--vw-s-2);
  color: var(--vw-ochre-wash);
}

.draft-notice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vw-s-1);
}
.draft-notice__list a {
  color: var(--vw-paper-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.draft-notice__list a:hover { color: var(--vw-ochre-wash); }

.draft-notice__note {
  margin: var(--vw-s-3) 0 0;
  font-size: var(--vw-t-sm);
  /* Lighter than the links but still comfortably readable on the dark ground. */
  color: var(--vw-vellum);
}

.draft-notice__close {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--vw-edge);
  color: var(--vw-vellum);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}
.draft-notice__close:hover {
  border-color: var(--vw-vellum-shade);
  color: var(--vw-paper-bright);
}

@media (max-width: 40rem) {
  .draft-notice { padding: var(--vw-s-4); }
}


/* =============================================================================
   TIME ZONE — the notice, the menu line, and the preferences page
   =============================================================================
   Everyone starts on the family's usual zone without being asked, so the site
   says so in two quiet places: once on the dashboard until they answer, and
   permanently at the foot of the slide-out menu. Neither is a banner — this is
   information, not a warning, and it shouldn't compete with the page.
   ========================================================================== */

.tz-note {
  margin: 0 0 var(--vw-s-5);
  padding: var(--vw-s-3) var(--vw-s-4);
  background: var(--vw-delft-wash);
  border-left: 4px solid var(--vw-delft);
  border-radius: var(--vw-edge);
  font-size: var(--vw-t-sm);
  color: var(--vw-ink-soft);
}
.tz-note strong { color: var(--vw-ink); }
.tz-note a { color: var(--vw-delft-deep); }

/* The line under "Signed in as", present on every page. */
.vw-drawer__prefs {
  margin: var(--vw-s-1) 0 var(--vw-s-3);
  color: var(--vw-ink-faint);
}
.vw-drawer__prefs a { color: var(--vw-ink-soft); }
.vw-drawer__prefs a:hover { color: var(--vw-ink); }

/* ---- The preferences page --------------------------------------------------
   Deliberately small. One setting, plenty of air around it, and an explanation
   underneath — because "your time zone" sounds like it might move the event,
   and it doesn't. */
.prefs {
  max-width: 34rem;              /* --vw-measure: this page is mostly prose */
  margin-inline: auto;
}
.prefs__head { margin-bottom: var(--vw-s-6); }
.prefs__head .vw-bar-stub { margin: var(--vw-s-3) 0; }

.prefs__panel .vw-field { margin-bottom: var(--vw-s-4); }
.prefs__note {
  margin: 0 0 var(--vw-s-5);
  padding-top: var(--vw-s-4);
  border-top: 1px solid var(--vw-rule);
}
/* -----------------------------------------------------------------------------
   What the bell tells you
   -----------------------------------------------------------------------------
   A checkbox per kind, grouped as notifications/kinds.py groups them. Each row
   is label above, explanation beneath — the explanation is the point, because
   "Reactions to your words" doesn't tell anybody what they'd stop seeing.
   -------------------------------------------------------------------------- */
.prefs__notify {
  margin: 0 0 var(--vw-s-5);
  padding-top: var(--vw-s-4);
  border-top: 1px solid var(--vw-rule);
}
.prefs__notify-lede { margin: var(--vw-s-1) 0 var(--vw-s-4); }

.prefs__group {
  margin: 0 0 var(--vw-s-4);
  padding: 0;
  border: 0;                       /* the legend does the grouping, not a box */
}
.prefs__group:last-child { margin-bottom: 0; }

.prefs__group-name {
  padding: 0;
  margin-bottom: var(--vw-s-2);
  font-family: var(--vw-face-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vw-ink-faint);
}

.prefs__switch {
  display: flex;
  align-items: flex-start;
  gap: var(--vw-s-3);
  padding: var(--vw-s-2) 0;
  cursor: pointer;
}
/* The one kind nobody may switch off reads as settled rather than broken:
   still legible, just not actionable. */
.prefs__switch:has(input:disabled) { cursor: default; opacity: 0.75; }

.prefs__switch input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;              /* aligns the box with the first line */
  accent-color: var(--vw-delft);
}

.prefs__switch-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.prefs__switch-label {
  font-size: var(--vw-t-base);
  line-height: var(--vw-lh-snug);
}
.prefs__switch-help { color: var(--vw-ink-faint); }

.prefs__buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--vw-s-3);
}

@media (max-width: 40rem) {
  .prefs__buttons { flex-direction: column-reverse; }
  .prefs__buttons .vw-btn { width: 100%; }
}


/* =============================================================================
   WHAT'S NEW — the dashboard's lead
   =============================================================================
   The newest few of each thing, always. Not "since your last visit": that rule
   renders an empty panel whenever nothing happened, and an empty front page is
   what this family already walked away from once.

   The accent is carried by a left edge and the label colour, using the house
   hues directly. `.vw-label--verdigris` does not exist — only delft, madder and
   ochre do — so this defines its own label rather than depending on a class
   that isn't there.
   ========================================================================== */
.whatsnew {
  border-left: 3px solid var(--vw-delft);
  padding: 0 0 0 var(--vw-s-4);
  margin: 0 0 var(--vw-s-5);
}
.whatsnew--ochre      { border-left-color: var(--vw-ochre); }
.whatsnew--verdigris  { border-left-color: var(--vw-verdigris); }
.whatsnew--madder     { border-left-color: var(--vw-madder); }

.whatsnew__label { color: var(--vw-delft); margin: 0; }
.whatsnew--ochre     .whatsnew__label { color: var(--vw-ochre-ink); }
.whatsnew--verdigris .whatsnew__label { color: var(--vw-verdigris); }
.whatsnew--madder    .whatsnew__label { color: var(--vw-madder); }

.whatsnew__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vw-s-4);
  margin-bottom: var(--vw-s-3);
}
.whatsnew__more {
  font-family: var(--vw-face-label);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--vw-ink-faint);
  text-decoration: none;
  white-space: nowrap;
}
.whatsnew__more:hover { color: var(--vw-ink); text-decoration: underline; }

/* -- The photograph strip ---------------------------------------------------
   Square thumbnails on one row. `minmax(0, 1fr)` rather than `1fr`, because a
   grid track's default minimum is its content and an image would refuse to
   shrink below its natural width — the trap this project has hit three times. */
.whatsnew__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--vw-s-2);
}
.whatsnew__strip img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--vw-vellum-shade);
  border: 1px solid var(--vw-vellum-deep);
}
@media (max-width: 40rem) {
  .whatsnew__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -- The worded panels ------------------------------------------------------ */
.whatsnew__list { list-style: none; margin: 0; padding: 0; }
.whatsnew__list li + li { border-top: 1px solid var(--vw-rule); }
.whatsnew__list a {
  display: block;
  padding: var(--vw-s-2) 0;
  text-decoration: none;
  color: inherit;
}
.whatsnew__list a:hover .whatsnew__who { text-decoration: underline; }
.whatsnew__who {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--vw-ink);
}
.whatsnew__what {
  display: block;
  font-size: 0.85rem;
  color: var(--vw-ink-faint);
  margin-top: 0.1rem;
}

/* -- Only when the family has put nothing anywhere at all ------------------- */
.whatsnew__none { padding: var(--vw-s-5); }
.whatsnew__none h3 { margin: 0 0 var(--vw-s-2); }
.whatsnew__none-acts {
  display: flex;
  gap: var(--vw-s-3);
  flex-wrap: wrap;
  margin: var(--vw-s-4) 0 0;
}

/* The greeting is a courtesy, not content. It used to take the display scale's
   largest step and most of the first screen with it. */
/* Specific enough to beat `.dash__main > h1` in the phone media query above,
   which was tuned when this was a display-sized heading. The clamp already
   handles narrow screens, so there is nothing left for that rule to fix. */
.dash__main > h1.dash__greeting {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.15;
  margin: var(--vw-s-2) 0 var(--vw-s-4);
}