/* =========================================================================
   Northard — design system v3
   "Editorial gallery" — charcoal side-rail + ivory canvas + terracotta accent
   Layout: persistent dark rail (identity + nav) beside a scrolling editorial
   content column. Index lists & hairline rules instead of stacked card bands.
   ========================================================================= */

/* ----- Fonts (self-hosted, latin subset) --------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plexmono.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ----- Tokens ------------------------------------------------------------ */
:root {
  --char: #1A1714;        /* charcoal — rail, ink */
  --char-2: #242019;      /* raised charcoal surface */
  --char-3: #2E2922;
  --ivory: #F4F0E8;       /* content canvas */
  --ivory-2: #ECE6D9;     /* alt block */
  --paper: #FBF9F4;       /* light surface */
  --terra: #C2603A;       /* accent */
  --terra-deep: #A24A28;
  --terra-soft: #EAD9CF;
  --body: #4C463D;        /* warm body text on ivory */
  --muted: #847A6C;       /* muted on ivory */
  --on-dark: #CFC7B8;     /* text on charcoal */
  --muted-dark: #948B7C;  /* muted on charcoal */
  --line: #DBD3C2;        /* hairline on ivory */
  --line-2: #CcC3AF;
  --line-dark: rgba(244, 240, 232, 0.13);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-hero: clamp(2.5rem, 4.4vw, 4rem);
  --fs-h1: clamp(2.1rem, 3.8vw, 3.3rem);
  --fs-h2: clamp(1.7rem, 2.8vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lead: clamp(1.15rem, 1.45vw, 1.4rem);
  --fs-body: 1.06rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.74rem;

  --rail-w: clamp(280px, 24vw, 340px);
  --pad: clamp(1.5rem, 4.5vw, 5rem);
  --maxw: 1200px;
  --maxw-narrow: 680px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--char); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65;
  color: var(--body); background: var(--ivory);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--terra); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--terra-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--char); line-height: 1.06; letter-spacing: -0.012em; font-weight: 600; margin: 0 0 0.5em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
::selection { background: var(--terra); color: var(--ivory); }
:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 3px; }

/* ----- App shell: rail + content ----------------------------------------- */
.site { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }

.rail {
  background: var(--char); color: var(--on-dark);
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.5rem) clamp(1.5rem, 2vw, 2.25rem);
  border-right: 1px solid var(--line-dark);
}
.rail__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; }
.brand svg, .brand img { height: 26px; width: auto; }
.rail__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: clamp(2rem, 6vh, 4rem); }
.rail__tagline { font-size: 0.92rem; color: var(--muted-dark); line-height: 1.5; max-width: 30ch; margin-bottom: 2.25rem; }
.rail__tagline strong { color: var(--ivory); font-weight: 500; }

/* numbered editorial nav */
.rail-nav ul { list-style: none; margin: 0; padding: 0; counter-reset: nav; }
.rail-nav li { border-top: 1px solid var(--line-dark); }
.rail-nav li:last-child { border-bottom: 1px solid var(--line-dark); }
.rail-nav a {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.85rem 0; color: var(--ivory);
  font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.01em;
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.rail-nav a::before {
  counter-increment: nav; content: counter(nav, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--muted-dark);
  letter-spacing: 0; transform: translateY(-0.15em);
}
.rail-nav a:hover, .rail-nav .current-menu-item > a { color: var(--terra); padding-left: 0.35rem; }
.rail-nav .current-menu-item > a::before { color: var(--terra); }

.rail__foot { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.rail__social { display: flex; gap: 0.5rem; }
.rail__social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 8px; color: var(--on-dark); transition: all 0.2s var(--ease); }
.rail__social a:hover { background: var(--terra); border-color: var(--terra); color: var(--ivory); }
.rail__social svg { width: 18px; height: 18px; }
.rail__copy { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted-dark); letter-spacing: 0.02em; }

.content { background: var(--ivory); min-width: 0; }

