/* ============================================================
   EYE ON VIETNAM — custom Ghost theme
   Serif: EB Garamond · Data: JetBrains Mono
   Seal #B02A1F · Ink #16202A · River #2E5C6E · Slate #5A6570
   ============================================================ */

:root {
  --seal: #B02A1F;
  --seal-deep: #8E211A;
  --ink: #16202A;
  --river: #2E5C6E;
  --slate: #5A6570;
  --edge: #E4E7E3;
  --paper: #FFFFFF;
  --paper-soft: #FAFBFA;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --dot: rgba(22, 32, 42, 0.045);
  --code-bg: #F4F6F4;
  --pre-bg: #16202A;
  --btn-bg: #B02A1F;
  --btn-bg-hover: #8E211A;
  --btn-text: #FFFFFF;
  --mono: "JetBrains Mono", Menlo, Consolas, monospace;
  --serif: "EB Garamond", Georgia, Times, serif;
  --wrap: 1180px;
}

/* ============================================================
   DARK MODE — token overrides
   The palette does not invert: #B02A1F fails contrast on a dark
   field, so the accent lifts to #E2604F, and the background is an
   ink-navy in the same hue family as the light-mode heading colour.
   Two triggers: explicit [data-theme="dark"] (the toggle), or the
   system preference when the visitor hasn't chosen.
   ============================================================ */
