/* ============================================================
   KRAIL Blog · editorial magazine layer
   Self-contained. Pairs with tokens.css for the mode palette.
   Separators are drawn squares, never a middot glyph.
   ============================================================ */

:root {
  /* Surfaces */
  --paper:     #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F7F5F3;
  --ink:       #1C1B1A;
  --ink-2:     #2E2E2E;
  --muted:     #6B6157;
  --line:      rgba(28,27,26,0.12);
  --line-2:    rgba(28,27,26,0.06);
  --shadow-ink: #1C1B1A;

  /* Brand */
  --brand-blue:   #1ADBFF;
  --brand-pink:   #FF2F8F;
  --brand-pink-2: #FF66B5;
  --brand-purple: #D634FF;
  --brand-grad: linear-gradient(95deg, var(--brand-blue) 0%, var(--brand-purple) 55%, var(--brand-pink) 100%);

  /* Mode colours */
  --train: #F6891F;
  --bus:   #00B5EF;
  --metro: #009B77;
  --ferry: #5AB031;
  --coach: #742282;
  --lr:    #E4022D;

  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  --roboto-black: "Roboto", -apple-system, sans-serif;

  /* ---- Accent triplet ----------------------------------------
     --accent       the pure brand colour. DECORATION ONLY:
                    stamp shadows, squiggle, small squares, blobs.
                    Never carries meaning on its own.
     --accent-ink   the same hue, darkened until it clears 4.5:1 on
                    the current surface. Use for ANY text.
     --accent-fill  dark enough that white text on it clears 4.5:1.
                    Use for solid chips, flags and counters.

     The actual values live in blog.tokens.css, which is GENERATED.
     Never pick one of these by eye, run:
         node tools/a11y-contrast.mjs --write
     The fallbacks here only cover the case where the generated file
     fails to load.
  ------------------------------------------------------------- */
  --accent:      var(--brand-pink);
  --accent-ink:  #DB287B;
  --accent-fill: #DB287B;

  /* Ambient blob strength */
  --blob-a: 0.20;
  --blob-b: 0.17;
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  --paper:     #0B0B0D;
  --surface:   #131316;
  --surface-2: #191920;
  --ink:       #FCF6F1;
  --ink-2:     #E2E2E2;
  --muted:     #A9A5A2;
  --line:      rgba(252,246,241,0.16);
  --line-2:    rgba(252,246,241,0.08);
  --shadow-ink: #000000;
  --blob-a: 0.16;
  --blob-b: 0.13;

  /* On the dark surface most brand colours already clear 4.5:1,
     so the pure hue comes back as the text colour. */
  --accent-ink:  var(--brand-pink);
  --accent-fill: #DB287B;
}

/* DEMO ONLY · lets the theme lab flip back to the raw brand hues so
   the accessible and vivid versions can be compared side by side.
   Fails WCAG on purpose. Deleted along with the lab before ship. */
[data-vivid="1"] * { --accent-ink: var(--accent) !important; --accent-fill: var(--accent) !important; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); overflow-x: clip; }

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(820px 680px at 8% 3%,   rgba(47,217,255,var(--blob-a)), transparent 65%),
    radial-gradient(820px 680px at 94% 10%, rgba(255,90,168,var(--blob-b)), transparent 65%),
    radial-gradient(760px 640px at 4% 30%,  rgba(91,194,255,var(--blob-b)), transparent 65%),
    radial-gradient(820px 680px at 92% 46%, rgba(47,217,255,var(--blob-b)), transparent 65%),
    radial-gradient(760px 640px at 6% 62%,  rgba(255,90,168,var(--blob-b)), transparent 65%),
    radial-gradient(820px 680px at 94% 80%, rgba(91,194,255,var(--blob-b)), transparent 65%),
    var(--paper);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand-pink); color: #fff; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container.narrow { max-width: 1040px; }
.container.prose { max-width: 760px; }

/* ============================================================
   WORDMARK
   ============================================================ */
.brand {
  display: inline-flex; align-items: baseline;
  font-family: var(--roboto-black);
  font-weight: 900; font-size: 24px;
  color: var(--ink); letter-spacing: -0.01em;
}
.brand.invert { color: #fff; }
.brand .reg, .foot-coda .reg {
  font-family: var(--sans); font-weight: 700;
  font-size: 0.58em; vertical-align: 0.45em;
  margin-left: 4px; opacity: 0.85;
}
.lets-krail {
  font-family: var(--roboto-black);
  font-weight: 900; font-style: italic; letter-spacing: -0.01em;
}

/* ============================================================
   NAV
   ============================================================ */
nav.top {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background .25s ease, border-color .2s ease;
  will-change: transform;
}
nav.top.scrolled {
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  border-bottom-color: var(--line);
}
nav.top.nav-hidden { transform: translateY(-100%); }
nav.top .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 32px;
}
.nav-links {
  display: flex; gap: 26px; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--brand-grad);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================
   STAMP · the one button primitive
   ============================================================ */
