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

:root {
  --bg: #fffdf3;
  --ink: #1f1b18;
  --muted: #b3b3b3;
  --accent: #6ea5c8;
  --line: rgba(180, 90, 110, 0.08);     /* warm pink-tinted neutral grid line */
  --line-soft: rgba(0, 0, 0, 0.015);
  --check-tint: rgba(0, 0, 0, 0.01);
  --line-pink: rgba(230, 75, 130, 0.14);
  --line-sky: rgba(140, 200, 235, 0.32);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --display: 'Boldonse', 'JetBrains Mono', monospace;

  --content-width: 840px;
  --col-gap: 0px;
}

/* Text selection — sky accent tint, site-wide */
::selection {
  background: rgba(110, 165, 200, 0.45);
  color: var(--ink);
}
::-moz-selection {
  background: rgba(110, 165, 200, 0.45);
  color: var(--ink);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 78px 24px 72px;   /* extra 6px top so text baselines land on grid lines */
  position: relative;
}

/* ---------- line-art check pattern with subtle pink + sky ---------- */
.grid-bg {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--content-width);
  height: 100vh;
  pointer-events: none;
  z-index: 0;

  background-image:
    /* 2. PINK side verticals — 24px to the left of each inner sky pillar. 3 different dusty tones for tartan check pattern. */
    linear-gradient(to right,
      /* warm dusty rose */
      transparent calc(27.25% - 25px), rgba(245, 200, 200, 0.35) calc(27.25% - 25px), rgba(245, 200, 200, 0.35) calc(27.25% - 24px), transparent calc(27.25% - 24px),
      /* bright yellow */
      transparent calc(51.5% - 25px),  rgba(245, 200, 200, 0.35) calc(51.5% - 25px),  rgba(245, 200, 200, 0.35) calc(51.5% - 24px),  transparent calc(51.5% - 24px),
      /* bright yellow */
      transparent calc(75.75% - 25px), rgba(245, 200, 200, 0.35) calc(75.75% - 25px), rgba(245, 200, 200, 0.35) calc(75.75% - 24px), transparent calc(75.75% - 24px)),
    /* 4. SKY verticals at 3 / 27.25 / 51.5 / 75.75 / 100 — 4 equal columns of 24.25% each */
    linear-gradient(to right,
      transparent calc(3% - 1px),     var(--line-sky) calc(3% - 1px),     var(--line-sky) 3%,     transparent 3%,
      transparent calc(27.25% - 1px), var(--line-sky) calc(27.25% - 1px), var(--line-sky) 27.25%, transparent 27.25%,
      transparent calc(51.5% - 1px),  var(--line-sky) calc(51.5% - 1px),  var(--line-sky) 51.5%,  transparent 51.5%,
      transparent calc(75.75% - 1px), var(--line-sky) calc(75.75% - 1px), var(--line-sky) 75.75%, transparent 75.75%,
      transparent calc(100% - 1px),   var(--line-sky) calc(100% - 1px),   var(--line-sky) 100%,   transparent 100%),
    /* 4b. PINK verticals: each sits 96px (≈11.43%) to the left of a sky line for square check pattern */
    linear-gradient(to right,
      transparent 0, transparent 100%),
    /* 5. horizontal lines, every 96px — soft baby pink */
    linear-gradient(to bottom, rgba(245, 200, 200, 0.20) 1px, transparent 1px),
    /* 6. horizontal LEMON YELLOW accent — 288px repeat */
    linear-gradient(to bottom, rgba(255, 250, 0, 0.20) 1px, transparent 1px),
    /* 7. horizontal accent slot (empty) */
    linear-gradient(to bottom, transparent 1px, transparent 1px);

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    calc(100% - 3%) 96px,
    calc(100% - 3%) 288px,
    calc(100% - 3%) 576px;
  background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-y,
    repeat-y,
    repeat-y;

  border-left: none;
  border-right: none;
}

/* ---------- container with 4 equal columns ---------- */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-width);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--col-gap);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 24px;   /* baseline: every line of text sits on a 24px grid line */
}

/* ---------- column number markers (1, 2, 3, 4) ---------- */
.column-numbers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 64px;
  padding-bottom: 8px;
}

.column-numbers span {
  padding: 8px 12px;
}

/* ---------- intro: name + description in one section ---------- */
.intro {
  grid-column: 1 / -1;
  padding-left: 24px;
  margin-bottom: 8px;
}

.intro h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 24px;
  margin: 0 0 24px;
}

