/* Direction: "The pinned poster" (taste-skill v2, seed 615648443). The name splits into SUDU / SINGHE,
   white + lion, and holds two corners while the island passes beneath. Colour by chapter, taken from the
   Sri Lankan flag (maroon, saffron, green) and the blue of the Ella train, on a sand ground. */
:root {
  --sand: #EFE5CF;
  --maroon: #7A1531;
  --saffron: #F4AE1A;
  --green: #0D5743;
  --cobalt: #143FA6;
  --night: #15100D;
  --f-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --f-text: "EB Garamond", "Noto Serif Sinhala", Georgia, "Times New Roman", serif;
  --t-small: 0.875rem;
  --t-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-lead: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --t-head: clamp(2.75rem, 1.3rem + 5.2vw, 6rem);
  --t-display: clamp(5.5rem, 17vw, 17rem);
  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(96px, 12vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--sand); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--sand); color: var(--cobalt);
  font-family: var(--f-text); font-size: var(--t-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-family: var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: .9; }

/* one button shape for the whole page: square, flat */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.5rem;
  font-family: var(--f-display); font-size: var(--t-body); letter-spacing: .05em; text-decoration: none; line-height: 1;
  background: var(--saffron); color: var(--maroon); border: 0; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s;
}
.btn:hover { transform: translateY(-2px); background: #FFC23D; }
.btn:active { transform: translateY(0) scale(.98); }
.btn.on-light { background: var(--cobalt); color: var(--sand); }
.btn.on-light:hover { background: #1C50CC; }
.link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .2s; }
.link:hover { text-decoration-thickness: 2px; }

/* entrance: content is visible at rest; it only rises into place */
.rise { transition: transform 1s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rise:not(.in) { transform: translateY(28px); opacity: .45; }
.js .giant.rise:not(.in) { transform: translateY(40%); }

/* ---------- Top bar ---------- */
.bar {
  position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); padding: var(--m); color: var(--sand);
}
.wordmark { font-family: var(--f-display); font-size: var(--t-lead); line-height: 1; text-decoration: none; margin-right: auto; }
.bar nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.bar nav a { text-decoration: none; transition: opacity .2s; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.bar nav a[aria-current="page"] { border-bottom-color: var(--saffron); }
.bar nav a:hover { opacity: .75; }
.lang { display: flex; gap: 2px; }
.lang button {
  font: inherit; color: inherit; background: none; border: 0; padding: 6px 8px; cursor: pointer; opacity: .7;
  transition: opacity .2s, background-color .2s;
}
.lang button:hover { opacity: 1; }
.lang button[aria-pressed="true"] { opacity: 1; background: var(--sand); color: var(--maroon); }
@media (max-width: 900px) { .bar nav { display: none; } }
@media (max-width: 520px) { .bar .btn { display: none; } }

/* ---------- Hero: card over a dim room ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 104px var(--m) var(--m); overflow: hidden; background: var(--night); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); animation: drift 34s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, 1%); } }
.hero-card {
  position: relative; z-index: 2; width: min(100%, 900px); min-height: 56svh; padding: 32px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 40px; background: var(--maroon); color: var(--sand);
}
.hero-card h1 { font-size: var(--t-head); }
.hero-card h1 span { display: block; }
.hero-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-content: end; }
.facts { font-family: var(--f-display); font-size: var(--t-lead); line-height: 1.05; display: grid; gap: .35em; }
.facts span { color: var(--saffron); }
.hero-sub { font-size: var(--t-lead); line-height: 1.2; max-width: 30ch; align-self: end; }
.hero-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.credit { font-size: var(--t-small); opacity: .85; }
.hero-foot .link { justify-self: end; }
@media (max-width: 700px) {
  .hero { padding-top: 88px; }
  .hero-card { min-height: 70svh; padding: 22px; }
  .hero-card h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .hero-mid { grid-template-columns: minmax(0, 1fr); }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .hero-foot .btn { order: -1; width: 100%; }
  .hero-foot .link { justify-self: start; }
}

/* ---------- The name, pinned beside its story ---------- */
.name { background: var(--saffron); color: var(--maroon); display: grid; grid-template-columns: 5fr 7fr; gap: var(--m) clamp(32px, 5vw, 80px); padding: var(--gap) var(--m); }
.story-title { position: sticky; top: 14vh; align-self: start; display: grid; justify-items: start; }
.w { font-family: var(--f-display); font-size: var(--t-display); line-height: .8; letter-spacing: -0.03em; }
.gloss { position: relative; z-index: 1; font-size: var(--t-lead); line-height: 1.1; margin: .3em 0 .7em .1em; }
.gloss b { font-family: "Noto Serif Sinhala", var(--f-text); font-weight: 500; }
.story-items { display: grid; gap: clamp(72px, 10vh, 120px); padding-top: 2vh; }
.si { display: grid; gap: 20px; }
.si p { font-size: var(--t-lead); line-height: 1.2; max-width: 30ch; }
.si figure { display: grid; gap: 10px; }
.si img { width: 100%; object-fit: cover; }
.si figcaption { font-size: var(--t-small); }
.si1 figure { width: 84%; } .si1 img { aspect-ratio: 16 / 10; }
.si2 figure { width: 50%; justify-self: end; } .si2 img { aspect-ratio: 4 / 5; }
.si3 figure { width: 62%; } .si3 img { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .name { grid-template-columns: minmax(0, 1fr); }
  .story-title { position: static; }
  .w { font-size: clamp(5rem, 26vw, 9rem); }
  .si1 figure { width: 100%; } .si2 figure { width: 72%; } .si3 figure { width: 84%; }
}

/* ---------- Journeys: close-up with column card ---------- */
.frame { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jcard {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--m) + var(--k) * (100% - 2 * var(--m)) / 4);
  width: clamp(280px, calc((100% - 2 * var(--m)) / 4 - var(--m)), 360px);
  padding: 28px; display: grid; gap: 14px; background: var(--c-bg); color: var(--c-ink);
}
.jcard h2, .jcard h3 { font-family: var(--f-display); font-size: var(--t-lead); line-height: .95; text-transform: uppercase; }
.jcard .route { font-size: var(--t-body); line-height: 1.3; }
.jcard .best { font-size: var(--t-body); font-weight: 600; }
.jcard .thumb { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.jcard .tip { font-style: italic; line-height: 1.35; }
.jcard .btn { width: 100%; }
.j-maroon { --c-bg: var(--maroon); --c-ink: var(--sand); }
.j-green { --c-bg: var(--green); --c-ink: var(--sand); }
.j-saffron { --c-bg: var(--saffron); --c-ink: var(--maroon); }
.j-saffron .btn { background: var(--maroon); color: var(--saffron); }
.j-cobalt { --c-bg: var(--cobalt); --c-ink: var(--sand); }
@media (max-width: 760px) {
  .frame { min-height: 0; height: auto; display: grid; }
  .frame > img { position: relative; height: 62svh; }
  .jcard { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: none; padding: 24px var(--m) 28px; }
  .jcard .thumb { display: none; }
}

/* ---------- Places: line-up at one size, by month ---------- */
.places { background: var(--cobalt); color: var(--sand); padding: var(--gap) var(--m) 0; }
.places-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--m); align-items: end; }
.places-head h2 { font-size: var(--t-head); }
.places-head p { max-width: 40ch; }
.months { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 48px; }
.months button {
  font-family: var(--f-display); font-size: var(--t-lead); line-height: 1; min-width: 3.2em; min-height: 48px; padding: 8px 10px 6px;
  background: rgba(239, 229, 207, .1); color: var(--sand); border: 0; cursor: pointer; transition: background-color .2s, color .2s, transform .2s;
}
.months button:hover { background: rgba(239, 229, 207, .22); }
.months button:active { transform: scale(.96); }
.months button[aria-pressed="true"] { background: var(--saffron); color: var(--maroon); }
.summary { margin-top: 28px; font-size: var(--t-lead); line-height: 1.2; }
.summary b { color: var(--saffron); font-weight: 500; }
.lu { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 24px; font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.lu col.c1 { width: 33%; } .lu col.c2 { width: 33%; } .lu col.c3 { width: 20%; } .lu col.c4 { width: 14%; }
.lu td { padding: 0; height: 1.6em; vertical-align: baseline; transition: opacity .4s; }
.lu td:last-child { text-align: right; }
.lu .grp th { text-align: left; font-weight: 400; color: var(--saffron); padding: 72px 0 16px; font-family: var(--f-display); font-size: var(--t-lead); }
.lu tr.wet td { opacity: .5; }
.lu .st-best, .lu .st-fest { color: var(--saffron); }
.lu .st-fest { font-style: italic; }
@media (max-width: 760px) {
  .places-head { grid-template-columns: minmax(0, 1fr); }
  .lu, .lu tbody { display: block; }
  .lu colgroup, .lu thead { display: none; }
  .lu tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding-bottom: 18px; }
  .lu td { height: auto; }
  .lu td:nth-child(1) { grid-column: 1 / -1; font-size: var(--t-lead); }
  .lu td:nth-child(2), .lu td:nth-child(3) { font-size: var(--t-small); display: inline; }
  .lu td:nth-child(2) { grid-column: 1; }
  .lu td:nth-child(3) { grid-column: 1; }
  .lu td:nth-child(4) { grid-column: 2; grid-row: 2 / 4; font-size: var(--t-small); align-self: start; }
  .lu .grp { display: block; }
  .lu .grp th { display: block; padding: 48px 0 12px; }
}
.interlock { position: relative; z-index: 3; width: min(340px, 72%); margin: var(--gap) 0 -7em min(58%, calc(100% - 340px)); padding: 20px 22px; line-height: 1.45; background: var(--cobalt); color: var(--sand); }
@media (max-width: 760px) { .interlock { margin-left: calc(-1 * var(--m)); width: 84%; margin-bottom: -6em; } }

