/* Shared by the privacy and terms pages. Same palette and type as the landing page,
   but set for reading: one narrow column, no panels, no devices. A legal page that
   tries to look like a landing page is harder to read and trusted less.

   White page, black footer, same as the landing page. No light/dark switch: the
   policy pages must not flip to a different scheme than the site they hang off.

   ⚠️ THESE VALUES ARE THE LANDING PAGE'S, AND THEY HAVE TO STAY THAT WAY. They were
   the warm set from the black-and-copper era for a while after index.html moved to
   the blue one, so clicking "Privacy policy" took you from one company's site to
   another's: a cooler ink, a different hairline, and a white header bar where the
   landing page has a black one. Nothing looked broken, which is exactly why it
   survived. Change a colour here only by copying it out of index.html. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --paper-2:#F4F7FA; --ink:#0A0C10; --ink-soft:#5C636E;
  --line:#E4E8ED;
  --dark:#07090C; --on-dark:#F2F5F8; --on-dark-soft:#8C95A2; --on-dark-line:#20262E;
  --brand:#0590F7;
  /* 2026-09-25: the same blue, deep enough for TEXT. #0590F7 on white is about 3.3:1, under the
     4.5:1 small text needs to be read comfortably; this is about 4.9:1. Fills keep --brand. */
  --brand-ink:#006FD6;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; letter-spacing:-.011em; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.wrap{width:min(100% - 2.5rem, 44rem); margin-inline:auto}

/* STAYS AT THE TOP while the page scrolls, matching the landing page, which has always done this
   (index.html sets its own sticky header). These pages did not, so the way back was only reachable
   by scrolling all the way up again — worst on privacy and terms, which are the longest pages on
   the site and the two people are most likely to want to leave halfway through.

   The background is solid rather than blurred on purpose: a translucent bar over a plain white
   page buys nothing visually and costs a compositing layer on every scroll frame. */
/* BLACK, because the landing page's bar is black and always has been. This one
   was white with a black wordmark, so following a footer link swapped the one
   piece of furniture that is supposed to never change.

   Solid rather than blurred on purpose: a translucent bar over a plain white page
   buys nothing visually and costs a compositing layer on every scroll frame. */
header{
  position:sticky; top:0; z-index:50;
  background:var(--dark); color:var(--on-dark);
}
.bar{display:flex; align-items:center; height:64px; gap:1.5rem}
/* Same drawn wordmark as the landing page. The letters and the second dot are
   currentColor, so on this black bar they come out off-white with no second rule. */
.brand{display:inline-flex; align-items:center; text-decoration:none; color:var(--on-dark)}
.wm{height:26px; width:auto; display:block}
.bar nav{margin-left:auto; display:flex; gap:1.5rem}
.bar nav a{color:var(--on-dark-soft); text-decoration:none; font-size:.94rem; transition:color .16s ease}
@media (hover:hover){.bar nav a:hover{color:var(--on-dark)}}

main{padding:4rem 0 5rem}
h1{font-size:clamp(2.1rem,4.5vw,2.9rem); font-weight:600; letter-spacing:-.034em; line-height:1.08; margin:0}
.updated{color:var(--ink-soft); font-size:.92rem; margin:.9rem 0 0}
.intro{font-size:1.1rem; color:var(--ink-soft); margin:1.75rem 0 0}
h2{font-size:1.28rem; font-weight:600; letter-spacing:-.02em; margin:3rem 0 .8rem; line-height:1.25}
h3{font-size:1.02rem; font-weight:500; margin:1.75rem 0 .5rem}
p{margin:0 0 1rem}
ul{margin:0 0 1rem; padding-left:1.15rem}
li{margin-bottom:.45rem}
.note{border-left:2px solid var(--brand); padding:.25rem 0 .25rem 1rem; margin:1.5rem 0; color:var(--ink-soft)}
table{width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:.95rem; display:block; overflow-x:auto}
th,td{text-align:left; padding:.6rem .8rem .6rem 0; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:500; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
code{background:var(--paper-2); padding:.1rem .3rem; border-radius:4px; font-size:.9em}

/* Link landing pages (/u/<handle>, /g/<code>). Reached by somebody who tapped a Fariin
   link WITHOUT the app installed — on iOS with the app present, the link never gets here,
   it opens the app. So this page is written for a stranger, not for a user. One column,
   centred, nothing to read but the point. */
.linkpage{padding:5rem 0 6rem; text-align:center}
.linkpage h1{font-size:clamp(1.9rem,4vw,2.4rem)}
.token{display:inline-block; margin:0 0 .35rem; font-size:1.35rem; font-weight:600;
  letter-spacing:-.02em; word-break:break-all}
.linkpage .intro{margin:1.25rem auto 0; max-width:26rem}
/* The one place the accent is allowed on these pages, exactly as on the landing
   page: a button fill, never a word of text. */
.cta{display:inline-block; margin-top:2rem; background:var(--brand); color:#fff;
  text-decoration:none; font-size:1rem; font-weight:500; line-height:1;
  padding:1rem 1.9rem; border-radius:999px}
.cta:hover{background:#0273D4}
.aside{margin:1.5rem auto 0; max-width:26rem; color:var(--ink-soft); font-size:.95rem}

/* Black, matching the footer on the landing page. */
footer{background:var(--dark); padding:2.75rem 0 3.5rem; color:var(--on-dark-soft); font-size:.9rem}
footer a{color:var(--on-dark-soft)}
@media (hover:hover){footer a:hover{color:var(--on-dark)}}
.fbot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}


/* ---- moving between pages ----
   The other half of the landing page's cross-document view transition. Both
   ends have to declare it or the browser does nothing, which is the sort of
   thing that looks like the feature not working. */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){animation-duration:.22s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}


/* 2026-09-25, the phone pass: no blue box on tap, anywhere on these pages. Pressed states are
   drawn by each page's own :active rules instead. */
html{-webkit-tap-highlight-color:transparent}
/* The footer links were one underlined run with middots between them; on a phone they wrap as a
   clean list. `font-size:0` on the line hides the middot text nodes without touching the markup. */
@media (max-width:640px){
  .fbot{flex-direction:column; gap:1.25rem}
  .fbot > span:last-child{display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; font-size:0}
  .fbot > span:last-child a{font-size:.95rem; text-decoration:none}
}

/* 2026-09-25, owner: "our colour makes things visible instead of plain text". Links inside the
   words are Fariin blue (the text shade), so what can be tapped is seen, not guessed. Lists of
   articles and topics are whole-row links and keep their own ink. */
main p a, main li a, .note a{color:var(--brand-ink); text-decoration:none; font-weight:500}
main p a:active, main li a:active, .note a:active{text-decoration:underline; text-underline-offset:3px}
@media (hover:hover){main p a:hover, main li a:hover, .note a:hover{text-decoration:underline; text-underline-offset:3px}}