@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; src: url(fonts/newsreader-400.ttf); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; src: url(fonts/newsreader-400-italic.ttf); }
@font-face { font-family: "Geist"; font-weight: 400; src: url(fonts/geist-400.ttf); }
@font-face { font-family: "Geist"; font-weight: 500; src: url(fonts/geist-500.ttf); }
@font-face { font-family: "Geist"; font-weight: 600; src: url(fonts/geist-600.ttf); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; src: url(fonts/jetbrains-mono-400.ttf); }

/* The page the section sits in: the Site's tokens, as the opening sets them. The page has no
   fixed top bar (the site's bar scrolls away), so the stage holds the very top of the screen. */
:root {
  --bg: #f7f0e1; --bg-deep: #ede1ca; --surface: #fffdf8;
  --text: #211a10; --text-muted: #6e6350; --text-faint: #8a7f68;
  --border: #e9dec7; --border-strong: #d8cbaa; --accent: #2b231b;
  --c-calendar: #f7b32b; --c-messages: #5ba37c; --c-notes: #8f7fd1; --c-mail: #4b84d6;
  --act-ink: #496c99;
  --font-display: "Newsreader", Georgia, serif; --font-body: "Geist", system-ui, sans-serif; --font-mono: "JetBrains Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 5vw, 72px);
  --par-lang-top: 0px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: radial-gradient(120% 60% at 0% 0%, #fbf6ea, transparent 60%), var(--bg); color: var(--text); font: 16px/1.5 var(--font-body); }
main { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
main > .par-lang { padding: 56px 0 0; }
main > .par-lang:last-child { padding-bottom: 96px; }

/* The Site's section link (its single component lives in the design system; this stands in). */
.par-section-link { display: inline-block; margin-top: 12px; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 99px; background: var(--surface); color: var(--text); font: 500 13px/1.3 var(--font-body); text-decoration: none; }
.par-section-link:focus-visible { outline: 2px solid var(--act-ink); outline-offset: 2px; }
.par-section-link-status:empty { display: none; }
/* a finger needs 44 px: on a touch screen a clear layer makes Copy link that tall, and it looks the same */
@media (pointer: coarse) {
  .par-section-link { position: relative; }
  .par-section-link::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); }
}
[data-section-key] { scroll-margin-top: calc(var(--par-lang-top) + 12px); }