/* Emerson Tuition. An exercise-book page: paper, the logo's navy as ink, and the logo's
   red as the single accent, used like a teacher's red pen for the margin and its notes.
   Alegreya for headings, Atkinson Hyperlegible for reading (see Build-Plan.md). */

@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("/assets/fonts/patrick-hand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper: #faf7f0;
  --paper-2: #f2ede1;
  --ink: #0b1b3f;
  --ink-2: #3b4562;
  --red: #a7170c;
  --rule: #cfd8ea;
  --hl: #f5e3a0;
  --white: #fff;
  --m: 1.1rem;              /* margin column; widened on larger screens */
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", var(--sans);
  --board: #1b2d58;
}
@media (min-width: 900px) { :root { --m: 10.5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
p, ul, ol, figure, blockquote { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.35rem, 6.2vw, 4.4rem); line-height: 1.03; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.45rem); }
h3 { font-size: 1.32rem; }
.h-quiet { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lead { font-size: clamp(1.2rem, 2.2vw, 1.38rem); line-height: 1.55; max-width: 40rem; }
.big { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.4; }
.intro { max-width: 42rem; }
.small { font-size: .95rem; }
.eyebrow { font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .8rem; }
.eyebrow--long { text-transform: none; letter-spacing: 0; font-size: 1.02rem; line-height: 1.45; max-width: 30rem; }
.hl { background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 88% / 100% 38%; padding: 0 .06em; }
mark.need { background: #ffe14d; color: #000; font: 700 .85rem/1.4 ui-monospace, Menlo, monospace; padding: .1em .3em; }
code { font-size: .9em; }

.wrap { width: 100%; max-width: 78rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 700px) { .wrap { padding: 0 2rem; } }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--paper { background: var(--paper-2); }
.section--lined { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .75rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---- The margin ---- */
.ruled { position: relative; padding-left: calc(var(--m) + .25rem); }
.ruled::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--red); opacity: .8; }
.line { position: relative; }
.line + .line, .ruled + .ruled { margin-top: 2.25rem; }
.link-row { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
/* The column runs to the edge of the page (Morgan, 28 Oct 2026), but running text keeps a
   readable line length of about 80 characters; grids, lists of cards and two-column blocks use the
   full width. */
.line-body { max-width: 66rem; }
.line-body p, .line-body ol:not([class]), .line-body ul:not([class]), .line-body blockquote { max-width: 46rem; }
.line-body > :last-child { margin-bottom: 0; }
.mnote { font: italic 500 1.05rem/1.3 var(--serif); color: var(--red); margin: 0 0 .5rem; }
/* On wider screens each note sits in the margin column and is sticky: it slides up with
   its section, holds at the top while the section is read, then leaves with it. */
@media (min-width: 900px) {
  .ruled { padding-left: 0; }
  .ruled::before { left: calc(var(--m) - 1.5rem); }
  .line { display: grid; grid-template-columns: var(--m) minmax(0, 1fr); align-items: start; }
  .line-body { grid-column: 2; }
  .mnote { grid-column: 1; grid-row: 1; position: sticky; top: 1.5rem; padding-right: 2.6rem; text-align: right; margin: .3rem 0 0; font-size: 1.12rem; }
}

/* ---- Header ---- */
.site-head { border-bottom: 1px solid var(--rule); box-shadow: 0 3px 0 -2px var(--rule); background: var(--paper); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); padding: .5rem 0; }
.brand img { width: 40px; height: 48px; object-fit: contain; }
.wordmark { display: flex; flex-direction: column; font: 600 1.06rem/1.15 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.wordmark span + span { border-top: 1.5px solid var(--red); padding-top: .15rem; margin-top: .15rem; }
.brand-text { display: flex; flex-direction: column; gap: .3rem; }
.tagline { font: italic 500 .9rem/1.2 var(--serif); color: var(--ink-2); }
.nav-toggle { display: none; font: 700 1rem var(--sans); color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 3px; min-height: 44px; padding: 0 1rem; cursor: pointer; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 700; font-size: 1rem; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.nav-cta a { border: 1.5px solid var(--ink); border-radius: 3px; padding: 0 1rem; }
.nav-cta a:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 1060px) {
  .js .nav-toggle { display: inline-block; }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.is-open { display: block; }
  .site-nav { width: 100%; padding-bottom: 1rem; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-top: 1px solid var(--rule); }
  .site-nav a { width: 100%; min-height: 48px; }
  .nav-cta { padding-top: .75rem; border-top: 1px solid var(--rule); }
  .nav-cta a { justify-content: center; }
}

/* ---- Breadcrumbs ---- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Policy pages: breadcrumbs on the left, the Download PDF button top right */
.head-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 2rem; }
.head-top .crumbs ol { margin: 0; }
.pdf-btn { gap: .45rem; }
.doc-date { color: var(--ink-2); }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .95rem; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--red); }
.crumbs a { color: var(--ink-2); }

