/* Travora — website styles. Identity (Task 4): "boarding pass" — cobalt + sun yellow, Bricolage Grotesque / Figtree /
   JetBrains Mono, tickets, postcards, departure board. Rules: CLAUDE.md "Design rules". */
:root {
  --cobalt: #1f43d8;
  --cobalt-deep: #10248a;
  --sun: #ffcb3d;
  --sun-deep: #f2b400;
  --coral: #ff5b3a;
  --cream: #fff7e6;
  --sky: #edf1ff;
  --white: #ffffff;
  --ink: #0c1230;
  --ink-2: #1b2350;
  --muted: #4b5578;
  --line: #d4dbf2;
  --board: #0b1026;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --sans: "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --nav-h: 72px;
  --r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* components set display:grid/flex, which would beat the UA [hidden] rule */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 400 17px/1.55 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--white); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ── Logo ── */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); margin: 0; }
.logo__mark { width: 44px; height: 44px; transform: rotate(-8deg); transition: transform .4s cubic-bezier(.3,1.6,.5,1); --mark-bg: var(--cream); --mark-sea: var(--cobalt); }
.logo:hover .logo__mark { transform: rotate(4deg) scale(1.06); }
.logo__word { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.045em; line-height: 1; display: inline-flex; align-items: baseline; }
.logo__o { width: .62em; height: .62em; margin: 0 .025em; align-self: baseline; transform: translateY(.03em); }
.logo--lg .logo__word { font-size: clamp(56px, 8vw, 104px); }
.logo--lg .logo__mark { width: clamp(64px, 8vw, 104px); height: clamp(64px, 8vw, 104px); }

/* ── Buttons & chips ── */
.btn { --notch: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 10px; font: 700 15px/1 var(--sans); text-decoration: none; cursor: pointer; color: var(--ink);
  transition: transform .18s, background .18s, box-shadow .18s;
  /* ticket notches on both sides */
  -webkit-mask: radial-gradient(circle var(--notch) at left center, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at right center, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at left center, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at right center, #0000 98%, #000) right / 51% 100% no-repeat; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn:active { transform: translateY(0); }
.btn--sun { background: var(--sun); box-shadow: inset 0 -3px 0 var(--sun-deep); }
.btn--sun:hover { background: #ffd663; }
.btn--ink { background: var(--ink); color: var(--sun); }
.btn--ink:hover { background: var(--ink-2); }
.btn--ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px rgba(255,247,230,.55); -webkit-mask: none; mask: none; border-radius: 999px; }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--cream); }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
/* Focus: the notch mask clips outlines, so draw the ring inside the button */
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.btn--ink:focus-visible { outline-color: var(--sun); }
.btn--ghost:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; box-shadow: inset 0 0 0 2px var(--cream); }
.chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px;
  font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--white); color: var(--cobalt); box-shadow: inset 0 0 0 1.5px var(--line); }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--cobalt); }
.chip--light { background: rgba(255,247,230,.12); color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(255,247,230,.35); }
.chip--light::before { box-shadow: none; }
.chip--ink { background: var(--ink); color: var(--sun); box-shadow: none; }
.chip--ink::before { box-shadow: none; }

