/* ============================================================
   axelhenriksen.dk — Editorial Luxury
   Vibe: warm cream surfaces, deep espresso ink, refined serif display
   Built without a framework. ~13kb gzipped target.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/fraunces/v40/6NUh8FyLNQOQZAnv9bYEvHHaie8.woff2") format("woff2");
}

:root {
  /* OKLCH palette: tinted neutrals plus a single accent */
  --bg:           oklch(0.972 0.006 86);     /* warm cream */
  --bg-deep:     oklch(0.948 0.010 84);     /* slightly deeper cream for sections */
  --paper:       oklch(0.985 0.005 86);     /* near-white, the printed page */
  --ink:         oklch(0.190 0.018 60);     /* deep espresso */
  --ink-strong:  oklch(0.140 0.020 60);
  --ink-mute:    oklch(0.395 0.014 60);
  --ink-faint:   oklch(0.520 0.010 65);     /* raised from 0.575 for AA contrast on small mono */
  --rule:        oklch(0.860 0.012 70);
  --rule-faint:  oklch(0.910 0.010 75);
  --accent:      oklch(0.430 0.135 28);     /* oxblood */
  --accent-deep: oklch(0.355 0.150 28);
  --accent-tint: oklch(0.960 0.018 32);     /* faint warm tint for accent surfaces */

  /* Type */
  --serif: "Fraunces", "EB Garamond", "Iowan Old Style", Cambria, Georgia, serif;
  --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --measure: 64ch;
  --rail-x: clamp(1.25rem, 4vw, 4rem);
  --rail-y: clamp(4rem, 10vw, 10rem);
}

/* Light-only theme. The dark-mode override was intentionally removed so
   the warm cream Editorial Luxury vibe is preserved regardless of OS
   preference. */

* { box-sizing: border-box; }
*::selection { background: var(--accent); color: var(--bg); }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "cv11";
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
}

/* Subtle paper grain, fixed, pointer-none, single layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

a {
  color: var(--ink);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== Skip link (a11y) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--ink-strong);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: top 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus,
.skip-link:focus-visible { top: 0.75rem; color: var(--bg); }

/* ===== Layout primitives ===== */
.wrap {
  width: 100%;
  max-width: 86rem;
  margin: 0 auto;
  padding-left: var(--rail-x);
  padding-right: var(--rail-x);
  position: relative;
  z-index: 2;
}

.section { padding-top: var(--rail-y); padding-bottom: var(--rail-y); }
.section--tight { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.section--paper { background: var(--paper); border-top: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); }

