/* ==========================================================================
   The writings of Mark Horton
   A quiet, literary site — built to be read, and to last.
   No web fonts are loaded: the type is drawn from the reader's own system,
   so the site stays fast and will keep rendering correctly for decades.
   ========================================================================== */

:root {
  /* Every colour below is sampled from the photograph on the front page —
     Mark at his typewriter. Nothing here was invented:
       paper   the light coming through his window
       ink     the deepest shadow under the desk
       accent  the red bandana on his head
       gold    the lamp and the wood of the desk
       indigo  his sweater
     Each text pairing was checked for contrast; the muted tones were darkened
     from their sampled values so they stay readable. */
  --paper:      #f6ecd8;
  --paper-2:    #eee0c6;
  --paper-3:    #e4d3b3;
  --ink:        #2c1a1d;
  --ink-2:      #5d403a;
  --ink-3:      #7e594b;
  --accent:     #a8452e;
  --accent-2:   #c2543a;
  --gold:       #7d5b33;
  --indigo:     #524b5d;
  --hair:       #ddcab0;
  --shadow:     rgba(64, 38, 26, 0.18);
  --paper-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23t)' opacity='0.16'/%3E%3C/svg%3E");
  /* a wash laid over the sheet, rather than a colour that hides it */
  --wash:  rgba(96, 62, 26, 0.055);
  --wash-2: rgba(96, 62, 26, 0.10);

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
           "Georgia", "Times New Roman", serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Helvetica, Arial, sans-serif;

  --measure: 38rem;      /* the reading column */
  --wide:    74rem;      /* the layout column  */

  --step--1: clamp(0.84rem, 0.80rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.28vw, 1.22rem);
  --step-1:  clamp(1.30rem, 1.18rem + 0.55vw, 1.60rem);
  --step-2:  clamp(1.62rem, 1.36rem + 1.10vw, 2.30rem);
  --step-3:  clamp(2.05rem, 1.55rem + 2.10vw, 3.30rem);
  --step-4:  clamp(2.60rem, 1.60rem + 4.40vw, 5.60rem);
}

/* Dark — "candlelight". Warmer and a little brighter than before, so it still
   feels like him rather than like a cellar. Chosen with the toggle, or by
   anyone whose device asks for dark and who hasn't chosen for themselves. */
/* The same photograph after dark: the shadow tones become the page, the
   window light becomes the text. */
:root[data-theme="dark"] {
  --paper:      #241719;
  --paper-2:    #2e1f21;
  --paper-3:    #392729;
  --ink:        #f3e7d3;
  --ink-2:      #cdb8a1;
  --ink-3:      #9f8776;
  --accent:     #e6907a;
  --accent-2:   #f4a992;
  --gold:       #d3a468;
  --indigo:     #a99cb5;
  --hair:       #4a3335;
  --shadow:     rgba(0, 0, 0, 0.6);
  --paper-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23t)' opacity='0.10'/%3E%3C/svg%3E");
  --wash:  rgba(255, 236, 210, 0.045);
  --wash-2: rgba(255, 236, 210, 0.08);
}

/* after dark the marks in the pulp are pale, not dark */
:root[data-theme="dark"] body {
  background-image: url("/paper-dark.jpg");
  background-blend-mode: screen;
}

/* Light is the default for everyone, whatever their device is set to.
   Dark is only ever chosen deliberately, with the toggle in the header. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* The sheet the site is printed on. This is a *background*, not an overlay:
     it sits behind everything, so it travels with the page as you scroll and
     never lays texture across Mark's photographs. */
  background-color: var(--paper);
  /* A photograph of real kraft paper, reduced to light and shade only and
     tiled seamlessly. The colour comes from --paper underneath it, so the
     sheet always matches the palette and one file serves both themes.
     It is a background, so it scrolls with the page and never lies over
     Mark's photographs. */
  background-image: url("/paper.jpg");
  background-size: 1100px 1100px;
  background-blend-mode: multiply;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.72;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: rgba(168, 135, 74, 0.28); }



a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

main { flex: 1 0 auto; }

