/* Ostler & Rye: site.css
   Demo site by BOUW. Fictional business. One stylesheet, built from the Web Library (04 - Shared Resources/Web Library).
   Concept: the cover story. Pages are set as magazine spreads with a centre fold and folio numbers you navigate by.
   Hex colours live only in the token block below. Light only (it's paper). Radius 0 everywhere.

   Contents
   1. Tokens (site) + library token contract
   2. Motion tokens                       lib: motion-tokens@v1
   3. Fonts
   4. Base, reset, a11y                   lib: base@v1
   5. Type
   6. Demo bar                            lib: demo-bar@v1
   7. Nav + mobile menu                   lib: nav@v1 (restyled; animated panel)
   8. Buttons and links                   lib: button@v1 (restyled)
   9. Masthead and cover
   10. Spreads, fold, folios
   11. Photographs, grade, image fade     lib: img-wipe@v1 (fade variant)
   12. Contents list and spread preview
   13. Home sections
   14. Portfolio stories
   15. Price list                         lib: menu-list@v1 (restyled)
   16. Packages
   17. FAQ                                lib: faq@v1 (restyled)
   18. About
   19. Form                               lib: form@v1 (restyled)
   20. Close band and footer              lib: footer@v1 (restyled)
   21. Signature motion: the fold opening
   22. View transitions                   lib: view-transitions@v1
   23. Breakpoints
   24. Reduced motion */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --paper: #F2F1EE;
  --ink: #141414;
  --graphite: #5A5A57;
  --hairline: #BDBBB5;
  --folio: #B5470F;
  --folio-deep: #8F380C;     /* button hover: paper on it 6.9:1 */
  --error: #9E2A2B;
  --on-ink-muted: #A8A7A2;   /* secondary text on ink: 7.6:1 (graphite on ink fails at 2.6:1) */
  --sheet-tint: #EAE9E5;     /* mini spread right page, form success panel */
  --scrim: rgb(20 20 20 / 0.62);
  --scrim-deep: rgb(20 20 20 / 0.86);
  --scrim-top: rgb(20 20 20 / 0.8);    /* masthead scrim over the top of the cover */   /* measured: brief scrim alone gave 1.3:1 on the lightest pixel */
  --fold-shade: rgb(20 20 20 / 0.06);
  --grain-opacity: 0.09;     /* film grain on photographs */
  --stock: #E9E3D8;          /* warmer uncoated stock: ink 14.4:1, graphite 5.4:1 */
  --folio-on-stock: #A3420E; /* folio on stock 4.9:1 (brand folio is 4.25 there) */
  --ink-2: #1C1B19;          /* inked section stock: paper 15.2:1 */
  --folio-on-ink: #E0662A;   /* folio numerals on ink 5.0:1 */
  --hair-on-ink: #57554F;    /* decorative rules on ink only */
  --c-paper: #F2F1EE;        /* fixed copies for inserts that sit inside inked sections */
  --c-ink: #141414;
  --c-graphite: #5A5A57;
  --c-hairline: #BDBBB5;
  --c-folio: #B5470F;

  /* library token contract */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--graphite);
  --accent: var(--folio);
  --on-accent: var(--paper);
  --surface: var(--sheet-tint);
  --line: var(--hairline);
  --danger: var(--error);
  --on-media: var(--paper);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 8rem;
  --space-section: clamp(3.5rem, 1.5rem + 5vw, 7rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --measure: 62ch;
  --pp: clamp(1rem, 0.2rem + 4vw, 4.5rem);        /* page padding inside a spread */
  --sheet: 100rem;                                  /* widest a spread gets */

  --step--1: 0.8125rem;
  --step-0: 1.125rem;
  --step-1: 1.375rem;
  --step-2: 2rem;
  --step-3: clamp(2.75rem, 6vw, 5rem);
  --step-5: clamp(4.5rem, 12vw, 11rem);

  --radius: 0;
  --radius-lg: 0;
}

/* 2. Motion tokens --------------------------------------------------------- */
/* lib: motion-tokens@v1
   Three curves, three durations, one stagger step. Every transition and animation on the site uses these.
   --ease-out     settle: things arriving (reveals, wipes, page settle)
   --ease-in-out  travel: things moving between two states (menu, fold opening, view transitions)
   --ease-press   snap: direct feedback (hover, press)
   Reduced motion: section 24 zeroes every duration. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 200ms;   /* hover, underline, focus */
  --dur-2: 450ms;   /* page settle, menu, preview swap */
  --dur-3: 900ms;   /* image wipe, fold opening */
  --stagger: 70ms;
  --ease: var(--ease-out); /* library alias */
}

/* 3. Fonts: self-hosted, Latin subset, OFL (see /fonts/LICENSES.md) ------- */
/* Newsreader is cut from the variable font into its two optical sizes, mapped by weight:
   300 = display cut (opsz 72) for mastheads, titles and pull lines; 400-600 = text cut (opsz 16, wght variable).
   Same family name, so components just ask for a weight. 77KB for all four instead of 243KB for the full variable pair. */
@font-face { font-family: "Newsreader"; src: url("/demos/ostler-and-rye/fonts/newsreader-display.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/demos/ostler-and-rye/fonts/newsreader-display-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/demos/ostler-and-rye/fonts/newsreader-text.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/demos/ostler-and-rye/fonts/newsreader-text-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/demos/ostler-and-rye/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/demos/ostler-and-rye/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 4. Base ------------------------------------------------------------------ */
/* lib: base@v1 (reset and a11y helpers; layout primitives not used) */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100svh;
  background: var(--paper); color: var(--ink);
  font: 400 var(--step-0) / 1.65 var(--font-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
.toc__title { text-wrap: balance; }
:where(ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: var(--folio); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--space-3); top: var(--space-3); z-index: 1000;
  padding: var(--space-2) var(--space-3);
  background: var(--ink); color: var(--paper); font: 500 var(--step--1) / 1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--folio); outline-offset: 3px; }
:target { scroll-margin-top: 4.5rem; }

/* 5. Type ------------------------------------------------------------------ */
.mono, .label {
  font: 400 var(--step--1) / 1.5 var(--font-mono);
  letter-spacing: 0.04em;
}
.label { text-transform: uppercase; color: var(--graphite); }
.h2 { font-size: var(--step-2); font-weight: 400; line-height: 1.15; }
.title {
  font-size: var(--step-3); font-style: italic; font-weight: 300;
  line-height: 1.1; padding-bottom: 0.15em; letter-spacing: -0.01em;
}
.standfirst { font-size: var(--step-1); line-height: 1.5; font-style: italic; color: var(--ink); max-width: 34ch; }
.body { max-width: var(--measure); }
.body > p + p { margin-top: 1em; }
.meta { font: 400 var(--step--1) / 1.6 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite); }
.meta span + span::before { content: "/"; padding-inline: 0.6em; color: var(--hairline); }
.small { font-size: 0.9375rem; line-height: 1.5; color: var(--graphite); }
.pull {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); font-style: italic; font-weight: 300;
  line-height: 1.15; letter-spacing: -0.01em; padding-bottom: 0.15em;
}

