/*
Theme Name: Dream Travel Live 2026
Theme URI: https://dream-travel-live.ru/
Description: Современная авторская тема для историй реальных поездок и практических путеводителей.
Author: Dream Travel Live
Version: 0.2.0
Text Domain: dream-travel-2026
Requires at least: 6.5
Requires PHP: 8.0
*/

/* ============================================
   REFACTORED + CLEANED STYLESHEET
   - Richer CSS custom properties (design tokens)
   - Better organized sections
   - Duplicates cleaned
   - Previously unfinished work in style-refactored.css completed here.
   ============================================ */

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/roboto-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/roboto-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* Brand */
  --ink: #102d38;
  --ink-2: #173e49;
  --paper: #f4f1e9;
  --white: #fffdf8;
  --orange: #e84f2b;
  --orange-dark: #b93418;
  --acid: #d9f04c;
  --sky: #cde9f1;

  /* Neutrals & lines */
  --muted: #405d67;
  --line: rgba(16,45,56,.18);
  --line-strong: rgba(16,45,56,.28);
  --line-light: rgba(255,255,255,.28);

  /* Extended palette */
  --acid-hover: #e7ff57;
  --ink-weak: #c6d2d5;
  --ink-weaker: #9eb1b6;
  --bg-alt: #e7eceb;
  --overlay-ink: rgba(16,45,56,.9);
  --overlay-strong: rgba(16,45,56,.66);

  /* Layout */
  --wrap: min(1340px, calc(100% - 48px));

  /* Typography (common mono sizes) */
  --fs-mono: .62rem;
  --fs-mono-sm: .58rem;
  --fs-mono-xs: .56rem;

  /* Spacing */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  /* Effects */
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 5px 5px 0 var(--line-strong);
  --shadow-lg: 12px 12px 0 rgba(16,45,56,.3);
  --shadow-accent: 7px 7px 0 var(--acid);

  /* Radius & transitions */
  --radius-full: 999px;
  --radius-circle: 50%;
  --ease: cubic-bezier(.2,.7,.2,1);
  --trans-fast: .2s ease;
  --trans: .3s ease;
}

/* ============================================
   BASE / RESET
   ============================================ */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, sans-serif;
  line-height: 1.5;
}

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

a { color: inherit; }

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  padding: .7rem 1rem;
  background: var(--ink);
  color: white;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

/* ============================================
   TOPBAR / NAV / HEADER
   ============================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: top 0.1s ease;
}

/* Use WP admin bar height via CSS variable when available.
   Fallback to common heights via body class. */
:root {
  --admin-bar-height: 0px;
}

.admin-bar {
  --admin-bar-height: 32px;
}

@media (max-width: 600px) {
  .admin-bar {
    --admin-bar-height: 46px;
  }
}

.admin-bar .topbar {
  top: var(--admin-bar-height);
}

.topbar-inner {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.055em;
  text-decoration: none;
}

.logo-sign {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--orange);
  color: white;
  font-size: .9rem;
}

.logo small {
  margin-left: .15rem;
  border: 1px solid var(--ink);
  padding: .08rem .28rem;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: .04em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav a {
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover { color: var(--orange-dark); }

.top-actions {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.saved-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  padding: .35rem 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.saved-count {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--acid);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
}

.menu-button {
  display: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius-full);
  padding: .5rem .75rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
}

/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  min-height: calc(100svh - 72px);
}

.hero-media {
  position: absolute;
  inset: 0 0 0 43%;
  overflow: hidden;
  background: var(--sky);
}

.hero-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(244,241,233,.18), transparent 24%);
  content: "";
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}

.photo-label {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 18px;
  margin: 0;
  padding: .45rem .65rem;
  background: var(--white);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono);
  text-transform: uppercase;
}

.photo-label span { color: var(--orange-dark); }

.hero-overlay {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: calc(100svh - 72px);
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}

.hero-kicker {
  margin: 0 0 1.2rem;
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(4rem, 9.3vw, 9.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .77;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero h1 em {
  display: inline-block;
  color: var(--orange);
  font-style: normal;
  transform: translateX(.45em);
}

.hero-deck {
  width: min(440px, 39%);
  margin: 2rem 0 0;
  color: var(--ink-2);
  font-size: clamp(.94rem, 1.25vw, 1.08rem);
  font-weight: 500;
}

.signal-strip {
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}

.signal-static {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.signal-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
  padding: .75rem 1.2rem .75rem 0;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  letter-spacing: .035em;
  text-transform: uppercase;
}

.signal-list i { color: var(--acid); font-style: normal; }

.hero-random-story {
  pointer-events: auto;
  display: flex;
  width: min(100%, 390px);
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
  border: 1px solid var(--ink);
  padding: .9rem 1rem;
  background: var(--acid);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background var(--trans-fast);
}

.hero-random-story small {
  display: block;
  margin-bottom: .3rem;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-random-story b { font-size: 1.4rem; font-weight: 400; }

.hero-random-story:hover {
  transform: translate(-3px, -3px);
  background: var(--acid-hover);
  box-shadow: var(--shadow-sm);
}

.hero-random-story:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* ============================================
   SECTIONS / GENERAL
   ============================================ */

main { counter-reset: dtl-section; }

.numbered-section { counter-increment: dtl-section; }

.numbered-section .section-no::before {
  content: counter(dtl-section, decimal-leading-zero) " / ";
}

.section {
  padding-block: clamp(5rem, 10vw, 9rem);
}

.section-header {
  display: grid;
  grid-template-columns: 1fr 2.3fr 1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;
}

.section-no {
  align-self: start;
  margin: .5rem 0 0;
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono);
  letter-spacing: .05em;
}

.section-header h2 {
  margin: 0;
  font-size: clamp(3rem, 6.5vw, 7rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .86;
  text-transform: uppercase;
}

.section-header > p:last-child {
  max-width: 300px;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

/* ============================================
   PLACES / CAROUSEL
   ============================================ */

.places-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  gap: 16px;
  padding-bottom: 8px;
}

.places-carousel::-webkit-scrollbar { display: none; }

.places-grid-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}

.place {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  padding: 1.15rem;
  color: white;
  text-decoration: none;
}

.place::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,35,42,.08), rgba(9,35,42,.76));
  content: "";
  transition: background var(--trans);
}

