/* ===========================================================
   Mantra Joshi - mantrajoshi.co.in
   Poster / zine aesthetic: cream base, color-drenched sections,
   Anton display type, sticker shadows, glassmorphism on color.
   Pure CSS, no frameworks.
   =========================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Height of the two-row mobile navbar (wordmark row + pill row). Everything
     that has to clear the fixed navbar -- breadcrumbs especially -- derives its
     offset from this single value, so the two can never drift apart again.
     Previously this was a 126px literal repeated in three places, and changing
     the navbar silently hid the breadcrumbs behind it. */
  --nav-h-mobile: 108px;

  /* Core palette */
  --cream: #ece9df;
  --cream-2: #f4f1e9;
  --paper: #f4efe4;          /* light text on dark/colored */
  --ink: #1a1922;
  --ink-soft: #4a4754;

  /* Jewel-tone accents (sourced from WTF podcast thumbnails) */
  --crimson: #7a1622;   /* oxblood (primary deep red) */
  --green:  #12716e;    /* deep teal */
  --gold:   #e3a92e;    /* amber */
  --blue:   #2a3aa0;    /* royal indigo */
  --purple: #b0316a;    /* berry */
  --coral:  #e8604c;
  --accent: #2a3aa0;    /* royal indigo (name accent, from WTF thumbnails) */

  /* Fonts */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Glass (reads because it sits on saturated color) */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.75);
  --glass-blur: 16px;
  --glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);

  /* Sticker / poster shadow */
  --sticker: 4px 4px 0 var(--ink);

  --max-w: 1120px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* The reset above suits buttons, cards and nav, but a plain link inside
   running text must still look like a link. Classed links (buttons, chips)
   keep their own styles. */
:is(.cs-para, .em-beat, .em-hub-lede, .em-hub-note, .start-more, .cs-disclaimer, .cs-ideadisc, .cs-ideabox-note, .cs-empty) a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.em-read :is(.cs-para, .em-beat, .start-more, .cs-disclaimer) a:not([class]) { color: var(--crimson); }
.em-read :is(.cs-para, .em-beat, .start-more, .cs-disclaimer) a:not([class]):hover { color: var(--ink); }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 26px;
}

