/* Exploring Fox — design tokens and page styles.

   The site is proof, not a catalogue: Maria plans days, and the page shows
   days she has already planned. Visually it behaves like a log book — ink
   linework, chart paper, photographs pinned down as prints — because the
   photography is honest phone material and would not carry a cinematic
   gallery. Palette and type carry over from the first rebuild unchanged. */

@import url("fonts.css");

:root {
  /* Colour is taken from the material: the logo's ink and orange, the Saronic
     at depth, the turquoise over sand at Dragonera, chart paper. */
  --ink:      #2a1d19;
  --ink-soft: #6b5a52;
  --fox:      #e4761f;
  --fox-deep: #b65410;
  --fox-text: #9e470c;   /* the only orange safe as small text on paper */
  --deep:     #0c3247;
  --deep-2:   #16506c;
  --shallow:  #58b5c0;
  --paper:    #f5f0e6;
  --paper-2:  #ece4d5;
  --rule:     #cabda5;
  --white:    #fffdf9;

  --display: "Alegreya Sans", system-ui, sans-serif;
  --body:    "Alegreya", Georgia, serif;
  --log:     "Anonymous Pro", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --shell: 78rem;

  /* One rhythm for every animation on the page. */
  --swift: 180ms;
  --calm:  320ms;
  --ease:  cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.62;
  /* The faint grid of chart paper. Two hairlines, nothing more. */
  background-image:
    linear-gradient(to right, rgba(202, 189, 165, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(202, 189, 165, 0.28) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* `hidden` is an assertion, not a suggestion: `display: inline-flex` on .btn
   would otherwise win the cascade and keep hidden buttons on screen. */
[hidden] { display: none !important; }

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

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

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Type roles ─────────────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
}

/* The log voice: monospace and spaced out, for anything that behaves like an
   annotation in the margin rather than prose. */
.log {
  font-family: var(--log);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  max-width: var(--measure);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--swift) var(--ease),
              border-color var(--swift) var(--ease),
              color var(--swift) var(--ease),
              transform var(--swift) var(--ease);
}
.btn:hover { background: var(--fox-deep); border-color: var(--fox-deep); color: var(--white); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--onsea { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn--onsea:hover { background: var(--fox-deep); border-color: var(--fox-deep); color: var(--white); }

.btn--onsea-ghost { background: transparent; color: var(--white); border-color: rgba(255,253,249,0.55); }
.btn--onsea-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* A link that reads as an aside rather than a call to action — the escape
   hatch out of the composer lives in this style. */
.quiet-link {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-underline-offset: 4px;
}
.quiet-link:hover { color: var(--fox-text); }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 240, 230, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
  padding-block: 0.6rem;
}

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand img { width: auto; height: 34px; }
.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.nav { display: flex; gap: 1.5rem; }
.nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--swift) var(--ease);
}
.nav a:hover { border-bottom-color: var(--fox); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

@media (max-width: 46rem) {
  .nav { gap: 0.75rem; font-size: 0.9rem; flex-wrap: wrap; justify-content: flex-end; }
  .brand span { display: none; }
  /* Thumbs, not cursors: the links need a 44px target even though the text
     itself is only about 20px tall. */
  .nav a { padding-block: 0.75rem; padding-inline: 0.2rem; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(78vh, 40rem);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(3rem, 12vh, 7rem);
  color: var(--white);
  background: var(--deep);
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* An ink wash rather than a flat scrim, so the photograph keeps its depth
   while the text stays above 4.5:1. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(12, 50, 71, 0.94) 0%,
    rgba(12, 50, 71, 0.72) 45%,
    rgba(12, 50, 71, 0.35) 100%);
}

.hero__title {
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem);
  max-width: 16ch;
  margin-block: 0.6rem 1.2rem;
}

.hero .log { color: rgba(255, 253, 249, 0.95); }

.hero__lede {
  color: rgba(255, 253, 249, 0.92);
  margin-block: 0 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Inner pages: the same hero, shorter. The home page earns full height
   because it has to introduce the whole business; these do not. */
.hero--inner { min-height: min(52vh, 26rem); }
.hero--inner .hero__title { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); max-width: 20ch; }

/* ── Section furniture ──────────────────────────────────────────────────── */

.section { padding-block: clamp(3.5rem, 9vh, 7rem); }

.section__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); }

.section__title {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
  margin-block: 0.5rem 0.8rem;
}

.section__note { max-width: var(--measure); margin: 0; color: var(--ink-soft); }

/* ── Three worlds ───────────────────────────────────────────────────────── */

.worlds {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.world {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: transform var(--calm) var(--ease), box-shadow var(--calm) var(--ease),
              opacity var(--calm) var(--ease);
}
.world:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(42, 29, 25, 0.17); }

