/* Gabi Lipan — components. Built on the tokens in site.css (colour, spacing, type, corners).
   Everything here reads --bg, --fg, --muted, --surface, --line and --link, so it works in
   light mode, dark mode and on any ground (see .ground-*). Documented at /build/system/. */

:root {
  --red: #F74339;
  --green: #27A144;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --measure: 64ch;
}

/* ── Grounds ──────────────────────────────────────────────────
   Put one of these on any block and everything inside re-themes for that ground. */
.ground-paper   { --bg: var(--paper); --fg: var(--black); --muted: rgba(23,30,33,.6); --surface: #F3F2EF; --line: rgba(23,30,33,.14); --link: var(--blue); --focus: var(--blue); background: var(--bg); color: var(--fg); }
.ground-black   { --bg: var(--black); --fg: var(--paper); --muted: rgba(252,251,248,.6); --surface: #252B2E; --line: rgba(252,251,248,.16); --link: var(--cyan); --focus: var(--cyan); background: var(--bg); color: var(--fg); }
.ground-blue    { --bg: var(--blue); --fg: var(--paper); --muted: rgba(252,251,248,.78); --surface: rgba(23,30,33,.28); --line: rgba(252,251,248,.32); --link: var(--yellow); --focus: var(--yellow); background: var(--bg); color: var(--fg); }
.ground-cyan    { --bg: var(--cyan); --fg: var(--black); --muted: rgba(23,30,33,.7); --surface: rgba(23,30,33,.1); --line: rgba(23,30,33,.28); --link: var(--black); --focus: var(--black); background: var(--bg); color: var(--fg); }
.ground-magenta { --bg: var(--magenta); --fg: var(--black); --muted: rgba(23,30,33,.7); --surface: rgba(23,30,33,.1); --line: rgba(23,30,33,.28); --link: var(--black); --focus: var(--black); background: var(--bg); color: var(--fg); }
.ground-yellow  { --bg: var(--yellow); --fg: var(--black); --muted: rgba(23,30,33,.7); --surface: rgba(23,30,33,.08); --line: rgba(23,30,33,.28); --link: var(--blue); --focus: var(--blue); background: var(--bg); color: var(--fg); }

/* ── Type ─────────────────────────────────────────────────── */
.display { font: 800 clamp(48px, 8vw, 88px)/1 var(--display); letter-spacing: -0.05em; margin: 0; }
.h1 { font: 800 clamp(38px, 5.4vw, 58px)/1.05 var(--display); letter-spacing: -0.045em; margin: 0; }
.h2 { font: 800 clamp(28px, 3.4vw, 32px)/1.1 var(--display); letter-spacing: -0.04em; margin: 0; }
.h3 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin: 0; }
.h4 { font: 700 19px/1.25 var(--display); letter-spacing: -0.02em; margin: 0; }
.lede { font: 400 21px/1.5 var(--text); color: var(--muted); margin: 0; max-width: 46ch; }
.body { font: 400 17px/1.62 var(--text); margin: 0; }
.small { font: 400 15px/1.55 var(--text); margin: 0; }
.caption { font: 400 13px/1.5 var(--text); color: var(--muted); margin: 0; }
.muted { color: var(--muted); }
.balance { text-wrap: balance; }
.measure { max-width: var(--measure); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 800 32px/1.1 var(--display); letter-spacing: -0.04em; margin-top: 2em; }
.prose h3 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose strong { font-weight: 700; }
.prose code, .code-inline { font: 500 .88em/1 var(--mono); background: var(--surface); padding: .18em .45em; border-radius: 7px; }
.prose hr, .rule-thin { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

.rule { border: 0; border-top: 8px solid var(--fg); margin: 0; }       /* the guide's thick rule */
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ── Icons ────────────────────────────────────────────────── */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }

/* ── Links ────────────────────────────────────────────────── */
.link { color: var(--link); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link--arrow::after { content: "\203A"; display: inline-block; margin-left: .4em; transition: transform .35s var(--spring); }   /* a margin, not a space: an inline-block drops its leading space */
.link--arrow:hover::after { transform: translateX(3px); }
.link--quiet { color: var(--muted); font-weight: 400; }
.link--quiet:hover { color: var(--fg); }
.link--plain { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; min-height: 48px;
  background: var(--fg); color: var(--bg);
  font: 600 17px/1 var(--text); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  transition: transform .45s var(--spring), background-color .2s, color .2s, border-color .2s, opacity .2s;
  filter: none;
}
.btn:hover { filter: none; transform: translateY(-1px); }
.btn:active { transform: scale(.97); transition-duration: .12s; }
.btn .icon { margin-right: -4px; }
.btn--accent  { background: var(--yellow); color: var(--black); }
.btn--blue    { background: var(--blue); color: var(--yellow); }
.btn--outline { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--outline:hover { background: var(--fg); color: var(--bg); }
.btn--ghost   { background: var(--surface); color: var(--fg); }
.btn--ghost:hover { background: var(--line); }
.btn--sm { padding: 9px 18px; min-height: 36px; font-size: 15px; }
.btn--lg { padding: 18px 34px; min-height: 58px; font-size: 19px; }
.btn--icon { padding: 0; width: 48px; }
.btn--icon.btn--sm { width: 36px; }
.btn--icon .icon { margin: 0; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .38; pointer-events: none; }
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg); border-top-color: transparent; animation: spin .8s linear infinite; }
.btn--accent.is-loading::after { border-color: var(--black); border-top-color: transparent; }
.btn--outline.is-loading::after, .btn--ghost.is-loading::after { border-color: var(--fg); border-top-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.btn-group { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border-radius: var(--r-pill); }
.btn-group .btn { -webkit-tap-highlight-color: transparent; min-height: 38px; padding: 8px 18px; font-size: 15px; background: transparent; color: var(--muted); }
.btn-group .btn:hover { transform: none; color: var(--fg); }
.btn-group .btn.is-on { background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
/* With scripts, a thumb slides behind the buttons instead, with the theme toggle's liquid spring (liquid.js) */
.btn-group.has-thumb { position: relative; }
.btn-group-thumb { position: absolute; left: 0; top: 0; background: var(--bg); border-radius: var(--r-pill); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.btn-group.has-thumb .btn { position: relative; z-index: 1; }
.btn-group.has-thumb .btn.is-on { background: transparent; box-shadow: none; }

/* ── Tags, chips, badges ──────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--surface); color: var(--fg); font: 500 13px/1.4 var(--text); border-radius: var(--r-pill); white-space: nowrap; }
.tag--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
/* A tag that is a link looks like a tag, not like text: no underline; its outline darkens on hover instead */
a.tag { text-decoration: none; transition: box-shadow .2s, background-color .2s; }
a.tag--line:hover { box-shadow: inset 0 0 0 1px var(--fg); }
a.tag:not(.tag--line):hover { background: var(--line); }
.tag--cyan { background: var(--cyan); color: var(--black); }
.tag--magenta { background: var(--magenta); color: var(--black); }
.tag--yellow { background: var(--yellow); color: var(--black); }
.tag--blue { background: var(--blue); color: var(--paper); }

.chip { -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 38px; background: transparent; color: var(--fg); font: 500 15px/1 var(--text); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .4s var(--spring); }
.chip:hover { border-color: var(--fg); }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip .count { color: var(--muted); font-weight: 400; }
.chip.is-on .count { color: inherit; opacity: .7; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s1); }
/* Chip rows marked data-pour (pour.js): the selected chip's fill is a liquid drawn UNDER the chips, so the chips' outlines and words
   stay on top of it. A second picture over the chips repeats each outline and word in the colour that reads on liquid, shown only
   where the liquid is. So the chip itself keeps a transparent background, and its words and outline change colour above the ink. */
.chip-row[data-anim] { position: relative; isolation: isolate; }
.chip-row[data-anim] .chip { position: relative; z-index: 1; }
.chip-row[data-anim] .chip.is-on { background: transparent; color: var(--fg); border-color: var(--line); }
.chip-row[data-anim] .chip.is-on:hover { border-color: var(--fg); }
.chip-row[data-anim] .chip:active { transform: none; }
.goo { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.goo-under { z-index: 0; }
.goo-over { z-index: 2; }
.goo .goo-fill rect { fill: var(--fg); }
.goo .goo-cut rect { fill: #fff; }
.goo .goo-borders rect { fill: none; stroke: var(--bg); }
.goo .goo-labels text { fill: var(--bg); }
.goo .goo-labels text.count { fill-opacity: .7; }

.badge { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--text); color: var(--muted); }
.badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.badge--live::before { background: var(--green); }
.badge--error::before { background: var(--red); }
.badge--draft::before { background: var(--yellow); }
.badge--info::before { background: var(--cyan); }
.badge--own::before { background: var(--cyan); }
.badge--linkedin::before { background: var(--magenta); }
.badge--pill { padding: 4px 12px 4px 10px; background: var(--surface); color: var(--fg); border-radius: var(--r-pill); }

.kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; font: 600 13px/1 var(--text); color: var(--muted); background: var(--surface); border-radius: 8px; box-shadow: inset 0 -2px 0 var(--line); }

/* ── Avatars ──────────────────────────────────────────────── */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface); display: block; }
.avatar--xs { width: 24px; height: 24px; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 120px; height: 120px; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 3px var(--bg); }
.avatar-stack .avatar + .avatar { margin-left: -10px; }

/* ── Forms ────────────────────────────────────────────────── */
.form { display: grid; gap: var(--s3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.label { display: block; margin-bottom: 8px; font: 600 15px/1.3 var(--text); }
.label .opt { color: var(--muted); font-weight: 400; }
.help { margin-top: 8px; font: 400 13px/1.5 var(--text); color: var(--muted); }
.input, .select, .textarea {
  display: block; width: 100%; padding: 14px 22px; min-height: 52px;
  background: transparent; color: var(--fg);
  font: 400 17px/1.4 var(--text);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: border-color .2s, background-color .2s;
  appearance: none; -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--fg); }
.textarea { border-radius: var(--r-inner); corner-shape: squircle; min-height: 140px; resize: vertical; padding: 16px 22px; }
.select { padding-right: 52px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; }
.input.is-error, .textarea.is-error { border-color: var(--red); }
.input.is-ok { border-color: var(--green); }
.input[disabled], .textarea[disabled], .select[disabled] { opacity: .45; cursor: not-allowed; }
.msg { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 13px/1.4 var(--text); }
.msg--error { color: var(--red); }
.msg--ok { color: var(--green); }
.input-wrap { position: relative; }
.input-wrap .icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-wrap .input { padding-left: 52px; }
.input-wrap .kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.input-join { display: flex; gap: var(--s1); }
.input-join .input { flex: 1; min-width: 0; }

.check, .radio { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 400 17px/1.4 var(--text); }
.check input, .radio input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1px solid var(--muted); background: transparent; cursor: pointer; transition: background-color .2s, border-color .2s, transform .4s var(--spring); display: grid; place-items: center; }
.check input { border-radius: 8px; corner-shape: squircle; }
.radio input { border-radius: 50%; }
.check input:hover, .radio input:hover { border-color: var(--fg); }
.check input:active, .radio input:active { transform: scale(.92); }
.check input:checked, .radio input:checked { background: var(--fg); border-color: var(--fg); }
.check input:checked::after { content: ""; width: 11px; height: 6px; margin-top: -2px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg); }
.radio input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); }
.check input:focus-visible, .radio input:focus-visible, .switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.check input[disabled], .radio input[disabled] { opacity: .4; cursor: not-allowed; }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font: 400 17px/1.4 var(--text); }
.switch input { appearance: none; -webkit-appearance: none; position: relative; width: 52px; height: 32px; margin: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background-color .25s; flex: none; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--spring); }
.switch input:checked { background: var(--fg); }
.switch input:checked::after { transform: translateX(20px); }
.switch input[disabled] { opacity: .4; cursor: not-allowed; }

