/* Ink by Cal
   The home page opens on a copper plate under raking light, with Cal's griffin engraved into it.
   Scrolling stays native. Motion uses only transform and opacity, shadows stay small, and no large
   element is masked, so every page scrolls smoothly in every browser.
   Sections: fonts, tokens, base, masthead, menu, plate, section heads, selected, states,
   gallery, desk, booking, card, questions, almanac, colophon, viewer, small pages, reveal. */

/* Fonts */

@font-face { font-family: 'Mazius'; src: url('../fonts/mazius-display-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mazius'; src: url('../fonts/mazius-display-extraitalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ink Stipple'; src: url('../fonts/ink-stipple-germen.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* Tokens */

@property --shown { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --paper: #ece4d4;
  --paper-hi: #f3ede1;
  --paper-lo: #e2d8c4;
  --ink: #1c1814;
  --ink-soft: #4a4138;
  --ink-mute: #665a4d;
  --rule: rgba(28, 24, 20, 0.16);
  --copper: #c27a48;
  --copper-hi: #e2a273;
  --copper-text: #8a4320;
  --ground: #16120f;
  --verd: #0f2824;
  --bed-green: #0a1d1a;
  --patina: #8fc2ae;
  --on: #ece2cf;
  --on-mute: #a7b5ab;
  --on-ground-mute: #b3a48f;

  --display: 'Mazius', serif;
  --text: 'Instrument Sans', system-ui, sans-serif;
  --stipple: 'Ink Stipple', var(--display);

  --pad: clamp(18px, 4.2vw, 88px);
  --gut: clamp(14px, 1.8vw, 36px);
  --bed: clamp(8px, 1vw, 18px);
  --mast-h: 90px;
  --stage-h: max(100svh, 600px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);

  --step-0: clamp(1.0625rem, 0.98rem + 0.28vw, 1.32rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  --step-3: clamp(2.1rem, 1.3rem + 3vw, 5rem);
  --step-4: clamp(3rem, 1.4rem + 6.2vw, 9rem);

  --paper-bg: url('../img/paper.png') 0 0 / 512px 512px, var(--paper);
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper-bg); scroll-padding-top: calc(var(--mast-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--step-0) / 1.6 var(--text);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, blockquote, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
i, em { font-style: italic; }
::selection { background: var(--copper); color: var(--paper-hi); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 2px; }

.skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 3px; transform: translateY(-200%); transition: transform 0.3s var(--ease); }
.skip:focus { transform: none; }

/* Line art is drawn with masks, so one drawing can be copper, ink or foil. Masks stay on small or
   still elements. */
.art {
  display: block;
  aspect-ratio: var(--ar);
  background: currentColor;
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}

.sec-title {
  font: 400 var(--step-4) / 0.92 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sec-title i { font-size: 0.94em; letter-spacing: -0.01em; color: var(--copper-text); }
.sec-lede { font-size: var(--step-1); line-height: 1.45; max-width: 34ch; text-wrap: pretty; color: var(--ink-soft); }

/* Icons: engraved line work drawn once in a sprite, colored by the text around them. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico-arrow { width: 3.4em; height: 0.85em; transition: transform 0.6s var(--ease); }
.ico-arrow.is-back { transform: scaleX(-1); }
.ico-arrow.is-out { width: 2.4em; transform: rotate(-28deg) translateY(-0.15em); }
.ico-foil { width: 30px; height: 30px; transition: transform 0.6s var(--ease); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font: 400 var(--step-1) / 1.2 var(--display);
  text-decoration: none;
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.arrow-link:hover { background-size: 30% 1px; }
.arrow-link:hover .ico-arrow { transform: translateX(8px); }
.arrow-link:hover .ico-arrow.is-out { transform: rotate(-28deg) translate(6px, -0.15em); }

/* Masthead: a floating bar inside the plate's edge. It never moves; once the page scrolls it gains
   a surface and a fine copper edge of its own. */

.mast {
  --mast-bar: 66px;
  position: fixed;
  top: calc(var(--bed) + 8px);
  left: calc(var(--bed) + 8px);
  right: calc(var(--bed) + 8px);
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--mast-bar);
  padding: 0 clamp(14px, 1.6vw, 26px);
  border-radius: 12px;
  color: var(--ink);
  transition: color 0.4s var(--ease), background-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.mast[data-tone='dark'] { color: var(--on); }
.mast.is-solid { background: rgba(240, 233, 220, 0.95); box-shadow: inset 0 0 0 1px rgba(28, 24, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 22px -16px rgba(40, 24, 10, 0.45); }
.mast.is-solid[data-tone='dark'] { background: rgba(14, 36, 32, 0.95); box-shadow: inset 0 0 0 1px rgba(214, 140, 90, 0.32), inset 0 1px 0 rgba(255, 214, 170, 0.12), 0 10px 22px -16px rgba(0, 0, 0, 0.6); }
.mast-mark { display: inline-flex; align-items: center; gap: 12px; justify-self: start; text-decoration: none; white-space: nowrap; }
.mast-mark { --foil: linear-gradient(115deg, #4a230f 0%, #8a4320 30%, #c27a48 50%, #8a4320 70%, #4a230f 100%); }
.mast[data-tone='dark'] .mast-mark, .menu-open .mast-mark { --foil: linear-gradient(115deg, #a3582c 0%, #e2a273 30%, #fbe3c4 50%, #d68a55 70%, #a3582c 100%); }
/* Cal's mark: the card's arched window with the foil bust, at the size of a seal. */
.mast-crest {
  position: relative;
  display: grid;
  place-items: end center;
  width: 38px;
  height: 49px;
  padding: 6px 3px 1px;
  background: rgba(194, 122, 72, 0.08);
  border-radius: 999px 999px 3px 3px;
  box-shadow: inset 0 0 0 1px rgba(138, 67, 32, 0.75), inset 0 0 0 3px rgba(243, 237, 225, 0.0), inset 0 0 0 3.6px rgba(138, 67, 32, 0.4);
  transition: transform 0.9s var(--ease);
}
.mast-crest .art { height: 100%; width: auto; background: var(--foil); background-size: 220% 100%; background-position: 70% 0; transition: background-position 1.2s var(--ease); }
.mast-mark:hover .mast-crest .art { background-position: 0% 0; }
.mast[data-tone='dark'] .mast-crest, .menu-open .mast-crest { box-shadow: inset 0 0 0 1px rgba(226, 162, 115, 0.8), inset 0 0 0 3.6px rgba(226, 162, 115, 0.35); }
.mast-name { font: 400 clamp(1.45rem, 1.15rem + 0.7vw, 1.9rem) / 1 var(--display); letter-spacing: -0.01em; }
.mast-name i { font-size: 0.9em; padding-inline: 0.02em; }
.mast-nav { display: flex; gap: clamp(20px, 2.6vw, 44px); }
.mast-nav a { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding-block: 8px; font: 400 clamp(1.1rem, 0.95rem + 0.35vw, 1.35rem) / 1 var(--display); text-decoration: none; }
.mast-no { font: italic 400 0.875rem / 1 var(--display); color: var(--copper-text); transform: translateY(-0.35em); transition: color 0.3s var(--ease); }
.mast[data-tone='dark'] .mast-no { color: var(--copper-hi); }
.mast-nav a::after {
  content: '';
  position: absolute;
  left: calc(0.875rem + 4px);
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.mast-nav a:hover::after, .mast-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.mast-end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.mast-ig { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 24, 20, 0.22); transition: color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.mast[data-tone='dark'] .mast-ig { box-shadow: inset 0 0 0 1px rgba(236, 226, 207, 0.25); }
.mast-ig svg, .menu-ig svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mast-ig svg .dot, .menu-ig svg .dot { fill: currentColor; stroke: none; }
.mast-ig:hover { color: var(--copper-text); box-shadow: inset 0 0 0 1px currentColor; }
.mast[data-tone='dark'] .mast-ig:hover { color: var(--copper-hi); box-shadow: inset 0 0 0 1px currentColor; }
/* An engraved double rule around the booking link. */
.mast-book {
  padding: 11px 18px 12px;
  font: italic 400 clamp(1.05rem, 0.95rem + 0.25vw, 1.2rem) / 1 var(--display);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 4px;
  outline: 1px solid rgba(28, 24, 20, 0.35);
  outline-offset: -5px;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), outline-color 0.35s var(--ease);
}
.mast[data-tone='dark'] .mast-book { color: var(--copper-hi); outline-color: rgba(226, 162, 115, 0.45); }
.mast-book:hover, .mast-book[aria-current] { background: var(--ink); color: var(--paper-hi); outline-color: rgba(243, 237, 225, 0.4); }
.mast[data-tone='dark'] .mast-book:hover, .mast[data-tone='dark'] .mast-book[aria-current] { background: var(--copper-hi); color: var(--ground); outline-color: rgba(22, 18, 15, 0.35); }
.mast-menu { display: none; min-width: 3.4em; border: 0; background: none; padding: 10px 2px 10px 8px; font: italic 400 1.25rem / 1 var(--display); text-align: right; }
.mast-menu-close { display: none; }
.menu-open .mast-menu-open { display: none; }
.menu-open .mast-menu-close { display: inline; }

@media (max-width: 1100px) {
  .mast-nav { gap: 22px; }
  .mast-no { display: none; }
  .mast-nav a::after { left: 0; }
}
@media (max-width: 960px) {
  .mast { --mast-bar: 58px; grid-template-columns: 1fr auto; gap: 12px; }
  .mast-crest { width: 34px; height: 44px; padding-top: 5px; }
  .js .mast-nav, .js .mast-book { display: none; }
  .js .mast-menu { display: block; }
  .mast-ig { width: 38px; height: 38px; }
  .mast-nav { flex-wrap: wrap; gap: 6px 18px; }
}
html:not(.js) .mast { position: absolute; }
html:not(.js) .mast-nav { grid-column: 1 / -1; }

/* Menu (phones) */

.menu {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 108px calc(var(--pad) + var(--bed)) 36px;
  background: var(--verd);
  color: var(--on);
}
.menu[hidden] { display: none; }
.menu-nav { display: flex; flex-direction: column; gap: 4px; }
.menu-nav a { display: flex; align-items: baseline; gap: 14px; font: 400 clamp(2.4rem, 9vw, 3.6rem) / 1.12 var(--display); text-decoration: none; }
.menu-no { font: italic 400 1.1rem / 1 var(--display); color: var(--copper-hi); min-width: 2.2em; }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; color: var(--on-mute); }
.menu-ig { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.menu-open .mast { color: var(--on); background: transparent; box-shadow: none; }

/* The plate */

.opening { position: relative; }
.plate {
  position: sticky;
  top: 0;
  z-index: 0;
  height: var(--stage-h);
  padding: var(--bed);
  background: var(--verd);
  color: var(--on);
  overflow: hidden;
}
.plate-metal {
  position: relative;
  height: 100%;
  border-radius: clamp(4px, 0.45vw, 9px);
  overflow: hidden;
  background:
    url('../img/grain.png') 0 0 / 256px 256px,
    radial-gradient(130% 100% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%),
    radial-gradient(110% 80% at 72% 38%, rgba(70, 44, 28, 0.55), rgba(70, 44, 28, 0) 62%),
    radial-gradient(90% 70% at 10% 100%, rgba(15, 40, 36, 0.5), rgba(15, 40, 36, 0) 70%),
    linear-gradient(170deg, #1d1612, #110d0b 60%, #0c0a08);
  box-shadow: inset 0 0 0 1px rgba(214, 140, 90, 0.4), inset 0 2px 0 rgba(255, 214, 170, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.5);
}

/* The griffin, engraved backwards as it must be on a plate, under a raking light: one still picture
   with the copper and the light drawn in (scripts/build-images.mjs). */
.plate-art {
  position: absolute;
  right: 5%;
  top: 50%;
  height: 88%;
  aspect-ratio: var(--ar);
  translate: 0 -50%;
  scale: -1 1;
  background: url('../img/art/griffin-plate.svg') center / contain no-repeat;
}
.plate-inscription {
  position: absolute;
  right: 4%;
  bottom: 3.2%;
  font: italic 400 clamp(0.95rem, 0.8rem + 0.3vw, 1.2rem) / 1 var(--display);
  color: rgba(194, 122, 72, 0.6);
  white-space: nowrap;
}
.plate-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(96px, 16vh, 190px) var(--pad) 0;
  pointer-events: none;
}
.plate-head { display: grid; align-content: start; gap: clamp(28px, 5vh, 64px); width: min(52%, 820px); pointer-events: auto; }
/* The inscription: each technique is lettered in its own technique. The words start as linework and
   are shaded in as the page scrolls (--shade, 0 to 1), the way a tattoo is lined, then shaded. */
.plate-lede { display: grid; gap: 0.35em; color: var(--on); }
.pl-row { display: block; }
.pl-row:first-child { font: 400 clamp(3rem, 1rem + 4.6vw, 7.4rem) / 0.95 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.pl-amp { font-style: italic; font-size: 0.8em; color: var(--copper-hi); }
.pl-by { font: 400 clamp(1.5rem, 0.8rem + 1.6vw, 2.9rem) / 1.1 var(--display); color: var(--on); }
.pl-place { font-size: var(--step-0); color: var(--on-mute); }
.tech { position: relative; display: inline-block; padding: 0 0.14em 0.08em; margin: 0 -0.14em -0.08em; }
.tech-etch { font-style: italic; }
.tech-line { color: transparent; -webkit-text-stroke: 1.2px var(--copper-hi); }
.tech-shade {
  position: absolute;
  inset: 0;
  padding: inherit;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  clip-path: inset(0 calc((1 - var(--shade, 1)) * 100%) 0 0);
}
.tech-etch .tech-shade { background-image: repeating-linear-gradient(-38deg, var(--copper-hi) 0 1.4px, transparent 1.4px 3.6px); }
.tech-stip .tech-shade { background-image: radial-gradient(circle, var(--copper-hi) 1.05px, transparent 1.5px), radial-gradient(circle, var(--copper-hi) 0.8px, transparent 1.2px); background-size: 4.2px 4.2px, 4.2px 4.2px; background-position: 0 0, 2.1px 2.1px; }
/* Contents of the page, as in an old book: a dotted leader runs to an arrow down. */
.plate-contents { display: grid; max-width: 440px; border-top: 1px solid rgba(226, 162, 115, 0.22); }
.plate-contents a {
  display: grid;
  grid-template-columns: 2.2em auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0 12px;
  border-bottom: 1px solid rgba(226, 162, 115, 0.22);
  color: var(--on);
  text-decoration: none;
}
.pc-no { font: italic 400 1.05rem / 1 var(--display); color: var(--copper-hi); }
.pc-name { font: 400 clamp(1.15rem, 0.95rem + 0.4vw, 1.45rem) / 1.1 var(--display); }
.pc-dots { align-self: end; height: 2px; margin-bottom: 0.32em; background: radial-gradient(circle, rgba(226, 162, 115, 0.55) 0.8px, transparent 1.2px) 0 0 / 6px 2px repeat-x; transform-origin: left; transition: transform 0.6s var(--ease); }
.plate-contents .ico-arrow { width: 52px; height: 13px; color: var(--copper-hi); align-self: center; }
.plate-contents a:hover .pc-name { color: var(--copper-hi); }
.plate-contents a:hover .ico-arrow { transform: translateX(6px); }
@media (max-height: 820px) and (min-width: 900px) { .plate-contents { display: none; } }
/* Sections reached from the contents land just below the masthead. */
.anchor { position: absolute; left: 0; top: calc(var(--mast-h) + 12px); width: 1px; height: 1px; pointer-events: none; }
/* The light on the name rests over "Cal". The box hugs the letters so the spot stays on the word at any width. */
.wordmark {
  width: fit-content;
  margin: 0 0 0 -0.04em;
  padding-bottom: 0.3em;
  font: 400 clamp(5.4rem, 1rem + 15vw, 25rem) / 0.8 var(--display);
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--copper);
  background: radial-gradient(circle at 82% 30%, #fff2e0 0%, #f2bd8a 9%, #d68a55 22%, #b0653a 42%, #9a552e 64%, #8d4c28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: auto;
}
.wordmark .wm-by, .col-mark .wm-by { font-style: italic; font-size: 0.84em; margin-inline: -0.02em 0.02em; }

/* The film on the plate: a screen holding a still from the film between black bars, framed in copper like
   the photo window on Cal's card, with a seal to play it and its title in the lower bar. Its size comes from
   the plate (a size container): it stays clear of the griffin and above the name. */
.plate-metal { container-type: size; }
.film-tile {
  /* The height left between the inscription and the name (keeping clear of the name's tall letters), as a 16:9 width. */
  --film-room: calc((79cqh - 150px - 22.6vw) * 16 / 9);
  display: block;
  align-self: start;
  width: clamp(240px, min(36vw, var(--film-room)), 520px);
  max-width: 100%;
  color: var(--copper-hi);
  text-decoration: none;
}
.film-screen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: #050403;
  box-shadow: 0 0 0 1px rgba(226, 162, 115, 0.6), 0 0 0 4px #120d0a, 0 0 0 5px rgba(226, 162, 115, 0.3), 0 22px 34px -22px rgba(0, 0, 0, 0.9);
}
/* The still keeps the film's own 12:5 shape; the screen's black shows above and below it. */
.film-screen picture { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.film-screen img { display: block; width: 100%; height: auto; filter: brightness(0.9); transition: filter 0.6s var(--ease); }
.film-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(56px, 19%, 84px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(10, 7, 5, 0.5);
  color: var(--copper-hi);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), scale 0.6s var(--ease);
}
.film-seal .ico-play { display: block; width: 100%; height: 100%; }
.film-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 12.96%; display: flex; justify-content: space-between; align-items: center; padding: 0 3.6%; font: 400 clamp(14px, 1.1vw, 17px) / 1 var(--display); }
.film-title { color: var(--on); }
.film-title i { color: var(--copper-hi); }
.film-len { font-style: italic; color: var(--on-mute); }
.film-tile:hover img, .film-tile:focus-visible img { filter: brightness(1.04); }
.film-tile:hover .film-seal, .film-tile:focus-visible .film-seal { background: var(--copper-hi); color: #1c120b; scale: 1.06; }
.film-tile:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 8px; }
/* The contents share the plate with the film only where both fit beside the griffin; elsewhere the film
   takes their place. The widths below are where the room beside the griffin reaches 260px at each shape. */
.plate-head:has(.film-tile) .plate-contents { display: none; }
@media (min-height: 821px) and (min-aspect-ratio: 16/9) and (min-width: 1270px), (min-height: 821px) and (min-aspect-ratio: 8/5) and (min-width: 1360px), (min-height: 821px) and (min-aspect-ratio: 3/2) and (min-width: 1435px), (min-height: 821px) and (min-aspect-ratio: 4/3) and (min-width: 1600px) {
  .plate-head:has(.film-tile) { width: auto; grid-template-columns: 360px auto; column-gap: 48px; justify-content: start; }
  .plate-head:has(.film-tile) .plate-lede { grid-column: 1 / -1; }
  .plate-head:has(.film-tile) .plate-contents { display: grid; align-self: start; }
  .film-tile { width: clamp(260px, min(95cqw - 61.84cqh - var(--pad) - 440px, 30vw, var(--film-room)), 560px); }
}
.wm-word, .wm-by { display: inline-block; }

/* Section heads */

.sec-head, .page-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 110px);
}
.sec-head .sec-title, .page-head .sec-title { grid-column: 1 / span 7; }
.page-head .page-emblem { grid-column: 7 / span 2; grid-row: 1; align-self: center; justify-self: center; width: clamp(110px, 11vw, 210px); color: var(--copper-text); }
.page-head:has(.page-emblem) .sec-title { grid-column: 1 / span 6; }
.sec-head .sec-lede, .page-head .sec-lede { grid-column: 9 / span 4; }

/* Selected work (home): two groups, each a plate filling the screen, the second sliding over the first.
   Sticky positioning does the stacking, so it scrolls natively. */

.selected { position: relative; z-index: 2; background: var(--bed-green); color: var(--on); padding-top: var(--bed); box-shadow: 0 -1px 0 rgba(214, 140, 90, 0.35); }
.selected::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
/* One of Cal's flash drawings, engraved faintly into each plate. */
.sel-flash { display: none; }
.selected .sec-title i { color: var(--copper-hi); }
.selected .sec-lede { color: var(--on-mute); }
.sel-groups { position: relative; padding-bottom: clamp(60px, 8vw, 140px); }
.sel-group {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gut);
  row-gap: clamp(60px, 9vw, 120px);
  align-items: start;
  padding: clamp(30px, 5vh, 70px) var(--pad);
  background: var(--verd);
}
.sel-item { display: grid; justify-items: start; }
.sel-frame {
  display: block;
  padding: clamp(10px, 1vw, 16px);
  background: var(--paper-hi);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 16px 24px -16px rgba(0, 0, 0, 0.7);
  transition: transform 0.7s var(--ease);
}
.sel-frame picture { aspect-ratio: var(--ar); background: var(--tone); overflow: hidden; }
.sel-frame img { width: 100%; height: 100%; object-fit: cover; }
.sel-frame:hover { transform: translateY(-6px); }
.sel-caption { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(12px, 1.4vw, 22px); align-items: baseline; margin-top: 18px; }
.sel-no { grid-row: span 3; font: 400 clamp(3rem, 1.8rem + 3.4vw, 6rem) / 0.8 var(--stipple); color: var(--patina); }
.sel-title { font: 400 var(--step-2) / 1.05 var(--display); }
.sel-latin { font: italic 400 var(--step-0) / 1.3 var(--display); color: var(--copper-hi); }
.sel-meta { font-size: 0.9375rem; color: var(--on-mute); }
.sel-more { display: flex; justify-content: flex-end; grid-column: 1 / -1; }

@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .sel-no { font-size: 3.2rem; }
  .sel-group { grid-template-columns: 1fr; padding-block: clamp(30px, 6vw, 60px); }
  .sel-group + .sel-group { padding-top: 0; }
  .sel-item, .sel-frame { width: 100%; }
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .sel-groups { padding-bottom: 32svh; }
  .sel-group {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 620px;
    row-gap: 0;
    align-items: center;
    padding: calc(var(--mast-h) + 3svh) var(--pad) 5svh;
  }
  .sel-group-2 { margin-top: 18svh; }
  /* Each group is a plate: rounded, with a fine copper edge, resting on the darker bed. */
  .sel-group {
    top: var(--bed);
    height: calc(100svh - 2 * var(--bed));
    margin-inline: var(--bed);
    border-radius: clamp(8px, 0.8vw, 14px);
    background: radial-gradient(120% 90% at 30% 20%, rgba(143, 194, 174, 0.07), rgba(143, 194, 174, 0) 60%), var(--verd);
    box-shadow: inset 0 0 0 1px rgba(214, 140, 90, 0.3), inset 0 1px 0 rgba(255, 214, 170, 0.14);
  }
  /* The incoming plate casts a soft shadow onto the plate beneath as it slides over. */
  .sel-group + .sel-group::after {
    content: '';
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 100%;
    height: 120px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: radial-gradient(60% 100% at 50% 100%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
  .sel-frame picture { height: var(--h); width: auto; }
  .sel-group-1 .sel-item:nth-child(1 of .sel-item) { grid-column: 1 / span 4; --h: min(56svh, 30vw); }
  .sel-group-1 .sel-item:nth-child(2 of .sel-item) { grid-column: 5 / span 4; justify-self: center; --h: min(46svh, 25vw); margin-top: 14svh; }
  .sel-group-1 .sel-item:nth-child(3 of .sel-item) { grid-column: 9 / span 4; justify-self: end; --h: min(40svh, 23vw); margin-top: -16svh; }
  .sel-group-2 .sel-item:nth-child(1 of .sel-item) { grid-column: 2 / span 5; --h: min(54svh, 32vw); }
  .sel-group-2 .sel-item:nth-child(2 of .sel-item) { grid-column: 8 / span 4; --h: min(40svh, 24vw); margin-top: -12svh; }
  .sel-group-2 .sel-more { position: absolute; right: var(--pad); bottom: 7svh; }
  .sel-flash { display: block; position: absolute; pointer-events: none; color: rgba(226, 162, 115, 0.13); }
  .sel-flash .art { width: 100%; }
  .sel-group-1 .sel-flash { right: 3%; bottom: 4%; width: min(26vw, 46svh); rotate: -8deg; }
  .sel-group-2 .sel-flash { left: 42%; bottom: 4%; width: min(19vw, 34svh); rotate: 6deg; }

}

/* From idea to skin: one drawing in three states */

.states { position: relative; z-index: 2; padding: clamp(110px, 13vw, 220px) var(--pad) clamp(60px, 8vw, 140px); }
.states-stage { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); }
.states-figure {
  grid-column: 1 / span 6;
  position: sticky;
  top: calc(var(--mast-h) + 3vh);
  align-self: start;
  height: min(80svh, 60vw);
  aspect-ratio: 1000 / 1372;
  justify-self: center;
}
.state { position: absolute; inset: 0; }
.state img { width: 100%; height: 100%; object-fit: contain; }
.state-1 { opacity: 0.9; }
.js .state { transition: opacity 0.9s var(--ease); }
.js .state-2, .js .state-3 { opacity: 0; }
.js .states[data-state='2'] .state-1 { opacity: 0.3; }
.js .states[data-state='2'] .state-2 { opacity: 1; }
.js .states[data-state='3'] .state-1, .js .states[data-state='3'] .state-2 { opacity: 0; }
.js .states[data-state='3'] .state-3 { opacity: 1; }
html:not(.js) .state-1, html:not(.js) .state-2 { display: none; }
.steps { grid-column: 8 / span 5; display: block; }
.step { min-height: 72svh; display: grid; align-content: center; gap: 14px; padding-block: 6vh; transition: opacity 0.8s var(--ease); }
/* The last step holds beside the finished drawing for a while before the page moves on. */
.step:last-child { position: sticky; top: 14svh; }
/* Room after the last step for it to hold; a sticky element's own margin would not count. */
.steps::after { content: ''; display: block; height: 62svh; }
.js .step:not(.is-active) { opacity: 0.32; }
.step-no { font: italic 400 clamp(4rem, 2rem + 6vw, 9rem) / 0.8 var(--display); color: var(--copper-text); }
.step-title { font: 400 var(--step-3) / 1 var(--display); letter-spacing: -0.01em; }
.step p:not(.step-no) { max-width: 38ch; color: var(--ink-soft); }
.step a { color: var(--copper-text); text-underline-offset: 3px; }

/* The work (gallery page) */

/* The gallery keeps its own place when a filter changes, so the browser's scroll anchoring stays out of it. */
body.work { overflow-anchor: none; }

.gallery { position: relative; padding: calc(var(--mast-h) + clamp(50px, 8vw, 140px)) var(--pad) clamp(90px, 10vw, 170px); }
.filter-bar {
  position: sticky;
  top: var(--mast-h);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin: 0 calc(var(--pad) * -1) clamp(36px, 4vw, 64px);
  padding: 14px var(--pad) 16px;
  background: var(--paper-bg);
  border-bottom: 1px solid var(--rule);
}
html:not(.js) .filter-bar { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 2vw, 34px); }
.filter {
  position: relative;
  border: 0;
  background: none;
  padding: 6px 0;
  font: 400 var(--step-2) / 1 var(--display);
  color: var(--ink-mute);
  transition: color 0.3s var(--ease);
}
.filter sup { font: 500 0.9375rem / 1 var(--text); margin-left: 0.25em; vertical-align: 0.9em; color: var(--ink-mute); }
.filter:hover, .filter[aria-pressed='true'] { color: var(--ink); }
.filter[aria-pressed='true'] { font-style: italic; }
.filter::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 3px;
  background: var(--copper-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.filter[aria-pressed='true']::after { transform: scaleX(1); }
.filter-count { font: italic 400 var(--step-1) / 1 var(--display); color: var(--ink-mute); }

.grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 64px) var(--gut); }
@media (min-width: 1600px) { .grid { --cols: 4; } }
@media (max-width: 999px) { .grid { --cols: 2; } }
@media (max-width: 560px) { .grid { --cols: 1; } }
.tile[hidden] { display: none; }
.tile { transition: opacity 0.5s var(--ease) calc(var(--d, 0) * 45ms), transform 0.7s var(--ease) calc(var(--d, 0) * 45ms); }
.grid.is-out .tile { opacity: 0; transform: translateY(10px); transition: opacity 0.18s linear, transform 0.18s linear; }
.grid.is-in .tile { opacity: 0; transform: translateY(18px); transition: none; }
.tile-link { display: grid; gap: 14px; text-decoration: none; cursor: zoom-in; }
.tile-frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tone); border-radius: 1px; }
.tile-frame picture { height: 100%; }
.tile-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.tile-link:hover img, .tile-link:focus-visible img { transform: scale(1.04); }
.tile-caption { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.tile-no { grid-row: span 2; font: italic 400 var(--step-1) / 1 var(--display); color: var(--copper-text); }
.tile-title { font: 400 var(--step-1) / 1.15 var(--display); }
.tile-meta { font-size: 0.9375rem; color: var(--ink-mute); }

/* The sketchbook desk */

.desk {
  position: relative;
  background: radial-gradient(60% 50% at 50% 60%, rgba(143, 194, 174, 0.1), rgba(143, 194, 174, 0) 70%), var(--verd);
  color: var(--on);
  padding: clamp(100px, 12vw, 200px) var(--pad) clamp(80px, 10vw, 160px);
  overflow: hidden;
}
.desk .sec-title i { color: var(--copper-hi); }
.desk .sec-lede { color: var(--on-mute); }
.desk-surface { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px var(--gut); }
.sheet-link { display: grid; gap: 14px; text-decoration: none; -webkit-user-drag: none; user-select: none; }
.sheet-link picture { border-radius: 2px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 22px -14px rgba(0, 0, 0, 0.7); }
.sheet-link img { width: 100%; pointer-events: none; -webkit-user-drag: none; }
.sheet-caption { display: flex; gap: 12px; align-items: baseline; font: 400 var(--step-1) / 1.2 var(--display); }
.sheet-no { font-style: italic; color: var(--copper-hi); min-width: 1.6em; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  /* Thirteen sheets scattered over the desk in five columns, rows alternating between the odd and even
     columns, so neighbors never share a column and each sheet clears the one above it with its caption. */
  .js .desk-surface { display: block; height: clamp(760px, 80vw, 2200px); }
  .js .sheet { position: absolute; width: var(--w); left: var(--x); top: var(--y); rotate: var(--r); cursor: grab; touch-action: none; }
  .js .sheet .sheet-link { cursor: inherit; }
  .js .sheet.is-dragging { cursor: grabbing; }
  .js .sheet:nth-child(1) { --x: 1.5%; --y: 0.5%; --w: 17%; --r: -6deg; }
  .js .sheet:nth-child(2) { --x: 22%; --y: 15%; --w: 17%; --r: 4deg; }
  .js .sheet:nth-child(3) { --x: 41%; --y: 0%; --w: 16.5%; --r: -3deg; }
  .js .sheet:nth-child(4) { --x: 61.5%; --y: 17%; --w: 17%; --r: 5deg; }
  .js .sheet:nth-child(5) { --x: 82%; --y: 1.5%; --w: 16%; --r: -4deg; }
  .js .sheet:nth-child(6) { --x: 1%; --y: 34%; --w: 17.5%; --r: 3deg; }
  .js .sheet:nth-child(7) { --x: 21.5%; --y: 49%; --w: 17%; --r: -5deg; }
  .js .sheet:nth-child(8) { --x: 42%; --y: 33%; --w: 16.5%; --r: 4deg; }
  .js .sheet:nth-child(9) { --x: 61%; --y: 50%; --w: 17%; --r: -3deg; }
  .js .sheet:nth-child(10) { --x: 81.5%; --y: 35%; --w: 16.5%; --r: 6deg; }
  .js .sheet:nth-child(11) { --x: 1.5%; --y: 67%; --w: 18%; --r: -4deg; }
  .js .sheet:nth-child(12) { --x: 41%; --y: 68%; --w: 17.5%; --r: 3deg; }
  .js .sheet:nth-child(13) { --x: 80%; --y: 66%; --w: 16%; --r: -6deg; }
  /* Captions wrap within their sheet, so they never run under a neighbor. */
  .js .sheet-caption { position: absolute; left: 0; top: calc(100% + 12px); width: 100%; }
}
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .js .desk-surface { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding: 10px var(--pad) 24px; scrollbar-width: none; }
  .js .desk-surface::-webkit-scrollbar { display: none; }
  .js .sheet { flex: 0 0 min(78vw, 420px); scroll-snap-align: center; }
}

/* Booking */

.book {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  align-items: start;
  background: var(--verd);
  color: var(--on);
  padding: calc(var(--mast-h) + clamp(50px, 7vw, 120px)) var(--pad) clamp(100px, 12vw, 200px);
}
.book-side { grid-column: 1 / span 5; display: grid; gap: clamp(28px, 3vw, 48px); align-content: start; }
.book-side .sec-title i { color: var(--copper-hi); }
.book-side .sec-lede { color: var(--on-mute); }
.book-alt { color: var(--on-mute); max-width: 36ch; }
.book-alt a { color: var(--on); text-underline-offset: 3px; }
.avail-title { font: italic 400 var(--step-1) / 1 var(--display); color: var(--copper-hi); margin-bottom: 16px; }
.avail-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1399px) and (min-width: 1100px), (max-width: 560px) { .avail-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avail-month { display: grid; gap: 6px; padding: 14px 12px 12px; border: 1px solid rgba(236, 226, 207, 0.16); border-radius: 3px; }
.avail-name { font: 400 1.35rem / 1 var(--display); }
.avail-year { font-size: 0.9375rem; color: var(--on-mute); }
.avail-state { display: flex; align-items: center; gap: 7px; font-size: 0.9375rem; color: var(--on-mute); }
.avail-state::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--patina); flex: none; }
.avail-month[data-state='open'] .avail-state::before { background: var(--patina); }
.avail-month[data-state='few'] .avail-state::before { background: linear-gradient(90deg, var(--patina) 50%, transparent 50%); }
.avail-month[data-state='full'] { opacity: 0.55; }
.avail-month[data-state='full'] .avail-state::before { border-color: var(--on-mute); }

.slip-wrap { position: relative; grid-column: 7 / span 6; }
.slip, .slip-done {
  position: relative;
  display: grid;
  gap: 30px;
  padding: clamp(28px, 3.4vw, 56px);
  background: url('../img/paper.png') 0 0 / 512px 512px, var(--paper-hi);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 20px 24px -18px rgba(0, 0, 0, 0.6);
}
.slip::before, .slip-done::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(255, 252, 244, 0.9), inset -1px -1px 0 rgba(120, 96, 66, 0.18);
  pointer-events: none;
}
.slip-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field legend, .field .label { font-size: 0.9375rem; color: var(--ink-soft); padding: 0; }
.opt { color: var(--ink-mute); }
.field input[type='text'], .field input[type='email'], .field input[type='tel'], .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(28, 24, 20, 0.35);
  border-radius: 0;
  background: transparent;
  padding: 8px 0 10px;
  font: 400 1.25rem / 1.4 var(--display);
  transition: border-color 0.3s var(--ease);
}
.field textarea {
  resize: vertical;
  min-height: 9.6em;
  line-height: 2em;
  padding-top: 2px;
  background: repeating-linear-gradient(transparent 0 calc(2em - 1px), rgba(28, 24, 20, 0.14) calc(2em - 1px) 2em);
  background-attachment: local;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--copper-text); box-shadow: 0 1px 0 var(--copper-text); }
