/* Shared by every page: the app's tokens, type and glass. */
/* The app's own tokens. Page colours are Color.pageBackground's two values;
   the accent is neutral on purpose, because the covers supply the colour. */
:root {
  --page: #faf8f5;
  --label: #000;
  --ink: #1d1c1a;
  --body: rgba(0, 0, 0, .74);
  /* .72 rather than Apple's .62, as most of what it sets is 11 to 15px:
     at .62 that fell short of 4.5:1 on the page */
  --secondary: rgba(60, 60, 67, .72);
  --tertiary: rgba(60, 60, 67, .32);
  --quaternary: rgba(60, 60, 67, .16);
  --wash-sat: 2.4;
  --wash-strength: .82;
  --wash-bright: 1.03;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34));
  --glass-edge: rgba(255, 255, 255, .8);
  --glass-line: rgba(0, 0, 0, .07);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
  --card: rgba(255, 255, 255, .42);
  --scrim: rgba(0, 0, 0, .12);
  --rule: rgba(0, 0, 0, .1);
  --serif: ui-serif, "New York", "Newsreader", Georgia, serif;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #11100f;
    --label: #fff;
    --ink: #f2efe9;
    --body: rgba(255, 255, 255, .76);
    --secondary: rgba(235, 235, 245, .62);
    --tertiary: rgba(235, 235, 245, .32);
    --quaternary: rgba(235, 235, 245, .16);
    --wash-sat: 1.9;
    --wash-strength: .75;
    --wash-bright: 1;
    --glass: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
    --glass-edge: rgba(255, 255, 255, .2);
    --glass-line: rgba(255, 255, 255, .06);
    --glass-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    --card: rgba(255, 255, 255, .07);
    --scrim: rgba(0, 0, 0, .45);
    --rule: rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #11100f;
  --label: #fff;
  --ink: #f2efe9;
  --body: rgba(255, 255, 255, .76);
  --secondary: rgba(235, 235, 245, .62);
  --tertiary: rgba(235, 235, 245, .32);
  --quaternary: rgba(235, 235, 245, .16);
  --wash-sat: 1.9;
  --wash-strength: .75;
  --wash-bright: 1;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
  --glass-edge: rgba(255, 255, 255, .2);
  --glass-line: rgba(255, 255, 255, .06);
  --glass-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --card: rgba(255, 255, 255, .07);
  --scrim: rgba(0, 0, 0, .45);
  --rule: rgba(255, 255, 255, .1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--label);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease;
}
/* Structure is the system face, expanded; content is serif. */
.x { font-family: var(--sans); font-stretch: 125%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

.glass {
  background: var(--glass);
  border: .5px solid var(--glass-line);
  box-shadow: inset 0 .5px 0 var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}

.corner {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Apple's own badge, unaltered, at its 40px minimum height for the web. */
.store { display: block; line-height: 0; border-radius: 7px; }
.store img { display: block; width: auto; height: 40px; }


/* The foot of the page, under a hairline drawn the width of the window. */
footer {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px max(56px, env(safe-area-inset-bottom));
  display: grid;
  gap: 14px;
  color: var(--secondary);
  font-size: 12px;
}
footer::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw; height: 1px; background: var(--rule); }
@media (max-width: 600px) { footer { padding-left: 16px; padding-right: 16px; } }
footer .mark { font: 500 20px var(--serif); font-stretch: 100%; color: var(--label); text-decoration: none; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer nav a { color: var(--label); text-decoration: none; }
footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer .small { margin: 0; color: var(--secondary); }
/* Underlined, as the line around them is the same grey. */
footer .small a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
footer .small a:hover { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }

/* A legal page: content is serif, structure is expanded. */
.doc { max-width: 680px; margin: 0 auto; padding: max(64px, env(safe-area-inset-top)) 24px 64px; }
/* Back to Marginalia: a chevron and the name, pinned to the top left corner
   as the page scrolls, as the landing page's way back is. Once the page is
   under way, a patch of blur behind it keeps it readable over the text. */
.doc .back {
  position: fixed; z-index: 45; top: max(16px, env(safe-area-inset-top)); left: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px 0 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--label); text-decoration: none;
  transition: color .2s ease;
}
.doc .back .chevron { display: inline-flex; transition: transform .2s ease; }
.doc .back .chevron svg { width: 7px; height: 12px; }
.doc .back:hover { color: color-mix(in srgb, var(--label) 60%, transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .doc .back:hover .chevron { transform: translateX(-2px); }
}
.doc .back::before {
  content: ""; position: absolute; z-index: -1; inset: 6px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--page) 60%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.scrolled .doc .back::before { opacity: 1; }
/* The title in the serif, as the landing page's headings are. */
.doc h1 { margin: 28px 0 0; font: 400 clamp(36px, 5vw, 46px)/1.08 var(--serif); letter-spacing: -.012em; }
.doc .effective { margin: 10px 0 0; font-size: 12px; color: var(--secondary); }
.doc h2 { margin: 44px 0 0; font: 500 15px/1.3 var(--sans); font-stretch: 125%; }
.doc p, .doc li { font: 400 17.5px/1.62 var(--serif); color: var(--body); }
.doc p { margin: 14px 0 0; }
.doc ul { margin: 12px 0 0; padding-left: 1.2em; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--tertiary); }
.doc strong { font-weight: 600; color: var(--label); }
.doc a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc .summary { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: .5px solid var(--glass-line); }
.doc .summary p:first-child { margin-top: 0; }
@media (max-width: 600px) { .doc { padding-left: 16px; padding-right: 16px; } }