.range { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; background: var(--line); border-radius: 99px; outline-offset: 6px; }
.range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: grab; }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--fg); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }

.drop { display: grid; place-items: center; gap: 6px; padding: var(--s4) var(--s3); text-align: center; border: 1.5px dashed var(--line); border-radius: var(--r-card); corner-shape: squircle; color: var(--muted); transition: border-color .2s, background-color .2s; cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--fg); background: var(--surface); color: var(--fg); }

/* ── Cards and media ──────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r-card); corner-shape: squircle; padding: var(--s4); }
.card--sm { padding: var(--s3); border-radius: var(--r-inner); }
.card--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.card--flush { padding: 0; overflow: hidden; }
.card--solid { background: var(--fg); color: var(--bg); --muted: color-mix(in srgb, var(--bg) 62%, transparent); --line: color-mix(in srgb, var(--bg) 22%, transparent); }

.media { position: relative; overflow: hidden; border-radius: var(--r-inner); corner-shape: squircle; background: var(--surface); margin: 0; }
.media img, .media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--card { border-radius: var(--r-card); }
.media--sharp { border-radius: 0; }
.media--round { border-radius: 50%; corner-shape: round; }
.r-1-1 { aspect-ratio: 1 / 1; } .r-4-3 { aspect-ratio: 4 / 3; } .r-3-2 { aspect-ratio: 3 / 2; }
.r-16-10 { aspect-ratio: 16 / 10; } .r-16-9 { aspect-ratio: 16 / 9; } .r-21-9 { aspect-ratio: 21 / 9; }
.r-4-5 { aspect-ratio: 4 / 5; } .r-3-4 { aspect-ratio: 3 / 4; } .r-2-3 { aspect-ratio: 2 / 3; }
.media--hover img { transition: transform .9s var(--spring); }
.media--hover:hover img, a:hover > .media--hover img { transform: scale(1.04); }
figure { margin: 0; }
.figcap { margin-top: 8px; font: 400 11px/1.5 var(--text); color: var(--muted); }
.figcap b { color: var(--fg); font-weight: 600; }
.frame-shot { border: 1px solid var(--line); }      /* the guide: thin border on real screenshots */

