/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Hallmark · macrostructure: Split Studio (rebuilt) · nav: N9 edge-aligned · footer: Ft5 Statement
 * theme: studied-DNA (source: url — instrument.com + basicagency.com)
 *   observed: display uppercase wght 800, lh 0.85, ls -0.03em · off-white oklch(96% .001 106) field
 *   observed: strict 12-col grid, media bleeds viewport edge, small uppercase meta type, tiny pill buttons
 * genre: modern-minimal · enrichment: Tier-A CSS art work cards
 */

:root {
  --color-paper:   oklch(96.2% 0.001 106);
  --color-paper-2: oklch(92.5% 0.002 106);
  --color-ink:     oklch(23% 0.004 60);
  --color-ink-2:   oklch(45% 0.004 60);
  --color-ink-3:   oklch(62% 0.004 60);
  --color-dark:    oklch(21% 0.004 60);
  --color-accent:  oklch(53% 0.23 262);      /* on light paper — 7.4:1 on --color-paper */
  --color-accent-lt: oklch(82% 0.135 235);   /* on dark surfaces — the 53% blue is only 2.5:1 there */
  --color-blush:   oklch(88% 0.06 20);
  --color-sand:    oklch(90% 0.045 95);
  --color-focus:   oklch(53% 0.23 262);

  --font: "Archivo", -apple-system, "Helvetica Neue", sans-serif;

  --text-meta:  0.8125rem;
  --text-body:  1.0625rem;
  --text-lede:  clamp(1.0625rem, 1.4vw, 1.3125rem);
  --text-h3:    clamp(1.125rem, 1.6vw, 1.4375rem);
  --text-quote: clamp(1.375rem, 2.6vw, 2.1875rem);
  --text-h2:    clamp(2.125rem, 6vw, 5rem);
  --text-display: clamp(2.4rem, 9vw, 8rem);
  --text-num:   clamp(2.25rem, 4.5vw, 3.75rem);

  --gutter: clamp(1rem, 1.8vw, 1.75rem);
  --margin: clamp(1.25rem, 5vw, 5rem);
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;

  /* sticky nav: 44px link box + space-md top and bottom */
  --nav-h: calc(44px + (var(--space-md) * 2) + 1px); /* +1px for the frosted state's hairline */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* clears the sticky nav so anchor targets don't land underneath it */
  /* just enough to clear the nav — each section's own top padding supplies the breathing room */
  scroll-padding-top: var(--nav-h);
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, figcaption, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:where(a, button, summary):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.skip {
  position: absolute; left: var(--margin); top: -100vh; z-index: 60;
  background: var(--color-ink); color: var(--color-paper);
  padding: 0.75rem 1.25rem; border-radius: 999px;
  font-size: var(--text-meta); font-weight: 600; text-transform: uppercase;
}
.skip:focus { top: var(--space-sm); }

/* ── the one type idea: huge, uppercase, 800, lh .85 ── */
.d1, .d2 {
  font-weight: 800; font-style: normal; text-transform: uppercase;
  letter-spacing: -0.032em; line-height: 0.85;
  overflow-wrap: anywhere; min-width: 0;
}
.d1 { font-size: var(--text-display); }
.d2 { font-size: var(--text-h2); }
.d3 {
  font-size: var(--text-h3); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.012em; line-height: 1.05; overflow-wrap: anywhere;
}
.meta {
  font-size: var(--text-meta); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.015em; line-height: 1.35; color: var(--color-ink-2);
}
.lede { font-size: var(--text-lede); color: var(--color-ink-2); line-height: 1.45; text-wrap: pretty; }
.lede strong { color: var(--color-ink); font-weight: 700; }

/* ── strict 12-col grid ── */
.g {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter); padding-inline: var(--margin);
}
.g--bleed-r { padding-right: 0; }
@media (max-width: 60rem) { .g { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (min-width: 60.001rem) {
  .c1-4  { grid-column: 1 / 5; }
  .c1-5  { grid-column: 1 / 6; }
  .c1-6  { grid-column: 1 / 7; }
  .c1-8  { grid-column: 1 / 9; }
  .c1-9  { grid-column: 1 / 10; }
  .c7-13 { grid-column: 7 / 13; }
  .c8-13 { grid-column: 8 / -1; }
  .c1-13 { grid-column: 1 / -1; }
}
@media (max-width: 60rem) {
  [class*="c1-"], [class*="c7-"], [class*="c8-"] { grid-column: 1 / -1; }
}

/* ── nav ── */
.nav {
  position: sticky; top: 0; z-index: 30;
  padding-block: var(--space-md);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              backdrop-filter var(--dur) var(--ease-out);
}
/* frosts once the page has moved — set by the scroll observer below */
.nav.is-stuck {
  background: color-mix(in oklab, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: oklch(23% 0.004 60 / 0.10);
}
/* no backdrop-filter support (or forced-colors): fall back to an opaque bar rather than unreadable text */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-stuck { background: var(--color-paper); }
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-inline: var(--margin); }
.nav__mark { font-size: var(--text-meta); font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.nav__links { display: flex; gap: clamp(0.75rem, 2vw, 2rem); }
.nav__links a {
  font-size: var(--text-meta); font-weight: 500; text-transform: uppercase; letter-spacing: 0.015em;
  min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--color-accent); }
@media (max-width: 52rem) { .nav__links a:not(:last-child) { display: none; } }

/* ── pill ── */
.pill {
  font-size: var(--text-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0 1.35rem; min-height: 44px;
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.pill:hover { background: var(--color-ink); color: var(--color-paper); }
.pill--solid { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.pill--solid:hover { background: var(--color-accent); border-color: var(--color-accent); }
.pill--light { border-color: var(--color-paper); color: var(--color-paper); }
.pill--light:hover { background: var(--color-paper); color: var(--color-ink); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ── hero ── */
.hero { padding-block: clamp(2rem, 6vw, 5rem) var(--space-2xl); align-items: start; }
.hero__h { margin-bottom: var(--space-xl); }
.hero__h .acc { color: var(--color-accent); }
.hero__lede { max-width: 34ch; margin-bottom: var(--space-lg); }
.hero__panel { align-self: end; }

.panel { background: var(--color-dark); color: var(--color-paper); padding: var(--space-lg) var(--space-md) var(--space-lg) var(--space-lg); }
.panel .meta { color: oklch(96% 0.001 106 / 0.72); }
.panel__row {
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding-block: 0.6rem; border-bottom: 1px solid oklch(96% 0.001 106 / 0.16);
  font-size: var(--text-meta); text-transform: uppercase; font-weight: 500; letter-spacing: 0.015em;
}
.panel__row:last-child { border-bottom: 0; }
.panel__row b { font-weight: 700; color: var(--color-accent); }

/* ── sections ── */
.sec { padding-block: var(--space-2xl); }
.sec--tight { padding-block: var(--space-xl); }
.sec--alt { background: var(--color-paper-2); }
/* dark surfaces re-point the accent token, so every rule using it lightens automatically */
.sec--dark, .panel, .foot { --color-accent: var(--color-accent-lt); }
.sec--dark { background: var(--color-dark); color: var(--color-paper); }
.sec--dark .meta { color: oklch(96% 0.001 106 / 0.72); }
.sec--dark .lede, .sec--dark p { color: oklch(96% 0.001 106 / 0.78); }
.sec__head { margin-bottom: var(--space-xl); }

/* ── logo bar: typographic wordmarks, no fabricated brand marks ── */
.logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md) clamp(1.5rem, 4vw, 3.5rem);
}
.logos span {
  font-size: clamp(0.9375rem, 1.5vw, 1.25rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-ink-3);
  white-space: nowrap;
}

/* ── work ── */
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gutter); }
@media (max-width: 60rem) { .work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .work { grid-template-columns: minmax(0, 1fr); } }
.card__art {
  aspect-ratio: 4 / 3; margin-bottom: var(--space-md);
  display: block; overflow: hidden; position: relative;
  background: var(--color-paper-2);
}
.card__art img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; transition: transform var(--dur) var(--ease-out);
}
.card:hover .card__art img { transform: scale(1.025); }
.card:hover .card__name { color: var(--color-accent); }
.card__name { display: block; margin-bottom: var(--space-xs); transition: color var(--dur) var(--ease-out); }
.card__desc { max-width: 26ch; }

.art--a { background: var(--color-accent); }
.art--a::after { content: ""; width: 62%; aspect-ratio: 1; background: var(--color-paper); border-radius: 50%; position: absolute; bottom: -18%; right: -12%; }
.art--b { background: var(--color-blush); }
.art--b::after { content: ""; position: absolute; inset: 18% 12%; background: repeating-linear-gradient(90deg, var(--color-dark) 0 6px, transparent 6px 22px); }
.art--c { background: var(--color-dark); }
.art--c::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--color-paper) 0 0) 12% 22% / 46% 3px no-repeat,
    linear-gradient(var(--color-paper) 0 0) 12% 30% / 68% 3px no-repeat,
    linear-gradient(var(--color-paper) 0 0) 12% 38% / 30% 3px no-repeat;
}
.art--c::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }
.art--d { background: var(--color-sand); }
.art--d::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 180deg at 50% 62%, var(--color-dark) 0 25%, transparent 25% 100%);
}
.art--e { background: var(--color-paper-2); }
.art--e::before { content: ""; position: absolute; inset: 14% 14% 46% 14%; background: var(--color-dark); }
.art--e::after { content: ""; position: absolute; inset: 60% 14% 14% 14%; background: var(--color-blush); }
.art--f { background: var(--color-dark); }
.art--f::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, var(--color-sand) 0 14px, transparent 14px 40px);
}

