/* readmarky.com, reference stylesheet (prototype 2026-11-13b, variant B "Blatt" after the owner's choice).
   One accent: the logo's marker yellow. It appears in the logo and as the highlighter on the page piece of the home
   page, nowhere else. Buttons are ink. Inherits design/DESIGN.md §A; tokens of the app (apps/read/DESIGN.md §4)
   where the app has them. */

/* ---- Fonts: @fontsource 5.3.0, SIL OFL 1.1 (licenses in ../fonts/), latin and latin-ext only ---- */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/schibsted-grotesk-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Tokens ---- */
:root {
  color-scheme: light;
  /* ground: warm off-white at the low end of #e6..#f6 (read as lightness), greyer than the paper */
  --ground: #e8e4dc;
  /* paper: the page piece and the article sheet; never #fff */
  --paper: #f5f0e6;
  --print: #221c16;
  /* the app's light reading tones (apps/read/DESIGN.md §4 "Lesefläche") */
  --ink: #16120d;
  --mid: #4a4238;
  --dim: #7a7064;
  --hair: #cfc6b6;
  /* the one accent: the logo's marker yellow */
  --y: #f2cf3e;
  --highlight: rgba(242, 207, 62, 0.62);
  --r: 2px;
  --grot: "Schibsted Grotesk", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: "Instrument Serif", "Newsreader", Georgia, serif;
  --t-press: 150ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: 56px;
  --logo-h: 40px;
  /* a shadow from the ground, warm, never black */
  --sh-paper: 0 1px 1px rgba(74, 56, 36, 0.1), 0 3px 6px -2px rgba(74, 56, 36, 0.1), 0 26px 48px -24px rgba(74, 56, 36, 0.38);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 var(--gutter);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--grot);
  font-size: 15px;
  line-height: 1.45;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
a { color: inherit; }
img { display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r); }

/* Mono label: versal, spaced (app §4 "Größen Mono") */
.label {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Text links: underline and position, never the accent (DESIGN.md §B2) */
.link, .prose a, .legal a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--dim);
}
.link:hover, .prose a:hover, .legal a:hover { text-decoration-color: currentColor; }
/* the hit area of a short inline link grows to 44 px without moving the text */
.link-hit { display: inline-block; padding: 14px 0; margin: -14px 0; }

/* ---- Header: the logo, and next to it the label (home) or the breadcrumb (other pages) ---- */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  padding-top: 30px;
}
.logo { display: flex; align-items: center; min-height: 44px; flex: 0 0 auto; border-radius: var(--r); }
.logo img { height: var(--logo-h); width: auto; }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--mid); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--dim); }
.crumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }

/* ---- Footer: the four links, then the guides ---- */
.bottom { padding: 28px 0 18px; }
.foot { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.foot a, .guides a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--mid); text-decoration: none; }
.foot a:hover, .guides a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guides { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 13px; color: var(--mid); }
.guides .sep { color: var(--dim); }

