/* ============================================================================
   Rafael LP — rafaellp.com
   Hand-written, dependency-free stylesheet.

   Contents
   01. Tokens
   02. Reset & base
   03. Utilities (container, label, chip, buttons, reveal)
   04. Header
   05. Hero
   06. Project — Sliproad showcase
   07. About & Contact
   08. Footer
   09. Responsive (>= 900px stage composition)
   10. Motion preferences
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #0a0b0e;
  --bg-deep: #08090b;
  --bg-panel: #0e1014;
  --bg-stage: #0b0d11;

  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  --text: #edeff2;
  --text-soft: #c9ced6;
  --muted: #a4abb5;
  --faint: #8b929d;

  --amber: #eaa64c;
  --amber-bright: #f2b25c;
  --amber-deep: #d98c2a;
  --amber-ink: #17110a;
  --amber-glow: rgba(234, 166, 76, 0.1);

  --ease: cubic-bezier(0.3, 0.7, 0.36, 1);
  --ease-emphasis: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif,
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 44px);
  --section-space: clamp(84px, 13.5vh, 152px);

  --radius-lg: 22px;
}

/* ------------------------------------------------------------ reset & base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

::selection {
  background: rgba(234, 166, 76, 0.32);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: -70px;
  left: 16px;
  z-index: 120;
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 580;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 14px;
}

/* ---------------------------------------------------------------- utilities */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  margin: 0 0 14px;
  font-size: 0.76rem;
  font-weight: 560;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

@media (prefers-reduced-motion: no-preference) {
  .chip__dot {
    animation: chip-pulse 2.8s ease-out infinite;
  }

  @keyframes chip-pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(234, 166, 76, 0.42);
    }
    72% {
      box-shadow: 0 0 0 7px rgba(234, 166, 76, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(234, 166, 76, 0);
    }
  }
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 560;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.button--primary {
  background: var(--amber);
  color: var(--amber-ink);
}

.button--primary:hover {
  background: var(--amber-bright);
  transform: translateY(-1px);
}

.button--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

.button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  font-weight: 540;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.text-link span {
  transition: transform 0.25s var(--ease-emphasis);
}

.text-link:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.text-link:hover span {
  transform: translateX(3px);
}

/* Reveal-on-scroll; only ever hides content when JS is active. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease-emphasis), transform 0.75s var(--ease-emphasis);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(10, 11, 14, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}

.wordmark__mark {
  display: block;
  width: 30px;
  height: 30px;
}

.wordmark__text {
  font-family: var(--font-display);
  font-weight: 620;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: clamp(16px, 3vw, 30px);
}

.site-nav a {
  position: relative;
  color: var(--muted);
  font-size: 0.94rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-emphasis);
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-top: calc(68px + clamp(70px, 15vh, 150px));
  padding-bottom: clamp(110px, 18vh, 190px);
  overflow: clip;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9.5vw, 6.25rem);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero__lede {
  margin-top: 22px;
  max-width: 30ch;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--text-soft);
  text-wrap: balance;
}

.hero__support {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero__support strong {
  color: var(--text);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 42px;
}

.hero__route {
  position: absolute;
  right: -50px;
  bottom: -40px;
  width: min(1080px, 94vw);
  color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 0;
}

.hero__route svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero__route-node {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__route-path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: route-draw 2.1s var(--ease-emphasis) 0.3s forwards;
  }

  .hero__route-node {
    opacity: 0;
    animation: node-in 0.7s var(--ease-emphasis) 1.9s forwards;
  }

  @keyframes route-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes node-in {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* ------------------------------------------------------- project / Sliproad */
.project {
  position: relative;
  padding-top: clamp(70px, 10vh, 120px);
}

.project__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.project__eyebrow .label {
  margin: 0;
}

.project__name {
  margin-top: clamp(26px, 4vh, 40px);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.project__tagline {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 480;
  letter-spacing: -0.015em;
  color: var(--muted);
}

.project__cols {
  display: grid;
  gap: clamp(36px, 6vh, 60px);
  margin-top: clamp(36px, 6vh, 60px);
}

.project__copy p {
  max-width: 58ch;
  color: var(--text-soft);
  font-size: 1.06rem;
  line-height: 1.68;
}

.project__copy p + p {
  margin-top: 18px;
}

.project__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}

.project__features li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  max-width: 52ch;
  font-size: 1.03rem;
  line-height: 1.62;
}

