/* Daria's cozy nest — design system
   Palette, line weights and curves all trace back to assets/logo.svg and
   assets/corner-*.svg: paper white, clay brown, oatmeal shapes, thin wavy stitches. */

:root {
  color-scheme: light;

  /* Surfaces and ink. Neutrals are tinted toward the clay hue so nothing reads grey. */
  --paper: oklch(98.2% 0.005 74);
  --paper-sunk: oklch(95.6% 0.012 78);
  --linen: oklch(92.4% 0.018 78);
  --ink: oklch(30% 0.026 48);
  --ink-soft: oklch(45.5% 0.034 48);
  --clay: oklch(62.5% 0.048 48);
  --clay-deep: oklch(46.5% 0.055 45);
  --thread: oklch(87% 0.013 78);
  --sage: oklch(50% 0.05 150);
  --sage-wash: oklch(94.5% 0.022 150);

  --font-ui: Quicksand, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: Vollkorn, "Iowan Old Style", Palatino, Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-2xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.45rem + 3vw, 3.25rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(3rem, 7vw, 5.5rem);
  --measure: 36rem;

  --r-xs: 0.25rem;
  --r-sm: 0.625rem;
  --r-md: 1.125rem;
  --r-lg: 1.75rem;
  --r-leaf: 1.5rem 1.5rem 1.5rem 3.5rem;

  --lift: 0 20px 38px -30px oklch(45% 0.05 48 / 0.5);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Two wavy strokes, the same hand as the corner artwork. */
  --stitch-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='160' viewBox='0 0 22 160'%3E%3Cg fill='none' stroke='%23d9d3c9' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M11 0C5 26 17 54 11 80 5 106 17 134 11 160'/%3E%3Cpath d='M15.5 0C9.5 26 21.5 54 15.5 80 9.5 106 21.5 134 15.5 160' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  --stitch-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16'%3E%3Cg fill='none' stroke='%23d9d3c9' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 8C13 2 27 14 40 8S67 2 80 8s27 6 40 0 27-6 40 0'/%3E%3Cpath d='M0 12.5C13 6.5 27 18.5 40 12.5S67 6.5 80 12.5s27 6 40 0 27-6 40 0' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--clay-deep);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.18em;
  transition: color 180ms var(--ease-out);
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--clay-deep);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

time {
  font-variant-numeric: tabular-nums;
}

.skip {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 10;
  padding: 0.5em 0.9em;
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: var(--lift);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  transform: translateY(-160%);
  transition: transform 220ms var(--ease-out);
}

.skip:focus-visible {
  transform: none;
}

.wrap {
  width: min(100% - var(--gutter) * 2, 68rem);
  margin-inline: auto;
}

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

/* Labels, meta, chips: the Quicksand voice inherited from the placeholder page. */
.label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
}

.meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- Masthead ---------- */

.masthead {
  position: relative;
  padding-block: clamp(1.25rem, 3vw, 2.25rem) var(--space-sm);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}

.brand {
  display: block;
  width: clamp(8.5rem, 22vw, 12.5rem);
}

.brand img {
  width: 100%;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
}

.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.4em;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--clay-deep);
  text-decoration: underline;
}

