/* Hallmark · shape: app screen · genre: playful · theme: Werkstatt (deal 1/3, seed online-workshop-school-three-d5c5·8ffcb64d·2026-10-30·r0)
 * nav: putty masthead over a 2px ink rule, the wordmark in capitals, the student's or tutor's sections, sign in or out · signature: the term as a printed prospectus: figures and dates boxed in 3px ink cells, each shop coded by one flat primary beside its black and white photograph · states: empty (no courses, nothing due, nothing to mark), error (notices), full; lessons mark done and discussions arrive live · werkstatt: putty
 * axes: mid/geometric-sans/cool · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, a course platform has many lists; the ruled cells and capitals carry them, and the three primaries only ever mean a shop */

:root { --cell-pad: var(--space-md); }
body { font-size: 1.0313rem; }
.container { padding-block: 0; }
.muted, .sub { color: var(--color-muted); }
.sub { display: block; font-size: 0.875rem; }
.r { text-align: right; }
.num { font-variant-numeric: tabular-nums; }
.narrow { max-width: 820px; }
a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 3px; }
.skip { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); }
.skip:focus { top: var(--space-xs); }

/* Display: Jost capitals. */
.display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1.02; font-size: clamp(2.6rem, 5.6vw, 4.6rem); max-width: 14ch; text-wrap: balance; }
.display--m { font-size: clamp(2.1rem, 4vw, 3.2rem); max-width: 22ch; }
.display--s { font-size: clamp(1.7rem, 3vw, 2.4rem); max-width: 26ch; }
.lead { font-size: 1.125rem; max-width: 52ch; margin-top: var(--space-md); }
.section { margin-block: var(--space-2xl); }
.section__title { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; margin-bottom: var(--space-lg); text-wrap: balance; }
.section__title--s { font-size: 1.25rem; margin: var(--space-xl) 0 var(--space-sm); }

/* The masthead. */
.masthead { border-bottom: var(--rule-bar) solid var(--color-ink); }
.masthead__inner { display: flex; align-items: center; gap: var(--space-xl); min-height: 68px; }
.wordmark { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.375rem; text-decoration: none; letter-spacing: 0.01em; }
.nav { display: flex; gap: var(--space-lg); }
.nav__link { font-weight: 600; font-size: 0.9375rem; text-decoration: none; padding-block: var(--space-2xs); border-bottom: var(--rule-bar) solid transparent; }
.nav__link:hover { border-bottom-color: var(--color-ink); }
.nav__link[aria-current="page"] { border-bottom: var(--rule-box) solid var(--color-ink); }
.masthead__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); }
.masthead__end form { margin: 0; }
.who { font-weight: 600; font-size: 0.9375rem; }

