/* UmAh website: design tokens and base styles. The palette is the apps' own "Coral ink" design source
   (Mac: UmAh/UmAh/Views/Design/Theme.swift + Assets.xcassets/Colors; iPhone: App/Design/Theme.swift), light
   appearance. Coral is one strong block per screen, the way the apps do it: the primary button, the live filler
   flash, the Pro pill. Type: the system serif (New York on Apple devices) for display and verdict lines, Figtree
   (OFL, bundled, as in the iPhone app) for body, rounded monospaced digits for numerals. */
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Serif Fallback"; src: url("/assets/fonts/SourceSerif4-opsz.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Serif Fallback"; src: url("/assets/fonts/SourceSerif4-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  /* Color.UA, light */
  --coral: #FF7061;
  --coral-soft: #FFA682;
  --coral-wash: #FFE9E3;
  --on-coral: #FFFFFF;
  --ink: #1C1D22;
  --ink-2: #6B6F7A;
  --ink-3: #A3A7B2;
  --canvas: #F7F7F5;
  --surface: #FFFFFF;
  --surface-muted: #EEEEEB;
  --border: #E4E4E0;
  --good: #3FA66B;
  --caution: #E6A23C;
  --alert: #E5484D;
  --them: #3B82F6;
  --them-wash: #E3EDFD;
  /* paper tones for the cut-out art only (the pieces are paper; the page is the apps' canvas) */
  --paper: #F3EEE4;
  --paper-2: #E8E1D3;
  --paper-3: #D9D0BF;
  --sage: #B9C6AE;
  --sage-2: #9FB094;
  --slate: #8FA3C4;
  --slate-2: #6E86AD;
  --wood: #D8B48C;
  --wood-2: #C39A72;
  --serif: ui-serif, "New York", "Serif Fallback", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "SF Pro Text", sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", var(--sans);
  --radius-s: 10px; --radius-m: 16px; --radius-l: 24px;
  --gutter: max(clamp(20px, 6vw, 96px), calc((100% - 1200px) / 2 + 96px));
  --grain: 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 0.25 0 0 0 0 0.22 0 0 0 0 0.18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.num { font-family: var(--rounded); font-variant-numeric: tabular-nums; }

/* Header */
.site-header { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(18px, env(safe-area-inset-top)) var(--gutter) 0; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 600 1.375rem/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.wordmark .mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--coral-soft), var(--coral)); box-shadow: inset 0 0 0 1px rgba(28, 29, 34, 0.06); }
.site-nav { display: flex; gap: clamp(14px, 2.4vw, 28px); }
.site-nav a { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 8px 0; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 600px) { .site-nav a:nth-child(n+4) { display: none; } }

/* Buttons: the primary is the one coral block of its screen; the secondary is ink on a surface */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; background: var(--coral); color: var(--on-coral); text-decoration: none; font: 600 0.9688rem/1 var(--sans); box-shadow: 0 10px 24px -14px rgba(255, 112, 97, 0.9); transition: transform 160ms ease, background-color 160ms ease; cursor: pointer; }
.button:hover { background: #F2614F; }
.button:active { transform: scale(0.97); }
.button--secondary { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: none; }
.button--secondary:hover { background: var(--surface-muted); }
.button--ink { background: var(--ink); color: #fff; box-shadow: none; }
.button--ink:hover { background: #33353d; }
.button[aria-disabled="true"] { background: var(--surface-muted); color: var(--ink-2); box-shadow: none; cursor: default; }
.eyebrow { margin: 0 0 12px; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.pill { display: inline-block; vertical-align: middle; padding: 3px 8px; border-radius: 999px; background: var(--coral-wash); color: var(--coral); font: 700 0.6875rem/1.2 var(--rounded); letter-spacing: 0.06em; }
.fine { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--ink-2); }