.intro .tagline {
  font-family: var(--mono);
  font-size: 13px;
  color: #6b5f55;
  font-weight: 400;
  line-height: 24px;
  max-width: 60ch;
  margin: 0;
}

.intro .tagline a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.intro .tagline a:hover { color: var(--accent); }

/* ---------- horizontal divider: pink + sky double line, aligned to sky vertical at 3% ---------- */
hr {
  grid-column: 1 / -1;
  border: none;
  height: 5px;
  margin: 48px 0 24px;   /* more space above + below */
  margin-left: 3%;
  width: 97%;
  background-image:
    linear-gradient(to bottom,
      rgba(230, 75, 130, 0.06) 0,
      rgba(230, 75, 130, 0.06) 1px,
      transparent 1px,
      transparent 4px,
      var(--line-sky) 4px,
      var(--line-sky) 5px,
      transparent 5px);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* ---------- section block: occupies all 4 columns ---------- */
.block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.block-label {
  grid-column: 1 / 2;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  line-height: 24px;
  padding: 0 0 0 24px;
  align-self: start;   /* pin to top of section so it aligns with first item */
}

/* sub-label: a second .block-label that aligns to a specific item row.
   Uses absolute positioning relative to .block. */
.block { position: relative; }

.block-label.sub-label {
  position: absolute;
  top: 0;
  left: 24px;   /* match other text padding so EARLIER aligns with sky line */
  /* aligned to 5th item (Zespri): 4 items × (line-height 24px + row-gap 6px) = 120px */
  margin-top: 120px;
  font-size: 11px;
  font-weight: 400;
  padding-left: 0;   /* override the .block-label padding since we use absolute left */
}

/* "Earlier" company names use normal weight + smaller size, black */
.earlier-item {
  font-weight: 400 !important;
  font-size: 12px !important;
}

/* ---------- items: title in col 2, desc in col 3-4 ---------- */
.items {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  list-style: none;
  row-gap: 6px;
}

.items li {
  display: contents;
}

.items a {
  display: contents;
  text-decoration: none;
  color: var(--ink);
}

/* item-title sits in container column 2 (starts at 25% = 210px). Sky 2 is at 27.25% = 228.9px,
   so 18.9px into the column. Match column 1 visual: text starts ~1.2px before sky → padding 17.7px. */
.item-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 24px;
  padding-left: 17.7px;
  align-self: baseline;
  transition: color 0.2s ease;
}

/* item-desc sits in container column 3 (starts at 50% = 420px). Sky 3 is at 51.5% = 432.6px,
   so 12.6px into the column. Padding 11.4px to match the same offset. */
.item-desc {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 24px;
  color: #5a4f47;
  padding-left: 11.4px;
  align-self: baseline;
  transition: color 0.2s ease;
}

.items a:hover .item-title,
.items a:hover .item-desc { color: var(--accent); }

/* ---------- contact block ----------
   contact-content sits in container column 2. Same offset as item-title: 17.7px. */
.contact-content {
  grid-column: 2 / -1;
  padding-left: 17.7px;
}

.contact-line {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 24px;
  color: #5a4f47;
  margin-bottom: 24px;
}

.contact-links {
  list-style: none;
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 24px;
}

.contact-links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.contact-links a:hover { color: var(--accent); }

/* ---------- writing list: serif essay titles with arrow + dividers ---------- */
.writing-list {
  grid-column: 1 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
}

.writing-list li {
  border-top: 1px solid rgba(31, 27, 24, 0.18);
}

.writing-list li:last-child {
  border-bottom: 1px solid rgba(31, 27, 24, 0.18);
}

.writing-list a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s ease;
}

.writing-list a:hover { color: var(--accent); }

.writing-title {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
  flex: 1;
}

.writing-arrow {
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
  padding-top: 6px;
  transition: transform 0.2s ease;
}

.writing-list a:hover .writing-arrow {
  transform: translate(2px, -2px);
}

