/* Uppskriftir Hugrúnar: the stylesheet. Palette, type and ornament from docs/DESIGN.md. */

/* Fraunces as Google Fonts serves it with SOFT 100 and WONK 0 fixed (soft, calm shapes), keeping
   the optical size and weight axes: latin subset, variable woff2. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-soft-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fraunces-soft-italic-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url(/assets/fonts/source-serif-4-italic-latin.woff2) format("woff2");
}

/* Palette (DESIGN.md, Colour). No beige: the page is white, and the colour comes from Icelandic
   plants. Each plant has a bright tone for drawings, a deep tone that passes WCAG AA as text
   on white and on every tint, and a pale tint for surfaces. site/tests/test_design.py checks
   both rules. */
:root {
  --page: #fff;
  --ink: #22272A;           /* Basalt Ink: headings and text */
  --ink-soft: #5A6164;      /* grey, for secondary text only */
  --pen: #44484A;           /* the drawings' ink line */
  --mist: #D8E2E5;          /* Glacier Mist */
  --mist-pale: #EDF2F4;
  --line: #DCE3E6;          /* hairlines */
  --field: #87959B;         /* the search box's edge, 3:1 on white */
  --leaf: #6E9A5B;
  --leaf-deep: #3F6B3A;

  --reyniber: #E55033;   --reyniber-deep: #AA3527;   --reyniber-tint: #FFEAE6;    /* rowan berry */
  --eyrarros: #D94393;   --eyrarros-deep: #A22965;   --eyrarros-tint: #FEEAF2;    /* dwarf fireweed */
  --soley: #F8C829;      --soley-deep: #8B5800;      --soley-tint: #FFF1AB;       /* meadow buttercup */
  --birki: #7AB146;      --birki-deep: #3A6830;      --birki-tint: #E8F5E1;       /* downy birch */
  --blodberg: #A75FB7;   --blodberg-deep: #783D90;   --blodberg-tint: #F7EBFC;    /* arctic thyme */
  --gleymmerei: #55A2E1; --gleymmerei-deep: #255B9C; --gleymmerei-tint: #E5F2FD;  /* forget-me-not */
  --kraekiber: #392F4B;  --kraekiber-deep: #423658;  --kraekiber-tint: #F0ECF7;   /* crowberry */

  --accent: var(--reyniber-deep);   /* links, the active filter, the toggles */

  /* A plant class (below) sets these three for what is inside it: its card, pill or recipe. */
  --bright: var(--reyniber);
  --deep: var(--accent);
  --tint: var(--mist-pale);

  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;

  --frame: 72rem;      /* header, footer, front page and recipe */
  --measure: 34rem;    /* running text: about 65 characters */
  --gap: clamp(1.25rem, 4vw, 2.5rem);
}

.plant-reyniber   { --bright: var(--reyniber);   --deep: var(--reyniber-deep);   --tint: var(--reyniber-tint); }
.plant-eyrarros   { --bright: var(--eyrarros);   --deep: var(--eyrarros-deep);   --tint: var(--eyrarros-tint); }
.plant-soley      { --bright: var(--soley);      --deep: var(--soley-deep);      --tint: var(--soley-tint); }
.plant-birki      { --bright: var(--birki);      --deep: var(--birki-deep);      --tint: var(--birki-tint); }
.plant-blodberg   { --bright: var(--blodberg);   --deep: var(--blodberg-deep);   --tint: var(--blodberg-tint); }
.plant-gleymmerei { --bright: var(--gleymmerei); --deep: var(--gleymmerei-deep); --tint: var(--gleymmerei-tint); }
.plant-kraekiber  { --bright: var(--kraekiber);  --deep: var(--kraekiber-deep);  --tint: var(--kraekiber-tint); }

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

html {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 112.5%;          /* 18px: recipes are read at arm's length, at the counter */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A column, so the footer sits at the foot of the window on a short page (about, the 404). */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* Type scale: Fraunces for display and headings (optical sizing follows the size, so large
   titles get its finer display cut), Source Serif 4 for reading. */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 440;
  font-optical-sizing: auto;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin-top: 1.5em; }