:root[data-theme="dark"] {
  --seal: #E2604F;
  --seal-deep: #EE7768;
  --ink: #E8EDEA;
  --river: #8FC4D6;       /* lifted for link contrast on the dark field */
  --slate: #A3B2BC;       /* lifted a notch — light-mode slate reads dim on dark */
  --edge: #26333D;
  --paper: #0E1519;
  --paper-soft: #141E24;
  --nav-bg: rgba(14, 21, 25, 0.92);
  --dot: rgba(232, 237, 234, 0.05);
  --code-bg: #18242B;
  --pre-bg: #18242B;
  --btn-bg: #A93A2C;      /* deeper red than the lifted accent — white text stays crisp */
  --btn-bg-hover: #C14A38;
  --btn-text: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seal: #E2604F;
    --seal-deep: #EE7768;
    --ink: #E8EDEA;
    --river: #8FC4D6;
    --slate: #A3B2BC;
    --edge: #26333D;
    --paper: #0E1519;
    --paper-soft: #141E24;
    --nav-bg: rgba(14, 21, 25, 0.92);
    --dot: rgba(232, 237, 234, 0.05);
    --code-bg: #18242B;
    --pre-bg: #18242B;
    --btn-bg: #A93A2C;      /* deeper red than the lifted accent — white text stays crisp */
    --btn-bg-hover: #C14A38;
    --btn-text: #FFFFFF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ---------- Ambient surveyor's dot-grid ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.site-wrap { position: relative; z-index: 1; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

::selection { background: var(--seal); color: #fff; }
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 3px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
#eov-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--seal);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav {
  border-bottom: 1px solid var(--edge);
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.nav-in { display: flex; align-items: center; gap: 32px; height: 68px; }

/* Reset the list that {{navigation}} outputs */
.nav-menu ul.nav { list-style: none; display: flex; gap: 26px; padding: 0; margin: 0; }

.brand {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}
.seal {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2.5px solid var(--seal);
  flex: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.brand:hover .seal { transform: rotate(90deg); background: var(--seal); }

.nav-menu { display: flex; gap: 26px; margin-left: 8px; }
.nav-menu a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.nav-menu a:hover, .nav-menu a.nav-current { color: var(--ink); border-color: var(--seal); }
.mobile-nav { display: none; }
.mobile-nav summary {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  width: max-content;
}
.mobile-nav ul.nav { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--edge); }
.mobile-nav li + li { margin-top: 10px; }
.mobile-nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.mobile-nav a:hover, .mobile-nav a.nav-current { color: var(--ink); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.signin {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  transition: color 0.18s;
}
.signin:hover { color: var(--ink); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--slate);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover { color: var(--seal); border-color: var(--seal); transform: rotate(20deg); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 0;
  border-radius: 3px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--btn-bg) 35%, transparent);
}

/* ============================================================
   HERO — open with the story, not a generic banner
   ============================================================ */
.hero { padding: 88px 0 76px; border-bottom: 1px solid var(--edge); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 15px;
  position: relative;
  margin-bottom: 26px;
  display: inline-block;
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--seal);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.hero h1 em { font-style: normal; color: var(--seal); }

.hero p {
  margin-top: 24px;
  font-size: 20px;
  color: var(--slate);
  max-width: 34em;
  line-height: 1.62;
}

/* Hero CTA row — subscribe + tracker */
.hero .cta-row { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ghost-btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 11px 18px;
  color: var(--ink);
  transition: border-color 0.18s, color 0.18s;
}
.ghost-btn:hover { border-color: var(--seal); color: var(--seal); }

/* Cover — the Han River at night, graded into the palette */
.cover {
  aspect-ratio: 4/5;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #16202A, #2E5C6E);
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.62) contrast(1.06);
}
/* Duotone overlay — ink/river multiply so the photo sits in the identity */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg,
    rgba(22, 32, 42, 0.62), rgba(46, 92, 110, 0.34) 55%, rgba(22, 32, 42, 0.72));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cover-mark {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2.5px solid rgba(226, 96, 79, 0.95);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  line-height: 1.25;
  animation: stamp-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
.cover-credit {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@keyframes stamp-in {
  from { transform: scale(1.6) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ============================================================
   FEED
   ============================================================ */
.feed { padding: 76px 0 20px; }

.sec {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 15px;
  position: relative;
  margin-bottom: 38px;
  display: inline-block;
  color: var(--ink);
}
.sec::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--seal);
}

.feed-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
/* tag archives carry no author sidebar */
.feed-grid-wide { grid-template-columns: 1fr; max-width: 820px; }
.tag-desc { margin-top: 16px; font-size: 19px; line-height: 1.62; color: var(--slate); }
.tag-count {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.card {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 34px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--edge);
}
/* Staggered entrance on load — always ends visible, never hides content */
.js .card { animation: card-in 0.55s cubic-bezier(0.33, 1, 0.68, 1) both; }
.js .card:nth-child(1) { animation-delay: 0.05s; }
.js .card:nth-child(2) { animation-delay: 0.14s; }
.js .card:nth-child(3) { animation-delay: 0.23s; }
.js .card:nth-child(4) { animation-delay: 0.32s; }
.js .card:nth-child(n+5) { animation-delay: 0.4s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.card:last-child { border-bottom: 0; }

.card-thumb {
  aspect-ratio: 3/2;
  border-radius: 3px;
  background: linear-gradient(150deg, #1d3644, #3a6d80);
  overflow: hidden;
  position: relative;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.card:hover .card-thumb img { transform: scale(1.04); }

.card h2 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.32;
  letter-spacing: -0.016em;
  transition: color 0.18s;
  color: var(--ink);
}
.card:hover h2 { color: var(--river); }

.card p { margin-top: 14px; color: var(--slate); font-size: 18.5px; line-height: 1.58; }

.meta {
  margin-top: 20px;
  padding-top: 12px;
  position: relative;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}
.meta::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--seal);
}
.meta .author { color: var(--river); }

/* ---------- Author sidebar ---------- */
.side { border-left: 1px solid var(--edge); padding-left: 30px; position: sticky; top: 96px; }
.side-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 18px;
}
.avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  margin-bottom: 16px;
  background: linear-gradient(145deg, #2E5C6E, #16202A);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
}
/* real portrait from Ghost — the gradient monogram is the fallback */
.avatar-img { object-fit: cover; background: none; }
.side h3 { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.side .role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--seal);
  margin-top: 6px;
  text-transform: uppercase;
}
.side p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--slate); }
.side a.more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--seal);
  border-bottom: 1px solid color-mix(in srgb, var(--seal) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color 0.18s;
}
.side a.more:hover { border-color: var(--seal); }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-header { padding: 72px 0 48px; border-bottom: 1px solid var(--edge); }
.article-header .wrap { max-width: 820px; }
.article-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-top: 20px;
}
.article-excerpt {
  margin-top: 22px;
  font-size: 21px;
  font-style: italic;
  color: var(--slate);
  line-height: 1.55;
}
.article-meta {
  margin-top: 28px;
  padding-top: 14px;
  position: relative;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}
