/* 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; }
/* 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; }
}