/* TimmTime – The Private Edition
   Hand-written CSS, no build step.

   Governing rule — light is subtractive: CSS may add black (masks that feather an image into the page),
   never light. No glows, no radial washes, no blurred shapes. All light on the page comes from the client's own pixels,
   with one deliberate extension: the gold dust drifting through the cover (main.js) is the seal film's own material. */

/* ---------- 1. Fonts (self-hosted, variable, latin subset) ---------- */

@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-display-latin.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-display-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin.woff2") format("woff2"); }
/* the latin subset has no "→"; this 1 KB face (same variable Montserrat, arrow only) keeps the arrows in the brand font */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-arrow.woff2") format("woff2"); unicode-range: U+2192; }

/* metric-matched fallbacks, so the swap does not move a line */
@font-face { font-family: "Playfair Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 101.7%; ascent-override: 106.4%; descent-override: 24.7%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 94%; ascent-override: 115.1%; descent-override: 26.7%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 112.5%; ascent-override: 86%; descent-override: 22.3%; line-gap-override: 0%; }

/* ---------- 2. Tokens ---------- */

:root {
  --ink: #0a0a0a;
  --ink-raised: #111110;
  --cream: #f4eee4;
  --text-strong: #e6dfd3;
  --text: #d3ccc0;
  --muted: #9a9389;
  --gold: #c9a46a;
  --gold-light: #dcbf8e;
  --hair: rgba(201, 164, 106, 0.3);
  --hair-soft: rgba(244, 238, 228, 0.13);
  --paper: #f3ede3;
  --paper-ink: #1c1a17;
  --paper-muted: #6a6359;
  --paper-hair: rgba(28, 26, 23, 0.14);

  --serif: "Playfair Display", "Playfair Fallback", Georgia, serif;
  --sans: "Montserrat", "Montserrat Fallback", Arial, sans-serif;

  --margin: clamp(20px, calc(9.6vw - 18px), 120px);
  --content: 1200px;
  --gap: 16px;
  --chapter-pad: clamp(96px, 10vw, 152px);
  --header-h: 60px;
  /* distance from the viewport edge to the content edge, for objects that bleed off the page */
  --edge: calc((100vw - min(100vw - 2 * var(--margin), var(--content))) / 2);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --h1: clamp(38px, 4.8vw, 76px);
  --h2: clamp(34px, 4.4vw, 64px);
}

@media (min-width: 600px) { :root { --gap: 24px; } }
@media (min-width: 600px) and (max-width: 1023px) { :root { --h1: clamp(47px, 6.3vw, 50px); --h2: clamp(40px, 5.4vw, 48px); } }
/* phone landscape and other short screens up to 1023 px: a smaller head so headline, dek and button share the first screen */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 640px) and (max-width: 1023px) { :root { --h1: 40px; } }
/* from 1024 px the head also respects the height: on short, wide windows the seal (sized by height) would meet the full stop */
@media (min-width: 1024px) { :root { --h1: clamp(38px, min(4.8vw, 9.5svh), 76px); } }
@media (max-width: 359px) { :root { --h1: 36px; } }
@media (min-width: 1180px) { :root { --header-h: 84px; } }

/* ---------- 3. Base ---------- */

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

html {
  background: var(--ink);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-gutter: stable;
}
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ink);
}

@media (min-width: 600px) { body { font-size: 17px; } }

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
em { font-style: italic; }
[hidden] { display: none !important; }

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

:focus { outline: none; }
:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; } /* sections focused by in-page links: no ring across the page */

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

.skip {
  position: absolute; left: var(--margin); top: 8px; z-index: 100;
  padding: 12px 18px; background: var(--gold); color: var(--ink);
  font: 600 12px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-160%); transition: transform 0.2s var(--ease);
}
.skip:focus-visible { transform: none; outline-offset: 2px; }

.wrap { width: min(100% - 2 * var(--margin), var(--content)); margin-inline: auto; }

/* ---------- 4. Type roles ---------- */

.label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.h2 .line { display: block; }
.h2, .legal__title, .legal__body h2 { font-variant-numeric: lining-nums; }
/* the italic capitals collide (the T's crossbar runs into the I), so the brand name stays upright inside italic lines */
.brandname { font-style: normal; letter-spacing: 0.02em; }

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: balance;
}

.lead {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.6;
  color: var(--text-strong);
  max-width: 31em;
  text-wrap: pretty;
}

.body { color: var(--text); max-width: 34em; text-wrap: pretty; }
.lead + .body, .body + .body, .lead + .lead { margin-top: 1.1em; }

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.38;
  color: var(--cream);
  max-width: 21em;
  text-wrap: pretty;
}
.quote::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: 26px;
  background: var(--gold);
  transform-origin: left center;
}

.closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--cream);
  max-width: 24em;
  text-wrap: balance;
}


/* ---------- 5. Links and buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 34px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.32s var(--ease), border-color 0.32s var(--ease), color 0.32s var(--ease);
}
.btn span { margin-right: -0.2em; } /* cancel the tracking after the last letter */
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink); }
.btn:active { background: var(--gold-light); border-color: var(--gold-light); transition-duration: 0.12s; }

.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--gold-light); border-color: var(--gold-light); }

@media (max-width: 599px) { .btn { min-height: 52px; padding: 0 26px; } }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.textlink .arrow { display: inline-block; font-size: 1.6em; font-weight: 500; line-height: 1; margin-top: -0.12em; transition: transform 0.32s var(--ease); }
.textlink:hover .arrow { transform: translateX(4px); }
.textlink:hover { color: var(--gold-light); }

/* ---------- 6. Header (letterhead) ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--ink); /* solid from the start: without JS the sticky bar must still cover what scrolls under it */
  transition: height 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.masthead.is-scrolled,
.masthead:has(.menu[open]),
html:not(.js) .masthead { box-shadow: inset 0 -1px 0 var(--hair-soft); }

.masthead__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.masthead__inner > * { flex: none; white-space: nowrap; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--gold); margin-right: auto; padding: 10px 0; }
.brand img { width: 118px; height: auto; }