/* ---------- Festivals: full-bleed curtain ---------- */
.gallery { position: relative; }
.slide { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night); }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to top, rgba(10, 8, 6, .62), rgba(10, 8, 6, 0)); } /* neutral scrim under a caption: taste-skill-ignore */
.slide figcaption { position: absolute; z-index: 1; left: var(--m); bottom: var(--m); right: var(--m); color: #FFFFFF; font-size: var(--t-body); max-width: 60ch; }
@media (max-width: 760px) { .slide { height: 88svh; } }

/* ---------- About: two columns, highlighted words ---------- */
.about { background: var(--maroon); color: var(--sand); padding: var(--gap) var(--m); }
.about-text { columns: 2; column-gap: 32px; font-size: var(--t-lead); line-height: 1.24; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.about-text mark { background: var(--saffron); color: var(--maroon); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sign { margin-top: 56px; font-family: var(--f-display); font-size: var(--t-head); line-height: .9; color: var(--saffron); display: flex; flex-wrap: wrap; gap: .2em .5em; align-items: baseline; }
.sign span { font-family: "Noto Serif Sinhala", serif; font-size: var(--t-lead); color: var(--sand); }
@media (max-width: 760px) { .about-text { columns: 1; text-align: left; } }

/* ---------- Before you fly: questions beside a tall photograph ---------- */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: var(--m) clamp(32px, 6vw, 96px); padding: var(--gap) var(--m) 80px; background: var(--sand); color: var(--cobalt); }
.faq h2 { font-size: var(--t-head); }
.faq-facts { display: grid; gap: 14px; margin-top: 28px; max-width: 46ch; }
.faq-qs { margin-top: 40px; display: grid; gap: 28px; }
details summary { list-style: none; cursor: pointer; font-size: var(--t-body); font-weight: 600; position: relative; padding-right: 40px; min-height: 44px; display: flex; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
details[open] summary::after { transform: translateY(-20%) rotate(225deg); }
details p { margin-top: 8px; color: #2E52AE; max-width: 52ch; }
.faq-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 44px; }
.faq-pics { position: relative; margin-top: calc(-1 * var(--gap)); align-self: start; }
.faq-pics .tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.faq-pics .sq { position: absolute; left: -40px; bottom: -40px; width: 34%; aspect-ratio: 1; object-fit: cover; border: 0; }
.faq-pics figcaption { font-size: var(--t-small); margin-top: 52px; padding-left: 34%; }
@media (max-width: 860px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-pics { order: -1; margin-top: calc(-1 * var(--gap)); margin-inline: calc(-1 * var(--m)); }
  .faq-pics .tall { aspect-ratio: 4 / 5; }
  .faq-pics .sq { left: auto; right: var(--m); width: 38%; bottom: -36px; }
  .faq-pics figcaption { padding: 0 var(--m); width: 58%; }
  .faq-end .btn { width: 100%; }
}

/* ---------- Plan: visit card on a photograph ---------- */
.visit { position: relative; min-height: 100svh; overflow: hidden; }
.visit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard { position: relative; z-index: 1; margin: 60px 0 60px 60px; width: min(400px, calc(100% - 2 * var(--m))); padding: 32px 32px 0; background: var(--sand); color: var(--cobalt); display: grid; gap: 14px; }
.vcard h2 { font-size: var(--t-lead); font-weight: 400; line-height: 1.1; }
.vrows { display: grid; gap: 8px; margin: 6px 0 8px; }
.vrows div { display: flex; justify-content: space-between; gap: 16px; }
.vrows dt { color: #2E52AE; }
.vrows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; user-select: all; }
.vcard .btn { margin-inline: -32px; min-height: 56px; }
.vcard .note { font-size: var(--t-small); color: #2E52AE; }
@media (max-width: 700px) {
  .visit { min-height: 0; display: grid; }
  .visit > img { position: relative; height: 70svh; }
  .vcard { margin: -80px var(--m) var(--m); width: auto; padding: 24px 22px 0; }
  .vcard .btn { margin-inline: -22px; }
}

/* ---------- Footer: invitation over a cropped name ---------- */
footer { position: relative; overflow: hidden; background: var(--green); color: var(--sand); min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--gap) var(--m) 0; }
.foot-top { display: grid; grid-template-columns: 7fr 2fr 3fr; gap: 32px var(--m); align-items: start; }
.invite { font-family: var(--f-display); font-size: var(--t-head); line-height: .9; text-transform: uppercase; }
.foot-top .btn { margin-top: 28px; }
.foot-links { display: grid; gap: 8px; align-content: start; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.credits { font-size: var(--t-small); line-height: 1.5; max-width: 75ch; align-self: end; margin-top: 64px; }
.credits a { text-decoration-thickness: 1px; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-small); margin-top: 20px; }
.giant { font-family: var(--f-display); font-size: 27vw; line-height: .8; white-space: nowrap; color: var(--saffron); transform: translateY(24%); margin-top: 8px; letter-spacing: -0.03em; }
@media (max-width: 760px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .foot-links { gap: 6px; }
  .foot-top .btn { width: 100%; }
  .giant { font-size: 34vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img { animation: none; }
  .js .giant.rise:not(.in) { transform: translateY(24%); }
  .js .rise:not(.in) { transform: none; opacity: 1; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* =====================================================================
   Multi-page additions: menu, page heads, journeys, stories, viewers.
   Same rules as above: square flat buttons, flag colours by chapter.
   ===================================================================== */
.c-maroon { --c-bg: var(--maroon); --c-ink: var(--sand); --c-acc: var(--saffron); }
.c-green { --c-bg: var(--green); --c-ink: var(--sand); --c-acc: var(--saffron); }
.c-saffron { --c-bg: var(--saffron); --c-ink: var(--maroon); --c-acc: var(--maroon); }
.c-cobalt { --c-bg: var(--cobalt); --c-ink: var(--sand); --c-acc: var(--saffron); }
.c-saffron .btn { background: var(--maroon); color: var(--saffron); }
.icon-btn { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.icon-btn svg { width: 24px; height: 24px; }

/* ---------- Menu (under 900px the nav folds into a full-screen sheet) ---------- */
.menu-btn { display: none; font-family: var(--f-display); font-size: var(--t-body); letter-spacing: .05em; padding: 0 4px; }
@media (max-width: 900px) { .menu-btn { display: inline-grid; } }
.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--maroon); color: var(--sand);
  display: grid; grid-template-rows: auto 1fr auto; padding: var(--m); padding-top: calc(var(--m) + env(safe-area-inset-top, 0px));
}
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu nav { display: grid; align-content: center; gap: 6px; }
.menu nav a { font-family: var(--f-display); font-size: clamp(3rem, 15vw, 5rem); line-height: .95; text-decoration: none; text-transform: uppercase; }
.menu nav a[aria-current="page"] { color: var(--saffron); }
.menu .btn { width: 100%; }

/* ---------- Page head for inner pages ---------- */
.phead { background: var(--c-bg, var(--maroon)); color: var(--c-ink, var(--sand)); padding: clamp(140px, 18vw, 220px) var(--m) clamp(56px, 7vw, 96px); }
.phead h1 { font-size: var(--t-display); line-height: .82; }
.phead .lead { font-size: var(--t-lead); line-height: 1.2; max-width: 34ch; margin-top: 28px; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px var(--m); align-items: end; }
@media (max-width: 760px) { .phead-grid { grid-template-columns: minmax(0, 1fr); } .phead h1 { font-size: clamp(4rem, 22vw, 7rem); } }
.kicker { font-family: var(--f-display); font-size: var(--t-body); letter-spacing: .08em; color: var(--c-acc, var(--saffron)); }
.sample-note { font-size: var(--t-small); opacity: .8; margin-top: 14px; }

/* ---------- Story rings (tap-through stories, like on a phone) ---------- */
.rings { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin-top: clamp(40px, 5vw, 64px); scrollbar-width: none; }
.rings::-webkit-scrollbar { display: none; }
.ring { flex: 0 0 auto; width: 104px; scroll-snap-align: start; display: grid; justify-items: center; gap: 10px; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: center; }
.ring-img { display: block; width: 92px; height: 92px; border-radius: 50%; padding: 4px; background: var(--saffron); transition: transform .3s var(--ease); }
.ring-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-bg, var(--maroon)); }
.ring:hover .ring-img { transform: scale(1.05); }
.ring.seen .ring-img { background: rgba(239, 229, 207, .35); }
.ring span { font-size: var(--t-small); line-height: 1.2; }
.on-light .ring-img img { border-color: var(--sand); }
.on-light .ring.seen .ring-img { background: rgba(20, 63, 166, .25); }

/* ---------- Filters ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button {
  font-family: var(--f-display); font-size: var(--t-body); letter-spacing: .04em; line-height: 1; min-height: 44px; padding: 10px 14px 8px;
  background: rgba(20, 63, 166, .08); color: var(--cobalt); border: 0; cursor: pointer; transition: background-color .2s, color .2s, transform .2s;
}
.chips button:hover { background: rgba(20, 63, 166, .16); }
.chips button:active { transform: scale(.96); }
.chips button[aria-pressed="true"] { background: var(--cobalt); color: var(--sand); }

/* ---------- Story cards with a photo mosaic ---------- */
.feed { padding: clamp(56px, 7vw, 104px) var(--m) var(--gap); background: var(--sand); color: var(--cobalt); }
.feed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px var(--m); margin-bottom: clamp(32px, 4vw, 56px); }
.feed-head h2 { font-size: var(--t-head); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(40px, 4vw, 64px) var(--m); }
.card { display: grid; gap: 14px; align-content: start; text-decoration: none; }
.mosaic { position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mosaic img:first-child { grid-row: 1 / 3; }
.card:hover .mosaic img { transform: scale(1.04); }
.count { position: absolute; left: 10px; bottom: 10px; z-index: 1; font-family: var(--f-display); font-size: var(--t-body); letter-spacing: .04em; line-height: 1; padding: 8px 10px 6px; background: var(--sand); color: var(--cobalt); }
.card h3 { font-family: var(--f-display); font-size: var(--t-lead); line-height: .95; text-transform: uppercase; }
.card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.meta { font-size: var(--t-small); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tag { display: inline-block; font-family: var(--f-display); letter-spacing: .05em; padding: 4px 8px 2px; background: var(--c-bg); color: var(--c-ink); line-height: 1.1; }
.card p.dek { max-width: 46ch; }

/* featured story: big, split */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--m); align-items: end; text-decoration: none; margin-bottom: clamp(72px, 9vw, 140px); }
.feature .mosaic { aspect-ratio: 16 / 10; grid-template-columns: 3fr 1fr; grid-template-rows: repeat(3, 1fr); }
.feature .mosaic img:first-child { grid-row: 1 / 4; }
.feature h3 { font-family: var(--f-display); font-size: var(--t-head); line-height: .9; text-transform: uppercase; }
.feature:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .1em; }
.feature .dek { font-size: var(--t-lead); line-height: 1.2; }
@media (max-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature .mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); } }
.empty { font-size: var(--t-lead); }

