/* asurekha.com. Identity v2: Swiss poster discipline on graphite. Tokens per DESIGN.md. */

:root {
  /* Colour. Every colour has exactly one job. */
  --graphite: #1a1815;
  --type: #f4f2ec;
  --butter: #ffd23f;
  --grey: #a8a49a;
  --duo-warm: #d9c178;
  --rule: rgba(244, 242, 236, 0.14);

  /* Light surfaces (print, PDF, CV exports) only */
  --espresso: #4a3b14;
  --stone: #6b665c;
  --rule-light: rgba(26, 24, 21, 0.16);

  /* Type families */
  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale */
  --text-hero: clamp(2.75rem, 6.6vw, 6rem);
  --text-figure: clamp(3.625rem, 6.4vw, 6.5rem);
  --text-quote: clamp(2.25rem, 4.6vw, 4.25rem);
  --text-statement: clamp(1.375rem, 2.2vw, 2.125rem);
  --text-title: clamp(1.25rem, 1.7vw, 1.625rem);
  --text-lede: clamp(1.0625rem, 1.4vw, 1.25rem);
  --text-body: 0.9375rem;
  --text-nav: 0.8125rem;
  --text-label: 0.75rem;
  --text-mono-tag: 0.6875rem;
  --text-mono-caption: 0.6875rem;

  /* Layout. The poster frame */
  --rail-x: clamp(16px, 3.4vw, 48px);
  --pad-x: clamp(20px, 2.8vw, 44px);
  --section-pad: clamp(40px, 6vh, 72px);
  --band-pad: clamp(72px, 13vh, 140px);

  /* Spacing, 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* No radii. Square corners everywhere. No shadows. Elevation does not exist. */
}

/* ------------------------------------------------------------------ base --- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--graphite); scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--type);
  background: var(--graphite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4, .btn { font-family: var(--font-display); }

a { color: inherit; text-decoration: none; }

::selection { background: var(--butter); color: var(--graphite); }

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

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

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--type);
  color: var(--graphite);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-display);
  z-index: 30;
}
.skip-link:focus { left: var(--rail-x); }

.accent { color: var(--butter); }

/* ------------------------------------------------------------ typography --- */

.eyebrow {
  font-size: var(--text-label);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
}

.lede {
  font-size: var(--text-lede);
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: var(--space-5);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

h1 {
  font-size: var(--text-hero);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 21ch;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-statement);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 28ch;
}

h3, .h3, .row-title {
  font-size: var(--text-title);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.statement {
  font-family: var(--font-display);
  font-size: var(--text-statement);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.media-figure { margin-top: var(--space-6); }

/* ------------------------------------------------------------------- nav --- */

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 22px calc(var(--rail-x) + var(--pad-x)) 20px;
  border-bottom: 1px solid var(--butter);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(14px, 2.2vw, 34px);
  list-style: none;
  flex-wrap: wrap;
  align-items: baseline;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: var(--text-nav);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-block;
  padding: 10px 0;
  transition: color 120ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--butter); }

.nav-cta a {
  border: 1px solid var(--butter);
  color: var(--butter);
  padding: 10px 16px;
  transition: background-color 120ms ease, color 120ms ease;
}

.nav-cta a:hover,
.nav-cta a[aria-current="page"] {
  background: var(--butter);
  color: var(--graphite);
}

/* -------------------------------------------------------- cinematic hero --- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* Abstract generated artwork under abstract generated motion: the static
   composition (art-src/build_art.py, hero-bg slot) carries the depth, the
   warm blurred shapes drift over it. Never video, never employer footage.
   The art keeps its left half near-solid graphite; position favours the
   right so the quiet corner stays behind the text. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--graphite) url("art/hero-bg.jpg") no-repeat;
  background-size: cover;
  background-position: 100% 30%;
  overflow: hidden;
}

/* Work-with-me hero: sibling of the home hero, never a clone. Same layer
   order (graphite, artwork, blobs, shade, content), its own composition
   (art-src/build_art.py, hero-wwm slot): the stepped offer path and a faint
   oversized 1,500 instead of the AS wordmark. Scoped to this hero only. */
.hero-wwm .hero-media { background-image: url("art/hero-wwm.jpg"); }

.hero-wwm .hero-content .eyebrow-mono {
  display: block;
  margin-bottom: var(--space-5);
}