/* ── Layout helpers ───────────────────────────────────────── */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s4); }
.container--narrow { max-width: 880px; }
.container--wide { max-width: 1520px; }
.section { padding-top: var(--s5); padding-bottom: var(--s5); }
.section--tight { padding-top: var(--s4); padding-bottom: var(--s4); }
.section--loose { padding-top: var(--s6); padding-bottom: var(--s6); }
.grid { display: grid; gap: var(--s3); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s4); align-items: center; }
.split--rev { grid-template-columns: 7fr 5fr; }
.split--top { align-items: start; }
.stack > * + * { margin-top: var(--gap, var(--s2)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--s2)); align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .g-3, .g-4, .split, .split--rev { grid-template-columns: 1fr; }
  .g-4.keep2 { grid-template-columns: repeat(2, 1fr); }
  .container { padding-left: var(--s2); padding-right: var(--s2); }
  .section { padding-top: var(--s4); padding-bottom: var(--s4); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .g-2 { grid-template-columns: 1fr; } }

/* ── Navigation parts ─────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 400 15px/1.4 var(--text); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { opacity: .5; }
.crumbs [aria-current] { color: var(--fg); }

.tabs { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border-radius: var(--r-pill); }
.tabs button { padding: 9px 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: 500 15px/1 var(--text); cursor: pointer; transition: color .2s, background-color .2s; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.tabs--line { background: none; padding: 0; gap: var(--s3); border-radius: 0; box-shadow: inset 0 -1px 0 var(--line); }
.tabs--line button { padding: 12px 0; border-radius: 0; background: none; position: relative; }
.tabs--line button[aria-selected="true"] { background: none; box-shadow: none; }
.tabs--line button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); }
.tabpanel[hidden] { display: none; }

.pager { display: flex; align-items: center; gap: 6px; }
.pager a, .pager span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-pill); font: 500 15px/1 var(--text); color: var(--muted); text-decoration: none; }
.pager a:hover { color: var(--fg); background: var(--surface); }
.pager [aria-current] { background: var(--fg); color: var(--bg); }

.toc { display: grid; gap: 2px; padding-left: 16px; border-left: 1px solid var(--line); font: 400 15px/1.4 var(--text); }
.toc a { padding: 6px 0; color: var(--muted); text-decoration: none; position: relative; }
.toc a:hover { color: var(--fg); }
.toc a.is-active { color: var(--fg); font-weight: 600; }
.toc a.is-active::before { content: ""; position: absolute; left: -17px; top: 8px; bottom: 8px; width: 2px; background: var(--fg); }

.menu { display: grid; min-width: 240px; padding: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-inner); corner-shape: squircle; }
.menu a, .menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--fg); font: 400 15px/1.3 var(--text); text-align: left; text-decoration: none; border-radius: 12px; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface); }
.menu .icon { color: var(--muted); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu .kbd { margin-left: auto; }

.site-foot { padding: var(--s5) 0 var(--s4); border-top: 1px solid var(--line); }
.site-foot h4 { font: 600 15px/1.3 var(--text); margin: 0 0 var(--s2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-foot a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-foot a:hover { color: var(--fg); }
.site-foot .legal { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ── Page sections ────────────────────────────────────────── */
.sec-head { display: grid; gap: var(--s2); margin-bottom: var(--s4); max-width: 60ch; }
.sec-head--row { max-width: none; grid-template-columns: 5fr 7fr; align-items: end; gap: var(--s4); }
.sec-head .lede { max-width: 52ch; }

