/* ==========================================================================
   THE HOMESTEAD DIARIES
   Design system — colour, type, motion, texture.

   Palette sampled from the brand photograph: golden afternoon light on a
   wooden table, speckled stoneware, linen, daisies, olive foliage.
   Nothing here is pure black, pure white, or fully saturated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — warm paper, never grey */
  --paper:        #FBF7F0;   /* page ground */
  --paper-deep:   #F3ECE0;   /* alternating sections */
  --paper-warm:   #EFE6D6;   /* inset wells */
  --card:         #FFFDF9;   /* raised paper */

  /* Ink — warm charcoals, contrast-checked against --paper and --paper-deep */
  --ink:          #2E2721;   /* headings, body            13.4:1 */
  --ink-soft:     #6B6055;   /* secondary prose            5.8:1 */
  --ink-faint:    #736758;   /* letterspaced labels        5.1:1 */

  /* Accents */
  --olive:        #5C6B45;   /* primary action             5.4:1 */
  --olive-deep:   #475334;   /* hover / pressed */
  --olive-pale:   #E7E9DE;   /* tints */
  --clay:         #B4906A;   /* decorative only — rules, sprigs, hearts */
  --clay-deep:    #94714C;   /* clay used on text-size elements */

  /* On dark olive bands */
  --cream:        #FBF7F0;
  --cream-soft:   #EDE9DE;   /* 4.75:1 on --olive */

  /* Lines */
  --line:         #E4DACA;
  --line-strong:  #D3C5AF;

  /* Type */
  --serif:  "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:   "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
  --script: "Sacramento", "Segoe Script", cursive;

  /* Fluid scale */
  /* Sized so "Welcome, friend." always fits the hero card on one line. */
  --t-script:  clamp(2.4rem, 1.35rem + 2.9vw, 3.45rem);
  --t-d1:      clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --t-d2:      clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem);
  --t-d3:      clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --t-body:    1.0625rem;
  --t-read:    clamp(1.15rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-small:   0.9375rem;
  --t-label:   0.6875rem;

  /* Rhythm */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --section:   clamp(4rem, 8vw, 7.5rem);
  --measure:   66ch;

  /* Materials */
  --radius:     2px;          /* letterpress, not app-store */
  --shadow-sm:  0 1px 2px rgba(70, 54, 36, 0.05);
  --shadow-md:  0 12px 28px -14px rgba(70, 54, 36, 0.22);
  --shadow-lg:  0 30px 60px -28px rgba(70, 54, 36, 0.32);

  /* Motion */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --fast:      160ms;
  --base:      240ms;

  /* Layers */
  --z-grain:  90;
  --z-header: 60;
  --z-drawer: 70;
  --z-skip:   100;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

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

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

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

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

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

/* Focus — visible, on-brand, never removed */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-olive :focus-visible { outline-color: var(--cream); }

/* --------------------------------------------------------------------------
   3. Texture — a whisper of paper grain over the whole page.
   Fixed + pointer-events:none so it never repaints during scroll.
   -------------------------------------------------------------------------- */

/* Deliberately NOT mix-blend-mode: that promotes the whole page into one
   blended compositing layer and makes every scroll frame expensive. A flat
   low-opacity noise tile reads the same and costs nothing. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide   { max-width: 1440px; }
.wrap--narrow { max-width: 780px; }

.section       { padding-block: var(--section); }
.section--tight{ padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section--deep { background: var(--paper-deep); }

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -150%;
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  background: var(--olive);
  color: var(--cream);
  padding: 0.75rem 1.5rem;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: translate var(--base) var(--ease);
}
.skip:focus { translate: -50% 0; }

/* --------------------------------------------------------------------------
   5. Typography helpers
   -------------------------------------------------------------------------- */

.script {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Sacramento sits high in its em box; nudge optical baseline. */
.script { padding-block: 0.12em; }

.display  { font-size: var(--t-d1); }
.display-2{ font-size: var(--t-d2); }
.display-3{ font-size: var(--t-d3); }

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}

.lede {
  font-family: var(--serif);
  font-size: var(--t-read);
  font-weight: 500;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 54ch;
}

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose a {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--clay-deep) 40%, transparent);
  transition: text-decoration-color var(--fast) var(--ease);
}
.prose a:hover { text-decoration-color: var(--clay-deep); }

