/* ─────────────────────────────────────────────
   TOKENS — palette drawn from Kandyan temple
   mural work: lacquer red ground, turmeric
   ochre, lime-wash chalk, paddy green, sea teal
   ───────────────────────────────────────────── */
:root{
  --ink:      #17100C;   /* cave shadow, base ground */
  --ink-2:    #20160F;   /* panel */
  --ink-3:    #2A100A;   /* lacquer-tinted band */
  --forest:   #101E18;   /* rainforest band */
  --laksha:   #9B2C16;   /* lacquer iron-red */
  --laksha-lt:#C4442A;
  --kaha:     #E3A21F;   /* turmeric gold */
  --kaha-dim: #8A6316;
  --kola:     #2E6B4F;   /* paddy green */
  --muhuda:   #2C7C86;   /* the sea */
  --sudu:     #F0E3CC;   /* lime-washed wall */
  --sudu-dim: rgba(240,227,204,.60);
  --sudu-faint: rgba(240,227,204,.16);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Karla", "Segoe UI", system-ui, sans-serif;
  --lk: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", sans-serif;
  --ta: "Noto Sans Tamil", "Nirmala UI", sans-serif;

  --measure: 62ch;
  --pad: clamp(20px, 5vw, 84px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--sudu);
  font-family:var(--body);
  font-size:clamp(15.5px,1.05vw,17.5px);
  line-height:1.66;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ── type roles ─────────────────────────────── */
h1,h2,h3,.display{
  font-family:var(--display);
  font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 100;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}
h1{font-size:clamp(3.3rem,11vw,8.5rem);font-weight:400}
h2{font-size:clamp(2.1rem,5.2vw,4rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure)}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--sudu-dim)}

.eyebrow{
  font-family:var(--body);
  font-size:.7rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--kaha);
  margin:0 0 .9rem;
}
.si{font-family:var(--lk);font-weight:400;letter-spacing:0}
.ta{font-family:var(--ta);font-weight:400;letter-spacing:0}
.meta{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--sudu-dim);
}

/* ── layout ─────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,150px);position:relative;scroll-margin-top:64px}
.section--forest{background:var(--forest)}
.section--lacquer{background:var(--ink-3)}
.section--wash{background:var(--sudu);color:var(--ink)}
.section--wash .lede,.section--wash .meta{color:rgba(23,16,12,.66)}
.section--wash .eyebrow{color:var(--laksha)}

.sec-head{margin-bottom:clamp(38px,6vw,72px);max-width:760px}
.sec-head .rule{
  height:2px;background:var(--kaha);margin:1.6rem 0 0;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s cubic-bezier(.16,.84,.28,1) .1s;
}
.in .rule{transform:scaleX(1)}

/* ── reveal on scroll ───────────────────────── */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}

/* ── top bar ────────────────────────────────── */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px var(--pad);
  background:linear-gradient(to bottom,rgba(23,16,12,.92),rgba(23,16,12,0));
  backdrop-filter:blur(2px);
  transition:background .4s;
}
.bar__mark{display:flex;align-items:baseline;gap:.55rem;text-decoration:none}
.bar__mark b{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.01em}
.bar__mark span{font-family:var(--lk);font-size:.85rem;color:var(--kaha)}
.bar nav{display:flex;gap:clamp(12px,2vw,30px)}
.bar nav a{
  text-decoration:none;font-size:.72rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--sudu-dim);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;
}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--kaha);border-color:var(--kaha)}
@media(max-width:720px){.bar nav{display:none}}