/* ---------- Story page ---------- */
.shero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 120px var(--m) var(--m); overflow: hidden; background: var(--night); }
.shero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.scard { position: relative; z-index: 1; width: min(100%, 760px); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; background: var(--c-bg); color: var(--c-ink); }
.scard h1 { font-size: var(--t-head); }
.scard .dek { font-size: var(--t-lead); line-height: 1.2; max-width: 32ch; }
.facts-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.facts-row div { display: grid; }
.facts-row dt { font-size: var(--t-small); opacity: .8; }
.facts-row dd { margin: 0; font-family: var(--f-display); font-size: var(--t-lead); line-height: 1.05; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn.ghost:hover { background: rgba(239, 229, 207, .14); }
.c-saffron .btn.ghost { background: transparent; color: var(--maroon); }
.btn svg { width: 18px; height: 18px; margin-right: 10px; flex: none; }
@media (max-width: 700px) { .scard { margin-inline: calc(-1 * var(--m)); margin-bottom: calc(-1 * var(--m)); width: auto; } .actions .btn { flex: 1 1 auto; } }

.article { background: var(--sand); color: var(--cobalt); padding: clamp(72px, 9vw, 140px) var(--m); display: grid; gap: clamp(32px, 4vw, 56px); justify-items: center; }
.article > p { font-size: var(--t-lead); line-height: 1.32; max-width: 34ch; width: 100%; }
.article > p.lede::first-letter { font-family: var(--f-display); float: left; font-size: 4.6em; line-height: .78; margin: .06em .08em 0 0; color: var(--maroon); }
.article figure { width: min(100%, 1180px); display: grid; gap: 10px; }
.article figure button { all: unset; cursor: zoom-in; display: block; }
.article figure button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.article figure img, .article figure video { width: 100%; max-height: 86svh; object-fit: cover; }
.article figure.tall { width: min(100%, 640px); }
.article figcaption { font-size: var(--t-small); }
.article .pair { width: min(100%, 1180px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); align-items: start; }
.article .pair figure { width: 100%; }
.article .pair figure:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); }
.article .pair img { aspect-ratio: 4 / 5; }
.article blockquote { margin: 0; width: min(100%, 980px); font-family: var(--f-display); font-size: var(--t-head); line-height: .92; text-transform: uppercase; color: var(--maroon); text-wrap: balance; }
@media (max-width: 700px) { .article .pair { grid-template-columns: minmax(0, 1fr); } .article .pair figure:nth-child(2) { margin-top: 0; width: 78%; justify-self: end; } }