.place img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.place:hover img { transform: scale(1.04); }

.place-top,
.place-bottom {
  position: absolute;
  right: 1.15rem;
  left: 1.15rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.place-top { top: 1rem; }
.place-bottom { bottom: 1rem; }

.place-top b {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--acid);
  color: var(--ink);
  font-family: "Roboto Mono", monospace;
  font-size: .68rem;
}

.place-top small,
.place-bottom small {
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.place-bottom { align-items: end; }

.place-bottom strong {
  font-size: clamp(1.4rem, 2.6vw, 2.8rem);
  letter-spacing: -.055em;
  line-height: .9;
}

/* Desktop grid layout (consolidated) */
.places-grid-page .place:nth-child(1) {
  grid-column: span 7;
  grid-row: span 3;
}

.places-grid-page .place:nth-child(2),
.places-grid-page .place:nth-child(3),
.places-grid-page .place:nth-child(4) {
  grid-column: span 5;
}

.all-link {
  display: inline-flex;
  gap: .5rem;
  margin-top: 1.6rem;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.all-link:hover { color: var(--orange-dark); }

/* ============================================
   USEFUL LIST
   ============================================ */

.useful { background: var(--sky); }

.useful-header { margin-bottom: 4rem; }

.useful-list { border-top: 1px solid var(--ink); }

.useful-list a {
  display: grid;
  grid-template-columns: 70px 1.5fr 1fr auto;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding: 1.2rem 0;
  text-decoration: none;
  transition: padding .25s ease, background .25s ease;
}

.useful-list a:hover {
  padding-inline: 1rem;
  background: var(--acid);
}

.useful-no {
  font-family: "Roboto Mono", monospace;
  font-size: .66rem;
}

.useful-list strong {
  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  letter-spacing: -.045em;
}

.useful-list small {
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: .65rem;
  text-transform: uppercase;
}

.useful-list b { font-size: 1.3rem; }

/* ============================================
   ARCHIVE PROGRESS
   ============================================ */

.archive-progress { padding-top: clamp(4rem, 8vw, 7rem); }

.archive-progress-meter {
  position: relative;
  display: grid;
  min-height: 110px;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: .2rem 1rem;
  overflow: hidden;
  border: 1px solid var(--ink);
  padding: 1.3rem;
}

.archive-progress-meter > div {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  min-width: 8px;
  background: var(--acid);
}

.archive-progress-meter strong {
  grid-row: span 2;
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  letter-spacing: -.07em;
  line-height: .9;
}

.archive-progress-meter span {
  align-self: end;
  font-family: "Roboto Mono", monospace;
  font-size: .66rem;
  text-transform: uppercase;
}

.archive-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--ink);
  gap: 1px;
}

.archive-progress-grid a {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  padding: clamp(1.3rem, 3vw, 2.5rem);
  background: var(--paper);
  text-decoration: none;
}

.archive-progress-grid a:first-child { background: var(--acid); }

.archive-progress-grid span,
.archive-progress-grid small {
  font-family: "Roboto Mono", monospace;
  font-size: .66rem;
  text-transform: uppercase;
}

.archive-progress-grid strong {
  max-width: 560px;
  margin-top: auto;
  font-size: clamp(1.7rem, 3.5vw, 3.7rem);
  letter-spacing: -.06em;
  line-height: .96;
}

.archive-progress-grid small { margin-top: 1.2rem; }

/* ============================================
   STORIES
   ============================================ */

.stories-header { grid-template-columns: 1fr 2.3fr 1fr; }
.stories-header .all-link { justify-self: end; }

.lead-story {
  display: grid;
  grid-template-columns: 1.45fr .75fr;
  border-block: 1px solid var(--ink);
}

.story-media {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: var(--sky); /* ensures full coverage even if image fails */
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-media > span {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .4rem .6rem;
  background: var(--acid);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.image-place-badge {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 3;
  max-width: calc(100% - 1.5rem);
  padding: .35rem .5rem;
  background: var(--overlay-ink);
  color: white;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-xs);
  font-style: normal;
  text-transform: uppercase;
}

.story-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid var(--ink);
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.story-type {
  margin: 0 0 .8rem;
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .66rem;
  text-transform: uppercase;
}

.story-copy h3 {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 4.2rem);
  letter-spacing: -.065em;
  line-height: .94;
}

.story-copy h3 a,
.story-row h3 a { text-decoration: none; }

.story-copy > p:not(.story-type) { color: var(--muted); }

.read {
  margin-top: 1.2rem;
  font-weight: 800;
  text-decoration: none;
}

.story-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--ink);
}

.story-row article {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--ink);
}

.story-row article:last-child { border-right: 0; }

.story-card {
  display: flex;
  min-height: 620px;
  flex-direction: column;
}

.story-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: var(--sky);
}

.story-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}

.story-card:hover .story-card-media img { transform: scale(1.035); }

.story-card-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(135deg, var(--sky), var(--acid));
  color: var(--ink);
}

.story-card-placeholder b { font-size: 1.3rem; }

.story-card-placeholder i {
  align-self: flex-end;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  font-style: normal;
  text-transform: uppercase;
}

.story-card-body {
  position: relative;
  display: flex;
  min-height: 300px;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem 1.5rem 3.6rem;
}