/* Three-line drop cap on story openers */
.dropcap::first-letter {
  float: left; margin: 0.06em 0.08em 0 -0.02em;
  font-size: 4.35em; line-height: 0.82; font-weight: 300; font-style: normal;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .dropcap::first-letter { float: none; margin: 0 0.12em 0 0; font-size: inherit; line-height: inherit; -webkit-initial-letter: 3; initial-letter: 3; }
}

/* 6. Demo bar -------------------------------------------------------------- */
/* lib: demo-bar@v1 */
.demo-bar { position: relative; z-index: 60; padding: 0.4rem var(--gutter); background: var(--ink); color: var(--paper); font: 400 0.75rem / 1.4 var(--font-mono); letter-spacing: 0.03em; text-align: center; }
.demo-bar a { font-weight: 500; text-decoration-color: currentColor; }
.demo-bar a:focus-visible { outline-color: var(--paper); }
.demo-bar__short { display: none; }

/* 7. Nav ------------------------------------------------------------------- */
/* lib: nav@v1 (restyled: one mono line, square button, animated clip-path panel on mobile) */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav__in {
  display: flex; align-items: center; gap: var(--space-4);
  max-width: var(--sheet); min-height: 3.75rem; margin-inline: auto; padding-inline: var(--pp);
}
.nav__id { display: grid; margin-right: auto; }
.nav__id > * { grid-area: 1 / 1; align-self: center; }
.nav__brand {
  font: 400 1.25rem / 1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.nav__tag { font: 400 var(--step--1) / 1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite); }
.nav__menu ul { display: flex; gap: var(--space-5); }
.nav__menu a {
  position: relative; display: inline-block; padding-block: 0.6rem;
  font: 500 0.875rem / 1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease-press);
}
.nav__menu a:hover::after, .nav__menu a:focus-visible::after { transform: scaleX(1); }
.nav__menu a[aria-current="page"]::after { background: var(--folio); transform: scaleX(1); }
.nav__toggle {
  display: none; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem;
  border: 0; background: transparent; cursor: pointer;
}
.nav__bars, .nav__bars::before { display: block; width: 1.25rem; height: 1.5px; background: currentColor; transition: transform var(--dur-2) var(--ease-in-out); }
.nav__bars { position: relative; transform: translateY(-0.2rem); }
.nav__bars::before { content: ""; position: absolute; top: 0.4rem; }
.nav__toggle[aria-expanded="true"] .nav__bars { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(-0.4rem) rotate(-90deg); }

/* Home: the nav line carries the trade until the masthead scrolls away, then the wordmark */
.home .nav { border-bottom-color: transparent; transition: border-color var(--dur-2) var(--ease-out); }
.home .nav__brand, .home .nav__tag { transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s; }
.home .nav__brand { visibility: hidden; opacity: 0; transform: translateY(0.5rem); }
.home .nav.is-stuck { border-bottom-color: var(--hairline); }
.home .nav.is-stuck .nav__brand { visibility: visible; opacity: 1; transform: none; }
.home .nav.is-stuck .nav__tag { opacity: 0; transform: translateY(-0.5rem); }

/* 8. Buttons and links ----------------------------------------------------- */
/* lib: button@v1 (restyled: square, mono uppercase label, folio fill) */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.95em 1.6em;
  border: 0; border-radius: 0; background: var(--folio); color: var(--c-paper);
  font: 500 var(--step--1) / 1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-1) var(--ease-press);
}
/* hover: a deeper ink wipes in from the left, like a page edge passing */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--folio-deep);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: progress; }
.btn--sm { padding: 0.85em 1.15em; }
.btn--on-dark:focus-visible { outline-color: var(--paper); }

/* Standalone text link: a static hairline rule, the ink rule grows over it left to right */
.link {
  position: relative; display: inline-block; padding-bottom: 0.2em;
  text-decoration: none; font: 500 var(--step--1) / 1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.link::before, .link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); }
.link::after { background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease-press); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link--serif { font: italic 400 var(--step-0) / 1.4 var(--font-display); letter-spacing: 0; text-transform: none; }

/* Links inside running text keep a visible underline; it thickens on hover */
.body a, .small a, .footer__col a, .footer__note a, .faq a, .form a {
  text-decoration-line: underline; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-1) var(--ease-press);
}
.body a:hover, .small a:hover, .faq a:hover, .form a:hover { text-decoration-color: var(--ink); }

/* 9. Masthead and cover ---------------------------------------------------- */
/* The home page is a cover: the photograph runs from under the nav to 88dvh, the masthead is set over its
   top on a top scrim, the cover line (H1) sits bottom left and two small cover lines bottom right. */
.cover {
  position: relative; display: grid; isolation: isolate;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  max-width: var(--sheet); margin-inline: auto;
  min-height: max(34rem, calc(88dvh - 3.75rem));
  color: var(--paper); background: var(--c, var(--ink));
}
.cover__img { grid-area: 1 / 1 / -1 / -1; position: relative; z-index: -2; }
.cover__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
.cover::before {
  content: ""; grid-area: 1 / 1 / 2 / -1; z-index: -1; pointer-events: none; margin-bottom: -7rem;
  background: linear-gradient(to bottom, var(--scrim-top) 0%, var(--scrim-top) 55%, transparent 100%);
}
.cover__scrim {
  grid-area: 1 / 1 / -1 / -1; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 95% at 6% 100%, rgb(20 20 20 / 0.92) 64%, transparent),
    radial-gradient(ellipse 34% 78% at 100% 100%, rgb(20 20 20 / 0.94) 68%, transparent),
    linear-gradient(to top, rgb(20 20 20 / 0.4) 0%, transparent 45%);
}
/* Masthead: one line across the cover, set with tracking (no justified word gaps).
   --mast-em is the measured width of "OSTLER & RYE" in em at this tracking, so the line fills the measure. */
