/* selfhost-fonts:start */
/* Self-hosted Google Fonts (SIL OFL / Apache 2.0). Files live in /fonts/. Regenerate with scripts/selfhost_fonts.py. */
/* source: css2?family=Lexend:wght@400;500;600;700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap */
/* latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin-ext.08189e4f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin.da864895.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin-ext.08189e4f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin.da864895.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin-ext.08189e4f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin.da864895.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin-ext.08189e4f.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/lexend-normal-400-700-latin.da864895.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/merriweather-italic-400-latin-ext.2e014210.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/merriweather-italic-400-latin.133a4c71.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/merriweather-normal-400-700-latin-ext.5e4915fc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/merriweather-normal-400-700-latin.6d0fa428.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/merriweather-normal-400-700-latin-ext.5e4915fc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/merriweather-normal-400-700-latin.6d0fa428.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* selfhost-fonts:end */

/* landman.training. Concept: the exam blue book and the syllabus.
   The page opens on the front cover of a blue book (a printed label, a stapled spine,
   a pencil) and closes on the back cover. In between, the lessons read like a syllabus
   and the practice exam is a ruled blue book page, answered by filling in bubbles.
   Lexend for the printed book and the UI; Merriweather for reading.
   Pencil yellow is only ever a fill (highlights, bubbles, buttons), never text. */

