/* Foundation for every page, panel included: fonts, tokens, reset, type, accessibility helpers.
   Components live in site.css; page layouts in their own files. See docs/DESIGN.md. */

/* Here, and in panel.css, not with the animations in site.css: when a page that opts in leads to
   one that does not, Chromium reports the aborted transition as an uncaught error. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-cyr-latin-var.66bf534ae6c2.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-600-cyr-latin.6ea540b575e5.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-600i-two.3d363b4338a1.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/* Fallbacks matched to the web fonts' metrics, so the swap moves nothing. */
@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 103.7%;
  ascent-override: 93.5%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Times New Roman"), local("Times"), local("Noto Serif");
  size-adjust: 94.6%;
  ascent-override: 97.7%;
  descent-override: 30.3%;
  line-gap-override: 0%;
}

:root {
  --page: #17101a;
  --surface: #241a28;
  --surface-raised: #31243a;
  --line: #5a4660;
  --text: #f6efe3;
  --muted: #c9bfb8;
  --champagne: #e3c58e;
  --champagne-bright: #f1d8ac;
  --paper: #fbf6ec;
  --paper-tint: #efe3c8;
  --paper-line: #b8a98a;
  --ink: #17101a;
  --ink-muted: #5b5145;
  --error: #ffb9ae;
  --error-ink: #8f1d12;
  --ok: #b2e0bd;
  --ok-ink: #1d5a2e;

  /* The light of the hall, sampled from the photos. Decoration only: text never depends on it. */
  --thread: #dfc08a;
  --thread-bright: #fff1cf;
  --amber: #f2b05e;
  --hall-violet: #935792;
  --hall-wine: #691724;
  --show-teal: #2f8f78;
  --plum: #2c1d34;

  /* Motion. Rules are in docs/DESIGN.md. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* A spring with bounce 0.2, sampled into linear(): for small things that land. */
  --spring: linear(0, .054, .177, .326, .476, .612, .726, .817, .886, .936, .97, .992, 1.005, 1.012, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1);

  --font-ui: "Onest", "Onest Fallback", system-ui, sans-serif;
  --font-display: "Cormorant", "Cormorant Fallback", Georgia, serif;

  --control-min: 52px;
  --radius: 10px;
  --radius-small: 6px;
  /* Side margin; in landscape on a notched phone it grows to clear the notch (viewport-fit=cover). */
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --content-max: 1240px;
  --narrow-max: 680px;
  --bar-space: 0px;
}
@media (min-width: 768px) {
  :root { --gutter: max(40px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  scroll-padding-bottom: 104px;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 18px/1.5 var(--font-ui);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--champagne); text-underline-offset: 3px; }
a:hover { color: var(--champagne-bright); }
button, input, select, textarea { font: inherit; color: inherit; }
strong { font-weight: 600; }

/* Cormorant is for display sizes only: 32 px and above. Lining numerals are forced above. */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  color: var(--champagne);
  font-feature-settings: "lnum" 1;
}
.muted { color: var(--muted); }
.prewrap { white-space: pre-wrap; }

:focus-visible { outline: 3px solid var(--champagne); outline-offset: 2px; }
::selection { background: var(--champagne); color: var(--ink); }
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--radius-small);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* `ul.` outranks the reset's ul[class]; the padding lines the text up with the page content. */
ul.messages { list-style: none; margin: 0; padding: 12px max(var(--gutter), calc((100% - var(--content-max)) / 2)); background: var(--surface); }
.message + .message { margin-top: 6px; }
.message--error { color: var(--error); }
.message--success { color: var(--ok); }

/* Standalone notes such as error pages. */
.plain-page { max-width: var(--narrow-max); margin: 0 auto; padding: 64px var(--gutter); }
.plain-page > * + * { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}