.photos { background: var(--night); color: var(--sand); padding: clamp(72px, 9vw, 140px) var(--m); }
.photos-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px var(--m); margin-bottom: 36px; }
.photos-head h2 { font-size: var(--t-head); }
.grid { columns: 3 260px; column-gap: 8px; }
.grid button { all: unset; display: block; cursor: zoom-in; margin-bottom: 8px; break-inside: avoid; position: relative; }
.grid button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.grid img { width: 100%; height: auto; transition: opacity .3s; }
.grid button:hover img { opacity: .85; }
.grid .play { position: absolute; left: 10px; top: 10px; font-family: var(--f-display); background: var(--saffron); color: var(--maroon); padding: 5px 8px 3px; line-height: 1; }

.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-note { font-size: var(--t-small); min-height: 1.4em; }

.followed { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--c-bg); color: var(--c-ink); }
.followed img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.followed > div { padding: clamp(32px, 5vw, 72px) var(--m); display: grid; gap: 16px; align-content: center; }
.followed h2 { font-family: var(--f-display); font-size: var(--t-head); line-height: .9; text-transform: uppercase; }
@media (max-width: 760px) { .followed { grid-template-columns: minmax(0, 1fr); } .followed img { min-height: 0; aspect-ratio: 4 / 3; } }