.article-meta::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 3px;
  background: var(--seal);
}
.article-meta .author { color: var(--river); }

.article-body { padding: 56px 0 40px; }
.article-body .wrap { max-width: 720px; }

.gh-content { font-family: var(--serif); font-size: 19.5px; line-height: 1.72; color: var(--ink); }
.gh-content > p, .gh-content > ul, .gh-content > ol { margin-bottom: 1.5em; }
.gh-content h2, .gh-content h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2.2em 0 0.8em;
  line-height: 1.25;
}
.gh-content h2 { font-size: 30px; }
.gh-content h2::before { content: "§ "; color: var(--seal); }
.gh-content h3 { font-size: 24px; }

.gh-content a {
  color: var(--river);
  text-decoration: underline;
  text-decoration-color: rgba(46, 92, 110, 0.35);
  text-underline-offset: 3px;
  transition: color 0.18s, text-decoration-color 0.18s;
}
.gh-content a:hover { color: var(--seal); text-decoration-color: var(--seal); }

.gh-content strong { font-weight: 600; }
.gh-content blockquote {
  border-left: 3px solid var(--seal);
  padding: 6px 0 6px 24px;
  margin: 1.8em 0;
  font-style: italic;
  font-size: 21px;
  color: var(--slate);
}
.gh-content code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: var(--paper-soft);
  border: 1px solid var(--edge);
  color: var(--river);
  padding: 2px 6px;
  border-radius: 2px;
}
.gh-content pre {
  background: var(--pre-bg);
  color: #D7DEE5;
  padding: 20px 24px;
  border-radius: 3px;
  overflow-x: auto;
  margin: 1.8em 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
}
.gh-content pre code { background: none; border: 0; color: inherit; padding: 0; }
.gh-content ul li, .gh-content ol li { margin-bottom: 0.5em; padding-left: 4px; }
.gh-content ul li::marker { color: var(--seal); }
.gh-content ol li::marker { color: var(--seal); font-family: var(--mono); font-weight: 600; }
.gh-content img { border-radius: 3px; margin: 1.8em auto; }

/* Koenig width cards. Required by Ghost; the body column is 720px, so wide and
   full break out of it symmetrically without a wrapper element. */
.gh-content :is(.kg-width-wide, .kg-width-full) { position: relative; }
.gh-content .kg-width-wide { width: min(1000px, 92vw); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { width: min(var(--wrap), 96vw); margin-left: 50%; transform: translateX(-50%); }
.gh-content :is(.kg-width-wide, .kg-width-full) img { width: 100%; }
.gh-content .kg-width-full img { border-radius: 0; }
.gh-content figure { margin: 2em 0; }
.gh-content figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-top: 10px;
  text-transform: uppercase;
}

/* ============================================================
   CTA — the dispatch band
   ============================================================ */
.cta { margin-top: 70px; border-top: 1px solid var(--edge); background: var(--paper-soft); }
/* 28px matches .wrap's gutter — the shorthand was resetting it to 0, so below
   the 1180px max-width the CTA text sat flush against the viewport edge while
   every other section was inset. */