.rule { border: 0; height: 1px; background: var(--rule); margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.eyebrow--block { display: block; }

/* ===== Utility spacing (used in HTML to replace inline styles) ===== */
.mt-sm  { margin-top: 0.5rem; }
.mt-md  { margin-top: 0.75rem; }
.mt-lg  { margin-top: 1.5rem; }
.mt-xl  { margin-top: 2.5rem; }

/* ===== Typography ===== */
.display {
  font-family: var(--serif);
  font-weight: 350;
  font-style: normal;
  letter-spacing: -0.035em;
  line-height: 0.92;
  font-feature-settings: "ss01", "ss03", "ss04", "ss05", "ss07";
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  color: var(--ink-strong);
}

h1.display { font-size: clamp(3.75rem, 13.5vw, 12.5rem); margin: 0; }
h2.display { font-size: clamp(2.5rem, 6vw, 5rem); margin: 0 0 0.5em; line-height: 0.98; }
h3.display { font-size: clamp(1.625rem, 2.6vw, 2.25rem); margin: 0 0 0.4em; line-height: 1.05; }

.lede {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.35;
  color: var(--ink-strong);
  max-width: var(--measure);
  font-variation-settings: "SOFT" 30, "opsz" 60;
}

p {
  max-width: var(--measure);
  margin: 0 0 1em;
  color: var(--ink-mute);
}
p strong { color: var(--ink); font-weight: 540; }

/* ===== Topbar ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.topbar.is-scrolled { border-bottom-color: var(--rule-faint); }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 30, "opsz" 28;
  color: var(--ink-strong);
}
.brand:hover { color: var(--ink-strong); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}
.nav a {
  font-size: 0.875rem;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
  position: relative;
  padding-bottom: 0.18em;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Sliding accent underline on hover + active. Pure CSS, no JS. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink-strong); font-weight: 540; }
.nav .lang-pill::after { display: none; }

.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.4rem 0.7rem 0.4rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.lang-pill:hover { color: var(--ink-strong); border-color: var(--ink-strong); background: var(--paper); }

@media (max-width: 680px) {
  .nav a { font-size: 0.82rem; }
  .nav { gap: 1rem; }
  .nav .nav__link--secondary { display: none; }
}

/* ===== Hero (editorial split) ===== */
.hero {
  position: relative;
  padding-top: clamp(3rem, 9vw, 8rem);
  padding-bottom: clamp(3rem, 9vw, 8rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__meta b { color: var(--ink); font-weight: 500; }

/* Hero name lockup: overflow-mask so the H1 slides up from below an
   invisible baseline. Editorial mask-reveal, Kowalski-style.
   Generous padding-bottom so italic descenders (g, y, p) on the em
   accent ("bygger.", "version.") aren't clipped. The negative
   margin-bottom keeps the visual rhythm intact (no extra space). */
.hero__lockup {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding-bottom: 0.36em;
  margin-bottom: -0.28em;
}

.hero__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 350;
  font-style: normal;
  font-size: clamp(3.75rem, 14vw, 13rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink-strong);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;

  /* Entrance: slide up from below the masked baseline.
     One transform property, GPU-accelerated, robust to inline <br>/<em>. */
  transform: translateY(110%);
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero__name.is-ready {
  transform: translateY(0);
}
.hero__name em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  color: var(--accent);
  animation: emAccentBreath 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes emAccentBreath {
  0%, 100% { color: var(--accent); }
  50%      { color: var(--accent-deep); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__name em { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__name { transform: none; transition: none; }
}

.hero__caption {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.hero__caption p { margin: 0; }

@media (max-width: 760px) {
  .hero__caption { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== Ventures (asymmetric, no card row) ===== */
.ventures { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

.venture {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--rule);
  position: relative;
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.venture:last-child { border-bottom: 1px solid var(--rule); }
.venture:hover { background: var(--paper); }

/* Editorial accent line draws across the top on hover. Kowalski touch. */
.venture::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.venture:hover::before,
.venture:focus-within::before { transform: scaleX(1); }

.venture__index {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  padding-top: 0.55rem;
  font-variation-settings: normal;
  transition:
    font-size 420ms cubic-bezier(0.16, 1, 0.3, 1),
    color 320ms cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 420ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 320ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.venture:hover .venture__index,
.venture:focus-within .venture__index {
  font-family: var(--serif);
  font-weight: 350;
  font-size: 2.6rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--accent);
  padding-top: 0;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}
@media (prefers-reduced-motion: reduce) {
  .venture__index, .venture:hover .venture__index { transition: none; }
}

.venture__name {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3.6vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink-strong);
  font-variation-settings: "SOFT" 30, "opsz" 60;
}
.venture__name a { color: inherit; }
.venture__name a:hover { color: var(--accent); }

.venture__desc {
  font-size: 1rem;
  color: var(--ink-mute);
  margin: 0;
  max-width: 44ch;
}

.venture__cta {
  align-self: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.venture:hover .venture__cta { color: var(--accent); }
/* Refined arrow micro-animation: arrow translates forward, and a pen-stroke
   hairline draws in behind it, suggesting motion. Editorial detail. */
.venture__cta span {
  display: inline-block;
  position: relative;
  padding-left: 0.35em;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.venture__cta span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-right: 0.1em;
  height: 1px;
  background: currentColor;
  width: 0;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-0.5px);
}
.venture:hover .venture__cta span { transform: translateX(6px); }
.venture:hover .venture__cta span::before { width: 0.8em; }

@media (max-width: 880px) {
  .venture {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0.75rem;
  }
  .venture__index { grid-row: 1; grid-column: 1; padding-top: 0.35rem; }
  .venture__name { grid-row: 1; grid-column: 2; }
  .venture__desc { grid-row: 2; grid-column: 2; }
  .venture__cta { grid-row: 3; grid-column: 2; justify-self: start; }
}

/* ===== About / Portrait section ===== */
.portrait-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .portrait-row { grid-template-columns: 1fr; }
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  border-radius: 2px;
  margin: 0;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, color-mix(in oklab, var(--ink) 80%, transparent), transparent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prose { max-width: 38rem; }
.prose p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-mute); }
.prose p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3.25em;
  float: left;
  line-height: 0.84;
  margin: 0.04em 0.12em 0 -0.04em;
  color: var(--ink-strong);
  font-variation-settings: "SOFT" 30, "opsz" 144;
}

/* ===== CV / structured list ===== */
.cv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cv__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule-faint);
}
.cv__row:last-child { border-bottom: 1px solid var(--rule-faint); }
.cv__year {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}
.cv__body strong { color: var(--ink-strong); font-weight: 540; display: block; margin-bottom: 0.2rem; }
.cv__body p { margin: 0; font-size: 0.96rem; max-width: 52ch; }

@media (max-width: 640px) {
  .cv__row { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ===== Contact list ===== */
.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 880px) { .kontakt { grid-template-columns: 1fr; } }

.links {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.links li { border-bottom: 1px solid var(--rule); }
.links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  color: var(--ink-strong);
  font-size: 1.0625rem;
  position: relative;
}
.links a:hover { color: var(--accent); }
.links a span.role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.links a:hover span.role { color: var(--accent); }
.links a .arr { font-family: var(--serif); font-style: italic; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1); }
.links a:hover .arr { transform: translateX(4px); }

/* ===== Press list ===== */
.press {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid var(--rule);
}
.press li { border-bottom: 1px solid var(--rule); padding: 1.5rem 0; }
.press li:has(> .press__empty) { padding: 0; }
.press__row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
}
.press__date { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--ink-faint); }
.press__headline {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink-strong);
  margin: 0;
}
.press__source { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.press__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  margin: 0;
}
@media (max-width: 760px) {
  .press__row { grid-template-columns: 1fr; row-gap: 0.5rem; }
}

