/* SITHIYAM v5 — LANE B (page-scoped: ids, svg-internal, JS-created, states-on-descendants, media, keyframes)
   Hosted + linked from page head. NOT Webflow styles. */
:root{
  --paper:oklch(0.969 0.012 84);        /* Colour/Paper */
  --paper-2:oklch(0.946 0.015 80);      /* Colour/Paper 2 */
  --paper-3:oklch(0.912 0.018 77);      /* Colour/Paper 3 */
  --paper-live:oklch(0.969 0.012 84);   /* Colour/Paper Live (JS-driven) */
  --ink:oklch(0.205 0.018 56);          /* Colour/Ink */
  --ink-2:oklch(0.44 0.022 58);         /* Colour/Ink 2 */
  --line:oklch(0.205 0.018 56 / .16);   /* Colour/Line */
  --line-2:oklch(0.205 0.018 56 / .08); /* Colour/Line 2 */
  --accent:oklch(0.70 0.115 73);        /* Colour/Accent */
  --accent-ink:oklch(0.42 0.115 60);    /* Colour/Accent Ink */
  --terra:oklch(0.63 0.135 44);         /* Colour/Terracotta */
  --tea:oklch(0.52 0.072 156);          /* Colour/Tea */
  --night:oklch(0.205 0.02 58);         /* Colour/Night */
  --night-2:oklch(0.25 0.022 60);       /* Colour/Night 2 */
  --bone:oklch(0.93 0.014 82);          /* Colour/Bone */
  --pencil:oklch(0.36 0.06 58);         /* Colour/Pencil (JS-driven) */
  --f-display:"Bricolage Grotesque",sans-serif;  /* Type/Display */
  --f-serif:"Instrument Serif",serif;            /* Type/Serif */
  --f-mono:"JetBrains Mono",monospace;           /* Type/Mono */
  --f-hand:"La Belle Aurore",cursive;            /* Type/Hand */
  --f-scrawl:"Caveat",cursive;                   /* Type/Scrawl */
  --ease:cubic-bezier(.22,1,.36,1);     /* Motion/Ease */
  --slow:cubic-bezier(.16,1,.3,1);      /* Motion/Slow */
  --gutter:clamp(20px,5vw,84px);        /* Layout/Gutter */
  --lamp:0; /* 0=daylight … 1=lamplight; rises from "Two ways" onward, set per-frame in JS */
}
*{margin:0;padding:0;box-sizing:border-box}
html body{background-color:var(--paper);color:var(--ink);font-family:var(--f-display);overflow-x:hidden}
::selection{background-color:var(--accent);color:var(--night)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;background-color:transparent;background-image:none;border-width:0;border-style:none;cursor:pointer;color:inherit}
@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 rise{to{transform:translateY(0)}}
@keyframes dash620{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes fillin{to{opacity:.45}}
@keyframes idash{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@keyframes kbA{from{transform:scale(1.05) translate(1.2%,-.8%)}to{transform:scale(1.16) translate(-1.6%,1.2%)}}
@keyframes kbB{from{transform:scale(1.15) translate(-1.4%,1%)}to{transform:scale(1.05) translate(1.4%,-1%)}}
@keyframes pulse{50%{opacity:.25}}
@keyframes flip{0%{transform:rotateX(0)}49%{transform:rotateX(90deg)}51%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes dash400{to{stroke-dashoffset:0}}
@keyframes dash140{to{stroke-dashoffset:0}}
@keyframes birdsfly{0%{transform:translateX(0) translateY(0);opacity:0}6%{opacity:.55}50%{transform:translateX(60vw) translateY(-4vh);opacity:.55}94%{opacity:.4}100%{transform:translateX(118vw) translateY(-7vh);opacity:0}}
@keyframes flap{from{transform:scaleY(.75)}to{transform:scaleY(1.15)}}
@keyframes cardin{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes boxdraw{to{stroke-dashoffset:0}}
@keyframes stampin{0%{opacity:0;transform:rotate(-11deg) scale(2.6)}70%{opacity:.9;transform:rotate(-11deg) scale(.94)}100%{opacity:.85;transform:rotate(-11deg) scale(1)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(var(--dx,18px),var(--dy,-26px))}}
.sf-star{position:absolute;width:2px;height:2px;border-radius:50%;background-color:var(--bone);animation:twinkle 3.8s infinite}
@keyframes twinkle{20%{opacity:.9}60%{opacity:.15}}
.route{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1;overflow:visible}
.route .rl{fill:none;stroke:var(--pencil);stroke-width:1.8;stroke-linecap:round;filter:url(#rough)}
.route .rl2{fill:none;stroke:var(--pencil);stroke-width:1;stroke-linecap:round;opacity:.3;filter:url(#rough)}
.route .tip{fill:var(--pencil)}
.route .stopring{fill:none;stroke:var(--accent-ink);stroke-width:1.7;filter:url(#rough)}
.route .leader{fill:none;stroke:var(--accent-ink);stroke-width:1.6;stroke-dasharray:4 6;opacity:0;transition:opacity .5s var(--ease);filter:url(#rough)}
.route .leader.on{opacity:.75}
.route .deco{stroke:var(--pencil);fill:none;opacity:0;transition:opacity .6s var(--ease)}
.route .deco.on{opacity:.5}
.route .sleeper{stroke-width:1.5}
.route .roadd{stroke-width:1.6}
.route .coastw{stroke-width:1.2}
.route .legnote{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;fill:var(--ink-2);opacity:0;transition:opacity .8s var(--ease)}
.route .legnote.on{opacity:.85}
.stop-note{position:absolute;z-index:2;font-family:var(--f-hand);font-size:clamp(19px,1.9vw,25px);color:var(--pencil);transform:rotate(-3.5deg);pointer-events:none;white-space:nowrap}
.v5-nav-mark .v5-star{color:var(--accent)}
.v5-nav-link:hover::after{width:100%}
.tripclock-svg{overflow:visible}
.v5-tripclock .arcpath{fill:none;stroke:var(--line);stroke-width:1}
.v5-tripclock .orb{fill:var(--accent)}
body.is-night-mode .v5-tripclock .orb{fill:var(--bone)}
.v5-minimap svg{width:100%;height:auto;overflow:visible;display:block;cursor:crosshair;touch-action:none}
body.has-cursor .v5-minimap svg{cursor:none}
.v5-minimap .mmisle{fill:oklch(0.5 0.03 70/.08);stroke:var(--pencil);stroke-width:5;opacity:.75}
.v5-minimap .mmroute{fill:none;stroke:var(--accent-ink);stroke-width:7;stroke-dasharray:24 30;opacity:.35}
.v5-minimap .mmtrod{fill:none;stroke:var(--accent-ink);stroke-width:9;stroke-linecap:round;opacity:.9}
.v5-minimap .mmdot{fill:var(--accent-ink);stroke:var(--paper-live);stroke-width:8}
.v5-pre .v5-pre-inner{text-align:center}
.v5-pre .v5-pre-mark{font-weight:800;letter-spacing:-.02em;font-size:1.3rem}
.v5-pre .v5-pre-mark .v5-star{color:var(--accent)}
.v5-pre .v5-pre-stage{height:min(34vh,300px);margin-top:20px;margin-bottom:0;margin-left:auto;margin-right:auto;display:grid;place-items:center}
.v5-pre .v5-pre-stage svg{height:100%;width:auto;overflow:visible;display:block}
.pisle{fill:none;stroke:var(--pencil);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:url(#rough)}
.v5-pre .v5-pre-note{display:block;margin-top:16px;min-height:1.4em;font-family:var(--f-hand);font-size:21px;color:var(--pencil);transition:opacity .2s ease}
.v5-pre .v5-pre-count{display:block;margin-top:12px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor .v5-jrow, body.has-cursor .v5-crow, body.has-cursor .v5-shelf{cursor:none}
}
body[data-cur="link"] .v5-cur{width:11px;height:11px;background-color:var(--accent-ink)}
body[data-cur="link"] .v5-cur-ring{width:46px;height:46px;opacity:.85;border-color:var(--accent-ink)}
body[data-cur="trace"] .v5-cur-ring,body[data-cur="drag"] .v5-cur-ring{width:66px;height:66px;opacity:1;border-color:var(--accent-ink);background-color:oklch(0.99 0.005 84/.06);backdrop-filter:blur(1px)}
body[data-cur="trace"] .v5-cur-label,body[data-cur="drag"] .v5-cur-label{opacity:1}
body[data-cur="trace"] .v5-cur,body[data-cur="drag"] .v5-cur{width:4px;height:4px}
.rv{opacity:0;transform:translateY(30px) rotate(.4deg)}
.rv.in{opacity:1;transform:none;transition:opacity 1s var(--slow) var(--rvd,0s),transform 1s var(--slow) var(--rvd,0s)}
.ff-fly{position:absolute;width:3px;height:3px;border-radius:50%;background-color:var(--accent);box-shadow:0 0 6px 1px oklch(0.7 0.115 73/.5);animation:drift var(--d,7s) ease-in-out infinite alternate, twinkle 2.8s infinite}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(var(--dx,18px),var(--dy,-26px))}}
.v5-manifesto .w{display:inline-block;transform:translateY(.28em);transition:opacity .35s linear,transform .5s var(--slow)}
.v5-manifesto .w.lit{transform:translateY(0)}
.v5-tripclock svg{pointer-events:auto;cursor:ew-resize;touch-action:none}
.v5-tripclock:hover .arcpath{stroke:var(--accent-ink)}
@media (max-width:900px){
  .route .rl,.route .rl2,.route .stopring{filter:url(#roughM)}
  .v5-minimap{width:112px}
}
@media (max-width:600px){
  .v5-nav{padding-top:12px;padding-right:var(--gutter);padding-bottom:12px;padding-left:var(--gutter)}
  .v5-nav-right{gap:12px}
  .v5-nav-link{display:none}
  .stop-note{font-size:15px}
  .v5-minimap{width:96px;padding-top:8px;padding-right:8px;padding-bottom:7px;padding-left:8px}
  .v5-mm-label{font-size:.44rem;padding-top:3px;padding-right:7px;padding-bottom:3px;padding-left:7px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}
.v5-hero-h .v5-ln{
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.v5-hero-h .v5-ln:nth-child(2) .v5-ln-text{
  animation-delay: .14s;
}
@keyframes rise{
  to { transform: translateY(0); }
}
.v5-hero-h .v5-drawn{
  position: relative;
  display: inline-block;
}
.v5-hero-h .v5-drawn svg{
  position: absolute;
  left: 0;
  bottom: -.14em;
  width: 100%;
  height: .26em;
  overflow: visible;
}
.drawn-path{
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: .85;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: dash620 1.1s 1.35s var(--slow) forwards;
  filter: url(#rough);
}
@keyframes dash620{
  to { stroke-dashoffset: 0; }
}
@keyframes fade{
  to { opacity: 1; }
}
.v5-btn-text:hover .v5-arr{
  transform: translateX(5px);
}
.isle-svg{
  width: 100%;
  height: auto;
  max-height: 78svh;
  overflow: visible;
  display: block;
}
.isle{
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#rough);
}
.isle2{
  fill: none;
  stroke: var(--pencil);
  stroke-width: 1;
  opacity: .28;
  transform: translate(3px, 2px);
  filter: url(#rough);
}
.isle-fill{
  fill: var(--paper-3);
  opacity: 0;
}
.v5-plate-wrap.live .isle-fill{
  animation: fillin 1.4s .15s var(--ease) forwards;
}
@keyframes fillin{
  to { opacity: .45; }
}
.iroute{
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  filter: url(#rough);
  opacity: 0;
}
.iroute.go{
  opacity: .95;
  stroke-dashoffset: 1600;
  animation: idash 2.2s linear forwards;
}
@keyframes idash{
  from { stroke-dashoffset: 1600; }
  to { stroke-dashoffset: 0; }
}
.istop{
  fill: var(--paper-live);
  stroke: var(--accent-ink);
  stroke-width: 2;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.istop.pop{
  animation: pop .5s var(--slow) forwards;
}
@keyframes pop{
  0% { opacity: 0; transform: scale(.2); }
  70% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}
.ilabel{
  font-family: var(--f-hand);
  font-size: 22px;
  fill: var(--pencil);
  opacity: 0;
}
.ilabel.pop{
  animation: fade .6s var(--ease) forwards;
}
.v5-plate-wrap.live .v5-iplate-cap{
  animation: fade 1s .6s var(--ease) forwards;
}
.v5-plate-wrap.live .v5-iplate-note{
  animation: fade 1s 1s var(--ease) forwards;
}
.birds{
  position: absolute;
  top: 16vh;
  left: -12vw;
  z-index: 1;
  opacity: 0;
  animation: birdsfly 26s linear 6s infinite;
}
.bird-path{
  fill: none;
  stroke: var(--pencil);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.b2{
  animation: flap 1.1s ease-in-out infinite alternate;
  transform-origin: center;
}
.b2-d1{
  animation-delay: .3s;
}
.b2-d2{
  animation-delay: .6s;
}
@keyframes birdsfly{
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  6% { opacity: .55; }
  50% { transform: translateX(60vw) translateY(-4vh); opacity: .55; }
  94% { opacity: .4; }
  100% { transform: translateX(118vw) translateY(-7vh); opacity: 0; }
}
@keyframes flap{
  from { transform: scaleY(.75); }
  to { transform: scaleY(1.15); }
}
@keyframes pulse{
  50% { opacity: .25; }
}
.flap-cell{
  display: grid;
  place-items: center;
  width: clamp(20px, 2.2vw, 30px);
  height: clamp(30px, 3.2vw, 44px);
  background-color: oklch(0.205 0.02 58);
  color: oklch(0.93 0.014 82);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(.8rem, 1.3vw, 1.15rem);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 oklch(1 0 0 / .14), inset 0 12px 12px -12px oklch(0 0 0 / .6);
}
.flap-cell.flip{
  animation: flip .34s var(--ease);
}
@keyframes flip{
  0% { transform: rotateX(0); }
  49% { transform: rotateX(90deg); }
  51% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}
svg.boxsvg{
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-height: none;
  pointer-events: none;
  overflow: visible;
}
.boxsvg-rect{
  fill: none;
  stroke: var(--pencil);
  stroke-width: 1.8;
  filter: url(#rough);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.rv.in .boxsvg-rect,
[data-boxdrawn] .boxsvg-rect{
  animation: boxdraw 1.4s var(--slow) .1s forwards;
}
@keyframes boxdraw{
  to { stroke-dashoffset: 0; }
}
.v5-manifesto p{
  font-family: var(--f-display);
  font-size: clamp(30px, 4.5vw, 62px);
  line-height: 1.22;
  letter-spacing: -.02em;
  font-weight: 500;
}
.v5-manifesto .w{
  opacity: .14;
  transition: opacity .35s linear;
}
.v5-manifesto .w.lit{
  opacity: 1;
}
#circled{
  position: relative;
  display: inline-block;
}
.circled-svg{
  position: absolute;
  left: -14%;
  top: -22%;
  width: 128%;
  height: 144%;
  overflow: visible;
  pointer-events: none;
}
.circled-path{
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.6;
  opacity: .8;
  filter: url(#rough);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
#circled.draw path{
  animation: dash400 .9s var(--slow) forwards;
}
@keyframes dash400{
  to { stroke-dashoffset: 0; }
}
.v5-manifesto .v5-sig{
  margin-top: 7vh;
  font-size: clamp(24px, 2.6vw, 32px);
}
@media (max-width: 900px){
  .v5-hero {
    grid-template-columns: 1fr;
  }

  .v5-hero-plate {
    padding-top: 2vh;
    padding-right: var(--gutter);
    padding-bottom: 8vh;
    padding-left: var(--gutter);
  }

  .v5-plate-wrap {
    width: min(72vw, 400px);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
  }
}
@media (max-width: 600px){
  .v5-flap {
    gap: 2px;
  }

  .flap-cell {
    width: 12px;
    height: 26px;
    font-size: .58rem;
    border-radius: 3px;
  }

  .v5-dep {
    padding-top: 20px;
    padding-right: 16px;
    padding-bottom: 20px;
    padding-left: 16px;
  }

  .v5-dep-meta {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
}
.v5-wp[data-side="right"] .v5-wp-inner{
  margin-left: auto;
  flex-direction: row-reverse;
}
.v5-wp[data-side="right"] .v5-wp-body{
  text-align: right;
}
.v5-wp-pin img,
.v5-wp-pin video{
  width: 100%;
  aspect-ratio: 1 / 1.12;
  object-fit: cover;
  border-radius: 1px;
  filter: blur(12px) saturate(0.45) brightness(1.18);
  transition: filter 2s var(--ease) 0.35s;
}
.v5-wp.arrived .v5-wp-pin img,
.v5-wp.arrived .v5-wp-pin video{
  filter: none;
}
.v5-wp-pin .v5-pframe{
  display: block;
  overflow: hidden;
  border-radius: 1px;
}
.v5-wp-pin .v5-pframe img{
  animation: kbA var(--kbd, 16s) ease-in-out infinite alternate;
}
.v5-wp-pin .v5-pframe.v5-kb2 img{
  animation-name: kbB;
}
.v5-wp-pin .v5-plabel{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-family: var(--f-hand);
  font-size: 18px;
  color: oklch(0.36 0.06 58);
}
.v5-wp-pin .v5-pstamp{
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: oklch(0.98 0.005 84);
  background-color: oklch(0.205 0.018 56 / 0.5);
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-radius: 100px;
  backdrop-filter: blur(3px);
}
.v5-wp.arrived .v5-wp-pin{
  opacity: 1;
  transform: rotate(var(--tilt, -3deg)) scale(1) translateY(0);
}
.v5-wp.arrived .v5-wp-pin:hover{
  transform: rotate(0deg) scale(1.03);
  transition-duration: 0.5s;
}
.v5-wp-body .v5-wp-day{
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 16px;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.15s;
}
.v5-wp.arrived .v5-wp-body .v5-wp-day{
  opacity: 1;
}
.v5-wp.arrived .v5-wp-h3{
  opacity: 1;
  transform: none;
}
.v5-wp-body .v5-wp-note{
  display: block;
  margin-top: 18px;
  font-size: clamp(22px, 2.1vw, 29px);
}
.v5-wp .v5-wp-ghostno{
  position: absolute;
  z-index: -1;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(160px, 24vw, 340px);
  color: var(--ink);
  opacity: 0.045;
  top: 50%;
  transform: translateY(-50%);
}
.v5-wp[data-side="left"] .v5-wp-ghostno{
  right: 6vw;
}
.v5-wp[data-side="right"] .v5-wp-ghostno{
  left: 6vw;
}
.v5-wp.arrived .v5-wp-pin.v5-tilt-a,
.v5-wp.arrived .v5-wp-pin.v5-tilt-b,
.v5-wp.arrived .v5-wp-pin.v5-tilt-c{
  transform: rotate(var(--tilt, -3deg)) scale(1) translateY(0);
}
.v5-wp.arrived .v5-wp-pin.v5-tilt-a:hover,
.v5-wp.arrived .v5-wp-pin.v5-tilt-b:hover,
.v5-wp.arrived .v5-wp-pin.v5-tilt-c:hover{
  transform: rotate(0deg) scale(1.03);
}
.v5-pframe.v5-kb-17s img{
  animation-duration: 17s;
}
.v5-pframe.v5-kb-21s img{
  animation-duration: 21s;
}
.v5-island-head .v5-lede{
  max-width: 380px;
  color: var(--ink-2);
  line-height: 1.6;
  font-size: 1rem;
}
.v5-plate .v5-shade{
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  background-image: linear-gradient(200deg, transparent 46%, oklch(0.205 0.018 56 / 0.55));
  z-index: 2;
}
.v5-plate .v5-no{
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: oklch(0.98 0.005 84 / 0.9);
}
.v5-plate .v5-t{
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 3;
  color: oklch(0.98 0.005 84);
}
.v5-plate .v5-t .v5-mono{
  color: oklch(0.98 0.005 84 / 0.75);
  display: block;
  margin-top: 8px;
}
.v5-plate .v5-note{
  position: absolute;
  right: 20px;
  top: 16px;
  z-index: 3;
  font-family: var(--f-hand);
  font-size: clamp(16px, 1.6vw, 21px);
  color: oklch(0.98 0.005 84);
  transform: rotate(2.5deg);
}
.v5-plate-cta .v5-inner{
  padding-top: 0;
  padding-right: 8%;
  padding-bottom: 0;
  padding-left: 8%;
}
.v5-plate-cta .v5-scrawl{
  color: var(--accent);
  font-size: clamp(20px, 2vw, 26px);
  display: block;
  margin-top: 18px;
  margin-bottom: 26px;
  font-family: var(--f-scrawl);
}
.v5-wp.arrived .v5-visited{
  animation: stampin 0.45s var(--slow) 1.15s forwards;
}
@keyframes stampin{
  0% {
    opacity: 0;
    transform: rotate(-11deg) scale(2.6);
  }
  70% {
    opacity: 0.9;
    transform: rotate(-11deg) scale(0.94);
  }
  100% {
    opacity: 0.85;
    transform: rotate(-11deg) scale(1);
  }
}
@media (max-width: 900px){
  .v5-wp {
    min-height: 0;
  }

  .v5-wp-inner {
    flex-direction: column !important;
    align-items: flex-start;
    gap: 24px;
  }

  .v5-wp[data-side="right"] .v5-wp-body {
    text-align: left;
  }

  .v5-wp-pin {
    width: min(78vw, 360px);
  }

  .v5-wp .v5-wp-ghostno {
    font-size: clamp(120px, 30vw, 220px);
  }
}
@media (max-width: 600px){
  .v5-plate .v5-note {
    top: 42px;
  }

  .v5-wp-pin {
    width: min(84vw, 340px);
  }
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}
.v5-jrow:hover .v5-jrow-sub{
  opacity:1
}
.jghost-img{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .35s
}
.jghost-img.show{
  opacity:1
}
.v5-hint b{
  color:var(--accent-ink)
}
.v5-cat-map svg{
  width:100%;
  height:auto;
  overflow:visible;
  display:block;
  max-height:72svh
}
.cisle{
  fill:var(--paper-3);
  fill-opacity:.4;
  stroke:var(--pencil);
  stroke-width:2.4;
  filter:url(#rough)
}
.croute{
  fill:none;
  stroke:var(--accent-ink);
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-dasharray:8 10;
  filter:url(#rough);
  opacity:0;
  transition:opacity .3s
}
.croute.on{
  opacity:.95
}
.cchip{
  font-family:var(--f-mono);
  font-size:15px;
  letter-spacing:.1em;
  fill:var(--ink-2)
}
.cdot{
  fill:var(--paper-live);
  stroke:var(--accent-ink);
  stroke-width:2
}
.v5-crow-h3 .v5-it{
  font-size:.92em
}
.v5-crow:hover .v5-crow-go,
.v5-crow.hi .v5-crow-go{
  background-color:var(--ink);
  color:var(--paper-live)
}
.v5-crow:hover .v5-crow-extra,
.v5-crow.hi .v5-crow-extra{
  max-height:170px;
  opacity:1
}
.v5-cstopchips b{
  color:var(--accent-ink);
  font-weight:500;
  padding-top:0;
  padding-right:2px;
  padding-bottom:0;
  padding-left:2px
}
.v5-crow-extra .v5-btn-text{
  margin-top:12px;
  display:inline-flex;
  color:var(--accent-ink)
}
.v5-cat-blank p{
  max-width:420px;
  color:var(--ink-2);
  line-height:1.6;
  font-size:.95rem
}
@media (max-width:900px){
  .v5-cat-grid{
    grid-template-columns:1fr
  }

  .v5-cat-map{
    position:relative;
    top:auto
  }

  .v5-hint{
    text-align:left;
    max-width:100%
  }

  .v5-jghost{
    display:none
  }
}
@media (max-width:600px){
  .v5-cthumb{
    width:58px;
    height:44px
  }
}
.v5-hold-head p{
  margin-top: 3vh;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  color: var(--ink-2);
  line-height: 1.7;
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.5vw, 21px);
}
.v5-hold-head p b{
  color: var(--ink);
}
.draft-arrow{
  position: absolute;
  left: -64px;
  top: 34%;
  width: 58px;
  height: 44px;
  overflow: visible;
}
.draft-arrow-path{
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2;
  stroke-linecap: round;
  filter: url(#rough);
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
}
.draft-arrow.draw .draft-arrow-path{
  animation: dash140 0.8s var(--slow) forwards;
}
@keyframes dash140{
  to {
    stroke-dashoffset: 0;
  }
}
.v5-jb-body .v5-mono{
  font-size: 0.54rem;
}
.v5-journal-copy > p{
  margin-top: 2.5vh;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  max-width: 460px;
  color: var(--ink-2);
  line-height: 1.7;
  font-family: var(--f-serif);
  font-size: 1.05rem;
}
.v5-journal-copy .v5-dl{
  margin-top: 4vh;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
@media (max-width: 900px){
  .v5-hold-grid,
  .v5-journal {
    grid-template-columns: 1fr;
  }

  .v5-how-grid {
    grid-template-columns: 1fr;
  }

  .v5-step {
    border-left: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--line);
  }

  .draft-arrow {
    display: none;
  }
}
@media (max-width: 600px){
  .v5-jlistgrid {
    grid-template-columns: 1fr;
  }
}
.v5-explore .v5-sechead{
  padding-top:0;
  padding-right:var(--gutter);
  padding-bottom:0;
  padding-left:var(--gutter);
}
.v5-scard:hover .v5-scard-img{
  transform:scale(1.06);
}
.v5-scard .v5-ov{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:linear-gradient(195deg,transparent 44%,oklch(0.205 0.018 56/.62));
  z-index:2;
}
.v5-scard .v5-schip{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  font-family:var(--f-mono);
  font-size:.54rem;
  letter-spacing:.14em;
  color:oklch(0.98 0.005 84);
  background:oklch(0.205 0.018 56/.45);
  padding-top:5px;
  padding-right:10px;
  padding-bottom:5px;
  padding-left:10px;
  border-radius:100px;
  backdrop-filter:blur(3px);
  text-transform:uppercase;
}
.v5-scard .v5-st{
  position:absolute;
  left:14px;
  right:14px;
  bottom:13px;
  z-index:3;
  color:oklch(0.98 0.005 84);
}
.v5-shelf-foot .v5-mono{
  white-space:nowrap;
}
.v5-story-quote .v5-it{
  color:var(--accent);
}
.v5-story-quote,.v5-story-who{
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease);
}
.v5-stories.story-out .v5-story-quote,.v5-stories.story-out .v5-story-who{
  opacity:0!important;
  filter:blur(7px);
  transform:translateY(10px);
}
@media (max-width:900px){
  .v5-stats{
    grid-template-columns:1fr 1fr;
  }

  .v5-stat{
    border-left:0;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:var(--line-2);
  }
}
@media (max-width:600px){
  .v5-story-quote{
    min-height:0;
  }
}

/* ============================================================================
   v5 FIX PASS — 2026-08-07 (audit round 3). Appended to lane-b-v4.
   Each rule below fixes a defect confirmed on the live staging page.
   ========================================================================== */

/* 1. Nav clock read "ON THE ISLAND07:45" — the label and the <b> clock are
      adjacent inline elements with no whitespace and no margin between them. */
.v5-tc-lbl{ margin-right:8px }

/* 2. The fixed minimap collided with real content at four separate sections
      (the "Six worlds." heading, the rotated leg label, the island-strip plate
      title, and the catalogue caption). It is a passive progress tracker, so it
      must never intercept pointer events, and it belongs in the consistently
      empty right-hand gutter rather than on top of the content column. */
.v5-minimap{ left:auto; right:24px; pointer-events:none }

/* 3. Shelf cards: Hiraz asked for a more intense hover. Was a barely-there
      lift; now a real push-forward with a slow image scale behind it. */
@media (hover:hover) and (pointer:fine){
  .v5-scard{ transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1) }
  .v5-scard-img{ transition:transform .75s cubic-bezier(.16,1,.3,1) }
  .v5-scard:hover{ transform:translateY(-10px) scale(1.03) rotate(-.55deg);
                   box-shadow:0 26px 60px oklch(0.205 0.018 56/.30); z-index:3 }
  .v5-scard:hover .v5-scard-img{ transform:scale(1.08) }
}

/* 4. Accessibility: the page is heavily animated and declared no reduced-motion
      support at all. 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 }
  .v5-fireflies,.v5-starfield,.v5-trail-canvas{ display:none !important }
}

/* 5. Mobile ergonomics (audited at 410px):
      - the nav clock wrapped onto two lines
      - the hero foot row was clipped mid-word ("1000+ TRIPS DESIGNED")
      - 41 tap targets measured under 40px */
@media (max-width:600px){
  .v5-tc{ white-space:nowrap }
  .v5-hero-foot{ flex-wrap:wrap; white-space:normal; overflow:visible; row-gap:6px }
}
@media (max-width:900px){
  .v5-btn-text{ min-height:44px; display:inline-flex; align-items:center }
  .v5-cat-filter,.v5-shelf-tab,.v5-shelf-arr{ min-height:44px }
}

/* ============================================================================
   MOBILE NAV CSS — hamburger + slide panel (v6 patch, 2026-08-07)
   Scoped to the same <=600px breakpoint that already hides .v5-nav-link.
   v5_PLACEHOLDER swapped per page (v5 for home, isl for island).
   ============================================================================ */
.v5-nav-burger{ display:none; }
.v5-mnav{ display:none; }
@media (max-width:600px){
  .v5-nav-right{ display:flex; align-items:center; }
  .v5-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;
  }
  .v5-nav-burger span{ display:block; width:16px; height:1.5px; background:currentColor; position:relative; }
  .v5-nav-burger span::before,.v5-nav-burger span::after{
    content:''; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; }
  .v5-nav-burger span::before{ top:-5px; }
  .v5-nav-burger span::after{ top:5px; }
  .v5-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;
  }
  .v5-mnav.open{ transform:translateX(0); pointer-events:auto; }
  .v5-mnav .v5-mnav-link{
    display:flex; align-items:center; min-height:44px; font-size:30px; font-weight:600;
    text-decoration:none; color:inherit;
  }
  .v5-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.
   ========================================================================== */

/* 1. The fixed nav (#nav, position:fixed;top:0) has a fully transparent
      background (rgba(0,0,0,0)). Since it never leaves the top of the
      viewport, any content that scrolls underneath it — hero copy, footer
      links, anything — shows straight through the nav text. Give it the
      page's own live paper colour (already a CSS var the day-arc engine
      updates every frame, so it stays correct in daylight AND at night)
      plus a light blur so the edge reads intentional, not a hard box. */
.v5-nav{
  background: var(--paper-live);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 2. Footer felt like it "never ends" on mobile — it's genuinely 1.3x a
      phone screen tall because the two link columns stack to one. Tighten
      the internal rhythm so it reads as one compact block, not an
      unexplained scroll-forever void. */
@media (max-width:600px){
  .v5-fmark{ margin-bottom:24px }
  .v5-fgrid{ row-gap:28px !important; column-gap:28px !important }
  .v5-fbase{ margin-top:32px }
}

/* 3. Island-strip reel cards were landscape (300x225, 4:3) — small and
      squat in a horizontal scroll row. Portrait reads stronger for a
      travel-photo reel and matches the polaroid language used everywhere
      else on the page.
      FIX 2026-08-21: this rule shipped with no @media wrapper, so the
      !important forced every reel card to a fixed 230x307px box on EVERY
      screen size, including desktop (Designer's own clamp(300px,58vw,760px)
      never had a chance). v8 below already replaced this sizing with proper
      viewport-relative values scoped to <=600px — this rule is dead weight
      and the actual desktop-breaking bug. Removed. */

/* ============================================================================
   v8 FIX PASS — 2026-08-07, Hiraz's second phone walkthrough round.
   ========================================================================== */

/* 1. THE REAL HERO BUG. .v5-hero is display:grid, but on mobile its
      grid-template-columns computed to a hardcoded 640px (never actually
      collapsing to 1fr despite an earlier rule intending that) — with
      .v5-hero-copy AND .v5-hero-plate (the island illustration) both fixed
      at 640px wide too. Result: the grid laid the island out as an implicit
      SECOND column, sitting to the right of the copy column, almost
      entirely off the 376px viewport — "island sitting on the side."
      Same fixed-width copy column also silently clipped the
      "BASED IN COLOMBO + SINGAPORE / 1000+ TRIPS..." row (min-width:700px
      inside a 640px box, all inside a viewport under 400px). !important
      because Designer's own compiled CSS is out-specificity-ing the plain
      class rule that was already supposed to handle this. */
@media (max-width:900px){
  .v5-hero{ grid-template-columns:1fr !important; }
  .v5-hero-copy, .v5-hero-plate{ width:100% !important; max-width:100% !important; }
}
@media (max-width:600px){
  .v5-hero-foot{ width:auto !important; min-width:0 !important; flex-wrap:wrap !important; }
}

/* 2. Reel cards bigger + full bleed, per Hiraz's request. Was a fixed
      230x307 with a 20px gutter on both sides. Now sized off the viewport
      itself (scales properly on any phone) and the strip's own edge
      padding is dropped so the first card starts flush at the screen edge. */
@media (max-width:600px){
  #strip{ padding-left:0 !important; padding-right:0 !important; gap:14px !important; }
  .v5-plate{ width:86vw !important; height:calc(86vw * 1.335) !important; }
}
/* ============================================================
   lane-b v9 — real-device interaction latency (2026-08-08)
   Loaded AFTER lane-b-v8.css. Override-only; nothing here
   restyles the page, it only removes work the phone cannot do.
   ============================================================ */

/* ---- THE PENCIL LINE ---------------------------------------
   Measured on a 375px viewport: the .route path's bounding box
   is 60 x 19,416 CSS px. The filter region is 116% of that, so
   the browser is asked to allocate and re-rasterise a surface
   ~70 x 22,523 CSS px — about 140 x 45,000 device px at DPR 2 —
   and to redo it every frame, because strokeDashoffset changes
   on every frame while the line draws.

   Two consequences, both of which Hiraz reported:
     1. Mobile browsers cap filter/raster surfaces (commonly
        ~8,192px per side). 22,523px blows past that, and when a
        filter region can't be allocated the element renders as
        NOTHING — hence "I see the pencil but not the line".
        The pencil tip has no filter, so it still draws.
     2. Where it does raster, it re-rasters that surface per
        frame, which is the scroll and tap lag.

   The hand-drawn character does not depend on this filter: the
   wobble is already baked into the path geometry. Turbulence on
   a 1.8px stroke is close to invisible; the cost is not.
   Static pencil elements elsewhere keep their #rough filter —
   they rasterise once and are cheap. Only the ANIMATED route
   lines are stripped, and only on phones, where the desktop
   look Hiraz signed off on is not on screen anyway. */
@media (max-width: 900px){
  .route .rl,
  .route .rl2,
  .route .stopring,
  .route .leader{ filter: none !important; }
}

/* ---- REEL + ROUTE COMPOSITING ------------------------------
   Promote the two things that actually move under the finger so
   the compositor owns them instead of repainting on every frame.
   Deliberately NOT applied page-wide: each promoted layer costs
   GPU memory, and over-promotion is its own mobile problem. */
@media (max-width: 900px){
  #strip{ will-change: transform; }
  .v5-plate-img{ will-change: auto; }   /* parallax is off on phones now */
}

/* ---- TAP RESPONSE ------------------------------------------
   Removes the ~300ms synthetic-click delay and the grey flash
   on tap. Cheap, and directly answers "tapping buttons lags". */
@media (max-width: 900px){
  .v5-btn-fill, .v5-btn-line, .v5-shelf-arr,
  .v5-jrow, .v5-crow, .v5-plate, .isl-tab{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================================
   lane-b v11 — GLOBAL pencil-filter removal (2026-08-08, pass 2)
   Hiraz: "do it on desktop too - fix it globally."
   Supersedes the mobile-only @media block in v9 above.
   ============================================================

   WHY, measured on the live page:

   `#rough` / `#roughM` are feTurbulence + feDisplacementMap. A
   displacement filter cannot be cached when the geometry under it
   changes — the browser re-rasterises the whole filter region on
   every frame of any animation touching that element.

   The elements below are all ANIMATED (stroke-dashoffset draw-ons,
   the `idash` keyframe loop, the catalogue trace) or enormous:

     .route .rl      60 x 19,416 px   draws on scroll, every frame
     .isle / .isle2  477 x 819 px     x ~7 reel plates
     .iroute         animated 2.2s `idash`, x ~7 reel plates
     .cisle/.croute  catalogue map, re-traced every 1.7s

   That is ~21 filtered, animating paths in the horizontal reel
   alone. It is the reel stutter and the catalogue-map rendering.

   The hand-drawn character does not live in this filter. The
   wobble is already in the path geometry — these are hand-drawn
   coordinates, not straight lines roughened at paint time. On a
   1-3px stroke the turbulence reads as a faint fuzz; the cost is
   an entire re-raster per frame.

   STILL FILTERED (deliberately): .boxsvg-rect frames and the small
   static doodles. They rasterise exactly once and never animate,
   so they are close to free — and they carry most of the visible
   "drawn by hand" texture. */

.route .rl,
.route .rl2,
.route .stopring,
.route .leader,
.isle,
.isle2,
.iroute,
.pisle,
.cisle,
.croute{
  filter: none !important;
}

/* The reel's island paths were also being re-rastered while the
   strip translated. Give the reel one compositor layer on every
   viewport, not just phones. */
#strip{ will-change: transform; }

/* Catalogue map: it animates on a timer, so let the compositor own
   it rather than repainting it into the page layer each tick. */
.v5-cat-map svg{ contain: paint; }

/* ============================================================
   v12 (2026-08-08, pass 3) — remove the last layout-dirtying
   writes from the scroll path.

   MEASURED: update() itself is only 1.14ms. But ONE forced
   re-layout of this document costs 20.7ms (19,940px tall,
   2,582 nodes). Scrolling needs no layout at all — so any
   per-frame write to a LAYOUT property buys a full 20.7ms
   reflow and blows the 16.7ms frame budget on its own.

   The reel progress bar animated `width` in %, which is a
   layout property, on every frame. scaleX is composite-only.
   ============================================================ */
#stripBar{
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ============================================================
   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; }
}