/*
  Let's Never Settle. Baseline stylesheet.
  Dark and light theme variables (toggled by theme.php cookie).
  Cormorant Garamond for headlines, Inter for body, champagne gold accent.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
*/

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap");

:root {
  --ink:        #0a0a0a;
  --ink-2:      #111111;
  --cream:      #ece6d8;
  --cream-soft: rgba(236, 230, 216, 0.72);
  --muted:      #8a857c;
  --line:       rgba(236, 230, 216, 0.18);
  --gold:       #c9a96e;
  --gold-2:     #d8be88;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="light"] {
  --ink:        #f5f1e8;
  --ink-2:      #ece6d6;
  --cream:      #15110c;
  --cream-soft: rgba(21, 17, 12, 0.74);
  --muted:      #6a6357;
  --line:       rgba(21, 17, 12, 0.20);
  --gold:       #8c6a1e;
  --gold-2:     #b0894a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
::selection { background: var(--gold); color: var(--ink); }

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 80px 32px;
}
.content { text-align: center; max-width: 640px; }
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.0;
  margin-bottom: 24px;
}
.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--cream);
  margin-bottom: 24px;
}
.status {
  font-size: 0.9rem;
  color: var(--cream-soft);
}

.footer {
  border-top: 1px solid var(--line);
  padding: 40px 32px;
  text-align: center;
  color: var(--cream-soft);
}
.footer__brand {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--cream);
  margin-bottom: 6px;
}
.footer__copy {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.footer__credit {
  font-size: 0.72rem;
  color: var(--muted);
}
.footer__credit a {
  color: var(--cream-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.footer__credit a:hover { color: var(--gold); border-bottom-color: var(--gold); }


/* ==========================================================================
   Let's Never Settle - warm travel-journal theme (polished-modern).
   Re-themes the baseline tokens to a sunny, warm register and adds the
   homepage components. Extends the token system above; does not replace it.
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
   ========================================================================== */

/* --- Warm palette override (default = warm night) --- */
:root {
  --ink:        #271d12;   /* warm amber charcoal             */
  --ink-2:      #33271a;   /* raised warm surface             */
  --cream:      #f9efdb;   /* sunlit paper text               */
  --cream-soft: rgba(245, 236, 221, 0.72);
  --muted:      #a99e8c;
  --line:       rgba(245, 236, 221, 0.16);
  --gold:       #edb95a;   /* sun gold (kept token name)      */
  --gold-2:     #edc879;

  --terracotta: #e8814a;   /* primary accent (map markers)    */
  --terracotta-ink: #241009;
  --sky:        #8fb8a8;   /* secondary - warm sage-teal      */
  --sea:        #302a1e;   /* map backdrop - warm dusk        */
  --map-land:   rgba(245, 236, 221, 0.13);
  --card:       #33271a;
}

[data-theme="light"] {
  --ink:        #fdf3de;   /* sunlit paper background         */
  --ink-2:      #f6e8cb;
  --cream:      #2c2219;   /* warm ink text                   */
  --cream-soft: rgba(44, 34, 25, 0.74);
  --muted:      #7c7161;
  --line:       rgba(44, 34, 25, 0.16);
  --gold:       #b7841f;
  --gold-2:     #cf9c3a;

  --terracotta: #c85f2c;
  --terracotta-ink: #fff6ef;
  --sky:        #3a7d92;
  --sea:        #efdcb2;
  --map-land:   rgba(44, 34, 25, 0.15);
  --card:       #fbf4e6;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 3px;
}

.eyebrow { margin-bottom: 18px; }

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.section-lede {
  color: var(--cream-soft);
  font-size: 1.05rem;
  max-width: 46ch;
  margin-top: 12px;
}

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--terracotta-ink);
  background: var(--terracotta);
  padding: 13px 26px;
  border-radius: 999px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.btn:hover { background: var(--gold); transform: translateY(-2px); }

/* --- Header / nav --- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(20px, 5vw, 56px);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__brand { display: flex; align-items: center; gap: 12px; }
.site-head__logo {
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 5px;
  background: var(--cream);
}
.site-head__word {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}
.site-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
.site-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.site-nav a:hover { color: var(--terracotta); }
.theme-toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--cream);
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.theme-toggle:hover { color: var(--terracotta); border-color: var(--terracotta); }

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 12vw, 128px) clamp(20px, 5vw, 56px) clamp(48px, 8vw, 88px);
  max-width: 1180px;
  margin: 0 auto;
}
.hero__inner { position: relative; z-index: 2; max-width: 620px; }
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hero__title em { font-style: italic; color: var(--terracotta); }
.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  color: var(--cream-soft);
  max-width: 30ch;
  margin-bottom: 30px;
}
.hero__cue a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.hero__cue a:hover { color: var(--gold); }
.hero__orbit {
  position: absolute;
  top: 50%;
  right: clamp(-160px, -6vw, -40px);
  transform: translateY(-50%);
  width: clamp(340px, 46vw, 620px);
  height: auto;
  color: var(--sky);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}
.hero__orbit-path { stroke-dasharray: 4 10; opacity: 0.9; }
.hero__plane { color: var(--terracotta); }
@media (prefers-reduced-motion: no-preference) {
  .hero__plane {
    offset-path: path("M300 40 a260 260 0 1 0 250 180");
    offset-rotate: auto;
    animation: heroFly 16s linear infinite;
  }
  @keyframes heroFly { to { offset-distance: 100%; } }
}
@media (max-width: 700px) { .hero__orbit { opacity: 0.28; } }

/* --- Map section --- */
.mapsection {
  padding: clamp(20px, 4vw, 40px) clamp(14px, 3vw, 40px) clamp(48px, 8vw, 88px);
  max-width: min(1520px, 97vw);
  margin: 0 auto;
  scroll-margin-top: 84px;
}
.mapsection__head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.mapsection__frame {
  background: var(--sea);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(16px, 3vw, 34px);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6);
}

/* Restyle the pre-seeded travel-map component via its hooks. */
.tmap__land { fill: var(--map-land); opacity: 1; }
.tmap__marker { color: var(--terracotta); }
.tmap__marker-dot { stroke: var(--ink); stroke-width: 1; }
.tmap__empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  opacity: 0.8;
  padding-top: 18px;
}
.tmap__panel {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  max-width: 520px;
  margin-inline: auto;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
}
.tmap__panel-title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.tmap__panel-list a { border-bottom: 1px solid transparent; }
.tmap__panel-list a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.tmap__panel-close:hover { color: var(--terracotta); }

