/* ink — Cutthroat Barbers, Fitzroy. A two-colour job on one sheet of paper:
   warm stock, a warm printing black, and Prussian blue.
   Bodoni Moda (self-hosted subset, SIL OFL 1.1) against Constantia.
   Nothing on this page moves: zero transitions, zero animations. */

@font-face {
  font-family: "Bodoni Moda Subset";
  src: url("bodonimoda-subset.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Five colours. Measured ratios are in the README's token table. */
  --bg: #f3eced;        /* the sheet: uncoated stock with the spot in it */
  --ink: #14120f;       /* the first colour: a warm printing black */
  --accent: #1b4a66;    /* the second colour: Prussian blue, the engraver's ink */
  --accent-ink: #f3eced;/* what prints on the second colour */
  --muted: #5b5449;     /* the ink let down, for second-voice text */
  --rule: #8a8375;      /* hairlines, and the second voice on the plate */

  --display: "Bodoni Moda Subset", "Bodoni MT", Didot, "Playfair Display", Georgia, serif;
  --text: Constantia, "Iowan Old Style", Charter, Georgia, serif;

  /* The type scale. Seven sizes, no more. */
  --t-title: clamp(2.5rem, 5.2vw, 5rem);
  --t-spine: clamp(2.375rem, 3.2vw, 2.875rem);
  --t-head: clamp(1.5rem, 3vw, 2.5rem);
  --t-fig: clamp(1.5rem, 2.3vw, 2rem);
  --t-lede: clamp(1.1875rem, 1.55vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;

  /* The sheet's own measurements. Every column and every rule comes from
     these four, which is why the page lines up. */
  --pad: clamp(0.875rem, 1.6vw, 1.5rem);
  --margin: clamp(2.25rem, 9vw, 8.5rem);
  --gutter: clamp(0.75rem, 3.3vw, 3rem);
  --measure: 30rem;

  /* Spacing. Four steps, used for everything. */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: clamp(2rem, 4.4vw, 3.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 700; }
p, dl, ol, ul, blockquote, figure, table { margin: 0; }

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: var(--s2);
  z-index: 2;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
/* The spot is 1.97:1 on the plate, so the ring turns to paper there. */
.leaf--plate :focus-visible { outline-color: var(--bg); }

/* ---------------------------------------------------------------------------
   The sheet. A trim rule down each side, running the whole page.
--------------------------------------------------------------------------- */

.sheet {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--pad);
  border-inline: 1px solid var(--rule);
}

/* The page grid. Margin, measure, notes. Everything on the page sits on one
   of these four lines, including every internal split. */
.leaf,
.colophon,
.body,
.close,
.foot,
.turns li {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, var(--measure)) minmax(0, 1fr);
  column-gap: var(--gutter);
}

.leaf { padding-block: var(--s4); row-gap: var(--s3); }
.leaf + .leaf { border-top: 1px solid var(--ink); }
.leaf > * { grid-column: 2 / 3; }

/* Prose never runs wider than the measure, whatever column it lands in. */
.leaf p { max-width: var(--measure); }

/* ---------------------------------------------------------------------------
   Masthead
--------------------------------------------------------------------------- */

.masthead { border-bottom: 0; }

.masthead__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding-block: var(--s2);
  border-bottom: 3px solid var(--ink);
}

.masthead__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
}

.masthead__act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ---------------------------------------------------------------------------
   Buttons and the number
--------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  padding: 0.6rem 1.1rem;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--small { font-size: 1.0625rem; padding: 0.45rem 0.85rem; }
.btn--out { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.btn--out:hover { background: var(--rule); border-color: var(--rule); color: var(--ink); }

.ring {
  display: inline-block;
  padding: 0.35rem 0;
  min-height: 1.75rem;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
.ring:hover { color: var(--ink); }
.ring--out { color: var(--bg); }
.ring--out:hover { color: var(--rule); }

.act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s3);
}

/* ---------------------------------------------------------------------------
   The spine: the wordmark set vertically in the sheet's margin.
   Twice on the page, and it is the only vertical type here.
--------------------------------------------------------------------------- */

.spine {
  grid-column: 1 / 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-spine);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: stretch;
  justify-self: start;
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: 0.12em;
  /* No overflow guard, because the box grows with the word: the spine's
     height is its text length, so a longer wordmark makes the row taller
     instead of climbing into the headline. Measured at 4, 8, 9, 10, 11 and
     12 characters; scrollHeight equals clientHeight at every one. What a
     long wordmark costs is page height, and the count table says how much. */
}

