/* Kristian Buriasco: prototype styles. Self-hosted IBM Plex Sans + Mono (OFL, assets/fonts/OFL.txt). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@property --r { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --bg: #f7f5f0; --ink: #171717; --mute: #66625a; --line: #dcd7cc; --grid: #e7e2d7; --soft: #efebe2;
  --accent: #0b7a4b; --accent-ink: #fff;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans); /* serif retired; kept so older rules resolve to Plex Sans */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1240px; --gut: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101311; --ink: #e9e6df; --mute: #9b978e; --line: #2c312d; --grid: #1c211e; --soft: #181c19;
    --accent: #3fd99a; --accent-ink: #08130d; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101311; --ink: #e9e6df; --mute: #9b978e; --line: #2c312d; --grid: #1c211e; --soft: #181c19;
  --accent: #3fd99a; --accent-ink: #08130d; color-scheme: dark;
}
@media (min-width: 720px) { :root { --gut: 32px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gut); top: 8px; background: var(--bg); padding: 6px 10px; z-index: 9; }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding-top: 18px; padding-bottom: 14px; }
.mark { font: 21px/1.2 var(--serif); text-decoration: none; letter-spacing: -.01em; }
.mark:hover { color: inherit; }
.nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--mute); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.nav .mail { color: var(--ink); }
.theme { font: inherit; font-size: 13px; color: var(--mute); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.theme:hover { color: var(--ink); border-color: var(--mute); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -.02em; margin: 0; }
.kicker { font-size: 14px; color: var(--mute); margin: 0 0 10px; }
.kicker a { color: var(--mute); }
.lede { font: 22px/1.45 var(--serif); max-width: 34ch; margin: 18px 0 0; }
.prose { max-width: 64ch; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { font-size: 30px; line-height: 1.15; margin: 2.2em 0 .5em; }
.prose h3 { font-size: 21px; margin: 1.6em 0 .3em; }
.muted { color: var(--mute); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
code { font: 14px var(--mono); background: var(--soft); padding: 1px 5px; border-radius: 3px; }
pre { font: 14px/1.5 var(--mono); background: var(--soft); padding: 12px 14px; overflow-x: auto; border-radius: 4px; }
pre code { background: none; padding: 0; }
.tbc { color: var(--mute); font-style: italic; }

section { padding: 56px 0; }
section + section { border-top: 1px solid var(--line); }
.sec-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 28px; }
.sec-h h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.sec-h p { margin: 0; color: var(--mute); font-size: 15px; max-width: 46ch; }

/* ---------- home hero: the map ---------- */
.hero { padding: 32px 0 40px; }
.hero-grid { display: grid; gap: 36px; }
.name { font-size: clamp(52px, 15vw, 112px); line-height: .92; letter-spacing: -.03em; }
.hero .lede { font-size: clamp(19px, 2vw, 23px); margin-top: 20px; max-width: 30ch; }
.hero .contact-row { margin-top: 28px; }
@media (min-width: 1000px) {
  .hero { padding: 72px 0 64px; }
  .hero-grid { grid-template-columns: minmax(340px, 5fr) 8fr; gap: 72px; align-items: center; }
  .hero-text { position: relative; z-index: 1; }
  .name { font-size: clamp(72px, 7.2vw, 112px); }
  .hero .lede { margin-top: 28px; }
  .hero .contact-row { margin-top: 40px; }
}

.map { margin: 0; }
.route { width: 100%; height: auto; display: block; overflow: visible; }
.plot { animation: draw 3.4s .25s cubic-bezier(.45, 0, .3, 1) both; --dt: 1; }
@keyframes draw { from { --r: 0; } to { --r: 1; } }
.grat { fill: none; stroke: var(--grid); stroke-width: .8; }
.coast { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.border { fill: none; stroke: var(--mute); stroke-width: .55; stroke-dasharray: 3 2.5; opacity: .8; }
.deg { font: 11px var(--sans); fill: var(--mute); text-anchor: middle; }
.seg { --k: clamp(0, (var(--r) - var(--a0)) / (var(--a1) - var(--a0)), 1);
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--k)); }
.pin { --on: clamp(0, (var(--r) - var(--at)) * 40, 1); opacity: var(--on); }
.pin .pad { fill: var(--bg); stroke: var(--accent); stroke-width: 2.6; transform-box: fill-box; transform-origin: center; transform: scale(calc(.4 + var(--on) * .6)); }
.pin .via { fill: var(--accent); }
.pin .halo { fill: transparent; }
.pin text, .det text { paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.pin .nm { font: 19px var(--serif); fill: var(--ink); }
.pin .no { font: 600 13px var(--sans); fill: var(--accent); }
.pin .ln { font: 12.5px var(--sans); fill: var(--mute); }
.pin.sm .nm { font-size: 15px; }
.pin.sm .ln, .pin.sm .no { font-size: 10.5px; }
.pin .num { display: none; font: 600 30px var(--sans); fill: var(--accent); }
.route a:hover .pad, .route a:focus-visible .pad { stroke-width: 4; }
.route a:hover .nm, .route a:focus-visible .nm { text-decoration: underline; }
.route a:focus { outline: none; }
.route a:focus-visible .halo { stroke: var(--accent); stroke-width: 1.5; }
.det { opacity: var(--dt); }
.det .callout { fill: none; stroke: var(--ink); stroke-width: 1; }
.det .leader { fill: none; stroke: var(--mute); stroke-width: .8; }
.det .lens { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.det .dot { fill: var(--accent); }
.det .cap { font: italic 13px var(--serif); fill: var(--mute); }
.det .dcoast { fill: none; stroke: var(--ink); stroke-width: 1; }
.det .dborder { fill: none; stroke: var(--mute); stroke-width: .8; stroke-dasharray: 4 3; }
.det .dgrat { fill: none; stroke: var(--grid); stroke-width: .8; }

/* latitude strip */
.lat { margin: 20px 0 0; }
.lat svg { width: 100%; height: auto; display: block; overflow: visible; }
.lat figcaption { font-size: 14px; color: var(--mute); margin-top: 14px; max-width: 70ch; }
.sig .ax { stroke: var(--ink); stroke-width: 1; }
.sig .gl { stroke: var(--line); stroke-width: 1; }
.sig .tm { fill: var(--mute); font: 11px var(--sans); }
.sig .tx { fill: var(--ink); font: 13px var(--serif); }
.sig .td { fill: var(--mute); font: 11px var(--sans); }
.sig .tn { fill: var(--accent); font: 600 11px var(--sans); }
.sig .sq { fill: var(--accent); }

@media (max-width: 719px) {
  .pin .lbl, .det .cap { display: none; }
  .pin .num { display: inline; }
  .pin .pad { stroke-width: 4; }
  .seg { stroke-width: 4; }
  .deg { font-size: 22px; }
  .sig .tx, .sig .tm { display: none; }
  .sig .td, .sig .tn { font-size: 22px; }
  .sig .seg { stroke-width: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .plot { animation: none; --r: 1; }
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* numbered stops list (under the map; the map's text version on phones) */
.stops { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--ink); }
.stops li { counter-increment: s; display: grid; grid-template-columns: 2.2em 1fr; gap: 0 12px; padding: 16px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
.stops li::before { content: counter(s); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 3px; }
.stops h3 { font-size: 22px; line-height: 1.2; }
.stops h3 a { text-decoration: none; }
.stops .co { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; margin-left: .4em; font-family: var(--sans); letter-spacing: 0; }
.stops p { margin: 4px 0 0; font-size: 16px; }
@media (min-width: 900px) {
  .stops { columns: 2; column-gap: 48px; border-top: 0; }
  .stops li { break-inside: avoid; border-top: 1px solid var(--line); border-bottom: 0; }
}

/* ---------- editorial features (home, creations) ---------- */
.feature { display: grid; gap: 20px 48px; padding: 36px 0; border-top: 1px solid var(--line); scroll-margin-top: 12px; }
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature h3 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; }
.feature h3 a { text-decoration: none; }
.feature .meta { font-size: 14px; color: var(--mute); margin: 8px 0 14px; }
.feature p { margin: 0 0 14px; max-width: 58ch; }
.feature .more { font-weight: 600; text-decoration: none; color: var(--accent); }
.feature .more:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 5fr 7fr; align-items: start; }
  .feature.flip > :first-child { order: 2; }
}
.facts { list-style: none; margin: 16px 0 18px; padding: 0; font-size: 15px; border-top: 1px solid var(--line); max-width: 58ch; }
.facts li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.links-inline { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }

figure { margin: 0; }
figure.shot img { border-radius: 6px; background: var(--soft); }
figure.shot.framed img { border: 1px solid var(--line); }
figcaption { font-size: 14px; color: var(--mute); margin-top: 10px; line-height: 1.5; }
.pending { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 16px; background: var(--soft); border: 1px dashed var(--line); border-radius: 6px; color: var(--mute); font-size: 15px; }
.pending.wide { aspect-ratio: 16 / 9; }

.pull { font: italic clamp(24px, 3vw, 32px)/1.3 var(--serif); margin: 0 0 16px; max-width: 26ch; }

/* ---------- page heads ---------- */
.page-head { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(44px, 9vw, 88px); line-height: .95; letter-spacing: -.03em; }
.page-head .lede { max-width: 40ch; }

/* ---------- events log ---------- */
.log { list-style: none; margin: 0; padding: 0; }
.log > li { display: grid; grid-template-columns: 1fr; gap: 2px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.log .when { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 6px; }
.log h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.15; }
.log .where { font-size: 15px; color: var(--mute); margin: 4px 0 8px; }
.log p { margin: 0 0 8px; max-width: 62ch; }
.log .go { font-weight: 600; color: var(--accent); text-decoration: none; }
.log .go:hover { text-decoration: underline; }
.log > li:target { background: linear-gradient(var(--soft), var(--soft)) no-repeat; box-shadow: -12px 0 0 var(--soft), 12px 0 0 var(--soft); }
@media (min-width: 760px) { .log > li { grid-template-columns: 9.5em 1fr; } }

/* ---------- story ---------- */
.story { display: grid; gap: 40px 64px; padding-top: 48px; padding-bottom: 48px; }
.story .prose p:first-child::first-letter { font-family: var(--serif); float: left; font-size: 3.6em; line-height: .82; padding: .06em .08em 0 0; color: var(--accent); }
.story .prose { font: 20px/1.6 var(--serif); }
.side dl { margin: 0 0 28px; font-size: 15px; border-top: 1px solid var(--line); }
.side dl div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.side dt { color: var(--mute); }
.side dd { margin: 0; }
.locator svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.locator .lp { fill: var(--bg); stroke: var(--accent); stroke-width: 2.6; }
.locator .lv { fill: var(--accent); }
.locator text { font: 11px var(--sans); fill: var(--mute); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.locator .here { font: 15px var(--serif); fill: var(--ink); }
@media (min-width: 900px) { .story { grid-template-columns: minmax(0, 7fr) minmax(260px, 4fr); } .side { position: sticky; top: 24px; align-self: start; } }
.photos { display: grid; gap: 16px; grid-template-columns: 1fr; padding-bottom: 56px; }
@media (min-width: 720px) { .photos { grid-template-columns: 3fr 2fr; } }

/* ---------- case study ---------- */
.cs-head { display: grid; gap: 20px; grid-template-columns: 72px 1fr; align-items: start; }
.cs-head img { width: 72px; height: 72px; }
@media (min-width: 720px) { .cs-head { grid-template-columns: 112px 1fr; gap: 32px; } .cs-head img { width: 112px; height: 112px; } }
.numbers { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.numbers li { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.numbers b { display: block; font: normal clamp(32px, 4.4vw, 52px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numbers span { font-size: 14px; color: var(--mute); display: block; margin-top: 6px; max-width: 24ch; }
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, 1fr); } .numbers li + li { padding-left: 16px; border-left: 1px solid var(--line); } }
.split { display: grid; gap: 32px 56px; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.wide-shot { margin: 8px 0 0; }
table.data { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; font-size: 14px; color: var(--mute); padding-bottom: 8px; caption-side: top; }
table.data th, table.data td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data th:first-child, table.data td:first-child { text-align: left; padding-left: 0; }
table.data thead th { font-weight: normal; color: var(--mute); border-bottom: 1px solid var(--ink); }
table.data tfoot td { border-bottom: 0; font-weight: 600; }
table.data tfoot td:last-child { color: var(--accent); }
.table-scroll { overflow-x: auto; }
.chain { list-style: none; margin: 0 0 1em; padding: 0; border-left: 2px solid var(--accent); }
.chain li { padding: 6px 0 6px 16px; }
.chain li span { color: var(--mute); font-size: 15px; display: block; }

/* ---------- about ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); max-width: 640px; }
.contact-list li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list span { color: var(--mute); font-size: 15px; }
.contact-list a { overflow-wrap: anywhere; }
.cv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cv li { display: grid; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.cv .when { color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .cv li { grid-template-columns: 9em 1fr; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 15px; color: var(--mute); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; }
.site-foot a { color: var(--ink); }

/* grid children may shrink below their content (pre, tables) instead of widening the page */
.split > *, .feature > *, .story > *, .hero-grid > *, .log > li > * { min-width: 0; }
@media (max-width: 719px) {
  .sig .td { display: none; }
  .sig .tn { font-size: 30px; }
}

/* photo rows inside the events log */
.photo-row { display: grid; gap: 8px; margin: 14px 0 12px; grid-template-columns: repeat(2, 1fr); }
.photo-row img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: var(--soft); }
.photo-row.wind img:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
@media (min-width: 760px) {
  .photo-row.four { grid-template-columns: repeat(4, 1fr); }
  .photo-row.wind { grid-template-columns: 2fr 1fr 1fr; }
  .photo-row.wind img:first-child { grid-column: auto; aspect-ratio: auto; }
}
.about-photo { float: right; width: min(42%, 220px); margin: 4px 0 12px 20px; }
.log .pending { max-width: 420px; margin: 12px 0; }

/* ================= v2 additions ================= */
:root { --paper: #f4f1ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #131714; } }
:root[data-theme="dark"] { --paper: #131714; }


/* contact row */
.contact-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; }
.contact-row a { font-weight: 500; }
.mail-btn { display: inline-flex; align-items: baseline; gap: 8px; background: var(--accent); color: var(--accent-ink); text-decoration: none; padding: 7px 14px 8px; border-radius: 4px; overflow-wrap: anywhere; }
.mail-btn:hover { color: var(--accent-ink); filter: brightness(1.12); }
.mail-btn .lbl { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.id-row { display: flex; gap: 16px; align-items: center; margin-top: 22px; }
.id-row .contact-row { flex: 1; }

/* portrait slot: empty frame until a photo is chosen */
.portrait { margin: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--soft); aspect-ratio: 3 / 4; }
figure.portrait { border: 0; background: none; aspect-ratio: auto; }
.portrait img { width: 100%; border-radius: 4px; }
.portrait.sm { width: 76px; flex: none; }
.portrait.lg { width: min(100%, 260px); }

/* megaphone pull-quote */
.mega { margin: 0; display: grid; gap: 16px; align-items: start; }
.mega blockquote { margin: 0; }
.mega blockquote p { margin: 0; font: italic 23px/1.32 var(--serif); }
.mega figcaption { font-size: 14px; margin-top: 10px; }
.mega .more { font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mega .more:hover { text-decoration: underline; }
.mega-img img { border-radius: 4px; background: var(--soft); width: 100%; }
.mega.compact { grid-template-columns: 88px 1fr; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.mega.compact blockquote p { font-size: 20px; }
.mega.big { grid-template-columns: minmax(0, 1fr); padding: 40px 0 8px; }
.mega.big .mega-img { max-width: 300px; }
.mega.big blockquote p { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; max-width: 22ch; }
@media (min-width: 760px) { .mega.big { grid-template-columns: 300px 1fr; gap: 40px; align-items: center; } }

/* GogglesView proof strip */
.gv-strip { padding: 36px 0; border-top: 1px solid var(--line); }
.gv-grid { display: grid; gap: 20px 36px; align-items: center; }
.gv-shot img { border-radius: 6px; background: var(--soft); }
.gv-text h2 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.05; }
.gv-text h2 a { text-decoration: none; }
.gv-text p { margin: 8px 0 12px; max-width: 40ch; }
.gv-text .kicker { margin: 0 0 6px; }
.more { font-weight: 600; color: var(--accent); text-decoration: none; }
.more:hover { text-decoration: underline; }
.stat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.stat-row li { padding: 12px 10px 0 0; }
.stat-row li + li { padding-left: 12px; border-left: 1px solid var(--line); }
.stat-row b { display: block; font: normal clamp(26px, 3vw, 38px)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.stat-row span { display: block; font-size: 13px; color: var(--mute); margin-top: 6px; }
@media (min-width: 1000px) { .gv-grid { grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (min-width: 640px) and (max-width: 999px) { .gv-grid { grid-template-columns: 260px 1fr; } .stat-row { grid-column: 1 / -1; } }

/* map extras */
.map-cap { font-size: 13px; color: var(--mute); margin-top: 4px; text-align: right; }
.map-key { display: none; font-size: 14px; color: var(--mute); margin: 12px 0 0; line-height: 1.8; }
.map-key a { color: var(--ink); white-space: nowrap; }
@media (max-width: 719px) { .map-key { display: block; } .map-cap { text-align: left; } }
.lat-sec { padding-top: 32px; }
.lat-sec .lat { margin: 0; }

/* things I made: three ruled columns */
.made { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; border-top: 1px solid var(--ink); }
.made li { padding: 20px 0 24px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.made .meta { font-size: 13px; color: var(--mute); margin: 0 0 6px; }
.made h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; }
.made h3 a { text-decoration: none; }
.made p { margin: 10px 0 0; max-width: 42ch; }
.made .more { margin-top: auto; padding-top: 14px; }
@media (min-width: 900px) { .made { grid-template-columns: repeat(3, 1fr); } .made li { border-bottom: 0; } .made li + li { border-left: 1px solid var(--line); padding-left: 24px; margin-left: -20px; } }

/* creations: text-only features */
@media (min-width: 900px) { .feature.text-only { grid-template-columns: 5fr 7fr; } }
.feature.text-only .facts { margin-top: 6px; }

/* events / predazzo photos */
.log-photo { margin: 14px 0 6px; max-width: 560px; }
.log-photo img { border-radius: 4px; background: var(--soft); }
.head-split { display: grid; gap: 28px 56px; align-items: end; }
.lead-photo { max-width: 340px; }
.lead-photo img { border-radius: 6px; background: var(--soft); }
@media (min-width: 900px) { .head-split { grid-template-columns: minmax(0, 1fr) 340px; } }
.in-story { margin: 28px 0 0; max-width: 380px; font-family: var(--sans); }
.in-story img { border-radius: 6px; background: var(--soft); }

/* gogglesview dead ends */
.ends { margin: 0 0 20px; border-top: 1px solid var(--line); }
.ends > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ends dt { font-weight: 600; }
.ends dd { margin: 4px 0 0; color: var(--ink); }
table.bytes td:nth-child(3), table.bytes th:nth-child(3) { text-align: left; }
table.bytes td:nth-child(2) { font-family: var(--mono); font-size: 13px; }
pre.hex { font-size: 13px; line-height: 1.6; }

/* ---------- about: one flat drawing sheet ---------- */
.sheet-wrap { padding-top: 40px; padding-bottom: 56px; }
.sheet { background: var(--paper); border: 1px solid var(--ink); padding: 8px; }
.sheet-in { border: 1px solid var(--ink); padding: 28px 18px 18px; position: relative;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px; background-position: -1px -1px; }
.sheet-lbl { font: 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; }
.sheet h2.sheet-lbl { font: 12px/1.4 var(--mono); letter-spacing: .1em; margin: 2.6em 0 1em; padding-bottom: 6px; border-bottom: 1px solid var(--ink); color: var(--ink); }
.sheet h2.sheet-lbl::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.sheet .prose > h2.sheet-lbl:first-child, .sheet-side > h2.sheet-lbl:first-child { margin-top: 0; }
.sheet-head { display: grid; gap: 20px 40px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--ink); }
.sheet-head h1 { font-size: clamp(44px, 8vw, 84px); line-height: .95; letter-spacing: -.03em; }
.sheet-portrait { width: 150px; background: var(--paper); }
.sheet-body { display: grid; gap: 40px 64px; padding: 32px 0 36px; }
.sheet .prose { font-size: 17px; }
.sheet .prose h3 { font-size: 21px; }
.sheet .contact-list { border-top: 0; }
.sheet .contact-list span { font: 12px/1.9 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.sheet-fig { margin-top: 32px; max-width: 260px; }
.sheet-fig img { border: 1px solid var(--ink); }
.sheet-fig figcaption { font: 12px/1.5 var(--mono); }
.title-block { border-collapse: collapse; font: 12px/1.4 var(--mono); background: var(--paper); margin-left: auto; width: 100%; max-width: 380px; }
.title-block th, .title-block td { border: 1px solid var(--ink); padding: 7px 10px; text-align: left; vertical-align: top; }
.title-block th { font-weight: normal; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; width: 8.5em; }
@media (min-width: 720px) { .sheet { padding: 12px; } .sheet-in { padding: 44px 44px 24px; } .sheet-head { grid-template-columns: minmax(0, 1fr) 160px; } .sheet-portrait { width: 160px; } }
@media (min-width: 960px) { .sheet-body { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.sheet-body > *, .proof-top > *, .gv-grid > *, .head-split > *, .mega > * { min-width: 0; }
/* v2 review fixes */
@media (min-width: 1000px) { .gv-grid { grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1.35fr); } }
.mega.big figcaption { max-width: 58ch; }
@media (max-width: 759px) { .portrait.lg { width: 120px; } .mega.big .mega-img { max-width: 220px; } }
table.bytes td:nth-child(2), table.bytes th:nth-child(2) { white-space: nowrap; text-align: left; }
/* portrait: home shows it bare, About shows it as a taped print on the sheet */
.portrait.sm figcaption, .portrait.lg figcaption { display: none; }
.portrait img { background: var(--soft); }
figure.sheet-portrait { position: relative; background: #fff; padding: 8px 8px 0; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
figure.sheet-portrait img { border-radius: 0; }
figure.sheet-portrait figcaption { font: 12px/1 var(--mono); color: #66625a; margin: 0; padding: 8px 0 9px; }
figure.sheet-portrait::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: rgba(214, 205, 180, .7); border: 1px solid rgba(0,0,0,.05); }

/* v3 home: calm hero, then two single-idea chapters */
.contact-row { gap: 8px 22px; }
.mail-btn { padding: 8px 16px 9px; font-weight: 600; }
.chapter, .gv-strip { padding: 72px 0; }
@media (min-width: 1000px) { .chapter, .gv-strip { padding: 112px 0; } }
.chapter .mega.big { padding: 0; }
@media (min-width: 760px) { .chapter .mega.big { grid-template-columns: 280px minmax(0, 1fr); gap: 64px; } }
.chapter .mega.big .mega-img { max-width: 280px; }
.gv-grid { gap: 28px 64px; }
.gv-text .stat-row { margin: 28px 0 24px; }
@media (min-width: 1000px) { .gv-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (min-width: 640px) and (max-width: 999px) { .gv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) { .chapter .mega.big .mega-img { max-width: 200px; } .hero .contact-row { gap: 8px 16px; } }

/* v3 type: Plex Sans for words, Plex Mono for labels, map labels, numbers */
.mark { font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
.name, .page-head h1, .sheet-head h1 { font-weight: 600; letter-spacing: -.045em; }
.lede, .story .prose { letter-spacing: -.005em; }
.kicker, .meta, .feature .meta, .made .meta, .log .when, .map-cap, .stops .co, figcaption.map-cap { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.kicker a { text-decoration-color: var(--line); }
.pin .nm, .locator .here, .sig .tx { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.pin.sm .nm { font-size: 13px; }
.pin .ln, .pin .no, .deg, .sig .tm, .sig .td, .sig .tn, .locator text, .pin .num { font-family: var(--mono); }
.det .cap { font: 12px var(--mono); }
.numbers b, .stat-row b { font-family: var(--mono); font-weight: 500; letter-spacing: -.03em; }
.mega blockquote p, .pull { font-style: normal; font-weight: 500; letter-spacing: -.015em; }
.mega blockquote { padding-left: 20px; border-left: 3px solid var(--accent); }
.mega figcaption { font-family: var(--sans); }
table.data, .data caption { font-variant-numeric: tabular-nums; }
.story .prose p:first-child::first-letter { font-weight: 600; }
.pin .nm { font-size: 17px; }
.pin.sm .nm { font-size: 14px; }
@media (max-width: 419px) { .hero .contact-row { font-size: 14px; gap: 8px 12px; } .hero .mail-btn { padding: 8px 13px 9px; } }

/* map popups: a pad opens its card in place (site.js) */
.map-stage { position: relative; }
.hit { cursor: pointer; }
.hit:focus { outline: none; }
.hit:hover .pad, .hit:focus-visible .pad, .hit[aria-expanded="true"] .pad { stroke-width: 4; }
.hit[aria-expanded="true"] .pad { fill: var(--accent); }
.hit:hover .nm, .hit:focus-visible .nm { text-decoration: underline; }
.hit:focus-visible .halo { stroke: var(--accent); stroke-width: 1.5; }
.card { position: absolute; z-index: 2; width: 270px; background: var(--bg); border: 1px solid var(--ink); padding: 12px 14px 14px; font-size: 15px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.card:focus { outline: none; }
.card:focus-visible { outline: 2px solid var(--accent); }
.card img { width: 100%; height: 150px; object-fit: cover; margin-bottom: 10px; background: var(--soft); }
.card p { margin: 0 0 8px; }
@media (max-width: 719px) {
  .card { position: static; width: auto; margin: 12px 0 0; box-shadow: none; }
  .card img { height: 180px; }
}

/* squared paper under the map only */
.map { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }