@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo-fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 86%;
  descent-override: 20.5%;
  line-gap-override: 0%;
}

@property --board-cell {
  syntax: "<length>";
  inherits: true;
  initial-value: 72px;
}

:root {
  --ink-0: #0a0c11; --ink-1: #0f1219;
  --cream: #f2ede3; --cream-2: #a8a5a0; --cream-3: #8c8a87;
  --rule: rgba(242,237,227,.12); --rule-2: rgba(242,237,227,.24);
  --gold: #e6b34d; --gold-hi: #f2c566; --gold-lo: #cf9e3e; --miss: #d9826b; --miss-text: #e5a08c;
  --sq-light: #a8a193; --sq-dark: #706a5e;
  --hl-last: rgba(230,179,77,.30); --hl-dot: rgba(10,12,17,.32);
  --paper-2: #45423d; --paper-3: #5c5850; --paper-line: #676665; --paper-rule: rgba(10,12,17,.16);
  --paper-field: #f8f5ee; --paper-miss: #9e3b26;
  --sans: "Archivo", "Archivo-fallback", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --margin: clamp(20px, 3.34vw, 48px); --gutter: clamp(16px, 1.67vw, 24px);
  --board-cell: clamp(56px, 5.56vw, 80px);
  --nav-h: 72px;
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 600ms; --dur-4: 900ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 7h12.5M7.5 2l5 5-5 5'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 4l5 5 5-5'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--ink-0);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}
html.reduced, html.static-render { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--cream);
  font: 400 17px/1.55 var(--sans);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, dl, dd, ol, ul, figure, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, canvas { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--ink-0); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px; top: -120px;
  z-index: 300;
  padding: 14px 18px;
  background: var(--gold);
  color: var(--ink-0);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
}
.skip-link:focus { top: 12px; outline-color: var(--cream); }

.wrap {
  width: 100%;
  padding-inline: max(var(--margin), calc((100% - 1584px) / 2));
}

.display-xl {
  font: 500 clamp(52px, min(8.9vw, 14.5svh), 148px)/.94 var(--sans);
  letter-spacing: -.045em;
}
.display-l {
  font: 500 clamp(44px, 6.4vw, 104px)/.96 var(--sans);
  letter-spacing: -.04em;
  text-wrap: balance;
}
.display-m {
  font: 500 clamp(30px, 3.35vw, 56px)/1.04 var(--sans);
  letter-spacing: -.03em;
}
.display-s {
  font: 500 clamp(21px, 1.8vw, 28px)/1.2 var(--sans);
  letter-spacing: -.015em;
}
.body-l { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; letter-spacing: 0; }
.mono { font-family: var(--mono); }
.mono-label {
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mono-data {
  font: 400 14px/1.4 var(--mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.line > span { display: block; }

.tbd {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--rule-2);
  color: var(--cream-3);
  font: 400 11px/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: normal;
}
.paper .tbd { color: var(--paper-3); border-color: var(--paper-line); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 240px;
  height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: 600 15px/1 var(--sans);
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
}
.btn-primary { background: var(--gold); color: var(--ink-0); }
.btn-primary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn-primary:hover { background: var(--gold-hi); }
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary:active { background: var(--gold-lo); }
.btn-primary:focus-visible { outline-color: var(--cream); }
.btn-secondary { box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px rgba(242,237,227,.6); }
.btn-sm { min-width: 0; min-height: 44px; height: 44px; padding: 0 16px; gap: 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] { cursor: progress; }
.btn[aria-disabled="true"]::after { visibility: hidden; }
.btn-nav { position: relative; min-width: 0; height: 40px; padding: 0 16px; font-size: 13px; transition-duration: 200ms; }
.btn-nav::after { display: none; }
.btn-nav::before { content: ""; position: absolute; inset: -4px 0; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: text-decoration-color var(--dur-1);
}
.text-link:hover { text-decoration-color: var(--cream); }
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background-color 200ms, border-color 200ms;
}
.nav.is-filled { background: var(--ink-0); border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 100%; }
.nav-brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; color: var(--cream); }
.wordmark { height: 13px; width: calc(13px * 1228 / 104); fill: currentColor; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  color: var(--cream-2);
  text-decoration: none;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color var(--dur-1);
}
.nav-links a:hover { color: var(--cream); }