.hero-media .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(clamp(60px, 8vw, 120px));
  will-change: transform;
}

.blob-1 {
  width: 55vmax; height: 55vmax; left: -15%; top: 25%;
  background: var(--duo-warm); opacity: 0.16;
  animation: drift-1 100s ease-in-out infinite alternate;
}

.blob-2 {
  width: 38vmax; height: 38vmax; right: -10%; top: -15%;
  background: var(--butter); opacity: 0.09;
  animation: drift-2 80s ease-in-out infinite alternate;
}

.blob-3 {
  width: 30vmax; height: 30vmax; left: 35%; bottom: -20%;
  background: var(--duo-warm); opacity: 0.12;
  animation: drift-3 120s ease-in-out infinite alternate;
}

@keyframes drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12vw, -8vh, 0) scale(1.15); }
}
@keyframes drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-9vw, 10vh, 0) scale(0.95); }
}
@keyframes drift-3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, -6vh, 0) scale(1.2); }
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(26, 24, 21, 0.82) 0%, rgba(26, 24, 21, 0.5) 34%,
      rgba(26, 24, 21, 0) 64%),
    linear-gradient(180deg,
      rgba(26, 24, 21, 0.84) 0%, rgba(26, 24, 21, 0.5) 38%,
      rgba(26, 24, 21, 0.66) 68%, rgba(26, 24, 21, 0.95) 100%),
    radial-gradient(120% 90% at 18% 80%,
      rgba(26, 24, 21, 0.55) 0%, rgba(26, 24, 21, 0) 60%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(140px, 22vh, 220px) calc(var(--rail-x) + var(--pad-x)) clamp(72px, 11vh, 120px);
}

.hero-content .eyebrow { margin-bottom: var(--space-5); }

.hero-sub {
  margin-top: clamp(26px, 4vh, 44px);
  font-size: var(--text-lede);
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1.5;
  max-width: 52ch;
}

.hero-actions {
  margin-top: clamp(26px, 4vh, 42px);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-caption {
  position: absolute;
  right: calc(var(--rail-x) + var(--pad-x));
  bottom: 18px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------------------------------------------------------- poster frame --- */
/* Below the hero, content sits between two vertical hairline rails. */

main > section,
main > .marquee,
main > article > section,
main > article > header,
main > article > div,
.site-foot {
  margin-left: var(--rail-x);
  margin-right: var(--rail-x);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

main > section { border-top: 1px solid var(--rule); }
main > article > section,
main > article > div { border-top: 1px solid var(--rule); }

/* The cinematic hero is the only full-bleed element. */
main > section.hero {
  margin: 0;
  border: 0;
}

/* Page heroes sit inside the rails, under the overlaid nav. */
.page-hero {
  border-top: 0 !important;
  padding: clamp(140px, 20vh, 200px) 0 0;
}

main > article > header.page-hero { border-top: 0; }

/* ---------------------------------------------------------- containers --- */

.container,
.container-narrow {
  padding: var(--section-pad) var(--pad-x);
}

.container-narrow > *,
.container-narrow.prose > * { max-width: 72ch; }

.section-head { margin-bottom: var(--space-6); }
.section-head h2 { margin-top: var(--space-3); }

/* --------------------------------------------------------- section label --- */

.section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px var(--pad-x);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-label h2 {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  max-width: none;
}

.section-label .index { color: var(--type); }

/* ------------------------------------------------------------ proof grid --- */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  list-style: none;
}

.proof-item {
  background: var(--graphite);
  padding: 26px 22px 30px;
  min-height: clamp(250px, 24vw, 330px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.proof-figure {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
}

.proof-figure.num { color: var(--butter); }

.proof-text {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1.45;
  max-width: 24ch;
}

/* -------------------------------------------------------------- duotone --- */

.duo {
  position: relative;
  background: var(--duo-warm);
  overflow: hidden;
}

.duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.94);
  mix-blend-mode: multiply;
}

.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--graphite);
  mix-blend-mode: lighten;
  pointer-events: none;
}

.duo-portrait { aspect-ratio: 4 / 5; border: 1px solid var(--rule); }
.duo-card { aspect-ratio: 4 / 3; border: 1px solid var(--rule); }
.duo-wide { aspect-ratio: 21 / 9; border: 1px solid var(--rule); }

