/* ---------- The fonts, served from this site ----------
   Not from Google. Two reasons, and both matter. It is faster: a stylesheet from one host that then
   asks a second host for the files is two round trips before a single letter is drawn. And it is a
   third party fewer — a visitor's IP address leaves the site the moment the browser asks Google for
   a font, which for a Danish site is a question nobody needs to have.
   Geist and Geist Mono are OFL (Vercel); Instrument Serif is OFL (Rodrigo Fuenzalida, Jordan Egstad).
   The files are the standard latin subsets, so they carry ae, oe and aa. */
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Shapes of Blue — one stylesheet for every page.
   Tokens: Surface (light, Foam) and Deep (dark, Bioluminescence). Type: Instrument Serif italic for the names of the sea,
   Geist for reading, Geist Mono (lowercase, loose) as the instrument. */

:root {
  --ground: #E7ECE8; --ground-2: #DEE5E0; --ink: #0B2E36; --ink-2: #3D5A61; --muted: #4F676C;
  --line: #C2CFCA; --line-strong: #9DB0AC; --accent: #176F7B; --accent-ink: #F3F7F6;
  --thumb: #0B2E36; --thumb-ring: #E7ECE8; --toast-bg: #0B2E36; --toast-ink: #E7ECE8;
  --font-ui: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #06171E; --ground-2: #0A1F27; --ink: #D6E5E2; --ink-2: #A7BEBC; --muted: #7A969B;
    --line: #1B343C; --line-strong: #2C4A53; --accent: #5FD0C3; --accent-ink: #06171E;
    --thumb: #D6E5E2; --thumb-ring: #06171E; --toast-bg: #D6E5E2; --toast-ink: #06171E; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #06171E; --ground-2: #0A1F27; --ink: #D6E5E2; --ink-2: #A7BEBC; --muted: #7A969B;
  --line: #1B343C; --line-strong: #2C4A53; --accent: #5FD0C3; --accent-ink: #06171E;
  --thumb: #D6E5E2; --thumb-ring: #06171E; --toast-bg: #D6E5E2; --toast-ink: #06171E; color-scheme: dark;
}
:root[data-mode="surface"] {
  --ground: #E7ECE8; --ground-2: #DEE5E0; --ink: #0B2E36; --ink-2: #3D5A61; --muted: #4F676C;
  --line: #C2CFCA; --line-strong: #9DB0AC; --accent: #176F7B; --accent-ink: #F3F7F6;
  --thumb: #0B2E36; --thumb-ring: #E7ECE8; --toast-bg: #0B2E36; --toast-ink: #E7ECE8; color-scheme: light;
}
:root[data-mode="deep"] {
  --ground: #06171E; --ground-2: #0A1F27; --ink: #D6E5E2; --ink-2: #A7BEBC; --muted: #7A969B;
  --line: #1B343C; --line-strong: #2C4A53; --accent: #5FD0C3; --accent-ink: #06171E;
  --thumb: #D6E5E2; --thumb-ring: #06171E; --toast-bg: #D6E5E2; --toast-ink: #06171E; color-scheme: dark;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--ground); color: var(--ink);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  padding-inline: clamp(16px, 4vw, 56px); padding-block: 0 56px;
  -webkit-font-smoothing: antialiased; transition: background-color .35s ease, color .35s ease;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }
