/*! Sam Horwitz's Classic Cocktail Compendium
 * ---------------------------------------------------------------------------
 * A derivative work of The Proportional Web.
 *
 * Copyright 2026 Oskar Wickström   — original work
 *   https://github.com/owickstrom/the-proportional-web
 *   forked from v0.1.0, index.css last modified 2026-07-11
 * Copyright 2026 Samuel Horwitz    — modifications
 *   https://github.com/samuelhorwitz/cocktails
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 * DEALINGS IN THE SOFTWARE.
 * ------------------------------------------------------------------------- */

/* A fork, not a layer. Upstream rules are edited in place rather than
 * overridden from a second stylesheet: when the heading treatments were moved
 * two levels down, the original selectors kept their rules and fought the new
 * ones, so a page title inherited h3's italic through a property the
 * replacement never thought to unset.
 *
 * Fonts are linked from the document head rather than @import-ed here, which
 * would serialise four round trips before a glyph could render.
 *
 * Signals, one job each:
 *   italic      foreign words; and, inside a bottle annotation, the qualifier
 *   small caps  headings; a canonical name at first mention in prose; the
 *               bottle in an annotation; acronyms
 *   roman       everything else
 */


/* src/reset.css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* src/base.css */
:root {
  --font-family: "Alegreya", serif;
  --font-family-code: "Courier Prime", monospace;
  --line-height: 1.20rem;
  --border-thickness: 1.5px;
  --text-color: #000;
  --background-color: #fff;
  --horizontal-margin: 3ch;
  --body-inner-width: 66ch;
  --body-max-width: calc(var(--body-inner-width) + var(--horizontal-margin) * 2);
  --font-weight-normal: 450;
  --font-weight-medium: 600;
  --font-weight-bold: 800;
  font-family: var(--font-family);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
* + * {
  margin-top: var(--line-height);
}

/* src/headings.css */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-normal);
  margin: calc(var(--line-height) * 2) 0 var(--line-height);
  line-height: var(--line-height);
}
/* Headings are TPW's, moved down two levels.
 *
 * The top two are spoken for: h1 is the nameplate — 224 pages carry exactly
 * one, none carries two, and no markdown file holds a `# ` heading — and h2
 * is the subtitle beneath it. So TPW's three treatments land on h3, h4 and
 * h5, which is where the markup already puts a page title, a section and a
 * sub-section. Content runs #### / ##### / ###### for the same reason and
 * needs no editing.
 *
 * The rule beneath the chapter head is dropped; entries are separated by a
 * divider between them instead, which is where the old theme put the break.
 *
 * was TPW's `body h1` — a page title. */
h3 {
  font-family: "Alegreya SC", serif;
  font-variant: titling-caps;
  font-size: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* Centred, departing from TPW, which ranges every heading left. h3 is only
   * ever a drink's name — the title of the article, not a heading inside it —
   * and on a phone a ranged-left title reads as another line of the section
   * above rather than the start of something.
   *
   * The indent pays for the tracking: letter-spacing is added after the final
   * character as well as between, so a centred run is laid out including a
   * trailing space that is not there visually, leaving it half a track left
   * of true centre. */
  text-align: center;
  text-indent: 0.15em;
}
/* was TPW's h2 — a variation, or a content #### section. */
h4 {
  font-family: "Alegreya SC", serif;
  font-size: 1.25rem;
  font-variant: all-small-caps;
  font-weight: 450;
  line-height: var(--line-height);
  letter-spacing: 0.125em;
}
/* was TPW's h3 — a content ##### heading. h6 is left unstyled, as TPW leaves
 * its own deepest level; only pages/rum.md reaches that far. */
h5 {
  font-style: italic;
  margin: var(--line-height) 0;
}

