/* The starter design, from tinymedia's Satz (packages/design/satz): tokens, then the parts every page shares, then
   the pages of the starter templates. A site owns its copy: change the palette below the tokens, or anything else. */
:root {
  color-scheme: light dark;
  /* paper and ink: Nord's snow storm and polar night; one flat field, no cards, no shadows */
  --paper: light-dark(#eff1f5, #2e3440);
  --ink: light-dark(#2e3440, #eceff4);
  --muted: light-dark(#4c566a, #b4bccb);
  --line: light-dark(#c4cbd6, #4c566a);
  /* the heavy rule that opens a section */
  --rule: var(--ink);
  /* colour means one thing: the accent marks a link, nothing else */
  --accent: light-dark(#1f5a97, #9cc5ec);
  --focus-color: light-dark(#1f5a97, #ebcb8b);

  /* type: the grotesk the device already has, no download */
  --sans:
    "Helvetica Neue", Helvetica, Arial, Roboto, "Liberation Sans", sans-serif;
  --tiny: 12px;
  --small: 14px;
  --body: 17px;
  --lead: clamp(20px, 1.2rem + 0.6vw, 26px);
  --regular: 400;
  --medium: 500;
  --bold: 700;
  --leading: 1.5;
  --tight: 1.02;
  --caps-tracking: 0.08em;

  /* space: an 8 px grid; the gutter keeps clear of the phone's safe areas */
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --gutter: max(
    var(--s4),
    env(safe-area-inset-left),
    env(safe-area-inset-right)
  );

  /* lines and shapes: rectangles */
  --hairline: 1px;
  --heavy: 3px;
  --control-border: 1.5px;
  --focus: 3px;
  --focus-offset: 2px;
  --target: 44px;

  /* widths */
  --page: 1040px;
  --measure: 36rem;
}
:root[data-scheme="light"] {
  color-scheme: light;
}
:root[data-scheme="dark"] {
  color-scheme: dark;
}

*,
::before,
::after {
  box-sizing: border-box;
}
:root {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: var(--regular) var(--body) / var(--leading) var(--sans);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
figure,
fieldset {
  margin: 0;
}
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(--focus-color);
  outline-offset: var(--focus-offset);
}

/* the page's column: the full width on the phone, at most --page on desktop */
.page {
  width: min(var(--page), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
/* a section opens with the heavy rule */
.ruled {
  border-top: var(--heavy) solid var(--rule);
}

/* text a Redakteurin writes (Markdown) */
.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 0.9em;
}
.prose :is(ul, ol) {
  margin-block: 0;
  padding-left: 1.25em;
}
.prose :is(h2, h3) {
  font-size: 1.15em;
  line-height: 1.25;
  margin-top: 1.4em;
}
.prose blockquote {
  margin-inline: 0;
  padding-left: var(--s4);
  border-left: var(--heavy) solid var(--line);
}
.prose hr {
  border: 0;
  border-top: var(--hairline) solid var(--line);
}

.skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  padding: var(--s2) var(--s3);
  background: var(--paper);
}
.skip:focus {
  top: var(--s2);
}

/* the foot of every page: a hairline, then the scheme switch */
.foot {
  margin-top: auto;
  padding-block: var(--s6) max(var(--s8), env(safe-area-inset-bottom));
}
.foot > .page {
  border-top: var(--hairline) solid var(--line);
  padding-top: var(--s4);
}

/* light/dark: rectangles, the chosen one filled with ink, as in the Maske */
.scheme-switch:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 20rem);
  min-width: 0;
  border: 0;
  padding: 0;
}
/* the small caption: uppercase, tracked */
.scheme-switch legend {
  padding: 0;
  margin-bottom: var(--s2);
  color: var(--muted);
  font-size: var(--tiny);
  font-weight: var(--bold);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  line-height: 1.4;
}
.scheme-switch label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--target);
  padding: 0 var(--s2);
  border: var(--control-border) solid var(--ink);
  margin-right: calc(-1 * var(--control-border));
  font-size: var(--small);
  font-weight: var(--medium);
  cursor: pointer;
}
.scheme-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.scheme-switch label:has(:checked) {
  background: var(--ink);
  color: var(--paper);
}
.scheme-switch label:has(:focus-visible) {
  outline: var(--focus) solid var(--focus-color);
  outline-offset: 1px;
  z-index: 1;
}

/* the starter's pages (page.html, 404.html): the rule, the title, the text */
main.page {
  padding-top: max(var(--s8), env(safe-area-inset-top));
}
main.page > article > h1 {
  padding-top: var(--s4);
  margin-bottom: var(--s6);
  font-size: clamp(32px, 1.2rem + 2.6vw, 56px);
  font-weight: var(--bold);
  line-height: var(--tight);
  letter-spacing: -0.02em;
  overflow-wrap: normal;
  text-wrap: balance;
}
.lead {
  font-size: var(--lead);
  line-height: 1.35;
}

/* the navigation: one row of plain links, the current page underlined with the heavy rule */
.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
  margin: 0;
  padding: var(--s4) 0 0;
  list-style: none;
}
.nav a {
  display: inline-block;
  min-height: var(--target);
  line-height: var(--target);
  color: var(--ink);
  font-weight: var(--medium);
  text-decoration: none;
}
.nav a[aria-current="page"] {
  text-decoration: underline var(--heavy);
  text-underline-offset: 0.4em;
}

/* the Vorschau only: the faint watermark over the page head, and the marks of drafts */
.vorschau-mark {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  font: 800 clamp(4rem, 19vw, 10rem) / 1.1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  opacity: 0.1;
}
.draft-note {
  margin-top: var(--s4);
  padding: var(--s2) var(--s3);
  border: var(--control-border) dashed var(--ink);
  font-size: var(--small);
  font-weight: var(--medium);
}
.draft {
  font-size: var(--tiny);
  font-weight: var(--bold);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--muted);
}