/* --- Latest stories --- */
.latest {
  padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.latest__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.latest__all {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  white-space: nowrap;
}
.latest__all:hover { color: var(--gold); }
.latest__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.postcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.postcard:hover { transform: translateY(-4px); border-color: var(--terracotta); }
.postcard__link { display: block; padding: 24px; height: 100%; }
.postcard__place {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.postcard__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.12;
  margin-bottom: 10px;
}
.postcard__excerpt { color: var(--cream-soft); font-size: 0.95rem; margin-bottom: 14px; }
.postcard__date { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
.latest__empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream-soft);
  max-width: 40ch;
}

/* --- About teaser --- */
.teaser {
  padding: clamp(56px, 10vw, 110px) clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.teaser__inner { max-width: 620px; margin: 0 auto; text-align: center; }
.teaser__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 20px;
}
.teaser__body { color: var(--cream-soft); font-size: 1.1rem; margin-bottom: 28px; }

@media (max-width: 560px) {
  .site-head__word { display: none; }
}

/* --- Travel map v3 colour system (consumed by partials/travel-map.php) --- */
:root {
  --tmap-sea-a:   #3a352a;                          /* ocean, lit centre   */
  --tmap-sea-b:   #201a10;                          /* ocean, dark edges   */
  --tmap-land:    #5a5340;                          /* unvisited country   */
  --tmap-border:  rgba(249, 239, 219, 0.13);        /* country borders     */
  --tmap-visited: #a3603a;                          /* visited: warm ember */
}
[data-theme="light"] {
  --tmap-sea-a:   #f4e5c4;
  --tmap-sea-b:   #e3cd9d;
  --tmap-land:    #cdb283;
  --tmap-border:  rgba(44, 34, 25, 0.14);
  --tmap-visited: #dd8c50;
}

