/* Sevenfold design tokens and shared pieces. Vellum and ink by day, Compline by night; the accent follows the church year. */

@font-face { font-family: Fraunces; src: url(/fonts/fraunces.woff2) format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: Fraunces; src: url(/fonts/fraunces-italic.woff2) format('woff2'); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  color-scheme: light dark;
  --paper: light-dark(oklch(97.4% 0.014 84), oklch(16.5% 0.022 275));
  --paper-2: light-dark(oklch(94.6% 0.02 82), oklch(20.5% 0.026 275));
  --card: light-dark(oklch(99.3% 0.006 85), oklch(22.5% 0.028 275));
  --ink: light-dark(oklch(23% 0.035 270), oklch(94% 0.018 85));
  --ink-2: light-dark(oklch(42% 0.03 268), oklch(79% 0.022 85));
  --ink-3: light-dark(oklch(58% 0.025 265), oklch(64% 0.02 270));
  --line: light-dark(oklch(88% 0.022 82), oklch(31% 0.03 275));
  --line-2: light-dark(oklch(82% 0.03 80), oklch(38% 0.035 275));
  --rubric: light-dark(oklch(49% 0.165 28), oklch(72% 0.14 32));
  --gold: light-dark(oklch(64% 0.12 76), oklch(82% 0.12 84));
  --gold-soft: light-dark(oklch(90% 0.06 85), oklch(32% 0.06 80));
  --shadow: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 1px 2px oklch(25% 0.04 270 / 0.06), 0 12px 32px -12px oklch(25% 0.05 270 / 0.18);
  --serif: Fraunces, 'Iowan Old Style', Georgia, serif;
  --sans: Figtree, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --season: oklch(50% 0.11 155);
  --season-glow: oklch(78% 0.13 150);
  --season-soft: light-dark(oklch(93% 0.04 150), oklch(28% 0.05 155));
  interpolate-size: allow-keywords;
}
[data-season='violet'] { --season: oklch(45% 0.15 300); --season-glow: oklch(74% 0.13 300); --season-soft: light-dark(oklch(93% 0.035 300), oklch(28% 0.06 300)); }
[data-season='gold'] { --season: oklch(58% 0.13 75); --season-glow: oklch(86% 0.13 85); --season-soft: light-dark(oklch(94% 0.05 85), oklch(30% 0.06 80)); }
[data-season='red'] { --season: oklch(50% 0.18 27); --season-glow: oklch(76% 0.15 30); --season-soft: light-dark(oklch(93% 0.04 30), oklch(28% 0.07 28)); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The faintest paper grain. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 450; line-height: 1.12; margin: 0; text-wrap: balance; font-variation-settings: 'SOFT' 40, 'WONK' 0; letter-spacing: -0.012em; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
::selection { background: color-mix(in oklch, var(--gold) 40%, transparent); }
:focus-visible { outline: 2.5px solid var(--season); outline-offset: 3px; border-radius: 6px; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.rubric {
  font: 650 .72rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rubric);
  margin: 0 0 .5rem;
}
.muted { color: var(--ink-2); }
.fine { font-size: .875rem; color: var(--ink-3); }
.center { text-align: center; }

/* Buttons: soft squircles where the browser has them. */
.btn {
  --bg: var(--card);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-block-size: 46px; padding: .7rem 1.25rem;
  border: 1px solid var(--line-2); border-radius: 14px; corner-shape: squircle;
  background: var(--bg); color: var(--ink);
  font: 600 .98rem/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px oklch(20% 0.03 270 / .06);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px oklch(20% 0.05 270 / .3); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.btn.primary {
  --bg: var(--ink); color: var(--paper); border-color: transparent;
  background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 88%, var(--season)), var(--ink));
  box-shadow: 0 1px 0 oklch(100% 0 0 / .15) inset, 0 8px 22px -10px color-mix(in oklch, var(--season) 70%, transparent);
}
.btn.ghost { background: transparent; box-shadow: none; }
.btn.small { min-block-size: 38px; padding: .45rem .9rem; font-size: .9rem; border-radius: 12px; }
.btn.wide { inline-size: 100%; }
.link { background: none; border: 0; padding: .4rem 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: .95rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; box-shadow: var(--shadow); }

/* The wordmark: a lancet with a single point of light. */
.mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.mark svg { inline-size: 26px; block-size: 34px; }
.mark span { font: 500 1.35rem/1 var(--serif); letter-spacing: -0.01em; font-variation-settings: 'SOFT' 80, 'WONK' 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}