/*
 * Faceted Thought — design system.
 * Single stylesheet served as-is by Propshaft (no build step). Theme colours
 * are CSS custom properties toggled via the `data-theme` attribute on <html>.
 */

/* ----- Theme tokens ----------------------------------------------------- */
:root {
  --bg: #0d0d14;
  --fg: #f0ece2;
  --muted: #8a8a9a;
  --card: rgba(255, 255, 255, 0.04);
  --card-strong: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.08);
  --accent: #3e78ff;
  --accent-soft: #8fb4ff;
  --success: #00c9a7;
  --data-secondary: #48efcf;
  --danger: #ff8a80;
  --grid-stroke: #ffffff;
  --grid-opacity: 0.06;
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f8f6f1;
  --fg: #1a1a2e;
  --muted: #6b6b80;
  --card: rgba(0, 0, 0, 0.03);
  --card-strong: #ffffff;
  --card-border: rgba(0, 0, 0, 0.06);
  --accent-soft: #3e78ff;
  --data-secondary: #007f6c;
  --grid-stroke: #2a2238;
  --grid-opacity: 0.085;
  color-scheme: light;
}

/* ----- Reset ------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  min-width: 320px;
  overflow-x: hidden;
  transition: background 0.5s, color 0.5s;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: rgba(62, 120, 255, 0.27); color: var(--fg); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* Moves its 300%-wide gradient exactly one length per loop, so each loop picks
   up where the last left off. */
@keyframes shimmer { from { background-position: 0% center; } to { background-position: 150% center; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@property --story-develop { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes storySealStamp { from { opacity: 0; scale: 1.25; } to { opacity: 1; scale: 1; } }
@keyframes storySealSettle {
  0% { rotate: 7deg; --story-develop: 0; animation-timing-function: ease-in-out; }
  35% { rotate: -2.5deg; animation-timing-function: ease-in-out; }
  60% { rotate: 1deg; animation-timing-function: ease-in-out; }
  80% { rotate: -0.3deg; animation-timing-function: ease-in-out; }
  100% { rotate: 0deg; --story-develop: 1; }
}
@keyframes storySealSwing {
  0% { rotate: 0deg; animation-timing-function: ease-in-out; }
  20% { rotate: -7deg; animation-timing-function: ease-in-out; }
  50% { rotate: 4deg; animation-timing-function: cubic-bezier(0.35, 0, 0.1, 1); }
  100% { rotate: 0deg; }
}
@keyframes pulseDot { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } }

/* ----- Faceted background ---------------------------------------------- */
.faceted-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.faceted-bg svg { position: absolute; width: 100%; height: 100%; opacity: var(--grid-opacity); }
.faceted-bg path { stroke: var(--grid-stroke); stroke-width: 0.6; fill: none; }
.faceted-bg .glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.faceted-bg .glow-a {
  top: -20%; right: -10%; width: 60vw; height: 60vw;
  background: radial-gradient(ellipse, rgba(108, 99, 255, 0.2) 0%, rgba(108, 99, 255, 0.09) 38%, transparent 74%);
}
.faceted-bg .glow-b {
  bottom: -10%; left: -15%; width: 50vw; height: 50vw;
  background: radial-gradient(ellipse, rgba(255, 107, 138, 0.11) 0%, rgba(255, 107, 138, 0.045) 36%, transparent 74%);
}

main { position: relative; z-index: 1; }

/* ----- Brand wordmark --------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { display: block; object-fit: contain; }
.brand__word { font-family: "Inter", sans-serif; letter-spacing: -0.01em; }
.brand__word .light { font-weight: 400; }
.brand__word .bold { font-weight: 700; }
.environment-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--card-border));
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-soft); font-family: "JetBrains Mono", monospace; font-size: 10px;
  font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase;
}

/* ----- Site nav --------------------------------------------------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
}
.site-nav.is-scrolled,
.site-nav.is-menu-open {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: var(--card-border);
}
.site-nav__inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.admin-body .site-nav__inner { max-width: 1240px; }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.nav-link {
  position: relative; font-size: 17px; font-weight: 500;
  color: var(--muted); letter-spacing: 0.02em; padding: 4px 0;
}
.nav-link.is-active { color: var(--fg); }
.nav-link::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px;
  background: var(--accent); transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }

.icon-btn {
  background: none; border: none; border-radius: 10px; padding: 8px 10px;
  cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; transition: color 0.3s;
}
.icon-btn:hover { color: var(--fg); }
:where(a:any-link, button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Inline Lucide icons */
.icon { display: inline-flex; flex: 0 0 auto; vertical-align: middle; }
html[data-theme="light"] .icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
.nav-mobile:not(.is-open) .icon-x { display: none; }
.nav-mobile.is-open .icon-menu { display: none; }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-mobile { display: none; position: relative; align-items: center; }
.nav-mobile__toggle {
  background: none; border: none; width: 40px; height: 40px; border-radius: 10px;
  color: var(--fg); font-size: 22px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-mobile__panel {
  display: none; position: absolute; top: calc(100% + 16px); right: 0;
  width: min(82vw, 280px); flex-direction: column; gap: 6px; padding: 8px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--card-border); border-radius: 16px;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--fg) 18%, transparent);
}
.nav-mobile.is-open .nav-mobile__panel { display: flex; }
.nav-mobile__panel a,
.nav-mobile__panel .icon-btn {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  justify-content: flex-start; gap: 8px; font-size: 17px; font-weight: 500;
  color: var(--muted); text-align: left;
}
.nav-mobile__panel a:hover,
.nav-mobile__panel .icon-btn:hover,
.nav-mobile__panel a.is-active {
  color: var(--fg); background: var(--card);
}

/* ----- Sections --------------------------------------------------------- */
.section {
  max-width: 1100px; margin: 0 auto; padding: 100px 24px 72px;
  position: relative; z-index: 1;
}
/* Progressive fade-in: only hidden when JS is available to reveal it. */
.js .section {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .section.is-visible { opacity: 1; transform: translateY(0); }
.section-title {
  font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(36px, 5.5vw, 54px); margin-bottom: 12px;
}
.section-sub {
  font-size: 20px; color: var(--muted); line-height: 1.6;
  margin-bottom: 48px;
}
.section-sub:has(+ .section-lead) { margin-bottom: 14px; }
.section-lead { font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 980px; margin-bottom: 20px; }
.section-note {
  font-size: 18px; color: var(--muted); line-height: 1.65; max-width: 980px; margin-bottom: 20px;
}

/* ----- Cards ------------------------------------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 16px; padding: 28px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
a.card:hover, .card.is-hoverable:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.card-grid { display: grid; gap: 20px; }
.card-grid--apps { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card-grid--gear { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}

/* ----- Home hero -------------------------------------------------------- */
.home-hero {
  min-height: calc(100dvh - 280px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 96px 24px 112px; position: relative; z-index: 1;
}
.home-logo {
  display: block; padding: 0; border: 0; background: none; color: inherit; border-radius: 24px;
  animation: float 6s ease-in-out infinite; margin-bottom: -64px; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.home-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: -24px; }
.home-logo img { width: 320px; height: 320px; object-fit: contain; display: block; }
/* The cloud builds itself from tiles of its own art (CloudShards), and each
   click on it (cloud_controller.js) rebuilds it in the next of three styles:
   - unfold: each tile opens from its left edge, in a sweep from left to right
   - scatter: the tiles fly in from all around and settle into place
   - fade: the tiles fade in one at a time, in a shuffled order
   A few tiles flicker as they unfold or fade in, and the mouse flips each tile
   a full turn as it passes over (flip_controller.js). The tiles stay as
   the cloud once it's built, so the image beneath shows only without motion. */
.home-logo__shards { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .home-logo { cursor: pointer; }
  .home-logo__shards { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .home-logo__image { opacity: 0; }
  .home-logo__tile, .home-logo__flip { transform-box: fill-box; }
  .home-logo__flip { transform-origin: center; }
  .home-logo__flip.is-flipping { animation: cloudFlipOver 700ms; }

  .home-logo[data-cloud-style-value="unfold"] .home-logo__tile {
    --delay: calc(var(--x) * 1100ms + var(--jitter) * 200ms);
    transform-origin: left center;
  }
  .home-logo[data-cloud-style-value="unfold"].is-playing .home-logo__tile {
    animation: cloudUnfold 450ms var(--ease-out) var(--delay) backwards;
  }
  .home-logo[data-cloud-style-value="unfold"].is-playing .home-logo__tile--flicker {
    animation:
      cloudUnfold 450ms var(--ease-out) var(--delay) backwards,
      cloudFlicker 450ms ease-in-out var(--delay) backwards;
  }

  .home-logo[data-cloud-style-value="scatter"] .home-logo__tile {
    --delay: calc(var(--x) * 600ms + var(--jitter) * 150ms);
    transform-origin: center;
  }
  .home-logo[data-cloud-style-value="scatter"].is-playing .home-logo__tile {
    animation: cloudScatter 1000ms var(--ease-out) var(--delay) backwards;
  }

  .home-logo[data-cloud-style-value="fade"] .home-logo__tile { --delay: calc(var(--rank) * 1600ms); }
  .home-logo[data-cloud-style-value="fade"].is-playing .home-logo__tile {
    animation: cloudFade 1000ms ease-in-out var(--delay) backwards;
  }
  .home-logo[data-cloud-style-value="fade"].is-playing .home-logo__tile--flicker { animation-name: cloudFlicker; }
}
@keyframes cloudUnfold { from { transform: scaleX(0); } }
@keyframes cloudScatter { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rotate)) scale(0.6); } }
/* A see-through tile's seam-closing stroke comes in last, since its overlaps
   would show as light lines. */
@keyframes cloudFade {
  0% { opacity: 0; stroke-opacity: 0; }
  70% { stroke-opacity: 0; }
  100% { opacity: 1; stroke-opacity: 1; }
}
@keyframes cloudFlicker {
  0% { opacity: 0; stroke-opacity: 0; }
  25% { opacity: 0.7; }
  35% { opacity: 0.15; }
  50% { opacity: 0.85; }
  58% { opacity: 0.4; }
  70% { stroke-opacity: 0; }
  100% { opacity: 1; stroke-opacity: 1; }
}
/* A full turn about the tile's vertical axis: it narrows to its edge, shows its
   darker back, and comes round again, each quarter eased like a turning card. */