.project__features li strong {
  color: var(--text);
  font-weight: 580;
}

.project__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1.5px;
  background: var(--amber);
}

/* stage */
.project__stage {
  position: relative;
  margin-top: clamp(60px, 9vh, 110px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-stage) 0%, var(--bg-deep) 100%);
  overflow: clip;
}

.stage__scene {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(48px, 9vw, 72px) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 7vw, 54px);
}

.stage__glow {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(46% 40% at 66% 30%, rgba(234, 166, 76, 0.14), transparent 70%),
    radial-gradient(40% 36% at 18% 78%, rgba(127, 166, 207, 0.08), transparent 70%);
  pointer-events: none;
}

/* Reveal variant that only fades: safe on elements that carry transforms. */
.js .reveal-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease-emphasis);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal-fade.is-visible {
  opacity: 1;
}

.device {
  position: relative;
  margin: 0;
  z-index: 1;
}

.device--portrait {
  width: min(78%, 330px);
}

.device--landscape {
  width: min(100%, 560px);
}

.device--home {
  width: min(64%, 270px);
}

.device__tilt > img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
}

.device--home .device__tilt > img {
  filter: none;
}

/* screen-only crop card: the frame of the capture is excluded in CSS */
.screen-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 1004 / 982;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #0b0d10;
  box-shadow: 0 34px 70px -22px rgba(0, 0, 0, 0.72),
    0 8px 22px -10px rgba(0, 0, 0, 0.5);
}

.screen-crop img {
  position: absolute;
  left: 0;
  top: 0;
  width: 119.52%;
  max-width: none;
  height: auto;
  transform: translate(-8.1667%, -5.8333%);
}

/* quote */
.project__quote {
  padding: clamp(54px, 9vh, 96px) 0 clamp(46px, 7vh, 76px);
}

.project__quote::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-bottom: clamp(24px, 4vh, 34px);
  background: var(--amber);
}

.project__quote p {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 560;
  line-height: 1.16;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* details panels */
.project__details {
  display: grid;
  gap: clamp(28px, 4vw, 36px);
}

.panel__media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}

.panel__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s var(--ease-emphasis);
}

.panel--wide .panel__media {
  aspect-ratio: 2.36 / 1;
}

.panel--tall .panel__media {
  aspect-ratio: 1 / 1.05;
}

@media (hover: hover) and (pointer: fine) {
  .panel:hover .panel__media img {
    transform: scale(1.015);
  }
}

.panel__caption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* facts */
.project__facts {
  margin-top: clamp(54px, 8.5vh, 94px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 5vh, 40px);
}

.project__facts dl {
  display: grid;
  gap: 22px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project__facts dt {
  font-size: 0.76rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.project__facts dd {
  margin-top: 6px;
  font-weight: 540;
  color: var(--text);
}

.project__more {
  margin-top: 34px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* -------------------------------------------------------- story teaser */
.bridge {
  padding-top: clamp(56px, 8vh, 88px);
}

.bridge__inner {
  max-width: 800px;
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 4vh, 38px);
}

.bridge__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.022em;
}

.bridge__copy {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1rem;
}

.bridge__cta {
  margin-top: 20px;
}

/* -------------------------------------------------------- now teaser */
.now-teaser {
  padding-top: clamp(44px, 6.5vh, 72px);
}

.now-teaser__inner {
  display: grid;
  gap: 14px;
  max-width: 800px;
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 4vh, 36px);
}

.now-teaser__line {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.now-teaser__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .now-teaser__dot {
    animation: chip-pulse 2.8s ease-out infinite;
  }
}

.now-teaser__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.now-teaser__facts div {
  display: grid;
  gap: 3px;
}

.now-teaser__facts dt {
  font-size: 0.74rem;
  font-weight: 560;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.now-teaser__facts dd {
  font-weight: 540;
}

.now-teaser__cta {
  margin-top: 4px;
}

/* ----------------------------------------------------------- about & contact */
.about {
  padding-top: var(--section-space);
}

.about__inner {
  max-width: 820px;
}

.about h2,
.contact h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 620;
  letter-spacing: -0.026em;
  line-height: 1.1;
}

.about__copy {
  margin-top: 26px;
}

.about__copy p {
  max-width: 62ch;
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.68;
}

.about__copy p + p {
  margin-top: 18px;
}

