:root {
  --ink: #000000;
  --paper: #FFFFFF;
  --green: #00FF00;
  --magenta: #FF00FF;
  --blue: #0000FF;
  --red: #FF0000;
  --yellow: #FFFF00;
  --grey: #808080;
  --accent: var(--green);
  --accent-ink: var(--ink);
  --space: 8px;
  --outline: 3px solid var(--ink);
  --corner: 0px;
  --grid-width: 1280px;
  --gutter: 1.5rem;
  --measure: 72ch;
  --reading-font: "STIX Two Text", Georgia, serif;
  --display-font: "PT Serif", Georgia, serif;
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/pt-serif-bold.woff") format("woff");
}

@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/stix-two-text.woff") format("woff");
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--reading-font); font-size: 1rem; font-weight: 400; line-height: 1.6; }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a, button, label { -webkit-tap-highlight-color: var(--yellow); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display-font); font-weight: 700; }
button, a { touch-action: manipulation; }
button { border-radius: var(--corner); }
[hidden] { display: none !important; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 5px; }
::selection { background: var(--yellow); color: var(--ink); }
.workbook--yellow { --accent: var(--yellow); }
.workbook--magenta { --accent: var(--magenta); }
.workbook--blue { --accent: var(--blue); --accent-ink: var(--paper); }