/* Buttons: square, an ink outline beside an ink block. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 600 0.875rem/1 var(--font-body); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--color-ink); color: var(--color-paper); }
.btn--ink:hover { background: var(--color-ink-2); }
.btn--small { min-height: 36px; padding: 0 var(--space-md); font-size: 0.8125rem; }
.btn:disabled { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; transform: none; }
form.button_to { display: inline; margin: 0; }

.notice { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); font-weight: 600; }
.notice--alert { border-width: var(--rule-box); }

/* The prospectus: the head, figures boxed in cells, the photograph over the three shops. */
.prospectus { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.figures { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: var(--rule-box) solid var(--color-ink); }
.figures > li { display: grid; align-content: start; gap: var(--space-2xs); padding: var(--cell-pad); border-right: var(--rule-box) solid var(--color-ink); margin-right: calc(var(--rule-box) * -1); }
.figures__label { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.figures__n { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 2.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.figures--five { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-lg); }
.figures--five > li { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.prospectus__act { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.prospectus__figure { margin: 0; border: var(--rule-box) solid var(--color-ink); }
.prospectus__photo { aspect-ratio: 1; }
.prospectus__photo img, .shop__photo img { width: 100%; height: 100%; object-fit: cover; }
.coded { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-box) solid var(--color-ink); }
.coded__cell + .coded__cell { border-left: var(--rule-box) solid var(--color-ink); }
.coded__cell a { display: block; padding: var(--space-md); font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.05rem; text-decoration: none; }
.coded__cell--blue, .shop__fill--blue, .course__bar--blue, .swatch--blue { background: var(--color-accent); color: var(--color-accent-ink); }
.coded__cell--red, .shop__fill--red, .course__bar--red, .swatch--red { background: var(--color-accent-2-deep); color: var(--color-accent-ink); }
.coded__cell--yellow, .shop__fill--yellow, .course__bar--yellow, .swatch--yellow { background: var(--color-accent-3); color: var(--color-ink); }
.coded__cell--blue a, .coded__cell--red a, .shop__fill--blue a, .shop__fill--red a { color: var(--color-accent-ink); }

/* Dates as a ruled schedule. */
.schedule { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.schedule__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); align-items: baseline; padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.schedule__date { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1; }
.schedule__what { font-size: 1.0625rem; }
.schedule__row.is-past { color: var(--color-muted); }
.schedule__row.is-past .schedule__date { color: var(--color-muted); }

/* The shops: a photograph, its primary, its courses. */
.shops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-box) solid var(--color-ink); }
.shop { display: grid; grid-template-rows: auto auto 1fr; }
.shop + .shop { border-left: var(--rule-box) solid var(--color-ink); }
.shop__photo { aspect-ratio: 1; border-bottom: var(--rule-box) solid var(--color-ink); }
.shop__fill { padding: var(--cell-pad); border-bottom: var(--rule-box) solid var(--color-ink); }
.shop__name { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.6rem; margin-bottom: var(--space-xs); }
.shop__fill p { font-size: 0.9375rem; }
.shop__courses { list-style: none; margin: 0; padding: var(--space-xs) var(--cell-pad) var(--cell-pad); }
.shop__courses li { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.shop__courses li span { display: block; font-size: 0.875rem; color: var(--color-muted); }
.shop__courses a { font-weight: 600; }

/* Tables and lists. */
.ledger { width: 100%; border-collapse: collapse; border-top: var(--rule-bar) solid var(--color-ink); font-size: 0.9688rem; }
.ledger th { padding: var(--space-sm) var(--space-md) var(--space-xs); text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.ledger th.r { text-align: right; }
.ledger td { padding: var(--space-sm) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger__link { font-weight: 600; }
.ledger__progress { width: 30%; }
.shop-tag { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; white-space: nowrap; }
.swatch { display: inline-block; width: 14px; height: 14px; border: var(--rule-hair) solid var(--color-ink); flex: none; }
.ruled-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.ruled-list > li { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ruled-list a { font-weight: 600; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }

/* A course. */
.course { padding-block: var(--space-xl) var(--space-2xl); }
.course__bar { display: inline-block; padding: var(--space-xs) var(--space-md); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--space-md); }
.course__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); margin-top: var(--space-xl); }
.prose { max-width: 66ch; }
.prose p, .prose ol, .prose ul { margin: 0 0 var(--space-md); }
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: var(--space-xs); }
.prose--s { font-size: 0.9375rem; }
.course__tutor { margin-top: var(--space-md); }
.course__act { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.syllabus { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.syllabus__week { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.syllabus__wk { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; }
.syllabus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }

/* The student's courses. */
.mine { display: grid; margin-top: var(--space-lg); border: var(--rule-box) solid var(--color-ink); }
.mine__course { display: grid; grid-template-columns: 120px minmax(0, 1fr) 260px; }
.mine__course + .mine__course { border-top: var(--rule-box) solid var(--color-ink); }
.mine__fill { display: grid; place-items: center; padding: var(--space-sm); font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; border-right: var(--rule-box) solid var(--color-ink); }
.mine__main { padding: var(--cell-pad); display: grid; gap: var(--space-xs); }
.mine__title { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; }
.mine__title a { text-decoration: none; }
.mine__next { padding: var(--cell-pad); border-left: var(--rule-box) solid var(--color-ink); display: grid; align-content: center; gap: var(--space-2xs); }
.mine__lesson { font-weight: 600; }
.mine__done { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; }
.progress { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); }
.progress__bar { height: 14px; border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.progress__bar span { display: block; height: 100%; background: var(--color-ink); }
.progress__text { font-size: 0.875rem; color: var(--color-muted); }

/* A lesson. */
.lesson-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); align-items: start; }
.lessons-nav { border: var(--rule-box) solid var(--color-ink); padding: var(--cell-pad); position: sticky; top: var(--space-md); }
.lessons-nav__course { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.lessons-nav__course a { text-decoration: none; }
.lessons-nav ol { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.lessons-nav__item a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: var(--space-xs); align-items: center; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; font-size: 0.9375rem; }
.lessons-nav__item a:hover .lessons-nav__title { text-decoration: underline; text-decoration-thickness: 2px; }
.lessons-nav__item a[aria-current="page"] { font-weight: 700; }
.lessons-nav__item a[aria-current="page"] .lessons-nav__n { background: var(--color-ink); color: var(--color-paper); }
.lessons-nav__n { display: grid; place-items: center; height: 24px; border: var(--rule-bar) solid var(--color-ink); font-size: 0.8125rem; font-weight: 700; }
.lessons-nav__mark { width: 14px; height: 14px; border: var(--rule-bar) solid var(--color-ink); }
.is-done .lessons-nav__mark { background: var(--color-ink); }
.lesson__where { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--space-sm); }
.lesson h1 { margin-bottom: var(--space-lg); }
.completion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-ink); }
.completion__done { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.25rem; }
.tick { width: 18px; height: 18px; background: var(--color-ink); }
.lesson__steps { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }
.lesson__step { font-weight: 600; }
.lesson__step--next { text-align: right; }