.heart { display: inline-block; width: 0.72em; height: 0.72em; color: var(--clay); vertical-align: 0.06em; }

/* A tall botanical accent standing in a section's side margin.
   Decorative only — hidden as soon as space gets tight. */
.deco {
  position: absolute;
  color: var(--clay);
  opacity: 0.55;
  pointer-events: none;
}
.deco--right {
  right: clamp(0.5rem, 3.5vw, 4rem);
  top: 50%;
  translate: 0 -50%;
  width: clamp(72px, 8vw, 108px);
  aspect-ratio: 1 / 3;
}
@media (max-width: 1099px) { .deco--right { display: none; } }

/* A small botanical rule: hairline — sprig — hairline */
.rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--clay);
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.rule svg { width: 34px; height: 12px; flex: none; }
.rule--left::before  { display: none; }
.rule--left          { justify-content: flex-start; }
.rule--left::after   { max-width: 90px; flex: 0 0 90px; }

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--base) var(--ease),
              border-color var(--base) var(--ease),
              color var(--base) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid  { background: var(--olive); color: var(--cream); }
.btn--solid:hover { background: var(--olive-deep); }

.btn--ghost  { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--olive); color: var(--olive); background: color-mix(in srgb, var(--olive) 5%, transparent); }

.btn--cream  { background: var(--cream); color: var(--olive-deep); }
.btn--cream:hover { background: #fff; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* Text link with a rule that grows from the left */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.35rem;
}
.more svg { width: 20px; height: 8px; color: var(--clay); transition: transform var(--base) var(--ease); }
.more::after {
  content: "";
  position: absolute;
}
.more { position: relative; }
.more::after {
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--clay);
  transition: width var(--base) var(--ease);
}
.more:hover::after { width: 100%; }
.more:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Deckled paper — torn-edge card, as on the brand journal
   -------------------------------------------------------------------------- */

.deckle { position: relative; isolation: isolate; }
.deckle > * { position: relative; z-index: 1; }
.deckle::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 0;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
@supports (filter: url("#deckle-edge")) {
  .deckle::before { filter: url("#deckle-edge"); }
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 84px;
  padding-block: 0.75rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.brand svg { color: var(--clay); }
.brand__mark { width: 38px; height: 46px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__the {
  font-family: var(--sans);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.28rem;
}
.brand__name {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--script);
  font-size: 1.55rem;
  color: var(--ink);
  margin-top: -0.16rem;
  margin-left: 0.1rem;
}

.nav { display: none; margin-inline-start: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(0.7rem, 1.5vw, 1.4rem); list-style: none; }
.nav a, .nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.15rem;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  white-space: nowrap;
  transition: color var(--base) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease);
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .caret { width: 9px; height: 6px; color: var(--ink-faint); transition: transform var(--base) var(--ease); }
.nav [aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Dropdown */
.menu { position: relative; }
.menu__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  translate: -50% 0;
  min-width: 232px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 0.5rem;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* visibility flips instantly on open and only after the fade on close, so it
     is never interpolated — an element mid-interpolation cannot take focus. */
  transition: opacity var(--base) var(--ease),
              transform var(--base) var(--ease),
              visibility 0s linear var(--base);
}
.menu[data-open="true"] .menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--base) var(--ease),
              transform var(--base) var(--ease),
              visibility 0s;
}
.menu__panel a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  letter-spacing: 0.12em;
  border-radius: var(--radius);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.menu__panel a::after { display: none; }
.menu__panel a:hover { background: var(--olive-pale); color: var(--ink); }
.menu__panel svg { width: 17px; height: 17px; color: var(--clay); flex: none; }

