/* ════════════════════════════════════════════════════════════════════════════
   sanz.consulting — corporate design system.

   Deliberately standalone: this site does NOT load kernel/design/tokens.css or
   core/public/css/style.css. Those carry the platform's warm editorial blog
   look; this site is a firm's marketing site and owns its own palette, scale,
   and chrome (views/firm-head.ejs + firm-foot.ejs). The only shared asset it
   borrows is core/public/css/fonts.css — self-hosted Inter, so there is no
   external font dependency.

   Motif: "bold modern" — cornsilk paper, deep-green ink, one green accent,
   oversized tight display type, and a notched corner (clip-path) repeated on
   cards, buttons and media so the geometry reads as angular rather than
   rounded. The palette pairs the platform's cornsilk and honeydew themes
   (see the token block below for why neither accent is used literally).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces that follow the colour scheme — cornsilk paper. */
  --bg:          #fff8dc;
  --surface:     #f4eac7;
  --surface-2:   #eaddb0;
  --line:        #e4d5a8;
  --fg:          #2a3524;
  --fg-2:        #5d6b52;

  /* The one accent — honeydew green, deepened.
     The platform theme's own accents cannot be used literally here: cornsilk's
     amber (#c28e2e) and honeydew's sage (#9bb392) are both too light to carry
     text. Sage against white is roughly 2:1. #2b7049 is the same hue, dark
     enough to clear 4.5:1 not just on the cornsilk page but on the deeper
     --surface band too — that band is the binding constraint, and a lighter
     green that looks fine on the page fails on it.
     --accent-soft is tuned so a .tag (0.76rem/600) still clears 4.5:1
     against it — do not lighten --accent or darken --accent-soft. */
  --accent:      #2b7049;
  --accent-hi:   #1f5a3a;
  --accent-soft: #eff5e7;
  --on-accent:   #fff8dc;

  /* "Inverse" bands — the dark sections that punctuate a light page. Separate
     tokens (not just --fg/--bg swapped) so they stay dark in light mode and
     stay *distinct from* the page in dark mode. */
  --inv-bg:      #16281b;
  --inv-surface: #1f3524;
  --inv-fg:      #fff8dc;
  --inv-fg-2:    #b8c7a9;
  --inv-line:    rgba(255, 248, 220, .16);

  /* Geometry — the notch is the brand mark of the layout */
  --notch:    18px;
  --notch-sm: 10px;
  --wrap:     1240px;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.65rem, 6.6vw, 5.1rem);
  --fs-h1:      clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-lede:    clamp(1.05rem, 1.5vw, 1.28rem);
  --fs-body:    1.02rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.76rem;

  /* Rhythm */
  --band-pad: clamp(4rem, 9vw, 8rem);
  --gutter:   clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Warm dark ground (cornsilk's own dark cast), green action colour
       lightened so it reads against it. --on-accent flips to a deep green,
       because text on the lighter green has to be dark, not cream. */
    --bg:          #17130a;
    --surface:     #201a0e;
    --surface-2:   #2a2314;
    --line:        rgba(255, 248, 220, .10);
    --fg:          #f2e9ce;
    --fg-2:        #b3a480;

    --accent:      #79c295;
    --accent-hi:   #93d2ab;
    --accent-soft: rgba(121, 194, 149, .16);
    --on-accent:   #12241a;

    /* Kept green rather than warm, so the punctuation bands stay distinct
       from the warm-dark page behind them. */
    --inv-bg:      #101e15;
    --inv-surface: #172a1d;
    --inv-fg:      #f2e9ce;
    --inv-fg-2:    #b6c4a8;
    --inv-line:    rgba(255, 248, 220, .12);
  }
}

/* ── Reset / base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  color: var(--fg);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

img, svg { max-width: 100%; height: auto; display: block; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: .7rem 1.1rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Layout primitives ───────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-pad); }
.band--tight   { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.band--surface { background: var(--surface); }
.band--ink     { background: var(--inv-bg); color: var(--inv-fg-2); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: var(--inv-fg); }

/* The notch — one shape, three sizes. Applied to cards, buttons and panels so
   every corner in the system agrees with every other. */