/* Keyboard users land here first. It inverts the page colours so it is always
   strongly legible, in either theme. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.2rem; z-index: 100;
}
.skip:focus { left: 0; }

.band-inner, .head-inner, .foot-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: clamp(1.2rem, 5vw, 3rem);
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.68rem;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
}

.linkish {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.95rem 2.4rem;
  border-radius: 1px;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.button:hover { background: var(--accent); color: var(--paper); }

/* ---- Reveal on scroll ----------------------------------------------------
   Deliberately scoped to .js: if JavaScript never runs, every word of Mark's
   is still on the page. The animation is an enhancement, never a gate.      */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Header -------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 1.5rem 0;
  transition: background-color 0.35s ease, padding 0.35s ease,
              border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-head.scrolled {
  padding: 0.75rem 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--hair);
}
.head-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-size: 1.22rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand-handle {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.28rem;
}
.site-nav a {
  font-family: var(--sans);
  color: var(--ink-2);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: 1.8rem;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.site-nav { display: flex; align-items: baseline; flex-wrap: wrap; }

/* Four sections plus the toggle will not fit across a phone in one line,
   so below this width they wrap and sit closer together. */
@media (max-width: 34rem) {
  .site-nav {
    gap: 0.8rem 1.15rem;
    justify-content: flex-start;
    margin-top: 0.6rem;
  }
  .site-nav a { margin-left: 0; font-size: 0.68rem; }
  .theme-toggle { margin-left: 0; padding: 0.35rem 0.5rem; }
}
.theme-toggle {
  margin-left: 1.5rem;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle .t-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .t-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .t-moon { display: inline; }
.page-home .site-head:not(.scrolled) .theme-toggle {
  color: #f3ebdf;
  border-color: rgba(243, 235, 223, 0.45);
}

/* On the home page the header floats over the photograph. A soft dark veil
   sits behind it so the wordmark and links stay legible over a bright photo. */
.page-home .site-head { position: fixed; left: 0; right: 0; }
.page-home .site-head:not(.scrolled)::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 190%;
  background: linear-gradient(to bottom,
    rgba(14, 11, 8, 0.62) 0%,
    rgba(14, 11, 8, 0.34) 45%,
    rgba(14, 11, 8, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.page-home .site-head:not(.scrolled) .head-inner { position: relative; }
.page-home .site-head:not(.scrolled) .brand-name {
  color: #fdf8f0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}
.page-home .site-head:not(.scrolled) .site-nav a {
  color: #f3ebdf;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.page-home .site-head:not(.scrolled) .brand-handle {
  color: rgba(247, 240, 230, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
.page-home .site-head:not(.scrolled) .site-nav a:hover,
.page-home .site-head:not(.scrolled) .site-nav a.active {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  animation: slowzoom 26s ease-out forwards;
}
@keyframes slowzoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
}
/* The photograph is bright and busy — a window, a lamp, pale walls — so a
   single soft gradient will not hold the title. Three layers do the work:
   a gentle overall darkening so highlights cannot blow out the type; a band
   at the top for the navigation; and a deep, tall plinth at the foot of the
   frame that the words sit squarely inside. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(14, 10, 7, 0.30), rgba(14, 10, 7, 0.30)),
    linear-gradient(to bottom,
      rgba(12, 9, 6, 0.62) 0%,
      rgba(12, 9, 6, 0.20) 16%,
      rgba(12, 9, 6, 0) 26%),
    linear-gradient(to top,
      rgba(10, 7, 5, 0.95) 0%,
      rgba(10, 7, 5, 0.92) 20%,
      rgba(10, 7, 5, 0.78) 34%,
      rgba(10, 7, 5, 0.45) 48%,
      rgba(10, 7, 5, 0.12) 60%,
      rgba(10, 7, 5, 0) 70%);
}
.hero-content {
  position: relative;
  padding: 0 1.5rem clamp(3.25rem, 7vh, 5rem);
  color: #fdfaf5;
  max-width: 60rem;
}
.hero-eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.85rem, 0.62rem + 0.95vw, 1.35rem);
  color: #fdfaf5;
  margin: 0 0 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 22px rgba(0, 0, 0, 0.85);
}
.hero-name {
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fffdf9;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 4px 40px rgba(0, 0, 0, 0.8);
}
.hero-years {
  font-family: var(--sans);
  letter-spacing: 0.3em;
  font-size: 0.92rem;
  color: #fbf6ee;
  margin: 1.5rem 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 18px rgba(0, 0, 0, 0.85);
}
.hero-handle {
  font-style: italic;
  font-size: var(--step-1);
  color: #f6d3b8;
  margin: 1.6rem 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 18px rgba(0, 0, 0, 0.8);
}
.hero-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
}
.hero-cue span {
  display: block;
  width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, transparent, rgba(246, 239, 228, 0.7));
}

/* ---- Bands --------------------------------------------------------------- */
.band { padding: clamp(4rem, 11vh, 8rem) 0; }
.band-epigraph {
  background: var(--wash);
  border-block: 1px solid var(--hair);
  text-align: center;
}
.epigraph { margin: 0; }
.epigraph p {
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 auto;
  max-width: 30ch;
  text-wrap: balance;
}
.epigraph cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- The welcome letter on the home page --------------------------------
   Mark's own introduction, set like a letter rather than an article.        */
.band-welcome { padding-top: clamp(3.5rem, 9vh, 6rem); }
.welcome-letter {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 3.25rem);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 2px;
  box-shadow: 0 18px 42px var(--shadow);
}
.welcome-letter .piece-body { font-size: 1.02em; }
.welcome-letter .piece-body > p { margin: 0 0 1.4em; }
/* a letter doesn't open with a drop cap */
.welcome-letter .piece-body > p.lede::first-letter { all: unset; }
/* "Yours," / "Horton" at the end */
.welcome-letter .piece-body > p:last-child {
  font-size: 1.5em;
  font-style: italic;
  color: var(--accent);
  margin: 0.1em 0 0;
  line-height: 1.2;
}
.welcome-letter .piece-body > p:nth-last-child(2) { margin-bottom: 0.2em; }
.welcome-source {
  margin: 2.2rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  text-align: center;
}

/* Why this site exists, and the sign-up, together in one breath. */
.band-purpose {
  background: var(--wash);
  border-block: 1px solid var(--hair);
  text-align: center;
}
.band-purpose .subscribe-form { margin-top: 2.4rem; }
.band-purpose .band-cta { margin-top: 1.6rem; }

.band-intro { text-align: center; }
.intro-lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.band-cta { margin: 2.8rem 0 0; text-align: center; }

.band-latest { background: var(--wash); border-block: 1px solid var(--hair); }
.latest { display: block; color: inherit; max-width: 46rem; }
.latest-title {
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  transition: color 0.25s ease;
}
.latest:hover .latest-title { color: var(--accent); }
.latest-sub {
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink-2);
  margin: 0.7rem 0 0;
}
.latest-meta {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1.4rem 0 0;
}
.latest-excerpt {
  color: var(--ink-2);
  margin: 1.4rem 0 0;
  max-width: 52ch;
}
.latest .linkish { display: inline-block; margin-top: 1.8rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2.2rem 1.8rem;
  background: var(--paper);
  color: inherit;
  transition: background-color 0.3s ease;
}
.card:hover { background: var(--paper-3); }
.card-date {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card-title { font-size: var(--step-1); line-height: 1.2; text-wrap: balance; }
.card-sub { font-style: italic; color: var(--ink-2); font-size: 0.96rem; }

/* ---- Subscribe ----------------------------------------------------------- */
.band-subscribe {
  background: var(--paper-2);
  border-block: 1px solid var(--hair);
  text-align: center;
}
.subscribe-title {
  font-size: var(--step-2);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}
.subscribe-lede {
  color: var(--ink-2);
  max-width: 38ch;
  margin: 1rem auto 0;
  text-wrap: pretty;
}
.subscribe-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin: 2rem auto 0;
  max-width: 30rem;
}
.subscribe-form input[type="email"] {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 2px;
}
.subscribe-form input[type="email"]::placeholder { color: var(--ink-3); }
.subscribe-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}
.subscribe-form button {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.subscribe-form button:hover { background: var(--accent-2); border-color: var(--accent-2); }
.subscribe-note {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 1.2rem auto 0;
  font-style: italic;
}
.hp { position: absolute; left: -9999px; }
.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;
}

/* ---- Page heads ---------------------------------------------------------- */
.page-head {
  padding: clamp(6rem, 16vh, 10rem) 0 clamp(2rem, 5vh, 3.5rem);
  text-align: center;
  border-bottom: 1px solid var(--hair);
}
.page-title {
  font-size: var(--step-3);
  font-weight: 400;
  margin: 0;
  line-height: 1.05;
  text-wrap: balance;
}
.page-lede {
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--step-1);
  margin: 1rem 0 0;
}

/* ---- Writings: a short contents panel beside the full list ---------------
   The large entries stay, because they are lovely to browse. This is for
   when you already know what you are looking for.                          */
.writings-layout { display: block; }

@media (min-width: 64rem) {
  .writings-layout {
    display: grid;
    grid-template-columns: 15.5rem 1fr;
    gap: 0 3.5rem;
    align-items: start;
  }
  .writings-nav { position: sticky; top: 6rem; }
  .navigator { max-height: calc(100vh - 9rem); overflow: auto; }
}

.navigator {
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: var(--paper-2);
  margin-bottom: 2.5rem;
}
.navigator > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid transparent;
}
.navigator[open] > summary { border-bottom-color: var(--hair); }
.navigator > summary::-webkit-details-marker { display: none; }
.nav-title {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.nav-count {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nav-body { padding: 1rem 1.2rem 1.3rem; }

.nav-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.chip {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.nav-list, .nav-parts { list-style: none; margin: 0; padding: 0; }
.nav-list > li + li { margin-top: 0.15rem; }
.nav-list a {
  display: block;
  padding: 0.45rem 0;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
}
.nav-list a:hover { color: var(--accent); text-decoration: none; }
.nav-t { display: block; font-size: 0.95rem; line-height: 1.25; }
.nav-d {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.15rem;
}
.nav-group > a .nav-t { color: var(--ink); }
.nav-parts {
  margin: 0.2rem 0 0.5rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--hair);
}
.nav-parts .nav-t { font-size: 0.85rem; }
.nav-parts a { padding: 0.3rem 0; }
[data-themes][hidden] { display: none !important; }

/* ---- The list of writings ------------------------------------------------ */
.entries { list-style: none; margin: 0; padding: 0; }
.entry { border-bottom: 1px solid var(--hair); }
.entry:first-child { border-top: 1px solid var(--hair); }
.entry a {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0 2rem;
  align-items: start;
  padding: 2.6rem 0;
  color: inherit;
  transition: background-color 0.3s ease, padding-inline 0.3s ease;
}
.entry a:hover {
  background: var(--paper-2);
  padding-inline: 1.5rem;
}
.entry-num {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  padding-top: 0.7rem;
}
.entry-title {
  display: block;
  font-size: var(--step-2);
  line-height: 1.12;
  text-wrap: balance;
  transition: color 0.25s ease;
}
.entry a:hover .entry-title { color: var(--accent); }
.entry-sub {
  display: block;
  font-style: italic;
  color: var(--ink-2);
  margin-top: 0.35rem;
}
.entry-excerpt {
  display: block;
  color: var(--ink-3);
  font-size: 0.95rem;
  margin-top: 0.9rem;
  max-width: 54ch;
}
.entry-meta {
  text-align: right;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.7rem;
  white-space: nowrap;
}
.entry-time { display: block; margin-top: 0.4rem; opacity: 0.75; }
.entry-empty { color: var(--ink-2); font-style: italic; padding: 3rem 0; }

.entry a > *, .entry-head > * { min-width: 0; }

@media (max-width: 44rem) {
  .entry a { grid-template-columns: 1fr; gap: 0; padding: 2rem 0; }
  .entry-num, .entry-meta { text-align: left; padding-top: 0; }
  .entry-num { margin-bottom: 0.5rem; }
  .entry-meta { margin-top: 1rem; }
  .entry-time { display: inline; margin-left: 0.8rem; }
  /* a date range like "December 21, 2025 – December 25, 2025" must be free to
     wrap on a phone, or it forces the whole column wider than the screen */
  .entry-meta { white-space: normal; }
}

/* ---- Reading a piece ----------------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 60;
}

.piece {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(5rem, 13vh, 8rem) clamp(1.2rem, 5vw, 2rem) 0;
}
.piece-head { text-align: center; margin-bottom: 3.5rem; }
.piece-meta {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.4rem;
}
.piece-title {
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.piece-subtitle {
  font-style: italic;
  color: var(--ink-2);
  font-size: var(--step-1);
  margin: 0.9rem 0 0;
}
.piece-part {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.3rem 0 0;
}
.piece-rule {
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 2.4rem;
}

/* Optional illustration at the head of a piece. */
.plate {
  margin: 0 0 3rem;
}
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hair);
  box-shadow: 0 16px 34px var(--shadow);
}
.plate figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-3);
}