.socials { display: none; align-items: center; gap: 0.15rem; flex: none; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  color: var(--ink-faint);
  border-radius: var(--radius);
  transition: color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.socials a:hover { color: var(--olive); background: var(--olive-pale); }
.socials svg { width: 17px; height: 17px; }

.burger {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.burger svg { width: 19px; height: 13px; }

@media (min-width: 1100px) {
  .nav, .socials { display: flex; }
  .burger { display: none; }
  .socials { margin-inline-start: 1.1rem; padding-inline-start: 1.1rem; border-inline-start: 1px solid var(--line); }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--paper);
  padding: 1.25rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5%);
  /* See .menu__panel — visibility is stepped, never interpolated, so the close
     button is focusable the instant the drawer opens. */
  transition: opacity var(--base) var(--ease),
              transform var(--base) var(--ease),
              visibility 0s linear var(--base);
}
.drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--base) var(--ease),
              transform var(--base) var(--ease),
              visibility 0s;
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.drawer__close { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius); }
.drawer__close svg { width: 16px; height: 16px; }
.drawer nav ul { list-style: none; margin-top: 1.5rem; }
.drawer nav li + li { border-top: 1px solid var(--line); }
.drawer nav a {
  display: block;
  padding: 1.05rem 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
}
.drawer nav a span {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
.drawer__socials { display: flex; gap: 0.5rem; margin-top: 2rem; }
.drawer__socials a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.drawer__socials svg { width: 18px; height: 18px; }
body[data-locked="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88dvh, 780px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--paper-warm);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* The video sits directly over the still in identical framing and cross-fades
   in once it is genuinely playing, so there is never a flash or a jump. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
  object-position: 62% 10%;
  transform: scale(1.05);
}
.hero__video[data-ready="true"] { opacity: 1; }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(100deg, rgba(58, 44, 28, 0.44) 0%, rgba(58, 44, 28, 0.16) 44%, rgba(58, 44, 28, 0) 68%),
    linear-gradient(0deg, rgba(251, 247, 240, 0.9) 0%, rgba(251, 247, 240, 0) 22%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(3.5rem, 8vw, 6rem); }

.hero__card {
  max-width: 29rem;
  background: var(--card);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  /* Pulled toward the left edge so the mug in the video stays in view; the
     torn edge is allowed to just kiss the edge of the screen. Margins, not
     transform — the reveal animation owns this element's transform. */
  margin-left: -3.5rem;
  margin-top: 3rem;
}
/* When the card is torn paper, the ::before layer supplies the ground. */
.hero__card.deckle { background: transparent; }
.hero__eyebrow { max-width: 36ch; margin-bottom: 1.15rem; line-height: 1.75; }
.hero__title { font-size: var(--t-script); margin-bottom: 0.4rem; white-space: nowrap; }
.hero__title .heart { width: 0.4em; height: 0.4em; vertical-align: 0.5em; margin-left: 0.1em; }
.hero__body { color: var(--ink-soft); max-width: 42ch; margin-bottom: 1.35rem; }
.hero__sig {
  font-family: var(--script);
  font-size: 1.75rem;
  color: var(--clay-deep);
  margin-bottom: 1.75rem;
}

/* Between tablet and phone the full shift would push the torn edge off the
   left of the screen — ease it in rather than jumping. */
@media (max-width: 900px) {
  .hero__card { margin-left: -1rem; margin-top: 2rem; }
}

@media (max-width: 640px) {
  .hero__card {
    margin-left: 0;
    margin-top: 0;
    max-width: 100%;
  }
  .hero__media img { object-position: 68% 50%; }
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(58, 44, 28, 0.34) 0%, rgba(58, 44, 28, 0.1) 40%),
      linear-gradient(0deg, rgba(251, 247, 240, 0.94) 0%, rgba(251, 247, 240, 0) 26%);
  }
}

