/* Arrival: the closing section and footer (Daylight module).
   The page lands on afternoon paper. The closing line is set wide (Archivo
   125%, human time); below it the café from the hero comes back as a
   full-bleed daylight plate: the visitor saw this place at night, now it is
   Saturday afternoon. Under the plate, its caption and the flight clock's last
   waypoint, SAT 15●00, with a cabin-amber lamp for the colon. html.is-landed
   (chapters.js) turns the page's signal light amber; the footer's O lights
   with it. The footer stays on the afternoon: the page never goes dark again. */

/* ── Closing ──────────────────────────────────────────── */
.closing-section { position: relative; overflow: clip; background: var(--afternoon); color: var(--ink); }
.closing-inner { padding-block: clamp(64px, 6.6vw, 96px) clamp(40px, 4vw, 56px); }
/* The CTA takes the width its words need (one line wherever the row allows);
   the note keeps at least 16em and gives way first. */
.closing-copy { display: grid; grid-template-columns: minmax(auto, max-content) minmax(16em, 1fr); grid-template-areas: "title title" "cta note"; align-items: end; gap: clamp(28px, 3vw, 44px) clamp(32px, 5vw, 80px); }
.closing-copy h2 { --closing-size: clamp(72px, 6.67vw, 96px); grid-area: title; max-width: 16em; font: 800 var(--closing-size)/.96 var(--font-display); font-stretch: var(--w-human); letter-spacing: -.045em; }
:is(:lang(zh), :lang(ja), :lang(ko)) .closing-copy h2 { line-height: 1.14; letter-spacing: -.02em; }
/* Human width must never cost a word its integrity. With scripting, motion.js
   measures the line: whole words only (no hyphen, no break), and where a word
   does not fit the measure (Danish "eftermiddagen" on a phone) the line steps
   in from 125% to 112.5%, then to reading width, then a size smaller; only
   past that may a word break. Without scripting, phones read at 100%. */
.closing-copy h2[data-fit] { overflow-wrap: normal; hyphens: manual; }
.closing-copy h2[data-fit="1"] { font-stretch: 112.5%; }
.closing-copy h2[data-fit="2"] { font-stretch: var(--w-reading); }
.closing-copy h2[data-fit="3"], .closing-copy h2[data-fit="4"] { font-size: calc(var(--closing-size) * .88); font-stretch: var(--w-reading); }
.closing-copy h2[data-fit="4"] { overflow-wrap: break-word; hyphens: auto; }
.closing-copy .human { color: var(--amber-deep); }
.closing-copy .button { grid-area: cta; justify-self: start; }
/* The CTA is an ink button on paper, so its lamp is lit as on the night ink:
   signal red while the autopilot works, grey when it is off, and cabin amber once
   the page has landed, like every other light here (without JS, simply lit). */
.closing-copy .button { --signal: var(--red); }
html[data-autopilot=off] .closing-copy .button { --signal: var(--signal-off); }
html.is-landed .closing-copy .button, html:not([data-autopilot]) .closing-copy .button { --signal: var(--amber); }
.closing-copy p { grid-area: note; justify-self: end; max-width: 400px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); text-align: end; text-wrap: balance; }

/* The café, in daylight. Decorative; the readout below is its caption. */
.closing-plate { position: relative; aspect-ratio: 21 / 9; max-block-size: min(78vh, 820px); overflow: clip; background: #d8cdb9; }
.closing-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }

/* The readout: the day and the caption under the plate, then the time across the full measure. */
.closing-art { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day note" "time time"; align-items: baseline; gap: clamp(14px, 2vw, 28px) 24px; padding-block: clamp(16px, 1.8vw, 24px) clamp(28px, 3vw, 44px); }
.arrival { display: contents; }
.arrival-day { grid-area: day; font: 500 clamp(13px, 1.3vw, 18px)/1 var(--font-mono); letter-spacing: .18em; color: var(--amber-deep); white-space: nowrap; }
.closing-art em { grid-area: note; justify-self: end; font: 800 clamp(20px, 2.4vw, 36px)/1.15 var(--font-display); font-style: normal; letter-spacing: -.02em; text-align: end; color: var(--amber-deep); }
/* 3.5em is the set width at 125%: four tabular digits and the lamp. */
.arrival-time {
  grid-area: time;
  display: block;
  inline-size: 100%;
  block-size: .8em;
  font: 900 min(28.2cqi, 360px)/.8 var(--font-display);
  font-stretch: 125%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  contain: layout paint;
}
[dir=rtl] .arrival-time { text-align: right; }
:is(:lang(zh), :lang(ja), :lang(ko)) .arrival-day { letter-spacing: .04em; }
.arrival-lamp { display: inline-block; width: .2em; height: .2em; margin-inline: .07em .08em; vertical-align: .27em; border-radius: 50%; background: var(--amber); }

/* First landing: machine time widens into human time, once (JS + motion only). */
.closing-section.will-land .arrival-time { transition: font-stretch 1.1s var(--ease); }
.closing-section.will-land:not(.has-landed) .arrival-time { font-stretch: 62%; }

/* ── Footer ───────────────────────────────────────────── */
/* Still the afternoon. The wordmark is the home link: contained, at human
   width, its O hollow until the page lands and then lit like the arrival lamp. */
.site-footer { overflow: hidden; background: var(--afternoon); color: var(--ink); }
.site-footer > .container { border-block-start: 1px solid var(--ink); }
.footer-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 28px clamp(32px, 4vw, 64px); padding-block: clamp(28px, 3vw, 40px); }
.footer-brand { align-self: start; border-radius: 4px; color: var(--ink); }
.footer-wordmark { display: flex; align-items: center; gap: .02em; direction: ltr; font: 900 clamp(44px, 4.6vw, 68px)/.8 var(--font-display); font-stretch: var(--w-human); letter-spacing: -.05em; user-select: none; }
.footer-wordmark svg { width: .72em; height: .72em; margin-inline: .03em; overflow: visible; }
/* The O stays hollow until the page lands; without JS it is simply lit. */
.footer-wordmark circle { fill: transparent; stroke: currentColor; stroke-width: 3; transition: fill .5s var(--ease), stroke .5s var(--ease); }
html.is-landed .footer-wordmark circle, html:not([data-autopilot]) .footer-wordmark circle { fill: var(--amber); stroke: var(--amber); }
.footer-top > p { font-size: 14px; line-height: 1.75; color: var(--ink); }
.footer-tagline { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-muted); }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 0 40px; font-size: 14px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-muted); text-decoration: underline 1px transparent; text-underline-offset: .3em; transition: color var(--t-micro), text-decoration-color var(--t-micro); }
.footer-links a:hover { color: var(--ink); text-decoration-color: currentColor; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 4px 32px; padding-block: 18px 22px; border-block-start: 1px solid var(--ink-line); font-size: 13px; line-height: 1.6; color: var(--ink-muted); }

@media (max-width: 1000px) {
  .footer-top { grid-template-columns: auto minmax(0, 1fr); }
  .footer-links { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: start; }
}

@media (max-width: 760px) {
  .closing-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "cta" "note"; gap: 28px; }
  .closing-copy p { justify-self: stretch; max-width: none; margin-top: -12px; text-align: start; }
  .closing-plate { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .closing-copy h2 { --closing-size: clamp(40px, 11vw, 56px); letter-spacing: -.04em; }
  .closing-copy .button { width: 100%; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 28px 20px; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .footer-links a { min-height: 44px; }
  /* Room for the support launcher at the very end of the page. */
  .footer-bottom { flex-direction: column; padding-block-end: calc(var(--support-lane) + 12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .closing-copy .button { gap: 11px; padding-inline: 22px; }
}
@media (scripting: none) and (max-width: 640px) {
  .closing-copy h2 { font-stretch: var(--w-reading); }
}