:root {
  --cover: #85afe0;
  --cover-deep: #4f7fbd;
  --navy: #1c3a66;
  --ink: #15203a;
  --graphite: #4a505c;
  --paper: #ffffff;
  --wash: #eef4fb;
  --rule: #bcd2ec;
  --rule-2: #7fa6d6;
  --pencil: #f4c02f;
  --pencil-soft: #fbe39a;
  --pencil-light: #f8d767;
  --pencil-dark: #d9a211;
  --wood: #efd5a2;
  --lead: #2b2f36;
  --staple: #e4ebf3;
  --pitch: 2.5rem;
  --sans: 'Lexend', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --wrap: 1140px;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 21.5c2.6-1 4.6.2 6.4 2.2l3.8 4.6C21 18.6 27.4 11 34.6 5.4' fill='none' stroke='%231c3a66' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 8.5c7.5 6.8 14.6 15 22.4 23.6M31.5 8C24 15.4 16.2 23.6 8.6 32.4' fill='none' stroke='%231c3a66' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none'%3E%3Cpath d='M30 58C9 51 5 29 30 16 64 1 150 3 182 17c20 9 18 30-8 38-38 12-118 11-150 0C3 48 4 28 22 19c12-6 28-9 44-10' fill='none' stroke='%231c3a66' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (min-width: 900px) { html { scroll-padding-top: 88px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.75 var(--serif);
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); background: var(--pencil-soft); }
a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--sans); color: var(--ink); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.05rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.3vw, 2.35rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
h1, h2 { text-wrap: balance; }
p { margin: 0 0 1em; }
b, strong { font-weight: 700; }
mark { background: var(--pencil-soft); color: inherit; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--navy); color: #fff; font: 600 1rem var(--sans); text-decoration: none; }
.skip-link:focus { left: 0; color: #fff; }

/* Buttons: printed rectangles, no arrows */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 22px; border: 2px solid transparent; border-radius: 0; font: 600 1rem/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; }
.btn-ink { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-ink:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-line { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-line:hover { background: var(--wash); color: var(--ink); }
.btn-pencil { background: var(--pencil); border-color: var(--ink); color: var(--ink); }
.btn-pencil:hover { background: var(--pencil-light); color: var(--ink); }
.btn-paper { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.btn-paper:hover { background: var(--wash); color: var(--ink); }
.btn:disabled { opacity: .65; cursor: wait; }

/* Header: the syllabus running head */
.head { background: var(--paper); border-bottom: 3px double var(--navy); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { background: none; color: var(--ink); }
.mark { width: 36px; height: 36px; flex: none; }
.mark-cover { fill: var(--cover); stroke: var(--navy); stroke-width: 1.5; stroke-linejoin: round; }
.mark-spine { fill: var(--navy); }
.mark-line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.brand-word { font: 600 1.35rem/1 var(--sans); letter-spacing: -.01em; }
.brand-word span { color: var(--navy); font-weight: 500; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; font: 500 .98rem/1.2 var(--sans); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; padding: 0 2px; }
.nav a:hover { background: none; box-shadow: inset 0 -3px 0 var(--pencil); }
.nav .nav-cta { background: var(--navy); color: #fff; padding: 0 16px; }
.nav .nav-cta:hover { background: var(--ink); color: #fff; box-shadow: inset 0 -4px 0 var(--pencil); }
.n-short { display: none; }
@media (min-width: 900px) { .head { position: sticky; top: 0; z-index: 30; } }
@media (max-width: 600px) {
  .head-row { padding-top: 6px; padding-bottom: 4px; }
  .nav { width: 100%; justify-content: space-between; gap: 0 10px; font-size: .95rem; }
  .nav .n-faq { display: none; }
  .n-long { display: none; }
  .n-short { display: inline; }
  .nav .nav-cta { padding: 0 14px; }
}

/* Front cover: the hero */
.cover { position: relative; overflow: hidden; background: var(--cover); padding: 44px 0 56px; }
.cover::before, .back::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px;
  background:
    linear-gradient(var(--staple), var(--staple)) 3px 26% / 12px 3px no-repeat,
    linear-gradient(var(--staple), var(--staple)) 3px 74% / 12px 3px no-repeat,
    var(--cover-deep);
}
.cover-grid { display: grid; gap: 30px; align-items: start; }
@media (min-width: 980px) { .cover-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 52px; align-items: stretch; } }
.label { background: var(--paper); border: 2px solid var(--navy); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--navy); padding: 26px 32px 24px; }
.label-top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--navy); font: 600 .8rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.label h1 { margin-bottom: 16px; }
.lead { font-size: 1.1rem; line-height: 1.7; max-width: 36em; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 26px; }
.fields { margin: 0; border-top: 2px solid var(--navy); font-family: var(--sans); }
.fields div { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); align-items: end; gap: 2px 14px; padding: 12px 0 5px; border-bottom: 1px solid var(--rule-2); }
.fields dt { font: 600 .78rem/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.fields dd { margin: 0; font: 400 1rem/1.5 var(--sans); }
.cover-side { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; font-family: var(--sans); padding-top: 6px; }
.cover-foot { position: relative; padding-bottom: 6px; }
.name-line { display: flex; align-items: flex-end; gap: 12px; margin: 0; font: 700 .82rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.name-line::after { content: ""; flex: 1; height: 0; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.cover-note-h { font: 700 .82rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.instructions { margin: 0; padding: 0 0 0 1.3em; font: 400 1.02rem/1.6 var(--sans); }
.instructions li { margin-bottom: 12px; padding-left: 6px; }
.instructions li::marker { font-weight: 700; }
.pencil { display: block; width: 100%; max-width: 420px; height: auto; margin: 16px 0 0 10%; transform: rotate(-7deg); transform-origin: 20% 50%; }
.grade-box { font-family: var(--sans); }
.grade-h { margin: 0 0 8px; font: 700 .82rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.grade-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.5fr); border: 2px solid var(--ink); }
.grade-grid span, .grade-grid i { display: grid; place-items: center; border-right: 1px solid var(--ink); font-style: normal; }
.grade-grid span { padding: 3px 0; border-bottom: 1px solid var(--ink); font: 600 .78rem/1.3 var(--sans); }
.grade-grid i { height: 40px; font: 700 1.1rem/1 var(--sans); color: var(--navy); background: rgba(255, 255, 255, .3); }
.grade-grid span:nth-child(7), .grade-grid i:nth-child(14) { border-right: 0; }
.grade-grid i.is-right, .grade-grid i.is-wrong { background: center / 26px 26px no-repeat rgba(255, 255, 255, .55); }
.grade-grid i.is-right { background-image: var(--check); }
.grade-grid i.is-wrong { background-image: var(--cross); }
.p-wood { fill: var(--wood); }
.p-lead { fill: var(--lead); }
.p-body { fill: var(--pencil); }
.p-light { fill: var(--pencil-light); }
.p-dark, .p-end { fill: var(--pencil-dark); }
@media (max-width: 600px) {
  .cover { padding: 20px 0 30px; }
  .cover::before, .back::before { width: 10px; background-size: 6px 3px, 6px 3px, auto; background-position: 2px 26%, 2px 74%, 0 0; }
  .cover-grid { padding-left: 26px; padding-right: 16px; gap: 22px; }
  .cover-side { gap: 26px; }
  .label { padding: 18px 16px 18px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--navy); }
  .label-top { margin-bottom: 16px; font-size: .74rem; letter-spacing: .1em; }
  .lead { font-size: 1.0625rem; }
  .cover-actions .btn { flex: 1 1 100%; }
  .fields div { grid-template-columns: 1fr; gap: 0; }
  .pencil { width: 88%; margin: 14px 0 0 8%; transform: rotate(-5deg); }
}

/* Sections */
.section { padding: 72px 0; scroll-margin-top: 20px; }
@media (max-width: 600px) { .section { padding: 52px 0; } }

/* Syllabus */
.syllabus { border-bottom: 1px solid var(--rule); }
.syl-head { display: grid; gap: 8px 56px; margin-bottom: 30px; }
@media (min-width: 900px) { .syl-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: end; } }
.syl-head h2 { margin: 0; }
.syl-head > p { margin: 0; max-width: 40em; }
.syl-meta span { white-space: nowrap; }
.syl-meta { margin: 0 0 6px; font: 600 .8rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.schedule { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.schedule thead th { padding: 0 16px 10px 0; border-bottom: 2px solid var(--navy); font: 600 .76rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); text-align: left; }
.schedule tbody tr { border-bottom: 1px solid var(--rule); }
.schedule td, .schedule tbody th { padding: 16px 16px 16px 0; vertical-align: top; text-align: left; font-weight: 400; }
.schedule .u-no { width: 4rem; font: 700 2rem/1 var(--sans); color: var(--navy); }
.schedule tbody th a, .schedule .u-q a { display: inline-block; padding: 8px 0; }
.schedule tbody th a { font: 600 1.08rem/1.4 var(--sans); color: var(--ink); text-decoration-color: var(--rule-2); text-decoration-thickness: 2px; }
.schedule tbody th a:hover { text-decoration-color: var(--pencil); }
.schedule .u-do { font-size: 1rem; line-height: 1.55; color: var(--graphite); }
.schedule .u-q { white-space: nowrap; padding-right: 0; }
@media (min-width: 721px) { .schedule tbody th a, .schedule .u-q a { margin: -8px 0; } .schedule td, .schedule tbody th { vertical-align: baseline; } }
.schedule .u-q a { font-weight: 500; }
@media (max-width: 720px) {
  .schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .schedule, .schedule tbody { display: block; }
  .schedule tbody tr { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 2px 8px; padding: 14px 0; }
  .schedule tbody tr:first-child { border-top: 2px solid var(--navy); }
  .schedule td, .schedule tbody th { display: block; padding: 0; }
  .schedule .u-no { grid-row: 1 / span 3; width: auto; font-size: 1.7rem; }
  .schedule .u-q a { display: inline-block; padding: 8px 0; }
}
.policies { margin-top: 40px; }
.policies ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 44px; }
@media (min-width: 800px) { .policies ul { grid-template-columns: 1fr 1fr; } }
.policies li { position: relative; padding-left: 26px; font-size: 1rem; line-height: 1.65; }
.policies li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; background: var(--pencil); outline: 1px solid var(--ink); }
.policies b { font-family: var(--sans); font-weight: 600; }

/* Units: lecture notes */
.unit { border-bottom: 1px solid var(--rule); }
.unit-grid { display: grid; gap: 18px 56px; }
@media (min-width: 900px) {
  .unit-grid { grid-template-columns: 290px minmax(0, 1fr); }
  .unit-rail { position: sticky; top: 100px; align-self: start; }
}
.unit-no { position: relative; display: grid; place-items: center; width: 62px; height: 76px; margin: 0 0 16px; padding-bottom: 16px; background: var(--cover); border: 2px solid var(--navy); border-left-width: 9px; border-radius: 0 4px 4px 0; font: 700 1.9rem/1 var(--sans); color: var(--ink); }
.unit-no::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 15px; height: 2px; background: var(--navy); }
.unit h2 { font-size: clamp(1.55rem, 2.8vw, 2.05rem); margin-bottom: 0; }
.unit-tag { display: block; margin-bottom: 8px; font: 600 .8rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.obj-label { margin: 22px 0 6px; font: 600 .78rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.objectives { list-style: none; margin: 0; padding: 0; font: 400 .98rem/1.5 var(--sans); }
.objectives li { position: relative; padding: 9px 0 9px 30px; border-top: 1px solid var(--rule); }
.objectives li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 14px; height: 3px; background: var(--navy); }
@media (max-width: 899px) { .unit-no { float: right; width: 50px; height: 62px; margin: 0 0 8px 14px; padding-bottom: 12px; border-left-width: 7px; font-size: 1.5rem; } .unit-no::after { bottom: 12px; left: 6px; right: 6px; } }
.unit-body { max-width: 44rem; }
.points { list-style: none; margin: 0 0 1.2em; padding: 0; border-top: 2px solid var(--navy); }
.points li { padding: 10px 0 10px 0; border-bottom: 1px solid var(--rule); }
.points b { font-family: var(--sans); font-weight: 600; }
.terms, .clauses { margin: 28px 0 0; border-top: 2px solid var(--navy); }
.clauses { margin-top: 8px; }
.terms div, .clauses div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.clauses div { grid-template-columns: 12rem minmax(0, 1fr); padding: 14px 0; }
.terms dt, .clauses dt { font: 600 1rem/1.55 var(--sans); }
.terms dd, .clauses dd { margin: 0; font-size: 1rem; line-height: 1.65; }
@media (max-width: 640px) { .terms div, .clauses div { grid-template-columns: 1fr; } }
.sources { margin: 18px 0 0; font: 400 1rem/1.6 var(--sans); color: var(--graphite); }
.sources b { color: var(--ink); font-weight: 600; }
.check { margin: 18px 0 0; }
.check a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; font: 600 1rem/1.3 var(--sans); }
.check a::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--navy); border-radius: 50%; background: radial-gradient(circle, var(--navy) 0 4.5px, transparent 5px); }