/* ==========================================================================
   Postcard-warmth pass - sun-washed travel-journal art direction.
   Handwritten accents, sunset light, film grain, airmail details.
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
   ========================================================================== */
:root { --hand: "Caveat", "Segoe Script", cursive; }

/* --- Atmosphere: warm light wash + film grain over everything --- */
body {
  background:
    radial-gradient(1100px 700px at 12% -6%, rgba(237, 185, 90, 0.16), transparent 60%),
    radial-gradient(1000px 800px at 88% 30%, rgba(232, 129, 74, 0.10), transparent 55%),
    radial-gradient(900px 700px at 40% 105%, rgba(143, 184, 168, 0.08), transparent 60%),
    var(--ink);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: overlay;
}

/* --- Handwritten accents where a human voice belongs --- */
.eyebrow {
  font-family: var(--hand); font-size: 1.45rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: none; color: var(--gold);
}
.hero__tagline { font-family: var(--hand); font-style: normal; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--gold-2); max-width: 34ch; }
.section-lede { font-family: var(--hand); font-size: 1.5rem; letter-spacing: 0.01em; }
.latest__all { font-family: var(--hand); font-size: 1.3rem; text-transform: none; letter-spacing: 0.02em; color: var(--gold); }
.hero__cue a { font-family: var(--hand); font-size: 1.25rem; text-transform: none; letter-spacing: 0.02em; }

/* "never" glows like late sun */
.hero__title em {
  background: linear-gradient(100deg, var(--terracotta), var(--gold) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Hero: low sun on the horizon --- */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 40px; top: 60px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(237,185,90,.26), rgba(232,129,74,.10) 42%, transparent 62%);
  filter: blur(6px);
}

/* --- The map is a postcard: airmail-striped frame + corner stamp --- */
.mapsection__frame {
  position: relative;
  background: var(--sea);
  border: 7px solid transparent;
  border-image: repeating-linear-gradient(-45deg,
    var(--terracotta) 0 14px, var(--cream) 14px 26px,
    var(--sky) 26px 40px, var(--cream) 40px 52px) 7;
  border-radius: 0;
  box-shadow: 0 34px 80px -42px rgba(0, 0, 0, 0.75);
}
.mapsection__frame::after {
  content: "✈"; position: absolute; z-index: 7; top: 14px; right: 16px;
  width: 46px; height: 54px; display: grid; place-items: center;
  font-size: 1.35rem; color: var(--terracotta);
  border: 2px dashed color-mix(in srgb, var(--terracotta) 65%, transparent);
  border-radius: 3px; transform: rotate(7deg);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  pointer-events: none;
}
.mapsection__head .section-title::after {
  content: " ✦"; color: var(--gold); font-size: 0.6em; vertical-align: super;
}

/* --- Story cards become actual postcards --- */
.postcard {
  position: relative;
  background: linear-gradient(160deg, var(--ink-2), color-mix(in srgb, var(--ink-2) 84%, var(--terracotta) 16%));
  border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.latest__grid .postcard:nth-child(odd)  { transform: rotate(-1.1deg); }
.latest__grid .postcard:nth-child(even) { transform: rotate(0.9deg) translateY(6px); }
.latest__grid .postcard:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8);
}
.postcard::before {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 34px; height: 40px; border: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 2px; transform: rotate(6deg); opacity: .8;
}
.postcard__place { font-family: var(--hand); font-size: 1.25rem; color: var(--gold); padding-right: 52px; }
.postcard__date { font-family: var(--hand); font-size: 1.05rem; }