/* ----- Content wrap / blocks --------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--alt { background: var(--ivory-2); }
.section--dark { background: var(--char); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ivory); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--char); font-weight: 400; }
.section--dark .lead { color: var(--on-dark); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ----- Kicker (mono editorial label) ------------------------------------- */
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); margin-bottom: 1.25rem;
}
.eyebrow::before, .kicker::before { content: "—"; color: var(--terra); }
.section--dark .eyebrow, .section--dark .kicker { color: var(--terra); }
.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; }
.section-title { font-size: var(--fs-h2); }

/* ----- Buttons / links --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; line-height: 1;
  padding: 0.9rem 1.5rem; border-radius: 2px; border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--terra); color: var(--ivory); }
.btn--primary:hover { background: var(--terra-deep); color: var(--ivory); }
.btn--ghost { background: transparent; color: var(--char); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--char); color: var(--char); }
.section--dark .btn--ghost, .rail .btn--ghost { color: var(--ivory); border-color: var(--line-dark); }
.section--dark .btn--ghost:hover, .rail .btn--ghost:hover { border-color: var(--ivory); }
.btn--light { background: var(--ivory); color: var(--char); }
.btn--light:hover { background: #fff; color: var(--char); }
.btn--block { width: 100%; }
.btn .icon { width: 16px; height: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex: none; }
.textlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 500; color: var(--char);
  border-bottom: 1.5px solid var(--terra); padding-bottom: 2px;
}
.textlink:hover { color: var(--terra); }
.textlink .icon { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.textlink:hover .icon { transform: translate(2px, -2px); }
.section--dark .textlink { color: var(--ivory); }

/* ----- Mobile rail toggle ------------------------------------------------ */
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 8px; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 19px; height: 2px; background: var(--ivory); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .site { grid-template-columns: 1fr; }
  .rail { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem var(--pad); z-index: 100; }
  .rail__top { flex: 1; }
  .nav-toggle { display: inline-flex; }
  .rail__panel {
    position: fixed; inset: 64px 0 0 0; margin: 0; padding: 1.5rem var(--pad) 2rem;
    background: var(--char); transform: translateX(-100%); transition: transform 0.35s var(--ease);
    overflow-y: auto;
  }
  body.nav-open .rail__panel { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .rail-nav a { font-size: 1.5rem; padding: 1rem 0; }
}

/* ----- Hero -------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero__media .portrait { aspect-ratio: 4 / 5; width: 100%; height: auto; max-height: 560px; }
.hero__media .portrait img { object-position: center 18%; }
@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__media .portrait { max-height: none; }
}
/* In the rail-visible single-column zone, keep the portrait an inset, not full-bleed. */
@media (min-width: 901px) and (max-width: 1040px) {
  .hero__media .portrait { max-width: 460px; }
}
.hero__title { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.018em; line-height: 1.02; margin-bottom: 1.3rem; color: var(--char); }
.hero__title .accent { color: var(--terra); }
.hero__lead { font-size: var(--fs-lead); color: var(--body); max-width: 42ch; margin-bottom: 2rem; }
.hero__meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hero__meta-label { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.6rem; }
.hero__ventures { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.hero__ventures span { font-family: var(--font-display); font-weight: 500; color: var(--char); font-size: 0.98rem; }

.portrait { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--char); border-radius: 3px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__badge { position: absolute; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: linear-gradient(transparent, rgba(20,17,12,0.85)); color: var(--ivory); padding: 2rem 1.1rem 1rem; }
.portrait__badge strong { font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; }
.portrait__badge span { font-family: var(--font-mono); color: var(--terra); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 900px) { .portrait { max-width: 360px; } }

/* ----- Metrics (editorial figures) --------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
@media (max-width: 680px) { .metrics { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
.metric__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--char); letter-spacing: -0.03em; line-height: 1; }
.metric__num .unit { color: var(--terra); }
.metric__label { margin-top: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); line-height: 1.4; }
.metrics--dark .metric__num { color: var(--ivory); }
.metrics--dark .metric__label { color: var(--muted-dark); }

/* ----- Index list (ventures / writing) — the editorial signature --------- */
.index { border-top: 1px solid var(--char); }
.index__row {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline; padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--line); position: relative;
  transition: padding-left 0.25s var(--ease);
}
.index__row:hover { padding-left: 0.5rem; }
.index__num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); padding-top: 0.5rem; }
.index__main { min-width: 0; }
.index__head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.index__name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; color: var(--char); letter-spacing: -0.02em; line-height: 1.05; transition: color 0.2s var(--ease); }
.index__row:hover .index__name { color: var(--terra); }
.index__role { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--terra); }
.index__desc { color: var(--body); max-width: 60ch; margin: 0; }
.index__aside { text-align: right; align-self: center; }
.index__cta { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--char); white-space: nowrap; }
.index__cta .icon { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.index__row:hover .index__cta { color: var(--terra); }
.index__row:hover .index__cta .icon { transform: translate(2px, -2px); }
.index__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) {
  .index__row { grid-template-columns: 1.8rem 1fr; }
  .index__aside { grid-column: 2; text-align: left; margin-top: 0.75rem; }
}