.nav { display: none; }

.masthead__cta { display: none; }

.masthead__wa {
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 16px 4px;
}

.menu > summary {
  list-style: none;
  cursor: pointer;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 16px 0 16px 8px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
/* the open panel carries the WhatsApp button, so the bar drops its link and the longer label fits */
.menu-open .masthead__wa,
.masthead:has(.menu[open]) .masthead__wa { display: none; }
@media (max-width: 359px) {
  .masthead__inner { gap: 16px; }
  .masthead__wa, .menu > summary { letter-spacing: 0.14em; }
  .brand img { width: 108px; }
}
.menu > summary .is-open { display: none; }
.menu[open] > summary .is-closed { display: none; }
.menu[open] > summary .is-open { display: inline; }

.menu__panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-raised);
  padding: 12px var(--margin) calc(40px + env(safe-area-inset-bottom));
}
.menu__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair-soft);
  font: 400 28px/1.15 var(--serif);
  color: var(--cream);
  text-decoration: none;
}
.menu__list a::after { content: "→"; content: "→" / ""; font: 400 24px/1 var(--sans); color: var(--gold); }
.menu__list a[aria-current="true"] { color: var(--gold); }
/* the current chapter is marked by more than colour: the arrow becomes the seal's dot */
.menu__list a[aria-current="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; align-self: center; margin-right: 4px; }
.menu__actions { margin-top: 36px; display: grid; gap: 14px; justify-items: start; }
.menu__contacts { margin-top: 32px; display: grid; gap: 10px; font-size: 15px; }
.menu__contacts a { display: inline-block; padding-block: 5px; margin-block: -5px; color: var(--text); text-decoration: none; }

@media (min-width: 1180px) {
  .brand img { width: 150px; }
  .nav { display: block; }
  .nav ul { display: flex; gap: 26px; }
  .nav a {
    position: relative;
    display: block;
    padding: 14px 0;
    font: 500 11px/1 var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    transition: color 0.26s var(--ease);
  }
  .nav a::after {
    content: "";
    position: absolute; left: 0; right: 0.22em; bottom: 6px;
    height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.26s var(--ease);
  }
  .nav a:hover, .nav a[aria-current="true"] { color: var(--cream); }
  .nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
  .masthead__cta { display: inline-flex; padding: 12px 0 12px 24px; border-left: 1px solid var(--hair-soft); }
  .masthead__wa, .menu { display: none; }
  .masthead.is-scrolled { height: 64px; }
}
@media (min-width: 1180px) and (max-width: 1279px) {
  .nav ul { gap: 22px; }
}

/* ---------- 7. Cover ---------- */

.cover {
  position: relative;
  overflow-x: clip;
  padding-top: 8px;
  padding-bottom: 0;
}

.cover__inner { display: grid; grid-template-columns: minmax(0, 1fr); }

.cover__text { position: relative; z-index: 2; }

.cover__eyebrow { color: var(--gold); }
.cover__eyebrow span { display: inline-block; text-wrap: balance; } /* one line from about 390 px; below that, two even lines */

.cover__title {
  margin-top: 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--h1);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.cover__title .line { display: block; }
.cover__title { overflow-wrap: break-word; }
.cover__title { text-shadow: 0 0 0.05em var(--ink), 0 0 0.1em var(--ink), 0 0 0.18em var(--ink), 0 0 0.3em var(--ink); }
.cover__title em { font-style: italic; letter-spacing: -0.005em; }

.cover__dek {
  margin-top: 26px;
  max-width: 30em;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--text-strong);
  text-wrap: balance;
}

.actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.actions__note { font-size: 13px; line-height: 1.5; color: var(--muted); letter-spacing: 0.02em; }
.actions__note a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--text); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.actions__note a:hover { color: var(--gold); }

/* the cover's button is one size smaller than the other buttons */
.cover .btn { min-height: 50px; padding: 0 30px; font-size: 11px; }
@media (max-width: 599px) { .cover .btn { min-height: 48px; padding: 0 24px; } }

/* gold dust, drawn by main.js behind the type and the seal; it fades in once the seal has formed */
.cover__dust {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.cover__dust.is-on { opacity: 1; }

.seal { position: relative; aspect-ratio: 1; }
/* The seal: the still (the film's last frame) or the film. Its ring is centred at 53.6 % of the square (the ring runs
   0.101–0.970 of the frame), so the feather is centred on the ring and stays clear of it. */
.seal img, .seal video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(circle closest-side at 53.6% 50%, #000 95%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 53.6% 50%, #000 95%, transparent 100%);
}
.seal video { opacity: 0; transition: opacity 0.6s var(--ease); }
.seal.is-film img { opacity: 0; }
.seal.is-film.is-playing video { opacity: 1; }
.seal img { transition: opacity 0.9s var(--ease); }
/* html.film is set in the head when the film may play: the still waits for it, so the finished seal never flashes
   and then rebuilds; if the script never takes over, the still fades in after 3 s */
.film .seal img { opacity: 0; animation: fade 0.9s var(--ease) 3s both; }
.film .seal.is-film img { animation: none; }

/* The offer as a running line: the four facts unrolled like the seal's lettering and separated by the seal's dot.
   The track holds two identical halves (five groups each, 4354 px) and slides by -50% in 106.7 s (≈ 41 px/s), so the
   loop has no seam on screens up to 4354 px; only the first group is exposed to assistive technology. It runs only
   with JS (the pause control needs it), pauses on mouse hover and with the toggle, and stands still under reduced
   motion and without JS. */
.facts {
  --toggle-slot: max(54px, calc(4.5vw + 22px)); /* right edge of the band to the left edge of the pause control */
  position: relative;
  margin-top: 44px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair-soft);
}
.facts__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.js .facts__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 calc(100% - var(--toggle-slot) - 64px), transparent calc(100% - var(--toggle-slot)));
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 calc(100% - var(--toggle-slot) - 64px), transparent calc(100% - var(--toggle-slot)));
}
.facts__track { display: flex; width: max-content; }
.facts__group { display: flex; flex: none; align-items: center; }
.facts__group li {
  display: flex;
  align-items: center;
  padding-block: 19px;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.facts__group li::after {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
  margin-inline: calc(38px - 0.26em) 38px; /* the tracking already adds 0.26em after the last letter */
}
.facts__toggle { display: none; }

@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: no-preference) {
  .js .facts__track { animation: marquee 106.7s linear infinite; }
  .facts.is-paused .facts__track { animation-play-state: paused; }
  .js .facts__toggle {
    position: absolute;
    top: 50%;
    right: calc(var(--toggle-slot) - 44px);
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.26s var(--ease);
  }
  .facts__toggle::before {
    content: "";
    width: 8px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }
  .facts__toggle[aria-pressed="true"]::before {
    width: 0;
    height: 0;
    border-right: 0;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .facts__toggle:hover { color: var(--gold); }
}

/* hover pauses only for a mouse: on touch screens :hover sticks after a tap and would fight the toggle */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .facts:hover .facts__track { animation-play-state: paused; }
}

