@charset "UTF-8";
/* ==========================================================================
   The Latent Larder
   A well-thumbed cookbook: warm paper, letterpress serif, ink that has
   soaked in slightly. No stark white, no cold grey, one burnt-orange accent.
   ========================================================================== */
/* --- Fonts ---------------------------------------------------------------
   Self-hosted variable fonts. Fraunces carries the character (SOFT rounds the
   terminals, WONK swaps in the cocked italic-ish forms); Source Sans 3 does
   the reading.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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: "Fraunces";
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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: "Source Sans 3";
  src: url("fonts/source-sans-3-normal-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: "Source Sans 3";
  src: url("fonts/source-sans-3-normal-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  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: "Source Sans 3";
  src: url("fonts/source-sans-3-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  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: "Source Sans 3";
  src: url("fonts/source-sans-3-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  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;
}
/* --- Tokens -------------------------------------------------------------- */
:root {
  /* The site is light only, by design — it is meant to look like paper.
     Declaring this stops the browser rendering form controls, scrollbars,
     and the pre-paint canvas dark for visitors whose OS is set to dark. */
  color-scheme: light;
  --paper: #f4ecdd; /* oat */
  --card: #fdf8ee; /* the cream of an index card, never #fff */
  --clay: #e2d3ba; /* soft clay: rules, chips */
  --clay-deep: #cdb896;
  --ink: #33291f; /* warm near-black, brown-biased */
  --ink-soft: #6a5a48;
  /* Solved for WCAG AA (4.5:1) against both --paper and --card: this is
     used on genuinely small text (stat labels, card meta, footer). */
  --ink-faint: #786958;
  --accent: #a8451c; /* burnt orange, used sparingly */
  --accent-deep: #872f10;
  --accent-tint: rgba(168, 69, 28, 0.10);
  --shadow-1: 0 1px 2px rgba(74, 52, 30, 0.07), 0 3px 8px rgba(74, 52, 30, 0.06);
  --shadow-2: 0 2px 4px rgba(74, 52, 30, 0.09), 0 10px 26px rgba(74, 52, 30, 0.11);
  --serif: "Fraunces", Iowan Old Style, Palatino, Georgia, serif;
  --sans: "Source Sans 3", Seravek, Optima, Candara, sans-serif;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --grain-opacity: 0.55;
  /* Light falling on the page from somewhere above the page. */
  --bloom: rgba(255, 250, 238, 0.55);
  /* Index-card ruling. Kept faint on purpose: at full strength the lines
     cross the words and read as strikethrough rather than as paper. */
  --card-rule: rgba(186, 163, 126, 0.34);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* A soft bloom of light toward the top, as if the page is near a window. */
  background-image: radial-gradient(120% 70% at 50% -10%, var(--bloom), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  /* Generous: this is read at arm's length with flour on your hands. */
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem);
  line-height: 1.72;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Fixed so it never tiles visibly down a long recipe. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

body > *:not(.grain) {
  position: relative;
  z-index: 2;
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--card);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 99;
}
.skip-link:focus {
  left: 0;
}

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

.wrap--narrow {
  width: min(46rem, 100% - var(--gutter) * 2);
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  /* SOFT rounds the terminals; WONK is the axis that gives Fraunces its
     slightly-off, cut-in-wood quality. */
  font-variation-settings: "SOFT" 46, "WONK" 1;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.011em;
  text-wrap: balance;
  margin: 0;
}

/* --- Masthead ------------------------------------------------------------ */
.masthead {
  padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}

.masthead__title {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.05;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.masthead__title:hover {
  color: var(--accent);
}

.masthead__line {
  display: block;
}

.masthead__line--indent {
  padding-left: 1.15em;
}

.masthead--home {
  padding-block: clamp(3rem, 9vw, 6rem) clamp(1.5rem, 4vw, 2.5rem);
}
.masthead--home .wrap {
  display: block;
}
.masthead--home {
  /* An h1 on the home page, an anchor everywhere else — the margin reset is
     what keeps the two rendering identically. */
}
.masthead--home .masthead__title {
  font-size: clamp(3.25rem, 11.5vw, 7.5rem);
  display: block;
  margin: 0 0 0.5rem;
}

.masthead__tagline {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 30ch;
  margin: 0 0 1.5rem;
  line-height: 1.4;
}

.nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  font-size: 0.9rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

.masthead--home .nav {
  margin-left: 0;
}

/* --- Illustrations ------------------------------------------------------- */
.illo {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  color: var(--ink-faint);
}

.divider {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-block: clamp(2rem, 5vw, 3.25rem);
}
.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--clay-deep), transparent);
}