.field [aria-invalid='true'] { border-bottom-color: #9c2f1c; }
.field-hint { font-size: 0.9375rem; color: var(--ink-mute); }
.field-error { font-size: 0.9375rem; color: #9c2f1c; }
.size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.size, .chip { position: relative; cursor: pointer; }
.size input, .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size { display: grid; justify-items: center; gap: 4px; padding: 16px 8px 14px; border: 1px solid var(--rule); border-radius: 3px; text-align: center; font-size: 0.9375rem; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.size-dot { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 6px; }
.size-dot::before { content: ''; width: calc(46px * var(--s)); height: calc(46px * var(--s)); border-radius: 50%; border: 1.5px solid var(--ink); background: radial-gradient(circle, var(--ink) 0.7px, transparent 1.1px) 0 0 / 4px 4px; transition: background-color 0.3s var(--ease); }
.size-dot-q::before { border-style: dashed; background: none; }
.size-name { font: 400 1.2rem / 1.1 var(--display); }
.size-eg { font-size: 0.9375rem; line-height: 1.3; color: var(--ink-mute); }
.size:has(input:checked) { border-color: var(--ink); background: rgba(255, 255, 255, 0.45); }
.size:has(input:checked) .size-dot::before { background-color: rgba(194, 122, 72, 0.4); }
.size:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid var(--copper); outline-offset: 3px; }
.style-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip span { display: inline-block; padding: 9px 16px; border: 1px solid var(--rule); border-radius: 3px; font-size: 1rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.chip:has(input:checked) span { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }
.drop {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border: 1px dashed rgba(28, 24, 20, 0.4);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.drop:hover, .drop.is-over { border-color: var(--copper-text); background: rgba(194, 122, 72, 0.08); }
.drop-art { grid-row: span 2; width: 84px; color: var(--copper-text); }
.drop-text { font-size: 1.0625rem; }
.drop-strong { font: 400 1.25rem / 1 var(--display); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.drop-sub { font-size: 0.9375rem; color: var(--ink-mute); }
.drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-input:focus-visible ~ .file-list, .drop:focus-within { outline: 2px solid var(--copper); }
html:not(.js) .drop { display: none; }
html:not(.js) .drop-input { position: static; width: auto; height: auto; opacity: 1; }
.file-list { display: grid; gap: 8px; }
.file-list:empty { display: none; }
.file-list li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; }
.file-list img { width: 44px; height: 44px; object-fit: cover; border-radius: 2px; }
.file-list button { margin-left: auto; border: 0; background: none; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-soft); font-size: 0.9375rem; }
.turnstile[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.slip-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.send {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px 18px 30px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper-hi);
  font: italic 400 1.6rem / 1 var(--display);
  overflow: hidden;
  transition: background-color 0.4s var(--ease);
}
.send .ico-arrow { width: 64px; height: 16px; }
.send:hover { background: var(--copper-text); }
.send:hover .ico-arrow { transform: translateX(6px); }
.send[aria-busy='true'] { pointer-events: none; }
.send[aria-busy='true']::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--copper-hi); animation: sending 1.4s var(--ease-in-out) infinite; transform-origin: left; }
@keyframes sending { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.form-status { font-size: 1rem; color: var(--ink-soft); }
.form-status.is-error { color: #9c2f1c; }
.slip-done { justify-items: start; min-height: 420px; align-content: center; }
.slip[hidden], .slip-done[hidden] { display: none; }
.done-art { width: 170px; color: var(--copper-text); }
.topics legend { font: italic 400 var(--step-1) / 1 var(--display); color: var(--copper-text); margin-bottom: 8px; }
.tattoo-only { display: grid; gap: 30px; }
.tattoo-only[hidden] { display: none; }
.done-title { font: 400 var(--step-4) / 0.95 var(--display); }
.done-text { font-size: var(--step-1); max-width: 30ch; color: var(--ink-soft); }

@media (max-width: 1099px) {
  .book { grid-template-columns: 1fr; gap: 56px; }
  .book-side, .slip-wrap { grid-column: 1; }
}
@media (max-width: 600px) {
  .slip-row.two { grid-template-columns: 1fr; }
  .size-row { grid-template-columns: repeat(2, 1fr); }
}

/* About (home): Cal's card beside his own words. The card is foil-stamped and turns over. */

.about { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); align-items: center; padding: clamp(110px, 13vw, 220px) var(--pad); }
.about-words { grid-column: 7 / span 5; display: grid; gap: 22px; justify-items: start; }
.about-words .statement p { font: 400 var(--step-2) / 1.18 var(--display); color: var(--ink); text-wrap: balance; max-width: 26ch; }
.about-words > p { max-width: 44ch; color: var(--ink-soft); }
.about-card { grid-column: 2 / span 4; display: grid; justify-items: center; }
@media (min-width: 900px) and (max-width: 1279px) {
  .about-card { grid-column: 1 / span 5; }
  .about-words { grid-column: 7 / span 6; }
}
.card-holder { position: relative; width: min(100%, clamp(330px, 27vw, 480px)); perspective: 1400px; container-type: inline-size; }
@media (max-width: 899px) { .card-holder { width: min(88vw, 420px); } }
/* The turn seal sits on the card's corner; the card peeks round now and then to show it turns. */
.card-turn {
  position: absolute;
  right: -22px;
  bottom: -22px;
  z-index: 3;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-hi);
  color: var(--copper-text);
  box-shadow: 0 2px 4px rgba(40, 24, 10, 0.2), 0 8px 14px -8px rgba(40, 24, 10, 0.45);
  transition: transform 0.8s var(--ease), color 0.3s var(--ease);
}
.card-turn .ico-turn { width: 100%; height: 100%; }
.card-turn:hover { color: var(--ink); transform: rotate(-30deg); }
.card-turn[aria-pressed='true'] { transform: rotate(180deg); }
.card-turn[aria-pressed='true']:hover { transform: rotate(150deg); }
.ico-turn { width: 52px; height: 52px; }
@keyframes card-peek { 0%, 100% { transform: none; } 45% { transform: rotateY(-22deg) rotateX(3deg); } }
@keyframes seal-nudge { 0%, 100% { transform: none; } 45% { transform: rotate(-60deg); } }
.card.is-peeking { animation: card-peek 1.3s var(--ease-in-out); }
.card-holder:has(.is-peeking) .card-turn { animation: seal-nudge 1.3s var(--ease-in-out); }
@media (max-width: 899px) {
  .about { grid-template-columns: 1fr; gap: 64px; }
  .about-card, .about-words { grid-column: 1; }
}
.card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease);
  cursor: pointer;
}
.card.is-tilting { transition: transform 0.12s linear; }
.card-inner { position: absolute; inset: 0; transition: transform 1.1s var(--ease-in-out); }
/* The card is drawn flat while it rests, which scrolls cheaply; it becomes 3D only while it tilts or turns. */
.card.is-3d, .card.is-3d .card-inner { transform-style: preserve-3d; }
.card[data-turned='true'] .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  color: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: url('../img/paper.png') 0 0 / 384px 384px, linear-gradient(160deg, #f6f1e7, #ece4d4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(0, 0, 0, 0.22), 0 16px 16px -14px rgba(0, 0, 0, 0.5);
}
/* Copper foil frame: a gradient border cut out with a mask, catching light as the card tilts. */
.card-face::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(115deg, #6a3418 0%, #c27a48 calc(var(--mx) - 30%), #fff0d8 var(--mx), #d08850 calc(var(--mx) + 18%), #5a2d15 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
  pointer-events: none;
}
.card-back { grid-template-rows: 1fr auto auto; padding: 48px 30px 28px; text-align: center; }
.card-portrait { position: relative; min-height: 0; display: grid; place-items: center; }
/* The portrait window: an arch with a fine double rule, holding Cal's photo, or the foil bust until it arrives. */
.card-window {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  padding: 14% 10% 6%;
  overflow: hidden;
  border-radius: 999px 999px 8px 8px;
  background: radial-gradient(80% 60% at 50% 32%, rgba(194, 122, 72, 0.1), rgba(194, 122, 72, 0) 70%), rgba(226, 216, 196, 0.5);
  box-shadow: inset 0 0 0 1px rgba(138, 67, 32, 0.5), inset 0 0 0 5px rgba(243, 237, 225, 0.85), inset 0 0 0 6px rgba(138, 67, 32, 0.28);
}
.card-window:has(.card-photo) { padding: 0; }
.card-window .card-art { height: 100%; width: auto; }
.card-art {
  height: 100%;
  max-height: 100%;
  width: auto;
  background: linear-gradient(115deg, #6a3418 0%, #b06a3a calc(var(--mx) - 34%), #f8dcb8 var(--mx), #c27a48 calc(var(--mx) + 20%), #5a2d15 100%);
}
.card-photo { position: absolute; inset: 0; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) sepia(0.12); }
.card-name { margin-top: 16px; font: 400 clamp(1.5rem, 1.2rem + 0.8vw, 2rem) / 1 var(--display); }
.card-role { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-mute); }
.card-no { position: absolute; right: 28px; top: 22px; font: italic 400 0.9375rem / 1 var(--display); color: var(--copper-text); }
.card-back { transform: rotateY(180deg); }
/* The front, laid out like a game card. Sizes follow the card's width (cqi, from the card holder), so it
   reads the same on every screen. */
