/* juliane-schubert.com, design study of 2026-11-10: one system, two temperatures. The singer's side is night (from
   schubert-gesang.de's draft C), Herzensstimme is light and tender (from herzens-stimme.de's rosé). Shared: the type
   pair, Katharina Berndt's brush band as the mark, one red in three strengths, the Termine list, buttons, spacing.
   DESIGN.md says why. Layers, in this order, so a later one wins without specificity games. */
@layer tokens, base, compositions, components, utilities;

/* Gloock (Duarte Pinto; SIL OFL 1.1, no Reserved Font Name), one weight, subset to German Latin */
@font-face {
  font-family: "Gloock";
  src: url("/design/gloock-5cd96b56.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Familjen Grotesk (Familjen STHLM AB; SIL OFL 1.1, no Reserved Font Name), variable 400–700, subset to German Latin */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("/design/familjen-grotesk-99fb5f0d.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Georgia and Arial scaled to the two faces (numbers from draft C, measured in Chromium), so the swap moves little */
@font-face {
  font-family: "Gloock Fallback";
  src: local("Georgia");
  size-adjust: 101.953%;
  ascent-override: 96.123%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Familjen Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 94.479%;
  ascent-override: 107.961%;
  descent-override: 24.344%;
  line-gap-override: 0%;
}
/* Only the board /gestaltung shows these (specimens of the alternatives); a browser fetches a face when text uses it.
   Young Serif (Bastien Sozeau), Atkinson Hyperlegible Next (Braille Institute), Brygada 1918 (Capitalics): SIL OFL 1.1 */
@font-face {
  font-family: "Young Serif";
  src: url("/design/young-serif-b6c05485.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/design/atkinson-next-c6c3476b.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/design/brygada-1918-fbf4408e.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/design/brygada-1918-italic-09727d4a.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@layer tokens {
:root {
  /* the one red, measured from the brush band (#c80048) and the Herzensstimme logo's line (#c80848) */
  --red: #c80048;
  /* the grounds by name, for the home page's two halves */
  --night-ground: #141014;
  --ivory-ground: #f7f2ec;
  --rose-ground: #fcf8f7;

  /* type: one pair for both sides */
  --display: "Gloock", "Gloock Fallback", Georgia, serif;
  --text: "Familjen Grotesk", "Familjen Fallback", Arial, sans-serif;
  --tiny: 0.8125rem;
  --small: 0.9375rem;
  --body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --h2: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --h1: clamp(2.25rem, 1.2rem + 5.2vw, 6rem);
  --name: clamp(2.75rem, 0.6rem + 9.2vw, 9.5rem);
  --numeral: clamp(2.5rem, 2.2rem + 1.2vw, 3.5rem);
  --leading: 1.6;
  --tight: 1.05;
  --caps: 0.16em;

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;
  --gutter: max(clamp(20px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));

  --heavy: 3px;
  --focus: 3px;
  --focus-offset: 2px;
  --target: 44px;
  --page: 80rem;
  --half: 36rem;
  --measure: 38rem;
}
/* The singer's side: night, ivory ink, the red as light; her light scheme is ivory paper with the red as claret.
   Sharp corners. */
.night {
  --ground: light-dark(#f7f2ec, #141014);
  --raised: light-dark(#eee6dd, #1e181d);
  --ink: light-dark(#1b1418, #f3ece4);
  --muted: light-dark(#594b51, #bcb0b5);
  --line: light-dark(#b9aca5, #4a3d46);
  --accent: light-dark(#a3003b, #ff9db5);
  --on-accent: light-dark(#f7f2ec, #141014);
  --mark: var(--red);
  --radius: 0px;
}
/* Herzensstimme: warm white with a breath of rosé, dark grey text (Juliane's wish), the red as claret and as a pale
   wash. Round corners. */
.rose {
  --ground: light-dark(#fcf8f7, #1c1517);
  --raised: light-dark(#f8e9ea, #2a1f23);
  --ink: light-dark(#3a3034, #f1e9ea);
  --muted: light-dark(#6b5c61, #c3b4b8);
  --line: light-dark(#e6d5d8, #4a3a40);
  --accent: light-dark(#a3003b, #ff9db5);
  --on-accent: light-dark(#fcf8f7, #1c1517);
  --mark: light-dark(#f0b3c3, #7d2343);
  --radius: 20px;
}
/* the owner's start per side (scheme.js reads it): the singer starts dark, Herzensstimme light */
:root.night {
  color-scheme: dark;
}
:root.rose,
:root.start-light {
  color-scheme: light;
}
}

@layer base {
*,
::before,
::after {
  box-sizing: border-box;
}
:root {
  -webkit-text-size-adjust: 100%;
}
/* a visitor's choice over the owner's start: the kept one (scheme.js), or a radio checked on this page */
:root[data-scheme="light"],
:root:has(input[name="scheme"][value="light"]:checked) {
  color-scheme: light;
}
:root[data-scheme="dark"],
:root:has(input[name="scheme"][value="dark"]:checked) {
  color-scheme: dark;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--body) / var(--leading) var(--text);
  font-variant-numeric: lining-nums;
  overflow-wrap: break-word;
}
h1,
h2,
h3,
p,
ol,
ul,
figure,
fieldset {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--tight);
  text-wrap: balance;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: var(--focus) solid var(--accent);
  outline-offset: var(--focus-offset);
}
strong {
  font-weight: 650;
}
::selection {
  background: var(--red);
  color: #fff;
}
}

@layer compositions {
main {
  flex: 1;
}
/* the frame for head, foot and the full-width sections */
.site-head,
.site-foot > :not(.brush),
.spread,
.about,
.sibling-in,
.offers,
.band,
.greet,
.sheet,
.tafel {
  inline-size: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}
/* a part of a page in its own side: the side's tokens come from .night or .rose, the scheme from .is-dark/.is-light */
.side {
  background: var(--ground);
  color: var(--ink);
}

/* Home: the threshold. Phone: the name on night, then the two doors, each in its own temperature. Wide: two halves
   side by side, night and rosé, the name and the brush band across both. */
.threshold {
  background: var(--night-ground);
  color-scheme: dark;
}
.threshold.is-variant {
  background: var(--ivory-ground);
  color-scheme: light;
}
.threshold-head {
  padding: var(--s8) var(--gutter) var(--s12);
  text-align: center;
}
.door {
  display: grid;
  gap: var(--s8);
  padding: var(--s12) var(--gutter) var(--s16);
}
.door > * {
  inline-size: min(100%, var(--half));
  margin-inline: auto;
}
@media (min-width: 56em) {
  .threshold {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: linear-gradient(90deg, var(--night-ground) 50%, var(--rose-ground) 50%);
  }
  .threshold.is-variant {
    background: linear-gradient(90deg, var(--ivory-ground) 50%, var(--rose-ground) 50%);
  }
  .threshold > .brush,
  .threshold-head {
    grid-column: 1 / -1;
  }
  .threshold-head {
    padding-block: var(--s4) var(--s8);
  }
  .door {
    background: none;
    padding-block-start: var(--s4);
    align-content: start;
    /* the two rows of text start level across the halves */
    grid-template-rows: auto auto 1fr;
  }
  /* a book spread: both doors lean to the fold */
  .door:first-of-type > * {
    margin-inline: auto var(--s4);
  }
  .door:last-of-type > * {
    margin-inline: var(--s4) auto;
  }
}

/* The singer's stage: the photograph across the window, the name over its lower edge, the next concerts as a
   programme column at the right (below on the phone). */
.stage {
  position: relative;
  display: grid;
}
.stage-photo img {
  inline-size: 100%;
  block-size: min(125vw, 70svh);
  object-fit: cover;
  object-position: 50% 30%;
}
.stage-title {
  position: relative;
  margin-block-start: calc(-1 * var(--s24));
  padding: var(--s24) var(--gutter) var(--s6);
  background: linear-gradient(to bottom, rgb(20 16 20 / 0), rgb(20 16 20 / 0.9) 55%, var(--night-ground));
}
.stage-next {
  padding: var(--s6) var(--gutter) var(--s12);
}
@media (min-width: 64em) {
  .stage {
    grid-template-columns: minmax(0, 1fr) min(27rem, 34%);
    min-block-size: min(84svh, 56rem);
  }
  .stage-photo {
    position: absolute;
    inset: 0;
  }
  .stage-photo img {
    block-size: 100%;
    object-position: 60% 40%;
  }
  .stage-title {
    align-self: end;
    margin: 0;
    padding: var(--s24) var(--s8) var(--s12) var(--gutter);
    background: linear-gradient(to bottom, rgb(20 16 20 / 0), rgb(20 16 20 / 0.82) 60%);
  }
  .stage-next {
    position: relative;
    padding: var(--s12) var(--gutter) var(--s12) var(--s8);
    background: rgb(20 16 20 / 0.88);
  }
}

/* text beside a picture */
.spread,
.about {
  display: grid;
  gap: var(--s12);
  padding-block: clamp(var(--s12), 7vw, var(--s24));
  align-items: start;
}
@media (min-width: 56em) {
  .spread {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--s16);
  }
  .about {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--s16);
    align-items: center;
  }
}

/* the door to the other side */
.sibling-in {
  display: grid;
  gap: var(--s8);
  padding-block: var(--s12) var(--s16);
  align-items: center;
}
@media (min-width: 48em) {
  .sibling-in {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--s16);
  }
}

/* Herzensstimme's welcome: the logo, then the portrait beside the greeting */
.welcome {
  display: grid;
  gap: var(--s8);
  padding-block-end: clamp(var(--s12), 6vw, var(--s24));
}
.greet {
  display: grid;
  gap: var(--s8);
  align-items: center;
}
@media (min-width: 48em) {
  .greet {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--s16);
    max-inline-size: 60rem;
  }
}
.offers,
.band {
  display: grid;
  gap: var(--s8);
  padding-block: clamp(var(--s12), 6vw, var(--s16));
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s12) var(--s8);
  padding: 0;
  list-style: none;
}
.sheet {
  display: grid;
  gap: var(--s8);
  padding-block: clamp(var(--s12), 6vw, var(--s24));
}
}

@layer components {
.skip {
  position: absolute;
  inset-inline-start: var(--s2);
  inset-block-start: -100px;
  z-index: 10;
  padding: var(--s3) var(--s4);
  background: var(--ground);
  color: var(--ink);
}
.skip:focus {
  inset-block-start: var(--s2);
}

/* The mark: Katharina Berndt's brush band, tinted with the side's --mark through a mask, so one painting serves
   night, ivory and rosé. It hangs from the upper edge of what it opens. */
.brush {
  block-size: clamp(52px, 7.2vw, 116px);
  background: var(--mark);
  -webkit-mask: url("/media/pinselstrich-f71da396.webp") top center / max(100%, 520px) auto no-repeat;
  mask: url("/media/pinselstrich-f71da396.webp") top center / max(100%, 520px) auto no-repeat;
}
@media (min-width: 56em) {
  /* over the two halves: the red at full strength on night, as a wash on rosé */
  .brush-split {
    background: linear-gradient(90deg, var(--red) 50%, #f0b3c3 50%);
  }
}

/* head */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  min-block-size: 64px;
  padding-block: var(--s2);
}
.site-name {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  color: var(--ink);
  font: 400 1.375rem / 1 var(--display);
  text-decoration: none;
}
.label,
.home-roles,
.role {
  font: 600 var(--tiny) / 1.4 var(--text);
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--muted);
}
.menu-open,
.menu-close {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-block-size: var(--target);
  min-inline-size: var(--target);
  padding-inline: var(--s3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 600 var(--tiny) / 1 var(--text);
  letter-spacing: var(--caps);
  text-transform: uppercase;
  cursor: pointer;
}
.menu-open svg,
.menu-close svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}
.nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s6);
  padding: 0;
  list-style: none;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  color: var(--ink);
  font: 600 var(--tiny) / 1 var(--text);
  letter-spacing: var(--caps);
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: var(--heavy) solid transparent;
}
.nav a:hover {
  color: var(--accent);
}
.nav a[aria-current="page"] {
  border-block-end-color: var(--red);
}
.nav .lang a {
  color: var(--muted);
}
/* wide: the popover is a plain list in the head (the UA hides an unopened popover) */
@media (min-width: 40em) {
  .nav[popover] {
    display: block;
    position: static;
    inset: auto;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
  }
}
/* narrow: the list behind a button, a sheet from the top with the entries as large titles; the page stays visible
   below it, so a tap beside the menu closes it (light dismiss) [wf:popover] */
@supports selector(:popover-open) {
  @media (max-width: 39.99em) {
    .menu-open {
      display: inline-flex;
    }
    .nav:popover-open {
      display: grid;
      align-content: start;
      gap: var(--s8);
      inset: 0 0 auto;
      inline-size: 100%;
      block-size: auto;
      max-inline-size: none;
      max-block-size: calc(100dvh - var(--target) - var(--s6));
      margin: 0;
      padding: var(--s3) var(--gutter) var(--s8);
      border: 0;
      border-block-end: var(--heavy) solid var(--red);
      background: var(--ground);
      color: var(--ink);
      overflow: auto;
    }
    .nav:popover-open .menu-close {
      display: inline-flex;
      justify-self: end;
    }
    .nav:popover-open ul {
      display: grid;
      gap: var(--s2);
    }
    .nav:popover-open a {
      font: 400 2.25rem / 1.15 var(--display);
      letter-spacing: 0;
      text-transform: none;
      min-block-size: 56px;
    }
    .nav:popover-open .lang a {
      font: 600 var(--small) / 1 var(--text);
      letter-spacing: var(--caps);
      text-transform: uppercase;
    }
    .nav::backdrop {
      background: rgb(20 16 20 / 0.6);
    }
  }
}
.draft,
.draft-note {
  font-size: var(--tiny);
  color: var(--muted);
}
.draft-note {
  padding: var(--s2) var(--gutter);
}

/* one button for both sides: the accent as ground, spaced capitals; only the corners follow the side */
.button,
.prose p > strong:only-child > a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  padding: var(--s2) var(--s6);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: 650 var(--tiny) / 1.2 var(--text);
  letter-spacing: var(--caps);
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover,
.prose p > strong:only-child > a:hover {
  background: var(--ink);
  color: var(--ground);
}

/* home: the name across both halves */
.home-name {
  font-size: var(--name);
  letter-spacing: -0.01em;
  color: #f3ece4;
}
.is-variant .home-name {
  color: #1b1418;
}
.home-roles {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  margin-block-start: var(--s3);
  color: #bcb0b5;
}
.is-variant .home-roles {
  color: #594b51;
}
.home-roles span + span::before {
  content: "·";
  margin-inline-end: var(--s3);
}
@media (min-width: 56em) {
  /* each half of the name in its half's ink; without background-clip the red reads on both grounds (3.2:1, 5.6:1) */
  .home-name {
    color: var(--red);
  }
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .home-name {
      background: linear-gradient(90deg, #f3ece4 50%, #3a3034 50%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .is-variant .home-name {
      background: none;
      color: #1b1418;
    }
  }
  .home-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .home-roles span + span {
    color: #6b5c61;
  }
  .home-roles span + span::before {
    content: none;
  }
}
.door-photo {
  display: block;
}
.door-photo img,
.sibling-photo,
.portrait,
.card img,
.spread-photo img,
.about-photo {
  inline-size: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.door-photo img {
  aspect-ratio: 3 / 2;
  object-position: 62% 30%;
}
.rose .door-photo img {
  object-position: 50% 22%;
}
.door-text {
  display: grid;
  gap: var(--s3);
  justify-items: start;
}
.door-text h2,
.sibling h2 {
  font-size: var(--h2);
}
.door-lead {
  font-size: var(--lead);
  line-height: 1.4;
  margin-block-end: var(--s2);
}
.door-next {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

/* the singer's stage */
.stage-title h1 {
  font-size: var(--name);
  letter-spacing: -0.01em;
}
.role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-block-start: var(--s4);
}
.role strong {
  color: var(--ink);
  font-weight: 600;
}
.stroke {
  inline-size: var(--s12);
  block-size: var(--heavy);
  background: var(--red);
}
.more {
  margin-block-start: var(--s4);
  font-weight: 600;
  font-size: var(--small);
}

/* Termine: the same list on both sides. Day numeral in the display face and the accent, month in capitals, the
   title, then weekday, time and place. */
.termine {
  display: grid;
  padding: 0;
  list-style: none;
}
.termine > :nth-child(n + 4) {
  display: none;
}
.termin {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: var(--s4);
  padding-block: var(--s4);
  border-block-start: 1px solid var(--line);
}
.when time {
  display: grid;
}
.day {
  font: 400 var(--numeral) / 0.95 var(--display);
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.month {
  margin-block-start: var(--s1);
  font: 600 0.75rem / 1.3 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.what {
  display: grid;
  gap: var(--s1);
  align-content: start;
}
.termin h3 {
  font-size: var(--h3);
  line-height: 1.15;
}
.termin h3 a {
  color: inherit;
  text-decoration-color: var(--line);
}
.termin h3 a:hover {
  color: var(--accent);
}
.where,
.hinweis,
.status {
  font-size: var(--small);
  line-height: 1.45;
  color: var(--muted);
}
.status strong {
  display: inline-block;
  margin-inline-end: var(--s2);
  padding: 1px var(--s2);
  border: 1px solid currentColor;
  border-radius: min(var(--radius), 6px);
  color: var(--ink);
  font-size: var(--tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.none {
  padding-block: var(--s4);
  color: var(--muted);
}

/* running text from Markdown, read by structure */
.prose {
  display: grid;
  gap: var(--s4);
  max-inline-size: var(--measure);
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.prose > p:first-child {
  font-size: var(--lead);
  line-height: 1.45;
}
.prose h2 {
  margin-block-start: var(--s6);
  font: 600 var(--tiny) / 1.4 var(--text);
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--muted);
}
.prose ul {
  display: grid;
  padding: 0;
  list-style: none;
}
.prose li {
  padding-block: var(--s3);
  border-block-start: 1px solid var(--line);
}
/* a list of links (»Hören und sehen«): the link as a title in the display face */
.prose li > a:first-child {
  margin-inline-end: var(--s2);
  font: 400 var(--h3) / 1.2 var(--display);
  color: var(--ink);
  text-decoration-color: var(--red);
}
.spread-photo figcaption {
  margin-block-start: var(--s2);
  font-size: var(--tiny);
  color: var(--muted);
}
.about-photo {
  aspect-ratio: 16 / 9;
}

/* the door to the other side */
.sibling-photo {
  aspect-ratio: 3 / 2;
  object-position: 55% 28%;
}
.sibling-text {
  display: grid;
  gap: var(--s3);
  justify-items: start;
}
.sibling-text p:not(.label) {
  max-inline-size: 32rem;
  font-size: var(--lead);
  line-height: 1.4;
}

/* Herzensstimme */
.logo {
  inline-size: min(70%, 22rem);
  margin-inline: auto;
  mix-blend-mode: multiply;
}
/* the logo is drawn on white: on the dark scheme it is inverted with its hue kept, and screen drops the ground */
:root[data-scheme="dark"] .welcome .logo,
:root:has(input[name="scheme"][value="dark"]:checked) .welcome .logo {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
.portrait {
  aspect-ratio: 1;
  max-inline-size: 22rem;
  margin-inline: auto;
  box-shadow: 0 18px 40px -24px rgb(120 40 60 / 0.45);
}
.greet-text {
  display: grid;
  gap: var(--s3);
}
.greet-text h1 {
  font-size: var(--h1);
}
.card {
  display: grid;
  gap: var(--s2);
  align-content: start;
}
.card img {
  aspect-ratio: 4 / 3;
  margin-block-end: var(--s3);
}
.card h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}
.band {
  border-block-start: 1px solid var(--line);
}
.band .termine {
  max-inline-size: 44rem;
}
.sheet h1 {
  font-size: var(--h1);
}

/* foot */
.site-foot {
  display: grid;
  gap: var(--s6);
  padding-block-end: var(--s12);
  background: var(--raised);
  font-size: var(--small);
}
.site-foot .brush {
  block-size: clamp(36px, 4.4vw, 72px);
  background-color: var(--mark);
}
.foot-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
}
.foot-name .name {
  font: 400 1.5rem / 1 var(--display);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
  padding: 0;
  list-style: none;
}
.foot-links a,
.foot-study a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  color: var(--ink);
}
.foot-study {
  color: var(--muted);
}
/* the switch »Darstellung«: small words, the chosen one underlined, each a full target */
.scheme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding: 0;
  border: 0;
}
.scheme legend {
  float: left;
  margin-inline-end: var(--s2);
  color: var(--muted);
}
.scheme label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target);
  min-inline-size: var(--target);
  cursor: pointer;
}
.scheme input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.scheme label:has(:checked) {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: var(--heavy);
  text-underline-offset: 0.35em;
}
.scheme label:has(:focus-visible) {
  outline: var(--focus) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* The board /gestaltung: what the date decides, on one sheet. */
.tafel {
  display: grid;
  gap: var(--s16);
  padding-block: var(--s12) var(--s24);
}
.tafel > *,
.tafel section > * {
  min-inline-size: 0;
}
.tafel-head h1 {
  font-size: var(--h1);
  hyphens: auto;
}
.tafel-head p {
  max-inline-size: 46rem;
  margin-block-start: var(--s3);
  font-size: var(--lead);
  line-height: 1.4;
}
.tafel section {
  display: grid;
  gap: var(--s6);
}
.tafel section > h2 {
  padding-block-end: var(--s2);
  border-block-end: var(--heavy) solid var(--red);
  font: 600 var(--small) / 1.4 var(--text);
  letter-spacing: var(--caps);
  text-transform: uppercase;
}
.tafel .note {
  max-inline-size: 52rem;
  color: var(--muted);
}
.palettes,
.photos,
.specimens,
.marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s6);
  padding: 0;
  list-style: none;
}
.palette {
  display: grid;
  gap: var(--s4);
  align-content: start;
  padding: 0 0 var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.palette > :not(.brush) {
  margin-inline: var(--s6);
}
.palette .brush {
  block-size: 44px;
  -webkit-mask-size: 520px auto;
  mask-size: 520px auto;
}
.palette h3 {
  font-size: 1.75rem;
}
.swatches {
  display: grid;
  gap: var(--s2);
  padding: 0;
  list-style: none;
  font-size: var(--small);
  line-height: 1.3;
}
.swatches li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: center;
}
.swatches li::before {
  content: "";
  block-size: 2.5rem;
  border: 1px solid var(--line);
  border-radius: min(var(--radius), 8px);
  background: var(--chip);
}
.swatches code,
.stock code {
  font: inherit;
  color: var(--muted);
}
.swatches data {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sw-ground {
  --chip: var(--ground);
}
.sw-raised {
  --chip: var(--raised);
}
.sw-ink {
  --chip: var(--ink);
}
.sw-muted {
  --chip: var(--muted);
}
.sw-accent {
  --chip: var(--accent);
}
.sw-mark {
  --chip: var(--mark);
}
.stock {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s8);
  padding: 0;
  list-style: none;
  font-size: var(--small);
  line-height: 1.35;
}
.stock li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 14rem);
  gap: var(--s3);
  align-items: center;
}
.stock li::before {
  content: "";
  block-size: 3.5rem;
  background: var(--chip);
}
.chip-magenta {
  --chip: #e2007a;
}
.chip-brush {
  --chip: #c80048;
}
.chip-logo {
  --chip: #c80848;
}
.chip-herzens {
  --chip: #b11f4b;
}
.chip-pale {
  --chip: #ff95cb;
}
.specimen {
  display: grid;
  border: 1px solid var(--line);
}
.specimen > * {
  min-inline-size: 0;
}
.specimen > div {
  display: grid;
  gap: var(--s2);
  padding: var(--s6);
}
.specimen .big {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.specimen .facts {
  padding: var(--s4) var(--s6);
  font-size: var(--small);
  line-height: 1.4;
  background: var(--raised);
}
.f-gloock .big {
  font-family: var(--display);
}
.f-young .big {
  font-family: "Young Serif", Georgia, serif;
}
.f-young .run {
  font-family: "Atkinson Hyperlegible Next", Arial, sans-serif;
}
.f-brygada .big {
  font-family: "Brygada 1918", Georgia, serif;
  font-weight: 500;
}
.f-brygada .rose .big {
  font-style: italic;
  font-weight: 400;
}
.f-brygada .run {
  font-family: "Brygada 1918", Georgia, serif;
}
.mark {
  display: grid;
  gap: var(--s4);
  align-content: start;
  padding-block-end: var(--s4);
  border: 1px solid var(--line);
}
.mark p {
  margin-inline: var(--s4);
  font-size: var(--small);
  line-height: 1.4;
}
.mark .brush {
  block-size: 72px;
  -webkit-mask-size: 720px auto;
  mask-size: 720px auto;
}
.mark .logo {
  inline-size: min(80%, 15rem);
  margin-block-start: var(--s4);
}
.photo {
  display: grid;
  gap: var(--s2);
  align-content: start;
  font-size: var(--small);
  line-height: 1.4;
}
.photo img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 55% 25%;
}
.photo strong {
  display: block;
}
/* three lists from Markdown (h2, ul, h2, ul …) as three columns, each starting at its title */
.tafel-lists {
  display: block;
  max-inline-size: none;
  hyphens: manual;
}
@media (min-width: 64em) {
  .tafel-lists {
    columns: 3;
    column-gap: var(--s12);
  }
  .tafel-lists h2:not(:first-child) {
    break-before: column;
  }
}
.tafel-lists li > a:first-child {
  margin: 0;
  font: inherit;
  color: var(--accent);
}
.tafel-lists h2 {
  break-after: avoid;
  margin: 0;
  padding-block-end: var(--s2);
  border-block-end: var(--heavy) solid var(--red);
  color: var(--ink);
  font-size: var(--small);
}
.tafel-lists ul {
  margin-block-end: var(--s8);
}
.tafel-lists li {
  break-inside: avoid;
  padding-block: var(--s2);
  line-height: 1.4;
}
.tafel-lists li:first-child {
  border: 0;
}
}

@layer utilities {
/* a fixed temperature: the part keeps its scheme whatever the page's switch says */
.is-dark {
  color-scheme: dark;
}
.is-light {
  color-scheme: light;
}
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (forced-colors: active) {
  .brush,
  .stroke {
    background: CanvasText;
  }
  .home-name {
    background: none;
    color: CanvasText;
  }
  .button,
  .menu-open,
  .menu-close {
    border: 1px solid CanvasText;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
}