.hero-c { text-align: center; padding: var(--s6) 0 var(--s5); }
.hero-c .h1, .hero-c .display { max-width: 17ch; margin: 0 auto; }
.hero-c .lede { margin: var(--s3) auto 0; }
.hero-c .btn-row { justify-content: center; margin-top: var(--s4); }
.hero-l { padding: var(--s6) 0 var(--s5); }
.hero-l .display, .hero-l .h1 { max-width: 16ch; }
.hero-l .lede { margin-top: var(--s3); }
.hero-l .btn-row { margin-top: var(--s4); }

.stat { display: grid; gap: 6px; }
.stat b { font: 800 clamp(44px, 6vw, 72px)/1 var(--display); letter-spacing: -0.05em; }
.stat span { font: 400 15px/1.45 var(--text); color: var(--muted); max-width: 26ch; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s3); padding-top: var(--s3); border-top: 8px solid var(--fg); }

.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.feature-row--rev > :first-child { order: 2; }
.feature-row h3 { font: 800 32px/1.1 var(--display); letter-spacing: -0.04em; margin: 0; }
.feature-row p { margin-top: var(--s2); color: var(--muted); font-size: 19px; line-height: 1.5; max-width: 44ch; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.steps li { list-style: none; counter-increment: step; padding-top: var(--s2); border-top: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--s3); font: 600 13px/1 var(--text); color: var(--muted); }
.steps h4 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin: 0 0 10px; }
.steps p { margin: 0; font-size: 15px; color: var(--muted); }

.rows { display: grid; }
.row { display: grid; grid-template-columns: 2fr 5fr 5fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); align-items: baseline; }
.row:last-child { border-bottom: 1px solid var(--line); }
.row .yr { color: var(--muted); font-size: 15px; }
.row .ttl { font: 700 24px/1.2 var(--display); letter-spacing: -0.03em; }
.row .out { color: var(--muted); font-size: 15px; }

.timeline { display: grid; gap: 0; }
.timeline > div { display: grid; grid-template-columns: 140px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.timeline time { color: var(--muted); font-size: 15px; }
.timeline h4 { font: 700 19px/1.3 var(--display); letter-spacing: -0.02em; margin: 0 0 4px; }
.timeline p { margin: 0; color: var(--muted); font-size: 15px; max-width: 54ch; }

.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s3) 0; cursor: pointer; font: 700 19px/1.3 var(--display); letter-spacing: -0.02em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23888' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M14 8v12M8 14h12'/%3E%3C/svg%3E") center/28px no-repeat; transition: transform .5s var(--spring); }
.acc details[open] summary::after { transform: rotate(135deg); }
.acc .acc-body { padding: 0 0 var(--s3); max-width: 62ch; color: var(--muted); }

.quote { margin: 0; }
.quote blockquote { margin: 0; font: 800 clamp(28px, 3.6vw, 44px)/1.12 var(--display); letter-spacing: -0.04em; text-wrap: balance; }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); font-size: 15px; color: var(--muted); }
.quote figcaption b { color: var(--fg); font-weight: 600; display: block; }
.quote--pull { padding-top: var(--s3); border-top: 8px solid var(--fg); }
.quote--pull blockquote { color: var(--link); font-size: clamp(26px, 3vw, 36px); }
.quote--card { background: var(--surface); border-radius: var(--r-card); corner-shape: squircle; padding: var(--s4); }
.quote--card blockquote { font: 600 21px/1.4 var(--text); letter-spacing: -0.01em; }

.band { padding: var(--s6) 0; }
.band h2 { font: 800 clamp(34px, 4.6vw, 52px)/1.05 var(--display); letter-spacing: -0.045em; max-width: 16ch; margin: 0; }
.band p { margin-top: var(--s2); max-width: 44ch; color: var(--muted); font-size: 19px; }
.band .btn-row { margin-top: var(--s4); }
.band--center { text-align: center; }
.band--center h2, .band--center p { margin-left: auto; margin-right: auto; }
.band--center .btn-row { justify-content: center; }