.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--paper);
  padding: 11px 20px;
  border: 2px solid var(--ink); border-radius: 0;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em; cursor: pointer;
  box-shadow: 4px 4px 0 var(--accent);
  transition: transform .14s ease, box-shadow .14s ease;
}
.stamp:hover  { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--accent); }
.stamp:active { transform: translate(0,0);       box-shadow: 3px 3px 0 var(--accent); }
.stamp svg { width: 14px; height: 14px; }

.stamp.ghost { background: transparent; color: var(--ink); }
.stamp.ghost:hover { background: var(--ink); color: var(--paper); }

/* ============================================================
   SQUIGGLE
   ============================================================ */
.accent-word {
  position: relative; display: inline-block; z-index: 0;
  color: var(--accent-ink); font-style: italic; font-weight: 800;
  white-space: nowrap;
}
.sq-line {
  display: block; position: absolute;
  left: -3px; right: -12px; bottom: -10px;
  width: calc(100% + 15px); height: 14px;
  pointer-events: none; overflow: visible;
  color: var(--accent); transform: rotate(-0.6deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s cubic-bezier(.5,.05,.15,1) .3s;
}
.sq-line .stroke-bold, .sq-line .stroke-thin {
  fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sq-line .stroke-bold { stroke-width: 5.5; opacity: 0.55; }
.sq-line .stroke-thin { stroke-width: 2.5; opacity: 1; }
.in .sq-line,
.accent-word.in .sq-line { clip-path: inset(0 0 0 0); }

/* ============================================================
   REVEAL
   ============================================================ */
.anim { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.anim.in { opacity: 1; transform: none; }

/* ============================================================
   SEPARATOR · a drawn square, never a middot glyph
   ============================================================ */
.sep {
  display: inline-block; width: 4px; height: 4px;
  background: var(--accent); vertical-align: 2px;
  margin: 0 10px; flex: none;
}

/* ============================================================
   CATEGORY TAG
   ============================================================ */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
}
.tag::before {
  content: ""; width: 9px; height: 9px;
  background: var(--accent); flex: none;
}
.tag.solid {
  background: var(--accent-fill); color: #fff;
  padding: 5px 10px; border-radius: 0;
}
.tag.solid::before { display: none; }

/* Per-category accent triplets are GENERATED into blog.tokens.css,
   which is loaded after this file. See tools/a11y-contrast.mjs. */

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead { padding: 64px 0 28px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 7px 14px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--accent);
}
.masthead h1 {
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 88px);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  margin: 26px 0 0; max-width: 15ch;
}
.masthead .deck {
  margin: 26px 0 0; max-width: 52ch;
  font-size: 19px; line-height: 1.6; color: var(--muted);
}

/* Filter chips */
.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 34px 0 0; padding: 0 0 6px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  padding: 8px 14px; border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.chip .dotk { width: 9px; height: 9px; background: var(--accent); flex: none; }
.chip:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--accent); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--paper);
  box-shadow: 4px 4px 0 var(--accent);
}

/* ============================================================
   FEATURED
   ============================================================ */