.cta-in { padding: 66px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cta h2 { font-family: var(--serif); font-weight: 600; font-size: 33px; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.cta p { margin-top: 14px; color: var(--slate); font-size: 18.5px; line-height: 1.58; }
.form { display: flex; gap: 10px; }
.form input {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  padding: 13px 15px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.form input:focus { outline: 2px solid var(--seal); outline-offset: 2px; border-color: transparent; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--edge); }
.foot-in {
  /* same reset-the-gutter issue as .cta-in — keep the 28px from .wrap */
  padding: 30px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.foot-in .brand { font-size: 13px; color: var(--ink); }
.foot-in .right { margin-left: auto; display: flex; gap: 22px; }
.foot-in .right a { transition: color 0.18s; }
.foot-in .right a:hover { color: var(--seal); }

.foot-note {
  border-top: 1px solid var(--edge);
  padding: 20px 0 32px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--slate);
  max-width: 70em;
}

/* ============================================================
   PAGE (About) template
   ============================================================ */
.page-body { padding: 64px 0 40px; }
.page-body .wrap { max-width: 720px; }

/* ---------- Contact block (About page) ---------- */
.contact {
  margin-top: 48px;
  border-left: 3px solid var(--seal);
  background: var(--paper-soft);
  padding: 24px 26px;
  border-radius: 0 3px 3px 0;
}
.contact .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 12px;
}
.contact-links { display: flex; flex-direction: column; gap: 10px; }
.contact-links a {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.18s;
}
.contact-links a::before {
  content: "→";
  color: var(--seal);
  font-weight: 600;
}
.contact-links a:hover { color: var(--seal); }

/* ============================================================
   TRACKER PAGE — the standing regulation reference
   ============================================================ */
.tracker { padding: 64px 0 10px; }
.tracker-head { max-width: 44em; }
.tracker-head h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(31px, 3.6vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.tracker-head p { margin-top: 18px; font-size: 19px; color: var(--slate); line-height: 1.62; }
.updated {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 8px 13px;
}
.updated span { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); }

.t-wrap { margin-top: 46px; border-top: 1px solid var(--edge); }
.t-row {
  display: grid;
  grid-template-columns: 170px 1fr 132px;
  gap: 28px;
  padding: 26px 0;
  border-bottom: 1px solid var(--edge);
  align-items: start;
  transition: background 0.18s;
}
.t-row:hover { background: var(--paper-soft); }
.t-ref {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.t-topic {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seal);
  line-height: 1.45;
}
.t-body p { font-size: 18px; line-height: 1.58; color: var(--ink); margin: 0; }
.t-body .src {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.t-body .src a {
  color: var(--river);
  border-bottom: 1px solid color-mix(in srgb, var(--river) 35%, transparent);
  transition: border-color 0.18s;
}
.t-body .src a:hover { border-color: var(--river); }
.t-status {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 11px;
  position: relative;
}
/* red rule = confirmed in force or issued */
.t-status::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 3px;
  background: var(--seal);
}
/* grey rule = reported, official text not yet reviewed.
   Unused as of tracker rev 2 — every instrument is issued. Kept so that an
   instrument announced but not yet promulgated can use it. */
.t-status.pending::before { background: var(--slate); }

/* Entry into force — the second signal. Promulgation and commencement are
   different facts: Decree 327 was issued 18 Dec 2025 but only took effect
   17 Jan 2026. Where the commencement clause has not been read, say so rather
   than letting the issuance date stand in for it. */
.t-eff {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dotted var(--edge);
  font-size: 9.8px;
  letter-spacing: 0.07em;
}
.t-eff.yes { color: var(--ink); }
.t-eff.unk { color: var(--slate); }
.t-eff.unk::before { content: "?\00a0"; }

/* English-text availability — the third, independent signal. Issuance and
   translation are different facts and the page conflated them until 03 Aug 2026.
   Ported from 03_assets/code-injection.html, which no longer applies now that
   the site runs a custom theme. */
.t-en {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dotted var(--edge);
  font-size: 9.8px;
  letter-spacing: 0.07em;
}
.t-en.yes { color: var(--seal); }
.t-en.no  { color: var(--slate); }
.t-en.unk { color: var(--slate); font-style: italic; }
.t-en.yes::before { content: "\2713\00a0"; }
.t-en.no::before  { content: "\2014\00a0"; }
.t-en.unk::before { content: "?\00a0"; }

/* ---------- Source register (/sources/) ----------
   Generated by 03_assets/build-sources-page.py into an HTML card, same
   theme-owns-the-frame arrangement as the tracker. Reuses .t-legend and
   .boundary; only the grouped rows are new. */
.s-group { margin: 40px 0 0; }
.s-h {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--seal);
}
.s-n {
  color: var(--slate);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.s-blurb {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 60em;
  margin: 12px 0 6px;
}
.s-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--edge);
}
.s-id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--slate);
  padding-top: 4px;
}
.s-meta a {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--river) 35%, transparent);
  transition: border-color 0.18s;
}
.s-meta a:hover { border-color: var(--river); }
.s-pub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 7px;
}
.s-date { color: var(--ink); }
/* An unconfirmed date must not read like a confirmed one. */
.s-nodate { color: var(--slate); font-style: italic; text-transform: none; letter-spacing: 0.03em; }

