/* ============================================================
   duyao.at — Design System Stylesheet
   ============================================================
   Sections:
   1. RESET — Modern CSS reset via @layer
   2. DESIGN TOKENS — :root custom properties
   3. FONT-FACE — Inter variable font + matched fallback
   4. BASE TYPOGRAPHY — Body, headings, links, utilities
   5. LAYOUT — Content-width, section spacing, footer
   6. COMPONENTS — Skip-link, sticky header, nav, footer nav
   7. SECTIONS — Hero, prose paragraph spacing
   8. UTILITIES — .sr-only, .prose-width
   9. RESPONSIVE — Tablet nav, desktop hero scaling
   10. DARK MODE — prefers-color-scheme token swap
   11. PRINT — @media print forced light mode, hidden nav, URL display
   ============================================================ */

/* === 1. RESET === */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    hanging-punctuation: first last;
    color-scheme: light dark;
  }

  body {
    min-height: 100svh;
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }
}

/* === 2. DESIGN TOKENS === */

/*
  Contrast Ratio Validation (WCAG 2.2 AA) — v2.0 OKLCH
  =========================================
  Validated programmatically via culori library (wcagContrast). Phase 10 Plan 02.
  Note: --color-accent nudged from oklch(55.0%) to oklch(53.5%) to clear 4.5:1
  threshold on light bg (D-11 minimal adjustment strategy).

  Light mode (foreground on --color-bg oklch(95.0% 0.012 80deg)):
    --color-text       oklch(25.0% 0.012 55deg)   13.85:1  (body — req 4.5:1)   PASS
    --color-text-muted oklch(48.0% 0.020 60deg)    5.68:1  (muted — req 4.5:1)  PASS
    --color-accent     oklch(53.5% 0.130 82deg)    4.54:1  (body — req 4.5:1)   PASS
    --color-accent-hover oklch(62.0% 0.140 83deg)  3.19:1  (large — req 3:1)    PASS
    --color-accent-warm oklch(53.0% 0.120 63deg)   4.72:1  (body — req 4.5:1)   PASS

  Light mode (foreground on --color-bg-elevated oklch(97.5% 0.007 80deg)):
    --color-text       oklch(25.0% 0.012 55deg)   14.92:1  PASS
    --color-text-muted oklch(48.0% 0.020 60deg)    6.11:1  PASS
    --color-accent     oklch(53.5% 0.130 82deg)    4.89:1  PASS

  Dark mode (foreground on --color-bg oklch(18.0% 0.015 50deg)):
    --color-text       oklch(92.0% 0.010 80deg)   14.87:1  (body — req 4.5:1)   PASS
    --color-text-muted oklch(68.0% 0.015 65deg)    6.52:1  (muted — req 4.5:1)  PASS
    --color-accent     oklch(75.0% 0.150 84deg)    8.37:1  (body — req 4.5:1)   PASS
    --color-accent-hover oklch(80.0% 0.155 86deg) 10.00:1  (large — req 3:1)    PASS
    --color-accent-warm oklch(69.0% 0.130 62deg)   6.58:1  (body — req 4.5:1)   PASS

  Dark mode (foreground on --color-bg-elevated oklch(22.0% 0.020 50deg)):
    --color-text       oklch(92.0% 0.010 80deg)   13.71:1  PASS
    --color-text-muted oklch(68.0% 0.015 65deg)    6.02:1  PASS
    --color-accent     oklch(75.0% 0.150 84deg)    7.72:1  PASS

  Button/skip-link (--color-bg on --color-accent):
    Light: oklch(95.0% 0.012 80deg) on oklch(53.5% 0.130 82deg)  4.54:1  PASS
    Dark:  oklch(18.0% 0.015 50deg) on oklch(75.0% 0.150 84deg)  8.37:1  PASS
*/