.featured { padding: 40px 0 8px; }
.featured-card {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 0; border: 2px solid var(--ink);
  background: var(--surface);
  box-shadow: 10px 10px 0 var(--accent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.featured-card:hover { transform: translate(-4px,-4px); box-shadow: 14px 14px 0 var(--accent); }
.featured-media { position: relative; overflow: hidden; border-right: 2px solid var(--ink); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/11; }
.featured-flag {
  position: absolute; top: 0; left: 0;
  background: var(--accent-fill); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 8px 14px;
}
.featured-body { padding: 40px 40px 36px; display: flex; flex-direction: column; }
.featured-body h2 {
  font-family: var(--display); font-size: clamp(28px, 3.1vw, 42px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em;
  margin: 16px 0 0;
}
.featured-body .excerpt { margin: 16px 0 0; font-size: 17px; line-height: 1.62; color: var(--muted); }
.meta {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-top: auto; padding-top: 26px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.featured-body .stamp { align-self: flex-start; margin-top: 22px; }

/* ============================================================
   GRID
   ============================================================ */
.grid-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: 62px 0 20px;
}
.grid-head h2 {
  font-family: var(--display); font-size: clamp(24px, 3vw, 34px);
  font-weight: 800; letter-spacing: -0.03em; margin: 0;
}
.grid-head .count { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; }

.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; padding-bottom: 20px;
}
.card {
  display: flex; flex-direction: column;
  border: 2px solid var(--ink); background: var(--surface);
  box-shadow: 6px 6px 0 var(--accent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translate(-4px,-4px); box-shadow: 10px 10px 0 var(--accent); }
.card-media { border-bottom: 2px solid var(--ink); overflow: hidden; }
.card-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card:hover .card-media img { transform: scale(1.045); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 {
  font-family: var(--display); font-size: 21px; font-weight: 800;
  line-height: 1.18; letter-spacing: -0.02em; margin: 14px 0 0;
}
.card-body .excerpt { margin: 11px 0 0; font-size: 15px; line-height: 1.58; color: var(--muted); }
.card .meta { padding-top: 20px; font-size: 12px; }
.card.hidden { display: none; }

/* ============================================================
   NEWSLETTER BAND
   ============================================================ */
.band {
  margin: 78px 0 0; padding: 56px 40px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  box-shadow: 12px 12px 0 var(--accent);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
.band h2 {
  font-family: var(--display); font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; margin: 0;
}
.band p { margin: 14px 0 0; color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.6; }
.band .stamp {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  box-shadow: 5px 5px 0 var(--accent);
}
.band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

/* ============================================================
   POST PAGE
   ============================================================ */
.post-head { padding: 48px 0 0; }
.backlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.04em;
}
.backlink:hover { color: var(--accent-ink); }
.backlink svg { width: 14px; height: 14px; }

.post-title {
  font-family: var(--display);
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  margin: 20px 0 0;
}
.post-deck {
  margin: 22px 0 0; font-size: 21px; line-height: 1.55;
  color: var(--muted); max-width: 42ch;
}
.post-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 30px 0 0; padding: 18px 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.04em;
}
.byline { display: inline-flex; align-items: center; gap: 10px; }
.byline img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }

.post-hero { margin: 34px 0 0; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--accent); }
.post-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-hero figcaption {
  padding: 12px 18px; font-size: 13px; color: var(--muted);
  border-top: 2px solid var(--ink); background: var(--surface);
}

/* ---------- Prose ---------- */
.prose-body { padding: 52px 0 0; font-size: 19px; line-height: 1.75; color: var(--ink-2); }
.prose-body > p { margin: 0 0 26px; }
.prose-body > p:first-of-type::first-letter {
  float: left; font-family: var(--roboto-black); font-weight: 900;
  font-size: 74px; line-height: 0.78; padding: 6px 12px 0 0; color: var(--accent-ink);
}
.prose-body h2 {
  font-family: var(--display); font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.14;
  color: var(--ink); margin: 52px 0 18px; padding-left: 18px;
  border-left: 6px solid var(--accent);
}
.prose-body h3 {
  font-family: var(--display); font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); margin: 38px 0 12px;
}
.prose-body a { color: var(--accent-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.prose-body a:hover { background: var(--accent-fill); color: #fff; box-shadow: none; }
.prose-body strong { color: var(--ink); font-weight: 800; }
.prose-body ul, .prose-body ol { margin: 0 0 26px; padding-left: 22px; }
.prose-body li { margin: 0 0 10px; }
.prose-body ul { list-style: none; padding-left: 0; }
.prose-body ul > li { position: relative; padding-left: 26px; }
.prose-body ul > li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 9px; background: var(--accent);
}
.prose-body hr { border: 0; border-top: 2px solid var(--line); margin: 44px 0; }

.prose-body figure { margin: 38px 0; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.prose-body figure img { width: 100%; }
.prose-body figcaption {
  padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--muted);
  border-top: 2px solid var(--ink); background: var(--surface);
}

.prose-body blockquote {
  margin: 42px 0; padding: 28px 30px;
  border: 2px solid var(--ink); background: var(--surface);
  box-shadow: 8px 8px 0 var(--accent);
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 24px; line-height: 1.34; letter-spacing: -0.02em; color: var(--ink);
}
.prose-body blockquote p { margin: 0; }
.prose-body blockquote cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
}

.callout {
  margin: 38px 0; padding: 24px 26px;
  border: 2px solid var(--ink); border-left-width: 10px; border-left-color: var(--accent);
  background: var(--surface);
  font-size: 17px; line-height: 1.6;
}
.callout .callout-label {
  display: block; font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 8px;
}

/* Image pair */
.img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 38px 0; }
.img-pair figure { margin: 0; }

