/* Little Collie house style.
 *
 * The tokens below are lifted verbatim from the hand-designed personal site
 * (Dan Cruzat, forgejo shirewood/littlecollie). That site is the reference the
 * Shepherd app's brand tokens were propagated from under T-041, so any drift
 * here drifts the product too. Change a value only deliberately.
 *
 * This file is shared by the three house pages (apex, /contact, /privacy).
 * /kate keeps its own inline stylesheet, byte-faithful to the designer's, and
 * does not link this.
 */

/* Webfonts. The designer's system is set in Newsreader and Inter, and the
   original markup only ever preconnected to Google Fonts without linking the
   stylesheet, so neither family had ever loaded (see README). Since T-114's
   2026-09-07 revision the three house pages self-host the same four WOFF2
   files the Shepherd app serves, so no request leaves this origin for a font
   and the privacy notice has nothing to disclose. /kate is frozen and keeps
   its fallbacks. Paths are relative to this stylesheet. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  --bg: #f0e8dc;
  --bg-elevated: #faf7f3;
  --bg-descended: #d1b896;
  --text: #15110f;
  --text-muted: #6b6259;
  --text-subtle: #86796b;
  --accent: #c66b4f;
  --accent-muted: #d9957d;
  --accent-dark: #b15539;
  --border: #ddd4c8;
  --max-width: 720px;
  --gutter: clamp(1.5rem, 5vw, 3rem);
  --serif: "Newsreader", Georgia, serif;
  --sans-serif: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  overflow-x: hidden;
}

/* `clip`, not `hidden`, on body. The designer's `overflow-x: hidden` made body
   a scroll container with nothing to scroll, and a view() timeline binds to
   the nearest scroll container — so the carousels' "half in view" trigger
   bound to body and never ticked. `clip` clips without creating a scroller,
   and the root's own overflow already propagates to the viewport. */
body {
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
  width: 100%;
}

/* Skip link — the pages have no navigation to skip past, but the header runs to
   most of a screen on mobile and a keyboard user should not have to walk it. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bg-elevated);
  color: var(--text);
  padding: 0.75rem 1rem;
  z-index: 10;
}

.skip:focus {
  left: 0;
}

/* Header */
header {
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
}

header .wrap {
  padding-block: clamp(2.5rem, 8vw, 5rem);
  max-width: calc(var(--max-width) * 1.325);
}

/* The mark and the eyebrow sit on one line above the headline. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.brand .eyebrow {
  margin-bottom: 0;
}

.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
}

.hero-cta {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
}

.hero-fineprint {
  margin-top: 0;
}

/* The call to action, as a button rather than an address. */
.cta-button {
  display: inline-block;
  font-family: var(--sans-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--bg-elevated);
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: 0.375rem;
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--bg-elevated);
}

.cta-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-dark);
  text-transform: uppercase;
  margin-bottom: 2.75rem;
  line-height: 1.8;
}

/* The house name in the eyebrow is the way home. No underline (owner,
   2026-09-07): the site's link idiom is a bottom border, and this one goes
   without it. */
.eyebrow a {
  color: inherit;
  border-bottom: none;
  text-decoration: none;
}

.eyebrow a:hover,
.eyebrow a:focus-visible {
  color: var(--accent);
  border-bottom: none;
}

/* Same for the house name in the footer, which is also the way home. */
footer p a {
  color: inherit;
  border-bottom: none;
  text-decoration: none;
}

footer p a:hover,
footer p a:focus-visible {
  color: var(--accent);
  border-bottom: none;
}

.eyebrow-divider {
  color: var(--accent);
  margin: 0 0.5em;
  display: inline-block;
  white-space: nowrap;
}

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  line-height: 1.4;
  color: var(--text);
  max-width: 48ch;
  font-variation-settings: "opsz" 36;
}

/* Main */
main {
  position: relative;
  flex: 1;
}

