/* ═══════════════════════════════════════════════════════════════════════════
   ISLA INSIDER — design system
   Built 2026-08-13. Static HTML + CSS-native motion. No framework, no JS bloat.

   WHY THIS STACK: competitors here are Wix builds, JS-heavy travel blogs and
   OTA pages. Core Web Vitals is a ranking factor, so being fast IS the SEO
   strategy. Everything below degrades cleanly — content and layout never
   depend on modern CSS.

   Progressive enhancement, verified 2026-08-13:
   · Cross-document View Transitions — Chromium 126+, Safari 18.2+ (Firefox WIP)
   · Scroll-driven animations — Chrome + Safari 26 (Firefox behind a flag,
     NOT Baseline) → always inside @supports, never load-bearing
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fraunces, self-hosted (SIL Open Font License; @fontsource-variable/fraunces 5.3.0). No visitor IP goes to Google Fonts (LEG-07). */
@font-face{font-family:"Fraunces"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/assets/fonts/fraunces-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  /* Deliberately NOT the turquoise-and-palm cliché every PR site uses.
     Warm paper, deep ocean ink, one hot accent borrowed from a sunset. */
  --paper:        #faf7f2;
  --paper-2:      #f2ede4;
  --ink:          #10212e;
  --ink-2:        #43535f;
  --ink-3:        #7d8b95;
  --line:         #e2dbd0;

  --accent:       #d4553a;   /* sunset coral — the hot note */
  --accent-deep:  #a63e28;
  --sea:          #1b6b7a;   /* deep sea, used sparingly for category */
  --sand:         #c9a227;   /* gold, for editorial flourish only */

  --radius:       14px;
  --radius-lg:    22px;
  --shadow:       0 1px 2px rgb(16 33 46 / .04), 0 8px 28px -12px rgb(16 33 46 / .18);
  --shadow-lg:    0 2px 6px rgb(16 33 46 / .06), 0 28px 60px -24px rgb(16 33 46 / .28);

  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  /* fluid type — viewport-scaled, the 2026 editorial move, but capped so it
     never becomes the unreadable hero-text parody */
  --step--1: clamp(.82rem, .78rem + .18vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.12rem + .5vw, 1.55rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.3rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.6vw, 5.4rem);

  --wrap: 1240px;
  --gap: clamp(14px, 2vw, 26px);
}

@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    --paper:#0d1a24; --paper-2:#132534; --ink:#f3efe8; --ink-2:#b9c5ce;
    --ink-3:#7e8e9b; --line:#22394a; --accent:#f0704f; --sea:#4fb0c2;
    --shadow: 0 1px 2px rgb(0 0 0/.3), 0 8px 28px -12px rgb(0 0 0/.6);
    --shadow-lg: 0 2px 6px rgb(0 0 0/.4), 0 28px 60px -24px rgb(0 0 0/.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0d1a24; --paper-2:#132534; --ink:#f3efe8; --ink-2:#b9c5ce;
  --ink-3:#7e8e9b; --line:#22394a; --accent:#f0704f; --sea:#4fb0c2;
}

/* ── reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  font-family:var(--sans); font-size:var(--step-0); line-height:1.62;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.06;
  letter-spacing:-.022em; text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto}
.stack > * + *{margin-top:var(--flow, 1rem)}

/* ── view transitions: static HTML that feels like an app ────────────────── */
@view-transition{ navigation: auto }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none } }
::view-transition-old(root){ animation: vt-out .22s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation: vt-in .3s cubic-bezier(0,0,.2,1) both }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px) } }
/* named elements morph across navigation — the masthead stays put */
.masthead-mark{ view-transition-name: mark }

/* ── masthead ────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; gap:var(--gap); padding:.72rem 0; justify-content:space-between}
.masthead-mark{font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.03em; display:flex; align-items:center; gap:.5rem}
.masthead-mark .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.nav{display:flex; gap:1.35rem; font-size:var(--step--1); font-weight:500; letter-spacing:.01em}
.nav a{color:var(--ink-2); padding:.2rem 0; border-bottom:2px solid transparent; transition:color .16s, border-color .16s}
.nav a:hover,.nav a[aria-current]{color:var(--ink); border-color:var(--accent)}
@media (max-width:760px){ .topbar-in{flex-wrap:wrap; row-gap:.35rem} .nav{width:100%; overflow-x:auto; gap:1.1rem; white-space:nowrap; padding-bottom:.35rem; scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{padding:.45rem 0} }

/* ── hero / editorial masthead block ─────────────────────────────────────── */
.ident{padding:clamp(2.2rem,5vw,4rem) 0 clamp(1.2rem,2vw,2rem); border-bottom:1px solid var(--line)}
.ident h1{font-size:var(--step-4); font-weight:600; letter-spacing:-.04em; line-height:.92}
.ident .kicker{font-size:var(--step--1); text-transform:uppercase; letter-spacing:.22em;
  color:var(--accent); font-weight:700; margin-bottom:.9rem}