/* --- About teaser: warm band of light --- */
.teaser {
  background:
    radial-gradient(600px 300px at 18% 0%, rgba(237, 185, 90, 0.12), transparent 60%),
    var(--ink-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* Map story panel picks up the warmth too */
.tmap__panel { background: color-mix(in srgb, #33271a 88%, transparent); }
.tmap__panel-sub { font-family: var(--hand); font-size: 1.05rem; }
.tmap__tooltip { font-family: var(--hand); font-size: 1.15rem; }
.tmap__tooltip small { font-family: var(--sans); }

/* ==========================================================================
   Cutting-edge travel magazine pass - masthead type, kinetic ticker,
   editorial index. Fraunces display over Inter body, Caveat only as marginalia.
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
   ========================================================================== */
:root { --display: "Fraunces", "Cormorant Garamond", serif; }

/* --- Masthead hero: cover-sized typography --- */
.hero { max-width: none; padding-top: clamp(40px, 6vw, 72px); }
.hero__inner { max-width: min(1520px, 94vw); margin: 0 auto; }
.hero__kicker {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 2px; margin-bottom: clamp(24px, 4vw, 48px);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-soft);
}
.hero__title.mast {
  display: block; margin-bottom: clamp(20px, 3vw, 36px);
  font-family: var(--display); font-weight: 560; letter-spacing: -0.035em;
}
.mast__line {
  display: block;
  font-size: clamp(4rem, 14.5vw, 12.5rem);
  line-height: 0.86; text-transform: uppercase;
}
.mast__line--accent { margin-left: clamp(0.6em, 8vw, 1.2em); }
.mast__line--accent em {
  font-style: italic; font-weight: 420;
  background: linear-gradient(100deg, var(--terracotta), var(--gold) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mast__dot { color: var(--terracotta); }
.hero__stats {
  display: flex; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.5vw, 30px);
}
.hero__stats span { display: grid; }
.hero__stats strong {
  font-family: var(--display); font-weight: 480;
  font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 1; color: var(--gold);
}
.hero__stats em {
  font-style: normal; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .mast__line { opacity: 0; transform: translateY(0.35em); animation: mastIn .9s var(--ease) forwards; }
  .mast__line:nth-child(2) { animation-delay: .12s; }
  .mast__line:nth-child(3) { animation-delay: .24s; }
  @keyframes mastIn { to { opacity: 1; transform: translateY(0); } }
}

/* --- Destination ticker: the collection, in motion --- */
.ticker {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 52px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track { display: inline-block; }
.ticker__item {
  font-family: var(--display); font-weight: 480; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: 0.02em;
  color: var(--cream); opacity: 0.85;
}
.ticker__sep { color: var(--gold); margin: 0 1.1em; font-size: 0.9em; }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: tickerRoll 90s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  @keyframes tickerRoll { to { transform: translateX(-50%); } }
}

/* --- Editorial index rows (replaces the card grid) --- */
.latest { max-width: min(1520px, 94vw); }
.mag-index { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.mag-index__row { border-top: 1px solid var(--line); }
.mag-index__row:last-child { border-bottom: 1px solid var(--line); }
.mag-index__link {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 2.6vw, 30px) 4px;
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.mag-index__no {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1rem; color: var(--terracotta);
}
.mag-index__title {
  display: block;
  font-family: var(--display); font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.05;
  transition: font-style .1s, color .3s var(--ease);
}
.mag-index__meta {
  display: block; margin-top: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-soft);
}
.mag-index__arrow {
  font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--terracotta); transition: transform .3s var(--ease);
}
.mag-index__row:hover .mag-index__link { background: color-mix(in srgb, var(--terracotta) 7%, transparent); padding-left: clamp(10px, 1.5vw, 20px); }
.mag-index__row:hover .mag-index__title { font-style: italic; color: var(--gold); }
.mag-index__row:hover .mag-index__arrow { transform: translateX(8px); }

/* Display face for the big headings site-wide */
.section-title, .teaser__title { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
.tmap__panel-title { font-family: var(--display); }

/* ==========================================================================
   Colour + legibility pass. Small text back to clean sans (cursive reserved
   for large decorative accents only); more colour in the editorial details.
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.
   ========================================================================== */
:root {
  --sage: #8fb8a8;
  --rose: #d98a92;
  --olive: #aec177;
}

/* --- De-cursive small text: tooltips, labels, links --- */
.tmap__tooltip { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; }
.tmap__panel-sub { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.section-lede { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; }
.hero__cue a { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); }
.latest__all { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.postcard__date, .postcard__place { font-family: var(--sans); }

/* --- The spectrum rule: a signature multi-colour hairline --- */
.hero__kicker { border-bottom: none; position: relative; padding-bottom: 12px; }
.hero__kicker::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--terracotta) 0 22%, var(--gold) 22% 44%, var(--sage) 44% 62%,
    var(--rose) 62% 80%, var(--olive) 80% 100%);
}
.footer { position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
  background: linear-gradient(90deg,
    var(--olive) 0 20%, var(--rose) 20% 38%, var(--sage) 38% 56%,
    var(--gold) 56% 78%, var(--terracotta) 78% 100%);
}

/* --- Colour the editorial details --- */
.hero__stats span:nth-child(1) strong { color: var(--terracotta); }
.hero__stats span:nth-child(2) strong { color: var(--gold); }
.hero__stats span:nth-child(3) strong { color: var(--sage); }
.ticker__sep:nth-of-type(5n+1) { color: var(--terracotta); }
.ticker__sep:nth-of-type(5n+2) { color: var(--gold); }
.ticker__sep:nth-of-type(5n+3) { color: var(--sage); }
.ticker__sep:nth-of-type(5n+4) { color: var(--rose); }
.ticker__sep:nth-of-type(5n)   { color: var(--olive); }
.mag-index__row:nth-child(5n+1) .mag-index__no, .mag-index__row:nth-child(5n+1) .mag-index__arrow { color: var(--terracotta); }
.mag-index__row:nth-child(5n+2) .mag-index__no, .mag-index__row:nth-child(5n+2) .mag-index__arrow { color: var(--gold); }
.mag-index__row:nth-child(5n+3) .mag-index__no, .mag-index__row:nth-child(5n+3) .mag-index__arrow { color: var(--sage); }
.mag-index__row:nth-child(5n+4) .mag-index__no, .mag-index__row:nth-child(5n+4) .mag-index__arrow { color: var(--rose); }
.mag-index__row:nth-child(5n)   .mag-index__no, .mag-index__row:nth-child(5n)   .mag-index__arrow { color: var(--olive); }
.site-nav a:nth-child(1):hover { color: var(--terracotta); }
.site-nav a:nth-child(2):hover { color: var(--gold); }
.site-nav a:nth-child(3):hover { color: var(--sage); }

/* --- The map takes the stage: full-bleed width, full-world height --- */
.mapsection {
  max-width: none;
  padding-left: clamp(8px, 1.2vw, 20px);
  padding-right: clamp(8px, 1.2vw, 20px);
}
.mapsection__frame { padding: clamp(8px, 1.2vw, 18px); }

/* --- Article photo essay --- */
.article__photo { margin: clamp(24px, 4vw, 44px) 0; }
.article__photo img {
  width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.65);
}
.article__photo figcaption {
  margin-top: 10px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-soft);
}
.article__photo figcaption::before { content: ""; color: var(--terracotta); }