/* A serial: one story, several instalments. */
.entry-series-tag,
.card-part,
.latest-part,
.pn-part {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.55rem;
}
.latest-part { font-size: 0.68rem; margin-top: 0.8rem; }

.entry-series .entry-head {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: 0 2rem;
  align-items: start;
  padding: 2.6rem 0 1.4rem;
}
.entry-series .entry-title-link { color: inherit; }
.entry-series .entry-title-link:hover .entry-title { color: var(--accent); }

.parts {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0 0 0 6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.parts a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--ink-2);
  background: var(--paper);
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.parts a:hover {
  border-color: var(--gold);
  color: var(--accent);
  background: var(--paper-2);
  text-decoration: none;
}
.pnum {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pdate {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

@media (max-width: 44rem) {
  .entry-series .entry-head { grid-template-columns: 1fr; gap: 0; padding: 2rem 0 1rem; }
  .parts { padding-left: 0; }
}

/* Who keeps this site — small print at the foot of the About page. */
.about-colophon {
  clear: both;
  max-width: 32rem;
  margin: 4.5rem auto 0;
  text-align: center;
}
.colophon-rule {
  width: 3rem;
  height: 1px;
  background: var(--hair);
  margin: 0 auto 2rem;
}
.about-colophon p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-3);
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
.about-colophon p::first-letter { all: unset; }

.piece-body { font-size: 1.06em; }
.piece-body > p { margin: 0 0 1.55em; text-wrap: pretty; }
.piece-body > p.lede::first-letter {
  font-size: 3.6em;
  float: left;
  line-height: 0.78;
  padding: 0.06em 0.09em 0 0;
  color: var(--accent);
}

/* His notes to the reader, set before a story begins. */
.piece-body > p.preamble {
  font-style: italic;
  color: var(--ink-3);
  font-size: 0.94em;
  line-height: 1.6;
  margin: 0 0 1.2em;
  padding-left: 1.1em;
  border-left: 1px solid var(--hair);
}
.piece-body > p.preamble + p.preamble { margin-top: -0.4em; }
.piece-body h2 {
  font-size: var(--step-2);
  font-weight: 400;
  margin: 2.8em 0 0.9em;
  line-height: 1.2;
}
.piece-body h3 {
  font-size: var(--step-1);
  font-weight: 400;
  margin: 2.4em 0 0.8em;
}

.piece-body blockquote {
  margin: 2.4em 0;
  padding: 0;
  text-align: center;
  color: var(--ink);
}
.piece-body blockquote p {
  font-style: italic;
  font-size: 1.12em;
  line-height: 1.62;
  margin: 0;
}

/* His bracketed asides — set as true marginalia on a wide screen. */
.marginalia {
  display: block;
  margin: 2em 0;
  padding: 1.3em 1.5em;
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  font-size: 0.94em;
  line-height: 1.62;
  color: var(--ink-2);
}
.aside-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7em;
}