/* ── ledger ── */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gutter); }
@media (max-width: 34rem) { .ledger { grid-template-columns: minmax(0, 1fr); } }
.ledger li {
  font-size: clamp(1.125rem, 2.1vw, 1.75rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.022em; line-height: 1.18;
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.ledger__k li { color: var(--color-accent); }

/* ── block kit: Matrix page-builder visual ── */
.kit { display: grid; gap: var(--space-xs); }
.blk {
  border: 1px solid var(--color-ink); background: var(--color-paper);
  padding: var(--space-sm) var(--space-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  font-size: var(--text-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.blk span:last-child { font-weight: 500; color: var(--color-ink-2); }
.blk--tall { padding-block: var(--space-lg); }
.blk--fill { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.blk--fill span:last-child { color: var(--color-paper); }
.blk--sand { background: var(--color-sand); }
.blk--blush { background: var(--color-blush); }
.kit__add {
  border: 1px dashed var(--color-ink-2); color: var(--color-ink-2); background: none;
  padding: var(--space-sm) var(--space-md); text-align: left;
  font: inherit; font-size: var(--text-meta); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* ── standards 4-up ── */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--gutter); }
@media (max-width: 68rem) { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .quad { grid-template-columns: minmax(0, 1fr); } }
.quad h3 { margin-bottom: var(--space-xs); }
.quad p { color: var(--color-ink-2); }
.sec--dark .quad p { color: oklch(96% 0.001 106 / 0.72); }

/* ── testimonials: big pull-quotes, no cards ── */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gutter); }
@media (max-width: 60rem) { .quotes { grid-template-columns: minmax(0, 1fr); } }
.quote p {
  font-size: var(--text-quote); font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.15; text-wrap: pretty; margin-bottom: var(--space-md);
}
.quote footer { color: var(--color-ink-2); font-size: var(--text-meta); text-transform: uppercase; letter-spacing: 0.015em; }
.quote footer b { color: var(--color-ink); font-weight: 700; }

/* ── trio ── */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gutter); }
@media (max-width: 52rem) { .trio { grid-template-columns: minmax(0, 1fr); } }
.step__n, .rate__n { display: block; font-weight: 800; letter-spacing: -0.035em; line-height: 0.9; }
.step__n { font-size: var(--text-h3); color: var(--color-accent); margin-bottom: var(--space-sm); }
.rate__n { font-size: var(--text-num); margin-block: var(--space-xs) var(--space-sm); white-space: nowrap; }
.rate__n b { font-weight: inherit; color: var(--color-accent); } /* the figure only — not 'From' or the unit */
.trio p { color: var(--color-ink-2); max-width: 32ch; margin-top: var(--space-xs); }
.sec--dark .trio p { color: oklch(96% 0.001 106 / 0.75); }

/* ── questions ── */
.qs { display: grid; gap: var(--space-lg); }
@media (min-width: 60.001rem) { .qs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gutter); } }
.qs p { color: var(--color-ink-2); margin-top: var(--space-xs); max-width: 46ch; }