.wrap { max-width: 1240px; margin-inline: auto; }
.wide { max-width: 1320px; margin-inline: auto; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
em { font-family: var(--font-display); font-style: italic; font-size: 1.1em; }

/* ---------- Top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.brand strong { font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.brand span { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.nav a { font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
.seg button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); transition: background-color .2s ease, color .2s ease; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

/* ---------- Buttons ---------- */
.btn { appearance: none; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }
.btn.icon { padding: 9px 11px; }
.link { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------- Front page ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: end; padding-block: 48px 30px; }
.eyebrow { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; }
.hero h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(56px, 8.5vw, 112px); line-height: .92; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.hero p { margin: 0; max-width: 54ch; font-size: 16px; line-height: 1.55; }
.hero p + p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 8px 26px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { appearance: none; cursor: pointer; background: transparent; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; transition: background-color .15s ease, color .15s ease; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.chip.open { border-style: dashed; }
.chip small { color: inherit; opacity: .7; margin-left: 5px; }
.sort { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.sort button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit; color: var(--muted); }
.sort button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.card { min-width: 0; text-decoration: none; color: inherit; display: block; }
.card .thumb { aspect-ratio: 1 / 1; background: var(--ground-2); border: 1px solid var(--line); color: var(--ink); position: relative; overflow: hidden; transition: border-color .2s ease; }
.card .thumb svg { display: block; width: 100%; height: 100%; }
.card:hover .thumb { border-color: var(--line-strong); }
.card .thumb small { position: absolute; left: 10px; top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.card h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.01em; margin: 12px 0 4px; }
.card .meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0; }
.card.sketch .thumb { border-style: dashed; }
.card.sketch { cursor: default; }
.empty { font-family: var(--font-mono); font-size: 13px; color: var(--muted); padding-block: 40px; }

/* ---------- Pattern page ---------- */
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 40px 28px; }
.title-row h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(60px, 9vw, 116px); line-height: .92; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.eyebrow-row .eyebrow { margin: 0; }
.pn { display: inline-flex; gap: 4px; }
.pn a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); text-decoration: none; }
.pn a:hover { color: var(--ink); border-color: var(--ink); }
.pn a svg { width: 12px; height: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 8px; }
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.stage { aspect-ratio: 1 / 1; max-width: 100%; background: var(--ground-2); border: 1px solid var(--line); color: var(--ink); position: relative; overflow: hidden; transition: background-color .35s ease; }
.stage svg { display: block; width: 100%; height: 100%; }
.stage-hint { position: absolute; right: 12px; bottom: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .stage-hint { display: none; } }
.controls { display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.ctl { display: grid; gap: 8px; }
.ctl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ctl-head label { font-weight: 500; font-size: 14.5px; }
.ctl-head output { font-family: var(--font-mono); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ctl small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-strong); }
input[type="range"]::-moz-range-track { height: 1px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; margin-top: -7px; background: var(--thumb); border: 2px solid var(--thumb-ring); box-shadow: 0 0 0 1px var(--thumb); transition: transform .15s ease; }
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--thumb); border: 2px solid var(--thumb-ring); box-shadow: 0 0 0 1px var(--thumb); }
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent); }
.state { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px; display: grid; gap: 8px; }
.state-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.state-head span { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.state code { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-2); word-break: break-word; line-height: 1.55; font-variant-numeric: tabular-nums; }
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); border-top: 1px solid var(--line); margin-top: 56px; padding-top: 36px; }
.about h2, .section > h2 { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.about p { margin: 0 0 14px; max-width: 62ch; font-size: 16px; line-height: 1.6; }
.about p:last-child { margin-bottom: 0; }
dl { margin: 0; display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 18px; row-gap: 10px; align-items: baseline; }
dt { font-weight: 500; font-size: 14.5px; }
dd { margin: 0; font-size: 13.5px; color: var(--ink-2); }
dd.range { font-family: var(--font-mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fixed { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); line-height: 1.5; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.tag { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 10px; text-decoration: none; }
.tag:hover { border-color: var(--ink); }
.section { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 30px; }
.related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* ---------- Text pages ---------- */
.prose { max-width: 66ch; padding-block: 44px 0; }
.prose h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: .95; letter-spacing: -0.015em; margin: 0 0 24px; text-wrap: balance; }
.prose h2 { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--muted); margin: 34px 0 10px; }
.prose p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.62; }
.prose ul { margin: 0 0 14px; padding-left: 1.2em; font-size: 16px; line-height: 1.6; }
.prose li { margin-bottom: 4px; }
.note { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 4px; padding: 10px 12px; margin: 0 0 24px; }

/* ---------- Collected ---------- */
.collected-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.card .remove { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 0; margin-top: 6px; }
.card .remove:hover { color: var(--ink); text-decoration: underline; }

footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .links { display: flex; gap: 14px; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px); background: var(--toast-bg); color: var(--toast-ink); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1100px) { .grid, .related, .collected-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .grid, .related, .collected-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero, .about, .work { grid-template-columns: 1fr; }
  .hero { padding-block: 32px 22px; gap: 14px; }
  .title-row { padding-block: 32px 22px; }
  dl { grid-template-columns: max-content minmax(0, 1fr); }
  dd.range { grid-column: 2; margin-top: -6px; }
}
@media (max-width: 480px) { .grid, .related, .collected-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body, .stage, .btn, .seg button, .toast, .chip { transition: none; } }


