/* ==========================================================================
   APP INDEXER - legal pages (privacy policy, terms of service)
   The same Tide Station tokens as index.html, cut down to what a page of
   prose needs: masthead, a title band, a reading column, the night footer.
   ========================================================================== */

:root{
  --ink:#0A1A22; --ink-2:#38555E; --ink-3:#4E6A72;
  --paper:#E9EEEE; --surface:#F7FAFA; --surface-2:#FDFEFE;
  --rule:rgba(10,26,34,.16); --rule-strong:rgba(10,26,34,.34); --hairline:rgba(10,26,34,.09);
  --mag:#D4006F; --focus:#0F4468; --on-mag:#FFFFFF;
  --lift2:0 2px 4px rgba(10,26,34,.10), 0 12px 28px rgba(10,26,34,.12);
  --lift3:0 4px 8px rgba(10,26,34,.12), 0 24px 60px rgba(10,26,34,.20);
  --r-plate:2px; --r-sm:6px; --pill:999px;
  --gutter:clamp(16px,4vw,64px);
  --sheet:1320px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
.night{
  --ink:#DCEBEC; --ink-2:#8FB0B6; --ink-3:#7FA3AB;
  --paper:#04141C; --surface:#0A2029; --surface-2:#102B36;
  --rule:rgba(220,235,236,.17); --rule-strong:rgba(220,235,236,.34); --hairline:rgba(220,235,236,.10);
  --focus:#7FEFE0;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Archivo,system-ui,sans-serif; font-size:16px; font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
svg{display:block; max-width:100%}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm)}

.legend{
  font-family:"Archivo Narrow",Archivo,sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; line-height:1.3;
  color:var(--ink-2);
}
.sheet{max-width:var(--sheet); margin:0 auto; padding-inline:var(--gutter)}

/* ---- masthead ------------------------------------------------------------ */
.masthead{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--rule)}
.masthead .sheet{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto}
.brand .mark{width:30px; height:30px; border-radius:7px; flex:none}
.brand b{font-weight:700; font-size:17px; letter-spacing:-.022em}
.brand .legend{display:block; font-size:9.5px; letter-spacing:.17em; margin-top:-2px}
.btn{
  display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 24px;
  border-radius:var(--pill); border:1px solid transparent;
  font-family:Archivo,sans-serif; font-size:15px; font-weight:600; letter-spacing:-.012em;
  text-decoration:none; white-space:nowrap;
  transition:box-shadow .16s var(--ease), transform .1s var(--ease);
}
.btn svg{flex:none}
.btn-mag{background:var(--mag); color:var(--on-mag); box-shadow:var(--lift2)}
.btn-mag:hover{box-shadow:var(--lift3)}
.btn-mag:active{transform:translateY(1px)}
@media(max-width:420px){.btn{padding:0 18px}}

/* ---- title band ---------------------------------------------------------- */
.doc-head{background:var(--surface); border-bottom:1px solid var(--rule)}
.doc-head .sheet{padding-block:clamp(40px,5vw,72px) clamp(32px,4vw,52px)}
h1,h2{margin:0; font-weight:700; text-wrap:balance}
h1{font-size:clamp(36px,5vw,60px); letter-spacing:-.03em; line-height:1.04; margin-top:10px}
.doc-head .lede{font-size:clamp(16.5px,1.35vw,19px); line-height:1.55; color:var(--ink-2); max-width:60ch; margin:18px 0 0}
.doc-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px}

/* ---- the reading column -------------------------------------------------- */
.doc .sheet{padding-block:clamp(28px,4vw,56px) clamp(64px,8vw,112px)}
.prose{max-width:70ch}
.prose section{padding-top:30px}
.prose section:first-child{padding-top:0}
/* the section rule: a tracked heading, a hairline filling the rest */
.prose h2{
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
  font-family:"Archivo Narrow",Archivo,sans-serif; font-weight:700;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; line-height:1.3; color:var(--ink);
}
.prose h2::after{content:""; flex:1; height:1px; background:var(--rule)}
.prose h2 .n{color:var(--ink-3); font-variant-numeric:tabular-nums}
.prose p,.prose li{font-size:16px; line-height:1.65; color:var(--ink-2)}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px; padding-left:20px}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--ink-3)}
.prose strong{color:var(--ink); font-weight:600}
.prose a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule-strong); text-underline-offset:3px; overflow-wrap:anywhere}
.prose a:hover{text-decoration-color:var(--ink)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:var(--hairline); padding:1px 5px; border-radius:var(--r-plate); overflow-wrap:anywhere}
.caps{text-transform:uppercase; letter-spacing:.01em}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--paper); border-top:1px solid var(--rule)}
footer .sheet{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; padding-block:26px 30px}
footer a{text-decoration:none; color:var(--ink-2); transition:color .16s var(--ease)}
footer a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
footer a[aria-current="page"]{color:var(--ink)}
footer .legend{color:var(--ink-3)}
.push{margin-left:auto}
@media(max-width:640px){.push{margin-left:0}}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:var(--r-sm)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important}
}