/* Generated artwork frame. The art is composed in the palette already,
   so it shows true: no grayscale filter, no duotone overlay. */
.art {
  position: relative;
  background: var(--graphite);
  overflow: hidden;
}

.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-caption,
.artefact figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 10px;
}

.artefact { margin: var(--space-6) 0; }

.artefact svg {
  display: block;
  width: 100%;
  border: 1px solid var(--rule);
}

/* ----------------------------------------------------------- who I am band --- */

.who {
  display: grid;
  grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  padding: var(--section-pad) var(--pad-x);
  border-top: 1px solid var(--rule);
}

.who-portrait { margin: 0; }

.who-lines {
  list-style: none;
  align-self: center;
}

.who-lines li {
  font-family: var(--font-display);
  font-size: var(--text-statement);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 24ch;
  padding: clamp(18px, 2.4vh, 28px) 0;
  border-top: 1px solid var(--rule);
}

.who-lines li:first-child { border-top: 0; padding-top: 0; }

/* ----------------------------------------------------------------- byline --- */

.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-6);
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
  filter: grayscale(1) contrast(1.05);
}

.byline-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.byline-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 4px;
}

/* ------------------------------------------------------------ card grids --- */

.card-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  list-style: none;
}

.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Odd card counts: the closing card spans the full row (it carries the wide
   art crop), so the 1px-gap grid never shows an empty slot. */
.card-span-2 { grid-column: 1 / -1; }

.card, .cta-card {
  background: var(--graphite);
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2vw, 30px) clamp(28px, 3vw, 40px);
}

.card h3 { margin-top: var(--space-3); max-width: 22ch; }
.card h3 a:hover { color: var(--butter); }

.card p {
  margin-top: var(--space-3);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1.5;
  max-width: 38ch;
}

/* In-text links inside card prose: butter plus underline, as in .prose a.
   Colour alone cannot separate a link from running text (WCAG 1.4.1). */
.card p a,
.cta-card p a {
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.card p a:hover,
.cta-card p a:hover { color: var(--type); }

.card .card-tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--butter);
  margin-top: 22px;
}

.card .eyebrow { margin-bottom: var(--space-2); }

.card-link {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-nav);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--butter);
}

.card-link:hover { color: var(--type); }

.cta-card h3 { max-width: 22ch; }
.cta-card .btn { margin-top: var(--space-5); }
.cta-card-center { text-align: left; }

/* ------------------------------------------------------------------ tags --- */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin-top: var(--space-4);
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--rule);
  padding: 4px 10px;
}

/* --------------------------------------------------------------- buttons --- */

.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  min-height: 44px;
  border: 1px solid var(--type);
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--butter);
  color: var(--graphite);
  border-color: var(--butter);
}
.btn-primary:hover { background: var(--type); border-color: var(--type); }

.btn-secondary {
  background: transparent;
  color: var(--type);
}
.btn-secondary:hover { color: var(--butter); border-color: var(--butter); }

.btn-small { padding: 10px 20px; font-size: 13px; }

.actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* -------------------------------------------------------------- row list --- */

.row-list {
  list-style: none;
  border-top: 1px solid var(--rule);
}

.row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--rule);
}

a.row { transition: color 120ms ease; }
a.row:hover .row-title { color: var(--butter); }

.row-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 6px;
}

.row-title { display: block; max-width: 30ch; }

.row-body p {
  margin-top: var(--space-2);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-display);
  max-width: 52ch;
}

.row-plain {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}

/* --------------------------------------------------------------- marquee --- */

.marquee {
  border-top: 1px solid var(--rule);
  overflow: hidden;
  padding: 12px 0;
}

.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}

.marquee-run {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--butter);
  opacity: 0.55;
  white-space: nowrap;
  padding-right: 3ch;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------- quote band --- */

.quote-band { padding: var(--band-pad) var(--pad-x); }

.quote-line {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 22ch;
  text-wrap: balance;
}

/* ----------------------------------------------------------------- prose --- */

.prose p { margin-top: var(--space-5); max-width: 68ch; }
.prose p:first-child { margin-top: 0; }

.prose h2 {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}

.prose ul { margin-top: var(--space-5); padding-left: 1.2em; max-width: 66ch; }
.prose li { margin-top: var(--space-3); }
.prose li::marker { color: var(--butter); }