/* ===========================================================================
   Phones and touch screens
   Added 16 Sep 2026 after Hans tried the site on a phone. Three real faults:
   the pattern page was laying out 790px wide on a 390px screen, there was no
   way at all to make a pattern move without a mouse, and most things you tap
   were half the size a thumb needs.
   =========================================================================== */

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

/* --- the preview is tapped, not hovered --- */
.stage.touch { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.stage.touch .stage-hint {
  background: var(--ground); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 11px; right: 9px; bottom: 9px; color: var(--ink-2); font-size: 11.5px;
  transition: opacity .3s ease;
}
.stage.touch.playing .stage-hint { opacity: .4; }
/* once you have tapped it once you know, so it gets out of the way of the drawing */
.stage.touch.used .stage-hint { opacity: .4; }

@media (max-width: 820px) {
  /* The recipe list stops being a grid here. Three cells to a row in a two-column grid pushed the
     long description into the max-content first column, and that one column dragged the whole page
     wider than the screen — which is what broke the layout on a phone. */
  dl { display: block; }
  dt { margin-top: 20px; }
  dl > dt:first-of-type { margin-top: 0; }
  dd.range { grid-column: auto; margin-top: 3px; white-space: normal; }
  dd.range + dd { margin-top: 5px; }

  /* and the preview sits above the sliders in one column, not in a grid cell */
  .work { display: block; }
  .controls { padding-top: 26px; }
}

/* The preview stays put while you work the sliders and lets go once you scroll past them. On a phone
   the alternative is tuning a picture you cannot see. Only where there is room for it. */
@media (max-width: 820px) and (pointer: coarse) and (min-height: 680px) {
  .stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 2;
           width: min(100%, 54vh); margin-inline: auto; }
}

@media (max-width: 560px) {
  /* Two rows, not three: the name and the light switch share the first, and the links have the
     second to themselves. That needed the switch to come out of the nav in the markup — it sits
     beside it now, which is also where it belongs. */
  .top { padding-block: 12px 10px; gap: 8px; row-gap: 4px; }
  .brand span { display: none; }            /* the hero says it again two lines further down */
  .nav { order: 1; width: 100%; margin-left: 0; gap: 20px; }
  .title-row { gap: 14px; }
  .actions { gap: 7px; }
  footer { margin-top: 40px; }
}

@media (max-width: 480px) {
  /* Two across, not one. Seventeen full-width cards is a very long thumb-scroll, and these patterns
     still read at half width. */
  .grid, .related, .collected-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .card h2 { font-size: 22px; margin-top: 9px; }
  .card .meta { font-size: 11px; }
  .card .thumb small { font-size: 10px; left: 7px; top: 6px; }
  .hero h1 { font-size: clamp(44px, 14vw, 68px); }
  .title-row h1 { font-size: clamp(40px, 13vw, 64px); }
  .hero p, .about p { font-size: 15.5px; }
  .prose p { font-size: 16px; }
  .filters { padding-block: 6px 20px; margin-bottom: 22px; }
}

@media (max-width: 359px) {
  .grid, .related, .collected-grid { grid-template-columns: 1fr; }
}

/* --- anything a thumb has to hit --- */
@media (pointer: coarse) {
  .nav a { padding-block: 12px; }
  .brand { padding-block: 8px; }
  .seg button { padding: 11px 17px; font-size: 14px; }
  .btn { padding: 12px 18px; font-size: 14px; }
  .btn.icon { padding: 12px 14px; }
  .chip { padding: 11px 15px; font-size: 13.5px; }
  .pn a { width: 42px; height: 42px; }
  .pn a svg { width: 14px; height: 14px; }
  .sort { gap: 18px; align-items: center; }
  .sort button { padding-block: 11px; }
  .link { padding-block: 8px; }
  footer .links { gap: 18px; }
  footer .links a { padding-block: 13px; }
  .card .remove { padding-block: 10px; }
  .link { padding-block: 12px; }
  .tags a { padding: 11px 14px; }

  /* the sliders are the whole point of a pattern page, so they get a thumb-sized thumb */
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2px; }
  input[type="range"]::-moz-range-track { height: 2px; }
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -11px; }
  input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
  .controls { gap: 30px; }
  .ctl { gap: 4px; }
}


