/* ==========================================================================
   TRAVEL POSTER — one page. Loaded on a/travel-poster.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   One portrait poster held at 5:7 in a matte at every viewport (the
   record's layout rule holds the ratio; the orientation is ours, since
   the quad royal ran landscape), a headland in flat stacked planes, one wordmark in a dark
   band. The record below keeps the poster's grammar: each section opens on
   the wordmark band, the facts sit on a flat sand plane, the diagnostic
   sentence on the sea, neighbours are small posters, horizon strips close
   the record. Hierarchy is band, then text.

   Kept apart from its neighbours: Mid-Century Modern (organic shapes that
   overprint, Josefin throughout, isolated columns, a script word) and Pulp
   (two inks, misregistration). Here the inks never overlap, the field is a
   horizon, Josefin is caps-only in bands and the reading face is Karla.
   The shell (rail, top bar, community drawer) is never restyled: every rule
   is scoped to .tp-hero or .tp-rec.

   Palette (the artifact's inks, ours):
   ink #15343D · cream #F4E3BE · sand #F2C572 · sky #F6D48E · sun #FBEAC0
   haze #7FA7A8 · sea #1E5C6B · wave #2F7584 · coral #D9603F
   paper #EFE6D2 · matte #E2D6BC
   Text contrast (WCAG AA): ink on paper 10.6:1, on sand 8.2:1, on haze
   5.0:1; cream on ink 10.4:1, on sea 5.9:1; coral-deep #9E3F25 on paper
   5.3:1; muted #4A5D61 on paper 5.6:1. Coral, sand-as-text and the
   artifact's #B34A2E (4.3:1) are never used for body text.

   No motion: the record gives motion no position, and a poster does not move.
   ========================================================================== */