/* ---- Buttons and links ---- */
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 50px; padding: .7rem 1.4rem; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 3px; font: 700 1.05rem var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--small { min-height: 44px; padding: .5rem 1rem; font-size: .98rem; }
.arrow { width: 1.2em; height: 1.2em; flex: none; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; min-height: 44px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
.or { color: var(--ink-2); }

/* ---- Home: hero ---- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; gap: 2.5rem; }
.hero h1 { max-width: 12ch; }
.hero-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.hero-photos .photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--white); box-shadow: 0 1px 2px rgba(11, 27, 63, .12); }
.hero-photos .p2 { margin-top: 3rem; --r: 1.6deg; }
.hero-photos .p1 { --r: -1.2deg; }
[data-deal] { transform: rotate(var(--r, 0deg)); }
.hero-cap { grid-column: 1 / -1; font: italic 500 1.05rem/1.4 var(--serif); color: var(--ink-2); margin: .5rem 0 0; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
}

/* ---- Mission ---- */
.mission { list-style: none; padding: 0; margin: 0; }
.mission li { display: grid; gap: .25rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.mission li:first-child { border-top: 1px solid var(--rule); }
.m-word { font: 700 clamp(2.2rem, 5vw, 3.4rem)/1 var(--serif); display: inline-flex; align-items: flex-start; gap: .4rem; white-space: nowrap; }
.tick { width: .6em; height: .5em; color: var(--red); margin-top: -.05em; flex: none; }  /* "Restore." fills its column; without flex: none its tick was squeezed */
.m-text { font-size: 1.2rem; align-self: center; }
@media (min-width: 700px) { .mission li { grid-template-columns: 16rem 1fr; } }

/* ---- Contents list ---- */
.contents { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: c; }
.contents li { border-bottom: 1px solid var(--rule); }
.contents li:first-child { border-top: 1px solid var(--rule); }
.contents a, .contents .c-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 1.05rem 0; text-decoration: none; }
.contents li { counter-increment: c; }
.c-num { font: 700 1.4rem/1 var(--serif); color: var(--red); }
.c-num::before { content: counter(c); }
.c-price { display: inline-block; margin-top: .45rem; padding: .1rem .55rem; border: 1.5px solid var(--red); border-radius: 3px; color: var(--red); font: 700 1rem/1.4 var(--serif); transform: rotate(-1deg); }
.svc-price { margin: .8rem 0 0; }
.svc-price .c-price { font-size: 1.15rem; margin: 0; }
.c-title { display: block; font: 700 1.4rem/1.2 var(--serif); }
.c-line { display: block; color: var(--ink-2); font-size: 1.02rem; margin-top: .2rem; }
.c-go { color: var(--red); align-self: center; }
.contents a:hover .c-title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .2em; }

/* ---- Photos ---- */
.photo img { width: 100%; }
.photo figcaption { font: italic 500 1rem/1.4 var(--serif); color: var(--ink-2); margin-top: .5rem; }
.photo-row { display: grid; gap: 1rem; margin-top: 2.5rem; }
.photo-row .photo img { aspect-ratio: 4 / 3; object-fit: cover; }  /* every photo in a row the same size */
@media (min-width: 560px) { .photo-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .photo-row { padding-left: var(--m); } }
.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.split > .photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.split > .photo.whole img { aspect-ratio: auto; }  /* faces at both edges: no crop */
.portrait img { aspect-ratio: 1; object-fit: cover; width: 100%; max-width: 26rem; }
.portrait figcaption { font: italic 500 1rem/1.4 var(--serif); color: var(--ink-2); margin-top: .5rem; }

/* ---- Review ---- */
.review blockquote { margin: 0; }
.review blockquote p { font: 500 clamp(1.4rem, 2.8vw, 1.9rem)/1.35 var(--serif); }
.review figcaption strong { display: block; }
.review figcaption span { color: var(--ink-2); font-size: 1rem; }