.nav__social {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.nav__social svg {
  width: 1.4em;
  height: 1.4em;
}

.corner {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.corner--top {
  top: 0;
  left: 0;
  width: max(26vw, 150px);
}

.corner--bottom {
  right: 0;
  bottom: 0;
  width: max(15vw, 96px);
}

/* ---------- Home intro, and the empty timeline that borrows its shape ---------- */

.intro,
.empty {
  padding-block: var(--space-md) var(--section);
}

.intro__line,
.empty__line {
  max-width: 30rem;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}

.empty__title {
  margin-bottom: var(--space-sm);
  font-size: var(--text-xl);
  color: var(--clay-deep);
}

.intro__links,
.empty__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------- Timeline ---------- */

.timeline {
  position: relative;
  --rail: 0rem;
  --spine: 2.25rem;
  padding-bottom: var(--section);
}

@media (min-width: 60rem) {
  .timeline {
    --rail: 7.5rem;
    --spine: 3rem;
  }
}

/* The stitch belongs to the cards, not to everything inside .timeline: the
   pagination nav is a child too, and painting through it put an opaque thread
   straight past the knot that is supposed to end it. Scoped here, the thread
   runs from the first card to the top of .thread-end — where the knot's own
   un-masked segment picks it up (see .thread-end__knot::before). The bottom
   offset is the nav's own margin, so the two meet exactly; on a page with no
   nav the same offset lands inside .timeline's padding. */
.timeline__posts {
  position: relative;
}

.timeline__posts::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: calc(var(--space-xl) * -1);
  left: calc(var(--rail) + var(--spine) / 2 - 11px);
  width: 22px;
  background: var(--stitch-v) repeat-y center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 4rem, #000 calc(100% - 5rem), transparent);
  pointer-events: none;
}

.month {
  display: grid;
  grid-template-columns: var(--rail) var(--spine) minmax(0, 1fr);
}

.month + .month {
  margin-top: var(--space-xl);
}

.month__label {
  grid-column: 1 / -1;
  align-self: start;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--clay);
  letter-spacing: 0;
}

.month__label span {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.month__entries {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .month__label {
    grid-row: 1;
    grid-column: 1;
    position: sticky;
    top: var(--space-lg);
    margin-bottom: 0;
    padding-right: var(--space-md);
    text-align: right;
  }

  .month__entries {
    grid-row: 1;
    grid-column: 2 / -1;
  }
}

.entry {
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  align-items: start;
}

.entry__bead {
  position: relative;
  height: 1.9rem;
}

.entry__bead::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: calc(var(--spine) / 2 - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 5px var(--paper);
}

.entry--recipe .entry__bead::before {
  background: var(--sage);
}

.entry--note .entry__bead::before {
  background: var(--paper);
  border: 1.6px solid var(--clay);
  width: 9px;
  height: 9px;
}

.entry--finds .entry__bead::before {
  border-radius: 2px;
  rotate: 45deg;
  background: var(--clay);
}

/* ---------- Everything ---------- */

/* The archive is the timeline at one line per post. Everything below either
   tightens a shared rule or styles the row itself; .entry, .month and the
   stitch are inherited untouched, which is what keeps the bead vocabulary
   identical to the homepage's. */

.archive {
  padding-top: var(--space-md);
}

.archive__title {
  font-size: var(--text-2xl);
}

.archive__lead {
  max-width: 30rem;
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-lg);
  font-size: var(--text-lg);
  color: var(--ink-soft);
}

/* Cards need air between them; rows need a list. */
.timeline--ledger .month__entries {
  gap: var(--space-2xs);
}

/* A card hangs from its top edge, so the timeline pins the bead near the top.
   A one-line row has no top edge worth hanging from — centre it instead. */
.timeline--ledger .entry {
  align-items: center;
}

.timeline--ledger .entry__bead {
  height: 100%;
  min-height: 1.75rem;
}

.timeline--ledger .entry__bead::before {
  top: 50%;
  translate: 0 -50%;
}

.ledger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-xs);
  padding-block: var(--space-3xs);
}

/* Fixed column, tabular figures: the titles start on one vertical line, which
   is the whole reason this page scans faster than five pages of cards. */
.ledger-row__date {
  flex: 0 0 4.25rem;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* flex-basis under a 390px column minus the spine, so a long title wraps onto
   its own line rather than squeezing the date column. */
.ledger-row__link {
  flex: 1 1 14rem;
  text-decoration-color: var(--thread);
}

/* The archive link at the end of a page of the thread, in the same column as
   the words and the pager — .thread-end is a three-column grid and an
   unplaced child lands in the rail. */
.thread-end__all {
  grid-column: 3;
  margin-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------- The end of a page of thread ---------- */

.thread-end {
  display: grid;
  grid-template-columns: var(--rail) var(--spine) minmax(0, 1fr);
  margin-top: var(--space-xl);
}

/* The thread arrives here invisible without help: `.timeline__posts::before`
   stops at this nav's top edge and fades its last 5rem out with a mask, so the
   stitch does not end on a cut edge. This is the segment that carries it the
   rest of the way into the knot — same tile, same width, no mask. */
.thread-end__knot {
  position: relative;
  grid-column: 2;
  height: 4.5rem;
}

.thread-end__knot::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--spine) / 2 - 11px);
  width: 22px;
  height: 3rem;
  background: var(--stitch-v) repeat-y center top;
}

