:root {
  --stone: #e7e6d5;
  --stone-deep: #dcdac6;
  --ink: #1b2919;
  --forest: #243322;
  --forest-2: #2f3b2c;
  --sage: #7d8c6a;
  --sage-soft: #a9ab98;
  --rust: #c9542d;
  --rust-soft: #e08a66;
  --rust-ink: #9c3d1b;
  --on-dark: #e7e6d5;
  --on-dark-2: #b9bda8;
  --display: 'Bebas Neue', 'Antonio', sans-serif;
  --label: 'Antonio', 'Arial Narrow', sans-serif;
  --text: 'Archivo', system-ui, sans-serif;
  --gutter: clamp(16px, 2.6vw, 36px);
  --u: calc(min(100vw, 1760px) / 100);
  --bar: calc(5.3 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--rust); color: var(--stone); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 60;
  background: var(--ink); color: var(--stone); padding: 10px 14px;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Hero: the drawing sheet ---------- */
.hero { container-type: inline-size; max-width: 1760px; margin: 0 auto; }
.hero-frame { position: relative; aspect-ratio: 1376 / 656; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--stone); border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.topbar.stuck { border-bottom-color: var(--ink); }
.topbar-inner { position: relative; max-width: 1760px; height: var(--bar); margin: 0 auto; }
section[id], header[id] { scroll-margin-top: var(--bar); }
.wordmark {
  position: absolute; left: calc(2.6 * var(--u)); top: calc(.5 * var(--u));
  font-family: var(--display); font-size: calc(4.65 * var(--u)); line-height: 1; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
}
.nav {
  position: absolute; right: calc(2.6 * var(--u)); top: calc(1.55 * var(--u));
  display: flex; gap: calc(2.35 * var(--u));
}
.nav a {
  font-family: var(--label); font-weight: 700; font-size: calc(1.5 * var(--u)); line-height: 1;
  text-transform: uppercase; letter-spacing: .01em; text-decoration: none; color: var(--ink);
  padding-bottom: calc(.25 * var(--u)); border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.nav a:hover { border-bottom-color: var(--rust); color: var(--rust-ink); }

.sheet-frame {
  position: absolute; left: 1.31cqw; top: 5.3cqw; width: 97.38cqw; height: 40.9cqw;
  border: 1.5px solid var(--ink);
}
.headline, .subline { z-index: 2; background: var(--stone); padding-right: .6cqw; }
.headline {
  position: absolute; left: 2.6cqw; top: 6.35cqw; margin: 0;
  font-family: var(--display); font-weight: 400; font-size: 4.83cqw; line-height: 1;
  letter-spacing: .005em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.subline {
  position: absolute; left: 2.6cqw; top: 11.9cqw; margin: 0;
  font-family: var(--text); font-size: 1.92cqw; line-height: 1.2; color: var(--ink);
}

.plan { position: absolute; left: 5.09cqw; top: 6.9cqw; width: 90.84cqw; height: 39.24cqw; margin: 0; }
.plan-img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.plan-labels { list-style: none; margin: 0; padding: 0; }
.plan-inner { position: absolute; inset: 0; }
.plan-hint { display: none; }
.lbl {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--label); font-weight: 700; font-size: 1.82cqw; line-height: 1;
  text-transform: uppercase; text-align: center; color: var(--ink);
  text-shadow: 0 0 .3cqw var(--stone), 0 0 .3cqw var(--stone), 0 0 .6cqw var(--stone);
  white-space: nowrap;
}
.lbl-early    { left: 16.6%; top: 70.9%; }
.lbl-academy  { left: 28.6%; top: 64.6%; }
.lbl-practice { left: 41.6%; top: 62.4%; }
.lbl-dyear    { left: 55.4%; top: 56.9%; }
.lbl-dcity    { left: 69.2%; top: 44.3%; }
.lbl-lifelong { left: 85%; top: 35.7%; }
.lbl-early, .lbl-practice, .lbl-dyear { white-space: normal; width: min-content; }

.path-note {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--r));
  font-family: var(--label); font-weight: 500; font-size: 1.05cqw; line-height: 1;
  text-transform: uppercase; letter-spacing: .06em; color: var(--rust-ink); white-space: nowrap;
}
.pn-1 { left: 27%; top: 83%; --r: -6deg; }
.pn-2 { left: 60.5%; top: 36%; --r: -27deg; }

.title-block {
  position: absolute; left: 86.63cqw; top: 36.3cqw; width: 11.05cqw; height: 9.1cqw;
  display: grid; grid-template-rows: repeat(3, 1fr);
  border: 1.5px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -0.45cqw;
  font-family: var(--label); font-weight: 700; font-size: 1.62cqw; line-height: 1;
  text-transform: uppercase; text-align: center; color: var(--ink); padding: .45cqw; background: var(--stone); box-shadow: -1.4cqw 0 0 var(--stone);
}
.title-block span { display: grid; place-items: center; border-top: 1px solid var(--ink); }
.title-block span:first-child { border-top: 0; }