/* ===========================================================================
   The letter — the sign-up at the foot of a page
   No box, no colour, no shadow: one line of mono, one line of reading type, a
   rule to write on and a button. It should look like the last paragraph of the
   page, not like a widget bolted to the bottom of it.
   =========================================================================== */
/* the rule spans the page like every other section rule; only the reading does not */
.signup { border-top: 1px solid var(--line); margin-top: 52px; padding-top: 32px; }
.signup > * { max-width: 60ch; }
.signup .eyebrow { margin: 0 0 12px; }
.signup > p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
.signup form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.signup .field { flex: 1 1 230px; min-width: 0; }
.signup input[type="email"] {
  appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: 15.5px;
  color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0; padding: 10px 2px; transition: border-color .2s ease;
}
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup input[type="email"]:hover { border-bottom-color: var(--ink-2); }
.signup input[type="email"]:focus { outline: none; border-bottom-color: var(--accent); }
.signup small { display: block; margin-top: 16px; font-family: var(--font-mono); font-size: 12px;
                line-height: 1.55; color: var(--muted); max-width: 54ch; }
.signup .done { font-size: 16px; color: var(--ink-2); margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 480px) {
  .signup { margin-top: 38px; padding-top: 26px; }
  .signup > p { font-size: 15.5px; }
  .signup form { gap: 14px; }
  .signup .field { flex: 1 1 100%; }
  .signup .btn { width: 100%; justify-content: center; }
}
@media (pointer: coarse) { .signup input[type="email"] { padding: 13px 2px; font-size: 16px; } }

/* ---------- Sheets ----------
   The stage takes the proportions of whatever sheet you have chosen, so the preview is the thing you
   are about to download and not a square standing in for it. The width is capped so that a phone
   sheet, which is more than twice as tall as it is wide, still fits on the screen. */
.stage { aspect-ratio: var(--sheet-w, 1) / var(--sheet-h, 1); max-width: calc(74vh * var(--sheet-w, 1) / var(--sheet-h, 1)); margin-inline: auto; }
.ctl.sheets { margin-top: 4px; }
.seg-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.seg-row button {
  font: 400 12px/1 var(--font-mono); letter-spacing: .01em; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.seg-row button:hover { color: var(--ink); border-color: var(--line-strong); }
.seg-row button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.ctl.sheets small { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45; }

@media (pointer: coarse) {
  .seg-row button { padding: 11px 15px; font-size: 13px; }
}
@media (max-width: 820px) {
  .stage { max-width: 100%; }
}

/* ---------- Background note ----------
   Its own page, at background/<navn>.html. Reading, not working: no sliders, no download, so the
   text gets a measure it can be read at and the plates get the full width under it. */
.bg-head { padding-block: 40px 30px; }
.bg-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(52px, 8vw, 96px); line-height: .94; letter-spacing: -0.015em; margin: 0; }
.bg-standfirst { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; margin: 18px 0 0; }
.bg-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 24px 0 0; }
.bg-meta span { display: inline-block; width: 22px; }
.bg-back { margin: 18px 0 0; font-family: var(--font-mono); font-size: 13px; }
.bg-back a { color: var(--accent); text-decoration: none; }
.bg-back a:hover { text-decoration: underline; }