.story-row h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  letter-spacing: -.04em;
  line-height: 1.1;
}

.story-card-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: .84rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.story-place {
  position: absolute;
  bottom: 1.4rem;
  left: 1.5rem;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
}

.post-card-image--fallback { background: var(--sky); }

/* ============================================
   AUTHOR
   ============================================ */

.author {
  background: var(--orange-dark);
  color: var(--white);
}

.author-layout {
  display: grid;
  grid-template-columns: 1fr 2.3fr 1fr;
  align-items: end;
  gap: 2rem;
}

.author .section-no { align-self: start; color: var(--white); }

.author blockquote {
  margin: 0;
  font-size: clamp(2.4rem, 5.2vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .95;
}

.author blockquote em {
  color: var(--acid);
  font-style: normal;
}

.author-note {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.author-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--acid);
  color: var(--ink);
  font-weight: 800;
}

.author-note strong,
.author-note span { display: block; }

.author-note span { margin-top: .15rem; font-size: .72rem; }

.author-link {
  grid-column: 3;
  justify-self: end;
  color: white;
  font-weight: 800;
  text-decoration: none;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
  background: var(--ink);
  color: var(--white);
}

.footer-community {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  border-inline: 1px solid var(--line-light);
  background: var(--line-light);
}

.footer-community > div {
  min-height: 290px;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  background: var(--ink);
}

.footer-community-copy small,
.footer-correction > span,
.footer-socials span {
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer-community-copy h2 {
  margin: auto 0 1rem;
  color: var(--acid);
  font-size: clamp(2.2rem, 4.3vw, 4.6rem);
  letter-spacing: -.075em;
  line-height: .9;
}

.footer-community-copy {
  display: flex;
  flex-direction: column;
}

.footer-community-copy p {
  margin: 0;
  color: var(--ink-weak);
  font-size: .86rem;
}

.footer-socials {
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 0 !important;
  gap: 1px;
  background: var(--line-light) !important;
}

.footer-socials a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}

.footer-socials a:hover {
  background: var(--acid);
  color: var(--ink);
}

.footer-socials strong {
  margin-top: .25rem;
  font-size: clamp(1.3rem, 2vw, 2rem);
}

.footer-socials b {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-size: 1.2rem;
}

.footer-correction {
  display: flex;
  flex-direction: column;
}

.footer-correction > span + p {
  margin-top: 0.35rem;
}

.footer-correction > span {
  font-size: 0.78rem;
  line-height: 1.3;
}

.footer-correction p {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-weak);
}

.footer-correction .open-correction {
  margin-top: 1rem;
}

.open-correction {
  min-height: 48px;
  border: 1px solid var(--white);
  padding: .7rem 1rem;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.open-correction:hover {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink);
}

.footer-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  padding-block: 4rem 2rem;
}

.footer-logo { color: var(--white); }

.footer-layout p { margin: 0; color: var(--ink-weak); }

.footer-layout nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.5rem;
}

.footer-layout nav a { color: var(--white); }

.footer-layout nav button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.footer-layout > small {
  grid-column: 1 / -1;
  margin-top: 3rem;
  color: var(--ink-weaker);
  font-family: "Roboto Mono", monospace;
}

/* ============================================
   DIALOGS & FLOATING UI
   ============================================ */

.selection-report {
  position: fixed;
  z-index: 70;
  right: 24px;
  bottom: 24px;
  max-width: 280px;
  min-height: 48px;
  border: 1px solid var(--ink);
  padding: .7rem 1rem;
  background: var(--acid);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

/* Correction dialog */
.correction-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  border: 1px solid var(--ink);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.correction-dialog::backdrop {
  background: var(--overlay-strong);
  backdrop-filter: blur(4px);
}

.correction-form { display: grid; gap: 1rem; }

.correction-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding: 1.4rem;
  background: var(--acid);
}

.correction-head small {
  font-family: "Roboto Mono", monospace;
  font-size: .61rem;
  text-transform: uppercase;
}

.correction-head h2 {
  margin: .25rem 0 0;
  font-size: clamp(2rem, 6vw, 3.7rem);
  letter-spacing: -.07em;
  line-height: .9;
}

.correction-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--radius-circle);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}

.correction-form > p,
.correction-form > label,
.correction-submit {
  margin-inline: 1.4rem;
}

.correction-form > p {
  margin-block: 0;
  color: var(--muted);
  font-size: .83rem;
}

.correction-form > label {
  display: grid;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 800;
}

.correction-form label small {
  color: var(--muted);
  font-weight: 400;
}

.correction-form textarea,
.correction-form input {
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: .75rem;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
}

.correction-honeypot {
  position: absolute !important;
  left: -10000px !important;
}

.correction-submit {
  min-height: 50px;
  border: 1px solid var(--ink);
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.correction-submit:hover { background: var(--orange-dark); }
.correction-submit:disabled { opacity: .55; cursor: wait; }

.correction-status {
  min-height: 1.4rem;
  padding-bottom: 1rem;
  color: var(--orange-dark) !important;
  font-family: "Roboto Mono", monospace;
  font-size: .65rem !important;
  text-transform: uppercase;
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  z-index: 100;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  max-width: 920px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  margin-inline: auto;
  border: 1px solid var(--white);
  padding: 1rem 1.1rem;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.cookie-banner strong { font-size: .9rem; }

.cookie-banner p {
  margin: .2rem 0;
  color: #d9e1e3;
  font-size: .76rem;
  line-height: 1.4;
}

.cookie-banner a {
  color: var(--white);
  font-family: "Roboto Mono", monospace;
  font-size: .6rem;
  text-transform: uppercase;
}

.cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.cookie-actions button {
  min-width: 118px;
  min-height: 46px;
  border: 1px solid var(--white);
  padding: .6rem .8rem;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.cookie-actions button:hover {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink);
}

/* Saved dialog */
.saved-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: min(760px, calc(100svh - 32px));
  overflow: auto;
  border: 1px solid var(--ink);
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 12px 12px 0 rgba(16,45,56,.25);
}

.saved-dialog::backdrop {
  background: var(--overlay-strong);
  backdrop-filter: blur(4px);
}

.saved-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding: 1.4rem;
  background: var(--acid);
}

