/* ============================================================
   Nomad Stack — site styles
   Themes via [data-theme="mono" | "sand"] on .app
   ============================================================ */

:root {
  --scale: 1;
  --density: 1;
  --radius: 4px;
  --maxw: 1200px;
  --gutter: 32px;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Theme: Monochrome ---------- */
[data-theme="mono"] {
  --paper: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #111110;
  --ink-soft: #3A3A38;
  --muted: #76746E;
  --line: #E6E5E0;
  --line-strong: #D5D4CE;
  --accent: #0F0F0F;
  --accent-ink: #FFFFFF;
  --pill-bg: #111110;
  --pill-ink: #FAFAF8;
  --ph-1: #ECEBE7;
  --ph-2: #DAD9D3;
  --ph-line: 17, 17, 16;
  --ph-line-op: 0.10;
}

/* ---------- Theme: Sand + Ocean blue ----------
   Kept available but not user-switchable. To run the whole site on it, set
   data-theme="sand" on .app in layout() (lib/templates.js). */
[data-theme="sand"] {
  --paper: #F4EEE2;
  --surface: #FBF7EE;
  --ink: #20303C;
  --ink-soft: #3C4D58;
  --muted: #7A6F5C;
  --line: #E3D9C6;
  --line-strong: #D3C6AE;
  --accent: #1E6BA8;
  --accent-ink: #FFFFFF;
  --pill-bg: #20303C;
  --pill-ink: #F4EEE2;
  --ph-1: #ECE3D2;
  --ph-2: #D8E2E6;
  --ph-line: 30, 107, 168;
  --ph-line-op: 0.14;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.app { background: var(--paper); transition: background .35s ease, color .35s ease; min-height: 100vh; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mono { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: var(--radius); font-family: var(--font-mono); font-size: 12.5px;
  transition: top .2s var(--ease-out);
}
.skiplink:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 10px 16px; border-radius: var(--radius);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, filter .18s ease;
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform .22s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--solid:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn--ghost { border: 1.5px solid var(--ink); color: var(--ink); padding: 11px 18px; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.link { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--accent); transition: opacity .15s; }
.link:hover { opacity: .65; }
.link--sm { font-size: 11.5px; }
.pagehead__sub .link, .post__body .link { font-size: inherit; font-weight: 600; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background .3s ease;
}
.nav.is-stuck { box-shadow: 0 10px 30px -22px rgba(0,0,0,.45); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 28px; }
.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 24px; width: auto; display: block; }
.brand__logo--foot { height: 22px; }
/* The wordmark ships as dark navy artwork; nudge it toward the active ink so it
   sits correctly on both the mono paper and the warmer sand paper. */
[data-theme="sand"] .brand__logo { filter: sepia(.18) saturate(1.1); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.brand__name-accent { color: var(--muted); }
.brand__tld { font-size: 12px; color: var(--muted); }
.nav__links { display: flex; gap: 26px; margin-left: 8px; flex: 1; }
.nav__link { font-size: 14px; font-weight: 500; color: var(--ink-soft); transition: color .15s; position: relative; padding: 6px 0; white-space: nowrap; display: inline-flex; align-items: center; }
.nav__link:hover { color: var(--ink); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .2s ease; }
.nav__link:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.iconbtn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); color: var(--ink-soft); transition: background .15s, color .15s; }
.iconbtn:hover { background: var(--line); color: var(--ink); }
.nav__burger { display: none; }

.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { width: 100%; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__chev { margin-left: 5px; opacity: .55; transition: transform .18s ease; }
.nav__item:hover .nav__chev { transform: rotate(180deg); }

/* Mega menu */
.mega { position: absolute; top: 100%; left: -18px; padding-top: 16px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .22s var(--ease-out), visibility .18s; }
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__panel { width: 580px; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); box-shadow: 0 28px 64px -28px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.05); padding: 10px; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.megaitem { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border-radius: var(--radius); transition: background .15s; }
.megaitem:hover { background: var(--paper); }
.megaitem__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); transition: color .15s; }
.megaitem:hover .megaitem__label { color: var(--accent); }
.megaitem__desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.megaitem__count { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.mega__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 8px; padding: 12px 14px 4px; }
.mega__total { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Search overlay */
.search { position: fixed; inset: 0; z-index: 90; display: none; }
.search.is-open { display: block; }
.search__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); backdrop-filter: blur(3px); }
.search__panel {
  position: relative; max-width: 620px; margin: 12vh auto 0; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); overflow: hidden;
}
.search__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.search__input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-body); font-size: 16px; color: var(--ink); }
.search__esc { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; border: 1px solid var(--line-strong); border-radius: 3px; padding: 3px 6px; color: var(--muted); }
.search__results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.search__hit { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: var(--radius); transition: background .13s; }
.search__hit:hover, .search__hit.is-sel { background: var(--paper); }
.search__hit-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.search__hit-title { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.search__empty { padding: 26px 14px; text-align: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }

/* ---------- Hero ---------- */
/* ---------- Homepage hero ---------- */
.herohome { position: relative; overflow: hidden; padding-top: calc(96px * var(--density)); padding-bottom: calc(84px * var(--density)); border-bottom: 1px solid var(--line); }
.herohome__plate { position: absolute; inset: 0; pointer-events: none; }
.herohome__topo {
  position: absolute; inset: -20% -10%;
  background-image: url("../img/topo.svg");
  background-size: 460px;
  opacity: calc(var(--ph-line-op) * 1.15);
  mix-blend-mode: multiply;
  /* fade the contours out toward the copy so the type stays crisp */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  will-change: transform;
}
.herohome__inner { position: relative; max-width: 940px; text-align: center; }
.herohome .eyebrow { margin-bottom: 26px; }
.herohome__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(clamp(42px, 6.4vw, 76px) * var(--scale));
  line-height: 1.02; letter-spacing: -.032em; margin: 0 0 24px; color: var(--ink); text-wrap: balance;
}
.herohome__sub { font-size: calc(18.5px * var(--scale)); line-height: 1.6; color: var(--ink-soft); margin: 0 auto 34px; max-width: 40em; text-wrap: pretty; }
.herohome__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn--lg { font-size: 13.5px; padding: 15px 26px; }
.btn--ghost.btn--lg { padding: 14px 26px; }
.herohome__meta { margin: 22px 0 0; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.herohome__latest {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 42px; max-width: 100%;
  padding: 10px 16px 10px 10px; border: 1px solid var(--line); border-radius: 100px;
  background: var(--surface); transition: border-color .18s ease, transform .22s var(--ease-out);
}
.herohome__latest:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.herohome__latest-tag { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--pill-bg); color: var(--pill-ink); padding: 5px 10px; border-radius: 100px; }
.herohome__latest-title { font-size: 13.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.herohome__latest:hover .herohome__latest-title { color: var(--ink); }
.herohome__latest-go { flex: none; color: var(--accent); font-size: 13px; }

.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding-top: calc(68px * var(--density)); padding-bottom: calc(64px * var(--density)); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.eyebrow__pill { background: var(--pill-bg); color: var(--pill-ink); padding: 4px 9px; border-radius: 3px; letter-spacing: .08em; white-space: nowrap; }
.eyebrow__sep { color: var(--line-strong); }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: calc(54px * var(--scale)); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 22px; color: var(--ink); text-wrap: balance; }
.hero__excerpt { font-size: calc(18px * var(--scale)); line-height: 1.55; color: var(--ink-soft); max-width: 30em; margin: 0 0 26px; text-wrap: pretty; }
.byline { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); margin-bottom: 30px; flex-wrap: wrap; }
.byline__author { color: var(--ink); font-weight: 600; }
.byline__dot { color: var(--line-strong); }
.hero__media { position: relative; }