@keyframes cloudFlipOver {
  0% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  25% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  25.1%, 74.9% { opacity: 0.55; }
  50% { transform: scaleX(-1); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  75% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  100% { transform: scaleX(1); }
}
.home-title {
  font-family: "Inter", sans-serif; font-size: clamp(46px, 8.5vw, 92px);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.01em;
  text-transform: lowercase; margin-bottom: 6px; animation: fadeUp 1s ease-out;
}
.home-welcome {
  display: block; font-family: "JetBrains Mono", monospace; text-transform: uppercase;
  font-size: clamp(12px, 1.7vw, 15px); font-weight: 500;
  letter-spacing: 0.12em; color: var(--muted); margin-bottom: 12px;
}
.home-title .faceted { font-size: 0.94em; margin-right: 0.14em; }
.gradient-thought {
  font-weight: 700;
  /* Violet between pink and teal keeps the blend from passing through grey.
     It runs straight across so its repeats meet without a seam. */
  background: linear-gradient(90deg, var(--accent), #ff6b8a, #6c63ff, #00c9a7, var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 10s linear infinite;
}
.home-tagline {
  font-size: clamp(20px, 2.7vw, 24px); color: var(--muted);
  max-width: 520px; line-height: 1.35; margin: 8px 0 10px;
  animation: fadeUp 1s ease-out 0.2s both;
}
.skill-list {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: 760px; margin-top: 18px; animation: fadeUp 1s ease-out 0.6s both;
}
.skill {
  font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--muted);
  padding: 6px 14px; border: 1px solid var(--card-border); border-radius: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.skill:hover { border-color: var(--accent); color: var(--fg); transform: translateY(-1px); }
.skill img { width: 16px; height: 16px; object-fit: contain; }
html[data-theme="dark"] .skill img.invert-dark { filter: invert(1); }
/* Each pill's icon flips over once as the mouse reaches it
   (flip_controller.js), echoing the tiles flipping on the cloud above. */
@media (prefers-reduced-motion: no-preference) {
  .skill__icon.is-flipping { animation: skillIconFlip 800ms; }
}
/* It turns away to its edge, speeding up, then comes round from the other side
   face-forward, slowing down, so it never shows a mirrored logo. */
@keyframes skillIconFlip {
  0% { transform: perspective(80px) rotateY(0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50% { transform: perspective(80px) rotateY(90deg); }
  50.01% { transform: perspective(80px) rotateY(-90deg); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% { transform: perspective(80px) rotateY(0); }
}

/* ----- Apps ------------------------------------------------------------- */
.app-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.app-card__logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.app-card h2 { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.app-card p { font-size: 17px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.app-card__platform { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--muted); opacity: 0.6; }

/* ----- Story ------------------------------------------------------------ */
.story-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.story-copy { display: flex; flex-direction: column; gap: 18px; font-size: 18px; color: var(--muted); line-height: 1.65; }
.story-copy a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
.story-quote { margin: 6px 0 0; padding-left: 18px; border-left: 3px solid var(--accent); color: inherit; }
.story-quote p { margin: 0; font-size: 20px; line-height: 1.45; }
.story-quote cite { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; font-style: normal; }
.story-quote cite::before { content: "\2014  "; }
.story-signature {
  margin: 4px 0 0; color: inherit; font-family: "Great Vibes", cursive;
  font-size: 34px; line-height: 1.1; font-weight: 400;
}
/* A seal stamped on the dojo sheet's top-right corner: the portrait in a
   compass ring, drawn in the blueprint's ink, that doubles as the drawing's
   north arrow. When the figure scrolls into view it presses on and swings
   to north like a needle settling, and the photo develops from a cyanotype
   in the sheet's two colours into colour. On hover the dial swings left,
   then right, and back to north. It's clipped to its circle so its corners
   don't take the pointer from the parts of the dojo beneath.
   --story-develop runs from 0 (cyanotype) to 1 (colour): the photo turns
   grayscale, then is multiplied by the highlight colour and screened with
   the shadow colour. */
.story-media__frame { position: relative; width: 100%; }
.story-seal {
  --story-seal-paper: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --story-seal-ink: var(--accent-soft);
  --story-print-shadow: var(--story-seal-paper);
  --story-print-highlight: var(--story-seal-ink);
  position: absolute; top: 2%; right: 2%; width: 34%;
  clip-path: circle(50%);
}
html[data-theme="light"] .story-seal {
  --story-print-shadow: var(--story-seal-ink);
  --story-print-highlight: var(--story-seal-paper);
}
.story-seal__ring { display: block; width: 100%; height: auto; }
.story-seal__ring circle { fill: none; stroke: var(--story-seal-ink); stroke-width: 1.5; }
.story-seal__ring .story-seal__disc { fill: var(--story-seal-paper); stroke: none; }
/* Ticks every 10 degrees, longer every 30, drawn as dashes along circles
   whose length is 360. */
.story-seal__ring .story-seal__ticks { stroke-width: 3.5; stroke-dasharray: 0.6 9.4; stroke-dashoffset: 0.3; }
.story-seal__ring .story-seal__ticks--major { stroke-width: 7; stroke-dasharray: 0.8 29.2; stroke-dashoffset: 0.4; }
.story-seal__north { fill: var(--story-seal-ink); }
.story-seal__point {
  fill: var(--story-seal-ink); font-family: "JetBrains Mono", monospace;
  font-size: 13px; font-weight: 500; text-anchor: middle; dominant-baseline: central;
}
.story-seal__point--north { font-weight: 700; }
.story-seal__photo { position: absolute; inset: 13%; border-radius: 50%; overflow: hidden; isolation: isolate; }
.story-seal__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(calc(1 - var(--story-develop)));
}
.story-seal__photo::before, .story-seal__photo::after {
  content: ""; position: absolute; z-index: 1; inset: 0; opacity: calc(1 - var(--story-develop));
}
.story-seal__photo::before { background: var(--story-print-highlight); mix-blend-mode: multiply; }
.story-seal__photo::after { background: var(--story-print-shadow); mix-blend-mode: screen; }
.story-media { display: flex; flex-direction: column; align-items: center; margin-top: 64px; }
.story-media__caption { margin-top: 0; font-size: 14px; color: var(--muted); font-style: italic; text-align: right; width: 80%; }

/* The dojo blueprint (pages/_dojo), drawn in the theme's colours on a sheet
   whose edges fade into the page; the scene sits inside a margin of the sheet
   so the fade doesn't reach its labels. The sheet is turned in 3D to face the
   copy, and eases toward flat on hover. Its lines trace in when the
   figure scrolls into view; the scroll swings gently on its hook and the
   shoji's light breathes. */
.dojo {
  --dojo-paper: color-mix(in srgb, var(--accent) 8%, var(--bg));
  --dojo-line: var(--accent-soft);
  --dojo-shade: color-mix(in srgb, var(--dojo-line) 7%, var(--dojo-paper));
  --dojo-tint: color-mix(in srgb, var(--dojo-line) 16%, var(--dojo-paper));
  --dojo-fade: transparent, rgb(0 0 0 / 0.45) 8%, #000 16%, #000 84%, rgb(0 0 0 / 0.45) 92%, transparent;
  --dojo-tilt: -25deg;
  display: block; width: 100%; height: auto;
  mask-image: linear-gradient(to right, var(--dojo-fade)), linear-gradient(var(--dojo-fade));
  mask-composite: intersect;
  transform: perspective(1200px) rotateY(var(--dojo-tilt));
}
.dojo__sheet { fill: var(--dojo-paper); }
.dojo__grid { fill: none; stroke: var(--dojo-line); stroke-width: 0.6; stroke-opacity: 0.1; }
.dojo__grid--major { stroke-opacity: 0.2; }
.dojo path { fill: none; stroke: var(--dojo-line); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dojo .dojo__solid { fill: var(--dojo-paper); }
.dojo .dojo__shade { fill: var(--dojo-shade); }
.dojo .dojo__tinted { fill: var(--dojo-tint); }
.dojo .dojo__fine { stroke-width: 1.1; stroke-opacity: 0.75; }
.dojo .dojo__faint { stroke-width: 0.9; stroke-opacity: 0.35; }
.dojo .dojo__heavy { stroke-width: 3.2; }
.dojo .dojo__glow { fill: var(--dojo-line); fill-opacity: 0.12; stroke: none; }
.dojo .dojo__ink { fill: var(--dojo-line); stroke: none; }
.dojo__block { fill: var(--dojo-paper); stroke: var(--dojo-line); stroke-width: 1.8; }
.dojo__label, .dojo__title { fill: var(--dojo-line); font-family: "JetBrains Mono", monospace; }
.dojo__label {
  font-size: 15px; letter-spacing: 0.06em;
  paint-order: stroke; stroke: var(--dojo-paper); stroke-width: 6px; stroke-linejoin: round;
}
.dojo__title { font-size: 24px; font-weight: 500; letter-spacing: 0.08em; }
/* Parts of the dojo explained by dojo_controller.js. Only their .dojo__hit
   rects take the pointer, so the drawing's lines never get in the way; the
   part whose tip is showing is inked in the foreground colour. */
.dojo-plan { position: relative; }
.dojo * { pointer-events: none; }
.dojo .dojo__hit { fill: none; stroke: none; pointer-events: all; cursor: help; }
.js .dojo__spot:focus { outline: none; }
.dojo .dojo__spot.is-active { --dojo-line: var(--fg); }
.dojo-tip {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: max-content; max-width: min(320px, 100%); padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 40%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
  color: var(--fg); font-size: 14px; line-height: 1.5;
  pointer-events: none; visibility: hidden; opacity: 0;
}
.dojo-tip.is-shown { visibility: visible; opacity: 1; }
.dojo-tip__term { color: var(--accent-soft); font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 500; }
.dojo-tip__term span { margin-right: 4px; }
.dojo-tip__gloss {
  color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dojo-tip__text { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .dojo { transition: transform 1.2s var(--ease-out); }
  .dojo :is(path, text) { transition: stroke 0.2s, fill 0.2s; }
  .dojo-tip { scale: 0.96; }
  .dojo-tip.is-shown { scale: 1; transition: opacity 0.15s ease-out, scale 0.15s var(--ease-out); }
  .story-media:hover .dojo { --dojo-tilt: -10deg; }
  .dojo__draw path { stroke-dasharray: 1; }
  .js .story-media:not(.is-visible) .dojo__draw path { stroke-dashoffset: 1; }
  .js .story-media:not(.is-visible) .dojo__fade { opacity: 0; }
  .story-media.is-visible .dojo__draw path { animation: dojoDraw 1.6s var(--ease-out) var(--dojo-delay) both; }
  .story-media.is-visible .dojo__fade { animation: dojoFade 1s ease-out var(--dojo-delay) both; }
  .js .story-media:not(.is-visible) .story-seal { opacity: 0; }
  .story-media.is-visible .story-seal {
    animation: storySealStamp 0.5s var(--ease-out) 1.2s both, storySealSettle 2s ease-out 1.5s both;
  }
  .story-seal:hover :is(.story-seal__ring, .story-seal__photo) { animation: storySealSwing 3.9s; }
  .dojo__scroll { transform-box: view-box; animation: dojoSway 3s ease-in-out -1.5s infinite alternate; }
  .dojo .dojo__glow { animation: dojoGlow 7s ease-in-out 3s infinite; }
}
@keyframes dojoDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dojoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dojoSway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes dojoGlow { 0%, 100% { fill-opacity: 0.12; } 50% { fill-opacity: 0.24; } }
.about-location {
  display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: 60px;
  margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--card-border);
}
.about-location h3 {
  color: var(--muted); font-family: "Inter", sans-serif; font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em;
}
.about-location__copy { color: var(--muted); font-size: 17px; line-height: 1.65; }
.about-location__copy a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
.about-location__copy address { margin-top: 20px; font-style: normal; }
.about-location__copy address a {
  display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none;
}

/* ----- Gear ------------------------------------------------------------- */
.gear-card h3 {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px;
}
.gear-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gear-card li { font-size: 15px; color: var(--muted); line-height: 1.5; }
.gear-card li::before { content: "↳"; color: var(--fg); margin-right: 6px; }

/* ----- Travel ----------------------------------------------------------- */
.travel-header {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  grid-auto-flow: row dense; gap: 14px 48px; align-items: start; margin-bottom: 52px;
}
.travel-header .section-sub { margin-bottom: 0; }
.travel-intro {
  grid-column: 1 / -1;
  color: var(--fg); font-size: 17px; line-height: 1.6; text-wrap: pretty;
}
.travel-quote {
  justify-self: end; max-width: 420px; margin: 8px 0 0;
  color: var(--fg); text-align: right;
}
.travel-quote blockquote {
  font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--fg);
  letter-spacing: 0; text-wrap: balance;
}
.travel-quote figcaption {
  margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.5;
}
.travel-quote figcaption::before { content: "\2014  "; }
/* The globe and the trip it shows sit side by side. If Mapbox can't load, the
   globe hides itself and the trip takes the whole row. */
.travel-explorer {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 48px; align-items: start;
}
.travel-explorer:has(> .travel-globe:not([hidden])) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.travel-globe { display: grid; justify-items: center; gap: 4px; margin: -16px 0 0; }
.travel-globe__map {
  width: 100%; aspect-ratio: 1;
  opacity: 0; transition: opacity 900ms ease;
}
.travel-globe.is-ready .travel-globe__map { opacity: 1; }
.travel-globe__caption {
  color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.travel-panel { min-width: 0; padding-top: 20px; scroll-margin-top: 96px; }
.travel-card { animation: travel-card-in 0.28s var(--ease-out); }
@keyframes travel-card-in { from { opacity: 0; transform: translateY(6px); } }
.travel-card__header { display: flex; align-items: center; gap: 16px; }
.travel-card__emoji {
  display: grid; place-items: center; flex: none; width: 54px; height: 54px;
  border-radius: 50%; border: 1px solid var(--card-border);
  background: var(--card); font-size: 28px;
}
.travel-card--international .travel-card__emoji {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.travel-city {
  font-family: "Inter", sans-serif; font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
/* travel_explorer_controller.js focuses the title when a list button shows a trip. */
.travel-city:focus { outline: none; }
.travel-city:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.travel-country { font-weight: 400; color: var(--muted); font-size: 17px; margin-left: 8px; letter-spacing: 0; }
.travel-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.travel-date {
  color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.travel-badge {
  display: inline-flex; align-items: center; min-height: 22px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--card-border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.travel-note { font-size: 16px; color: var(--muted); margin-top: 16px; line-height: 1.55; white-space: pre-line; text-wrap: pretty; }
.travel-photos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 18px;
}
.travel-photo {
  margin: 0; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--card-border); background: var(--card);
}
.travel-photo__image {
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--card-strong);
}
.travel-photo__image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: scale 0.5s var(--ease-out);
}
@media (hover: hover) {
  .travel-photo:hover .travel-photo__image img { scale: 1.05; }
}
.travel-photo figcaption {
  padding: 7px 10px; color: var(--muted); font-size: 13px; line-height: 1.35;
}
.travel-card__nearby { margin-top: 18px; }
.travel-card__nearby-label,
.travel-index__title {
  margin-bottom: 10px; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.travel-index { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--card-border); }
.travel-index__title { margin-bottom: 18px; }
.travel-index__years { columns: 2; column-gap: 48px; }
.travel-index__year {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px;
  padding-bottom: 12px; break-inside: avoid;
}
.travel-index__label {
  padding-top: 10px; color: var(--accent); font-family: "JetBrains Mono", monospace;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
}
.travel-index__trips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.travel-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px;
  border: 1px solid var(--card-border); border-radius: 999px; background: var(--card);
  color: var(--fg); font: inherit; font-size: 14px; line-height: 1.25; text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, scale 0.16s var(--ease-out);
}
.travel-chip span { font-size: 16px; }
.travel-chip--international { border-color: color-mix(in srgb, var(--accent) 30%, var(--card-border)); }
@media (hover: hover) {
  .travel-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--card-border));
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}
.travel-chip:active { scale: 0.97; }
.travel-chip[aria-current="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ----- Blog ------------------------------------------------------------- */
.blog-list { display: flex; flex-direction: column; gap: 16px; }
.blog-card { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.blog-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.blog-card__date { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }
.blog-card h3 { font-family: "Inter", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 8px; }
.blog-card p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.blog-card__arrow { font-size: 20px; color: var(--muted); opacity: 0.4; margin-top: 32px; }
.blog-empty { color: var(--muted); }

.post-article { inline-size: min(100%, 780px); margin: 0 auto; }
.post-header__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between; margin-bottom: 24px;
}
.post-header__meta {
  display: flex; align-items: center; gap: 12px; flex: 1 1 auto;
  min-inline-size: 0; flex-wrap: wrap;
}
.post-back {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  width: fit-content; min-height: 32px; margin-inline-start: auto; padding: 6px 12px;
  border: 1px solid color-mix(in srgb, currentColor 30%, var(--card-border));
  border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent);
  color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.post-back:hover {
  color: var(--accent-soft);
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-color: color-mix(in srgb, currentColor 48%, var(--card-border));
  transform: translateY(-1px);
}
.post-back span[aria-hidden] { font-size: 14px; line-height: 0; }
.post-title {
  font-family: "Inter", sans-serif; font-size: clamp(2.4rem, 1.65rem + 3.6vw, 4.1rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 18px; overflow-wrap: break-word; text-wrap: balance;
}
.post-excerpt {
  max-width: 720px; font-size: clamp(1.1rem, 1rem + 0.7vw, 1.35rem);
  color: var(--muted); line-height: 1.55; margin-bottom: 34px;
  overflow-wrap: break-word; text-wrap: pretty;
}
.post-reading {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 16px; align-items: center; margin: 0 0 34px; padding: 14px 16px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
}
.post-reading--admin { margin-bottom: 22px; }
.post-reading__label {
  margin-bottom: 3px; color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3;
  text-transform: uppercase;
}
.post-reading__title {
  color: var(--fg); font-family: "Inter", sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1.25;
}
.post-reading a.post-reading__title:hover { color: var(--accent-soft); }
.post-reading audio { inline-size: 100%; min-inline-size: 0; }
.post-body { padding-top: 34px; border-top: 1px solid var(--card-border); }
.active-reading-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 16px; align-items: center; margin: 0 0 28px; padding: 14px 16px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
}
.active-reading-panel audio { inline-size: 100%; min-inline-size: 0; }

.reading-workspace {
  display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 18px; align-items: start; margin-bottom: 24px;
}
.reading-workspace--manage {
  grid-template-columns: 1fr;
}
.reading-generator,
.reading-candidates {
  min-width: 0; padding: 18px; border: 1px solid var(--card-border);
  border-radius: 12px; background: color-mix(in srgb, var(--card) 76%, transparent);
}
.reading-generator {
  display: grid; gap: 16px; padding: 20px;
}
.reading-generator__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 16px; flex-wrap: wrap;
}
.reading-generator__kicker {
  margin: 0 0 5px; color: var(--accent-soft);
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase;
}
.reading-generator__head h2 { margin: 0; }
.reading-candidates h2 { margin-bottom: 14px; }
.reading-form {
  display: grid; gap: 14px;
}
.reading-voice-card,
.reading-tuning-card {
  min-width: 0; min-inline-size: 0; margin: 0; padding: 14px;
  border: 1px solid var(--card-border); border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 22%, transparent);
}
.reading-voice-card legend,
.reading-tuning-card legend {
  padding: 0 7px; color: var(--muted);
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.reading-voice-grid {
  display: grid; grid-template-columns: minmax(150px, 0.34fr) minmax(260px, 1fr);
  gap: 12px;
}
.reading-voice-grid .field { margin-bottom: 0; }
.reading-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; align-items: stretch;
}
.reading-range {
  min-width: 0; margin-bottom: 0; padding: 10px 10px 9px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 10px;
  align-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.reading-range input[type="range"] {
  grid-column: 1 / -1; accent-color: var(--accent);
  min-height: 28px; padding: 0;
}
.reading-range__value {
  min-inline-size: 34px; padding: 3px 6px; border-radius: 999px;
  color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; text-align: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.reading-boost {
  min-height: 0; margin-bottom: 0; padding: 10px;
  border-radius: 10px; background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.reading-boost input { accent-color: var(--accent); }
.reading-generator__actions {
  display: flex; justify-content: flex-end; align-items: center;
  margin-inline-start: auto;
}
.reading-generator__actions .btn {
  min-height: 40px; white-space: nowrap;
}
.reading-candidate-list { display: grid; gap: 12px; }
.reading-candidate-list--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}
.reading-candidate {
  display: grid; gap: 12px; align-content: start; min-width: 0; padding: 14px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.reading-candidate-list--compact .reading-candidate {
  gap: 10px; padding: 12px;
}
.reading-candidate.is-official {
  border-color: color-mix(in srgb, var(--success) 42%, var(--card-border));
}
.reading-candidate.is-pending {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--card-border));
}
.reading-candidate__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.reading-candidate-list--compact .reading-candidate__head {
  display: grid; gap: 10px;
}
.reading-candidate-list--compact .post-reading__label {
  margin-bottom: 4px; font-size: 10px;
}
.reading-candidate-list--compact .post-reading__title {
  display: -webkit-box; overflow: hidden;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
  font-size: 14px; line-height: 1.25;
}
.reading-candidate__actions {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap;
}
.reading-candidate-list--compact .reading-candidate__actions {
  justify-content: flex-start; gap: 6px;
}
.reading-candidate-list--compact .reading-candidate__actions .btn,
.reading-candidate-list--compact .reading-candidate__actions .status-pill {
  min-height: 28px; padding: 5px 9px; font-size: 10px;
}
.reading-candidate audio { inline-size: 100%; }
.reading-candidate-list--compact audio {
  block-size: 34px;
}
.reading-candidate__pending {
  padding: 12px 14px; border: 1px dashed var(--card-border); border-radius: 10px;
  color: var(--muted); font-size: 14px;
  background: color-mix(in srgb, var(--card) 58%, transparent);
}
.reading-candidate-list--compact .reading-candidate__pending {
  min-block-size: 34px; padding: 8px 10px; font-size: 12px; line-height: 1.35;
}
.reading-candidate__meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 11px; line-height: 1.4;
}
.reading-candidate__meta span {
  padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.reading-candidate-list--compact .reading-candidate__meta {
  font-size: 10px;
}
.reading-candidate-list--compact .reading-candidate__meta span {
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reading-setting-list {
  display: grid; gap: 9px;
}
.reading-candidate-list--compact .reading-setting-list {
  gap: 6px;
}
.reading-setting {
  display: grid; gap: 5px;
}
.reading-setting__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; line-height: 1.3;
}
.reading-candidate-list--compact .reading-setting__head {
  font-size: 10px;
}
.reading-setting__bar {
  overflow: hidden; block-size: 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.reading-candidate-list--compact .reading-setting__bar {
  block-size: 6px;
}
.reading-setting__bar span {
  display: block; inline-size: var(--reading-setting-percent, 0%);
  block-size: 100%; border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 68%, var(--accent-soft));
}

@media (min-width: 1180px) {
  .reading-candidate-list--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ----- Markdown --------------------------------------------------------- */
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }
.markdown-body { font-size: 18px; line-height: 1.8; color: var(--fg); }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.15; margin: 1.4em 0 0.45em;
}
.markdown-body h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.markdown-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); color: var(--muted); }
.markdown-body h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
.markdown-body p, .markdown-body li, .markdown-body blockquote { font-size: 18px; line-height: 1.8; }
.post-body .markdown-body h1 {
  font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2rem);
  line-height: 1.2;
}
.post-body .markdown-body > h1:first-child { margin-top: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol,
.markdown-body pre, .markdown-body blockquote, .markdown-body hr { margin: 0 0 1.2em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.4em; }
.markdown-body li + li { margin-top: 0.35em; }
.markdown-body a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 0.14em; }
.markdown-body code {
  font-family: "JetBrains Mono", monospace; font-size: 0.92em;
  background: var(--card-strong); padding: 0.14em 0.35em; border-radius: 6px;
}
.markdown-body pre {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 18px 20px; overflow-x: auto;
}
.markdown-body pre code { background: transparent; padding: 0; border-radius: 0; }
.markdown-body blockquote { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--muted); }
.markdown-body hr { border: none; border-top: 1px solid var(--card-border); }
.markdown-body .media-block { margin: 0 0 1.4em; }
.markdown-body .media-frame {
  overflow: hidden; border-radius: 18px; border: 1px solid var(--card-border); background: var(--card);
}
.markdown-body .media-block img, .markdown-body .media-block video, .markdown-body .media-block audio { width: 100%; display: block; }
.markdown-body .media-block video { border-radius: 18px; border: 1px solid var(--card-border); }
.markdown-body .media-block figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ----- Hosting ---------------------------------------------------------- */
.hosting-intro { margin-bottom: 16px; }
.hosting-availability { display: flex; justify-content: flex-end; margin-block-end: 32px; }
.hosting-availability .status-pill {
  padding: 6px 12px; font-size: 0.875rem; font-weight: 400; line-height: 1.4;
  transition: background 0.2s ease;
}
.hosting-availability .status-pill:hover { background: color-mix(in srgb, currentColor 24%, transparent); }
.hosting-card__mark, .lab-card__mark {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  background: color-mix(in srgb, var(--mark, var(--accent)) 16%, transparent);
  color: var(--mark, var(--accent));
}
.hosting-cta {
  margin-top: 40px; padding: clamp(28px, 4vw, 44px); border-radius: 16px;
  border: 1px solid var(--card-border); background: var(--card);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.hosting-cta__copy { max-width: 560px; }
.hosting-cta h2 {
  font-family: "Inter", sans-serif; font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.hosting-cta p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.hosting-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hosting-btn:hover { transform: translateY(-2px); background: var(--accent-soft); border-color: var(--accent-soft); }

@media (max-width: 600px) {
  .hosting-cta { flex-direction: column; align-items: flex-start; }
  .hosting-btn { width: 100%; justify-content: center; }
}
/* ----- Footer ----------------------------------------------------------- */
.site-footer { max-width: 1100px; margin: 0 auto; padding: 36px 24px 32px; position: relative; z-index: 1; }
.site-footer__top {
  padding-top: 20px; border-top: 1px solid var(--card-border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px;
}
.site-footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer__links a { font-size: 13px; color: var(--muted); opacity: 0.6; font-weight: 500; transition: color 0.2s, opacity 0.2s; display: inline-flex; align-items: center; gap: 7px; }
.site-footer__links a:hover { color: var(--accent); opacity: 1; }
.site-footer__copyright {
  font-size: 14px; color: var(--muted); opacity: 0.6;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 20px;
}
.site-footer__copyright a { padding-block: 6px; transition: color 0.2s; }
.site-footer__copyright a:hover { color: var(--accent); }
.footer-meta {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--card-border);
  display: flex; justify-content: center; gap: 16px; font-size: 14px; color: var(--muted); opacity: 0.6; text-align: center;
}

/* ----- Blank landing ---------------------------------------------------- */
.blank-landing {
  min-height: 100dvh; display: flex; align-items: center; justify-content: flex-end;
  padding: 48px clamp(24px, 6vw, 88px); position: relative; z-index: 1; text-align: right;
}
.blank-landing__inner { max-width: 640px; }
.blank-landing h1 {
  font-family: "Inter", sans-serif; font-size: clamp(46px, 8.5vw, 92px); font-weight: 400;
  line-height: 0.98; letter-spacing: -0.01em; text-transform: lowercase; margin-bottom: 14px;
  animation: fadeUp 1s ease-out;
}
.blank-landing p { font-size: clamp(20px, 2.7vw, 24px); color: var(--muted); line-height: 1.35; animation: fadeUp 1s ease-out 0.2s both; }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  appearance: none; text-decoration: none; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; border-radius: 999px; padding: 7px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-family: "JetBrains Mono", monospace; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 34%, var(--card-border));
  background: color-mix(in srgb, currentColor 11%, transparent);
  color: var(--muted);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover:not(:disabled) {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 54%, var(--card-border));
  transform: translateY(-1px);
}
.btn--primary { color: var(--accent-soft); }
.btn--ghost { color: var(--muted); }
.btn--ghost:hover:not(:disabled) { color: var(--fg); }
.btn--danger { color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Flash ------------------------------------------------------------ */
.flash-stack { position: fixed; top: 84px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.flash {
  padding: 14px 18px; border-radius: 14px; font-size: 14px; font-weight: 600;
  background: var(--card-strong); border: 1px solid var(--card-border); color: var(--fg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); transition: opacity 0.3s, transform 0.3s;
}
.flash--notice { border-color: color-mix(in srgb, var(--success) 50%, var(--card-border)); }
.flash--alert { border-color: color-mix(in srgb, var(--danger) 60%, var(--card-border)); }
.flash.is-leaving { opacity: 0; transform: translateX(20px); }

/* ----- Privacy ---------------------------------------------------------- */
.privacy-copy { max-width: 760px; display: flex; flex-direction: column; gap: 14px; color: var(--muted); }
.privacy-copy a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ----- Browser Flip ----------------------------------------------------- */
.browser-flip .section + .section { padding-top: 0; }
.browser-flip p a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.browser-flip-hero { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding-bottom: 64px; }
.browser-flip-hero__icon { width: 160px; height: 160px; filter: drop-shadow(0 18px 36px rgba(62, 120, 255, 0.28)); }
.browser-flip-hero .section-sub { margin-bottom: 20px; }
.browser-flip-kicker {
  margin-bottom: 10px; color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.browser-flip-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.browser-flip-facts li {
  padding: 5px 12px; border: 1px solid var(--card-border); border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--muted);
}
/* Apple's badge, at least 40px tall with clear space around it. */
.browser-flip-store { display: inline-block; margin-top: 24px; border-radius: 9px; }
.browser-flip-store img { display: block; width: auto; height: 48px; }
.browser-flip-heading {
  font-family: "Inter", sans-serif; font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(28px, 4vw, 36px); margin-bottom: 20px;
}
.browser-flip-demo { grid-column: 1 / -1; width: 100%; max-width: 960px; margin: 8px auto 0; }
.browser-flip-demo video, .browser-flip-shot {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--card-border); background: var(--card); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}
.browser-flip-demo video { aspect-ratio: 16 / 9; border-radius: 16px; }
.browser-flip-shot { aspect-ratio: 16 / 10; border-radius: 14px; }
.browser-flip-features { display: flex; flex-direction: column; gap: 64px; margin-bottom: 64px; }
.browser-flip-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: center; }
.browser-flip-feature--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.browser-flip-feature--flip .browser-flip-feature__copy { order: 2; }
.browser-flip-feature h3 { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0 8px; }
.browser-flip-feature p, .browser-flip-note p { font-size: 17px; color: var(--muted); line-height: 1.6; }
.browser-flip kbd {
  font-family: "JetBrains Mono", monospace; font-size: 0.85em; white-space: nowrap; color: var(--fg);
  padding: 1px 6px; border: 1px solid var(--card-border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--card-strong);
}
.browser-flip-note {
  margin-top: 24px; padding: 22px 24px; border-radius: 16px;
  border: 1px solid var(--card-border); border-left: 3px solid var(--accent); background: var(--card);
  display: flex; flex-direction: column; gap: 10px;
}
.browser-flip-note h3 { font-size: 19px; margin: 0; }
html[data-theme="dark"] .browser-flip .hosting-btn { color: var(--fg); }
html[data-theme="dark"] .browser-flip .hosting-btn:hover {
  background: color-mix(in srgb, var(--accent) 80%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 80%, var(--bg));
}
.browser-flip-privacy { scroll-margin-top: 96px; }
.browser-flip-effective { color: var(--muted); font-size: 16px; margin: -12px 0 20px; }
.browser-flip-privacy__lead { color: var(--fg); font-size: 20px; }
.browser-flip-privacy ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 768px) {
  .browser-flip-features { gap: 48px; }
  .browser-flip-feature { grid-template-columns: 1fr; gap: 24px; }
  .browser-flip-feature--flip .browser-flip-feature__copy { order: 0; }
}