/* ── Work ─────────────────────────────────────────────────── */
.project { display: grid; gap: var(--s2); text-decoration: none; color: inherit; }
.project .meta { display: flex; justify-content: space-between; gap: var(--s2); font-size: 13px; color: var(--muted); }
.project h3 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin: 0; max-width: 24ch; }
.project p { margin: 0; color: var(--muted); font-size: 15px; max-width: 44ch; }
.project .go { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: 500; font-size: 15px; }
.project .go .icon { transition: transform .45s var(--spring); }
.project:hover .go .icon { transform: translateX(4px); }
.project--feature { grid-template-columns: 7fr 5fr; gap: var(--s4); align-items: end; }
.project--feature h3 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.04em; }
.project--over { position: relative; }
.project--over .media { aspect-ratio: 4 / 5; }
.project--over .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s3); background: var(--black); color: var(--paper); border-radius: 0 0 var(--r-inner) var(--r-inner); }
.project--over .cap p { color: rgba(252,251,248,.7); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts dt { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 600; font-size: 15px; }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: var(--s2); }
.bento > * { min-height: 0; }
.bento .a { grid-column: span 4; grid-row: span 3; }
.bento .b { grid-column: span 2; grid-row: span 2; }
.bento .c { grid-column: span 2; grid-row: span 1; }
.bento .d { grid-column: span 3; grid-row: span 2; }
.bento .e { grid-column: span 3; grid-row: span 2; }
.bento .media { height: 100%; border-radius: var(--r-inner); }

.next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s4); }   /* two cards, as wide as the page's content */
.next a { display: grid; gap: 8px; align-content: space-between; min-height: 150px; padding: var(--s3); background: var(--surface); border-radius: var(--r-card); corner-shape: squircle; text-decoration: none; color: inherit; transition: background-color .25s; }
.next a:hover { background: var(--line); }
.next a + a { text-align: right; }
.next small { color: var(--muted); font-size: 13px; }
.next b { font: 800 26px/1.15 var(--display); letter-spacing: -0.035em; }

/* ── Writing ──────────────────────────────────────────────── */
.post-row { display: grid; grid-template-columns: 120px 1fr 200px; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); align-items: baseline; text-decoration: none; color: inherit; transition: padding .4s var(--spring); }
.post-row:hover { padding-left: 12px; }
.post-row time { color: var(--muted); font-size: 15px; }
.post-row h3 { font: 700 24px/1.2 var(--display); letter-spacing: -0.03em; margin: 0; }
.post-row p { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 56ch; }
.post-row .src { justify-self: end; }

.post { display: grid; gap: var(--s2); text-decoration: none; color: inherit; }
.post h3 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin: 0; }
.post p { margin: 0; color: var(--muted); font-size: 15px; }
.post .meta { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--muted); }

.ext { display: grid; gap: var(--s2); padding: var(--s3); background: var(--surface); border-radius: var(--r-card); corner-shape: squircle; }
.ext .from { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.ext .glyph { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--blue); color: var(--paper); font: 800 12px/1 var(--display); }
.ext p { margin: 0; font-size: 17px; line-height: 1.55; }
.ext .foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); padding-top: var(--s2); border-top: 1px solid var(--line); }

.byline { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.byline b { color: var(--fg); font-weight: 600; display: block; }

.codeblock { margin: 0; padding: var(--s3); background: var(--surface); border-radius: var(--r-inner); corner-shape: squircle; overflow-x: auto; font: 400 14px/1.7 var(--mono); }
.codeblock .k { color: var(--syn-keyword); } .codeblock .s { color: var(--syn-string); } .codeblock .c { color: var(--syn-comment); font-style: italic; }

/* ── Code blocks ──────────────────────────────────────────────
   One look for the live site (src/lib/highlight.ts writes the markup when a post is saved; code.js turns on the buttons) and for the admin's
   editor (admin-src/editor-theme.css gives CodeMirror the same box, font, numbers and colours). Rounded (squircle), numbered lines, coloured
   words; "Wrap" folds long lines instead of scrolling sideways. The colours are --syn-* in site.css (both themes, contrast-checked). */
.code { margin: 1.5em 0; background: var(--surface); border-radius: var(--r-inner); corner-shape: squircle; overflow: hidden; font: 400 14px/1.7 var(--mono); color: var(--fg); }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 44px; padding: 8px 10px 0 20px; }
.code-lang { font: 600 12px/1 var(--text); letter-spacing: 0; color: var(--syn-gutter); }
.code-tools { display: flex; gap: 6px; }
.code-tools[hidden] { display: none; }
.code-btn { min-height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 12px/1 var(--text); cursor: pointer; transition: background-color .2s, color .2s; -webkit-user-select: none; user-select: none; }
.code-btn:hover { background: var(--bg); }
.code-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.code-btn:focus-visible, .code-pre:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.code-pre { margin: 0; padding: 4px 20px 18px 16px; overflow-x: auto; tab-size: 2; -moz-tab-size: 2; }
.code-pre code { display: block; min-width: max-content; counter-reset: ln; font: inherit; background: none; padding: 0; border-radius: 0; }
.ln { display: block; padding-left: 4em; text-indent: -4em; }
.ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 2.6em; margin-right: 1.4em; text-align: right; text-indent: 0; color: var(--syn-gutter); -webkit-user-select: none; user-select: none; }
.code.is-wrap .code-pre code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tok-keyword { color: var(--syn-keyword); } .tok-string { color: var(--syn-string); } .tok-number { color: var(--syn-number); }
.tok-comment { color: var(--syn-comment); font-style: italic; } .tok-function { color: var(--syn-function); } .tok-type { color: var(--syn-type); }
.tok-property { color: var(--syn-property); } .tok-op { color: var(--syn-op); } .tok-invalid { color: var(--syn-invalid); text-decoration: underline wavy; }

/* ── Tools ────────────────────────────────────────────────── */
.tool { display: grid; gap: var(--s2); padding: var(--s3); background: var(--surface); border-radius: var(--r-card); corner-shape: squircle; text-decoration: none; color: inherit; transition: transform .6s var(--spring); }
.tool:hover { transform: translateY(-4px); }
.tool .mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; corner-shape: squircle; background: var(--blue); color: var(--yellow); }
.tool h3 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin: 0; }
.tool p { margin: 0; color: var(--muted); font-size: 15px; }
.tool .host { font-size: 13px; color: var(--muted); }

