/* ==========================================================================
   #igotXERFed, the journey. ONE SCROLLING PAGE, not a deck.
   Everything here is progressive: the page reads correctly with no CSS animation,
   with JavaScript off, and with prefers-reduced-motion set. Motion is decoration.
   ========================================================================== */
:root {
  --coral:#F06C68; --coral-deep:#E2524E; --blush:#FBB7AF; --ink:#161213; --paper:#FBF5F2;
  --body:#5E5350; --mute:#8D817E; --line:#F3DCD9;
  --measure: 34rem;                 /* reading width */
  --gutter: clamp(1rem, 5vw, 3rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.05rem + .25vw, 20px); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img, video, svg { max-width:100%; height:auto; display:block; }
a { color:var(--coral-deep); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--ink); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:var(--gutter); top:1rem; background:var(--ink); color:var(--paper); padding:.6rem 1rem; border-radius:8px; z-index:99; }

h1, h2, h3 { font-family:'Source Serif 4', Georgia, serif; font-weight:700; line-height:1.1; letter-spacing:-.01em; margin:0 0 .6em; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); }
h3 { font-size:1.15rem; letter-spacing:.02em; }
p { margin:0 0 1.1em; }
b { font-weight:600; }

.eyebrow { font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:var(--coral-deep); font-weight:500; margin-bottom:.8em; }
.muted { color:var(--mute); }
.lede { font-size:1.22em; line-height:1.5; }
.also { font-size:.92em; color:var(--body); border-top:1px solid var(--line); padding-top:1em; margin-top:1.6em; }
.fine { font-size:.85em; color:var(--mute); line-height:1.55; margin-top:2em; }

/* ---------- the spine: a column of readable text with art breaking out of it ---------- */
.chapter { padding: clamp(3rem, 9vw, 7rem) var(--gutter); max-width:72rem; margin:0 auto; }
.chapter .beat { max-width:var(--measure); margin-inline:auto; }
.chapter.narrow { max-width:56rem; }
.chapter p { color:var(--body); }
.chapter h2 { color:var(--ink); }

figure.art { margin: clamp(2rem, 5vw, 3.5rem) auto; max-width:var(--measure); text-align:center; }
figure.art.wide { max-width:46rem; }
figure.art img.sketch, figure.art video.clip { margin-inline:auto; }
figure.art img.photo { border-radius:14px; box-shadow:0 18px 50px rgba(122,74,66,.18); margin-inline:auto; }
figcaption { font-size:.85rem; color:var(--mute); margin-top:.9em; }
video.clip { background:transparent; mix-blend-mode:multiply; }   /* the clips are ink on white */

/* ---------- hero ---------- */
.hero {
  min-height: min(92svh, 760px); display:grid; align-content:center; gap:2rem;
  grid-template-columns: 1fr; padding: clamp(3rem,10vh,6rem) var(--gutter) 3rem;
  max-width:72rem; margin:0 auto; position:relative;
}
.hero .kicker { font-size:.75rem; letter-spacing:.28em; text-transform:uppercase; color:var(--mute); margin-bottom:1.4em; }
.hero h1 { font-family:'Jost', sans-serif; font-weight:700; font-size: clamp(2.8rem, 1.5rem + 8vw, 7rem); letter-spacing:-.02em; margin:0; }
.hero h1 .hash { color:var(--coral); }
.hero h1 b { color:var(--coral-deep); font-weight:700; letter-spacing:.01em; }
.hero .sub { font-family:'Source Serif 4', Georgia, serif; font-style:italic; font-size: clamp(1.15rem, .9rem + 1.1vw, 1.7rem); color:var(--body); max-width:30rem; margin:1.2em 0 0; line-height:1.35; }
.hero .byline { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:2.2em; }
.hero-art { justify-self:center; }
.hero-art video { width: clamp(180px, 42vw, 330px); }
.scrollcue { position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); margin:0; }
.scrollcue::after { content:""; display:block; width:1px; height:26px; margin:.6em auto 0; background:linear-gradient(var(--mute), transparent); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.15fr .85fr; align-items:center; gap:3rem; }
  .hero-art { justify-self:end; }
}

/* ---------- comparison cards ---------- */
.cards { display:grid; gap:1.2rem; max-width:52rem; margin: clamp(2rem,5vw,3rem) auto; }
@media (min-width: 760px) { .cards { grid-template-columns:1fr 1fr; } }
.card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem 1.8rem; box-shadow:0 14px 40px rgba(122,74,66,.08); }
.card h3 { color:var(--coral-deep); letter-spacing:.2em; text-transform:uppercase; font-family:'Jost',sans-serif; font-size:.8rem; font-weight:600; }
.card p { color:var(--body); margin-bottom:.7em; }
.card p:last-child { margin-bottom:0; }

/* ---------- the review scorecard ---------- */
.score { max-width:52rem; margin: clamp(2rem,5vw,3rem) auto; }
.score .row { display:grid; grid-template-columns:1fr; gap:.2rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.score .row:last-child { border-bottom:0; }
.score .tag { font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--mute); }
.score .row.good .tag { color:#3E8E5E; }
.score .row.bad .tag { color:var(--coral-deep); }
.score p { margin:0; color:var(--body); }
@media (min-width: 700px) { .score .row { grid-template-columns:9rem 1fr; gap:1.6rem; align-items:baseline; } }
.verdict { font-family:'Source Serif 4', Georgia, serif; font-style:italic; font-size:1.15em; color:var(--coral-deep); border-left:3px solid var(--coral); padding-left:1.2em; }

/* ---------- the summary list ---------- */
.sure { list-style:none; margin: clamp(1.5rem,4vw,2.5rem) auto; padding:0; max-width:var(--measure); }
.sure li { padding:1rem 0 1rem 2.2rem; border-bottom:1px solid var(--line); color:var(--body); position:relative; }
.sure li:last-child { border-bottom:0; }
.sure li::before { content:""; position:absolute; left:.5rem; top:1.55rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--coral); }
.sure li b { color:var(--ink); }

