/* ==========================================================================
   global.css — reset, layout shell, and the shared component vocabulary
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

/* No @view-transition on purpose. A cross-document transition holds the old
   page on screen until the next one is ready, which on a page that loads a
   webfont and a WebGL scene reads as "the click did nothing". Navigation
   stays instant. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Korean must break between words, never inside one. `break-word` is the
     escape hatch for long unbroken Latin strings such as URLs. */
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: background-color var(--dur-slow) var(--ease-inout),
    color var(--dur-slow) var(--ease-inout);
}

body.menu-open {
  overflow: hidden;
}

/* CSS fallback for the fixed GLSL light field. It stays behind the entire
   document, so a long page never returns to a completely flat background. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(68% 58% at 88% 16%, rgba(176, 132, 66, 0.12), transparent 74%),
    radial-gradient(62% 64% at 8% 82%, rgba(176, 132, 66, 0.055), transparent 76%);
  background:
    radial-gradient(68% 58% at 88% 16%, var(--ambient-light), transparent 74%),
    radial-gradient(62% 64% at 8% 82%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 76%);
  opacity: 0.32;
}

body > main,
body > .footer {
  position: relative;
  z-index: 1;
}

body > main {
  flex: 1 0 auto;
  width: 100%;
}

body > .footer {
  margin-top: auto;
}

.site-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1100ms var(--ease-out);
}

.site-atmosphere[data-ready="true"] {
  opacity: 1;
}

.site-atmosphere__canvas {
  width: 100%;
  height: 100%;
}

:root[data-theme="dark"] .site-atmosphere__canvas {
  opacity: 0.38;
  mix-blend-mode: screen;
  filter: saturate(1.12);
}

:root[data-theme="light"] body::before {
  background:
    radial-gradient(68% 58% at 88% 16%, rgba(64, 128, 220, 0.19), transparent 72%),
    radial-gradient(62% 64% at 8% 82%, rgba(103, 157, 232, 0.13), transparent 76%),
    radial-gradient(42% 46% at 58% 52%, rgba(181, 135, 65, 0.055), transparent 74%);
  opacity: 0.55;
}

:root[data-theme="light"] .site-atmosphere__canvas {
  opacity: 0.44;
  mix-blend-mode: multiply;
  filter: saturate(1.38) contrast(1.08);
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img,
video {
  height: auto;
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

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

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

/* --------------------------------------------------------------------------
   2. Utilities
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-left: max(var(--shell-pad), var(--safe-left));
  padding-right: max(var(--shell-pad), var(--safe-right));
}

/* Document pages: wide enough for a four-up fact strip beside a comfortable
   reading column at the current type size. */
.shell--narrow {
  max-width: 1040px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.7rem 1.25rem;
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-micro);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.measure {
  max-width: var(--measure);
}

/* Hairline grid.
   Cells draw their own 1px outline with a box-shadow instead of the container
   painting a background through a 1px gap. That keeps the rules crisp AND
   leaves any trailing empty cell in the last row invisible, which the
   background-bleed technique cannot do. */
.hairline-grid,
.scope,
.page-hero__figures,
.stat-row,
.fact-strip,
.pillars {
  display: grid;
  gap: 1px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
}

.hairline-grid > *,
.scope > *,
.page-hero__figures > *,
.stat-row > *,
.fact-strip > *,
.pillars > * {
  background: transparent;
  box-shadow: 0 0 0 1px var(--border-subtle);
}

.measure-narrow {
  max-width: var(--measure-narrow);
}

/* --------------------------------------------------------------------------
   3. Typographic components
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}

.eyebrow--muted {
  color: var(--text-muted);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: 700;
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: 650;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.4;
  letter-spacing: -0.012em;
  font-weight: 650;
}

.h4 {
  font-size: var(--fs-h4);
  line-height: 1.5;
  font-weight: 650;
}

.lede {
  font-size: var(--fs-body-lg);
  line-height: 1.66;
  color: var(--text-secondary);
  letter-spacing: -0.012em;
}

.body-muted {
  color: var(--text-secondary);
}

.meta {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: var(--lh-compact);
  letter-spacing: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.numeral {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Inline link inside running copy */