/* standing still (reduced motion, or no JS): one centred row that wraps, 2 × 2 on phones */
@media (prefers-reduced-motion: reduce) {
  .facts__viewport, .js .facts__viewport { -webkit-mask-image: none; mask-image: none; }
  .facts__track { display: block; width: auto; }
  .facts__group[aria-hidden="true"] { display: none; }
  .facts__group { flex-wrap: wrap; justify-content: center; column-gap: 40px; padding: 4px var(--margin); }
  .facts__group li { padding-block: 12px; }
  .facts__group li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 819px) {
  .facts__group { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: clamp(20px, 6vw, 40px); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 359px) {
  .facts__group { grid-template-columns: max-content; }
}
html:not(.js) .facts__viewport { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .facts__track { display: block; width: auto; }
html:not(.js) .facts__group[aria-hidden="true"] { display: none; }
html:not(.js) .facts__group { flex-wrap: wrap; justify-content: center; column-gap: 40px; padding: 4px var(--margin); }
html:not(.js) .facts__group li { padding-block: 12px; }
html:not(.js) .facts__group li::after { display: none; }
@media (max-width: 819px) {
  html:not(.js) .facts__group { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: clamp(20px, 6vw, 40px); }
}
@media (max-width: 359px) {
  html:not(.js) .facts__group { grid-template-columns: max-content; }
}

/* phone and tablet: seal above the type, centred */
@media (max-width: 1023px) {
  .cover { padding-bottom: 8px; }
  .cover__media { translate: -3.6% 0; } /* the ring's centre is 3.6 % right of the frame's: centre the ring, not the frame */
}
@media (max-width: 599px) {
  /* air under the header bar and between the seal and the eyebrow grows with the screen's height */
  .cover { padding-top: clamp(16px, 3.4svh, 32px); }
  .cover__media { width: clamp(140px, 22svh, 220px); margin: 0 auto clamp(24px, 4.2svh, 40px); }
  .cover__title { margin-top: 16px; }
  .cover__dek { margin-top: 18px; }
  .cover .actions { margin-top: 24px; gap: 10px 26px; }
  .facts { margin-top: 56px; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .cover__media { width: clamp(120px, min(38svh, 100svh - 480px), 420px); margin: 0 auto 32px; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 640px) and (max-width: 1023px) {
  .cover__media { position: absolute; top: 0; right: 0; width: min(40svh, 26vw); margin: 0; translate: none; }
  .cover__title { margin-top: 14px; }
  .cover__dek { margin-top: 16px; }
  .cover .actions { margin-top: 22px; }
}

/* desktop: a two-page spread; type left, seal right, line two of the head crosses the ring at nine o'clock */
@media (min-width: 1024px) {
  .cover {
    min-height: max(540px, calc(100svh - var(--header-h)));
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  .cover__inner {
    flex: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  .cover__text { grid-column: 1 / span 8; grid-row: 1; padding-block: 40px; }
  .cover__dek { max-width: 27em; }
  /* The seal is anchored to the headline, in em of the headline size: its ring crosses line two at 7.6em
     (between "i" and "o" of "Transformation"); the nine o'clock dot, which would sit inside "on", is masked out; the
     head's height cap (--h1) keeps the seal's T at least 25 px clear of the full stop on short, wide windows.
     Fractions measured on seal-1080.webp: ring 0.101–0.970, dot (0.202, 0.468), T 0.364–0.708. */
  .cover__text { isolation: isolate; }
  .cover__media {
    position: absolute;
    z-index: -1;
    --s: clamp(440px, min(44vw, 72svh), 800px);
    font-size: var(--h1);
    width: var(--s);
    margin: 0;
    left: calc(7.6em - var(--s) * 0.101);
    /* padding-top 40 + eyebrow 15.4 (one line) + gap 22, then line two's x-height centre at 1.6885em */
    top: calc(77.4px + 1.6885em - var(--s) * 0.465);
  }
  .cover__media img, .cover__media video {
    -webkit-mask-image: radial-gradient(circle at 20.2% 46.8%, transparent 0 1.5%, #000 2.1%), radial-gradient(circle closest-side at 53.6% 50%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle at 20.2% 46.8%, transparent 0 1.5%, #000 2.1%), radial-gradient(circle closest-side at 53.6% 50%, #000 95%, transparent 100%);
    mask-composite: intersect;
  }
  /* the note always sits under the button: beside it, the seal's lower arc would reach it */
  .cover .actions { flex-direction: column; align-items: flex-start; }
  .facts { margin-top: 0; }
}

/* cover load sequence (CSS only, no JS needed) */
@media (prefers-reduced-motion: no-preference) {
  .cover__eyebrow span { animation: rise 0.7s var(--ease) 0.25s both; }
  .cover__title .line:nth-child(1) { animation: rise 0.9s var(--ease) 0.3s both; }
  .cover__title .line:nth-child(2) { animation: rise 0.9s var(--ease) 0.42s both; }
  .cover__dek { animation: rise 0.8s var(--ease) 0.6s both; }
  .cover .actions { animation: rise 0.8s var(--ease) 0.72s both; }
  .cover .facts { animation: fade 1s var(--ease) 0.95s both; }
}

/* ---------- 8. Chapters ---------- */

.chapter {
  position: relative;
  overflow-x: clip;
  padding-block: var(--chapter-pad);
  scroll-margin-top: var(--header-h); /* fragment links without JS land below the sticky bar */
}
@supports not (overflow: clip) { .chapter, .cover { overflow: hidden; } }

.runner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--hair-soft);
}
.runner .label { color: var(--muted); }

.chapter .h2 { margin-top: 40px; }
@media (max-width: 599px) { .chapter .h2 { margin-top: 28px; } }

/* figures that are objects, not pictures */
.object img { width: 100%; height: auto; }

/* 01 · Ein Weg — the gold thread runs between the heading and the text */
/* The thread is code: one path traced from the client's photograph (within 1.5 px along its whole length) and
   drawn in three strokes whose gold follows the photo's light along the cord. On phones and tablets the band shows
   the middle three quarters of the frame, as the photo crop did; from 1024 px the whole frame runs edge to edge. */
.weg__band {
  position: relative;
  margin-top: 8px;
  margin-inline: calc(-1 * var(--edge));
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.thread {
  position: absolute;
  left: -16.667%;
  top: -14.815%;
  width: 133.333%;
  height: 136.917%;
  max-width: none;
}
@media (min-width: 1024px) {
  .weg__band { aspect-ratio: 1920 / 1109; overflow: visible; }
  .thread { left: 0; top: 0; width: 100%; height: 100%; }
}
.weg__lead { margin-top: 8px; }
.weg__more { margin-top: 64px; display: grid; gap: 56px; }
.weg__aside { display: grid; gap: 40px; }
.weg__signoff { display: grid; gap: 14px; }
.weg__signoff .label { color: var(--gold); }

@media (min-width: 1024px) {
  .weg { padding-bottom: calc(var(--chapter-pad) * 0.9); }
  /* the band is the full-bleed photograph; type sits in its two empty triangles */
  .weg__stage { position: relative; margin-top: 24px; }
  .weg__band { margin-top: 0; }
  .weg__stage .h2 {
    position: absolute;
    z-index: 1;
    margin: 0;
    top: 16px;
    left: calc(50% + var(--gap) / 2);
    width: calc(50% - var(--gap) / 2);
  }
  .weg__lead {
    position: absolute;
    z-index: 1;
    margin: 0;
    left: 0;
    top: 30vw;
    width: min(37vw, 540px);
  }
  .weg__more { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; margin-top: 24px; }
  .weg__more .quote { grid-column: 1 / span 7; grid-row: 1; }
  .weg__more .weg__aside { grid-column: 7 / span 6; grid-row: 2; align-self: start; margin-top: 56px; display: grid; gap: 48px; }
}

/* 02 · Zehn Wochen — the journal bleeds off the left edge and stays while the text passes */
.weeks__grid { display: grid; }
.weeks__object { margin-top: 32px; margin-left: calc(-1 * var(--edge) - 12vw); width: min(88vw, 520px); }
.weeks__text { margin-top: 8px; }
.weeks__sub { margin-top: 22px; color: var(--gold); }
.weeks__text .lead { margin-top: 30px; }

.ruler { margin-top: 48px; }
.ruler__label { display: block; margin-bottom: 14px; }
.ruler ol {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  border-bottom: 1px solid rgba(201, 164, 106, 0.55);
  position: relative;
}
.ruler li {
  position: relative;
  padding-bottom: 12px;
  text-align: center;
  font: 400 16px/1 var(--serif);
  color: var(--gold);
}
.ruler li::before, .ruler ol::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 1px; height: 9px;
  background: rgba(201, 164, 106, 0.55);
}
.ruler ol::after { left: auto; right: 0; }

.weeks__closing { margin-top: 40px; }

.glance { margin-top: 56px; }
.glance__title { color: var(--gold); margin-bottom: 14px; }
.glance dl { border-top: 1px solid var(--hair-soft); }
.glance dl > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair-soft);
  align-items: baseline;
}
.glance dt { font: 500 11px/1.9 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.glance dd { font-size: 15px; line-height: 1.6; color: var(--text); }

@media (min-width: 600px) { .glance dl > div { grid-template-columns: 9.5em 1fr; } }

@media (min-width: 1024px) {
  .weeks__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: 40px; }
  .weeks__object {
    --jw: min(46vw, 680px, calc(100svh - var(--header-h) - 72px)); /* fits the screen while it is held */
    grid-column: 1 / span 6;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 32px);
    margin-top: 0;
    width: var(--jw);
    margin-left: calc(-1 * var(--edge) - var(--jw) * 0.17);
  }
  .weeks__text { grid-column: 7 / span 6; grid-row: 1; margin-top: 0; }
  .weeks__text .h2 { margin-top: 0; }
}

/* 02 · the journal as a CSS 3D object. An A5 hardcover modelled from the client's render (camera and book fitted to the
   photo's edges, textures un-warped from it). Every number is in the render's
   1920 × 2106 px space and --u scales it to the figure, so at rest the object reproduces the photo exactly. main.js
   carries it in from beyond the page edge and closes its cover as the reader scrolls; without JS or with reduced
   motion it simply rests, closed. Browsers without container units show the photo. */
/* the carry values change every frame: registered as non-inherited, they restyle only the book element itself */
@property --dx { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --dy { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --dz { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --rz { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.journal { position: relative; aspect-ratio: 1920 / 2106; container-type: inline-size; }
.journal__photo { display: block; width: 100%; height: auto; }
.journal__scene { display: none; }
@supports (container-type: inline-size) {
  .journal__photo { display: none; }
  .journal__scene {
    display: block;
    position: absolute;
    inset: 0;
    --u: calc(100cqw / 1920);
    perspective: calc(8467.1 * var(--u));
    perspective-origin: calc(-665.7 * var(--u)) calc(1129 * var(--u));
    pointer-events: none;
  }
}
.journal__book {
  --W: 1000; --H: 1414.2; --sq: 8.8; --tb: 6; --t1: 191.3; --tbb: 6;   /* book in model units (width 1000) */
  --pb: 18.8; --lw: calc(var(--W) - var(--sq)); --lh: calc(var(--H) - 2 * var(--sq));   /* page block top, leaf size */
  --open: 0deg; --dx: 0; --dy: 0; --dz: 0; --rz: 0deg; --ry: 0deg;     /* driven by main.js; rest pose by default */
  --cover-light: 1; --inside-light: 0.6; --page-shade: 0; --carry: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform-origin: 0 0 0;
  transform:
    translate3d(calc((666.98 + var(--dx)) * var(--u)), calc((181.29 + var(--dy)) * var(--u)), calc(var(--dz) * var(--u)))
    translate3d(calc(231.9 * var(--u)), calc(825.59 * var(--u)), calc(356.83 * var(--u)))
    rotateZ(var(--rz)) rotateY(var(--ry))
    translate3d(calc(-231.9 * var(--u)), calc(-825.59 * var(--u)), calc(-356.83 * var(--u)))
    matrix3d(0.943875, 0.234447, 0.436534, 0, -0.382127, 0.942283, 0.320169, 0, -0.315446, -0.439959, 0.918345, 0, 0, 0, 0, 1);
}
.journal__book span { position: absolute; left: 0; top: 0; transform-origin: 0 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* light changes are overlays, not filters: in WebKit a filter on a 3D face cancels backface hiding */
.journal__cover-out::after, .journal__cover-in::after { content: ""; position: absolute; inset: 0; border-radius: calc(16 * var(--u)); background: #000; }
.journal__cover-out::after { opacity: calc(1 - var(--cover-light)); }
.journal__book:not(.is-inside-up) .journal__cover-in, .journal__book.is-inside-up .journal__cover-out { visibility: hidden; }
.journal__cover-in::after { opacity: calc(1 - var(--inside-light)); }

/* front board: hinged at the spine (its left edge) */
.journal__book .journal__cover {
  width: calc(var(--W) * var(--u));
  height: calc(var(--H) * var(--u));
  transform-style: preserve-3d;
  transform: rotateY(var(--open));
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.journal__cover-out {
  width: 100%;
  height: 100%;
  background: url("images/journal-cover.webp") 0 0 / 100% 100% no-repeat;
}
.js .journal:not(.is-near) .journal__cover-out { background-image: none; } /* main.js loads it one screen ahead */
.journal__cover-in { /* the endpaper on the inside of the board */
  width: 100%;
  height: 100%;
  border-radius: calc(16 * var(--u));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 9%),
    radial-gradient(130% 95% at 30% 20%, #2e2a25 0%, #1d1a17 55%, #141210 100%);
  transform: translate3d(calc(var(--W) * var(--u)), 0, calc(var(--tb) * var(--u) * -1)) rotateY(180deg);
}
.journal__cover-fore { width: calc(var(--tb) * var(--u)); height: calc(var(--H) * var(--u)); background: #0b0b0b; transform: translate3d(calc(var(--W) * var(--u)), 0, 0) rotateY(90deg); }
.journal__cover-tail { width: calc(var(--W) * var(--u)); height: calc(var(--tb) * var(--u)); background: #070707; transform: translate3d(0, calc(var(--H) * var(--u)), 0) rotateX(-90deg); }
.journal__cover-head { width: calc(var(--W) * var(--u)); height: calc(var(--tb) * var(--u)); background: #111; transform: translate3d(0, 0, calc(var(--tb) * var(--u) * -1)) rotateX(90deg); }

/* page block: the first page on top, gilt edges from the photo, a gilt head and the spine */
.journal__page {
  width: calc((var(--W) - var(--sq)) * var(--u));
  height: calc((var(--H) - 2 * var(--sq)) * var(--u));
  transform: translate3d(0, calc(var(--sq) * var(--u)), calc(var(--pb) * var(--u) * -1));
  background:
    linear-gradient(90deg, rgba(64, 46, 22, 0.34), rgba(64, 46, 22, 0) 7%),
    repeating-linear-gradient(180deg, transparent 0 calc(62 * var(--u)), rgba(150, 120, 80, 0.26) calc(62 * var(--u)) calc(64 * var(--u))) 0 100% / 100% 74% no-repeat,
    linear-gradient(180deg, #efe8da, #e2d8c6);
}
.journal__page::before { /* derived label: the week below the pages that flip back */
  content: "Woche 8";
  position: absolute;
  left: calc(120 * var(--u));
  top: calc(150 * var(--u));
  font: italic 400 calc(64 * var(--u)) / 1 var(--serif);
  color: #8a6b3c;
}
.journal__page::after { /* the shadow of the closing cover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.55));
  opacity: var(--page-shade);
}
/* the pages that flip back as the journal closes: each leaf is hinged at the spine, two segments (so it can curl)
   with a recto and a verso. main.js sets the angle (--a), the curl (--c), the light on each side (--df, --db) and
   which side faces the eye (.is-back). At rest they lie closed under the cover, in the order they landed. */
.journal__book .journal__leaf {
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  transform: rotateY(var(--a, 0deg)) translate3d(0, calc(var(--sq) * var(--u)), calc(var(--d) * var(--u) * -1));
}
.journal__book .journal__seg {
  width: calc(var(--lw) * var(--f) * var(--u));
  height: calc(var(--lh) * var(--u));
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/* four segments, each turning a little more than the last: the page curls toward its free edge (--c is the total) */
.journal__book .journal__seg--1 { --f: 0.4; }
.journal__book .journal__seg--2 { --f: 0.22; transform: translate3d(calc(var(--lw) * 0.4 * var(--u)), 0, 0) rotateY(calc(var(--c, 0deg) * 0.22)); }
.journal__book .journal__seg--3 { --f: 0.2; transform: translate3d(calc(var(--lw) * 0.22 * var(--u)), 0, 0) rotateY(calc(var(--c, 0deg) * 0.34)); }
.journal__book .journal__seg--4 { --f: 0.18; transform: translate3d(calc(var(--lw) * 0.2 * var(--u)), 0, 0) rotateY(calc(var(--c, 0deg) * 0.44)); }
/* each face reaches 6 units under the next segment, so no hairline shows where the segments meet (each 3D layer is
   snapped to the pixel grid on its own, so a narrower overlap can vanish) */
.journal__face { width: calc(100% + 6 * var(--u)); height: 100%; }
.journal__seg--4 > .journal__face { width: 100%; }
.journal__face--front {
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(62 * var(--u)), rgba(150, 120, 80, 0.26) calc(62 * var(--u)) calc(64 * var(--u))) 0 100% / 100% 74% no-repeat,
    linear-gradient(180deg, #efe8da, #e2d8c6);
}
.journal__face--back {
  transform: translate3d(calc((var(--lw) * var(--f) + 6) * var(--u)), 0, 0) rotateY(180deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(62 * var(--u)), rgba(150, 120, 80, 0.22) calc(62 * var(--u)) calc(64 * var(--u))) 0 100% / 100% 74% no-repeat,
    linear-gradient(180deg, #ece4d5, #dfd4c1);
}
.journal__seg--4 > .journal__face--back { transform: translate3d(calc(var(--lw) * var(--f) * var(--u)), 0, 0) rotateY(180deg); }
/* the gutter: shade near the spine on both sides of the leaf */
.journal__seg--1 > .journal__face--front { background-image: linear-gradient(90deg, rgba(64, 46, 22, 0.32), rgba(64, 46, 22, 0) calc(70 * var(--u))), repeating-linear-gradient(180deg, transparent 0 calc(62 * var(--u)), rgba(150, 120, 80, 0.26) calc(62 * var(--u)) calc(64 * var(--u))), linear-gradient(180deg, #efe8da, #e2d8c6); background-size: 100% 100%, 100% 74%, 100% 100%; background-position: 0 0, 0 100%, 0 0; background-repeat: no-repeat; }
.journal__seg--1 > .journal__face--back { background-image: linear-gradient(270deg, rgba(64, 46, 22, 0.3), rgba(64, 46, 22, 0) calc(70 * var(--u))), repeating-linear-gradient(180deg, transparent 0 calc(62 * var(--u)), rgba(150, 120, 80, 0.22) calc(62 * var(--u)) calc(64 * var(--u))), linear-gradient(180deg, #ece4d5, #dfd4c1); background-size: 100% 100%, 100% 74%, 100% 100%; background-position: 0 0, 0 100%, 0 0; background-repeat: no-repeat; }
.journal__face i {
  position: absolute;
  left: calc(100 * var(--u));
  top: calc(150 * var(--u));
  font: italic 400 calc(64 * var(--u)) / 1 var(--serif);
  color: #8a6b3c;
  white-space: nowrap;
}
/* light is blended across each segment from joint to joint (main.js sets the darkness at both ends), so the
   curled page shades smoothly instead of in facets */
.journal__face::after { content: ""; position: absolute; inset: 0; }
.journal__face--front::after { background: linear-gradient(90deg, rgba(0, 0, 0, var(--df0, 0)), rgba(0, 0, 0, var(--df1, 0))); }
.journal__face--back::after { background: linear-gradient(270deg, rgba(0, 0, 0, var(--db0, 0)), rgba(0, 0, 0, var(--db1, 0))); }
.journal__seg.is-back > .journal__face--front,
.journal__seg:not(.is-back) > .journal__face--back { visibility: hidden; }
/* pages lying completely under another sheet are not drawn (main.js marks them while it animates; at rest, and
   whenever nothing animates, everything under the closed cover is skipped) */
.journal__book .is-covered { visibility: hidden; }
html:not(.js) .journal__leaf, html:not(.js) .journal__page { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .journal__leaf, .journal__page { visibility: hidden; } }
.journal__fore {
  width: calc((var(--t1) - var(--tb)) * var(--u));
  height: calc((var(--H) - 2 * var(--sq)) * var(--u));
  background: url("images/journal-fore.webp") 0 0 / 100% 100% no-repeat;
  transform: translate3d(calc((var(--W) - var(--sq)) * var(--u)), calc(var(--sq) * var(--u)), calc(var(--tb) * var(--u) * -1)) rotateY(90deg);
}
.journal__tail {
  width: calc((var(--W) - var(--sq)) * var(--u));
  height: calc((var(--t1) - var(--tb)) * var(--u));
  background: url("images/journal-tail.webp") 0 0 / 100% 100% no-repeat;
  transform: translate3d(0, calc((var(--H) - var(--sq)) * var(--u)), calc(var(--tb) * var(--u) * -1)) rotateX(-90deg);
}
.journal__head {
  width: calc((var(--W) - var(--sq)) * var(--u));
  height: calc((var(--t1) - var(--tb)) * var(--u));
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(5 * var(--u))),
    linear-gradient(90deg, #2b1d0b, #3d2a13 45%, #2e1f0c);
  transform: translate3d(0, calc(var(--sq) * var(--u)), calc(var(--t1) * var(--u) * -1)) rotateX(90deg);
}
.journal__spine {
  width: calc((var(--t1) + var(--tbb)) * var(--u));
  height: calc(var(--H) * var(--u));
  border-radius: calc(30 * var(--u));
  background: linear-gradient(90deg, #050505, #121211 50%, #070707);
  transform: translate3d(0, 0, calc((var(--t1) + var(--tbb)) * var(--u) * -1)) rotateY(-90deg);
}
/* back board, and the contact shadow it sits in */
/* only the strips of the back board that show beyond the page block (a full plane under the gilt faces could be
   painted over them by engines that sort 3D layers by anchor depth) */
.journal__back-r {
  width: calc(var(--sq) * var(--u));
  height: calc(var(--H) * var(--u));
  background: #030303;
  transform: translate3d(calc((var(--W) - var(--sq)) * var(--u)), 0, calc(var(--t1) * var(--u) * -1));
}
.journal__back-b {
  width: calc(var(--W) * var(--u));
  height: calc(var(--sq) * var(--u));
  background: #030303;
  transform: translate3d(0, calc((var(--H) - var(--sq)) * var(--u)), calc(var(--t1) * var(--u) * -1));
}
.journal__back-fore { width: calc(var(--tbb) * var(--u)); height: calc(var(--H) * var(--u)); background: #050505; transform: translate3d(calc(var(--W) * var(--u)), 0, calc(var(--t1) * var(--u) * -1)) rotateY(90deg); }
.journal__back-tail { width: calc(var(--W) * var(--u)); height: calc(var(--tbb) * var(--u)); background: #040404; transform: translate3d(0, calc(var(--H) * var(--u)), calc(var(--t1) * var(--u) * -1)) rotateX(-90deg); }
/* the contact shadow is painted once (box-shadow) and only moved: a blur filter on a 3D-moving layer would be
   recomputed on every frame of the carry */
.journal__shadow {
  width: calc(var(--W) * var(--u));
  height: calc(var(--H) * var(--u));
  border-radius: calc(40 * var(--u));
  background: #000;
  box-shadow: 0 0 calc(44 * var(--u)) calc(14 * var(--u)) #000;
  opacity: calc(0.85 - 0.6 * var(--carry));
  transform: translate3d(calc(24 * var(--u)), calc(34 * var(--u)), calc((var(--t1) + var(--tbb) + 2) * var(--u) * -1));
}

/* on very wide screens the objects stop following the viewport edge (they would drift up to 750 px from their text):
   they bleed at most 240 px past the column and fade in from black instead of being cut */
@media (min-width: 1681px) {
  .weeks__object {
    margin-left: calc(-1 * min(var(--edge), 240px) - var(--jw) * 0.17);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
    mask-image: linear-gradient(90deg, transparent, #000 20%);
  }
}

/* 03 · Körper — the ripple fills the section height and bleeds off the right edge */
.koerper__photo {
  margin-top: 40px;
  margin-inline: calc(-1 * var(--edge));
  height: clamp(300px, 92vw, 520px);
  overflow: hidden;
}
.koerper__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
}
.koerper__text .lead { margin-top: 30px; }
.koerper__text .quote { margin-top: 56px; }
@media (max-width: 1023px) {
  .koerper { padding-bottom: 32px; }
  .ernaehrung { padding-bottom: 56px; }
}

@media (min-width: 1024px) {
  .koerper { min-height: min(100svh, 980px); display: flex; align-items: center; }
  .koerper > .wrap { position: relative; z-index: 1; }
  .koerper__text { width: min(46vw, 600px); }
  .koerper__photo {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 60vw;
    height: auto;
    margin: 0;
  }
  .koerper__photo img {
    object-position: 50% 57%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 38%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }
}

/* 04 · Ernährung — the sphere sits at the left edge, the text beside it */
.ernaehrung__object { margin-top: 40px; width: min(76vw, 340px); margin-left: auto; margin-right: calc(-1 * var(--edge) - 18vw); }
.ernaehrung__text .lead { margin-top: 30px; }
.ernaehrung__text .body { margin-top: 1.1em; }
.ernaehrung__text .quote { margin-top: 56px; }

@media (min-width: 1024px) {
  .ernaehrung__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: 40px; }
  .ernaehrung__object { align-self: center; }
  .ernaehrung__object {
    grid-column: 1 / span 6;
    grid-row: 1;
    width: min(42vw, 600px);
    margin: 0 0 0 calc(-1 * var(--edge) - min(42vw, 600px) * 0.08);
  }
  .ernaehrung__text { grid-column: 7 / span 6; grid-row: 1; }
  .ernaehrung__text .h2 { margin-top: 0; }
}
@media (min-width: 1681px) { /* as the journal: at most 240 px past the column, fading in from black */
  .ernaehrung__object {
    margin-left: calc(-1 * min(var(--edge), 240px) - min(42vw, 600px) * 0.08);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
    mask-image: linear-gradient(90deg, transparent, #000 20%);
  }
}

/* 05 · Balance — a stanza, and the open ring from the invitation */
.stanza {
  margin-top: 40px;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.5;
  color: var(--cream);
}
.stanza span { display: block; padding-left: 1em; text-indent: -1em; }
.stanza span + span { margin-top: 6px; }
.balance__text .body { margin-top: 44px; }
.balance__text .closing { margin-top: 28px; }
.balance__object { margin: 56px auto 0; width: min(64vw, 280px); }

@media (min-width: 1024px) {
  .balance__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .balance__text { grid-column: 1 / span 7; }
  .balance__object { grid-column: 9 / span 4; margin: 0; width: min(26vw, 380px); justify-self: end; }
}

/* 06 · Einladung — the decision */
.einladung__object { width: min(72vw, 360px); margin: 40px 0 0 calc(-1 * var(--edge) + 4vw); }
.einladung__text .lead { margin-top: 30px; }
.einladung__welcome { margin-top: 36px; }
.einladung .actions { margin-top: 40px; }
.einladung__contacts { margin-top: 28px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.einladung__contacts a { display: inline-block; padding-block: 3px; margin-block: -3px; color: var(--text); text-decoration: underline; text-decoration-color: var(--hair-soft); text-underline-offset: 5px; }
.einladung__contacts a:hover { color: var(--gold); text-decoration-color: currentColor; }
.tabular { font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
  .einladung__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: 40px; }
  .einladung__object { align-self: center; }
  .einladung__object { grid-column: 1 / span 5; grid-row: 1; width: min(34vw, 480px); margin: 0; }
  .einladung__text { grid-column: 7 / span 6; grid-row: 1; }
  .einladung__text .h2 { margin-top: 0; }
}

/* 07 · Persönlich — the one sheet of paper */
.letter { background: var(--paper); color: var(--paper-ink); }
.letter .runner { border-top-color: var(--paper-hair); }
.letter .runner .label { color: var(--paper-muted); }
.letter .h2 { color: var(--paper-ink); }


.letter__body {
  margin-top: 36px;
  max-width: 31em;
  font-family: var(--serif);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.62;
  color: var(--paper-ink);
  text-wrap: pretty;
}
.letter__body p + p { margin-top: 1em; }

.letter__sign { margin-top: 40px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; }
.letter__cameo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--paper-ink); }
.letter__cameo img { width: 100%; height: 100%; object-fit: cover; }
.letter__signature img { width: 220px; height: auto; }
.letter__name { grid-column: 1 / -1; margin-top: 14px; display: grid; gap: 2px; }
.letter__name .label { color: var(--paper-muted); }
.letter__name .label:first-child { color: var(--paper-ink); }

@media (max-width: 599px) {
  .letter__signature img { width: 180px; }
}

@media (min-width: 1024px) {
  .letter__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 40px; }
  .letter__main { grid-column: 3 / span 8; }
  .letter__main .h2 { margin-top: 0; }
  .letter__cameo { width: 80px; height: 80px; }
}

/* ---------- 9. Colophon ---------- */

.colophon { padding: clamp(72px, 8vw, 112px) 0 calc(40px + env(safe-area-inset-bottom)); background: var(--ink); }
.colophon__brand { display: inline-block; color: var(--gold); }
.colophon__brand img { width: clamp(220px, 22vw, 300px); }
.colophon__cta { margin-top: 28px; }
.colophon__cta .textlink { padding-block: 16px; margin-block: -16px; }
.colophon__cols { margin-top: 56px; display: grid; gap: 40px; }
.colophon__col .label { color: var(--gold); margin-bottom: 14px; }
.colophon__col li + li { margin-top: 6px; }
.colophon__col a, .colophon__col address { font-size: 15px; line-height: 1.7; color: var(--text); }
.colophon__col a { text-decoration: none; }
.colophon__col a:hover { color: var(--gold); }
.colophon__col li a { display: inline-block; padding-block: 3px; }
.colophon__col address { line-height: 2.5; margin-top: -3px; }
.colophon__col a, .einladung__contacts a, .menu__contacts a { white-space: nowrap; }
.colophon__base {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--hair-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (min-width: 768px) {
  .colophon__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
}
@media (min-width: 1024px) {
  .colophon__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .colophon__lead { grid-column: 1 / span 4; }
  .colophon__cols { grid-column: 5 / span 8; margin-top: 4px; grid-template-columns: repeat(3, auto); justify-content: space-between; }
}

/* ---------- 10. Legal pages ---------- */

.legal { padding-block: clamp(56px, 8vw, 120px) var(--chapter-pad); }
.legal__title {
  margin-top: 40px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.legal__body { margin-top: 48px; max-width: 40em; color: var(--text); }
.legal__body h2 {
  margin-top: 48px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  color: var(--cream);
}
.legal__body h3 { margin-top: 28px; font: 600 12px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.legal__body h2, .legal__body h3 { text-wrap: balance; }
.legal__body h2 + p, .legal__body h3 + p, .legal__body h2 + h3 { margin-top: 14px; }
.legal__body p + p, .legal__body p + ul, .legal__body ul + p { margin-top: 1em; }
.legal__body ul li { padding-left: 1.2em; text-indent: -1.2em; }
.legal__body ul li::before { content: "–\00a0\00a0"; content: "–\00a0\00a0" / ""; color: var(--gold); }
.legal__body a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 5px; }
.legal__body a:hover { color: var(--gold); }
.placeholder { color: var(--gold); border-bottom: 1px dashed var(--hair); }

@media (min-width: 1024px) {
  .legal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .legal__grid > * { grid-column: 1 / -1; }
  .legal__title, .legal__body { grid-column: 3 / span 8; }
}

/* ---------- 11. Motion ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-fallback { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes thread-fallback { to { stroke-dashoffset: 0; } }

/* scroll reveals exist only when JS runs; main.js arms them, and a 4 s fallback shows everything if it never does */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s);
    animation: reveal-fallback 0s linear 4s forwards;
  }
  .js [data-reveal="object"] { transform: scale(1.02); transition-duration: 1.3s; }
  /* the thread's drawn length follows the scroll (main.js sets stroke-dashoffset per frame); if the script never
     takes over, the whole line appears after 4 s. Without JS or with reduced motion the line is simply there. */
  .js [data-reveal="draw"] { opacity: 1; transform: none; animation: none; }
  .js [data-reveal="draw"] .thread path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: thread-fallback 0s linear 4s forwards;
  }
  .js [data-reveal="draw"].is-scrubbed .thread path { animation: none; }
  .js [data-reveal="wipe"] { opacity: 1; transform: none; }
  .js [data-reveal="wipe"] img { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease) var(--d, 0s); animation: reveal-fallback 0s linear 4s forwards; }
  .js.reveal-armed [data-reveal="wipe"] img { animation: none; }
  .js [data-reveal="wipe"].is-in img { clip-path: inset(0 0 0 0); }
  .js.reveal-armed [data-reveal] { animation: none; }
  .js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  /* anything that receives keyboard focus is visible at once, even before its reveal fires */
  .js [data-reveal]:focus-within { opacity: 1; transform: none; transition-delay: 0s; transition-duration: 0.2s; }
}

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

@media print {
  /* everything prints as it reads at rest: reveals shown, the thread whole, the journal closed */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-reveal="wipe"] img { clip-path: none !important; }
  .thread path { stroke-dashoffset: 0 !important; }
  .journal__book { --dx: 0 !important; --dy: 0 !important; --dz: 0 !important; --rz: 0deg !important; --ry: 0deg !important; }
  .journal__book .journal__cover { --open: 0deg !important; }
  .journal__cover-out { --cover-light: 1 !important; }
  .journal__shadow { --carry: 0 !important; }
  .journal__book .journal__cover-out { visibility: visible !important; }
  .journal__leaf, .journal__page { visibility: hidden !important; }
  .journal__book .journal__leaf { --a: 0deg !important; --c: 0deg !important; }
  .journal__book .journal__cover-in { visibility: hidden !important; }
  .cover__dust, .facts__toggle { display: none !important; }
}