/* ═══════════════════════════════════════════════════
   Base — Reset, Body, Utilities, A11y
   Portfolio v3 · 2026
   ═══════════════════════════════════════════════════ */

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Smooth scroll — handled by Lenis in main.js ── */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ── Reduced motion: kill all animations ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Body ── */
body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;

  /* Typographic craft — global OpenType features */
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "calt", "onum";
}

/* Display serif gets discretionary ligatures + stylistic alternates */
h1, h2, h3,
.statement__lead, .statement__trail,
.projects__title, .convictions__title, .journey__title, .testimonials__title,
.projects__card-title, .project-dialog__title,
.signal__project-name,
.footer__chapter-word, .footer__prose, .footer__now-text, .footer__now-coda {
  font-feature-settings: "kern", "liga", "dlig", "calt", "onum";
}

/* Small-caps utility for abbreviations (RAI, AI, ESG, .NET, UART, SIP, PLM) */
.sc {
  font-feature-settings: "smcp", "c2sc", "kern", "calt";
  letter-spacing: 0.04em;
}

/* ── Noise texture overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}



.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: var(--z-top);
  padding: var(--space-sm) var(--space-lg);
  background: var(--accent);
  color: var(--surface-base);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-md);
}

/* ── Focus styles ── */
:focus {
  outline: none;
}

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

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Selection ── */
::selection {
  background: var(--accent);
  color: var(--surface-base);
}

/* ── Scrollbar (WebKit) ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-base);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ── Visually hidden (screen reader only) ── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Image defaults ── */
img, svg {
  display: block;
  max-width: 100%;
}

/* ── Link defaults ── */
a {
  color: inherit;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════
   Reading Mode (cream) — Rhythm + Typography uplift
   Companion to the stillness pass in animations.css and the
   journey essence uplift in components/journey.css. Goal:
   the same site, slowed down for sustained reading. Every
   change is proportional and quiet — no new chrome.
   ═══════════════════════════════════════════════════ */

/* ── Rhythm: more vertical breath between sections ── */
[data-theme="light"] .statement {
  padding: clamp(7rem, 17vh, 12rem) clamp(1.5rem, 6vw, 6rem);
}
[data-theme="light"] .signal {
  padding: clamp(8.5rem, 16vh, 13rem) clamp(1.5rem, 5vw, 5rem);
}
[data-theme="light"] .projects {
  padding: clamp(10rem, 19vh, 16rem) 0 clamp(7.5rem, 15vh, 12rem);
}
[data-theme="light"] .convictions,
[data-theme="light"] .journey {
  padding: clamp(10rem, 17vh, 14rem) clamp(1.5rem, 5vw, 5rem);
}
[data-theme="light"] .testimonials {
  padding: clamp(10rem, 19vh, 15rem) 0 clamp(10rem, 19vh, 16rem);
}

/* Journey scene-break dots get a longer pause between chapters */
[data-theme="light"] .journey__break {
  padding: clamp(3.5rem, 7vh, 5.5rem) 0;
}

/* ── Typography uplift on the remaining prose blocks ── */
[data-theme="light"] .statement__lead {
  line-height: 1.65;
  max-width: 36ch;
}

[data-theme="light"] .t-praise__quote {
  line-height: 1.5;
}

[data-theme="light"] .t-praise__body-quote {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  max-width: 56ch;
}

[data-theme="light"] .footer__now-text {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.75;
}

[data-theme="light"] .footer__now-coda {
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.7;
}

/* ── Testimonial cards: drop chrome on paper, mark each with a hairline ── */
[data-theme="light"] .t-praise__item,
[data-theme="light"] .t-praise__item:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
  border-radius: 0;
  border-top: 1px solid color-mix(in oklch, var(--text-primary) 18%, transparent);
  padding-top: clamp(1.75rem, 2.5vw, 2.5rem);
  padding-left: clamp(1.75rem, 2.5vw, 3rem);
}

[data-theme="light"] .t-praise__bar {
  display: none;
}

/* ── Project cards: asymmetric grid — very subtle lift instead of hairline ── */
[data-theme="light"] .projects__card {
  background: color-mix(in oklch, var(--text-primary) 2%, transparent);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04), 0 4px 12px oklch(0% 0 0 / 0.06);
}

[data-theme="light"] .projects__card:hover {
  background: color-mix(in oklch, var(--text-primary) 3.5%, transparent);
  border: none;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06), 0 8px 20px oklch(0% 0 0 / 0.09);
}

/* ── Editorial running heads — kill the mono uppercase terminal voice.
   Eyebrow becomes lowercase italic serif (magazine running head).
   Dateline becomes upright serif so it visually separates from the
   italic essence prose that follows it. Prototype: journey only. ── */
[data-theme="light"] .journey__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0;
  text-transform: none;
  padding-bottom: 0.7rem;
}

[data-theme="light"] .journey__dateline {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  top: 0;
}