/* Shared page chrome — the accent retune, the scaffolding scale, and the nav,
   footer and back-to-top that every page carries. Page-specific layout stays in
   each document's own <style>. styles.css remains the design system; this file
   only retunes and arranges it. */

/* CORAL — the Modernist accent role retuned from red #ec3013 to a true coral
   (warm orange-pink). Same OKLCH lightness scale as the system's ramp, hue
   shifted warm, base deepened just enough to keep the ≥3:1 accent-on-ground
   pair the readme requires. Delete this block to see the site in red. */
:root {
  --color-accent: #f2603c;
  --color-accent-2: #ef7a63;

  --color-accent-100: #fff4f0;
  --color-accent-200: #ffe4db;
  --color-accent-300: #ffcaba;
  --color-accent-400: #ffa288;
  --color-accent-500: #fa6f4d;
  --color-accent-600: #dd5231;
  --color-accent-700: #ae3c1e;
  --color-accent-800: #7d2d16;
  --color-accent-900: #4e2113;

  --color-accent-2-100: #fff4f1;
  --color-accent-2-200: #ffe5de;
  --color-accent-2-300: #ffcbc0;
  --color-accent-2-400: #ffa392;
  --color-accent-2-500: #f1785f;
  --color-accent-2-600: #cb5b43;
  --color-accent-2-700: #a0432e;
  --color-accent-2-800: #723020;
  --color-accent-2-900: #472119;
}

/* 28px leading unit, 14px half-step, flush-left everything, 2px rules on the
   section seams. */
:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); --measure: 58ch;
  --color-danger: #a11a08; }
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--edge)}
.rule2{height:2px;border:0;margin:0;background:var(--color-divider)}
.kicker{display:block;font-size:13px;line-height:var(--half);letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-700);font-feature-settings:"tnum" 1;margin:0 0 calc(var(--leading) - var(--half))}

/* — nav — */
/* Wrap rather than clip. styles.css sets the nav to flex with no wrap, and every
   item carries white-space:nowrap, so between the 560px breakpoint and roughly
   820px the row was wider than its box and the call-to-action was cut off at the
   right edge. Wrapping drops it to a second line instead. */
.nav{padding-inline:max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));position:sticky;top:0;z-index:10;background:var(--color-bg);flex-wrap:wrap;row-gap:var(--space-2)}
/* Mark sized in em so it tracks the wordmark: 1.2em of an 18px brand is 21.6px,
   a little above Archivo's cap height, which is what stops a solid square from
   reading smaller than the letters beside it.
   The brand is an anchor, so it has to outrank styles.css's `.nav a` font-size
   of 14px — hence the two-class selector. */
.nav a.nav-brand{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;font-size:18px}
.nav-mark{width:1.2em;height:1.2em;display:block;flex:none}
.nav a{white-space:nowrap}
.nav a[aria-current='location'],.nav a[aria-current='page']{color:var(--color-accent)}
/* Narrow screens drop the section links, but never the brand. */
@media (max-width:560px){.nav a:not(.nav-brand){display:none}}

/* — footer — */
footer{padding:calc(2 * var(--leading)) 0;font-size:13px;line-height:var(--leading);color:color-mix(in srgb, var(--color-text) 70%, transparent)}
footer .fgrid{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);justify-content:space-between}
/* Same convention as .detail: no rule at rest, one on hover. The footer's
   contact details became real links when they were moved behind the base64
   decoder, and arrived underlined by default. */
footer a{color:inherit;text-decoration:none}
footer a:hover{text-decoration:underline}
/* Left-aligned rather than spread: this is the lowest row on the page, and the
   fixed back-to-top button sits over the bottom-right corner. Anything pushed
   to that edge ends up underneath it. */
footer .flinks{margin-top:var(--space-3);border-top:1px solid var(--color-divider);padding-top:var(--space-3);justify-content:flex-start}

/* — back to top — */
/* Ink, not coral: the closing section is a full coral field, and a coral button
   would disappear into it. Ink reads against both that and the warm ground, and
   keeps the control from competing with the real calls to action.
   visibility (not display) is what hides it, so it leaves the tab order and the
   accessibility tree while still being able to fade. */
.to-top{position:fixed;right:clamp(16px,4vw,32px);bottom:clamp(16px,4vw,32px);z-index:20;
  width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;
  background:var(--color-text);color:var(--color-bg);border-radius:var(--radius-md);
  cursor:pointer;opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease,background .18s ease}
.to-top.is-visible{opacity:1;visibility:visible}
.to-top:hover{background:var(--color-accent-700)}
.to-top:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* — document pages (terms, privacy, PAIA, FAQ) — */
/* One measure, flush left, same 28px leading as the rest of the site. Legal
   copy is read in long runs, so the column is narrower than the marketing
   sections and the type a shade larger. */
.doc{padding:calc(2.5 * var(--leading)) 0 calc(3 * var(--leading));max-width:72ch}
.doc-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(32px,4.6vw,54px);line-height:clamp(34px,4.8vw,57px);letter-spacing:-0.02em;margin:0;margin-left:-0.04em;text-box:trim-both cap alphabetic}
.doc-meta{font-size:13px;line-height:var(--half);letter-spacing:0.06em;text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 70%, transparent);margin:var(--leading) 0 0}
.doc-lead{font-size:17px;line-height:var(--leading);margin:var(--leading) 0 0;max-width:var(--measure)}
.doc h2{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:22px;line-height:var(--leading);letter-spacing:-0.01em;margin:calc(2 * var(--leading)) 0 0;padding-top:var(--leading);border-top:2px solid var(--color-divider);text-box:trim-both cap alphabetic}
.doc h3{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:16px;line-height:var(--leading);margin:var(--leading) 0 0;text-box:trim-both cap alphabetic}
.doc p{font-size:15.5px;line-height:var(--leading);color:color-mix(in srgb, var(--color-text) 82%, transparent);margin:var(--leading) 0 0}
.doc ul,.doc ol{list-style:none;margin:var(--leading) 0 0;padding:0}
.doc li{position:relative;font-size:15.5px;line-height:var(--leading);color:color-mix(in srgb, var(--color-text) 82%, transparent);padding-left:22px;margin-top:var(--half)}
.doc li::before{content:"";position:absolute;left:0;top:calc(0.5cap + 4px);width:8px;height:8px;background:var(--color-accent)}
.doc ol{counter-reset:doc}
.doc ol li{counter-increment:doc}
.doc ol li::before{content:counter(doc);background:none;color:var(--color-accent-700);font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:13px;width:auto;height:auto;top:0;font-feature-settings:"tnum" 1}
.doc a{color:var(--color-accent-700);text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc dl{margin:var(--leading) 0 0}
.doc dt{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 70%, transparent);margin-top:var(--space-3)}
.doc dd{margin:var(--space-1) 0 0;font-size:15.5px;line-height:var(--leading)}
/* Marks a clause the owner still has to settle. Deliberately loud — it must be
   impossible to publish one of these by accident. */
.todo{display:inline-block;background:var(--color-accent-200);color:var(--color-accent-800);
  border-left:3px solid var(--color-accent);padding:2px var(--space-2);font-size:14px}