/* The header's cream carries on a little way into <main>, behind the top
   padding. The band must always end above the first heading: the padding
   below is clamp(4rem, 10vw, 7rem), so this stays under it at every width
   (smaller minimum, smaller slope, smaller cap). The designer's original was
   clamp(3rem, 9vw, 9rem), which outgrew the capped padding from ~1320px and
   drew the colour step straight through the H2 until ~1700px. */
main::before {
  display: block;
  content: "";
  height: clamp(2rem, 6vw, 4.5rem);
  width: 100%;
  background: var(--bg-elevated);
  top: 0;
  position: absolute;
  z-index: 0;
}

main .wrap {
  position: relative;
  z-index: 1;
}

main > .wrap:first-of-type {
  padding-top: clamp(4rem, 10vw, 7rem);
}

section:has(+ section) {
  margin-bottom: 4.5rem;
}

h1 {
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: 0.2%;
  margin-bottom: 1.75rem;
  font-variation-settings: "opsz" 72;
}

h2 {
  font-family: var(--sans-serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
  font-variation-settings: "opsz" 9;
}

h3 {
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 0.45rem;
  line-height: 1.3;
  font-variation-settings: "opsz" 24;
}

p {
  margin-bottom: 1.25rem;
  max-width: 62ch;
  color: var(--text);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-muted);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* Bulleted lists, in the designer's dot idiom */
.dot-list {
  margin-bottom: 2rem;
}

.dot-list li {
  list-style-type: none;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 0.85rem;
  padding-left: 1.1rem;
  position: relative;
  max-width: 58ch;
  font-variation-settings: "opsz" 24;
}

.dot-list li::before {
  content: "·";
  color: var(--accent);
  position: absolute;
  left: 0;
  top: -0.15em;
  font-size: 1.4em;
  line-height: 1;
}

.dot-list li:last-child {
  margin-bottom: 0;
}

/* Numbered stages, mirroring the work-list numbering on /kate */
.steps {
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  padding-bottom: 2.5rem;
  max-width: 62ch;
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  font-weight: 300;
  font-size: 2.25rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.9rem;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}

.step-name {
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 0.45rem;
  line-height: 1.3;
  font-variation-settings: "opsz" 24;
}

.steps p {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 60ch;
  margin-bottom: 0;
}

/* Call to action */
.cta {
  border-top: 1px solid var(--bg-descended);
  padding-top: 3rem;
  margin-top: 1rem;
}

.cta-link {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  display: inline-block;
  width: fit-content;
  font-variation-settings: "opsz" 24;
}

.fineprint {
  font-family: var(--sans-serif);
  font-size: 0.85rem;
  color: var(--text-subtle);
  max-width: 58ch;
}

/* Definition-style contact block */
.detail-list {
  margin-bottom: 2rem;
  max-width: 58ch;
}

.detail-list dt {
  font-family: var(--sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.35rem;
}

.detail-list dd {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 24;
}

.detail-list dd:last-child {
  margin-bottom: 0;
}

.detail-list dd p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* The address for service. <address> is italic by default, which reads as an
   aside rather than as the place a process server is meant to post to. */
address {
  font-style: normal;
  margin-bottom: 0.75rem;
}

/* A note set apart from the body copy */
.note {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 2rem;
  max-width: 62ch;
}

.note p:last-child {
  margin-bottom: 0;
}

/* Tables — used by the cookie note.
 *
 * The wrapper scrolls rather than the page: `html, body { overflow-x: hidden }`
 * is inherited from the designer's stylesheet, so a table wider than a phone
 * would silently clip its last column instead of producing a scrollbar. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 2rem;
  max-width: 62ch;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.95rem;
}

caption {
  text-align: left;
  font-family: var(--sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-bottom: 0.75rem;
}

th,
td {
  text-align: left;
  padding: 0.65rem 0.75rem 0.65rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-family: var(--sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Footer */
footer {
  background: var(--bg-elevated);
  margin-top: 5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  font-family: var(--sans-serif);
}

footer p,
footer a {
  color: var(--accent-dark);
  text-decoration: none;
  border: none;
  margin-bottom: 0;
}

footer a:hover {
  color: var(--text);
  background: #fff;
}

footer ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

@media (min-width: 32rem) {
  footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
  }
}

/* Selection */
::selection {
  background: var(--accent);
  color: var(--bg);
}

@media (max-width: 480px) {
  .eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .cta-link {
    font-size: 1.2rem;
  }
}

@media print {
  :root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --text-muted: #4a4a4a;
    --text-subtle: #777;
    --border: #ddd;
    --accent: #b85d3e;
    --accent-muted: #b85d3e;
  }

  body {
    background: white;
    color: #1a1a1a;
  }

  .wrap {
    max-width: 100%;
    padding: 1.5rem 0;
  }

  a {
    color: #1a1a1a;
    border-bottom-color: #999;
  }

  footer {
    margin-top: 3rem;
  }
}