@media (min-width: 78rem) {
  .marginalia {
    float: right;
    clear: right;
    width: 15rem;
    margin: 0.4em -17.5rem 1.6em 2rem;
    background: none;
    border-left: none;
    border-top: 1px solid var(--hair);
    padding: 1em 0 0;
    font-size: 0.86em;
    line-height: 1.58;
  }
}

/* Ingredients and steps. */
.piece-body ul.list {
  margin: 0 0 1.6em;
  padding: 0;
  list-style: none;
}
.piece-body ul.list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.55em;
  line-height: 1.62;
}
.piece-body ul.list li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.72em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--gold);
}

.recipe .piece-body > p.lede::first-letter { all: unset; }
.recipe .piece-body h2 {
  font-size: var(--step-1);
  color: var(--accent);
  margin: 2.2em 0 0.7em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--hair);
}

.piece-body hr.ornament-rule {
  border: 0;
  margin: 2.8em auto;
  text-align: center;
}
.piece-body hr.ornament-rule::before {
  content: "\2766";
  color: var(--gold);
  font-size: 1.1rem;
}

.piece-foot { margin: 4rem 0 0; text-align: center; }
.signature { color: var(--gold); font-size: 1.3rem; }
.colophon {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-3);
  margin: 1.4rem 0 0;
}