.masthead {
  --mast-em: 7.24; /* measured 7.09em; slack for the scrollbar inside 100vw */
  grid-area: 1 / 1 / 2 / -1; align-self: start; justify-self: start;
  padding: clamp(0.75rem, 2vw, 1.75rem) var(--pp) 0;
  font: 300 calc((min(100vw, var(--sheet)) - 2 * var(--pp)) / var(--mast-em)) / 0.86 var(--font-display);
  letter-spacing: 0.012em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--paper);
}
.masthead:focus-visible { outline-color: var(--paper); outline-offset: -2px; }
.cover__in { grid-area: 3 / 1; align-self: end; padding: var(--space-5) var(--pp) var(--space-5); }
.cover h1 {
  max-width: 9.2em; font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
}
.cover__sub { margin-top: var(--space-4); max-width: 38ch; font-size: var(--step-0); line-height: 1.5; }
@media (min-width: 48rem) and (max-height: 50rem) { .cover h1 { font-size: clamp(2.75rem, 4.2vw, 4.25rem); } .cover__in { padding-top: var(--space-4); } }
.cover__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
.cover .link::before { background: rgb(242 241 238 / 0.5); }
.cover .btn:focus-visible, .cover .link:focus-visible { outline-color: var(--paper); }

/* cover lines: small stacked lines that link to a story's folio */
/* cover lines sit mid-right, clear of the couple (bottom centre-right) and the H1 (bottom left) */
/* cover lines: bottom right on the scrim, aligned to the CTA line, paper hairlines between them (no boxes) */
.cover__lines { grid-area: 3 / 2; align-self: end; display: grid; gap: var(--space-4); width: 18.5rem; padding: 0 var(--pp) var(--space-5) 0; list-style: none; }
.cover__lines li { padding-top: var(--space-3); border-top: 1px solid rgb(242 241 238 / 0.55); }
.cover__lines a { display: block; text-decoration: none; }
.cover__lines a:focus-visible { outline-color: var(--paper); }
.cover__lines .label { display: flex; justify-content: space-between; gap: var(--space-3); color: inherit; }
.cover__lines .label b { font-weight: 500; }
.cover__line {
  display: block; margin-top: 0.3rem; font: italic 300 1.375rem / 1.3 var(--font-display); text-wrap: balance;
}
.cover__line span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease-out);
}
.cover__lines a:hover .cover__line span, .cover__lines a:focus-visible .cover__line span { background-size: 100% 1px; }

/* 10. Spreads, fold, folios ------------------------------------------------ */
/* A spread = running heads + two pages. Folios come from one CSS counter (reset per page on <main>),
   so adding a spread renumbers everything after it. */
.spread { position: relative; max-width: var(--sheet); margin-inline: auto; padding-top: var(--space-section); }
.spread--tight { padding-top: var(--space-6); }
.spread__head {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 0 var(--pp) var(--space-4);
  font: 400 0.75rem / 1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite);
}
.spread__pages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow-x: clip; }
/* the fold: a 1px hairline with a 24px soft shade either side */
.spread__pages::before {
  content: ""; position: absolute; top: 0; bottom: var(--space-6); left: calc(50% - 90px); width: 180px; z-index: 3; pointer-events: none; /* stops above the folio strip */
  /* fold shade plus the page curl: a long soft falloff into the gutter on both pages, faded out at top and bottom */
  background:
    linear-gradient(to right, transparent, rgb(20 20 20 / 0.015) 60%, var(--fold-shade) 88%, rgb(20 20 20 / 0.1)) 0 0 / 90px 100% no-repeat,
    linear-gradient(to left, transparent, rgb(20 20 20 / 0.015) 60%, var(--fold-shade) 88%, rgb(20 20 20 / 0.1)) 100% 0 / 90px 100% no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) 50% 0 / 1px 100% no-repeat;
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.spread--text-across .spread__pages::before { z-index: 0; }

.page { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 var(--pp) calc(var(--space-6) + 0.5rem); }
.page > * { position: relative; z-index: 1; }
.page--bleed { padding-inline: 0; }
.page--bleed:first-child { padding-right: 0; }
/* folios: outer bottom corners, folio orange, hidden from assistive tech (the anchors carry the meaning) */
.page::after, .page--across::before {
  counter-increment: folio;
  content: counter(folio, decimal-leading-zero) / "";
  position: absolute; bottom: var(--space-4); z-index: 1;
  font: 500 var(--step--1) / 1 var(--font-mono); letter-spacing: 0.06em; color: var(--folio);
}
.page:first-child::after { left: var(--pp); }
.page:last-child::after { right: var(--pp); }
.page--across { grid-column: 1 / -1; padding-inline: 0; }
.page--across::before { left: var(--pp); }
.page.page--across::after { right: var(--pp); left: auto; }
.spread--nofolio .page::after, .spread--nofolio .page--across::before { content: none; counter-increment: none; }

/* page content helpers */
.page__top { display: grid; gap: var(--space-4); }
.page__foot { margin-top: auto; padding-top: var(--space-6); }
.page--split { justify-content: space-between; }
.page--center { justify-content: center; }
.page--pad-top { padding-top: clamp(1rem, 4vw, 4rem); }

/* 11. Photographs ---------------------------------------------------------- */
/* Grade every stock frame the same way: lift blacks, a little warmth, slightly less saturation. Grain comes from the paper layer. */
.ph { position: relative; display: block; overflow: hidden; background: var(--c, var(--sheet-tint)); }
/* the house grade (exposure, lifted blacks, warmth, saturation) is baked into every story frame at build */
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ph--portrait { aspect-ratio: 4 / 5; max-height: 92svh; }
.ph--tall { aspect-ratio: 2 / 3; max-height: 94svh; }
.ph--album { aspect-ratio: 6 / 5; }
.ph--land { aspect-ratio: 3 / 2; }
.ph--sq { aspect-ratio: 1; }
.ph--across { aspect-ratio: 2.2 / 1; max-height: 92svh; }
.ph--fill { height: 100%; min-height: 24rem; }
figcaption { margin-top: var(--space-3); padding-inline: var(--pp); font: 400 var(--step--1) / 1.5 var(--font-mono); letter-spacing: 0.04em; color: var(--graphite); }

/* lib: img-wipe@v1 (fade variant, .wipe--fade)
   Each frame is filled with its photograph's dominant colour (--c, set per image at build), so nothing grey
   shows while it loads; the photo then fades in over 200ms once decoded. Only with html.js and motion allowed;
   the LCP image is never faded. JS: initImgWipe() adds .is-loaded. */