/* --------------------------------------------------------------------------
   10. Section headings
   -------------------------------------------------------------------------- */

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.head__title { font-family: var(--script); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1; }
.head__title .heart { width: 0.34em; height: 0.34em; vertical-align: 0.42em; }
.head p { color: var(--ink-soft); max-width: 46ch; margin-top: 0.5rem; }
.head--centre { flex-direction: column; align-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   11. Entry cards — lead + rail, not four identical boxes
   -------------------------------------------------------------------------- */

.lede-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 940px) {
  .lede-grid { grid-template-columns: 1.28fr 1fr; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
}

.card { display: block; }
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
  aspect-ratio: 4 / 3;
  margin-bottom: 1.35rem;
}
.card__media img, .card__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__media img, .card:hover .card__media svg { transform: scale(1.035); }
.card__tag {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 1;
  background: var(--olive);
  color: var(--cream-soft);
  padding: 0.5rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.card__meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex: none; }
.card__title {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem);
  margin-bottom: 0.55rem;
  transition: color var(--base) var(--ease);
}
.card:hover .card__title { color: var(--olive); }
.card__excerpt { color: var(--ink-soft); font-size: var(--t-small); max-width: 48ch; margin-bottom: 1rem; }

/* Rail — compact entries stacked with hairlines */
.rail { list-style: none; }
.rail li + li { border-top: 1px solid var(--line); }
.rail__item { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; padding-block: 1.4rem; align-items: start; }
.rail li:first-child .rail__item { padding-top: 0; }
.rail__thumb { aspect-ratio: 1; overflow: hidden; background: var(--paper-warm); }
.rail__thumb img, .rail__thumb svg { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.rail__item:hover .rail__thumb img, .rail__item:hover .rail__thumb svg { transform: scale(1.05); }
.rail__title {
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.25;
  margin-block: 0.3rem 0.35rem;
  transition: color var(--base) var(--ease);
}
.rail__item:hover .rail__title { color: var(--olive); }
.rail__excerpt { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.6; }
@media (min-width: 500px) { .rail__item { grid-template-columns: 118px 1fr; gap: 1.4rem; } }

/* Archive grid */
.grid-entries { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (min-width: 640px)  { .grid-entries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-entries { grid-template-columns: repeat(3, 1fr); } }
.grid-entries .card__title { font-size: 1.45rem; }
.grid-entries .card__media { aspect-ratio: 3 / 2; margin-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   12. Categories — a 1px lattice, no boxes
   -------------------------------------------------------------------------- */

.categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (min-width: 620px)  { .categories { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .categories { grid-template-columns: repeat(6, 1fr); } }

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0.75rem;
  background: var(--paper);
  text-align: center;
  transition: background-color var(--base) var(--ease);
}
.section--deep .category { background: var(--paper-deep); }
.category:hover { background: var(--olive-pale); }
.category svg { width: 40px; height: 40px; color: var(--clay); transition: color var(--base) var(--ease), transform var(--base) var(--ease); }
.category:hover svg { color: var(--olive); transform: translateY(-2px); }
.category__name { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink); }
.category__note { font-family: var(--script); font-size: 1.15rem; color: var(--ink-faint); line-height: 1; }

/* --------------------------------------------------------------------------
   13. About / split sections
   -------------------------------------------------------------------------- */

.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 0.92fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

.figure { position: relative; }
.figure img, .figure svg { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-warm); }
.figure--wide img, .figure--wide svg { aspect-ratio: 5 / 4; }

/* Handwritten note pinned to a photo */
.note {
  position: absolute;
  left: clamp(-1rem, -2vw, -2rem);
  bottom: clamp(-1.25rem, -3vw, -2.25rem);
  width: clamp(9rem, 16vw, 11.5rem);
  padding: 1.5rem 1.15rem 1.25rem;
  background: var(--card);
  box-shadow: var(--shadow-md);
  rotate: -3.5deg;
  font-family: var(--script);
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--ink-soft);
  text-align: center;
}
.note::before {
  content: "";
  position: absolute;
  top: -0.65rem; left: 50%;
  translate: -50% 0;
  width: 3.6rem; height: 1.35rem;
  background: color-mix(in srgb, var(--clay) 26%, transparent);
  rotate: -2deg;
}
@media (max-width: 560px) { .note { display: none; } }

