:root {
  --paper: #fdfbf5;
  --ink: #24211c;
  --muted: #6d685f;
  --soft: #a59e90;
  --line: #d8d1c4;
  --accent: #f8970f;
  --accent-dark: #ab5b00;
  --accent-pale: #fcf3e2;
  --display: Georgia, 'Times New Roman', serif;
  --body: Arial, Helvetica, sans-serif;
  --page-gutter: clamp(24px, 5.6vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 5px; }

.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 12px 18px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 16px; }
.reading-progress { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 3px; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.section-shell { padding-inline: var(--page-gutter); }

.site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: clamp(24px, 3vw, 58px); min-height: 92px; padding: 14px var(--page-gutter); background: var(--paper); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { width: 37px; height: auto; }
.brand span, .footer-brand strong { font-family: var(--body); font-size: 14px; font-weight: 800; letter-spacing: .11em; white-space: nowrap; }
.brand em { font-style: normal; color: var(--accent-dark); }
.primary-nav { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2.2vw, 38px); margin-inline: auto; }
.primary-nav a { position: relative; padding-block: 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .045em; }
.primary-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent-dark); transform: scaleX(0); transform-origin: left; }
.primary-nav a.is-active { color: var(--ink); }
.primary-nav a.is-active::after { transform: scaleX(1); }
.header-document { display: flex; align-items: center; gap: 17px; flex: 0 0 auto; padding: 10px 0; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.header-document span { color: var(--accent-dark); font-size: 10px; letter-spacing: .12em; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: min(790px, calc(100svh - 92px)); display: flex; flex-direction: column; overflow: hidden; }
.hero-topline, .hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.hero-topline { padding-top: 31px; }
.hero-bottom { margin-top: auto; padding-block: 28px; border-top: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); align-items: stretch; flex: 1; min-height: 570px; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 70px 28px 58px 0; }
.eyebrow, .section-index, .visual-overline, .display-caption { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--accent-dark); }
.eyebrow-stroke { width: 29px; height: 2px; background: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 25px 0 28px; font-family: var(--display); font-size: clamp(76px, 8.4vw, 151px); font-weight: 400; line-height: .91; letter-spacing: -.079em; }
.hero h1 i, .section-title i, .closing-section h2 i { font-weight: 400; }
.hero-period { color: var(--accent); }
.hero-lead { max-width: 510px; margin-bottom: 0; color: #4e4941; font-family: var(--display); font-size: clamp(21px, 2vw, 29px); line-height: 1.34; letter-spacing: -.021em; }
.hero-actions { display: flex; align-items: center; gap: 40px; margin-top: 42px; }
.text-action { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.action-rule { display: inline-block; width: 46px; height: 1px; background: var(--accent-dark); }
.hero-version { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .11em; white-space: nowrap; }
.hero-art { display: flex; align-items: center; justify-content: center; padding: 42px 0 42px 40px; }
.hero-art-inner { position: relative; width: min(100%, 600px); aspect-ratio: 1 / 1.02; border: 1px solid var(--line); overflow: hidden; transform: translateY(var(--hero-parallax, 0px)); }
.hero-art-inner::before, .hero-art-inner::after { content: ''; position: absolute; z-index: 1; width: 34px; height: 34px; border-color: var(--accent); border-style: solid; }
.hero-art-inner::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-art-inner::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.hero-mark { position: absolute; z-index: 2; width: 45%; height: auto; top: 26%; left: 27.5%; filter: drop-shadow(0 18px 24px rgba(194, 109, 3, .1)); }
.art-axis { position: absolute; background: #e6dfd3; }
.art-axis-h { left: 0; right: 0; top: 50%; height: 1px; }
.art-axis-v { top: 0; bottom: 0; left: 50%; width: 1px; }
.art-coordinate, .art-caption, .art-index { position: absolute; z-index: 2; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.6; letter-spacing: .15em; }
.art-coordinate-top { top: 28px; left: 30px; }
.art-caption { right: 30px; bottom: 26px; text-align: right; }
.art-index { left: 30px; bottom: 26px; color: var(--accent-dark); }

.chapter-strip { display: flex; justify-content: space-between; gap: 24px; padding: 18px var(--page-gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--soft); font-size: 9px; font-weight: 800; letter-spacing: .15em; white-space: nowrap; }
.editorial-section { padding-top: clamp(92px, 12vw, 170px); padding-bottom: clamp(96px, 12vw, 168px); border-bottom: 1px solid var(--line); scroll-margin-top: 92px; }
.section-heading { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 23px; border-bottom: 1px solid var(--ink); }
.section-heading::after { content: ''; position: absolute; bottom: -1px; left: 0; width: clamp(110px, 17vw, 250px); height: 2px; background: var(--accent); }
.section-heading p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.section-index { color: var(--accent-dark); }
.section-title { margin: 0; font-family: var(--display); font-size: clamp(58px, 6.5vw, 112px); font-weight: 400; line-height: 1.03; letter-spacing: -.068em; }
.lead-copy { font-family: var(--display); font-size: clamp(23px, 2.1vw, 32px); line-height: 1.39; letter-spacing: -.022em; }

.overview-layout { display: grid; grid-template-columns: 1.15fr .7fr; gap: clamp(55px, 10vw, 170px); padding-top: 69px; }
.overview-copy { max-width: 530px; padding-top: 12px; }
.overview-copy > p:not(.lead-copy) { color: var(--muted); font-size: 16px; line-height: 1.7; }
.source-note { display: grid; grid-template-columns: 105px 1fr; gap: 20px; margin-top: 54px; padding-top: 17px; border-top: 1px solid var(--line); }
.source-note span { color: var(--accent-dark); font-size: 9px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; }
.source-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.overview-stat-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 110px; }
.overview-stat-line > div { display: flex; flex-direction: column; gap: 8px; padding-top: 23px; border-top: 1px solid var(--line); }
.overview-stat-line strong { font-family: var(--display); font-size: clamp(63px, 7vw, 106px); font-weight: 400; line-height: 1; letter-spacing: -.065em; }
.overview-stat-line strong span { color: var(--accent-dark); }
.overview-stat-line small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .16em; }

.architecture-intro { display: grid; grid-template-columns: 1.1fr .7fr; gap: clamp(55px, 10vw, 170px); align-items: end; padding-top: 70px; }
.architecture-intro .lead-copy { max-width: 550px; margin: 0 0 8px; }
.architecture-body { display: grid; grid-template-columns: 1.5fr .68fr; gap: clamp(55px, 7vw, 130px); align-items: stretch; margin-top: 96px; }
.architecture-visual { display: flex; flex-direction: column; justify-content: space-between; min-height: 445px; padding: 29px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.visual-overline { color: var(--accent-dark); }
.flow-diagram { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 24px; }
.flow-step { min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 4px 12px 0; border-top: 2px solid var(--line); }
.flow-step-emphasis { border-color: var(--accent); }
.flow-number { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.flow-step strong { max-width: 150px; font-family: var(--display); font-size: clamp(19px, 1.6vw, 25px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }
.flow-step small { max-width: 145px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.flow-connector { align-self: center; height: 1px; background: var(--line); }
.flow-connector span { display: block; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.visual-footnote { padding-bottom: 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.spec-list { margin: 0; border-top: 1px solid var(--ink); }
.spec-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { color: var(--muted); font-size: 12px; line-height: 1.4; }
.spec-list dd { margin: 0; font-family: var(--display); font-size: 27px; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }

.languages-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; padding-top: 61px; }
.display-number { margin-bottom: 8px; font-family: var(--display); font-size: clamp(108px, 14vw, 230px); line-height: .9; letter-spacing: -.105em; white-space: nowrap; }
.display-number small { color: var(--accent-dark); font-size: .54em; }
.display-caption { color: var(--muted); }
.languages-header .section-title { font-size: clamp(50px, 5.4vw, 90px); }
.language-intro { max-width: 570px; margin: 80px 0 38px auto; color: var(--muted); font-size: 16px; line-height: 1.65; }
.corpus-stack { display: flex; height: clamp(78px, 8vw, 123px); overflow: hidden; }
.segment { display: flex; justify-content: center; align-items: center; flex: 0 0 var(--segment); clip-path: inset(0 100% 0 0); }
.segment b { color: var(--ink); font-family: var(--display); font-size: clamp(18px, 2.2vw, 37px); font-weight: 400; letter-spacing: -.04em; }
.segment-urdu { background: #ef8f0c; }
.segment-punjabi { background: #f5a934; }
.segment-sindhi { background: #f7bd62; }
.segment-pashto { background: #f9d08b; }
.segment-balochi { background: #fbe3b9; }
.segment-balochi b { font-size: 16px; }
.language-list { border-top: 1px solid var(--ink); margin-top: 20px; }
.language-list > div { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); }
.language-id { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.language-list strong { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -.035em; }
.language-list > div > span:last-child { font-family: var(--display); font-size: 24px; letter-spacing: -.04em; }

.method-layout { display: grid; grid-template-columns: .82fr 1fr; gap: clamp(75px, 14vw, 240px); padding-top: 72px; }
.method-sticky { align-self: start; position: sticky; top: 150px; }
.method-sticky p { max-width: 410px; margin-top: 29px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.method-steps { position: relative; margin: 0; padding: 0 0 0 29px; list-style: none; }
.method-steps::before, .method-steps::after { content: ''; position: absolute; top: 0; left: 0; width: 2px; }
.method-steps::before { height: 100%; background: var(--line); }
.method-steps::after { height: var(--method-progress, 0%); background: var(--accent); }
.method-steps li { position: relative; display: grid; grid-template-columns: 128px 1fr; gap: 25px; min-height: 170px; padding: 26px 0 39px; border-top: 1px solid var(--line); }
.method-steps li::before { content: ''; position: absolute; top: 32px; left: -29px; width: 13px; height: 2px; background: var(--accent); }
.method-steps li:last-child { border-bottom: 1px solid var(--line); }
.method-steps li > span { padding-top: 5px; color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.method-steps h3 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(26px, 2.4vw, 38px); font-weight: 400; line-height: 1.13; letter-spacing: -.04em; }
.method-steps p { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.evaluation-intro { display: grid; grid-template-columns: 1.1fr .7fr; align-items: end; gap: clamp(60px, 10vw, 170px); padding-top: 70px; }
.evaluation-intro .lead-copy { max-width: 520px; margin-bottom: 8px; }
.evaluation-list { margin-top: 104px; border-top: 1px solid var(--ink); }
.evaluation-row { display: grid; grid-template-columns: 74px 1.15fr 1.2fr .72fr; align-items: baseline; gap: 26px; min-height: 132px; padding: 38px 0 34px; border-bottom: 1px solid var(--line); }
.evaluation-num { color: var(--accent-dark); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.evaluation-row h3 { margin: 0; font-family: var(--display); font-size: clamp(28px, 2.7vw, 42px); font-weight: 400; letter-spacing: -.045em; }
.evaluation-row p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.evaluation-type { justify-self: end; color: var(--soft); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-align: right; }
.evaluation-note { max-width: 500px; margin: 27px 0 0 auto; color: var(--muted); font-size: 12px; line-height: 1.6; }

.closing-section { padding-top: clamp(95px, 12vw, 170px); padding-bottom: clamp(95px, 12vw, 170px); }
.closing-rule { width: 100%; height: 1px; margin-bottom: 35px; background: var(--accent); transform-origin: left; }
.closing-section h2 { margin: 55px 0 88px; font-family: var(--display); font-size: clamp(78px, 11vw, 180px); font-weight: 400; line-height: .96; letter-spacing: -.08em; }
.closing-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; }
.closing-bottom p { max-width: 560px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.document-link { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: clamp(280px, 28vw, 380px); padding: 24px 28px 22px 0; border-bottom: 2px solid transparent; transform: translateY(var(--hero-parallax, 0px)); transition: transform 420ms cubic-bezier(.2, 0, 0, 1), padding-left 420ms cubic-bezier(.2, 0, 0, 1), background-color 420ms cubic-bezier(.2, 0, 0, 1); }
.document-link::before { content: '↗'; position: absolute; right: 4px; top: 22px; color: var(--accent-dark); font-size: 16px; font-weight: 700; transition: transform 420ms cubic-bezier(.2, 0, 0, 1), color 320ms ease; }
.document-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-dark), var(--accent)); background-size: 200% 100%; transform-origin: left; animation: doc-line-enter 950ms cubic-bezier(.2, 0, 0, 1) 520ms both, doc-line-shimmer 4s ease-in-out 1.5s infinite; }
.document-link span { font-size: clamp(14px, 1.2vw, 17px); font-weight: 800; letter-spacing: .08em; transition: color 320ms ease, letter-spacing 420ms cubic-bezier(.2, 0, 0, 1); animation: hero-enter 750ms cubic-bezier(.2, 0, 0, 1) 420ms both; }
.document-link strong { color: var(--muted); font-size: 11px; letter-spacing: .16em; transition: color 320ms ease; animation: hero-enter 750ms cubic-bezier(.2, 0, 0, 1) 540ms both; }
.document-link:hover, .document-link:focus-visible { transform: translateY(calc(var(--hero-parallax, 0px) - 4px)); padding-left: 14px; background-color: var(--accent-pale); }
.document-link:hover span, .document-link:focus-visible span { color: var(--accent-dark); letter-spacing: .1em; }
.document-link:hover strong, .document-link:focus-visible strong { color: var(--ink); }
.document-link:hover::before, .document-link:focus-visible::before { transform: translate(4px, -4px); color: var(--accent); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 28px; align-items: center; padding-top: 35px; padding-bottom: 46px; border-top: 1px solid var(--ink); }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.site-footer p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.site-footer a { padding-top: 7px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .13em; white-space: nowrap; }

.js-motion .reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); }
.js-motion .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal { transition: opacity 650ms cubic-bezier(.2, 0, 0, 1), transform 650ms cubic-bezier(.2, 0, 0, 1), filter 650ms cubic-bezier(.2, 0, 0, 1); }
  .entrance { animation: hero-enter 700ms cubic-bezier(.2, 0, 0, 1) both; }
  .entrance-1 { animation-delay: 80ms; }
  .entrance-2 { animation-delay: 180ms; }
  .entrance-3 { animation-delay: 280ms; }
  .entrance-4 { animation-delay: 380ms; }
  .entrance-5 { animation-delay: 480ms; }
  .hero-mark { animation: mark-enter 1100ms cubic-bezier(.2, 0, 0, 1) 430ms both; }
  .art-axis-h { animation: axis-horizontal 1000ms cubic-bezier(.2, 0, 0, 1) 650ms both; }
  .art-axis-v { animation: axis-vertical 1000ms cubic-bezier(.2, 0, 0, 1) 750ms both; }
  .js-motion .section-heading::after { transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.2, 0, 0, 1); }
  .js-motion .section-heading.is-visible::after { transform: scaleX(1); }
  .segment { transition: clip-path 950ms cubic-bezier(.2, 0, 0, 1); }
  .segment:nth-child(2) { transition-delay: 100ms; }
  .segment:nth-child(3) { transition-delay: 200ms; }
  .segment:nth-child(4) { transition-delay: 300ms; }
  .segment:nth-child(5) { transition-delay: 400ms; }
  .flow-connector span { transition: transform 650ms cubic-bezier(.2, 0, 0, 1); }
  .flow-connector:nth-child(4) span { transition-delay: 160ms; }
  .flow-connector:nth-child(6) span { transition-delay: 320ms; }
  .closing-rule { transition: transform 900ms cubic-bezier(.2, 0, 0, 1); }
  .js-motion .closing-rule { transform: scaleX(0); }
  .js-motion .closing-rule.is-visible { transform: scaleX(1); }
}
.corpus-visual.is-animated .segment { clip-path: inset(0 0 0 0); }
.architecture-visual.is-animated .flow-connector span { transform: scaleX(1); }
@keyframes hero-enter { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes mark-enter { from { opacity: 0; transform: translateY(18px) rotate(-8deg) scale(.92); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes axis-horizontal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes axis-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes doc-line-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes doc-line-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (max-width: 1200px) {
  .site-header { gap: 25px; }
  .primary-nav { gap: 18px; }
  .hero h1 { font-size: clamp(72px, 8.1vw, 112px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); }
  .hero-version { display: none; }
  .architecture-body { grid-template-columns: 1fr; gap: 44px; }
  .architecture-visual { min-height: 360px; }
  .spec-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}

@media (max-width: 900px) {
  .site-header { min-height: 74px; }
  .brand { margin-right: auto; }
  .menu-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
  .menu-mark { display: inline-block; width: 17px; height: 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - 74px); overflow: auto; margin: 0; padding: 20px var(--page-gutter) 30px; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--display); font-size: 26px; font-weight: 400; }
  .primary-nav a::after { display: none; }
  .header-document { margin-left: 4px; }
  .hero { min-height: 700px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(240px, .8fr); min-height: 570px; }
  .hero-art { padding-left: 20px; }
  .hero h1 { font-size: clamp(68px, 8vw, 92px); }
  .hero-lead { font-size: 20px; }
  .chapter-strip { overflow: auto; justify-content: flex-start; gap: 36px; }
  .overview-layout, .architecture-intro, .evaluation-intro { grid-template-columns: 1fr; gap: 35px; }
  .overview-copy { max-width: 650px; }
  .languages-header { align-items: flex-start; flex-direction: column; gap: 55px; }
  .language-intro { margin-left: 0; }
  .method-layout { grid-template-columns: 1fr; gap: 45px; }
  .method-sticky { position: static; }
  .evaluation-row { grid-template-columns: 40px 1fr 1.2fr; }
  .evaluation-type { display: none; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --page-gutter: 22px; }
  .site-header { min-height: 68px; gap: 16px; }
  .brand img { width: 32px; }
  .brand span { font-size: 12px; }
  .header-document { display: none; }
  .hero { min-height: auto; }
  .hero-topline { padding-top: 25px; font-size: 9px; }
  .hero-grid { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { padding: 76px 0 42px; }
  .hero h1 { margin-top: 21px; font-size: clamp(68px, 15vw, 105px); }
  .hero-lead { max-width: 400px; font-size: 21px; }
  .hero-actions { margin-top: 34px; }
  .hero-art { justify-content: flex-start; padding: 0 0 50px 0; }
  .document-link { width: 100%; min-width: 0; }
  .hero-bottom { padding-block: 18px; font-size: 9px; }
  .hero-bottom-middle { display: none; }
  .chapter-strip { padding-block: 16px; }
  .editorial-section { padding-top: 88px; padding-bottom: 96px; scroll-margin-top: 68px; }
  .section-heading { padding-bottom: 18px; }
  .section-heading p { max-width: 125px; text-align: right; font-size: 9px; }
  .section-index { font-size: 10px; }
  .section-title { font-size: clamp(53px, 11.3vw, 74px); }
  .lead-copy { font-size: 24px; }
  .overview-layout, .architecture-intro, .evaluation-intro { padding-top: 48px; }
  .overview-copy > p:not(.lead-copy) { font-size: 15px; }
  .source-note { margin-top: 40px; }
  .overview-stat-line { grid-template-columns: 1fr; gap: 29px; margin-top: 75px; }
  .overview-stat-line > div { padding-top: 16px; }
  .overview-stat-line strong { font-size: 86px; }
  .architecture-body { margin-top: 70px; }
  .architecture-visual { min-height: 0; padding-top: 19px; }
  .flow-diagram { grid-template-columns: 1fr; gap: 0; margin: 39px 0; }
  .flow-step { min-height: 90px; display: grid; grid-template-columns: 32px 1fr; gap: 5px 12px; align-items: baseline; padding: 14px 0; }
  .flow-step .flow-number { grid-row: 1 / 3; }
  .flow-step strong { max-width: none; font-size: 24px; }
  .flow-step small { max-width: none; font-size: 11px; }
  .flow-connector { width: 2px; height: 27px; margin-left: 15px; }
  .flow-connector span { width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; }
  .architecture-visual.is-animated .flow-connector span { transform: scaleY(1); }
  .spec-list { grid-template-columns: 1fr; }
  .languages-header { padding-top: 46px; gap: 43px; }
  .display-number { font-size: clamp(100px, 24vw, 150px); }
  .language-intro { margin: 57px 0 28px; font-size: 15px; }
  .corpus-stack { height: 68px; }
  .segment b { display: none; }
  .language-list { margin-top: 11px; }
  .language-list > div { grid-template-columns: 37px 1fr auto; min-height: 58px; gap: 10px; }
  .language-list strong { font-size: 19px; }
  .language-list > div > span:last-child { font-size: 20px; }
  .method-layout { padding-top: 49px; }
  .method-steps li { grid-template-columns: 1fr; gap: 17px; min-height: 0; padding: 24px 0 34px; }
  .method-steps h3 { font-size: 29px; }
  .evaluation-list { margin-top: 75px; }
  .evaluation-row { grid-template-columns: 35px 1fr; gap: 10px 15px; min-height: 0; padding: 28px 0; }
  .evaluation-row h3 { font-size: 30px; }
  .evaluation-row p { grid-column: 2; }
  .closing-section { padding-block: 99px 107px; }
  .closing-section h2 { margin: 43px 0 72px; font-size: clamp(72px, 15vw, 112px); }
  .closing-bottom { align-items: stretch; flex-direction: column; gap: 39px; }
  .closing-bottom p { font-size: 16px; }
  .document-link { min-width: 240px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .site-footer .footer-brand, .site-footer a { grid-column: 1 / -1; }
  .site-footer a { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal { opacity: 1; transform: none; filter: none; }
  .hero-art-inner { transform: none; }
  .segment { clip-path: none; }
  .flow-connector span { transform: none; }
  .method-steps::after { height: 100%; }
}