@media (max-width: 600px) {
  .browser-flip-hero { grid-template-columns: 1fr; gap: 24px; }
  .browser-flip-hero__icon { width: 112px; height: 112px; }
}

/* ----- Rocket Land ------------------------------------------------------ */
.rocket-land__stage { display: flex; flex-direction: column; gap: 16px; border-radius: 16px; outline: none; }
.rocket-land__stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.rocket-land__canvas {
  display: block; width: 100%; aspect-ratio: 16 / 9; touch-action: none;
  border: 1px solid var(--card-border); border-radius: 16px; background: var(--card);
}
.rocket-land__touch { display: none; justify-content: space-between; align-items: center; }
.rocket-land__touch-group { display: flex; gap: 12px; }
.rocket-land__touch button {
  width: 64px; height: 64px; border-radius: 50%; font-size: 22px;
  border: 1px solid var(--card-border); background: var(--card); color: var(--fg);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rocket-land__touch .rocket-land__thrust { width: 84px; height: 84px; border-color: var(--accent); color: var(--accent); }
.rocket-land__touch button.on { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.rocket-land__stage:fullscreen {
  justify-content: center; border-radius: 0; background: var(--bg);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.rocket-land__stage:fullscreen .rocket-land__canvas { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.rocket-land__toolbar { display: flex; justify-content: flex-end; margin-top: 12px; min-height: 34px; }
.rocket-land__help { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; }
.rocket-land__help h2 { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; }
.rocket-land__help p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.rocket-land__help p + p { margin-top: 10px; }
.rocket-land__controls { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-bottom: 16px; }
.rocket-land__controls dt { color: var(--muted); }
.rocket-land kbd {
  font-family: "JetBrains Mono", monospace; font-size: 0.85em; white-space: nowrap; color: var(--fg);
  padding: 1px 6px; border: 1px solid var(--card-border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--card-strong);
}

@media (pointer: coarse) {
  .rocket-land__touch { display: flex; }
}

/* ----- Forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="datetime-local"], .field input[type="date"], .field input[type="file"], .field input[type="number"],
.field select, .field textarea {
  width: 100%; border-radius: 12px; border: 1px solid var(--card-border);
  background: var(--card-strong); color: var(--fg); padding: 13px 15px;
  font-size: 15px; font-family: "DM Sans", sans-serif;
}
.field textarea { min-height: 220px; resize: vertical; font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; }
.field textarea.field-textarea--short { min-height: 96px; font-family: "DM Sans", sans-serif; font-size: 15px; }
.field select.pill-select {
  appearance: none;
  width: fit-content;
  min-width: 142px;
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 34px 7px 13px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-color: color-mix(in srgb, currentColor 34%, var(--card-border));
  background-color: color-mix(in srgb, currentColor 11%, transparent);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field select.category-select { color: var(--accent-soft); }
.field select.status-select:has(option[value="published"]:checked) { color: var(--success); }
.field select.pill-select option {
  color: var(--fg);
  background: var(--bg);
  font-family: "DM Sans", sans-serif;
  text-transform: none;
}
.field--check { flex-direction: row; align-items: center; gap: 10px; }
.field--check input { width: 18px; height: 18px; }
.form-error { color: var(--danger); font-size: 14px; margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.field-hint { margin: -2px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.radio-form-panel { max-width: 920px; }
.radio-form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.radio-form-section + .radio-form-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--card-border); }
.radio-form-section legend {
  margin-bottom: 18px; padding: 0; color: var(--fg); font-family: "Inter", sans-serif;
  font-size: 18px; font-weight: 600;
}
.radio-form-grid { display: grid; gap: 16px; }
.radio-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.radio-form-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ----- Admin ------------------------------------------------------------ */
.admin-link {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); background: transparent; border: none;
  padding: 4px 0; cursor: pointer; transition: color 0.15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.admin-link:hover { color: var(--fg); }
.admin-link.is-accent { color: var(--accent); }

.admin-shell { max-width: 1240px; margin: 0 auto; padding: 112px 24px 80px; position: relative; z-index: 1; }
.admin-head { font-family: "Inter", sans-serif; font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.admin-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.admin-page-header .admin-head { margin-bottom: 0; }
.admin-utility-action {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; line-height: 1; text-transform: uppercase;
  transition: color 0.15s;
}
.admin-utility-action:hover { color: var(--fg); }

.admin-tabs { display: flex; gap: 22px; align-items: flex-end; border-bottom: 1px solid var(--card-border); margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; }
.admin-tab {
  background: transparent; border: none; padding: 10px 0; margin-bottom: -1px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.admin-tab:hover { color: var(--fg); }
.admin-tab.is-active { color: var(--fg); border-bottom-color: var(--accent); }
.admin-tab.is-soon { opacity: 0.4; cursor: not-allowed; }
.admin-tab--tools {
  margin-left: auto; padding-left: 22px;
  border-left: 1px solid var(--card-border);
}
.admin-tab--guide { color: var(--accent-soft); }

.admin-dashboard-kicker {
  margin: 0 0 8px; color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3;
  text-transform: uppercase;
}
.admin-section-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.admin-section-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px; align-items: start; min-width: 0; padding: 14px;
  border: 1px solid var(--card-border); border-radius: 12px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.admin-section-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--card-border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  transform: translateY(-1px);
}
.admin-section-card__icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 999px; color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.admin-section-card__body { display: grid; gap: 4px; min-width: 0; }
.admin-section-card__title {
  color: var(--fg); font-family: "Inter", sans-serif;
  font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em;
}
.admin-section-card__copy {
  color: var(--muted); font-size: 13px; line-height: 1.45; text-wrap: pretty;
}

.admin-panel { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 24px; margin-bottom: 22px; }
.admin-panel h2 { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.admin-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-panel__head h2 { margin: 0; }
.admin-panel__meta {
  margin: 0; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.visitor-filter {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px 12px;
  flex-wrap: wrap; margin-inline-start: auto;
}
.visitor-filter label {
  color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.visitor-filter input {
  min-inline-size: 220px; min-block-size: 34px; padding: 7px 11px;
  border: 1px solid var(--card-border); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--fg); font: inherit; font-size: 14px;
}
.visitor-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aircraft-range-filter select {
  min-block-size: 34px; padding: 7px 34px 7px 11px;
  border: 1px solid var(--card-border); border-radius: 999px;
  background-color: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--fg); font: inherit; font-size: 0.875rem;
}
.aircraft-range-filter select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aircraft-range-filter .btn { min-block-size: 34px; }
.admin-panel--deferred {
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 620px;
}
.admin-live-visitors {
  position: sticky; top: 10px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  min-height: 30px; margin: -4px 0 14px auto; padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--card-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--success); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; backdrop-filter: blur(10px);
}
.admin-live-visitors span {
  display: inline-grid; place-items: center; min-inline-size: 18px; min-block-size: 18px; padding: 0 7px;
  border-radius: 999px; background: color-mix(in srgb, var(--success) 18%, transparent);
}
.style-guide-panel { overflow: hidden; }
.style-guide-kicker,
.style-guide-label {
  display: block; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3;
  text-transform: uppercase;
}
.style-guide-kicker { margin-bottom: 6px; }
.style-guide-swatch-grid,
.style-guide-type-grid,
.style-guide-form-grid,
.style-guide-content-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.style-guide-swatch {
  min-width: 0; padding: 13px; border: 1px solid var(--card-border);
  border-radius: 12px; background: color-mix(in srgb, var(--card) 72%, transparent);
}
.style-guide-swatch__chip {
  display: block; height: 52px; margin-bottom: 10px; border-radius: 10px;
  border: 1px solid var(--card-border); background: var(--swatch-color);
}
.style-guide-swatch__name {
  display: block; color: var(--fg); font-size: 14px; font-weight: 700; line-height: 1.25;
}
.style-guide-swatch__value,
.style-guide-type-mono {
  display: block; margin-top: 4px; color: var(--muted);
  font-family: "JetBrains Mono", monospace; font-size: 11px; overflow-wrap: anywhere;
}
.style-guide-type-sample {
  min-width: 0; padding: 16px; border: 1px solid var(--card-border);
  border-radius: 12px; background: color-mix(in srgb, var(--card) 72%, transparent);
}
.style-guide-type-heading {
  margin-top: 12px; font-family: "Inter", sans-serif;
  font-size: clamp(28px, 4vw, 42px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.05; text-wrap: balance;
}
.style-guide-type-body {
  margin-top: 12px; color: var(--fg); font-size: 17px; line-height: 1.65;
  text-wrap: pretty;
}
.style-guide-stack { display: grid; gap: 18px; }
.style-guide-row {
  display: grid; grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
  gap: 16px; align-items: center; min-width: 0;
}
.style-guide-tag {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-soft);
}
.style-guide-form-grid { align-items: end; }
.style-guide-form-grid .field,
.style-guide-textarea { margin-bottom: 0; }
.style-guide-content-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.55fr);
  align-items: start;
}
.style-guide-media-card { max-width: 320px; justify-self: stretch; }
.style-guide-preview-mark {
  color: var(--accent-soft); font-family: "Inter", sans-serif;
  font-size: 42px; font-weight: 700; letter-spacing: -0.02em;
}
.style-guide-markdown {
  max-width: 760px; padding-top: 0; border-top: none;
}
.admin-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; align-items: start; }
.admin-travel-edit { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.5fr); gap: 22px; align-items: start; }
.admin-travel-details, .travel-photo-manager { margin: 0; }
.travel-places-fields { min-width: 0; margin: 8px 0 16px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--card-border); }
.travel-places-fields legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; color: var(--fg); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; }
.travel-places-fields .field-hint { clear: both; }
.travel-place-fields ~ .travel-place-fields { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.admin-empty { color: var(--muted); margin: 0; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: 16px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.admin-table th, .admin-table td { padding: 13px 16px; border-bottom: 1px solid var(--card-border); text-align: left; vertical-align: middle; }
.admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.admin-table td { font-size: 14px; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--card); }
.admin-table--visitors,
.admin-table--visitor-events { table-layout: fixed; min-width: 100%; }
.admin-table--visitors th,
.admin-table--visitors td,
.admin-table--visitor-events th,
.admin-table--visitor-events td { padding-inline: 10px; }
.visitor-table__time { width: 8%; }
.visitor-table__action { width: 12%; }
.visitor-table__visitor { width: 8%; }
.visitor-table__ip { width: 18%; }
.visitor-table__city { width: 16%; }
.visitor-table__country { width: 16%; }
.visitor-table__page { width: auto; }
.admin-table--visitors td,
.admin-table--visitor-events td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-table--visitors td:nth-child(8),
.admin-table--visitor-events td:nth-child(8) {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
.visitor-cell--time { color: var(--muted); }
.visitor-cell--action {
  color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 400; font-variation-settings: "wght" 400; letter-spacing: 0;
}
.visitor-cell--action-live { color: var(--success); font-weight: 400; font-variation-settings: "wght" 400; }
.admin-table td.visitor-cell--id {
  color: color-mix(in srgb, var(--accent-soft) 55%, var(--success));
  font-size: 12px;
}
.visitor-cell--id span {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 10ch; max-inline-size: 100%; padding: 2px;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  border-radius: 999px; background: color-mix(in srgb, currentColor 11%, transparent);
  line-height: 1.1; overflow: hidden;
}
.visitor-cell--ip {
  color: color-mix(in srgb, var(--fg) 82%, var(--accent));
  font-size: 12px; overflow: visible; text-overflow: clip; white-space: nowrap;
}
.visitor-cell--city { color: var(--fg); font-weight: 400; }
.visitor-cell--country { color: color-mix(in srgb, var(--success) 62%, var(--fg)); }
.visitor-cell--page { color: color-mix(in srgb, var(--accent-soft) 70%, var(--fg)); }
.admin-table__empty { color: var(--muted); }
.admin-table__link { display: block; margin: -13px -16px; padding: 13px 16px; color: inherit; }
.admin-table__link:hover .admin-post-title { color: var(--accent-soft); }
.visitor-geo { display: block; color: var(--fg); white-space: nowrap; }
.visitor-geo__network {
  display: block; margin-top: 3px; color: var(--muted);
  font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 1.3;
  max-inline-size: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-post-title {
  display: block; font-family: "Inter", sans-serif; font-size: 18px;
  font-weight: 500; line-height: 1.2; letter-spacing: 0;
}
.admin-post-slug {
  display: block; margin-top: 4px; color: var(--muted);
  font-family: "JetBrains Mono", monospace; font-size: 11px;
}

.admin-stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(132px, 170px));
  justify-content: start; gap: 12px; margin-bottom: 22px;
}
.admin-stat-strip--dashboard {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-content: stretch; margin-bottom: 22px;
}
.admin-stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-inline-size: 0; padding: 14px 14px; border: 1px solid var(--card-border);
  border-radius: 12px; background: color-mix(in srgb, var(--card) 72%, transparent);
  opacity: 0; transform: translateY(8px) scale(0.98);
  animation: admin-stat-enter 360ms ease-out forwards;
  animation-delay: var(--stat-delay, 0ms);
}
.admin-stat--link:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--card-border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  transform: translateY(-1px);
}
.admin-stat__label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.admin-stat__value { font-family: "JetBrains Mono", monospace; font-size: 24px; }
.admin-stat__gauge {
  inline-size: 38px; aspect-ratio: 1; flex: 0 0 auto;
  color: var(--accent);
}
.admin-stat[data-gauge-shape-value="line"] .admin-stat__gauge {
  inline-size: 38px; block-size: 4px; aspect-ratio: auto;
}
.admin-stat[data-gauge-shape-value="semicircle"] .admin-stat__gauge {
  inline-size: 48px; block-size: 28px; aspect-ratio: auto;
}
.admin-stat[data-gauge-shape-value="custom"] .admin-stat__gauge {
  inline-size: 50px; block-size: 32px; aspect-ratio: auto;
}
.admin-stat__gauge svg {
  display: block; inline-size: 100%; block-size: 100%;
}
@keyframes admin-stat-enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.status-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: "JetBrains Mono", monospace; }
.status-pill--published { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-pill--draft { background: var(--card-strong); color: var(--muted); }
.status-pill--scheduled { background: rgba(255, 179, 71, 0.16); color: #ffb347; }

.admin-login { max-width: 420px; margin: 0 auto; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.media-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; }
.media-card__preview { aspect-ratio: 16 / 10; background: var(--card-strong); display: grid; place-items: center; overflow: hidden; }
.media-card__preview img { width: 100%; height: 100%; object-fit: cover; }
.media-card__body { padding: 14px; }
.media-card__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.media-card__meta { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); }
.media-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.mini-btn {
  font-family: "JetBrains Mono", monospace; font-size: 11px; padding: 5px 10px;
  border-radius: 8px; border: 1px solid var(--card-border); background: transparent;
  color: var(--muted); cursor: pointer; text-decoration: none;
}
.mini-btn:hover, .mini-btn.is-copied { color: var(--fg); border-color: var(--accent); }
.travel-upload-form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px; align-items: end; margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--card-border);
}
.travel-upload-form .field { margin-bottom: 0; }
.travel-upload-form__images { grid-column: 1 / -1; }
.travel-upload-form .form-actions { margin-top: 0; }
.travel-photo-sort { display: grid; gap: 10px; }
.travel-photo-sort__status {
  min-height: 18px; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}