.workbook__skip { position: fixed; z-index: 10; top: var(--space); left: var(--space); padding: 12px 16px; background: var(--yellow); border: var(--outline); transform: translateY(-180%); min-height: 44px; }
.workbook__skip:focus { transform: translateY(0); }
.masthead { display: flex; flex-wrap: wrap; gap: var(--space) calc(var(--space) * 3); justify-content: space-between; max-width: var(--grid-width); margin: 0 auto; padding: calc(var(--space) * 3) var(--gutter); border-bottom: var(--outline); }
.masthead__name { font-family: var(--display-font); font-weight: 700; }
.masthead__kind { border-left: var(--outline); padding-left: calc(var(--space) * 2); }
.workbook__main { max-width: var(--grid-width); padding: 0 var(--gutter) calc(var(--space) * 7); margin: 0 auto; }
.opening { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(var(--space) * 6); align-items: center; padding: calc(var(--space) * 7) 0 calc(var(--space) * 5); }
.opening__copy { min-width: 0; }
.opening__label { display: inline-block; padding: var(--space) calc(var(--space) * 2); border: var(--outline); background: var(--accent); color: var(--accent-ink); margin-bottom: calc(var(--space) * 3); font-family: var(--display-font); font-weight: 700; }
.opening__title { font-size: clamp(2.5rem, 4.45vw, 4rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 17ch; overflow-wrap: break-word; }
.opening__intro { max-width: 58ch; margin-top: calc(var(--space) * 3); }
.workbook__principle { display: block; max-width: fit-content; background: var(--ink); color: var(--paper); border: var(--outline); padding: calc(var(--space) * 2) calc(var(--space) * 3); font-family: var(--display-font); font-weight: 700; }
.workbook__action { display: inline-flex; align-items: center; gap: calc(var(--space) * 3); min-height: 56px; padding: calc(var(--space) * 2) calc(var(--space) * 3); margin-top: calc(var(--space) * 2); border: var(--outline); box-shadow: 6px 6px 0 var(--ink); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.workbook__action:hover { background: var(--yellow); color: var(--ink); }

.geometry { position: relative; width: 100%; min-height: 256px; background: var(--paper); }
.geometry__frame { position: absolute; inset: 0 8% 8% 0; border: 4px solid var(--ink); background: var(--accent); }
.geometry__block { position: absolute; width: 42%; height: 46%; bottom: 0; right: 0; border: 4px solid var(--ink); background: var(--yellow); box-shadow: -8px -8px 0 var(--paper); }
.geometry__bar { position: absolute; top: 24%; width: 76%; height: 24px; left: 12%; border: 4px solid var(--ink); background: var(--paper); transform: rotate(-8deg); }
.geometry__grid { position: absolute; height: 64px; width: 96px; left: 12%; bottom: 17%; border: 4px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 8px, var(--paper) 8px, var(--paper) 16px); }
.workbook__sheets { margin-top: calc(var(--space) * 6); }
.sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 4px solid var(--ink); margin-top: calc(var(--space) * 4); padding-top: calc(var(--space) * 3); gap: calc(var(--space) * 5); }
.sheet__heading { font-size: 1.75rem; line-height: 1.2; max-width: 20ch; overflow-wrap: break-word; padding: 0 calc(var(--space) * 2) calc(var(--space) * 2) 0; }
.sheet__body { min-width: 0; max-width: var(--measure); padding-bottom: calc(var(--space) * 2); }
.sheet__text + .sheet__text { margin-top: calc(var(--space) * 2); }
.question { border: var(--outline); box-shadow: 6px 6px 0 var(--accent); padding: calc(var(--space) * 2) calc(var(--space) * 3); margin: calc(var(--space) * 3) 8px var(--space) 0; background: var(--paper); }
.question__label { font-family: var(--display-font); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.055em; }
.question__text { margin-top: var(--space); }
.reading { border-left: 8px solid var(--accent); margin-top: calc(var(--space) * 3); padding-left: calc(var(--space) * 2); }
.reading__eyebrow { font-family: var(--display-font); font-weight: 700; }
.reading__link { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space) * 2); min-height: 48px; padding: var(--space) 0; color: var(--blue); }
.reading__link:hover { background: var(--yellow); color: var(--ink); }
.reading__note { max-width: 66ch; }
.routes { margin-top: calc(var(--space) * 7); }
.routes__heading { border: var(--outline); padding: calc(var(--space) * 2) calc(var(--space) * 3); background: var(--yellow); font-size: 2rem; line-height: 1.2; }
.routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.routes__tile { min-height: 160px; padding: calc(var(--space) * 3); border: var(--outline); margin-top: -3px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space); text-decoration: none; }
.routes__tile:hover { background: var(--green); }
.routes__tile:focus-visible { position: relative; z-index: 1; }
.routes__label { text-decoration: underline; font-family: var(--display-font); font-weight: 700; }
.routes__title { max-width: 32ch; }
.routes__arrow { align-self: flex-end; font-size: 1.5rem; line-height: 1.2; }
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--space) * 2); border-top: 4px solid var(--ink); padding-top: calc(var(--space) * 3); margin-top: calc(var(--space) * 5); }
.next__link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: calc(var(--space) * 2); border: var(--outline); }
.next__link--forward { background: var(--accent); color: var(--accent-ink); }
.next__link:hover { background: var(--yellow); color: var(--ink); }
.footer { max-width: var(--grid-width); margin: 0 auto; padding: calc(var(--space) * 4) var(--gutter); border-top: 4px solid var(--ink); }
.footer__purpose { max-width: var(--measure); }
.footer__links { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 3); }
.footer__link { display: inline-flex; align-items: center; min-height: 48px; padding: var(--space) calc(var(--space) * 2); border: var(--outline); }
.footer__link:hover { background: var(--yellow); }

.print-tools { margin-top: calc(var(--space) * 3); }
.print-tools__button { cursor: pointer; min-height: 56px; border: var(--outline); background: var(--green); color: var(--ink); padding: calc(var(--space) * 2) calc(var(--space) * 3); box-shadow: 6px 6px 0 var(--ink); font-family: var(--display-font); font-weight: 700; }
.print-tools__button:hover { background: var(--yellow); }
.print-tools__status { margin-top: calc(var(--space) * 2); }
.worksheet { margin-top: calc(var(--space) * 3); }
.worksheet__check { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: calc(var(--space) * 2); min-height: 64px; padding: var(--space) 0; border-top: 2px solid var(--ink); cursor: pointer; }
.worksheet__check:hover { background: var(--yellow); }
.worksheet__box { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border: var(--outline); border-radius: var(--corner); background: var(--paper); color: var(--ink); cursor: pointer; }
.worksheet__box:checked { background: var(--green); }
.worksheet__box:checked::after { content: "✓"; font-family: var(--display-font); font-size: 1.75rem; line-height: 1; }
.worksheet__notes { margin-top: calc(var(--space) * 3); font-family: var(--display-font); font-weight: 700; }
.worksheet__writing-space { height: 104px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--grey) 31px, var(--grey) 32px); }