h3 { font-size: 1.2rem; }
p, li { text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Labels (category, kicker, a recipe's parts): spaced small capitals. */
.label, .recipe-body h2, .recipe-notes h2, .recipe-variants h2, .facts dt, .aw-page-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--deep);
}
.label a { color: inherit; text-decoration: none; }
.label a:hover, .label a:focus-visible { text-decoration: underline; }

/* Drawings: symbols in the page's <svg class="defs">, filled by class from the palette. The
   ink line keeps one width at any size. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ink { stroke: var(--pen); stroke-width: var(--stroke, 1px); stroke-linecap: round; stroke-linejoin: round; }
.ink * { vector-effect: non-scaling-stroke; }
.p-none { fill: none; }
.p-white { fill: #fff; }
.p-ink { fill: var(--pen); stroke: none; }
.p-shine { fill: #fff; stroke: none; }
.p-stamen { fill: var(--soley-deep); stroke: none; }
.p-leaf { fill: var(--leaf); }
.p-vein { fill: none; stroke: var(--birki-deep); stroke-width: calc(var(--stroke, 1px) * 0.7); }
.p-needle { fill: none; stroke: var(--leaf-deep); stroke-width: calc(var(--stroke, 1px) * 2.2); }
.p-floret { fill: none; stroke: var(--blodberg-tint); stroke-width: calc(var(--stroke, 1px) * 1.1); }
.p-reyniber { fill: var(--reyniber); }
.p-eyrarros { fill: var(--eyrarros); }
.p-eyrarros-deep { fill: var(--eyrarros-deep); }
.p-soley { fill: var(--soley); }
.p-soley-deep { fill: var(--soley-deep); }
.p-birki { fill: var(--birki); }
.p-blodberg { fill: var(--blodberg); }
.p-blodberg-deep { fill: var(--blodberg-deep); }
.p-gleymmerei { fill: var(--gleymmerei); }
.p-kraekiber { fill: var(--kraekiber); }

/* Header and footer */

.site-header, .site-footer { padding-inline: max(var(--gap), (100% - var(--frame)) / 2); }
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;   /* the nav and toggles go right, or wrap below on a phone */
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
}
.logo { width: 2.1rem; height: 2.1rem; flex: none; --stroke: 0.9px; }

/* The current page (or, on a recipe, its section) is underlined in the accent. */
.site-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gap));
  margin: 0 auto;
  padding: 3rem var(--gap) 5rem;
}
main.home, main.wide { max-width: calc(var(--frame) + 2 * var(--gap)); }