.contact {
  padding-top: var(--section-space);
  padding-bottom: clamp(96px, 14vh, 148px);
}

.contact__lede {
  margin-top: 22px;
  max-width: 48ch;
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.68;
}

.contact__email {
  display: inline-block;
  margin-top: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  font-weight: 580;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.contact__email:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ------------------------------------------------------------ story page */
.story-hero {
  padding-top: calc(68px + clamp(72px, 14vh, 140px));
  padding-bottom: clamp(44px, 8vh, 80px);
}

.story-hero__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.6vw, 4.4rem);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.story-hero__lede {
  margin-top: 22px;
  max-width: 58ch;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--text-soft);
}

.story-body {
  padding-bottom: clamp(60px, 10vh, 120px);
}

.chapter {
  display: grid;
  gap: 16px;
  padding: clamp(44px, 7vh, 76px) 0;
  border-top: 1px solid var(--line);
}

.chapter__marker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 560;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
}

.chapter__marker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--amber);
  opacity: 0.6;
}

.chapter h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 620;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

.chapter__content p {
  margin-top: 16px;
  max-width: 64ch;
  color: var(--text-soft);
  font-size: 1.06rem;
  line-height: 1.68;
}

.chapter__content p strong {
  color: var(--text);
  font-weight: 580;
}

.story-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.story-list li {
  position: relative;
  padding-left: 24px;
  max-width: 64ch;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.62;
}

.story-list li strong {
  color: var(--text);
  font-weight: 580;
}

.story-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1.5px;
  background: var(--amber);
}

.chapter__content .story-pull {
  margin-top: 28px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* metrics — refined presentation of the historical Workshop figures */
.metrics {
  margin: 28px 0 0;
  display: grid;
  gap: 22px;
}

.metrics__item {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.metrics__label {
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.metrics__value {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 620;
  letter-spacing: -0.022em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metrics__note {
  margin-top: 20px;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
}

/* archival cards — optional images that appear when the file exists */
.archive-card {
  margin: 28px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-panel);
}

.archive-card--optional {
  display: none;
}

.archive-card--optional.is-available {
  display: block;
}

/* smaller artifacts (e.g. a cropped statistics panel) keep a natural size */
.archive-card--compact {
  max-width: 460px;
}

/* selected hero evidence breaks slightly wider than the editorial column
   (right side only, bounded so it can never cause horizontal overflow) */
@media (min-width: 992px) {
  .archive-card--wide {
    margin-right: calc(-1 * min(120px, max(0px, (100vw - 1160px) / 2 + 44px - 48px)));
  }
}

.archive-card__media {
  position: relative;
  overflow: hidden;
  background: #0c0e12;
}

.archive-card__media img {
  display: block;
  width: 100%;
  height: auto;
  /* restrained archival treatment: gently desaturated */
  filter: saturate(0.82) contrast(1.03) brightness(0.96);
}

.archive-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.archive-card figcaption {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.archive-card figcaption a {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
  transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

.archive-card figcaption a:hover {
  color: var(--amber);
  text-decoration-color: var(--amber);
}

.story-cta,
.now-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

@media (min-width: 900px) {
  .chapter {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
  }

  .chapter__marker {
    position: sticky;
    top: 108px;
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }
}

@media (max-width: 520px) {
  .site-nav {
    gap: 13px;
  }

  .site-nav a {
    font-size: 0.9rem;
  }
}

@media (max-width: 410px) {
  .site-header__inner {
    gap: 12px;
  }

  .site-nav {
    gap: 11px;
  }

  .site-nav a {
    font-size: 0.85rem;
  }

  .wordmark {
    gap: 8px;
  }

  .wordmark__mark {
    width: 27px;
    height: 27px;
  }

  .wordmark__text {
    font-size: 0.92rem;
  }
}

/* -------------------------------------------------------------- now page */
.now-hero {
  position: relative;
  padding-top: calc(68px + clamp(72px, 14vh, 140px));
  padding-bottom: clamp(52px, 9vh, 90px);
  overflow: clip;
}

.now-hero .container {
  position: relative;
  z-index: 1;
}

.now-hero__route {
  position: absolute;
  right: -40px;
  bottom: -80px;
  width: min(880px, 88vw);
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.now-hero__route svg {
  display: block;
  width: 100%;
  height: auto;
}

.now-hero__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.6vw, 4.4rem);
  font-weight: 640;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.now-hero__lede {
  margin-top: 22px;
  max-width: 58ch;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--text-soft);
}

.now-hero__meta {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--muted);
}

.now-hero__meta time {
  color: var(--text-soft);
}

/* state chips — used sparingly */
.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.state__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.state--validated {
  border-color: rgba(234, 166, 76, 0.4);
  color: var(--amber);
}

.state--completed {
  color: var(--muted);
}

.state--next {
  border-color: rgba(234, 166, 76, 0.55);
  color: var(--amber);
}

.state--later {
  border-color: var(--line-strong);
  color: var(--muted);
}

.now-focus__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.foundation {
  display: grid;
  gap: clamp(16px, 2.4vw, 22px);
  margin-top: 28px;
}

@media (min-width: 760px) {
  .foundation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.foundation-card {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}

.foundation-card h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.foundation-card p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.62;
}

.now-figure {
  margin: 38px 0 0;
}

.now-figure__media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
}

.now-figure__media img {
  display: block;
  width: 100%;
  height: auto;
}

.now-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* build notes */
.log__month {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
}

.log__month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.log__entries {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.log-entry {
  position: relative;
  padding: 20px 0 20px 22px;
  border-top: 1px solid var(--line);
  max-width: 68ch;
}

/* restrained chronological rail: one small amber marker per entry */
.log-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(234, 166, 76, 0.55);
}

.log-entry h3 {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.log-entry p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.62;
}

.log__note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* what's next */
.next-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.next-item {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  max-width: 66ch;
}

.next-item h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.next-item p {
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.62;
}

/* ------------------------------------------------------------------- 404 */
.site-header--static {
  position: static;
}

.page-404 {
  min-height: calc(100vh - 240px);
  display: grid;
  align-content: center;
  padding-top: clamp(80px, 12vh, 130px);
  padding-bottom: clamp(80px, 12vh, 130px);
}

.page-404 h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-404 p {
  margin-top: 16px;
  max-width: 48ch;
  color: var(--text-soft);
}

.page-404 a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 42px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
  justify-content: space-between;
}

.site-footer__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}