.card-front {
  grid-template-rows: auto auto auto 1fr auto auto;
  align-content: start;
  gap: 2cqi;
  padding: 6.4cqi 6.6cqi 5.6cqi;
  font-size: max(14px, 3.9cqi);
  line-height: 1.32;
}
.cb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqi; padding-inline: 0.6cqi; }
.cb-name { font: 400 7.4cqi / 1 var(--display); letter-spacing: -0.01em; }
.cb-years { font: italic 400 max(14px, 3.9cqi) / 1 var(--display); color: var(--copper-text); }
.cb-years-n { font: 400 6.6cqi / 1 var(--display); color: var(--ink); margin-right: 0.15em; }
/* The photo window: a double rule in copper, like the card's arch on the back. */
.cb-photo {
  aspect-ratio: 16 / 9;
  flex: none;
  border-radius: 3px;
  overflow: hidden;
  background: #8a7a68;
  box-shadow: 0 0 0 1.5px #a35a2c, 0 0 0 4px #f3ede1, 0 0 0 5px rgba(138, 67, 32, 0.5);
  margin: 1cqi 1.2cqi 0.6cqi;
}
.cb-photo picture, .cb-photo img { width: 100%; height: 100%; object-fit: cover; }
.cb-kind { font-style: italic; font-family: var(--display); text-align: center; color: var(--ink-mute); padding-block: 0.4cqi 1cqi; border-bottom: 1px solid rgba(138, 67, 32, 0.25); margin-inline: 1.2cqi; }
.cb-moves { display: grid; gap: 2.6cqi; align-content: start; padding: 1.4cqi 1.2cqi 0; }
.cb-move dt { display: flex; align-items: center; gap: 1.6cqi; font: 400 max(15px, 4.6cqi) / 1.1 var(--display); }
.cb-move dd { margin: 0.8cqi 0 0 calc(2 * 5.4cqi + 1.6cqi); color: var(--ink-soft); }
.cb-cost { display: inline-flex; gap: 0.4cqi; width: calc(2 * 5.4cqi); flex: none; }
.cb-cost .ico-foil { width: 5.4cqi; height: 5.4cqi; color: var(--copper-text); }
.cb-flavor { font: italic 400 max(14px, 3.9cqi) / 1.32 var(--display); color: var(--ink-soft); padding: 1.6cqi 1.2cqi 0; border-top: 1px solid rgba(138, 67, 32, 0.25); margin-inline: 1.2cqi; padding-inline: 0; }
.cb-flavor-label { color: var(--copper-text); }
.cb-foot { display: flex; justify-content: flex-start; gap: 0.6em; padding-inline: 1.2cqi; font: italic 400 max(14px, 3.6cqi) / 1 var(--display); color: var(--copper-text); }
/* Narrow cards keep 14px text, which is larger for their size: a wider photo window and tighter spacing
   make the room. */