/* ── footer ── */
.foot { background: var(--color-dark); color: var(--color-paper); padding-block: var(--space-2xl) var(--space-xl); }
.foot .d1 { margin-bottom: var(--space-xl); }
.foot__meta { color: oklch(96% 0.001 106 / 0.72); }
.foot__meta a { border-bottom: 1px solid oklch(96% 0.001 106 / 0.35); }
.foot__meta a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.foot__cols { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 48rem) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); } }


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

/* ── journal ─────────────────────────────────────────────── */
.jhead { padding-block: clamp(2rem, 6vw, 4.5rem) var(--space-xl); }
.jhead .lede { max-width: 46ch; margin-top: var(--space-lg); }

/* lead post */
.lead { display: grid; gap: var(--space-lg); align-items: end; }
@media (min-width: 60.001rem) { .lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); } }
.lead__t { font-size: clamp(1.75rem, 4.2vw, 3.25rem); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 0.92; margin-block: var(--space-sm) var(--space-md); }
.lead:hover .lead__t { color: var(--color-accent); }
.lead p { color: var(--color-ink-2); max-width: 52ch; }

/* post list */
.posts { border-top: 1px solid oklch(23% 0.004 60 / 0.14); }
.post {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-bottom: 1px solid oklch(23% 0.004 60 / 0.14);
}
@media (min-width: 52rem) {
  .post { grid-template-columns: 8.5rem minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--space-lg); align-items: baseline; }
}
.post__date { font-variant-numeric: tabular-nums; }
.post__t { display: block; font-size: clamp(1.125rem, 1.9vw, 1.625rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.018em; line-height: 1.08; transition: color var(--dur) var(--ease-out); }
.post:hover .post__t { color: var(--color-accent); }
.post__sub { display: block; color: var(--color-ink-2); margin-top: var(--space-xs); max-width: 56ch; font-size: var(--text-meta); }

/* byline + monogram avatar */
.by { display: flex; align-items: center; gap: 0.625rem; }
.mono {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em;
  background: var(--color-ink); color: var(--color-paper);
}
.mono--a { background: var(--color-accent); }
.mono--b { background: var(--color-blush); color: var(--color-ink); }
.mono--c { background: var(--color-sand);  color: var(--color-ink); }
.mono--d { background: var(--color-dark); }
.mono--lg { width: 3rem; height: 3rem; font-size: 0.8125rem; }

/* authors */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg) var(--gutter); }
@media (max-width: 60rem) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .team { grid-template-columns: minmax(0, 1fr); } }
.team__n { display: block; margin-top: var(--space-sm); }
.team__r { color: var(--color-ink-2); }