/* ===== Footer ===== */
.foot {
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 880px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__col--brand { grid-column: 1 / -1; }
}

.foot__brand {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 350;
  letter-spacing: -0.035em;
  color: var(--ink-strong);
  margin: 0 0 0.85rem;
  line-height: 0.95;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}
.foot__brand em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  color: var(--accent);
}
.foot__brand-sub { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }

.foot__title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.foot__list a { color: var(--ink-mute); font-size: 0.96rem; }
.foot__list a:hover { color: var(--accent); }

.foot__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ===== Utility ===== */
.kbd {
  font-family: var(--mono);
  font-size: 0.8em;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--ink-strong);
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.32rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-weight: 500;
}
.tag--accent { color: var(--accent); background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
.tag--inline { margin-left: 0.5rem; vertical-align: 0.18em; }

/* ===== Reveal on scroll (snappier Kowalski timing) ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Magnetic hover smoothness (chip CTAs only) ===== */
.lang-pill,
.venture__cta,
[data-magnet] {
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Section spacing tweak when first section follows a rule ===== */
hr.rule + .section { padding-top: clamp(2.5rem, 7vw, 5.5rem); }

/* ===== Display em-accent: matches the hero accent treatment in subheads ===== */
/* Universal accent treatment with perpetual color breath. Sub-perceptible,
   gives every italic accent on the site a quiet "alive" feel. GPU-only
   (color), one accent at a time per viewport, respects reduced motion. */
.display em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  color: var(--accent);
  animation: emAccentBreath 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .display em { animation: none; }
}

/* ===== Venture name link: refined accent on hover ===== */
.venture__name a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 480ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 0.08em;
}
.venture__name a:hover { background-size: 100% 1px; }

/* ===== Section--paper: subtle inset top highlight for "page lift" ===== */
.section--paper { box-shadow: inset 0 1px 0 0 color-mix(in oklab, var(--bg) 60%, transparent); }