/* ---- Notes ---- */
.notes-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 1.5rem 0; }
.note-card a { display: block; text-decoration: none; }
.note-card figure { margin: 0 0 .9rem; }
.note-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.note-meta { font-size: .92rem; color: var(--ink-2); margin-bottom: .3rem; }
.note-meta span { color: var(--red); font-weight: 700; }
.note-card h3 { margin-bottom: .35rem; }
.note-card a:hover h3 { text-decoration: underline; text-decoration-color: var(--red); }
.byline { color: var(--ink-2); }
.prose h2 { font-size: 1.65rem; margin-top: 1.75em; }
.prose h3 { margin-top: 1.5em; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .4em; }
.prose blockquote { border-left: 3px solid var(--red); padding-left: 1rem; font-family: var(--serif); font-size: 1.25rem; }
.built-page > :first-child { margin-top: 0; }
.built-page .page-photo { margin: 1.5em 0; }
.built-page .page-photo img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; }
.built-page .cta-row { margin: 1.5em 0; }
.cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.cover:empty { display: none; }
.draft { background: var(--hl); padding: .5rem .75rem; display: inline-block; }

/* ---- Branches ---- */
.branches { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 700px) { .branches { grid-template-columns: 1fr 1fr; } }
.branches h3 { border-bottom: 1.5px solid var(--red); padding-bottom: .35rem; }
.places { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.places li { font-size: .92rem; border: 1px solid var(--rule); background: var(--white); padding: .05rem .5rem; border-radius: 3px; }
.more-places { margin: -.4rem 0 1rem; }
.more-places summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; font-size: .95rem; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .25em; list-style: none; }
.more-places summary::-webkit-details-marker { display: none; }
.more-places summary::after { content: "+"; margin-left: .4rem; color: var(--red); text-decoration: none; }
.more-places[open] summary::after { content: "\2212"; }
.more-places .when-open, .more-places[open] .when-shut { display: none; }
.more-places[open] .when-open { display: inline; }
.more-places[open] summary { margin-bottom: .3rem; }

/* ---- FAQs ---- */
.faqs { border-top: 1px solid var(--rule); margin-top: 1.25rem; }
.faqs details { border-bottom: 1px solid var(--rule); }
.faqs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; min-height: 48px; font: 700 1.22rem/1.3 var(--serif); }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; color: var(--red); font: 700 1.6rem/1 var(--sans); flex: none; }
.faqs details[open] summary::after { content: "\2212"; }
.answer { padding-bottom: 1rem; max-width: 44rem; }

/* ---- Page head and CTA ---- */
.page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { max-width: 18ch; }
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band a:not(.btn) { color: var(--paper); }
.cta-band .ruled::before { background: #e0685d; opacity: 1; }
.cta-band .mnote { color: #f08f86; }
.cta-band .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-band .btn:hover { background: var(--white); border-color: var(--white); color: var(--red); }
.cta-band .or { color: #d6dbea; }

/* ---- Tuition pages ---- */
.svc-grid { display: grid; gap: 2.5rem; }
.svc-photos { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; align-content: start; }
.svc-photos .photo:first-child { grid-column: 1 / -1; }
.svc-photos img { aspect-ratio: 4 / 5; object-fit: cover; }
.svc-photos .photo:first-child img { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, .8fr); }
  .svc-photos { grid-template-columns: 1fr; position: sticky; top: 1.5rem; }
  .svc-photos img, .svc-photos .photo:first-child img { aspect-ratio: 4 / 5; }
}

/* ---- Team ---- */
.people { display: grid; gap: 3.5rem; }
.person { display: grid; gap: 1.5rem; }
.person h2 { margin-bottom: .2rem; }
.person-role { color: var(--red); font: italic 500 1.12rem var(--serif); margin: 0 0 .2rem; }
.quals { font-weight: 700; color: var(--ink-2); }
.person .portrait img { max-width: 20rem; }
@media (min-width: 800px) { .person { grid-template-columns: 17rem minmax(0, 46rem); gap: 2.5rem; } .people { padding-left: calc(var(--m) - 6rem); } }

/* ---- Forms ---- */
.form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 700; margin-bottom: .35rem; }
.opt { font-weight: 400; color: var(--ink-2); }
.hint { display: block; color: var(--ink-2); font-size: .98rem; margin-bottom: .4rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 50px; padding: .65rem .8rem; font: 400 1.08rem/1.4 var(--sans); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--ink-2); border-radius: 3px;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.choice { display: inline-flex; align-items: flex-start; gap: .55rem; min-height: 44px; padding-top: .5rem; font-weight: 400 !important; cursor: pointer; }
.choice input { width: 1.5rem; height: 1.5rem; margin: .05rem 0 0; accent-color: var(--ink); flex: none; }
.field .choice { display: inline-flex; }  /* beats ".field label" so the text wraps beside the box */
.consent-note { margin: .25rem 0 0 2.05rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; min-height: 1.5em; margin: 0; font-weight: 700; }
.form-status.is-error { color: var(--red); }
/* TutorCruncher's enquiry forms (site.js adds the labels and hints). Their script injects its own
   stylesheet after ours, so each rule here is more specific than the one it replaces. */
