/* Life Change Hub: "the page is the object": a boarding pass and the stationery of a station.
   Direction: page-is-the-object, seed 1295822408. Type: Bricolage Grotesque. Palette: Sand and moss. */

:root {
  --bg: #ddd6c6;
  --surface: #d2cab8;
  --paper: #ecebe6;          /* the card stock; one step lighter than the ground */
  --ink: #2a2a26;
  --muted: #59574e;
  --accent: #4f6238;
  --accent-ink: #ffffff;
  --field-1: #3f5a2a;
  --field-1-ink: #ffffff;
  --moss-2: #4f6238;
  --moss-3: #5b6e43;

  /* five sizes, no more */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-sub: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  --step-display: clamp(3.25rem, 1.6rem + 5.4vw, 6rem);

  --margin: clamp(16px, 2vw, 28px);
  --gap: clamp(16px, 1.6vw, 24px);
  --section: clamp(72px, 8.4vw, 128px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; text-wrap: balance; }
::selection { background: var(--field-1); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main { position: relative; z-index: 1; background: var(--bg); }

/* ---------- buttons: square, flat, one fill ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.4em;
  background: var(--ink); color: var(--paper);
  font: 500 var(--step-body)/1 var(--font); text-decoration: none;
  border: 0; border-radius: 0; cursor: pointer;
  transition: transform .35s var(--ease), background-color .25s;
}
.btn:hover { background: var(--field-1); transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--moss { background: var(--accent); color: var(--accent-ink); }
.btn--moss:hover { background: var(--ink); }
.link {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em;
  transition: text-underline-offset .3s var(--ease), color .2s;
}
.link:hover { text-underline-offset: .38em; color: var(--accent); }

/* ---------- top bar (on the hero field) ---------- */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 24px var(--margin);
  color: var(--paper);
}
.bar--page { position: relative; color: var(--ink); background: var(--bg); }
.mark {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; font-weight: 600; font-size: var(--step-body); letter-spacing: -0.02em;
}
.mark svg { width: 40px; height: 40px; flex: none; }
.bar nav { display: flex; gap: clamp(18px, 2.4vw, 40px); }
.bar nav a, .postcard__addr a { position: relative; text-decoration: none; font-weight: 500; padding: 6px 0; }
.bar nav a::after, .postcard__addr a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.bar nav a:hover::after, .postcard__addr a:hover::after { transform: scaleX(1); }
.bar .btn { justify-self: end; background: var(--paper); color: var(--ink); }
.bar .btn:hover { background: var(--field-1); color: #fff; }
.bar--page .btn { background: var(--ink); color: var(--paper); }

/* ---------- hero: the boarding pass, cropped by the fold ---------- */
.hero {
  position: relative; height: 100svh; min-height: 640px; overflow: hidden;
  background: var(--field-1);
}
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; animation: drift 28s var(--ease) both; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: rgba(28, 30, 22, .52); }
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1.02); } }

.pass {
  position: relative; z-index: 2;
  width: min(620px, calc(100% - 24px));
  aspect-ratio: 5 / 7;
  margin: clamp(104px, 20vh, 176px) auto 0;
  padding: clamp(28px, 4vw, 56px);
  background: var(--paper);
  text-align: center;
  /* side notches where the stub tears off, like a real boarding pass */
  -webkit-mask: radial-gradient(circle 22px at 0 var(--notch), #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore: a mask that cuts the boarding-pass notches, not a fill */
                radial-gradient(circle 22px at 100% var(--notch), #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore */
          mask: radial-gradient(circle 22px at 0 var(--notch), #0000 98%, #000) left / 51% 100% no-repeat, /* taste-skill-ignore: a mask that cuts the boarding-pass notches, not a fill */
                radial-gradient(circle 22px at 100% var(--notch), #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore */
  --notch: 218px;
  animation: board 1.1s var(--ease) .15s both;
}
@keyframes board { from { transform: translateY(80px); opacity: 0; } }
.pass__top { display: flex; justify-content: space-between; font-size: var(--step-small); color: var(--muted); }
.pass h1 {
  font-size: var(--step-display); line-height: .9; margin-top: 8px;
  display: grid; justify-items: center;
}
.pass h1 span:first-child { transform: translateX(-6%); }
.pass h1 span:last-child { transform: translateX(14%); }
.pass__lede { margin: 28px auto 0; max-width: 28ch; font-size: var(--step-lead); line-height: 1.3; }
.perf { margin: 30px -10px 0; border-top: 5px dotted var(--surface); }
.route { margin-top: 26px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; text-align: left; }
.route label { display: grid; gap: 6px; font-size: var(--step-small); color: var(--muted); }
.route select {
  appearance: none; -webkit-appearance: none; width: 100%;
  font: 500 var(--step-body)/1.2 var(--font); color: var(--ink);
  background: var(--bg); border: 0; border-radius: 0; padding: 12px 34px 12px 12px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232a2a26' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: background-color .2s;
}
.route select:hover { background-color: var(--surface); }
.route__arrow { padding-bottom: 12px; font-size: var(--step-lead); }
.ticket { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: var(--step-small); color: var(--ink); }
.ticket b { font-weight: 500; }
.ticket i { width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); align-self: center; }
.step-out { margin: 14px auto 0; max-width: 40ch; font-size: var(--step-body); }
.pass .btn { margin-top: 22px; width: 100%; }
.pass.is-changing .ticket, .pass.is-changing .step-out { animation: flip .5s var(--ease); }
@keyframes flip { from { opacity: 0; transform: translateY(8px); } }

/* ---------- layout helpers ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.section-head { font-size: var(--step-head); }

/* ---------- intro: title, note, facts row ---------- */
.intro { padding-top: 128px; padding-bottom: 96px; }
.intro h2 { grid-column: 1 / 7; font-size: var(--step-head); font-weight: 400; align-self: end; }
.intro__note { grid-column: 10 / 13; align-self: end; max-width: 300px; }
.facts { margin-top: 96px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fact strong { display: block; font-weight: 400; font-size: var(--step-sub); letter-spacing: -0.03em; line-height: 1; }
.fact span { display: block; margin-top: 10px; font-size: var(--step-small); color: var(--muted); max-width: 22ch; }
.intro__film { margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); align-items: end; }
.intro__film figure { grid-column: 6 / 13; margin: 0; }
.intro__film video, .intro__film img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }
.intro__film p { grid-column: 1 / 5; font-size: var(--step-lead); line-height: 1.3; }
figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }

/* ---------- routes: stacking colour sheets ---------- */
.routes { padding-top: var(--section); }
.routes > .section-head { padding-inline: var(--margin); margin-bottom: 48px; max-width: 16ch; }
.sheet {
  position: relative;
  min-height: 86svh; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap);
  grid-template-rows: 72px 1fr;
  padding-inline: var(--margin);
  background: var(--sheet); color: var(--sheet-ink);
}
.sheet h3 { grid-column: 1 / 7; grid-row: 1; align-self: center; font-size: var(--step-sub); letter-spacing: -0.03em; }
.sheet__text { grid-column: 1 / 6; grid-row: 2; align-self: end; padding-bottom: 56px; display: grid; gap: 22px; justify-items: start; }
.sheet__text p { max-width: 40ch; font-size: var(--step-body); }
.sheet__text .link { font-weight: 500; }
.sheet figure { grid-column: 7 / 13; grid-row: 2; margin: 0 0 var(--margin); overflow: hidden; }
.sheet figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sheet:hover figure img { transform: scale(1.03); }
@media (min-width: 1101px) {
  /* each sheet is 72px taller than the next, so the tabs stay visible when the stack scrolls away */
  .sheet { position: sticky; top: calc(var(--i) * 72px); min-height: calc(64svh + (4 - var(--i)) * 72px); }
}
.sheet--1 { --i: 0; --sheet: var(--surface); --sheet-ink: var(--ink); }
.sheet--2 { --i: 1; --sheet: var(--field-1); --sheet-ink: #fff; }
.sheet--3 { --i: 2; --sheet: var(--paper); --sheet-ink: var(--ink); }
.sheet--4 { --i: 3; --sheet: var(--ink); --sheet-ink: var(--paper); }
.sheet--5 { --i: 4; --sheet: var(--moss-3); --sheet-ink: #fff; }

/* ---------- showcase: square plate, spare text ---------- */
.plate { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; background: var(--surface); }
.plate__pic { position: relative; padding: 40px; display: grid; place-items: center; }
.plate__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 78% 50%; }
.plate__ring { position: absolute; width: calc((100% - 80px) * .86); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--paper); pointer-events: none; }
.plate__ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--paper); }
.plate__text { display: flex; flex-direction: column; justify-content: space-between; padding: 40px var(--margin) 40px 24px; gap: 40px; }
.tabs { display: flex; gap: 28px; flex-wrap: wrap; }
.tabs button { font: 500 var(--step-body)/1.2 var(--font); background: none; border: 0; padding: 6px 0; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; transition: color .2s, border-color .3s; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:hover { color: var(--ink); }
.plate__text h2 { font-size: var(--step-head); max-width: 12ch; }
.plate__panel p { margin-top: 28px; max-width: 38ch; }
.plate__panel[hidden] { display: none; }
.cells { display: grid; grid-template-columns: 1fr 1fr; }
.cells a { min-height: 72px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 500; transition: transform .35s var(--ease), background-color .25s; }
.cells a:first-child { background: var(--ink); color: var(--paper); }
.cells a:last-child { background: var(--bg); color: var(--ink); }
.cells a:hover { transform: translateY(-3px); }
.cells a:first-child:hover { background: var(--field-1); }

/* ---------- itinerary on a slip ---------- */
.itin { background: var(--ink); color: var(--paper); padding-block: var(--section); }
.itin__head { grid-column: 1 / 6; }
.itin__head h2 { font-size: var(--step-head); }
.itin__head p { margin-top: 28px; max-width: 30ch; }
.slip-wrap { grid-column: 7 / 12; }
.slip { background: var(--paper); color: var(--ink); padding: 36px 36px 8px; font-variant-numeric: tabular-nums; }
.slip h3 { font-size: var(--step-body); letter-spacing: 0; line-height: 1.3; margin-top: 28px; }
.slip h3:first-child { margin-top: 0; }
.slip ul { list-style: none; margin: 10px 0 0; padding: 0; }
.slip li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.slip li span:first-child { flex: 0 1 auto; }
.slip li .dots { flex: 1 1 24px; min-width: 24px; border-bottom: 4px dotted var(--surface); transform: translateY(-4px); }
.slip li span:last-child { flex: none; color: var(--muted); }
.slip__total { margin: 28px -36px 0; min-height: 44px; padding: 10px 36px; display: flex; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--paper); font-weight: 500; }
.zig { display: block; width: 100%; height: 18px; color: var(--paper); }