/* ----- Split / about ----------------------------------------------------- */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.pull { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; color: var(--char); letter-spacing: -0.02em; font-weight: 500; }
.pull .accent { color: var(--terra); }

/* ----- Principles (numbered editorial) ----------------------------------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 820px) { .principles { grid-template-columns: 1fr; } }
.principle { padding-top: 1.4rem; border-top: 1px solid var(--char); }
.section--dark .principle { border-top-color: var(--line-dark); }
.principle__num { font-family: var(--font-mono); font-weight: 500; color: var(--terra); font-size: 0.78rem; margin-bottom: 1rem; display: block; }
.principle h3 { font-size: var(--fs-h3); margin-bottom: 0.55rem; }
.principle p { color: var(--body); margin: 0; }
.section--dark .principle p { color: var(--muted-dark); }
.principle__num .icon { width: 22px; height: 22px; }

/* ----- Posts (editorial cards, flat) ------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 820px) { .posts { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__thumb { aspect-ratio: 16 / 10; background: var(--char); position: relative; overflow: hidden; border-radius: 3px; margin-bottom: 1.1rem; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__thumb .mark { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.5; }
.post-card__thumb .mark svg { width: 30%; height: auto; }
.post-card__body { display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.post-card__title { font-size: 1.3rem; line-height: 1.18; margin-bottom: 0.5rem; }
.post-card__title a { color: var(--char); }
.post-card__title a:hover { color: var(--terra); }
.post-card__excerpt { color: var(--body); font-size: 0.97rem; margin-bottom: 1rem; }
.post-card__footer { margin-top: auto; }

/* ----- CTA band ---------------------------------------------------------- */
.cta-band__inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
@media (max-width: 760px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band h2 { font-size: var(--fs-h1); margin-bottom: 0.5rem; }

/* ----- Page hero / prose ------------------------------------------------- */
.page-hero { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(1.75rem, 3vw, 2.75rem); }
.page-hero__title { font-size: var(--fs-h1); margin-bottom: 0.7rem; }
.page-hero .lead { max-width: 62ch; }
.prose { max-width: var(--maxw-narrow); }
.prose p, .prose ul, .prose ol { font-size: 1.14rem; line-height: 1.78; color: var(--body); }
.prose h2 { font-size: var(--fs-h2); margin-top: 2.3em; margin-bottom: 0.55em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.7em; margin-bottom: 0.5em; }
.prose blockquote { margin: 2.2rem 0; padding: 0.2rem 0 0.2rem 1.6rem; border-left: 3px solid var(--terra); font-family: var(--font-display); font-size: 1.4rem; line-height: 1.4; color: var(--char); font-weight: 500; }
.prose img { border-radius: 3px; margin-block: 1.6rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--terra-soft); }
.prose a:hover { text-decoration-color: var(--terra); }
.prose code { background: var(--ivory-2); padding: 0.15em 0.4em; border-radius: 4px; font-family: var(--font-mono); font-size: 0.86em; }

