/* ==========================================================================
   BrightSide Books — site system
   Tokens, type, grid, components, then homepage sections.
   ========================================================================== */

/* ---------- Fonts (SIL OFL, self-hosted, Latin subset) ---------- */

/* Newsreader roman: variable, weights 360–420 with its optical-size axis.
   Italic: a single static instance (400, optical size 24) for the one italic line. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 360 420;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sourcesans3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sourcesans3-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Grounds */
  --page: #F4EFE6;
  --parchment: #E9E1D4;
  --mat: #F9F6F0;

  /* Dark fields: Racing Green */
  --field: #0F2A1E;
  --field-deep: #0A1F16;

  /* Ink */
  --ink: #1E1B17;
  --ink-2: #5A5349;
  --ink-hover: #3A342D;

  /* Neutrals */
  --taupe: #9A8F7E;
  --warm-gray: #6E675D;

  /* On dark */
  --on-field: #EDE7DB;
  --on-field-2: #AFC4B7;
  --on-field-hover: #F8F4EC;

  /* Foil: small caps, hairlines and the wordmark on dark only */
  --foil: #B08D57;

  --rule: rgba(30, 27, 23, 0.14);
  --rule-dark: rgba(237, 231, 219, 0.18);
  --rule-strong: #857B6D;
  --foil-line: rgba(176, 141, 87, 0.55);

  --focus: var(--ink);

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 6.875rem);
  --fs-statement: clamp(2.125rem, 1.35rem + 3.3vw, 4.5rem);
  --fs-statement-m: clamp(1.875rem, 1.3rem + 2.1vw, 3.25rem);
  --fs-heading: clamp(1.625rem, 1.3rem + 1.1vw, 2.375rem);
  --fs-sub: clamp(1.1875rem, 1.1rem + 0.25vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-caption: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
  --fs-label: 0.8125rem;

  /* Grid */
  --content: 1300px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --col: calc((var(--content) - 11 * var(--gap)) / 12);
  --edge: calc(var(--gutter) - var(--gap));

  /* Vertical rhythm: title-page beats breathe, dense blocks don't */
  --space-beat: clamp(5.5rem, 14vh, 12rem);
  --space-section: clamp(4rem, 10vh, 8rem);
  --space-dense: clamp(2.5rem, 5vh, 4rem);

  /* Motion */
  --dur-fast: 180ms;
  --dur-ui: 280ms;
  --dur-reveal: 700ms;
  --dur-image: 1000ms;
  --dur-hero: 850ms;
  --ease-out: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 90ms;

  --header-h: 4.75rem;
}

@media (min-width: 900px) {
  :root {
    --space-beat: clamp(8rem, 14vh, 12rem);
    --header-h: 5.25rem;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

.menu-open body {
  overflow: hidden;
}

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

img {
  height: auto;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote {
  margin: 0;
}

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

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
}

hr {
  border: 0;
  margin: 0;
}

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

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

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--page);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- Type ---------- */

.t-display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.02em;
}

.t-statement {
  font-family: var(--serif);
  font-size: var(--fs-statement);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.014em;
}

.t-statement-m {
  font-family: var(--serif);
  font-size: var(--fs-statement-m);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.t-heading {
  font-family: var(--serif);
  font-size: var(--fs-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.006em;
}

.t-sub {
  font-family: var(--sans);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: lining-nums;
}

.t-caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.t-label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prose > * + * {
  margin-top: 1em;
}

.measure {
  max-width: 64ch;
}

.muted {
  color: var(--ink-2);
}

.foil {
  color: var(--foil);
}

/* Visible placeholder for facts still to confirm. Temporary by design. */
.confirm {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  background: rgba(176, 141, 87, 0.16);
  color: #7A2E0E;
  font-family: var(--sans);
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  font-style: normal;
  text-transform: none;
}

.g-field .confirm,
.g-deep .confirm {
  color: #F2CB8C;
  background: rgba(176, 141, 87, 0.14);
}

/* ---------- Grid ---------- */

.frame {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--edge), 1fr)
    [c1] minmax(0, var(--col)) [c2] minmax(0, var(--col)) [c3] minmax(0, var(--col))
    [c4] minmax(0, var(--col)) [c5] minmax(0, var(--col)) [c6] minmax(0, var(--col))
    [c7] minmax(0, var(--col)) [c8] minmax(0, var(--col)) [c9] minmax(0, var(--col))
    [c10] minmax(0, var(--col)) [c11] minmax(0, var(--col)) [c12] minmax(0, var(--col))
    [c13] minmax(var(--edge), 1fr) [full-end];
  column-gap: var(--gap);
}

.frame > * {
  grid-column: c1 / c13;
  min-width: 0;
}

/* ---------- Grounds ---------- */

.g-page { background-color: var(--page); }
.g-parchment { background-color: var(--parchment); }