/* ── hero ───────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  background:
    radial-gradient(120% 78% at 50% 108%, rgba(155,44,22,.42) 0%, rgba(23,16,12,0) 62%),
    radial-gradient(70% 50% at 78% 8%, rgba(44,124,134,.20) 0%, rgba(23,16,12,0) 70%);
}
.hero__inner{position:relative;z-index:3;padding-bottom:clamp(260px,40vw,470px)}
.hero h1{max-width:14ch}
.hero h1 em{
  font-style:normal;color:var(--kaha);
  font-variation-settings:'SOFT' 90,'WONK' 1,'opsz' 144;
}
.hero__greet{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;
  margin-bottom:1.4rem;
}
.hero__greet span:first-child{font-family:var(--lk);font-size:clamp(1.1rem,2.4vw,1.9rem);color:var(--kaha)}
.hero__greet span:nth-child(2){font-family:var(--ta);font-size:clamp(1rem,2.1vw,1.6rem);color:var(--laksha-lt)}
.hero__greet span:last-child{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sudu-dim)}
.hero__sub{max-width:46ch;margin-top:1.6rem}
.hero__cue{
  margin-top:2.4rem;display:inline-flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sudu-dim);text-decoration:none;
}
.hero__cue i{
  width:34px;height:1px;background:var(--kaha);display:block;
  animation:cue 2.6s cubic-bezier(.4,0,.2,1) infinite;transform-origin:left;
}
@keyframes cue{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}

/* the threshold stone, cropped by the fold */
.threshold{
  position:absolute;left:50%;bottom:0;z-index:2;
  width:min(1180px,118vw);translate:-50% 0;
  pointer-events:none;
  filter:drop-shadow(0 -14px 40px rgba(0,0,0,.55));
  animation:stoneUp 1.9s cubic-bezier(.16,.84,.28,1) both .25s;
}
@keyframes stoneUp{from{transform:translateY(46%)}to{transform:translateY(0)}}

/* ── the docked dial (scroll indicator + nav) ── */
.dial{
  position:fixed;left:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.2vw,26px);z-index:55;
  width:clamp(112px,13vw,168px);
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .6s,transform .6s;
}
.dial.show{opacity:1;transform:none}
.dial__stone{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.dial__read{
  margin-top:.5rem;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--kaha);
  display:flex;gap:.5rem;align-items:baseline;
}
.dial__read b{font-family:var(--body);font-weight:400;color:var(--sudu-dim);letter-spacing:.1em}
@media(max-width:720px){.dial{width:88px;left:12px;bottom:12px}.dial__read{font-size:.55rem}}