/* ── Feedback ─────────────────────────────────────────────── */
.alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; background: var(--surface); border-radius: var(--r-inner); corner-shape: squircle; font-size: 15px; }
.alert .icon { margin-top: 1px; }
.alert b { display: block; font-weight: 600; }
.alert p { margin: 2px 0 0; color: var(--muted); }
.alert--error .icon { color: var(--red); }
.alert--ok .icon { color: var(--green); }
.alert--info .icon { color: var(--link); }
.alert .x { margin-left: auto; }

.toast { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; background: var(--fg); color: var(--bg); border-radius: var(--r-pill); font: 500 15px/1.3 var(--text); }
.toast .btn { background: var(--bg); color: var(--fg); min-height: 32px; padding: 6px 14px; font-size: 14px; }
.toast-zone { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast-zone .toast { pointer-events: auto; animation: toast-in .6s var(--spring) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }

.scrim { background: rgba(23, 30, 33, .55); display: grid; place-items: center; padding: var(--s4); border-radius: var(--r-inner); }
.dialog { width: min(100%, 460px); padding: var(--s4); background: var(--bg); color: var(--fg); border-radius: var(--r-card); corner-shape: squircle; border: 1px solid var(--line); }
.dialog h3 { font: 800 24px/1.15 var(--display); letter-spacing: -0.03em; margin: 0 0 var(--s1); }
.dialog p { margin: 0 0 var(--s3); color: var(--muted); }
dialog.dialog { margin: auto; }
dialog.dialog::backdrop { background: rgba(23, 30, 33, .55); }
dialog.dialog[open] { animation: toast-in .6s var(--spring) both; }

.tip { position: relative; }
.tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px) scale(.96); padding: 7px 12px; background: var(--fg); color: var(--bg); font: 500 13px/1.3 var(--text); white-space: nowrap; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .5s var(--spring); z-index: 5; }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }

.popover { width: min(100%, 320px); padding: var(--s3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-inner); corner-shape: squircle; }

.spinner { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--fg); animation: spin .8s linear infinite; }
.progress { height: 8px; background: var(--surface); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: var(--v, 40%); background: var(--fg); border-radius: 99px; transition: width .8s var(--spring); }
.skeleton { background: var(--surface); border-radius: 12px; position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 7%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.6s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

.empty { display: grid; justify-items: center; gap: var(--s2); text-align: center; padding: var(--s5) var(--s3); border: 1.5px dashed var(--line); border-radius: var(--r-card); corner-shape: squircle; }
.empty .glyph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); color: var(--muted); }
.empty p { margin: 0; color: var(--muted); max-width: 36ch; }

.cookie { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 14px 14px 14px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 28px; corner-shape: squircle; max-width: 720px; font-size: 15px; }
.cookie p { margin: 0; color: var(--muted); }