.travel-photo-workspace {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, 360px);
  gap: 18px; align-items: start;
}
.travel-photo-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.travel-photo-admin-card {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--card-border); background: var(--card);
  transition: border-color 120ms ease, opacity 120ms ease, transform 120ms ease;
}
.travel-photo-admin-card.is-dragging {
  opacity: 0.62; transform: scale(0.985); border-color: var(--accent);
}
.travel-photo-admin-card__drag {
  position: absolute; z-index: 2; top: 8px; left: 8px;
  display: grid; place-items: center; inline-size: 32px; block-size: 32px;
  border: 1px solid var(--card-border); border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--fg); cursor: grab;
}
.travel-photo-admin-card__drag:active { cursor: grabbing; }
.travel-photo-admin-card__drag:hover { border-color: var(--accent); }
.travel-photo-admin-card__drag:disabled { cursor: wait; opacity: 0.55; }
.travel-photo-admin-card__drag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.travel-photo-admin-card__drag svg { inline-size: 16px; block-size: 16px; }
.travel-photo-admin-card__position {
  position: absolute; z-index: 2; top: 8px; right: 8px;
  padding: 5px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--fg); font-family: "JetBrains Mono", monospace; font-size: 11px;
}
.travel-photo-admin-select {
  display: block; width: 100%; padding: 0; border: 0; background: transparent;
  color: var(--fg); cursor: pointer; text-align: left;
}
.travel-photo-admin-select img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
.travel-photo-admin-select:hover,
.travel-photo-admin-select.is-selected {
  background: var(--card-strong);
}
.travel-photo-admin-select.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.travel-photo-admin-select:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.travel-photo-admin-card__meta { display: block; min-height: 48px; padding: 9px 10px; }
.travel-photo-admin-card__caption {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.35;
}
.travel-photo-inspector {
  position: sticky; top: 88px; padding: 16px; border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-strong);
}
.travel-photo-inspector__panel[hidden] { display: none; }
.travel-photo-inspector__head { margin-bottom: 12px; }
.travel-photo-inspector__head h3 { margin: 0; font-size: 18px; }
.travel-photo-inspector__head p {
  margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.travel-photo-inspector__preview {
  overflow: hidden; border-radius: 10px; border: 1px solid var(--card-border);
  background: var(--card); margin-bottom: 14px;
}
.travel-photo-inspector__preview img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
.travel-photo-inspector__delete {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--card-border);
}
.travel-photo-admin-form .field { margin-bottom: 12px; }
.travel-photo-admin-form .field input, .travel-photo-admin-form .field textarea { padding: 10px 12px; font-size: 14px; }