/* prev / next */
.prevnext {
  max-width: var(--wide);
  margin: 5rem auto 0;
  padding-inline: clamp(1.2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
  border-block: 1px solid var(--hair);
}
.pn {
  display: block;
  padding: 2.4rem 2rem;
  background: var(--paper);
  color: inherit;
  transition: background-color 0.3s ease;
}
.pn:hover { background: var(--paper-2); }
.pn.next { text-align: right; }
.pn-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.pn-title { font-size: var(--step-1); line-height: 1.2; }
.pn:hover .pn-title { color: var(--accent); }
.pn-empty { background: var(--paper); }
@media (max-width: 40rem) {
  .prevnext { grid-template-columns: 1fr; }
  .pn.next { text-align: left; }
  .pn-empty { display: none; }
}

.back-all { text-align: center; margin: 3rem 0 0; }

/* ---- About: the scrapbook -------------------------------------------------
   Mark made things. The About page is laid out like one of his albums: prose
   down the middle, photographs pasted into the margins at an angle, some held
   with tape, some with paper corners.                                        */
/* The About page opens closer to the top, so the first photograph is on
   screen without having to scroll for it. */
.page-about .page-head {
  padding: clamp(3.5rem, 8vh, 5.5rem) 0 clamp(1.5rem, 3vh, 2.25rem);
}
.scrapbook {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vh, 2.75rem) clamp(1.2rem, 5vw, 3rem) 0;
}
.scrapbook-inner { position: relative; }
.about-body {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.06em;
}
.about-body > p { margin: 0 0 1.55em; text-wrap: pretty; }
.about-body > p:first-of-type::first-letter { all: unset; }