/* --------------------------------------------------------------------------
   14. Scripture band
   -------------------------------------------------------------------------- */

.verse { text-align: center; }
.verse blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.05rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}
.verse cite { display: block; margin-top: 1.35rem; font-style: normal; }
.verse .rule { max-width: 220px; margin: 0 auto 1.75rem; }

/* --------------------------------------------------------------------------
   15. Newsletter band
   -------------------------------------------------------------------------- */

.band {
  position: relative;   /* anchors the botanical flourish in the corner */
  background: var(--olive);
  color: var(--cream);
  overflow: hidden;
}

/* Botanical flourish grown from the brand sprig, tucked into the band's
   corner the way it is in the brand imagery. Injected by site.js. */
.band__deco {
  position: absolute;
  right: clamp(0.5rem, 2vw, 2rem);
  bottom: -52px;
  width: clamp(58px, 6vw, 84px);
  aspect-ratio: 1 / 3;
  color: var(--cream);
  opacity: 0.26;
  transform: rotate(9deg);
  pointer-events: none;
}
@media (max-width: 860px) { .band__deco { display: none; } }
.band__grid { display: grid; align-items: stretch; }
@media (min-width: 860px) { .band__grid { grid-template-columns: 0.85fr 1.15fr; } }
.band__media { position: relative; min-height: 220px; }
.band__media img, .band__media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__body { padding: clamp(2.5rem, 5vw, 4.25rem) var(--gutter); }
@media (min-width: 860px) { .band__body { padding-inline: clamp(2.5rem, 5vw, 4.5rem); } }
.band__title { font-family: var(--script); font-size: clamp(2.1rem, 1.6rem + 1.9vw, 3rem); color: var(--cream); line-height: 1; }
.band__title .heart { color: var(--cream-soft); width: 0.32em; height: 0.32em; vertical-align: 0.45em; }
.band p { color: var(--cream-soft); max-width: 44ch; margin-top: 0.85rem; }
.band .label { color: var(--cream-soft); }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */

.form { margin-top: 1.75rem; }
.form__row { display: grid; gap: 0.85rem; }
@media (min-width: 620px) { .form__row--3 { grid-template-columns: 1fr 1fr auto; align-items: start; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.on-olive .field > label { color: var(--cream-soft); }

.input {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--t-small);
  transition: border-color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--ink-faint) 72%, transparent); }
.input:hover { border-color: var(--clay); }
.input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 18%, transparent); }
.on-olive .input { border-color: transparent; }
.on-olive .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 40%, transparent); }
textarea.input { min-height: 150px; resize: vertical; line-height: 1.65; }