/* ---------- Member register (/members/) ----------
   Generated by 03_assets/build-members-page.py into an HTML card. Same
   theme-owns-the-frame arrangement as the tracker and the source register.

   The one design decision here that carries weight: members, interest
   acceptances and MoU partners must not read as one list. Only the Members
   group gets the seal-red rule; the other two get a hairline and muted type,
   so the hierarchy is legible before anyone reads a blurb. Same logic as the
   tracker's three independent status signals, and the same failure mode it
   guards against — a reader who skims must not come away believing an MoU
   partner is a member. */
.m-group { margin: 44px 0 0; }
.m-h {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--seal);
}
/* Not members. The rule says so before the prose does. */
.m-interest .m-h,
.m-mou .m-h,
.m-contact .m-h {
  border-bottom: 1px solid var(--edge);
  color: var(--slate);
}
/* Nothing signed. A dashed rule reads as provisional without needing a word. */
.m-contact .m-h { border-bottom-style: dashed; }
.m-n {
  color: var(--slate);
  font-weight: 400;
  letter-spacing: 0.06em;
}
.m-blurb {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
  max-width: 60em;
  margin: 12px 0 6px;
}
.m-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--edge);
}
.m-id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--slate);
  padding-top: 4px;
}
.m-name {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.m-interest .m-name,
.m-mou .m-name,
.m-contact .m-name { font-size: 16px; }
.m-line {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 7px;
}
.m-date { color: var(--ink); }
/* An approximate date, and an absent field, must both refuse to look confirmed. */
.m-approx,
.m-nodate,
.m-nodata {
  color: var(--slate);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.03em;
}
/* The citation is the point of the row, not decoration on it — but it must not
   outrank the name. Same weight as the rest of the meta line, underlined only
   on approach. */
.m-src {
  color: var(--river);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.m-src:hover,
.m-src:focus { border-bottom-color: var(--river); }
.m-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  margin-top: 7px;
  max-width: 58em;
}

/* ---------- Legend + correction log ---------- */
.t-legend,
.s-legend,
.m-legend { margin-top: 24px; }
.t-legend p,
.s-legend p,
.m-legend p { font-size: 16.5px; line-height: 1.6; color: var(--slate); max-width: 62em; margin: 0 0 10px; }
.t-legend .upd,
.s-legend .upd,
.m-legend .upd { font-family: var(--mono); font-size: 11px; line-height: 1.65; margin: 0; }
.m-legend code { font-family: var(--mono); font-size: 0.88em; color: var(--ink); }
.t-legend .lbl,
.s-legend .lbl,
.m-legend .lbl,
.t-corr .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 10px;
}
.t-corr {
  margin-top: 22px;
  border-left: 3px solid var(--slate);
  padding: 4px 0 4px 20px;
}
.t-corr p { font-size: 16px; line-height: 1.6; color: var(--slate); max-width: 62em; margin: 0; }

