/* ═══════════════════════════════════════════════════════════════════
   SITHIYAM · THE ISLAND — lane-b-island.css (D2 kit)
   Page-scoped, hosted as a Webflow asset + <link>. NEVER author these as Webflow styles —
   this is tokens/reset/keyframes/media + everything that lives inside JS-created or
   runtime-injected SVG/DOM (no real canvas element exists for a Designer to select).
   Mirrors home's lane-b-vN.css pattern exactly (see Website Redesign/HANDOVER.md M0 state).
   ═══════════════════════════════════════════════════════════════════ */

/* ============ TOKENS (shared v5 block, verbatim — GOVERNANCE §6.5) ============ */
:root{
  --paper:oklch(0.969 0.012 84); --paper-2:oklch(0.946 0.015 80); --paper-3:oklch(0.912 0.018 77);
  --paper-live:oklch(0.969 0.012 84);
  --ink:oklch(0.205 0.018 56);   --ink-2:oklch(0.44 0.022 58);
  --line:oklch(0.205 0.018 56 / .16); --line-2:oklch(0.205 0.018 56 / .08);
  --accent:oklch(0.70 0.115 73); --accent-ink:oklch(0.42 0.115 60);
  --terra:oklch(0.63 0.135 44);  --tea:oklch(0.52 0.072 156);
  --night:oklch(0.205 0.02 58);  --night-2:oklch(0.25 0.022 60); --bone:oklch(0.93 0.014 82);
  --pencil:oklch(0.36 0.06 58);
  --f-display:"Bricolage Grotesque",sans-serif; --f-serif:"Instrument Serif",serif;
  --f-mono:"JetBrains Mono",monospace; --f-hand:"La Belle Aurore",cursive; --f-scrawl:"Caveat",cursive;
  --f-sinh:"Noto Serif Sinhala",serif;
  --ease:cubic-bezier(.22,1,.36,1); --slow:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,5vw,84px);
  --lamp:0;
  /* aliases: island-cms.js accents -> v5 tokens (data file untouched, per GOVERNANCE §6.5) */
  --gold:var(--accent); --green:var(--tea);
}
*{margin:0;padding:0;box-sizing:border-box}
html body{background:var(--paper);color:var(--ink);font-family:var(--f-display);overflow-x:hidden}
::selection{background:var(--accent);color:var(--night)}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}

/* ============ KEYFRAMES ============ */
@keyframes writein{0%{clip-path:inset(-20% 102% -20% -2%);opacity:1}100%{clip-path:inset(-20% -2% -20% -2%);opacity:1}}
@keyframes twinkle{20%{opacity:.9}60%{opacity:.15}}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes dash620{to{stroke-dashoffset:0}}
@keyframes rosedraw{to{stroke-dashoffset:0}}
@keyframes dockin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes wavebob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes pinpulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.5);opacity:0}}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes needlesway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}

/* ============ DOCK MODE VISIBILITY (JS toggles .m-browse/.m-place/.m-tour on #dock;
   the 3 named children swap via id, not class — a pure state mechanism, lane-b) ============ */
.isl-dock>*{display:none}
.isl-dock.m-browse #dockBrowse{display:flex}
.isl-dock.m-place #flyout{display:block;animation:dockin .45s var(--slow)}
.isl-dock.m-tour #tourbar{display:flex;animation:dockin .45s var(--slow)}

/* ============ TYPE PILLS + CHIPS (100% JS-created into #toolTypes/#toolChips at boot —
   Object.keys(D.TYPES).forEach()/chipGroup() — no real canvas element to select) ============ */
.isl-typepill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;padding:9px 14px;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.isl-typepill:hover{border-color:var(--ink-2)}
.isl-typepill .sw{width:10px;height:10px;flex:none;background:var(--c);border:1px solid var(--ink);transition:background .25s}
.isl-typepill[data-glyph="circle"] .sw{border-radius:50%}
.isl-typepill[data-glyph="diamond"] .sw{transform:rotate(45deg);border-radius:2px}
.isl-typepill[data-glyph="square"] .sw{border-radius:2px}
.isl-typepill b{font-size:.78rem;font-weight:600}
.isl-typepill .n{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;color:var(--ink-2)}
.isl-typepill.off{opacity:.4;border-style:dashed}
.isl-typepill.off .sw{background:transparent}
.isl-chipgrp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.isl-chipgrp .gl{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.18em;color:var(--ink-2);margin-right:3px}
.isl-chip{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:6px 10px;transition:all .25s var(--ease)}
.isl-chip:hover{border-color:var(--ink-2)}
.isl-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* #count's innerHTML is fully overwritten by applyFilters() from boot onward */
.isl-count b{color:var(--ink)}

