/* getbreaky.com: the holding home page and the three reading pages (privacy, terms, support).

   Colour tokens and fonts are the :root of the dark landing sketch
   (prototype/landing/sketch-dark.html), which follows docs/BRAND-BOOK.md 04, dark column.
   The fonts are the files the app ships (app/assets/fonts), served from this site with
   their OFL texts beside them. Nothing on these pages loads from anywhere else: no CDN,
   no remote font, no script, no cookie.

   Reading pages: one column of about 68 characters, generous leading, serif for the voice
   (h1, h2, the lede), sans for everything you read, mono for digits and the small labels.
   The accent is spent only on link underlines, the focus ring and the dot of the mark.
   Shapes: buttons 7px, inline code 5px. Motion: tone on hover, a small press, nothing else. */

@font-face { font-family:'Newsreader'; font-style:normal; font-weight:300 500; font-display:swap; src:url('fonts/newsreader-300-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/instrument-sans-400-600-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/plex-mono-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/plex-mono-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --paper:#151312; --card:#201D1B; --sunk:#0F0D0C;
  --ink:#EDE9E4; --body:#D6D0C9; --muted:#A8A29E;
  --line:#2F2A27; --line-soft:#272320;
  --accent:#E486F0;
  --serif:'Newsreader', Georgia, serif;
  --sans:'Instrument Sans', -apple-system, system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --r-btn:7px; --r-code:5px;
  --gutter:16px;
  /* About 68 characters of running text a line (BRAND-BOOK 05 asks for near 65). Set in em,
     not ch: ch is the width of a zero, and in Instrument Sans 68ch holds about 95 letters. */
  --measure:34em;
  --ease:cubic-bezier(0.23, 1, 0.32, 1);
}
@media (min-width:768px) { :root { --gutter:32px; } }

*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
body {
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--paper); color:var(--body);
  font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
@media (min-width:768px) { body { font-size:18px; } }
main { flex:1 0 auto; }
::selection { background:var(--accent); color:var(--paper); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
[id] { scroll-margin-top:24px; }

/* One column. Its width is set in characters of the body face, so the header, the text
   and the footer share one left edge at every size. */
.col { width:100%; max-width:calc(var(--measure) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }

/* Links: the word stays ink, the underline carries the accent (BRAND-BOOK 05). */
a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; transition:text-decoration-thickness 180ms ease-out, color 180ms ease-out; }
a:hover { text-decoration-thickness:2px; }

.skip { position:absolute; left:var(--gutter); top:12px; z-index:10; padding:12px 16px; border-radius:var(--r-btn); background:var(--ink); color:var(--paper); font:500 15px/1 var(--sans); text-decoration:none; transform:translateY(-200%); }
.skip:focus { transform:none; }

/* Header: the mark and the name, home. */
.site-head .col { display:flex; align-items:center; min-height:72px; }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); text-decoration:none; }
.brand svg { width:26px; height:26px; flex-shrink:0; }
.brand span { font:400 23px/1 var(--serif); letter-spacing:-0.015em; }