/* moonstone band colours */
.st-rim{fill:none;stroke:var(--kaha-dim);stroke-width:2}
.st-ground{fill:#241812}
.st-flame{fill:var(--laksha-lt)}
.st-beast{fill:var(--kaha)}
.st-vine{fill:none;stroke:var(--kola);stroke-width:2.6;stroke-linecap:round}
.st-halo{fill:#241812;stroke:#241812;stroke-linejoin:round}
.st-leaf{fill:var(--kola)}
.st-swan{fill:var(--sudu)}
.st-petal{fill:var(--laksha)}
.st-petal-2{fill:var(--kaha)}
.st-sep{fill:none;stroke:rgba(240,227,204,.22);stroke-width:1.4}

/* ── wild: field plots ──────────────────────── */
.plots{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(26px,3.4vw,54px) clamp(22px,3vw,46px)}
.plot{grid-column:span 2;border-top:1px solid var(--sudu-faint);padding-top:20px}
.plot:nth-child(1),.plot:nth-child(2){grid-column:span 3}
.plot:nth-child(6){grid-column:span 6}
.plot:nth-child(6) p{max-width:70ch}
.plot h3{margin:.25rem 0 .7rem}
.plot h3 span{display:inline-block;font-size:.62em;color:var(--kaha);margin-left:.45em;vertical-align:.08em}
.f-kola{fill:var(--kola)}
.f-gold{fill:var(--kaha)}
.f-red{fill:var(--laksha-lt)}
.f-dark{fill:#0C1613}
.f-sea{fill:var(--muhuda)}
.f-line{fill:none;stroke:rgba(240,227,204,.34);stroke-width:2;stroke-linecap:round}
.f-mist{fill:none;stroke:rgba(240,227,204,.30);stroke-width:2;stroke-linecap:round}
.tag{
  font-size:.72rem;letter-spacing:.06em;color:var(--kaha);
  border-left:2px solid var(--kaha-dim);padding-left:.7rem;margin-top:1rem;
}

/* ── liya vela running band ─────────────────── */
.vineband{
  overflow:hidden;background:var(--ink-2);
  border-block:1px solid rgba(227,162,31,.28);
  padding:.9rem 0;
}
.vineband__track{
  display:flex;align-items:center;gap:2.4rem;white-space:nowrap;
  will-change:transform;
}
.vineband__track span{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sudu-dim);font-weight:600;
}
.vineband__track span b{font-family:var(--lk);font-weight:400;letter-spacing:0;color:var(--kaha);text-transform:none;font-size:.95rem}
.vineband__track i{width:26px;height:10px;flex:none;background:var(--kaha-dim);
  clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%)}

/* ── culture cards ──────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(18px,2.4vw,30px)}
.card{
  grid-column:span 3;background:rgba(240,227,204,.045);
  border:1px solid var(--sudu-faint);border-radius:3px;
  padding:clamp(20px,2.6vw,34px);
  transition:border-color .35s,transform .35s,background .35s;
}
.cards>.card:last-child{grid-column:span 6}
.cards>.card:last-child p{max-width:78ch}
.card:hover{border-color:rgba(227,162,31,.55);background:rgba(240,227,204,.065);transform:translateY(-4px)}
.card h3{margin:.3rem 0 .8rem}
.card h3 span{display:inline-block;font-size:.6em;color:var(--kaha);margin-left:.45em;vertical-align:.08em}

@media(max-width:900px){
  .plot,.plot:nth-child(1),.plot:nth-child(2),.plot:nth-child(6){grid-column:span 3}
  .card,.cards>.card:last-child{grid-column:span 6}
}
@media(max-width:620px){
  .plots,.cards{grid-template-columns:1fr}
  .plot,.plot:nth-child(1),.plot:nth-child(2),.plot:nth-child(6),
  .card,.cards>.card:last-child{grid-column:span 1}
}
/* ── the route ──────────────────────────────── */
.route{
  --rail:clamp(16px,3vw,44px);
  list-style:none;margin:0;padding:0 0 0 var(--rail);
  border-left:1px solid rgba(227,162,31,.4);
}
.leg{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(14px,2.4vw,36px);
  padding-block:clamp(24px,3.2vw,38px);
  border-top:1px solid var(--sudu-faint);position:relative;
}
.leg:first-child{border-top:0}
.leg::before{
  content:"";position:absolute;top:calc(clamp(24px,3.2vw,38px) + .55rem);
  left:calc(-1 * var(--rail) - 5px);
  width:10px;height:10px;background:var(--kaha);transform:rotate(45deg);
}
.leg__n{
  font-family:var(--display);font-variation-settings:'SOFT' 60,'WONK' 1;
  font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:400;
  color:var(--kaha);line-height:1;padding-top:.12em;
}
.leg h3{margin:.2rem 0 .7rem}
.leg h3 span{display:inline-block;font-size:.6em;color:var(--kaha);margin-left:.45em;vertical-align:.08em}
.leg--hero{background:rgba(44,124,134,.10);border-radius:4px;padding-inline:clamp(14px,2vw,26px)}
.leg--hero::before{background:var(--muhuda)}
.leg--hero .leg__n,.leg--hero h3 span{color:var(--muhuda)}
.chip{
  display:inline-block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;color:var(--sudu-dim);
  border:1px solid var(--sudu-faint);border-radius:99px;padding:.34rem .85rem;margin-top:.4rem;
}

/* ── monsoon picker ─────────────────────────── */
.monsoon{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(22px,4vw,56px);align-items:center;
  border:1px solid rgba(23,16,12,.16);background:rgba(23,16,12,.035);
  border-radius:4px;padding:clamp(20px,3vw,40px);
}
.months{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.months button{
  font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.62rem .2rem;background:transparent;cursor:pointer;
  border:1px solid rgba(23,16,12,.22);color:rgba(23,16,12,.68);
  border-radius:2px;transition:background .2s,color .2s,border-color .2s;
}
.months button:hover{border-color:var(--laksha);color:var(--laksha)}
.months button[aria-pressed="true"]{background:var(--laksha);border-color:var(--laksha);color:var(--sudu)}
.readout{margin-top:1.7rem}
.readout__text{font-size:1.02rem;min-height:6.2em;color:rgba(23,16,12,.82)}
.legend{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1.3rem;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(23,16,12,.55);font-weight:600}
.lg{width:11px;height:11px;display:inline-block;vertical-align:0;margin-right:.45rem}
.lg--on{background:var(--kola)}
.lg--off{background:rgba(23,16,12,.16)}
.monsoon__map{margin:0}
.monsoon__map svg{width:100%;max-width:260px;margin:0 auto}
.rg{fill:rgba(23,16,12,.14);transition:fill .55s ease}
.rg.on{fill:var(--kola)}
.isle-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.pins text{
  font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;text-anchor:middle;fill:var(--sudu);
  paint-order:stroke;stroke:rgba(23,16,12,.6);stroke-width:3px;
}

/* ── practical notes ────────────────────────── */
.notes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,76px);
}
.note{border-top:1px solid var(--sudu-faint);padding-top:18px}
.note h3{margin:.15rem 0 .6rem}
.note p{color:rgba(240,227,204,.72)}
.section--wash .note{border-top-color:rgba(23,16,12,.22)}
.section--wash .note p{color:rgba(23,16,12,.78)}
.note--words{grid-column:1/-1}
.words{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:1rem 0 0}
.words div{border-left:2px solid var(--laksha);padding-left:.85rem}
.words dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(240,227,204,.5);margin-bottom:.4rem}
.words dd{margin:0 0 .2rem;font-size:.86rem;color:rgba(240,227,204,.62)}
.words dd b{font-weight:400;font-size:1.06rem;color:var(--sudu);margin-right:.45rem}
.section--wash .words dt{color:rgba(23,16,12,.5)}
.section--wash .words dd{color:rgba(23,16,12,.62)}
.section--wash .words dd b{color:var(--ink)}