.notch    { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)),    calc(100% - var(--notch)) 100%,    0 100%); }
.notch-sm { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%); }
.notch-tl { clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch)); }

/* ── Shared type helpers ─────────────────────────────────────────────────── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.band--ink .kicker { color: var(--accent-hi); }
.band--ink .kicker::before { background: var(--accent-hi); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.band--ink .lede { color: var(--inv-fg-2); }

.band-head { max-width: 46ch; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.band-head h2 { font-size: var(--fs-h2); margin-bottom: 1.1rem; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch-sm)), calc(100% - var(--notch-sm)) 100%, 0 100%);
}
.btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hi); color: var(--on-accent); }

.btn--ghost { border-color: var(--line); color: var(--fg); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Any dark ground — an ink band, the home hero, or an interior page hero.
   .hero/.page-hero are not .band--ink (they carry their own padding and accent
   wash), so they have to be named here or a ghost button on them renders
   near-black on near-black in light mode. */
.band--ink .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost { border-color: var(--inv-line); color: var(--inv-fg); }
.band--ink .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Arrow link — the quiet tertiary action */
.arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.arrow span { transition: transform .18s ease; }
.arrow:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .arrow:hover span { transform: none; } }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--fg); }
.brand:hover { color: var(--fg); }
.brand__mark {
  width: 34px; height: 34px;
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 700; letter-spacing: -.04em;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.brand__name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
}
.brand__name small {
  display: block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-2);
  /* Never wrap: a two-line tagline pushes the whole header from 76px to 105px
     and crowds the nav. It is decorative chrome, so it is dropped early rather
     than allowed to reflow the header — which also means the wording can change
     length later without breaking the layout. */
  white-space: nowrap;
}
/* Hidden well before the nav collapses, since the tagline runs out of room
   first. The narrower rule inside the mobile-nav block below is redundant but
   harmless. */
@media (max-width: 1100px) { .brand__name small { display: none; } }

.nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.nav__links { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative;
  font-size: .9rem;
  font-weight: 500;
  color: var(--fg);
  padding-block: .4rem;
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--accent); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  margin-inline: auto;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { content: ''; transform: translateY(-6px); }
.nav-toggle span::after  { content: ''; transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  /* The drawer is ABSOLUTE against .site-header, not fixed against the
     viewport. .site-header carries a backdrop-filter, and a backdrop-filter
     (like transform or filter) makes an element the containing block for its
     position:fixed descendants — so `position: fixed; inset: 76px 0 0` here
     resolved against the header box and produced a drawer a few dozen pixels
     tall with the page showing through. Anchoring to top:100% of the sticky
     header is both correct and free of a hard-coded header height. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 1.5rem var(--gutter) 2.5rem;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
  }
  /* The tagline under the wordmark wraps to two lines on a narrow header and
     pushes it out of proportion — the wordmark alone is enough at this size. */
  .brand__name small { display: none; }
  .nav.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a {
    display: block;
    padding: 1.05rem 0;
    font-size: 1.15rem;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a::after { display: none; }
  .nav .btn { margin-top: 1.5rem; justify-content: center; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--inv-bg);
  color: var(--inv-fg-2);
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(5rem, 10vw, 8rem);
  overflow: hidden;
}
/* Angular accent wash — a single skewed shape, no images. */
.hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -12%;
  width: 58%; height: 150%;
  background: linear-gradient(150deg, var(--accent) 0%, transparent 62%);
  opacity: .38;
  transform: skewX(-14deg);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--inv-line);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.75rem;
  padding: .5rem .95rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--inv-fg);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--inv-line);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 92% 100%, 0 100%);
}
.hero__title {
  font-size: var(--fs-display);
  color: var(--inv-fg);
  letter-spacing: -.045em;
  line-height: .99;
  max-width: 19ch;
  margin-bottom: 1.75rem;
}
.hero__lede { color: var(--inv-fg-2); max-width: 56ch; margin-bottom: 2.5rem; }

/* ── Stat band ───────────────────────────────────────────────────────────── */
.statband { background: var(--inv-surface); }
.statband__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--inv-line);
}
.stat {
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.1rem, 2vw, 2rem);
  border-right: 1px solid var(--inv-line);
}
.stat__value {
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--inv-fg);
  margin-bottom: .7rem;
}
.stat__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--inv-fg-2);
}
@media (max-width: 860px) { .statband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .statband__grid { grid-template-columns: 1fr; } }

