/* Press Monmouth - one centred measure, a drawer at the edge, a board that writes itself.
   Mobile first throughout: the only width query widens the measure and the weeks. */

:root {
  --pm-bg: #101c2b;
  --pm-surface: #17273a;
  --pm-ink: #eee6d2;
  --pm-brass: #c8a04a;
  --pm-slate: #6f93a8;

  --pm-bg-rgb: 16 28 43;
  --pm-surface-rgb: 23 39 58;
  --pm-ink-rgb: 238 230 210;
  --pm-brass-rgb: 200 160 74;
  --pm-slate-rgb: 111 147 168;

  --pm-focus: var(--pm-brass);
  --pm-measure: 33rem;
  --pm-wide: 46rem;
  --pm-gut: 1.15rem;
  --pm-step: 0.95rem;
  --pm-serif: "Prata", Georgia, "Times New Roman", serif;
  --pm-sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --pm-rule: 1px solid rgb(var(--pm-brass-rgb) / 0.3);
  --pm-hair: 1px solid rgb(var(--pm-ink-rgb) / 0.14);
}

/* ---- reset: focus handling, and heading margins zeroed so components own spacing ---- */

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address) {
  margin: 0;
}

:where(ul, ol) {
  padding-inline-start: 0;
  list-style: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--pm-focus);
  outline-offset: 3px;
}

:where(summary)::-webkit-details-marker {
  display: none;
}

/* ---- page ---- */

html {
  overflow-x: clip;
  scroll-padding-block-start: 4.5rem;
  -webkit-text-size-adjust: 100%;
}

.pm-body {
  margin: 0;
  background-color: var(--pm-bg);
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--pm-ink-rgb) / 0.022) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(var(--pm-ink-rgb) / 0.016) 0 1px, transparent 1px 6px);
  color: var(--pm-ink);
  font-family: var(--pm-sans);
  font-size: 1rem;
  line-height: 1.62;
  letter-spacing: 0.002em;
}

.pm-measure {
  width: 100%;
  max-width: var(--pm-measure);
  margin-inline: auto;
  padding-inline: var(--pm-gut);
}

.pm-skip {
  position: absolute;
  inset-inline-start: var(--pm-gut);
  inset-block-start: -4rem;
  z-index: 60;
  padding: 0.5rem 0.85rem;
  background-color: var(--pm-brass);
  color: var(--pm-bg);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: inset-block-start 200ms ease;
}

.pm-skip:focus {
  inset-block-start: 0.4rem;
}

/* ---- woven weft: two passes of thread, one warp, one weft ---- */

.pm-weft {
  background-color: var(--pm-surface);
  background-image:
    repeating-linear-gradient(90deg, rgb(var(--pm-ink-rgb) / 0.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgb(var(--pm-bg-rgb) / 0.55) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg, rgb(var(--pm-brass-rgb) / 0.05) 0 1px, transparent 1px 28px);
}

/* ---- header and the drawer trigger ---- */

.pm-top {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  border-block-end: var(--pm-rule);
  background-color: rgb(var(--pm-bg-rgb) / 0.93);
  backdrop-filter: blur(6px);
}

.pm-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block: 0.62rem;
}

.pm-brand {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 240ms ease;
}

.pm-brand:hover {
  color: var(--pm-brass);
}

.pm-brand__name {
  display: block;
  font-family: var(--pm-serif);
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.pm-brand__sub {
  display: block;
  color: var(--pm-slate);
  font-size: 0.705rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pm-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.44rem 0.72rem;
  border: 1px solid rgb(var(--pm-brass-rgb) / 0.55);
  color: var(--pm-brass);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

.pm-open:hover {
  background-color: rgb(var(--pm-brass-rgb) / 0.14);
  border-color: var(--pm-brass);
}

.pm-open__rules {
  width: 1.05rem;
  height: auto;
  transition: transform 300ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.pm-open:hover .pm-open__rules {
  transform: translateX(2px);
}

/* ---- the drawer: one mechanism, every width. :target carries it without JS ---- */

.pm-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 40;
  width: min(21.5rem, 87vw);
  visibility: hidden;
  transform: translateX(104%);
  background-color: var(--pm-surface);
  border-inline-start: 1px solid rgb(var(--pm-brass-rgb) / 0.42);
  box-shadow: -20px 0 48px rgb(var(--pm-bg-rgb) / 0.75);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 400ms linear;
}

.pm-drawer:target,
.pm-drawer.pm-drawer--open {
  visibility: visible;
  transform: translateX(0);
}

.pm-drawer__inner {
  padding: 1.5rem 1.3rem 2.2rem;
}

.pm-drawer__title {
  padding-block-end: 0.7rem;
  border-block-end: var(--pm-rule);
  color: var(--pm-brass);
  font-family: var(--pm-serif);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.pm-drawer__list {
  margin-block: 1.1rem 1.4rem;
}

.pm-drawer__list li {
  padding-block: 0.62rem;
  border-block-end: var(--pm-hair);
}

.pm-drawer__list a {
  display: block;
  padding-inline-start: 0.7rem;
  border-inline-start: 2px solid rgb(var(--pm-ink-rgb) / 0.2);
  color: var(--pm-ink);
  font-family: var(--pm-serif);
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  transition: padding-inline-start 220ms ease, border-color 220ms ease, color 220ms ease;
}

.pm-drawer__list a:hover {
  padding-inline-start: 1.05rem;
  border-inline-start-color: var(--pm-brass);
  color: var(--pm-brass);
}

.pm-drawer__list a[aria-current="page"] {
  border-inline-start-color: var(--pm-brass);
  border-inline-start-width: 4px;
  color: var(--pm-brass);
}

.pm-drawer__note {
  display: block;
  padding-inline-start: 0.78rem;
  color: var(--pm-slate);
  font-size: 0.775rem;
  line-height: 1.45;
}

.pm-drawer__close {
  display: inline-block;
  padding: 0.44rem 0.8rem;
  border: 1px solid rgb(var(--pm-slate-rgb) / 0.6);
  color: var(--pm-slate);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 220ms ease, color 220ms ease;
}

.pm-drawer__close:hover {
  border-color: var(--pm-ink);
  color: var(--pm-ink);
}

.pm-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background-color: rgb(var(--pm-bg-rgb) / 0.76);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms linear;
}

.pm-drawer:target ~ .pm-scrim,
.pm-drawer.pm-drawer--open ~ .pm-scrim {
  opacity: 1;
  visibility: visible;
}

.pm-locked {
  overflow: hidden;
}

/* ---- sections and headings: a brass rule sweeping under each one ---- */

.pm-main {
  display: block;
  padding-block: 2.1rem 1rem;
}

.pm-sec {
  padding-block: 1.7rem;
  border-block-end: var(--pm-hair);
}

.pm-sec:last-child {
  border-block-end: 0;
}

.pm-sec > .pm-measure > * + * {
  margin-block-start: var(--pm-step);
}

.pm-eyebrow {
  color: var(--pm-slate);
  font-size: 0.715rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pm-h1 {
  font-family: var(--pm-serif);
  font-size: clamp(1.78rem, 7.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.pm-h2 {
  display: inline-block;
  padding-block-end: 0.3rem;
  background-image: linear-gradient(90deg, var(--pm-brass) 0%, rgb(var(--pm-slate-rgb) / 0.55) 100%);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  animation: pm-sweep 760ms cubic-bezier(0.2, 0.7, 0.25, 1) 420ms both;
  font-family: var(--pm-serif);
  font-size: clamp(1.26rem, 5.1vw, 1.6rem);
  line-height: 1.22;
}

.pm-sec:nth-of-type(2) .pm-h2 { animation-delay: 560ms; }
.pm-sec:nth-of-type(3) .pm-h2 { animation-delay: 680ms; }
.pm-sec:nth-of-type(4) .pm-h2 { animation-delay: 800ms; }
.pm-sec:nth-of-type(5) .pm-h2 { animation-delay: 900ms; }
.pm-sec:nth-of-type(6) .pm-h2 { animation-delay: 980ms; }
.pm-sec:nth-of-type(7) .pm-h2 { animation-delay: 1040ms; }

@keyframes pm-sweep {
  from { background-size: 0 2px; }
  to { background-size: 100% 2px; }
}

.pm-h3 {
  font-family: var(--pm-serif);
  font-size: 1.07rem;
  font-weight: 400;
  line-height: 1.28;
}

.pm-h3--lead {
  margin-block-start: 1.5rem;
  padding-inline-start: 0.65rem;
  border-inline-start: 2px solid var(--pm-brass);
  color: var(--pm-ink);
}

.pm-lede {
  color: rgb(var(--pm-ink-rgb) / 0.95);
  font-size: 1.07rem;
  line-height: 1.58;
}

.pm-aside {
  padding: 0.9rem 1rem;
  border-inline-start: 2px solid rgb(var(--pm-slate-rgb) / 0.75);
  background-color: rgb(var(--pm-surface-rgb) / 0.75);
  font-size: 0.95rem;
}

.pm-guide {
  color: var(--pm-slate);
  font-size: 0.8rem;
  letter-spacing: 0.015em;
}

.pm-link {
  background-image: linear-gradient(90deg, var(--pm-brass), var(--pm-brass));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  color: var(--pm-brass);
  text-decoration: none;
  transition: background-size 260ms ease, color 260ms ease;
}

.pm-link:hover {
  background-size: 100% 2px;
  color: var(--pm-ink);
}

/* ---- the board: typed on load, one line struck and written again ---- */

.pm-boardframe {
  margin-block: 1.3rem;
  padding-block: 1.4rem 1.6rem;
  border-block: 1px solid rgb(var(--pm-brass-rgb) / 0.4);
}

.pm-boardframe__head {
  color: var(--pm-brass);
  font-size: 0.715rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.pm-board {
  margin-block-start: 1rem;
  font-family: var(--pm-serif);
  font-size: 0.97rem;
  line-height: 1.5;
}

.pm-board__line {
  padding-block: 0.52rem;
  border-block-end: 1px dotted rgb(var(--pm-ink-rgb) / 0.17);
  min-height: 1.5rem;
}

.pm-board__line:last-child {
  border-block-end: 0;
}

.pm-board__line--fix {
  color: var(--pm-brass);
}

.pm-board__line--fix .pm-board__text::before {
  content: "\2192\00a0";
  color: rgb(var(--pm-brass-rgb) / 0.8);
}

.pm-board__line--struck {
  color: rgb(var(--pm-ink-rgb) / 0.55);
}

.pm-board__line--struck del {
  text-decoration: line-through;
  text-decoration-color: var(--pm-brass);
  text-decoration-thickness: 2px;
}

.pm-board__text {
  display: inline;
}

/* with JS the strike is drawn rather than declared, so it can be drawn late */

/* the strike is a background on the inline run, not an absolute bar: at 320 px the
   line wraps, and an absolute bar only ever covers the first fragment of it.
   box-decoration-break: clone gives every wrapped fragment its own rule. */
.pm-js .pm-board__line--struck del {
  text-decoration: none;
  background-image: linear-gradient(to right, var(--pm-brass), var(--pm-brass));
  background-repeat: no-repeat;
  background-position: 0 0.60em;
  background-size: 0 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pm-js .pm-board__line--struck.pm-cut del {
  background-size: 100% 2px;
}

.pm-caret::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-inline-start: 0.14em;
  background-color: var(--pm-brass);
  vertical-align: -0.14em;
  animation: pm-caret 920ms steps(1, end) infinite;
}

@keyframes pm-caret {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

/* ---- drawn figures ---- */

.pm-fig {
  margin-block: 1.3rem;
  padding: 0.9rem 0.9rem 0.7rem;
  border: var(--pm-rule);
  background-color: rgb(var(--pm-surface-rgb) / 0.6);
}

.pm-fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.pm-fig figcaption {
  margin-block-start: 0.7rem;
  padding-block-start: 0.6rem;
  border-block-start: var(--pm-hair);
  color: var(--pm-slate);
  font-size: 0.79rem;
  line-height: 1.45;
}

.pm-crate,
.pm-plan {
  animation: pm-rule-draw 900ms ease 300ms both;
}

@keyframes pm-rule-draw {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- the archive: weeks as an accordion, breaking the measure ---- */

.pm-weeks {
  width: 100%;
  max-width: var(--pm-wide);
  margin-inline: auto;
  margin-block-start: 1.2rem;
  padding-inline: var(--pm-gut);
  /* the summary row answers to the width of THIS strip, not the window: on the
     sub-pages the accordion sits inside the measure and has far less room */
  container-type: inline-size;
}

.pm-week {
  border: 1px solid rgb(var(--pm-ink-rgb) / 0.16);
  border-block-end: 0;
  background-color: rgb(var(--pm-surface-rgb) / 0.55);
}

.pm-week:last-of-type {
  border-block-end: 1px solid rgb(var(--pm-ink-rgb) / 0.16);
}

.pm-week > summary {
  display: block;
  position: relative;
  padding: 0.85rem 2.6rem 0.85rem 0.95rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 240ms ease, color 240ms ease;
}

.pm-week > summary:hover {
  background-color: rgb(var(--pm-brass-rgb) / 0.09);
}

.pm-week > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 1.25rem;
  width: 0.62rem;
  height: 0.62rem;
  border-inline-end: 2px solid var(--pm-brass);
  border-block-end: 2px solid var(--pm-brass);
  transform: rotate(45deg);
  transition: transform 260ms ease;
}

.pm-week[open] > summary::after {
  transform: rotate(-135deg);
}

.pm-week[open] > summary {
  background-color: rgb(var(--pm-brass-rgb) / 0.08);
}

.pm-week__hint {
  display: block;
  color: var(--pm-slate);
  font-size: 0.775rem;
  letter-spacing: 0.02em;
}

@container (min-width: 34rem) {
  .pm-week > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
  }

  .pm-week__hint {
    flex: none;
    max-width: 14rem;
    text-align: end;
  }
}

.pm-week__body {
  padding: 0.3rem 0.95rem 1.1rem;
  border-block-start: var(--pm-hair);
  animation: pm-open-week 300ms ease both;
}

@keyframes pm-open-week {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.pm-week__body p + p {
  margin-block-start: 0.6rem;
}

.pm-week__body p {
  font-size: 0.92rem;
}

.pm-tag {
  display: inline-block;
  min-width: 4.6rem;
  margin-inline-end: 0.35rem;
  color: var(--pm-brass);
  font-size: 0.675rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ---- the two sums: inputs, then the working ---- */

.pm-form {
  margin-block: 1.2rem 0;
  padding: 1.1rem 1rem 1.2rem;
  border: var(--pm-rule);
}

.pm-form__title {
  color: var(--pm-brass);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pm-form__note {
  margin-block-start: 0.85rem;
  color: var(--pm-slate);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pm-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-block-start: 0.8rem;
  padding-block-end: 0.5rem;
  border-block-end: var(--pm-hair);
}

.pm-field label {
  font-size: 0.86rem;
  line-height: 1.4;
}

.pm-in {
  flex: none;
  width: 6.2rem;
  padding: 0.34rem 0.45rem;
  border: 1px solid rgb(var(--pm-ink-rgb) / 0.3);
  background-color: rgb(var(--pm-bg-rgb) / 0.7);
  color: var(--pm-ink);
  font-family: var(--pm-sans);
  font-size: 0.94rem;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.pm-in:hover {
  border-color: rgb(var(--pm-brass-rgb) / 0.7);
}

/* the ring is declared here too: a bare `outline: none` on :focus outruns the
   :where() reset above and leaves a field with a shadow and no ring at all */
.pm-in:focus {
  border-color: var(--pm-brass);
  box-shadow: 0 0 0 2px rgb(var(--pm-brass-rgb) / 0.28);
  outline: 2px solid var(--pm-focus);
  outline-offset: 2px;
}

/* a time field has to hold the browser's own clock control and, in a 12-hour
   locale, the AM/PM beside it - at the number width the meridiem is cut off */
.pm-in--time {
  width: 9rem;
}

.pm-in--wide {
  width: 8rem;
}

.pm-out {
  margin-block-start: 1.1rem;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid rgb(var(--pm-slate-rgb) / 0.45);
  background-color: rgb(var(--pm-surface-rgb) / 0.72);
}

.pm-out__fallback {
  font-size: 0.9rem;
}

.pm-out__head {
  color: var(--pm-slate);
  font-size: 0.705rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pm-out__steps {
  counter-reset: pm-step;
  margin-block-start: 0.8rem;
}

.pm-out__row {
  position: relative;
  padding: 0.6rem 0.2rem 0.6rem 2.1rem;
  border-block-end: 1px dotted rgb(var(--pm-ink-rgb) / 0.16);
  font-size: 0.9rem;
  transition: background-color 220ms ease;
}

.pm-out__row:hover {
  background-color: rgb(var(--pm-brass-rgb) / 0.06);
}

.pm-out__row::before {
  counter-increment: pm-step;
  content: counter(pm-step);
  position: absolute;
  inset-inline-start: 0.35rem;
  inset-block-start: 0.62rem;
  color: var(--pm-brass);
  font-family: var(--pm-serif);
  font-size: 0.82rem;
}

.pm-out__label {
  display: block;
  color: var(--pm-slate);
  font-size: 0.715rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pm-out__sum {
  display: block;
  font-family: var(--pm-serif);
  font-size: 0.99rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.pm-out__note {
  display: block;
  color: rgb(var(--pm-ink-rgb) / 0.8);
  font-size: 0.83rem;
  line-height: 1.45;
}

.pm-out__verdict {
  margin-block-start: 0.9rem;
  padding: 0.7rem 0.8rem;
  border-inline-start: 3px solid var(--pm-brass);
  background-color: rgb(var(--pm-bg-rgb) / 0.55);
  font-family: var(--pm-serif);
  font-size: 1.02rem;
  line-height: 1.38;
}

.pm-out__verdict--short {
  border-inline-start-color: var(--pm-slate);
}

.pm-out__warn {
  color: var(--pm-brass);
  font-size: 0.88rem;
}

/* ---- the batch sheet rows ---- */

.pm-sheet {
  margin-block-start: 0.9rem;
}

.pm-sheet__row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-block-start: 0.6rem;
  padding-block-end: 0.5rem;
  border-block-end: var(--pm-hair);
}

.pm-sheet__row label {
  flex: 1 1 auto;
  font-size: 0.86rem;
}

.pm-sheet__unit {
  flex: none;
  width: 2.6rem;
  color: var(--pm-slate);
  font-size: 0.8rem;
}

.pm-factor {
  display: block;
  margin-block-start: 0.5rem;
  color: var(--pm-brass);
  font-family: var(--pm-serif);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

/* ---- sub-page furniture ---- */

.pm-pagehead {
  padding-block: 2rem 1.4rem;
  border-block-end: var(--pm-rule);
}

.pm-pagehead .pm-h1 {
  font-size: clamp(1.6rem, 6.6vw, 2.15rem);
}

.pm-pagehead .pm-lede {
  margin-block-start: 0.85rem;
}

.pm-hours {
  margin-block-start: 1rem;
  border-block-start: var(--pm-hair);
}

.pm-hours > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  padding-block: 0.6rem;
  border-block-end: var(--pm-hair);
}

.pm-hours dt {
  color: var(--pm-ink);
  font-family: var(--pm-serif);
  font-size: 0.95rem;
}

.pm-hours dd {
  color: var(--pm-slate);
  font-size: 0.87rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.pm-steps {
  margin-block-start: 1rem;
  counter-reset: pm-stage;
}

.pm-steps > li {
  position: relative;
  padding: 0 0 0.95rem 2.3rem;
  border-inline-start: 1px solid rgb(var(--pm-brass-rgb) / 0.35);
  margin-inline-start: 0.4rem;
}

.pm-steps > li:last-child {
  border-inline-start-color: transparent;
  padding-block-end: 0;
}

.pm-steps > li::before {
  counter-increment: pm-stage;
  content: counter(pm-stage);
  position: absolute;
  inset-inline-start: -0.72rem;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  background-color: var(--pm-bg);
  border: 1px solid var(--pm-brass);
  border-radius: 50%;
  color: var(--pm-brass);
  font-family: var(--pm-serif);
  font-size: 0.76rem;
}

.pm-steps strong {
  display: block;
  color: var(--pm-ink);
  font-family: var(--pm-serif);
  font-weight: 400;
}

.pm-callout {
  margin-block-start: 1.2rem;
  padding: 1rem;
  border: 1px dashed rgb(var(--pm-brass-rgb) / 0.5);
  font-size: 0.93rem;
}

.pm-callout p + p {
  margin-block-start: 0.6rem;
}

.pm-facts {
  margin-block-start: 1rem;
}

/* narrow first: the term sits above its value, because a registered email is one
   long unbreakable word and a fixed term column pushes it off a 320 px screen */
.pm-facts > div {
  padding-block: 0.5rem;
  border-block-end: var(--pm-hair);
  font-size: 0.87rem;
}

.pm-facts dt {
  color: var(--pm-slate);
  font-size: 0.715rem;
  letter-spacing: 0.1em;
  padding-block-start: 0.15rem;
  text-transform: uppercase;
}

.pm-facts dd {
  margin-block-start: 0.12rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pm-back {
  display: inline-block;
  margin-block-start: 1.6rem;
  color: var(--pm-slate);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.pm-back:hover {
  color: var(--pm-brass);
}

/* ---- footer ---- */

.pm-foot {
  margin-block-start: 1.4rem;
  padding-block: 1.8rem 2.6rem;
  border-block-start: 1px solid rgb(var(--pm-brass-rgb) / 0.4);
  background-color: rgb(var(--pm-surface-rgb) / 0.8);
}

.pm-foot__name {
  font-family: var(--pm-serif);
  font-size: 0.93rem;
  letter-spacing: 0.08em;
}

.pm-foot__addr {
  margin-block-start: 0.7rem;
  color: rgb(var(--pm-ink-rgb) / 0.86);
  font-size: 0.86rem;
  font-style: normal;
  line-height: 1.55;
}

.pm-foot__reg {
  margin-block-start: 0.7rem;
  color: var(--pm-slate);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}

.pm-foot__mail {
  margin-block-start: 0.7rem;
  font-size: 0.86rem;
}

.pm-foot__mail a {
  color: var(--pm-brass);
  text-decoration-color: rgb(var(--pm-brass-rgb) / 0.45);
  text-underline-offset: 3px;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}

.pm-foot__mail a:hover {
  color: var(--pm-ink);
  text-decoration-color: var(--pm-ink);
}

/* ---- wider windows: the measure grows, the weeks sit beside their hints ---- */

@media (min-width: 46rem) {
  :root {
    --pm-measure: 36rem;
    --pm-gut: 1.6rem;
  }

  .pm-main {
    padding-block-start: 3rem;
  }

  .pm-sec {
    padding-block: 2.3rem;
  }

  .pm-board {
    font-size: 1.04rem;
  }

  .pm-field label {
    font-size: 0.9rem;
  }

  .pm-facts > div {
    display: flex;
    gap: 0.7rem;
  }

  .pm-facts dt {
    flex: none;
    width: 9.5rem;
  }

  .pm-facts dd {
    margin-block-start: 0;
  }
}

@media (min-width: 64rem) {
  .pm-boardframe {
    padding-block: 2rem 2.2rem;
  }
}

/* ---- print: the board and the facts, nothing else ---- */

@media print {
  .pm-body {
    background: #ffffff;
    color: #000000;
  }

  .pm-top,
  .pm-drawer,
  .pm-scrim,
  .pm-skip,
  .pm-form,
  .pm-back {
    display: none;
  }

  .pm-h2 {
    background: none;
    animation: none;
  }

  .pm-fig,
  .pm-out,
  .pm-week {
    border-color: #000000;
    background: none;
  }
}

/* ---- reduced motion: everything lands finished, including the rewrite ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .pm-h2 {
    background-size: 100% 2px !important;
  }

  .pm-js .pm-board__line--struck.pm-cut del {
    background-size: 100% 2px !important;
  }

  .pm-caret::after {
    display: none !important;
  }

  .pm-open:hover .pm-open__rules {
    transform: none !important;
  }

  .pm-crate,
  .pm-plan {
    opacity: 1 !important;
  }
}