.g-field,
.g-deep {
  color: var(--on-field);
  --focus: var(--on-field);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.g-field { background-color: var(--field); }
.g-deep { background-color: var(--field-deep); }

.section-rule {
  height: 1px;
  background: var(--rule);
}

.rule-short {
  width: 3rem;
  height: 1px;
  background: var(--rule-strong);
}

/* ---------- Buttons and links ---------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--page);
  --btn-bg-hover: var(--ink-hover);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.5rem 0.85rem;
  border: 0;
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out);
}

.btn__text,
.btn__arrow {
  transition: transform var(--dur-ui) var(--ease-out);
}

.btn__arrow {
  width: 1.15rem;
  height: auto;
  flex: none;
}

.btn:hover {
  background-color: var(--btn-bg-hover);
}

.btn:hover .btn__text {
  transform: translateX(2px);
}

.btn:hover .btn__arrow {
  transform: translateX(5px);
}

.btn--small {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem 0.6rem;
  font-size: 1rem;
}

.btn--on-dark {
  --btn-bg: var(--on-field);
  --btn-fg: var(--field-deep);
  --btn-bg-hover: var(--on-field-hover);
}

.link {
  --link-rest: var(--rule-strong);
  padding-bottom: 0.15em;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(var(--link-rest), var(--link-rest));
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px;
  text-decoration: none;
  transition: background-size var(--dur-fast) var(--ease-out);
}

.link:hover {
  background-size: 100% 1px, 100% 1px;
}

.g-field .link,
.g-deep .link {
  --link-rest: rgba(237, 231, 219, 0.4);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

.link-arrow .btn__arrow {
  width: 1rem;
}

.link-arrow:hover .btn__arrow {
  transform: translateX(5px);
}

/* ---------- Image treatments ---------- */

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Let cropped images fill their frames through the <picture> wrapper */
.bridge picture,
.stage__image picture {
  height: 100%;
}

/* Archival print: paper mat, 1px rule, soft natural shadow */
.print {
  --rot: 0deg;
  padding: clamp(0.5rem, 1.1vw, 0.95rem);
  background: var(--mat);
  outline: 1px solid var(--rule);
  box-shadow:
    0 1px 1px rgba(30, 27, 23, 0.05),
    0 22px 40px -26px rgba(30, 27, 23, 0.45);
  transform: rotate(var(--rot));
}

.print img {
  width: 100%;
  height: auto;
  outline: 1px solid rgba(30, 27, 23, 0.08);
  outline-offset: -1px;
}

/* Full-bleed story image */
.bridge {
  position: relative;
  height: clamp(17rem, 45vh, 30rem);
  overflow: hidden;
  background: var(--parchment);
}

.bridge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .bridge {
    height: clamp(26rem, 60vh, 44rem);
  }
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition:
    background-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}

.site-header.is-scrolled {
  background-color: rgba(244, 239, 230, 0.97);
  box-shadow: 0 1px 0 var(--rule);
}

.menu-open .site-header {
  background-color: var(--page);
  box-shadow: none;
}

.site-header__inner {
  height: 100%;
  align-items: center;
}

.wordmark {
  grid-column: c1 / c9;
  justify-self: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}

.wordmark__name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem);
  letter-spacing: -0.01em;
}

.wordmark__desc {
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.nav {
  display: none;
}

.menu-button {
  grid-column: c9 / c13;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 1rem/1 var(--sans);
  cursor: pointer;
}

.menu-button__icon {
  position: relative;
  width: 1.4rem;
  height: 0.6rem;
}

.menu-button__icon::before,
.menu-button__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-out), top var(--dur-ui) var(--ease-out);
}

.menu-button__icon::before { top: 0; }
.menu-button__icon::after { top: calc(100% - 1.5px); }

.menu-open .menu-button__icon::before {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.menu-open .menu-button__icon::after {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  overflow-y: auto;
  background: var(--page);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}

.menu-open .menu-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.menu-panel__links {
  display: grid;
  gap: 0.35rem;
}

.menu-panel__links a {
  display: block;
  padding-block: 0.3rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1.15;
  text-decoration: none;
}

.menu-panel__foot {
  display: grid;
  gap: 1rem;
  margin-top: auto;
  padding-top: 2.5rem;
}

.menu-panel__foot .btn {
  justify-content: center;
}

@media (min-width: 1180px) {
  .wordmark {
    grid-column: c1 / c4;
  }

  .nav {
    grid-column: c4 / c13;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(1.25rem, 2vw, 2.25rem);
  }

  .nav__links {
    display: flex;
    gap: clamp(1rem, 1.6vw, 1.75rem);
    font-size: 1rem;
  }

  .nav__links a {
    --link-rest: transparent;
    padding-block: 0.4rem;
  }

  .nav__links a[aria-current="page"] {
    background-size: 100% 1px, 100% 1px;
  }

  .menu-button,
  .menu-panel {
    display: none;
  }
}

/* ==========================================================================
   Motion
   Hidden starting states apply only under .motion, which the inline head
   script sets when the visitor has not asked for reduced motion.
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes unveil {
  from { clip-path: inset(0 0 16% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes settle {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}

[data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.motion [data-reveal="block"]:not(.is-in) {
  opacity: 0;
  transform: translateY(20px);
}

/* Dark field entry: an ivory veil lifts off the dark ground, then the content follows.
   The ground itself is always dark, so text never sits on a light background. */
.curtain {
  position: relative;
  isolation: isolate;
}

.curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--page);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-image) var(--ease-inout);
}

.motion .curtain:not(.is-in)::before {
  opacity: 1;
}

.curtain__content {
  transition:
    opacity var(--dur-reveal) var(--ease-out) 450ms,
    transform var(--dur-reveal) var(--ease-out) 450ms;
}

.motion .curtain:not(.is-in) .curtain__content {
  opacity: 0;
  transform: translateY(20px);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 250ms;
  }
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
  padding-top: var(--header-h);
}

.hero__inner {
  row-gap: 2.25rem;
}

.hero__text {
  padding-top: clamp(1.75rem, 5vh, 3rem);
}

.hero__title .line {
  display: inline;
}

.hero__intro {
  max-width: 34rem;
  margin-top: 1.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.hero__offer {
  display: none;
}

.hero__media {
  grid-column: c2 / full-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--parchment);
}