/* Motion: the sheet is drawn, then the districts are named along the path. */
.js .plan-img { transition: clip-path 1.6s cubic-bezier(.16, 1, .3, 1); }
.js .lbl { transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(700ms + var(--i) * 140ms); }
.js .hero.pre .plan-img { clip-path: inset(0 100% 0 0); }
.js .hero.pre .lbl { opacity: 0; transform: translate(-50%, -30%); }
@media (prefers-reduced-motion: reduce) {
  .js .plan-img, .js .lbl { transition: none; }
}

/* ---------- Sections ---------- */
.band { padding: clamp(64px, 9vw, 128px) 0; }
.wrap { max-width: 1760px; margin: 0 auto; padding: 0 max(16px, min(2.6vw, 45.76px)); }
.section-title {
  margin: 0 0 .35em;
  font-family: var(--display); font-weight: 400; font-size: clamp(44px, 4.8vw, 66px); line-height: .95;
  text-transform: uppercase; letter-spacing: .01em; text-wrap: balance;
}
.lede { max-width: 56ch; font-size: clamp(18px, 1.45vw, 20px); margin: 0 0 2.2em; }

/* Cycle */
.band.cycle { padding-top: clamp(32px, 2.9vw, 44px); padding-bottom: clamp(56px, 6vw, 88px); }
.cycle { background: var(--ink); color: var(--on-dark); }
.cycle .section-title { color: var(--on-dark); }
.lede-on-dark { color: var(--on-dark-2); }
.loop {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(8, 1fr);
  position: relative;
}
.loop::before {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--rust);
}
.loop li { position: relative; padding-top: 40px; }
.loop li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--rust);
}
.loop li span {
  font-family: var(--label); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px);
  text-transform: uppercase; letter-spacing: .02em;
}
.js .loop li::before { transition: background-color .4s ease; transition-delay: calc(var(--n, 0) * 120ms); }
.js .loop.lit li::before { background: var(--rust); }
.loop-return { position: relative; margin: 10px 0 0; color: var(--rust); padding-top: 0; }
.return-wide { display: block; width: 100%; height: 56px; }
.return-tip { position: absolute; left: 0; top: -6px; }
.loop-return p {
  margin: 12px 0 0; font-family: var(--label); font-weight: 500; font-size: 18px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--rust-soft);
}

/* Idea */
.idea-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.question {
  margin: .4em 0 1.4em; padding: 0;
  font-family: var(--display); font-size: clamp(34px, 4.2vw, 60px); line-height: 1.02;
  text-transform: uppercase; color: var(--ink); max-width: 30ch; text-wrap: balance;
}
.question p { margin: 0; }
.idea-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.idea-body p { margin: 0 0 1.1em; max-width: 60ch; }
.capabilities {
  grid-column: 1 / -1; list-style: none; margin: 1.4em 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--ink);
}
.capabilities li {
  font-family: var(--label); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .02em;
  padding: 14px 12px 14px 0; border-bottom: 1px solid var(--sage-soft);
}

/* Districts schedule */
.districts { background: var(--stone-deep); }
.schedule { border: 1.5px solid var(--ink); }
.schedule .row {
  display: grid; grid-template-columns: 220px 190px 1fr; gap: 0;
  border-top: 1px solid var(--sage-soft);
}
.schedule .row:first-child { border-top: 0; }
.schedule .row > span { padding: 16px 18px; }
.schedule .row > span + span { border-left: 1px solid var(--sage-soft); }
.schedule .head { background: var(--ink); color: var(--stone); }
.schedule .head span { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; padding-top: 10px; padding-bottom: 10px; }
.schedule .d { font-family: var(--label); font-weight: 700; text-transform: uppercase; font-size: 21px; line-height: 1.15; }
.schedule .w { font-family: var(--label); font-weight: 500; text-transform: uppercase; font-size: 16px; color: var(--rust-ink); letter-spacing: .03em; }
.schedule .row:not(.head):hover { background: var(--stone); }

/* Detail */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.layers { list-style: none; margin: 0; padding: 0; counter-reset: layer; }
.layers li {
  font-family: var(--label); font-weight: 700; text-transform: uppercase; font-size: 20px;
  padding: 10px 0 10px 0; border-bottom: 1px solid var(--sage-soft); position: relative;
}
.layers li + li { padding-left: calc(var(--k, 1) * 28px); }
.layers li:nth-child(2) { --k: 1; } .layers li:nth-child(3) { --k: 2; } .layers li:nth-child(4) { --k: 3; }
.layers li + li::before {
  content: ""; position: absolute; left: calc(var(--k) * 28px - 22px); top: 50%;
  width: 14px; height: 14px; border-left: 2px solid var(--rust); border-bottom: 2px solid var(--rust); transform: translateY(-75%);
}
.steps { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--rust); counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 26px 34px; max-width: 52ch; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: ""; position: absolute; left: -10px; top: 7px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--stone); border: 3px solid var(--rust);
}
.steps b { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 19px; }