/* ---------- Image placeholder ---------- */
.ph {
  position: relative; width: 100%; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ph-1), var(--ph-2));
  border: 1px solid var(--line);
}
.ph__topo {
  position: absolute; inset: -12% -6%;
  background-image: url("../img/topo.svg");
  background-size: 300px;
  opacity: var(--ph-line-op);
  mix-blend-mode: multiply;
  will-change: transform;
}
.ph__meta { position: absolute; left: 14px; bottom: 13px; display: flex; flex-direction: column; gap: 3px; z-index: 2; }
.ph__code { font-size: 10.5px; letter-spacing: .12em; color: rgba(var(--ph-line), .55); }
.ph__label { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: rgba(var(--ph-line), .82); }
.ph__corner { position: absolute; right: 12px; top: 11px; font-size: 9.5px; letter-spacing: .18em; color: rgba(var(--ph-line), .42); z-index: 2; }
.ph--big { box-shadow: 0 22px 50px -28px rgba(0,0,0,.32); }
.ph--img { background: var(--surface); }
/* Letterboxed artwork (wide banners, square product shots) sits on the plate
   rather than being cropped; the topo tint keeps it from reading as a gap. */
.ph--fit { background: linear-gradient(135deg, var(--ph-1), var(--ph-2)); padding: 10px; }
.ph--fit img { transform: none !important; }
.ph--img img { width: 100%; height: 100%; display: block; transition: transform .5s var(--ease-out); }
.cardlink:hover .ph--img img { transform: scale(1.04); }
/* Contained artwork (logos, product cut-outs) needs breathing room and a plate
   that doesn't fight a white cut-out background. */