.hero__media picture {
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.motion .hero__title,
.motion .hero__intro,
.motion .hero__actions,
.motion .hero__offer {
  animation: rise var(--dur-hero) var(--ease-out) both;
}

.motion .hero__intro { animation-delay: calc(var(--stagger) * 3); }
.motion .hero__actions { animation-delay: calc(var(--stagger) * 4); }
.motion .hero__offer { animation-delay: calc(var(--stagger) * 5); }

.motion .hero__media picture {
  animation: unveil var(--dur-image) var(--ease-out) both;
}

.motion .hero__media img {
  animation: settle var(--dur-image) var(--ease-out) both;
}

@media (min-width: 900px) {
  .hero {
    min-height: min(100svh, 68rem);
  }

  .hero__inner {
    min-height: calc(min(100svh, 68rem) - var(--header-h));
    row-gap: 0;
  }

  .hero__text {
    grid-column: c1 / c8;
    grid-row: 1;
    align-self: end;
    padding: 2rem 0 clamp(2.5rem, 7vh, 5.5rem);
  }

  .hero__title .line {
    display: block;
  }

  .motion .hero__title {
    animation: none;
  }

  .motion .hero__title .line {
    animation: rise var(--dur-hero) var(--ease-out) both;
  }

  .motion .hero__title .line:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
  .motion .hero__title .line:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
  .motion .hero__title .line:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
  .motion .hero__intro { animation-delay: calc(var(--stagger) * 4); }
  .motion .hero__actions { animation-delay: calc(var(--stagger) * 5); }

  .hero__intro {
    margin-top: 2rem;
  }

  .hero__actions {
    margin-top: 2.25rem;
  }

  .hero__offer {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.2rem 2.5rem;
    margin-top: clamp(2.5rem, 6vh, 4.5rem);
    color: var(--ink-2);
    font-size: var(--fs-caption);
  }

  .hero__media {
    grid-column: c8 / full-end;
    grid-row: 1;
    align-self: stretch;
    aspect-ratio: auto;
    margin-top: 0.5rem;
    min-height: 32rem;
  }
}

/* ==========================================================================
   2. Recognition — the problem, the answer, and the family's photographs
   ========================================================================== */

.recognition {
  padding-block: var(--space-beat) var(--space-section);
}

.recognition__grid {
  row-gap: 2.25rem;
}

.recognition__body {
  display: grid;
  gap: 1em;
  max-width: 34rem;
}

.recognition__body .link-arrow {
  justify-self: start;
  margin-top: 0.5rem;
}

.recognition__prints {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  margin-top: 1rem;
}

.print--a {
  --rot: -0.8deg;
  grid-column: 1 / 8;
  grid-row: 1;
}

.print--b {
  display: none;
}

.print {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-reveal="recognition"] .print--b {
  transition-delay: 360ms;
}

/* One moment: the statement rises, then the prints are laid in */
.recognition__statement {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.motion [data-reveal="recognition"]:not(.is-in) .recognition__statement {
  opacity: 0;
  transform: translateY(20px);
}

.motion [data-reveal="recognition"]:not(.is-in) .print {
  opacity: 0;
  transform: translateY(28px) rotate(var(--rot));
}

[data-reveal="recognition"] .print--a {
  transition-delay: 240ms;
}

@media (min-width: 900px) {
  .recognition__grid {
    align-items: end;
    row-gap: 0;
  }

  .recognition__statement {
    grid-column: c1 / c9;
    grid-row: 1;
  }

  .recognition__body {
    grid-column: c1 / c6;
    grid-row: 2;
    margin-top: 2.75rem;
  }

  .recognition__prints {
    grid-column: c9 / c13;
    grid-row: 1 / span 2;
    grid-template-rows: auto 6rem auto;
    align-self: end;
    margin-top: 0;
  }

  .print--a {
    grid-column: 1 / 9;
    grid-row: 1 / 3;
  }

  .print--b {
    --rot: 0.7deg;
    display: block;
    grid-column: 3 / 11;
    grid-row: 2 / 4;
    z-index: 1;
  }
}

/* ==========================================================================
   3. How a life becomes a book — sticky storytelling on a parchment band
   Vertical storytelling by default. Sticky only on wide, tall screens with
   motion allowed.
   ========================================================================== */

.process {
  --frame-ground: #DDD3C3;
  padding-block: var(--space-section);
}

.process__visual {
  display: none;
}

.process__stages {
  position: relative;
  margin-top: 2.5rem;
  padding-left: 2.75rem;
}

.process__stages::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--rule-strong);
}

.stage {
  position: relative;
  padding-block: 1.25rem 2.25rem;
}

.stage__num {
  position: absolute;
  left: -2.75rem;
  top: 1.1rem;
  width: 1.8rem;
  padding-block: 0.2rem;
  background: var(--parchment);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: lining-nums;
}

.stage .prose {
  margin-top: 0.9rem;
}

.stage__image {
  margin-top: 1.5rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--frame-ground);
}

.stage__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wide screens without the sticky treatment (reduced motion, short windows):
   a vertical sequence at reading width, not full-bleed stage photographs */
@media (min-width: 900px) {
  .process__stages {
    grid-column: c1 / c13;
  }

  .stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--gap) * 2);
    align-items: start;
    padding-block: 2rem 3rem;
  }

  .stage > * {
    grid-column: 1;
  }

  .stage__image {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }
}

@media (min-width: 900px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .process__grid {
    align-items: start;
  }

  .process__aside {
    grid-column: c1 / c7;
    grid-row: 1;
    align-self: stretch;
  }

  .process__sticky {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .process__visual {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) auto;
    gap: var(--gap);
    margin-top: 2.25rem;
  }

  .process__rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: min(52vh, 34rem);
  }

  .process__num {
    position: relative;
    height: 1em;
    font-family: var(--serif);
    font-size: clamp(4.5rem, 3rem + 3vw, 7rem);
    line-height: 0.85;
    font-variant-numeric: lining-nums;
  }

  .process__num span {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--dur-ui) var(--ease-out),
      transform var(--dur-ui) var(--ease-out);
  }

  .process__num span.is-active {
    opacity: 1;
    transform: none;
  }

  .process__progress {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding-left: 1.25rem;
    color: var(--ink-2);
    font-size: var(--fs-caption);
    line-height: 1.3;
  }

  .process__progress::before,
  .process__progress::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    width: 1px;
  }

  .process__progress::before {
    bottom: 0.3rem;
    background: var(--rule-strong);
  }

  .process__progress::after {
    height: calc((100% - 0.6rem) * var(--p, 0));
    background: var(--ink);
    transition: height var(--dur-reveal) var(--ease-inout);
  }

  .process__progress li {
    transition: color var(--dur-ui) var(--ease-out);
  }

  .process__progress li.is-active {
    color: var(--ink);
    font-weight: 600;
  }

  .process__frames {
    position: relative;
    height: min(52vh, 34rem);
    aspect-ratio: 4 / 5;
    background: var(--frame-ground);
  }

  .process__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-reveal) var(--ease-inout);
  }

  .process__frame.is-active {
    opacity: 1;
  }

  .process__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .process__stages {
    grid-column: c8 / c13;
    grid-row: 1;
    margin-top: 0;
    padding-left: 0;
  }

  .process__stages::before {
    display: none;
  }

  .stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60vh;
    padding-block: 3rem;
    transition: opacity var(--dur-reveal) var(--ease-out);
  }

  .stage__num,
  .stage__image {
    display: none;
  }

  /* 0.65 keeps dimmed body copy above 4.5:1 on parchment */
  .motion .stage:not(.is-active) {
    opacity: 0.65;
  }
}