@media (prefers-reduced-motion: no-preference) {
  .js .wipe--fade img { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
  .js .wipe--fade.is-loaded img { opacity: 1; }
}

/* 12. Contents list and spread preview ------------------------------------- */
.toc { padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.toc li + li { border-top: 1px solid var(--hairline); }
.toc__row {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline;
  padding: var(--space-4) 0; text-decoration: none;
}
.toc__thumb { display: none; }
.toc__folio { font: 500 1rem / 1 var(--font-mono); letter-spacing: 0.04em; color: var(--folio); }
.toc__title { display: block; font-size: 1.625rem; line-height: 1.2; transition: transform var(--dur-2) var(--ease-out); }
.toc__line { display: block; margin-top: 0.3rem; font-style: italic; color: var(--graphite); max-width: 44ch; text-wrap: pretty; transition: transform var(--dur-2) var(--ease-out); transition-delay: 30ms; }
.toc__folio { position: relative; justify-self: start; padding-bottom: 0.25rem; }
.toc__folio::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--folio);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-1) var(--ease-press);
}
.toc__row:hover .toc__folio::after, .toc__row:focus-visible .toc__folio::after, .toc__row.is-active .toc__folio::after { transform: scaleX(1); }
.toc__row:hover :is(.toc__title, .toc__line), .toc__row:focus-visible :is(.toc__title, .toc__line) { transform: translateX(0.5rem); }

/* the preview: a miniature of the story's opening spread, fixed in the left page under the heading */
.preview { position: relative; margin-top: var(--space-5); aspect-ratio: 3 / 2; }
.mini {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--sheet-tint); box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -24px rgb(20 20 20 / 0.35);
  opacity: 0; transition: opacity var(--dur-1) var(--ease-press);
}
.mini::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 14px); width: 28px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right, transparent, rgb(20 20 20 / 0.08)) 0 0 / 14px 100% no-repeat,
    linear-gradient(to left, transparent, rgb(20 20 20 / 0.08)) 100% 0 / 14px 100% no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) 50% 0 / 1px 100% no-repeat;
}
.mini.is-active { opacity: 1; z-index: 1; }
.mini .ph { height: 100%; aspect-ratio: auto; }
.mini__page { position: relative; display: flex; flex-direction: column; padding: 8% 9%; }
.mini__meta { font: 400 0.6875rem / 1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--graphite); }
.mini__title { margin-top: 0.6rem; font: italic 300 clamp(1.25rem, 0.6rem + 1.4vw, 2rem) / 1.1 var(--font-display); padding-bottom: 0.1em; }
.mini__stand { margin-top: 0.7rem; font: italic 400 0.875rem / 1.45 var(--font-display); color: var(--graphite); }
.mini__folio { margin-top: auto; align-self: flex-end; font: 500 0.75rem / 1 var(--font-mono); color: var(--folio-on-stock); }
@media (prefers-reduced-motion: no-preference) {
  .mini .ph img { clip-path: inset(0 0 0 100%); transition: clip-path var(--dur-2) var(--ease-in-out); }
  .mini.is-active .ph img { clip-path: inset(0); }
  .mini__page > * { opacity: 0; transform: translateY(0.4rem); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .mini.is-active .mini__page > * { opacity: 1; transform: none; transition-delay: 120ms; }
  .mini.is-active .mini__title { transition-delay: 180ms; }
}

/* 13. Home sections -------------------------------------------------------- */
.contents-h { max-width: 14ch; }
.work__pull { max-width: 18ch; }
.work .body { margin-top: var(--space-5); }
.work .ph { height: 100%; min-height: 26rem; }
.quote { grid-column: 1 / -1; padding: var(--space-6) var(--pp) calc(var(--space-6) + 1.5rem); text-align: center; }
.quote .pull { text-wrap: balance; }
.quote blockquote p {
  max-width: 30ch; margin-inline: auto;
  font: italic 300 clamp(1.75rem, 1rem + 2.4vw, 2.5rem) / 1.25 var(--font-display); letter-spacing: -0.005em;
  padding-bottom: 0.1em; text-wrap: balance;
}
.quote figcaption { margin-top: var(--space-4); padding: 0; color: var(--ink); }
/* text set across the fold sits on paper, so the fold breaks around it */
.quote .sample { display: block; margin-top: var(--space-2); color: var(--graphite); text-transform: none; }
.page--h2top .h2 { max-width: 14ch; }
.page__pull { max-width: 16ch; margin-top: var(--space-6); color: var(--graphite); }
.page__detail { width: min(62%, 22rem); margin-top: var(--space-6); }
.page__detail .ph { width: 100%; }
.page__aside .small { margin-top: var(--space-3); }
/* the fold breaks for the quote: two short stubs, top and bottom, and clean paper in between */
.spread--quote .spread__pages::before {
  background:
    linear-gradient(var(--hairline), var(--hairline)) 50% 0 / 1px 3rem no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) 50% 100% / 1px 3rem no-repeat;
}

/* 14. Portfolio stories ---------------------------------------------------- */
.opener__text { display: grid; gap: var(--space-4); }
.opener__body { margin-top: var(--space-6); }
.story-pic { display: grid; gap: var(--space-5); }
.story-pic .ph--sq { width: 62%; margin-left: auto; }
.story-pic--one { height: 100%; align-content: center; }
.closing__para { max-width: 30ch; font: italic 300 clamp(1.5rem, 1.1rem + 1vw, 1.875rem) / 1.35 var(--font-display); padding-bottom: 0.1em; }
.next { display: grid; gap: var(--space-4); justify-items: start; }
.next { width: 100%; }
.next .ph { width: 60%; }
.page--end { justify-content: flex-end; align-items: flex-start; }