/* Only the title page's spine sets a depth. The closing plate's takes its
   height from the plate, so one long wordmark cannot inflate two sections.
   The hero's spine also carries the one mark on this page that is not made of
   letters: a solid ink rule down the left edge of the margin, which is the
   inked edge of a press sheet and the thing that names the design when the
   type is taken away. */
.leaf--title .spine {
  min-height: 7.3em;
  /* border-right, not left: the spine is rotated 180 degrees, so the
     physical right edge is the one that paints on the left of the letters. */
  border-right: 10px solid var(--ink);
  padding-right: 0.45rem;
}

.spine--out {
  border-inline-start-color: var(--rule);
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
}

/* ---------------------------------------------------------------------------
   Hero: the title page
--------------------------------------------------------------------------- */

.leaf--title { padding-block: var(--s4) var(--s4); }

.title {
  grid-column: 1 / -1;
  font-size: var(--t-title);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.colophon { grid-column: 1 / -1; row-gap: var(--s3); }
.colophon__say { grid-column: 2 / 3; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.4;
  max-width: 30rem;
}

.particulars {
  grid-column: 3 / 4;
  align-self: stretch;
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: var(--gutter);
  font-size: var(--t-small);
}
.particulars dt {
  font-family: var(--text);
  font-weight: 700;
  font-size: var(--t-small);
  color: var(--muted);
}
.particulars dd {
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule);
  max-width: 26rem;
}
.particulars dd:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------------------
   Headings
--------------------------------------------------------------------------- */

.head {
  font-size: var(--t-head);
  line-height: 1.05;
  letter-spacing: -0.012em;
  grid-column: 2 / -1;
}

/* A heading that carries a marginal note shares its row with it, so the two
   tops sit on the same line. */
.head:has(+ .note) { grid-column: 2 / 3; grid-row: 1; }

p.note {
  grid-column: 3 / 4;
  /* Spans the heading and the tariff, so the notes column is used for the
     whole depth of the section rather than for one line of it. */
  grid-row: 1 / span 2;
  align-self: stretch;
  border-inline-start: 1px solid var(--rule);
  padding-inline-start: var(--gutter);
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 26rem;
}

/* ---------------------------------------------------------------------------
   The tariff
--------------------------------------------------------------------------- */

.tariff {
  grid-column: 2 / 3;
  width: 100%;
  border-collapse: collapse;
  caption-side: top;
}

.tariff__cap {
  text-align: left;
  font-size: var(--t-small);
  color: var(--muted);
  padding-bottom: var(--s1);
  border-bottom: 3px solid var(--ink);
}

.tariff th {
  text-align: left;
  font-weight: 400;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.tariff td {
  text-align: right;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  white-space: nowrap;
}

.tariff tr:last-child th,
.tariff tr:last-child td { border-bottom: 3px solid var(--ink); }

.tariff__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
}

.tariff__of {
  display: block;
  color: var(--muted);
  font-size: var(--t-small);
  max-width: 30rem;
}

.tariff__fig {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-fig);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   The turns: three steps, numbered in the margin
--------------------------------------------------------------------------- */

.turns {
  grid-column: 1 / 3;
  list-style: none;
  padding: 0;
  counter-reset: turn;
  display: block;
}

.turns li {
  display: block;
  position: relative;
  counter-increment: turn;
  padding: var(--s2) 0 var(--s2) calc(var(--margin) + var(--gutter));
  border-bottom: 1px solid var(--rule);
}
.turns li:first-child { border-top: 1px solid var(--rule); }

.turns li::before {
  content: counter(turn);
  position: absolute;
  left: 0;
  top: var(--s2);
  width: var(--margin);
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

/* ---------------------------------------------------------------------------
   About
--------------------------------------------------------------------------- */

.body { grid-column: 1 / -1; row-gap: var(--s3); }
.body__say { grid-column: 2 / 3; }
.body__say p + p { margin-top: var(--s2); }

.said {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 3px solid var(--ink);
}
.said p {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-lede);
  line-height: 1.25;
}
.said cite {
  display: block;
  margin-top: var(--s1);
  font-style: normal;
  font-size: var(--t-small);
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Photographs. Two slots. The frame is a ruled panel either way, and the
   caption is the panel's content when the slot is empty.
--------------------------------------------------------------------------- */

.plate {
  grid-column: 2 / -1;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s2);
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.plate--wide img { aspect-ratio: 12 / 5; }
.plate--tall img { aspect-ratio: 4 / 5; }

.plate--wide.is-empty { grid-column: 2 / 3; }

.plate--tall {
  grid-column: 3 / 4;
  align-self: stretch;
  max-width: 18rem;
}

.plate__cap {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--t-lede);
  line-height: 1.3;
  max-width: 30rem;
}
.plate:not(.is-empty) .plate__cap {
  margin-top: var(--s2);
  font-family: var(--text);
  font-size: var(--t-small);
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   The closing plate: the sheet printed the other way up
--------------------------------------------------------------------------- */

.leaf--plate {
  background: var(--ink);
  color: var(--bg);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  border-top: 3px solid var(--ink);
}
.leaf--plate .head { color: var(--bg); }

.close { grid-column: 1 / -1; }
.close__say { grid-column: 2 / -1; }
.close__say .lede { max-width: 34rem; }
.leaf--plate p { max-width: 34rem; }

.head--out { margin-bottom: var(--s2); }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.leaf--foot { border-top: 3px solid var(--ink); }

.foot { grid-column: 1 / -1; row-gap: var(--s3); }
.foot__where { grid-column: 2 / 3; }
.foot__where a { color: var(--accent); }
.foot__where a:hover { color: var(--ink); }

.address {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-lede);
  line-height: 1.25;
  margin-bottom: var(--s2);
}