/* ── work: abstracted site compositions ──────────────────────
   NDA-safe placeholders. Each reads as "a website" — nav bar,
   hero, content blocks — without depicting any real one.       */
.art {
  --a-bar: var(--color-ink);
  --a-hero: var(--color-accent);
  --a-blk: oklch(23% 0.004 60 / 0.26);
  --a-bg: var(--color-paper-2);
  background: var(--a-bg);
  display: flex; flex-direction: column;
}
.art__bar { flex: 0 0 7%; background: var(--a-bar); }
.art__body { flex: 1; display: flex; flex-direction: column; gap: 6%; padding: 6%; min-height: 0; }
.art__hero { flex: 2.2; background: var(--a-hero); min-height: 0; }
.art__row { flex: 1; display: flex; gap: 5%; min-height: 0; }
.art__row i { flex: 1; background: var(--a-blk); }
.art__split { flex: 2.2; display: flex; gap: 5%; min-height: 0; }
.art__split .art__hero { flex: 1.2; }
.art__split span { flex: 1; display: flex; flex-direction: column; gap: 8%; }
.art__split span i { flex: 1; background: var(--a-blk); }

.art--2 { --a-bg: var(--color-dark); --a-bar: oklch(96% 0.001 106 / 0.32);
          --a-hero: var(--color-sand); --a-blk: oklch(96% 0.001 106 / 0.24); }
.art--3 { --a-hero: var(--color-blush); }
.art--4 { --a-bg: var(--color-paper); --a-hero: var(--color-dark); --a-blk: var(--color-accent); }
.art--5 { --a-bg: var(--color-dark); --a-bar: var(--color-accent-lt);
          --a-hero: oklch(96% 0.001 106 / 0.16); --a-blk: var(--color-accent-lt); }
.art--6 { --a-bg: var(--color-sand); --a-bar: oklch(23% 0.004 60 / 0.75);
          --a-hero: oklch(52% 0.11 30); --a-blk: oklch(23% 0.004 60 / 0.26); }

/* ── article ─────────────────────────────────────────────── */
.post__title { max-width: 22ch; margin-block: var(--space-sm) var(--space-md); }
.prose { padding-bottom: var(--space-2xl); }
.prose p { max-width: 62ch; margin-bottom: var(--space-md); line-height: 1.6; }
.prose p strong { font-weight: 700; }
.prose .post__h2 { margin-block: var(--space-xl) var(--space-md); max-width: 30ch; }
.prose .post__list { max-width: 62ch; margin-bottom: var(--space-md); }
.prose .post__list li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-xs); }
.prose .post__list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.5rem; height: 1px; background: var(--color-accent); }
.post__quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin-block: var(--space-lg);
  max-width: 46ch;
}
.post__quote p {
  font-size: var(--text-quote); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 0; color: var(--color-ink);
}

/* prev / next */
.nears { display: grid; gap: var(--gutter); }
@media (min-width: 52rem) { .nears { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.near { display: block; padding: var(--space-lg); background: var(--color-paper); border: 1px solid oklch(23% 0.004 60 / 0.14); transition: border-color var(--dur) var(--ease-out); }
.near:hover { border-color: var(--color-accent); }
.near__t { display: block; margin-top: var(--space-xs); max-width: 24ch; }
.near:hover .near__t { color: var(--color-accent); }