.pager { display: grid; grid-template-columns: 1fr 1fr; background: var(--sand); color: var(--cobalt); }
.pager a { display: grid; gap: 8px; padding: clamp(32px, 5vw, 64px) var(--m); text-decoration: none; transition: background-color .25s; }
.pager a:hover { background: rgba(20, 63, 166, .07); }
.pager a + a { text-align: right; border-left: 1px solid rgba(20, 63, 166, .2); }
.pager strong { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lead); line-height: .95; text-transform: uppercase; }
@media (max-width: 600px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager a + a { text-align: left; border-left: 0; border-top: 1px solid rgba(20, 63, 166, .2); } }

/* ---------- Journeys index ---------- */
.jlist { background: var(--sand); color: var(--cobalt); }
.jrow { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 86svh; }
.jrow:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.jrow:nth-child(even) .jrow-pics { order: 2; }
.jrow-pics { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: var(--night); }
.jrow-pics img, .jrow-pics video { width: 100%; height: 100%; object-fit: cover; }
.jrow-pics > :first-child { grid-row: 1 / 3; }
.jrow-text { background: var(--c-bg); color: var(--c-ink); padding: clamp(32px, 5vw, 72px) var(--m); display: grid; gap: 16px; align-content: center; }
.jrow-text h2 { font-family: var(--f-display); font-size: var(--t-head); line-height: .9; text-transform: uppercase; }
.jrow-text .route { font-size: var(--t-lead); line-height: 1.2; }
.jrow-text .tip { font-style: italic; max-width: 40ch; }
.jrow-text .best { font-weight: 600; }
.jrow-text .actions { margin-top: 10px; }
@media (max-width: 860px) { .jrow, .jrow:nth-child(even) { grid-template-columns: minmax(0, 1fr); min-height: 0; } .jrow:nth-child(even) .jrow-pics { order: 0; } .jrow-pics { aspect-ratio: 4 / 3; } }
.custom { background: var(--cobalt); color: var(--sand); padding: var(--gap) var(--m); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px var(--m); align-items: end; }
.custom h2 { font-size: var(--t-head); }
.custom p { font-size: var(--t-lead); line-height: 1.2; max-width: 32ch; }
@media (max-width: 760px) { .custom { grid-template-columns: minmax(0, 1fr); } .custom .btn { width: 100%; } }