@media (max-width: 800px) {
  .opening { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: calc(var(--space) * 3); }
  .geometry { min-height: 208px; }
  .sheet { grid-template-columns: minmax(0, 1fr); gap: var(--space); }
  .sheet__heading { max-width: 30ch; }
  .routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .masthead { align-items: flex-start; }
  .masthead__kind { padding-left: 0; border-left: 0; }
  .opening { grid-template-columns: minmax(0, 1fr); gap: calc(var(--space) * 3); padding-top: calc(var(--space) * 4); }
  .opening__title { max-width: 16ch; }
  .geometry { min-height: 120px; }
  .geometry__frame { inset: 0 14% 8% 0; }
  .geometry__block { width: 28%; height: 58%; }
  .geometry__bar { height: 16px; top: 26%; }
  .geometry__grid { width: 64px; height: 40px; left: 16%; bottom: 10%; }
  .workbook__principle { padding: calc(var(--space) * 2); max-width: 100%; }
  .workbook__sheets { margin-top: calc(var(--space) * 4); }
  .sheet { margin-top: calc(var(--space) * 3); }
  .sheet__heading { font-size: 1.625rem; }
  .question { padding: calc(var(--space) * 2); }
  .routes__grid, .next { grid-template-columns: minmax(0, 1fr); }
  .routes__tile { min-height: 144px; }
  .routes__heading { font-size: 1.625rem; padding: calc(var(--space) * 2); }
  .footer__links { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media print {
  @page { margin: 16mm; }
  :root { --accent: var(--ink); --accent-ink: var(--paper); }
  html { font-size: 12pt; }
  body { background: var(--paper); color: var(--ink); line-height: 1.4; }
  .workbook__skip, .geometry, .print-tools, .next, .routes, .footer__links, .workbook__action { display: none !important; }
  .masthead { padding: 0 0 12px; }
  .workbook__main, .footer { padding: 0; max-width: none; }
  .opening { display: block; padding: 16px 0; }
  .opening__label { padding: 0; border: 0; margin-bottom: 8px; background: transparent; color: var(--ink); }
  .opening__title { font-size: 28pt; max-width: none; }
  .opening__intro { max-width: none; margin-top: 12px; }
  .workbook__principle { color: var(--ink); background: transparent; box-shadow: none; padding: 12px; }
  .workbook__sheets { margin-top: 24px; }
  .sheet { display: block; margin-top: 20px; padding-top: 12px; }
  .sheet__heading { font-size: 18pt; max-width: none; padding: 0 0 8px; break-after: avoid; }
  .sheet__body { max-width: none; }
  .question { box-shadow: none; break-inside: avoid; }
  .reading { break-inside: avoid; }
  .reading__link { color: var(--ink); }
  .workbook--print .sheet { break-inside: avoid; }
  .worksheet__check { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; min-height: 36px; padding: 6px 0; break-inside: avoid; }
  .worksheet__box { width: 24px; height: 24px; border-width: 2px; background: var(--paper) !important; color: var(--ink); }
  .worksheet__box:checked::after { font-size: 16pt; }
  .worksheet__writing-space { height: 72px; background: none; border-top: 1px solid var(--grey); border-bottom: 1px solid var(--grey); margin: 12px 0; }
  .footer { margin-top: 24px; padding-top: 12px; }
}