@font-face {
  font-family: "Josefin TP";
  src: url("fonts/josefin-sans.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla TP";
  src: url("fonts/karla.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla TP";
  src: url("fonts/karla-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

.tp-page {
  --tp-ink: #15343D;
  --tp-cream: #F4E3BE;
  --tp-sand: #F2C572;
  --tp-sky: #F6D48E;
  --tp-sun: #FBEAC0;
  --tp-haze: #7FA7A8;
  --tp-sea: #1E5C6B;
  --tp-wave: #2F7584;
  --tp-coral: #D9603F;
  --tp-paper: #EFE6D2;
  --tp-matte: #E2D6BC;
  --tp-coral-d: #9E3F25;
  --tp-muted: #4A5D61;
  --tp-band-face: "Josefin TP", "Futura", "Century Gothic", sans-serif;
  --tp-face: "Karla TP", "Helvetica Neue", Arial, sans-serif;
}
.tp-page main { background: var(--tp-paper); color: var(--tp-ink); overflow-x: clip; }
/* Present, never arriving: the shell's scroll reveal does not fade the
   record in (outranks site.css's .js-reveal rule). */
.js-reveal .tp-page main > section.tp-rec, .tp-page main > section.tp-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- the inks (SVG fills) --------------------------------------------- */
.tp-i-sand { fill: var(--tp-sand); }
.tp-i-sky { fill: var(--tp-sky); }
.tp-i-sun { fill: var(--tp-sun); }
.tp-i-haze { fill: var(--tp-haze); }
.tp-i-sea { fill: var(--tp-sea); }
.tp-i-coral { fill: var(--tp-coral); }
.tp-i-cream { fill: var(--tp-cream); }
.tp-i-ink { fill: var(--tp-ink); }
.tp-i-wave { fill: none; stroke: var(--tp-wave); stroke-width: 5; }
.tp-i-palm { fill: none; stroke: var(--tp-ink); stroke-width: 7; stroke-linecap: round; }
.tp-i-card { fill: #FFFFFF; opacity: 0.94; }
.tp-i-bar { fill: var(--tp-ink); }
.tp-i-bar2 { fill: #9AA4A6; }
.tp-i-btn { fill: #3366FF; }
.tp-n-pulp-p { fill: #EBD9B0; }
.tp-n-pulp-pt { fill: #EBD9B0; }
.tp-n-pulp-r { fill: #C8372D; }
.tp-n-pulp-k { fill: #1A1A1A; }
.tp-n-grid { fill: none; stroke: var(--tp-haze); stroke-width: 2; }
.tp-n-contour { fill: none; stroke: var(--tp-sea); stroke-width: 5; }
.tp-n-line { fill: none; stroke: var(--tp-ink); stroke-width: 8; stroke-linecap: round; }
.tp-wm { font-family: var(--tp-band-face); font-weight: 700; letter-spacing: 0.24em; }

/* ---- hero: the poster in its matte, held at 5:7 ----------------------- */
.tp-hero { font: 400 19px/1.65 var(--tp-face); color: var(--tp-ink); }
.tp-matte {
  container-type: inline-size;
  display: grid; place-items: center;
  padding: clamp(20px, 5vw, 60px) 16px;
  background: var(--tp-matte);
}
.tp-poster {
  /* The proportion never reflows: width is capped by the matte, the
     viewport height and a ceiling; the height follows at 5:7. */
  width: min(560px, 100cqi, calc((100svh - 120px) * 5 / 7));
  min-width: min(240px, 100cqi);
  aspect-ratio: 5 / 7;
  padding: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 0 #C9BB9B, 0 30px 60px -30px rgba(21, 52, 61, 0.55);
}
.tp-art { display: block; width: 100%; height: 100%; }
.tp-hero__t { max-width: 860px; margin: 0 auto; padding: 18px 16px 8px; text-align: center; }
.tp-h1 {
  margin: 0;
  font: 600 14px/1.3 var(--tp-band-face);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--tp-muted);
}
.tp-tag { margin: 8px auto 0; max-width: 40ch; font-style: italic; font-size: 17px; color: var(--tp-ink); }
/* The two documented sheets, to proportion (quad royal 50:40, PLM 63.5:101.6). */
.tp-fmt { margin: 18px auto 0; max-width: 46ch; }
.tp-fmt__row { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.tp-fmt__s { display: block; border: 4px solid #FFFFFF; box-shadow: 0 1px 0 #C9BB9B; background: linear-gradient(var(--tp-sky) 0 38%, var(--tp-haze) 38% 58%, var(--tp-sea) 58% 80%, var(--tp-ink) 80%); }
.tp-fmt__s--quad { width: 80px; aspect-ratio: 50 / 40; }
.tp-fmt__s--plm { width: 50px; aspect-ratio: 63.5 / 101.6; }
.tp-fmt figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--tp-muted); }
.tp-fmt figcaption b { color: var(--tp-coral-d); }

/* ---- record: shared register ------------------------------------------ */
.tp-rec { font: 400 18px/1.65 var(--tp-face); color: var(--tp-ink); margin-top: 32px; }
.tp-rec b { font-weight: 700; }
.tp-rec em { font-style: italic; }
.tp-rec a { color: var(--tp-ink); text-decoration-color: var(--tp-coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tp-rec a:hover { color: var(--tp-coral-d); }
.tp-hero :focus-visible, .tp-rec :focus-visible { outline: 3px solid var(--tp-coral-d); outline-offset: 3px; }
.tp-rec p { margin: 0 0 14px; }
.tp-strip { display: block; width: 100%; height: clamp(44px, 7vw, 90px); }
.tp-w { max-width: 860px; margin: 0 auto; padding: 8px 16px 48px; }
.tp-s { margin-top: 52px; }
.tp-s:first-child { margin-top: 40px; }

/* The wordmark band: the poster's own bottom band, as every section head. */
.tp-band {
  margin: 0 0 20px;
  padding: 16px 20px 13px;
  background: var(--tp-ink); color: var(--tp-cream);
  font: 700 clamp(19px, 3vw, 28px)/1.2 var(--tp-band-face);
  letter-spacing: 0.14em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.tp-n { display: inline-block; margin-left: 0.4em; padding: 0 0.35em; background: var(--tp-sand); color: var(--tp-ink); letter-spacing: 0.04em; }
.tp-quiet { color: var(--tp-muted); font-size: 16px; }
.tp-kind {
  display: block; margin-bottom: 2px;
  font: 700 12px/1.5 var(--tp-band-face);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tp-coral-d);
}

/* Facts on a flat sand plane. */
.tp-facts {
  margin: 0; padding: 22px 24px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px;
  background: var(--tp-sand);
  font-size: 17px;
}
.tp-facts dt { font: 700 12px/1.5 var(--tp-band-face); letter-spacing: 0.2em; text-transform: uppercase; }
.tp-facts dd { margin: 0; }

/* The argument: its first sentence at wordmark scale. */
.tp-claim {
  font: 700 clamp(24px, 3.6vw, 34px)/1.25 var(--tp-band-face);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tp-refuse { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 3px solid var(--tp-ink); }
.tp-refuse p { margin: 0; }
.tp-pair { display: flex; gap: 12px; }
.tp-mini { display: block; width: 120px; height: auto; aspect-ratio: 5 / 7; box-sizing: border-box; border: 5px solid #FFFFFF; box-shadow: 0 1px 0 #C9BB9B; }
.tp-mini--x { outline: 3px solid var(--tp-coral-d); outline-offset: 3px; }

/* The diagnostic sentence on the sea. */
.tp-sea { padding: 18px 22px; background: var(--tp-sea); color: var(--tp-cream); }

/* What carries the look. */
.tp-tw { overflow-x: auto; }
.tp-ct, .tp-cov { width: 100%; border-collapse: collapse; font-size: 16px; }
.tp-ct th, .tp-ct td, .tp-cov th, .tp-cov td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 2px solid var(--tp-ink); }
.tp-ct th { width: 34%; font-weight: 700; }
.tp-ct th a { display: inline-flex; align-items: center; min-height: 44px; }
.tp-ct th small { display: block; font: 700 11px/1.4 var(--tp-band-face); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tp-coral-d); }
.tp-ct td p { margin: 0 0 6px; }
.tp-ct td.tp-quiet { padding-top: 20px; }
.tp-tags a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 12px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 0; }
.tp-chips span { display: grid; place-items: end start; width: 84px; height: 64px; padding: 6px; font: 600 12px/1 var(--tp-face); letter-spacing: 0.02em; }
.tp-cov thead th { font: 700 12px/1.5 var(--tp-band-face); letter-spacing: 0.18em; text-transform: uppercase; }
.tp-cov tbody th { font-weight: 600; }

/* Rules by area: the area on a flat haze chip, then the rules. */
.tp-area { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 2px solid var(--tp-ink); }
.tp-area__h {
  align-self: start; margin: 0; padding: 8px 12px 6px;
  background: var(--tp-haze); color: var(--tp-ink);
  font: 700 14px/1.3 var(--tp-band-face); letter-spacing: 0.18em; text-transform: uppercase;
}
.tp-rules { list-style: none; margin: 0; padding: 0; }
.tp-rules li { margin: 0 0 14px; }
.tp-rules li:last-child { margin-bottom: 0; }

/* Standing. */
.tp-ledger { margin: 18px 0; padding: 0; border-top: 2px solid var(--tp-ink); }
.tp-ledger > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 2px solid var(--tp-ink); }
.tp-ledger dt { font: 700 12px/1.6 var(--tp-band-face); letter-spacing: 0.18em; text-transform: uppercase; }
.tp-ledger dd { margin: 0; }
.tp-firm { font-weight: 700; }
.tp-cov { margin-top: 18px; }

/* Neighbours as small posters. */
.tp-nb { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.tp-nb li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
.tp-nb__h { margin: 0; font: 700 20px/1.2 var(--tp-band-face); letter-spacing: 0.12em; text-transform: uppercase; }
.tp-nb__h a { display: inline-flex; align-items: center; min-height: 44px; }
.tp-nb p { margin: 4px 0 0; }

/* Use it: flat blocks in the poster's inks. The colour classes carry the
   element too, so they outrank `.tp-rec a`. */
.tp-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tp-rec a.tp-u { display: block; min-height: 44px; padding: 18px 20px; text-decoration: none; font-size: 16px; line-height: 1.5; }
.tp-rec a.tp-u b { display: block; margin-bottom: 4px; font: 700 15px/1.3 var(--tp-band-face); letter-spacing: 0.16em; text-transform: uppercase; }
.tp-rec a.tp-u--1 { background: var(--tp-sand); color: var(--tp-ink); }
.tp-rec a.tp-u--2 { background: var(--tp-sea); color: var(--tp-cream); }
.tp-rec a.tp-u--3 { background: var(--tp-haze); color: var(--tp-ink); }
.tp-rec a.tp-u--4 { background: var(--tp-ink); color: var(--tp-cream); }
.tp-rec a.tp-u:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tp-foot { margin-top: 18px; font-size: 16px; }
.tp-foot a { display: inline-block; padding-block: 11px; }

/* ---- narrow ------------------------------------------------------------ */
@media (max-width: 640px) {
  .tp-facts, .tp-use { grid-template-columns: 1fr; }
  .tp-refuse { grid-template-columns: 1fr; }
  .tp-area, .tp-ledger > div { grid-template-columns: 1fr; gap: 8px; }
  .tp-area__h { justify-self: start; }
  .tp-nb li { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .tp-mini { width: 100px; }
  .tp-nb .tp-mini { width: 88px; }
  .tp-ct th { width: 40%; }
  .tp-chips span { width: 72px; height: 56px; }
}