@container (max-width: 345px) {
  .card-front { gap: 1.4cqi; padding-block: 5.6cqi 4.8cqi; }
  .cb-photo { aspect-ratio: 2 / 1; }
  .cb-moves { gap: 1.8cqi; padding-top: 1cqi; }
  .cb-move dd { margin-top: 0.4cqi; }
  .cb-flavor { padding-top: 1.2cqi; }
}
/* On the narrowest cards the caption line goes; the back of the card already says the same. */
@container (max-width: 325px) {
  .cb-kind { display: none; }
  .cb-photo { margin-bottom: 1.6cqi; }
}
.card-sheen { position: absolute; inset: 0; background: radial-gradient(70% 55% at var(--mx) var(--my), rgba(255, 252, 244, 0.38), rgba(255, 252, 244, 0) 62%); pointer-events: none; }
/* Each face hides at the halfway point of the turn, so the card never shows its reverse side mirrored. */
.card-front, .card-back { transition: visibility 0s linear 0.5s; }
.card-back { visibility: hidden; }
.card[data-turned='true'] .card-front { visibility: hidden; }
.card[data-turned='true'] .card-back { visibility: visible; }
html:not(.js) .card-turn { display: none; }
html:not(.js) .card { aspect-ratio: auto; transform: none; display: grid; gap: 20px; }
html:not(.js) .card-inner { position: static; display: grid; gap: 20px; }
html:not(.js) .card-face { position: relative; aspect-ratio: 63 / 88; transform: none; visibility: visible; }