.snap {
  margin: 0.6rem auto 2.4rem;
  width: min(17rem, 78%);
  transform: rotate(var(--tilt, -2deg));
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
}
.snap-photo {
  position: relative;
  padding: 0.6rem 0.6rem 1.5rem;      /* a print's white border */
  background: linear-gradient(160deg, #fdfaf3 0%, #f4ecdc 100%);
  box-shadow: 0 14px 30px var(--shadow), 0 2px 5px rgba(0, 0, 0, 0.16);
}
.snap-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.snap figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: "Bradley Hand", "Segoe Script", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink-2);
}
.snap:hover { transform: rotate(0deg) scale(1.02); }

/* a strip of tape across the top corner */
.mount-tape .snap-photo::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  width: 5.5rem;
  height: 1.6rem;
  transform: translateX(-50%) rotate(-2.5deg);
  background: linear-gradient(to bottom,
    rgba(226, 208, 160, 0.55), rgba(206, 186, 138, 0.42));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* little paper corners, the kind that come in a photo album */
.mount-corners .snap-photo::before,
.mount-corners .snap-photo::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(135deg, rgba(70, 55, 35, 0.5) 48%, transparent 50%);
}
.mount-corners .snap-photo::before { top: 0; left: 0; }
.mount-corners .snap-photo::after {
  bottom: 0; right: 0;
  transform: rotate(180deg);
}

/* On a wide screen the photographs sit out in the margins beside the prose.
   This needs real room: the text column plus a photograph and its gutter on
   each side. Below that the pictures stack in the flow instead. */
@media (min-width: 78rem) {
  .snap { width: 16.5rem; }
  .snap-left {
    float: left;
    clear: left;
    margin-left: -19.5rem;
    margin-right: 2rem;
  }
  .snap-right {
    float: right;
    clear: right;
    margin-right: -19.5rem;
    margin-left: 2rem;
  }
}

.snap-gallery {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem 2.5rem;
  margin: 4rem auto 0;
  padding-top: 3rem;
  border-top: 1px solid var(--hair);
}
.snap-gallery .snap {
  float: none;
  margin: 0 0 1.5rem;
  width: 15rem;
}
@media (min-width: 62rem) {
  .snap-gallery .snap { margin: 0 0 1.5rem; }
}

/* ---- The Table: memories, and notes on individual pieces ----------------- */
.band-table-intro {
  background: var(--wash);
  border-block: 1px solid var(--hair);
  text-align: center;
}
.table-lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0 auto 1.2em;
  text-wrap: pretty;
}
.table-lede:last-child { margin-bottom: 0; }

/* An actual table. The surface runs down the page and the memories are seated
   along both sides, each with a place laid at the edge. */
.band-table { padding-top: clamp(2.5rem, 6vh, 4rem); }
.table-scene { position: relative; padding: 3.5rem 0 0; }

.table-top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 5.5rem;
  width: 7rem;
  border-radius: 3.5rem;
  background-color: var(--paper-3);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(90, 58, 30, 0.055) 0 1px, transparent 1px 7px),
    linear-gradient(90deg,
      rgba(70, 44, 20, 0.16) 0%,
      rgba(255, 250, 240, 0.30) 38%,
      rgba(255, 250, 240, 0.14) 62%,
      rgba(70, 44, 20, 0.16) 100%);
  box-shadow: inset 0 0 0 1px var(--hair), 0 3px 22px var(--shadow);
}
.table-head {
  position: relative;
  text-align: center;
  margin: 0 0 2.5rem;
}

/* The china. Drawn from above, as if you were standing over the table. */
.china-pc { display: block; overflow: visible; }
.china-pc .body {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 1;
}
.china-pc .cup {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 0.8;
}
.china-pc .rim, .china-pc .knob {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}
.china-pc .knob { fill: var(--gold); stroke: none; }
.china-pc .cut, .china-pc .hdl, .china-pc .lid {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.china-pc .lid { fill: var(--paper); }

.teapot { width: 5.25rem; margin: 0 auto; }
.setting { width: 6rem; }

.place {
  position: absolute;
  top: 0.35rem;
  filter: drop-shadow(0 2px 3px rgba(60, 38, 18, 0.22));
}

.memories { position: relative; list-style: none; margin: 0; padding: 0; }
.memory { position: relative; margin-bottom: 3.25rem; }

/* the line running from each seat to the place laid for them */
.memory::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  height: 1px;
  width: 1.6rem;
  background: var(--hair);
}