/* ── footer ─────────────────────────────────── */
.foot{background:var(--ink);padding-block:clamp(56px,8vw,104px);text-align:center;
  border-top:1px solid var(--sudu-faint)}
.foot__in p{max-width:54ch;margin-left:auto;margin-right:auto}
.foot__lotus{width:clamp(90px,12vw,130px);margin:0 auto 1.6rem}
.foot__greet{font-size:clamp(1.4rem,3.4vw,2.3rem);color:var(--kaha);margin-bottom:1.1rem}
.foot__greet .ta{color:var(--laksha-lt);margin-left:.7rem}
.foot__note{color:var(--sudu-dim)}
.foot__fine{font-size:.72rem;color:rgba(240,227,204,.34)}

@media(max-width:820px){
  .monsoon{grid-template-columns:1fr}
  .monsoon__map{order:-1}
  .words{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .months{grid-template-columns:repeat(4,1fr)}
  .words{grid-template-columns:1fr}
  .leg{grid-template-columns:1fr;gap:.4rem}
  .leg__n{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* ── photographs ────────────────────────────── */
.shot{margin:0 0 1.15rem;padding:0}
.shot__frame{
  position:relative;overflow:hidden;border-radius:3px;
  background:var(--ink-2);border:1px solid var(--sudu-faint);
  aspect-ratio:4/3;
}
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.84) contrast(1.06) brightness(.94);
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s;
}
.shot__tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(155,44,22,.34),rgba(23,16,12,.5));
  mix-blend-mode:multiply;transition:opacity .6s;
}
.plot:hover .shot img,.card:hover .shot img{transform:scale(1.05);filter:none}
.plot:hover .shot__tint,.card:hover .shot__tint{opacity:.22}
.shot figcaption{
  margin-top:.6rem;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--sudu-dim);
}
.shot__fallback{position:absolute;inset:0;width:100%;height:100%;padding:14%;display:none}
.shot.is-missing img,.shot.is-missing .shot__tint{display:none}
.shot.is-missing .shot__fallback{display:block}
.plot:nth-child(6) .shot__frame,.cards>.card:last-child .shot__frame{aspect-ratio:21/9}
.card .shot__frame{aspect-ratio:16/10}
.credits{
  margin:2.4rem auto 0;max-width:74ch;font-size:.67rem;line-height:1.95;
  letter-spacing:.03em;color:rgba(240,227,204,.36);
}
.credits a{color:rgba(240,227,204,.62);text-decoration:none;border-bottom:1px solid rgba(240,227,204,.18)}
.credits a:hover{color:var(--kaha);border-color:var(--kaha)}
@media(max-width:620px){
  .plot:nth-child(6) .shot__frame,.cards>.card:last-child .shot__frame{aspect-ratio:16/10}
}
:focus-visible{outline:2px solid var(--kaha);outline-offset:3px;border-radius:2px}