/* Worked problem: a strip of ruled blue book paper */
.worked {
  margin: 4px 0 24px; padding: 0 18px 0 52px; border: 1px solid var(--rule-2); font-family: var(--sans);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent 36px, var(--rule-2) 36px, var(--rule-2) 37px, transparent 37px, transparent 40px, var(--rule-2) 40px, var(--rule-2) 41px, transparent 41px),
    linear-gradient(to bottom, transparent calc(var(--pitch) - 1px), var(--rule) calc(var(--pitch) - 1px));
  background-size: 100% 100%, 100% var(--pitch);
  background-position: 0 0, 0 -10px;
  line-height: var(--pitch);
}
.worked p { margin: 0; }
.worked-q { font-size: 1rem; }
.worked-math { font: 600 1.15rem/var(--pitch) var(--sans); word-spacing: .12em; }
.worked-math mark { padding: 3px 6px; }
.worked-math .eq { white-space: nowrap; }
@media (max-width: 600px) {
  .worked { padding-left: 40px; padding-right: 12px; background-image: linear-gradient(to right, transparent 26px, var(--rule-2) 26px, var(--rule-2) 27px, transparent 27px, transparent 30px, var(--rule-2) 30px, var(--rule-2) 31px, transparent 31px), linear-gradient(to bottom, transparent calc(var(--pitch) - 1px), var(--rule) calc(var(--pitch) - 1px)); }
}