/* ---------- Boundary note ---------- */
.boundary {
  margin-top: 52px;
  border-left: 3px solid var(--seal);
  background: var(--paper-soft);
  padding: 22px 24px;
  border-radius: 0 3px 3px 0;
}
.boundary .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--seal);
  margin-bottom: 10px;
}
.boundary p { font-size: 16.5px; line-height: 1.6; color: var(--slate); max-width: 62em; margin: 0; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 20px 0 60px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pagination a {
  color: var(--slate);
  border: 1px solid var(--edge);
  padding: 10px 18px;
  border-radius: 3px;
  transition: color 0.18s, border-color 0.18s;
}
.pagination a:hover { color: var(--seal); border-color: var(--seal); }

/* ============================================================
   MOTION — respect reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .card { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid, .feed-grid, .cta-in { grid-template-columns: 1fr; gap: 40px; }
  .cover { aspect-ratio: 16/10; order: -1; }
  .card { grid-template-columns: 1fr; }
  .card-thumb { order: -1; }
  .side { border-left: 0; border-top: 1px solid var(--edge); padding-left: 0; padding-top: 30px; position: static; }
  .hero { padding: 56px 0 48px; }
  .nav-in { height: auto; min-height: 68px; flex-wrap: wrap; gap: 12px 18px; padding-top: 12px; padding-bottom: 12px; }
  .nav-menu { display: none; }
  .mobile-nav { display: block; flex: 0 0 100%; order: 4; }
  .t-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
  .t-status { padding-top: 10px; }
  /* single column: the three signals read better side by side than stacked */
  .t-eff,
  .t-en {
    display: inline-block;
    margin: 0 0 0 14px;
    padding: 0 0 0 14px;
    border-top: 0;
    border-left: 1px dotted var(--edge);
  }
}

@media (max-width: 520px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-in {
    display: grid;
    grid-template-areas:
      "brand toggle"
      "subscribe subscribe"
      "menu menu";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }
  .nav-in > .brand { grid-area: brand; min-width: 0; }
  .nav-right { display: contents; }
  .nav-right .theme-toggle { grid-area: toggle; }
  .nav-right .signin { display: none; }
  .nav-right .btn { grid-area: subscribe; justify-self: start; }
  .mobile-nav { grid-area: menu; width: 100%; }
}

:is(a, button, input):focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }

/* ===== eov-table: data tables inside posts (rendered as HTML cards, because
   Ghost's lexical renderer has no table node and silently truncates at one) ===== */
.eov-table {
  width: 100%;
  border-collapse: collapse;
  margin: 34px 0;
  font-size: 16px;
  line-height: 1.5;
}
.eov-table th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--ink);
  border-bottom: 2px solid var(--seal);
  padding: 10px 14px 10px 0;
}
.eov-table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--edge);
  color: var(--ink);
  vertical-align: top;
}
.eov-table tr:last-child td { border-bottom: none; }
.eov-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) {
  .eov-table { font-size: 14px; display: block; overflow-x: auto; }
  .eov-table td:first-child { white-space: normal; }
}