/* The footer's top edge is the ground the meadow grows from. */
.site-footer {
  padding-block: 0 3rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.ornament {
  display: block;
  width: 16rem;
  height: calc(16rem * 48 / 276);
  margin: calc(-16rem * 48 / 276) auto 0;
  --stroke: 0.75px;
}
.site-footer .label { margin: 1.25rem 0 0; color: var(--ink); }

/* Language and units. Each page is in one language (ADR 0003); the language toggle is a pair of
   links to this page in each language, so it works without JS. English recipe pages hold both
   unit systems and <html data-units> picks one; the units toggle needs JS, so it stays hidden
   without it. Icelandic pages have no units toggle. */

[data-units="metric"] .u-imperial,
[data-units="imperial"] .u-metric { display: none !important; }

.toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toggle.toggle-units { display: none; }
.js .toggle.toggle-units { display: inline-flex; }

.toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}
.toggle a,
.toggle button {
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  min-height: 2.25rem;     /* a fingertip target at the counter */
  padding: 0.2rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.toggle a { display: inline-flex; align-items: center; text-decoration: none; }
.toggle a[aria-current],
[data-units="metric"] [data-set-units="metric"],
[data-units="imperial"] [data-set-units="imperial"] {
  background: var(--accent);
  color: #fff;
}

/* A phone: the title and the language toggle share the top row, the nav the row below, so the
   content starts soon after. On English pages the units toggle follows, at the right. */
@media (max-width: 40em) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.2rem 0.5rem;
    padding-block: 0.6rem 0;
  }
  .toggles { display: contents; }
  .site-title { grid-area: 1 / 1; margin: 0; font-size: 1rem; gap: 0.45rem; white-space: nowrap; }
  .logo { width: 1.6rem; height: 1.6rem; }
  .toggle:not(.toggle-units) { grid-area: 1 / 2; }
  .site-nav { grid-area: 2 / 1 / 3 / 3; gap: 0 1.25rem; }
  .toggle-units { grid-area: 3 / 1 / 4 / 3; justify-self: end; margin-bottom: 0.6rem; }
  .toggle a, .toggle button { min-height: 2rem; padding-inline: 0.55rem; }
  main { padding-top: 2rem; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Front page: hero, then the search, pills and grid. Without JS the full grid shows and the
   pills and search stay hidden. The grid steps down from 4 columns to 1. */

.hero {
  display: grid;
  gap: 2rem 4rem;
  align-items: center;
  margin-bottom: clamp(2.75rem, 7vw, 4.5rem);
}
.hero .label { margin: 0; color: var(--accent); }
.hero h1 { font-size: clamp(3rem, 8vw, 5.4rem); font-weight: 360; line-height: 1; margin: 0.25em 0 0.4em; }
.hero-line { font-size: 1.2rem; line-height: 1.55; max-width: 30rem; margin: 0; text-wrap: balance; }
.hero-art { margin: 0; }
.hero-art img { display: block; width: 100%; height: auto; border-radius: 3px; }
/* With its picture, the hero sets it beside the text on wider screens; without, the text alone. */
@media (min-width: 48em) {
  .hero:has(> .hero-art) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* The search box, then the pills: eight pills don't leave room beside them, so the search comes
   first, in reading and focus order alike. */
.finder { display: none; }
.js .finder {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.search { max-width: 22rem; }
.search input {
  font: inherit;
  font-size: 0.95rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.3rem 0.75rem 0.3rem 2.4rem;
  border: 1px solid var(--field);
  border-radius: 3px;
  color: var(--ink);
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2344484A' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.5 12.5 17 17'/%3E%3C/svg%3E") no-repeat 0.75rem center / 1rem;
}
.search input:focus-visible { outline-offset: 1px; }
.search input::placeholder { color: var(--ink-soft); opacity: 1; font-style: italic; }
@media (max-width: 40em) {
  .search { max-width: none; }
}

/* Each category's pill carries its plant's colour as a dot, and is filled with it when chosen. */
.pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pills button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: inherit;
  font-size: 0.85rem;
  min-height: 2.5rem;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink);
  cursor: pointer;
}
.pills button[class]::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--bright);
}
.pills button:hover { border-color: var(--deep); }
.pills [aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: #fff; }
.pills button[class][aria-pressed="true"]::before { background: var(--page); }
/* On a phone the pills stay in one row that scrolls sideways, edge to edge; the row fades out at
   the right and the last pill in view is cut off, both hints that there are more. */
@media (max-width: 40em) {
  .pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gap));
    padding: 4px 2.5rem 4px var(--gap);   /* room for the focus ring; the last pill clears the fade */
    scroll-padding-inline: var(--gap);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .pills::-webkit-scrollbar { display: none; }
  .pills button { flex: none; padding-inline: 0.65rem; font-size: 0.8rem; white-space: nowrap; }
}