/* ── Split (heading left, body right) ────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.split h2 { font-size: var(--fs-h2); }
.split h2 + .lede,
.split h2 + p { margin-top: 1.1rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ── Practice cards ──────────────────────────────────────────────────────── */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.5rem;
}
.practice-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  transition: border-color .2s ease, transform .2s ease;
}
.band--surface .practice-card { background: var(--bg); }
.practice-card:hover { transform: translateY(-4px); border-color: var(--accent); border-top-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .practice-card:hover { transform: none; } }

.practice-card__index {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
}
.practice-card h3 { font-size: var(--fs-h3); }
.practice-card p { font-size: var(--fs-sm); line-height: 1.62; }
.practice-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: var(--fs-sm);
}
.practice-card ul li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--fg);
}
.practice-card ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .58em;
  width: 6px; height: 6px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%);
}
.practice-card .arrow { margin-top: auto; padding-top: .5rem; }

/* ── Numbered list (approach) ────────────────────────────────────────────── */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.step__index {
  font-size: clamp(2.3rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--accent);
  opacity: .35;
  margin-bottom: .9rem;
}
.step h3 { font-size: var(--fs-h3); margin-bottom: .7rem; }
.step p { font-size: var(--fs-sm); line-height: 1.62; }

/* ── Industry cards ──────────────────────────────────────────────────────── */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 1.5rem;
}
.industry-card {
  padding: clamp(1.75rem, 3vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
}
.band--surface .industry-card { background: var(--bg); }
.industry-card h3 { font-size: var(--fs-h3); margin-bottom: .9rem; }
.industry-card p { font-size: var(--fs-sm); line-height: 1.65; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.tag {
  padding: .35rem .7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--accent-soft);
}
a.tag { transition: background .18s ease, color .18s ease; }
a.tag:hover { background: var(--accent); color: var(--on-accent); }
.page-hero .tags { margin-top: 1.25rem; }

/* ── Service list (capability detail) ────────────────────────────────────── */
.service {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service h3 { font-size: var(--fs-h3); }
.service p { font-size: var(--fs-sm); line-height: 1.65; margin: 0; }
@media (max-width: 760px) { .service { grid-template-columns: 1fr; gap: .6rem; } }

/* ── Outcomes ────────────────────────────────────────────────────────────── */
.outcomes { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.outcomes li {
  padding: clamp(1.25rem, 2.5vw, 1.9rem) clamp(1.25rem, 2.5vw, 2rem);
  background: var(--inv-surface);
  border-left: 3px solid var(--accent);
  color: var(--inv-fg-2);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* ── Engagement cards ────────────────────────────────────────────────────── */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.engage-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--bg);
  border: 1px solid var(--line);
}
.engage-card--featured {
  background: var(--inv-bg);
  border-color: var(--accent);
  border-top: 3px solid var(--accent);
  color: var(--inv-fg-2);
}
.engage-card--featured h3 { color: var(--inv-fg); }
.engage-card__terms {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.engage-card h3 { font-size: var(--fs-h3); margin-bottom: .9rem; }
.engage-card p { font-size: var(--fs-sm); line-height: 1.65; }

/* ── Point-of-view list ──────────────────────────────────────────────────── */
.pov { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.pov article {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 1.75rem);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.pov article:first-child { padding-top: 0; border-top: 0; }
.pov__num {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  padding-top: .35rem;
}
.pov h3 { font-size: var(--fs-h3); margin-bottom: .85rem; max-width: 30ch; }
/* The .pov grid's content column is the full remaining width of a 1240px wrap
   — around 120 characters per line without a cap, which is well past a
   readable measure. */
.pov p { font-size: var(--fs-sm); line-height: 1.68; max-width: 78ch; }
@media (max-width: 620px) { .pov article { grid-template-columns: 1fr; gap: .4rem; } }

/* ── Post cards (Insights, when the site has posts) ──────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.75rem;
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease;
}
/* Whole-card click target. An overlay rather than an <a> wrapping the card,
   because the card contains tag links and nested anchors are invalid HTML. */
.post-card__link { position: absolute; inset: 0; z-index: 1; }
.post-card__link:focus-visible { outline-offset: -3px; }
/* Pinned to the card foot so tag rows line up across cards of unequal height. */
.post-card .tags { position: relative; z-index: 2; margin-top: auto; padding-top: .35rem; }
.post-card:hover { transform: translateY(-4px); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .post-card:hover { transform: none; } }
.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.post-card__date {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.post-card h3 { font-size: 1.12rem; line-height: 1.24; }
.post-card p { font-size: var(--fs-sm); line-height: 1.6; }

/* ── Credentials ─────────────────────────────────────────────────────────── */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.cred h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.cred ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cred li {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.band--ink .cred li { color: var(--inv-fg); border-color: var(--inv-line); }

/* ── Interior page hero ──────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  background: var(--inv-bg);
  color: var(--inv-fg-2);
  padding-block: clamp(3.25rem, 7vw, 6rem) clamp(3.25rem, 7vw, 5.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 46%; height: 170%;
  background: linear-gradient(155deg, var(--accent) 0%, transparent 60%);
  opacity: .3;
  transform: skewX(-14deg);
  pointer-events: none;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--fs-h1); color: var(--inv-fg); max-width: 20ch; margin-bottom: 1.25rem; }
.page-hero .lede { color: var(--inv-fg-2); }
.page-hero .kicker { color: var(--accent-hi); }
.page-hero .kicker::before { background: var(--accent-hi); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--inv-fg-2);
}
.crumbs a { color: var(--inv-fg-2); }
.crumbs a:hover { color: var(--accent-hi); }

/* ── Prose (About bio, post bodies) ──────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose p { font-size: var(--fs-lede); line-height: 1.72; }
.prose h2 { font-size: var(--fs-h2); margin: 2.5rem 0 1rem; }
.prose h3 { font-size: var(--fs-h3); margin: 2rem 0 .75rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote {
  margin: 1.75rem 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--accent);
  color: var(--fg);
}
.prose img { margin: 1.75rem 0; }
.prose pre {
  background: var(--inv-bg);
  color: var(--inv-fg);
  padding: 1.25rem;
  overflow-x: auto;
  font-size: var(--fs-sm);
}
.prose code { font-size: .92em; }
.prose :not(pre) > code {
  background: var(--surface-2);
  padding: .15em .4em;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-detail { display: grid; gap: 1.25rem; margin-top: 2rem; }
.contact-detail div { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.contact-detail dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: .35rem;
}
.contact-detail dd { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--fg); }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.field input,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .18s ease;
}
.field input:focus,
.field textarea:focus { border-color: var(--accent); outline-offset: 0; }
.field textarea { resize: vertical; min-height: 170px; line-height: 1.6; }

.form__note { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.55; }
.form__error {
  padding: .85rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #b3261e;
  background: rgba(179, 38, 30, .09);
  border-left: 3px solid #b3261e;
}
@media (prefers-color-scheme: dark) { .form__error { color: #ffb4ab; } }

.form-success {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  border-left: 3px solid var(--accent);
}
.form-success h2 { font-size: var(--fs-h3); margin-bottom: .75rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.cta-band { background: var(--accent); color: var(--on-accent); }
.cta-band h2 {
  color: var(--on-accent);
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: 1.25rem;
}
.cta-band p { color: var(--on-accent); opacity: .85; max-width: 52ch; }
.cta-band .btn--primary { background: var(--on-accent); color: var(--accent); }
.cta-band .btn--primary:hover { background: var(--on-accent); color: var(--accent-hi); }
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 800px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--inv-bg);
  color: var(--inv-fg-2);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--inv-fg-2); }
.site-footer a:hover { color: var(--accent-hi); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--inv-line);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inv-fg);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.footer-brand .brand { color: var(--inv-fg); margin-bottom: 1.1rem; }
.footer-brand .brand__name small { color: var(--inv-fg-2); }
.footer-brand p { max-width: 34ch; line-height: 1.6; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
}

/* ── Scroll reveal — opt-in, and inert without JS or with reduced motion ─── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ── Listing furniture — /posts, /tag/:tag, /pages, /tags, /search ───────── */

/* Empty states. Every listing on this site can legitimately be empty (posts
   and pages are authored through the admin, and a fresh deploy has none), so
   an empty listing gets a designed panel with a way onward, not a bare line
   of italic text. */
.empty-state {
  max-width: 52ch;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--surface);
  border-left: 3px solid var(--accent);
}
.empty-state h2 { font-size: var(--fs-h3); margin-bottom: .75rem; }
.empty-state p { font-size: var(--fs-sm); line-height: 1.65; margin-bottom: 1.5rem; }

/* Pager */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.pager__count {
  margin-inline: auto;
  order: -1;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-2);
}
@media (min-width: 620px) { .pager__count { order: 0; } }

/* Page directory (/pages) — no cover images, so rows rather than cards. */
.doc-list { border-top: 1px solid var(--line); }
.doc-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.35rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  transition: padding-inline .18s ease, background .18s ease;
}
.doc-row:hover { background: var(--surface); padding-inline: 1.25rem; color: var(--fg); }
.doc-row h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.doc-row p { font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); margin: 0; }
.doc-row__arrow {
  margin-left: auto;
  flex: none;
  font-size: 1.35rem;
  color: var(--accent);
  transition: transform .18s ease;
}
.doc-row:hover .doc-row__arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .doc-row:hover { padding-inline: 0; }
  .doc-row:hover .doc-row__arrow { transform: none; }
}

/* Topic index (/tags) */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: .85rem;
}
.topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease;
}
.topic:hover { border-color: var(--accent); color: var(--accent); }
.topic__name { font-size: var(--fs-sm); }
.topic__count {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: .2rem .5rem;
}