/* ===== Post navigation (prev/next + archive link) ===== */
.post-nav { border-top: 1px solid var(--edge); margin-top: 56px; }
.post-nav-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  padding: 28px 28px;
  align-items: center;
}
.post-nav a { text-decoration: none; display: block; }
.post-nav .lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  display: block;
  margin-bottom: 6px;
}
.post-nav .t { color: var(--ink); font-weight: 600; }
.post-nav a:hover .t { color: var(--seal); }
.post-nav-next { text-align: right; }
.post-nav-archive {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--river);
  white-space: nowrap;
}
.post-nav-archive:hover { color: var(--seal); }
@media (max-width: 900px) {
  .post-nav-in { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .post-nav-next { text-align: left; }
  .post-nav-archive { order: 3; }
}

/* Archive page: tighten card list a touch */
.page-template .feed { padding-top: 40px; }

/* ---------- VIFC Entry Map ---------- */
.entry-map-page { padding: 68px 0 88px; }
.entry-map-header { max-width: 760px; margin-bottom: 34px; }
.entry-map-lede { margin: 14px 0 0; max-width: 46em; font-size: 21px; line-height: 1.5; color: var(--slate); }
.entry-map-boundary,
.entry-map-notice,
.entry-map-card {
  border: 1px solid var(--edge);
  background: var(--paper-soft);
  border-radius: 3px;
}
.entry-map-boundary { max-width: 820px; padding: 26px 28px; border-left: 3px solid var(--seal); }
.entry-map-boundary h2,
.entry-map-result-section > h3 { margin: 0 0 10px; font-size: 25px; line-height: 1.2; color: var(--ink); }
.entry-map-boundary p { max-width: 62em; margin: 10px 0; color: var(--slate); }
.entry-map-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.entry-map-links a { color: var(--river); }
.entry-map-notice { max-width: 820px; margin: 28px 0; padding: 14px 18px; color: var(--slate); }
.entry-map-notice--error { border-left: 3px solid var(--seal); }
[data-entry-map-form],
[data-entry-map-review],
[data-entry-map-results] { max-width: 820px; margin-top: 32px; }
.entry-map-fieldset { margin: 0 0 20px; padding: 20px 22px 18px; border: 1px solid var(--edge); }
.entry-map-fieldset legend { padding: 0 7px; color: var(--ink); font-size: 20px; font-weight: 600; }
.entry-map-help { margin: 0 0 14px; color: var(--slate); font-size: 16px; line-height: 1.5; }
.entry-map-option { display: block; margin: 10px 0; color: var(--ink); cursor: pointer; }
.entry-map-option input { margin-right: 9px; accent-color: var(--seal); }
.entry-map-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.entry-map-primary,
.entry-map-secondary {
  appearance: none;
  border-radius: 3px;
  padding: 11px 15px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}
.entry-map-primary { border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-text); }
.entry-map-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.entry-map-secondary { border: 1px solid var(--edge); background: var(--paper); color: var(--ink); }
.entry-map-secondary:hover { border-color: var(--seal); color: var(--seal); }
.entry-map-selection-list { display: grid; grid-template-columns: minmax(160px, 0.36fr) 1fr; gap: 8px 20px; margin: 18px 0 0; }
.entry-map-selection-list dt { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.entry-map-selection-list dd { margin: 0; color: var(--ink); }
.entry-map-result-section { margin-top: 34px; }
.entry-map-card { margin-top: 14px; padding: 20px 22px; }
.entry-map-card h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; color: var(--ink); }
.entry-map-card p { margin: 8px 0 0; color: var(--slate); }
.entry-map-card-label,
.entry-map-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.entry-map-card-label { color: var(--seal) !important; font-weight: 600; }
.entry-map-meta { color: var(--slate); }
.entry-map-card .entry-map-links { margin-top: 14px; }
@media print {
  .site-nav, .cta, .foot, .entry-map-boundary, .entry-map-print-controls { display: none !important; }
  .entry-map-page { padding: 0; }
  .entry-map-card, .entry-map-fieldset { break-inside: avoid; background: var(--paper); }
}
@media (max-width: 600px) {
  .entry-map-page { padding: 44px 0 60px; }
  .entry-map-boundary, .entry-map-fieldset, .entry-map-card { padding-left: 18px; padding-right: 18px; }
  .entry-map-selection-list { grid-template-columns: 1fr; gap: 5px; }
  .foot-in { align-items: flex-start; }
  .foot-in .right {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px 18px;
  }
}