.label {
  margin-top: 24px;
  color: var(--cream-3);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label-sq { color: var(--cream); }
.rule { height: 1px; background: var(--rule); transform-origin: 0 50%; }

.spec-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--spec-key, 128px) minmax(0, 1fr);
  column-gap: var(--gutter);
  padding: 18px 0;
}
.spec-row::before,
.spec-row:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule);
}
.spec-row::before { top: 0; }
.spec-row:last-child::after { bottom: 0; }
.spec-key {
  padding-top: 3px;
  color: var(--cream-3);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spec-val { color: var(--cream-2); }
.spec-val.is-fact { color: var(--cream); }

.section { position: relative; padding-block: 160px; }
.section h2 { color: var(--cream); }
.label + h2 { margin-top: 24px; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(720px, 100svh);
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(242,237,227,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,237,227,.07) 1px, transparent 1px);
  background-size: var(--board-cell) var(--board-cell);
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 70% 46%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 70% at 70% 46%, #000 30%, transparent 75%);
}
.hero-copy { position: relative; z-index: 4; padding-top: 48px; margin-bottom: 56px; container-type: inline-size; }
.hero-title {
  max-width: calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter));
  font-size: clamp(44px, min(16svh, 9.6vw - 18px, ((100cqi - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)) / 6.7), 148px);
  color: var(--cream);
}
.hero-sub { max-width: 36em; margin-top: 32px; color: var(--cream-2); }
.nowrap { white-space: nowrap; }
.hero-record { margin-top: 24px; color: var(--cream-2); }
.hero-record li + li { margin-top: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 40px; }
.hero-cta::after { display: none; }
.hero-strip { position: relative; z-index: 4; }
.hero-strip-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  min-height: 64px;
  padding: 16px 0;
}
.hero-strip-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}
/* Each fact carries its own dot; the clip hides whichever dot starts a line. */
.hero-facts { margin-left: -2em; color: var(--cream-3); clip-path: inset(0 0 0 2em); }
.fact { display: inline-block; white-space: nowrap; }
.fact::before { content: "\00b7"; display: inline-block; width: 2em; text-align: center; }
.hero-strip .capacity { color: var(--cream-3); }

.capacity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-variant-numeric: tabular-nums; }
.capacity:empty { display: none; }
.capacity-marks { display: inline-flex; gap: 4px; }
.mark { width: 10px; height: 10px; }
.mark.is-taken { background: var(--cream-2); }
.mark.is-open { box-shadow: inset 0 0 0 1.5px var(--gold); }
.capacity-lg .capacity-marks { gap: 6px; }
.capacity-lg .mark { width: 16px; height: 16px; }
.paper .mark.is-taken { background: var(--ink-0); }
.paper .mark.is-open { box-shadow: inset 0 0 0 1.5px var(--ink-0); }