/* A little larger than .entry__bead::before (10px, site.css:409-410), ringed
   at the 1.6px stroke the corner artwork and the stitch tiles are drawn with. */
.thread-end__knot::after {
  content: "";
  position: absolute;
  top: 3rem;
  left: calc(var(--spine) / 2 - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 1.6px var(--paper), 0 0 0 3.2px var(--clay);
}

.thread-end__more {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  justify-content: center;
  min-height: 3rem;
  text-decoration: none;
}

.thread-end__label {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--clay-deep);
  transition: color 160ms var(--ease-out);
}

.thread-end__more--last .thread-end__label {
  color: var(--ink);
}

.thread-end__hint {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

a.thread-end__more:hover .thread-end__label {
  color: var(--clay);
}

.pager {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.75em;
  margin-top: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* The same separator the card footers use (`.card__foot .dot::before`), drawn
   between the numbers rather than inside them. Chromium and Firefox do expose
   generated content to the accessibility tree, so it is announced; what keeps
   that harmless is the "Page " each entry carries in _includes/pagination.html,
   which gives every link a name of its own rather than a lone digit. */
.pager li + li::before {
  content: "·";
  margin-right: 0.75em;
  color: var(--thread);
}

.pager a {
  color: var(--ink-soft);
  text-decoration: none;
}

.pager a:hover {
  color: var(--clay-deep);
}

.pager [aria-current="page"] {
  color: var(--clay-deep);
  font-weight: 600;
}

/* ---------- Cards ---------- */

.card {
  display: grid;
  gap: var(--space-sm);
}

.card__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
}

.card__title {
  font-size: var(--text-xl);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--clay-deep);
  text-decoration: underline;
  text-decoration-color: var(--thread);
}

.card__dek {
  color: var(--ink-soft);
  max-width: 34rem;
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.75em;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

.card__foot .dot::before {
  content: "·";
  color: var(--thread);
}

.card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--linen);
  box-shadow: var(--lift);
}

.card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.card__media:hover img {
  transform: scale(1.025);
}

.card__play {
  position: absolute;
  inset: auto auto var(--space-sm) var(--space-sm);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: oklch(62.5% 0.048 48 / 0.94);
  transition: transform 320ms var(--ease-out), background-color 320ms var(--ease-out);
}

.card__play svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 2px;
  fill: var(--paper);
}

.card__media:hover .card__play {
  transform: scale(1.07);
  background: oklch(46.5% 0.055 45 / 0.96);
}

.card__stamp {
  position: absolute;
  inset: var(--space-xs) var(--space-xs) auto auto;
  padding: 0.25em 0.6em;
  border-radius: var(--r-xs);
  background: oklch(30% 0.026 48 / 0.72);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Feature video post */
.card--video {
  max-width: 46rem;
}

/* Recipe post: photo beside the text, sunk panel, no card-in-card */
.card--recipe {
  max-width: 40rem;
  padding: var(--space-md);
  border-radius: var(--r-lg);
  background: var(--paper-sunk);
}

.card--recipe .card__media img {
  aspect-ratio: 16 / 9;
}

@media (min-width: 40rem) {
  .card--recipe {
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: var(--space-md);
    align-items: start;
  }

  .card--recipe .card__media {
    grid-row: 1 / span 4;
    grid-column: 2;
    border-radius: var(--r-md);
  }

  .card--recipe .card__media img {
    aspect-ratio: 4 / 5;
  }
}

.card--recipe .card__kicker {
  color: var(--sage);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
}

.chips li {
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--sage-wash);
  color: var(--sage);
}

/* Finds post: photos laid out on a table */
.card--finds {
  max-width: 44rem;
}

.finds-strip {
  display: flex;
  padding-block: var(--space-2xs);
}