:root {
  /* Colors: Light Mode (OKLCH — primary path, ~93% browsers) */
  --color-bg: oklch(95.0% 0.012 80deg);
  --color-bg-elevated: oklch(97.5% 0.007 80deg);
  --color-text: oklch(25.0% 0.012 55deg);
  --color-text-muted: oklch(48.0% 0.020 60deg);
  --color-accent: oklch(53.5% 0.130 82deg);
  --color-accent-hover: oklch(62.0% 0.140 83deg);
  --color-accent-warm: oklch(53.0% 0.120 63deg);
  --color-border: oklch(87.0% 0.012 78deg);
  --color-surface: oklch(92.0% 0.012 80deg);

  /* Typography */
  --font-primary: 'Inter', 'Inter Fallback', system-ui, -apple-system,
    'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia,
    'Times New Roman', serif;
  --fw-display: 600;
  --fw-display-sub: 500;
  --fs-sm: clamp(0.875rem, 0.8636rem + 0.0507vw, 0.9375rem);
  --fs-base: clamp(1.125rem, 1.1023rem + 0.1039vw, 1.25rem);
  --fs-lg: clamp(1.5rem, 1.4318rem + 0.3116vw, 1.875rem);
  --fs-xl: clamp(2rem, 1.8182rem + 0.8311vw, 3rem);
  --fs-2xl: clamp(3rem, 2.6364rem + 1.6623vw, 5rem);
  --fs-hero: clamp(4.5rem, 3.4943rem + 4.602vw, 10rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 900;

  /* Spacing (8px base grid) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 3rem + 4.4545vw, 8rem);

  /* Layout */
  --content-width: 65ch;
  --content-max-px: 680px;
  --hero-max-width: 90rem;
  --header-height: 3.5rem;
  --page-padding: clamp(1rem, 0.5rem + 2vw, 3rem);
}

/* === 2b. OKLCH FALLBACK === */

/* Hex equivalents for browsers without oklch() support (~7%) */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --color-bg: #f0ebe3;
    --color-bg-elevated: #f8f6f1;
    --color-text: #2d2520;
    --color-text-muted: #6e6356;
    --color-accent: #926300;
    --color-accent-hover: #a8820c;
    --color-accent-warm: #8a5a12;
    --color-border: #d6d0c7;
    --color-surface: #e6e1d8;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --color-bg: #2a2218;
      --color-bg-elevated: #362c22;
      --color-text: #ebe7e0;
      --color-text-muted: #a69a8e;
      --color-accent: #d4a726;
      --color-accent-hover: #e0bb3a;
      --color-accent-warm: #c48930;
      --color-border: #3e3428;
      --color-surface: #362e24;
    }
  }

  [data-theme="dark"] {
    --color-bg: #2a2218;
    --color-bg-elevated: #362c22;
    --color-text: #ebe7e0;
    --color-text-muted: #a69a8e;
    --color-accent: #d4a726;
    --color-accent-hover: #e0bb3a;
    --color-accent-warm: #c48930;
    --color-border: #3e3428;
    --color-surface: #362e24;

    color-scheme: dark;
  }
}

/* === 3. FONT-FACE === */

/* Matched fallback: Arial adjusted to Inter's metrics for zero CLS */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.40%;
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
}