/* ── Nav ── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--cobalt); color: var(--cream); transition: box-shadow .25s; }
.nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(12,18,48,.7); }
.nav__inner { max-width: var(--max); margin: 0 auto; height: var(--nav-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: 26px; }
.nav__links { position: relative; display: flex; gap: 24px; margin-left: 12px; }
.nav__links a { text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 0; color: rgba(255,247,230,.78); transition: color .15s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--cream); }
.nav__indicator { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; border-radius: 3px; background: var(--sun); opacity: 0;
  transition: transform .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1), opacity .2s; }
.nav__status { margin: 0 0 0 auto; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,247,230,.8); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,247,230,.45); }
.nav__status.is-open::before { background: #5cf08f; box-shadow: 0 0 0 3px rgba(92,240,143,.25); }
.nav__cta { min-height: 42px; }
.nav__burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .2s; }
.nav__burger span:first-child { top: 17px; } .nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ── Sections ── */
main > section { scroll-margin-top: var(--nav-h); overflow-x: clip; } /* tilted/rotating cards must not widen the page */
main > section:not(.hero) { padding: clamp(80px, 11vw, 140px) var(--gutter); }
.section-head, .rail, .tickets, .route, .badges, .book__form, .confirm { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 56px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px); align-items: end; }
.section-head > * { grid-column: 1; }
.section-head .chip { justify-self: start; }
.section-head h2 { font-size: clamp(40px, 6.2vw, 84px); position: relative; text-wrap: balance; }
.section-head p:not(.chip) { grid-column: 2; grid-row: 2; margin: 0 0 6px; color: var(--muted); max-width: 46ch; font-size: 18px; }

/* ── Hero ── */
.hero { position: relative; background: var(--cobalt); color: var(--cream); padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(90px, 10vw, 130px); overflow: hidden; }
.hero::before { /* faint map grid */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,247,230,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,247,230,.06) 1px, transparent 1px);
  background-size: 56px 56px; }
.hero__route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__route path { stroke: var(--sun); stroke-width: 2.5; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75; }
.plane { position: absolute; left: 0; top: 0; width: 48px; height: 37px; fill: var(--sun); pointer-events: none; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.hero__inner { position: relative; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.hero__inner > *, .book__form > * { min-width: 0; } /* grid items: let inner scrollers scroll instead of widening the page */
.hero h1 { font-size: clamp(52px, 8.2vw, 118px); line-height: .92; letter-spacing: -0.045em; max-width: 9.5ch; }
.hero h1 .w:nth-last-child(-n+2) > span { color: var(--sun); } /* "well spent." */
.lead { font-size: clamp(18px, 1.6vw, 21px); max-width: 46ch; margin: 28px 0 34px; color: rgba(255,247,230,.9); }
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero__facts { list-style: none; display: flex; gap: 10px; margin: 40px 0 0; padding: 0; flex-wrap: wrap; }
.hero__facts li { font: 500 13px/1 var(--mono); padding: 10px 14px; border-radius: 8px; background: rgba(255,247,230,.1); color: rgba(255,247,230,.85); }
.hero__facts b { color: var(--sun); font-weight: 700; }
.hero__side { position: relative; padding: 0 0 0 clamp(0px, 3vw, 40px); }
.window { position: relative; margin: 0 0 0 auto; width: min(78%, 360px); aspect-ratio: 3 / 4; border-radius: 46% / 36%; overflow: hidden;
  background: var(--cobalt-deep); box-shadow: 0 0 0 12px #2d52e6, 0 0 0 14px rgba(255,247,230,.25), 0 30px 60px -20px rgba(0,0,0,.5); transform: rotate(3deg); }
.window img { width: 100%; height: 100%; object-fit: cover; }
.board { position: relative; margin: -120px 0 0; background: var(--board); color: var(--cream); border-radius: var(--r); padding: 18px 18px 14px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06); font-family: var(--mono); }
.board__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,247,230,.2); }
.board__head h2 { font: 700 16px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.board__sub { font-size: 12px; color: rgba(255,247,230,.6); text-transform: uppercase; letter-spacing: .06em; }
.board__clock { margin-left: auto; font-size: 14px; color: var(--cream); font-variant-numeric: tabular-nums; }
.board__cols, .board__list li { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(92px, .9fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; }
.board__cols { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,247,230,.5); padding: 10px 0 4px; }
.board__list { list-style: none; margin: 0; padding: 0; }
.board__list li { padding: 8px 0; border-top: 1px solid rgba(255,247,230,.08); }
.flaps { display: inline-flex; gap: 2px; }
.flap { display: inline-grid; place-items: center; min-width: .95em; height: 1.55em; padding: 0 1px; border-radius: 3px; background: #161d3d;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); position: relative; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.55); }
.flap.is-spin { animation: flip .09s linear; }
@keyframes flip { 50% { transform: scaleY(.2); } }
.board__day .flap, .board__who .flap { font-size: 12.5px; color: var(--cream); }
.board__time .flap { font-size: 17px; font-weight: 700; color: var(--sun); }
.board__who { overflow: hidden; }
.board__list .btn { min-height: 34px; padding: 0 14px; font-size: 13px; --notch: 5px; }
.board__empty { display: block !important; color: rgba(255,247,230,.7); font-size: 14px; }
.board__foot { margin: 10px 0 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,247,230,.55); }
.tear { /* perforated ticket edge into the next section */ position: absolute; left: 0; right: 0; bottom: -1px; height: 18px;
  background: radial-gradient(circle at 12px 18px, var(--sky) 9px, transparent 9.5px) 0 0 / 24px 18px repeat-x; }

/* ── Destinations: postcard rail ── */
.journeys { background: var(--sky); }
.rail__track { list-style: none; margin: 0; padding: 18px 4px 34px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 320px); gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
.postcard { scroll-snap-align: start; position: relative; background: var(--white); padding: 12px 12px 18px; border-radius: 6px;
  box-shadow: 0 1px 0 var(--line), 0 18px 34px -22px rgba(12,18,48,.45); transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .35s; }
.postcard:hover, .postcard:focus-within { transform: rotate(0deg) translateY(-8px); box-shadow: 0 1px 0 var(--line), 0 30px 44px -24px rgba(12,18,48,.55); }
.postcard__img { margin: 0 0 16px; aspect-ratio: 4 / 4.4; overflow: hidden; border-radius: 3px; background: var(--line); }
.postcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.postcard:hover .postcard__img img { transform: scale(1.05); }
.stamp { position: absolute; top: 22px; right: 22px; font: 700 11px/1.25 var(--mono); letter-spacing: .06em; color: var(--cobalt); background: var(--sun);
  padding: 8px 9px; border-radius: 4px; transform: rotate(6deg); box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--sun); text-align: center; }