.link {
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

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

/* --------------------------------------------------------------------------
   4. Section scaffolding
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-gap);
  position: relative;
}

.section--inset {
  --section-fade: clamp(4rem, 7vw, 8rem);
  --section-band: var(--bg-secondary);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--section-band) var(--section-fade),
    var(--section-band) calc(100% - var(--section-fade)),
    transparent 100%
  );
}

:root[data-theme="light"] .section--inset {
  --section-band: var(--bg-secondary);
}

@supports (background: color-mix(in srgb, black, transparent)) {
  .section--inset {
    --section-band: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
  }

  :root[data-theme="light"] .section--inset {
    --section-band: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
  }
}

.section--tight {
  padding-block: calc(var(--section-gap) * 0.62);
}

.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
}

.section-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: 650;
  max-width: 22ch;
}

/* For statement headings that must hold one line on desktop. They still wrap
   below ~1200px, where nowrap would overflow the shell. */
.section-head__title--wide {
  max-width: none;
}

/* Heading with its own actions on the same line */
.section-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.section-head__note {
  color: var(--text-secondary);
  max-width: var(--measure-narrow);
  font-size: var(--fs-body);
}

/* Section index rail: 01 / 02 / 03 markers, editorial not decorative */
.section-head--indexed {
  grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 0.4rem + 2vw, 2.5rem);
  align-items: start;
}

.section-head--indexed .section-index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  padding-top: 0.35em;
  grid-row: 1 / -1;
  grid-column: 1;
}

/* Everything except the index stacks in the second column, however many
   children the header has. */
.section-head--indexed > *:not(.section-index) {
  grid-column: 2;
}

.rule {
  height: 1px;
  background: var(--border-subtle);
  margin-block: var(--space-6);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.72rem 1.35rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn__icon {
  width: 1em;
  height: 1em;
  flex: none;
  opacity: 0.7;
}

.btn--primary {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}

.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

:root[data-theme="dark"] .btn--primary:hover {
  color: #14120e;
}

.btn--secondary {
  background: var(--surface-glass);
  color: var(--text-primary);
  border-color: var(--border-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--secondary:hover {
  background: var(--surface-glass-hover);
  border-color: var(--border-active);
}

/* Boxed but quieter than --secondary: same footprint, no glass fill. Used for
   the supporting action beside a primary one. */
.btn--quiet {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.btn--quiet:hover {
  background: var(--surface-tint);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Text link with a trailing arrow — the site's standard "go deeper" affordance */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.arrow-link::after {
  content: "";
  width: 0.9em;
  height: 0.9em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}

.arrow-link:hover {
  color: var(--accent);
}

.arrow-link:hover::after {
  transform: translateX(3px);
}

:root {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. Tags
   -------------------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  display: inline-block;
  padding: 0.24rem 0.58rem;
  font-size: var(--fs-tag);
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  line-height: 1.5;
  white-space: nowrap;
}

.tag--accent {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* --------------------------------------------------------------------------
   7. Glass surface (used sparingly: nav, floating controls, feature cards)
   -------------------------------------------------------------------------- */

.glass {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--border-highlight),
    inset 0 -1px 0 color-mix(in srgb, var(--text-primary) 3%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--surface-primary);
  }
}

/* --------------------------------------------------------------------------
   8. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    -webkit-backdrop-filter var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out);
}

.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  opacity: 0.72;
  pointer-events: none;
}

.nav[data-scrolled="true"] {
  background: var(--surface-glass);
  border-bottom-color: var(--border-subtle);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--bg-primary) 32%, transparent),
    inset 0 1px 0 var(--border-highlight);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}

.nav__brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-weight: 650;
  font-size: var(--fs-body);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.nav__brand-role {
  font-size: var(--fs-eyebrow);
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1rem + 1.2vw, 1.6rem);
}

.nav__link {
  position: relative;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.35rem 0.1rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current] {
  color: var(--text-primary);
}

.nav__link[aria-current]::after,
.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-tint);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.theme-toggle__sun {
  display: none;
}

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

:root[data-theme="dark"] .theme-toggle__moon {
  display: none;
}

/* Labelled theme switch — used in page content, not in the nav */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-glass);
  color: var(--text-secondary);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.mode-switch:hover {
  color: var(--text-primary);
  border-color: var(--border-active);
  background: var(--surface-glass-hover);
}

.mode-switch svg {
  width: 13px;
  height: 13px;
  opacity: 0.75;
}

/* Mobile menu button */
.nav__burger {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-tint);
  align-items: center;
  justify-content: center;
}

.nav__burger span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--text-primary);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-out);
}

