/* Bibi ($BIBI): the route board. Off-white travel paper, acid-yellow ink blocks, black condensed type, red grid hairlines.
   Materials: the printed map sheet (read), postcards (the token and the collection). Type first, boxes sized to it. */
@font-face { font-family: "Shoulders"; src: url("/fonts/BigShouldersDisplay-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Cabinet"; src: url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Elite"; src: url("/fonts/SpecialElite-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --paper: #f3f0e6; --cream: #fbf8f0; --yellow: #f2d038; --ink: #111111; --red: #d9482b; --grey: #6b675c;
  --display: "Shoulders", "Impact", sans-serif; --text: "Cabinet", "Helvetica Neue", Arial, sans-serif; --type: "Elite", "Courier New", monospace;
  --t-display: 120px; --t-title: 44px; --t-num: 40px; --t-body: 18px; --t-label: 17px; --t-small: 16px;
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px;
  --gutter: 40px; --key: 56px;
  --grid: repeating-linear-gradient(0deg, rgba(217, 72, 43, .16) 0 1px, transparent 1px 120px), repeating-linear-gradient(90deg, rgba(217, 72, 43, .16) 0 1px, transparent 1px 120px);
}
* { box-sizing: border-box; min-width: 0; }
html { overflow-x: clip; background: var(--paper); }
body { margin: 0; font-family: var(--text); font-size: var(--t-body); line-height: 1.45; color: var(--ink); font-synthesis: none; -webkit-font-smoothing: antialiased; background: url("/img/paper.webp") center / 900px repeat var(--paper); }
body::before { content: ""; position: fixed; inset: 0; background: var(--grid); pointer-events: none; z-index: 0; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--yellow); }

/* ---------- the living sky: the sheet again, blurred, and clouds on their own clocks ---------- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky__map { position: absolute; background: url("/img/map@1x.webp") center / cover no-repeat; opacity: .28; filter: blur(9px); animation: drift 240s linear infinite alternate; }
.sky__map--1 { width: 140vw; aspect-ratio: 2400 / 947; left: -20vw; top: -14vh; animation-duration: 260s; }
.sky__map--2 { width: 110vw; aspect-ratio: 2400 / 947; left: 10vw; top: 42vh; opacity: .18; animation-duration: 320s; animation-delay: -120s; }
.sky__map--3 { width: 90vw; aspect-ratio: 2400 / 947; left: -30vw; top: 70vh; opacity: .12; animation-duration: 200s; animation-delay: -60s; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(6vw, -3vh, 0); } }
.cloud { position: absolute; width: 22vw; opacity: .9; filter: blur(1.5px); animation: cross linear infinite; }
.cloud--1 { top: 6vh; animation-duration: 210s; animation-delay: -40s; }
.cloud--2 { top: 38vh; width: 30vw; animation-duration: 300s; animation-delay: -190s; }
.cloud--3 { top: 62vh; width: 16vw; animation-duration: 170s; animation-delay: -110s; }
.cloud--4 { top: 84vh; width: 26vw; animation-duration: 260s; animation-delay: -20s; }
@keyframes cross { from { left: -35vw; } to { left: 105vw; } }

/* ---------- the board ---------- */
.board { position: relative; z-index: 1; max-width: 1840px; margin: 0 auto; padding: var(--gutter); }
.screen { margin-bottom: var(--s7); }
.screen--board {
  display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-rows: auto auto; gap: var(--s4) var(--s5);
  grid-template-areas: "name leg" "map side";
}
.block { background: var(--yellow); padding: var(--s5) var(--s5) var(--s4); position: relative; }
.block--name { grid-area: name; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s4); align-items: end; }
.wordmark { font-family: var(--display); font-size: var(--t-display); font-weight: 900; line-height: 1.1; letter-spacing: .01em; grid-row: 1 / 3; }
.ticker { font-family: var(--display); font-weight: 900; font-size: var(--t-title); line-height: 1.15; align-self: end; }
.line { font-size: var(--t-body); font-weight: 600; max-width: 34ch; text-wrap: pretty; }
.marks { position: absolute; right: var(--s5); top: var(--s3); font-family: var(--text); font-weight: 700; font-size: var(--t-label); letter-spacing: .3em; }
.block--leg { grid-area: leg; display: grid; gap: var(--s2); align-content: start; }
.leg__label { font-family: var(--display); font-weight: 900; font-size: var(--t-title); line-height: 1; }
.leg__cities { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1.1; }
.leg__arrow { font-family: var(--text); font-size: var(--t-label); font-weight: 600; margin: 0 .3em; }
.bar { height: 22px; background: var(--paper); position: relative; }
.bar__fill { position: absolute; inset: 0; width: 0; background: var(--ink); transition: width .8s ease; }
.leg__vol { font-size: var(--t-label); font-weight: 600; }
.leg__via { font-weight: 500; color: rgba(17, 17, 17, .75); }
.leg__state { font-size: var(--t-small); font-weight: 500; min-height: calc(1.45em * 2); }