/* ---- The waitlist form (same markup on every page that has one) ---- */
.waitlist { position: relative; }
/* honeypot: off-screen, out of the tab order, hidden from assistive tech by its wrapper */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field-label { display: block; font-size: 13px; line-height: 1.2; color: var(--mid); }
.row { display: flex; align-items: flex-end; gap: 20px; }
/* a field is a line you write on: a bottom hairline, no box */
.field {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--dim);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 17px;
  caret-color: var(--ink);
  outline: none;
  transition: border-color var(--t-press) var(--ease-out);
}
/* focus of the field stays a line: it turns to ink and doubles */
.field:focus, .field:focus-visible { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field[aria-invalid="true"] { border-bottom-color: var(--ink); }
/* the button is an ink surface; the accent stays in the logo and the highlighter */
.btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out);
}
.btn:hover { background: #2a231b; }
.btn:active { transform: scale(0.96); }
.btn[aria-busy="true"] { cursor: progress; }
.status { font-size: 15px; line-height: 1.4; color: var(--ink); }
.status:empty { display: none; }
.status[data-state="error"] { margin-top: 12px; }
/* without JavaScript: the failure redirect's fragment names one of the hidden messages (src/waitlist.mjs FAILURE_IDS).
   They stand before the label, so a screen reader reads the message first and the next Tab reaches the field; the
   flex order shows it below the row like the status line. The margin keeps label and row in view above it (about
   76 px, 140 px when the row stacks). site.js removes these messages. */
.waitlist:has(> [data-failed]:target) { display: flex; flex-direction: column; }
.status[data-failed]:target { display: block; order: 1; scroll-margin-top: 160px; }
/* after a successful answer the message takes the place of label and row */
.waitlist.is-sent .field-label, .waitlist.is-sent .row { display: none; }
.waitlist.is-sent .status { min-height: 72px; display: flex; align-items: flex-end; padding-bottom: 12px; border-bottom: 1px solid var(--dim); font-size: 17px; }
.note { margin-top: 16px; font-size: 13px; color: var(--mid); }
.note .link { color: var(--ink); }

/* ================= Home ================= */
.home .state { color: var(--mid); }
/* 12 columns: the object on the left six, the words on the right five */
.sheet-grid {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  padding: 28px 0 8px;
}
.pair { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.headline {
  grid-column: 8 / span 5;
  grid-row: 1;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.intro { grid-column: 8 / span 5; grid-row: 2; margin-top: 24px; }
.text { font-size: 17px; line-height: 1.5; color: var(--mid); }
.intro .waitlist { margin-top: 26px; }

/* the object: a piece of a page, cut straight through the lines at top and bottom */
.page {
  --page-size: 20px;
  --lh: 30px;
  --page-lines: 11;
  --skip: 0.5;
  position: relative;
  height: calc(var(--lh) * var(--page-lines));
  overflow: hidden;
  padding: 0 52px 0 60px;
  background: var(--paper);
  box-shadow: var(--sh-paper);
  transform: rotate(-1.3deg);
}
.page-text {
  margin-top: calc(var(--lh) * var(--skip) * -1);
  font-family: var(--serif);
  font-size: var(--page-size);
  line-height: var(--lh);
  color: var(--print);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.page-text .sec { text-align: center; }
.page-text .indent { text-indent: 1.5em; }
/* the highlighter on paper: the logo's yellow, multiplied into the paper like ink */
.page-text mark {
  background: var(--highlight);
  mix-blend-mode: multiply;
  color: inherit;
  padding: 0.06em 0.08em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
:lang(de) .page { --skip: 1.5; }

/* the same sentence, as Marky returns it */
.returned { margin-top: 40px; max-width: 19em; font-size: 30px; }
.returned-text { font-family: var(--serif); font-size: 30px; line-height: 1.16; color: var(--ink); }
.source { margin-top: 14px; }

/* ================= Article, legal text, thanks and 404 ================= */
/* a rail for the contents on the left three columns, the sheet on the right nine */
.doc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding: 24px 0 8px;
}
.toc { grid-column: 1 / span 3; position: sticky; top: 28px; padding-top: 68px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--mid);
  text-decoration: none;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mid); }
.toc a:hover { color: var(--ink); }

/* the sheet is paper in pieces; a waitlist band lies on the ground between two pieces, like a cut.
   One text column (the measure) runs centred through pieces and bands; tables span the whole sheet. */
.sheet { --measure: 580px; grid-column: 4 / span 9; min-width: 0; counter-reset: sec; }
.piece { background: var(--paper); box-shadow: var(--sh-paper); padding: 64px 72px 72px; }
.piece + .piece { margin-top: 56px; }
.doc-head, .prose > *, .sources, .legal, .band > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }

.doc-title { font-size: 50px; font-weight: 500; line-height: 1.04; letter-spacing: -0.024em; text-wrap: balance; }
.checked { margin-top: 18px; }
/* on wide screens the title may run past the measure to the right, so a long German title stays on three lines */
@media (min-width: 1101px) { .doc-title { width: 720px; } }

/* reading text: Instrument Serif (a narrow face) at about 75 characters a line, headings in the grotesk.
   Only block margins below, so the auto side margins of the centred column stay in force. */
.prose { font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--print); }
.doc-head + .prose { margin-top: 44px; }
.piece > .prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-top: 0; margin-bottom: 0.85em; }
.prose h2 {
  counter-increment: sec;
  margin-top: 2.4em;
  margin-bottom: 0.65em;
  font-family: var(--grot);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  scroll-margin-top: 24px;
}
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--mid);
}
.prose h3 { margin-top: 1.8em; margin-bottom: 0.4em; font-family: var(--grot); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink); }
/* run-in heads: the serif has no bold, so the grotesk carries the weight */
.prose strong { font-family: var(--grot); font-size: 0.82em; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.1em; }
.prose li { margin: 0 0 0.45em; padding-left: 0.2em; }
.prose ul > li::marker { content: "▪  "; color: var(--dim); font-size: 0.7em; }