.world img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.world__body { padding: clamp(1.15rem, 3vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }

.world__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0.4rem 0 0.6rem;
}

.world__body p { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: 0.98rem; }

.world__more {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 600;
  border-bottom: 2px solid var(--fox);
  align-self: flex-start;
  padding-bottom: 2px;
}

/* ── The scene ──────────────────────────────────────────────────────────── */
/* One drawing that gets rewritten rather than one that morphs. Five strokes
   hold the same role in all three worlds — horizon, mast, canopy, body, and
   the thing in your hand — so changing world erases those five and writes the
   new ones in their place. The figures are never redrawn: the day changes
   around the same group of people, which is the whole argument of the site.

   Without JavaScript the markup is already the sea variant, fully drawn. */

/* Capped: at full shell width the drawing stops being a sketch and starts
   being a mural, and the strokes thin out to nothing. */
.scene { max-width: 44rem; margin: 0 auto clamp(2rem, 5vh, 3.5rem); }
.scene svg { width: 100%; height: auto; display: block; overflow: visible; }

.ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The background sits back by being thinner and greyer, not by being smaller.
   On a phone it is not drawn at all — see site.js. */
.layer--bg .ink { stroke: var(--ink-soft); stroke-width: 2; }
@media (max-width: 46rem) { .layer--bg { display: none; } }

/* The second row stands behind: same ink, less of it. */
.cast .back { stroke: var(--ink-soft); stroke-width: 2.2; }

/* The garland and the one mark that says which occasion it is are the only
   colour in the drawing, which is what makes them read as the celebration. */
.garland .ink, .mark .ink { stroke: var(--fox-text); }

.scene__caption {
  margin-top: 0.75rem;
  text-align: center;
}

/* On the deep ground of the composer the ink is the paper, not the other way
   round. */
.scene--onsea .ink                 { stroke: var(--paper); }
.scene--onsea .layer--bg .ink      { stroke: rgba(245, 240, 230, 0.55); }
.scene--onsea .cast .back          { stroke: rgba(245, 240, 230, 0.62); }
.scene--onsea .garland .ink,
.scene--onsea .mark .ink           { stroke: var(--fox); }
.scene--onsea .scene__caption      { color: var(--shallow); }

/* ── Days: the proof ────────────────────────────────────────────────────── */

.days { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }

.day {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 54rem) {
  .day { grid-template-columns: 1.05fr 1fr; }
  .day:nth-child(even) .day__prints { order: -1; }
}

.day__when { color: var(--fox-text); margin-bottom: 0.5rem; }

.day__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 0.9rem;
}

.day__body p { margin: 0 0 1rem; max-width: var(--measure); }

.day__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--log);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Photographs are pinned to the page as prints: a white border, a little
   rotation, a soft shadow. Never full-bleed — the material cannot carry it. */
.day__prints { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.2rem); }

.print {
  margin: 0;
  background: var(--white);
  padding: 0.6rem 0.6rem 0.5rem;
  border: 1px solid var(--rule);
  box-shadow: 0 8px 20px rgba(42, 29, 25, 0.1);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease),
              opacity 300ms var(--ease);
}
.print { --tilt: -0.7deg; transform: rotate(var(--tilt)); }
.print:nth-child(even) { --tilt: 0.6deg; }
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.print--wide { grid-column: 1 / -1; }
.print--wide img { aspect-ratio: 16 / 9; }

.print figcaption {
  font-family: var(--log);
  font-size: 0.72rem;
  color: var(--ink-soft);
  padding-top: 0.5rem;
  line-height: 1.4;
}

/* ── Running prose ──────────────────────────────────────────────────────── */

.prose p { max-width: var(--measure); margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a { text-decoration-color: var(--fox); text-underline-offset: 3px; }

/* ── Questions ──────────────────────────────────────────────────────────── */
/* The old FAQ page dissolved into the three worlds, each question sitting
   where it belongs. Plain headings, not an accordion: eight short answers
   are quicker to read than to click through. */

.qas {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.9rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.qa__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  margin: 0 0 0.4rem;
}
.qa__a { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ── Portrait layout ────────────────────────────────────────────────────── */

.portrait {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 54rem) {
  .portrait { grid-template-columns: 1.15fr 0.85fr; }
}
.portrait .print { max-width: 26rem; }
.portrait .print img { aspect-ratio: 3 / 4; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact__layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 54rem) {
  .contact__layout { grid-template-columns: 1.1fr 0.9fr; }
}

.reach { margin: 1.5rem 0 0; display: grid; gap: 0.2rem; }
.reach dt {
  font-family: var(--log);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1rem;
}
.reach dd { margin: 0; }

/* ── Closing call ───────────────────────────────────────────────────────── */

.closing { background: var(--ink); color: var(--paper); }
.closing__title { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); margin-block: 0.5rem 0.9rem; }
.closing p { color: rgba(245, 240, 230, 0.86); max-width: var(--measure); margin: 0; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.closing .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.closing .btn:hover { background: var(--fox-deep); border-color: var(--fox-deep); color: var(--white); }
.closing .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(245, 240, 230, 0.5); }
.closing .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ── Reviews ────────────────────────────────────────────────────────────── */

.reviews { background: var(--paper-2); }

.reviews__grid {
  columns: 3 20rem;
  column-gap: clamp(1.25rem, 3vw, 2rem);
}

.review {
  break-inside: avoid;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 1.8rem);
}