/* 15. Price list ----------------------------------------------------------- */
/* lib: menu-list@v1 (restyled: Newsreader name, mono price, hairline dotted leader) */
.menu__items { display: grid; gap: var(--space-5); padding: 0; list-style: none; }
.menu__row { display: flex; align-items: baseline; gap: var(--space-2); }
.menu__name { font: 400 1.625rem / 1.2 var(--font-display); }
.menu__row::after { content: ""; order: 1; flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--hairline); transform: translateY(-0.3em); }
.menu__price { order: 2; font: 500 1rem / 1 var(--font-mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.menu__desc { margin-top: var(--space-1); font-style: italic; color: var(--graphite); }
.menu--compact .menu__name { font-size: 1.25rem; }
.menu--compact .menu__items { gap: var(--space-4); }
.prices__note { margin-top: var(--space-5); }
.prices__link { margin-top: var(--space-4); }

/* 16. Packages ------------------------------------------------------------- */
.pkgs-left { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.pkg__name { font-size: 1.75rem; line-height: 1.15; }
.pkg__price { margin-top: var(--space-3); font: 400 clamp(2rem, 1.4rem + 1.6vw, 2.75rem) / 1 var(--font-mono); letter-spacing: -0.02em; }
.pkg__price small { font-size: 0.45em; letter-spacing: 0.04em; vertical-align: 0.9em; margin-right: 0.15em; }
.pkg__lede { margin-top: var(--space-3); font-style: italic; color: var(--graphite); }
.pkg__list { margin-top: var(--space-4); padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--ink); }
.pkg__list li { line-height: 1.45; }
.pkg__list li + li { margin-top: 0.7em; }
.pkg--feature .pkg__name { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-style: italic; font-weight: 300; padding-bottom: 0.1em; }
.pkg--feature .pkg__price { font-size: clamp(2.75rem, 1.8rem + 3vw, 4.5rem); color: var(--folio); }
.pkg--feature .pkg__list { columns: 2 16rem; column-gap: var(--space-5); }
.pkg--feature .pkg__list li { break-inside: avoid; }
.pkg__tag { margin-bottom: var(--space-3); }

/* 17. FAQ ------------------------------------------------------------------ */
/* lib: faq@v1 (restyled: Newsreader question, ink rules, rotating plus) */
.faq { max-width: var(--measure); border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: 2.75rem; padding-block: var(--space-4);
  font: 400 1.375rem / 1.3 var(--font-display); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.85rem; height: 0.85rem;
  background: linear-gradient(var(--folio), var(--folio)) 50% 50% / 100% 1.5px no-repeat, linear-gradient(var(--folio), var(--folio)) 50% 50% / 1.5px 100% no-repeat;
  transition: transform var(--dur-2) var(--ease-in-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--graphite); }
.faq details > p { padding-bottom: var(--space-4); max-width: 58ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-2) var(--ease-in-out), content-visibility var(--dur-2) allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* 18. About ---------------------------------------------------------------- */
.steps { position: relative; margin-top: var(--space-5); padding: 0 0 0 var(--space-5); list-style: none; }
.steps::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; bottom: 0.9rem; width: 1px; background: var(--folio); transform-origin: top; }
.steps li { position: relative; }
.steps li + li { margin-top: var(--space-4); }
.steps li::before { content: ""; position: absolute; left: calc(-1 * var(--space-5) + 0.3rem - 3px); top: 0.75rem; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--folio); border-radius: 50%; }
.steps h3 { font-size: 1.5rem; line-height: 1.3; }
.steps p { color: var(--graphite); max-width: 44ch; }
.dont { max-width: 22ch; font: italic 300 1.75rem / 1.35 var(--font-display); padding-bottom: 0.1em; }

/* 19. Form ----------------------------------------------------------------- */
/* lib: form@v1 (restyled: mono labels, Newsreader inputs, 2px ink bottom border, folio focus ring) */
.form { display: grid; gap: var(--space-5); max-width: 34rem; }
.field { display: grid; align-content: start; gap: var(--space-2); }
.field > label { font: 500 var(--step--1) / 1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.field > label .opt { font-weight: 400; color: var(--graphite); text-transform: none; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.75rem; padding: 0.4rem 0 0.5rem;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 400 1.125rem / 1.4 var(--font-display); appearance: none;
  transition: border-color var(--dur-1) var(--ease-press);
}
.field textarea { min-height: 7.5rem; resize: vertical; padding-top: 0.6rem; }
.field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; }
.select { position: relative; }
.select::after {
  content: ""; position: absolute; right: 0.35rem; top: 50%; width: 0.5rem; height: 0.5rem; pointer-events: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-75%) rotate(45deg);
}
.select select { padding-right: 2rem; cursor: pointer; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--folio); outline-offset: 3px; }
.field__hint { font-size: 0.9375rem; line-height: 1.45; color: var(--graphite); }
.field__error { font-size: 0.9375rem; line-height: 1.45; font-weight: 600; color: var(--error); }
.field__warn { padding-left: var(--space-3); border-left: 2px solid var(--folio); font-size: 0.9375rem; line-height: 1.45; }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
.form__summary { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--error); color: var(--error); font-weight: 600; }
.form__summary:focus-visible { outline-offset: 2px; }
.form__foot { display: grid; gap: var(--space-3); justify-items: start; }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__success { display: grid; gap: var(--space-4); max-width: 34rem; padding-top: var(--space-4); border-top: 1px solid var(--ink); }
.form__success h2 { font: italic 300 clamp(2rem, 1.4rem + 2vw, 2.75rem) / 1.15 var(--font-display); padding-bottom: 0.1em; }
.form__success h2:focus { outline: none; }
.next-steps { counter-reset: step; display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--ink); }
.next-steps li { display: grid; grid-template-columns: 1.75rem 1fr; }
.next-steps li { counter-increment: step; }
.next-steps li::before { content: counter(step, decimal-leading-zero); color: var(--folio); }
.enquire-left .standfirst { max-width: 30ch; }
/* 19b. Sections and stock ------------------------------------------------- */
/* Each section is its own sheet: paper, a warmer stock, an inked band or an inserted page. Bands run
   full-bleed with the box-shadow trick, so the spread grid itself is untouched. */
.surface--stock, .surface--ink {
  box-shadow: 0 0 0 100vmax var(--surface-bg); clip-path: inset(0 -100vmax);
  background: var(--surface-bg); padding-bottom: var(--space-5);
}
.surface--stock { --surface-bg: var(--stock); --folio: var(--folio-on-stock); --c: var(--stock); }
.surface--ink {
  --surface-bg: var(--ink-2); --ink: var(--c-paper); --paper: var(--ink-2); --graphite: var(--on-ink-muted);
  --hairline: var(--hair-on-ink); --folio: var(--folio-on-ink); --fold-shade: rgb(0 0 0 / 0.35);
  color: var(--ink);
}
.surface--ink :focus-visible { outline-color: var(--c-paper); }
/* a surface change gets its own top margin of open paper above it, so the cut reads as a new sheet */
.surface--stock + .spread:not(.surface--stock):not(.surface--ink), .surface--ink + .spread:not(.surface--ink):not(.surface--stock) { padding-top: var(--space-section); }