.postcard h3 { font-size: 30px; padding: 0 6px; }
.postcard p { margin: 8px 6px 0; color: var(--muted); font-size: 15.5px; }
.postcard__meta { font: 500 13px/1.3 var(--mono) !important; color: var(--ink) !important; }
.postcard__cta { margin: 14px 6px 0; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 700; color: var(--cobalt); font-size: 15px;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--sun); }
.postcard__cta:hover { color: var(--ink); }
.rail__nav { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rail__btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--white); color: var(--cobalt); font-size: 20px; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line); transition: background .15s, color .15s, transform .15s; }
.rail__btn:hover:not(:disabled) { background: var(--cobalt); color: var(--white); transform: scale(1.06); }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail__note { margin: 0 0 0 12px; color: var(--muted); font-size: 15px; }

/* ── Sessions: tickets ── */
.sessions { background: var(--sun); }
.sessions .section-head p:not(.chip) { color: var(--ink-2); }
.tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ticket { --notch: 14px; --stub: 150px; display: grid; grid-template-columns: 1fr var(--stub); background: var(--white); border-radius: 16px; transition: transform .3s cubic-bezier(.3,1.4,.5,1);
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); }
.ticket__main { padding: 26px 26px 24px; }
.ticket__code { font: 700 12px/1 var(--mono); letter-spacing: .1em; color: var(--cobalt); text-transform: uppercase; }
.ticket h3 { font-size: 30px; margin: 10px 0 10px; }
.ticket p { margin: 0; color: var(--muted); font-size: 15.5px; }
.ticket__stub { border-left: 2px dashed var(--line); padding: 26px 18px 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; background: var(--cream); }
.ticket__len { font: 500 13px/1 var(--mono); color: var(--muted); }
.ticket__price { font: 800 30px/1 var(--display); letter-spacing: -0.03em; }
.ticket__price.is-free { color: var(--cobalt); }
.ticket .btn { min-height: 38px; padding: 0 16px; font-size: 14px; --notch: 5px; white-space: nowrap; }