/* ============================================================
   APP SHOTS · two ways to show a screen
   1. .shot-plain  · the framed screenshot card (default)
   2. .shot-phone  · the device frame from the landing page
   Author picks per image in markdown, see tools/build-blog.mjs.
   ============================================================ */

/* ---------- 2. Phone frame ---------- */
.shot-stage {
  margin: 44px 0;
  padding: 44px 24px 40px;
  border: 2px solid var(--ink);
  background:
    radial-gradient(600px 420px at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--surface);
  box-shadow: 8px 8px 0 var(--accent);
}
.shot-stage .shot-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 34px; flex-wrap: wrap;
}
.shot-stage figcaption {
  margin-top: 30px; padding-top: 16px;
  border-top: 2px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center;
}

.phone {
  width: 240px; height: 500px; flex: none;
  background: #2A211A;
  border: 6px solid #2A211A;
  border-radius: 38px;
  box-shadow:
    0 0 0 1.5px rgba(28,27,26,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 50px 100px rgba(28,27,26,0.30),
    0 18px 36px rgba(28,27,26,0.18);
  overflow: hidden; position: relative;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.phone .notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 22px; background: #0a0908;
  border-radius: 14px; z-index: 5;
}
.phone .screen {
  width: 100%; height: 100%; background: #0a0908;
  overflow: hidden; position: relative;
}
.phone .screen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; border: 0;
}
/* One phone, centred and square on. Two framed devices side by side
   never sit symmetrically, the frames fight each other. If a post
   genuinely needs two screens, use two separate stages. */
.shot-row .phone:hover { transform: translateY(-6px); }

/* ============================================================
   SOURCES · what the post was checked against.
   Builds trust with readers and gives answer engines something
   citable. Generated from the `sources` frontmatter block.
   ============================================================ */