/* Forms as a ruled sheet. */
.sheet { border: var(--rule-box) solid var(--color-ink); margin-top: var(--space-lg); }
.sheet__cell { margin: 0; padding: var(--cell-pad); border: 0; border-bottom: var(--rule-box) solid var(--color-ink); display: grid; gap: var(--space-xs); }
.sheet__cell legend { float: left; width: 100%; font-weight: 700; margin-bottom: var(--space-xs); padding: 0; }
.sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--cell-pad); }
.field__label { font-size: 0.875rem; font-weight: 600; color: var(--color-muted); }
textarea, input[type="number"], input[type="text"] { width: 100%; padding: var(--space-sm); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: var(--color-paper-3); color: var(--color-ink); font: inherit; }
textarea:focus, input:focus { outline: var(--rule-box) solid var(--color-focus); outline-offset: 0; }
.choice { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) 0; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--color-ink); margin: 0; }
.sheet--grade { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.sheet--grade .sheet__cell--score { border-right: var(--rule-box) solid var(--color-ink); }
.sheet--grade .sheet__foot { grid-column: 1 / -1; justify-content: flex-end; }

/* Quizzes. */
.quiz { margin-top: var(--space-xl); }
.quiz__score { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 2rem; }
.quiz__review { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.quiz__review li { padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); position: relative; }
.quiz__review li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-sm) + 4px); width: 12px; height: 12px; border: var(--rule-bar) solid var(--color-ink); }
.quiz__review li.is-right::before { background: var(--color-ink); }
.quiz__q { font-weight: 700; }

/* Discussion. */
.comments { list-style: none; margin: 0; padding: 0; border-top: var(--rule-bar) solid var(--color-ink); }
.comment { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.comment__who { display: flex; gap: var(--space-sm); align-items: baseline; }
.comment__who .sub { display: inline; }
.comment-form { display: grid; gap: var(--space-xs); margin-top: var(--space-md); justify-items: start; }

/* Work and marking. */
.marked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: center; margin-top: var(--space-lg); padding: var(--cell-pad); border: var(--rule-box) solid var(--color-ink); }
.marked__score { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 2.6rem; line-height: 1; }
.to-mark { display: grid; gap: var(--space-xl); }
.to-mark__item { border-top: var(--rule-box) solid var(--color-ink); padding-top: var(--space-md); }
.to-mark__title { font-size: 1.25rem; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; }
.to-mark .prose { margin-top: var(--space-sm); }

/* Sign in and the outbox. */
.people { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border: var(--rule-box) solid var(--color-ink); }
.person { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--cell-pad); }
.person + .person { border-top: var(--rule-box) solid var(--color-ink); }
.person__name { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 1.5rem; }
.outbox { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); margin-top: var(--space-lg); align-items: start; }
.mail-list a { display: grid; text-decoration: none; }
.mail-list a[aria-current="true"] span:first-child { text-decoration: underline; text-decoration-thickness: 3px; }
.letter { border: var(--rule-box) solid var(--color-ink); background: var(--color-paper-3); padding: var(--space-lg); }
.letter__head { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: 0 0 var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-bar) solid var(--color-ink); }
.letter__head dt { color: var(--color-muted); font-weight: 600; }
.letter__head dd { margin: 0; }

/* The colophon. */
.colophon { margin-top: var(--space-3xl); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-lg) 0 var(--space-xl); font-size: 0.875rem; }
.colophon p { max-width: 74ch; }
.colophon__credit { margin-top: var(--space-xs); color: var(--color-muted); }

@media (max-width: 60rem) {
  .prospectus, .course__body, .lesson-layout, .outbox, .split { grid-template-columns: minmax(0, 1fr); }
  .lessons-nav { position: static; }
  .shops { grid-template-columns: minmax(0, 1fr); }
  .shop + .shop { border-left: 0; border-top: var(--rule-box) solid var(--color-ink); }
  .figures--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures--five > li { border-bottom: var(--rule-box) solid var(--color-ink); margin-bottom: calc(var(--rule-box) * -1); }
  .mine__course { grid-template-columns: 88px minmax(0, 1fr); }
  .mine__next { grid-column: 1 / -1; border-left: 0; border-top: var(--rule-box) solid var(--color-ink); }
}
@media (max-width: 40rem) {
  .masthead__inner { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); }
  .nav { order: 3; width: 100%; }
  .who { display: none; }
  .schedule__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > li { border-bottom: var(--rule-box) solid var(--color-ink); margin-bottom: calc(var(--rule-box) * -1); }
  .sheet--grade { grid-template-columns: minmax(0, 1fr); }
  .sheet--grade .sheet__cell--score { border-right: 0; }
  .person { flex-direction: column; align-items: flex-start; }
  .ledger { display: block; overflow-x: auto; }
  .ledger--courses { display: table; }
  .ledger--courses .sub, .col-wide { display: none; }
}