/* Evidence notes */
.evidence { border-top: 1.5px solid var(--ink); }
.notes { margin: 0; padding: 0; list-style: none; counter-reset: note; columns: 2; column-gap: 64px; }
.notes li { counter-increment: note; break-inside: avoid; position: relative; padding: 0 0 28px 44px; max-width: 60ch; }
.notes li::before {
  content: counter(note); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--label); font-weight: 700; font-size: 15px;
}
.notes b { display: block; font-family: var(--label); font-weight: 700; text-transform: uppercase; font-size: 19px; letter-spacing: .02em; margin-bottom: 4px; }

/* Close */
.close { background: var(--forest-2); color: var(--on-dark); }
.close-line {
  margin: 0; max-width: 34ch;
  font-family: var(--display); font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; text-transform: uppercase; text-wrap: balance;
}
.close-line em { font-style: normal; color: var(--rust-soft); }

/* Footer title strip */
.footer { background: var(--ink); color: var(--on-dark-2); }
.footer-grid {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 0; align-items: stretch;
  font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 14px;
}
.footer-grid > span { padding: 18px 20px; border-left: 1px solid rgba(231, 230, 213, .22); display: flex; align-items: center; }
.footer-grid > span:first-child { border-left: 0; padding-left: 0; }
.f-mark { font-family: var(--display); font-size: 30px; letter-spacing: .02em; color: var(--on-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .return-wide { display: none; }
  .return-tip { position: static; margin-left: 2px; }
  .loop-return p { margin-top: 8px; }
  .idea-body { grid-template-columns: 1fr; }
  .capabilities { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; gap: 48px; }
  .notes { columns: 1; }
  .loop { grid-template-columns: repeat(4, 1fr); row-gap: 28px; }
  .loop::before { display: none; }
  .loop li { border-top: 3px solid var(--rust); padding-top: 34px; }
  .loop li::before { top: -12px; }
}

@media (max-width: 860px) {
  :root { --bar: 56px; }
  .topbar-inner { height: var(--bar); }
  .wordmark { position: absolute; left: var(--gutter); top: 9px; font-size: 38px; }
  .nav { position: absolute; right: var(--gutter); top: 21px; gap: 14px; flex-wrap: nowrap; }
  .nav a { font-size: 13px; }
  .hero-frame { aspect-ratio: auto; padding: calc(var(--bar) + 4px) var(--gutter) 28px; display: flex; flex-direction: column; }
  .headline, .subline, .plan, .title-block, .sheet-frame { position: static; }
  .sheet-frame { display: none; }
  .headline { order: 2; margin-top: 30px; white-space: normal; font-size: clamp(44px, 12.5vw, 66px); line-height: .95; }
  .subline { order: 3; margin-top: 12px; font-size: 18px; }
  .plan { order: 4; width: auto; height: auto; margin: 26px calc(-1 * var(--gutter)) 0; overflow-x: auto; overscroll-behavior-x: contain; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); scrollbar-color: var(--rust) transparent; }
  .plan-inner { position: relative; width: 900px; aspect-ratio: 3168 / 1344; margin-top: -54px; }
  .plan { overflow-y: hidden; }
  .path-note { font-size: 10px; }
  .plan-img { height: 100%; }
  .plan-labels { position: absolute; inset: 0; }
  .lbl { font-size: 16px; }
  .plan-hint { display: block; order: 5; margin-top: 8px; font-family: var(--label); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--rust-ink); }
  .title-block { order: 6; width: auto; height: auto; margin-top: 14px; grid-template-rows: none; grid-template-columns: repeat(3, 1fr); font-size: 14px; outline: 0; padding: 0; }
  .title-block span { padding: 10px 6px; border-top: 0; border-left: 1px solid var(--ink); }
  .title-block span:first-child { border-left: 0; }
  .loop { grid-template-columns: 1fr; row-gap: 0; border-left: 3px solid var(--rust); margin-left: 9px; }
  .loop li { border-top: 0; padding: 0 0 22px 26px; }
  .loop li::before { top: 3px; left: -12px; }
  .loop-return { margin-top: 18px; }

  .capabilities { grid-template-columns: 1fr 1fr; }
  .capabilities li { font-size: 16px; }
  .schedule .row { grid-template-columns: 1fr; }
  .schedule .row > span + span { border-left: 0; padding-top: 0; }
  .schedule .head { display: none; }
  .schedule .d { padding-bottom: 4px; }
  .schedule .w { padding-bottom: 4px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > span { border-left: 0; padding-left: 0; }
}