/* RoadTales — travel-poster look, shared with the app (ios/.../Theme.swift). */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/BigShouldersDisplay.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --teal: #1F4E5F;
  --teal-deep: #163A47;
  --pine: #2F5D50;
  --terracotta: #C9573A;
  --terracotta-deep: #B44A2F;
  --rust: #8E3B26;
  --ochre: #E8A33D;
  --ochre-light: #F2BC62;
  --sand: #E8C9A0;
  --night: #2A3E57;
  --paper: #F3EBDD;
  --paper-light: #FBF6EC;
  --ink: #1B2A33;
  --muted: #4A5359;
  --rule: #D9CCB6;
  --outline: #CDBFA6;
  --label: #A2432A;

  --poster: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Figtree", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  margin: 0;
  font: 700 13px/1.3 var(--text);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--label);
}
.poster-title {
  margin: 0;
  font-family: var(--poster);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .005em;
}

/* ---------- Top bar ---------- */

.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--paper); text-decoration: none;
  font: 800 26px/1 var(--poster); letter-spacing: .06em; text-transform: uppercase;
}
.brand:hover { color: var(--paper); }
.brand svg { width: 36px; height: 36px; flex: none; }
.top nav { margin-left: auto; display: flex; gap: 6px; }
.top nav a {
  color: var(--paper); text-decoration: none;
  font-weight: 600; font-size: 16px;
  padding: 10px 14px; border-radius: 12px;
}
.top nav a:hover, .top nav a[aria-current] { background: rgba(243, 235, 221, .14); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--teal);
  color: var(--paper);
}
.hero-scene {
  position: absolute; inset: auto 0 0 0;
  width: 100%; height: 62%;
}
.hero-body {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: start;
  padding-top: clamp(24px, 6vw, 72px);
  padding-bottom: 0;
}
.hero .eyebrow { color: var(--ochre-light); }
.hero h1 {
  margin-top: 14px;
  font-size: clamp(56px, 10vw, 128px);
  color: var(--paper);
}
.hero .lede {
  max-width: 34ch;
  margin: 22px 0 0;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--paper);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; }
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 26px; border-radius: 16px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 18px; text-decoration: none;
}
.cta svg { width: 18px; height: 18px; flex: none; }
.cta[aria-disabled="true"] { cursor: default; }
.cta-note { margin: 0; font-size: 15px; font-weight: 600; color: var(--paper); }

.phone {
  width: min(100%, 330px);
  justify-self: center;
  margin-bottom: -150px;
  border: 10px solid var(--ink);
  border-radius: 52px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(22, 58, 71, .55);
  aspect-ratio: 1320 / 2868;
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.hero-spacer { height: clamp(150px, 20vw, 230px); }

/* ---------- Sections ---------- */

section { padding: clamp(64px, 9vw, 112px) 0; }
section + section { border-top: 1px solid var(--rule); }
.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(42px, 6vw, 72px); margin-top: 10px; }
.section-head p:not(.eyebrow) { margin: 18px 0 0; color: var(--muted); font-size: 19px; max-width: 56ch; }

.after-hero { padding-top: 190px; }

/* How it works */
.steps {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  counter-reset: step;
}
.steps li {
  background: var(--paper-light);
  border: 1.5px solid var(--outline);
  border-radius: 20px;
  padding: 26px 24px 28px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  font: 800 64px/1 var(--poster);
  color: var(--terracotta);
}
.steps h3 { margin: 10px 0 6px; font-size: 21px; line-height: 1.3; }
.steps p { margin: 0; color: var(--muted); font-size: 17px; }

/* Kinds of story — the journal's colour bars */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.journal { list-style: none; margin: 0; padding: 0; }
.journal li {
  display: flex; gap: 18px; align-items: stretch;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.journal li:first-child { border-top: 1px solid var(--rule); }
.journal .bar { flex: none; width: 7px; border-radius: 4px; }
.journal b { display: block; font-size: 19px; line-height: 1.35; }
.journal span { display: block; color: var(--muted); font-size: 16px; }

/* Feature tickets */
.tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.ticket {
  display: flex; flex-direction: column;
  background: var(--paper-light);
  border: 1.5px solid var(--outline);
  border-radius: 20px; overflow: hidden;
}
.ticket .stub {
  padding: 18px 24px;
  color: var(--paper-light);
  font: 800 30px/1 var(--poster); text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 2px dashed var(--paper);
}
.ticket p { margin: 0; padding: 20px 24px 26px; font-size: 17px; color: var(--ink); }

/* Night band */
.night {
  position: relative; overflow: hidden;
  background: var(--night); color: var(--paper);
  border-top: 0;
  padding-bottom: 0;
}
.night .wrap { position: relative; z-index: 1; }
.night .eyebrow { color: var(--ochre); }
.night h2 { font-size: clamp(46px, 7vw, 92px); margin-top: 12px; max-width: 12ch; }
.night p { max-width: 46ch; margin: 20px 0 0; font-size: 19px; }
.night-scene { width: 100%; height: clamp(160px, 22vw, 260px); margin-top: 24px; }

/* ---------- Text pages ---------- */

.banner { position: relative; background: var(--teal); overflow: hidden; }
.banner svg.scene { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.banner .wrap { position: relative; z-index: 1; padding-bottom: clamp(90px, 12vw, 150px); }

.page { max-width: 760px; padding-top: clamp(40px, 6vw, 64px); padding-bottom: 72px; }
.page h1 { font-size: clamp(52px, 8vw, 88px); }
.page .lede { font-size: 20px; line-height: 1.55; margin: 20px 0 0; }
.page .note { color: var(--muted); font-size: 16px; }
.page h2 {
  margin: 48px 0 10px;
  font: 800 34px/1 var(--poster); text-transform: uppercase; letter-spacing: .01em;
}
.page p, .page li { font-size: 18px; }
.page ul { padding-left: 1.2em; }
.page li { margin: 8px 0; }
.page li::marker { color: var(--terracotta); }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1.5px solid var(--outline); border-radius: 16px; background: var(--paper-light); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
th { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Footer ---------- */

footer.site {
  background: var(--ink); color: var(--paper);
  padding: 44px 0 52px; font-size: 15px;
}
footer.site .wrap { display: grid; gap: 16px; }
footer.site a { color: var(--ochre-light); }
footer.site .fine { color: #B9C2C7; max-width: 70ch; margin: 0; }
footer.site .links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .hero-body { grid-template-columns: 1fr; }
  .hero-scene { height: 52%; }
  .hero-spacer { display: none; }
  .phone { width: min(78%, 300px); margin-top: 8px; margin-bottom: -130px; }
  .after-hero { padding-top: 170px; }
  .steps, .tickets, .split { grid-template-columns: 1fr; }
  .top nav a { padding: 10px; font-size: 15px; }
}
@media (max-width: 420px) {
  .brand { font-size: 22px; gap: 8px; }
  .brand svg { width: 32px; height: 32px; }
  .top nav { gap: 0; }
  .top nav a { padding: 10px 8px; }
  .cta { padding: 0 20px; font-size: 17px; }
}
@media (max-width: 340px) {
  .brand { font-size: 0; }   /* the mark alone; the link keeps its aria-label */
}
@media (prefers-reduced-motion: no-preference) {
  .phone { transition: transform .4s ease; }
  .phone:hover { transform: translateY(-4px); }
}

/* On the short banner the sun sits low, peeking over the hills, instead of
   rising behind the nav. */
.banner svg.scene circle { transform: translateY(70px); }