.tc-enquiry { display: grid; gap: 1.25rem; }
.tc-note { margin: 0; }
.tc-form form.tcs { display: grid; gap: 1.25rem; max-width: none; margin: 0; }
@media (min-width: 700px) { .tc-form form.tcs { grid-template-columns: 1fr 1fr; } .tc-form form.tcs > :not(.tcs-field), .tc-form #field-attributes-availability, .tc-form #field-attributes-address, .tc-form .tcs-check, .tc-form .tcs-submit { grid-column: 1 / -1; } }
.tc-form .tcs-field { margin: 0; padding: 0; min-width: 0; }
.tc-form .tcs-label { display: block; font-weight: 700; margin-bottom: .35rem; }
.tc-form .tcs-field > label:not(.tcs-label) { display: block; font-size: 0; }  /* the select's own label: tcs-label names it */
.tc-form .help-text { display: none; }  /* TutorCruncher's staff help text */
.tc-form .tcs-field input:not([type="checkbox"]), .tc-form .tcs-field textarea, .tc-form .tcs-field select {
  width: 100%; height: auto; min-height: 50px; margin: 0; padding: .65rem .8rem; font: 400 1.08rem/1.4 var(--sans); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--ink-2); border-radius: 3px;
}
.tc-form .tcs-field textarea { min-height: 6rem; resize: vertical; }
.tc-form .tcs-field input:focus-visible, .tc-form .tcs-field textarea:focus-visible, .tc-form .tcs-field select:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.tc-form .tcs-md p { margin: 0 0 1.25rem; font-size: inherit; line-height: inherit; }
.tc-form .tcs-field.tcs-check > label { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-size: 1rem; font-weight: 700; cursor: pointer; }
.tc-form .tcs-field.tcs-check input { width: 1.5rem; height: 1.5rem; margin: 0; padding: 0; accent-color: var(--ink); }
.tc-form .tcs-terms { margin-left: 2.05rem; color: var(--ink-2); font: 400 .98rem/1.5 var(--sans); }
.tc-form .tcs-terms a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .2em; }
.tc-form .grecaptcha > div { margin: 0; }
.tc-form .error-msg { color: var(--red); font-weight: 700; text-align: left; }
.tc-form .tcs-submit { text-align: left; }
.tc-form .tcs-submit .tcs-button { display: inline-flex; align-items: center; min-height: 50px; padding: .7rem 1.4rem; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 3px; font: 700 1.05rem var(--sans); cursor: pointer; }
.tc-form .tcs-submit .tcs-button:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.tc-form .tcs-submit .tcs-button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.tc-form .tcs-submitted { padding: 1.5rem; background: var(--paper-2); border-left: 4px solid var(--red); font-size: 1.1rem; font-weight: 700; text-align: left; }
.tc-form .tcs-submitted p { margin: 0; }
.form-done { padding: 1.5rem; background: var(--paper-2); border-left: 4px solid var(--red); }
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); } }
.branch-cards { display: grid; gap: 1.25rem; align-content: start; }
.branch-card { background: var(--paper-2); border-top: 3px solid var(--ink); padding: 1.25rem; }
.branch-card h2 { font-size: 1.5rem; }
.big-link { font: 700 1.35rem var(--serif); }