/* the map */
.mapwrap { grid-area: map; min-width: 0; }
.map { position: relative; width: 100%; aspect-ratio: 2400 / 947; }
.map__sheet { width: 100%; height: 100%; display: block; }
.map__route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map__pins { position: absolute; inset: 0; }
.pin { position: absolute; width: 28px; height: 40px; margin: -36px 0 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 90%; transition: transform .18s ease, filter .18s ease; }
.pin img { width: 100%; height: 100%; object-fit: contain; }
.pin:hover, .pin:focus-visible { transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(242, 208, 56, .9)); z-index: 3; }
.pin--here { z-index: 2; }
.map__cat { position: absolute; width: 10%; margin: -9.4% 0 0 -5%; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite; pointer-events: none; }
.map__vehicle { position: absolute; width: 11%; margin: -4.5% 0 0 -5.5%; animation: bob 3.2s ease-in-out infinite; pointer-events: none; transition: left 1.2s ease, top 1.2s ease; }
.map__vehicle--west { transform: scaleX(-1); }
@keyframes sway { 0%, 100% { transform: rotate(-.35deg); } 50% { transform: rotate(.35deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.map__tip { position: absolute; left: 0; top: 0; padding: var(--s1) var(--s3); background: var(--yellow); font-size: var(--t-small); font-weight: 700; white-space: nowrap; pointer-events: none; visibility: hidden; transform: translate(-50%, -100%); z-index: 4; }
.map__tip.is-on { visibility: visible; }

/* the side: the contract postcard and the album stack */
.side { grid-area: side; display: grid; grid-template-rows: auto 1fr; gap: var(--s4); align-content: start; }
.stack { border: 0; background: none; padding: 0; cursor: pointer; justify-self: center; display: grid; justify-items: center; gap: var(--s2); transition: transform .18s ease, filter .18s ease; }
.stack img { width: 220px; height: 220px; object-fit: contain; }
.stack:hover, .stack:focus-visible { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(242, 208, 56, .9)); }
.stack__count { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 1; background: var(--yellow); padding: var(--s2) var(--s4); }

/* ---------- postcards ---------- */
.postcard { position: relative; color: var(--ink); }
.postcard--back { border-image: url("/img/postcard-back.webp") 40 fill / 40px / 0 stretch; padding: var(--s5); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s5); min-height: 372px; }
.postcard--back::before { content: ""; position: absolute; top: var(--s5); bottom: var(--s5); left: 50%; border-left: 2px solid rgba(17, 17, 17, .55); }
.pc__left { display: grid; align-content: start; gap: var(--s3); padding-right: var(--s3); }
.pc__stamped { font-family: var(--type); font-size: 26px; line-height: 1.1; }
.pc__msg { font-family: var(--type); font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.pc__state { font-size: var(--t-small); font-weight: 600; color: var(--red); min-height: calc(1.45em * 2); }
.pc__right { display: grid; align-content: start; gap: var(--s2); padding-left: var(--s3); }
.pc__to { font-family: var(--type); font-size: var(--t-label); }
.pc__addr { font-family: var(--type); font-size: var(--t-body); line-height: 1.45; overflow-wrap: anywhere; user-select: all; border-bottom: 2px solid rgba(17, 17, 17, .55); padding-bottom: var(--s1); min-height: calc(1.45em * 2 + 8px); }
.pc__input { font: 400 var(--t-body) var(--type); color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid rgba(17, 17, 17, .55); padding: var(--s1) 0; width: 100%; }
.pc__stamps { display: flex; gap: var(--s2); justify-content: flex-end; }
.stamp { width: 72px; height: 72px; display: grid; place-items: center; text-decoration: none; transition: transform .12s ease, filter .12s ease; }
.stamp--pump { border-image: url("/img/stamp-yellow.webp") 14 fill / 14px / 0 stretch; }
.stamp--dex { border-image: url("/img/stamp-cream.webp") 14 fill / 14px / 0 stretch; }
.stamp--x { border-image: url("/img/stamp-black.webp") 14 fill / 14px / 0 stretch; }
.stamp img { width: 34px; height: 34px; object-fit: contain; }
.stamp--x img { width: 30px; height: 30px; }
.stamp:hover, .stamp:focus-visible { transform: translateY(-2px) rotate(-2deg); }
.stamp:active { transform: translateY(1px); }
.stamp[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.postmark { width: 148px; height: 72px; border: 0; background: url("/img/postmark.webp") left center / contain no-repeat; font: 400 22px var(--type); color: var(--ink); cursor: pointer; padding: 0 0 0 4px; text-align: left; justify-self: start; transition: transform .12s ease; }
.postmark span { display: inline-block; width: 58px; margin-left: 2px; text-align: center; font-size: 20px; }
.postmark:hover, .postmark:focus-visible { transform: rotate(-3deg) scale(1.04); }
.postmark:active { transform: scale(.98); }
.postmark:disabled { opacity: .45; cursor: default; }

.postcard--front { border-image: url("/img/postcard-blank.webp") 28 fill / 28px / 0 stretch; padding: 22px 22px 18px; display: grid; grid-template-rows: auto 1fr; gap: var(--s3); }
.pc__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--yellow); }
.pc__photo img { width: 100%; height: 100%; object-fit: cover; }
.pc__photo .pc__photo--contain { object-fit: contain; padding: 6%; }
.postcard--step .pc__photo, .pc__photo--wide { aspect-ratio: 16 / 9; }
.postcard--step .pc__photo img { object-fit: contain; }
.pc__cap { font-size: var(--t-body); line-height: 1.45; text-wrap: pretty; }
.pc__cap b { font-weight: 800; }

/* ---------- screen 2: how ---------- */
.h2 { font-family: var(--display); font-weight: 900; font-size: var(--t-title); line-height: 1; text-align: center; margin-bottom: var(--s5); background: var(--yellow); display: table; padding: var(--s2) var(--s4); margin-left: auto; margin-right: auto; }
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.postcard--step { min-height: 100%; }

/* ---------- screen 3: album ---------- */
.album__note { text-align: center; font-weight: 600; margin-bottom: var(--s5); }
.album__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.album__grid:empty { display: none; }
.card { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; transition: transform .18s ease, filter .18s ease; font: inherit; color: inherit; }
.card:hover, .card:focus-visible { transform: scale(1.03) rotate(-.6deg); filter: drop-shadow(0 0 10px rgba(242, 208, 56, .9)); }
.card .postcard--front { height: 100%; }
.card .pc__cap { display: flex; justify-content: space-between; gap: var(--s2); font-weight: 700; }
.card .pc__n { font-family: var(--type); font-weight: 400; }
.postcard--find { margin-bottom: var(--s7); }
.h2--roll { margin-top: var(--s5); }
.roll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.roll__shot { border: 0; padding: 0; background: var(--cream); cursor: pointer; transition: transform .18s ease, filter .18s ease; aspect-ratio: 3 / 2; overflow: hidden; }
.roll__shot img, .roll__shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.roll__shot--clip { cursor: default; }
.roll__shot:hover, .roll__shot:focus-visible { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(242, 208, 56, .9)); }