.divider__mark {
  width: 3.4rem;
  height: 3.4rem;
  /* Decorative, so it can sit lighter than the AA-constrained text token. */
  color: var(--clay-deep);
  stroke-width: 1.9; /* larger render, so the line can be finer */
}

/* --- Home ---------------------------------------------------------------- */
.intro {
  font-size: 1.12em;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.intro p {
  margin: 0;
}

.section-heading {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  margin-bottom: 1.75rem;
}

.cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* An index card: ruled lines, red margin rule, pinned down at a slight angle.
   Rotations alternate so a grid reads as a handful of cards set down one
   after another rather than a CSS grid. */
.card {
  --tilt: 0deg;
  background-color: var(--card);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1.68rem, var(--card-rule) 1.68rem, var(--card-rule) calc(1.68rem + 1px));
  background-position: 0 3.62rem;
  border: 1px solid var(--clay-deep);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transform: rotate(var(--tilt));
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.32s ease;
  animation: card-in 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  animation-delay: calc(var(--stagger, 0) * 70ms);
}
.card:hover, .card:focus-within {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: var(--shadow-2);
}

.card--tilt0 {
  --tilt: -0.55deg;
}

.card--tilt1 {
  --tilt: 0.7deg;
}

.card--tilt2 {
  --tilt: -0.25deg;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: rotate(var(--tilt)) translateY(14px);
  }
  to {
    opacity: 1;
    transform: rotate(var(--tilt)) translateY(0);
  }
}
.card__link {
  /* Column flex so the slack in a short card can be pushed to one place
     rather than trailing off the bottom. */
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1.6rem 1.6rem 1.5rem 2.6rem;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* The red margin rule down the left of every index card. */
.card__rule {
  position: absolute;
  inset-block: 0.7rem;
  left: 1.55rem;
  width: 1px;
  background: var(--accent);
  opacity: 0.4;
}

.card__title {
  font-size: 1.5rem;
  font-variation-settings: "SOFT" 55, "WONK" 1, "opsz" 60;
  margin-bottom: 0.4rem;
}

.card__description {
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  font-size: 0.97em;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  /* No separator dots: at card width these three items always wrap to two
     lines, which strands a dot at a line edge. Wide gaps do the same job. */
  gap: 0.1rem 1.15rem;
  margin: 0;
  font-size: 0.76em;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A snapshot taped into the lower half of the card. `margin-top: auto` takes
   up whatever slack the grid row hands this card, so the photo sits on the
   card's lower area instead of floating directly under the meta line.

   No transform of its own, deliberately. The card's rotate() already applies
   to its whole subtree, so any rotation here *stacks* on the card's tilt —
   and on the +0.7deg cards a -0.8deg counter-rotation cancelled it almost
   exactly, leaving the photo upright inside a tilted card with nothing to
   straighten on hover. The photo is part of the card; it tilts and lifts
   with it. */
.card__photo {
  display: block;
  margin-top: auto;
  padding-top: 1.2rem;
}
.card__photo img {
  display: block;
  width: 100%;
  /* The width/height attributes on the tag map to CSS presentational hints.
     Without `height: auto` to override the height one, a 1400x934 file would
     lay out 934px tall and the aspect-ratio below would never apply. */
  height: auto;
  /* Fixed ratio regardless of the source file, so a portrait photo can't
     stretch one card taller than the rest of its row, and nothing shifts
     as images load. */
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid var(--clay-deep);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
}

.card__go {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__go::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.25s ease;
}

.card:hover .card__go::after {
  transform: translateX(4px);
}

/* With no photo there is nothing to absorb the row's spare height, so the
   call to action takes it and pins to the bottom. The gap above it reads as
   blank ruling on the card, and the CTAs stay aligned across the row. */
.card:not(.card--has-photo) .card__go {
  margin-top: auto;
}

.empty {
  color: var(--ink-soft);
}

/* --- Recipe: head -------------------------------------------------------- */
.recipe__head {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
}

/* The knowing wink, set as a small letterpress stamp rather than a banner.
   It states a fact; it does not apologise for one. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.15rem;
  padding: 0.34rem 0.9rem;
  border: 1px solid var(--clay-deep);
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--ink-soft);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.recipe__title {
  font-size: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem);
  font-variation-settings: "SOFT" 52, "WONK" 1, "opsz" 144;
  margin-bottom: 0.6rem;
}

.recipe__standfirst {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0 0 2rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--clay-deep);
}
.stats dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.stats dd {
  margin: 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.2;
}

.recipe__image {
  width: 100%;
  /* Lets the width/height attributes reserve the right box before the photo
     loads without also pinning it to its pixel height at every viewport. */
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--clay-deep);
  box-shadow: var(--shadow-1);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* --- Recipe: the cooking part -------------------------------------------- */
.cook {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(1rem, 3vw, 2rem);
}

.block-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-variation-settings: "SOFT" 52, "WONK" 1, "opsz" 72;
  margin-bottom: 1.25rem;
}