/* ── How it works: route ── */
.how { background: var(--cobalt-deep); color: var(--cream); }
.how .chip--light { color: var(--sun); }
.route { position: relative; }
.route__line { position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 40px; overflow: visible; }
.route__line path { stroke: var(--sun); stroke-width: 3; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1); }
.route.is-in .route__line path { stroke-dashoffset: 0; }
.route__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.stop__code { display: inline-grid; place-items: center; min-width: 76px; height: 76px; padding: 0 10px; border-radius: 50%; background: var(--sun); color: var(--ink);
  font: 700 15px/1 var(--mono); letter-spacing: .06em; box-shadow: 0 0 0 8px var(--cobalt-deep); }
.stop:nth-child(even) .stop__code { background: var(--cream); }
.stop h3 { font-size: 26px; margin: 24px 0 10px; }
.stop p { margin: 0; color: rgba(255,247,230,.78); }

/* ── Crew: badges ── */
.planners { background: var(--sky); }
.badges { list-style: none; margin: 0 auto; padding: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.badge { max-width: 420px; width: 100%; justify-self: center; position: relative; background: var(--white); border-radius: 18px; padding: 34px 20px 22px; text-align: center; transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 1px 0 var(--line), 0 24px 40px -28px rgba(12,18,48,.5); transform-origin: 50% -40px; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.badge:nth-child(1) { --tilt: -2deg; } .badge:nth-child(2) { --tilt: 1.5deg; margin-top: 26px; } .badge:nth-child(3) { --tilt: -1deg; }
.badge:hover { transform: rotate(0deg); }
.badge__band { position: absolute; left: 0; right: 0; top: 0; height: 104px; border-radius: 18px 18px 0 0; background: var(--cobalt); }
.badge:nth-child(2) .badge__band { background: var(--coral); } .badge:nth-child(3) .badge__band { background: var(--ink); }
.badge::before { /* lanyard slot */ content: ""; position: absolute; z-index: 2; top: 12px; left: 50%; width: 46px; height: 8px; margin-left: -23px; border-radius: 8px; background: var(--sky); box-shadow: inset 0 1px 2px rgba(12,18,48,.3); }
.badge__photo { position: relative; z-index: 1; width: 132px; height: 132px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; background: var(--line); box-shadow: 0 0 0 6px var(--white); }
.badge__photo img { width: 100%; height: 100%; object-fit: cover; }
.badge__initials { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sun); color: var(--ink); font: 800 46px/1 var(--display); letter-spacing: -0.03em; }
.badge h3 { font-size: 28px; }
.badge__focus { margin: 8px 0 0; color: var(--muted); }
.badge__meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; padding: 0; list-style: none; }
.badge__meta li { font: 500 12px/1 var(--mono); padding: 8px 10px; border-radius: 6px; background: var(--sky); color: var(--ink-2); }
.badge .btn { min-height: 40px; font-size: 14px; }