/* Apostrophes inside letterspaced small caps.
 *
 * Two faults meet on the same character, and one span fixes both.
 *
 * Horizontally, letter-spacing is uniform: it adds the same gap after every
 * character, on top of the kerning the designer tuned per pair. A pair drawn
 * tight — Z’S — is pushed apart exactly as far as one already loose, and the
 * apostrophe ends up floating between two gaps. Zeroing the track on the mark
 * alone tucks it back against the letter it belongs to. A negative margin as
 * well overshoots and collides it into the preceding letter.
 *
 * Vertically, Alegreya SC draws a shortened apostrophe that tops out level
 * with the small caps — 29.2 against 28.3 at 56px. Metal had no such thing:
 * small caps were separate sorts and punctuation was not duplicated, so the
 * roman apostrophe went into the stick and stood proud of the letters, and a
 * compositor could not have lowered it in any case since a sort sits where it
 * is cast. Raising it a little recovers that logic without importing the
 * roman mark wholesale, which at 36.5 is larger than small caps want.
 *
 * The span is emitted by layouts/partials/apostrophes.html. */
/* Scoped to the letterspaced headings. Both faults only exist where the text
 * is tracked and set in small caps; an apostrophe in running prose is already
 * correct, and raising it there would introduce the very error this fixes.
 * Scoping means a stray wrap in body text is inert rather than wrong.
 *
 * .value is the bottle name in an annotation — the third run on the site set
 * in tracked small caps, and subject to the same faults. */
h3 .apos,
h4 .apos,
.note .value .apos {
  letter-spacing: 0;
  position: relative;
  top: -0.08em;
}

/* Emphasis nested inside emphasis inverts rather than compounding, so a
 * foreign word inside an italic heading is set roman. pages/rum.md carries
 * "Martinican _rhum agricole_" as a heading. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: normal;
}

/* src/tables.css */
table {
  width: 100%;
  border-collapse: collapse;
  margin: calc(var(--line-height) * -0.5) 0 calc(var(--line-height) * 1.5);
  padding: 0;
}
th,
td {
  padding: calc(var(--line-height) / 2) .5ch;
  line-height: var(--line-height);
  vertical-align: top;
  text-align: left;
}
th {
  font-size: 1.125em;
  font-variant: all-small-caps;
  font-weight: 500;
  letter-spacing: 0.075em;
}
thead tr:last-child th {
  border-bottom: var(--border-thickness) solid var(--text-color);
}

/* src/blockquotes.css */
blockquote {
  padding: 0;
  margin: var(--line-height) 3ch;
}
blockquote p {
  text-indent: 0;
  white-space: normal;
}
/* The quotation marks are in the text now, emitted by render-blockquote.html,
 * not drawn here. Generated content is its own text run and kerning does not
 * cross an element boundary, so “T and .” — the two pairs that most need it —
 * were set with none, and Justif could neither measure nor hang a mark it
 * could not see. */
blockquote footer {
  order: 9999;
  margin-top: var(--line-height);
  font-style: normal;
}
blockquote footer > * {
  margin: 0;
}
blockquote .author {
  font-family: "Alegreya SC", serif;
  font-size: 1.125em;
  font-variant: all-small-caps;
  font-weight: 450;
  line-height: var(--line-height);
  letter-spacing: 0.075em;
  height: 1rem;
  line-height: 1rem;
}
blockquote cite {
  font-style: italic;
  margin: 0;
  line-height: var(--line-height);
}
blockquote .year {
  display: block;
}

/* src/details.css */
details {
  margin: var(--line-height) 0;
  border-top: var(--border-thickness) solid var(--text-color);
  border-bottom: var(--border-thickness) solid var(--text-color);
  padding: var(--line-height) 0;
}
summary {
  font-weight: var(--font-weight-normal);
  font-style: italic;
  cursor: pointer;
}
details[open] summary {
  margin-bottom: var(--line-height);
}
details ::marker {
  content: "";
}
/* WebKit does not use ::marker for a summary — it draws
 * ::-webkit-details-marker instead, so on iOS the native triangle appeared
 * alongside the » this design supplies. list-style covers the browsers that
 * have since moved summary to a list-item display. */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  display: inline-block;
  content: "\bb";
  margin: 0 .5ch 0 0;
  font-style: normal;
}
details[open] summary::before {
  transform: rotate(90deg);
}
details :last-child {
  margin-bottom: 0;
}