/* ---------- mode toggle: minimal radio-style (Design / Structure) ---------- */
.mode-toggle {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mode-btn {
  border: none;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: rgba(31, 27, 24, 0.35);
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease;
}

/* bracketed status indicator: [○] inactive, [●] active.
   brackets are real text; dot is a CSS shape so it's perfectly centered */
.mode-indicator {
  font-family: var(--mono);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.mode-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
  transition: background 0.15s ease;
  /* nudge to align optical center with bracket characters */
  position: relative;
  top: -1px;
}

.mode-btn:hover { color: rgba(31, 27, 24, 0.7); }

.mode-btn.is-active { color: var(--ink); }
.mode-btn.is-active .mode-dot {
  background: currentColor;
}

/* ---------- structure overlay (only visible in structure mode) ---------- */
.structure-overlay {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(31, 27, 24, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.structure-mode .structure-overlay { display: block; }

/* In structure mode, keep the default grid exactly the same and just emphasize
   the 4 sky verticals (column dividers) so the structure reads clearly. */
body.structure-mode .grid-bg {
  background-image:
    /* 2. PINK side verticals — 24px to the left of each inner sky pillar (dusty tones) */
    linear-gradient(to right,
      transparent calc(27.25% - 25px), rgba(245, 200, 200, 0.40) calc(27.25% - 25px), rgba(245, 200, 200, 0.40) calc(27.25% - 24px), transparent calc(27.25% - 24px),
      transparent calc(51.5% - 25px),  rgba(245, 200, 200, 0.40) calc(51.5% - 25px),  rgba(245, 200, 200, 0.40) calc(51.5% - 24px),  transparent calc(51.5% - 24px),
      transparent calc(75.75% - 25px), rgba(245, 200, 200, 0.40) calc(75.75% - 25px), rgba(245, 200, 200, 0.40) calc(75.75% - 24px), transparent calc(75.75% - 24px)),
    /* 4. SKY verticals at 3 / 27.25 / 51.5 / 75.75 / 100 — STRONGER, 4 equal columns */
    linear-gradient(to right,
      transparent calc(3% - 1px),     rgba(110, 165, 200, 0.7) calc(3% - 1px),     rgba(110, 165, 200, 0.7) 3%,     transparent 3%,
      transparent calc(27.25% - 1px), rgba(110, 165, 200, 0.7) calc(27.25% - 1px), rgba(110, 165, 200, 0.7) 27.25%, transparent 27.25%,
      transparent calc(51.5% - 1px),  rgba(110, 165, 200, 0.7) calc(51.5% - 1px),  rgba(110, 165, 200, 0.7) 51.5%,  transparent 51.5%,
      transparent calc(75.75% - 1px), rgba(110, 165, 200, 0.7) calc(75.75% - 1px), rgba(110, 165, 200, 0.7) 75.75%, transparent 75.75%,
      transparent calc(100% - 1px),   rgba(110, 165, 200, 0.7) calc(100% - 1px),   rgba(110, 165, 200, 0.7) 100%,   transparent 100%),
    /* 4b. PINK verticals — 96px to the left of each sky pillar */
    linear-gradient(to right,
      transparent 0, transparent 100%),
    /* 5. horizontal 96px ROW — soft baby pink (kept as default) */
    linear-gradient(to bottom, rgba(245, 200, 200, 0.20) 1px, transparent 1px),
    /* 6. horizontal SKY 288px section (kept as default) */
    linear-gradient(to bottom, rgba(110, 165, 200, 0.14) 1px, transparent 1px),
    /* 7. horizontal LEMON YELLOW 576px (was pink) */
    linear-gradient(to bottom, rgba(255, 250, 0, 0.20) 1px, transparent 1px);

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    calc(100% - 3%) 96px,
    calc(100% - 3%) 288px,
    calc(100% - 3%) 576px;
  background-position: 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-y,
    repeat-y,
    repeat-y;
  border-right: none;
}

.meta {
  position: absolute;
  white-space: nowrap;
  line-height: 12px;
  /* tiny page-color background so labels stay readable when they overlap a grid line */
  background: var(--bg);
  padding: 1px 4px;
  font-weight: 500;
}

/* system header — moved down so it doesn't overlap with 01 column marker */
.meta-system {
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.12em;
  color: rgba(31, 27, 24, 0.6);
}

/* type hierarchy — moved BELOW column markers */
.meta-type {
  color: rgba(31, 27, 24, 0.55);
  letter-spacing: 0.12em;
  left: calc(50vw - 420px + 840px * 0.03 + 4px);
}
.meta-type-h1 {
  top: 44px;
}
.meta-type-body {
  top: 58px;
}

/* column markers — moved UP, same row as system header */
.meta-col {
  top: 14px;
  letter-spacing: 0.12em;
  color: rgba(110, 165, 200, 1);
}
/* sky verticals at 3 / 27.25 / 51.5 / 75.75 / 100% of the 840px content area */
.meta-col-1 { left: calc(50vw - 420px + 840px * 0.03 + 4px); }
.meta-col-2 { left: calc(50vw - 420px + 840px * 0.2725 + 4px); }
.meta-col-3 { left: calc(50vw - 420px + 840px * 0.515 + 4px); }
.meta-col-4 { left: calc(50vw - 420px + 840px * 0.7575 + 4px); }

/* margin labels just outside the sky lines (3% / 97%) */
.meta-margin-l {
  top: 56px;
  /* aligned inside sky line at 3%, same as 01 column marker */
  left: calc(50vw - 420px + 840px * 0.03 + 4px);
  color: rgba(110, 165, 200, 0.9);
}
.meta-margin-r {
  top: 56px;
  /* right-aligned to same edge as 24 BASE label */
  right: calc(50vw - 420px + 4px);
  left: auto;
  color: rgba(110, 165, 200, 0.9);
}

/* baseline rhythm — placed on top row, right-aligned with the right margin label
   (right of grid box, inside the right edge) */
.meta-rhythm {
  top: 44px;
  color: rgba(31, 27, 24, 0.55);
  letter-spacing: 0.12em;
}
.meta-rhythm-1 {
  /* mirror the right-margin "3%" label so both align to the same right edge */
  right: calc(50vw - 420px + 4px);
  left: auto;
}

/* color tokens row at the bottom (above the toggle button) */
.meta-tokens {
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  letter-spacing: 0.08em;
  color: rgba(31, 27, 24, 0.5);
}
.meta-tokens span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta-tokens .sw {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ---------- inspect mode (dark, markdown-style code view) ---------- */
.inspect-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #1a1a1a;
  color: #d0d0d0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 24px;
  overflow-y: auto;
  padding: 0;
}

body.inspect-mode .inspect-view { display: block; }
body.inspect-mode .grid-bg { display: none; }
body.inspect-mode .container { display: none; }
body.inspect-mode .structure-overlay { display: none; }

/* update toggle styles for dark inspect mode background */
body.inspect-mode .mode-toggle {
  color: #d0d0d0;
}
body.inspect-mode .mode-btn {
  color: rgba(208, 208, 208, 0.4);
}
body.inspect-mode .mode-btn:hover { color: rgba(208, 208, 208, 0.8); }
body.inspect-mode .mode-btn.is-active { color: #f0f0f0; }
body.inspect-mode .mode-btn.is-active::before {
  background: #f0f0f0;
  border-color: #f0f0f0;
  box-shadow: inset 0 0 0 2px #1a1a1a;
}

.inspect-header {
  display: flex;
  justify-content: space-between;
  padding: 24px 32px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(208, 208, 208, 0.5);
}

.inspect-code {
  margin: 0;
  padding: 0 32px 120px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 24px;
  color: #d0d0d0;
  white-space: pre;
  overflow-x: auto;
}

.inspect-code code { display: block; }

/* line numbers */
.inspect-code .ln {
  display: inline-block;
  width: 40px;
  margin-right: 24px;
  color: rgba(208, 208, 208, 0.3);
  text-align: right;
  user-select: none;
}

/* markdown syntax tints */
.md-h1 { color: #f0f0f0; }                       /* white for h1 */
.md-h2 { color: #f0f0f0; }                       /* white for h2 */
.md-h3 { color: rgba(240, 240, 240, 0.85); }     /* near-white for h3 */
.md-link { color: #6ea5c8; }                     /* sky for links */
.md-strong { color: #f0f0f0; }                   /* white for bold */
.md-hr { color: rgba(208, 208, 208, 0.4); }      /* dim for hr */

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  body { padding: 40px 24px 80px; }

  /* keep grid-bg visible on mobile, but shrink to viewport width
     and hide the inner column verticals (25/50/75% grey + 50% center)
     since the layout collapses to 1 column. keep symmetric left/right edges,
     sky, pink — left edge at 3% sky, right edge mirrored at 97%. */
  .grid-bg {
    width: 100%;
    left: 0;
    transform: none;
    border-right: none;
    background-image:
      /* 1. SKY verticals — keep 3/28/53/78 plus mirror at 97 for symmetric right edge */
      linear-gradient(to right,
        transparent calc(3% - 1px),  var(--line-sky) calc(3% - 1px),  var(--line-sky) 3%,  transparent 3%,
        transparent calc(28% - 1px), var(--line-sky) calc(28% - 1px), var(--line-sky) 28%, transparent 28%,
        transparent calc(53% - 1px), var(--line-sky) calc(53% - 1px), var(--line-sky) 53%, transparent 53%,
        transparent calc(78% - 1px), var(--line-sky) calc(78% - 1px), var(--line-sky) 78%, transparent 78%,
        transparent calc(97% - 1px), var(--line-sky) calc(97% - 1px), var(--line-sky) 97%, transparent 97%),
      /* 1b. PINK verticals — softer on mobile to reduce check pattern density */
      linear-gradient(to right,
        transparent 0, transparent 100%),
      /* 5. horizontal lines — soft baby pink, softer on mobile */
      linear-gradient(to bottom, rgba(245, 200, 200, 0.14) 1px, transparent 1px),
      /* 6. horizontal sky accent — softer */
      linear-gradient(to bottom, rgba(110, 165, 200, 0.08) 1px, transparent 1px),
      /* 7. horizontal LEMON YELLOW accent — was pink */
      linear-gradient(to bottom, rgba(255, 250, 0, 0.20) 1px, transparent 1px);
    background-size:
      100% 100%,
      100% 100%,
      94% 96px,
      94% 288px,
      94% 576px;
    background-position: 0 0, 0 0, 50% 0, 50% 0, 50% 0;
    background-repeat:
      no-repeat,
      no-repeat,
      repeat-y,
      repeat-y,
      repeat-y;
  }

  .container { grid-template-columns: 1fr; }
  .column-numbers { display: none; }
  .intro,
  .block,
  .items,
  .contact-content { grid-column: 1 / -1; padding: 0; }
  .block { grid-template-columns: 1fr; gap: 16px; }
  .items { grid-template-columns: 1fr; row-gap: 4px; }
  .item-title, .item-desc, .block-label { padding: 0; }
  .items li { display: list-item; margin-bottom: 20px; }
  .items a { display: block; }
  .item-title { display: block; font-size: 15px; }
  .item-desc { display: block; margin-top: 4px; font-size: 15px; }
  .intro h1 { font-size: 28px; line-height: 32px; margin-bottom: 16px; }
  .intro .tagline { font-size: 16px; line-height: 24px; }
  .block-label { font-size: 11px; margin-bottom: 12px; }
  .earlier-item { font-size: 14px !important; }

  /* Earlier sub-label: in mobile, drop the absolute positioning so it flows
     naturally between Shades and Zespri instead of overlapping content */
  .block-label.sub-label {
    position: static;
    margin-top: 16px;
    margin-bottom: 8px;
  }

  /* hr: span from sky line at 3vw to sky line at 97vw (symmetric)
     (offset for body padding: 24px each side) */
  hr {
    margin-top: 32px;
    margin-bottom: 32px;
    margin-left: calc(3vw - 24px);
    width: 94vw;
  }

  /* contact links wrap on smaller screens */
  .contact-links { flex-wrap: wrap; gap: 16px 24px; font-size: 15px; }
  .contact-line { font-size: 15px; }

  /* structure overlay on mobile — show 01-04, 24 BASE, color tokens with viewport-based positioning */
  .meta-system { font-size: 9px; max-width: 90vw; white-space: normal; text-align: center; }

  /* hide type labels (too long for mobile width) */
  .meta-type { display: none; }

  /* reposition column markers to mobile sky verticals (3/28/53/78%) */
  .meta-col {
    font-size: 9px;
    top: 14px;
  }
  .meta-col-1 { left: calc(3vw + 4px); }
  .meta-col-2 { left: calc(28vw + 4px); }
  .meta-col-3 { left: calc(53vw + 4px); }
  .meta-col-4 { left: calc(78vw + 4px); }

  /* 24 BASE near right sky line (97%) */
  .meta-rhythm {
    font-size: 9px;
    top: 14px;
  }
  .meta-rhythm-1 {
    right: calc(3vw + 4px);
    left: auto;
  }

  /* color tokens — smaller and tighter for mobile */
  .meta-tokens {
    font-size: 8px;
    gap: 8px;
    bottom: 88px;
  }
  .meta-tokens .sw {
    width: 6px;
    height: 6px;
  }

  /* inspect mode (dark code view) — tighter padding, smaller text, and word-wrap on mobile
     so users don't need horizontal scroll. Line numbers stay aligned to first line of each
     wrapped block via flex/grid simulation. */
  .inspect-header {
    padding: 16px 16px;
    font-size: 10px;
  }
  .inspect-code {
    padding: 0 16px 120px;
    font-size: 12px;
    line-height: 22px;
    white-space: pre-wrap;       /* allow long lines to wrap on mobile */
    word-break: break-word;      /* break long unbroken strings (URLs, etc.) */
    overflow-x: hidden;
  }
  .inspect-code .ln {
    width: 24px;
    margin-right: 12px;
    font-size: 11px;
    vertical-align: top;         /* keep line number at top of wrapped block */
  }
}