/* Rotating panels — used twice: the worked examples and the three stages.

   Each .carousel holds radio inputs, then .panels, then .pips. By default the
   panels are stacked and all visible, which is also what anyone who asked for
   reduced motion gets. Where motion is welcome they become a rotating stack:
   every panel occupies the same grid cell, one keyframe clock fades each in
   for its window, and the pips run on the same clock and delays so they cannot
   drift. The window and count are custom properties on the carousel; the
   keyframe percentages depend on the count, so there is one keyframe set per
   count in use (five, three).

   There is no script on this site, so pausing and picking are CSS too.
   Hovering (where hover exists) or focusing anything inside — a tab, a tap, a
   click on a panel, which is focusable — pauses every animation in the block
   in place. The pips are controls: the first radio is "auto" (checked by
   default), the rest are one per panel, each pip is a <label> for its radio,
   and `:checked ~` does the rest — a picked panel stops the clock and shows
   itself, its pip lights, and that lit pip is now a label for "auto" so
   pressing it again lets them run. Arrow keys move through the radio group. */
.carousel {
  position: relative;
  margin-bottom: 2rem;
}

.carousel.examples {
  --window: 6s;
  --count: 5;
}

.carousel.stages {
  --window: 8s;
  --count: 3;
}

.pick {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.panels {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The worked-example cards. */
.example {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.5rem;
  max-width: 62ch;
}

.example--kept {
  border-left-color: var(--bg-descended);
}

.example--queued {
  border-left-color: var(--accent-muted);
}

.example-verdict {
  display: inline-block;
  font-family: var(--sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.75rem;
}

.example--kept .example-verdict {
  color: var(--text-subtle);
}

.example-comment {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 1rem;
  font-variation-settings: "opsz" 24;
}

.example-meta dt {
  font-family: var(--sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 0.2rem;
}

.example-meta dd {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.example-meta dd:last-child {
  margin-bottom: 0;
}

/* The three stages: a bordered panel holding the illustration, centred, then
   the numbered step below it. The .steps numerals come from the existing
   counter; flex order puts the picture first and the numeral under it without
   touching the markup. */
.stages .panel {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1.5rem 1.75rem 1.75rem;
}

.stages .panel::before {
  order: 2;
}

.stages .step-name {
  order: 3;
}

.stages .panel > p {
  order: 4;
}

.stage-art {
  order: 1;
  margin: 0 0 1.5rem;
}

.stage-art svg {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-inline: auto;
}

.stages .panels {
  margin-bottom: 0.75rem;
}

/* Pips, centred under the panel, which is capped at the same 62ch. */
.pips {
  list-style: none;
  display: none;
  justify-content: center;
  gap: 1.1rem;
  max-width: 62ch;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0 0;
}

.pip {
  position: relative;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--bg-descended);
}

.pip label {
  position: absolute;
  inset: -0.65rem;
  cursor: pointer;
  border-radius: 50%;
}

.pip-resume {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .panels {
    gap: 0;
  }

  .panel {
    grid-area: 1 / 1;
    opacity: 0;
    z-index: 0;
    animation: cycle-5 calc(var(--count) * var(--window)) linear infinite;
    animation-delay: calc(var(--i, 0) * var(--window));
  }

  .stages .panel {
    animation-name: cycle-3;
  }

  .panel:nth-child(2) { --i: 1; }
  .panel:nth-child(3) { --i: 2; }
  .panel:nth-child(4) { --i: 3; }
  .panel:nth-child(5) { --i: 4; }

  .pips {
    display: flex;
  }

  .pip {
    animation: pip-5 calc(var(--count) * var(--window)) linear infinite;
    animation-delay: calc(var(--i, 0) * var(--window));
  }

  .stages .pip {
    animation-name: pip-3;
  }

  .pip:nth-child(2) { --i: 1; }
  .pip:nth-child(3) { --i: 2; }
  .pip:nth-child(4) { --i: 3; }
  .pip:nth-child(5) { --i: 4; }

  .pick {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Start only once at least half the block is in view (owner, 2026-09-07).
     No script, so the trigger is a scroll-driven animation: the carousel
     runs a one-step keyframe on a view() timeline that flips --seen to 1 at
     "entry 50%", and a style query on that property lets the panels and pips
     run. Until then they sit paused at time zero, delays included, so the
     clock starts the moment the block is half visible and every panel is in
     step. Scrolling on past keeps --seen at 1 (fill-mode both); scrolling back
     up above the block sets it to 0 again and pauses in place — CSS has no
     memory — which is the one way this differs from "start once and never
     stop". Browsers without scroll-driven animations skip the whole block and
     rotate from load, as before. */
  @supports (animation-timeline: view()) {
    .carousel {
      animation: seen linear both;
      animation-timeline: view();
      animation-range: entry 50% entry 51%;
    }

    .panel,
    .pip {
      animation-play-state: paused;
    }

    @container style(--seen: 1) {
      .panel,
      .pip {
        animation-play-state: running;
      }
    }
  }

  /* Pause: focus inside the block, from a tab, a tap or a click. */
  .carousel:focus-within :is(.panel, .pip) {
    animation-play-state: paused;
  }

  /* Pause: a pointer resting on the block, only where hover exists. */
  @media (hover: hover) {
    .carousel:hover :is(.panel, .pip) {
      animation-play-state: paused;
    }
  }

  /* A focused panel is shown whatever the clock says. Animations outrank
     ordinary declarations in the cascade, hence the !important. */
  .panel:focus {
    opacity: 1 !important;
    z-index: 2 !important;
  }

  /* A picked panel: the clock stops, that panel shows, its pip lights, and its
     pip becomes the way back. The first radio is "auto"; radio k+1 is panel k. */
  .pick:checked:not(:nth-of-type(1)) ~ .panels .panel,
  .pick:checked:not(:nth-of-type(1)) ~ .pips .pip {
    animation: none;
  }

  .pick:nth-of-type(2):checked ~ .panels .panel:nth-child(1),
  .pick:nth-of-type(3):checked ~ .panels .panel:nth-child(2),
  .pick:nth-of-type(4):checked ~ .panels .panel:nth-child(3),
  .pick:nth-of-type(5):checked ~ .panels .panel:nth-child(4),
  .pick:nth-of-type(6):checked ~ .panels .panel:nth-child(5) {
    opacity: 1;
    z-index: 1;
  }

  .pick:nth-of-type(2):checked ~ .pips .pip:nth-child(1),
  .pick:nth-of-type(3):checked ~ .pips .pip:nth-child(2),
  .pick:nth-of-type(4):checked ~ .pips .pip:nth-child(3),
  .pick:nth-of-type(5):checked ~ .pips .pip:nth-child(4),
  .pick:nth-of-type(6):checked ~ .pips .pip:nth-child(5) {
    background: var(--accent);
  }

  .pick:nth-of-type(2):checked ~ .pips .pip:nth-child(1) .pip-select,
  .pick:nth-of-type(3):checked ~ .pips .pip:nth-child(2) .pip-select,
  .pick:nth-of-type(4):checked ~ .pips .pip:nth-child(3) .pip-select,
  .pick:nth-of-type(5):checked ~ .pips .pip:nth-child(4) .pip-select,
  .pick:nth-of-type(6):checked ~ .pips .pip:nth-child(5) .pip-select {
    display: none;
  }

  .pick:nth-of-type(2):checked ~ .pips .pip:nth-child(1) .pip-resume,
  .pick:nth-of-type(3):checked ~ .pips .pip:nth-child(2) .pip-resume,
  .pick:nth-of-type(4):checked ~ .pips .pip:nth-child(3) .pip-resume,
  .pick:nth-of-type(5):checked ~ .pips .pip:nth-child(4) .pip-resume,
  .pick:nth-of-type(6):checked ~ .pips .pip:nth-child(5) .pip-resume {
    display: block;
  }

  /* Keyboard focus on a radio is shown on its pip; on "auto", on the row. */
  .pick:nth-of-type(2):focus-visible ~ .pips .pip:nth-child(1),
  .pick:nth-of-type(3):focus-visible ~ .pips .pip:nth-child(2),
  .pick:nth-of-type(4):focus-visible ~ .pips .pip:nth-child(3),
  .pick:nth-of-type(5):focus-visible ~ .pips .pip:nth-child(4),
  .pick:nth-of-type(6):focus-visible ~ .pips .pip:nth-child(5) {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }

  .pick:nth-of-type(1):focus-visible ~ .pips {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
}

/* The "has been seen" flag the view timeline flips. Registered so it can be
   animated as an integer and inherited down to the panels and pips. */
@property --seen {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

@keyframes seen {
  from { --seen: 0; }
  to { --seen: 1; }
}

/* Five panels: each holds a fifth of the cycle, with a short crossfade. */
@keyframes cycle-5 {
  0% { opacity: 0; z-index: 0; }
  2% { opacity: 1; z-index: 1; }
  20% { opacity: 1; z-index: 1; }
  22% { opacity: 0; z-index: 0; }
  100% { opacity: 0; z-index: 0; }
}

@keyframes pip-5 {
  0% { background: var(--border); }
  2% { background: var(--accent); }
  20% { background: var(--accent); }
  22% { background: var(--border); }
  100% { background: var(--border); }
}

/* Three panels: a third each. */
@keyframes cycle-3 {
  0% { opacity: 0; z-index: 0; }
  2% { opacity: 1; z-index: 1; }
  33.3% { opacity: 1; z-index: 1; }
  35.3% { opacity: 0; z-index: 0; }
  100% { opacity: 0; z-index: 0; }
}

@keyframes pip-3 {
  0% { background: var(--border); }
  2% { background: var(--accent); }
  33.3% { background: var(--accent); }
  35.3% { background: var(--border); }
  100% { background: var(--border); }
}

/* Questions people ask */
.faq h3 {
  margin-top: 1.75rem;
}

.faq h3:first-of-type {
  margin-top: 0;
}

/* A quotation, and the visibly-marked placeholder that stands in for one. */
.quote {
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 1.5rem 0 2rem;
  max-width: 58ch;
}

.quote p {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  line-height: 1.4;
  font-variation-settings: "opsz" 24;
}

.quote .quote-attribution {
  font-family: var(--sans-serif);
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.placeholder {
  border: 2px dashed var(--accent-muted);
  border-left-width: 2px;
  padding: 1rem 1.25rem;
  background: var(--bg-elevated);
}

.placeholder p {
  color: var(--text-muted);
  font-style: italic;
}