/* src/asides.css */
aside {
  position: relative;
  font-size: 0.875rem;
  line-height: var(--line-height);
  margin: var(--line-height) 0;
}
/* TPW's marker is an inline-block ::before, which generates a line box of its
 * own once the aside holds a <p>, as markdown gives it. */
aside:before {
  display: inline-block;
  content: "\2767";
  float: left;
  font-size: 1rem;
  height: .875rem;
  margin-right: .5ch;
  line-height: var(--line-height);
}

/* Ragged at every width. In the margin an aside is 20ch, far too narrow to
 * justify; TPW sets text-align:left inside its min-width:95ch block only, so
 * an aside written in markdown picks up the global justification the moment
 * it falls inline. */
aside, aside p { text-align: left; hyphens: none; }
@media screen and (min-width: 95ch) {
  aside {
    position: absolute;
    width: 20ch;
    top: anchor(top);
    left: 100%;
    margin: 0;
    text-align: left;
  }
  aside:before {
    display: none;
  }
  p + aside + p {
    margin-top: 0;
    text-indent: 3ch;
  }
}

/* src/figures.css */
figure {
  margin: calc(var(--line-height) * 2) var(--horizontal-margin);
  overflow-x: auto;
  overflow-y: hidden;
}
figure > *:first-child {
  margin-top: 0;
}
figure > *:last-child {
  margin-bottom: 0;
}
figcaption {
  display: block;
  margin-top: var(--line-height);
}
figcaption .author {
  font-family: "Alegreya SC", serif;
  font-size: 1.125em;
  font-variant: all-small-caps;
  font-weight: 450;
  line-height: var(--line-height);
  letter-spacing: 0.075em;
  height: 1rem;
  line-height: 1rem;
}
figcaption cite {
  font-style: italic;
  margin: 0;
  line-height: var(--line-height);
}
figure pre {
  margin: 0;
}

/* src/elements.css */
/* Rules are the old theme's ornaments. TPW draws a full-width line with ❧ on
 * it; the line is kept for a plain hr and the glyph dropped, then reinstated
 * for the two ornaments.
 *
 *   ⁂  the divider above a cocktail's extended notes
 *   ❦  page furniture: closes the masthead, opens the footer
 *   ☞  a pointer elsewhere: See Also
 *   ❧  the aside's mark when it falls inline */
hr {
  position: relative;
  display: block;
  height: var(--line-height);
  margin: calc(var(--line-height) * 1.5) 0;
  border: none;
  color: var(--text-color);
}
hr:before {
  display: block;
  content: "";
  position: absolute;
  top: calc(var(--line-height) / 2);
  left: 0;
  width: 100%;
  border-top: var(--border-thickness) solid var(--text-color);
  height: 0;
}
hr:after { content: none; }

hr.asterism:before { content: none; border: none; }
hr.asterism:after {
  content: '⁂';
  position: static; display: block; width: auto;
  font-size: 1rem; font-weight: 400;
  line-height: var(--line-height); text-align: center;
}

