/* ==========================================================================
   TRAVEL POSTER — Build with it (Design Completion Campaign, 2026-09-29).
   The board is a hoarding: every field a sheet in a white margin, headed by
   the room's dark wordmark band, the sheets alternating landscape and
   portrait. Faces are the room's own ("Josefin TP", "Karla TP", declared in
   x-travel-poster.css). Every colour is a flat plane: the only gradients
   below use hard stops. Classes are gtp- or scoped to .gm--travel-poster.
   Nothing moves.
   ========================================================================== */
.gm--travel-poster {
  --gm-tag-inverse: var(--gm-color-cream);
  max-width: 1000px; margin: 40px auto 0;
  padding: clamp(20px, 4vw, 40px) 16px;
  background: #E2D6BC; color: var(--gm-color-ink);
  font: 400 17px/1.6 var(--gm-font);
}
/* Present, never arriving (outranks site.css's .js-reveal rule). */
.js-reveal .tp-page main > section.gm--travel-poster { opacity: 1; transform: none; transition: none; will-change: auto; }
.gm--travel-poster .gm__title {
  align-self: start; padding: 14px 18px 11px; background: var(--gm-color-ink); color: var(--gm-color-cream);
  font: 700 clamp(22px, 3.4vw, 32px)/1.15 var(--gm-font-band); letter-spacing: 0.14em; text-transform: uppercase;
}
.gm--travel-poster .gm__key, .gm--travel-poster .gm__get { opacity: 1; color: #4A5D61; }
.gm--travel-poster .gm__get a { color: var(--gm-color-ink); text-decoration-color: var(--gm-color-coral); text-decoration-thickness: 2px; }
.gm--travel-poster .gm-t[data-g="record"] { color: var(--gm-color-coral-deep); }
.gm--travel-poster .gm-t { font-family: var(--gm-font); }
.gm--travel-poster :focus-visible { outline: 3px solid var(--gm-color-coral-deep); outline-offset: 3px; }

/* The wall: sheets pasted side by side, landscape wider than portrait. */
.gtp-wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; }
.gtp-sheet { padding: 0 14px 14px; border: 5px solid #FFFFFF; background: var(--gm-color-paper); }
.gtp-land { grid-column: span 7; }
.gtp-port { grid-column: span 5; }
.gtp-wide { grid-column: 1 / -1; }
.gtp-sheet .gm-f__head { margin: 0 -14px 14px; padding: 10px 14px 8px; background: var(--gm-color-ink); color: var(--gm-color-cream); }
.gtp-sheet .gm-f__n { color: var(--gm-color-sand); font: 700 14px/1 var(--gm-font-band); }
.gtp-sheet .gm-f__name { font: 700 16px/1.2 var(--gm-font-band); letter-spacing: 0.18em; text-transform: uppercase; }
.gtp-sheet .gm-f__note { opacity: 1; color: #4A5D61; }
.gtp-cap { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #4A5D61; }

/* A horizon in flat planes: sky, haze, sea, key, with a flat sun. */
.gtp-planes { position: relative; display: block; width: 100%; height: 100%; background: linear-gradient(var(--gm-color-sky) 0 42%, var(--gm-color-haze) 42% 60%, var(--gm-color-sea) 60% 82%, var(--gm-color-ink) 82%); }
.gtp-p-sun { position: absolute; right: 18%; top: 14%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #FBEAC0; }

.gtp-inks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.gtp-inks li { display: grid; align-content: end; min-height: 64px; padding: 6px 8px; font-size: 12px; line-height: 1.3; }
.gtp-inks span { font: 700 11px/1.4 var(--gm-font-band); letter-spacing: 0.16em; text-transform: uppercase; }

.gtp-poster { display: grid; grid-template-rows: 1fr auto; aspect-ratio: 5 / 7; max-width: 240px; margin: 0 auto; border: 5px solid #FFFFFF; }
.gtp-band { display: grid; gap: 2px; padding: 12px 10px; background: var(--gm-color-ink); color: var(--gm-color-cream); text-align: center; }
.gtp-band b { font: 700 clamp(18px, 2.4vw, 24px)/1.1 var(--gm-font-band); letter-spacing: 0.14em; text-transform: uppercase; }
.gtp-band small { font-size: 13px; font-style: italic; }

.gtp-ratios { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.gtp-r { display: block; border: 4px solid #FFFFFF; }
.gtp-r--land { width: 58%; aspect-ratio: 50 / 40; }
.gtp-r--port { width: 30%; aspect-ratio: 63.5 / 101.6; }

.gtp-flat { display: flex; gap: 10px; }
.gtp-flat span { flex: 1; height: 56px; border: 4px solid #FFFFFF; }
.gtp-flat span:nth-child(1) { background: var(--gm-color-coral); }
.gtp-flat span:nth-child(2) { background: var(--gm-color-sea); }
.gtp-flat span:nth-child(3) { background: var(--gm-color-sand); }
.gtp-scene { height: 180px; border: 4px solid #FFFFFF; }

.gtp-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 6px 10px; background: var(--gm-color-ink); }
.gtp-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--gm-color-cream); font: 700 14px/1 var(--gm-font-band); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; }
.gtp-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gtp-nav a:focus-visible { outline-color: var(--gm-color-cream); }
.gtp-nav a[aria-current] { background: var(--gm-color-sand); color: var(--gm-color-ink); }
.gtp-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: end; }
.gtp-card { display: grid; grid-template-rows: 1fr auto; aspect-ratio: 5 / 7; border: 5px solid #FFFFFF; color: var(--gm-color-cream); text-decoration: none; }
.gtp-card__pic { display: block; }
.gtp-card b { padding: 10px 6px 8px; background: var(--gm-color-ink); text-align: center; font: 700 14px/1.2 var(--gm-font-band); letter-spacing: 0.16em; text-transform: uppercase; }
.gtp-card:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gtp-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; }
.gtp-form label { flex-basis: 100%; font: 700 12px/1.5 var(--gm-font-band); letter-spacing: 0.2em; text-transform: uppercase; }
.gtp-form input { flex: 1 1 10rem; min-width: 0; height: 2.75rem; padding: 0 10px; border: 2px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-cream); color: var(--gm-color-ink); }
.gtp-btn { min-height: 44px; padding: 0 22px; border: 0; border-radius: 0; background: var(--gm-color-ink); color: var(--gm-color-cream); font: 700 14px/1 var(--gm-font-band) !important; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.gtp-btn:hover { background: var(--gm-color-sea); }
.gtp-btn:active { background: var(--gm-color-sea); text-decoration: underline; }
.gtp-still { margin: 0; padding: 22px 16px; background: var(--gm-color-sea); color: var(--gm-color-cream); text-align: center; font: 700 18px/1.3 var(--gm-font-band); letter-spacing: 0.14em; text-transform: uppercase; }
.gtp-series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gtp-series span { display: block; aspect-ratio: 5 / 7; border: 4px solid #FFFFFF; }

@media (max-width: 760px) {
  .gtp-land, .gtp-port { grid-column: 1 / -1; }
  .gtp-ui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gtp-form { grid-column: 1 / -1; }
}