/* ═══════════════════════════════════════════
   MULTI-PAGE COMPONENTS
   ═══════════════════════════════════════════ */

/* ── nav: current page + small-screen menu ─── */
.bar nav a.is-here{color:var(--kaha);border-color:var(--kaha)}
.bar__menu{
  display:none;font:inherit;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sudu-dim);background:transparent;cursor:pointer;
  border:1px solid var(--sudu-faint);border-radius:2px;padding:.5rem .8rem;
}
@media(max-width:820px){
  .bar{flex-wrap:wrap;row-gap:0}
  .bar__menu{display:block}
  .bar nav{
    display:none;order:3;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--sudu-faint);margin-top:12px;
  }
  .bar.is-open nav{display:flex}
  .bar nav a{padding:.75rem 0;border-bottom:1px solid rgba(240,227,204,.08)}
}

/* ── page header ────────────────────────────── */
.phead{position:relative;display:flex;align-items:flex-end;min-height:clamp(340px,52vh,560px);
  overflow:hidden;background:var(--ink-2)}
.phead__img{position:absolute;inset:0}
.phead__img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.05) brightness(.8)}
.phead__img .shot__tint{
  background:linear-gradient(to top,rgba(23,16,12,.96) 4%,rgba(42,16,10,.62) 45%,rgba(155,44,22,.32) 100%);
}
.phead__in{position:relative;z-index:2;padding-block:clamp(40px,7vw,88px) clamp(30px,5vw,58px)}
.phead h1{font-size:clamp(2.5rem,7vw,5.4rem);max-width:16ch;margin-bottom:1.1rem}
.phead .lede{max-width:56ch}

/* ── index gateways ─────────────────────────── */
.gates{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(18px,2.6vw,34px)}
.gate{
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  border:1px solid var(--sudu-faint);border-radius:3px;overflow:hidden;
  background:rgba(240,227,204,.04);transition:border-color .35s,transform .35s,background .35s;
}
.gate .shot{margin:0}
.gate .shot__frame{border:0;border-radius:0;aspect-ratio:16/10}
.gate h3{margin:clamp(16px,2vw,22px) clamp(16px,2vw,22px) .55rem}
.gate p{margin:0 clamp(16px,2vw,22px);color:var(--sudu-dim);font-size:.94rem;flex:1}
.gate__go{
  display:block;margin:1.1rem clamp(16px,2vw,22px) clamp(16px,2vw,22px);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--kaha);
}
.gate:hover{border-color:rgba(227,162,31,.55);background:rgba(240,227,204,.07);transform:translateY(-4px)}
.gate:hover .shot img{transform:scale(1.05);filter:none}
.gate:hover .shot__tint{opacity:.22}