hr.fleuron { height: auto; margin: 0.5em 0; text-align: center; }
hr.fleuron:before { content: none; border: none; }
hr.fleuron:after {
  content: '❦';
  position: static; display: block; width: auto;
  font-size: 1rem;
  line-height: var(--line-height); text-align: center;
}
a {
  text-decoration-thickness: var(--border-thickness);
}
a:link,
a:visited {
  color: var(--text-color);
}
p {
  margin: var(--line-height) 0 0;
  text-align: justify;
  word-break: break-all;
}
p + p {
  margin-top: 0;
  text-indent: 3ch;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p,
hr + p {
  text-indent: 0;
}
strong {
  font-weight: var(--font-weight-bold);
}
em {
  font-style: italic;
}
/* A named work. TPW italicises cite inside a quotation only, so the Savoy
 * Cocktail Book set roman in a sentence while Casino Royale, named under a
 * quotation, set italic — the same kind of thing typeset two ways. This is
 * not a third job for italic: the blockquote footer already gives it this
 * one, and prose now agrees with it. */
cite {
  font-style: italic;
}
abbr {
  font-size: 1.125em;
  font-variant: all-small-caps;
  font-weight: 500;
  letter-spacing: 0.05em;
}
sub {
  position: relative;
  display: inline-block;
  margin: 0;
  vertical-align: sub;
  line-height: 0;
  width: calc(1ch / 0.75);
  font-size: .75rem;
}
p {
  word-break: break-word;
  text-wrap: pretty;
  hyphens: auto;
  hyphenate-limit-chars: 3;
}
img,
video { display: block; width: 100%; object-fit: contain; }

/* A plate rule. Halftones — the only way a photograph could be printed in
 * this period — were routinely boxed with a fine rule at the image edge.
 * 0.5pt resolves to one device pixel at 2x. A border, not a box-shadow:
 * figures are clipped with overflow-x below, and a shadow drawn outside the
 * border box is computed and then clipped away. */
figure img { border: 0.5pt solid var(--text-color); }
img {
  font-style: italic;
  color: var(--text-color);
}
pre {
  white-space: pre;
  margin: var(--line-height) 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
pre,
code {
  font-family: var(--font-family-code);
  font-weight: 450;
}
code {
  font-size: .95em;
  letter-spacing: -0.025em;
}
ul,
ol {
  padding: 0;
  margin: 0 0 var(--line-height);
}
ul {
  list-style-type: none;
  padding: 0;
}
ul li:before {
  content: "\2022";
  margin-right: 1ch;
}
ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}
ol ul,
ol ol,
ul ol,
ul ul {
  padding: 0 0 0 2ch;
  margin: 0;
}
ol li:before {
  font-size: .875rem;
  font-weight: 500;
  content: counters(item, ".") ". ";
  counter-increment: item;
}
li {
  margin: 0;
  padding: 0;
}
li::marker {
  line-height: 0;
}

/* src/layout.css */
html {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-direction: column;
  align-items: left;
  background: var(--background-color);
  color: var(--text-color);
}
body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: var(--line-height) var(--horizontal-margin);
  max-width: var(--body-max-width);
  line-height: var(--line-height);
  overflow-x: hidden;
}
@media screen and (min-width: 112ch) {
  html {
    align-items: center;
  }
}
@media screen and (max-width: 480px) {
  :root {
    font-size: 14px;
  }
  body {
    padding: var(--line-height) 1.5ch;
  }
}
@media print {
  body {
    max-width: initial;
  }
  body > h1,
  img {
    break-before: page;
  }
}