.seat {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 8px 22px var(--shadow);
}

@media (min-width: 56rem) {
  .memory { width: calc(50% - 5.9rem); }
  .memory:nth-child(odd) { margin-left: 0; text-align: right; }
  .memory:nth-child(even) { margin-left: calc(50% + 5.9rem); text-align: left; }
  /* pull each right-hand guest up alongside the one opposite, so the two
     sides interleave instead of queueing */
  .memory:nth-child(even) { margin-top: -5.5rem; }
  .memory { margin-bottom: 2.5rem; }
  .memory:nth-child(odd)::before  { right: -1.6rem; }
  .memory:nth-child(even)::before { left: -1.6rem; }
  .memory:nth-child(odd) .place   { right: -7.6rem; }
  .memory:nth-child(even) .place  { left: -7.6rem; }
  .memory:nth-child(odd) .place .setting  { transform: scaleX(-1); }
  .memory:nth-child(odd) .memory-by { justify-content: flex-end; }
}

/* On a narrow screen the table runs down the side, like a bench. */
@media (max-width: 55.99rem) {
  .table-top { left: 1.25rem; transform: none; width: 2.5rem; border-radius: 1.25rem; }
  .table-head { text-align: left; padding-left: 0.35rem; }
  .memory { margin-left: 6.75rem; }
  .memory::before { left: -1.6rem; }
  .memory .place { left: -7.5rem; }
  .memory .place .setting { width: 5.4rem; }
}

.memory-body p { margin: 0 0 1em; text-wrap: pretty; }
.memory-body p:last-child { margin-bottom: 0; }
.memory-body p::first-letter { all: unset; }
.memory-by {
  margin: 1.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
}