.ident .sub{max-width:56ch; color:var(--ink-2); font-size:var(--step-1); margin-top:1rem; font-family:var(--display); font-weight:400; line-height:1.4}

/* ── BENTO GRID — the 2026 editorial layout, done with real CSS Grid ─────── */
.bento{
  display:grid; gap:var(--gap); margin:clamp(1.6rem,3vw,2.6rem) 0;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(112px,auto);
}
.cell{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1rem,1.8vw,1.7rem); isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.cell:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.cell.lead   { grid-column:span 4; grid-row:span 3 }
.cell.tall   { grid-column:span 2; grid-row:span 3 }
.cell.wide   { grid-column:span 3; grid-row:span 2 }
.cell.small  { grid-column:span 2; grid-row:span 2 }
.cell.strip  { grid-column:span 6; grid-row:span 1 }
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell.lead,.cell.wide,.cell.strip{grid-column:span 2}
  .cell.tall,.cell.small{grid-column:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .cell{grid-column:span 1 !important; grid-row:auto !important; min-height:210px}
}
.cell .bg{position:absolute; inset:0; z-index:-2; object-fit:cover; width:100%; height:100%}
.cell.photo::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgb(6 18 26/.05) 0%, rgb(6 18 26/.5) 55%, rgb(6 18 26/.88) 100%)}
.cell.photo,.cell.photo h2,.cell.photo h3,.cell.photo p{color:#fff}
.cell h2{font-size:var(--step-2)} .cell h3{font-size:var(--step-1)}
.cell p{font-size:var(--step--1); color:inherit; opacity:.86; margin-top:.4rem; max-width:52ch}
.tag{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--sans);
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em;
  padding:.3rem .6rem; border-radius:999px; margin-bottom:.7rem; width:max-content;
  background:var(--accent); color:#fff}
.tag.sea{background:var(--sea)} .tag.ghost{background:transparent; border:1.5px solid currentColor; color:inherit}

/* placeholder art — no stock photos, no lorem imagery. Honest empty state. */
.ph{--h1:var(--sea); --h2:var(--accent);
  background:
    radial-gradient(120% 90% at 15% 10%, color-mix(in oklab, var(--h1) 55%, transparent), transparent 60%),
    radial-gradient(110% 80% at 90% 90%, color-mix(in oklab, var(--h2) 45%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, rgb(255 255 255/.05) 0 12px, transparent 12px 24px),
    var(--ink);
}
.ph.warm{--h1:var(--accent); --h2:var(--sand)}
.ph-note{position:absolute; top:.8rem; left:.8rem; z-index:1; font-size:.6rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgb(0 0 0/.42);
  padding:.28rem .55rem; border-radius:6px; backdrop-filter:blur(4px)}

/* ── scroll-driven reveal — enhancement ONLY, guarded ────────────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
    @keyframes rise{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
  }
}
/* article reading progress, zero JS */
@supports (animation-timeline: scroll()){
  .progress{position:fixed; top:0; left:0; height:3px; width:100%; z-index:60;
    background:var(--accent); transform-origin:0 50%; transform:scaleX(0);
    animation:grow linear both; animation-timeline:scroll(root block)}
  @keyframes grow{ to{ transform:scaleX(1) } }
}

/* ── section headers ─────────────────────────────────────────────────────── */
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin:clamp(2.2rem,4vw,3.4rem) 0 1.1rem; padding-bottom:.7rem; border-bottom:2px solid var(--ink)}
.sec-head h2{font-size:var(--step-2)}
.sec-head a{font-size:var(--step--1); font-weight:600; color:var(--accent)}

/* ── town cards ──────────────────────────────────────────────────────────── */
.towns{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.town{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.3rem; color:#fff;
  border:1px solid var(--line); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.town:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.town h3{font-size:var(--step-2); letter-spacing:-.03em}
.town .meta{font-size:var(--step--1); opacity:.85; margin-top:.25rem}
.town .soon{position:absolute; top:1rem; right:1rem; font-size:.6rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; background:rgb(255 255 255/.16);
  border:1px solid rgb(255 255 255/.3); padding:.3rem .55rem; border-radius:999px; backdrop-filter:blur(6px)}

/* ── DIRECTORY — the differentiated page nobody else has built ───────────── */
.dir-tools{position:sticky; top:56px; z-index:40; display:flex; flex-wrap:wrap; gap:.5rem;
  padding:.85rem 0; margin-bottom:1.2rem;
  background:color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.chip{font-size:var(--step--1); font-weight:600; padding:.42rem .85rem; border-radius:999px;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink-2); cursor:pointer;
  transition:all .16s}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.dir{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.kiosk{position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-2); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s}
.kiosk:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ink-3)}
.kiosk .shot{aspect-ratio:4/3; position:relative}
.kiosk .num{position:absolute; top:.6rem; left:.6rem; font-family:var(--display);
  font-size:1.15rem; font-weight:700; color:#fff; background:var(--ink);
  min-width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:9px;
  border:2px solid rgb(255 255 255/.9)}
.kiosk .body{padding:.85rem .95rem 1rem}
.kiosk h3{font-size:var(--step-1); letter-spacing:-.02em}
.kiosk .spec{font-size:var(--step--1); color:var(--ink-2); margin-top:.3rem}
.kiosk .row{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.7rem}
.pill{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  padding:.26rem .5rem; border-radius:6px; background:var(--paper); border:1px solid var(--line); color:var(--ink-2)}
.pill.open{background:color-mix(in oklab, #3f7a4a 16%, var(--paper)); border-color:#3f7a4a; color:#2c5c36}

/* ── prose ───────────────────────────────────────────────────────────────── */
.prose{max-width:68ch; --flow:1.15rem}
.prose > * + *{margin-top:var(--flow)}
.prose h2{font-size:var(--step-2); margin-top:2.4rem}
.prose h3{font-size:var(--step-1); margin-top:1.8rem}
.prose p{font-size:var(--step-0); color:var(--ink-2)}
.prose.dropcap > p:first-of-type:not(.isaiah-note)::first-letter{
  font-family:var(--display); float:left; font-size:3.6em; line-height:.82;
  padding:.06em .1em 0 0; color:var(--accent); font-weight:600}
.lede{font-family:var(--display); font-size:var(--step-1); color:var(--ink); line-height:1.42}
blockquote{border-left:3px solid var(--accent); padding-left:1.1rem; font-family:var(--display);
  font-size:var(--step-1); color:var(--ink); line-height:1.4}

/* ── disclosure — editorial integrity is the SEO strategy ────────────────── */
.disclose{font-size:var(--step--1); color:var(--ink-2); background:var(--paper-2);
  border:1px dashed var(--line); border-radius:var(--radius); padding:.8rem 1rem; margin:1.4rem 0}
.disclose b{color:var(--ink)}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--line); padding:2.2rem 0 3rem;
  color:var(--ink-3); font-size:var(--step--1)}
.foot-grid{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.foot h4{font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.15em;
  color:var(--ink); margin-bottom:.6rem; font-weight:800}
.foot a{display:block; padding:.16rem 0; color:var(--ink-2)}
.foot a:hover{color:var(--accent)}

/* long directory pages stay fast */
.dir > *{ content-visibility:auto; contain-intrinsic-size:auto 320px }


/* ── TEMPORARY placeholder photography ───────────────────────────────────────
   Licensed Wikimedia Commons images, standing in ONLY so the layout can be
   judged with real imagery. The site's editorial promise is original reporting
   and original photos ("No stock images"), so EVERY one of these must be
   replaced by our own shoot before launch. Credits: assets/img/CREDITS.json.
   To strip them: delete the `has-img` class + `--img` style from index.html. */
.ph.has-img{
  background-image:
    linear-gradient(to top, rgb(0 0 0/.80) 0%, rgb(0 0 0/.40) 46%, rgb(0 0 0/.14) 100%),
    var(--img);
  background-size:cover;
  background-position:var(--pos,center);
  background-repeat:no-repeat;
}
.ph.has-img .ph-note{background:rgb(0 0 0/.60)}
.is-soon{cursor:default}

/* ── article template (ENG-9, 2026-11-08) ───────────────────────────────── */
.byline{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:1.1rem; font-size:var(--step--1); color:var(--ink-3)}
.byline b{color:var(--ink-2); font-weight:600}
.aff-note{max-width:68ch; margin:1.4rem 0 0; padding:.8rem 1rem; border-left:3px solid var(--sand);
  background:var(--paper-2); border-radius:0 var(--radius) var(--radius) 0; font-size:var(--step--1); color:var(--ink-2)}
.aff-note a{color:inherit; text-decoration:underline}
.answer{max-width:68ch; margin-top:1.6rem; padding:1.1rem 1.2rem; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:var(--display); font-size:var(--step-1); line-height:1.4}
.answer b{color:var(--accent-deep)}
.checked{display:inline-block; margin-left:.35rem; padding:.05rem .45rem; border-radius:99px; background:var(--paper-2);
  font-family:var(--sans); font-size:.72em; font-weight:600; color:var(--ink-3); white-space:nowrap; vertical-align:.08em}
.book{max-width:68ch; display:grid; grid-template-columns:1fr auto; gap:.3rem 1rem; align-items:center; margin:1.6rem 0;
  padding:1rem 1.1rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow)}
.book h4{font-family:var(--display); font-size:var(--step-1); font-weight:600}
.book p{grid-column:1; font-size:var(--step--1); color:var(--ink-2)}
.book .btn{grid-row:1 / span 2; grid-column:2; display:inline-flex; align-items:center; min-height:48px; padding:.7rem 1.1rem;
  border-radius:99px; background:var(--accent); color:#fff; font-weight:700; text-decoration:none; white-space:nowrap}
.book .btn:hover{background:var(--accent-deep)}
.book .paid{grid-column:1 / -1; margin:0; font-size:.78rem; color:var(--ink-3)}
@media (max-width:560px){ .book{grid-template-columns:1fr} .book .btn{grid-row:auto; grid-column:1; justify-content:center} }
.compare{width:100%; max-width:68ch; border-collapse:collapse; margin:1.2rem 0; font-size:var(--step--1)}
.compare th,.compare td{padding:.6rem .5rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.compare th{font-weight:700; color:var(--ink)}
.table-scroll{max-width:68ch; overflow-x:auto}
.sources{max-width:68ch; margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:var(--step--1); color:var(--ink-3)}
.sources h2{font-size:var(--step-1); margin-bottom:.6rem}
.sources li{margin:.35rem 0 .35rem 1.1rem; list-style:disc}
.sources a{color:var(--ink-2); word-break:break-word}
.legal{padding:clamp(2rem,5vw,3.5rem) 0} .legal h1{font-size:var(--step-3); margin-bottom:1rem} .legal section{margin-top:1.6rem}

.isaiah-note{border:2px dashed var(--sand); padding:.6rem .8rem; border-radius:var(--radius); color:var(--ink); background:var(--paper-2)}
.facts{max-width:68ch; padding-left:1.2rem; color:var(--ink-2)} .facts li{margin:.45rem 0; list-style:disc} ol.facts li{list-style:decimal}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.book.free{border-style:dashed}
.book .btn.is-off{background:var(--paper-2); color:var(--ink-3); border:1.5px dashed var(--line); cursor:not-allowed}

/* ── homepage v2 (ENG-16, 2026-11-08): question-first ───────────────────── */
.home-hero h1{max-width:18ch}
.qgrid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.qcard{position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; gap:.45rem; min-height:300px;
  padding:1.3rem; border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-2); color:var(--ink); text-decoration:none;
  border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease}
.qcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.qcard h3{font-size:var(--step-2); letter-spacing:-.02em; line-height:1.05}
.qcard p{font-size:var(--step--1); opacity:.88; max-width:44ch}
.qcard-place{font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.qcard.has-img{color:#fff; min-height:380px}
.qcard.has-img .qcard-place{color:#ffd9c9}
.qcard-img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.qcard.has-img::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgb(8 18 26/.88) 8%, rgb(8 18 26/.25) 60%, rgb(8 18 26/.05))}
.qcard:hover .qcard-img{transform:scale(1.04)}
.qcard .checked{align-self:flex-start; margin-left:0}
.home-band{margin-top:clamp(2.4rem,5vw,4rem)}
@media (prefers-reduced-motion:reduce){ .qcard,.qcard-img{transition:none} .qcard:hover{transform:none} .qcard:hover .qcard-img{transform:none} }
/* phone overflow fixes (shots.mjs 11-08): grid children may shrink, long words wrap, tables scroll inside their box */
.book{grid-template-columns:minmax(0,1fr) auto}
.book > *{min-width:0; overflow-wrap:anywhere}
@media (max-width:560px){ .book{grid-template-columns:minmax(0,1fr)} .book .btn{white-space:normal; text-align:center} }
.table-scroll{width:100%; max-width:68ch; overflow-x:auto; -webkit-overflow-scrolling:touch}
.compare{min-width:0}
.prose{overflow-wrap:break-word}
.hero-fig{margin-top:clamp(1.2rem,3vw,2rem)}
.hero-fig img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-lg); background:var(--paper-2)}
.hero-fig figcaption{margin-top:.5rem; font-size:.78rem; color:var(--ink-3)}
.hero-fig figcaption a{color:inherit; text-decoration:underline}
@media (max-width:560px){
  .home .ident{padding-top:1.1rem; padding-bottom:1rem}
  .home .ident h1{font-size:2.15rem; line-height:1}
  .home .ident .sub{font-size:1rem; margin-top:.6rem}
  .home .sec-head{margin-top:1rem}
  .qcard.has-img{min-height:300px}
}

/* ── motion system v1 (PROD-04, 2026-11-08). transform/opacity only; content never hidden; all off under reduced motion ── */
:root{ --ease-out:cubic-bezier(.2,.8,.2,1); --dur-press:110ms; --dur-hover:200ms; --dur-move:300ms }
/* M1 card -> answer morph (names are generated per slug by build-home.mjs / build-media.mjs) */
.qcard,.answer{ view-transition-class:q }
.qcard-place,.ident .kicker{ view-transition-class:qp }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(*.q){ animation-duration:var(--dur-move); animation-timing-function:var(--ease-out) }
  ::view-transition-old(*.q),::view-transition-new(*.q){ height:100%; object-fit:none; overflow:clip }
}
/* M2 Checked stamp */
.checked{ position:relative; isolation:isolate }
.checked::after{ content:""; position:absolute; inset:-2px; border-radius:99px; pointer-events:none;
  border:1.5px solid color-mix(in oklab, var(--sea) 70%, transparent) }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .checked::after{ animation:stamp linear both; animation-timeline:view(); animation-range:entry 30% entry 90% }
    @keyframes stamp{ from{ opacity:0; transform:scale(1.25) rotate(-4deg) } to{ opacity:1; transform:none } }
  }
}
/* M3 answer arrives: the coral rule pours in, text is painted from the first frame */
.answer{ position:relative; overflow:hidden }
.answer::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent); transform-origin:50% 0 }
@media (prefers-reduced-motion:no-preference){
  .answer::before{ animation:pour 450ms var(--ease-out) 120ms both }
  @keyframes pour{ from{ transform:scaleY(0) } }
}
/* M4 tide-line divider */
.tide{ border:0; height:10px; margin:clamp(2rem,4vw,3rem) 0 1rem; overflow:hidden; position:relative; color:var(--sea) }
.tide::before{ content:""; position:absolute; inset:0 -48px 0 0; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 5 Q12 0 24 5 T48 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/48px 10px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10'%3E%3Cpath d='M0 5 Q12 0 24 5 T48 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") 0 0/48px 10px repeat-x }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .tide::before{ animation:drift linear both; animation-timeline:scroll(root block) }
    @keyframes drift{ to{ transform:translateX(-48px) } }
  }
}
/* M7 press feedback (buttons never move on hover; a tap press only) */
.qcard,.btn,.town{ transition:transform var(--dur-press) var(--ease-out), box-shadow var(--dur-hover), border-color var(--dur-hover) }
@media (prefers-reduced-motion:no-preference){ .qcard:active,.btn:active,.town:active{ transform:scale(.98) } }
.chip{ transition:color .16s, border-color .16s, background-color .16s }
.linklist{max-width:620px; display:grid; gap:.7rem; margin-top:1.4rem}
.linkrow{display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.15rem; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--paper-2); color:var(--ink); text-decoration:none; min-height:48px}
.linkrow b{font-family:var(--display); font-size:var(--step-1); font-weight:600}
.linkrow:hover{border-color:var(--accent)}
.isaiah-note.inline{display:inline; padding:.05rem .35rem; border-width:1.5px}
.qcard-photo{position:absolute; top:.8rem; right:.9rem; font-size:.66rem; padding:.15rem .45rem; border-radius:99px; background:rgb(0 0 0/.55); color:#fff}
.label-sponsored{display:inline-block; padding:.1rem .5rem; border-radius:99px; background:var(--sand); color:#10212e; font-weight:800; letter-spacing:.08em}
.qgrid + .sec-head{margin-top:clamp(2rem,4vw,3rem)}
.qgrid-small .qcard.has-img{min-height:220px}
.qgrid-small .qcard h3{font-size:var(--step-1)}
.qgrid-small .qcard p{display:none}
@media (max-width:560px){ .qgrid-small{grid-template-columns:1fr 1fr; gap:10px} .qgrid-small .qcard{padding:.9rem; min-height:170px} .qgrid-small .qcard h3{font-size:1rem} .qgrid-small .qcard .checked{display:none} }