/* ---- Footer ---- */
.site-foot { background: var(--ink); color: #e9ecf4; padding: 3.5rem 0 1.5rem; font-size: 1rem; }
.site-foot a { color: #fff; }
.site-foot .brand { color: #fff; }
.site-foot .wordmark span + span { border-top-color: #e0685d; }
.site-foot .tagline { color: #d6dcea; }
/* The footer's words line up under the wordmark and tagline (shield 40px + the .brand gap). */
.site-foot .brand { margin-bottom: 1rem; }
.foot-brand > p { margin-left: calc(40px + .7rem); max-width: 30rem; }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot-h { font: 700 .9rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #c7cee0; margin-bottom: .6rem; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; }
.foot-base { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; border-top: 1px solid #2c3a63; margin-top: 2.5rem; padding-top: 1.25rem; font-size: .92rem; color: #c7cee0; }
.foot-base p { margin: 0; }
.credit a { color: #c7cee0; }

/* ---- Tutor cards and profiles ---- */
.tutor-grid { display: grid; gap: 2.25rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 1.5rem 0; }
.tutor-grid--team { margin: 0; }
.team-group + .team-group { margin-top: clamp(3rem, 7vw, 4.5rem); }
.team-jump { margin: 0 0 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.team-jump p { margin: 0; font-weight: 700; color: var(--ink-2); }
.team-jump ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.team-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper); text-decoration: none; font-weight: 700; }
.team-jump a:hover { background: var(--ink); color: var(--paper); }
.team-jump .count { font-weight: 400; margin-left: .3rem; }
.team-group { scroll-margin-top: 1rem; }
.team-group-more { margin: -1rem 0 1.5rem; }
@media (min-width: 900px) { .team-jump, .team-group-more { margin-left: var(--m); } }
.team-group-h { font-size: clamp(1.6rem, 3vw, 2.1rem); border-bottom: 1.5px solid var(--red); padding-bottom: .4rem; margin-bottom: 1.75rem; }
@media (min-width: 900px) { .team-group-h { margin-left: var(--m); } }
/* No photo yet: the tutor's initials in red pen on a plain card, the same size as a photo. */
.tutor-card figure:empty, .profile-photo:empty { position: relative; aspect-ratio: 1; background: var(--white); border: 8px solid var(--white); outline: 1px solid var(--rule); outline-offset: -8px; box-shadow: 0 1px 2px rgba(11, 27, 63, .12); display: grid; place-items: center; }
.tutor-card figure:empty::before, .profile-photo:empty::before { content: attr(data-initials); font: italic 600 clamp(3rem, 9vw, 5rem)/1 var(--serif); color: var(--red); }
@media (min-width: 900px) { .tutor-grid--team { padding-left: var(--m); } }
.tutor-card { display: flex; }
/* Each card fills its row, with the subjects and link pinned to the bottom, so cards line up
   however long their text is (Grace, 28 Oct 2026). */
.tutor-card a { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: var(--ink); }
.tutor-card .chips { margin-top: auto; padding-top: .25rem; }
.tutor-card .chips:empty + .text-link { margin-top: auto; }
.tutor-card figure { margin: 0 0 1rem; max-width: 15rem; }  /* most originals are small, so kept modest */
.tutor-card img { aspect-ratio: 1; object-fit: cover; width: 100%; border: 8px solid var(--white); box-shadow: 0 1px 2px rgba(11, 27, 63, .12); }
.tutor-card:nth-child(3n+1) figure { --r: -1.4deg; }
.tutor-card:nth-child(3n+2) figure { --r: 1.2deg; }
.tutor-card:nth-child(3n) figure { --r: -.6deg; }
.tutor-card h3 { font-size: 1.5rem; margin-bottom: .1rem; }
.tutor-role { font: italic 500 1.08rem var(--serif); color: var(--red); margin: 0 0 .15rem; }
.tutor-card .quals { font-size: .95rem; margin-bottom: .5rem; }
.tutor-card a:hover h3 { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .2em; }
.chips { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { font-size: .88rem; border: 1px solid var(--rule); background: var(--paper); padding: .1rem .55rem; border-radius: 3px; }
.chips:empty { display: none; }
.profile-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .profile-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr); } }
.profile-photo { margin: 0; max-width: 18rem; --r: 2deg; }
.profile-photo img { aspect-ratio: 1; object-fit: cover; width: 100%; border: 10px solid var(--white); box-shadow: 0 1px 3px rgba(11, 27, 63, .14); }
@media (max-width: 899px) { .profile-photo { order: -1; max-width: 14rem; } }
.facts { display: grid; gap: 0; margin: 0 0 2rem; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-weight: 700; color: var(--ink-2); }
.facts dd { margin: 0; }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: .1rem; } }
.tutor-quote { margin: 0 0 2rem; border-left: 3px solid var(--red); padding-left: 1.25rem; }
.tutor-quote p { font: italic 500 clamp(1.35rem, 2.6vw, 1.75rem)/1.35 var(--serif); margin-bottom: .3rem; }
.tutor-quote footer { color: var(--ink-2); }
.share { margin-top: 1.75rem; }
.share-h { font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; }
.share-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.share-status { min-height: 1.4em; margin: .5rem 0 0; font-weight: 700; }
.print-only { display: none; }

/* ---- Review boards: a classroom display board per branch, with a scalloped border roll,
   and each review on a ruled index card pinned up by hand ---- */
.boards { display: grid; gap: clamp(3.5rem, 8vw, 5.5rem); padding: 1.25rem .75rem 0; }
.board { position: relative; isolation: isolate; background: var(--board); padding: clamp(1.25rem, 3vw, 2.25rem); padding-top: 0; color: var(--ink); }
/* Inside the board's own stacking context, the pattern (::before) and the backing paper
   (::after) both sit behind the content; the paper covers all but the scalloped edge. */
.board::before { content: ""; position: absolute; inset: -10px; z-index: -2; background: radial-gradient(circle, var(--red) 9.5px, transparent 10px) 0 0 / 20px 20px; }
.board::after, .mini-board::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--board); }
.board-banner { position: relative; background: var(--white); max-width: 34rem; margin: 0 auto 2rem; transform: translateY(-1.1rem) rotate(-1deg); padding: 1rem 1.5rem 1.1rem; text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.board-banner h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.board-place { margin: 0; color: var(--ink-2); font: italic 500 1.12rem var(--serif); }
.board-score { margin: .5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem .6rem; }
.score { font: 700 1.6rem/1 var(--serif); }
.board-score a { font-weight: 700; }
.board-cards { columns: 3 17rem; column-gap: 1.75rem; }
.board .board-cards { padding-bottom: .5rem; }
.review-card { position: relative; break-inside: avoid; margin: 0 0 1.9rem; padding: 2.35rem 1.25rem 1.1rem; background-color: var(--white);
  background-image: linear-gradient(#e88d86, #e88d86), repeating-linear-gradient(transparent 0 calc(1.7rem - 1px), #cbd7ee calc(1.7rem - 1px) 1.7rem);
  background-size: 100% 1.5px, 100% 100%; background-position: 0 2rem, 0 2.25rem; background-repeat: no-repeat, repeat;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .22); font: 400 1.3rem/1.7rem var(--hand); color: var(--ink); transform: rotate(var(--r, 0deg)); }
.review-card::before { content: ""; position: absolute; top: .55rem; right: 1.1rem; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f08f86, var(--red) 60%); box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
.card-stars { display: inline-flex; gap: .15rem; vertical-align: middle; }
.review-card .card-stars { position: absolute; top: .45rem; left: 1rem; }
.star { width: 1.35rem; height: 1.35rem; overflow: visible; }
.star path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; }
.star.on path { fill: rgba(167, 23, 12, .85); }
.board-score .star { width: 1.5rem; height: 1.5rem; }
.review-card blockquote { margin: 0; }
.review-card blockquote p { margin: 0 0 .5rem; }
.review-card figcaption { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.signed { font-size: 1.45rem; }
.signed::before { content: "\2014\00a0"; }
.card-meta, .card-tutor { font: 400 .9rem/1.4 var(--sans); color: var(--ink-2); }
.card-tutor:empty, .card-meta:empty { display: none; }
.review-card--blank { background-image: none; background-color: var(--paper); border: 2px dashed #9aa6c2; box-shadow: none; text-align: center; font-size: 1.25rem; }
.review-card--blank::before { display: none; }
.blank-q { font-size: 1.6rem; margin-bottom: .2rem; }
.review-card--blank .btn { font-family: var(--sans); }
.mini-board { background: var(--board); padding: 1.75rem 1.25rem .25rem; margin: 1.5rem 0; position: relative; isolation: isolate; }
.mini-board::before { content: ""; position: absolute; inset: -8px; z-index: -2; background: radial-gradient(circle, var(--red) 7.5px, transparent 8px) 0 0 / 16px 16px; }
/* Hover (or focus) brings a card forward and straightens it, so it's easier to read. */
.review-card { transition: transform .2s ease-out, box-shadow .2s ease-out; }
.review-card:hover, .motion .review-card[data-deal].is-in:hover { transform: rotate(0deg) scale(1.06); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); z-index: 2; }
.motion .review-card[data-deal].is-in { transition: transform .2s ease-out, box-shadow .2s ease-out, opacity .5s ease-out; }
/* The home page reel: a sideways strip that scrolls by hand, and moves on by itself in site.js. */
/* It runs the full width of the window, so the scalloped edge is only top and bottom. */
.review-reel { margin: 1.5rem 0; padding-left: 0; padding-right: 0; }
.review-reel::before { inset: -8px 0; }
.reel-track { display: flex; gap: 1.5rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 1.5rem; padding: 1rem 1.5rem 1.5rem; scrollbar-color: #8c9bc0 transparent; }
/* With the arrow buttons showing (site.js), the scrollbar isn't needed. */
.review-reel:has(.reel-controls:not([hidden])) .reel-track { scrollbar-width: none; }
.review-reel:has(.reel-controls:not([hidden])) .reel-track::-webkit-scrollbar { display: none; }
.reel-track:focus-visible { outline-color: #f5e3a0; }
.reel-track .review-card { flex: 0 0 min(85%, 19rem); scroll-snap-align: start; margin: 0; }
.reel-controls { display: flex; justify-content: center; gap: .6rem; padding: 0 0 1.25rem; }
.reel-controls[hidden] { display: none; }
.reel-btn { min-width: 48px; min-height: 44px; padding: 0 1rem; font: 700 1rem var(--sans); color: var(--ink); background: var(--paper); border: 2px solid var(--paper); border-radius: 3px; cursor: pointer; }
.reel-btn:hover { background: var(--white); }
.reel-btn:focus-visible { outline-color: #f5e3a0; }
.review-card[hidden] { display: none; }
.board-more { text-align: center; margin: .5rem 0 0; }
.board-more .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.board-more .btn:hover { background: var(--white); border-color: var(--white); color: var(--red); }
.plain-type .review-card { font-family: var(--sans); font-size: 1.05rem; line-height: 1.7rem; }
.plain-type .signed { font-size: 1.1rem; font-weight: 700; }
@media (max-width: 560px) { .board::before { inset: -7px; background-size: 14px 14px; background-image: radial-gradient(circle, var(--red) 6.5px, transparent 7px); } }

/* ---- Doodles: red-pen marks drawn in place ---- */
/* The circle and the underline are background drawings, not inline SVG, so the admin's text
   editor can add them with a class alone (worker/lib/rich.js). */
.circled { position: relative; white-space: nowrap; }
.circled::after { content: ""; position: absolute; left: -8%; top: -28%; width: 116%; height: 156%; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M70 4C44 1 12 6 5 17c-6 11 20 20 55 19 33-1 57-8 56-19C115 7 92 2 64 4' fill='none' stroke='%23a7170c' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.underlined { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5C20 3 36 6 52 4.2S84 2.5 98 4' fill='none' stroke='%23a7170c' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .4em; padding-bottom: .12em; }
.doodle path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cta-band .doodle path { stroke: #e0685d; }
.cta-arrow { display: none; }
@media (min-width: 900px) { .cta-arrow { display: block; position: absolute; width: 7rem; height: 4.5rem; left: calc(-1 * 8rem); top: -1.5rem; } .cta-row { position: relative; } }
.stars { display: block; width: 6.6rem; height: 1.3rem; margin: .6rem 0 0 auto; }
.correct { white-space: nowrap; }
.correct s { text-decoration: none; position: relative; color: var(--ink-2); }
.correct s::before { content: attr(data-was); }
.correct s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: 3px; background: var(--red); transform-origin: left; }
.correct .fix { font: italic 500 1.05em var(--serif); color: var(--red); display: inline-block; transform: rotate(-3deg); }
.c-num { position: relative; }
.c-num svg { position: absolute; left: -.55em; top: -.5em; width: 2.1em; height: 2em; overflow: visible; }
.c-num path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s ease-out; }
.contents a:hover .c-num path, .contents a:focus-visible .c-num path { stroke-dashoffset: 0; }

/* ---- Motion. Only when the browser has not asked for less, and only once JS has marked
   the page (html.motion), so without JS everything simply shows. Each effect runs once. ---- */
@media (prefers-reduced-motion: no-preference) {
  .motion .hl { background-size: 0% 38%; transition: background-size .7s cubic-bezier(.2, .7, .2, 1) .15s; }
  .motion .hl.is-in { background-size: 100% 38%; }
  .motion .underlined { background-size: 0% .4em; transition: background-size .6s ease-out .2s; }
  .motion .underlined.is-in { background-size: 100% .4em; }
  .motion .circled::after { clip-path: inset(0 100% 0 0); transition: clip-path .8s ease-out .3s; }
  .motion .circled.is-in::after { clip-path: inset(0 0 0 0); }
  .motion .tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s ease-out; }
  .motion .mission.is-in li:nth-child(1) .tick path { transition-delay: .2s; }
  .motion .mission.is-in li:nth-child(2) .tick path { transition-delay: .65s; }
  .motion .mission.is-in li:nth-child(3) .tick path { transition-delay: 1.1s; }
  .motion .mission.is-in .tick path { stroke-dashoffset: 0; }
  .motion [data-deal] { opacity: 0; transform: translateY(3rem) rotate(0deg); transition: opacity .5s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
  .motion [data-deal].is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .motion .doodle path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s ease-out .3s; }
  .motion .doodle.is-in path { stroke-dashoffset: 0; }
  .motion .correct s::after { transform: scaleX(0); transition: transform .4s ease-out .4s; }
  .motion .correct .fix { opacity: 0; transform: translateY(.3em) rotate(0deg); transition: opacity .4s ease-out .85s, transform .5s cubic-bezier(.2, .7, .2, 1) .85s; }
  .motion .correct.is-in s::after { transform: scaleX(1); }
  .motion .correct.is-in .fix { opacity: 1; transform: rotate(-3deg); }
  .motion .review-card .star path { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset .35s ease-out, fill-opacity .3s ease-out; }
  .motion .review-card.is-in .star path { stroke-dashoffset: 0; fill-opacity: 1; }
  .motion .review-card.is-in .star:nth-child(1) path { transition-delay: .5s, .8s; }
  .motion .review-card.is-in .star:nth-child(2) path { transition-delay: .65s, .95s; }
  .motion .review-card.is-in .star:nth-child(3) path { transition-delay: .8s, 1.1s; }
  .motion .review-card.is-in .star:nth-child(4) path { transition-delay: .95s, 1.25s; }
  .motion .review-card.is-in .star:nth-child(5) path { transition-delay: 1.1s, 1.4s; }
  .motion .mnote { opacity: 0; transform: translateY(.6rem); transition: opacity .5s ease-out, transform .5s ease-out; }
  .motion .mnote.is-in { opacity: 1; transform: none; }
}

/* ---- The logo screen: the first page of a visit only, for about a second (head script) ---- */
.logo-screen { display: none; }
html.logo-on .logo-screen { display: flex; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
  background: var(--paper); color: var(--ink); transition: opacity .45s ease-out, visibility .45s; }
html.logo-out .logo-screen { opacity: 0; visibility: hidden; }
.logo-screen img { width: 96px; height: auto; }
.logo-screen .wordmark { font-size: 1.7rem; }
.logo-screen .wordmark span + span { border-top-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  html.logo-on .logo-screen img { animation: logo-in .6s ease-out both; }
  html.logo-on .logo-screen .wordmark { animation: logo-in .6s .15s ease-out both; }
}
@media (prefers-reduced-motion: reduce) { html.logo-on .logo-screen { transition: none; } }
@keyframes logo-in { from { opacity: 0; transform: translateY(.6rem); } }

/* Printing, and the policy PDFs (tools/pdf/make_pdfs.mjs, which adds the running footer): the
   logo and tagline on top, the red exercise-book margin line down every page, the site's fonts. */
@page { size: A4; margin: 18mm 16mm 20mm 18mm; }
@media print {
  .site-head nav, .nav-toggle, .cta-band, .site-foot, .share, .crumbs, .more-tutors, .skip, .logo-screen, #site-consent, .pdf-btn, .legal-doc button { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff; }
  body { font-size: 11pt; padding-left: 9mm; }
  body::before { content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--red); }
  .site-head { border-bottom: 1.5px solid var(--red); box-shadow: none; margin-bottom: 7mm; }
  .site-head .wrap, .wrap { max-width: none; padding: 0; }
  .head-row { min-height: 0; }
  .legal-doc .line, .page-head .line { display: block; }
  .legal-doc .mnote, .page-head .mnote { display: none; }
  .legal-doc .line-body, .page-head .line-body { max-width: none; }
  .page-head { padding: 0 0 5mm; }
  .page-head h1 { font-size: 26pt; max-width: none; }
  .page-head .lead { font-size: 12.5pt; }
  .legal-doc .prose h2 { font-size: 15pt; margin-top: 7mm; padding-bottom: 1.5mm; border-bottom: 1px solid #e3b9b4; break-after: avoid; }
  .legal-doc .prose p, .legal-doc .prose li { orphans: 3; widows: 3; }
  .legal-doc a { color: var(--ink); }
  .profile-head { padding: 0; }
  .profile-grid { grid-template-columns: 1fr 12rem; gap: 1.5rem; }
  .profile-photo { max-width: 12rem; }
  .section { padding: 1rem 0; }
  .print-only { display: block; margin-top: 1.5rem; font-weight: 700; }
  .ruled::before { display: none; }
}