/* ── Tables ───────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 0 var(--s2) 12px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 16px var(--s2) 16px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .ttl { font-weight: 600; }
.table-wrap { overflow-x: auto; }

/* ── Admin ────────────────────────────────────────────────── */
.admin { container-type: inline-size; container-name: admin; display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 640px; border: 1px solid var(--line); border-radius: var(--r-card); corner-shape: squircle; overflow: hidden; background: var(--bg); color: var(--fg); }
.admin .side { padding: var(--s3) var(--s2); border-right: 1px solid var(--line); display: grid; align-content: start; gap: 4px; background: var(--surface); }
.admin .side .brand-s { display: flex; align-items: center; gap: 10px; padding: 8px 12px var(--s3); font: 700 17px var(--display); letter-spacing: -0.02em; }
.admin .side a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 15px; }
.admin .side a:hover { color: var(--fg); background: var(--line); }
.admin .side a.is-active { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.admin .side .grp { margin: var(--s2) 12px 6px; font-size: 13px; color: var(--muted); }
.admin .main { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.admin .top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 14px var(--s3); border-bottom: 1px solid var(--line); }
.admin .body { padding: var(--s3); display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.dash-a { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s2); }
.dash-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
@container admin (max-width: 880px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-a, .dash-b { grid-template-columns: minmax(0, 1fr); }
  .admin .top { flex-wrap: wrap; }
}
.kpi { padding: var(--s3); background: var(--surface); border-radius: var(--r-inner); corner-shape: squircle; display: grid; gap: 6px; }
.kpi small { color: var(--muted); font-size: 13px; }
.kpi b { font: 800 clamp(26px, 3.2vw, 34px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kpi .delta { font-size: 13px; font-weight: 600; color: var(--green); }
.kpi .delta.down { color: var(--red); }
.panel { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-inner); corner-shape: squircle; min-width: 0; }
.panel > h4 { font: 700 15px/1.3 var(--text); margin: 0 0 var(--s2); display: flex; justify-content: space-between; align-items: center; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font: 400 11px var(--text); }
.chart .area { fill: color-mix(in srgb, var(--blue) 14%, transparent); }
.chart .line { fill: none; stroke: var(--link); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .bar { fill: var(--fg); opacity: .9; }
.chart .bar.hi { fill: var(--blue); opacity: 1; }
.heat { position: relative; border-radius: var(--r-inner); corner-shape: squircle; overflow: hidden; background: var(--surface); }
.heat img { display: block; width: 100%; }
.heat i { position: absolute; width: var(--s); height: var(--s); left: var(--x); top: var(--y); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(247,67,57,.75), rgba(252,79,209,.38) 45%, transparent 70%); mix-blend-mode: normal; pointer-events: none; }
.bars-h { display: grid; gap: 14px; }
.bars-h div { display: grid; gap: 6px; font-size: 15px; }
.bars-h div > span { display: flex; justify-content: space-between; }
.bars-h .progress { height: 6px; }

.editor { display: grid; grid-template-columns: 1fr 280px; gap: 0; border: 1px solid var(--line); border-radius: var(--r-card); corner-shape: squircle; overflow: hidden; background: var(--bg); }
.editor .edoc { padding: var(--s4); display: grid; gap: var(--s2); align-content: start; }
.editor .opts { padding: var(--s3); border-left: 1px solid var(--line); background: var(--surface); display: grid; gap: var(--s3); align-content: start; }
.etb { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--surface); border-radius: var(--r-pill); width: max-content; max-width: 100%; }
.etb button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font: 700 15px var(--text); }
.etb button:hover { background: var(--line); color: var(--fg); }
.etb button.is-on { background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.etb .sep { width: 1px; background: var(--line); margin: 6px 4px; }
.title-in { width: 100%; border: 0; outline: 0; background: none; color: var(--fg); font: 800 clamp(30px, 4vw, 44px)/1.1 var(--display); letter-spacing: -0.045em; padding: 0; }
.title-in::placeholder { color: var(--muted); opacity: .5; }
.block-add { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.block-add i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-style: normal; }

.login { display: grid; place-items: center; padding: var(--s5) var(--s3); background: var(--surface); border-radius: var(--r-card); corner-shape: squircle; }
.login .box { width: min(100%, 380px); display: grid; gap: var(--s3); }

/* ── Pinboard ─────────────────────────────────────────────── */
.board { position: relative; height: 640px; overflow: hidden; border-radius: var(--r-card); corner-shape: squircle; background: var(--surface); background-image: radial-gradient(color-mix(in srgb, var(--fg) 22%, transparent) 1.1px, transparent 1.6px); background-size: 28px 28px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.board.is-pan { cursor: grabbing; }
.board-inner { position: absolute; inset: 0; will-change: transform; }
.pin { position: absolute; width: var(--w, 220px); background: var(--bg); border-radius: var(--r-inner); corner-shape: squircle; overflow: hidden; box-shadow: 0 0 0 1px var(--line); cursor: grab; transition: transform .5s var(--spring); }
@media (hover: hover) { .pin:hover { transform: translateY(-4px); z-index: 3; } }      /* (a finger would leave the card lifted after a tap) */
.pin.is-drag { cursor: grabbing; transform: scale(1.03); z-index: 5; transition: none; }
.pin .media { border-radius: 0; }
.pin .pad { padding: 14px 16px 16px; display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.pin .pad b { color: var(--fg); font: 700 17px/1.2 var(--display); letter-spacing: -0.02em; }
.pin--note { padding: 18px; background: var(--yellow); color: var(--black); box-shadow: none; font: 600 17px/1.3 var(--text); }
.pin--quote { padding: 20px; background: var(--blue); color: var(--paper); box-shadow: none; font: 800 22px/1.15 var(--display); letter-spacing: -0.03em; }
.pin--tag { width: auto; padding: 9px 16px; border-radius: 999px; font: 600 15px/1 var(--text); background: var(--fg); color: var(--bg); box-shadow: none; }
.board-hint { position: absolute; left: 16px; bottom: 16px; z-index: 6; }
/* Zoom controls on the board (public site and admin) */
.board-zoom { position: absolute; right: 16px; bottom: 16px; z-index: 12; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.board-zoom button { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--fg); font: 600 14px var(--text); cursor: pointer; }
.board-zoom button:hover { background: var(--surface); }
.board-zoom button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.board-zoom .z-label { min-width: 54px; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (pointer: coarse) { .board-zoom button { min-width: 44px; height: 44px; } .board-zoom .z-label { min-width: 58px; } }
.board svg.link-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.board svg.link-lines path, .pb svg.link-lines path { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 6; stroke-linecap: round; }
.board svg.link-lines path.is-solid, .pb svg.link-lines path.is-solid { stroke-dasharray: none; }
.board svg.link-lines marker path, .pb svg.link-lines marker path { fill: var(--muted); stroke: none; stroke-dasharray: none; }

/* ── Motion demos ─────────────────────────────────────────── */
.bounce-box { width: 96px; height: 96px; border-radius: 28px; corner-shape: squircle; background: var(--blue); transition: transform .9s var(--spring); }
.bounce-box.is-moved { transform: translateX(220px) rotate(0.001deg); }

@media (max-width: 900px) {
  .sec-head--row, .feature-row, .project--feature, .editor { grid-template-columns: 1fr; }
  .sec-head--row { gap: var(--s1); }
  .feature-row--rev > :first-child { order: 0; }
  .stats, .steps, .facts, .kpis { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; gap: 6px; }
  .post-row { grid-template-columns: 1fr; gap: 6px; }
  .post-row .src { justify-self: start; }
  .timeline > div { grid-template-columns: 1fr; gap: 4px; }
  .admin { grid-template-columns: 1fr; }
  .admin .side { display: none; }
  .editor .opts { border-left: 0; border-top: 1px solid var(--line); }
  .next { grid-template-columns: 1fr; padding: 0 var(--s2); }
  .next a { min-height: 0; }
  .next a + a { text-align: left; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .bento .a, .bento .d, .bento .e { grid-column: span 2; }
  .bento .b, .bento .c { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .media--hover img, .tool, .post-row, .pin, .bounce-box, .switch input::after, .acc summary::after { transition: none !important; }
  .toast-zone .toast, dialog.dialog[open], .skeleton::after, .spinner { animation: none !important; }
}

/* ── Carousel (carousel.js): the featured projects when there is more than one ── */
.car-track { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline-offset: 6px; }
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.car-ctl { display: flex; align-items: center; justify-content: center; gap: var(--s1); margin-top: var(--s2); }
.car-ctl[hidden] { display: none; }
.car-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--fg); cursor: pointer; transition: background-color .2s, opacity .2s; }
.car-btn:hover:not(:disabled) { background: var(--surface); }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-btn .icon { width: 16px; height: 16px; }
.car-btn:focus-visible, .car-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.car-dots { display: flex; align-items: center; }
.car-dot { width: 20px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.car-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 28%, transparent); transition: width .45s var(--spring), background-color .2s; }
.car-dot.is-on::before { width: 20px; background: var(--fg); }
.car-btn, .car-dot { -webkit-user-select: none; user-select: none; }

/* ── Columns and carousels inside written text (posts, pages): src/lib/markdown.ts writes these, the editor draws them the same way ── */
.md-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; margin: 1.5em 0; }
.md-column > :first-child { margin-top: 0; } .md-column > :last-child { margin-bottom: 0; }
.md-column img, .md-carousel img { display: block; width: 100%; height: auto; border-radius: var(--r-inner); corner-shape: squircle; }
.prose .md-column img, .prose .md-carousel img { margin: 0; }
.md-column p:has(> img:only-child) { margin: 0; }
.md-carousel { margin: 1.5em 0; }
.md-carousel .car-slide > :first-child { margin-top: 0; } .md-carousel .car-slide > :last-child { margin-bottom: 0; }
.md-carousel .car-slide p:has(> img:only-child) { margin: 0; }
.md-carousel .car-slide img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 700px) { .md-columns { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }

/* ── Picture captions: under the picture, or a small "i" in the corner that opens a frosted pill with the words (hover, tap or keys), with a little bounce.
   Markup is written by src/lib/markdown.ts (pictures in written text) and src/site/sections.ts (sections); captions.js opens and closes it by tap and sets --cap-w. ── */
.cap-fig { position: relative; margin: 1.6em 0; }
.cap-fig img { margin: 0; }
.cap-fig .figcap { margin-top: 8px; }
/* The info icon: a small round button in the picture's corner, set in from the corner by about half the picture's own corner radius (--cap-inset) so it sits comfortably against the curve. Opened (hover, tap or keys) it grows into a frosted pill holding the words when they fit on one row,
   or into a rounded rectangle when they take several; the icon then sits in its top left corner. captions.js measures the words (--cap-w, --cap-h, --cap-r). */
.cap-box { --cap-i: 18px; --cap-inset: 18px; position: absolute; right: var(--cap-inset); bottom: var(--cap-inset); z-index: 3; box-sizing: border-box; width: var(--cap-i); height: var(--cap-i); max-width: calc(100% - 2 * var(--cap-inset)); border: 1px solid var(--line); border-radius: calc(var(--cap-i) / 2); overflow: hidden; color: var(--fg); background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); min-width: var(--cap-i); min-height: var(--cap-i); transition: width .6s cubic-bezier(.45, 0, .15, 1), height .6s cubic-bezier(.45, 0, .15, 1), border-radius .6s cubic-bezier(.45, 0, .15, 1); }       /* closing is smooth, slowing gently as it arrives, with no bounce; the circle then dips and settles (.is-dip, captions.js) */
.cap-btn { position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; box-sizing: border-box; width: calc(var(--cap-i) - 2px); height: calc(var(--cap-i) - 2px); padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.cap-btn .icon { width: 11px; height: 11px; }
@media (pointer: coarse) { .cap-box { --cap-i: 26px; } .cap-btn .icon { width: 14px; height: 14px; } }      /* a fingertip needs a little more */
.cap-btn { transition: top .6s cubic-bezier(.45, 0, .15, 1), left .6s cubic-bezier(.45, 0, .15, 1); }
.cap-box.is-open .cap-btn, .cap-box.is-hover .cap-btn { top: var(--cap-top, 0); left: var(--cap-top, 0); }      /* opened, the round icon sits the same distance from the top and the left edge, so it sits evenly in the pill's end or the box's corner */
.cap-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.cap-text { display: block; padding-left: calc(var(--cap-i) + 2px); }
.cap-text > span { display: block; width: max-content; max-width: min(240px, 62vw); padding: 3px 10px 3px 2px; font: 500 11px/1.4 var(--text); text-align: left; white-space: normal; }
.cap-box.is-open, .cap-box.is-hover { width: var(--cap-w, 260px); height: var(--cap-h, auto); border-radius: var(--cap-r, 999px); transition: width .7s var(--spring), height .7s var(--spring), border-radius .5s cubic-bezier(.2, .8, .2, 1); }      /* opening has the little bounce (not on the corner: its overshoot would make it square for a moment) */
.cap-box.is-dip { animation: cap-dip .45s cubic-bezier(.3, .7, .2, 1); }
@keyframes cap-dip { 40% { transform: scale(.84); } }      /* the closed circle gets a little smaller, icon still in the middle, and settles back */
@media (prefers-reduced-motion: reduce) { .cap-box { transition: none; } .cap-box.is-dip { animation: none; } }
.cap-credit { display: block; color: var(--muted); }
.cap-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cap-credit a:hover { color: var(--fg); }
.cap-btn, .cap-box { -webkit-user-select: none; user-select: none; }
.cap-box .cap-text > span { -webkit-user-select: text; user-select: text; }

.md-carousel .cap-fig, .md-column .cap-fig { margin: 0; }