.recimg .ph--img { background: var(--paper); padding: 14px; }
.recimg .ph--img img { mix-blend-mode: multiply; }
[data-theme="sand"] .recimg .ph--img { background: #fff; }
.reclogo img { width: 30px; height: 30px; object-fit: contain; }

/* ---------- Stats ---------- */
.herohome + .wrap .stats { margin-top: calc(64px * var(--density)); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: calc(80px * var(--density)); }
.stat { background: var(--surface); padding: calc(26px * var(--density)) 26px; }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: calc(34px * var(--scale)); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ---------- Section title / filter ---------- */
.sectiontitle { font-family: var(--font-display); font-weight: 700; font-size: calc(26px * var(--scale)); letter-spacing: -.02em; margin: 0; color: var(--ink); }
.filterbar { margin-bottom: 28px; }
.filterbar__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.filterbar__count { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); border: 1px solid var(--line-strong); background: var(--surface); padding: 8px 14px; border-radius: 100px; transition: all .16s ease; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- Article grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28px * var(--density)); margin-bottom: calc(90px * var(--density)); }
.cardlink { display: block; color: inherit; }
.card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); transition: transform .28s var(--ease-out), border-color .2s ease, box-shadow .28s ease; }
.cardlink:hover .card { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 44px -32px rgba(0,0,0,.4); }
.card__body { padding: 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card__cat { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: calc(20px * var(--scale)); line-height: 1.18; letter-spacing: -.015em; margin: 0; color: var(--ink); transition: color .18s; }
.cardlink:hover .card__title { color: var(--accent); }
.card__excerpt { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
.card__meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); margin-top: auto; padding-top: 4px; }
.card .ph { border-radius: 0; border: none; border-bottom: 1px solid var(--line); }
.card .ph__topo { transition: transform .5s var(--ease-out); }
.cardlink:hover .card .ph__topo { transform: scale(1.06); }
.card .ph--img { overflow: hidden; }
.grid__empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.grid .cardlink.is-hidden { display: none; }