.curriculum { background: var(--ink-1); }
.curriculum .rule { background: var(--gold); }
.curriculum h2 { max-width: 14em; }
.curriculum-lede { max-width: 34em; margin-top: 32px; color: var(--cream); text-wrap: pretty; }
.curriculum-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px var(--gutter); margin-top: 96px; }
.curriculum-item { padding-top: 24px; border-top: 1px solid var(--rule-2); }
.curriculum-num {
  color: var(--gold);
  font: 400 clamp(56px, 5.56vw, 88px)/1 var(--mono);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.curriculum-name { margin-top: 40px; color: var(--cream); }
.curriculum-text { max-width: 22em; margin-top: 12px; color: var(--cream-2); text-wrap: pretty; }
.curriculum-close { margin-top: 80px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--cream); }

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 48px;
}
.teacher-photos {
  --now: clamp(132px, 12.2vw, 176px);
  --hang: 72px;
  --drop: 72px;
  grid-column: 1 / 6;
  align-self: start;
  position: relative;
  margin-right: calc(-1 * var(--hang));
  padding: 0 var(--hang) var(--drop) 0;
}
.photo { margin: 0; }
.photo img { width: 100%; height: auto; background: var(--ink-1); }
.photo-then img { aspect-ratio: 336 / 448; max-width: 672px; }
.photo-now { position: absolute; right: 0; bottom: 0; width: var(--now); }
.photo-now img { aspect-ratio: 1; border: 6px solid var(--ink-0); }
.photo-caption {
  margin-top: 12px;
  color: var(--cream-3);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.photo-then .photo-caption { max-width: calc(100% - var(--now) + var(--hang) - 16px); }
.photo-now .photo-caption { padding-left: 6px; }
.teacher-main { grid-column: 7 / 13; }
.teacher-main .spec { margin-top: 64px; }
.teacher-body { max-width: 34em; margin-top: 48px; color: var(--cream-2); }
.signature { margin-top: 24px; color: var(--cream); }

.approach-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin-top: 24px;
}
.approach-head > h2 { grid-column: 1 / 7; }
.approach-head > .approach-lede { grid-column: 7 / 13; margin-top: 0; }
.approach-why { margin: 64px 0 0 calc(50% + var(--gutter) / 2); }
.approach-why-label { color: var(--cream); }
.approach-why-body { max-width: 34em; margin-top: 12px; color: var(--cream-2); text-wrap: pretty; }
.subject-sub, .approach-lede { max-width: 30em; margin-top: 24px; color: var(--cream-2); text-wrap: pretty; }
.subject-note { margin-top: 24px; color: var(--cream-2); }
.subject-note-key { white-space: nowrap; }
.subject .puzzle { margin-top: 128px; }
.puzzle > .puzzle-fallback { grid-column: 1 / -1; max-width: 40em; }
.puzzle-fallback > * + * { margin-top: 12px; }
.puzzle-fallback .puzzle-prompt { margin-top: 16px; color: var(--cream); }
.puzzle-position { color: var(--cream-2); font: 400 14px/1.6 var(--mono); letter-spacing: .02em; }
.puzzle-answer { margin-top: 24px; color: var(--cream-2); }
.puzzle-answer summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--cream);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 5px;
}
.puzzle-answer p { margin-top: 8px; max-width: 40em; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px var(--gutter);
  margin-top: 80px;
}
.step { padding-top: 20px; border-top: 1px solid var(--rule-2); }
.step-key { color: var(--cream); }
.step-text { max-width: 28em; margin-top: 12px; color: var(--cream-2); text-wrap: pretty; }

.formats {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  margin-top: 128px;
}
.format, .format-row { display: contents; }
.format-name { grid-row: 1; padding: 0 var(--gutter) 16px 0; color: var(--cream); }
.format-row > * { padding: 18px var(--gutter) 18px 0; border-top: 1px solid var(--rule); }
.format-row[data-row="tuition"] > * { border-bottom: 1px solid var(--rule); }
.format-row .spec-val { text-wrap: pretty; }
.format-row[data-row="practice"] .spec-val { text-wrap: balance; }
[data-format="online"] > .format-name, [data-format="online"] .spec-val { grid-column: 2; }
[data-format="in-person"] > .format-name, [data-format="in-person"] .spec-val { grid-column: 3; }
[data-format="online"] .spec-key { grid-column: 1; }
[data-format="in-person"] .spec-key {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  padding: 0;
  border: 0;
}
[data-row="lesson"] > * { grid-row: 2; }
[data-row="schedule"] > * { grid-row: 3; }
[data-row="where"] > * { grid-row: 4; }
[data-row="practice"] > * { grid-row: 5; }
[data-row="tuition"] > * { grid-row: 6; }
.price { color: var(--cream); font-variant-numeric: tabular-nums lining-nums; }
.per { color: var(--cream-3); }
.price-note, .towns { display: block; margin-top: 8px; color: var(--cream-3); font-size: 13px; }
.towns { max-width: 34em; line-height: 1.6; }