.table-foot { position: relative; text-align: center; padding-top: 1rem; }
.still-room {
  display: inline-block;
  position: relative;
  font-style: italic;
  color: var(--ink-3);
  background: var(--paper);
  padding: 0.6rem 1.4rem;
  margin: 0;
}
@media (max-width: 55.99rem) {
  .table-foot { text-align: left; padding-left: 5.5rem; }
}
.memory-name {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.memory-date, .response-date {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.band-responses {
  background: var(--wash);
  border-top: 1px solid var(--hair);
  padding-block: clamp(3rem, 8vh, 5rem);
}
.responses-inner { max-width: 38rem; margin: 0 auto; }
.responses-inner .eyebrow { text-align: center; }
.responses { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.response {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--hair);
}
.response:first-child { border-top: 1px solid var(--hair); }
.response-body p { margin: 0 0 0.7em; font-size: 0.98rem; }
.response-body p:last-child { margin-bottom: 0; }
.response-body p::first-letter { all: unset; }
.response-by {
  margin: 0.6rem 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem;
}
.response-name {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* the form for leaving a note */
.note-wrap { max-width: 38rem; margin: 3.5rem auto 0; }
.note-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.8rem;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 2px;
}
.band-responses .note-form { background: var(--paper); }
.note-form-title {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.3rem;
}
.note-form input[type="text"],
.note-form input[type="email"],
.note-form textarea {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.75rem 0.95rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: 2px;
  width: 100%;
}
.note-form textarea { resize: vertical; line-height: 1.6; }
.note-form ::placeholder { color: var(--ink-3); }
.note-form input:focus, .note-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.note-form button {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.8rem 1.9rem;
  color: var(--paper);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.note-form button:hover { background: var(--accent-2); border-color: var(--accent-2); }
.note-form-note {
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-3);
}

/* ---- His drawings --------------------------------------------------------
   Mounted square on pale board with a wide margin, rather than taped down at
   an angle like the snapshots. The tilt says "keepsake"; a straight mount and
   a generous mat says "this is a piece of work". They are his, so they get
   the second treatment.                                                     */
.band-daubs {
  background: var(--wash);
  border-block: 1px solid var(--hair);
  padding-block: clamp(3.5rem, 9vh, 6rem);
}
.daubs-head { text-align: center; max-width: 42rem; margin: 0 auto 3.5rem; }
.daubs-title {
  font-size: var(--step-2);
  font-weight: 400;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.daubs-lede {
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.daubs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 58rem;
  margin: 0 auto;
}
@media (min-width: 52rem) {
  .daubs-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  /* the last one runs the full width — it is the widest drawing */
  .daub:last-child { grid-column: 1 / -1; max-width: 34rem; justify-self: center; }
}

.daub { margin: 0; }
.daub-mount {
  /* the mat board */
  background: #fbf7ee;
  padding: clamp(0.9rem, 2.2vw, 1.6rem);
  border: 1px solid var(--hair);
  box-shadow: 0 10px 30px var(--shadow), 0 2px 4px rgba(0, 0, 0, 0.07);
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1),
              box-shadow 0.4s ease;
}
.daub-mount img {
  display: block;
  width: 100%;
  height: auto;
}
.daub:hover .daub-mount {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px var(--shadow), 0 3px 6px rgba(0, 0, 0, 0.09);
}
.daub figcaption {
  margin-top: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.daub-title {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.daub-date {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* in the dark theme the board is a warm grey, not glaring white */
:root[data-theme="dark"] .daub-mount { background: #efe6d6; }

.scrapbook-tail { padding-top: clamp(3rem, 7vh, 4.5rem); }

/* A slim sign-up immediately below the photograph, for readers who decide
   straight away. Deliberately quiet — one line and a field — so it does not
   compete with Mark's own letter directly beneath it. */
.band-signup-strip {
  background: var(--wash);
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(1.4rem, 3vh, 2.1rem);
}
.band-signup-strip .band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.6rem;
}
.strip-line {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink-2);
  font-style: italic;
}
.band-signup-strip .subscribe-form {
  margin: 0;
  max-width: 26rem;
  flex: 1 1 20rem;
}
.band-signup-strip .subscribe-form input[type="email"] { padding: 0.6rem 0.9rem; }
.band-signup-strip .subscribe-form button { padding: 0.62rem 1.3rem; }

@media (max-width: 40rem) {
  .band-signup-strip .band-inner { flex-direction: column; align-items: stretch; }
  .strip-line { text-align: center; }
  /* the container is a column here, so "flex-grow" would stretch the form
     VERTICALLY and drag the field and button to full height with it */
  .band-signup-strip .subscribe-form { flex: 0 0 auto; max-width: none; }
}

/* the smaller print on the confirm page */
.page-note {
  max-width: 42ch;
  margin: 1.4rem auto 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-3);
}

/* ---- Footer -------------------------------------------------------------- */
.site-foot {
  flex-shrink: 0;
  margin-top: clamp(5rem, 12vh, 8rem);
  padding: clamp(3.5rem, 9vh, 5.5rem) 0 clamp(3rem, 7vh, 4.5rem);
  border-top: 1px solid var(--hair);
  background: var(--wash);
  text-align: center;
}
/* The foot of the page, franked like the corner of an envelope.
   The SVGs carry their own size and colours, so this only refines them. */
.franking {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.9rem;
  opacity: 0.62;
}
.franking .stamp { width: 3.4rem; height: auto; }
.franking .postmark {
  width: 4.1rem;
  height: auto;
  margin: 0 -0.9rem;
  position: relative;
  z-index: 1;
}
.franking .stamp:first-child { transform: rotate(-4deg); }
.franking .stamp:last-child  { transform: rotate(3.5deg); }

.stamp .paper { fill: var(--paper-2); }
.stamp .perf  { stroke: var(--paper); }
.stamp .frame { stroke: var(--ink-3); }
.stamp .art   { stroke: var(--accent); }
.stamp .art circle { fill: var(--accent); }
.stamp .cap   { fill: var(--ink-3); font-family: var(--sans); letter-spacing: 0.06em; }
.postmark g   { stroke: var(--ink-3); }

@media (max-width: 30rem) {
  .franking .stamp { width: 2.9rem; }
  .franking .postmark { width: 3.4rem; }
}

.foot-mark { color: var(--gold); font-size: 1.2rem; margin-bottom: 1.6rem; }
.foot-name { margin: 0; font-size: var(--step-1); letter-spacing: 0.02em; }
.foot-years {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot-note {
  margin: 1.6rem 0 0;
  font-style: italic;
  color: var(--ink-3);
  font-size: 0.92rem;
}

/* ---- Print — so his writing can be kept on paper ------------------------- */
@media print {
  .site-head, .site-foot, .prevnext, .back-all, .progress, .hero-cue, .skip { display: none; }
  body { background: #fff; background-image: none; color: #000; font-size: 11.5pt; }
  .piece { max-width: none; padding: 0; }
  .marginalia { float: none; width: auto; margin: 1em 0; border: 1px solid #bbb; padding: 0.8em; }
  a { color: #000; text-decoration: none; }
  .reveal { opacity: 1; transform: none; }
}