.review blockquote { margin: 0; font-size: 1.02rem; }
.review blockquote p { margin: 0; }
.review blockquote p::before { content: "\201C"; color: var(--fox-text); }
.review blockquote p::after  { content: "\201D"; color: var(--fox-text); }

.review figcaption {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-family: var(--log);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

/* ── The composer ───────────────────────────────────────────────────────── */

.composer { background: var(--deep); color: var(--white); }
.composer .section__title { color: var(--white); }
.composer .section__note { color: rgba(255, 253, 249, 0.82); }
.composer .log { color: var(--shallow); }

.composer__layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
/* Two columns from the start: the right one holds the scene, and the draft
   takes its place once there is something to read. Earlier this column stayed
   empty until the last step, which read as a broken layout. */
@media (min-width: 58rem) {
  .composer__layout { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* A fieldset's default border and padding fight the design, and its legend
   sits inside the border box. Strip both; the legend is styled on its own. */
.step { border: 0; padding: 0; margin: 0; }

.step__legend {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  padding: 0;
  margin-bottom: 1rem;
}

.step__count {
  font-family: var(--log);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--shallow);
  display: block;
  margin-bottom: 0.35rem;
}

.choices { display: flex; flex-wrap: wrap; gap: 0.7rem; border: 0; padding: 0; margin: 0; }

/* Radios drawn as cards. The input keeps its semantics for keyboard and
   screen readers; the label carries the visuals. */
.choice { position: relative; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.6rem 1.2rem;
  border: 2px solid rgba(255, 253, 249, 0.4);
  font-family: var(--display);
  font-weight: 600;
  transition: background var(--swift) var(--ease),
              border-color var(--swift) var(--ease),
              color var(--swift) var(--ease);
}
.choice input:hover + span { border-color: var(--white); }
.choice input:focus-visible + span { outline: 3px solid var(--fox); outline-offset: 3px; }
.choice input:checked + span { background: var(--white); border-color: var(--white); color: var(--ink); }

.step__nav { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.4rem; }

.composer__escape {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 253, 249, 0.25);
  font-size: 0.95rem;
  color: rgba(255, 253, 249, 0.82);
}
.composer__escape a { color: var(--white); }

/* The draft panel — deliberately looks like a message, not a receipt. */
.draft {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 1.8rem);
}

.draft__warning {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--paper-2);
  border-left: 4px solid var(--fox);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.draft__warning svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--fox-deep); }

.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--ink-soft); }

.field input,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--ink-soft);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
/* Tall enough that the generated draft — seven lines with its blank lines —
   fits without a scrollbar. A message you cannot see all of reads as a form
   field rather than something you wrote. */
.field textarea { min-height: 14.5rem; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--fox); outline-offset: 1px; }