.nav__burger span::before {
  top: -5px;
}

.nav__burger span::after {
  top: 5px;
}

.nav__burger[aria-expanded="true"] span {
  background: transparent;
}

.nav__burger[aria-expanded="true"] span::before {
  transform: translateY(5px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: var(--z-menu);
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--space-5);
  padding-right: max(var(--shell-pad), var(--safe-right));
  padding-bottom: calc(var(--space-7) + var(--safe-bottom));
  padding-left: max(var(--shell-pad), var(--safe-left));
  background: var(--surface-glass);
  border-bottom: 1px solid var(--border-subtle);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  display: grid;
  gap: 0.25rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.mobile-menu[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  padding: 0.75rem 0;
  font-size: var(--fs-sub);
  font-weight: 550;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-menu a:last-child {
  border-bottom: 0;
}

.mobile-menu a[aria-current] {
  color: var(--accent);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--accent-line);
  padding-left: var(--space-3);
}

/* Six labels at the current type size need real room; below this the header
   would crowd, so it switches to the drawer. */
@media (max-width: 1080px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: inline-flex;
  }

  .theme-toggle,
  .nav__burger {
    width: 44px;
    height: 44px;
  }
}

/* A wide touch device still needs finger-sized controls even when the desktop
   navigation remains visible (large tablets and unfolded foldables). */
@media (pointer: coarse) {
  .theme-toggle,
  .nav__burger {
    width: 44px;
    height: 44px;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 520px) {
  .nav__inner {
    gap: var(--space-3);
  }

  .nav__brand-role {
    display: none;
  }
}

@media (min-width: 1081px) {
  .mobile-menu {
    display: none;
  }
}

/* Fold covers and landscape phones have enough width for content but almost
   no vertical room. Keep the drawer compact and internally scrollable. */
@media (max-height: 480px) {
  :root {
    --nav-bar-h: 58px;
  }

  .mobile-menu {
    padding-top: var(--space-2);
    padding-bottom: calc(var(--space-3) + var(--safe-bottom));
    gap: 0;
  }

  .mobile-menu a {
    padding-block: 0.55rem;
  }
}

@media (max-height: 260px) {
  .site-atmosphere {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--surface-primary);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lifted);
  transform: translateY(-2px);
}

.card:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lifted), inset 0 1px 0 var(--border-highlight);
}

/* Whole-card link. The primary action stretches an invisible hit area across
   the card, so clicking anywhere opens the web version, while the secondary
   controls (PDF) stay clickable above it. Only one real <a> is involved, so
   keyboard and screen-reader behaviour is unchanged. */
/* A dedicated, empty link layer sitting directly inside the card. Stretching a
   button's ::after instead would inherit whatever containing block its
   ancestors happen to create (transform, backdrop-filter, will-change), which
   is exactly how this silently stopped working before. As a direct child of
   .card it cannot be trapped by anything. */
/* Must outrank every layer a card can contain — .work-card__body raises
   itself to 3 to sit above the artwork, so anything at 3 or below would be
   covered by it and the card's text half would stop responding. */
.card-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

/* Real controls sit above the overlay so they keep their own targets. */
.card :where(a, button):not(.card-overlay) {
  position: relative;
  z-index: 6;
}