/* Questions */

.faq { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gut); padding: clamp(100px, 12vw, 200px) var(--pad); }
.faq-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--mast-h) + 30px); align-self: start; display: grid; gap: 30px; }
.faq-art { width: min(100%, 300px); color: var(--copper-text); }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { display: grid; grid-template-columns: 3.2em 1fr 30px; align-items: baseline; gap: 10px; padding: 28px 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico-foil { align-self: center; color: var(--copper-text); }
.qa summary:hover .ico-foil { transform: rotate(-20deg); }
.qa[open] summary .ico-foil { transform: rotate(135deg); }
.qa-no { font: italic 400 var(--step-1) / 1 var(--display); color: var(--copper-text); }
.qa-q { font: 400 var(--step-2) / 1.12 var(--display); }
.qa-a { padding: 0 38px 32px calc(3.2em + 10px); color: var(--ink-soft); max-width: 62ch; }
.qa-a a { color: var(--copper-text); text-underline-offset: 3px; }
.qa[open] .qa-a { animation: qa-in 0.6s var(--ease); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 899px) {
  .faq { grid-template-columns: 1fr; gap: 36px; }
  .faq-head, .faq-list { grid-column: 1; position: static; }
  .faq-art { width: 200px; }
  .qa summary { grid-template-columns: 2.2em 1fr 22px; }
  .qa-a { padding-left: calc(2.2em + 10px); padding-right: 0; }
}

/* Aftercare: the almanac */

.almanac { position: relative; padding: calc(var(--mast-h) + clamp(50px, 8vw, 140px)) var(--pad) clamp(100px, 12vw, 200px); }
.alm-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gut); }
.alm-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(36px, 3.4vw, 54px);
  height: 2px;
  background: radial-gradient(circle, var(--ink-mute) 0.8px, transparent 1.3px) 0 0 / 7px 2px repeat-x;
  opacity: 0.55;
}
.alm-stage { position: relative; display: grid; align-content: start; gap: 12px; padding-right: 8px; }
.moon {
  --size: clamp(72px, 6.8vw, 108px);
  --lit: 0;
  --shown: var(--lit);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin-bottom: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: repeating-linear-gradient(-38deg, var(--ink) 0 1.2px, transparent 1.2px 4.2px), var(--paper);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 8px var(--paper);
}
.moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff8ea, var(--paper-hi) 60%, #e6dcc7);
  transform: translateX(calc((var(--shown) - 1) * 104%));
}
.motion .moon { --shown: 0; transition: --shown 2.2s var(--ease-in-out) 0.3s; }
.motion .is-in .moon { --shown: var(--lit); }
.alm-when { font: italic 400 var(--step-1) / 1.1 var(--display); color: var(--copper-text); }
.alm-title { font: 400 clamp(1.5rem, 1.1rem + 1vw, 2.1rem) / 1.08 var(--display); text-wrap: balance; }
.alm-stage p:not(.alm-when) { font-size: 1.0625rem; color: var(--ink-soft); }
.alm-care { margin-top: clamp(50px, 6vw, 90px); padding-top: 22px; border-top: 1px solid var(--rule); max-width: 60ch; color: var(--ink-soft); }