/* ---------- journal: cards that fold into spines ---------- */
.journal { position: relative; padding-block: var(--section); }
.journal__stage { padding-inline: var(--margin); display: flex; flex-direction: column; }
.journal h2 { font-size: var(--step-head); }
.deck { margin-top: 48px; height: 360px; display: flex; gap: 0; overflow: hidden; }
.card {
  flex: 0 0 620px; width: 620px; height: 100%; overflow: hidden; position: relative;
  background: var(--tone); color: #fff; text-decoration: none;
  transition: flex-basis .8s var(--ease), width .8s var(--ease);
}
.card:nth-child(3n+1) { --tone: var(--field-1); }
.card:nth-child(3n+2) { --tone: var(--moss-2); }
.card:nth-child(3n+3) { --tone: var(--moss-3); }
.card__inner { width: 620px; height: 100%; padding: 32px; display: flex; flex-direction: column; }
.card h3 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.03em; max-width: 22ch; }
.card p { margin-top: 18px; max-width: 46ch; font-size: var(--step-body); }
.card__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-body); }
.card__foot a { color: #fff; }
.card.is-spine { flex-basis: 120px; width: 120px; cursor: pointer; }
.card.is-spine .card__inner { width: 120px; }
.card.is-spine .card__inner > :not(h3) { display: none; }
.card.is-spine h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--step-body); letter-spacing: 0; max-height: 100%; }
.card:focus-visible { outline-offset: -6px; outline-color: #fff; }
.journal__more { margin-top: 48px; font-size: var(--step-body); }

/* ---------- about: a letter on a sheet with a tear-off strip ---------- */
.about { background: var(--field-1); padding-block: 128px; display: grid; justify-items: center; padding-inline: var(--margin); }
.letter { width: min(640px, 100%); }
.letter__sheet { background: var(--paper); padding: 60px; }
.letter__sheet img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.letter__sheet h2 { margin-top: 28px; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.2; }
.letter__sheet p { margin-top: 1.5em; line-height: 1.55; }
.letter__sheet mark { background: #c9d4a6; color: var(--ink); padding: 0 .15em; }
.sign { margin-top: 2em; }
.sign em { display: block; font-size: var(--step-lead); font-style: normal; font-weight: 500; letter-spacing: -0.02em; }
.sign span { font-size: var(--step-small); color: var(--muted); }
.scallop { display: block; width: 100%; height: 22px; color: var(--paper); }
.tear { margin-top: 10px; border-top: 5px dotted var(--paper); padding-top: 10px; }
.tear a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 28px; background: var(--paper); text-decoration: none; font-weight: 500; transition: transform .35s var(--ease); }
.tear a:hover { transform: translateY(-3px); }

/* ---------- FAQ as reading text ---------- */
.faq { padding-block: var(--section); }
.faq h2 { grid-column: 1 / 4; font-size: var(--step-sub); letter-spacing: -0.03em; }
.faq__text { grid-column: 5 / 13; columns: 2; column-gap: 56px; }
.faq__text p { break-inside: avoid; margin-bottom: 20px; line-height: 1.55; }
.faq__text b { font-weight: 500; }

/* ---------- the reply card ---------- */
.reply { position: relative; overflow: hidden; background: var(--field-1); color: #fff; padding: 112px var(--margin) 0; }
.reply .grid { align-items: end; }
.reply__note { grid-column: 1 / 5; align-self: end; padding-bottom: 124px; font-size: var(--step-lead); line-height: 1.3; }
.reply__card {
  grid-column: 6 / 13; justify-self: end; width: min(44vw, 640px); aspect-ratio: 7 / 5;
  margin-bottom: -60px; padding: 48px; background: var(--paper); color: var(--ink);
  rotate: 2deg; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  transition: rotate .6s var(--ease), translate .6s var(--ease), opacity .8s var(--ease), transform .9s var(--ease);
}
.reply__card:hover { rotate: 0.6deg; translate: 0 -8px; }
.reply__card h2 { font-size: var(--step-sub); letter-spacing: -0.03em; }
.reply__card .btn { width: 100%; min-height: 56px; }

/* ---------- footer: the back of the postcard, uncovered by a curtain ---------- */
.foot { position: relative; background: var(--ink); padding: 64px var(--margin) 40px; }
.postcard { width: min(1180px, 100%); margin-inline: auto; }
.postcard__top { display: block; width: 100%; height: 50px; color: var(--paper); }
.postcard__body { background: var(--paper); padding: 40px clamp(24px, 4vw, 56px) 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; }
.postcard__body h2 { font-size: var(--step-sub); letter-spacing: -0.03em; }
.postcard__msg p { margin-top: 18px; max-width: 36ch; }
.postcard__addr { padding-left: 40px; border-left: 5px dotted var(--surface); display: grid; align-content: start; gap: 12px; position: relative; padding-top: 120px; }
.postcard__addr a { font-size: var(--step-body); justify-self: start; }
.stamp { position: absolute; top: 0; right: 0; width: 88px; padding: 6px; background: var(--bg); rotate: 3deg; }
.stamp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.imprint { grid-column: 1 / -1; text-align: center; font-size: var(--step-small); color: var(--muted); }
.credits { grid-column: 1 / -1; max-width: 62ch; font-size: var(--step-small); color: var(--muted); }
.credits a { color: var(--muted); }

/* ---------- article pages ---------- */
.article { padding: 72px var(--margin) var(--section); }
.article__head { max-width: 980px; }
.article__head h1 { font-size: var(--step-head); max-width: 18ch; }
.article__meta { margin-top: 24px; color: var(--muted); font-size: var(--step-small); }
.article__lede { margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }
.article__pic { margin: 64px calc(var(--margin) * -1) 0; }
.article__pic img { width: 100%; height: min(70svh, 720px); object-fit: cover; transition: transform 1.4s var(--ease); }
.article__pic figcaption { padding-inline: var(--margin); }
.prose { max-width: 68ch; margin: 72px 0 0 calc(100% / 12 * 3); }
.prose h2 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.2; margin: 2.2em 0 .6em; }
.prose p, .prose li { line-height: 1.6; }
.prose p + p { margin-top: 1.1em; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 1em 0; }
.prose li + li { margin-top: .5em; }
.note-box { margin-top: 2.5em; padding: 24px 28px; background: var(--surface); font-size: var(--step-small); }
.next { margin-top: 72px; padding: 40px; background: var(--field-1); color: #fff; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.next a { color: #fff; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; }
.index-list { margin-top: 64px; display: grid; gap: 12px; }
.index-list a { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; padding: 28px 32px; text-decoration: none; background: var(--surface); transition: background-color .25s, transform .35s var(--ease); }
.index-list a:nth-child(even) { background: var(--paper); }
.index-list a:hover { background: var(--field-1); color: #fff; transform: translateX(6px); }
.index-list h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.05; }
.index-list p { margin-top: 10px; max-width: 60ch; }
.index-list span { font-size: var(--step-small); white-space: nowrap; }

/* ---------- entrances (only when the script runs) ---------- */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 75ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js [data-open] > :first-child { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 75ms); }
.js [data-open].is-in > :first-child { clip-path: inset(0 0 0 0); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .intro h2 { grid-column: 1 / 8; }
  .intro__note { grid-column: 9 / 13; }
  .slip-wrap { grid-column: 6 / 13; }
  .faq__text { grid-column: 1 / 13; margin-top: 32px; }
  .faq h2 { grid-column: 1 / 13; }
  .reply__card { width: min(60vw, 560px); }
  .reply__note { grid-column: 1 / 6; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; padding: 16px var(--margin); }
  .bar nav { display: none; }
  .mark span { display: none; }
  .bar .btn { min-height: 44px; padding: 0 1em; font-size: var(--step-small); }
  .pass { width: calc(100% - 24px); margin-top: 96px; aspect-ratio: auto; min-height: calc(100svh - 72px); padding: 28px 20px; --notch: 188px; }
  .pass h1 { font-size: 15vw; }
  .pass h1 span { transform: none !important; }
  .route { grid-template-columns: 1fr; }
  .route__arrow { display: none; }

  .intro { padding-top: 96px; padding-bottom: 96px; }
  .intro h2, .intro__note { grid-column: 1 / -1; }
  .intro h2 { font-size: var(--step-head); }
  .intro__note { margin-top: 20px; max-width: none; }
  .facts { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .intro__film { margin-top: 48px; }
  .intro__film figure, .intro__film p { grid-column: 1 / -1; }
  .intro__film p { margin-top: 24px; order: 2; }

  .sheet { min-height: 0; grid-template-rows: 64px auto auto; }
  .sheet h3 { grid-column: 1 / -1; font-size: var(--step-lead); }
  .sheet figure { grid-column: 1 / -1; grid-row: 2; margin: 0 calc(var(--margin) * -1); }
  .sheet figure img { aspect-ratio: 4 / 3; height: auto; }
  .sheet__text { grid-column: 1 / -1; grid-row: 3; align-self: start; padding: 24px 0 40px; }

  .plate { grid-template-columns: 1fr; }
  .plate__pic { padding: 16px; }
  .plate__pic img { aspect-ratio: 4 / 3; object-position: 55% 50%; }
  .plate__text { padding: 24px var(--margin) 40px; }
  .plate__text h2 { font-size: var(--step-head); }
  .cells { grid-template-columns: 1fr; }
  .cells a { min-height: 60px; }

  .itin__head, .slip-wrap { grid-column: 1 / -1; }
  .slip-wrap { margin-top: 48px; }
  .slip { padding: 28px 20px 8px; }
  .slip__total { margin-inline: -20px; padding-inline: 20px; }

  .journal h2 { font-size: var(--step-head); }
  .deck { height: auto; flex-direction: column; gap: 12px; }
  .card, .card.is-spine { flex-basis: auto; width: 100%; cursor: default; }
  .card.is-spine .card__inner { width: 100%; }
  .card.is-spine .card__inner > p { display: block; }
  .card.is-spine .card__inner > .card__foot { display: flex; }
  .card.is-spine h3 { writing-mode: horizontal-tb; transform: none; font-size: var(--step-lead); }
  .card__inner { width: 100%; padding: 24px; min-height: 260px; }

  .about { padding-block: 96px; padding-inline: 0; }
  .letter__sheet { padding: 32px 24px; }
  .tear a { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 16px 24px; }

  .faq h2 { font-size: var(--step-sub); }
  .faq__text { columns: 1; }
  .faq__text p { margin-bottom: 18px; }

  .reply { padding-top: 72px; }
  .reply .grid { display: flex; flex-direction: column; align-items: stretch; gap: 40px; min-height: 0; }
  .reply__note { padding-bottom: 0; font-size: 1.25rem; }
  .reply__card { width: 90%; align-self: center; aspect-ratio: auto; padding: 32px 22px; rotate: 1deg; margin-bottom: -40px; }
  .reply__card .btn { min-height: 52px; }

  .foot { padding: 32px 12px 24px; }
  .postcard__top { height: 30px; }
  .postcard__body { grid-template-columns: 1fr; padding: 28px 20px; gap: 28px; }
  .postcard__addr { padding: 0; border: 0; border-top: 5px dotted var(--surface); padding-top: 28px; }
  .stamp { position: static; width: 64px; justify-self: end; order: -1; }

  .article { padding-top: 40px; }
  .prose { margin: 48px 0 0; }
  .index-list a { grid-template-columns: 1fr; padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-rise], .js [data-open] > :first-child { opacity: 1; transform: none; clip-path: none; }
}

/* the spine button: the title itself opens the card */
.card__spine { all: unset; cursor: pointer; display: block; }
.card__spine:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.card.is-spine .card__spine { white-space: nowrap; }
@media (max-width: 760px) {
  .card.is-spine { flex-basis: auto; width: 100%; }
}