.prose a {
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--type); }

.prose strong { font-weight: 700; color: var(--type); }

/* ------------------------------------------------------------------ split --- */

.split {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.data-col ul { list-style: none; border-top: 1px solid var(--rule); }

.data-col li {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--butter);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------- timeline --- */

.timeline { list-style: none; }

.timeline-entry {
  border-top: 1px solid var(--rule);
  padding: var(--space-6) 0;
}

.timeline-entry:first-child { border-top: 0; }

.role-title { max-width: none; }

details.role summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-3);
}

details.role summary::-webkit-details-marker { display: none; }

.role-dates {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 3px;
}

.role-org {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--grey);
}

.role-scope {
  grid-column: 2;
  font-size: 15px;
  max-width: 60ch;
}

.role-hint {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--butter);
  margin-top: var(--space-2);
}

details.role summary:hover .role-hint { color: var(--type); }
details.role[open] .role-hint { display: none; }

.role-body {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 0 var(--space-6);
}

.role-body > * { grid-column: 2; max-width: 66ch; }
.role-body ul { list-style: none; }
.role-body li { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.role-body li:first-child { border-top: 0; }

.role-body a {
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.role-body a:hover { color: var(--type); }

.timeline-tools { margin-bottom: var(--space-5); }

/* ----------------------------------------------------------- skills filter --- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.filter-btn:hover { color: var(--butter); border-color: var(--butter); }

.filter-btn[aria-pressed="true"] {
  background: var(--butter);
  color: var(--graphite);
  border-color: var(--butter);
}

.skill-group { margin-top: var(--space-6); }
.skill-group:first-child { margin-top: 0; }
.skill-group.is-hidden { display: none; }
.skill-group h3 { font-size: 1rem; }

/* -------------------------------------------------------------- meta rows --- */

.meta-rows { border-top: 1px solid var(--rule); }

.meta-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
}

.meta-row dt {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 3px;
}

.meta-row dd a {
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.meta-row dd a:hover { color: var(--type); }

/* -------------------------------------------------------------- code block --- */

.code-block {
  margin-top: var(--space-6);
  border: 1px solid var(--rule);
  padding: 24px;
  background: var(--graphite);
  max-width: none;
}

.code-caption {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 var(--space-4);
  max-width: none;
}

.code-block pre {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--type);
}

/* ------------------------------------------------------------- quiet close --- */

.quiet-close { padding: var(--band-pad) 0; }

.quiet-close p {
  font-family: var(--font-display);
  font-size: var(--text-statement);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 24ch;
}

/* Underlined for the article close, where links sit inside running text
   and butter against warm white is only 1.29:1 (WCAG 1.4.1). */
.quiet-close a {
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.quiet-close a:hover { color: var(--type); }

/* ----------------------------------------------------------------- footer --- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 22px var(--pad-x) 26px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 24px;
  flex-wrap: wrap;
}

.site-foot p {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.foot-sig {
  font-family: var(--font-mono) !important;
  font-size: var(--text-mono-caption) !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.footer-name {
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

/* --------------------------------------- work with me + readiness check --- */

.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--butter);
}

.page-hero .eyebrow-mono { margin-bottom: var(--space-5); }

/* Long-form offer headline: the hero scale would set 135 characters at
   poster size, so this steps down while keeping the 900 weight. */
.h1-long {
  font-size: clamp(1.875rem, 3.8vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 30ch;
}

.avail { margin-top: var(--space-5); max-width: 64ch; }

.soft-cta {
  align-self: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 40ch;
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.soft-cta:hover { color: var(--type); }

.strap {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 36ch;
}

.statement + .prose,
.statement + .lede { margin-top: var(--space-5); }

.page-hero .prose { margin-top: var(--space-5); }
.page-hero .fine { margin-top: var(--space-5); }

.credit-block {
  margin-top: var(--space-6);
  border: 1px solid var(--rule);
  padding: var(--space-5);
  max-width: 68ch;
}
.credit-block .card-tag { margin-top: 0; }
.credit-block p + p {
  margin-top: var(--space-3);
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-display);
  line-height: 1.5;
  max-width: 60ch;
}

.container-narrow > .card-link,
.container > .card-link { margin-top: var(--space-5); }

/* ----------------------------------------------------------- offer stack --- */

.offer-list { margin-top: var(--space-7); border-top: 1px solid var(--rule); }

.offer {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: var(--space-4) clamp(24px, 4vw, 64px);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--rule);
}