.sources {
  margin: 48px 0 0; padding: 26px 28px;
  border: 2px solid var(--ink); background: var(--surface);
}
.sources .block-title {
  margin: 0 0 16px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ink);
}
.sources ol { margin: 0; padding: 0; list-style: none; counter-reset: src; }
.sources li {
  position: relative; padding-left: 34px; margin: 0 0 14px;
  font-size: 15px; line-height: 1.55; color: var(--muted);
}
.sources li:last-child { margin-bottom: 0; }
.sources li::before {
  counter-increment: src; content: counter(src);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--accent-fill); color: #fff;
  font-size: 11px; font-weight: 800;
}
.sources a { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); word-break: break-word; }
.sources a:hover { background: var(--accent-fill); color: #fff; box-shadow: none; }
.sources .for { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.sources .checked { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* ============================================================
   FACTS TABLE · the scannable answer block near the top.
   Answer engines lift this. Readers skim it.
   ============================================================ */
.facts {
  margin: 38px 0; border: 2px solid var(--ink); background: var(--surface);
  box-shadow: 6px 6px 0 var(--accent);
}
.facts .block-title {
  margin: 0; padding: 14px 22px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
}
.facts dl { margin: 0; padding: 8px 22px 18px; }
.facts div {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.facts div:last-child { border-bottom: 0; }
.facts dt {
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.facts dd strong { font-weight: 800; }
@media (max-width: 620px) {
  .facts div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Post footer ---------- */
.post-foot { padding: 56px 0 0; }
.tags-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 26px 0; border-top: 2px solid var(--line); }
.tag-pill {
  border: 2px solid var(--line); padding: 6px 12px;
  font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em;
}
.tag-pill:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 34px; }
.share-row .label { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 2px solid var(--ink);
  background: transparent; color: var(--ink);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.share-btn svg { width: 17px; height: 17px; }
.share-btn:hover { background: var(--ink); color: var(--paper); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--accent); }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 8px 0 0; }
.pn {
  border: 2px solid var(--ink); background: var(--surface); padding: 22px 24px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.pn:hover { transform: translate(-3px,-3px); box-shadow: 7px 7px 0 var(--accent); }
.pn .dir { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pn .pn-title {
  display: block; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 10px 0 0; }
.pn.next { text-align: right; }

/* Related */
.related { padding: 70px 0 0; }
.related h2 { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 24px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: #0B0B0D; color: #fff; margin-top: 96px; padding: 64px 0 44px; }
.foot .container { display: block; }
.foot-mark { display: flex; flex-direction: column; gap: 10px; }
.foot .lets-krail-big {
  font-family: var(--roboto-black); font-weight: 900; font-style: italic;
  font-size: clamp(46px, 9vw, 108px); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(90deg, var(--train) 0%, var(--metro) 18%, var(--bus) 36%, var(--ferry) 54%, var(--lr) 72%, var(--coach) 88%, var(--train) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: krail-sweep 12s linear infinite;
}
@keyframes krail-sweep { from { background-position: 0% 0%; } to { background-position: -240% 0%; } }
.foot .made-in { font-size: 14px; color: rgba(255,255,255,0.6); }
.foot .heart { color: var(--brand-pink); display: inline-block; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.16); } }

.foot-pills { display: flex; gap: 12px; margin: 40px 0 8px; }
.foot-pills .mp {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--roboto-black); font-weight: 900; font-size: 17px; color: #fff;
  border: 2.5px solid #fff; opacity: 1;
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}
.foot-pills .mp:hover { transform: rotate(-9deg) scale(1.08); }
.foot-pills-caption { font-size: 13px; color: rgba(255,255,255,0.55); margin: 6px 0 0; }

.foot-coda {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-top: 48px;
  font-size: 13px; color: rgba(255,255,255,0.6);
}
.foot-nav { display: flex; gap: 22px; }
.foot-nav a:hover { color: var(--brand-pink); }
.foot-disclaimer { margin: 26px 0 0; font-size: 12px; line-height: 1.65; color: rgba(255,255,255,0.45); max-width: 96ch; }
.foot-disclaimer .label {
  display: inline-block; margin-right: 8px; padding: 3px 8px;
  background: #DB287B; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ============================================================
   READING PROGRESS
   ============================================================ */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent); z-index: 200; transition: width .1s linear;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .container { padding: 0 20px; }
  nav.top .row { padding: 12px 20px; gap: 12px; }
  /* Most readers arrive on a phone, so the Journal link has to survive.
     Only the links that duplicate the landing page get dropped. */
  .nav-links { gap: 0; font-size: 13px; }
  .nav-links a:not(.keep) { display: none; }
  /* The blur is expensive to repaint on a low-end phone. */
  nav.top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  nav.top.scrolled { background: var(--paper); }
  /* Six large radial gradients repaint on every scroll frame. Three is plenty. */
  body { background:
    radial-gradient(520px 440px at 6% 3%,   rgba(47,217,255,var(--blob-a)), transparent 65%),
    radial-gradient(520px 440px at 96% 28%, rgba(255,90,168,var(--blob-b)), transparent 65%),
    radial-gradient(520px 440px at 4% 70%,  rgba(91,194,255,var(--blob-b)), transparent 65%),
    var(--paper); }
  .masthead { padding: 40px 0 20px; }
  .featured-card { grid-template-columns: 1fr; box-shadow: 7px 7px 0 var(--accent); }
  .featured-media { border-right: 0; border-bottom: 2px solid var(--ink); }
  .featured-body { padding: 28px 24px 30px; }
  .band { grid-template-columns: 1fr; padding: 36px 26px; box-shadow: 8px 8px 0 var(--accent); }
  .band-actions { justify-content: flex-start; }
  .prevnext { grid-template-columns: 1fr; }
  .pn.next { text-align: left; }
  .img-pair { grid-template-columns: 1fr; }
  .prose-body { font-size: 18px; }
  .post-hero { box-shadow: 7px 7px 0 var(--accent); }
  .shot-stage { padding: 30px 16px 26px; box-shadow: 7px 7px 0 var(--accent); }
  .shot-stage .shot-row { gap: 16px; }
  .phone { width: 190px; height: 396px; border-radius: 30px; }
  .phone .notch { width: 70px; height: 18px; }
}
@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .anim { opacity: 1; transform: none; }
  .sq-line { clip-path: inset(0 0 0 0); }
}

/* ============================================================
   DEMO-ONLY THEME LAB · deleted before ship
   ============================================================ */
.lab {
  position: fixed; right: 18px; bottom: 18px; z-index: 300;
  background: var(--surface); border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--brand-pink);
  padding: 14px 16px; font-size: 12px; font-family: var(--sans);
  color: var(--ink); min-width: 208px;
}
.lab .lab-title { margin: 0 0 10px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.lab .row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.lab button {
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  padding: 5px 10px; font-size: 11px; font-weight: 800; cursor: pointer;
  letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--sans);
}
.lab button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lab .swatches { display: flex; gap: 6px; margin-top: 10px; }
.lab .swatches i { width: 20px; height: 20px; border: 2px solid var(--ink); cursor: pointer; }