/* Inter Variable — Latin subset (loads for all pages) */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  src: url('../fonts/InterVariable-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Variable — Latin Extended (on-demand for umlauts) */
@font-face {
  font-family: 'Inter';
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  src: url('../fonts/InterVariable-LatinExt.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Matched fallback: Georgia adjusted to Fraunces metrics for zero CLS */
/* Metrics computed from Fraunces-Roman.woff2 OS/2 table via fontTools */
@font-face {
  font-family: 'Fraunces Fallback';
  src: local('Georgia');
  size-adjust: 112.56%;
  ascent-override: 97.80%;
  descent-override: 25.50%;
  line-gap-override: 0.00%;
}

/* Fraunces Roman — headings (below-fold, swap is acceptable) */
@font-face {
  font-family: 'Fraunces';
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  src: url('../fonts/Fraunces-Roman.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD,
    U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces Italic — hero signature (preloaded for instant render) */
@font-face {
  font-family: 'Fraunces';
  font-display: swap;
  font-weight: 100 900;
  font-style: italic;
  src: url('../fonts/Fraunces-Italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD,
    U+0100-02AF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === 4. BASE TYPOGRAPHY === */

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-optical-sizing: auto;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-display-sub);
  line-height: var(--lh-snug);
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 1;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 3px;
}

small {
  font-size: var(--fs-sm);
}

/* Bold/expressive punctuation moments (D-09) */
.accent-text {
  color: var(--color-accent-hover);
  font-weight: var(--fw-heavy);
}

.subtitle {
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}

/* === 5. LAYOUT === */

/* Smooth scrolling with reduced-motion respect */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Main content accounts for sticky header height */
main {
  padding-top: var(--header-height);
}

/* All sections get generous vertical spacing per D-11 */
section {
  padding-block: var(--space-section);
}

/* Prose sections get narrow reading width per D-12 */
#narrative,
#thinking {
  max-width: var(--content-max-px);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

/* Connect section: full-width elevated surface, constrained inner content (D-06) */
#connect {
  background-color: var(--color-bg-elevated);
  padding-inline: var(--page-padding);

  & > * {
    max-width: var(--content-max-px);
    margin-inline: auto;
  }
}

/* Phase 12: Section pacing — fortissimo-piano-forte rhythm (PACE-01, PACE-03, PACE-04) */
/* Baseline: section { padding-block: var(--space-section) } = clamp(4rem, 3rem + 4.4545vw, 8rem) */
/* Rhythm: #narrative generous (open) -> #thinking tight (peak) -> #connect baseline (elevated surface already distinct) */

#narrative {
  padding-block: clamp(5rem, 3.75rem + 5.5vw, 10rem);
}

#thinking {
  padding-block: clamp(2.5rem, 1.875rem + 2.7vw, 5rem);
}

/* Hero breaks wider per D-13 */
#hero {
  max-width: var(--hero-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

/* Footer layout */
footer {
  padding-block: var(--space-2xl);
  padding-inline: var(--page-padding);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* === 6. COMPONENTS === */

/* Skip-link: accessible, off-screen, visible on focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--page-padding);
  z-index: 200;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-radius: 0 0 0.25rem 0.25rem;
  transition: top 0.15s ease-out;
}

.skip-link:focus {
  top: 0;
}

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

/* Sticky header per D-14: minimal, slim bar, name left, nav right */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--page-padding);
  background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

/* Home link in header -- name as wordmark (explicitly Inter per D-10) */
header > a {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

header > a:hover {
  color: var(--color-accent);
}

/* Mobile: hide nav links, show only the name */
header nav {
  display: none;
}

/* Navigation links */
header nav ul {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
}

header nav a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

header nav a:hover {
  color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  header nav a {
    transition: none;
  }
}

/* Footer wordmark — Fraunces Roman at small scale, closing bookend (D-08 Option B) */
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 0;
  letter-spacing: -0.01em;
}

/* Footer nav */
footer nav ul {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-md);
}

footer nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
}

footer nav a:hover {
  color: var(--color-accent);
}

/* Button-styled link: primary CTA (e.g., LinkedIn connect) per D-06 */
.btn-primary {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  text-decoration: none;
  border-radius: 2rem;
  line-height: var(--lh-base);
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-bg);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 3px;
}

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

/* === 7. SECTIONS === */

/* Hero layout: CSS Grid for text-left / photo-right composition per D-12 */
#hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  min-height: 80svh;
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* Hero h1 override: maximum-drama treatment */
#hero h1 {
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
}

/* Hero name: signature typographic treatment per D-02 */
.hero-name {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  font-optical-sizing: auto;
  font-variation-settings: 'WONK' 0, 'SOFT' 0;
}

/* Flourish: Fraunces Italic activates ball terminals on D, y, a, o */
/* WONK 1 on italic only — Roman "Heinz" stays conventional */
.hero-name__flourish {
  font-style: italic;
  font-variation-settings: 'WONK' 1, 'SOFT' 0;
}

/* Pronunciation guide in hero */
#hero .pronunciation {
  margin-top: var(--space-md);
  color: var(--color-text-muted);
}

/* Hero tagline: positioning statement per D-01 */
#hero .hero__tagline {
  margin-top: var(--space-2xl);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

/* Hero punch line: thematic emphasis per D-01 */
#hero .hero__punch {
  margin-top: var(--space-lg);
  font-size: var(--fs-xl);
  font-weight: var(--fw-normal);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

/* Hero anchor line: grounding details per D-04 */
#hero .hero__anchor {
  margin-top: var(--space-xl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
}

/* Photo wrapper and image per D-07, D-06 */
.hero__photo-wrapper {
  justify-self: center;
  max-width: 280px;
  margin-top: var(--space-2xl);
}

.hero__photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
  background-color: var(--color-surface);
  filter: saturate(0.92);
}

/* Scroll indicator: subtle chevron at hero bottom per D-14 */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border: none;
  background: none;
  padding: var(--space-md);
  text-decoration: none;
  grid-row: 2;
}

.scroll-indicator__chevron {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  opacity: 0.4;
}