.finds-strip img {
  width: clamp(5.5rem, 24vw, 9.5rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 5px solid var(--paper);
  box-shadow: var(--lift);
  transition: transform 400ms var(--ease-out);
}

.finds-strip img:nth-child(1) {
  rotate: -2.5deg;
}

.finds-strip img:nth-child(2) {
  rotate: 1.5deg;
  margin-left: -1.25rem;
  z-index: 1;
}

.finds-strip img:nth-child(3) {
  rotate: -1deg;
  margin-left: -1.25rem;
}

.card--finds:hover .finds-strip img {
  rotate: 0deg;
}

/* Short note: no image, no container, just a voice */
.card--note {
  max-width: 30rem;
  gap: var(--space-2xs);
}

@media (min-width: 60rem) {
  .card--note {
    margin-left: var(--space-lg);
  }
}

.card--note .card__stitch {
  width: 2.75rem;
  height: 0.75rem;
  background: var(--stitch-h) no-repeat left center;
  background-size: 7rem auto;
}

.card__quote {
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.6;
}

.card__quote a {
  color: inherit;
  text-decoration-color: var(--thread);
}

/* ---------- Post page ---------- */

.post {
  display: grid;
  grid-template-columns: minmax(0, var(--measure));
  justify-content: center;
  row-gap: var(--space-md);
  padding-inline: var(--gutter);
  padding-bottom: var(--section);
}

/* The player breaks out of the reading measure; everything else stays inside it. */
.post > .post__wide {
  width: min(54rem, calc(100vw - var(--gutter) * 2));
  justify-self: center;
}

.post__head {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.post__head h1 {
  font-size: var(--text-3xl);
}

.post__dek {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-soft);
}

.post__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.8em;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
}

.post__facts a {
  font-weight: 600;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.back:hover {
  text-decoration: underline;
}

/* Click-to-load player: no YouTube iframe until the reader asks for one. */
.player {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--linen);
  box-shadow: var(--lift);
}

.player__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
}

.player__trigger img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 700ms var(--ease-out), filter 400ms var(--ease-out);
}

.player__badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.player__badge span {
  display: grid;
  place-items: center;
  width: clamp(3.75rem, 11vw, 5rem);
  height: clamp(3.75rem, 11vw, 5rem);
  border-radius: 50%;
  background: oklch(62.5% 0.048 48 / 0.92);
  transition: transform 360ms var(--ease-out), background-color 360ms var(--ease-out);
}

.player__badge svg {
  width: 32%;
  height: 32%;
  margin-left: 6%;
  fill: var(--paper);
}

.player__trigger:hover .player__badge span {
  transform: scale(1.08);
  background: oklch(46.5% 0.055 45 / 0.95);
}

.player__trigger:hover img {
  transform: scale(1.02);
}

.player iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Chapters, stitched together */
.chapters {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-radius: var(--r-lg);
  background: var(--paper-sunk);
}

.chapters h2 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2xs);
}

.chapters ol {
  position: relative;
  display: grid;
  gap: 0.15rem;
}

.chapters ol::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  bottom: 0.9rem;
  left: 0.3rem;
  width: 22px;
  background: var(--stitch-v) repeat-y center top;
  background-size: 22px 90px;
  opacity: 0.9;
}

.chapter {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  width: 100%;
  padding: 0.35rem 0.5rem 0.35rem 2.1rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font-family: inherit;
  transition: background-color 200ms var(--ease-out);
}

.chapter::before {
  content: "";
  position: absolute;
  left: calc(0.3rem + 11px - 3.5px);
  top: 0.95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 4px var(--paper-sunk);
}

.chapter:hover {
  background: var(--linen);
}

.chapter time {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clay-deep);
}

/* ---------- Prose ---------- */

.prose {
  display: grid;
  gap: var(--space-md);
  font-size: var(--text-base);
}

.prose > * {
  margin: 0;
}

.prose h2 {
  margin-top: var(--space-md);
  font-size: var(--text-2xl);
}

.prose h3 {
  margin-top: var(--space-xs);
  font-size: var(--text-lg);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}