/* ----- USB-C guide ------------------------------------------------------ */
.usb-c-guide {
  --usb-c-rule: color-mix(in srgb, var(--fg) 14%, transparent);
  --usb-c-font-small: 1rem;
  --usb-c-font-copy: 1.125rem;
}
.usb-c-guide .section { max-width: 1180px; }
.usb-c-kicker {
  margin-bottom: 18px; color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: var(--usb-c-font-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.usb-c-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr);
  gap: clamp(32px, 7vw, 90px); align-items: end; padding-top: clamp(120px, 13vw, 170px);
}
.usb-c-hero__intro h1 {
  max-width: 820px; font-family: "Inter", sans-serif; font-size: clamp(3.1rem, 8vw, 7rem);
  font-weight: 600; letter-spacing: -0.065em; line-height: 0.94; text-wrap: balance;
}
.usb-c-hero__standard { display: block; }
.usb-c-hero__accent { display: block; color: var(--accent-soft); font-size: 0.72em; }
.usb-c-hero__lede {
  max-width: 700px; margin-top: 30px; color: var(--muted); font-size: clamp(var(--usb-c-font-copy), 2vw, 1.35rem);
  line-height: 1.55; text-wrap: pretty;
}
.usb-c-hero__rule { padding: 6px 0 8px 28px; border-left: 1px solid var(--usb-c-rule); }
.usb-c-hero__rule p {
  margin-bottom: 10px; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: var(--usb-c-font-small); letter-spacing: 0.1em; text-transform: uppercase;
}
.usb-c-hero__rule strong { font-family: "Inter", sans-serif; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55; }
.usb-c-route { grid-column: 1 / -1; margin-top: clamp(22px, 4vw, 44px); }
.usb-c-route ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--usb-c-rule); list-style: none; }
.usb-c-route li + li { border-left: 1px solid var(--usb-c-rule); }
.usb-c-route a {
  display: grid; gap: 7px; min-height: 132px; align-content: center; padding: 22px clamp(16px, 2.6vw, 30px);
  transition: background 180ms ease, color 180ms ease;
}
.usb-c-route a:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.usb-c-route span { color: var(--accent-soft); font-family: "JetBrains Mono", monospace; font-size: var(--usb-c-font-small); }
.usb-c-route strong { font-family: "Inter", sans-serif; font-size: var(--usb-c-font-copy); letter-spacing: -0.02em; }
.usb-c-route small { color: var(--muted); font-size: var(--usb-c-font-small); }
.usb-c-photo img {
  display: block; width: 100%; height: auto; border: 1px solid var(--usb-c-rule); border-radius: 18px;
  background: var(--card-strong); object-fit: cover;
}
.usb-c-photo figcaption {
  margin-top: 12px; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: var(--usb-c-font-small); line-height: 1.5;
}
.usb-c-photo--hero { grid-column: 1 / -1; margin-top: clamp(12px, 3vw, 30px); }
.usb-c-photo--hero img {
  aspect-ratio: 16 / 7; object-position: center 66%;
  box-shadow: 0 28px 90px color-mix(in srgb, var(--fg) 10%, transparent);
}
.usb-c-steps { list-style: none; }
.usb-c-step {
  display: grid; grid-template-columns: minmax(100px, 0.24fr) minmax(0, 1fr); gap: clamp(36px, 8vw, 112px);
  border-top: 1px solid var(--usb-c-rule); scroll-margin-top: 110px;
}
.usb-c-step__number {
  position: sticky; top: 110px; align-self: start; color: color-mix(in srgb, var(--accent-soft) 74%, var(--fg));
  font-family: "JetBrains Mono", monospace; font-size: clamp(3.25rem, 8vw, 7.5rem); font-weight: 500;
  letter-spacing: -0.08em; line-height: 0.8;
}
.usb-c-step__heading { max-width: 850px; }
.usb-c-step__heading h2 {
  max-width: 780px; font-family: "Inter", sans-serif; font-size: clamp(2.2rem, 5vw, 4.8rem);
  font-weight: 600; letter-spacing: -0.055em; line-height: 1; text-wrap: balance;
}
.usb-c-step__heading > p:last-child {
  max-width: 760px; margin-top: 24px; color: var(--muted); font-size: var(--usb-c-font-copy); line-height: 1.65; text-wrap: pretty;
}
.usb-c-jobs { margin-top: 52px; border-top: 1px solid var(--usb-c-rule); list-style: none; }
.usb-c-jobs > li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.45fr); gap: clamp(28px, 6vw, 78px);
  align-items: start; padding: 30px 4px; border-bottom: 1px solid var(--usb-c-rule);
}
.usb-c-jobs h3 { margin-bottom: 8px; font-family: "Inter", sans-serif; font-size: clamp(1.25rem, 2.2vw, 1.65rem); letter-spacing: -0.025em; }
.usb-c-jobs p { max-width: 620px; color: var(--muted); font-size: var(--usb-c-font-copy); line-height: 1.6; text-wrap: pretty; }
.usb-c-jobs__answer { display: grid; gap: 5px; }
.usb-c-jobs__answer span { color: var(--accent-soft); font-family: "JetBrains Mono", monospace; font-size: var(--usb-c-font-small); text-transform: uppercase; }
.usb-c-jobs__answer strong { font-family: "Inter", sans-serif; font-size: clamp(1.2rem, 2.1vw, 1.55rem); letter-spacing: -0.02em; }
.usb-c-jobs__answer small { color: var(--muted); font-size: var(--usb-c-font-small); line-height: 1.5; }
.usb-c-shape-rule {
  max-width: 900px; margin-top: 48px; padding: 24px 0 24px 28px; border-left: 3px solid var(--accent-soft);
  color: var(--muted); font-size: clamp(var(--usb-c-font-copy), 2vw, 1.35rem); line-height: 1.6;
}
.usb-c-shape-rule strong { color: var(--fg); }
.usb-c-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 42px; border-block: 1px solid var(--usb-c-rule); list-style: none; }
.usb-c-path li { position: relative; display: grid; gap: 8px; align-content: center; min-height: 150px; padding: 28px clamp(20px, 3vw, 40px); }
.usb-c-path li + li { border-left: 1px solid var(--usb-c-rule); }
.usb-c-path li:not(:last-child)::after {
  content: "→" / ""; position: absolute; top: 50%; right: 0; translate: 50% -50%; z-index: 1;
  padding: 4px 10px; background: var(--bg); color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
}
.usb-c-path span { color: var(--accent-soft); font-family: "JetBrains Mono", monospace; font-size: var(--usb-c-font-small); }
.usb-c-path strong { font-family: "Inter", sans-serif; font-size: var(--usb-c-font-copy); }
.usb-c-path small { color: var(--muted); font-size: var(--usb-c-font-small); }
.usb-c-step__answer { max-width: 920px; margin-top: 34px; font-size: clamp(var(--usb-c-font-copy), 2.2vw, 1.55rem); line-height: 1.6; text-wrap: pretty; }
.usb-c-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; border-block: 1px solid var(--usb-c-rule); }
.usb-c-specs > div { min-width: 0; padding: clamp(26px, 4vw, 40px); }
.usb-c-specs > div + div { border-left: 1px solid var(--usb-c-rule); }
.usb-c-specs dt { color: var(--accent-soft); font-family: "JetBrains Mono", monospace; font-size: var(--usb-c-font-small); text-transform: uppercase; }
.usb-c-specs dt span { color: var(--muted); }
.usb-c-specs dd { margin-top: 18px; }
.usb-c-specs dd strong { font-family: "Inter", sans-serif; font-size: clamp(1.25rem, 2.2vw, 1.65rem); letter-spacing: -0.025em; }
.usb-c-specs dd p { margin-top: 10px; color: var(--muted); font-size: var(--usb-c-font-copy); line-height: 1.6; text-wrap: pretty; }
.usb-c-badge-guide { max-width: 920px; margin-top: 48px; }
.usb-c-badge-guide img { display: block; width: 100%; height: auto; }
.usb-c-badge-guide figcaption {
  max-width: 850px; margin-top: 16px; color: var(--muted); font-size: var(--usb-c-font-small); line-height: 1.6;
}
.usb-c-badge-guide figcaption strong { color: var(--fg); }
.usb-c-badge-guide figcaption a { color: var(--accent-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.usb-c-marking-key { margin-top: 44px; border-top: 1px solid var(--usb-c-rule); }
.usb-c-marking-key > div {
  display: grid; grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 72px);
  align-items: center; padding: 28px 4px; border-bottom: 1px solid var(--usb-c-rule);
}
.usb-c-marking-key__samples { display: flex; min-height: 58px; gap: 8px; align-items: center; flex-wrap: wrap; }
.usb-c-mark {
  display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 12px; border: 1px solid var(--usb-c-rule); border-radius: 8px;
  background: color-mix(in srgb, var(--card-strong) 84%, transparent); color: var(--fg);
  font-family: "JetBrains Mono", monospace; font-size: var(--usb-c-font-small); font-style: normal; font-weight: 600; line-height: 1;
  box-shadow: inset 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
}
.usb-c-mark svg { width: 16px; height: 16px; stroke-width: 1.7; }
.usb-c-mark--thunderbolt { min-width: 54px; color: var(--accent-soft); }
.usb-c-mark--thunderbolt b { color: var(--fg); }
.usb-c-marking-key h3 { margin-bottom: 8px; font-family: "Inter", sans-serif; font-size: var(--usb-c-font-copy); letter-spacing: -0.02em; }
.usb-c-marking-key p { max-width: 650px; color: var(--muted); font-size: var(--usb-c-font-copy); line-height: 1.6; text-wrap: pretty; }
.usb-c-marking-note { max-width: 850px; margin-top: 24px; color: var(--muted); font-size: var(--usb-c-font-small); line-height: 1.6; }
.usb-c-marking-note a { color: var(--accent-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.usb-c-final-checks { margin-top: 52px; border-top: 1px solid var(--usb-c-rule); list-style: none; }
.usb-c-final-checks li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 22px; align-items: start;
  padding: 26px 4px; border-bottom: 1px solid var(--usb-c-rule);
}
.usb-c-final-checks li > span {
  display: grid; width: 36px; aspect-ratio: 1; place-items: center; border: 1px solid var(--usb-c-rule); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
}
.usb-c-final-checks p { max-width: 820px; color: var(--muted); font-size: var(--usb-c-font-copy); line-height: 1.65; text-wrap: pretty; }
.usb-c-final-checks strong { color: var(--fg); }
.usb-c-checkout {
  max-width: 940px; margin-top: 48px; padding: clamp(28px, 5vw, 48px); border-left: 3px solid var(--accent-soft);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.usb-c-checkout .usb-c-kicker { margin-bottom: 16px; }
.usb-c-checkout > p:not(.usb-c-kicker) { font-family: "Inter", sans-serif; font-size: clamp(1.4rem, 3vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.25; text-wrap: balance; }
.usb-c-checkout small { display: block; margin-top: 20px; color: var(--muted); font-size: var(--usb-c-font-small); line-height: 1.5; }
.usb-c-tester {
  display: grid; grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 108px);
  align-items: center; border-top: 1px solid var(--usb-c-rule);
}
.usb-c-tester__media img {
  display: block; width: 100%; height: auto; border: 1px solid var(--usb-c-rule); border-radius: 18px;
  background: var(--card-strong);
}
.usb-c-tester__content { max-width: 680px; }
.usb-c-tester__content h2 {
  font-family: "Inter", sans-serif; font-size: clamp(2.1rem, 5vw, 4.6rem); font-weight: 600;
  letter-spacing: -0.05em; line-height: 1.02; text-wrap: balance;
}
.usb-c-tester__content > p:not(.usb-c-kicker) {
  margin-top: 24px; color: var(--muted); font-size: var(--usb-c-font-copy); line-height: 1.65; text-wrap: pretty;
}
.usb-c-tester__content > p + p { margin-top: 14px; }
.usb-c-tester__content strong { color: var(--fg); font-weight: 600; }
.usb-c-tester__link {
  display: inline-flex; gap: 8px; align-items: center; margin-top: 28px; color: var(--accent-soft);
  font-family: "Inter", sans-serif; font-size: var(--usb-c-font-copy); font-weight: 600;
}
.usb-c-tester__link svg { width: 18px; height: 18px; transition: translate 180ms ease; }
.usb-c-tester__link:hover svg { translate: 3px -3px; }
.usb-c-tester__disclosure { display: block; margin-top: 10px; color: var(--muted); font-size: var(--usb-c-font-small); }
.usb-c-sources {
  margin-bottom: 40px; padding-bottom: 96px; border-top: 1px solid var(--usb-c-rule);
}
.usb-c-sources__list { max-width: 850px; padding-top: 10px; }
.usb-c-sources__list h3 {
  margin-bottom: 16px; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: var(--usb-c-font-small); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.usb-c-sources__list ul { list-style: none; border-top: 1px solid var(--usb-c-rule); }
.usb-c-sources__list li { border-bottom: 1px solid var(--usb-c-rule); }
.usb-c-sources__list a { display: block; padding: 14px 0; color: var(--muted); font-size: var(--usb-c-font-small); line-height: 1.45; transition: color 180ms ease, padding 180ms ease; }
.usb-c-sources__list a:hover { padding-left: 8px; color: var(--accent-soft); }

/* ----- Weather station -------------------------------------------------- */
.weather-page {
  --weather-ambient: var(--data-secondary);
  --weather-davis: var(--accent);
  --weather-rule: color-mix(in srgb, var(--fg) 15%, transparent);
}
.weather-page__header { max-width: 780px; margin-bottom: 34px; }
.weather-page__header .section-sub { margin-bottom: 0; }
.weather-kicker {
  margin-bottom: 8px; color: var(--accent-soft); font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; line-height: 1.4;
  text-transform: uppercase;
}
.weather-status {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px;
  align-items: center; margin-bottom: 28px; padding: 15px 0;
  border-block: 1px solid var(--weather-rule);
}
.weather-status__pulse {
  width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--muted);
}
.weather-status[data-status="fresh"] .weather-status__pulse {
  background: var(--success); box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 16%, transparent);
  animation: pulseDot 1.8s ease-in-out infinite;
}
.weather-status[data-status="partial"] .weather-status__pulse { background: var(--accent-soft); }
.weather-status[data-status="stale"] .weather-status__pulse { background: var(--danger); }
.weather-status strong { display: block; font-size: 0.95rem; }
.weather-status p { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.weather-status__source { color: var(--muted); font-size: 0.66rem; text-transform: uppercase; }
.weather-console {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden;
  margin-bottom: 76px; border: 1px solid var(--weather-rule); border-radius: 26px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-strong) 88%, transparent), var(--card));
}
.weather-station { position: relative; min-width: 0; padding: clamp(24px, 4vw, 42px); }
.weather-station + .weather-station { border-left: 1px solid var(--weather-rule); }
.weather-station::before {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px;
  background: var(--weather-ambient);
}
.weather-station[data-station="davis"]::before { background: var(--weather-davis); }
.weather-station__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.weather-station__vendor {
  display: flex; align-items: center; gap: 8px; color: var(--muted);
  font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.weather-station__vendor > span { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--weather-ambient); }
