@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, p, figure, ul, dl, dd { margin: 0; }
  img { display: block; max-width: 100%; }
  button, input { font: inherit; }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink: #e9e4d7;
    --muted: #a9b0ad;
    --dim: #747d79;
    --bg: #0d1112;
    --panel: #141a1b;
    --panel-2: #1a2223;
    --rule: #34403e;
    --teal: #73c7b8;
    --coral: #ff785d;
    --blue: #8fa9e8;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  body {
    background:
      radial-gradient(circle at 85% 9%, rgba(115,199,184,.09), transparent 24rem),
      linear-gradient(180deg, #0d1112 0%, #111718 56%, #0d1112 100%);
    color: var(--ink);
    font-family: var(--sans);
    font-size: clamp(1rem, .97rem + .15vw, 1.09rem);
    line-height: 1.72;
    min-height:100vh;
    text-rendering: optimizeLegibility;
  }
  a { color: var(--teal); text-decoration-color: rgba(115,199,184,.45); text-underline-offset: .18em; }
  a:hover { color: #a8e5d9; text-decoration-color: currentColor; }
  a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
  h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
  h1 { font-size: clamp(2.75rem, 7.2vw, 6.8rem); max-width: 12ch; }
  h2 { font-size: clamp(1.55rem, 2.8vw, 2.65rem); }
  p + p { margin-top: 1em; }
  code { color: #f2c78e; font-size: .9em; overflow-wrap: anywhere; }
}

@layer components {
  .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--ink); color: var(--bg); padding: .65rem 1rem; }
  .skip-link:focus { top: 1rem; }
  .progress { height: 2px; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 15; }
  .progress span { background: linear-gradient(90deg, var(--teal), var(--coral)); display: block; height: 100%; transform: scaleX(var(--reading, 0)); transform-origin: left; }
  .site-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 92rem; padding: 1.15rem clamp(1rem, 4vw, 4rem); }
  .wordmark { align-items: baseline; color: var(--ink); display: flex; font-size: .79rem; font-weight: 750; gap: .28rem; letter-spacing: .16em; text-decoration: none; }
  .wordmark i { color: var(--coral); font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
  .wordmark small { color: var(--dim); font-size: .59rem; font-weight: 650; letter-spacing: .11em; margin-left: .7rem; text-transform: uppercase; }
  .primary-nav { align-items: center; display: flex; gap: clamp(.8rem, 2.2vw, 2rem); }
  .primary-nav a { color: var(--muted); font-size: .71rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
  .primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ink); }
  .primary-nav a[aria-current="page"]::after { background: var(--coral); content: ''; display: block; height: 2px; margin-top: .28rem; }
  .menu-button { background: transparent; border: 1px solid var(--rule); color: var(--ink); display: none; padding: .45rem .7rem; }
  .article-shell { margin: 0 auto; max-width: 92rem; padding: clamp(3.3rem, 8vw, 8.5rem) clamp(1rem, 4vw, 4rem) clamp(6rem, 11vw, 11rem); }
  article > * + * { margin-top: clamp(4.5rem, 9vw, 9rem); }
  .hero-copy { display: grid; gap: 1.3rem; }
  .eyebrow { color: var(--coral); font-size: .69rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 1rem; text-transform: uppercase; }
  .lede { color: #c8ceca; font-family: var(--serif); font-size: clamp(1.26rem, 2.1vw, 1.9rem); line-height: 1.48; margin-top: 1.6rem; max-width: 49rem; }
  article > .eyebrow + h1 + .lede { margin-top: 1.6rem; }
  .hero-visual { background: #090c0d; border: 1px solid var(--rule); isolation: isolate; overflow: hidden; position: relative; }
  .hero-visual::after { border: 1px solid rgba(233,228,215,.26); content: ''; inset: .7rem; pointer-events: none; position: absolute; }
  .hero-visual img { aspect-ratio: 16 / 8.65; height: auto; object-fit: cover; width: 100%; }
  .hero-visual figcaption { background: rgba(9,12,13,.9); bottom: .7rem; color: var(--muted); font-size: .73rem; left: .7rem; max-width: 35rem; padding: .6rem .75rem; position: absolute; }
  .notice { background: rgba(20,26,27,.88); border: 1px solid var(--rule); border-left: 4px solid var(--coral); padding: clamp(1.4rem, 3vw, 2.5rem); }
  .notice h2 { font-size: 1.6rem; margin-bottom: .7rem; }
  .notice-prominent { color: #d7d5ca; font-size: .88rem; line-height: 1.6; margin-top: 2.1rem; max-width: 69rem; }
  .page-index .article-shell { padding-top: clamp(1.2rem, 3vw, 2.8rem); }
  .page-index .notice-prominent { margin-top: 0; }
  .intro-grid, .split-rule { border-top: 1px solid var(--rule); display: grid; gap: clamp(2rem, 6vw, 8rem); grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.28fr); padding-top: clamp(1.5rem, 3vw, 2.8rem); }
  .split-rule > div:last-child { color: #c1c7c3; max-width: 52rem; }
  .card-grid, .case-grid, .work-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--rule); border: 1px solid var(--rule); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid article, .case-grid article, .work-grid article { background: var(--panel); min-height: 15rem; padding: clamp(1.4rem, 3vw, 2.5rem); }
  .card-grid h2, .case-grid h2, .work-grid h2 { font-size: clamp(1.35rem, 2vw, 2rem); margin-bottom: 1rem; }
  .card-grid p, .case-grid p, .work-grid p { color: var(--muted); }
  .card-no, .work-year { color: var(--coral) !important; display: block; font-size: .67rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 2rem; }
  .process-line, .route-map, .layer-list { border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, 1fr); }
  .process-line.four, .route-map, .layer-list { grid-template-columns: repeat(4, 1fr); }
  .process-line article, .route-map article, .layer-list article { border-right: 1px solid var(--rule); padding: 1.8rem; }
  .process-line article:last-child, .route-map article:last-child, .layer-list article:last-child { border-right: 0; }
  .process-line span, .route-map span, .layer-list span { color: var(--coral); font-size: .72rem; font-weight: 800; }
  .process-line h2, .route-map h2, .layer-list h2 { font-size: 1.35rem; margin: 1.4rem 0 .8rem; }
  .process-line p, .route-map p, .layer-list p { color: var(--muted); font-size: .92rem; }
  .record-card { background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--rule); padding: clamp(1.5rem, 4vw, 4rem); }
  .record-card h2 { font-size: clamp(1.4rem, 2vw, 2rem); margin: 2.6rem 0 1rem; }
  .record-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--rule); }
  .record-grid div { background: #111718; padding: 1rem; }
  .record-grid dt { color: var(--dim); font-size: .63rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
  .record-grid dd { margin-top: .55rem; }
  .record-card ul { color: var(--muted); margin: 0; padding-left: 1.25rem; }
  .boundary-note, .ergonomics { border: 1px solid var(--rule); margin-left: auto; max-width: 66rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
  .boundary-note { border-color: rgba(143,169,232,.5); }
  .boundary-note h2, .ergonomics h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); margin-bottom: 1rem; }
  .boundary-note p, .ergonomics p { color: var(--muted); }
  .ergonomics { border-top: 4px solid var(--teal); }
  .plain-list { color: var(--muted); padding-left: 1.2rem; }
  .plain-list li + li { margin-top: .6rem; }
  .editorial-note { border-left: 2px solid var(--blue); color: var(--muted); font-family: var(--serif); font-size: 1.1rem; margin-left: auto; max-width: 48rem; padding-left: 1.2rem; }
  .next-link, .topic-strip { border-top: 1px solid var(--rule); color: var(--dim); font-size: .75rem; font-weight: 700; letter-spacing: .08em; padding-top: 1.2rem; text-transform: uppercase; }
  .topic-strip { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
  .topic-strip a { text-decoration: none; }
  .site-footer { border-top: 1px solid var(--rule); display: grid; gap: 2.5rem; grid-template-columns: .75fr 1.25fr; margin: 0 auto; max-width: 92rem; padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4vw, 4rem); }
  .footer-mark span { font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
  .footer-mark p { color: var(--dim); font-family: var(--serif); margin-top: .7rem; max-width: 24rem; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: flex-end; }
  .site-footer nav a { color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
  .footer-notice { border-top: 1px solid var(--rule); color: var(--dim); font-size: .72rem; grid-column: 1 / -1; padding-top: 1.5rem; }
  .footer-fine { color: #626c68; font-size: .64rem; grid-column: 1 / -1; letter-spacing: .1em; text-transform: uppercase; }
  .page-index h1 { max-width: 10ch; }
  .page-index .hero-visual { margin-top: 3rem; }
  .page-animation .hero-visual { max-height: 40rem; }
}

@layer utilities {
  @media (max-width: 800px) {
    html { scroll-behavior: auto; }
    .site-header { align-items: flex-start; flex-wrap: wrap; }
    .wordmark small { display: none; }
    .menu-button { display: none; }
    .primary-nav { background: var(--panel); border: 1px solid var(--rule); display: grid; flex-basis: 100%; margin-top: .9rem; padding: .8rem; width: 100%; }
    .js .menu-button { display: block; }
    .js .primary-nav { display: none; }
    .js .primary-nav.is-open { display: grid; }
    .primary-nav a { padding: .55rem; }
    .primary-nav a[aria-current="page"]::after { display: none; }
    .article-shell { padding-top: 3.8rem; }
    .intro-grid, .split-rule { grid-template-columns: 1fr; }
    .card-grid, .case-grid, .work-grid { grid-template-columns: 1fr; }
    .process-line, .process-line.four, .route-map, .layer-list { grid-template-columns: repeat(2, 1fr); }
    .process-line article:nth-child(2), .route-map article:nth-child(2), .layer-list article:nth-child(2) { border-right: 0; }
    .record-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer { grid-template-columns: 1fr; }
    .site-footer nav { justify-content: flex-start; }
  }
  @media (max-width: 480px) {
    .process-line, .process-line.four, .route-map, .layer-list, .record-grid { grid-template-columns: 1fr; }
    .process-line article, .route-map article, .layer-list article { border-bottom: 1px solid var(--rule); border-right: 0; }
    .hero-visual figcaption { position: static; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  }
  @media print {
    body { background: #fff; color: #111; }
    .site-header, .site-footer, .hero-visual, .progress { display: none; }
    a { color: #111; }
  }
}