.foot__where p a,
.lines a {
  display: inline-block;
  padding: 0.3rem 0;
  min-height: 1.75rem;
}

.lines {
  grid-column: 3 / 4;
  align-self: stretch;
  max-width: 26rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lines a { color: var(--accent); }
.lines a:hover { color: var(--ink); }
.lines li { border-bottom: 1px solid var(--rule); }
.lines li:first-child { border-top: 1px solid var(--rule); }

.when {
  grid-column: 3 / 4;
  align-self: stretch;
  width: 100%;
  border-collapse: collapse;
  caption-side: top;
  max-width: 26rem;
  font-size: var(--t-small);
}
.when__cap {
  text-align: left;
  color: var(--muted);
  /* The hairline above the caption puts this column's first rule on the same
     line as the first rule of the steps beside it. */
  border-top: 1px solid var(--rule);
  padding-block: var(--s1);
  border-bottom: 3px solid var(--ink);
}
.when th {
  text-align: left;
  font-weight: 400;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.when td {
  text-align: right;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}

p.colour {
  grid-column: 2 / -1;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 26rem;
}

/* Cut the three turns and the heading drops into the measure so the hours
   sit beside it, the way the tariff's heading sits beside its marginal.
   This is the path the README offers when a brief has no visit to describe. */
#how:not(:has(.turns)) .head { grid-column: 2 / 3; grid-row: 1; }

/* ---------------------------------------------------------------------------
   Narrow: the notes column folds under the measure, the margin stays.
--------------------------------------------------------------------------- */

@media (min-width: 48em) {
  :root { --t-body: 1.125rem; }
}

@media (min-width: 62em) {
  /* A book page, not a poster: the text goes up to 20px and the title stays
     under four times it. No other design in the nine sits in that gap. */
  :root { --t-body: 1.25rem; }

  /* The closing statement is set at the title's own size, so the back of the
     sheet answers the front and the plate is a block of ink with words across
     it rather than words in its top left corner. */
  .leaf--plate .head { font-size: var(--t-title); }
}

@media (max-width: 61.99em) {
  .leaf--title .spine { border-right-width: 6px; padding-right: 0.3rem; }

  .leaf,
  .colophon,
  .body,
  .close,
  .foot {
    grid-template-columns: var(--margin) minmax(0, 1fr);
  }

  .leaf > *,
  .head,
  .tariff,
  .plate,
  .plate--tall,
  p.note,
  .particulars,
  .foot__where,
  .lines,
  .when,
  p.colour,
  .close__say { grid-column: 2 / -1; }

  .turns { grid-column: 1 / -1; }
  .title,
  .colophon,
  .body,
  .close,
  .foot { grid-column: 1 / -1; }

  p.note,
  .particulars {
    grid-row: auto;
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--rule);
    padding-top: var(--s2);
  }

  .plate--wide.is-empty { grid-column: 2 / -1; }

  .plate--tall {
    max-width: none;
    align-self: auto;
  }
  .plate--tall img { aspect-ratio: 3 / 2; }

  .when { align-self: auto; max-width: none; }
}

@media (max-width: 34.99em) {
  :root { --s4: 1.5rem; --s3: 1.5rem; }
  .leaf { row-gap: var(--s2); }
  .leaf--title .spine { font-size: 2.375rem; }
  .title { line-height: 1; }
}

/* ---------------------------------------------------------------------------
   Forced colours. Every rule on this page is a border, so the structure
   survives; these three lines put back what the mode would flatten.
--------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .leaf--plate { border: 1px solid CanvasText; }
  .spine, .tariff__fig, .turns li::before { color: CanvasText; }
}