.first-call { padding: 24px 0 24px 25%; border-bottom: 1px solid var(--rule); }
.first-call-line { color: var(--cream); }
.first-call-note { margin-top: 8px; color: var(--cream-2); }
.first-call-note .inline-link { display: inline-block; padding-block: 10px; margin-block: -10px; }
.get { margin: 64px 0 40px; padding-left: 25%; }
.get-label { color: var(--cream); }
.get-list { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); margin-top: 16px; }
.get-list li { padding: 16px var(--gutter) 16px 0; border-top: 1px solid var(--rule); color: var(--cream-2); text-wrap: pretty; }
.get-list strong { color: var(--cream); font-weight: 500; }
.smallprint { margin-top: 24px; padding-left: 25%; color: var(--cream-3); }
.smallprint li + li { margin-top: 8px; }
.tuition-capacity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-left: 25%;
  color: var(--cream-2);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 48px;
}
.faq-head { grid-column: 1 / 5; align-self: start; position: sticky; top: 112px; }
.faq-list { grid-column: 6 / 13; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 16px;
  padding: 24px 0;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
}
.faq-item summary > span { text-wrap: balance; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  justify-self: end;
  color: var(--cream-3);
  font: 400 18px/1 var(--mono);
  transition: color var(--dur-1);
}
.faq-item summary:hover::after { color: var(--cream); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { max-width: 60ch; padding-bottom: 28px; color: var(--cream-2); text-wrap: pretty; }
.faq-item .tbd { margin-top: 4px; }

.paper { background: var(--cream); color: var(--ink-0); color-scheme: light; }
.paper :focus-visible { outline-color: var(--ink-0); }
.paper .section h2, .paper h2 { color: var(--ink-0); }
.request-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.request-intro { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--nav-h) + 48px); }
.request-main { grid-column: 6 / 12; }
.request-sub { margin-top: 24px; color: var(--paper-2); }
.request-note { max-width: 24em; margin-top: 16px; color: var(--paper-2); }
.request-intro .capacity { margin-top: 32px; color: var(--paper-3); }
.preview-strip { margin-bottom: 32px; padding: 12px 16px; border: 1px solid var(--ink-0); color: var(--ink-0); }
.noscript-line { margin-bottom: 24px; color: var(--paper-2); }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); }
.form > * { grid-column: 1 / -1; }
.form > .field-half { grid-column: span 1; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); }
.field { scroll-margin-top: calc(var(--nav-h) + 16px); }
.field-label {
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 8px;
  color: var(--paper-2);
  font: 500 15px/1.3 var(--sans);
}
.field-label + * { clear: both; }
.field input:not([type="radio"]),
.field select,
.field textarea {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--paper-line);
  border-radius: 0;
  background: var(--paper-field);
  color: var(--ink-0);
  font: 400 16px/1.3 var(--sans);
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--paper-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ink-0);
  box-shadow: inset 0 0 0 1px var(--ink-0);
  outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--paper-miss); }