/* ---------- Journey page ---------- */
.jhero .jcard h1 { font-family: var(--f-display); font-size: var(--t-head); line-height: .9; text-transform: uppercase; }
.jhero .jcard { --k: 0; width: clamp(280px, 34vw, 440px); }
.jhero .back { font-size: var(--t-small); }
.jhero::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(rgba(10, 8, 6, .55), rgba(10, 8, 6, 0)); pointer-events: none; } /* neutral scrim under the top bar: taste-skill-ignore */
.jhero .jcard { z-index: 2; }
@media (max-width: 760px) { .jhero .jcard { width: 100%; } }
.strip-wrap { background: var(--night); color: var(--sand); padding: clamp(56px, 7vw, 96px) 0; }
.strip-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px var(--m); padding: 0 var(--m) 28px; }
.strip-head h2 { font-size: var(--t-head); }
.strip-ctl { display: flex; gap: 4px; align-items: center; }
.strip-ctl .icon-btn { background: rgba(239, 229, 207, .1); transition: background-color .2s; }
.strip-ctl .icon-btn:hover { background: rgba(239, 229, 207, .22); }
.strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--m); scroll-padding: 0 var(--m); scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip button { all: unset; flex: 0 0 auto; scroll-snap-align: start; cursor: zoom-in; display: grid; gap: 10px; }
.strip button:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.strip img { height: min(62svh, 560px); width: auto; max-width: 86vw; object-fit: cover; }
.strip span { font-size: var(--t-small); max-width: 40ch; }
.plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px var(--m); padding: var(--gap) var(--m); background: var(--sand); color: var(--cobalt); }
.plan h2 { font-size: var(--t-head); position: sticky; top: 10vh; }
.days { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.days li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid rgba(20, 63, 166, .22); }
.days li:last-child { border-bottom: 1px solid rgba(20, 63, 166, .22); }
.days b { font-family: var(--f-display); font-weight: 400; font-size: var(--t-head); line-height: .8; color: var(--maroon); }
.days small { display: block; font-family: var(--f-display); font-size: var(--t-small); letter-spacing: .06em; }
.days p { font-size: var(--t-lead); line-height: 1.22; }
@media (max-width: 760px) { .plan { grid-template-columns: minmax(0, 1fr); } .plan h2 { position: static; } }
.season { margin-top: 40px; }
.season h3 { font-family: var(--f-display); font-size: var(--t-lead); line-height: 1; margin-bottom: 14px; }
.mbar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.mbar div { display: grid; gap: 6px; text-align: center; font-size: var(--t-small); }
.mbar i { display: block; height: 36px; background: rgba(20, 63, 166, .14); }
.mbar .lv1 i { background: rgba(20, 63, 166, .45); }
.mbar .lv2 i { background: var(--saffron); }
.mbar .now { font-weight: 600; text-decoration: underline; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--t-small); }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--sw); }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.others a { position: relative; display: grid; align-items: end; min-height: 360px; padding: var(--m); text-decoration: none; color: var(--sand); overflow: hidden; background: var(--night); }
.others img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); transition: transform .8s var(--ease); }
.others a:hover img { transform: scale(1.05); }
.others span { position: relative; font-family: var(--f-display); font-size: var(--t-lead); line-height: .95; text-transform: uppercase; }
.others small { position: relative; display: block; font-family: var(--f-text); text-transform: none; font-size: var(--t-small); margin-top: 6px; }
@media (max-width: 760px) { .others { grid-template-columns: minmax(0, 1fr); } .others a { min-height: 220px; } }