/* src/header.css */
header {
  margin: calc(var(--line-height) * 3) 0;
}
header h1 {
  font-family: "Alegreya SC", serif;
  font-variant: all-small-caps;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: calc(2 * var(--line-height));
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
header .subtitle {
  font-size: 1.25rem;
  line-height: calc(2 * var(--line-height));
  margin: calc(var(--line-height) * .5) 0;
}
header p {
  text-indent: 0;
  text-align: left;
}

/* src/extras.css */
.canonical-name {
  font-family: "Alegreya SC", serif;
  font-size: 1.125em;
  font-variant: all-small-caps;
  font-weight: 450;
  line-height: var(--line-height);
  letter-spacing: 0.075em;
}

/* src/index.css */

/* ===========================================================================
 * The compendium's own devices
 * ======================================================================== */

/* ------------------------------------------------------------------ *
 * Nameplate — the site's, not TPW's. h1 is only ever this.
 * ------------------------------------------------------------------ */

.nameplate { margin-bottom: calc(var(--line-height) * 2); text-align: center; }
.nameplate p, nav.pages { text-align: center; }

.nameplate .title {
  font-family: var(--font-family);
  font-variant: normal;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: none;
  padding: 0;
  font-weight: var(--font-weight-normal);
  font-size: 2.25rem;
  line-height: calc(var(--line-height) * 2);
  margin: 0;
}
.nameplate .title a { text-decoration: none; color: inherit; }

.nameplate .subtitle {
  font-family: "Alegreya SC", serif;
  font-variant: all-small-caps;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.22em;
  margin: var(--line-height) auto 0;
  width: 18em;
  max-width: 100%;
  border-top: var(--border-thickness) solid var(--text-color);
  border-bottom: var(--border-thickness) solid var(--text-color);
  /* Centring the line box leaves the ink low: small caps reach ~7.4px above
   * the baseline and, but for the parentheses, 2px below. Splitting the
   * leading by hand and lifting 0.17em evens the gaps without changing the
   * overall height. */
  line-height: var(--line-height);
  padding-top: calc(var(--line-height) * 0.5 - 0.17em);
  padding-bottom: calc(var(--line-height) * 0.5 + 0.17em);
  /* CSS adds tracking after the final character as well as between, so a
   * centred run is laid out including a trailing space that is not there
   * visually — leaving the text half a track left of true centre, 1.76px at
   * this size. Indenting by the full track pays for it at the front. */
  text-indent: 0.22em;
}

nav.pages { margin-top: var(--line-height); }
nav.pages a {
  font-family: "Alegreya SC", serif;
  font-variant: all-small-caps;
  letter-spacing: 0.08em;
  text-decoration: none;
  margin: 0 1.5ch;
}
nav.pages a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Divider between entries
 *
 * Where a list page runs several recipes together, the break goes between
 * them rather than under each heading — which is why the chapter head lost
 * its rule. Short and centred, as the old theme had it, but drawn at the
 * rule weight and in text black rather than the old 60% grey.
 * ------------------------------------------------------------------ */

article + article::before,
article:not(:first-of-type)::before {
  content: '';
  display: block;
  width: 20rem;
  max-width: 60%;
  margin: calc(var(--line-height) * 2) auto;
  border-top: var(--border-thickness) solid var(--text-color);
}

/* ------------------------------------------------------------------ *
 * The ingredient list
 * ------------------------------------------------------------------ */

ul.ingredients { list-style: none; padding: 0; margin-top: var(--line-height); }

/* TPW bullets every list item. A recipe is a specification, not an
 * enumeration — the measures are the structure. */
ul.ingredients > li:before { content: none; margin: 0; }

/* Half a line between items. At the bare rhythm unit they butt together and
 * an annotation reads as belonging to whichever ingredient follows it. */
ul.ingredients > li + li { margin-top: calc(var(--line-height) * 0.5); }
ul.ingredients > li { margin-top: 0; line-height: var(--line-height); }

/* Alternatives. The old theme set this "or" in a script face, the only
 * reason a third typeface existed on the site. */
ul.ingredients .alt {
  font-family: "Alegreya SC", serif;
  font-variant: all-small-caps;
  font-style: normal;
  letter-spacing: 0.08em;
  padding: 0 0.75ch;
}

/* The bottle annotation.
 *
 * Name first: it is the information and the qualifier is apparatus. The
 * bottle takes small caps as a name being identified — the cataloguing case,
 * unlike the same brand mentioned in passing a line above. The comma stays
 * roman, belonging to the construction rather than the word, and a sloped
 * comma against upright small caps reads as a blemish. The qualifier is
 * italic as editorial apparatus, and reduced, being the least of the three.
 *
 * TPW's `* + *` would give this a line of top margin: it continues the line
 * above rather than starting a block. */
.note {
  display: block;
  margin-top: 0;
  font-size: inherit;
  text-indent: 3ch;
  line-height: var(--line-height);
}
.note .value {
  font-family: "Alegreya SC", serif;
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
}
/* The parts of an annotation that are not the name: the "and" joining two
 * bottles of a blend, the "blend of" introducing them, and an origin added to
 * distinguish one bottling from another. The author's words rather than the
 * label's, which is the qualifier's footing exactly — so they take the
 * qualifier's treatment, reduced size included, and differ from it only in
 * being roman where it is italic.
 *
 * The reduction also settles an optical problem. Small caps sit near the
 * x-height, so roman set at the same nominal size reads larger beside them,
 * and a connective at full size out-shouted the name it was joining. */
.note .value .conj {
  font-family: var(--font-family);
  font-variant: normal;
  letter-spacing: normal;
  font-size: 0.85rem;
}
.note .sep {
  font-family: var(--font-family);
  font-variant: normal;
  font-style: normal;
  letter-spacing: normal;
}
.note .qual {
  font-family: var(--font-family);
  font-variant: normal;
  font-style: italic;
  letter-spacing: normal;
  font-size: 0.85rem;
}

/* A canonical name at its first mention in prose. Bringhurst's example is
 * running text — "on the islands of LOMBOK, BALI, FLORES…" — because the mark
 * separates the name from the words beside it. Later mentions, and brands
 * named in passing, stay roman. */
.canonical-name {
  font-family: "Alegreya SC", serif;
  font-variant: all-small-caps;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------------ *
 * Footnotes
 * ------------------------------------------------------------------ */

@counter-style footnote-symbols {
  system: symbolic;
  symbols: "*" "†" "‡" "§" "‖" "¶";
  /* Counter styles append ". " to list markers, and that suffix is not
   * applied to counter() inside content — so the endnote would read "*."
   * while its reference read "*". */
  /* An en space, not a thin one. Justif hangs an opening quotation mark into
   * the margin so the text edge reads flush, and in a list that margin holds
   * the marker — a note beginning with a quote backed it into the ‡. The
   * suffix sets the gap between marker and text, so widening it moves the
   * glyph clear without switching optical alignment off site-wide. */
  suffix: "\2002";
}

body { counter-reset: footnote-marker footnote-repeat; }

/* Reference marks sit on the baseline at near text size, not raised. The six
 * glyphs are not drawn on a common vertical — * sits high by design where
 * † and ‡ are full-height on the baseline — so raising them uniformly puts
 * the asterisk above the cap line. Superscripting belongs to numerals.
 * line-height:0 keeps the marker from adding ~5.5px to every line carrying
 * one; TPW styles sub but never sup. */
sup { vertical-align: baseline; position: static; top: auto; line-height: 0; }

.footnote-ref {
  text-decoration: none;
  color: inherit;
  /* Collapse Goldmark's numeral rather than deleting it: it stays in the DOM
   * for assistive technology while the symbol below is what is drawn. */
  font-size: 0;
}
sup[id*="fnref:"] > .footnote-ref { counter-increment: footnote-marker; }
.footnote-ref::after {
  content: counter(footnote-marker, footnote-symbols);
  /* rem, not em: the parent is font-size 0, which would take an em with it. */
  font-size: 0.85rem;
  white-space: nowrap;
}

/* A repeat must show note N's marker, but by then the count has passed N.
 * CSS can match the id yet not read N out of it, so the mapping is
 * enumerated into a second counter, kept separate so setting it never
 * perturbs the first. */
sup:not([id*="fnref:"]) > .footnote-ref::after {
  content: counter(footnote-repeat, footnote-symbols);
}
sup[id$="fnref1:1"] > .footnote-ref, sup[id$="fnref2:1"] > .footnote-ref { counter-set: footnote-repeat 1; }
sup[id$="fnref1:2"] > .footnote-ref, sup[id$="fnref2:2"] > .footnote-ref { counter-set: footnote-repeat 2; }
sup[id$="fnref1:3"] > .footnote-ref, sup[id$="fnref2:3"] > .footnote-ref { counter-set: footnote-repeat 3; }
sup[id$="fnref1:4"] > .footnote-ref, sup[id$="fnref2:4"] > .footnote-ref { counter-set: footnote-repeat 4; }
sup[id$="fnref1:5"] > .footnote-ref, sup[id$="fnref2:5"] > .footnote-ref { counter-set: footnote-repeat 5; }
sup[id$="fnref1:6"] > .footnote-ref, sup[id$="fnref2:6"] > .footnote-ref { counter-set: footnote-repeat 6; }
sup[id$="fnref1:7"] > .footnote-ref, sup[id$="fnref2:7"] > .footnote-ref { counter-set: footnote-repeat 7; }
sup[id$="fnref1:8"] > .footnote-ref, sup[id$="fnref2:8"] > .footnote-ref { counter-set: footnote-repeat 8; }

/* Notes keep their justification: they run the full measure, and at
 * 0.875rem that width carries more characters than the body does. They are
 * the text's own voice continued at the foot, where an aside is a voice
 * beside it. */
.footnotes { margin-top: calc(var(--line-height) * 2); font-size: 0.875rem; }
.footnotes hr { display: none; }
.footnotes ol { list-style-type: footnote-symbols; padding-left: 2.5ch; margin: 0; }

/* TPW numbers ordered lists through `ol li:before { content: counters(item) }`
 * rather than ::marker, which renders alongside the symbol as "* 1." */
.footnotes ol > li:before { content: none; }
.footnotes ol li { margin-top: var(--line-height); }
.footnotes ol li::marker { font-style: normal; }
.footnotes ol li p { margin: 0; line-height: var(--line-height); }

/* ------------------------------------------------------------------ *
 * See Also — plain; the ☞ marks where the list begins.
 * ------------------------------------------------------------------ */

.see-also { margin-top: calc(var(--line-height) * 2); }
/* An h4 in the markup, because that is its depth in the outline — but it
 * labels a list rather than opening a section, so it takes the quietest
 * heading treatment we have rather than the section head's small caps. That
 * is h5's italic.
 *
 * Italic here does not collide with italic-for-foreign-words: a heading is
 * not prose, and the same context that lets small caps mean "heading" above
 * and "canonical name" inside a sentence separates these too. The ☞ does the
 * rest of the marking. */
.see-also h4 {
  font-family: var(--font-family);
  font-variant: normal;
  font-style: italic;
  letter-spacing: 0;
  font-weight: var(--font-weight-normal);
  font-size: 1rem;
  line-height: var(--line-height);
  margin: 0;
}
.see-also h4::before { content: "\261E\FE0E"; margin-right: 1ch; }
.see-also ul { list-style: none; padding: 0; margin-top: 0; }
.see-also li { line-height: var(--line-height); margin-top: 0; }
.see-also li:before { content: none; margin: 0; }

/* ------------------------------------------------------------------ *
 * Colophon
 *
 * Folded into the copyright line rather than given a page or a link. A book
 * puts its colophon last and quiet, and the production credits and the
 * disclosure are the same kind of thing — how the object came to be.
 * ------------------------------------------------------------------ */

/* One and a half lines, not two. Read more already carries a line and a half
 * above it, and on the home page the two stack — the last entry ends, the
 * direction away from it sits below, and then the fleuron. Each gap looked
 * right alone and the sum did not. */
.site-footer { margin-top: calc(var(--line-height) * 1.5); }

/* Ordinary prose. It carried uppercase and letterspacing from the old theme,
 * making it the site's one full-caps line — and full caps want lining
 * figures, which Alegreya does not have. Plain text, and the question never
 * arises: old-style figures are correct against lowercase. */
.copyright { text-align: left; }

details.colophon {
  margin: var(--line-height) 0 0;
  /* TPW rules a details block top and bottom. The fleuron above already
   * closes the page, and a full-measure line under it made the ending twice
   * as loud as the design wants. */
  border-top: none;
  border-bottom: none;
  padding: var(--line-height) 0 0;
}
/* TPW italicises summary as an aside. A copyright is a statement. */
details.colophon > summary.copyright { font-style: normal; text-align: left; }
details.colophon[open] > summary.copyright { margin-bottom: var(--line-height); }
details.colophon h5 { margin-top: calc(var(--line-height) * 1.5); }


/* ------------------------------------------------------------------ *
 * Wiring for the generated site
 *
 * Everything above is the design as settled on the specimen, which is a
 * hand-written page. These are the joints where Hugo's output differs from
 * it.
 * ------------------------------------------------------------------ */

/* A list is not justified.
 *
 * Justification is a device for a block of running prose: it exists so a page
 * presents a clean rectangle, and it works because a paragraph has enough
 * lines to absorb the spacing it costs. A list is a set of discrete entries,
 * scanned rather than read through, and most entries are shorter than the
 * measure. Justify one and a two-line entry gets its first line hauled out to
 * full width while the second sits short — which makes an item look like a
 * fragment of a paragraph instead of one thing in a series. Books set lists,
 * indexes and contents ragged for that reason, and a recipe is the strongest
 * case of all: the ingredient list is a specification, which is why it lost
 * its bullets here. Measures are the structure, and stretching the words
 * between them is noise.
 *
 * This was invisible until a phone. Only p carries justification, and an
 * ingredient sits in a bare li — until one item gains an annotation, which
 * makes Goldmark render the whole list loose and wrap every item in a p. At
 * desktop measure those lines do not wrap, so nothing showed.
 *
 * The notes at the foot stay justified: they are prose, the text's own voice
 * continued, and they run the full measure. */
li,
li > p {
  text-align: left;
  hyphens: none;
}
.footnotes ol li p {
  text-align: justify;
  hyphens: auto;
}

/* Goldmark makes a list loose — wrapping every item in <p> — as soon as one
 * item carries a second block, which for a recipe means the first bottle
 * annotation. So the same ingredient list is tight or loose depending on
 * whether anything happens to be annotated, and the paragraph margins would
 * open it up on exactly those recipes. */
ul.ingredients > li > p { margin: 0; line-height: var(--line-height); }

/* The cover links to the full-size image. TPW underlines links in body text,
 * which on a wrapped photograph draws a line across the plate. */
figure a { display: block; text-decoration: none; margin: 0; }
figure a:hover { text-decoration: none; }

/* Home-page summaries are composited out of other pages' content, and carry
 * those pages' footnote references with them. Left visible they would draw
 * markers for notes that are not on the page, and — worse — increment the
 * counter, so the real pages' symbols would start from the wrong place.
 * display:none generates no box, which is what stops the increment. */
article.summary .footnote-ref,
p.composited .footnote-ref { display: none; }

/* The indexes: one line per entry, no bullets. These are lists in the
 * catalogue sense — the reader is scanning for a name, not reading down. */
ul.indexList { list-style: none; padding: 0; }
ul.indexList > li:before { content: none; margin: 0; }
ul.indexList > li { margin-top: 0; line-height: var(--line-height); }

/* Read more — set quietly to the right, as a turn-the-page direction rather
 * than part of the entry. The ☞ is the same hand that marks See Also. */
/* A full line of air above it: at the bare rhythm unit it read as the last
 * line of the summary rather than as a direction away from it. Still ranged
 * right — it points off the page, and the eye leaves from the right. */
p.readMore { text-align: right; text-indent: 0; margin-top: calc(var(--line-height) * 1.5); }
p.readMore a { font-style: italic; text-decoration: none; }

/* A heading that links somewhere is still a heading. TPW underlines links in
 * running text, which is right there and wrong here: under letterspaced small
 * caps the rule runs through the descenders and turns a chapter head into a
 * button. Entry titles, variation heads and the nameplate are all links, and
 * on a list page that was every heading on the screen. "Read more ☞" and the
 * underlined links in the prose carry the affordance instead. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: underline; }