.weather-station[data-station="davis"] .weather-station__vendor > span { background: var(--weather-davis); }
.weather-station h2 {
  margin-top: 6px; font-family: "Inter", sans-serif; font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  letter-spacing: -0.03em; line-height: 1.1;
}
.weather-station__health {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 5px 8px;
  border: 1px solid var(--weather-rule); border-radius: 999px; color: var(--muted);
  font-family: "JetBrains Mono", monospace; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; line-height: 1; text-transform: uppercase;
}
.weather-station__health > span { width: 6px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.weather-station__health[data-status="fresh"] { color: var(--success); }
.weather-station__health[data-status="partial"] { color: var(--accent-soft); }
.weather-station__health[data-status="stale"] { color: var(--danger); }
.weather-station__temperature {
  margin: 32px 0 20px; font-family: "JetBrains Mono", monospace;
  font-size: clamp(3rem, 7vw, 5.1rem); font-weight: 500; letter-spacing: -0.08em;
  line-height: 0.95; white-space: nowrap;
}
.weather-station__quick { display: flex; gap: 12px 28px; flex-wrap: wrap; color: var(--muted); font-size: 0.74rem; }
.weather-station__quick span { display: grid; gap: 2px; }
.weather-station__quick strong { color: var(--fg); font-family: "JetBrains Mono", monospace; font-size: 0.82rem; font-weight: 500; }
.weather-station__time { margin-top: 28px; color: var(--muted); font-size: 0.67rem; line-height: 1.5; }
.weather-station__time time { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.61rem; }
.weather-section { margin-bottom: 78px; }
.weather-section__head {
  display: grid; grid-template-columns: minmax(250px, 0.8fr) minmax(280px, 1fr);
  gap: 32px; align-items: end; margin-bottom: 28px; padding-bottom: 20px;
  border-bottom: 1px solid var(--weather-rule);
}
.weather-section__head h2, .weather-method h2 {
  font-family: "Inter", sans-serif; font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.04em; line-height: 1.05;
}
.weather-section__head > p { color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.weather-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.weather-comparison-table, .weather-history-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.weather-comparison-table th, .weather-comparison-table td,
.weather-history-table th, .weather-history-table td {
  padding: 14px 12px; border-bottom: 1px solid var(--weather-rule); text-align: right;
  white-space: nowrap;
}
.weather-comparison-table thead th, .weather-history-table thead th {
  color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.weather-comparison-table th:first-child, .weather-history-table th:first-child { padding-left: 0; text-align: left; }
.weather-comparison-table td:last-child, .weather-comparison-table th:last-child { padding-right: 0; }
.weather-comparison-table tbody th { color: var(--fg); font-weight: 500; }
.weather-comparison-table tbody td { font-family: "JetBrains Mono", monospace; }
.weather-comparison-table tbody tr { transition: background 180ms ease; }
.weather-comparison-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.weather-comparison-table__delta { color: var(--muted); }
.weather-legend-dot { display: inline-block; width: 7px; aspect-ratio: 1; margin-right: 7px; border-radius: 50%; background: var(--weather-ambient); }
.weather-legend-dot--davis { background: var(--weather-davis); }
.weather-chart-legend { display: flex; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 12px; color: var(--muted); font-size: 0.68rem; }
.weather-chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.weather-chart-legend__line { display: inline-block; width: 28px; border-top: 2px solid var(--weather-ambient); }
.weather-chart-legend__line--davis { border-color: var(--weather-davis); border-top-style: dashed; }
.weather-chart-list { border-top: 1px solid var(--weather-rule); }
.weather-chart { display: grid; grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--weather-rule); }
.weather-chart figcaption h3 { font-family: "Inter", sans-serif; font-size: 1rem; letter-spacing: -0.02em; }
.weather-chart figcaption span { display: block; margin-top: 7px; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 0.6rem; line-height: 1.5; }
.weather-chart__plot { position: relative; min-width: 0; padding-block: 18px; }
.weather-chart__plot svg { display: block; width: 100%; height: 136px; overflow: visible; }
.weather-chart__grid { stroke: var(--weather-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.weather-chart__line {
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.weather-chart__line--ambient {
  stroke: var(--weather-ambient); stroke-dasharray: 1; stroke-dashoffset: 0;
}
.weather-chart__line--davis {
  stroke: var(--weather-davis); stroke-dasharray: 0.025 0.018;
}
.weather-trends.is-visible .weather-chart__line--ambient { animation: weatherTrace 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.weather-trends.is-visible .weather-chart__line--davis { animation: weatherLineIn 650ms ease-out 120ms both; }
.weather-chart__max, .weather-chart__min {
  position: absolute; left: 0; color: var(--muted); font-family: "JetBrains Mono", monospace;
  font-size: 0.55rem; line-height: 1;
}
.weather-chart__max { top: 0; }
.weather-chart__min { bottom: 0; }
.weather-chart__empty { align-self: center; color: var(--muted); font-size: 0.75rem; }
.weather-history-details { margin-top: 24px; }
.weather-history-details summary {
  width: fit-content; min-height: 44px; padding: 10px 0; color: var(--accent-soft);
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 700;
  cursor: pointer;
}
.weather-history-details .weather-table-wrap { margin-top: 12px; }
.weather-history-table { min-width: 980px; font-size: 0.66rem; }
.weather-history-table caption { padding: 0 0 10px; color: var(--muted); text-align: left; }
.weather-history-table thead tr:first-child th:not(:first-child) { text-align: center; }
.weather-history-table tbody th { color: var(--muted); font-family: "JetBrains Mono", monospace; font-weight: 400; }
.weather-history-table tbody td { font-family: "JetBrains Mono", monospace; }
.weather-history-empty { padding: 38px 0; border-bottom: 1px solid var(--weather-rule); }
.weather-history-empty h3 { font-family: "Inter", sans-serif; font-size: 1.2rem; }
.weather-history-empty p { max-width: 620px; margin-top: 6px; color: var(--muted); font-size: 0.78rem; }
.weather-method { width: 100%; padding-top: 28px; border-top: 1px solid var(--weather-rule); }
.weather-method p:last-child { margin-top: 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
@keyframes weatherTrace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes weatherLineIn { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }

/* ----- Aircraft --------------------------------------------------------- */
.aircraft-shell {
  position: relative; overflow: hidden; border-radius: 28px;
  border: 1px solid var(--card-border); background: var(--card);
}
.aircraft-inner { padding: clamp(20px, 3vw, 30px); display: grid; gap: 20px; }
.aircraft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 18px; background: var(--card-strong); border: 1px solid var(--card-border);
}
.aircraft-banner__dot { width: 12px; height: 12px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 6px rgba(57, 217, 138, 0.14); animation: pulseDot 1.4s ease-in-out infinite; flex: 0 0 auto; }
.aircraft-banner:not([data-aircraft-status="fresh"]):not([data-aircraft-status="demo"]) .aircraft-banner__dot {
  background: var(--muted); box-shadow: none; animation: none;
}
.aircraft-map-wrap {
  position: relative;
  height: clamp(420px, 62vh, 720px);
  min-height: 620px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--card-border);
}
.aircraft-map,
.aircraft-map.mapboxgl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.aircraft-map-notice { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; background: var(--card-strong); }
.aircraft-card { background: var(--card-strong); border: 1px solid var(--card-border); border-radius: 22px; padding: 20px; display: grid; gap: 16px; }
.aircraft-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.aircraft-card h3 { font-family: "Inter", sans-serif; font-size: 28px; letter-spacing: -0.03em; }
.aircraft-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.aircraft-stat { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--card-border); }
.aircraft-stat__label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.aircraft-stat__value { font-family: "JetBrains Mono", monospace; font-size: 13px; word-break: break-word; }
.aircraft-demo-btn {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--card-border);
  background: var(--card); color: var(--muted); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: "JetBrains Mono", monospace;
}
.aircraft-demo-btn.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); }
.aircraft-traffic-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--card-border); font-size: 13px; color: var(--muted); }
.aircraft-empty { padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); color: var(--muted); font-size: 14px; }
.mono { font-family: "JetBrains Mono", monospace; }