.select { position: relative; }
.select select { padding-right: 44px; cursor: pointer; }
.select::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  background: var(--ink-0);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  pointer-events: none;
}
.chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.chip { position: relative; display: flex; min-width: 0; }
.chip + .chip { margin-left: -1px; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  box-shadow: inset 0 0 0 1px var(--paper-line);
  color: var(--paper-2);
  font: 400 15px/1.25 var(--sans);
  text-align: center;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.chip:hover span { color: var(--ink-0); }
.chip input:checked + span { position: relative; z-index: 1; background: var(--ink-0); box-shadow: inset 0 0 0 1px var(--ink-0); color: var(--cream); font-weight: 600; }
.chip input:focus-visible + span { position: relative; z-index: 2; outline: 2px solid var(--ink-0); outline-offset: 2px; }
.field[data-invalid] .chip span { box-shadow: inset 0 0 0 1px var(--paper-miss); }
.field-hint, .field-note, .field-count { margin-top: 8px; color: var(--paper-3); font-size: 15px; line-height: 1.45; }
.field-count { font-size: 13px; }
.field-error { margin-top: 8px; color: var(--paper-miss); font-size: 15px; line-height: 1.45; }
.field-error::before { content: "! "; font-weight: 600; }
.link-button {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-0);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.field-note .link-button { padding: 10px 0; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-submit { margin-top: 8px; }
.paper .btn-primary { box-shadow: inset 0 0 0 1px var(--ink-0); }
.paper .btn-primary:focus-visible { outline-color: var(--ink-0); }
.form-alert { margin-top: 12px; color: var(--paper-miss); font-size: 15px; }
.form-alert a { color: inherit; }
.form-smallprint { max-width: 60ch; margin-top: 16px; color: var(--paper-3); font-size: 15px; line-height: 1.5; text-wrap: balance; }
.form-smallprint + .form-smallprint { margin-top: 8px; }

.request-done:focus { outline: none; }
.request-done:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 8px; }
.done-preview { margin-bottom: 32px; padding: 12px 16px; border: 1px solid var(--ink-0); }
.done-summary { margin-top: 24px; color: var(--paper-3); }
.done-body { margin-top: 24px; color: var(--ink-0); }
.done-again { margin-top: 12px; }
.done-steps { margin-top: 40px; }
.done-steps .spec-row::before, .done-steps .spec-row:last-child::after { background: var(--paper-rule); }
.done-steps .spec-key { color: var(--ink-0); }
.done-steps .spec-val { color: var(--paper-2); }
.done-from { margin-top: 24px; color: var(--paper-2); }
.done-aside { margin-top: 32px; color: var(--paper-3); }
.request-done .signature { color: var(--ink-0); }

.footer { padding: 64px 0 48px; border-top: 1px solid var(--rule); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px var(--gutter);
  align-items: start;
}
.footer-marks { display: flex; align-items: center; gap: 14px; color: var(--cream); }
.knight-mark { width: 18px; height: 20px; fill: var(--gold); }
.footer-line { margin-top: 16px; color: var(--cream-2); font-size: 15px; }
.footer-cell { color: var(--cream-3); }
.footer-cell a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-underline-offset: 4px;
}
.footer-cell a:hover { color: var(--cream); }

@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: none; } }
html.js:not(.static-render):not(.reduced) .hero-title .line > span { animation: rise var(--dur-4) var(--ease-out) 200ms both; }
html.js:not(.static-render):not(.reduced) .hero-title .line + .line > span { animation-delay: 290ms; }
html.js:not(.static-render):not(.reduced) .hero-title .line + .line + .line > span { animation-delay: 380ms; }
html.js:not(.static-render):not(.reduced) .hero-strip-inner::before { animation: draw 700ms var(--ease-out) 800ms both; }
.rule.is-armed { transform: scaleX(0); }
.rule.is-armed.is-in { transform: none; transition: transform var(--dur-3) var(--ease-out); }
[data-rise].is-armed .line > span { transform: translateY(110%); }
[data-rise].is-armed.is-in .line > span { transform: none; transition: transform var(--dur-4) var(--ease-out); }
[data-rise].is-armed.is-in .line + .line > span { transition-delay: 90ms; }

html.reduced .btn, html.reduced .btn::after, html.reduced .nav,
html.static-render .btn, html.static-render .btn::after, html.static-render .nav { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn::after, .nav, .chip span, .text-link { transition: none; }
  .hero-title .line > span, .hero-strip-inner::before { animation: none !important; }
}

@media (max-width: 1279px) {
  .section { padding-block: 128px; }
  .hero-sub { max-width: 34em; }
}

@media (max-width: 1023px) {
  .teacher-grid { display: flex; flex-direction: column; margin-top: 16px; }
  .teacher-main { display: contents; }
  .teacher-main > h2 { order: -1; }
  .teacher-photos { width: 100%; max-width: 560px; margin: 32px 0 0; }
  .faq-grid, .request-grid { display: block; }
  .faq-head, .request-intro { position: static; }
  .faq-list { margin-top: 48px; }
  .request-main { margin-top: 48px; }
  .first-call, .get, .smallprint, .tuition-capacity { padding-left: 0; }
  .curriculum-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 80px; }
  .approach-why { margin: 48px 0 0; }
  .approach-head { display: block; }
  .approach-head > .approach-lede { margin-top: 24px; }
}