/* ── Booking ── */
.book { background: var(--sky); }
.book__form { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.field { border: 0; margin: 0 0 32px; padding: 0; min-width: 0; }
.field legend { display: flex; align-items: center; gap: 10px; font: 800 24px/1 var(--display); letter-spacing: -0.02em; margin-bottom: 14px; padding: 0; }
.legend-code { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cobalt); color: var(--sun); font: 700 13px/1 var(--mono); }
.legend-note { font: 500 13px/1 var(--mono); color: var(--muted); margin-left: 4px; }
.options { display: grid; gap: 8px; }
.options--inline { display: flex; flex-wrap: wrap; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt > span { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 16px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .15s, background .15s, transform .15s; }
.opt small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.opt b { font-weight: 700; }
.opt i { font: 500 13px/1.4 var(--mono); font-style: normal; color: var(--muted); }
.opt:hover > span { box-shadow: inset 0 0 0 2px var(--cobalt); }
.opt input:checked + span { background: var(--cobalt); color: var(--cream); box-shadow: none; transform: translateY(-2px); }
.opt input:checked + span small, .opt input:checked + span i { color: rgba(255,247,230,.8); }
.opt input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.options--inline .opt > span { display: flex; flex-direction: column; min-width: 140px; font-weight: 600; }

.days { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.day { flex: 0 0 66px; border: 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); padding: 9px 0; text-align: center; cursor: pointer; line-height: 1.15; transition: transform .15s; }
.day b { display: block; font: 800 24px/1.1 var(--display); }
.day small { font: 500 11px/1 var(--mono); text-transform: uppercase; color: var(--muted); }
.day:hover:not(:disabled) { transform: translateY(-2px); }
.day[aria-checked="true"] { background: var(--sun); box-shadow: inset 0 0 0 2px var(--ink); }
.day[aria-checked="true"] small { color: var(--ink); }
.day:disabled { cursor: not-allowed; opacity: .4; background: transparent; }
.times { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.time { min-width: 80px; min-height: 42px; border: 0; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; font: 700 15px/1 var(--mono); animation: chip-in .3s both; }
.time:hover { box-shadow: inset 0 0 0 2px var(--cobalt); }
.time[aria-checked="true"] { background: var(--ink); color: var(--sun); box-shadow: none; }
.times__empty { color: var(--muted); margin: 8px 0; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* boarding pass (live summary + details form, and the confirmation) */
.pass { background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(12,18,48,.55); }
.book__details { position: sticky; top: calc(var(--nav-h) + 20px); }
.pass__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--cobalt); color: var(--cream); font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pass__mark { width: 30px; height: 30px; transform: rotate(-8deg); --mark-bg: var(--cream); --mark-sea: var(--cobalt); }
.pass__class { margin-left: auto; color: var(--sun); }
.pass__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; margin: 0; padding: 18px 18px 16px; border-bottom: 2px dashed var(--line); }
.pass__grid div { min-width: 0; }
.pass__grid dt, .pass__grid .k { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pass__grid dd, .pass__grid .v { margin: 0; font: 800 17px/1.15 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pass__grid .v.is-empty { color: #aab2cf; }
.pass__grid .wide { grid-column: span 2; }
.pass__form { padding: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input { display: block; margin-bottom: 12px; }
.input span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.input em { font-style: normal; color: var(--muted); font-weight: 400; }
.input input, .input textarea { width: 100%; border: 0; border-radius: 10px; background: var(--sky); padding: 12px 13px; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, background .15s; }
.input input:focus, .input textarea:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 2px var(--cobalt); }
.input input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--coral); background: #fff1ee; }
.form-error { color: #c23016; margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.form-error:empty { display: none; }
.fine { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

.confirm .pass { max-width: 860px; }
.pass--done { margin-bottom: 24px; }
.pass__body { display: grid; grid-template-columns: 1fr 220px; }
.pass__main { padding: 26px 24px 8px; }
.pass__main h3 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 18px; }
.pass--done .pass__grid { padding: 0 0 20px; border: 0; }
.pass__stub { border-left: 2px dashed var(--line); padding: 26px 22px; background: var(--cream); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.confirm__code { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.confirm__code strong { display: block; margin-top: 6px; font: 800 30px/1 var(--display); letter-spacing: .02em; color: var(--ink); }
.barcode { height: 64px; border-radius: 3px; }

/* ── Footer ── */
.studio { background: var(--board); color: var(--cream); padding: 88px var(--gutter) 32px; }
.studio__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2.2fr 1.1fr 1.1fr 1.1fr; gap: 36px; }
.studio .logo { color: var(--cream); margin-bottom: 18px; }
.studio__line { color: rgba(255,247,230,.65); max-width: 34ch; margin: 0; }
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.social a { display: inline-block; padding: 8px 12px; border-radius: 999px; font: 500 13px/1 var(--mono); text-decoration: none; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(255,247,230,.3); transition: background .15s, color .15s; }
.social a:hover { background: var(--sun); color: var(--ink); box-shadow: none; }
.studio__h { font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); margin-bottom: 14px; }
.studio address { font-style: normal; }
.studio p { margin: 0; }
.studio a { text-underline-offset: 3px; }
.hours { border-collapse: collapse; }
.hours th, .hours td { white-space: nowrap; }
.hours th { text-align: left; font-weight: 400; padding: 0 18px 5px 0; color: rgba(255,247,230,.65); }
.hours td { padding: 0 0 5px; font-family: var(--mono); font-size: 15px; }
.studio__small { max-width: var(--max); margin: 64px auto 0 !important; padding-top: 22px; border-top: 1px dashed rgba(255,247,230,.18); font-size: 13px; color: rgba(255,247,230,.5); }

/* ── Motion (every text block and image animates once as it enters; see logic.md §2) ──
   Classes are added by main.js §3 (never in HTML), so without JS everything is simply visible.
   --d = batch stagger delay set by JS; --i = word index inside a heading. */
.split .w, .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); animation: word-up 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes word-up { to { transform: none; } }
.words .w > span { display: inline-block; transform: translateY(110%) rotate(4deg);
  transition: transform .95s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 60ms); }
.words.is-in .w > span { transform: none; }
.rise { opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.rise.is-in { opacity: 1; transform: none; }
.postcard.rise { transform: translateY(40px) rotate(calc(var(--tilt, 0deg) * 3)); }
.postcard.rise.is-in { transform: rotate(var(--tilt, 0deg)); transition: opacity .8s, transform .9s cubic-bezier(.3,1.4,.5,1), box-shadow .35s; transition-delay: var(--d, 0ms); }
.postcard.rise.is-in:hover, .postcard.rise.is-in:focus-within { transform: rotate(0deg) translateY(-8px); transition-delay: 0ms; }
.badge.rise { transform: translateY(-60px) rotate(calc(var(--tilt) * -4)); }
.badge.rise.is-in { transform: rotate(var(--tilt)); transition: opacity .6s, transform 1.1s cubic-bezier(.3,1.6,.5,1); transition-delay: var(--d, 0ms); }
.badge.rise.is-in:hover { transform: rotate(0deg); transition-delay: 0ms; }
.ticket.rise { transform: translateX(-40px) rotate(-2deg); }
.ticket.rise.is-in { transform: none; transition: opacity .7s, transform .9s cubic-bezier(.3,1.3,.5,1); transition-delay: var(--d, 0ms); }
.ticket.rise.is-in:hover { transform: translateY(-4px) rotate(-.4deg); transition-delay: 0ms; }
.stop.rise .stop__code { transform: scale(.3); transition: transform .7s cubic-bezier(.3,1.8,.5,1); transition-delay: calc(var(--d, 0ms) + 300ms); }
.stop.rise.is-in .stop__code { transform: none; }
.panel-in { opacity: 0; transform: translateY(50px) rotate(-2deg);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.3,1.3,.5,1); transition-delay: calc(var(--d, 0ms) + 400ms); }
.panel-in.is-in { opacity: 1; transform: none; }
/* images: curtain wipe + slow settle from zoom; the plane window opens like a shade; crew photos iris open */
.img-in { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); transition-delay: var(--d, 0ms); }
.img-in.is-in { clip-path: inset(0 0 0 0); }
.img-in img { transform: scale(1.15); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.img-in.is-in img { transform: scale(1); }
.postcard__img.img-in { transition-delay: calc(var(--d, 0ms) + 150ms); }
.window.img-in { clip-path: none; }
.window.img-in::after { content: ""; position: absolute; inset: 0; background: #cfd6ee; transform-origin: top; transition: transform 1.3s cubic-bezier(.7,0,.2,1) .3s; }
.window.img-in.is-in::after { transform: scaleY(0); }
.badge__photo.img-in { clip-path: circle(0% at 50% 50%); transition: clip-path 1s cubic-bezier(.6,0,.2,1); transition-delay: calc(var(--d, 0ms) + 250ms); }
.badge__photo.img-in.is-in { clip-path: circle(50% at 50% 50%); }

/* nav slides down on load, then its items */
.nav { animation: nav-in .8s cubic-bezier(.2,.7,.2,1) both; }
.nav__inner > * { animation: fade-down .7s cubic-bezier(.2,.7,.2,1) both; }
.nav__inner > :nth-child(2) { animation-delay: .1s; } .nav__inner > :nth-child(3) { animation-delay: .2s; }
.nav__inner > :nth-child(4) { animation-delay: .3s; } .nav__inner > :nth-child(5) { animation-delay: .3s; }
@keyframes nav-in { from { transform: translateY(-100%); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } }

/* section heading gets a sun underline swipe when a nav scroll lands on it */
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: -14px; height: 6px; width: 90px; border-radius: 6px; background: var(--sun);
  transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.sessions .section-head h2::after { background: var(--ink); }
.is-arrived .section-head h2::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .panel-in, .words .w > span, .split .w > span, .img-in img, .stop__code { opacity: 1 !important; transform: none !important; }
  .img-in, .badge__photo.img-in { clip-path: none !important; }
  .window.img-in::after, .plane { display: none; }
  .route__line path { stroke-dashoffset: 0; }
}

/* ── Floating contact button (Task 17) — speed dial of ticket tags; one-shot transitions only, no pulse/loop ── */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.fab > * { pointer-events: auto; }
.fab__btn { position: relative; width: 60px; height: 60px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--sun); color: var(--ink); box-shadow: inset 0 -4px 0 var(--sun-deep), 0 10px 24px -8px rgba(12,18,48,.55), 0 0 0 3px var(--ink);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .18s, opacity .3s; }
.fab__btn:hover { background: #ffd663; transform: translateY(-2px) rotate(-6deg); }
.fab__btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.fab__btn svg { position: absolute; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.fab__close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.fab.is-open .fab__open { opacity: 0; transform: rotate(90deg) scale(.6); }
.fab.is-open .fab__close { opacity: 1; transform: none; }
.fab.is-open .fab__btn { background: var(--ink); color: var(--sun); box-shadow: 0 10px 24px -8px rgba(12,18,48,.55), 0 0 0 3px var(--sun); transform: none; }
/* first appearance: slides up once after load (class added by JS) */
.fab--pre .fab__btn { opacity: 0; transform: translateY(24px) scale(.8); }

.fab__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab__menu li { opacity: 0; transform: translateY(14px) rotate(2deg); visibility: hidden;
  transition: opacity .2s, transform .28s cubic-bezier(.3,1.5,.5,1), visibility 0s .28s; }
.fab.is-open .fab__menu li { opacity: 1; transform: none; visibility: visible; transition-delay: calc(var(--k, 0) * 45ms), calc(var(--k, 0) * 45ms), 0s; }
.fab__menu li:nth-last-child(1) { --k: 0; } .fab__menu li:nth-last-child(2) { --k: 1; }
.fab__menu li:nth-last-child(3) { --k: 2; } .fab__menu li:nth-last-child(4) { --k: 3; }
/* each action is a luggage-tag ticket: ink label with notches + a coloured icon disc */
.fab__item { --notch: 6px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; min-height: 52px; border-radius: 12px;
  background: var(--ink); color: var(--cream); text-decoration: none; box-shadow: 0 10px 22px -10px rgba(12,18,48,.6);
  -webkit-mask: radial-gradient(circle var(--notch) at left center, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at right center, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at left center, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at right center, #0000 98%, #000) right / 51% 100% no-repeat;
  transition: transform .18s, background .18s; }
.fab__item:hover { background: var(--ink-2); transform: translateX(-3px) rotate(-1deg); }
.fab__item:focus-visible { outline: 3px solid var(--sun); outline-offset: -5px; }
.fab__label { font: 700 12.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fab__num { display: block; font-weight: 500; letter-spacing: .02em; color: var(--sun); text-transform: none; }
.fab__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-right: 6px; }
.fab__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fab__ic--sun { background: var(--sun); }
.fab__ic--sun svg { width: 30px; height: 30px; transform: rotate(-8deg); --mark-bg: var(--cobalt); --mark-sea: var(--cream); }
.fab__ic--wa { background: #25d366; color: var(--white); }
.fab__ic--wa svg { stroke: none; }
.fab__ic--cobalt { background: var(--cobalt); color: var(--cream); }
.fab__ic--coral { background: var(--coral); color: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .fab__btn, .fab__btn svg, .fab__menu li, .fab__item { transition: none; }
  .fab__menu li { transform: none; }
  .fab--pre .fab__btn { opacity: 1; transform: none; }
}

/* ── Responsive ── */
@media (max-width: 1140px) {
  .board__day .flap, .board__who .flap { font-size: 11.5px; } .board__time .flap { font-size: 16px; }
  .nav__status { display: none; }
  .nav__cta { margin-left: auto; }
  .tickets { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__links { position: fixed; inset: var(--nav-h) 0 auto; margin: 0; flex-direction: column; gap: 0; background: var(--cobalt);
    padding: 8px var(--gutter) 18px; clip-path: inset(0 0 100% 0); transition: clip-path .35s cubic-bezier(.6,0,.2,1); box-shadow: 0 20px 30px -20px rgba(0,0,0,.5); }
  .nav__links.is-open { clip-path: inset(0 0 0 0); }
  .nav__links a { padding: 15px 0; font: 800 24px/1 var(--display); color: var(--cream); border-bottom: 1px dashed rgba(255,247,230,.2); }
  .nav__indicator { display: none; }
  .hero__inner, .book__form, .section-head { grid-template-columns: 1fr; }
  .section-head p:not(.chip) { grid-column: 1; grid-row: auto; margin-top: 28px; }
  .hero__side { padding: 0; max-width: 560px; }
  .window { width: 62%; margin-right: 4%; }
  .route__line { display: none; }
  .route__stops { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .badges { grid-template-columns: 1fr; max-width: 420px; }
  .badge:nth-child(2) { margin-top: 0; }
  .book__details { position: static; }
  .studio__grid { grid-template-columns: 1fr 1fr; }
  .studio__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .logo__word { font-size: 26px; } .logo__mark { width: 38px; height: 38px; }
  .grid2 { grid-template-columns: 1fr; }
  .window { width: 70%; }
  .board { margin-top: -80px; padding: 14px 12px 12px; }
  .board__cols { display: none; }
  .board__list li { grid-template-columns: auto 1fr auto; grid-template-areas: "time who btn" "day who btn"; gap: 2px 12px; }
  .board__time { grid-area: time; } .board__day { grid-area: day; } .board__who { grid-area: who; } .board__list .btn { grid-area: btn; }
  .ticket { --stub: 128px; }
  .ticket .btn { padding: 0 12px; }
  .chip { border-radius: 12px; line-height: 1.35; }
  .ticket__main { padding: 20px 18px; }
  .ticket h3 { font-size: 24px; }
  .ticket__stub { padding: 20px 12px; }
  .ticket__price { font-size: 24px; }
  .route__stops { grid-template-columns: 1fr; }
  .rail__track { grid-auto-columns: 78%; }
  .rail__note { display: none; }
  .pass__grid { grid-template-columns: 1fr 1fr; }
  .pass__body { grid-template-columns: 1fr; }
  .pass__stub { border-left: 0; border-top: 2px dashed var(--line); }
  .studio__grid { grid-template-columns: 1fr; }
  .options--inline .opt { flex: 1 1 140px; }
  .fab__btn { width: 56px; height: 56px; }
  .studio { padding-bottom: 96px; } /* last footer line clears the floating button */
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero__route path { animation: route-in 1.2s .3s both; }
@keyframes route-in { from { opacity: 0; } }