/* ==========================================================================
   4. The conversations — full-bleed photograph, a panel rising over it
   ========================================================================== */

.talk {
  padding-bottom: var(--space-section);
}

.talk__image {
  height: clamp(20rem, 55vh, 30rem);
}

.talk__image img {
  object-position: 45% 35%;
}

.talk__grid {
  row-gap: 0;
}

.talk__panel {
  grid-column: full-start / full-end;
  display: grid;
  grid-template-columns: subgrid;
  position: relative;
  z-index: 1;
  margin-top: -3.5rem;
  padding-top: 1.75rem;
  background: var(--page);
}

.talk__panel > * {
  grid-column: c1 / c13;
}

.talk__lede {
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: var(--fs-sub);
  line-height: 1.4;
}

.talk__range {
  margin-top: 2.5rem;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -0.005em;
}

.talk__facts {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.talk__facts li {
  padding-top: 0.25rem;
}

.talk__facts p {
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

@media (min-width: 900px) {
  .talk__image {
    height: clamp(30rem, 72vh, 50rem);
  }

  .talk__panel {
    grid-column: full-start / c9;
    grid-row: 1;
    margin-top: -11rem;
    padding-top: 3.5rem;
  }

  .talk__panel > * {
    grid-column: c1 / c8;
  }

  .talk__range {
    grid-column: c1 / c8;
    grid-row: 2;
    margin-top: 3rem;
  }

  .talk__facts {
    grid-column: c9 / c13;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 3.5rem;
  }
}


@keyframes drift {
  from { transform: translateY(-14px); }
  to { transform: translateY(14px); }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bridge img {
      height: calc(100% + 28px);
      margin-top: -14px;
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

/* ==========================================================================
   5. The book — dark field
   ========================================================================== */

.book {
  padding-block: var(--space-beat);
}

.book__grid {
  row-gap: 2.5rem;
}

.book .prose {
  margin-top: 1.75rem;
  color: var(--on-field-2);
}

.book .prose strong {
  color: var(--on-field);
  font-weight: 600;
}

.book__object img {
  width: 100%;
  height: auto;
}

.book__spec .t-label {
  margin-bottom: 1rem;
}

.spec {
  border-top: 1px solid var(--rule-dark);
}

.spec > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 34%) 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule-dark);
}

.spec dt {
  color: var(--on-field-2);
  font-size: var(--fs-caption);
  line-height: 1.9;
}

.spec dd {
  font-variant-numeric: lining-nums;
}

@media (min-width: 900px) {
  .book__grid {
    align-items: start;
    row-gap: 0;
  }

  .book__text {
    grid-column: c1 / c7;
    grid-row: 1;
  }

  .book__spec {
    grid-column: c1 / c6;
    grid-row: 2;
    margin-top: 3.5rem;
  }

  .book__object {
    grid-column: c8 / c13;
    grid-row: 1 / span 2;
    margin-top: 0.75rem;
  }
}

/* ==========================================================================
   6. The gift of being asked — centred title page
   ========================================================================== */

.gift {
  padding-block: var(--space-beat);
}

.gift__inner {
  display: grid;
  gap: 2rem;
}

.gift__lede {
  max-width: 36rem;
}

.founder-note {
  max-width: 34rem;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.6;
}

.founder-note__sig {
  margin-top: 0.75rem;
  color: var(--ink);
  font-weight: 600;
}

@media (min-width: 900px) {
  .gift__inner {
    grid-column: c3 / c11;
    justify-items: center;
    gap: 2.25rem;
    text-align: center;
  }

  .gift__lede {
    font-size: var(--fs-sub);
    line-height: 1.5;
  }
}

/* ==========================================================================
   7. Private, by design — a compact parchment band
   ========================================================================== */

.privacy {
  padding-block: var(--space-section);
}

.privacy__head p {
  margin-top: 1.25rem;
  color: var(--ink-2);
  max-width: 30rem;
}

.promises {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.promises dt::before {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 0.9rem;
  background: var(--ink);
}

.promises dt {
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.3;
}

.promises dd {
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

@media (min-width: 900px) {
  .privacy__grid {
    align-items: start;
  }

  .privacy__head {
    grid-column: c1 / c6;
    grid-row: 1;
  }

  .promises {
    grid-column: c7 / c13;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem calc(var(--gap) * 1.5);
    margin-top: 0.75rem;
  }
}

/* ==========================================================================
   8. The investment — the commissions on a dark field
   ========================================================================== */

.investment {
  padding-block: var(--space-beat) var(--space-section);
}

.investment__head {
  display: grid;
  row-gap: 1.5rem;
}

.investment__head .t-label {
  margin-bottom: 1.25rem;
}

.investment__intro {
  display: grid;
  gap: 1rem;
  color: var(--on-field-2);
}

.investment__intro .link-arrow {
  justify-self: start;
  color: var(--on-field);
}

.tiers {
  display: grid;
  margin-top: clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--foil-line);
}

.tier {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding-block: 2rem 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}

.tier__name {
  font-size: var(--fs-heading);
}

.tier__desc {
  max-width: 32ch;
  margin-top: 0.5rem;
  color: var(--on-field-2);
}

.tier__price {
  margin-top: 2rem;
}

.tier__label {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--foil);
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.tier__amount {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 13cqi, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

.tier__facts {
  margin-top: 2rem;
  border-top: 1px solid var(--rule-dark);
}

.tier__facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--rule-dark);
}

.tier__facts dt {
  color: var(--on-field-2);
}

.tier__facts dd {
  text-align: right;
  font-variant-numeric: lining-nums;
}

.tier__cta {
  margin-top: 1.75rem;
}

.tier__cta .link-arrow {
  color: var(--on-field);
}

.tier {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.tier:nth-child(2) { transition-delay: var(--stagger); }
.tier:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }

.motion [data-reveal="tiers"]:not(.is-in) .tier {
  opacity: 0;
  transform: translateY(24px);
}

.included {
  display: grid;
  row-gap: 1.5rem;
  margin-top: var(--space-section);
}

.included__head p + p {
  margin-top: 0.9rem;
  color: var(--on-field-2);
  font-size: var(--fs-caption);
  max-width: 22rem;
}

.included__list {
  display: grid;
  gap: 1.5rem;
}

.included__list li {
  padding-top: 0.25rem;
}

.included__list strong {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

.included__list span {
  display: block;
  margin-top: 0.3rem;
  color: var(--on-field-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.investment__foot {
  display: grid;
  gap: 2rem;
  margin-top: var(--space-section);
  padding-top: 2rem;
  border-top: 1px solid var(--foil-line);
}

.investment__terms {
  display: grid;
  gap: 1.5rem;
}

.investment__foot dt {
  color: var(--on-field);
  font-weight: 600;
}

.investment__foot dd {
  margin-top: 0.45rem;
  color: var(--on-field-2);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

.investment__foot .btn {
  justify-self: start;
}

@media (min-width: 900px) {
  .investment__head {
    grid-template-columns: subgrid;
    align-items: end;
  }

  .investment__title {
    grid-column: c1 / c7;
    grid-row: 1;
  }

  .investment__intro {
    grid-column: c8 / c13;
    grid-row: 1;
  }

  .tiers {
    container-type: inline-size;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tier {
    container-type: normal;
  }

  .tier__amount {
    font-size: clamp(2rem, 4cqi, 3.25rem);
  }

  @supports (grid-template-rows: subgrid) {
    .tiers {
      grid-template-rows: repeat(5, auto);
    }

    .tier {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }

  .tier {
    padding: 2.25rem 2rem 2.5rem;
    border-bottom: 0;
    border-left: 1px solid var(--rule-dark);
  }

  .tier:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .tier:last-child {
    padding-right: 0;
  }

  .included {
    grid-template-columns: subgrid;
    grid-column: c1 / c13;
  }

  .included__head {
    grid-column: c1 / c4;
  }

  .included__list {
    grid-column: c5 / c13;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem var(--gap);
  }

  .investment__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: calc(var(--gap) * 2);
  }

  .investment__terms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .investment__foot .btn {
    justify-self: end;
  }
}

/* ==========================================================================
   9. A few questions
   ========================================================================== */

.faq {
  padding-block: var(--space-section) 0;
}

.faq__grid {
  row-gap: 2rem;
}

.faq__aside p {
  margin-top: 1.25rem;
}

.qa {
  border-bottom: 1px solid var(--rule);
}

.qa:first-child {
  border-top: 1px solid var(--rule);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding-block: 1.1rem;
  cursor: pointer;
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa__icon {
  position: relative;
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

.qa__icon::before,
.qa__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-out);
}

.qa__icon::before {
  left: 0;
  right: 0;
  top: calc(50% - 0.75px);
  height: 1.5px;
}

.qa__icon::after {
  top: 0;
  bottom: 0;
  left: calc(50% - 0.75px);
  width: 1.5px;
}

.qa[open] .qa__icon::after {
  transform: scaleY(0);
}

.qa__body {
  max-width: 60ch;
  padding-bottom: 1.5rem;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    :root {
      interpolate-size: allow-keywords;
    }

    .qa::details-content {
      height: 0;
      overflow: clip;
      transition:
        height var(--dur-ui) var(--ease-out),
        content-visibility var(--dur-ui) allow-discrete;
    }

    .qa[open]::details-content {
      height: auto;
    }
  }
}

@media (min-width: 900px) {
  .faq__aside {
    grid-column: c1 / c5;
  }

  .faq__list {
    grid-column: c6 / c13;
  }
}

/* ==========================================================================
   10. While there is still time to ask — the photograph straddles the
   boundary, the field rises behind it and runs on into the footer
   ========================================================================== */

.close__media {
  position: relative;
  padding-top: var(--space-section);
}

.close__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background-color: var(--field);
  transition: background-color var(--dur-image) var(--ease-inout);
}

.motion .close:has(.close__field:not(.is-in)) .close__media::after {
  background-color: var(--page);
}

.close__image {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--parchment);
}

.close__image picture {
  height: 100%;
}

.close__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 45%;
}

.close__field {
  padding-block: var(--space-section);
}

.close__grid {
  row-gap: 3rem;
}

.close__ask {
  display: grid;
  gap: 1.75rem;
  justify-items: start;
  align-content: start;
}

.close__reassure {
  max-width: 30rem;
  color: var(--on-field-2);
}

.close__email {
  color: var(--on-field-2);
  font-size: var(--fs-caption);
}

.close__steps .t-label {
  margin-bottom: 1rem;
}

.steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.5rem;
  padding-block: 0.7rem;
}

.steps__n {
  color: var(--on-field-2);
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}

.steps strong {
  display: block;
  font-weight: 600;
  line-height: 1.35;
}

.steps span:not(.steps__n) {
  display: block;
  margin-top: 0.15rem;
  color: var(--on-field-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

@media (min-width: 900px) {
  .close__image {
    aspect-ratio: 21 / 9;
  }

  .close__ask {
    grid-column: c1 / c7;
    grid-row: 1;
  }

  .close__steps {
    grid-column: c8 / c13;
    grid-row: 1;
    margin-top: 0.75rem;
  }
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .close__image img {
      height: calc(100% + 28px);
      margin-top: -14px;
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

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

.site-footer {
  padding-bottom: 2.5rem;
  font-size: var(--fs-caption);
}

.site-footer a {
  text-decoration: none;
}

.footer__grid {
  row-gap: 2.5rem;
}

.foil-rule {
  height: 1px;
  background: var(--foil);
  opacity: 0.55;
}

.footer__brand .wordmark__name {
  display: block;
  color: var(--foil);
  font-size: 1.75rem;
  line-height: 1;
}

.footer__brand p + p {
  max-width: 24rem;
  margin-top: 1rem;
  color: var(--on-field-2);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.footer__nav ul {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.footer__nav a {
  --link-rest: transparent;
  display: inline-block;
  padding-block: 0.2rem;
}

.footer__contact {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  color: var(--on-field-2);
}

.footer__contact .t-label {
  margin-bottom: 0.25rem;
}

.footer__base {
  display: grid;
  gap: 0.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  color: var(--on-field-2);
}

@media (min-width: 900px) {
  .footer__grid > .foil-rule {
    grid-column: c1 / c13;
    margin-bottom: 1rem;
  }

  .footer__brand {
    grid-column: c1 / c5;
  }

  .footer__nav {
    grid-column: c6 / c10;
  }

  .footer__contact {
    grid-column: c10 / c13;
  }

  .footer__base {
    grid-column: c1 / c13;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

/* ==========================================================================
   Inner pages
   The same system as the homepage: grounds, type scale, grid, motion.
   ========================================================================== */

/* ---------- Header over a dark opening section ---------- */

.page-dark-top .site-header:not(.is-scrolled) {
  --focus: var(--on-field);
  color: var(--on-field);
}

.page-dark-top .site-header:not(.is-scrolled) .wordmark__desc {
  color: var(--on-field-2);
}

.page-dark-top .site-header:not(.is-scrolled) .menu-button {
  color: var(--on-field);
}

.page-dark-top .site-header:not(.is-scrolled) .nav .btn {
  --btn-bg: var(--on-field);
  --btn-fg: var(--field-deep);
  --btn-bg-hover: var(--on-field-hover);
}

.page-dark-top .site-header:not(.is-scrolled) .confirm {
  color: #F2CB8C;
}

.menu-open .page-dark-top .site-header,
.menu-open .page-dark-top .site-header .menu-button {
  color: var(--ink);
}

.menu-open .page-dark-top .site-header .wordmark__desc {
  color: var(--ink-2);
}

.menu-panel__links a[aria-current="page"] {
  font-style: italic;
}

/* ---------- Page openings ---------- */

.page-hero {
  padding-top: var(--header-h);
}

.page-hero__inner {
  row-gap: 2.25rem;
  padding-bottom: var(--space-section);
}

.page-hero__text {
  padding-top: clamp(2rem, 6vh, 3.5rem);
}

.page-hero__title {
  font-size: clamp(2.5rem, 1.45rem + 4.2vw, 5.75rem);
}

.page-hero__lede {
  max-width: 36rem;
  margin-top: 1.5rem;
}

.page-hero--dark .page-hero__lede {
  color: var(--on-field-2);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

.page-hero__facts {
  display: none;
}

.page-hero__media {
  grid-column: c2 / full-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--parchment);
}

.page-hero--dark .page-hero__media {
  background: var(--field);
}

.page-hero__media picture {
  height: 100%;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__media--product {
  grid-column: c1 / c13;
  aspect-ratio: 26 / 25;
}

.page-hero--wide .page-hero__media {
  grid-column: full-start / full-end;
  aspect-ratio: auto;
  height: clamp(17rem, 50vh, 28rem);
}

.page-hero--plain .page-hero__inner {
  padding-bottom: var(--space-dense);
}

.motion .page-hero__text > * {
  animation: rise var(--dur-hero) var(--ease-out) both;
}

.motion .page-hero__text > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.motion .page-hero__text > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.motion .page-hero__text > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.motion .page-hero__text > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }

.motion .page-hero__media picture {
  animation: unveil var(--dur-image) var(--ease-out) both;
}

.motion .page-hero__media img {
  animation: settle var(--dur-image) var(--ease-out) both;
}

@media (min-width: 900px) {
  .page-hero__inner {
    min-height: calc(min(88svh, 60rem) - var(--header-h));
    align-items: end;
    row-gap: 0;
  }

  .page-hero__text {
    grid-column: c1 / c7;
    grid-row: 1;
    align-self: end;
    padding-bottom: clamp(0.5rem, 3vh, 2.5rem);
  }

  .page-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.2rem 2.5rem;
    margin-top: clamp(2rem, 5vh, 3.5rem);
    color: var(--ink-2);
    font-size: var(--fs-caption);
  }

  .page-hero__media {
    grid-column: c8 / full-end;
    grid-row: 1;
    align-self: end;
    aspect-ratio: auto;
    height: min(74svh, 50rem);
    margin-top: 1.5rem;
  }

  .page-hero__media--product {
    grid-column: c8 / c13;
    height: auto;
    aspect-ratio: 26 / 25;
    margin-bottom: clamp(0.5rem, 3vh, 2.5rem);
  }

  .page-hero--wide .page-hero__inner {
    min-height: 0;
    padding-bottom: 0;
  }

  .page-hero--wide .page-hero__text {
    grid-column: c1 / c10;
    padding-block: clamp(2.5rem, 8vh, 5rem) var(--space-dense);
  }

  .page-hero--wide .page-hero__media {
    grid-column: full-start / full-end;
    grid-row: 2;
    height: clamp(24rem, 62vh, 44rem);
    margin-top: 0;
  }

  .page-hero--plain .page-hero__inner {
    min-height: 0;
  }

  .page-hero--plain .page-hero__text {
    grid-column: c1 / c10;
    padding-block: clamp(3rem, 10vh, 6rem) 0;
  }
}

@media (min-width: 900px) and (max-height: 820px) {
  .page-hero__title {
    font-size: min(clamp(2.5rem, 1.45rem + 4.2vw, 5.75rem), 10.5vh);
  }

  .page-hero__facts {
    display: none;
  }
}

/* ---------- Section rhythm ---------- */

.band {
  padding-block: var(--space-section);
}

.band--beat {
  padding-block: var(--space-beat);
}

.band--flush-top {
  padding-top: 0;
}

.section-head > * + * {
  margin-top: 1.25rem;
}

.lede {
  color: var(--ink-2);
  font-size: var(--fs-sub);
  line-height: 1.45;
}

.g-field .lede,
.g-deep .lede {
  color: var(--on-field-2);
}

.g-field .prose,
.g-deep .prose {
  color: var(--on-field-2);
}

/* ---------- Split: reading column with a live margin ---------- */

.split {
  row-gap: 2.75rem;
}

.split__main .prose {
  margin-top: 1.5rem;
}

@media (min-width: 900px) {
  .split {
    align-items: start;
    row-gap: 0;
  }

  .split__main {
    grid-column: c1 / c7;
    grid-row: 1;
  }

  .split__aside {
    grid-column: c8 / c13;
    grid-row: 1;
  }

  .split--narrow .split__main {
    grid-column: c2 / c8;
  }

  .split--narrow .split__aside {
    grid-column: c9 / c13;
  }

  .split--mirror .split__main {
    grid-column: c7 / c13;
  }

  .split--mirror .split__aside {
    grid-column: c1 / c6;
  }

  .split--sticky .split__aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .split__aside--low {
    margin-top: clamp(4rem, 10vw, 9rem);
  }
}

/* ---------- Founder (About): name beneath the story, a moderate photograph beside it ---------- */

.founder-id {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.75rem;
}

.founder-id__name {
  font-weight: 600;
}

.founder-id__role {
  color: var(--ink-2);
  font-size: var(--fs-caption);
}

.founder-portrait {
  max-width: 22rem;
}

@media (max-width: 899.98px) {
  .founder-portrait {
    max-width: min(18rem, 80%);
  }
}

/* ---------- Story prose: long first-person copy, set as plain running paragraphs ---------- */

.prose--story {
  /* 58ch measures out at roughly 65-70 characters a line in Source Sans 3 */
  max-width: 58ch;
}

.prose--story p {
  line-height: 1.65;
}

.prose--story > * + * {
  margin-top: 1.35em;
}

.founder-aside {
  margin-top: 1.5rem;
}

/* One centred reading column, for a page with a single piece of content */

.story-column {
  display: grid;
  justify-items: start;
}

.story-column__intro {
  color: var(--ink-2);
  font-size: var(--fs-caption);
  margin-bottom: 1.5rem;
}

.story-column__by {
  max-width: 58ch;
  margin-top: 2rem;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

@media (min-width: 900px) {
  .story-column {
    grid-column: c3 / c11;
  }
}

/* Between 900 and 1180 the founder story takes more columns, so the measure holds */

@media (min-width: 900px) and (max-width: 1179.98px) {
  #founder .split__main {
    grid-column: c1 / c9;
  }

  #founder .split__aside {
    grid-column: c9 / c13;
  }
}

/* ---------- Statement (centred title page) ---------- */

.statement__inner {
  display: grid;
  gap: 1.75rem;
}

.statement__inner p {
  max-width: 36rem;
}

@media (min-width: 900px) {
  .statement__inner {
    grid-column: c3 / c11;
    justify-items: center;
    gap: 2.25rem;
    text-align: center;
  }
}

/* ---------- Figures ---------- */

.figure-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--parchment);
}

.g-deep .figure-portrait,
.g-field .figure-portrait {
  background: var(--field);
}

.figure-portrait picture,
.figure-landscape picture {
  height: 100%;
}

.figure-portrait img,
.figure-landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.figure-landscape {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--parchment);
}

/* Set back: the whole photograph, smaller, as a print on the frame's ground,
   so the book reads as a design and its page text is not legible */
.set-back {
  background: var(--frame-ground);
}

figure.set-back {
  position: relative;
}

.set-back picture {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 76%;
  height: auto;
  transform: translate(-50%, -50%);
  padding: clamp(0.3rem, 0.7vw, 0.6rem);
  background: var(--mat);
  box-shadow:
    0 1px 1px rgba(30, 27, 23, 0.08),
    0 22px 40px -24px rgba(30, 27, 23, 0.55);
}

.set-back img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.prints {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  margin-top: 2.5rem;
}

.prints .print:nth-child(1) {
  --rot: -0.7deg;
  grid-column: 1 / 8;
  grid-row: 1;
}

.prints .print:nth-child(2) {
  --rot: 0.8deg;
  grid-column: 4 / 11;
  grid-row: 2;
  margin-top: -18%;
  z-index: 1;
}

.prints .print img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.motion [data-reveal="prints"]:not(.is-in) .print {
  opacity: 0;
  transform: translateY(28px) rotate(var(--rot));
}

[data-reveal="prints"] .print:nth-child(2) {
  transition-delay: 120ms;
}

.plate-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--parchment);
}

.plate-placeholder span {
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
}

/* ---------- Lists ---------- */

.numbered {
  display: grid;
  margin-top: 2rem;
}

.numbered > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.95rem;
}

.numbered__n {
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 1.875rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.g-field .numbered__n,
.g-deep .numbered__n {
  color: var(--foil);
}

.numbered h3,
.numbered h4,
.facts h3 {
  font-family: var(--sans);
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.3;
}

.numbered p,
.facts p {
  margin-top: 0.35rem;
  color: var(--ink-2);
}

.g-field .numbered p,
.g-deep .numbered p,
.g-field .facts p,
.g-deep .facts p {
  color: var(--on-field-2);
}

.facts {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
}

@media (min-width: 900px) {
  .facts--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--gap) * 1.5);
  }
}