@media (max-width: 1099px) {
  .alm-track { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .alm-track::before { display: none; }
}
@media (max-width: 640px) {
  .alm-track { grid-template-columns: 1fr; }
  .alm-stage { grid-template-columns: auto 1fr; column-gap: 22px; }
  .alm-stage .moon { grid-row: span 3; --size: 64px; }
  .alm-stage p:not(.alm-when) { grid-column: 1 / -1; }
}

/* Colophon: back to the plate */

.colophon { position: relative; z-index: 2; background: var(--verd); color: var(--on); padding: var(--bed); }
.col-metal {
  position: relative;
  overflow: hidden;
  border-radius: clamp(4px, 0.45vw, 9px);
  padding: clamp(60px, 8vw, 130px) var(--pad) clamp(24px, 3vw, 40px);
  background:
    url('../img/grain.png') 0 0 / 256px 256px,
    radial-gradient(130% 100% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%),
    radial-gradient(80% 60% at 50% 100%, rgba(70, 44, 28, 0.5), rgba(70, 44, 28, 0) 70%),
    linear-gradient(170deg, #1d1612, #110d0b 60%, #0c0a08);
  box-shadow: inset 0 0 0 1px rgba(214, 140, 90, 0.4), inset 0 2px 0 rgba(255, 214, 170, 0.2);
}
.col-cta {
  display: grid;
  gap: 16px;
  justify-items: start;
  text-decoration: none;
  padding-bottom: clamp(50px, 6vw, 100px);
  margin-bottom: clamp(44px, 5vw, 80px);
  border-bottom: 1px solid rgba(236, 226, 207, 0.14);
}
.col-cta-small { font-size: var(--step-1); color: var(--on-ground-mute); }
.col-cta-big { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.25em; font: 400 var(--step-4) / 0.95 var(--display); letter-spacing: -0.015em; transition: color 0.4s var(--ease); }
.col-cta-big i { color: var(--copper-hi); }
.col-cta-big .ico-arrow { width: 2.2em; height: 0.55em; align-self: center; margin-left: 0.15em; }
.col-cta:hover .col-cta-big .ico-arrow { transform: translateX(0.2em); }
.col-cta:hover .col-cta-big { color: var(--copper-hi); }
.col-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); max-width: 1100px; }
.col-block { display: grid; gap: 8px; align-content: start; }
.col-label { font: italic 400 var(--step-1) / 1 var(--display); color: var(--copper-hi); margin-bottom: 8px; }
.col-block a { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.col-block a:hover { background-size: 100% 1px; }
.col-mark {
  --wx: 50%;
  --wy: 30%;
  position: relative;
  margin: clamp(40px, 7vw, 120px) 0 0 -0.03em;
  padding-bottom: 0.26em;
  font: 400 clamp(3.4rem, 0.4rem + 20.5vw, 36rem) / 0.8 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--copper);
  background: radial-gradient(circle at var(--wx) var(--wy), #fff2e0 0%, #f2bd8a 7%, #d68a55 18%, #b0653a 36%, #9a552e 60%, #8d4c28 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}
.col-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; padding-top: 20px; border-top: 1px solid rgba(236, 226, 207, 0.14); color: var(--on-ground-mute); font-size: 0.9375rem; }
.col-base a { color: inherit; text-underline-offset: 3px; }
.col-top { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font: italic 400 1.15rem / 1 var(--display); color: var(--on); }
.col-balloon { width: 62px; margin-block: -14px -6px; color: var(--copper-hi); transition: transform 1.2s var(--ease); }
.motion .col-balloon { animation: balloon-bob 4.5s ease-in-out infinite; }
.col-top:hover .col-balloon { transform: translateY(-12px) rotate(-4deg); }
@keyframes balloon-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.col-sig { font: italic 400 1.15rem / 1 var(--display); }
@media (max-width: 700px) {
  .col-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .col-cta-big { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.4rem); }
  .col-cta-big .ico-arrow { flex-basis: 100%; width: 3.2em; max-width: 3.2em; margin: 0.2em 0 0; }
  .col-top span { display: none; }
}

