/* Tokens from docs/design/tokens.json: Day by default, Night under dark.
   Fonts: the app's Literata and Karla, subset to Latin as WOFF2 (see README). */
@font-face {
  font-family: "Literata";
  src: url("/fonts/Literata.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  src: url("/fonts/Karla.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  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+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --ground: #F4EEE2;
  --surface: #FFFDF8;
  --text: #1E1B16;
  --text2: #5B5348;
  --text3: #6B6357;
  --hairline: rgba(31, 27, 22, 0.08);
  --accent: #C33C1C;
  --on-accent: #FBF7EF;
  --group: rgba(31, 27, 22, 0.05);
  --shadow: 0 18px 50px rgba(31, 27, 22, 0.16);
  --bezel-edge: rgba(0, 0, 0, 0);
  --serif: "Literata", Georgia, serif;
  --sans: "Karla", system-ui, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}

/* Night: under System when the OS is dark, and when the switch (theme.js) says Dark. The
   two blocks carry the same values; CSS has no way to share them across a media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #000000;
    --surface: #161616;
    --text: #EDEDEA;
    --text2: #ADADA8;
    --text3: #9C9C98;
    --hairline: rgba(255, 255, 255, 0.08);
    --accent: #F07A52;
    --on-accent: #1A0703;
    --group: rgba(255, 255, 255, 0.06);
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    --bezel-edge: rgba(255, 255, 255, 0.16);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #000000;
  --surface: #161616;
  --text: #EDEDEA;
  --text2: #ADADA8;
  --text3: #9C9C98;
  --hairline: rgba(255, 255, 255, 0.08);
  --accent: #F07A52;
  --on-accent: #1A0703;
  --group: rgba(255, 255, 255, 0.06);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  --bezel-edge: rgba(255, 255, 255, 0.16);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute;
  left: 16px;
  top: -4rem;
  padding: 0.75rem 1rem;
  background: var(--text);
  color: var(--ground);
  border-radius: 8px;
  z-index: 1;
}
.skip:focus { top: 16px; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: from-font; }
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
a[aria-current="page"] { color: inherit; text-decoration: none; }
/* The skip link's target takes focus so the jump is announced; it is not a control. */
main:focus { outline: none; }

header, main, footer {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

header { padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 600 1.375rem/1.25 var(--serif);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.wordmark img { width: 32px; height: 32px; border-radius: 8px; }
.header-end { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
nav a { display: inline-block; padding: 0.6rem 0.5rem; min-height: 44px; }

/* One icon button: it shows the mode a click switches to (a moon in light, a sun in dark).
   Hidden, but still taking its space, until theme.js has run, so nothing shifts. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--group);
  color: var(--text);
  cursor: pointer;
  visibility: hidden;
}
.js .theme-toggle { visibility: visible; }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) {
  .theme-toggle { border: 1px solid ButtonText; }
}

/* Things that show only under Night (the night screenshot, the widget panel, the sun icon) or only under Day,
   whichever way the theme was chosen. */
.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark { display: block; }
}
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: block; }

main { padding-top: 2.5rem; padding-bottom: 3rem; }

h1 {
  font: 600 2rem/1.2 var(--serif);
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
h2 { font: 600 1.25rem/1.3 var(--serif); margin: 2.25rem 0 0.5rem; }
h3 { font: 600 1.0625rem/1.4 var(--sans); margin: 1.5rem 0 0.25rem; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
p, ul, ol { margin: 0.75rem 0; }
li { margin: 0.35rem 0; }
.lede { font: 400 1.5rem/1.35 var(--serif); color: var(--text2); margin: 0 0 2rem; }
.meta { color: var(--text3); font-size: 0.9375rem; }

/* Apple's "Download on the App Store" badge, unmodified: black on light, white on dark.
   48px tall (Apple's minimum is 40px), with clear space of more than a quarter of its height. */
.badge { margin: 0 0 1.25rem; }
.badge a { display: inline-block; border-radius: 9px; }
.badge img { height: 48px; width: auto; }

code { font-family: var(--mono); font-size: 0.9em; }

dt { font-weight: 600; margin-top: 1.25rem; }
dd { margin: 0.25rem 0 0; }

footer {
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
  padding-bottom: 2rem;
  color: var(--text3);
  font-size: 0.9375rem;
}

/* ---------- Home page: wider, with app screenshots ---------- */

.home main { padding-top: 1.5rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 1.5rem 0 3rem; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 1rem; }
.hero .lede { max-width: 30rem; margin-bottom: 1.25rem; }

/* The columns are minmax(0, ...): a grid track's automatic minimum would let a wide image stretch it past the viewport. */
.hero-shot { position: relative; margin: 0; padding-bottom: 1rem; max-width: min(100%, 520px); width: 100%; justify-self: end; }
/* The iPad and the iPhone fade together as one layer; each fading alone let the iPad show through the iPhone's fade. */
.hero-shot { --fade-group: linear-gradient(180deg, #000 68%, transparent 98%); mask-image: var(--fade-group); -webkit-mask-image: var(--fade-group); }
.hero-shot .device { mask-image: none; -webkit-mask-image: none; box-shadow: none; }

/* A device: a dark bezel around the screenshot, fading out at the bottom. */
.device {
  background: #1C1A17;
  padding: 9px 9px 0;
  border-radius: 44px 44px 0 0;
  box-shadow: 0 0 0 1px var(--bezel-edge), var(--shadow);
  --fade: #000 68%, transparent 98%;
  mask-image: linear-gradient(180deg, var(--fade));
  -webkit-mask-image: linear-gradient(180deg, var(--fade));
}
.device img { width: 100%; border-radius: 35px 35px 0 0; }
.device.tablet { width: 86%; padding: 12px 12px 0; border-radius: 30px 30px 0 0; aspect-ratio: 4 / 3.6; overflow: hidden; }
.device.tablet img { border-radius: 18px 18px 0 0; }
.device.phone { position: absolute; right: 0; bottom: 0; width: 36%; aspect-ratio: 1 / 1.62; overflow: hidden; padding: 7px 7px 0; border-radius: 34px 34px 0 0; }
.device.phone img { border-radius: 27px 27px 0 0; }

.feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 3rem 0; border-top: 1px solid var(--hairline); }
.feature h2, .privacy h2, .maker h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
.feature .copy { max-width: 30rem; }
/* The copy comes first in the source so each h2 introduces its pictures; the pictures still show first. */
.feature > :not(.copy) { order: -1; }
.feature .copy p { color: var(--text2); font-size: 1.125rem; }
/* A phone shot is at most 70% of the viewport tall (aspect 1 : 1.62). */
:root { --shot-max: calc(70vh / 1.62); --whole-max: calc(70vh / 1.97); }

/* The four reading themes: a 2 x 2 grid, a row of four from 1100px, where the column is wide enough to read them. */
.shots.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; width: min(100%, 360px); justify-self: center; }
.shots.four figure { margin: 0; text-align: center; }
.shots.four .shot { width: 100%; padding: 5px 5px 0; border-radius: 26px 26px 0 0; }
.shots.four .shot img { border-radius: 21px 21px 0 0; }
.shots.four figcaption { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--text2); }

/* A phone shot is a column's worth on mobile and about 240px on desktop, and never taller
   than 70% of the viewport. The files are 600px wide, so they stay sharp at 2x. */
.shot { justify-self: center; width: min(100%, 360px, var(--shot-max)); aspect-ratio: 1 / 1.62; overflow: hidden; }

/* A shot whose point sits low on the screen (the quote menu, the theme chips; #345): the frame takes the whole
   image (600 x 1184 inside 9px of bezel) instead of cutting it at 1 : 1.62, and only its last
   3% fades: the reading menu runs nearly to the screen's bottom edge. */
.shot.whole {
  width: min(100%, 360px, var(--whole-max));
  aspect-ratio: auto;
  --fade: #000 97%, transparent 100%;
}

.privacy {
  margin: 1rem 0 0;
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
  background: var(--surface);
  border-radius: 28px;
  box-shadow: 0 6px 22px rgba(31, 27, 22, 0.08);
}
.lede-small { font: 400 1.25rem/1.4 var(--serif); color: var(--text2); margin: 0 0 1.5rem; max-width: 36rem; }
.checks { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 1rem; }
.checks li { position: relative; margin: 0; padding-left: 2rem; color: var(--text2); }
.checks li strong { color: var(--text); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.maker { padding: 3rem 0 1rem; max-width: 38rem; }
.maker p { font-size: 1.125rem; color: var(--text2); }


@media (min-width: 1100px) {
  .shots.four { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 1rem 0.75rem; }
}

@media (min-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding-top: 3rem; }
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; padding: 4rem 0; }
  .feature.flip > .copy { order: -2; }
  .shot { width: min(240px, var(--shot-max)); }
  .shot.whole { width: min(240px, var(--whole-max)); }
  .checks { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* ---------- Privacy and Support: section list left, text right ---------- */

.doc-body { max-width: 40rem; min-width: 0; }
.toc { display: none; }

@media (min-width: 900px) {
  main.doc { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 4rem; align-items: start; }
  /* The list scrolls, and a scroller clips what lies outside it: 6px of padding, taken back by the
     margin, leaves room for the links' 3px focus ring at its 3px offset. */
  .toc { display: block; position: sticky; top: 1.5rem; padding: 0.4rem 6px 6px; margin: 0 -6px; max-height: calc(100vh - 3rem); overflow-y: auto; }
  .toc-title { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text3); }
  .toc ul { list-style: none; margin: 0; padding: 0; }
  .toc li { margin: 0; }
  .toc a { display: block; min-height: 0; padding: 0.35rem 0; color: var(--text2); text-decoration: none; }
  .toc a:hover { color: var(--accent); }
}

/* ---------- Widgets: three real widget renders on a Home Screen-style panel ---------- */

.widgets { width: 100%; max-width: 440px; }
.widgets > div { padding: 1.25rem; border-radius: 28px; background: var(--group); }
.widgets img { width: 100%; border-radius: 22px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.14)); }
.widgets img + img { margin-top: 1rem; }