/* lib: paper-grain@v1, applied as ONE fixed layer over the whole page (no seams between sections,
   one composited layer instead of one per section). Multiply at 5%: it tints paper and stock, all but vanishes
   on ink and photographs, and moves text contrast by well under 0.1. Ink sections add their own light speckle. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 85; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.surface--ink, .close, .footer { position: relative; isolation: isolate; }
.surface--ink::before, .close::before, .footer::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .97 0 0 0 3 -2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
@media (forced-colors: active) { body::after, .surface--ink::before, .close::before, .footer::before { display: none; } }

/* Section opener: a rule-and-label masthead with a large numeral, like a feature's opening page */
.sect {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--space-4);
  padding: 0 var(--pp) var(--space-5);
}
.sect__no {
  grid-row: 1 / 3; font: 300 clamp(4.5rem, 2rem + 8vw, 9rem) / 0.78 var(--font-display); letter-spacing: -0.04em;
  color: var(--ink); opacity: 0.85; font-variant-numeric: lining-nums;
}
.sect__title { align-self: end; padding-bottom: 0.35rem; border-bottom: 1px solid var(--ink);
  font: 500 var(--step--1) / 1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sect__kicker { text-wrap: pretty; padding-top: 0.45rem; font: italic 400 1.0625rem / 1.3 var(--font-display); color: var(--graphite); }
.spread--start { padding-top: var(--space-section); }
.spread--start .spread__head { display: none; }
/* rhythm: inside a story the spreads sit close, like turning pages; a new section gets air */
.spread--cont { padding-top: var(--space-5); }

/* Full-bleed photo break between sections */
.break { position: relative; margin-top: var(--space-section); }
.break .ph { width: 100%; aspect-ratio: 2.4 / 1; max-height: 78svh; }
.break figcaption {
  margin: 0; padding: var(--space-3) max(var(--pp), calc((100% - var(--sheet)) / 2 + var(--pp))) var(--space-4);
  background: var(--stock); color: var(--graphite);
}
.break + .surface--stock { padding-top: var(--space-6); }

/* The inserted page: a separate sheet of paper tipped into an inked or stock band, deckled top and bottom */
.insert {
  --ink: var(--c-ink); --paper: var(--c-paper); --graphite: var(--c-graphite); --hairline: var(--c-hairline); --folio: var(--c-folio);
  position: relative; isolation: isolate; color: var(--ink); background: var(--paper);
  max-width: 54rem; margin-inline: auto; padding: var(--space-6) clamp(1.25rem, 5vw, 5rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 30px 60px -30px rgb(0 0 0 / 0.55);
}
.insert::before {
  content: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.insert :focus-visible { outline-color: var(--c-folio); }
/* deckle: lib paper-grain@v1 .grain--deckle mask */
.insert--deckle {
  --deckle: 8px;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--deckle) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 0V3 L0 3 L6 4.6 L12 2.7 L19 1.5 L26 2.8 L33 4.2 L36 2.7 L40 1.0 L43 3.3 L49 5.0 L56 3.6 L63 0.7 L70 0.9 L73 1.5 L77 3.4 L83 2.1 L90 4.5 L97 1.7 L102 2.9 L105 2.7 L110 2.5 L117 5.2 L120 3.9 L125 4.1 L132 1.9 L135 3.2 L138 2.4 L143 2.4 L146 4.5 L149 1.6 L152 2.8 L158 2.5 L165 3.5 L170 2.1 L175 2.1 L181 4.1 L184 1.2 L187 0.7 L193 4.3 L197 3.7 L201 2.7 L205 5.1 L209 2.5 L215 1.1 L221 5.2 L224 1.8 L231 2.0 L234 1.6 L240 5.2 L247 3.6 L250 0.8 L254 1.6 L259 0.6 L266 2.1 L271 2.4 L274 1.0 L281 3.5 L284 3.4 L289 3.5 L293 5.0 L299 4.4 L303 4.6 L307 3.5 L312 4.8 L319 1.7 L323 1.3 L330 1.5 L336 4.7 L343 1.0 L346 1.1 L349 3.0 L354 1.7 L360 1.8 L367 2.9 L374 1.4 L377 1.2 L383 3.2 L390 3.4 L395 1.6 L399 4.0 L402 1.8 L408 1.7 L411 1.4 L416 3.0 L420 1.0 L424 4.7 L429 3.6 L436 3.3 L440 3.3 L443 2.8 L448 3.8 L451 0.7 L454 2.8 L459 2.1 L462 0.9 L469 2.3 L472 4.7 L476 4.2 L481 2.2 L487 4.7 L493 4.9 L496 4.6 L503 0.7 L509 2.3 L512 3.4 L515 1.0 L518 5.2 L524 3.9 L530 4.9 L537 2.7 L543 4.5 L546 3.0 L553 0.7 L560 1.0 L563 1.7 L566 2.9 L573 3.6 L579 1.8 L582 2.3 L586 3.7 L590 3.0 L595 3.6 L601 2.9 L605 2.1 L610 1.5 L616 4.3 L620 4.6 L626 1.6 L631 1.6 L635 2.9 L638 3.9 L640 3 L640 0Z'/%3E%3C/svg%3E") bottom left / 640px var(--deckle) repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--deckle) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='8' preserveAspectRatio='none'%3E%3Cpath d='M0 0V3 L0 3 L6 4.6 L12 2.7 L19 1.5 L26 2.8 L33 4.2 L36 2.7 L40 1.0 L43 3.3 L49 5.0 L56 3.6 L63 0.7 L70 0.9 L73 1.5 L77 3.4 L83 2.1 L90 4.5 L97 1.7 L102 2.9 L105 2.7 L110 2.5 L117 5.2 L120 3.9 L125 4.1 L132 1.9 L135 3.2 L138 2.4 L143 2.4 L146 4.5 L149 1.6 L152 2.8 L158 2.5 L165 3.5 L170 2.1 L175 2.1 L181 4.1 L184 1.2 L187 0.7 L193 4.3 L197 3.7 L201 2.7 L205 5.1 L209 2.5 L215 1.1 L221 5.2 L224 1.8 L231 2.0 L234 1.6 L240 5.2 L247 3.6 L250 0.8 L254 1.6 L259 0.6 L266 2.1 L271 2.4 L274 1.0 L281 3.5 L284 3.4 L289 3.5 L293 5.0 L299 4.4 L303 4.6 L307 3.5 L312 4.8 L319 1.7 L323 1.3 L330 1.5 L336 4.7 L343 1.0 L346 1.1 L349 3.0 L354 1.7 L360 1.8 L367 2.9 L374 1.4 L377 1.2 L383 3.2 L390 3.4 L395 1.6 L399 4.0 L402 1.8 L408 1.7 L411 1.4 L416 3.0 L420 1.0 L424 4.7 L429 3.6 L436 3.3 L440 3.3 L443 2.8 L448 3.8 L451 0.7 L454 2.8 L459 2.1 L462 0.9 L469 2.3 L472 4.7 L476 4.2 L481 2.2 L487 4.7 L493 4.9 L496 4.6 L503 0.7 L509 2.3 L512 3.4 L515 1.0 L518 5.2 L524 3.9 L530 4.9 L537 2.7 L543 4.5 L546 3.0 L553 0.7 L560 1.0 L563 1.7 L566 2.9 L573 3.6 L579 1.8 L582 2.3 L586 3.7 L590 3.0 L595 3.6 L601 2.9 L605 2.1 L610 1.5 L616 4.3 L620 4.6 L626 1.6 L631 1.6 L635 2.9 L638 3.9 L640 3 L640 0Z'/%3E%3C/svg%3E") bottom left / 640px var(--deckle) repeat-x;
}
@media (forced-colors: active) { .insert--deckle { -webkit-mask: none; mask: none; } }
.spread--insert { padding-bottom: var(--space-6); }
.spread--insert .spread__pages::before { display: none; }
.spread--insert .quote { padding: var(--space-6) clamp(1.25rem, 5vw, 5rem); }
.spread--insert .insert { width: min(54rem, calc(100% - 2 * var(--pp))); }
.spread--insert .page--across::before, .spread--insert .page--across::after { content: none; counter-increment: none; }
.insert--form { max-width: none; padding: var(--space-5) clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 22px 44px -28px rgb(60 40 20 / 0.45); }
.insert .dont { max-width: 30ch; margin-inline: auto; text-align: center; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }

/* 20. Close band and footer ------------------------------------------------ */
.close { background: var(--ink); color: var(--paper); }
.close__in { position: relative; max-width: var(--sheet); margin-inline: auto; padding: var(--space-5) var(--pp) calc(var(--space-6) + 1rem); }
.close__head { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-section); font: 400 0.75rem / 1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-muted); }
.close h2 { max-width: 17ch; font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.015em; }
.close p { max-width: 40ch; margin-top: var(--space-4); }
.close .btn { margin-top: var(--space-5); }
.close .btn:focus-visible { outline-color: var(--paper); }
.close__folio::after {
  counter-increment: folio; content: counter(folio, decimal-leading-zero) / "";
  position: absolute; left: var(--pp); bottom: var(--space-4);
  font: 500 var(--step--1) / 1 var(--font-mono); letter-spacing: 0.06em; color: var(--on-ink-muted);
}