.movement__num {
  display: block;
  margin-bottom: 1rem;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: clamp(3.5rem, 2.5rem + 3.5vw, 6.5rem);
  line-height: 0.8;
  font-variant-numeric: lining-nums;
}

.g-deep .movement__num,
.g-field .movement__num {
  color: var(--foil);
}

.spec--light {
  border-top-color: var(--rule);
}

.spec--light > div {
  border-bottom-color: var(--rule);
}

.spec--light dt {
  color: var(--ink-2);
}

.aside-label {
  margin-bottom: 1rem;
  color: var(--ink-2);
}

.g-field .aside-label,
.g-deep .aside-label {
  color: var(--foil);
}

/* ---------- Two voices ---------- */

.voices {
  row-gap: 2.5rem;
}

.voice {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}

.voice p {
  margin-top: 0.85rem;
}

@media (min-width: 900px) {
  .voices__head {
    grid-column: c1 / c10;
  }

  .voice--first {
    grid-column: c1 / c7;
    grid-row: 2;
    margin-top: 3rem;
  }

  .voice--third {
    grid-column: c7 / c13;
    grid-row: 2;
    margin-top: 3rem;
  }
}

/* ---------- Comparison table ---------- */

.compare-wrap {
  margin-top: 3rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-variant-numeric: lining-nums;
}