/* ---------- Featured dispatch ---------- */
.feature { padding-bottom: calc(64px * var(--density)); }
.feature__card {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
  transition: border-color .2s ease, transform .28s var(--ease-out), box-shadow .28s ease;
}
.feature__card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 28px 50px -34px rgba(0,0,0,.42); }
.feature__media .ph { height: 100%; border: none; border-radius: 0; aspect-ratio: auto !important; min-height: 320px; }
.feature__media .ph--img img { height: 100%; }
.feature__card .ph--img img { transition: transform .5s var(--ease-out); }
.feature__card:hover .ph--img img { transform: scale(1.03); }
.feature__body { padding: 34px 36px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.feature__cat { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.feature__title { font-family: var(--font-display); font-weight: 700; font-size: calc(29px * var(--scale)); line-height: 1.14; letter-spacing: -.02em; margin: 0; color: var(--ink); text-wrap: balance; transition: color .18s; }
.feature__card:hover .feature__title { color: var(--accent); }
.feature__excerpt { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
.feature__cta { align-self: flex-start; margin-top: 8px; }

/* ---------- Recent strip ---------- */
.recent { padding-bottom: 0; }
.recent + .grid { margin-bottom: calc(80px * var(--density)); }

/* ---------- Our own software ---------- */
.ownsw { padding-bottom: calc(88px * var(--density)); }
.ownsw__lead { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: -8px 0 26px; max-width: 46em; text-wrap: pretty; }
.ownsw__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ownsw__card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px;
  transition: border-color .18s ease, transform .28s var(--ease-out), box-shadow .28s ease;
}
.ownsw__card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 22px 40px -32px rgba(0,0,0,.36); }
.ownsw__head { display: flex; align-items: center; gap: 12px; }
.ownsw__logo {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);
}
.ownsw__logo img { width: 100%; height: 100%; object-fit: cover; }
.ownsw__mono {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--accent-ink); background: var(--accent);
  width: 100%; height: 100%; display: grid; place-items: center;
}
.ownsw__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ownsw__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.ownsw__cat { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ownsw__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
.ownsw__tagline { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.26; letter-spacing: -.01em; color: var(--ink); margin: 4px 0 0; text-wrap: pretty; }
.ownsw__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 10px; }