.field--invalid input,
.field--invalid textarea { border-color: #a32d1c; border-width: 2px; }

.field__error { font-size: 0.88rem; color: #a32d1c; font-family: var(--display); font-weight: 600; }

/* The honeypot: present for bots, gone for everyone else. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin-top: 1rem; font-family: var(--display); font-weight: 600; }
.form__status[data-state="error"] { color: #a32d1c; }
.form__status[data-state="sent"]  { color: var(--fox-deep); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 7vh, 4.5rem) 2rem;
}

.footer__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.footer h2 {
  font-family: var(--log);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.62);
  font-weight: 400;
  margin: 0 0 0.9rem;
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.footer a { text-decoration: none; border-bottom: 1px solid transparent; }
.footer a:hover { border-bottom-color: var(--fox); }

.footer__socials { display: flex; gap: 0.8rem; margin-top: 0.9rem; }
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 240, 230, 0.3);
}
.footer__socials a:hover { border-color: var(--fox); background: rgba(228, 118, 31, 0.14); }
.footer__socials svg { width: 20px; height: 20px; }

.footer__legal {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 240, 230, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font-family: var(--log);
  font-size: 0.75rem;
  color: rgba(245, 240, 230, 0.62);
}

/* ── Settling in ────────────────────────────────────────────────────────── */
/* The scene is written in ink. The page is not written — it is handled. Only
   things you could pick up move: prints, cards, slips of paper. Headings and
   prose arrive already printed on the sheet.

   The rule, in one line: if you are reading it, it does not move.

   `will-settle` is added by JavaScript, so with scripting off nothing is ever
   hidden — the resting state is the state in the stylesheet. */

.will-settle { opacity: 0; }
.will-settle.is-in { opacity: 1; }

/* A print is set down on the table: it comes in at a steeper angle, drops the
   last few pixels, and its shadow appears as it makes contact. */
.print.will-settle {
  transform: rotate(calc(var(--tilt) * 5)) translateY(10px);
  box-shadow: none;
}
.print.will-settle.is-in {
  transform: rotate(var(--tilt));
  box-shadow: 0 8px 20px rgba(42, 29, 25, 0.1);
}

/* Cards rise the last stretch and stop with a little resistance. */
.world.will-settle { transform: translateY(12px); }
.world.will-settle.is-in { transform: none; }

/* Reviews are slips of paper, so they arrive one after another. */
.review.will-settle { transform: translateY(8px); }
.review.will-settle.is-in { transform: none; }

/* ── Turning the page ──────────────────────────────────────────────────── */
/* A static multi-page site, so the browser does the work: no router, no
   fetching, no history to manage. Where cross-document view transitions are
   not supported the navigation simply happens, which is the correct fallback
   and needs no code.

   The whole value is in what does NOT move. Naming the masthead and the footer
   takes them out of the page snapshot and pins them, so only the sheet
   changes. Without that this is a crossfade, which is the default everybody
   already has. */

@view-transition { navigation: auto; }

.masthead { view-transition-name: masthead; }
.footer   { view-transition-name: footer; }
main      { view-transition-name: sheet; }

/* Pinned: both snapshots sit on top of each other, identical, animating
   nothing. The root holds only the paper background, so it stays still too. */
::view-transition-old(masthead), ::view-transition-new(masthead),
::view-transition-old(footer),   ::view-transition-new(footer),
::view-transition-old(root),     ::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(sheet) {
  animation: sheet-out 260ms cubic-bezier(.6, 0, .9, .35) both;
}
::view-transition-new(sheet) {
  animation: sheet-in 340ms cubic-bezier(.2, .7, .3, 1) both;
}

/* Out is quicker than in — a sheet leaves faster than the next one settles. */
@keyframes sheet-out { to   { opacity: 0; transform: translateY(8px); } }
@keyframes sheet-in  { from { opacity: 0; transform: translateY(8px); } }

/* The masthead learns that something is passing underneath it. */
.masthead { transition: box-shadow var(--calm) var(--ease); }
.masthead.is-lifted { box-shadow: 0 6px 18px rgba(42, 29, 25, 0.09); }

/* ── Composer steps ─────────────────────────────────────────────────────── */
/* All three steps share one grid cell, so the box is always as tall as the
   tallest of them and the buttons underneath never move. The inactive ones are
   both invisible and inert, which keeps them out of the tab order and out of
   the accessibility tree — `hidden` would do that too, but `hidden` cannot
   hold the height, and the leaving step needs to stay on screen while it goes. */

#steps { display: grid; }

.step {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.step.is-current {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.step.is-leaving { visibility: visible; }

/* Direction means something here — 1 to 2 to 3 is a real order, and Back
   really does go back. That is why it was refused for the world pages, where
   sea, wine and beer are siblings rather than a sequence. */
.step.is-current.enter-forward { animation: step-in-forward 220ms var(--ease) both; }
.step.is-current.enter-back    { animation: step-in-back    220ms var(--ease) both; }
.step.is-leaving.exit-forward  { animation: step-out-forward 160ms var(--ease) both; }
.step.is-leaving.exit-back     { animation: step-out-back    160ms var(--ease) both; }

@keyframes step-in-forward  { from { opacity: 0; transform: translateX(10px); } }
@keyframes step-in-back     { from { opacity: 0; transform: translateX(-10px); } }
@keyframes step-out-forward { to   { opacity: 0; transform: translateX(-10px); } }
@keyframes step-out-back    { to   { opacity: 0; transform: translateX(10px); } }

/* ── Motion off ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Everything is simply already where it belongs. */
  .will-settle, .will-settle.is-in { opacity: 1; transform: none; }
  .print.will-settle { transform: rotate(var(--tilt)); box-shadow: 0 8px 20px rgba(42, 29, 25, 0.1); }
  .btn:hover, .world:hover { transform: none; }
  /* Turning the page becomes turning the page, with nothing in between. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}