@media (max-width: 899px) {
  .nav-links { display: none; }
}

@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  body { font-size: 16px; }
  .wordmark { height: 11px; width: calc(11px * 1228 / 104); }
  .btn-nav { height: 36px; padding: 0 14px; }
  .btn { min-width: 0; }
  .mono-label, .label, .spec-key, .text-link, .nav-links a { font-size: 11px; }
  .mono-data { font-size: 13px; }
  .section { padding-block: 96px; }
  .label + h2 { margin-top: 16px; }

  .hero { min-height: 100svh; }
  .hero-copy { padding-top: 24px; margin-bottom: 0; }
  .hero-title { max-width: none; font-size: min(52px, 100cqi / 6.8); }
  .hero-sub { margin-top: 20px; }
  .hero-actions { display: block; margin-top: 28px; }
  .hero-actions .btn-primary { display: flex; width: 100%; }
  .hero-actions .text-link { margin-top: 4px; }
  .hero-strip { margin-top: 16px; }
  .hero-strip-inner { display: block; padding: 16px 0 24px; }
  .hero-strip .capacity { margin-top: 6px; }
  .hero-grid {
    -webkit-mask-image: radial-gradient(ellipse 70% 45% at 60% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 45% at 60% 30%, #000 30%, transparent 75%);
  }

  .spec-row { --spec-key: 104px; padding: 16px 0; column-gap: 16px; }
  .teacher-main .spec { margin-top: 48px; }
  .teacher-photos { --now: 112px; --hang: 40px; --drop: 40px; }
  .photo-now img { border-width: 4px; }
  .photo-now .photo-caption { padding-left: 4px; }
  .approach-head { margin-top: 16px; }
  .curriculum-lede { margin-top: 24px; }
  .curriculum-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 56px; }
  .curriculum-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 20px 0 24px; }
  .curriculum-num { grid-row: 1 / 3; font-size: 40px; }
  .curriculum-name { margin-top: 0; }
  .curriculum-text { margin-top: 8px; }
  .curriculum-close { margin-top: 32px; }
  .subject-note-key { display: block; margin-bottom: 4px; color: var(--cream-3); }
  .subject-note-sep { display: none; }
  .subject .puzzle { margin-top: 80px; }

  .steps { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .formats { display: block; margin-top: 80px; }
  .format { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
  .format + .format { margin-top: 48px; }
  .format-name { order: -3; padding: 0 0 12px; }
  .format-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
  }
  .formats .format .format-row > * { grid-column: auto; grid-row: auto; padding: 0; border: 0; }
  .format-tuition { order: -2; }
  .format-row[data-row="practice"] { order: -1; }
  [data-format="in-person"] .spec-key { position: static; width: auto; height: auto; overflow: visible; clip: auto; padding-top: 3px; }
  .formats .format .format-tuition { grid-template-columns: minmax(0, 1fr); }
  .formats .format .format-tuition > .spec-key { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .first-call { margin-top: 48px; padding: 0 0 16px; }
  .first-call-line { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
  .first-call-note { margin-top: 16px; }
  .get { margin-top: 48px; }
  .get-list { grid-template-columns: minmax(0, 1fr); }
  .get-list li { padding-right: 0; }
  .tuition-capacity { flex-direction: column; align-items: stretch; margin-top: 48px; padding-left: 0; }
  .tuition-capacity .btn { display: flex; width: 100%; }

  .form { grid-template-columns: minmax(0, 1fr); }
  .form > .field-half { grid-column: 1 / -1; }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .chips-2 .chip span { padding-inline: 6px; font-size: 14px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Email addresses keep their real case, even inside uppercase labels. */
.email-link { text-transform: none; letter-spacing: 0; }