/* Rădăcini — the portfolio as a root atlas plate: one soil section, read top to bottom. */
:root {
  --air: #e9e8e4;
  --humus: #221d1a;
  --topsoil: #110d0c;
  --chern: #2e2620;
  --loess: #b88a4a;
  --clay: #8c4a2b;
  --rock: #d6d3cb;
  --copper: #c69c70;
  --chalk: #f3f3ef;
  --dark: #1b1512;
  --sans: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 4.5vw, 64px);
  --rail: 132px;
  --bar-h: 64px;
  --ground: 31vh;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--humus); color: var(--chalk);
  font: 400 1rem/1.55 var(--sans); font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
body.is-gated { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--copper); color: var(--dark); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: #c69c7066 var(--humus); scroll-padding-bottom: calc(96px + var(--concept-bar-h, 0px)); }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: var(--humus); }
::-webkit-scrollbar-thumb { background: #c69c7066; border-radius: 10px; border: 2px solid var(--humus); }
svg { width: 1em; height: 1em; }
.defs { position: absolute; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--copper); color: var(--dark); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: .7rem 1.25rem;
  border-radius: 4px; border: 1.5px solid currentColor; background: none;
  font: 500 .98rem/1.2 var(--sans); text-decoration: none; letter-spacing: .005em;
  transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-copper { background: var(--copper); border-color: var(--copper); color: var(--dark); }
.btn-copper:hover { background: #d8b089; border-color: #d8b089; transform: translateY(-1px); }
.btn-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.btn-dark { background: var(--dark); border-color: var(--dark); color: var(--chalk); }
.btn-dark:hover { background: #3a2c22; border-color: #3a2c22; }

/* ---------- Gate ---------- */
.gate { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--gut); background: var(--humus); }
.gate[hidden] { display: none; }
.gate-box { max-width: 30rem; text-align: center; }
.gate-mark { width: 72px; height: 72px; color: var(--copper); margin: 0 auto 1.4rem; }
.gate h2 { font: 300 clamp(2rem, 5vw, 3rem)/1.08 var(--sans); margin: 0 0 1rem; letter-spacing: -.02em; }
.gate p { margin: 0 auto; max-width: 36ch; color: color-mix(in srgb, var(--chalk) 82%, var(--humus)); }
.gate-actions { display: flex; gap: 12px; justify-content: center; margin-top: 1.8rem; }
.gate-msg { margin-top: 1.2rem !important; color: var(--copper) !important; }

/* ---------- Bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gut);
  color: var(--bar-ink, var(--dark)); transition: color .4s, background-color .4s;
}
.bar.is-solid { background: color-mix(in srgb, var(--bar-bg, var(--humus)) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-g { width: 32px; height: 32px; }
.brand-word { display: block; width: 84px; height: 34px; background: currentColor; -webkit-mask: url("../shared/img/art/wordmark.png") center / contain no-repeat; mask: url("../shared/img/art/wordmark.png") center / contain no-repeat; }
.lang { margin-left: auto; display: flex; gap: 2px; }
.lang button { background: none; border: 0; padding: 8px 7px; min-width: 36px; min-height: 40px; font: 500 .8rem/1 var(--sans); letter-spacing: .08em; opacity: .62; border-radius: 4px; }
.lang button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.lang button:hover { opacity: 1; }
.req-btn {
  position: fixed; z-index: 60; right: clamp(12px, 2vw, 24px); bottom: calc(16px + var(--concept-bar-h, 0px));
  display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 10px 0 20px;
  border-radius: 4px; background: var(--copper); color: var(--dark); text-decoration: none; font-weight: 600; font-size: 1rem;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .25);
  transition: opacity .35s var(--ease), translate .45s var(--ease), background-color .25s;
}
.req-btn:hover { background: #d6ae84; }
.req-btn.is-away { opacity: 0; translate: 0 24px; pointer-events: none; }
.req-btn:focus-visible { outline-color: var(--chalk); }
.req-count { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 3px; display: inline-grid; place-items: center; background: currentColor; font-variant-numeric: tabular-nums; }
.req-count > * { display: none; }
.req-btn .req-count { color: inherit; }
.req-btn .req-count { background: var(--dark); color: var(--chalk); }
.req-btn.bump .req-count { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); } }

/* ---------- Depth gauge ---------- */
.gauge {
  position: fixed; z-index: 40; left: 0; top: var(--bar-h); bottom: 0; width: var(--rail);
  padding: 28px 0 28px var(--gut); color: var(--gauge-ink, var(--dark)); pointer-events: none;
  transition: color .4s;
}
.gauge > * { pointer-events: auto; }
.gauge.on-surface { color: #fff; mix-blend-mode: difference; }
.gauge-read { margin: 0 0 18px; display: grid; grid-template-columns: auto auto; gap: 0 6px; align-items: baseline; justify-content: start; }
.gauge-read span:first-child { grid-column: 1 / -1; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.gauge-read b { font: 300 1.9rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gauge-read span:last-child { font-size: .9rem; }
.gauge-list { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 1px solid currentColor; display: grid; gap: 0; }
.gauge-list a { position: relative; display: grid; grid-template-columns: 2.1rem auto; gap: 4px; padding: 7px 8px 7px 0; text-decoration: none; font-size: .78rem; line-height: 1.25; opacity: .66; transition: opacity .3s; }
.gauge-list a::before { content: ""; position: absolute; left: -16px; top: 13px; width: 14px; height: 1px; background: currentColor; transform: scaleX(.57); transform-origin: left; transition: transform .3s; }
.gauge-list a:hover, .gauge-list a[aria-current="true"] { opacity: 1; }
.gauge-list a[aria-current="true"]::before { transform: none; height: 2px; }
.gauge-list .gm { font-variant-numeric: tabular-nums; }
.gauge-list a span:last-child { max-width: 8.5rem; }

/* ---------- Horizons ---------- */
main { position: relative; }
.hz { position: relative; }
.hz-inner { position: relative; z-index: 3; padding: clamp(96px, 14vh, 150px) var(--gut) clamp(80px, 12vh, 130px) calc(var(--rail) + var(--gut)); }
.hz h2 { margin: 0; font: 300 clamp(2.2rem, 4.2vw, 4rem)/1.04 var(--sans); letter-spacing: -.025em; text-wrap: balance; max-width: 18ch; }
.hz p { max-width: 60ch; }
.edge { position: absolute; left: 0; right: 0; top: -38px; height: 40px; width: 100%; z-index: 1; display: block; }

.roots-main { position: absolute; z-index: 2; left: 0; top: var(--ground); width: 50%; pointer-events: none; color: var(--copper); }
.roots-main svg { width: 100%; height: 100%; overflow: visible; }

/* Surface */
.hz-surface { min-height: calc(100vh - 76px); min-height: calc(100svh - 76px); display: grid; grid-template-rows: var(--ground) 3px 1fr; background: var(--humus); }
.air { position: relative; background: var(--air); color: var(--dark); }
.hero-bottle { position: absolute; bottom: 0; left: 26%; height: calc(var(--ground) - var(--bar-h) - 18px); width: auto; translate: -50% 0; filter: drop-shadow(10px 6px 10px rgba(27, 21, 18, .25)); }
.ground { background: var(--dark); position: relative; z-index: 3; }
.soil {
  position: relative; background-color: var(--topsoil);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M3 4h7M16 10h7' stroke='%23c69c70' stroke-opacity='.2' stroke-width='1.2'/%3E%3C/svg%3E");
  padding: clamp(36px, 6vh, 64px) var(--gut) 72px calc(50% + 0px);
}
.hero-copy { position: relative; z-index: 3; max-width: 40rem; }
.hero-copy h1 { margin: 0; font: 300 clamp(2.6rem, 4.6vw, 4.9rem)/1.0 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.lede { margin: 1.2rem 0 0; font-size: 1.06rem; color: color-mix(in srgb, var(--chalk) 86%, var(--humus)); }
.readings { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.readings div { border-top: 1px solid color-mix(in srgb, var(--copper) 60%, transparent); padding-top: .6rem; }
.readings dt { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.readings dd { margin: .3rem 0 0; font-size: .98rem; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.8rem; }
.hero-actions .btn-ghost { color: var(--chalk); }
.tab-cap { margin: 1.6rem 0 0; max-width: 46ch; font-size: .8rem; color: color-mix(in srgb, var(--chalk) 76%, var(--topsoil)); border-top: 1px solid color-mix(in srgb, var(--copper) 40%, transparent); padding-top: .6rem; }
.depth-ticks { display: none; position: absolute; z-index: 3; left: calc(var(--rail) + var(--gut) * 1.15); top: 0; bottom: 0; margin: 0; padding: 0; list-style: none; flex-direction: column; justify-content: space-between; font-size: .72rem; color: color-mix(in srgb, var(--chalk) 70%, var(--topsoil)); border-left: 1px solid color-mix(in srgb, var(--copper) 55%, transparent); padding: 10px 0 10px 8px; font-variant-numeric: tabular-nums; }
.depth-ticks li { position: relative; }
.depth-ticks li::before { content: ""; position: absolute; left: -12px; top: .55em; width: 7px; height: 1px; background: var(--copper); }
.hz-label { position: absolute; z-index: 4; top: -30px; right: var(--gut); font-size: .76rem; letter-spacing: .04em; text-decoration: none; padding: 6px 0; color: inherit; opacity: .82; font-variant-numeric: tabular-nums; }
.hz-label:hover { opacity: 1; text-decoration: underline; }
.fig { position: relative; }
.fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: .78rem; color: var(--chalk); background: linear-gradient(transparent, rgba(24, 19, 17, .78)); }

/* Humus & chernozem */
.hz-humus { background-color: var(--humus); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M3 4h7M16 10h7' stroke='%23c69c70' stroke-opacity='.2' stroke-width='1.2'/%3E%3C/svg%3E"); }
.hz-chern { background-color: var(--chern); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='3' cy='3' r='.9' fill='%23c69c70' fill-opacity='.26'/%3E%3Ccircle cx='9' cy='8' r='.7' fill='%23c69c70' fill-opacity='.18'/%3E%3C/svg%3E"); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding-left: calc(50% + 0px); }
.split .col-text { grid-column: 1 / -1; }
.split .col-media { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.col-text > p { margin: 1.1rem 0 0; font-size: 1.04rem; color: color-mix(in srgb, var(--chalk) 88%, var(--humus)); }
.ph { margin: 0; overflow: hidden; border-radius: 3px; background: #3a2c22; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-tall { aspect-ratio: 4 / 5; }
.ph-wide { aspect-ratio: 4 / 5; }
.ph-tall img { object-position: 50% 35%; }
.core-title { margin: 2rem 0 .8rem; font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.core { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--copper); }
.core li { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 10px; padding: .5rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--copper) 35%, transparent); }
.core li::before { content: ""; position: absolute; left: -23px; top: 1.05rem; width: 9px; height: 9px; border-radius: 50%; background: var(--humus); border: 2px solid var(--copper); }
.core b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--copper); }
.ledger { margin: 1.6rem 0 0; }
.ledger div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; padding: .65rem 0; border-top: 1px solid color-mix(in srgb, var(--copper) 40%, transparent); }
.ledger dt { color: var(--copper); font-size: .9rem; }
.ledger dd { margin: 0; font-weight: 500; }
.src { font-size: .8rem; color: color-mix(in srgb, var(--chalk) 70%, var(--chern)); margin-top: .7rem !important; }
.grapes { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grapes h3 { margin: 0 0 .4rem; font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.grapes p { margin: 0; font-size: .98rem; line-height: 1.6; }
.hz-chern .col-media { grid-template-columns: 1fr; }
.hz-chern .ph-wide { aspect-ratio: 3 / 2; }

/* Loess: the wines */
.hz-loess {
  --ink: var(--dark); color: var(--dark); background-color: var(--loess);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='4' cy='5' r='.9' fill='%231b1512' fill-opacity='.22'/%3E%3Ccircle cx='15' cy='16' r='.7' fill='%231b1512' fill-opacity='.16'/%3E%3C/svg%3E");
}
.hz-loess ::selection { background: var(--dark); color: var(--loess); }
.hz-loess :focus-visible { outline-color: var(--dark); }
.c-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
.c-head p { margin: 0; font-size: 1.04rem; }
.profile { margin: 2.6rem 0 0; }
.profile-scroll { overflow-x: auto; scrollbar-width: thin; }
.profile svg { display: block; width: 100%; max-width: 1100px; height: auto; color: var(--dark); font-family: var(--sans); }
.profile figcaption { margin-top: .6rem; font-size: .92rem; }
.profile .deep-m { font-variant-numeric: tabular-nums; }
.full-title { margin: 3.4rem 0 0; font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--sans); letter-spacing: -.01em; }
.vine { cursor: default; }
.vine .roots path { transition: stroke .3s, opacity .3s; }
.vine.is-hot .roots { color: #fff6e6; }
.vine.is-dim { opacity: .25; }
.vine.is-picked .vlabel { font-weight: 700; }
.filters { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 40px; padding: 0 14px; border-radius: 4px; border: 1.5px solid var(--dark); background: transparent; font-size: .9rem; font-weight: 500; }
.chips button[aria-pressed="true"] { background: var(--dark); color: var(--loess); }
.chips button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--dark) 12%, transparent); }
.eco { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-weight: 500; font-size: .92rem; }
.eco svg { width: 1.15em; height: 1.15em; }
.table-wrap { margin-top: 1rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wines th, .wines td { text-align: left; padding: 1rem .8rem; border-bottom: 1px solid color-mix(in srgb, var(--dark) 28%, transparent); vertical-align: top; font-size: 1rem; line-height: 1.45; }
.wines th { font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--dark); white-space: nowrap; padding-top: .6rem; padding-bottom: .6rem; }
.wines td.wn { width: 36%; }
.wines td.mk { width: 24%; }
.wines .wmeta { display: block; font-size: .88rem; margin-top: 4px; color: color-mix(in srgb, var(--dark) 82%, var(--loess)); }
.wines td.pp a { font-weight: 600; font-size: 1.04rem; text-decoration-color: color-mix(in srgb, var(--dark) 45%, transparent); white-space: nowrap; }
.wines td.pp .ask { font-size: .9rem; font-style: italic; }
.wines td.no { width: 2.4rem; color: color-mix(in srgb, var(--dark) 70%, var(--loess)); }
.wines .wname { font-weight: 600; font-size: 1.08rem; display: flex; gap: 10px; align-items: center; }
.wines .wname .chip { width: 10px; height: 28px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(27, 21, 18, .35); }
.wines .wline { display: block; font-size: .9rem; font-weight: 400; color: color-mix(in srgb, var(--dark) 82%, var(--loess)); margin-top: 2px; }
.wines .eco-mark { display: inline-flex; align-items: center; gap: 5px; font-size: .84rem; font-weight: 600; margin: 0 0 0 10px; padding: 1px 8px 1px 6px; border: 1px solid currentColor; border-radius: 3px; vertical-align: 1px; white-space: nowrap; }
.wines .eco-mark svg { width: 1em; height: 1em; }
.wines .pr a { display: block; padding: 2px 0; text-decoration-color: color-mix(in srgb, var(--dark) 40%, transparent); font-size: .92rem; }
.wines .confirm { font-size: .76rem; color: #5e2e12; }
.wines tr.is-dim { display: none; }
.wines tr:hover td, .wines tr.is-hot td { background: color-mix(in srgb, #fff6e6 16%, transparent); }
.wines td.ck { width: 3.4rem; text-align: center; }
.ck input, .eco input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--dark); border-radius: 3px; background: transparent; cursor: pointer; display: inline-grid; place-items: center; transition: background-color .2s; }
.ck input::after, .eco input::after { content: ""; width: 11px; height: 6px; border: 2px solid var(--loess); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.ck input:checked, .eco input:checked { background: var(--dark); }
.ck input:checked::after, .eco input:checked::after { opacity: 1; }
.ck input:hover, .eco input:hover { background: color-mix(in srgb, var(--dark) 14%, transparent); }
.ck input:checked:hover, .eco input:checked:hover { background: var(--dark); }
.note { margin: 1rem 0 0; font-size: .82rem; max-width: 72ch; }

/* Clay: the proof */
.hz-clay {
  color: #f8e8dd; background-color: var(--clay);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 14 14 0' stroke='%23efece6' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
}
.d-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; margin-bottom: 2rem; }
.d-head p { margin: 0; font-size: 1.04rem; }
.medals th, .medals td { text-align: left; padding: .75rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--chalk) 25%, transparent); font-size: .95rem; }
.medals th { font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--chalk); }
.medals td:first-child { width: 4.5rem; }
.medals a { display: inline-flex; align-items: center; gap: 6px; text-decoration-color: color-mix(in srgb, var(--chalk) 45%, transparent); }
.medals a svg { width: .95em; height: .95em; opacity: .8; }
.medal { display: inline-flex; align-items: center; gap: 8px; }
.medal i { width: 12px; height: 12px; border-radius: 50%; }
.m-gold i { background: #e2b85a; box-shadow: inset 0 0 0 2px #a8801f; }
.m-silver i { background: #dcdddf; box-shadow: inset 0 0 0 2px #8f9195; }
.m-bronze i { background: #d0915f; box-shadow: inset 0 0 0 2px #7d4f2c; }
.record { margin-top: 2.6rem; }
.record h3 { margin: 0 0 .6rem; font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.record ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.record li { padding: .7rem 0; border-top: 1px solid color-mix(in srgb, var(--chalk) 25%, transparent); font-size: .95rem; }

/* Bedrock: request */
.hz-rock {
  color: var(--dark); background-color: var(--rock);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 .5h48M0 12.5h48M.5 0v12M24.5 12v12' stroke='%231b1512' stroke-opacity='.07'/%3E%3C/svg%3E");
}
.hz-rock ::selection { background: var(--dark); color: var(--rock); }
.hz-rock :focus-visible { outline-color: var(--dark); }
.split-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.split-r > div > p { margin: 1.1rem 0 0; font-size: 1.04rem; }
.sel-title, .direct h3 { margin: 2rem 0 .6rem; font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.sel { list-style: none; margin: 0; padding: 0; }
.sel li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: .55rem 0; border-top: 1px solid color-mix(in srgb, var(--dark) 22%, transparent); }
.sel li .chip { width: 10px; height: 26px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(27, 21, 18, .35); }
.sel li button { width: 40px; height: 40px; border: 0; background: none; border-radius: 4px; display: grid; place-items: center; }
.sel li button:hover { background: color-mix(in srgb, var(--dark) 10%, transparent); }
.sel li.empty { display: block; font-size: .95rem; color: color-mix(in srgb, var(--dark) 78%, var(--rock)); }
.direct p { margin: .3rem 0 0; }
.req { display: grid; gap: 16px; align-content: start; }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-size: .82rem; font-weight: 500; letter-spacing: .02em; padding: 0; margin-bottom: 4px; }
.field input, .field textarea { min-height: 48px; padding: .65rem .85rem; border: 1.5px solid var(--dark); border-radius: 4px; background: #e6e3dc; color: var(--dark); }
.field textarea { resize: vertical; }
.field textarea::placeholder { color: #6a6157; }
.field input[aria-invalid="true"] { border-color: #8c1d18; box-shadow: inset 0 0 0 1px #8c1d18; }
.err { margin: 0; font-size: .88rem; font-weight: 500; color: #7a1712; }
.role-list { display: flex; flex-wrap: wrap; gap: 6px; }
.role-list label { position: relative; }
.role-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.role-list span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--dark); border-radius: 4px; font-size: .9rem; cursor: pointer; }
.role-list input:checked + span { background: var(--dark); color: var(--rock); }
.role-list input:focus-visible + span { outline: 2px solid var(--dark); outline-offset: 2px; }
.req-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.req-status { margin: 0; font-size: .92rem; }
.req-status.is-demo { font-weight: 600; padding: .7rem .9rem; border: 1.5px solid var(--dark); border-radius: 4px; }

/* Footer */
.foot { background: var(--dark); padding: 52px var(--gut) calc(110px + var(--concept-bar-h, 0px)) calc(var(--rail) + var(--gut)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 48px; position: relative; z-index: 2; }
.foot-brand { display: flex; gap: 12px; align-items: center; color: var(--copper); grid-row: span 3; }
.foot-brand svg { width: 48px; height: 48px; }
.foot-health { margin: 0; max-width: 56ch; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-small { margin: 0; max-width: 80ch; font-size: .8rem; color: color-mix(in srgb, var(--chalk) 64%, var(--dark)); }

.factsheet { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  :root { --rail: 0px; }
  .gauge { display: none; }
  .depth-ticks { display: flex; }
  .soil { padding-left: 48%; }
  .split { padding-left: 46%; }
}
@media (max-width: 860px) {
  :root { --bar-h: 58px; --ground: 30svh; }
  .bar { gap: 10px; }
  .brand-word { display: none; }
  .req-btn { left: 10px; right: 10px; bottom: calc(10px + var(--concept-bar-h, 0px)); justify-content: space-between; }
  .req-btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8M9 3v6l-4 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-4-9V3' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8M9 3v6l-4 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-4-9V3' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .hero-bottle { left: 50%; }
  .roots-main { left: 0; width: 100%; }
  .soil { padding: 176px var(--gut) 64px; }
  .depth-ticks { display: none; }
  .hz-label { left: var(--gut); right: auto; top: 6px; }
  .readings { grid-template-columns: 1fr; }
  .readings div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 10px; align-items: baseline; padding: .5rem 0; }
  .readings dd { margin: 0; }
  .split { padding-left: var(--gut); grid-template-columns: 1fr; }
  .hz-inner { padding-left: var(--gut); }
  .c-head, .d-head, .split-r { grid-template-columns: 1fr; }
  .ledger div { grid-template-columns: 1fr; gap: 2px; }
  .grapes { grid-template-columns: 1fr; }
  .record ul { grid-template-columns: 1fr; }
  .wines thead { display: none; }
  .wines tr { display: grid; grid-template-columns: minmax(0, 1fr) 3rem; gap: 4px 10px; padding: 1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--dark) 28%, transparent); }
  .wines tr.is-dim { display: none; }
  .wines td { border: 0; padding: 0; width: auto !important; }
  .wines td.wn { grid-column: 1; }
  .wines td.ck { grid-column: 2; grid-row: 1 / span 2; }
  .wines td.mk, .wines td.pr, .wines td.pp { grid-column: 1; font-size: .94rem; }
  .wines td.pp { text-align: left; }
  .wines td.pr.is-empty { display: none; }
  .medals thead { display: none; }
  .medals tr { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 2px 10px; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--chalk) 25%, transparent); }
  .medals td { border: 0; padding: 0; }
  .medals td:nth-child(1) { grid-row: 1 / span 2; text-align: left; font-weight: 500; }
  .medals td:nth-child(2) { grid-column: 2; }
  .medals td:nth-child(3) { grid-column: 2; font-size: .88rem; }
  .medals td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .medals td:nth-child(5) { grid-column: 3; grid-row: 2; text-align: right; }
  .foot { grid-template-columns: 1fr; padding-left: var(--gut); }
  .foot-brand { grid-row: auto; }
}

/* ---------- Print: fact sheet only ---------- */
@media print {
  @page { margin: 14mm; }
  body > *:not(.factsheet) { display: none !important; }
  .factsheet { display: block !important; font: 10pt/1.4 var(--sans); color: #111; }
  .factsheet h1 { font: 300 22pt/1.1 var(--sans); margin: 0 0 4pt; }
  .factsheet .fs-sub { margin: 0 0 12pt; color: #555; }
  .factsheet article { break-inside: avoid; display: grid; grid-template-columns: 22mm 1fr; gap: 6mm; padding: 6pt 0; border-top: .5pt solid #999; }
  .factsheet img { height: 60mm; width: auto; }
  .factsheet h2 { font: 600 12pt/1.2 var(--sans); margin: 0 0 4pt; }
  .factsheet dl { display: grid; grid-template-columns: 30mm 1fr; gap: 1pt 6pt; margin: 4pt 0 0; }
  .factsheet dt { color: #666; }
  .factsheet dd { margin: 0; }
  .factsheet .fs-foot { margin-top: 10pt; font-size: 8pt; color: #666; }
}