/* ── moonstone legend ───────────────────────── */
.legend-stone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:center}
.legend-stone__svg{width:100%}
.bands{list-style:none;margin:0;padding:0;counter-reset:b}
.bands li{
  border-top:1px solid var(--sudu-faint);padding:.85rem 0 .85rem 2.4rem;position:relative;
  cursor:default;transition:color .3s;
}
.bands li::before{
  counter-increment:b;content:counter(b,decimal-leading-zero);
  position:absolute;left:0;top:.95rem;font-size:.68rem;letter-spacing:.1em;
  font-weight:700;color:var(--kaha-dim);transition:color .3s;
}
.bands li:hover::before,.bands li.is-hot::before{color:var(--kaha)}
.bands b{font-weight:600;font-size:1rem;margin-right:.5rem}
.bands .si{color:var(--kaha);font-size:.92rem}
.bands em{display:block;font-style:normal;color:var(--sudu-dim);font-size:.88rem;margin-top:.2rem}
.fineprint{max-width:70ch;margin-top:2rem;font-size:.82rem;color:var(--sudu-dim)}
@media(max-width:820px){.legend-stone{grid-template-columns:1fr}}

/* ── tables ─────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.tbl th{
  text-align:left;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--kaha);padding:0 1.2rem .7rem 0;
  border-bottom:1px solid rgba(227,162,31,.4);
}
.tbl td{padding:.9rem 1.2rem .9rem 0;border-bottom:1px solid var(--sudu-faint);vertical-align:top}
.tbl tr td:first-child{font-weight:600;white-space:nowrap;padding-right:1.6rem}
.tbl tr:hover td{background:rgba(240,227,204,.03)}
.section--wash .tbl th{color:var(--laksha);border-color:rgba(155,44,22,.4)}
.section--wash .tbl td{border-color:rgba(23,16,12,.16)}
.section--wash .tbl tr:hover td{background:rgba(23,16,12,.03)}

/* ── frieze divider ─────────────────────────── */
.frieze{padding:clamp(20px,3vw,34px) 0;background:var(--ink-2);
  border-block:1px solid rgba(227,162,31,.2);overflow:hidden}
.frieze svg{width:100%;height:auto;display:block;opacity:.75}