/* home: link under each journey card, and the "from the road" band */
.jcard .more { font-size: var(--t-small); justify-self: start; }
.road { background: var(--green); color: var(--sand); padding: var(--gap) var(--m); }
.road-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--m); align-items: end; }
.road-head h2 { font-size: var(--t-head); }
.road-head p { max-width: 40ch; }
.road .cards { margin-top: clamp(48px, 6vw, 80px); }
.road .count { background: var(--saffron); color: var(--maroon); }
.road .ring-img img { border-color: var(--green); }
.road-foot { margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 760px) { .road-head { grid-template-columns: minmax(0, 1fr); } .road-foot .btn { width: 100%; } }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(13, 10, 8, .97); color: var(--sand); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 8px var(--m); padding-top: calc(8px + env(safe-area-inset-top, 0px)); font-family: var(--f-display); font-size: var(--t-body); letter-spacing: .05em; }
.lb-stage { position: relative; display: grid; place-items: center; padding: 0 clamp(8px, 6vw, 96px); min-height: 0; touch-action: pan-y; }
.lb-stage { overflow: hidden; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.lb-stage .lb-media { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(239, 229, 207, .1); }
.lb-nav:hover { background: rgba(239, 229, 207, .22); }
.lb-prev { left: var(--m); } .lb-next { right: var(--m); }
@media (max-width: 700px) { .lb-nav { display: none; } .lb-stage { padding: 0; } }
.lb-cap { padding: 14px var(--m); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; max-width: 80ch; }
.lb-cap small { opacity: .75; font-size: var(--t-small); }
.lb-cap small a { color: inherit; }

/* ---------- Story viewer (full-screen, tap through) ---------- */
.sv { position: fixed; inset: 0; z-index: 60; background: #0D0A08; color: #FFFFFF; display: grid; place-items: center; }
.sv-frame { position: relative; width: min(100vw, calc(100svh * 9 / 16)); height: min(100svh, calc(100vw * 16 / 9)); overflow: hidden; background: var(--night); }
@media (max-width: 600px) { .sv-frame { width: 100vw; height: 100svh; } }
.sv-media { position: absolute; inset: 0; }
.sv-media img, .sv-media video { width: 100%; height: 100%; object-fit: cover; }
.sv-media img, .sv-media video { position: absolute; inset: 0; }
.sv-media img.fit, .sv-media video.fit { object-fit: contain; }
.sv-media img.bg { object-fit: cover; filter: blur(26px) brightness(.5); transform: scale(1.25); }
.sv-frame::before, .sv-frame::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; } /* neutral scrims under text: taste-skill-ignore */
.sv-frame::before { top: 0; height: 150px; background: linear-gradient(rgba(10, 8, 6, .62), rgba(10, 8, 6, 0)); }
.sv-frame::after { bottom: 0; height: 240px; background: linear-gradient(rgba(10, 8, 6, 0), rgba(10, 8, 6, .72)); }
.sv-bars { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; display: flex; gap: 3px; }
.sv-bars span { flex: 1; height: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sv-bars i { display: block; height: 100%; width: 0; background: #FFFFFF; }
.sv-bars .done i { width: 100%; }
.sv-head { position: absolute; z-index: 3; top: calc(22px + env(safe-area-inset-top, 0px)); left: 10px; right: 4px; display: flex; align-items: center; gap: 10px; }
.sv-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--saffron); }
.sv-head div { flex: 1; min-width: 0; line-height: 1.15; }
.sv-head strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-head small { font-size: .8rem; opacity: .85; }
.sv-cap { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; }
.sv-cap p { font-size: 1.2rem; line-height: 1.25; }
.sv-cap .btn { justify-self: start; min-height: 46px; }
.sv-tap { position: absolute; z-index: 2; top: 70px; bottom: 120px; width: 50%; background: none; border: 0; cursor: pointer; padding: 0; }
.sv-tap.l { left: 0; } .sv-tap.r { right: 0; }
.sv-tap:focus-visible { outline: 3px solid var(--saffron); outline-offset: -6px; }
.sv-side { position: absolute; top: 50%; transform: translateY(-50%); color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.sv-side:hover { background: rgba(255, 255, 255, .24); }
.sv-side.l { right: calc(50% + min(50vw, calc(100svh * 9 / 32)) + 16px); }
.sv-side.r { left: calc(50% + min(50vw, calc(100svh * 9 / 32)) + 16px); }
@media (max-width: 900px) { .sv-side { display: none; } }
.paused .sv-bars i { animation-play-state: paused !important; }
body.locked { overflow: hidden; }
@keyframes svfill { from { width: 0; } to { width: 100%; } }
.sv-head .icon-btn { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .mosaic img, .others img { transition: none; }
}