.prose a {
  text-decoration-color: var(--clay);
}

.prose img {
  width: 100%;
  border-radius: var(--r-md);
}

.prose p > img:only-child {
  box-shadow: var(--lift);
}

.prose blockquote {
  margin: var(--space-2xs) 0;
  padding: 0;
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.55;
  color: var(--clay-deep);
}

.prose blockquote p {
  max-width: 28rem;
}

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-2xs);
  padding-left: 1.4em;
}

.prose ul li {
  list-style: none;
  position: relative;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--clay);
}

.prose ol {
  list-style: decimal;
  font-variant-numeric: tabular-nums;
}

.prose ol li::marker {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--clay);
}

.prose em {
  font-style: italic;
}

@media (min-width: 52rem) {
  .prose .bleed {
    width: 114%;
    margin-left: -7%;
  }
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: calc(var(--space-md) * -0.6);
}

/* ---------- Finds and recipe blocks ---------- */

.block {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.block__head {
  display: grid;
  gap: var(--space-3xs);
}

.block__head h2 {
  font-size: var(--text-xl);
}

.block__note {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.finds-list {
  display: grid;
  gap: 0;
}

.finds-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.6em;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--linen);
}

.finds-list li:first-child {
  border-top: 1px solid var(--linen);
}

.finds-list .find__name {
  font-weight: 600;
}

.finds-list .find__where {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* The photo Daria attaches to a thing she found. Small and square so a row
   stays a row: the list is for reading, and the decorative strip on the
   timeline card is where a photo gets to be big. `align-self: center` because
   the row's baseline alignment would otherwise hang the image off the text. */
.finds-list .find__photo {
  width: 3rem;
  height: 3rem;
  align-self: center;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--paper-sunk);
}

.recipe {
  padding: var(--space-md);
  border-radius: var(--r-lg);
  background: var(--paper-sunk);
}

.recipe__head {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.recipe__head h2 {
  font-size: var(--text-xl);
}

.recipe__cols {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 46rem) {
  .recipe__cols {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-lg);
  }
}

.recipe h3 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2xs);
}

.recipe__ingredients li {
  padding-block: 0.25rem;
  border-bottom: 1px solid var(--linen);
}

.recipe__steps {
  display: grid;
  gap: var(--space-sm);
  counter-reset: step;
}

.recipe__steps li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.6rem;
}

.recipe__steps li::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clay);
  padding-top: 0.25em;
}

/* ---------- Post footer, next and previous ---------- */

.post__foot {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}

.post__foot::before {
  content: "";
  height: 16px;
  background: var(--stitch-h) repeat-x left center;
}

.watch {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  justify-self: start;
  padding: 0.7em 1.15em;
  border-radius: 999px;
  background: var(--clay);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.watch:hover {
  background: var(--clay-deep);
  color: var(--paper);
  transform: translateY(-1px);
}

.watch svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

.sibling-nav {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .sibling-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.sibling {
  display: grid;
  gap: var(--space-3xs);
  text-decoration: none;
}

.sibling span {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sibling strong {
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--ink);
}

.sibling:hover strong {
  color: var(--clay-deep);
}

@media (min-width: 40rem) {
  .sibling--next {
    text-align: right;
  }
}

/* ---------- Page layout for simple pages ---------- */

.page {
  display: grid;
  gap: var(--space-md);
  width: min(100% - var(--gutter) * 2, var(--measure));
  margin-inline: auto;
  padding-bottom: var(--section);
}

.page h1 {
  font-size: var(--text-2xl);
  margin-top: var(--space-md);
}

.portrait {
  border-radius: var(--r-leaf);
  box-shadow: var(--lift);
}

/* ---------- Footer ---------- */

.foot {
  position: relative;
  padding-block: var(--space-lg) var(--space-2xl);
}

.foot::before {
  content: "";
  display: block;
  height: 16px;
  margin-bottom: var(--space-lg);
  background: var(--stitch-h) repeat-x left center;
  opacity: 0.8;
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  font-weight: 600;
}

/* ---------- Motion ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js-off [data-reveal],
.no-motion [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}