.offer h4 {
  margin-top: var(--space-3);
  font-size: var(--text-title);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 16ch;
}

.offer-strap {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--grey);
  max-width: 22ch;
}

.offer-main > p {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 62ch;
}
.offer-main > p:first-child { margin-top: 0; }
.offer-main > .price + .price { margin-top: var(--space-3); }
.offer-main .card-link { margin-top: var(--space-4); }

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
}

.price-cur, .price-note, .price-mid {
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.price-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--butter);
}

.offer-main > p.offer-terms,
.container-narrow > .offer-terms {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--grey);
  max-width: 68ch;
}
.offer-main > p.offer-terms + p.offer-terms { margin-top: var(--space-2); }
.container-narrow > .offer-terms { margin-top: var(--space-5); }

.money-rules {
  margin-top: var(--space-7);
  border: 1px solid var(--rule);
  padding: var(--space-5);
  max-width: 76ch;
}
.money-rules h4 { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.money-rules ul { list-style: none; margin-top: var(--space-2); }
.money-rules li {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 66ch;
  padding: var(--space-3) 0 0;
  margin-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.money-rules li:first-child { border-top: 0; margin-top: 0; }

/* ----------------------------------------------------------------- tables --- */

.table-wrap { margin-top: var(--space-6); overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}
.data-table th, .data-table td {
  border-top: 1px solid var(--rule);
  padding: 14px 18px 14px 0;
  vertical-align: top;
}
.data-table thead th, .data-table thead td {
  border-top: 0;
  padding-top: 0;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.data-table tbody th { font-weight: 700; max-width: 44ch; }
.data-table .price-cell { font-weight: 700; color: var(--butter); white-space: nowrap; }
.compare th, .compare td { min-width: 170px; }

.table-note {
  margin-top: var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--grey);
  max-width: 76ch;
}

/* ------------------------------------------------------------- proof rows --- */

.proof-rows { list-style: none; margin-top: var(--space-6); border-top: 1px solid var(--rule); }
.proof-rows li { padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); }
.proof-rows p {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  max-width: 62ch;
}
.proof-rows .card-link { margin-top: var(--space-3); }

.pull-line {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--grey);
  max-width: 68ch;
}

/* -------------------------------------------------------------------- faq --- */

.faq-list { margin-top: var(--space-6); border-top: 1px solid var(--rule); }

details.faq { border-bottom: 1px solid var(--rule); }

details.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--butter);
  flex: none;
}
details.faq[open] summary::after { content: "\2212"; }
details.faq summary:hover { color: var(--butter); }
details.faq .prose { padding-bottom: var(--space-5); max-width: 68ch; }

.cta-alt {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 52ch;
}
.cta-alt a {
  color: var(--butter);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cta-alt a:hover { color: var(--type); }

/* ----------------------------------------------------- standards-first ai --- */

.first-action {
  margin-top: var(--space-6);
  border: 1px solid var(--rule);
  padding: var(--space-5);
  max-width: 56ch;
}
.first-action p {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  max-width: 44ch;
}
.first-action .actions { margin-top: var(--space-4); }

.board-quote {
  margin-top: var(--space-5);
  border-left: 1px solid var(--rule);
  padding-left: clamp(20px, 3vw, 36px);
  max-width: 62ch;
}
.board-quote p {
  font-family: var(--font-display);
  font-size: var(--text-lede);
  font-weight: 500;
  line-height: 1.55;
}

.phase {
  margin-top: var(--space-7);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-6);
}
.phase h4 {
  margin-top: var(--space-2);
  font-size: var(--text-title);
  font-weight: 900;
  letter-spacing: -0.025em;
}
.phase .prose { margin-top: var(--space-4); }

.sub-head {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type);
}
.prose .sub-head + p, .prose .sub-head + ul { margin-top: var(--space-3); }

.gov-block { margin-top: var(--space-7); max-width: 72ch; }
.gov-block h4 { font-size: 1.0625rem; font-weight: 800; max-width: 40ch; }
.gov-block p { margin-top: var(--space-3); max-width: 68ch; }