/* tables: readable at full width, sideways scroll inside their own wrapper on small screens, never the page */
.prose > .table-wrap {
  max-width: none;
  margin: 1.4em -72px 1.6em;
  padding: 0 72px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline-offset: -2px; }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--grot); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.prose th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--mid);
  vertical-align: bottom;
}
.prose td { padding: 12px 16px 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose td:first-child { font-weight: 500; }
/* a table of four or more columns keeps a minimum width; below it, it scrolls inside .table-wrap */
.prose .wide table { min-width: 820px; }
.prose .wide td:first-child { width: 15%; }
.prose td:last-child, .prose th:last-child { padding-right: 0; }

/* sources: the end of the article, smaller and in the grotesk */
.sources { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hair); }
.sources h2 { font-size: 18px; font-weight: 500; }
.sources ul { margin: 14px 0 0; padding-left: 1.1em; font-size: 14px; line-height: 1.5; color: var(--mid); }
.sources li { margin: 0 0 0.5em; }
.sources a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--dim); }

/* the waitlist band between two pieces of the sheet */
.band { padding: 60px 72px 4px; }
.band + .piece { margin-top: 60px; }
.band-title { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.018em; }
.band-text { margin-top: 14px; max-width: 34rem; font-size: 16px; line-height: 1.5; color: var(--mid); }
.band .waitlist { margin-top: 28px; }

/* legal texts: the same column, set in the grotesk */
.doc-head + .legal { margin-top: 40px; }
.legal { font-size: 16px; line-height: 1.6; color: var(--ink); }
.legal p { margin: 0 0 1em; }
.legal h2 { margin: 2.2em 0 0.6em; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.legal strong { font-weight: 500; }
/* placeholders of the drafts stay visible as they are */
.legal .placeholder { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; background: var(--ground); padding: 0.1em 0.3em; border-radius: var(--r); }

/* thanks and 404: one sentence, large */
.statement-wrap { align-self: center; padding: 40px 0 24px; }
.statement { max-width: 13em; font-size: 84px; font-weight: 500; line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; }
.statement-wrap .back { margin-top: 32px; font-size: 17px; }
.statement-wrap .back a { display: inline-flex; align-items: center; min-height: 44px; }

/* ================= Breakpoints ================= */
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-self: start; max-width: 40rem; }
  .pair, .headline, .intro { grid-column: 1; grid-row: auto; }
  .pair { margin-top: 36px; }
  .intro { margin-top: 40px; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .sheet { grid-column: 1; }
}

@media (max-width: 640px) {
  /* 37 px keeps the k at about 28.5 px on the phone (40 px: about 31 px on the desktop) */
  :root { --gutter: 16px; --logo-h: 37px; }
  .top { padding-top: 20px; gap: 6px 18px; }
  .row { flex-direction: column; align-items: stretch; gap: 16px; }
  .btn { width: 100%; }
  .foot { gap: 0 22px; }
  /* the guides one under the other, so no separator hangs at a line end */
  .guides { flex-direction: column; align-items: flex-start; gap: 0; }
  .guides .sep { display: none; }
  .guides > span:first-child { margin-top: 8px; }

  .sheet-grid { padding-top: 32px; }
  .headline { font-size: 32px; line-height: 1.06; }
  .page { --page-size: 16px; --lh: 24px; --page-lines: 10; --skip: 3.5; padding: 0 22px 0 26px; transform: rotate(-1deg); }
  :lang(de) .page { --skip: 4.5; }
  .returned { margin-top: 30px; }
  .returned-text { font-size: 23px; line-height: 1.18; }
  .source { margin-top: 12px; }
  .intro { margin-top: 36px; }
  .text { font-size: 16px; }

  .doc { padding-top: 16px; }
  /* the sheet runs to the screen edges; its text keeps the 16 px gutter */
  .sheet { margin: 0 -16px; }
  .piece { padding: 36px 16px 40px; }
  .piece + .piece, .band + .piece { margin-top: 40px; }
  .doc-title { font-size: 34px; line-height: 1.06; }
  .prose { font-size: 19px; }
  .doc-head + .prose { margin-top: 32px; }
  .prose h2 { font-size: 23px; }
  .prose > .table-wrap { margin: 1.2em -16px 1.4em; padding: 0 16px; }
  .prose .wide table { min-width: 760px; }
  .band { padding: 40px 16px 0; }
  .band-title { font-size: 24px; }
  .doc-head + .legal { margin-top: 28px; }
  .statement { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}