/* ===== Press empty state: small editorial dingbat ===== */
.press__empty::before {
  content: "·";
  display: block;
  font-size: 1.5rem;
  color: var(--rule);
  margin-bottom: 0.5rem;
  font-style: normal;
}

/* ===== Manifesto strip: editorial three-principle rhythm ===== */
.manifesto {
  list-style: none;
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.manifesto li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  position: relative;
  transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.manifesto li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.manifesto li:hover { background: color-mix(in oklab, var(--paper) 60%, transparent); }
.manifesto li:hover::before { transform: scaleX(1); }
.manifesto__num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  padding-top: 0.45rem;
  text-transform: uppercase;
}
.manifesto__line {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 3.6vw, 2.625rem);
  font-weight: 350;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink-strong);
  font-variation-settings: "SOFT" 30, "opsz" 96;
  max-width: 30ch;
}
.manifesto__line em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 96;
  color: var(--accent);
}
@media (max-width: 640px) {
  .manifesto li { grid-template-columns: 1fr; gap: 0.5rem; }
  .manifesto__num { padding-top: 0; }
}

/* ===== Scroll-linked hero exit (CSS animation-timeline, progressive) =====
   As you scroll past the hero, the lockup and caption gently fade and
   translate up. Native CSS, no JS, runs on the compositor thread.
   Unsupported browsers see the hero exit naturally without animation. */
@supports (animation-timeline: scroll()) {
  .hero__lockup,
  .hero__caption {
    animation: hero-scroll-exit linear both;
    animation-timeline: scroll();
    animation-range: 0 75vh;
  }
  @keyframes hero-scroll-exit {
    0%  { opacity: 1; transform: translate3d(0, 0, 0); }
    100% { opacity: 0.32; transform: translate3d(0, -22px, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    .hero__lockup, .hero__caption {
      animation: none;
    }
  }
}

/* ===== Selection: warmer, accented ===== */
::selection { background: var(--accent); color: var(--bg); }
::-moz-selection { background: var(--accent); color: var(--bg); }

/* ===== Cross-document View Transitions (native, progressive) =====
   Browsers that support it (Chrome/Edge 126+, Safari TP) get a clean fade
   crossfade between pages on every internal link click. No JS, no library.
   Unsupported browsers fall back to instant navigation, identical UX. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}
::view-transition-old(root) { animation-name: vt-leave; }
::view-transition-new(root) { animation-name: vt-enter; }

@keyframes vt-leave {
  to   { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
    animation-name: -ua-view-transition-fade-out, -ua-view-transition-fade-in;
  }
}

/* Persist the topbar visually across navigation (no flash, no rebuild). */
.topbar { view-transition-name: site-topbar; }

/* Per-venture view-transition names — the small venture name on the
   listing morphs into the giant hero name on the detail page when
   clicked. Same name on both ends; browser handles the morph. */
.vt-vname-north    { view-transition-name: v-north-name; }
.vt-vname-tableone { view-transition-name: v-tableone-name; }
.vt-vname-varn     { view-transition-name: v-varn-name; }

/* Linked-venture rows: whole row becomes clickable via stretched ::after
   over the name's anchor. Keeps the inner CTA anchor working as a
   secondary target without nested-link semantics. */
.venture--linked .venture__name { position: relative; }
.venture--linked .venture__name a::after {
  content: "";
  position: absolute;
  inset: -1px 0 -1px -4rem;
  z-index: 1;
}
@media (max-width: 880px) {
  .venture--linked .venture__name a::after { inset: -1rem 0; }
}
.venture--linked .venture__cta { position: relative; z-index: 2; }

/* Back-link component — used on venture detail pages above the hero. */
.back-link {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.back-link:hover { color: var(--accent); }
.back-link span {
  display: inline-block;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.back-link:hover span { transform: translateX(-4px); }

/* ===== Print: clean entity dump ===== */
@media print {
  body::before, .topbar, .foot__bottom, .skip-link { display: none !important; }
  body { color: #111; background: #fff; }
  a { color: #111; text-decoration: underline; }
  .hero__name { font-size: 4rem; opacity: 1; transform: none; }
  .display { color: #111; }
  .section, .hero { padding-top: 2rem; padding-bottom: 2rem; }
}