.opener {
  font-family: var(--font-display);
  font-size: var(--text-lede);
  font-weight: 500;
  line-height: 1.55;
  max-width: 58ch;
}

.numbered {
  list-style: none;
  counter-reset: item;
  margin-top: var(--space-5);
  max-width: 68ch;
}
.numbered li {
  counter-increment: item;
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 56px;
  border-top: 1px solid var(--rule);
  font-size: var(--text-body);
  line-height: 1.5;
}
.numbered li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--butter);
}

/* -------------------------------------------------------- readiness check --- */

html:not(.js) .js-only { display: none; }

.fine {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--grey);
  max-width: 60ch;
}

.dim-intro {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--butter);
}

fieldset.q { border: 0; margin-top: var(--space-6); padding: 0; min-width: 0; }
fieldset.q legend { padding: 0; }

.q-progress {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.q-text {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 52ch;
}

.q-options { margin-top: var(--space-4); max-width: 52ch; }

.opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin-top: 8px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  transition: border-color 120ms ease;
}
.opt:hover { border-color: var(--butter); }
.opt:has(input:checked) { border-color: var(--butter); }
.opt input {
  accent-color: var(--butter);
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
}

.q-foot { margin-top: var(--space-3); font-size: 0.8125rem; color: var(--grey); max-width: 52ch; }

.check-note {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--butter);
}

#check-form .actions { margin-top: var(--space-6); }

.score-bars { margin-top: var(--space-6); max-width: 560px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
}
.bar-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--type);
}
.bar { display: block; height: 10px; border: 1px solid var(--rule); }
.bar-fill { display: block; height: 100%; width: 0; background: var(--butter); }

#score-verdict { margin-top: var(--space-6); }
#gate-invite {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 62ch;
}

.report h4 {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  font-weight: 800;
  max-width: 40ch;
}
.report .report-p { margin-top: var(--space-3); max-width: 68ch; }
.report .fine { margin-top: var(--space-3); }
.report #fix-dim { margin-top: var(--space-3); }
.report .actions { margin-top: var(--space-5); }

.dim-block { margin-top: var(--space-5); max-width: 68ch; }
.dim-block .card-tag { margin-top: 0; }
.dim-block p + p { margin-top: var(--space-2); }

.specimen { margin-top: var(--space-5); }
.spec-rule {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.35;
  max-width: 50ch;
}
.spec-tag {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-mono-tag);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.spec-good { color: var(--butter); }
.spec-bad { color: var(--grey); }
.spec-eg { margin-top: var(--space-2); font-size: 15px; max-width: 56ch; }
.spec-why { margin-top: var(--space-4); font-size: 0.8125rem; color: var(--grey); max-width: 56ch; }

.perma {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: var(--grey);
  max-width: 72ch;
}
.perma-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--butter);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  word-break: break-all;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.perma-link:hover { color: var(--type); }
#copy-link { margin-top: var(--space-3); }

@media (max-width: 760px) {
  .offer { grid-template-columns: 1fr; padding: var(--space-6) 0; }
  .bar-row { grid-template-columns: 1fr; gap: 6px; }
  .data-table tbody th { max-width: none; }
}

/* --------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media .blob { animation: none; }
  .marquee-track { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-item:last-child { grid-column: 1 / -1; }
  .who { grid-template-columns: 1fr; }
  .who-portrait { max-width: 400px; }
  .card-grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .card-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav {
    position: relative;
    background: var(--graphite);
    gap: 12px 16px;
    padding: 18px var(--pad-x) 16px;
  }
  .hero { min-height: 0; }
  .hero-content { padding-top: clamp(72px, 14vh, 140px); }
  /* Text spans the full width here, so the shade covers the full width:
     a touch of art presence at the top, near-solid behind the copy. */
  .hero-shade {
    background:
      linear-gradient(180deg,
        rgba(26, 24, 21, 0.62) 0%, rgba(26, 24, 21, 0.78) 26%,
        rgba(26, 24, 21, 0.88) 58%, rgba(26, 24, 21, 0.96) 100%);
  }
  .page-hero { padding-top: var(--space-7); }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { min-height: 0; gap: 22px; }
  .row, .meta-row, details.role summary, .role-body { grid-template-columns: 1fr; }
  .role-org, .role-scope, .role-hint, .role-body > * { grid-column: 1; }
}