/* lib: footer@v1 (restyled: ink, small masthead, three columns) */
.footer { background: var(--ink); color: var(--paper); }
.footer__in { max-width: var(--sheet); margin-inline: auto; padding: var(--space-6) var(--pp) var(--space-4); border-top: 1px solid rgb(242 241 238 / 0.18); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-5); padding-bottom: var(--space-6); }
.footer__mast { justify-self: start; font: 300 2rem / 1 var(--font-display); letter-spacing: 0; text-transform: uppercase; text-decoration: none; }
.footer__mast:focus-visible, .footer a:focus-visible { outline-color: var(--paper); }
.footer__h { margin-bottom: var(--space-2); font: 400 0.75rem / 1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-muted); }
.footer__col p { font-size: 1rem; line-height: 1.5; }
.footer a { text-decoration-color: rgb(242 241 238 / 0.45); }
.footer a:hover { text-decoration-color: var(--paper); }
.footer__note { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgb(242 241 238 / 0.18); font: 400 0.75rem / 1.6 var(--font-mono); letter-spacing: 0.03em; color: var(--on-ink-muted); }
.footer__note a { color: inherit; }

/* 404 */
.lost { min-height: 60svh; }
.lost .title { max-width: 16ch; }

/* 21. Signature motion: the fold opening, and the spread settle ----------- */
/* Brief motion 1: on a picture spread the left page is already set; the right page's photographs settle
   12px in from the right with a fade, 450ms, the first time the spread enters view. JS adds .is-in
   (IntersectionObserver). Only with html.js and motion allowed, so nothing is hidden otherwise. */
@media (prefers-reduced-motion: no-preference) {
  .js .spread:not(.spread--opener):not(.spread--tight) .page:last-child > .ph,
  .js .spread:not(.spread--opener):not(.spread--tight) .page:last-child .next > .ph {
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }
  .js .spread:not(.spread--opener):not(.spread--tight):not(.is-in) .page:last-child > .ph,
  .js .spread:not(.spread--opener):not(.spread--tight):not(.is-in) .page:last-child .next > .ph { opacity: 0; transform: translateX(12px); }
}

/* Signature: a story opens at the fold. The hairline draws from the centre, then both pages unfold outward.
   JS adds .is-open when the opener enters view. A spread reached by its folio link opens at once
   (so the view transition can land on it). */
@media (prefers-reduced-motion: no-preference) {
  .js .spread--opener .spread__pages::before { transition: transform var(--dur-2) var(--ease-in-out); }
  .js .spread--opener .page { transition: clip-path var(--dur-3) var(--ease-in-out) 160ms; }
  .js .spread--opener:not(.is-open) .spread__pages::before { transform: scaleY(0); }
  .js .spread--opener:not(.is-open) .page:first-child { clip-path: inset(0 0 0 100%); }
  .js .spread--opener:not(.is-open) .page:last-child { clip-path: inset(0 100% 0 0); }
  .js .spread--opener:not(.is-open) .page--across { clip-path: inset(0 50% 0 50%); }
  .js .spread--opener.is-instant .page, .js .spread--opener.is-instant .spread__pages::before { transition: none; }
}