.compare th,
.compare td {
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--rule-dark);
  text-align: left;
  vertical-align: top;
}

.compare thead th {
  padding-bottom: 1.25rem;
  border-bottom-color: var(--foil-line);
  font-family: var(--serif);
  font-size: var(--fs-heading);
  font-weight: 400;
  line-height: 1.1;
}

.compare tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 22%;
  background: var(--field-deep);
  color: var(--on-field-2);
  font-size: var(--fs-caption);
  font-weight: 400;
}

.compare thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--field-deep);
}

.compare .compare__price td {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.5rem);
  line-height: 1.1;
}

.compare .compare__price small {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--foil);
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.compare td[colspan] {
  color: var(--on-field);
}

.compare-note {
  margin-top: 1.25rem;
  color: var(--on-field-2);
  font-size: var(--fs-caption);
}

@media (min-width: 900px) {
  .compare-note {
    display: none;
  }
}

/* ---------- FAQ page ---------- */

.faq-page {
  row-gap: 2.5rem;
}

.faq-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.faq-nav a {
  display: inline-block;
  padding-block: 0.35rem;
}

.faq-nav .figure-portrait {
  display: none;
}

.faq-group + .faq-group {
  margin-top: var(--space-section);
}

.faq-group h2 {
  margin-bottom: 1.25rem;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

@media (min-width: 900px) {
  .faq-nav {
    grid-column: c1 / c4;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }

  .faq-nav ul {
    display: grid;
    gap: 0.15rem;
  }

  .faq-nav .figure-portrait {
    display: block;
    margin-top: 2rem;
  }

  .faq-groups {
    grid-column: c5 / c13;
    grid-row: 1;
  }
}

/* ---------- Contact form ---------- */

.form {
  display: grid;
  gap: 1.5rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field > label,
.fieldset legend {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.optional {
  color: var(--ink-2);
  font-weight: 400;
}

.hint {
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--mat);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.45;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:hover,
.field textarea:hover {
  border-color: var(--ink-2);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #9B2C1F;
}

.fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset legend {
  margin-bottom: 0.5rem;
  padding: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--ink);
}

.gift-fields {
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--parchment);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 0.5rem;
}

.form__note {
  color: var(--ink-2);
  font-size: var(--fs-caption);
}

.steps--light .steps__n,
.steps--light span:not(.steps__n) {
  color: var(--ink-2);
}

.steps--light li {
  padding-block: 0.45rem;
}

.talk__facts dd {
  margin-top: 0.35rem;
  font-size: var(--fs-caption);
  line-height: 1.55;
}

/* ---------- Closing band (inner pages) ---------- */

.cta-band {
  padding-block: var(--space-beat) var(--space-section);
}

.cta-band__main {
  display: grid;
  gap: 1.75rem;
  justify-items: start;
}

.cta-band__aside {
  display: grid;
  gap: 0.5rem;
  align-content: end;
  color: var(--on-field-2);
}

.cta-band__aside p:first-child {
  color: var(--on-field);
  font-weight: 600;
}

@media (min-width: 900px) {
  .cta-band__main {
    grid-column: c1 / c8;
  }

  .cta-band__aside {
    grid-column: c9 / c13;
    grid-row: 1;
  }
}

/* ---------- Link list (not found) ---------- */

.link-list--centred {
  width: 100%;
  max-width: 34rem;
  text-align: left;
}

.link-list {
  display: grid;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--fs-heading);
  line-height: 1.15;
  text-decoration: none;
}