/* ── rice and curry plate ───────────────────── */
.plate{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.plate__svg{width:100%;max-width:430px;margin:0 auto;cursor:pointer}
.plate__text{font-size:1.02rem;min-height:8em;color:rgba(23,16,12,.82)}
.bowl{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bowl:hover{transform:scale(1.06)}
.bowl.is-on .bowl__disc{stroke-width:3.4}
.bowl__disc{stroke:var(--ink);stroke-width:1.6;transition:stroke-width .25s}
.bowl__label{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-anchor:middle;fill:var(--ink)}
.plate__ring{fill:rgba(23,16,12,.05);stroke:rgba(23,16,12,.35);stroke-width:1.5}
@media(max-width:820px){.plate{grid-template-columns:1fr}}

/* ── footer nav ─────────────────────────────── */
.foot__nav{margin:2rem auto 0;display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center}
.foot__nav a{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--sudu-dim);text-decoration:none;transition:color .25s;
}
.foot__nav a:hover{color:var(--kaha)}

/* ── route map: the loop, schematically ─────── */
.loopgrid{display:grid;grid-template-columns:clamp(180px,22vw,260px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start}
.routemap{margin:0;position:sticky;top:84px}
.routemap svg{width:100%}
.routemap figcaption{
  margin-top:.7rem;font-size:.68rem;line-height:1.7;letter-spacing:.06em;
  color:var(--sudu-dim);
}
.rm-isle{fill:rgba(240,227,204,.05);stroke:rgba(227,162,31,.5);stroke-width:2;stroke-linejoin:round}
.rm-line{fill:none;stroke:var(--kaha);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.rm-return{fill:none;stroke:rgba(240,227,204,.28);stroke-width:1.6;stroke-dasharray:2 4}
.rm-stops a{cursor:pointer}
.rm-stops circle{fill:var(--kaha);stroke:var(--ink);stroke-width:1.6;transition:transform .25s}
.rm-stops text{
  font-family:var(--body);font-size:10px;font-weight:700;
  text-anchor:middle;fill:var(--ink);pointer-events:none;
}
.rm-stops a:hover circle,.rm-stops a:focus-visible circle{fill:var(--sudu)}
.rm-stops a.rm-train circle{fill:var(--muhuda);stroke:var(--ink)}
.rm-stops a.rm-train text{fill:var(--sudu)}
@media(max-width:820px){
  .loopgrid{grid-template-columns:1fr}
  .routemap{position:static;max-width:230px;margin-inline:auto}
}

/* ── onward: cross-links at the foot of a page ─ */
.onward{background:var(--ink-2);border-top:1px solid rgba(227,162,31,.25);
  padding-block:clamp(36px,5vw,64px)}
.onward nav{display:flex;flex-wrap:wrap;gap:12px}
.onward a{
  text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--sudu-dim);border:1px solid var(--sudu-faint);border-radius:99px;
  padding:.65rem 1.15rem;transition:color .25s,border-color .25s,transform .25s;
}
.onward a:hover,.onward a:focus-visible{color:var(--kaha);border-color:var(--kaha);transform:translateY(-2px)}

/* ── card grid: robust across pages ─────────── */
.cards{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.cards>.card{grid-column:auto}
.cards>.card:last-child{grid-column:auto}
.cards>.card--wide,.cards>.card--wide:last-child{grid-column:1/-1}
.cards>.card--wide .shot__frame{aspect-ratio:21/9}
.cards>.card--wide p{max-width:78ch}
@media(max-width:620px){
  .cards>.card,.cards>.card--wide,.cards>.card--wide:last-child{grid-column:auto}
  .cards>.card--wide .shot__frame{aspect-ratio:16/10}
}

/* ── print: the guide on paper ──────────────── */
@media print{
  body{background:#fff;color:#1a1a1a;font-size:11pt}
  .bar,.dial,.vineband,.frieze,.threshold,.hero__cue,.foot__lotus,
  .bar__menu,.onward,.routemap,.legend-stone__svg{display:none!important}
  .hero{min-height:auto;background:none;padding-top:24px}
  .hero__inner{padding-bottom:24px}
  .phead{min-height:auto;background:none}
  .phead__img{display:none}
  .section,.section--forest,.section--lacquer,.section--wash,.foot{
    background:#fff!important;color:#1a1a1a!important;padding-block:20px}
  .lede,.meta,.tag,.chip,.note p,.gate p,.foot__note,.readout__text,
  .bands em,.fineprint,.routemap figcaption,.shot figcaption{color:#444!important}
  .eyebrow,.section--wash .eyebrow{color:#8a5a10!important}
  h1{font-size:22pt}h2{font-size:16pt}h3{font-size:12pt}
  .rise{opacity:1!important;transform:none!important}
  .shot__tint{display:none}
  .shot img{filter:none}
  .card,.gate,.note,.leg,.plot,tr{break-inside:avoid;page-break-inside:avoid}
  .card,.gate{border-color:#ccc;background:#fff}
  .loopgrid{display:block}
  .tbl td,.tbl th{border-color:#ddd!important;color:#1a1a1a}
  .tbl tr td:first-child{color:#1a1a1a}
  a{color:inherit;text-decoration:none}
  .foot__fine,.credits{color:#777!important}
  .credits a{color:#777}
}