/* 22. View transitions ----------------------------------------------------- */
/* lib: view-transitions@v1
   Same-origin page changes cross-fade; the wordmark morphs between the home masthead and the nav;
   a contents row's preview photograph flies into the story's opening page (names set in JS on
   pageswap/pagereveal). Browsers without support just navigate. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.home .masthead, body:not(.home) .nav__brand { view-transition-name: masthead; }
::view-transition-group(*) { animation-duration: var(--dur-2); animation-timing-function: var(--ease-in-out); }
::view-transition-group(masthead) { animation-duration: 600ms; }
::view-transition-group(story) { animation-duration: 700ms; }
::view-transition-old(masthead), ::view-transition-new(masthead) { height: 100%; width: auto; }
::view-transition-old(root) { animation: 280ms var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 420ms var(--ease-out) 80ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 23. Breakpoints ---------------------------------------------------------- */
@media (max-width: 64rem) {
  /* tablet: the cover lines leave the photo and sit on paper under it, as on phones */
  .cover { grid-template-columns: 1fr; background: var(--paper); }
  .cover__img, .cover__scrim { grid-area: 1 / 1 / 4 / 2; }
  .cover__scrim { background: radial-gradient(ellipse 80% 70% at 0% 100%, rgb(20 20 20 / 0.92) 55%, transparent), linear-gradient(to top, rgb(20 20 20 / 0.6) 0%, transparent 60%); }
  .cover__lines { grid-area: 4 / 1; width: auto; padding: var(--space-5) var(--pp) 0; color: var(--ink); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-5); }
  .cover__lines li { border-top-color: var(--ink); }
  .cover__lines .label { color: var(--graphite); }
  .cover__lines a:focus-visible { outline-color: var(--folio); }
  .pkgs-left { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__mast { grid-column: 1 / -1; }
}

@media (max-width: 56rem) and (scripting: enabled) {
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--space-2) var(--pp) var(--space-5);
    background: var(--paper); border-bottom: 1px solid var(--ink);
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-2) var(--ease-in-out), visibility 0s var(--dur-2);
  }
  .nav__menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }
  .nav__menu ul { flex-direction: column; gap: 0; }
  .nav__menu li { border-bottom: 1px solid var(--hairline); }
  .nav__menu a { display: block; padding-block: 1.1rem; font: italic 300 2rem / 1.1 var(--font-display); letter-spacing: -0.01em; text-transform: none; }
  .nav__menu a::after { bottom: 0.7rem; width: 2.5rem; right: auto; }
  .nav__menu li { opacity: 0; transform: translateY(0.75rem); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .nav__menu.is-open li { opacity: 1; transform: none; }
  .nav__menu.is-open li:nth-child(2) { transition-delay: var(--stagger); }
  .nav__menu.is-open li:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
  .nav__toggle { display: grid; }
}
@media (max-width: 56rem) and (scripting: none) {
  .nav__in { flex-wrap: wrap; }
  .nav__menu { flex: 1 0 100%; order: 3; padding-bottom: var(--space-3); }
  .nav__menu ul { gap: var(--space-4); }
}

@media (max-width: 47.99rem) {
  .sect { column-gap: var(--space-3); padding-bottom: var(--space-4); }
  .sect__no { font-size: 3.25rem; }
  .page__pull { margin-top: var(--space-4); }
  .page__detail { width: 60%; margin-top: var(--space-4); }
  .next .ph { width: 70%; }
  .sect__kicker { font-size: 1rem; }
  .break .ph { aspect-ratio: 4 / 3; }
  .insert { padding: var(--space-5) var(--space-4); }
  :root { --pp: var(--gutter); }
  .demo-bar__long { display: none; }
  .demo-bar__short { display: inline; }
  .nav__tag { display: none; }
  .nav__brand { font-size: 1.0625rem; }
  .cover { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; min-height: 0; background: var(--paper); }
  /* phone: the photo runs from under the nav down to just below the couple; the cover line sits on ink beneath */
  .cover__img { grid-area: 1 / 1 / 3 / 2; aspect-ratio: auto; height: min(125vw, calc(100svh - 355px)); } /* 4:5, shortened on short phones so the CTA stays in the first screen */
  .cover__img img { object-position: 50% 100%; }
  .cover::before { grid-area: 1 / 1 / 2 / 2; }
  .cover__scrim { display: none; }
  .cover__in { grid-area: 3 / 1; padding: var(--space-3) var(--pp) var(--space-5); background: var(--ink); }
  .cover__lines { grid-area: 4 / 1; width: auto; padding: var(--space-5) var(--pp) 0; color: var(--ink); grid-auto-flow: row; gap: var(--space-4); }
  .cover__lines li { border-top-color: var(--ink); }
  .cover__lines .label { color: var(--graphite); }
  .cover__lines a:focus-visible { outline-color: var(--folio); }
  .cover h1 { font-size: 2.125rem; line-height: 1; }
  .cover__sub { margin-top: var(--space-2); font-size: 1rem; }
  .cover__acts { margin-top: var(--space-3); }
  .cover__line { text-wrap: balance; } /* stops one-word last lines at 390 */

  .spread { padding-top: var(--space-6); }
  .spread__pages { grid-template-columns: minmax(0, 1fr); }
  .spread__pages::before { display: none; }
  .page { padding-bottom: calc(var(--space-5) + 1rem); }
  .page::after, .page--across::before { bottom: var(--space-3); }
  /* stacked pages: only the last block of a spread shows its folio; the others still count */
  .page:not(:last-child)::after, .page--across::before { visibility: hidden; }
  .page--bleed { padding-bottom: calc(var(--space-5) + 0.5rem); }
  .page--empty { height: 0; padding: 0; overflow: hidden; }
  .page--empty::after { content: ""; } /* collapse, but keep counting so folios match desktop */
  .page--bleed + .page, .page--across + .page { padding-top: 0; }
  .ph--portrait, .ph--tall { max-height: none; aspect-ratio: 4 / 5; }
  .ph--across { aspect-ratio: 3 / 2; }
  .ph--fill, .work .ph { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .spread__head span:last-child { text-align: right; }

  .preview { display: none; }
  .toc__row { grid-template-columns: 80px 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-block: var(--space-3); }
  .toc__thumb { display: block; width: 80px; height: 80px; }
  .toc__thumb .ph { width: 80px; height: 80px; }
  .contents--text .toc__row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .spread__head span:first-child { display: none; }
  .spread__head { justify-content: flex-end; }
  .toc__folio { padding-top: 0.35rem; }
  .toc__title { font-size: 1.3125rem; }
  .toc__line { font-size: 1rem; line-height: 1.45; }

  .opener__body { margin-top: var(--space-5); }
  .story-pic .ph--sq { width: 70%; }
  .page--order-first { order: -1; }
  .pkgs-left { gap: var(--space-6); }
  .pkg--feature .pkg__list { columns: 1; }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-4); }
  .quote { padding-top: var(--space-4); }
  .story-pic--one { height: auto; }
}
@media (max-width: 22.5rem) {
  .nav__in { gap: var(--space-3); }
  .btn--sm { padding-inline: 0.85em; }
  .nav__brand { font-size: 0.95rem; }
}

/* 24. Reduced motion: no animation, no smooth scroll, no transition ------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}