/* ============ decorative hairline (post-insert pseudo at D3, kept here for reference) ============ */
.isl-nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent-ink);transition:width .35s var(--ease)}
.isl-nav-link:hover::after{width:100%}
.isl-nav-link.is-here::after{width:100%;background:var(--accent)}

/* ============ #starfield i (JS-created stars) ============ */
#starfield i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--bone);animation:twinkle 3.8s infinite}
body.has-cur, body.has-cur *{cursor:none!important}

/* ============ tripclock inner SVG (static, injected at runtime via isl-svg-islands.js) ============ */
.isl-tripclock .arcpath{fill:none;stroke:var(--line);stroke-width:1}
.isl-tripclock .orb{fill:var(--accent)}
body.is-night-mode .isl-tripclock .orb{fill:var(--bone)}

/* ============ hero compass rose (static, injected at runtime) ============ */
.isl-rose .rc{fill:none;stroke:var(--pencil);stroke-width:1.6;filter:url(#roughM);stroke-dasharray:660;stroke-dashoffset:660;animation:rosedraw 1.6s .5s var(--slow) forwards}
.isl-rose .rc2{stroke-width:1;opacity:.35;animation-delay:.8s}
.isl-rose .rt{stroke:var(--pencil);stroke-width:1.2;opacity:0;animation:fade .6s 1.7s var(--ease) forwards}
.isl-rose .rn{fill:var(--accent-ink);opacity:0;animation:fade .7s 1.5s var(--ease) forwards}
.isl-rose .rs{fill:none;stroke:var(--pencil);stroke-width:1.2;opacity:0;animation:fade .7s 1.6s var(--ease) forwards}
.isl-rose text{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;fill:var(--ink-2);opacity:0;animation:fade .6s 1.8s var(--ease) forwards}
.isl-fig-doodle path{fill:none;stroke:var(--pencil);stroke-width:1.4;stroke-linecap:round;opacity:.55;filter:url(#roughM)}

/* ============ THE CHART (100% JS-built into an empty <svg id="chart">) ============ */
#chart .gridl{stroke:var(--line-2);stroke-width:1;fill:none}
#chart .gridt{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;fill:var(--ink-2);opacity:.4}
#chart .isle-fill{fill:var(--paper-2);opacity:0;transition:opacity 1.2s var(--ease) .3s}
#chart.live .isle-fill{opacity:.8}
#chart .isle{fill:none;stroke:var(--pencil);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:url(#roughM)}
#chart .isle2{fill:none;stroke:var(--pencil);stroke-width:1;opacity:.26;transform:translate(3px,2px);filter:url(#roughM)}
#chart .deco{opacity:0;transition:opacity 1s var(--ease) .9s}
#chart.live .deco{opacity:1}
#chart .hillmark{stroke:var(--pencil);stroke-width:1.2;fill:none;opacity:.3}
#chart .wave{stroke:var(--pencil);stroke-width:1;fill:none;opacity:.22;transform-box:fill-box;animation:wavebob 6s ease-in-out infinite}
#chart .bird{stroke:var(--pencil);stroke-width:1.3;fill:none;opacity:.45;transform-box:fill-box;animation:wavebob 4.5s ease-in-out infinite}
#chart .railln{stroke:var(--pencil);stroke-width:1.3;fill:none;opacity:.5}
#chart .railtick{stroke:var(--pencil);stroke-width:1;opacity:.45}
#chart .roadln{stroke:var(--pencil);stroke-width:1.2;fill:none;opacity:.3;stroke-dasharray:5 7}
#chart .regl{font-family:var(--f-mono);font-size:12px;letter-spacing:.34em;fill:var(--ink-2);opacity:.35;transition:opacity .5s var(--ease),fill .3s}
#chart .regl.hot{opacity:.95;fill:var(--accent-ink)}
#chart .seanote{font-family:var(--f-hand);font-size:16px;fill:var(--pencil);opacity:.55;transition:opacity .5s var(--ease)}
#chart.z-near .regl,#chart.z-near .seanote{opacity:0}
#chart .trail{fill:none;stroke:var(--accent-ink);stroke-width:2;stroke-linecap:round;filter:url(#roughM)}
#chart .trail.roadleg{stroke-dasharray:none}
#chart .trail.roadleg.done{stroke-dasharray:6 8}
#chart .trailtick{stroke:var(--accent-ink);stroke-width:1.2;opacity:0;transition:opacity .5s var(--ease)}
#chart .trailtick.on{opacity:.8}
#chart .pin{cursor:pointer}
#chart .pin .hit{fill:transparent;pointer-events:all}
#chart .pin .pop{opacity:0;transition:opacity .45s var(--ease),transform .45s var(--slow);transform:scale(0) rotate(-8deg)}
#chart .pin.in .pop{opacity:1;transform:scale(1) rotate(0deg)}
#chart .pin.dim{opacity:.13;pointer-events:none}
#chart .pin .halo{fill:var(--paper);opacity:.72}
#chart .pin .glyph{stroke:var(--ink);stroke-width:1.3;transition:transform .3s var(--slow)}
#chart .pin:hover .glyph{transform:scale(1.25)}
#chart .pin .plab{font-family:var(--f-hand);font-size:15px;fill:var(--pencil);paint-order:stroke;stroke:var(--paper);stroke-width:3px;opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
#chart .pin.lbl .plab,#chart.z-near .pin .plab,#chart .pin:hover .plab,#chart .pin.sel .plab{opacity:1}
#chart .pin .pulse{fill:none;stroke:var(--accent-ink);stroke-width:1.2;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}
#chart .pin:hover .pulse{animation:pinpulse 1.1s ease-out infinite}
#chart .pin .ring{fill:none;stroke:var(--accent-ink);stroke-width:1.7;opacity:0;filter:url(#roughM);pointer-events:none}
#chart .pin.sel .ring{opacity:.9;stroke-dasharray:130;stroke-dashoffset:130;animation:ringdraw .7s var(--slow) forwards}

/* ============ sheet furniture SVG internals (static, injected at runtime) ============ */
.isl-stamp circle{fill:none;stroke:var(--accent-ink);stroke-width:1.4}
.isl-stamp .st-si{font-family:var(--f-sinh);font-size:16px;fill:var(--accent-ink)}
.isl-stamp .st-en{font-family:var(--f-mono);font-size:6.5px;letter-spacing:.24em;fill:var(--accent-ink)}
.isl-compass path,.isl-compass circle,.isl-compass line{stroke:var(--pencil);fill:none;stroke-width:1.1}
.isl-compass .np{fill:var(--pencil);transform-box:fill-box;transform-origin:center 65%;animation:needlesway 7s ease-in-out infinite}
.isl-compass text{font-family:var(--f-mono);font-size:9px;fill:var(--pencil)}
.isl-lm .s{width:9px;height:9px;background:var(--c);border:1px solid var(--ink)}
.isl-lm .s.circle{border-radius:50%}
.isl-lm .s.diamond{transform:rotate(45deg);border-radius:1px}

/* ============ PLACE CARD (JS templates this whole subtree into #flyout on openCard()) ============ */
.isl-fly-back{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:11px 16px;border-bottom:1px solid var(--line-2);transition:color .25s}
.isl-fly-back:hover{color:var(--ink)}
.isl-fly-img{position:relative;aspect-ratio:16/10;max-height:235px;background:var(--paper-2);overflow:hidden}
.isl-fly-img image-slot,.isl-fly-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.isl-tape{position:absolute;z-index:3;top:-7px;left:50%;width:78px;height:20px;transform:translateX(-50%) rotate(-2deg);background:oklch(0.93 0.03 84/.8);border-left:1px dashed oklch(0.205 0.018 56/.2);border-right:1px dashed oklch(0.205 0.018 56/.2)}
.isl-fly-badge{position:absolute;z-index:2;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:color-mix(in oklch, var(--paper-live) 90%, transparent);padding:5px 10px;border-radius:100px}
.isl-fly-badge .d{width:8px;height:8px;background:var(--c);border:1px solid var(--ink)}
.isl-fly-badge[data-glyph="circle"] .d{border-radius:50%}
.isl-fly-badge[data-glyph="diamond"] .d{transform:rotate(45deg);border-radius:1px}
.isl-fly-close{position:absolute;z-index:3;right:10px;top:10px;width:28px;height:28px;display:grid;place-items:center;background:color-mix(in oklch, var(--paper-live) 90%, transparent);border-radius:50%;color:var(--ink);transition:transform .3s var(--slow)}
.isl-fly-close:hover{transform:rotate(90deg)}
.isl-fly-kick{position:absolute;z-index:2;left:12px;bottom:10px;font-family:var(--f-scrawl);font-size:19px;color:var(--paper);text-shadow:0 1px 8px oklch(0.205 0.018 56/.6);transform:rotate(-2deg)}
.isl-fly-body{padding:13px 16px 15px}
/* font-family MANDATORY on JS-templated h3/p — bare tags leak to the shared site's old fonts
   (h3→Mikale, p→Helios Antique) since lane-b's body font is beaten by site-global tag rules */
.isl-fly-body h3{font-family:var(--f-display);font-size:1.32rem;letter-spacing:-.02em;line-height:1.05;font-weight:700}
.isl-fly-grid{display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-top:7px}
.isl-fly-meta{display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.isl-fly-body p{font-family:var(--f-display);font-size:.86rem;line-height:1.55;color:var(--ink-2);margin-top:9px}
.isl-fly-themes{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.isl-fly-themes .t{font-family:var(--f-mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:4px 9px}
.isl-fly-season{margin-top:11px;padding-top:10px;border-top:1px solid var(--line-2)}
.isl-fly-season .sh{display:flex;justify-content:space-between;align-items:baseline}
.isl-fly-season .sl{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.isl-fly-season .sv{font-family:var(--f-hand);font-size:15px;color:var(--pencil)}
.isl-fly-months{display:flex;gap:3px;margin-top:8px}
.isl-fly-months .mo{flex:1;text-align:center;font-family:var(--f-mono);font-size:.56rem;color:var(--ink-2);opacity:.36;padding:4px 0;border-radius:4px}
.isl-fly-months .mo.on{opacity:1;color:var(--accent-ink);background:oklch(0.70 0.115 73/.16)}
.isl-fly-near{margin-top:11px;padding-top:10px;border-top:1px solid var(--line-2)}
.isl-fly-near .sl{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.isl-fly-near .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.isl-near{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:6px 12px;transition:border-color .25s}
.isl-near:hover{border-color:var(--ink-2)}
.isl-near .nd{width:8px;height:8px;background:var(--c);border:1px solid var(--ink)}
.isl-near[data-glyph="circle"] .nd{border-radius:50%}
.isl-near[data-glyph="diamond"] .nd{transform:rotate(45deg);border-radius:1px}
.isl-fly-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2)}
.isl-fly-nav{display:flex;gap:6px}
.isl-fly-nav button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:transform .25s var(--slow),border-color .25s}
.isl-fly-nav button:hover{transform:translateY(-2px);border-color:var(--ink-2)}

/* ============ TOUR NARRATION (JS templates this into #tourbar) ============ */
#tourbar .t-count{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
#tourbar .t-name{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1}
#tourbar .t-line{font-family:var(--f-hand);font-size:19px;color:var(--pencil);line-height:1.35}
#tourbar .t-dots{display:flex;gap:6px}
#tourbar .td{width:8px;height:8px;border-radius:50%;border:1px solid var(--ink-2);cursor:pointer;transition:background .3s}
#tourbar .td.on{background:var(--accent-ink);border-color:var(--accent-ink)}
#tourbar .t-controls{display:flex;gap:8px}
#tourbar .t-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:transform .25s var(--slow)}
#tourbar .t-btn:hover{transform:translateY(-2px)}
#tourbar .t-btn svg{fill:currentColor}
#tourbar .t-open{text-align:left}

/* ============ GAZETTEER CARDS — promoted to native Collection List styles (see native/
   03-gazetteer-shell.css). Only the ancestor-hover-affects-child polish (not reducible to a
   single flat Webflow class) and the onchart icon's own hover/transition stay here: ============ */
.isl-card:hover .isl-card-thumb{transform:rotate(-.6deg) translateY(-4px)}
.isl-onchart svg{transition:transform .3s var(--slow)}
.isl-onchart:hover svg{transform:translateY(-2px)}

/* ============ GAZETTEER CARD PARITY REBUILD (2026-07-16) — restores prototype placeCard parity:
   the .inn matted photo frame, the .feature first-card (2×2 portrait), and the meta grid-ref.
   These use combinators (.w-dyn-item first-child / descendant) that can't be flat Webflow classes. */
/* matted photo frame: image sits inside .isl-card-inn, inset within the paper thumb */
.isl-card-inn{position:absolute;inset:10px 10px 10px;border-radius:8px;overflow:hidden;background:var(--paper-3)}
.isl-card-inn img,.isl-card-inn image-slot{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.isl-card-meta .g{color:var(--accent-ink)}
/* the Collection List item wraps the card — let the card fill it */
.isl-cardgrid>.w-dyn-item{display:flex}
.isl-cardgrid>.w-dyn-item>.isl-card{width:100%}
/* FEATURE: first card of each grid spans 2×2 with a tall portrait photo + larger heading */
.isl-cardgrid>.w-dyn-item:first-child{grid-column:span 2;grid-row:span 2}
.isl-cardgrid>.w-dyn-item:first-child>.isl-card{height:100%}
.isl-cardgrid>.w-dyn-item:first-child .isl-card-thumb{aspect-ratio:auto;flex:1 1 auto;min-height:340px}
.isl-cardgrid>.w-dyn-item:first-child .isl-card-h3{font-size:clamp(26px,2.4vw,34px)}

/* ============ BREAKPOINTS (source breakpoints kept verbatim) ============ */
@media (max-width:900px){
  .isl-hero{display:block;min-height:0;padding:calc(74px + 2vh) var(--gutter) 4vh}
  .isl-hero .isl-cart-h1{width:100%}
  .isl-hero-fig{display:none}
  .isl-spread{display:block;height:auto;min-height:0;padding:2vh var(--gutter) 8vh}
  .isl-sinh{position:static;display:inline-block;transform:rotate(-2deg);margin-top:10px;text-align:left}
  .isl-dock{overflow:visible;margin-bottom:14px}
  .isl-dock #dockBrowse{display:flex}
  #flyout{display:block;position:fixed;z-index:75;inset:auto 10px 10px 10px;max-height:58svh;overflow-y:auto;scrollbar-width:thin;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px oklch(0.205 0.018 56/.22);opacity:0;transform:translateY(110%);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--slow);animation:none}
  #flyout.open{opacity:1;transform:translateY(0);pointer-events:auto}
  #tourbar{display:flex;position:fixed;z-index:75;inset:auto 10px 10px 10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px oklch(0.205 0.018 56/.22);opacity:0;transform:translateY(110%);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--slow);animation:none}
  #tourbar.show{opacity:1;transform:translateY(0);pointer-events:auto}
  .isl-sheet{height:70svh;min-height:440px}
  .isl-sheetnote{display:none}
  .isl-instr{flex-direction:column;align-items:flex-end}
  .isl-compass{display:none}
  #trail,#cur,#curRing{display:none}
  /* the gazetteer grid lives on the Collection List item container (.isl-cardgrid) in the Webflow
     build, not the outer .isl-grid — mobile 1-column override must target it (see D3 shelf-grid fix) */
  .isl-grid,.isl-cardgrid{grid-template-columns:1fr}
  /* feature first-card reverts to a normal card on 1-col mobile */
  .isl-cardgrid>.w-dyn-item:first-child{grid-column:auto;grid-row:auto}
  .isl-cardgrid>.w-dyn-item:first-child .isl-card-thumb{aspect-ratio:4/3;min-height:0;flex:none}
  .isl-card.feature{grid-column:auto;grid-row:auto}
  .isl-card.feature .isl-card-thumb{aspect-ratio:4/3;min-height:0}
}
@media (max-width:600px){
  .isl-nav{padding:12px var(--gutter)}
  .isl-nav-right{gap:12px}
  .isl-nav-right a{display:none}
  .isl-tc-lbl{display:none}
  .isl-cart-h1{font-size:clamp(42px,11vw,64px)}
  .isl-sechead{margin-bottom:5vh}
  #tourbar{gap:9px;padding:14px}
  #tourbar .t-line{font-size:15px}
  .isl-scale{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ============================================================================
   ISLAND v5 FIX PASS — 2026-08-07 (audit round 3). Appended to lane-b-island-v4.
   ========================================================================== */

/* 1. Nav clock read "ON THE ISLAND08:14" — no whitespace, no margin. */
.isl-tc-lbl,.v5-tc-lbl{ margin-right:8px }

/* 2. No reduced-motion support existed. The chart, tour, cursor trail and
      starfield are all motion-heavy; honour the OS setting. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* 3. Mobile (audited at 410px): 99 tap targets measured under 40px, and
      "TAKE THE DRAWN TOUR" wrapped onto three lines inside its own pill. */
@media (max-width:900px){
  .isl-tab,.isl-chip,.isl-typepill,.isl-onchart,.isl-clear,.isl-zoom-btn{ min-height:44px }
  .isl-btn-text{ min-height:44px; display:inline-flex; align-items:center }
}
@media (max-width:600px){
  .isl-tc{ white-space:nowrap }
  .isl-hero-actions{ flex-wrap:wrap; row-gap:12px }
  .isl-hero-actions .isl-btn{ white-space:nowrap; width:100% ; justify-content:center }
}

/* ============================================================================
   MOBILE NAV CSS — hamburger + slide panel (v6 patch, 2026-08-07)
   Scoped to the same <=600px breakpoint that already hides .isl-nav-link.
   isl_PLACEHOLDER swapped per page (v5 for home, isl for island).
   ============================================================================ */
.isl-nav-burger{ display:none; }
.isl-mnav{ display:none; }
@media (max-width:600px){
  .isl-nav-right{ display:flex; align-items:center; }
  .isl-nav-burger{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:6px; padding:0; flex:0 0 auto;
    background:none; border:1.5px solid currentColor; border-radius:4px; cursor:pointer;
  }
  .isl-nav-burger span{ display:block; width:16px; height:1.5px; background:currentColor; position:relative; }
  .isl-nav-burger span::before,.isl-nav-burger span::after{
    content:''; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; }
  .isl-nav-burger span::before{ top:-5px; }
  .isl-nav-burger span::after{ top:5px; }
  .isl-mnav{
    display:flex; position:fixed; inset:0; z-index:300; background:var(--paper-live,var(--paper));
    flex-direction:column; align-items:flex-start; justify-content:center; gap:24px; padding:48px 40px;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1); pointer-events:none;
  }
  .isl-mnav.open{ transform:translateX(0); pointer-events:auto; }
  .isl-mnav .isl-mnav-link{
    display:flex; align-items:center; min-height:44px; font-size:30px; font-weight:600;
    text-decoration:none; color:inherit;
  }
  .isl-mnav-close{
    position:absolute; top:26px; right:26px; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid currentColor; border-radius:4px; background:none; font-size:18px; color:inherit;
  }
}

/* ============================================================================
   v7 FIX PASS — 2026-08-07, Hiraz's own phone walkthrough of staging.
   Same nav-transparency + footer-bulk bugs found on home, same cause here.
   ========================================================================== */

/* 1. #nav is position:fixed;top:0 with a fully transparent background —
      scrolled content shows straight through the nav text. */
.isl-nav{
  background: var(--paper-live);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 2. Footer link columns stack to one on mobile; tighten the rhythm. */
@media (max-width:600px){
  .isl-fmark{ margin-bottom:24px }
  .isl-fgrid{ row-gap:28px !important; column-gap:28px !important }
  .isl-fbase{ margin-top:32px }
}

/* ============================================================
   lane-b-island v8 — 2026-08-08
   Fixes Hiraz reported from his phone: the pin card opening
   "mixed with the background", locked and unusable; plus perf
   parity with the home page, which had been done there only.
   ============================================================ */

/* ---- 1. THE CARD OPENED BEHIND THE MAP ---------------------
   MEASURED on the live page at 375px, with every animation
   settled so this is the resting state, not a mid-transition:

     paint order at the card's centre, topmost first
       isle-fill   [z:auto]      <- the MAP
       chart       [z:auto]
       stage       [z:auto]
       isl-fly-img [z:auto]      <- card's own image
       flyout      [z:75]        <- the card, UNDERNEATH

   #flyout carries z-index:75, but z-index only ranks an element
   against siblings inside its own stacking context. #flyout sits
   inside .isl-dock > .isl-rail, and the map sits in a separate
   branch (#stage > #chart) of the same #island context. Neither
   .isl-rail nor .isl-dock was positioned, so the whole dock
   branch painted at the default level - below the map branch.
   The card's 75 could never escape to compete with the chart.

   Result on a phone: the card is genuinely open, populated and
   hit-testable, but the map is drawn on top of its upper two
   thirds. You see card and map blended, and only the bottom
   strip responds to taps. Exactly "mixed with the background...
   everything is locked".

   Fix: position the dock branch and give it a rank above the
   map branch. Verified live before/after/revert - with these
   rules the topmost element at the card's centre becomes
   .isl-fly-img (inside the card); removing them puts .isle-fill
   back on top. */
.isl-rail{ position: relative; z-index: 60; }
.isl-dock{ position: relative; z-index: 70; }
.isl-flyout{ z-index: 75; }
.isl-flyout.open{ z-index: 9999; }   /* belt and braces once actually open */

/* The card must also take its taps back from the map underneath. */
.isl-flyout.open{
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* ---- 2. PERF PARITY WITH HOME ------------------------------
   The home page had its animated pencil filters removed; the
   island never did. These are feTurbulence + feDisplacementMap
   on paths that animate (the chart draw-on, the route trail,
   the pin rings), so the browser re-rasterises the filter
   region every frame it moves. Same fix, same reasoning as
   lane-b v11 - the wobble is in the path geometry, not the
   filter. Small static doodles keep their texture. */
#chart .isle,
#chart .isle2,
#chart .trail,
#chart .pin .ring,
.isl-rose .rc{
  filter: none !important;
}

/* ---- 3. TAP RESPONSE ---------------------------------------
   Removes the ~300ms synthetic click delay and the grey flash. */
.isl-tab, .isl-flyout a, .isl-flyout button,
#chart .pin, .isl-card, .isl-crow{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 4. A BIGGER MAP ON PHONES -----------------------------
   The chart renders 333 x 566 inside an 812px-tall viewport -
   width-constrained, with vertical room going unused. Letting
   it use more height buys real estate for the pins.
   NOTE: this alone does NOT make the map usable - see the pin
   density note in the audit. 32 of 34 pins sit closer than 44px
   to a neighbour, so this is an improvement, not a solution. */
@media (max-width: 900px){
  .isl-sheet{ overflow: visible; }
  #chart{ max-height: 74svh; }
}

/* ---- 5. Slightly larger pin hit areas ----------------------
   Rendered tap target was 13.4px against a 44px guideline.
   Raised, but deliberately NOT to 44px: with a 12.7px median
   gap between pins, 44px targets would overlap three deep and
   make mis-taps worse, not better. This is the largest bump
   that does not materially increase overlap. */
#chart .pin .hit{ r: 18px; }

/* ============================================================
   ISLAND CHART — zoom + pan chrome                      2026-08-08
   Pairs with the zoom module in island-motion-v8.js.
   The map was unusable at 1x: 34 pins, 12.7px median gap, 32 of
   34 closer than the 44px tap guideline. At 3x that gap becomes
   ~38px, so zoom is what actually makes the pins reachable.
   ============================================================ */

.isl-sheet{ position: relative; overflow: hidden; }

/* the sheet lifts slightly once you're inside it - it should feel
   like you leaned over the chart, not like a page element resized */
.isl-sheet{
  transition: box-shadow .35s var(--ease, ease), background-color .35s var(--ease, ease);
}
.isl-sheet.is-zoomed{
  box-shadow: 0 18px 60px -22px rgba(0,0,0,.42), 0 2px 0 rgba(0,0,0,.05);
  cursor: grab;
}
.isl-sheet.is-zoomed:active{ cursor: grabbing; }

/* the chart itself is GPU-composited while it moves */
#chart{ transform-origin: 0 0; }

/* ---- zoom pill ---- */
.isl-zoomui{
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 40;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border: 1px solid var(--line, rgba(0,0,0,.16));
  border-radius: 999px;
  background: var(--paper-live, var(--paper-live));
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.45);
  font-family: var(--f-mono, ui-monospace, monospace);
  user-select: none;
  opacity: .92;
}
.isl-zoomui button{
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: none; color: inherit;
  font-size: 17px; line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .18s ease;
}
.isl-zoomui button:hover{ background: rgba(0,0,0,.06); }
.isl-zoomui button:active{ transform: scale(.9); }
.isl-zoomval{
  min-width: 34px; text-align: center;
  font-size: 11px; letter-spacing: .06em;
  opacity: .72;
}

/* ---- a one-time hint so the gesture is discoverable ---- */
.isl-sheet::after{
  content: 'PINCH TO ZOOM · DOUBLE-TAP · DRAG TO EXPLORE';
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  z-index: 39;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--ink, var(--ink));
  color: var(--paper, var(--paper-live));
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .09em; white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: islhint 5.4s 1.4s both;
}
@keyframes islhint{
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
  12%  { opacity: .94; transform: translateX(-50%) translateY(0); }
  76%  { opacity: .94; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0;  transform: translateX(-50%) translateY(-4px); }
}
/* once they've zoomed, the hint has done its job */
.isl-sheet.is-zoomed::after{ animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .isl-sheet::after{ animation: none; opacity: 0; }
  .isl-sheet{ transition: none; }
}

/* Desktop keeps a slightly smaller pill out of the artwork's way */
@media (min-width: 901px){
  .isl-zoomui{ right: 14px; bottom: 14px; }
}

/* ============================================================
   HORIZONTAL OVERFLOW LOCK — 2026-08-08
   Hiraz: "the page left to right no limit, I can swipe and the
   page completely goes out of frame. No one should be able to
   pull the page out of frame."

   MEASURED CAUSE. `body` already had overflow-x:hidden and the
   document scrollWidth equalled the viewport - so on paper there
   was no overflow. The culprits are position:FIXED elements,
   which overflow CANNOT clip, because a fixed element is laid
   out against the viewport and sits outside body's overflow box:

     .v5-mnav   fixed, inset:0, transform:translateX(100%)
                -> a full-viewport panel parked at x=376..752,
                   visible and laid out, one screen to the right
     .v5-grain  fixed, left:-188px, width:752px  (2x viewport)
     .isl-grain fixed, same pattern
     #curRing   fixed, desktop cursor ring, sits at x=-17..17

   On iOS Safari that parked panel is exactly what lets the page
   be dragged sideways. overflow-x on html/body will never fix it.
   ============================================================ */

html{ overflow-x: clip; overscroll-behavior-x: none; }
body{ overflow-x: clip; overscroll-behavior-x: none; }

/* Grain overlays: pin them to the viewport instead of overhanging it. */
.v5-grain, .isl-grain{ left: 0 !important; right: 0 !important; width: 100% !important; }

@media (max-width: 900px){
  /* The off-canvas menu: `visibility:hidden` takes it out of the
     pannable area and out of hit-testing while closed, which
     transform alone does not. The delayed visibility transition
     keeps the slide-out animation intact on close. */
  .v5-mnav{
    visibility: hidden;
    transition: transform .45s cubic-bezier(.16,1,.3,1), visibility 0s .45s;
  }
  .v5-mnav.open{
    visibility: visible;
    transition: transform .45s cubic-bezier(.16,1,.3,1), visibility 0s 0s;
  }
  /* Custom-cursor elements are a pointer:fine affordance and can
     never fire on touch, but they were still laid out at negative x. */
  #cur, #curRing{ display: none !important; }
}