/* Extremely subtle pointer-aware sheen; disabled on touch and reduced motion */
.card--reactive::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--px, 50%) var(--py, 50%),
    var(--ambient-light),
    transparent 62%
  );
  transition: opacity var(--dur-slow) var(--ease-out);
  z-index: 2;
  mix-blend-mode: soft-light;
}

@media (hover: hover) and (pointer: fine) {
  .card--reactive:hover::before {
    opacity: 0.55;
  }
}

/* --------------------------------------------------------------------------
   10. Media
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--bg-inset);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
}

.media img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.media--zoomable {
  cursor: zoom-in;
}

.figure {
  display: grid;
  gap: var(--space-3);
}

.figure__caption {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: var(--lh-compact);
}

/* --------------------------------------------------------------------------
   11. Definition rows — the site's default "label / value" pattern
   -------------------------------------------------------------------------- */

.deflist {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-subtle);
}

.deflist > div {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: var(--space-4);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}

.deflist dt {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.deflist dd {
  font-size: var(--fs-small);
  line-height: var(--lh-compact);
  color: var(--text-primary);
}

@media (max-width: 620px) {
  .deflist > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* Bulleted fact list, editorial style */
.facts {
  display: grid;
  gap: 0.7rem;
}

.facts li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--text-secondary);
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--accent);
}

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

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-7);
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  --footer-band: var(--bg-primary);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--footer-band) clamp(3rem, 5vw, 6rem),
    var(--footer-band) 100%
  );
}

@supports (background: color-mix(in srgb, black, transparent)) {
  .footer {
    --footer-band: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  }
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
}

.footer__name {
  font-size: var(--fs-sub);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.footer__role {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
}

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

.footer__colophon {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   13. Reveal on scroll
   -------------------------------------------------------------------------- */

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Directional variants — used where the element sits to one side of the
   reading column and should arrive from that side. */
.motion-ready [data-reveal="right"] {
  transform: translateX(30px);
}

.motion-ready [data-reveal="left"] {
  transform: translateX(-30px);
}

@media (max-width: 620px) {
  .motion-ready [data-reveal="right"],
  .motion-ready [data-reveal="left"] {
    transform: translateY(12px);
  }
}

/* If JS never runs, content must still be visible. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------------------
   14. Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding-top: max(clamp(1rem, 4vw, 3rem), var(--safe-top));
  padding-right: max(clamp(1rem, 4vw, 3rem), var(--safe-right));
  padding-bottom: max(clamp(1rem, 4vw, 3rem), var(--safe-bottom));
  padding-left: max(clamp(1rem, 4vw, 3rem), var(--safe-left));
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out);
}

.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.lightbox__figure {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  max-width: min(1180px, 100%);
  max-height: 100%;
}

.lightbox__img {
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lifted);
  transform: scale(0.985);
  transition: transform var(--dur-base) var(--ease-out);
}

.lightbox[data-open="true"] .lightbox__img {
  transform: scale(1);
}

.lightbox__caption {
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  text-align: center;
  max-width: 60ch;
}

.lightbox__close {
  position: absolute;
  top: max(clamp(0.75rem, 2vw, 1.5rem), var(--safe-top));
  right: max(clamp(0.75rem, 2vw, 1.5rem), var(--safe-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-glass);
  color: var(--text-primary);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lightbox__close:hover {
  border-color: var(--border-active);
}

body.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   15. Reduced motion and high-contrast fallbacks
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .card--reactive::before {
    display: none;
  }

  .nav::after {
    display: none;
  }

}

@media (forced-colors: active) {
  body::before,
  .site-atmosphere,
  .hero__canvas,
  .page-hero__canvas {
    display: none !important;
  }

  .glass,
  .nav[data-scrolled="true"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: CanvasText;
  }

  .section--inset,
  .footer {
    background: Canvas !important;
  }
}

@media print {
  body::before,
  .site-atmosphere {
    display: none !important;
  }
}

/* Copy feedback toast — shown when an email link copies the address */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 120;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: var(--fs-tag);
  box-shadow: var(--shadow-lifted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.copy-toast[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

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