.block-heading__mark {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--accent);
  stroke-width: 2.9;
}

/* Sticky so the ingredients stay put while you scroll the method. */
.ingredients__inner {
  position: sticky;
  top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--clay-deep);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}

.ingredients__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ingredients__list li {
  /* Two columns, like a real recipe: quantities stack into a scannable
     rail on the left, names read as a list on the right. */
  display: grid;
  grid-template-columns: 4.9rem minmax(0, 1fr);
  gap: 0.1rem 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--clay);
  line-height: 1.4;
}
.ingredients__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Quantities are what you scan for mid-cook, so they get their own weight,
   colour, and tabular figures — the column never shifts as digits change. */
.qty {
  font-weight: 700;
  font-size: 0.94em;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.ing {
  color: var(--ink);
}

/* An ingredient with no `qty |` prefix spans both columns rather than
   leaving a ragged hole in the rail. */
.ingredients__list li > .ing:only-child {
  grid-column: 1/-1;
}

.method__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding-bottom: 1.9rem;
  margin-bottom: 1.9rem;
  border-bottom: 1px solid var(--clay);
}
.step:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.step__n {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 0.85;
  color: var(--accent);
  opacity: 0.85;
  font-variant-numeric: lining-nums;
  min-width: 1.4em;
}

.step__body {
  font-size: 1.06em;
  padding-top: 0.15rem;
}
.step__body p {
  margin: 0 0 0.75em;
}
.step__body p:last-child {
  margin-bottom: 0;
}