/* ---------- Gear / recommendation cards ---------- */
.gear { padding-top: calc(20px * var(--density)); padding-bottom: calc(90px * var(--density)); }
.gear__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 20px; flex-wrap: wrap; }
.gear__head .eyebrow { margin-bottom: 12px; }
.gear__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24px * var(--density)); }
.gearcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 11px; transition: border-color .18s ease, transform .28s var(--ease-out), box-shadow .28s ease; }
.gearcard:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 22px 40px -32px rgba(0,0,0,.36); }
.gearcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gearcard__tag { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.gearcard__name { font-family: var(--font-display); font-weight: 600; font-size: calc(18px * var(--scale)); letter-spacing: -.01em; margin: 4px 0 0; color: var(--ink); }
.gearcard__type { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gearcard__note { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; flex: 1; }
.stars { display: inline-flex; align-items: center; gap: 8px; }
.stars__num { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stars__track { width: 54px; height: 4px; border-radius: 100px; background: var(--line); overflow: hidden; }
.stars__fill { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; }
.reclogo { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: flex; align-items: center; justify-content: center; margin: 2px 0 4px; }
.reclogo img { width: 26px; height: 26px; object-fit: contain; }
.recimg { margin: 2px 0 4px; }
.recimg .ph { border-radius: var(--radius); }

/* ---------- Homepage about ---------- */
.homeabout { display: grid; grid-template-columns: .8fr 2fr; gap: 48px; align-items: center; padding-bottom: calc(70px * var(--density)); }
.homeabout__photo .ph { border-radius: var(--radius); }
.homeabout .sectiontitle { margin-bottom: 18px; }
.homeabout__text { font-size: 16.5px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 22px; max-width: 36em; text-wrap: pretty; }


/* ---------- Newsletter ---------- */
.news { padding-bottom: calc(90px * var(--density)); }
.news__inner { background: var(--ink); color: var(--paper); border-radius: calc(var(--radius) + 4px); padding: clamp(34px, 6vw, 60px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; position: relative; overflow: hidden; }
.news__inner .eyebrow { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.news__inner .eyebrow__pill { background: var(--accent); color: var(--accent-ink); }
.news__title { font-family: var(--font-display); font-weight: 700; font-size: calc(32px * var(--scale)); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; color: var(--paper); }
.news__sub { font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--paper) 72%, transparent); margin: 0; max-width: 34em; text-wrap: pretty; }
.news__copy, .news__form, .news__success { position: relative; z-index: 1; }
.news__glow { position: absolute; width: 460px; height: 460px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); pointer-events: none; }
.news__form { width: 100%; }
.field { display: flex; gap: 8px; background: color-mix(in srgb, var(--paper) 10%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: var(--radius); padding: 7px; transition: border-color .18s; }
.field:focus-within { border-color: var(--accent); }
.field--error { border-color: #E06B5E; }
.field__input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--paper); font-size: 14px; padding: 8px 10px; }
.field__input::placeholder { color: color-mix(in srgb, var(--paper) 45%, transparent); }
.field .btn--solid { background: var(--accent); }
.field__err { color: #F0958A; font-size: 11.5px; margin-top: 9px; letter-spacing: .03em; }
.news__success { display: none; align-items: center; gap: 12px; font-size: 14px; color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: var(--radius); padding: 18px 20px; }
.news.is-sent .news__success { display: flex; }
.news.is-sent .news__form { display: none; }
.news__check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 13px; flex: none; }

/* ---------- Social ---------- */
.socialbtn { color: var(--ink-soft); }
.socialbtn:hover { background: var(--line); color: var(--ink); }
.sociallink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 8px 15px 8px 12px;
  transition: border-color .16s ease, color .16s ease, transform .2s var(--ease-out);
}
.sociallink svg { flex: none; }
.sociallink:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.foot__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.follow { padding-bottom: calc(70px * var(--density)); }
.follow__inner {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 40px;
}
.follow__text { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 40em; text-wrap: pretty; }
.follow__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: 56px; padding-bottom: 36px; }
.foot__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding-bottom: 40px; }
.foot__tag { font-size: 12px; color: var(--muted); margin-top: 12px; letter-spacing: .03em; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.foot__col { display: flex; flex-direction: column; gap: 11px; }
.foot__h { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.foot__link { font-size: 14px; color: var(--ink-soft); transition: color .15s; }
.foot__link:hover { color: var(--accent); }
.foot__base { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; gap: 16px; }

/* ---------- Page heads ---------- */
.pagehead { padding-top: 68px; padding-bottom: 40px; }
.pagehead__title { font-family: var(--font-display); font-weight: 700; font-size: calc(48px * var(--scale)); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 18px; color: var(--ink); max-width: 15em; text-wrap: balance; }
.pagehead__sub { font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); max-width: 40em; margin: 0; text-wrap: pretty; }
.pagehead__note { margin-top: 18px; font-size: 12px; color: var(--muted); letter-spacing: .03em; }
.blockhead { margin-bottom: 26px; }
.blockhead .eyebrow { margin-bottom: 12px; }

/* ---------- Software ---------- */
.swgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 80px; }
.swcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: border-color .18s ease, transform .28s var(--ease-out), box-shadow .28s ease; }
.swcard:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 26px 46px -34px rgba(0,0,0,.38); }
.swcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.swmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.swmark__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); flex: none; }
.swmark--lg { font-size: 24px; margin-bottom: 16px; }
.swcard__tagline { font-family: var(--font-display); font-weight: 600; font-size: calc(23px * var(--scale)); line-height: 1.18; letter-spacing: -.015em; margin: 0; color: var(--ink); text-wrap: balance; }
.swcard__tagline a { transition: color .15s; }
.swcard__tagline a:hover { color: var(--accent); }
.swcard__desc { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
.swcard__feats { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 4px; }
.swcard__feat { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-soft); }
.swcard__dash { color: var(--accent); }
.swcard__pricing { font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.swcard__foot { display: flex; align-items: center; gap: 18px; margin-top: auto; flex-wrap: wrap; }
.swcard__foot .swcard__pricing { margin-left: auto; }
.swmeta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); margin-top: 20px; flex-wrap: wrap; }
.swctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.swshot { padding-top: 44px; padding-bottom: 64px; }
.swmore { padding-bottom: 90px; }
.swmore .gearcard { text-decoration: none; }