.saved-dialog-head small,
.saved-note {
  font-family: "Roboto Mono", monospace;
  font-size: .61rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.saved-dialog-head h2 {
  margin: .25rem 0 0;
  font-size: clamp(2rem, 6vw, 3.7rem);
  letter-spacing: -.07em;
  line-height: .9;
}

.saved-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--radius-circle);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}

.saved-empty {
  margin: 0;
  padding: 2rem 1.4rem;
  color: var(--muted);
}

.saved-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.saved-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid var(--ink);
  padding: 1rem 1.4rem;
}

.saved-list li > span {
  align-self: start;
  padding-top: .15rem;
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
}

.saved-list a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  text-decoration: none;
}

.saved-list a:hover strong { color: var(--orange-dark); }

.saved-list strong {
  font-size: 1rem;
  line-height: 1.25;
}

.saved-list small {
  margin-top: .3rem;
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.saved-list button {
  border: 0;
  padding: .5rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.saved-list button:hover { color: var(--orange-dark); }

.saved-note {
  margin: 0;
  padding: 1rem 1.4rem;
  color: var(--muted);
}

/* ============================================
   WORDPRESS / ENTRY / SINGLE
   ============================================ */

/* Admin bar handled via --admin-bar-height variable above */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.screen-reader-text:focus {
  z-index: 9999;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  clip: auto;
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--white);
}

/* Entry shell */
.entry-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.entry-header {
  padding: clamp(3rem, 7vw, 7rem) 0 2.5rem;
}

.entry-kicker {
  margin: 0 0 1rem;
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.entry-title {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  text-wrap: balance;
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.2rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: .68rem;
  text-transform: uppercase;
}

.content-status {
  border-radius: var(--radius-full);
  padding: .18rem .55rem;
}

.content-status.is-reviewed {
  background: var(--acid);
  color: var(--ink);
}

.content-status.is-archive {
  background: var(--bg-alt);
  color: #607176;
}

.entry-quick-answer {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.5rem;
  margin-top: 2rem;
  border-block: 1px solid var(--ink);
  padding-block: 1.25rem;
}

.entry-quick-answer > span {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .67rem;
  text-transform: uppercase;
}

.entry-quick-answer p {
  max-width: 720px;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.65;
}

.entry-quick-answer a {
  display: inline-flex;
  gap: .6rem;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.entry-actions {
  display: flex;
  min-width: 165px;
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
}

.entry-actions a,
.entry-actions button {
  min-height: 36px;
  border: 1px solid var(--ink);
  padding: .45rem .65rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.entry-actions a:hover,
.entry-actions button:hover,
.entry-actions .save-article[aria-pressed="true"] {
  background: var(--acid);
}

.entry-update-note {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
  margin-top: -1px;
  border-bottom: 1px solid var(--ink);
  padding: 1rem 0;
  background: var(--acid);
  box-shadow: 20px 0 var(--acid), -20px 0 var(--acid);
}

.entry-update-note strong {
  font-family: "Roboto Mono", monospace;
  font-size: .67rem;
  text-transform: uppercase;
}

.entry-update-note p { margin: 0; }

.entry-hero {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.entry-hero img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: cover;
}

.image-place-note {
  margin: 0;
  padding: .55rem .75rem;
  background: var(--ink);
  color: var(--white);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-align: right;
  text-transform: uppercase;
}

/* Journey anatomy */
.journey-anatomy {
  margin: clamp(3rem, 7vw, 6rem) auto;
}

.journey-anatomy-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.journey-anatomy h2 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(2.3rem, 4.8vw, 5rem);
  letter-spacing: -.065em;
  line-height: .9;
}

.journey-anatomy-head p {
  max-width: 520px;
  justify-self: end;
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.55;
}

.journey-anatomy-list {
  margin: 0;
  border-top: 1px solid var(--ink);
  padding: 0;
  list-style: none;
}

.journey-anatomy-list li { border-bottom: 1px solid var(--ink); }

.journey-anatomy-list a,
.journey-anatomy-list li > div {
  display: grid;
  min-height: 92px;
  grid-template-columns: 70px minmax(0, 1fr) minmax(190px, auto);
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.25rem;
}

.journey-anatomy-list a {
  color: var(--ink);
  text-decoration: none;
}

.journey-anatomy-list .is-available {
  background: var(--acid);
}

.journey-anatomy-list .is-available a {
  transition: padding .22s ease, background .22s ease;
}

.journey-anatomy-list .is-available a:hover {
  padding-inline: 1.7rem;
  background: var(--acid-hover);
}

.journey-anatomy-list .is-missing {
  background: var(--bg-alt);
  color: #66777b;
}

.journey-anatomy-list strong {
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  letter-spacing: -.04em;
}

.journey-no,
.journey-status {
  font-family: "Roboto Mono", monospace;
  font-size: .66rem;
  text-transform: uppercase;
}

.journey-status {
  justify-self: end;
  text-align: right;
}

.journey-status b { margin-left: .7rem; font-size: .82rem; }

/* Article layout */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(340px, 380px);
  justify-content: center;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
  padding-bottom: 6rem;
  margin-top: clamp(3rem, 7vw, 6rem);
}

.article-content {
  min-width: 0;
  font-size: clamp(1.04rem, 1.3vw, 1.16rem);
  line-height: 1.82;
}

.article-content > p:first-child {
  color: var(--ink);
  font-size: clamp(1.16rem, 2vw, 1.38rem);
  font-weight: 500;
}

.article-content h2 {
  scroll-margin-top: 90px;
  margin: 4rem 0 1rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -.055em;
  line-height: 1.05;
}

.article-content h3 {
  margin: 2.6rem 0 .8rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -.035em;
}

.article-content figure {
  margin: 2.5rem 0;
}

.article-content .wp-block-image img,
.article-content img {
  max-width: min(100%, 720px);
  height: auto;
  display: block;
  margin-inline: auto;
}

.article-content figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: .76rem;
  text-align: center;
}

.article-content blockquote {
  margin: 2.5rem 0;
  border-left: 6px solid var(--orange);
  padding: 1rem 0 1rem 1.5rem;
  color: var(--ink);
  font-size: 1.16em;
}

.article-content .wp-block-group.has-background {
  padding: clamp(1rem, 3vw, 2rem);
}

.article-content p { text-wrap: pretty; }

.article-content > p { margin-block: 0 1.35em; }

.article-content > ul,
.article-content > ol {
  margin-block: 1rem 2rem;
}

.article-content li { margin-block: .42rem; }

/* Content cards & block styles */
.dtl-content-card,
.article-content .wp-block-group.is-style-dtl-important,
.article-content .wp-block-group.is-style-dtl-experience,
.article-content .wp-block-group.is-style-dtl-price,
.article-content .wp-block-group.is-style-dtl-route,
.article-content .wp-block-group.is-style-dtl-verdict,
.article-content .wp-block-group.has-accent-2-background-color,
.article-content .wp-block-group.has-accent-5-background-color {
  position: relative;
  overflow: hidden;
  margin: clamp(2.2rem, 5vw, 4rem) 0;
  border: 1px solid var(--ink);
  border-radius: 0 !important;
  padding: clamp(1.2rem, 3vw, 2rem) !important;
}

.dtl-content-card h3,
.article-content .wp-block-group[class*="is-style-dtl-"] h3,
.article-content .wp-block-group.has-accent-2-background-color h3,
.article-content .wp-block-group.has-accent-5-background-color h3 {
  margin: .55rem 0 1rem;
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  letter-spacing: -.05em;
  line-height: 1.03;
}

.dtl-block-label,
.dtl-card-meta {
  margin: 0 !important;
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dtl-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dtl-card-meta small { font-size: var(--fs-mono-sm); }

.dtl-card-content > :first-child { margin-top: 0; }
.dtl-card-content > :last-child { margin-bottom: 0; }

.dtl-card-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.1rem;
  border: 1px solid currentColor;
  padding: .55rem .75rem;
  color: inherit;
  font-family: "Roboto Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
  text-decoration: none;
  text-transform: uppercase;
}

.dtl-card-source:hover {
  background: var(--ink);
  color: var(--white);
}

.dtl-content-card.is-type-route .dtl-card-source:hover,
.dtl-content-card.is-type-verdict .dtl-card-source:hover {
  background: var(--acid);
  color: var(--ink);
}

.dtl-card-source:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* Card type variants */
.dtl-content-card.is-type-important,
.article-content .wp-block-group.is-style-dtl-important,
.article-content .wp-block-group.has-accent-2-background-color {
  background: var(--acid) !important;
}

.dtl-content-card.is-type-experience,
.article-content .wp-block-group.is-style-dtl-experience {
  border-left: 10px solid var(--orange);
  background: var(--white);
}

.dtl-content-card.is-type-experience::after {
  position: absolute;
  right: 1rem;
  bottom: -3.7rem;
  color: rgba(16,45,56,.08);
  font-size: 10rem;
  font-weight: 800;
  line-height: 1;
  content: "“";
}

.dtl-content-card.is-type-price,
.article-content .wp-block-group.is-style-dtl-price,
.article-content .wp-block-group.has-accent-5-background-color {
  background: var(--sky) !important;
}

.dtl-content-card.is-type-price h3,
.article-content .wp-block-group.is-style-dtl-price h3 {
  font-size: clamp(2.2rem, 6vw, 4.8rem);
}

.dtl-content-card.is-type-route,
.article-content .wp-block-group.is-style-dtl-route {
  background: var(--ink);
  color: var(--white);
}

.dtl-content-card.is-type-route .dtl-card-meta,
.dtl-content-card.is-type-route a,
.article-content .wp-block-group.is-style-dtl-route .dtl-block-label {
  color: var(--acid);
}

.dtl-route-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.2rem 0 1.5rem;
  border-block: 1px solid rgba(255,255,255,.32);
}