/* Duhig drawing */
.figure { margin: 8px 0 26px; max-width: 480px; }
.figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.figure figcaption { margin-top: 10px; font: 400 .92rem/1.55 var(--sans); color: var(--graphite); }
.d-row { font: 600 15px var(--sans); fill: var(--ink); letter-spacing: .02em; }
.d-seg { font: 500 15px var(--sans); fill: var(--ink); text-anchor: middle; }
.d-seg.on-x { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.d-x { fill: url(#hatch); stroke: var(--ink); stroke-width: 1.2; }
.d-hatch { stroke: var(--rule-2); stroke-width: 1.4; }
.d-o { fill: var(--cover); stroke: var(--ink); stroke-width: 1.2; }
.d-g { fill: var(--pencil); stroke: var(--ink); stroke-width: 1.2; }

/* Pooling case: steps down a ruled line */
.steps { list-style: none; margin: 8px 0 8px; padding: 0; font-family: var(--sans); }
.steps li { position: relative; margin-left: 9px; padding: 0 0 18px 30px; border-left: 2px solid var(--rule-2); font-size: 1rem; line-height: 1.6; }
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: -10px; top: 3px; width: 18px; height: 18px; border: 2px solid var(--navy); border-radius: 50%; background: var(--paper); }
.steps li.is-default::before { background: var(--pencil); }
.steps b { font-weight: 600; }

/* Practice exam: an open blue book */
.exam { background: var(--wash); border-bottom: 1px solid var(--rule); }
.exam-head { max-width: 46rem; margin-bottom: 28px; }
.book-case { background: var(--cover); padding: 14px; border: 1px solid var(--cover-deep); }
.book {
  --m: 4.25rem;
  --gap: 20px;
  position: relative;
  margin: 0;
  padding: 0 28px var(--pitch) calc(var(--m) + var(--gap));
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, transparent calc(var(--m) - 5px), var(--rule-2) calc(var(--m) - 5px), var(--rule-2) calc(var(--m) - 4px), transparent calc(var(--m) - 4px), transparent calc(var(--m) - 1px), var(--rule-2) calc(var(--m) - 1px), var(--rule-2) var(--m), transparent var(--m)),
    linear-gradient(to bottom, transparent calc(var(--pitch) - 1px), var(--rule) calc(var(--pitch) - 1px));
  background-size: 100% 100%, 100% var(--pitch);
  background-position: 0 0, 0 -10px;
  line-height: var(--pitch);
}
.book-top {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 18px;
  min-height: calc(var(--pitch) * 2);
  margin: 0 -28px var(--pitch) calc(-1 * (var(--m) + var(--gap)));
  padding: 0 28px 0 calc(var(--m) + var(--gap));
  background: var(--paper);
  box-shadow: inset 0 -3px 0 var(--navy);
  font-family: var(--sans);
}
.book-top p { margin: 0; line-height: var(--pitch); }
.book-title { font: 700 1.05rem/var(--pitch) var(--sans); letter-spacing: .02em; }
.book-title span { margin-left: 10px; font-weight: 500; color: var(--graphite); }
.book-score { position: relative; font: 600 1rem/var(--pitch) var(--sans); color: var(--graphite); padding: 0 4px; }
.book-score.is-graded { padding: 0 20px; color: var(--ink); font-size: 1.2rem; background: var(--circle) center / 100% 88% no-repeat; }
.q { position: relative; min-width: 0; max-width: 48rem; margin: 0 0 var(--pitch); padding: 0; border: 0; }
.q legend { float: left; width: 100%; padding: 0; margin: 0; font: 400 1.0625rem/var(--pitch) var(--serif); }
.q .opt, .q .q-note { clear: both; }
.q-no { position: absolute; top: 0; left: calc(-1 * (var(--m) + var(--gap))); width: calc(var(--m) - 6px); text-align: center; font: 700 1.3rem/var(--pitch) var(--sans); color: var(--navy); }
.q-unit { margin-right: .45em; font: 600 .82rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.q-mark { position: absolute; top: var(--pitch); left: calc(-1 * (var(--m) + var(--gap)) + (var(--m) - 6px) / 2 - 17px); width: 34px; height: var(--pitch); background: center / 30px 30px no-repeat; }
.q.is-right .q-mark { background-image: var(--check); }
.q.is-wrong .q-mark { background-image: var(--cross); }
.opt { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 0; font: 400 1rem/var(--pitch) var(--sans); cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; top: calc((var(--pitch) - 26px) / 2); left: 0; cursor: pointer; }
.bubble { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: calc((var(--pitch) - 26px) / 2); border: 2px solid var(--navy); border-radius: 50%; background: var(--paper); font: 600 .78rem/1 var(--sans); color: var(--navy); }
.opt:hover .bubble { background: var(--wash); }
.opt input:checked + .bubble { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt input:focus-visible + .bubble { outline: 3px solid var(--navy); outline-offset: 3px; }
.o-t { min-width: 0; }
.opt input:disabled, .opt input:disabled + .bubble { cursor: default; }
.q.is-graded .opt { cursor: default; }
.q.is-graded .opt.is-key .o-t { background: var(--pencil-soft); box-shadow: -4px 0 0 var(--pencil-soft), 4px 0 0 var(--pencil-soft); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.q.is-graded .opt.is-key .bubble { box-shadow: 0 0 0 4px var(--pencil); }
.q.is-graded .opt.is-miss .o-t { text-decoration: line-through; text-decoration-color: var(--navy); text-decoration-thickness: 2px; }
.q-note { margin: 0; padding-left: 14px; border-left: 4px solid var(--pencil); font: 400 .98rem/var(--pitch) var(--sans); color: var(--ink); }
.q-note p { margin: 0; }
.q-verdict { font-weight: 700; }
.q-verdict:empty { display: none; }
.q-note a { font-weight: 600; white-space: nowrap; }
.book-foot { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 14px; }
.result { margin-top: 14px; padding: 18px 22px 20px; background: var(--paper); border: 2px solid var(--navy); font-family: var(--sans); }
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.result p { margin: 0 0 8px; }
.result-score { font: 700 1.35rem/1.3 var(--sans); }
.result-review { font-size: 1rem; line-height: 1.6; }
.result-review a { font-weight: 600; }
.result .btn { margin-top: 8px; }
@media (max-width: 600px) {
  .exam .wrap { padding: 0 12px; }
  .exam-head { padding: 0 8px; }
  .book-case { padding: 5px; }
  .book { --m: 2.2rem; --gap: 10px; padding-right: 12px; }
  .book-top { margin-right: -12px; padding-right: 12px; }
  .book-title span { display: none; }
  .q-no { font-size: 1.1rem; }
  .q-mark { width: 26px; left: calc(-1 * (var(--m) + var(--gap)) + (var(--m) - 6px) / 2 - 13px); background-size: 24px 24px; }
  .opt { gap: 10px; }
}

/* Questions */
.faq-grid { display: grid; gap: 18px 56px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 290px minmax(0, 1fr); } }
.faq-list { max-width: 46rem; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 2px solid var(--navy); }
.faq-list summary { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; list-style: none; cursor: pointer; font: 600 1.05rem/1.45 var(--sans); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: ""; flex: none; width: 9px; height: 9px; margin: 8px 8px 0 4px; border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); transform: rotate(-45deg); }
.faq-list details[open] summary::before { transform: rotate(45deg); margin-top: 5px; }
.faq-list summary:hover { color: var(--navy); }
.faq-list details p { margin: 0 0 18px 34px; font-size: 1rem; line-height: 1.7; }

/* Waitlist: the label of the next book */
.waitlist { background: var(--wash); }
.wait-grid { display: grid; gap: 26px 56px; }
@media (min-width: 900px) { .wait-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } }
.wait-copy p { max-width: 34em; }
.wait-form { background: var(--paper); border: 2px solid var(--navy); box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--navy); padding: 24px 30px 28px; font-family: var(--sans); }
.form-top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--navy); font: 600 .8rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.field { margin-bottom: 16px; }
.field label, .choice legend { display: block; margin: 0 0 2px; padding: 0; font: 600 .78rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.opt-tag { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input { width: 100%; min-height: 46px; padding: 10px 2px 8px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; font: 400 1.05rem/1.4 var(--sans); color: var(--ink); }
.field input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.choice { margin: 6px 0 16px; padding: 0; border: 0; min-width: 0; }
.choice-row { display: grid; gap: 0 18px; }
@media (min-width: 480px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice-grid { display: grid; gap: 0 18px; }
@media (min-width: 560px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 400 1rem/1.35 var(--sans); cursor: pointer; }
.choice input { flex: none; appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 22px; height: 22px; margin: 0; border: 2px solid var(--navy); border-radius: 50%; background: var(--paper); cursor: pointer; }
.choice input[type="checkbox"] { border-radius: 2px; }
.choice input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); }
.choice input[type="checkbox"]::before { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 22%, 86% 8%, 38% 70%); }
.choice input:checked { background: var(--pencil); border-color: var(--ink); }
.choice input:checked::before { transform: scale(1); }
.choice input:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.topics-note { margin: 4px 0 2px; padding: 6px 10px; background: var(--pencil-soft); font: 400 .95rem/1.5 var(--sans); }
.wait-form .btn { margin-top: 8px; }
.form-feedback:empty { display: none; }
.form-alt, .js-note { margin: 14px 0 0; font: 400 1rem/1.55 var(--sans); color: var(--ink); }
.js-note { padding: 12px 14px; background: var(--pencil-soft); border-left: 4px solid var(--ink); }
#main:focus { outline: none; }
.form-feedback { margin-top: 16px; padding: 12px 14px; font: 400 1rem/1.55 var(--sans); color: var(--ink); }
.form-feedback.is-ok { background: var(--wash); border-left: 4px solid var(--navy); }
.form-feedback.is-error, .wait-form [data-intake-status] { background: var(--pencil-soft); border-left: 4px solid var(--ink); color: var(--ink); }
.wait-form [data-intake-status] { margin: 16px 0 0; padding: 12px 14px; font: 500 1rem/1.55 var(--sans); }
@media (max-width: 600px) { .wait-form { padding: 18px 16px 22px; box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--navy); } }