/* ----------------------------------------------------------------
   7b. HERO ANIMATION — no-motion-first per D-10, D-11
---------------------------------------------------------------- */

/* Default: all elements visible (for reduced-motion and JS-disabled) */
.hero__line {
  opacity: 1;
  transform: translateY(0);
}

/* Only animate for users who permit motion AND when JS has added .is-revealed */
@media (prefers-reduced-motion: no-preference) {
  .is-revealed .hero__line {
    opacity: 0;
    transform: translateY(1.5rem);
    animation: hero-reveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Staggered delays: ~1.5s total reveal per D-08 */
  .is-revealed .hero__line:nth-child(1) { animation-delay: 0s; }
  .is-revealed .hero__line:nth-child(2) { animation-delay: 0.15s; }
  .is-revealed .hero__line:nth-child(3) { animation-delay: 0.3s; }
  .is-revealed .hero__line:nth-child(4) { animation-delay: 0.45s; }
  .is-revealed .hero__line:nth-child(5) { animation-delay: 0.6s; }
  .is-revealed .hero__line:nth-child(6) { animation-delay: 0.75s; }
  .is-revealed .hero__line:nth-child(7) { animation-delay: 0.9s; }

  /* Photo fades in after text lines */
  .is-revealed .hero__photo-wrapper {
    opacity: 0;
    transform: translateY(1rem);
    animation: hero-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
  }

  /* Scroll indicator fades in last */
  .is-revealed .scroll-indicator {
    opacity: 0;
    animation: hero-reveal 0.4s ease 1.3s both;
  }

  /* Scroll indicator bounce (only when motion permitted) */
  .is-revealed .scroll-indicator__chevron {
    animation: scroll-bounce 2s ease-in-out 2s infinite;
  }
}

@keyframes hero-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(0.25rem, 0.25rem); }
}

/* Prose sections get consistent paragraph spacing */
#narrative p,
#thinking p,
#connect p {
  margin-bottom: var(--space-lg);
}

#narrative p:last-child,
#thinking p:last-child,
#connect p:last-child {
  margin-bottom: 0;
}

/* Thematic chapter subheadings within prose sections */
#narrative h3,
#thinking h3 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

/* First h3 after h2 needs less top margin (h2 already has section padding) */
#narrative h2 + h3,
#thinking h2 + h3 {
  margin-top: var(--space-lg);
}

/* === 8. UTILITIES === */

/* Screen-reader-only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Prose width utility (for future use in content phases) */
.prose-width {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

/* === 9. RESPONSIVE === */

/* Tablet: 768px -- show full nav + hero two-column grid */
@media (width >= 48rem) {
  header nav {
    display: block;
  }

  #hero {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr auto;
  }

  .hero__photo-wrapper {
    max-width: 320px;
    margin-top: 0;
    place-self: center end;
  }

  .scroll-indicator {
    grid-column: 1 / -1;
  }
}

/* Desktop: 1024px -- wider margins, more breathing */
@media (width >= 64rem) {
  #hero {
    min-height: 85svh;
  }
}

/* Large desktop: 1440px+ -- maximum visual impact */
@media (width >= 90rem) {
  #hero {
    min-height: 90svh;
  }
}

/* === 10. DARK MODE === */

/* System preference: only applies when user hasn't explicitly chosen a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: oklch(18.0% 0.015 50deg);
    --color-bg-elevated: oklch(22.0% 0.020 50deg);
    --color-text: oklch(92.0% 0.010 80deg);
    --color-text-muted: oklch(68.0% 0.015 65deg);
    --color-accent: oklch(75.0% 0.150 84deg);
    --color-accent-hover: oklch(80.0% 0.155 86deg);
    --color-accent-warm: oklch(69.0% 0.130 62deg);
    --color-border: oklch(30.0% 0.015 50deg);
    --color-surface: oklch(22.0% 0.018 50deg);
  }
}

/* Explicit dark mode choice via toggle */
[data-theme="dark"] {
  --color-bg: oklch(18.0% 0.015 50deg);
  --color-bg-elevated: oklch(22.0% 0.020 50deg);
  --color-text: oklch(92.0% 0.010 80deg);
  --color-text-muted: oklch(68.0% 0.015 65deg);
  --color-accent: oklch(75.0% 0.150 84deg);
  --color-accent-hover: oklch(80.0% 0.155 86deg);
  --color-accent-warm: oklch(69.0% 0.130 62deg);
  --color-border: oklch(30.0% 0.015 50deg);
  --color-surface: oklch(22.0% 0.018 50deg);

  color-scheme: dark;
}