.field__error {
  font-size: 0.8125rem;
  color: #8E3B2E;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0;
}
.on-olive .field__error { color: #F6D9C9; }
.field__error svg { width: 14px; height: 14px; flex: none; }
.input[aria-invalid="true"] { border-color: #8E3B2E; }
.on-olive .input[aria-invalid="true"] { border-color: #F6D9C9; box-shadow: 0 0 0 2px #F6D9C9; }

.form__note { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 1rem; }
/* Not faded — at 13px this needs the full 4.5:1 against the olive band. */
.on-olive .form__note { color: var(--cream-soft); }

.form__status {
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.form__status[data-show="true"] { display: flex; }
.form__status svg { width: 20px; height: 20px; color: var(--olive); flex: none; margin-top: 2px; }
.on-olive .form__status { background: color-mix(in srgb, var(--olive-deep) 70%, transparent); border-color: color-mix(in srgb, var(--cream) 30%, transparent); color: var(--cream); }
.on-olive .form__status svg { color: var(--cream); }

/* Button busy state */
.btn[data-busy="true"] .btn__label { opacity: 0.6; }
.spinner { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; display: none; }
.btn[data-busy="true"] .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   17. Archive controls
   -------------------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1.35rem;
  border-block: 1px solid var(--line);
}
.chip {
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  transition: background-color var(--base) var(--ease), border-color var(--base) var(--ease), color var(--base) var(--ease);
}
.chip:hover { border-color: var(--olive); color: var(--olive); }
.chip[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: var(--cream); }

.search { position: relative; margin-inline-start: auto; min-width: min(100%, 16rem); }
.search svg { position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; }
.search .input { padding-inline-start: 2.5rem; }

.results-count { margin-block: 1.75rem 0; font-size: var(--t-small); color: var(--ink-faint); }

.empty { text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem); }
.empty svg { width: 76px; height: 76px; color: var(--line-strong); margin: 0 auto 1.5rem; }
.empty h3 { font-size: var(--t-d3); margin-bottom: 0.6rem; }
.empty p { color: var(--ink-soft); max-width: 38ch; margin-inline: auto; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   18. Article
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--clay);
  z-index: calc(var(--z-header) + 1);
}

.article__head { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.article__meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1.25rem; }
.article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.article__title { font-size: var(--t-d1); margin-bottom: 1.15rem; }
.article__standfirst { font-family: var(--serif); font-style: italic; font-size: var(--t-read); color: var(--ink-soft); max-width: 48ch; margin-inline: auto; }

.article__hero { margin-block: clamp(2rem, 4vw, 3rem); }
.article__hero img, .article__hero svg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-warm); }
.article__hero figcaption { margin-top: 0.85rem; font-size: 0.8125rem; color: var(--ink-faint); text-align: center; font-style: italic; }

.entry-body { font-family: var(--serif); font-size: var(--t-read); font-weight: 500; line-height: 1.78; color: #3A3129; }
.entry-body > * { max-width: 34em; margin-inline: auto; }
.entry-body p { margin-bottom: 1.15em; }
.entry-body h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  margin-block: 2.2em 0.7em;
  font-weight: 500;
}
.entry-body h3 {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block: 2.4em 0.9em;
}
.entry-body a {
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.entry-body strong { font-weight: 600; color: var(--ink); }
.entry-body em { font-style: italic; }
.entry-body ul, .entry-body ol { margin-block: 0 1.4em; padding-inline-start: 1.3em; }
.entry-body li { margin-bottom: 0.5em; }
.entry-body ul li::marker { color: var(--clay); }
.entry-body ol li::marker { color: var(--clay); font-family: var(--sans); font-size: 0.8em; }

.entry-body blockquote {
  margin: 2em auto;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--clay);
  font-style: italic;
  color: var(--ink-soft);
}
.entry-body blockquote cite { display: block; margin-top: 0.7rem; font-family: var(--sans); font-style: normal; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.entry-body figure { margin-block: 2.4em; max-width: 100%; }
.entry-body figure img, .entry-body figure svg { width: 100%; }
.entry-body figcaption { margin-top: 0.8rem; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-faint); text-align: center; }

/* Recipe / notes callout */
.callout {
  max-width: 34em;
  margin: 2.4em auto;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--paper-deep);
  border-top: 2px solid var(--clay);
}
.callout h3 { margin-top: 0 !important; }
.callout ul { margin-bottom: 0; }
.callout, .callout li { font-family: var(--sans); font-size: var(--t-small); line-height: 1.7; color: var(--ink-soft); }

.article__foot { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.25rem; border-top: 1px solid var(--line); }
.share { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.share a, .share button {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: color var(--base) var(--ease), border-color var(--base) var(--ease), background-color var(--base) var(--ease);
}
.share a:hover, .share button:hover { color: var(--olive); border-color: var(--olive); background: var(--olive-pale); }
.share svg { width: 16px; height: 16px; }

.pager { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper); transition: background-color var(--base) var(--ease); }
.pager a:hover { background: var(--paper-deep); }
.pager .label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.pager .label svg { width: 18px; height: 8px; color: var(--clay); }
.pager strong { display: block; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; line-height: 1.25; }
.pager .next { text-align: right; }
.pager .next .label { justify-content: flex-end; }