/* ----- Ventures detail rows ---------------------------------------------- */
.venture-row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.venture-row:first-of-type { border-top: 0; }
@media (max-width: 820px) { .venture-row { grid-template-columns: 1fr; gap: 1.5rem; } }
.venture__role { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra); margin-bottom: 0.9rem; }
.venture-row__title { font-size: var(--fs-h2); margin-bottom: 0.3rem; }
.venture-row__url { font-family: var(--font-mono); color: var(--muted); font-size: 0.82rem; }
.venture-row__url .icon { width: 13px; height: 13px; }
.factlist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.factlist li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.factlist .ic { width: 20px; height: 20px; color: var(--terra); flex: none; margin-top: 3px; }

/* ----- Speaking / media -------------------------------------------------- */
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (max-width: 680px) { .topics { grid-template-columns: 1fr; } }
.topic { display: flex; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.topic:nth-child(even) { padding-left: clamp(1rem, 3vw, 2.5rem); }
.topic .ic { width: 24px; height: 24px; color: var(--terra); flex: none; }
.topic h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.topic p { margin: 0; font-size: 0.94rem; color: var(--muted); }
.media-list { list-style: none; padding: 0; margin: 0; }
.media-list li { border-top: 1px solid var(--line); }
.media-list li:last-child { border-bottom: 1px solid var(--line); }
.media-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; color: var(--char); font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; transition: padding-left 0.2s var(--ease); }
.media-list a:hover { padding-left: 0.5rem; color: var(--terra); }
.media-list .src { color: var(--muted); font-weight: 400; font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ----- Contact ----------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--font-mono); font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--char); }
.field input, .field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--char); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 2px; padding: 0.85rem 1rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); width: 100%; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px var(--terra-soft); }
.field textarea { resize: vertical; min-height: 150px; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: var(--fs-sm); color: var(--muted); }
.alert { padding: 1rem 1.25rem; border-radius: 2px; font-size: 0.96rem; margin-bottom: 1.5rem; }
.alert--ok { background: var(--terra-soft); color: var(--terra-deep); border: 1px solid #DDBBA8; }
.alert--err { background: #F3DAD2; color: #9C3B26; border: 1px solid #E4BDB0; }
.contact-aside { display: grid; gap: 0; }
.contact-card { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.contact-card:last-child { border-bottom: 1px solid var(--line); }
.contact-card h3 { font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.6rem; }
.contact-card a.big { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--char); }
.contact-card a.big:hover { color: var(--terra); }
.social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-row a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 2px; color: var(--char); transition: all 0.2s var(--ease); }
.social-row a:hover { background: var(--char); color: var(--ivory); border-color: var(--char); }
.social-row svg { width: 19px; height: 19px; }

/* ----- Slim content footer ----------------------------------------------- */
.content-foot { border-top: 1px solid var(--line); padding: 2.5rem var(--pad); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.content-foot .links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.content-foot a { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--char); }
.content-foot a:hover { color: var(--terra); }
.content-foot .copy { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }

/* ----- Single post ------------------------------------------------------- */
.post-header { padding-block: clamp(2.5rem, 6vw, 4rem) 1.25rem; }
.post-header__meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.post-header__title { font-size: var(--fs-h1); max-width: 20ch; }
.post-feature { aspect-ratio: 16 / 7; overflow: hidden; border-radius: 3px; margin-bottom: clamp(2rem, 4vw, 3rem); background: var(--char); }
.post-feature img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Pagination / tags / reveal ---------------------------------------- */
.pagination { display: flex; gap: 0.4rem; margin-top: 3rem; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 0.5rem; border-radius: 2px; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.85rem; color: var(--char); background: var(--paper); }
.pagination .page-numbers.current { background: var(--char); color: var(--ivory); border-color: var(--char); }
.pagination a.page-numbers:hover { border-color: var(--terra); color: var(--terra); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.tag-row a { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; padding: 0.35rem 0.75rem; border: 1px solid var(--line-2); border-radius: 2px; color: var(--char); }
.tag-row a:hover { background: var(--terra); border-color: var(--terra); color: var(--ivory); }

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--terra); color: var(--ivory); padding: 0.75rem 1.25rem; z-index: 200; }
.skip-link:focus { left: 0; }