.link-list a:hover .btn__arrow {
  transform: translateX(5px);
}

.link-list .btn__arrow {
  width: 1.25rem;
  transition: transform var(--dur-ui) var(--ease-out);
}

/* ---------- Mobile copy trims ---------- */

@media (max-width: 899.98px) {
  .d-only {
    display: none;
  }

  /* Phone length: keep the human first stage and the book, drop the middle photos */
  .stage:nth-child(2) .stage__image,
  .stage:nth-child(3) .stage__image {
    display: none;
  }

  /* One call to action under pricing is enough on a phone */
  .tier__cta,
  .included__head p + p,
  .promises dd {
    display: none;
  }

  .tier {
    padding-block: 1.75rem 2rem;
  }

  .tier__price {
    margin-top: 1.25rem;
  }

  .tier__facts {
    margin-top: 1.25rem;
  }

  .stage__image {
    aspect-ratio: 3 / 2;
  }

  .included__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem var(--gap);
  }

  .included__list li {
    padding-top: 0.6rem;
  }

  .included__list span,
  .steps span:not(.steps__n) {
    display: none;
  }
}

/* ---------- Short desktop screens (1280 × 720 and similar) ---------- */

@media (min-width: 900px) and (max-height: 820px) {
  .hero__title {
    font-size: min(var(--fs-display), 11vh);
  }

  .hero__offer {
    display: none;
  }

  .hero__intro {
    margin-top: 1.5rem;
  }

  .hero__actions {
    margin-top: 1.75rem;
  }
}

/* ---------- Tablet ---------- */

@media (min-width: 900px) and (max-width: 1179.98px) {
  .included__head,
  .included__list {
    grid-column: c1 / c13;
  }

  .tier {
    padding-inline: 1.25rem;
  }

  .tier:first-child {
    padding-left: 0;
  }

  .tier:last-child {
    padding-right: 0;
  }

  .tier__facts > div {
    flex-direction: column;
    gap: 0.1rem;
  }

  .tier__facts dd {
    text-align: left;
  }
}

/* ---------- Touch: 44px targets without changing the drawn underline ---------- */

@media (pointer: coarse) {
  .link {
    position: relative;
  }

  .link::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
  }
}