/* Back cover: the footer */
.back { position: relative; background: var(--cover); color: var(--ink); padding: 48px 0 26px; font: 400 .98rem/1.6 var(--sans); }
.back a { color: var(--ink); text-decoration-color: var(--ink); }
.back a:hover { background: var(--pencil-soft); }
.back .brand { margin-bottom: 10px; }
.back .brand:hover { background: none; }
.back .mark-cover { fill: var(--paper); }
.back-grid { display: grid; gap: 22px 36px; }
@media (min-width: 880px) { .back-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.back-h { margin: 4px 0 8px; font: 700 .8rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.back p { margin: 0 0 8px; }
.back address { font-style: normal; }
.back-base { margin-top: 30px; }
.back-base p:first-child { padding-top: 16px; border-top: 1px solid var(--navy); }
.back-base p { font-size: 1rem; }
@media (max-width: 600px) { .back .wrap { padding-left: 26px; padding-right: 16px; } }

/* Legal pages and the 404 */
.legal { padding: 48px 0 72px; }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.7rem); }
.legal h2 { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1.35rem; }
.legal p, .legal li { font-size: 1rem; line-height: 1.75; }
.legal ul { padding-left: 1.3rem; }
.legal li { margin-bottom: 6px; }
.legal address { font-style: normal; }
.legal-meta { margin-bottom: 22px; padding-bottom: 12px; border-bottom: 3px double var(--navy); font: 400 .92rem/1.5 var(--sans); color: var(--graphite); }
.legal .note { padding: 14px 18px; background: var(--wash); border-left: 4px solid var(--pencil); }
.lost { padding: 56px 0 80px; background: var(--wash); }
.lost .book-case { max-width: 760px; }
.lost .book { padding-bottom: var(--pitch); }
.lost h1 { margin: 0; font: 700 clamp(1.6rem, 4vw, 2.1rem)/var(--pitch) var(--sans); }
.lost p { margin: 0; font-size: 1.0625rem; }
.lost .lost-links { font-family: var(--sans); }
.lost .lost-links a { font-weight: 600; margin-right: 18px; white-space: nowrap; }

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

@media print {
  .head .nav, .cover-actions, .cover-side, .book-foot, .result, .waitlist, .back-base p:last-child { display: none !important; }
  .cover, .back { background: #fff; }
  .unit-rail { position: static; }
  .q-note[hidden] { display: block !important; }
}