/* Viewer */

.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper-bg);
  color: var(--ink);
  overflow: hidden;
}
.viewer::backdrop { background: rgba(15, 40, 36, 0.6); }
/* The film's cinema: a dark room, the picture between black bars, and the browser's own controls. */
.cinema { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #070504; color: var(--on); overflow: hidden; }
.cinema::backdrop { background: #070504; }
.cinema[open] { display: grid; grid-template-rows: auto 1fr; }
.cinema-stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--pad) calc(var(--pad) * 0.6 + 8px); container-type: size; }
.cinema-video { display: block; width: min(100cqw, 100cqh * 16 / 9); height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; box-shadow: 0 0 0 1px rgba(226, 162, 115, 0.35); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.vw-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px calc(var(--pad) * 0.6 + 8px); }
.vw-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 10px 12px 10px 0; font: 400 1.35rem / 1 var(--display); }
.vw-back .ico-arrow, .vw-nav .ico-arrow { width: 52px; height: 13px; }
.vw-back { gap: 12px; }
.vw-back:hover .is-back, .vw-prev:hover .is-back { transform: scaleX(-1) translateX(6px); }
.vw-next:hover .ico-arrow { transform: translateX(6px); }
.vw-count { font: italic 400 1.2rem / 1 var(--display); color: var(--ink-mute); }
.vw-n { color: var(--ink); }
/* The photograph fills the space between the top bar and the buttons, centred in it, and never more:
   its column is a size container, so the photo's limits are that column's own height and width. */