.aircraft-home-marker { display: grid; justify-items: center; }
.aircraft-home-beacon { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(62, 120, 255, 0.16); }
.aircraft-home-label { margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--card-strong); border: 1px solid var(--card-border); }
.aircraft-marker { position: relative; width: 0; height: 0; }
.aircraft-marker.is-updating { transition: transform 250ms var(--ease-in-out); }
.aircraft-marker-badge {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  background: var(--card-strong); border: 1px solid var(--card-border);
}
.aircraft-marker-plane { color: var(--accent); font-size: 16px; transition: transform 250ms var(--ease-in-out); }
.aircraft-marker-label {
  position: absolute; left: 0; top: 21px; translate: -50% 0;
  font-family: "JetBrains Mono", monospace; font-size: 11px; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px; background: var(--card-strong); border: 1px solid var(--card-border);
}

/* ----- DX contact map -------------------------------------------------- */
.dx-page { --dx-signal: var(--success); }
.radio-call-sign { margin-bottom: 8px; color: var(--dx-signal); font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; }
.dx-banner-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dx-projection-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.dx-projection-toggle[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); }
.dx-projection-toggle:disabled { cursor: wait; opacity: 0.55; }
.dx-map-shell { isolation: isolate; }
.dx-map, .dx-map.mapboxgl-map { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.dx-ionosphere { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dx-ionosphere__hop { fill: none; stroke: var(--dx-signal); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 9; opacity: 0.78; filter: drop-shadow(0 0 4px var(--dx-signal)); animation: dxSignalFlow 1.4s linear infinite; animation-delay: var(--signal-delay); }
.dx-map-shell .aircraft-map-notice { z-index: 4; }
.dx-map-home, .dx-map-marker { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--dx-signal); cursor: pointer; }
.dx-map-home { width: 34px; height: 34px; }
.dx-map-home__dot { width: 12px; aspect-ratio: 1; border: 3px solid var(--bg); border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.dx-map-home__pulse { position: absolute; inset: 3px; border: 1px solid currentColor; border-radius: 50%; animation: dxHomeRing 2.4s ease-out infinite; }
.dx-map-marker { width: 26px; height: 26px; }
.dx-map-marker__dot { width: 9px; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; background: var(--bg); box-shadow: 0 0 10px color-mix(in oklab, currentColor 65%, transparent); transition: scale 180ms ease, background 180ms ease; }
.dx-map-marker:hover .dx-map-marker__dot, .dx-map-marker:focus-visible .dx-map-marker__dot { scale: 1.45; background: currentColor; }
.dx-map-marker__label { position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; padding: 2px 5px; border: 1px solid var(--card-border); border-radius: 4px; background: color-mix(in oklab, var(--bg) 90%, transparent); color: var(--fg); font-family: "JetBrains Mono", monospace; font-size: 0.57rem; line-height: 1.2; white-space: nowrap; }
.dx-popup .mapboxgl-popup-content { padding: 0; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-strong); color: var(--fg); box-shadow: 0 14px 40px color-mix(in oklab, var(--bg) 60%, transparent); }
.dx-popup .mapboxgl-popup-tip { border-top-color: var(--card-strong); border-bottom-color: var(--card-strong); }
.dx-popup .mapboxgl-popup-close-button { min-width: 28px; min-height: 28px; color: var(--muted); font-size: 1rem; }
.dx-popup__content { display: grid; min-width: 190px; gap: 2px; padding: 14px 32px 14px 14px; font-family: "JetBrains Mono", monospace; }
.dx-popup__content strong { color: var(--dx-signal); font-size: 0.82rem; }
.dx-popup__content span { font-size: 0.72rem; }
.dx-popup__content small { margin-top: 4px; color: var(--muted); font-size: 0.62rem; }
.dx-hop-toggle { position: absolute; z-index: 2; inset: 18px auto auto 20px; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; border: 1px solid var(--card-border); border-radius: 7px; background: color-mix(in oklab, var(--bg) 88%, transparent); color: var(--fg); font-family: "JetBrains Mono", monospace; font-size: 0.66rem; letter-spacing: 0.04em; cursor: pointer; }
.dx-hop-toggle small { color: var(--muted); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dx-hop-toggle[aria-pressed="true"] { border-color: var(--dx-signal); background: color-mix(in oklab, var(--dx-signal) 14%, var(--bg)); }
.dx-hop-toggle:disabled { cursor: wait; opacity: 0.55; }
.dx-propagation-label__arc { width: 22px; height: 10px; border: 1.5px dashed var(--dx-signal); border-bottom: 0; border-radius: 50% 50% 0 0; }
.dx-map-meta { position: absolute; z-index: 2; inset: 18px 20px auto auto; display: flex; gap: 18px; color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 0.65rem; letter-spacing: 0.04em; }
.dx-map-legend { position: absolute; z-index: 2; inset: auto auto 18px 20px; display: flex; gap: 20px; color: var(--muted); font-size: 0.7rem; font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.07em; }
.dx-map-legend span { display: flex; align-items: center; gap: 7px; }
.dx-map-legend i { display: inline-block; width: 7px; aspect-ratio: 1; border-radius: 50%; }
.dx-legend-origin { background: var(--dx-signal); box-shadow: 0 0 8px var(--dx-signal); }
.dx-legend-contact { border: 1px solid var(--dx-signal); }
.dx-log { padding-block: 20px; }
.dx-log-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--card-border); }
.dx-log-heading > p { color: var(--muted); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; text-transform: uppercase; }
.dx-contact { display: grid; grid-template-columns: 46px minmax(160px, 1.1fr) 42px minmax(0, 2fr); gap: 24px; align-items: center; padding: 19px 8px; border-bottom: 1px solid var(--card-border); transition: background 180ms ease, padding 180ms ease; animation: fadeUp 0.55s ease-out both; animation-delay: calc(var(--contact-index) * 0.04s); }
.dx-contact:hover { padding-inline: 16px; background: var(--card); }
.dx-contact-number, .dx-contact-flag, .dx-contact-details { font-family: "JetBrains Mono", monospace; }
.dx-contact-number { color: var(--muted); font-size: 0.7rem; }
.dx-contact-station h4 { font-family: "JetBrains Mono", monospace; font-size: 1rem; color: var(--dx-signal); letter-spacing: 0.03em; }
.dx-contact-station p { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.dx-contact-flag { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.12em; }
.dx-contact-details { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.dx-contact-details div { display: grid; gap: 2px; }
.dx-contact-details dt { color: var(--muted); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dx-contact-details dd { font-size: 0.76rem; }
.dx-contact-notes { grid-column: 2 / -1; margin-top: -6px; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.dx-log-empty { padding: 34px 8px; color: var(--muted); text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes dxHomeRing { from { opacity: 0.5; scale: 0.5; } to { opacity: 0; scale: 1.7; } }
@keyframes dxSignalFlow { to { stroke-dashoffset: -26; } }

/* ----- Utilities -------------------------------------------------------- */
.eyebrow { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.cluster { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacer-nav { height: 92px; }
[hidden] { display: none !important; }

/* ----- Responsive ------------------------------------------------------- */
/* ----- Contracts and invoices ------------------------------------------ */
.admin-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 22px; }
.admin-subnav__link {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--card-border);
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  transition: color 0.15s, border-color 0.15s;
}
.admin-subnav__link:hover { color: var(--fg); }
.admin-subnav__link.is-active { color: var(--fg); border-color: var(--accent); }
.status-pill--void { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }

.document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.document-actions form { display: inline-flex; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; }
.inline-form input[type="date"] {
  border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-strong);
  color: var(--fg); padding: 6px 12px; font: inherit; font-size: 13px;
}
.share-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--card-border); background: var(--card);
}
.share-link__label {
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.share-link__url { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--fg); }
.share-link + .field-hint { margin-top: 10px; }
.contract-relations { list-style: none; margin-top: 16px; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.contract-notes { margin-top: 16px; font-size: 14px; color: var(--muted); }
.contract-notes p + p { margin-top: 8px; }
.contract-templates-note { margin-top: 18px; }
.field textarea.contract-body-field { min-height: 560px; }

.client-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; font-size: 15px; }
.client-details dt, .legal-doc__meta dt, .invoice-doc__meta dt, .signature-block__details dt {
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.document-list { list-style: none; display: grid; }
.document-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--card-border); font-size: 15px;
}
.document-list li:last-child { border-bottom: none; }
.document-list .status-pill, .document-list form { margin-left: auto; }
.document-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 18px; }
.document-upload .field { flex: 1 1 320px; margin-bottom: 0; }

.line-items-wrap { overflow-x: auto; }
.line-items-table { width: 100%; min-width: 640px; border-collapse: collapse; margin-bottom: 12px; }
.line-items-table th {
  padding: 0 8px 8px 0; text-align: left; font-family: "JetBrains Mono", monospace; font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.line-items-table td { padding: 0 8px 8px 0; vertical-align: middle; }
.line-items-table th:first-child { width: 52%; }
.line-items-table input {
  width: 100%; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-strong);
  color: var(--fg); padding: 10px 12px; font-family: "DM Sans", sans-serif; font-size: 15px;
}