/* ---------- Right-edge sticker rail nav (desktop) ---------- */
.rail-nav {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.rail-tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* The extra 30px on the right is what sits past the screen edge at rest,
     so the label itself is always fully readable; hover slides it in. */
  padding: 9px 46px 9px 18px;
  border: 2px solid var(--ink);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 4px 0 var(--ink);
  transform: translateX(30px) rotate(-3deg);
  transition: transform 0.28s var(--ease);
}
.rail-tab:hover { transform: translateX(0) rotate(0); }
.rail-green   { background: var(--green);   color: #fff; }
.rail-crimson { background: var(--crimson);  color: #fff; }
.rail-purple  { background: var(--purple);   color: #fff; }
.rail-gold    { background: var(--gold);     color: var(--ink); }
.rail-blue    { background: var(--blue);     color: #fff; }
.rail-coral   { background: var(--coral);    color: #fff; }
/* Cream, not ink: an ink tab vanishes against the ink READ section. */
.rail-paper   { background: var(--cream-2);  color: var(--ink); }
.rail-tab.active { transform: translateX(0) rotate(0); box-shadow: -2px 2px 0 var(--ink); }

/* ---------- Top navbar ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Above the drawer (70) and its backdrop (65). The hamburger animates into
     an X when the drawer opens, and that X is the way back out -- at z-index
     50 the drawer panel painted straight over it, so the X was invisible AND
     untappable, leaving only a 90px strip of backdrop to close the menu.
     The drawer reserves 92px of top padding for exactly this overlap. */
  z-index: 80;
  /* Nearly solid: at 0.85 the dark red, purple and green page banners
     showed through as a blotchy pink/tint once you scrolled under it. */
  background: rgba(236, 233, 223, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--ink);
  transition: box-shadow 0.3s var(--ease);
}
.navbar.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
.nav-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* Slides to the centre of the bar once the page is scrolled. Travel distance
     is measured in JS (--logo-shift) rather than hardcoded, because .nav-inner
     is a max-width centred container -- the offset is not simply 50vw. */
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
.navbar.scrolled .logo { transform: translateX(var(--logo-shift, 0px)); }

/* Suppressed for the first paint, so reloading part-way down the page shows
   the logo already centred instead of animating across on arrival. */
.navbar.no-anim .logo { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .logo { transition: none; }
}

.logo-star { color: var(--crimson); margin-left: 3px; }

/* Tap target: 44px minimum in both engines (WebKit ignores min-height on a
   plain inline box, which left the wordmark ~28px tall on iPhone). */
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.nav-links { display: flex; gap: 8px; }
.nav-link {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  border: 2px solid transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-link:hover { border-color: var(--ink); }
.nav-link.active { background: var(--ink); color: var(--cream); }

/* Hamburger */
.hamburger {
  display: none;
  width: 46px; height: 46px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px 10px;
  flex-direction: column;
  justify-content: space-between;
  background: var(--cream-2);
  box-shadow: var(--sticker);
}
.hamburger span {
  display: block; height: 2.5px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  /* 100vh is wrong on mobile browsers -- it ignores the dynamic URL bar, so
     the last link ends up under the browser chrome with no way to reach it.
     dvh tracks the real visible height; vh stays as the fallback. */
  height: 100vh;
  height: 100dvh;
  width: min(78vw, 300px);
  background: var(--cream-2);
  border-left: 3px solid var(--ink);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  z-index: 70;
  padding: 92px 26px 26px;
  /* The page body is scroll-locked while the drawer is open, so the drawer
     must carry its own scroll or long link lists are unreachable. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Breathing room under the last link so it clears the phone's home
     indicator / gesture bar instead of sitting flush against it. */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.drawer-link {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  box-shadow: var(--sticker);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
}
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 27, 24, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
  z-index: 65;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---------- Eyebrow sticker ---------- */
.eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow-dash {
  border: 2px dashed currentColor;
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 22px;
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(70px, 10vw, 128px) 0;
  position: relative;
}
.sec-green   { background: var(--green);   color: var(--paper); }
.sec-crimson { background: var(--crimson);  color: var(--paper); }
.sec-gold    { background: var(--gold);     color: var(--ink); }
.sec-dark    { background: #1a2148;         color: var(--paper); }
.sec-ink     { background: var(--ink);      color: var(--paper); }

.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8.5vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 40px;
  text-wrap: balance;
}
.st-accent { color: var(--gold); }
.st-accent-gold { color: var(--gold); }
.st-accent-crimson { color: #22307f; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 120px 0 70px;
  background:
    radial-gradient(circle at 1px 1px, rgba(28, 27, 24, 0.10) 1px, transparent 0);
  background-size: 22px 22px;
  background-color: var(--cream);
}
.hero-inner { position: relative; }
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 18vw, 13rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 0 0 26px;
  text-transform: uppercase;
}
.ht-line { display: block; }
.ht-line + .ht-line { margin-top: 0.04em; }
.ht-accent { color: var(--accent); }

.role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 30px;
}
.chip {
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 17px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.2s var(--ease);
}
.chip:nth-child(odd)  { transform: rotate(-2deg); }
.chip:nth-child(even) { transform: rotate(2deg); }
.chip:hover { transform: rotate(0) translateY(-2px); }
.chip-green   { background: var(--green);   color: #fff; }
.chip-gold    { background: var(--gold);    color: var(--ink); }
.chip-berry   { background: var(--purple);  color: #fff; }
.chip-crimson { background: var(--crimson); color: #fff; }
.chip-blue    { background: var(--blue);    color: #fff; }
.chip-coral   { background: var(--coral);   color: var(--ink); }

/* Hero series chips are links, one per <li>, so the alternating tilt has to
   key off the list item rather than the chip itself. */
.series-chips .chip { display: inline-block; }
.series-chips li:nth-child(odd)  .chip { transform: rotate(-2deg); }
.series-chips li:nth-child(even) .chip { transform: rotate(2deg); }
.series-chips .chip:hover { transform: rotate(0) translateY(-2px); }

.hero-proof {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  max-width: 56ch;
  margin: 0 0 34px;
  color: var(--ink-soft);
  line-height: 1.5;
  text-wrap: balance;
}
.hero-proof strong { color: var(--ink); font-weight: 700; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-sticker {
  position: absolute;
  top: -6px; right: 4px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 14px;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--sticker);
  transform: rotate(5deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 5px 5px 0 var(--gold);
}
.btn-primary:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--gold); }
.btn-ghost {
  background: #fff;
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--green);
}
.btn-ghost:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--green); }
.btn-block { width: 100%; }

/* ---------- Glass panel base ---------- */
.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1.5px solid var(--glass-brd);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  color: var(--ink);
}

/* ---------- About ---------- */
.about-panel {
  padding: 30px 32px;
  max-width: 760px;
  margin-bottom: 56px;
}
.about-text {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink);
}
.about-text strong { font-weight: 700; }
.about-text + .about-text { margin-top: 1em; }
.about-more {
  display: inline-block;
  font-weight: 700;
  color: var(--crimson);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ---------- READ: latest writing (markup generated by build.js) ---------- */
.latest-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.lf-media {
  display: block;
  border: 3px solid var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--gold);
  transform: rotate(-2deg);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.latest-feature:hover .lf-media { transform: rotate(0); box-shadow: 6px 6px 0 var(--gold); }
/* Natural shape: square posters stay square, 4:5 carousel slides show whole. */
.lf-media img { width: 100%; height: auto; }
.lf-tile {
  display: grid; place-items: center;
  aspect-ratio: 1;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  color: var(--ink);
}
.lf-tile-cs  { background: var(--coral); }
.lf-tile-em  { background: var(--gold); }
.lf-tile-wth { background: var(--purple); color: #fff; }

.lf-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  margin: 0 0 18px;
}
.series-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 6px 13px;
  border-radius: 999px;
  border: 2px solid var(--paper);
}
.series-tag-cs  { background: var(--coral);  color: var(--ink); }
.series-tag-em  { background: var(--gold);   color: var(--ink); }
.series-tag-wth { background: var(--purple); color: #fff; }
.lf-date { font-size: 0.9rem; color: rgba(244, 239, 228, 0.78); }
.lf-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.nowrap { white-space: nowrap; }
/* Hover turns the headline gold. An underline was tried first, but with this
   tight line-height a two-line title's underline cut through the next line. */
.lf-title a { transition: color 0.25s var(--ease); }
.lf-title a:hover, .lf-title a:focus-visible { color: var(--gold); }
.lf-sub { font-weight: 600; font-size: 1.1rem; color: var(--gold); margin: 0 0 12px; }
/* Space between the headline (or subtitle) and the button. */
.lf-body .btn { margin-top: 14px; }
.sec-ink .btn-primary { box-shadow: 5px 5px 0 var(--gold); border-color: var(--paper); }

/* Three series shelves. Not cards: a coloured top rule names the series,
   then a plain list of the next three posts with small poster thumbnails. */
.shelves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(36px, 4vw, 48px) clamp(28px, 4vw, 48px);
  margin-top: clamp(64px, 9vw, 112px);
}
/* --shelf is the rule/fill colour; --shelf-text is the same hue lifted to
   pass AA on ink (berry itself is only ~2.9:1 there). */
.shelf { border-top: 4px solid var(--shelf, var(--paper)); padding-top: 20px; }
.shelf-cs  { --shelf: var(--coral);  --shelf-text: var(--coral); }
.shelf-em  { --shelf: var(--gold);   --shelf-text: var(--gold); }
.shelf-wth { --shelf: var(--purple); --shelf-text: #ec7fae; }
.shelf-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 4px;
}
/* 44px tap targets for the heading link and the "All ..." link. */
.shelf-h a { display: inline-block; padding: 9px 0; }
.shelf-h a:hover { color: var(--shelf-text); }
.shelf-when { font-size: 0.88rem; color: rgba(244, 239, 228, 0.72); margin: 0 0 18px; }
.shelf-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.shelf-item {
  display: flex; align-items: center; gap: 14px;
  padding: 8px;
  margin-inline: -8px;
  border-radius: 12px;
  transition: background 0.2s var(--ease);
}
.shelf-item:hover { background: rgba(244, 239, 228, 0.08); }
.shelf-thumb {
  flex: none;
  width: 60px; height: 60px;
  border-radius: 10px;
  border: 2px solid rgba(244, 239, 228, 0.9);
  object-fit: cover;
  background: var(--shelf);
}
.shelf-text { display: flex; flex-direction: column; min-width: 0; }
.shelf-num { font-weight: 700; font-size: 0.8rem; color: var(--shelf-text); letter-spacing: 0.04em; }
.shelf-title { font-weight: 600; font-size: 1rem; line-height: 1.35; text-wrap: pretty; }
.shelf-item:hover .shelf-title { text-decoration: underline; text-underline-offset: 3px; }
.shelf-all {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--shelf-text);
  padding: 12px 0;
}
.shelf-all:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .latest-feature { grid-template-columns: 1fr; }
  /* A full-width poster pushes the headline a whole screen down on a phone. */
  .lf-media { width: min(72vw, 300px); box-shadow: 7px 7px 0 var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-media, .latest-feature:hover .lf-media { transform: none; }
}

/* ---------- Horizontal marquee band ---------- */
.marquee {
  background: #22307f;
  color: var(--cream);
  overflow: hidden;
  padding: 16px 0;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  will-change: transform;
  animation: marquee 26s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-right: 40px;
}
.marquee .mstar { color: var(--gold); font-weight: 400; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Work: pinned horizontal scroll ---------- */
.scroll-hint {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}
.hpin { position: relative; }
.hpin-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hpin-track {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 6vw;
  will-change: transform;
}
.hpin-panel {
  flex: 0 0 auto;
  max-width: 60vw;
  padding-right: 3vw;
}
.hpin-panel .sec-title { margin-bottom: 18px; }
.hpin-track .work-card {
  flex: 0 0 clamp(260px, 34vw, 340px);
  align-self: stretch;
  padding: 22px 24px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.work-card {
  padding: 22px 24px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
}
.work-card-current {
  border: 2px solid var(--gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2), inset 0 0 0 4px rgba(230, 164, 23, 0.18);
}
.work-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.work-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
}
.work-desc { color: #3a3742; font-size: 0.96rem; margin: 0; }  /* a shade darker than --ink-soft: 5.3:1 on the glass card over crimson (was 4.2:1) */

/* Badges */
.badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  border: 1.5px solid var(--ink);
}
.badge-qa      { background: #d7ecff; color: #0b4a80; }
.badge-test    { background: #ffe1c2; color: #9a4a00; }
.badge-pm      { background: #e7e0ff; color: #3f2fa0; }
.badge-dev     { background: #cdece0; color: #0f6b4c; }
.badge-current { background: var(--gold); color: var(--ink); }

/* ---------- Contact ---------- */
.contact-inner { max-width: 720px; }
.sec-title-light { color: var(--paper); }
.eyebrow-light { color: var(--paper); }
.contact-sub {
  color: var(--paper);
  opacity: 0.9;
  font-size: 1.08rem;
  margin: 0 0 30px;
  max-width: 52ch;
}
.contact-sub a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  transition: box-shadow 0.18s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  box-shadow: 4px 4px 0 var(--crimson);
}
.field input.error,
.field textarea.error { border-color: var(--crimson); background: #fff2f2; }
.form-note { font-size: 0.9rem; margin: 2px 0 0; min-height: 1.2em; color: var(--ink-soft); }
.form-note.success { color: #0f7a3d; }
.form-note.error { color: var(--crimson); }

/* Socials */
.socials { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.social-btn {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--cream-2);
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.social-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); background: var(--gold); }

/* ---------- Playground (doodle canvas) ---------- */
.play-sub {
  color: var(--ink);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0 0 26px;
  opacity: 0.9;
}
.doodle { padding: 20px; }
.doodle-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-bottom: 16px;
}
.swatches { display: flex; gap: 8px; }
.swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-active { outline: 3px solid var(--ink); outline-offset: 2px; }

/* 30px circles are comfortable with a mouse but under the ~40px touch
   minimum, so they grow on phones where they are actually tapped. */
@media (max-width: 480px) {
  .swatches { gap: 10px; flex-wrap: wrap; }
  .swatch { width: 42px; height: 42px; }
}
.brush-size {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.9rem; color: var(--ink);
}
.brush-size input { accent-color: var(--crimson); }
.doodle-actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.doodle-btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: #fff;
  font-weight: 700; font-size: 0.9rem; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.doodle-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.doodle-btn.is-active { background: var(--ink); color: var(--cream); }
.doodle-btn-primary { background: var(--crimson); color: #fff; }
.doodle-canvas {
  display: block;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: #fbf7ee;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- Footer ----------
   One footer on every page, homepage included, so its rules live here
   rather than in elite-minds.css (which the homepage does not load). */
/* ================= FOOTER ================= */
.em-footer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(34px, 5vw, 60px) 0;
  text-align: center;
}
.em-footer a { color: var(--cream); }
.em-footer-line { font-family: var(--font-body); font-weight: 800; font-size: 1.25rem; margin: 0 0 8px; }
.em-footer-sub { font-family: var(--font-body); font-size: 0.95rem; opacity: 0.75; margin: 4px 0; }

/* ===========================================================
   FOOTER - cleaner layout with links + copyright
   =========================================================== */
.em-footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 6px 0;
}
.em-footer-nav a {
  color: var(--cream);
  opacity: 0.85;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  transition: opacity 0.15s var(--ease);
}
.em-footer-nav a:hover { opacity: 1; }
.em-footer-legal {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  opacity: 0.6;
  text-align: center;
}
/* An underline, not a border: on phones these links are 44px tall tap
   targets, and a border sat at the bottom of that box, far below the word. */
.em-footer-legal a {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(236, 233, 223, 0.35);
  text-underline-offset: 3px;
}
.em-footer-legal a:hover { text-decoration-color: var(--cream); }

@media (max-width: 480px) {
  .em-footer-nav { gap: 4px 16px; }
  .em-footer-nav a { font-size: 0.9rem; }
  .em-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }
}

/* Footer nav links are standalone navigation, not prose, so they need a real
   touch target. 23px tall fails the 44px guideline on phones. Inline links
   inside a sentence are deliberately excluded -- WCAG 2.5.5 exempts them, and
   forcing a height there would blow apart the paragraph's line spacing. */
@media (hover: none), (pointer: coarse) {
  .em-footer-nav { gap: 2px 20px; }
  .em-footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 2px;
  }
}
.em-footer-line a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Reveal on scroll (enhance-only: visible unless JS confirms) ---------- */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.has-js .reveal { opacity: 0; transform: translateY(26px); }
.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .rail-nav { display: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-sticker { position: static; display: inline-block; margin-top: 20px; transform: rotate(-3deg); }

  /* Pinned horizontal Work falls back to a vertical stack on phones */
  .hpin { height: auto !important; }
  .hpin-sticky { position: static; height: auto; overflow: visible; display: block; padding: clamp(70px, 10vw, 128px) 0; }
  .hpin-track { transform: none !important; flex-direction: column; padding: 0 20px; gap: 18px; }
  .hpin-panel { max-width: 100%; padding-right: 0; }
  .hpin-track .work-card { flex: none; width: 100%; }
}
@media (max-width: 460px) {
  .container { padding-inline: 20px; }
  .about-panel { padding: 24px 22px; }
  .contact-form { padding: 24px 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* No scroll-jack: pinned Work becomes a native horizontal swipe strip */
  .hpin { height: auto !important; }
  .hpin-sticky { position: static; height: auto; overflow-x: auto; overflow-y: hidden; display: block; padding: clamp(70px, 10vw, 128px) 0; }
  .hpin-track { transform: none !important; }
}

/* ===========================================================
   SITE FURNITURE
   Skip link, back-to-top, share, hub search. Each is additive:
   with JS off the buttons simply never appear and nothing that
   already worked is affected.
   =========================================================== */

/* Keyboard users land here first and can jump past the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
}
.skip-link:focus { left: 8px; }

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 75;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--sticker);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  /* Hidden until there is something to scroll back up to. */
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.18s var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 7px 7px 0 var(--ink); }
.to-top:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(2px, 2px); }

/* On a phone this button floats over the article text the whole time it is
   visible. Shrink it and tuck it into the corner so it covers as little of
   the writing as possible, while staying above the 44px touch minimum.
   env() keeps it clear of the gesture bar on newer handsets. */
@media (hover: none), (pointer: coarse) {
  .to-top {
    width: 46px; height: 46px;
    font-size: 1.05rem;
    border-width: 2px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 3px 3px 0 var(--ink);
  }
}

/* ---------- share row ---------- */
.share { margin-top: 1.8em; }
.share-h {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.share-list { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.share-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.share-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.share-whatsapp { background: #25d366; color: #0b3d20; }
.share-linkedin { background: #0a66c2; color: #fff; }
.share-x        { background: #000;    color: #fff; }
.share-telegram { background: #229ed9; color: #fff; }
.share-facebook { background: #1877f2; color: #fff; }
.share-reddit   { background: #ff4500; color: #fff; }
.share-email    { background: var(--gold); color: var(--ink); }
.share-status:empty { display: none; }
.share-status {
  margin: 12px 0 0;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--green);
}

/* ---------- hub search ---------- */
.cs-search-wrap { position: relative; flex: 1 1 220px; max-width: 340px; }
.cs-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 38px 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.cs-search::placeholder { color: var(--ink); opacity: 0.5; font-weight: 500; }
/* Hide the browser's native "x" clear button on <input type="search"> so
   the custom .cs-search-clear button is the only one showing. Without
   this WebKit / Blink render a second small x that duplicates ours. */
.cs-search::-webkit-search-cancel-button,
.cs-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.cs-search-clear {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  border: 0; background: none;
  font-size: 1.1rem; line-height: 1;
  color: var(--ink); opacity: 0.55;
  cursor: pointer; display: none;
}
.cs-search-clear.is-on { display: block; }
.cs-empty {
  font-family: var(--font-body);
  font-weight: 600;
  padding: 30px 0;
  display: none;
}
.cs-empty.is-on { display: block; }
.cs-results {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600;
  opacity: 0.7;
}
.cs-results[hidden] { display: none; }
/* No-results state shares the 404's "Stop trying" meme. It sits in a
   display:none box, so the lazy image only loads when a search fails. */
.cs-empty-meme { margin: 0 0 14px; width: min(300px, 100%); }
.cs-empty-meme img {
  display: block; width: 100%; height: auto;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
}
.cs-empty-meme figcaption { margin-top: 6px; font-size: 0.78rem; font-weight: 400; opacity: 0.6; }
.cs-empty p { margin: 0; max-width: 46ch; }

@media (prefers-reduced-motion: reduce) {
  .to-top, .share-btn { transition: none; }
}

/* ============================================================
   HERO MASCOT + 404 CHARACTER
   The 3D cartoon Mantra: adds warmth to the hero without
   crowding the wordmark, and turns the 404 into a punchline.
   ============================================================ */
.hero-mascot {
  /* Inside .hero-inner (which is a max-width .container). Positioned bottom-right
     with a viewport-scaled right inset so the mascot always sits clear of the
     fixed rail-nav sticker tabs (which are ~140px wide from the viewport right
     edge on desktop). Verified with the responsive audit at 1280 / 1440 / 1920. */
  position: absolute;
  right: clamp(80px, 9vw, 130px);
  bottom: 0;
  height: clamp(380px, 64vh, 660px);
  width: auto;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  filter: drop-shadow(-6px 8px 0 rgba(28, 27, 24, 0.06));
}
@media (max-width: 1023px) {
  /* Below the desktop rail-nav breakpoint there is no free column to the right
     of the copy, so the mascot stops being absolutely positioned and joins the
     normal flow as the last item -- right-aligned under the buttons. In flow he
     can never overlap the wordmark or the CTAs at any width.
     align-items is deliberately left at its default `stretch`: forcing
     flex-start would shrink-wrap .role-chips to max-content and stop it
     wrapping. Every hero child uses bottom-only margins, so there are no
     collapsing margins to lose by switching to flex. */
  /* Reclaim vertical space so the mascot lands inside the first screen rather
     than below the fold: the desktop 120/70 padding is generous for a phone
     where the wordmark, four chips, the lede and two stacked buttons already
     fill the viewport. */
  /* align-items:flex-start, NOT the desktop `center`. The hero is a flex box
     with min-height:100vh; once its content is taller than the screen (which
     it is on a phone, with the wordmark, four chips, the lede, two buttons
     and the mascot) centring overflows the box at BOTH ends, and the top of
     the title slides up underneath the fixed navbar. Starting from the top
     keeps the padding honest and lets the hero simply grow. */
  /* 94px, not 76: the fixed navbar is 84px tall on a phone, so anything
     less puts the wordmark behind it. 10px of breathing room on top. */
  .hero { padding: 94px 0 18px; align-items: flex-start; }
  .hero-inner { display: flex; flex-direction: column; }
  .hero-mascot {
    display: block;
    position: static;
    order: 99;
    align-self: flex-end;
    height: clamp(250px, 36vh, 340px);
    margin-top: 2px;
    filter: drop-shadow(-5px 6px 0 rgba(28, 27, 24, 0.07));
  }

  /* Tighten the stack above him so he fits WHOLE inside the first screen.
     Measured on a 390x844 phone the copy ended at y=693, leaving only 145px
     -- too little for the mascot to read. These trims free ~130px without
     making anything feel cramped. The chips were the biggest cost: four of
     them wrapped to three rows. */
  .hero-title { font-size: clamp(3.6rem, 15.5vw, 13rem); margin-bottom: 12px; }
  .role-chips { gap: 8px; margin-bottom: 14px; }
  .chip { font-size: 0.82rem; padding: 9px 16px; }
  .hero-proof { margin-bottom: 14px; font-size: 1rem; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { padding: 13px 22px; font-size: 0.95rem; }
}

/* --- 404 layout --------------------------------------------------- */
.err-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 60px);
  align-items: end;
}
.err-mascot {
  height: clamp(240px, 40vh, 400px);
  width: auto;
  align-self: end;
  justify-self: end;
  filter: drop-shadow(-6px 8px 0 rgba(28, 27, 24, 0.10));
}
@media (max-width: 780px) {
  .err-grid { grid-template-columns: 1fr; row-gap: 0; }
  .err-mascot {
    height: clamp(180px, 32vh, 260px);
    justify-self: end;
    margin-top: -8px;
  }
}
/* The "Stop trying" meme in place of the mascot. Credit stays visible. */
.err-meme {
  margin: 0;
  width: min(380px, 100%);
  justify-self: end;
  transform: rotate(1.5deg);
}
.err-meme img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: -6px 8px 0 rgba(28, 27, 24, 0.10);
}
.err-meme figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  opacity: 0.65;
  text-align: right;
}
@media (max-width: 780px) {
  .err-meme { width: min(340px, 100%); justify-self: center; margin-top: 22px; transform: none; }
  .err-meme figcaption { text-align: center; }
}

/* ===========================================================
   NEWSLETTER BOX ("Get new stories by email")
   Rendered by build.js only when NEWSLETTER_ACTION is set. Ink panel on the
   cream post pages; cream panel on the homepage's ink READ section.
   =========================================================== */
.nl-box {
  --nl-bg: var(--ink);
  --nl-fg: var(--paper);
  --nl-accent: var(--gold);
  --nl-note: rgba(244, 239, 228, 0.78);
  background: var(--nl-bg);
  color: var(--nl-fg);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 7px 7px 0 var(--gold);
  padding: clamp(24px, 4vw, 36px);
  margin: clamp(40px, 6vw, 64px) 0;
  max-width: 42rem;
}
.nl-box-home {
  --nl-bg: var(--cream-2);
  --nl-fg: var(--ink);
  --nl-accent: var(--blue);
  --nl-note: var(--ink-soft);
  border-color: var(--paper);
  max-width: 46rem;
  margin: clamp(64px, 9vw, 112px) 0 0;
}
.nl-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-wrap: balance;
}
.nl-accent { color: var(--nl-accent); }
.nl-sub { font-size: 1rem; line-height: 1.55; margin: 0 0 20px; max-width: 46ch; }
.nl-form { display: flex; gap: 12px; flex-wrap: wrap; }
.nl-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nl-input {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.nl-input::placeholder { color: #6b6876; }
.nl-input:focus-visible { outline: 3px solid var(--nl-accent); outline-offset: 2px; }
.nl-btn {
  flex: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--nl-fg);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.nl-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--nl-fg); }
.nl-status:empty { display: none; }
.nl-status {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--gold);
  font-weight: 600;
  line-height: 1.45;
}
/* Spam trap: off-screen for people, still filled in by naive bots. */
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-captcha { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* display:flex above would otherwise beat the hidden attribute and show an
   empty "what is ?" before the sum has loaded. */
.nl-captcha[hidden] { display: none; }
.nl-captcha-label { font-weight: 600; font-size: 0.95rem; }
.nl-captcha-sum { font-weight: 800; color: var(--nl-accent); }
.nl-captcha-input {
  width: 84px;
  min-height: 46px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: center;
}
.nl-captcha-input:focus-visible { outline: 3px solid var(--nl-accent); outline-offset: 2px; }
.nl-note { font-size: 0.85rem; color: var(--nl-note); margin: 14px 0 0; }
.nl-note a { color: var(--nl-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) {
  .nl-btn { flex: 1 1 100%; }
}

/* /confirmed/: the "start with the latest" links after a reader confirms. */
.confirmed-list { display: flex; flex-direction: column; gap: 10px; margin: 6px auto 0; max-width: 34rem; }
.confirmed-list a {
  display: block;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--sticker);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.confirmed-list a:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* Homepage hero: quiet pointer to /start/ for first-time visitors. */
.hero-start { margin: 22px 0 0; font-weight: 700; font-size: 1rem; }
.hero-start a { color: var(--crimson); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-start a:hover { color: var(--ink); }
@media (max-width: 1023px) { .hero-start { margin-top: 14px; font-size: 0.95rem; } }

/* ============================================================
   FESTIVAL BUBBLE (homepage hero)
   The speech bubble from the LinkedIn greeting, said by the
   cartoon Mantra. Positioned off the mascot's own size so it
   tracks him at every width: over his head on desktop (clear of
   the MANTRA wordmark), beside it once he drops into the flow on
   tablets and phones. There he is in the flow (content box) while
   the bubble is absolute (padding box), hence the added padding.
   ============================================================ */
.fest-bubble {
  --mh: clamp(380px, 64vh, 660px);           /* = .hero-mascot height */
  --mr: clamp(80px, 9vw, 130px);             /* = .hero-mascot right */
  --mw: calc(var(--mh) * 0.384);             /* image is 461 x 1200 */
  position: absolute;
  z-index: 2;
  right: calc(var(--mr) + var(--mw) * 0.04);
  bottom: calc(var(--mh) + 30px);
  margin: 0;
  padding: 12px 22px 14px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.9;
  pointer-events: none;
  transform-origin: 70% 100%;
  animation: fest-pop 0.5s var(--ease) 0.3s both;
}
.fest-bubble[hidden] { display: none; }
.fest-l1 { display: block; font-size: clamp(1.7rem, 2.9vw, 2.7rem); }
.fest-l2 {
  display: block;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  color: var(--gold);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--ink);
}
/* Tail: an ink triangle with a smaller white one on top. Both start at the
   inner edge of the border, so the white one erases that bit of border and
   the tail joins the bubble as one shape. Desktop: down and left to his head. */
.fest-bubble::before,
.fest-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  border-style: solid;
  border-color: transparent;
  transform-origin: top;
  transform: skewX(-30deg);
}
.fest-bubble::before { right: 26%; border-width: 34px 13px 0; border-top-color: var(--ink); }
.fest-bubble::after  { right: calc(26% + 4px); border-width: 27px 9px 0; border-top-color: #fff; }
@keyframes fest-pop {
  from { opacity: 0; transform: scale(0.6) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fest-bubble { animation: none; }
}
@media (max-width: 1023px) {
  /* Mascot is the last item in the flow here, right-aligned at the bottom
     of .hero-inner, so the bubble is placed from that same bottom edge and
     sits to the left of his head, tail pointing right at his face. */
  .fest-bubble {
    --mh: clamp(250px, 36vh, 340px);
    --mw: calc(var(--mh) * 0.384);
    right: calc(26px + var(--mw) * 0.82);
    /* Bottom edge level with his chin, so the waving hand below stays clear */
    bottom: calc(var(--mh) * 0.84);
    transform-origin: 100% 80%;
    padding: 9px 16px 11px;
    border-radius: 16px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .fest-l1 { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
  .fest-l2 { font-size: clamp(1.8rem, 7.8vw, 2.7rem); -webkit-text-stroke-width: 1.5px; text-shadow: 2px 2px 0 var(--ink); }
  .fest-bubble::before,
  .fest-bubble::after { top: auto; right: auto; left: 100%; transform: none; }
  .fest-bubble::before { top: auto; bottom: 8px; border-width: 11px 0 11px 24px; border-color: transparent transparent transparent var(--ink); }
  .fest-bubble::after  { top: auto; bottom: 12px; border-width: 7px 0 7px 17px; border-color: transparent transparent transparent #fff; }
  /* Room above him for the bubble, which now rises past the top of his head */
  .hero-inner:has(.fest-bubble:not([hidden])) .hero-mascot { margin-top: 48px; }
}
@media (max-width: 460px) {
  .fest-bubble { right: calc(20px + var(--mw) * 0.82); }
}

/* ---------- Festival strip (every page but the homepage) ----------
   Fixed above the navbar. When script.js shows it, html.fest-on moves the
   navbar down by the strip's height and pads the body by the same amount,
   so every offset measured from the navbar still holds. */
:root { --fest-h: 34px; }
.fest-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 81;
  height: var(--fest-h);
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  background: var(--gold);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.fest-strip[hidden] { display: none; }
.fest-strip strong { font-weight: 800; letter-spacing: 0.02em; }
.fest-star { color: var(--crimson); }
html.fest-on body { padding-top: var(--fest-h); }
html.fest-on .navbar,
html.fest-on .cs-progress { top: var(--fest-h); }
@media (max-width: 700px) {
  .fest-long { display: none; }
}

/* ---------- Festival fireworks button (homepage hero) ----------
   Shown by script.js only until its data-until. The canvas it opens is
   fixed over the whole screen with pointer-events off, so nothing under
   it stops working while the fireworks play. */
.fest-burst {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--crimson);
  cursor: pointer;
  font-family: inherit;
  animation: fest-wiggle 2.6s ease-in-out infinite;
}
.fest-burst:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--crimson); animation: none; }
.fest-burst:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }
@keyframes fest-wiggle {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(-3deg); }
  92% { transform: rotate(3deg); }
  96% { transform: rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .fest-burst { animation: none; } }
.fest-fireworks { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; }


/* ===========================================================
   HEADER SEARCH
   The search icon opens this box under the header, on every page
   (script.js builds it). Results are the same cards the old search
   page had: poster, series label, title, the sentence that matched.
   =========================================================== */
.nav-tools { display: flex; align-items: center; gap: 10px; }
.nav-search {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--ink);
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--sticker);
  cursor: pointer;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.nav-search:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.nav-search[aria-expanded="true"],
.em-navlink-search[aria-expanded="true"] { background: var(--gold); }

.hs-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 2px;              /* sits under the header's ink border */
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 16px 32px rgba(26, 25, 34, 0.14);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: hs-drop 0.18s var(--ease);
}
.hs-panel[hidden] { display: none; }
@keyframes hs-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hs-inner { max-width: 760px; margin: 0 auto; padding: 18px 20px 24px; }
.hs-form {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 5px 4px 16px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
}
.hs-form:focus-within { box-shadow: 4px 4px 0 var(--gold); }
.hs-icon { flex: none; opacity: 0.6; }
.hs-input {
  flex: 1; min-width: 0;
  padding: 10px 0;
  font: 500 1.05rem/1.2 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 0; outline: none;
}
.hs-input::placeholder { color: var(--ink); opacity: 0.45; }
.hs-input::-webkit-search-cancel-button,
.hs-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hs-close {
  flex: none;
  width: 38px; height: 38px;
  font: 600 1.5rem/1 var(--font-body);
  color: var(--ink);
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.hs-close:hover { background: var(--gold); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.hs-chip {
  min-height: 36px;
  padding: 6px 14px;
  font: 700 0.82rem var(--font-body);
  color: var(--ink);
  background: var(--cream-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.hs-chip.is-on { background: var(--ink); color: var(--cream); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.hs-count { margin: 10px 0; font: 600 0.82rem var(--font-body); color: var(--ink-soft); }
.hs-empty { margin: 12px 0 0; font: 400 0.95rem/1.5 var(--font-body); color: var(--ink); }
.hs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.sr-item a {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.sr-item a:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.sr-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; border: 2px solid var(--ink); background: var(--cream-2); }
.sr-thumb-none {
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.3rem; color: var(--paper);
}
.sr-tile-cs  { background: var(--coral); }
.sr-tile-em  { background: var(--gold); color: var(--ink); }
.sr-tile-wth { background: var(--purple); }
.sr-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}
.sr-title { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.sr-snip { display: block; margin-top: 3px; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.45; color: rgba(26, 25, 34, 0.78); }
.sr-item mark { background: rgba(227, 169, 46, 0.55); color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 560px) {
  .hs-inner { padding: 14px 14px 20px; }
  .hs-input { font-size: 1rem; }   /* 16px: iPhone doesn't zoom in on focus */
  .hs-chip { padding: 6px 11px; font-size: 0.78rem; }
  .sr-thumb { width: 52px; height: 52px; }
  .sr-item a { grid-template-columns: 52px 1fr; }
  .sr-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-panel { animation: none; }
  .sr-item a, .nav-search { transition: none; }
}

/* ============================================================
   COOKIE CONSENT CARD (14 Nov 2026) - built by ANALYTICS_HEAD in build.js.
   Until the reader chooses, the page is blurred behind a card centred at
   the bottom (light tint, no dark overlay). On /privacy/ and /terms/ the
   page is not blurred, so the policy can be read before choosing.
   ============================================================ */
html.mj-consent-pending, html.mj-consent-pending body { overflow: hidden; }
html.mj-consent-pending body > *:not(.mj-consent) {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
.mj-consent {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end; /* card sits centre-bottom (Mantra, 14 Nov) */
  justify-content: center;
  padding: 16px 16px 28px;
  background: rgba(236, 233, 223, 0.45);
}
html.mj-consent-soft .mj-consent {
  inset: auto 0 0 0;
  background: none;
  pointer-events: none;
}
html.mj-consent-soft .mj-consent-card { pointer-events: auto; max-height: 52vh; padding: 18px 20px 12px; }
html.mj-consent-soft .mj-consent-title { font-size: 1.5rem; }
.mj-consent-card {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fffdf8;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 26px 24px 18px;
  text-align: center;
  font-family: var(--font-body);
  animation: mjConsentIn 0.28s var(--ease, ease-out) both;
}
@keyframes mjConsentIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mj-consent-card { animation: none; } }
.mj-consent-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mj-consent-brand span { color: var(--crimson); }
.mj-consent-title {
  margin: 6px 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.05;
  text-transform: uppercase;
}
.mj-consent-text {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mj-consent-text strong { color: var(--ink); }
.mj-consent-yes {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.15rem;
  padding: 17px 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.16s var(--ease, ease-out), box-shadow 0.16s var(--ease, ease-out);
}
.mj-consent-yes:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.mj-consent-yes:focus-visible, .mj-consent-no:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.mj-consent-no {
  margin: 12px auto 0;
  padding: 6px 10px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mj-consent-fine {
  margin: 10px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.mj-consent-fine a { color: var(--crimson); font-weight: 700; }
/* "Cookie settings" in the footer looks like the Privacy / Terms links. */
.em-footer-cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(236, 233, 223, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.em-footer-cookies:hover { text-decoration-color: var(--cream); }
/* "open cookie settings now" inside the Privacy policy text. */
.cs-cookie-btn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--crimson);
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* One arrow item per paragraph in the Privacy / Terms lists, kept close together. */
.cs-para.cs-li { margin-top: 0; margin-bottom: 8px; }
.cs-para.cs-li + .cs-para:not(.cs-li) { margin-top: 16px; }
.cs-para.cs-li + .cs-related-h { margin-top: 32px; }