.bg-sec { border-top: 1px solid var(--line); margin-top: 52px; padding-top: 30px; }
.bg-num { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.bg-body { max-width: 68ch; }
.bg-body h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(27px, 3.4vw, 38px); line-height: 1.1; margin: 0 0 14px; }
.bg-body h3 { font-size: 16px; font-weight: 600; margin: 28px 0 6px; }
.bg-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.62; }
.bg-lead { font-size: 18px !important; color: var(--ink-2); }
.bg-aside { border-left: 2px solid var(--line-strong); padding-left: 18px; margin: 24px 0; color: var(--ink-2); max-width: 62ch; }
.bg-aside p { margin: 0; }
.bg-src { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.bg-src li { margin-bottom: 8px; }

/* The plates. A drawing is square and its sky is empty, so a cap on the height keeps a row of four
   from pushing the text that explains them off the screen. */
.bg-fig { margin: 28px 0 30px; }   /* luft under, så en billedtekst ikke løber ind i næste afsnit */
.bg-grid { display: grid; gap: 16px; }
.bg-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bg-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bg-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bg-plate { margin: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--ground-2); overflow: hidden; }
.bg-plate.bad { border-color: var(--line-strong); }
.bg-plate-art { min-height: 120px; }
.bg-plate-art svg { display: block; width: 100%; height: auto; max-height: 440px; color: var(--ink); }
.bg-plate figcaption { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--muted); padding: 9px 11px 11px; border-top: 1px solid var(--line); }
.bg-plate figcaption b { color: var(--ink-2); font-weight: 500; }
.bg-fig > figcaption { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 14px; max-width: 72ch; }
.bg-missing { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 24px; margin: 0; }

/* ---------- a photograph on a note ----------
   Every drawing on this site is one line in one colour. A colour photograph beside one wins, and
   the page becomes its caption. So the photograph is rendered in the site's own ink: its lightness
   is kept exactly as it was and only the hue is replaced, which is what 'color' blending does —
   hue and saturation from the layer above, luminance from the picture beneath. It is not dimmed and
   not hidden; it is brought into the palette, and it turns over with surface and deep like
   everything else. */
.bg-plate.photo .bg-plate-art { position: relative; line-height: 0; }
.bg-plate.photo img { display: block; width: 100%; height: auto; }
.bg-plate.photo .bg-plate-art::after {
  content: ''; position: absolute; inset: 0; background: var(--ink); mix-blend-mode: color; pointer-events: none;
}
.bg-plate.photo img { filter: grayscale(1) contrast(1.02); transition: filter .45s ease; }
.bg-plate.photo .bg-plate-art::after { transition: opacity .45s ease; }
/* In deep the ground is nearly black, and a photograph at full lightness outshines the drawing
   next to it. Down it goes — not for taste, but so the drawing is not lost. */
:root[data-theme="dark"] .bg-plate.photo img,
:root[data-mode="deep"] .bg-plate.photo img { filter: grayscale(1) contrast(1.02) brightness(.58); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-mode="surface"]) .bg-plate.photo img { filter: grayscale(1) contrast(1.02) brightness(.58); }
}
/* Beside a square drawing the photograph is square. Cropped, not squeezed — and held to the same
   440px the drawings are capped at, so the two plates in a pair are the same height and their
   captions sit on one line. A pair that does not line up reads as two things, not as a comparison. */
.bg-plate.square .bg-plate-art { max-width: 440px; margin-inline: auto; }
.bg-plate.square img { aspect-ratio: 1 / 1; object-fit: cover; }
/* as taken */
.bg-plate.photo.shown img { filter: none !important; }
.bg-plate.photo.shown .bg-plate-art::after { opacity: 0; }

.bg-plate.photo figcaption { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bg-reveal {
  appearance: none; border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  font: 400 11px var(--font-mono); border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.bg-reveal:hover { color: var(--ink); border-color: var(--ink); }

.bg-table { border-collapse: collapse; width: 100%; max-width: 740px; margin: 22px 0 0; font-size: 14.5px; }
.bg-table th, .bg-table td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bg-table th { font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--muted); }
.bg-table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.bg-steps { display: grid; gap: 2px; margin: 24px 0 0; max-width: 860px; }
.bg-steps > div { background: var(--ground-2); border: 1px solid var(--line); border-radius: 3px; padding: 14px 17px; }
.bg-steps b { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--accent); margin-bottom: 4px; }
.bg-steps span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* The one line on the pattern page that leads here. Under the recipe, where someone who has read
   what the pattern is might want to know how it got that way. */
.bg-link { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; }
.bg-link a { color: var(--accent); text-decoration: none; }
.bg-link a:hover { text-decoration: underline; }

@media (max-width: 900px) { .bg-grid.g3, .bg-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bg-grid.g2, .bg-grid.g3, .bg-grid.g4 { grid-template-columns: 1fr; } }