/* ---------- the map acts: a sticky map, text scrolling past it ---------- */
.act { position:relative; padding:0 var(--gutter); }
.act-map { position:sticky; top:0; height:100svh; display:grid; place-items:center; pointer-events:none; }
.act .map { width:min(100%, 54rem); height:min(86svh, 720px); }
.act-text { position:relative; max-width:var(--measure); margin:0 auto; padding: 52svh 0 58svh; }
.act-text .beat { background:rgba(251,245,242,.86); backdrop-filter:blur(2px); border:1px solid var(--line); border-radius:16px; padding:1.6rem 1.8rem; }
.act-text h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
.act-text p { color:var(--body); }
.act-text p:last-child { margin-bottom:0; }
@media (min-width: 1000px) {
  /* the map hugs the left so the destination pin is never hidden behind the card */
  .act-map { justify-items:start; padding-left: clamp(0rem, 3vw, 3rem); }
  .act .map { width:min(calc(100% - 27rem), 54rem); }
  .act-text { max-width:24rem; margin:0 0 0 auto; }
}
@media (max-width: 999px) {
  /* On a phone the card cannot scroll over the map, or it covers the city the plane is flying to.
     So the map takes the top of the screen and the card parks itself at the bottom for the whole leg. */
  .act-map { align-content:start; padding-top: 2svh; }
  .act .map { height:60svh; }
  .act-text { padding: 26svh 0 30svh; }
  .act-text .beat { position:sticky; bottom: clamp(.75rem, 3svh, 1.5rem); }
}

/* the map itself */
.map .land { fill:#F7E8E4; stroke:#C08B84; stroke-width:1.1; stroke-linejoin:round; }
.map .route { fill:none; stroke:var(--coral-deep); stroke-width:4; stroke-dasharray:10 9; stroke-linecap:round; }
.map .route.done { stroke:#E4BDB6; stroke-width:3; }
.map .pin { fill:var(--coral); stroke:var(--paper); stroke-width:3; }
.map .pin.now { fill:var(--coral-deep); }
.map .label { font-family:'Jost', sans-serif; font-size:20px; fill:var(--ink); font-weight:500; }
.map .sky.done { opacity:.45; }
/* with no JS the whole route is drawn and the plane rests at the destination */
.map .plane { transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--pr, 0deg)) scaleX(var(--pfx, 1)) scale(var(--ps, 1)); transition: opacity .45s ease; }   /* scaleX mirrors; a one-value scale would flip both axes and fly it belly-up */

/* ---------- close ---------- */
.close { padding: clamp(3rem,9vw,7rem) var(--gutter) clamp(4rem,10vw,8rem); max-width:72rem; margin:0 auto;
         display:grid; gap:2rem; border-top:1px solid var(--line); }
.close .beat { max-width:var(--measure); }
.close h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
.close p { color:var(--body); }
.close-art { justify-self:center; }
.close-art video { width: clamp(150px, 34vw, 240px); }
@media (min-width: 900px) { .close { grid-template-columns: 1.3fr .7fr; align-items:center; } .close-art { justify-self:end; } }

/* ==========================================================================
   Motion. Everything above is the page; everything below is decoration.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1); }
  .js .reveal.in { opacity:1; transform:none; }
  .js figure.art { opacity:0; transform: translateY(26px) scale(.985); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.9,.3,1); }
  .js figure.art.in { opacity:1; transform:none; }
  .map .route.live { stroke-dashoffset: var(--dash, 0); }
  .map .sky:not(.done) { opacity:0; transform-box: fill-box; transform-origin: 50% 100%;
                          transform: translateY(12px) scale(.4); transition: opacity .35s ease, transform .85s cubic-bezier(.2,1.45,.35,1); }
  .map .sky.landed { opacity:1; transform:none; }
  .map .pin.now { opacity:0; transition: opacity .4s ease; }
  .map .pin.now.landed { opacity:1; }
  .hero h1, .hero .sub, .hero .byline, .hero .kicker { animation: rise .9s cubic-bezier(.2,1.05,.3,1) both; }
  .hero .kicker { animation-delay:.05s; } .hero h1 { animation-delay:.15s; }
  .hero .sub { animation-delay:.35s; } .hero .byline { animation-delay:.55s; }
  @keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  .scrollcue { animation: bob 2.4s ease-in-out infinite alternate; }
  @keyframes bob { to { transform: translate(-50%, 8px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .act-map { position:static; height:auto; padding: 2rem 0; }
  .act-text { padding: 1rem 0 2rem; }
  .act .map { height:auto; }
}
/* Nothing may ever be left permanently invisible: only html.js hides, only story.js adds it,
   and story.js also sweeps the viewport on every scroll in case the observer misses one. */

/* the three questions, at the foot of the page */
.faq { max-width:var(--measure); margin:0 auto; }
.faq details { border-top:1px solid var(--line); padding:1.1rem 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-size:1.06em; color:var(--ink); font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--coral); font-size:1.4em; line-height:1; }
.faq details[open] summary::after { content:"\2013"; }
.faq p { margin:.9em 0 0; color:var(--body); }

.alsoread { grid-column:1/-1; margin:2.5rem 0 0; font-size:.95rem; color:var(--mute); }
.alsoread a { color:var(--coral-deep); }