.dtl-route-facts > div {
  min-width: 0;
  border-right: 1px solid rgba(255,255,255,.25);
  padding: .8rem .75rem .85rem 0;
}

.dtl-route-facts > div + div { padding-left: .75rem; }

.dtl-route-facts > div:last-child { border-right: 0; }

.dtl-route-facts dt {
  color: var(--acid);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dtl-route-facts dd {
  margin: .32rem 0 0;
  color: var(--white);
  font-size: clamp(.88rem, 1.5vw, 1.05rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.dtl-content-card.is-type-route ol,
.article-content .wp-block-group.is-style-dtl-route ol {
  margin: 1rem 0 0;
  padding: 0;
  counter-reset: route;
  list-style: none;
}

.dtl-content-card.is-type-route li,
.article-content .wp-block-group.is-style-dtl-route li {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.28);
  padding: .85rem 0 .85rem 3.1rem;
  counter-increment: route;
}

.dtl-content-card.is-type-route li::before,
.article-content .wp-block-group.is-style-dtl-route li::before {
  position: absolute;
  top: 1.08rem;
  left: 0;
  color: var(--acid);
  font-family: "Roboto Mono", monospace;
  font-size: .65rem;
  content: counter(route, decimal-leading-zero);
}

.dtl-content-card.is-type-verdict,
.article-content .wp-block-group.is-style-dtl-verdict {
  background: var(--orange-dark);
  color: var(--white);
}

.dtl-content-card.is-type-family { background: #f4e7ff; }
.dtl-content-card.is-type-safety { border-color: var(--orange-dark); background: #fff0e9; }
.dtl-content-card.is-type-tip { background: var(--white); box-shadow: var(--shadow-accent); }

/* Compare / pros-cons */
.dtl-compare,
.article-content .wp-block-columns.is-style-dtl-pros-cons {
  margin: clamp(2.2rem, 5vw, 4rem) 0;
  border: 1px solid var(--ink);
}

.dtl-compare > h3 {
  margin: 0;
  border-bottom: 1px solid var(--ink);
  padding: 1rem 1.2rem;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.dtl-compare-grid,
.article-content .wp-block-columns.is-style-dtl-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
}

.dtl-compare-grid > br,
.dtl-compare-grid > p { display: none; }

.dtl-compare-column,
.article-content .wp-block-columns.is-style-dtl-pros-cons > .wp-block-column {
  margin: 0;
  padding: 1.2rem;
  background: var(--paper);
}

.dtl-compare-column.is-positive,
.article-content .wp-block-columns.is-style-dtl-pros-cons > .wp-block-column:first-child {
  background: var(--acid);
}

.dtl-compare-column.is-negative,
.article-content .wp-block-columns.is-style-dtl-pros-cons > .wp-block-column:last-child {
  background: #f0e6df;
}

.dtl-compare-column h4 {
  margin: 0 0 .7rem;
  font-size: 1.3rem;
}

/* Checklist */
.article-content .wp-block-list.is-style-dtl-checklist {
  padding-left: 0;
  list-style: none;
}

.article-content .wp-block-list.is-style-dtl-checklist li {
  position: relative;
  padding-left: 1.8rem;
}

.article-content .wp-block-list.is-style-dtl-checklist li::before {
  position: absolute;
  top: .18em;
  left: 0;
  display: grid;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  background: var(--ink);
  color: var(--acid);
  font-size: .72rem;
  content: "✓";
}

/* Data table */
.article-content .wp-block-table.is-style-dtl-data {
  overflow-x: auto;
  border: 1px solid var(--ink);
}

.article-content .wp-block-table.is-style-dtl-data table {
  min-width: 620px;
  border-collapse: collapse;
}

.article-content .wp-block-table.is-style-dtl-data th {
  background: var(--ink);
  color: var(--white);
  text-align: left;
}

.article-content .wp-block-table.is-style-dtl-data th,
.article-content .wp-block-table.is-style-dtl-data td {
  border: 1px solid var(--ink);
  padding: .7rem .8rem;
}

.article-content .wp-block-table.is-style-dtl-data tbody tr:nth-child(even) {
  background: var(--sky);
}

/* TOC */
.article-toc {
  position: sticky;
  top: 28px;
  align-self: start;
  max-height: calc(100svh - 56px);
  overflow: auto;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: .8rem 0 1rem;
  scrollbar-width: thin;
}

.toc-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  padding: .35rem .4rem .75rem;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.toc-toggle strong {
  font-family: "Roboto Mono", monospace;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.toc-toggle span {
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.text-size-tools {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .4rem .75rem;
  border-block: 1px solid var(--line);
  padding: .55rem 0;
}

.text-size-tools > span {
  margin-right: auto;
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.text-size-tools button {
  display: grid;
  min-width: 42px;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--ink);
  padding: .25rem .45rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.text-size-tools button:hover { background: rgba(217,240,76,.35); }

.text-size-tools button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.copy-current-section {
  width: calc(100% - .8rem);
  min-height: 42px;
  margin: 0 .4rem .3rem;
  border: 1px solid var(--ink);
  padding: .55rem .7rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.copy-current-section:hover { background: var(--acid); }

.copy-section-status {
  min-height: 1.1rem;
  margin: 0 .4rem .45rem;
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.article-toc ol {
  display: grid;
  gap: .25rem;
  margin: 0;
  padding: 0;
  counter-reset: article-toc;
  list-style: none;
}

.article-toc li {
  counter-increment: article-toc;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.42;
}

.article-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .6rem;
  border: 1px solid transparent;
  padding: .55rem .55rem .55rem .45rem;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.article-toc a::before {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .6rem;
  content: counter(article-toc, decimal-leading-zero);
}

.article-toc a:hover {
  background: rgba(217,240,76,.32);
  color: var(--ink);
  border-color: var(--ink);
}

.article-toc a.is-active {
  background: var(--acid);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 750;
}

.article-toc.is-collapsed ol { display: none; }

/* Back to top button for long articles */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--acid);
  color: var(--ink);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Hide on small screens or adjust */
@media (max-width: 640px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}

/* Reading progress */
.reading-progress {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: transparent;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
  transition: width .08s linear;
}

.single-post.text-size-large .article-content {
  font-size: clamp(1.18rem, 1.48vw, 1.3rem);
}

.single-post.text-size-xlarge .article-content {
  font-size: clamp(1.3rem, 1.62vw, 1.44rem);
  line-height: 1.78;
}

.single-post.text-size-large .entry-quick-answer p { font-size: 1.08em; }
.single-post.text-size-xlarge .entry-quick-answer p { font-size: 1.16em; }

/* Post navigation */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-block: 1px solid var(--ink);
  background: var(--ink);
}

.post-navigation div { background: var(--paper); }

.post-navigation a {
  display: block;
  min-height: 150px;
  padding: 1.4rem;
  background: var(--paper);
  font-weight: 700;
  text-decoration: none;
  height: 100%;
  box-sizing: border-box;
}

/* ============================================
   RELATED, ARCHIVE, PAGINATION
   ============================================ */

.related-stories {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.related-stories > header {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.related-stories > header span {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .67rem;
  text-transform: uppercase;
}

.related-stories h2 {
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 5rem);
  letter-spacing: -.07em;
  line-height: .9;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ink);
  background: var(--ink);
  gap: 1px;
}

.related-grid article {
  min-width: 0;
  background: var(--paper);
}

.related-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sky);
}

.related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.related-grid article:hover img { transform: scale(1.035); }

.related-grid article > div {
  min-height: 180px;
  padding: 1.1rem;
}

.related-grid span {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.related-grid h3 {
  margin: .7rem 0 0;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -.04em;
  line-height: 1.1;
}

.related-grid h3 a { text-decoration: none; }

/* Archive */
.archive-head {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.archive-head h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 8rem);
  letter-spacing: -.04em;
  line-height: .85;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.archive-card {
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.archive-card-image { position: relative; display: block; }

.archive-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.archive-card-body { padding: 1.2rem; }

.archive-card h2 {
  margin: .5rem 0;
  font-size: 1.35rem;
  line-height: 1.12;
}

.archive-card h2 a { text-decoration: none; }

.archive-card-meta {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

/* Pagination */
.pagination {
  margin-block: 2.4rem 5rem;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}

.pagination .page-numbers {
  display: grid;
  min-width: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--ink);
  padding: .45rem .75rem;
  color: var(--ink);
  font-family: "Roboto Mono", monospace;
  font-size: .72rem;
  text-decoration: none;
}

.pagination .page-numbers.current {
  background: var(--ink);
  color: var(--white);
}

.pagination a.page-numbers:hover { background: var(--acid); }

.pagination .prev,
.pagination .next {
  width: auto;
}

/* Sources */
.article-sources {
  margin: 4rem 0;
  border: 1px solid var(--ink);
  background: var(--sky);
}

.article-sources header {
  display: grid;
  gap: .55rem;
  border-bottom: 1px solid var(--ink);
  padding: 1.2rem;
}

.article-sources header span {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.article-sources header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}

.article-sources header p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

.article-sources ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: source;
}

.article-sources li {
  counter-increment: source;
  border-bottom: 1px solid var(--ink);
}

.article-sources li:last-child { border-bottom: 0; }

.article-sources a {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.2rem;
  text-decoration: none;
}

.article-sources a::before {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  content: counter(source, decimal-leading-zero);
}

.article-sources a:hover { background: var(--acid); }

.article-sources a strong {
  font-size: .92rem;
  line-height: 1.3;
}

.article-sources a small {
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
}

.article-sources a b { font-weight: 400; }

/* Partner tools */
.partner-tools {
  margin: 4rem 0;
  border: 1px solid var(--ink);
}

.partner-tools-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding: 1.2rem;
}

.partner-tools-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -.05em;
}

.partner-tools-head p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.partner-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.partner-tool {
  position: relative;
  display: flex;
  min-height: 160px;
  flex-direction: column;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 1rem;
  text-decoration: none;
}

.partner-tool:nth-child(2n) { border-right: 0; }
.partner-tool:nth-last-child(-n+2) { border-bottom: 0; }

.partner-tool:hover { background: var(--acid); }

.partner-tool span {
  color: var(--orange-dark);
  font-family: "Roboto Mono", monospace;
  font-size: .64rem;
  text-transform: uppercase;
}

.partner-tool strong { margin-top: auto; font-size: 1.25rem; }

.partner-tool b {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.partner-disclosure {
  margin: .65rem 0 0;
  color: var(--muted);
  font-family: "Roboto Mono", monospace;
  font-size: .6rem;
}

/* Places pagination (JS controlled) */
.places-pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.place-dot {
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background var(--trans);
}

.place-dot.active { background: var(--acid); }

/* ============================================
   MEDIA QUERIES (consolidated & optimized)
   ============================================ */

@media (max-width: 980px) {
  .menu-button { display: inline-flex; }

  #site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--ink);
    padding: .5rem 24px;
    background: var(--paper);
  }

  #site-nav.is-open { display: flex; }

  #site-nav a { padding: .8rem 0; }

  .hero {
    min-height: auto;
  }

  .hero-media {
    position: relative;
    inset: auto;
    height: 58vw;
    min-height: 440px;
  }

  .hero-overlay {
    min-height: auto;
    padding-block: 2.5rem;
  }

  .hero h1 { font-size: clamp(4.2rem, 12vw, 7rem); }
  .hero h1 em { transform: none; }
  .hero-deck { width: min(600px, 100%); }

  .section-header { grid-template-columns: 1fr 3fr; }

  .section-header > p:last-child,
  .stories-header .all-link {
    grid-column: 2;
    justify-self: start;
  }

  .places-grid-page { grid-auto-rows: 280px; }

  .places-grid-page .place:nth-child(1) {
    grid-column: span 12;
    grid-row: span 1;
  }

  .places-grid-page .place:nth-child(2),
  .places-grid-page .place:nth-child(3) {
    grid-column: span 6;
  }

  .places-grid-page .place:nth-child(4) {
    grid-column: span 12;
  }

  .lead-story { grid-template-columns: 1fr; }

  .story-media { min-height: 480px; }

  .story-copy {
    border-top: 1px solid var(--ink);
    border-left: 0;
  }

  .author-layout { grid-template-columns: 1fr 3fr; }

  .author-note { grid-column: 2; }
  .author-link { grid-column: 2; justify-self: start; }

  .footer-community { grid-template-columns: 1fr 1fr; }

  .footer-community-copy {
    grid-column: 1 / -1;
    min-height: 290px !important;
  }
}

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }

  .article-toc { position: static; order: -1; }

  .journey-anatomy-head { grid-template-columns: 1fr; }
  .journey-anatomy-head p { justify-self: start; }

  .entry-quick-answer { grid-template-columns: 90px 1fr; }

  .entry-actions {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .archive-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --wrap: min(100% - 28px, 1340px); }

  .topbar-inner { min-height: 62px; }

  .logo { font-size: .87rem; }

  .logo-sign {
    width: 28px;
    height: 28px;
  }

  .saved-toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
  }

  .saved-toggle { margin-left: auto; }

  .hero-media {
    height: 72vw;
    min-height: 300px;
  }

  .photo-label {
    right: 10px;
    bottom: 10px;
  }

  .hero-overlay { padding-block: 2rem; }

  .hero h1 {
    font-size: clamp(3.3rem, 18vw, 5.4rem);
    line-height: .82;
  }

  .hero-deck {
    margin-top: 1.25rem;
    font-size: .9rem;
  }

  /* trip-bar appears only in mobile context */
  .trip-bar { grid-template-columns: 1fr; }
  .trip-question { border-right: 0; border-bottom: 1px solid var(--line); }
  .trip-bar button { grid-column: auto; }

  .signal-static {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .signal-list {
    justify-content: center;
    padding: .8rem 14px;
  }

  .hero-random-story {
    width: 100%;
    margin-top: 1rem;
  }

  .section { padding-block: 4.6rem; }

  .section-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .section-header h2,
  .section-header > p:last-child,
  .stories-header .all-link {
    grid-column: auto;
  }

  .section-header h2 {
    font-size: clamp(2.7rem, 15vw, 4.5rem);
  }

  .places-grid-page {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }

  .places-grid-page .place:nth-child(1),
  .places-grid-page .place:nth-child(2),
  .places-grid-page .place:nth-child(3),
  .places-grid-page .place:nth-child(4) {
    grid-column: auto;
  }

  .place-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .useful-list a { grid-template-columns: 34px 1fr auto; }
  .useful-list small { grid-column: 2; }

  .story-media { min-height: 310px; }

  .archive-progress-grid { grid-template-columns: 1fr; }
  .archive-progress-grid a { min-height: 270px; }

  .story-row { grid-template-columns: 1fr; }

  .story-row article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .story-row article:last-child { border-bottom: 0; }

  .story-card { min-height: 0; }
  .story-card-media { aspect-ratio: 16 / 10; }
  .story-card-body { min-height: 280px; }

  .author-layout { grid-template-columns: 1fr; }

  .author blockquote,
  .author-note,
  .author-link {
    grid-column: auto;
  }

  .author blockquote {
    font-size: clamp(2.2rem, 12vw, 3.8rem);
  }

  .footer-layout { grid-template-columns: 1fr; }
  .footer-layout > small { grid-column: auto; }

  .footer-community {
    width: 100%;
    grid-template-columns: 1fr;
    border-inline: 0;
  }

  .footer-community-copy { grid-column: auto; }

  .footer-community > div { min-height: 280px; }

  .selection-report {
    right: 14px;
    bottom: 14px;
    left: 14px;
    max-width: none;
  }

  .cookie-banner {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .cookie-actions button { min-width: 0; }

  /* Entry / single mobile */
  .entry-shell,
  .entry-hero {
    width: min(100% - 28px, 1180px);
  }

  .entry-title {
    font-size: clamp(2.0rem, 10vw, 3.2rem);
  }

  .entry-quick-answer,
  .entry-update-note {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  .entry-actions {
    grid-column: auto;
    flex-direction: column;
  }

  .journey-anatomy-list a,
  .journey-anatomy-list li > div {
    min-height: 88px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: .75rem;
    padding: .9rem .75rem;
  }

  .journey-status {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .archive-grid,
  .post-navigation {
    grid-template-columns: 1fr;
  }

  .related-stories > header {
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .related-grid { grid-template-columns: 1fr; }

  .partner-tools-head,
  .partner-tools-grid {
    grid-template-columns: 1fr;
  }

  .article-sources a {
    grid-template-columns: 28px minmax(0, 1fr) 20px;
  }

  .article-sources a strong,
  .article-sources a small {
    grid-column: 2;
  }

  .article-sources a b {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .partner-tool,
  .partner-tool:nth-child(2n),
  .partner-tool:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .partner-tool:last-child { border-bottom: 0; }

  .dtl-compare-grid,
  .article-content .wp-block-columns.is-style-dtl-pros-cons {
    grid-template-columns: 1fr;
  }

  .dtl-card-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }

  .dtl-route-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dtl-route-facts > div:nth-child(2n) { border-right: 0; }
  .dtl-route-facts > div:nth-child(n+3) {
    border-top: 1px solid rgba(255,255,255,.25);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}

/* Print */
@media print {
  @page { margin: 16mm; }

  body {
    background: white;
    color: black;
    font-size: 11pt;
  }

  .topbar,
  .footer,
  .entry-actions,
  .journey-anatomy,
  .article-toc,
  .related-stories,
  .post-navigation,
  .partner-tools,
  .partner-disclosure {
    display: none !important;
  }

  .entry-shell,
  .entry-hero { width: 100%; }

  .entry-header { padding: 0 0 1rem; }

  .entry-title {
    font-size: 34pt;
    line-height: 1;
  }

  .entry-quick-answer {
    grid-template-columns: 70px 1fr;
    margin-top: 1rem;
  }

  .entry-hero img { max-height: 120mm; }

  .article-layout {
    display: block;
    padding-bottom: 0;
  }

  .article-content {
    font-size: 11pt;
    line-height: 1.55;
  }

  .article-content h2,
  .article-content h3 {
    break-after: avoid;
  }

  .article-content img,
  .article-content figure {
    break-inside: avoid;
  }

  a {
    color: black;
    text-decoration: none;
  }
}