.vw-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 80px); min-height: 0; padding: clamp(8px, 2.4vh, 32px) var(--pad); }
.vw-figure { min-height: 0; display: grid; place-items: center; container-type: size; }
.vw-frame { position: relative; display: block; }
.vw-img { max-height: 100cqh; max-width: 100cqw; width: auto; height: auto; border-radius: 2px; box-shadow: 0 2px 4px rgba(40, 24, 10, 0.2), 0 24px 24px -24px rgba(40, 24, 10, 0.6); cursor: zoom-in; }
.vw-img.is-plain { cursor: default; }
.loupe {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(180px, 15vw, 280px);
  height: clamp(180px, 15vw, 280px);
  margin: calc(clamp(180px, 15vw, 280px) / -2) 0 0 calc(clamp(180px, 15vw, 280px) / -2);
  border-radius: 50%;
  background-color: var(--paper);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px var(--copper), 0 0 0 7px rgba(28, 24, 20, 0.9), 0 0 0 8px var(--copper), 0 16px 24px -8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.3s var(--ease), scale 0.4s var(--ease);
}
.loupe.is-on { opacity: 1; scale: 1; }
.vw-text { display: grid; gap: 14px; align-self: safe center; align-content: safe center; justify-items: start; max-width: 520px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.vw-plate { font: italic 400 var(--step-1) / 1 var(--display); color: var(--copper-text); }
.vw-title { font: 400 var(--step-3) / 1 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.vw-latin { font: italic 400 var(--step-1) / 1.2 var(--display); color: var(--ink-mute); }
.vw-note { color: var(--ink-soft); margin-top: 8px; }
.vw-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin: 10px 0 8px; padding-top: 16px; border-top: 1px solid var(--rule); width: 100%; }
.vw-meta div { display: contents; }
.vw-meta dt { color: var(--ink-mute); font-size: 0.9375rem; padding-top: 0.15em; }
.vw-meta [hidden] { display: none; }
.vw-nav { display: flex; justify-content: flex-end; gap: 10px; padding: 16px calc(var(--pad) * 0.6 + 8px) 22px; }
.vw-prev, .vw-next { width: 172px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 3px; background: none; font-size: 1rem; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.vw-prev:hover, .vw-next:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.4); }
/* Short windows: tighter bars, so the photograph keeps as much height as it can. */
@media (min-width: 900px) and (max-height: 720px) {
  .vw-bar { padding-block: 8px; }
  .vw-nav { padding-block: 8px 12px; }
  .vw-prev, .vw-next { padding-block: 10px; }
  .vw-text { gap: 8px; }
  .vw-plate, .vw-latin { font-size: 1.15rem; }
  .vw-title { font-size: clamp(1.8rem, 0.9rem + 2.2vw, 3rem); }
  .vw-note { font-size: 1rem; line-height: 1.5; margin-top: 2px; }
  .vw-meta { margin: 4px 0 2px; padding-top: 10px; font-size: 1rem; }
  .vw-ask { font-size: 1.2rem; }
}

@media (max-width: 899px) {
  .viewer[open] { overflow-y: auto; }
  .vw-body { grid-template-columns: 1fr; align-content: start; gap: 26px; padding-bottom: 20px; }
  .vw-figure { container-type: normal; }
  .vw-img { max-height: 62dvh; max-width: 100%; }
  .vw-text { max-height: none; overflow: visible; }
  .vw-nav { position: sticky; bottom: 0; justify-content: space-between; background: rgba(236, 228, 212, 0.96); }
  .vw-prev, .vw-next { width: calc(50% - 5px); }
}

/* Small pages: privacy, thanks, not found */

.page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.page-bar { padding: clamp(16px, 1.6vw, 30px) var(--pad); }
.page-back { display: inline-flex; align-items: center; gap: 8px; font: 400 clamp(1.45rem, 1.1rem + 0.9vw, 2rem) / 1 var(--display); text-decoration: none; }
.page-back { gap: 12px; }
.page-back .ico-arrow { width: 56px; height: 14px; }
.page-back:hover .is-back { transform: scaleX(-1) translateX(6px); }
.page-back i { font-size: 0.9em; }
.page-main { width: min(100% - 2 * var(--pad), 760px); margin: clamp(40px, 8vh, 110px) auto; display: grid; gap: 24px; justify-items: start; align-content: start; }
.page-short { align-content: center; margin-block: 0; }
.page-art { width: min(60vw, 320px); color: var(--copper-text); }
.page-title { font: 400 var(--step-4) / 0.95 var(--display); letter-spacing: -0.015em; }
.page-title i { color: var(--copper-text); }
.page-lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); max-width: 40ch; }
.page-prose h2 { margin-top: 18px; font: 400 var(--step-2) / 1.1 var(--display); }
.page-prose p, .page-prose li { color: var(--ink-soft); max-width: 62ch; }
.page-prose ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.page-prose a, .page-lead a { color: var(--copper-text); text-underline-offset: 3px; }
.page-meta { font-size: 0.9375rem; color: var(--ink-mute); }
.page-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding: 22px var(--pad) 28px; border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-mute); }
.page-foot a { color: inherit; text-underline-offset: 3px; }

/* Reveal: blocks further down the page rise into place as they first come into view. Anything in the
   first screen shows straight away, so the page's main content is never held back by an animation. */

.motion [data-reveal].is-waiting { opacity: 0; transform: translateY(26px); }
.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.motion .plate-inscription { opacity: 0; transition: opacity 1.4s var(--ease) 0.5s; }
.motion.is-open .plate-inscription { opacity: 1; }
.motion .plate-lede { --shade: 0; }

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

/* Phones and narrow screens */

@media (max-width: 899px) {
  .sec-head .sec-title, .sec-head .sec-lede, .page-head .sec-title, .page-head .sec-lede { grid-column: 1 / -1; }
  .states-stage { display: block; }
  .states-figure { position: sticky; top: calc(var(--mast-h) + 4px); z-index: 0; height: 40svh; width: auto; margin: 0 auto; }
  .steps { position: relative; z-index: 1; }
  .step { min-height: 0; padding: 30px 22px; margin: 4svh -8px 34svh; background: rgba(243, 237, 225, 0.94); border-radius: 3px; box-shadow: 0 10px 20px -16px rgba(40, 25, 10, 0.5); }
  .step:last-child { position: relative; top: 0; margin-bottom: 0; }
  .steps::after { height: 30svh; }
  .js .step:not(.is-active) { opacity: 1; }
  .filter { font-size: var(--step-1); }
  .filter::after { bottom: -18px; }
}
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  /* On a phone the griffin stands under the film, from just above the name to below the inscription, so no
     words sit on its lines. Its top fades out behind the film. */
  .plate-art {
    top: auto;
    right: 50%;
    bottom: calc(1.1 * clamp(3.4rem, 0.4rem + 20vw, 16rem) + 10px);
    translate: 50% 0;
    height: min(56%, calc(100% - 1.1 * clamp(3.4rem, 0.4rem + 20vw, 16rem) - 225px));
    -webkit-mask: linear-gradient(to bottom, transparent, #000 24%);
    mask: linear-gradient(to bottom, transparent, #000 24%);
  }
  .plate-copy { padding-top: clamp(84px, 13vh, 130px); }
  .plate-head { width: 100%; }
  .plate-contents { display: none; }
  .film-tile { width: min(100%, 460px); }
  .pl-row:first-child { font-size: clamp(2.6rem, 1rem + 8vw, 5rem); }
  .wordmark { font-size: clamp(3.4rem, 0.4rem + 20vw, 16rem); }
  .plate-inscription { display: none; }
}