/* Topic cloud (/tagcloud) — font-size is set inline from tag frequency. */
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.1rem; }
.cloud__item { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--fg); }
.cloud__item:hover { color: var(--accent); }

/* Search */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
  max-width: 34rem;
}
.search-form input {
  flex: 1 1 16rem;
  padding: .85rem 1rem;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--inv-fg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--inv-line);
  border-radius: 0;
}
.search-form input::placeholder { color: var(--inv-fg-2); }
.search-form input:focus { border-color: var(--accent-hi); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Career history (About) ──────────────────────────────────────────────── */

/* Larger tag row, used for the focus-area chips — same chip, more air. */
.tags--lg { gap: .6rem; }
.tags--lg .tag { padding: .5rem .9rem; font-size: var(--fs-sm); }

.cv { border-top: 1px solid var(--line); }

/* Period + employer sit in a left rail on wide screens and stack above the
   role on narrow ones — the same two-column rhythm as .service, so the About
   page reads as part of the same system rather than a pasted-in CV. */
.role {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}
.role__meta { display: flex; flex-direction: column; gap: .35rem; }
.role__period {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}
.role__company {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--fg);
}
.role__body h3 { font-size: var(--fs-md, 1.1rem); margin-bottom: .6rem; }
.role__summary { font-size: var(--fs-sm); line-height: 1.65; margin-bottom: .9rem; }
.role__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.role__body li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-sm);
  line-height: 1.62;
}
/* Same notched bullet as the practice cards. */
.role__body li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%);
}
@media (max-width: 760px) {
  .role { grid-template-columns: 1fr; gap: .9rem; }
  .role__meta { flex-direction: row; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
}

/* ── Heading anchors in prose ────────────────────────────────────────────── */
/* kernel/content/md.js gives every heading a linkable ¶ anchor. core's
   style.css fades it in on hover, but this site doesn't load core's stylesheet,
   so without this the ¶ sits permanently beside every heading and reads as a
   stray character. Same behaviour as core: invisible until you hover the
   heading, and always reachable by keyboard. */
.prose .heading-anchor-icon {
  opacity: 0;
  margin-left: .35em;
  font-size: .7em;
  color: var(--accent);
  transition: opacity .15s ease;
}
.prose h1:hover .heading-anchor-icon,
.prose h2:hover .heading-anchor-icon,
.prose h3:hover .heading-anchor-icon,
.prose h4:hover .heading-anchor-icon,
.prose .header-anchor:focus-visible .heading-anchor-icon { opacity: 1; }
.prose a.header-anchor { text-decoration: none; color: inherit; }