/* --- Notes, tags, back --------------------------------------------------- */
.notes {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--clay-deep);
}

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.prose p {
  margin: 0 0 1.1em;
}
.prose p:last-child {
  margin-bottom: 0;
}
.prose h2, .prose h3 {
  color: var(--ink);
  margin: 1.8em 0 0.5em;
}
.prose ul, .prose ol {
  padding-left: 1.2em;
}
.prose li {
  margin-bottom: 0.4em;
}
.prose code {
  font-size: 0.9em;
  background: var(--clay);
  padding: 0.12em 0.4em;
  border-radius: var(--r-sm);
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
}
.tags li {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tags {
  /* The chip outline lives on the li for plain tags and on the anchor for
     linked ones, so the whole chip is the hit target rather than just the
     word inside it. */
}
.tags > li {
  padding: 0.36rem 0.85rem;
  border: 1px solid var(--clay-deep);
  border-radius: 999px;
}

.tags--links > li {
  padding: 0;
  border: 0;
}
.tags--links > li a {
  display: inline-block;
  padding: 0.36rem 0.85rem;
  border: 1px solid var(--clay-deep);
  border-radius: 999px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.tags--links > li a:hover, .tags--links > li a:focus-visible {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-tint);
}

.tags__count {
  /* A tabular-ish count, dimmed so it reads as metadata and not as part of
     the tag name itself. */
  margin-left: 0.4em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.tags--index {
  gap: 0.65rem;
  margin-top: 0;
}
.tags--index a {
  font-size: 0.8rem;
}

/* --- Tag pages ----------------------------------------------------------- */
.tag-cloud {
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.tag-cloud--home {
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
}

.tag-cloud__heading {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}

.tag-cloud .tags {
  margin-top: 0;
}

/* --- Breadcrumbs --------------------------------------------------------- */
/* Set in the same tracked small caps as the nav, the stat labels and the tag
   chips. In normal case at body size it read as a stray sentence above the
   title rather than as navigation — it was the one piece of furniture on the
   site not speaking the metadata idiom. */
.crumbs {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.5;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin: 0;
  padding: 0;
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.crumbs {
  /* A slash, not the "\203A" chevron. That glyph renders far lighter than the
     caps beside it and sits off their optical centre, so the trail broke into
     three loose fragments; a drawn chevron small enough to match is only a few
     pixels across and turns into a blob. A slash reads as a path, holds its
     weight against tracked caps, and stays crisp at any size. */
}
.crumbs li + li::before {
  content: "/";
  flex: none;
  color: var(--clay-deep);
  font-size: 1.05em;
  letter-spacing: 0;
}
.crumbs a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.2s ease;
}
.crumbs a:hover, .crumbs a:focus-visible {
  color: var(--accent);
}
.crumbs {
  /* Where you are, carrying slightly more weight than where you have been. */
}
.crumbs [aria-current=page] {
  color: var(--ink-soft);
  font-weight: 600;
}

.back {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}
.back a {
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.back a::before {
  content: "←";
  display: inline-block;
  transition: transform 0.25s ease;
}
.back a:hover {
  text-decoration: underline;
}

/* --- Page ---------------------------------------------------------------- */
.page {
  padding-block: clamp(1rem, 3vw, 2rem) 0;
}

.page__title {
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  font-variation-settings: "SOFT" 52, "WONK" 1, "opsz" 120;
  margin-bottom: 1.5rem;
}

/* --- Footer -------------------------------------------------------------- */
.footer {
  margin-top: clamp(4rem, 10vw, 8rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.footer__rule {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.footer__rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--clay-deep), transparent);
}

.footer__mark {
  width: 2.6rem;
  height: 2.6rem;
  color: var(--clay-deep);
  stroke-width: 2.2;
}

.footer__colophon {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 44, "WONK" 0;
  font-style: italic;
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 1.75rem;
  text-align: center;
  text-wrap: pretty;
}

.footer__meta {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer__meta a {
  color: inherit;
  text-decoration: none;
}
.footer__meta a:hover {
  color: var(--accent);
}

.footer__dot {
  margin-inline: 0.5rem;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 56rem) {
  .cook {
    grid-template-columns: 1fr;
  }
  /* Un-stick on narrow screens: a sticky panel would eat the viewport. */
  .ingredients__inner {
    position: static;
  }
  .step {
    gap: 1rem;
  }
  .step__n {
    font-size: 2.1rem;
  }
}
@media (max-width: 34rem) {
  .masthead__line--indent {
    padding-left: 0.6em;
  }
  .card__link {
    padding-left: 2.2rem;
  }
  .card__rule {
    left: 1.2rem;
  }
  .stats {
    gap: 1rem 1.75rem;
  }
}
/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover, .card:focus-within {
    transform: rotate(var(--tilt));
  }
}
/* --- Print --------------------------------------------------------------- */
@media print {
  .grain, .nav, .footer__rule, .footer__meta, .back, .card__go, .skip-link {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .cook {
    grid-template-columns: 1fr 1.8fr;
    gap: 2rem;
  }
  .ingredients__inner {
    position: static;
    box-shadow: none;
    border-color: #bbb;
  }
  .recipe__title {
    font-size: 26pt;
  }
  .step {
    break-inside: avoid;
  }
  .footer__colophon {
    font-size: 9pt;
  }
}

/*# sourceMappingURL=main.css.map */