.site-footer__note {
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer__nav {
  display: flex;
  gap: 22px;
}

.site-footer__nav a {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-footer__nav a:hover {
  color: var(--text);
}

.site-footer__fine {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ------------------------------------------- responsive: desktop composition */
@media (min-width: 900px) {
  .project__cols {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .project__details {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .project__facts dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stage__scene {
    display: block;
    min-height: clamp(620px, 63vw, 860px);
    padding: clamp(56px, 6vw, 84px) var(--gutter);
  }

  .device {
    position: absolute;
  }

  .device--portrait {
    width: clamp(240px, 27vw, 400px);
    left: 57%;
    top: 5%;
    z-index: 2;
  }

  .device--home {
    width: clamp(180px, 17.5vw, 256px);
    left: 12%;
    top: 15%;
    z-index: 3;
  }

  .device--landscape {
    width: clamp(340px, 44vw, 620px);
    left: 16%;
    top: 42%;
    z-index: 1;
  }

  .stage__glow,
  .device {
    transform: translate3d(0, var(--py, 0px), 0);
  }

  .device--portrait .device__tilt {
    transform: perspective(1700px) rotateY(-3.5deg) rotateX(1.4deg);
  }

  .device--landscape .device__tilt {
    transform: perspective(1900px) rotateY(3deg) rotateX(-1.1deg);
  }

  .device--home .device__tilt {
    transform: perspective(1300px) rotateY(2.4deg);
  }

  .device__tilt {
    transition: transform 0.6s var(--ease-emphasis);
  }

  @media (hover: hover) and (pointer: fine) {
    .device--portrait:hover .device__tilt {
      transform: perspective(1700px) rotateY(-1.6deg) rotateX(0.6deg)
        translate3d(0, -6px, 0);
    }

    .device--landscape:hover .device__tilt {
      transform: perspective(1900px) rotateY(1.2deg) rotateX(-0.5deg)
        translate3d(0, -6px, 0);
    }

    .device--home:hover .device__tilt {
      transform: perspective(1300px) rotateY(1deg) translate3d(0, -5px, 0);
    }
  }
}

/* ------------------------------------------------------- motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .reveal-fade {
    opacity: 1;
  }

  .device__tilt {
    transform: none !important;
  }

  .panel:hover .panel__media img {
    transform: none;
  }
}