/* ---------- Free guides ---------- */
.guidegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-bottom: 80px; }
.guidecard { display: flex; gap: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: border-color .18s ease, transform .28s var(--ease-out), box-shadow .28s ease; }
.guidecard:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 26px 46px -34px rgba(0,0,0,.38); }
.bookwrap { flex: 0 0 168px; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.bookcover { position: relative; width: 148px; aspect-ratio: 5 / 7; border-radius: 3px 8px 8px 3px; overflow: hidden; background: linear-gradient(135deg, var(--ph-1), var(--ph-2)); border: 1px solid var(--line-strong); border-left: 5px solid var(--ink); box-shadow: 0 16px 28px -14px rgba(0,0,0,.32); display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 12px 16px; transition: transform .45s var(--ease-out), box-shadow .45s ease; }
.guidecard:hover .bookcover { transform: rotateY(-11deg) translateZ(14px); box-shadow: 0 26px 40px -18px rgba(0,0,0,.38); }
.bookcover__free { align-self: flex-start; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: 3px 7px; border-radius: 2px; z-index: 1; }
.bookcover__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); z-index: 1; text-wrap: balance; }
.bookcover__brand { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; color: var(--ink); z-index: 1; }
.guidecard__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.guidecard__meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); letter-spacing: .04em; flex-wrap: wrap; }
.guidecard__title { font-family: var(--font-display); font-weight: 600; font-size: calc(22px * var(--scale)); letter-spacing: -.015em; margin: 0; color: var(--ink); }
.guidecard__desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }
.guidecard__cta { align-self: flex-start; margin-top: auto; }
.guidecard__sent { display: none; margin-top: auto; align-self: flex-start; font-size: 12px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius); padding: 9px 14px; }
.guidecard.is-sent .guidecard__sent { display: block; }
.guidecard.is-sent .guidecard__cta { display: none; }

/* ---------- Recommendations page ---------- */
.catnav { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 48px; }
.reccat { padding-bottom: 64px; scroll-margin-top: 92px; }
.reccat__head { border-top: 1px solid var(--line); padding-top: 26px; margin-bottom: 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.reccat__num { font-size: 12px; letter-spacing: .16em; color: var(--muted); margin-right: 14px; }
.reccat__blurb { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; max-width: 34em; text-wrap: pretty; }
.recgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.recgrid .gearcard__note { font-size: 13.5px; }

/* ---------- About ---------- */
.abouthero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
/* Heading sits above the photo in column one; the copy starts on the same
   line as the photo instead of floating above it. */
.story { display: grid; grid-template-columns: 1fr 1.6fr; gap: 20px 44px; padding-bottom: 80px; }
.story__title { grid-column: 1; grid-row: 1; align-self: end; }
.story__photo { grid-column: 1; grid-row: 2; }
.story__photo .ph { border-radius: var(--radius); }
.story__text { grid-column: 2; grid-row: 2; }
.story__text p { font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 16px; text-wrap: pretty; }
.story__text p:last-child { margin-bottom: 0; }
.principles-wrap { padding-bottom: 80px; scroll-margin-top: 92px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.principle { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: border-color .18s, transform .28s var(--ease-out); }
.principle:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.principle__num { font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.principle__title { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 12px 0 8px; color: var(--ink); }
.principle__body { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.team-wrap { padding-bottom: 90px; scroll-margin-top: 92px; }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team__lead { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 42em; text-wrap: pretty; }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: border-color .18s, transform .28s var(--ease-out); }
.member:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.member .ph { margin-bottom: 18px; }
.member__num { font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin: 10px 0 4px; color: var(--ink); }
.member__role { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.member--link { display: block; }
.member__link { display: inline-block; margin-top: 14px; }
.member--link:hover .member__link { opacity: .65; }

/* ---------- Single post ---------- */
.post { padding-top: 56px; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .04em; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.crumbs .link { font-size: 12px; }
.post__head { max-width: 760px; }
.post__title { font-family: var(--font-display); font-weight: 700; font-size: calc(44px * var(--scale)); line-height: 1.06; letter-spacing: -.025em; margin: 0 0 18px; color: var(--ink); text-wrap: balance; }
.post__standfirst { font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; text-wrap: pretty; }
.post__head .byline { margin-bottom: 34px; }
.post__hero .ph { aspect-ratio: 21 / 9; }
.post__layout { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 72px; align-items: start; }
.post__body { max-width: 680px; }
.post__body h2 { font-family: var(--font-display); font-weight: 600; font-size: calc(24px * var(--scale)); letter-spacing: -.015em; margin: 38px 0 14px; color: var(--ink); scroll-margin-top: 96px; }
.post__body h3 { font-family: var(--font-display); font-weight: 600; font-size: calc(19px * var(--scale)); letter-spacing: -.01em; margin: 26px 0 10px; color: var(--ink); }
.post__body p { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 18px; text-wrap: pretty; }
.post__lede { font-size: 18px !important; color: var(--ink) !important; }
.post__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post__body a.btn { text-decoration: none; }
/* `.post__body a` outranks `.btn--solid` on specificity, so without this the
   label inherits the accent colour and disappears into the button. */
.post__body a.btn--solid,
.post__body a.btn--solid:hover { color: var(--accent-ink); }
.post__body a.btn--ghost { color: var(--ink); }
.post__body a.btn--ghost:hover { color: var(--paper); }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-left: 24px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
.post__body li { margin-bottom: 8px; }
.post__body li::marker { color: var(--accent); }
.post__body blockquote { margin: 30px 0; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.post__body .postfig { margin: 26px 0 28px; }
.post__body .postfig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
/* ---------- Key takeaways ----------
   The short version of an article, above its opening paragraph. Tinted plate
   in the theme's own palette, one line per point, hairline rules between. */
.takeaways {
  margin: 0 0 34px;
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(150deg, var(--ph-1), var(--ph-2));
}
.takeaways__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.takeaways__head svg { flex: none; }
.post__body .takeaways__item {
  font-size: 15.5px; line-height: 1.6; color: var(--ink-soft);
  margin: 0; padding: 14px 0;
  border-top: 1px dashed var(--line-strong);
}
.post__body .takeaways__item:first-of-type { border-top: none; padding-top: 0; }
.post__body .takeaways__item:last-child { padding-bottom: 0; }
.takeaways__item strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .takeaways { padding: 22px 20px; } }

/* ---------- Video embed ----------
   A poster and a play button, nothing else. The YouTube iframe is only
   fetched once the reader actually clicks, so the page stays free of
   third-party requests until then. */
.post__body .videoembed { margin: 30px 0; }
.videoembed__play {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--ph-2);
}
.videoembed__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out), filter .3s ease; }
.videoembed__play:hover img { transform: scale(1.03); filter: brightness(.93); }
.videoembed__btn {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.55);
  transition: transform .22s var(--ease-out), background .2s ease;
}
.videoembed__btn svg { margin-left: 4px; }
.videoembed__play:hover .videoembed__btn { transform: scale(1.08); }
.videoembed__meta {
  position: absolute; left: 14px; bottom: 13px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.62); padding: 6px 10px; border-radius: 3px;
  backdrop-filter: blur(4px);
}
.videoembed__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
.post__body .videoembed__cap { font-size: 11.5px; letter-spacing: .03em; color: var(--muted); margin-top: 12px; text-align: center; }
.post__body .videoembed__cap a { color: var(--accent); text-decoration: none; }
.post__body .videoembed__cap a:hover { text-decoration: underline; }
@media (max-width: 560px) { .videoembed__btn { width: 58px; height: 58px; } }