/* --- Video episodes in articles: modest inline size, fullscreen is the
       player's job --- */
.article__video { margin: clamp(20px, 3vw, 36px) 0; max-width: 640px; }
.article__video iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: 10px; box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.6);
  background: #000;
}
.article__video figcaption {
  margin-top: 10px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-soft);
}
.article__video figcaption::before { content: "▶ "; color: var(--terracotta); }
.article__video figcaption a { color: var(--gold); border-bottom: 1px solid var(--line); }

/* --- Follow strip: the journey continues off-site --- */
.follow { display: flex; gap: clamp(14px, 3vw, 28px); flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.follow a {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.follow a:hover { transform: translateY(-2px); }
.follow a:nth-child(1):hover { color: #ff5b4d; border-color: #ff5b4d; }
.follow a:nth-child(2):hover { color: var(--sage); border-color: var(--sage); }
.follow a:nth-child(3):hover { color: var(--rose); border-color: var(--rose); }
.article__vidnote { color: var(--cream-soft); font-size: 0.98rem; max-width: 62ch; margin-top: -8px; }

/* --- Article pages: proper editorial layout for the long-form write-ups.
       Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie
       and Tech Generation Ltd. --- */
.article-page { padding: clamp(28px, 6vw, 72px) clamp(18px, 5vw, 40px) clamp(48px, 8vw, 96px); }
.article { max-width: 720px; margin: 0 auto; }
.article__meta {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-soft); display: flex; gap: 10px; align-items: center;
}
.article__meta a { color: var(--gold); }
.article__title {
  font-family: var(--display); font-weight: 560;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02;
  letter-spacing: -0.01em; margin: 14px 0 12px;
}
.article__excerpt {
  font-family: var(--display); font-style: italic; font-weight: 340;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.5;
  color: var(--cream-soft); max-width: 56ch; margin-bottom: 8px;
}
.article__head { border-bottom: 1px solid var(--line); padding-bottom: clamp(18px, 3vw, 30px); margin-bottom: clamp(22px, 4vw, 40px); }
.article__body p { max-width: 66ch; line-height: 1.75; margin: 0 0 1.25em; }
.article__body h2 {
  font-family: var(--display); font-weight: 540; font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15; margin: clamp(30px, 5vw, 48px) 0 14px;
}
.article__body h2::before { content: "◆ "; font-size: 0.55em; vertical-align: 0.3em; color: var(--terracotta); }
.article__body a { color: var(--gold); border-bottom: 1px solid var(--line); }
.article__body a:hover { border-bottom-color: var(--gold); }
.article__body strong { color: var(--cream); }
.article__cta {
  margin-top: clamp(28px, 5vw, 44px); padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.95rem; color: var(--cream-soft);
}

/* --- Blog index: editorial list in the magazine register.
       Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie
       and Tech Generation Ltd. --- */
.blog-index { max-width: 780px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) clamp(18px, 5vw, 40px) clamp(48px, 8vw, 96px); }
.blog-index__meta {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-soft); display: flex; gap: 10px; align-items: center;
}
.blog-index__meta a { color: var(--gold); }
.blog-index__head h1 {
  font-family: var(--display); font-weight: 560;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; letter-spacing: -0.01em;
  margin: 14px 0 10px;
}
.blog-index__sub {
  font-family: var(--display); font-style: italic; font-weight: 340;
  font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--cream-soft);
}
.blog-index__head { border-bottom: 1px solid var(--line); padding-bottom: clamp(18px, 3vw, 28px); margin-bottom: 6px; }
.blog-index__list { list-style: none; margin: 0; padding: 0; }
.blog-index__item { border-bottom: 1px solid var(--line); }
.blog-index__item a { display: block; padding: clamp(16px, 2.6vw, 24px) 4px; }
.blog-index__date {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-soft);
}
.blog-index__title {
  font-family: var(--display); font-weight: 520;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.12; margin: 4px 0 6px;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.blog-index__title::after { content: " \2192"; opacity: 0; transition: opacity .25s var(--ease); }
.blog-index__item a:hover .blog-index__title::after { opacity: 1; }
.blog-index__item:nth-child(5n+1) a:hover .blog-index__title { color: var(--terracotta); }
.blog-index__item:nth-child(5n+2) a:hover .blog-index__title { color: var(--gold); }
.blog-index__item:nth-child(5n+3) a:hover .blog-index__title { color: var(--sage); }
.blog-index__item:nth-child(5n+4) a:hover .blog-index__title { color: var(--rose); }
.blog-index__item:nth-child(5n)   a:hover .blog-index__title { color: var(--olive); }
.blog-index__excerpt { color: var(--cream-soft); font-size: 0.95rem; line-height: 1.6; max-width: 62ch; }
.blog-index__empty { color: var(--cream-soft); padding: 24px 0; }