/* Type: the serif is the voice, the sans is what you read, mono is every digit and label. */
h1, h2, h3 { color:var(--ink); text-wrap:balance; }
h1 { font:400 clamp(40px, 5.2vw, 58px)/1.06 var(--serif); letter-spacing:-0.022em; }
h2 { font:400 clamp(28px, 3.2vw, 36px)/1.14 var(--serif); letter-spacing:-0.015em; }
h3 { font:600 19px/1.35 var(--sans); letter-spacing:-0.005em; }
@media (min-width:768px) { h3 { font-size:20px; } }
p, li { text-wrap:pretty; }
b, strong { font-weight:600; color:var(--ink); }
.ui { color:var(--ink); font-weight:500; }
.path { color:var(--ink); }
.num { font-family:var(--mono); font-size:0.9em; font-feature-settings:"tnum"; }
code { font:400 0.86em/1.5 var(--mono); color:var(--ink); background:var(--card); padding:0.1em 0.4em; border-radius:var(--r-code); overflow-wrap:anywhere; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.lede { font:300 clamp(20px, 2.1vw, 24px)/1.5 var(--serif); color:var(--body); }
.meta { font:400 13px/1.5 var(--mono); color:var(--muted); }
.kick { font:500 11.5px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* The top of a reading page: title, date, a sentence in the voice, the contents. */
.page-head { padding-top:40px; }
@media (min-width:768px) { .page-head { padding-top:72px; } }
.page-head .meta { margin-top:16px; }
.page-head .lede { margin-top:24px; }
.toc { margin-top:40px; }
.toc ul { list-style:none; margin-top:10px; }
.toc a { display:inline-flex; align-items:center; min-height:40px; padding-block:6px; line-height:1.4; }

/* Sections: air, a hairline, the same air again, so the line divides rather than underlines. */
.sec { margin-top:48px; padding-top:48px; border-top:1px solid var(--line); }
@media (min-width:768px) { .sec { margin-top:64px; padding-top:64px; } }

/* Running text inside a section. */
.prose > * + * { margin-top:16px; }
.prose > h2 + * { margin-top:20px; }
.prose > * + h3, .prose > * + .qa { margin-top:40px; }
.prose > h3 + * { margin-top:10px; }
.prose ul, .prose ol { padding-left:1.3em; }
.prose li + li { margin-top:10px; }
.prose ul > li::marker { color:var(--muted); }
.prose ol { list-style:none; padding-left:0; counter-reset:n; }
.prose ol > li { counter-increment:n; position:relative; padding-left:32px; }
.prose ol > li::before { content:counter(n); position:absolute; left:0; top:0; font-family:var(--mono); font-weight:500; font-size:0.9em; line-height:inherit; font-feature-settings:"tnum"; color:var(--ink); }
.prose .toc ul { padding-left:0; }
.prose .toc li + li { margin-top:0; }
.qa > * + * { margin-top:12px; }
.qa > h3 + * { margin-top:10px; }
.sub { margin-top:56px; }
.sub > * + * { margin-top:16px; }

/* The one button: ink, paper text, 7px. Hover by tone, a small press, no shadow. */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; max-width:100%; padding:10px 22px; border-radius:var(--r-btn); font:500 17px/1.25 var(--sans); text-align:center; text-decoration:none; cursor:pointer; transition:background-color 180ms ease-out, transform 120ms var(--ease); }
.btn-primary { background:var(--ink); color:var(--paper); }
.btn-primary:hover { background:#FAF7F3; }
.btn:active { transform:scale(0.98); }
@media (prefers-reduced-motion:reduce) { .btn:active { transform:none; } }
.page-head .btn { margin-top:28px; }

/* Home: one sentence, one line of news, three doors. A wider column, so the sentence
   keeps to a few lines; the header and the footer widen with it and keep the one edge. */
.home-page { --measure:46em; }
.home { padding-top:clamp(48px, 11vh, 132px); }
.statement { font:400 clamp(32px, 4.3vw, 52px)/1.14 var(--serif); letter-spacing:-0.02em; color:var(--ink); }
.soon { margin-top:28px; max-width:46ch; }
.index { margin-top:56px; }
@media (min-width:768px) { .index { margin-top:72px; } }
.index ul { list-style:none; border-top:1px solid var(--line); }
.index li { border-bottom:1px solid var(--line); }
.index a { display:flex; flex-direction:column; gap:2px; min-height:68px; padding:16px 0; text-decoration:none; }
@media (min-width:640px) { .index a { flex-direction:row; align-items:baseline; justify-content:space-between; gap:24px; padding:18px 0; } }
.index .t { font:600 19px/1.3 var(--sans); color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1px; text-underline-offset:4px; }
.index .d { font-size:15px; line-height:1.5; color:var(--muted); }
.index a:hover .t { text-decoration-thickness:2px; }

/* Footer: the three pages and the address. */
.site-foot { margin-top:96px; border-top:1px solid var(--line); }
.site-foot .col { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 32px; padding-top:20px; padding-bottom:36px; }
.foot-links { list-style:none; display:flex; flex-wrap:wrap; gap:0 24px; }
.foot-links a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--body); }
.foot-links a:hover { color:var(--ink); }
.foot-links a[aria-current="page"] { color:var(--ink); text-decoration-thickness:2px; }
.foot-note { font:400 13px/1.5 var(--mono); color:var(--muted); }

/* Paper copies of the terms and the policy: dark ink on white, no chrome. */
@media print {
  :root { --paper:#fff; --card:#f1efec; --ink:#111; --body:#222; --muted:#555; --line:#ccc; }
  .skip, .toc, .site-foot nav, .page-head .btn { display:none; }
  a { text-decoration-color:currentColor; }
  .sec { break-inside:auto; }
  h2, h3 { break-after:avoid; }
}