/* ---------- keys ---------- */
.key { font: 700 var(--t-body) var(--text); min-height: var(--key); padding: 0 var(--s5); border: 0; cursor: pointer; text-decoration: none; display: inline-grid; place-items: center; transition: transform .12s ease, opacity .12s ease; }
.key--yellow { background: var(--yellow); color: var(--ink); }
.key--ink { background: var(--ink); color: var(--paper); }
.key:hover, .key:focus-visible { transform: translateY(-2px); }
.key:active { transform: translateY(1px); }

/* ---------- dialogs ---------- */
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; }
dialog::backdrop { background: rgba(17, 17, 17, .72); }
.cardview { width: min(920px, calc(100vw - 32px)); }
.cardview__flip { position: relative; perspective: 1600px; aspect-ratio: 920 / 700; margin-bottom: var(--s4); }
.cardview__face { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.cardview__face--back { transform: rotateY(180deg); }
.cardview__flip.is-back .cardview__face { transform: rotateY(180deg); }
.cardview__flip.is-back .cardview__face--back { transform: rotateY(360deg); }
.postcard--big.postcard--front { padding: 28px 28px 20px; grid-template-rows: 1fr auto; }
.postcard--big .pc__photo { aspect-ratio: 3 / 2; height: auto; min-height: 0; align-self: start; }
.postcard--big .pc__photo img { object-fit: contain; }
.postcard--big.postcard--back { min-height: 100%; }
.pc__traits { font-family: var(--type); font-size: var(--t-small); line-height: 1.5; color: var(--grey); }
.pc__recipients { list-style: none; margin: 0; padding: 0; font-family: var(--type); font-size: var(--t-small); line-height: 1.5; max-height: 220px; overflow: auto; overflow-wrap: anywhere; scrollbar-width: thin; }
.pc__recipients li { border-bottom: 1px solid rgba(17, 17, 17, .35); padding: 4px 0; display: flex; justify-content: space-between; gap: var(--s2); }
.cardview__keys { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.photoview { width: min(1200px, calc(100vw - 32px)); gap: var(--s3); justify-items: center; }
.photoview[open] { display: grid; }
dialog:not([open]) { display: none; }
.photoview img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.photoview__cap { font-weight: 700; background: var(--yellow); padding: var(--s1) var(--s3); text-align: center; }

/* ---------- arrival (the postcard flies out of the mailbox) ---------- */
.arrival { position: fixed; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 20; width: 220px; pointer-events: none; visibility: hidden; }
.arrival.is-on { visibility: visible; }
.arrival__box { width: 220px; }
.arrival__card { position: absolute; left: 50%; bottom: 60%; width: 360px; margin-left: -180px; transform: translateY(20px) rotateY(0) scale(.6); opacity: 0; }
.arrival.is-on .arrival__card { animation: flyout 2.6s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes flyout { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 30% { transform: translateY(-260px) scale(1); opacity: 1; } 100% { transform: translateY(-300px) scale(1); opacity: 1; } }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 30; background: var(--ink); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.intro[hidden] { display: none !important; }
.intro__video { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.intro__panel { background: var(--yellow); padding: var(--s4) var(--gutter); display: flex; gap: var(--s4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.intro__line { font-weight: 700; font-size: var(--t-body); max-width: 52ch; }
.intro__keys { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- sound dock ---------- */
.dock { position: fixed; left: var(--gutter); bottom: var(--s4); z-index: 21; display: flex; gap: var(--s2); align-items: center; }
.dock__vol { width: 120px; accent-color: var(--ink); }
.dock[hidden] { display: none !important; }

/* ---------- widths ---------- */
@media (max-width: 1500px) {
  :root { --t-display: 80px; }
  .screen--board { grid-template-columns: minmax(0, 1fr) 480px; }
  .postcard--back { min-height: 340px; }
}
@media (max-width: 1180px) {
  :root { --t-display: 72px; --gutter: 24px; }
  .screen--board { grid-template-columns: 1fr; grid-template-areas: "name" "leg" "map" "side"; }
  .side { grid-template-rows: auto auto; }
  .how, .album__grid, .roll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root { --t-display: 64px; --t-title: 32px; --gutter: 16px; --key: 52px; }
  .block { padding: var(--s4); }
  .block--name { grid-template-columns: 1fr; }
  .wordmark { grid-row: auto; }
  .marks { display: none; }
  .mapwrap { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .map { width: 900px; }
  .map__tip { font-size: var(--t-small); }
  .postcard--back { grid-template-columns: 1fr; row-gap: var(--s4); min-height: 0; padding: var(--s4); }
  .postcard--back::before { display: none; }
  .pc__left, .pc__right { padding: 0; }
  .pc__stamps { justify-content: flex-start; }
  .how, .album__grid, .roll { grid-template-columns: 1fr; }
  .stack img { width: 180px; height: 180px; }
  .cardview__flip { aspect-ratio: auto; height: 70vh; }
  .postcard--big.postcard--back { overflow: auto; }
  .dock { left: var(--gutter); bottom: var(--s3); }
  .dock__vol { display: none; }
  .intro__panel { padding: var(--s3) var(--gutter); }
  .intro__video { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) {
  .sky__map, .cloud, .map__cat, .map__vehicle { animation: none; }
  .arrival.is-on .arrival__card { animation: none; transform: translateY(-300px); opacity: 1; }
  .cardview__face, .bar__fill { transition: none; }
}