/* A document as both parties see it, and as it prints. */
.legal-doc, .invoice-doc {
  --brand-gradient: linear-gradient(90deg, var(--accent), #ff6b8a, #00c9a7);
  position: relative; z-index: 1; max-width: 880px; margin: 0 auto 22px;
  padding: clamp(24px, 5vw, 56px); border-radius: 16px;
  border: 1px solid var(--card-border); background: var(--card-strong); color: var(--fg);
}
.legal-doc__letterhead, .invoice-doc__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px;
  padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 2px solid var(--accent); border-image: var(--brand-gradient) 1;
}
.legal-doc__letterhead { align-items: flex-end; }
.legal-doc__from, .invoice-doc__from { display: flex; flex-direction: column; font-size: 13px; line-height: 1.5; color: var(--muted); }
.legal-doc__from strong, .invoice-doc__from strong { color: var(--fg); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600; }
.doc-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--fg); }
.doc-brand__mark { display: block; width: 68px; height: 40px; }
.doc-brand__word { font-size: 26px; line-height: 1; }
.legal-doc__meta, .invoice-doc__meta { display: grid; gap: 6px; font-size: 14px; }
.legal-doc__meta div, .invoice-doc__meta div { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.legal-doc__banner, .invoice-doc__banner {
  margin-bottom: 24px; padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--card-border)); color: var(--danger);
}
.invoice-doc__banner--paid { border-color: color-mix(in srgb, var(--success) 50%, var(--card-border)); color: var(--success); }
.legal-doc__body { font-size: 16px; line-height: 1.65; }
.legal-doc__body p, .legal-doc__body li { font-size: 16px; line-height: 1.65; }
.legal-doc__body h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.8em; }
.legal-doc__body h2 { font-size: 1.1rem; color: var(--fg); margin: 1.6em 0 0.6em; }
.legal-doc__body h3 { font-size: 1rem; margin: 1.2em 0 0.5em; }
.legal-doc__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.legal-doc__body th, .legal-doc__body td { padding: 8px 10px; border: 1px solid var(--card-border); text-align: left; vertical-align: top; }
.legal-doc__signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.signature-block__party { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; }
.signature-block__mark {
  min-height: 56px; margin: 14px 0 10px; padding: 0 4px 2px; border-bottom: 1px solid var(--fg);
  color: var(--accent); font-family: "Caveat", cursive; font-size: 34px; line-height: 1.6; overflow-wrap: anywhere;
}
.signature-block__details { display: grid; gap: 4px; font-size: 14px; }
.signature-block__details div { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: baseline; }
.signature-block__details dd { min-height: 1.4em; }
.legal-doc__audit {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--card-border);
  font-size: 13px; color: var(--muted); display: grid; gap: 8px;
}
.legal-doc__audit h2 { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--fg); }
.legal-doc__audit ul { padding-left: 1.2em; display: grid; gap: 4px; }
.legal-doc__audit code { font-family: "JetBrains Mono", monospace; font-size: 12px; overflow-wrap: anywhere; }

.invoice-doc__title { text-align: right; }
.invoice-doc__title h1 { font-family: "Inter", sans-serif; font-size: 28px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; color: var(--accent); }
.invoice-doc__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 32px; margin-bottom: 20px; font-size: 15px; }
.invoice-doc__parties h2 {
  margin-bottom: 4px; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.invoice-doc__rates { margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.invoice-doc__table-wrap { overflow-x: auto; }
.invoice-doc__lines { width: 100%; border-collapse: collapse; font-size: 15px; }
.invoice-doc__lines th, .invoice-doc__lines td { padding: 10px 8px; border-bottom: 1px solid var(--card-border); text-align: left; }
.invoice-doc__lines thead th {
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.invoice-doc__lines tfoot th { text-align: right; font-weight: 500; color: var(--muted); }
.invoice-doc__lines tfoot tr:last-child th, .invoice-doc__lines tfoot tr:last-child td { border-bottom: none; }
.invoice-doc__total th, .invoice-doc__total td { font-size: 17px; font-weight: 700; color: var(--fg) !important; }
.invoice-doc__memo { margin-top: 20px; font-size: 14px; color: var(--muted); }
.invoice-doc__thanks { margin-top: 28px; font-size: 15px; }

/* Pages a client opens from a private link. */
.document-body { padding-top: 0; }
.document-bar {
  max-width: 880px; margin: 0 auto; padding: 18px 16px;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.document-shell { padding: 0 16px 64px; }
.document-panel { max-width: 880px; margin: 0 auto 22px; padding: clamp(20px, 4vw, 40px); border-radius: 16px; border: 1px solid var(--card-border); background: var(--card); }
.document-note { max-width: 880px; margin: 0 auto; font-size: 15px; color: var(--muted); text-align: center; }
.signature-form h2 { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.signature-form__consent { align-items: flex-start; font-size: 15px; color: var(--fg); }
.signature-form__consent input { flex: none; margin-top: 3px; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-mobile { display: flex; }
  .section { padding: 72px 20px 44px; }
  .home-hero { min-height: auto; padding: 110px 24px 56px; }
  .home-logo img { width: 240px; height: 240px; }
  .home-logo { margin-bottom: -44px; }
  .story-layout { grid-template-columns: 1fr; gap: 32px; }
  .story-media { margin-top: 0; }
  .about-location { grid-template-columns: 1fr; gap: 18px; margin-top: 56px; padding-top: 36px; }
  .travel-header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .travel-quote {
    justify-self: stretch; max-width: none; margin-top: 0;
    padding-left: 18px; border-left: 3px solid var(--card-border);
    text-align: left;
  }
  .travel-quote blockquote { font-size: 15px; line-height: 1.45; }
  .travel-quote figcaption { font-size: 13px; }
  .travel-intro { font-size: 16px; }
  .travel-explorer,
  .travel-explorer:has(> .travel-globe:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .travel-globe { margin: 0; }
  .travel-panel { padding-top: 0; }
  .travel-card__header { gap: 12px; }
  .travel-card__emoji { width: 46px; height: 46px; font-size: 24px; }
  .travel-city { font-size: 20px; line-height: 1.25; }
  .travel-country { display: block; margin-left: 0; margin-top: 2px; font-size: 15px; }
  .travel-note { font-size: 15px; line-height: 1.5; margin-top: 12px; }
  .travel-photos { gap: 8px; margin-top: 14px; }
  .travel-photo figcaption { font-size: 12px; padding: 7px 9px; }
  .travel-index__years { columns: 1; }
  .travel-index__year { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .admin-travel-edit, .travel-photo-workspace { grid-template-columns: 1fr; }
  .travel-upload-form { grid-template-columns: 1fr; }
  .travel-photo-inspector { position: static; }
  .blog-card { grid-template-columns: 1fr; }
  .blog-card__arrow { display: none; }
  .post-header__bar { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 20px; }
  .post-back { align-self: flex-start; margin-inline-start: 0; }
  .post-reading,
  .active-reading-panel { grid-template-columns: 1fr; }
  .reading-workspace,
  .reading-form,
  .reading-voice-grid,
  .reading-settings-grid { grid-template-columns: 1fr; }
  .reading-generator__actions { justify-content: flex-start; margin-inline-start: 0; }
  .usb-c-hero { grid-template-columns: 1fr; }
  .usb-c-hero__rule { max-width: 360px; }
  .usb-c-photo--hero img { aspect-ratio: 4 / 3; }
  .usb-c-route ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usb-c-route li + li { border-left: 0; }
  .usb-c-route li:nth-child(even) { border-left: 1px solid var(--usb-c-rule); }
  .usb-c-route li:nth-child(n+3) { border-top: 1px solid var(--usb-c-rule); }
  .usb-c-step { grid-template-columns: 72px minmax(0, 1fr); gap: 28px; }
  .usb-c-step__number { font-size: clamp(3.25rem, 10vw, 5rem); }
  .usb-c-jobs > li { grid-template-columns: 1fr; gap: 20px; }
  .usb-c-path, .usb-c-specs { grid-template-columns: 1fr; }
  .usb-c-path li { min-height: 112px; }
  .usb-c-path li + li, .usb-c-specs > div + div { border-left: 0; border-top: 1px solid var(--usb-c-rule); }
  .usb-c-path li:not(:last-child)::after { top: auto; right: 50%; bottom: 0; translate: 50% 50%; rotate: 90deg; }
  .usb-c-marking-key > div { grid-template-columns: 1fr; gap: 18px; }
  .usb-c-tester { grid-template-columns: 1fr; }
  .usb-c-tester__media { max-width: 560px; }
  .weather-console { grid-template-columns: 1fr; margin-bottom: 56px; }
  .weather-station + .weather-station { border-left: 0; border-top: 1px solid var(--weather-rule); }
  .weather-status { grid-template-columns: auto minmax(0, 1fr); }
  .weather-status__source { grid-column: 2; }
  .weather-section { margin-bottom: 58px; }
  .weather-section__head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .weather-chart { grid-template-columns: 1fr; gap: 14px; }
  .weather-chart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
  .weather-chart figcaption span { margin-top: 0; text-align: right; }
  .aircraft-map-wrap { height: 58vh; min-height: 420px; }
  .dx-map-meta { display: none; }
  .dx-hop-toggle { inset: 14px auto auto 14px; }
  .dx-hop-toggle small { display: none; }
  .dx-banner-actions { width: 100%; justify-content: space-between; }
  .dx-log-heading { align-items: start; }
  .dx-contact { grid-template-columns: 32px 1fr auto; gap: 12px; padding-block: 18px; }
  .dx-contact-flag { text-align: end; }
  .dx-contact-details { grid-column: 2 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dx-contact-notes { grid-column: 2 / -1; }
  .radio-form-grid--three, .radio-form-grid--four { grid-template-columns: 1fr 1fr; }
  .admin-stat-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .style-guide-row,
  .style-guide-content-grid { grid-template-columns: 1fr; }
  .style-guide-media-card { max-width: none; }
  .admin-page-header, .admin-panel__head { align-items: flex-start; flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .site-footer__top { align-items: flex-start; }
  .footer-meta { flex-direction: column; gap: 10px; }
  .flash-stack { left: 16px; right: 16px; max-width: none; }
}

@media (max-width: 520px) {
  .usb-c-hero__intro h1 { font-size: clamp(2.75rem, 15vw, 4.2rem); }
  .usb-c-hero__accent { font-size: 0.7em; }
  .usb-c-route a { min-height: 118px; padding-inline: 16px; }
  .usb-c-step { grid-template-columns: 1fr; gap: 24px; }
  .usb-c-step__number { position: static; font-size: 3.4rem; }
  .usb-c-step__heading h2 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .usb-c-shape-rule { padding-left: 20px; }
  .usb-c-final-checks li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .usb-c-checkout { padding: 28px 22px; }
  .weather-station { padding: 24px 20px; }
  .weather-station__head { flex-direction: column; }
  .weather-station__temperature { font-size: clamp(2.75rem, 16vw, 4rem); }
  .weather-comparison-table { min-width: 620px; }
  .weather-chart figcaption { display: block; }
  .weather-chart figcaption span { margin-top: 6px; text-align: left; }
  .radio-form-grid--three, .radio-form-grid--four { grid-template-columns: 1fr; }
  .legal-doc__signatures { grid-template-columns: 1fr; }
  .invoice-doc__title { text-align: left; }
  .legal-doc, .invoice-doc { padding: 22px 16px; }
  .invoice-doc__lines { font-size: 14px; }
  .invoice-doc__lines th, .invoice-doc__lines td { padding: 9px 4px; }
  .invoice-doc__lines thead th { font-size: 10px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .usb-c-guide .section { transform: none; transition: none; }
  .usb-c-route a, .usb-c-tester__link svg, .usb-c-sources__list a { transition: none; }
  .hosting-btn { transition: none; }
  .aircraft-marker.is-updating, .aircraft-marker-plane { transition: none; }
  .admin-stat { opacity: 1; transform: none; animation: none; }
  .dx-map-home__pulse, .dx-ionosphere__hop, .dx-contact { animation: none; }
  .travel-card { animation: none; }
  .travel-photo__image img, .travel-chip { transition: none; }
  .weather-status[data-status] .weather-status__pulse,
  .weather-trends.is-visible .weather-chart__line { animation: none; }
}

/* ----- Print ------------------------------------------------------------ */
/* Contracts and invoices print as black-on-white pages that keep the logo and
   brand colours. DocumentPdf prints them with headless Chrome to make the
   downloaded PDF. */
@media print {
  :root, html[data-theme="light"], html[data-theme="dark"] {
    --bg: #ffffff; --fg: #111111; --muted: #4d4d4d;
    --card: transparent; --card-strong: transparent; --card-border: #c9c9c9;
    --accent-soft: #111111; --success: #0b6b4f; --danger: #a12a1f;
    color-scheme: light;
  }
  @page { margin: 0.7in 0.75in; }
  /* Browsers without page margin boxes skip this footer. */
  @page document {
    @bottom-left { content: "Faceted Thought, LLC · facetedthought.com"; font: 8pt "DM Sans", sans-serif; color: var(--muted); }
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt "DM Sans", sans-serif; color: var(--muted); }
  }
  body { background: var(--bg); padding: 0; font-size: 11pt; }
  .faceted-bg, .site-nav, .admin-tabs, .admin-subnav, .admin-live-visitors,
  .flash-stack, .footer-meta, .no-print { display: none !important; }
  .admin-shell, .document-shell { max-width: none; margin: 0; padding: 0; }
  .legal-doc, .invoice-doc {
    max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0;
    page: document; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .legal-doc__body h2, .legal-doc__body h3 { break-after: avoid; }
  .legal-doc__signatures, .signature-block, .legal-doc__audit, .invoice-doc__lines tr { break-inside: avoid; }
  .invoice-doc__table-wrap { overflow: visible; }
  .markdown-body a { color: inherit; text-decoration: none; }
}