/* Explicit light mode choice via toggle */
[data-theme="light"] {
  color-scheme: light;
}

/* Theme toggle button */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: 0.25rem;
}

[data-theme] .theme-toggle {
  display: inline-flex;
}

.theme-toggle:hover {
  color: var(--color-accent);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 2px;
}

/* Sun icon visible in dark mode (user wants to switch to light) */
/* Moon icon visible in light mode (user wants to switch to dark) */
.theme-toggle__sun,
.theme-toggle__moon {
  display: none;
}

[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

[data-theme="light"] .theme-toggle__moon {
  display: block;
}

/* Smooth theme color transition (D-03) — only after JS signals readiness */
.theme-transitions body,
.theme-transitions header,
.theme-transitions footer,
.theme-transitions #connect,
.theme-transitions .btn-primary,
.theme-transitions .skip-link {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-transitions body,
  .theme-transitions header,
  .theme-transitions footer,
  .theme-transitions #connect,
  .theme-transitions .btn-primary,
  .theme-transitions .skip-link {
    transition: none;
  }
}

/* === 11. PRINT === */

@media print {
  /* Force light mode colors for readability (hex only — print engines may not support oklch) */
  :root {
    --color-bg: #f0ebe3;
    --color-bg-elevated: #f8f6f1;
    --color-text: #2d2520;
    --color-text-muted: #6e6356;
    --color-accent: #2d2520;
    --color-accent-hover: #2d2520;
    --color-accent-warm: #2d2520;
    --color-border: #ccc;
    --color-surface: #e6e1d8;

    color-scheme: light;
  }

  /* Page margins */
  @page {
    margin: 2cm;
  }

  /* Base print typography */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Hide non-content elements (D-09) */
  header,
  .skip-link,
  .theme-toggle,
  .scroll-indicator {
    display: none !important;
  }

  /* Remove sticky header padding from main */
  main {
    padding-top: 0;
  }

  /* Hero: simplify layout for print */
  #hero {
    min-height: auto;
    padding-top: 0;
  }

  /* Photo: include per D-08 (Visitenkarte), remove any filter */
  .hero__photo {
    filter: none;
    max-width: 150px;
  }

  /* Tighter section spacing for print */
  section {
    padding-block: 1.5rem;
  }

  /* Phase 13: Override Phase 12 ID-specific padding for print (D-11) */
  #narrative,
  #thinking {
    padding-block: 1.5rem;
  }

  /* Show URLs after external links only (D-10) */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 80%;
    font-weight: normal;
    word-break: break-all;
  }

  /* Suppress URL display for anchor links, root links, and mailto (Pitfall 6) */
  a[href^="#"]::after,
  a[href="/"]::after,
  a[href^="mailto"]::after {
    content: '' !important;
  }

  /* Links: plain black text with underline */
  a {
    color: #000;
    text-decoration: underline;
  }

  /* Footer: keep with legal links (D-09), simplify border */
  footer {
    border-top: 1px solid #ccc;
  }

  /* Prevent headings from being orphaned at bottom of page */
  h2,
  h3 {
    break-after: avoid;
  }

  /* Keep sections together where possible */
  section {
    break-inside: avoid;
  }

  /* Keep images with surrounding content */
  img {
    break-inside: avoid;
  }

  /* Widows and orphans for clean text flow */
  p {
    widows: 3;
    orphans: 3;
  }

  /* Remove all transitions and animations in print */
  * {
    transition: none !important;
    animation: none !important;
  }

  /* Remove all box shadows */
  * {
    box-shadow: none !important;
  }
}

/* === 12. EASTER EGG + CONNECT HINT === */

.connect-hint {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.easter-egg {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem 2rem;
  max-width: 22rem;
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
  z-index: 200;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.easter-egg p + p {
  margin-top: 0.75rem;
}

.easter-egg__cta {
  margin-top: 1rem;
  font-weight: var(--fw-medium);
}

.easter-egg__cta a {
  color: var(--color-accent);
  text-decoration: none;
}

.easter-egg__cta a:hover {
  text-decoration: underline;
}

.easter-egg--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

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

@media print {
  .easter-egg,
  .connect-hint {
    display: none !important;
  }
}