.tablewrap { overflow-x: auto; margin: 26px 0; border: 1px solid var(--line); border-radius: var(--radius); }
.post__body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.post__body th, .post__body td { border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; color: var(--ink-soft); }
.post__body th + th, .post__body td + td { border-left: 1px solid var(--line); }
.post__body tr:last-child td { border-bottom: none; }
.post__body th { background: var(--surface); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--ink); }
.post__body .postcta { margin: 28px 0 32px; }
.post__body .postcta .btn {
  display: flex; width: 100%; justify-content: center;
  padding: 16px 24px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.post__side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
.sidebox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sidebox__h { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sidebox__all { margin-top: 2px; }
.siderec {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 4px 26px 18px 0; border-bottom: 1px solid var(--line);
  transition: opacity .15s ease;
}
.siderec:last-of-type { border-bottom: none; padding-bottom: 4px; }
.siderec__go {
  position: absolute; top: 0; right: 0; color: var(--muted);
  transition: color .16s ease, transform .22s var(--ease-out);
}
.siderec:hover .siderec__go { color: var(--accent); transform: translate(2px, -2px); }
.siderec:hover .siderec__name { color: var(--accent); }
.siderec__name { transition: color .16s ease; }
.siderec__logo {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.siderec__logo img { width: 28px; height: 28px; object-fit: contain; }
.siderec__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.siderec__name { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--ink); }
.siderec__type { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toc { display: flex; flex-direction: column; gap: 10px; }
.toc__item { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); text-decoration: none; transition: color .15s; }
.toc__item:hover { color: var(--accent); }
.toc__item.is-current { color: var(--accent); font-weight: 600; }
.toc__num { font-size: 11px; color: var(--muted); padding-top: 2px; }
.related { padding-bottom: 20px; }
.related .grid { margin-bottom: calc(70px * var(--density)); }

/* ---------- Animation scaffolding ----------
   Elements only start hidden when JS is available AND motion is allowed;
   otherwise everything renders in its final state with no flash. */
.js-anim [data-reveal]:not(.is-revealed) { opacity: 0; }
.js-anim [data-reveal="up"]:not(.is-revealed) { transform: translateY(22px); }
.js-anim [data-reveal="fade"]:not(.is-revealed) { transform: none; }
.js-anim [data-reveal-stagger] > *:not(.is-revealed) { opacity: 0; transform: translateY(20px); }
.js-anim .hero__media { opacity: 0; transform: translateY(26px) scale(.985); }
.js-anim .herohome__latest { opacity: 0; transform: translateY(18px); }
.js-anim .stars__fill { transform: scaleX(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .recgrid { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .nav__links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px var(--gutter); gap: 4px; max-height: calc(100vh - 68px); overflow-y: auto; }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav__burger { display: grid; }
  .nav__item { width: 100%; }
  .nav__item .nav__link { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mega { display: none !important; }
  .herohome { padding-top: 56px; padding-bottom: 56px; }
  .herohome__latest { margin-top: 32px; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
  .hero__media { order: -1; }
  .hero__media .ph { aspect-ratio: 16 / 11 !important; }
  .hero__title { font-size: calc(38px * var(--scale)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid, .gear__row { grid-template-columns: repeat(2, 1fr); }
  .ownsw__grid { grid-template-columns: repeat(2, 1fr); }
  .feature__card { grid-template-columns: 1fr; }
  .feature__media .ph { min-height: 0; aspect-ratio: 16 / 9 !important; }
  .feature__body { padding: 26px 24px; }
  .news__inner { grid-template-columns: 1fr; gap: 28px; }
  .foot__inner { grid-template-columns: 1fr; gap: 28px; }
  .follow__inner { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .follow__links { justify-content: flex-start; }
  .homeabout { grid-template-columns: 1fr; gap: 24px; }
  .homeabout__photo { max-width: 260px; }
  .swgrid, .guidegrid { grid-template-columns: 1fr; }
  .recgrid { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: 1fr; }
  .abouthero { grid-template-columns: 1fr; gap: 36px; padding-top: 44px; }
  .story { grid-template-columns: 1fr; gap: 20px; padding-bottom: 60px; }
  .story__title, .story__photo, .story__text { grid-column: 1; grid-row: auto; }
  .story__photo { max-width: 320px; }
  .post__layout { grid-template-columns: 1fr; gap: 36px; }
  .post__side { position: static; }
  .post__title { font-size: calc(34px * var(--scale)); }
  .search__panel { margin: 8vh 18px 0; }
}
@media (max-width: 560px) {
  .grid, .gear__row, .stats, .recgrid, .team, .ownsw__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: calc(32px * var(--scale)); }
  .herohome__sub { font-size: calc(16.5px * var(--scale)); }
  .herohome__ctas { flex-direction: column; align-items: stretch; }
  .herohome__ctas .btn { justify-content: center; }
  .herohome__latest { border-radius: var(--radius); padding: 12px 14px; }
  .herohome__latest-title { white-space: normal; }
  .pagehead__title { font-size: calc(36px * var(--scale)); }
  .pagehead { padding-top: 44px; }
  .foot__base { flex-direction: column; align-items: flex-start; gap: 8px; }
  .guidecard { flex-direction: column; }
  .bookwrap { flex-basis: auto; }
  .nav__actions .btn--solid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .nav, .foot, .news, .related, .post__side, .search, .skiplink { display: none !important; }
  .post__layout { grid-template-columns: 1fr; }
  body { background: #fff; }
}