.recipe-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.75rem 1.75rem;
}
@media (min-width: 30em) { .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 50em) { .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 66em) { .recipe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* A card is its picture, label and title: no box around it. The title's link covers the card.
   Cards out of sight are not laid out or painted until the reader nears them; until then each
   holds about its height (then the height it last had), so the page doesn't jump. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  content-visibility: auto;
  contain-intrinsic-block-size: auto 18rem;
}
.card[hidden] { display: none; }
.card:has(.card-title a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
.card-art {
  aspect-ratio: 3 / 2;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A recipe without its picture yet: its text alone, a little larger, under a rule in its plant's colour. */
.card-text { border-top: 3px solid var(--bright); padding-top: 1rem; contain-intrinsic-block-size: auto 8rem; }
.card-text .card-title { font-size: 1.6rem; }
.card .label { margin: 0 0 0.2rem; font-size: 0.85rem; }
.card-title {
  font-size: 1.25rem;
  font-weight: 420;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:focus-visible { outline: none; }  /* the card shows the focus ring */
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card-title a { text-decoration: underline; text-decoration-color: var(--deep); }
/* Who it came from, and her ♥/★, right under the title: secondary, so in grey. */
.card-from { margin: 0.35rem 0 0; font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.card-from [role="img"] { margin-left: 0.15em; color: var(--accent); font-style: normal; }
.card-from [role="img"]:first-child { margin-left: 0; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  margin: 0;
  text-align: center;
  font-style: italic;
}
.empty[hidden] { display: none; }
.flourish { width: 2rem; height: 2rem; --stroke: 0.8px; }

/* Recipe page: read and cook at the counter. The ingredients, then the method, side by side on
   wide screens; text at a reading measure; numbered steps that hang in the margin; the amounts
   in a column. The recipe's category colours its labels and numerals. */

.recipe-head { max-width: 46rem; margin-bottom: 3rem; }
.recipe-head .label { margin: 0 0 0.5rem; }
.recipe h1 { overflow-wrap: break-word; hyphens: auto; margin-bottom: 0.4em; }

.mark { margin: 0 0 0.75rem; font-style: italic; }
.mark [aria-hidden] { color: var(--accent); font-style: normal; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 1.25rem 0;
}
.facts dt { font-size: 0.85rem; }
.facts dd { margin: 0; }

.recipe-body { display: grid; gap: 3rem 4.5rem; align-items: start; }
@media (min-width: 56rem) {
  .recipe-body { grid-template-columns: minmax(15rem, 20rem) minmax(0, var(--measure)); }
}
.recipe-body h2,
.recipe-notes h2,
.recipe-variants h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--deep);
}
.recipe-body h3 {
  font-style: italic;
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}
.recipe-body h2 + h3 { margin-top: 0.25rem; }

/* The amounts in a column, right-aligned so the numbers line up; an ingredient without one
   lines up with the others' names. Each line is a row of the list's grid (subgrid). On a recipe
   the column belongs to the whole Ingredients part, so every section's list shares one width
   and the items start at the same place under Botnar and Krem alike. */
.ingredients,
.recipe-ingredients {
  display: grid;
  grid-template-columns: fit-content(6.5em) minmax(0, 1fr);
  column-gap: 0.75em;
}
@media (min-width: 30em) {
  .ingredients, .recipe-ingredients { grid-template-columns: fit-content(8.5em) minmax(0, 1fr); }
}
.recipe-ingredients > * { grid-column: 1 / -1; }
.recipe-ingredients > .ingredients { grid-template-columns: subgrid; }
/* Margins don't collapse in a grid: keep the spacing they gave as plain blocks. */
.recipe-ingredients > .ingredients:not(:last-child) { margin-bottom: 0; }
.recipe-ingredients > h2 + h3 { margin-top: 0; }
.ingredients {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.ingredients li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}
.ingredients li > .u-metric, .ingredients li > .u-imperial { display: contents; }
.amount { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.ingredients .amount { grid-column: 1; text-align: right; }  /* in an .item ("to taste") it stays inline */
.ingredients .item { grid-column: 2; }
.aside { font-size: 0.9em; font-style: italic; }

.steps { margin: 0 0 1.5rem; padding-left: 2.25rem; }
.steps li { margin-bottom: 1.1rem; padding-left: 0.4rem; }
.steps li::marker {
  font-family: var(--font-heading);
  font-size: 1.3em;
  font-variant-numeric: lining-nums;
  color: var(--deep);
}

.recipe-notes, .recipe-variants { max-width: 46rem; margin-top: 3.5rem; }
.tips { padding-left: 1.2rem; max-width: var(--measure); }
.tips li { margin-bottom: 0.6rem; }
.tips li::marker { color: var(--deep); }
.variant { max-width: 26rem; }
.variant h3 { font-size: 1.2rem; font-style: italic; margin: 1.75rem 0 0.5rem; }
.variant-section { font-weight: 600; margin: 1rem 0 0.25rem; }

/* "Eins og hún skrifaði það" / "As she wrote it" (site/README.md §2): collapsed under the
   recipe. Each page: her photo, then her text verbatim, line for line, marked as on her page.
   Wide screens set the photo beside its text. */

.as-written {
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
}
.as-written > summary {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.as-written > summary::-webkit-details-marker { display: none; }
.as-written > summary::before {
  content: "+";
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--deep);
  width: 1rem;
}
.as-written[open] > summary::before { content: "−"; }
.as-written > summary h2 { margin: 0; font-size: 1.6rem; }
.aw-page + .aw-page { margin-top: 3rem; }
.aw-page-label { margin: 0 0 0.75rem; }
.aw-photo { margin: 0 0 1.5rem; }
.aw-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.aw-text { max-width: var(--measure); line-height: 1.6; }
.aw-block + .aw-block { margin-top: 1rem; }
.aw-line { display: block; white-space: pre-wrap; overflow-wrap: break-word; }
.aw-title { font-family: var(--font-heading); font-size: 1.3rem; }
.aw-label { font-weight: 600; }
.aw-rule { border: 0; border-top: 1px solid currentColor; opacity: 0.5; margin: 0.75rem 0; }

/* Her marks */
.aw-text del { text-decoration-thickness: 1.5px; }
.aw-circled, .aw-boxed {
  border: 1.5px solid currentColor;
  padding: 0 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.aw-circled { border-radius: 1em; }
.aw-boxed { border-radius: 2px; }
.aw-added { font-size: 0.85em; vertical-align: 0.3em; line-height: 1; }
.aw-margin, .aw-caption { font-size: 0.9em; font-style: italic; }
.aw-unclear { background: var(--soley-tint); border-radius: 2px; }
button.aw-unclear {
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
button.aw-unclear.aw-circled, button.aw-unclear.aw-boxed { border: 1.5px solid currentColor; padding: 0 0.3em; }
button.aw-unclear:focus-visible { outline-offset: 1px; }
/* Other readings: on hover, keyboard focus, or a tap (site.js flips aria-expanded). Hover only
   where there is a pointer that hovers, so a second tap on a phone hides them again. */
.aw-alt { display: none; font-size: 0.85em; font-style: italic; margin-left: 0.25em; }
.aw-unclear:focus-visible + .aw-alt,
.aw-unclear[aria-expanded="true"] + .aw-alt { display: inline; }
@media (hover: hover) {
  .aw-unclear:hover + .aw-alt { display: inline; }
}

@media (min-width: 56rem) {
  .aw-page:has(> .aw-photo) {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, var(--measure));
    column-gap: 4.5rem;
    align-items: start;
  }
  .aw-page-label { grid-column: 1 / -1; }
  .aw-photo { margin-bottom: 0; }
}

/* About, the Advent story and the 404: a page of text, its heading centred like a chapter's,
   over a holtasóley between two hairlines. */
.prose-page > h1, .story-note, .story > .label { text-align: center; }
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}
.divider::before, .divider::after { content: ""; width: 4.5rem; border-top: 1px solid var(--line); }
.divider .flourish { width: 1.9rem; height: 1.9rem; }
.prose-page .lead { font-size: 1.25rem; line-height: 1.65; }
.story-note { font-style: italic; margin: 0; }
.story > .label { margin: 0.4rem 0 0; color: var(--accent); }
/* The story opens with a large initial, as in a book. */
.story > .divider + p::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-size: 4.3em;
  line-height: 0.78;
  padding: 0.06em 0.08em 0 0;
  color: var(--accent);
}