/* Author card */
.author {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--paper-deep);
  margin-top: clamp(3rem, 6vw, 4rem);
}
@media (min-width: 620px) { .author { grid-template-columns: 116px 1fr; gap: 2rem; } }
.author__portrait { width: 116px; aspect-ratio: 1; overflow: hidden; background: var(--paper-warm); }
.author__portrait img, .author__portrait svg { width: 100%; height: 100%; object-fit: cover; }
.author p { font-size: var(--t-small); color: var(--ink-soft); margin-block: 0.5rem 0.9rem; max-width: 52ch; }

/* --------------------------------------------------------------------------
   19. Timeline (about page)
   -------------------------------------------------------------------------- */

.timeline { list-style: none; position: relative; margin-top: 2.5rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 0.55rem; bottom: 0.55rem; width: 1px; background: var(--line-strong); }
.timeline li { position: relative; padding-inline-start: 2.15rem; padding-bottom: 2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--clay);
}
.timeline li[data-now]::before { background: var(--clay); }
.timeline h3 { font-family: var(--serif); font-size: 1.28rem; font-weight: 400; margin-bottom: 0.3rem; }
.timeline p { font-size: var(--t-small); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--paper-deep); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 780px) { .footer__grid { grid-template-columns: 1.35fr 1fr 1fr; gap: 3rem; } }
.footer__blurb { color: var(--ink-soft); font-size: var(--t-small); max-width: 34ch; margin-top: 1.1rem; }
.footer h4 { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--sans); margin-bottom: 1.1rem; }
.footer ul { list-style: none; display: grid; gap: 0.7rem; }
.footer ul a { font-size: var(--t-small); color: var(--ink-soft); transition: color var(--base) var(--ease); }
.footer ul a:hover { color: var(--olive); }
.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.footer__base p { font-size: 0.8125rem; color: var(--ink-faint); }
.footer__base .socials { display: flex; }

/* --------------------------------------------------------------------------
   21. Motion — entrances only, and only when welcome
   -------------------------------------------------------------------------- */

/* Scoped to .js (set by icons.js before the page renders) so that if scripting
   is off — or a script errors — the content is simply visible rather than
   invisible forever. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@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;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Handwriting

   The script headings are written out from JavaScript (initHandwriting in
   site.js): one virtual pen sweeps each line at constant speed, dragging a
   soft slanted ink edge through every word in a single unbroken stroke.
   All hiding happens in JS after the page is parsed, so with scripting off
   (or a script error) the text is simply visible. The .ww spans below are
   the word wrappers the engine drives.
   -------------------------------------------------------------------------- */

@media print {
  .ww {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .heart { opacity: 1 !important; transform: none !important; }
}

/* Illustrations breathe very gently. On cards the animation sits on the
   frame, not the image, so the hover zoom on the image still works. */
@keyframes breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.01) translateY(-2px); }
}

.figure img,
.card__media {
  animation: breathe 6s ease-in-out infinite;
  transform-origin: bottom center;
}

/* The ladybug that potters along the bottom of the home page.
   Below the header (60) and the grain (90), so she walks under the paper
   texture and never over the menu. */
.ladybug {
  position: fixed;
  top: 0;
  left: 0;
  width: 21px;
  height: 25px;
  z-index: 55;
  pointer-events: none;
}
/* On phones the walk is switched off in JS, so hide her entirely rather
   than leaving her parked in the corner. */
@media (max-width: 699px) {
  .ladybug { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ladybug { display: none; }
  .figure img,
  .card__media { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .progress { display: none; }
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.stack > * + * { margin-top: var(--stack, 1.5rem); }
.centre { text-align: center; }
.mt-auto { margin-top: auto; }
[hidden] { display: none !important; }

@media print {
  .header, .footer, .band, .grain, .progress, .pager, .share, .drawer { display: none !important; }
  body { background: #fff; }
  .entry-body { font-size: 11pt; }
}