/* ===========================================================================
   Shared styling for the secondary pages: faq, privacy, terms, 404.

   WHY THIS FILE EXISTS, and why it is the one exception to the "everything is
   inline in index.html" rule:

   index.html is inline because it is ONE page, and an inline style block costs
   no extra request for a visitor who only ever loads that page. That reasoning
   inverts the moment there are four more pages: duplicating the tokens into
   each of them means the day the accent colour changes, four files go stale
   silently. One shared file, cached after the first subpage, is correct here.

   It is deliberately NOT a copy of index.html's CSS. It carries only the design
   tokens plus what a page of prose needs. The landing page keeps its own.

   CONVENTIONS, same as index.html:
     - Light is the default theme, dark is behind the same toggle and the same
       localStorage key, so a choice made on the landing page survives the jump
     - No em dashes or en dashes anywhere, including in these comments
     - prefers-reduced-motion is respected
   ======================================================================== */

/* SELF HOSTED FONTS, same two files the landing page uses and the same ranges,
   so a visitor arriving here from index.html finds them already cached and the
   subpage costs no font download at all.

   These are here rather than in each page's head for the same reason this file
   exists: four copies of a font stack is four things to forget to update.

   Paths are relative to THIS FILE, so the css must sit beside assets/, i.e. at
   the site root next to index.html. Move it into a subfolder and the fonts 404
   silently and the pages fall back to Georgia. */
@font-face{
  font-family:'Albert Sans'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('assets/fonts/albert-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Albert Sans'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('assets/fonts/albert-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Paper. Identical values to index.html :root[data-theme="light"], because
     these pages must not look like a different website. */
  --bg:        #fbfaf7;
  --bg-raise:  #ffffff;
  --band:      #f1eee7;
  --line:      #e7e4dc;
  --ink:       #14161a;
  --ink-dim:   #585d66;
  --ink-faint: #6d727c;
  --lantern:   #2b3ee0;
  --ink-on-lantern: #ffffff;
  --shadow:    20,22,26;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Albert Sans", "Helvetica Neue", sans-serif;

  /* Narrower than the landing page's 1120px. Long-form prose wants roughly 70
     characters per line, and the landing page width would give about 110. */
  --max: 720px;
}

:root[data-theme="dark"]{
  --bg:        #232935;
  --bg-raise:  #2c333f;
  --band:      #171c24;
  --line:      #39414f;
  --ink:       #e6eaf0;
  --ink-dim:   #c8cfda;
  --ink-faint: #98a3b4;
  --lantern:   #4aa6e6;
  --ink-on-lantern: #04121c;
  --shadow:    0,0,0;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

.wrap{ width:min(100% - 44px, var(--max)); margin-inline:auto; }

/* --- Navigation ---------------------------------------------------------- */
/* Deliberately minimal. These pages exist to answer a question and send the
   visitor back to the work, so the only real link is home. */

.sub-nav{
  position:sticky; top:0; z-index:20;
  background:rgba(251,250,247,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
:root[data-theme="dark"] .sub-nav{ background:rgba(35,41,53,.86); }

.sub-nav .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0;
}

.sub-nav a.home{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:15px; letter-spacing:.02em;
  color:var(--ink); text-decoration:none;
}
.sub-nav a.home svg{ width:22px; height:22px; flex:none; }
.sub-nav a.home:hover{ color:var(--lantern); }

.theme-toggle{
  display:grid; place-items:center;
  width:36px; height:36px; padding:0;
  background:none; border:1px solid var(--line); border-radius:9px;
  color:var(--ink-dim); cursor:pointer;
}
.theme-toggle:hover{ color:var(--lantern); border-color:var(--lantern); }
.theme-toggle svg{ width:17px; height:17px; }
.icon-sun{ display:block; }
.icon-moon{ display:none; }
:root[data-theme="dark"] .icon-sun{ display:none; }
:root[data-theme="dark"] .icon-moon{ display:block; }

/* --- Page head ----------------------------------------------------------- */

.page-head{ padding:74px 0 34px; }
.page-head .eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lantern); margin:0 0 14px;
}
.page-head h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(34px, 6vw, 50px); line-height:1.08; letter-spacing:-.015em;
  margin:0;
}
.page-head .standfirst{
  margin:18px 0 0; font-size:19px; line-height:1.6; color:var(--ink-dim);
}
.page-head .updated{
  margin:22px 0 0; font-size:13px; color:var(--ink-faint);
}

/* --- Prose --------------------------------------------------------------- */

main{ padding-bottom:76px; }

.prose h2{
  font-family:var(--font-display); font-weight:600;
  font-size:26px; line-height:1.25; letter-spacing:-.01em;
  margin:52px 0 14px; scroll-margin-top:80px;
}
.prose h3{
  font-size:17px; font-weight:600; margin:30px 0 8px; letter-spacing:.01em;
}
.prose p, .prose li{ color:var(--ink-dim); }
.prose p{ margin:0 0 15px; }
.prose ul, .prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin-bottom:8px; }
.prose strong{ color:var(--ink); font-weight:600; }

.prose a{ color:var(--lantern); text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover{ text-decoration-thickness:2px; }

/* BUTTONS INSIDE .prose MUST WIN, AND THE RULE ABOVE IS WHY THIS EXISTS.
   `.prose a` is specificity (0,1,1) and `.btn` is (0,1,0), so a button sitting
   in the prose column had its colour overridden by the link rule. On a ghost
   button that is invisible, because the background is transparent and lantern
   on paper reads fine. On the SOLID button it is lantern text on a lantern
   background: a blue rectangle with no words in it, which is exactly how it
   shipped and how it looked in the screenshot that caught it.

   Underline is removed for the same reason: a button that is also underlined
   reads as neither. */
.prose a.btn{ color:var(--ink-on-lantern); text-decoration:none; }
.prose a.btn.ghost{ color:var(--ink); }
.prose a.btn.ghost:hover{ color:var(--lantern); }

/* A quiet aside for the "here is the short version" lines. Used sparingly:
   its whole value is that it is rare on the page. */
.callout{
  margin:22px 0; padding:16px 20px;
  background:var(--band); border-left:3px solid var(--lantern); border-radius:0 10px 10px 0;
}
.callout p{ margin:0; color:var(--ink); font-size:16px; }

/* Contents list at the top of the long legal pages. Long documents that cannot
   be skimmed do not get read, and an unread policy is worth nothing. */
.toc{
  margin:34px 0 0; padding:20px 24px;
  background:var(--band); border-radius:12px;
}
.toc p{ margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.16em;
        text-transform:uppercase; color:var(--ink-faint); }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ margin-bottom:5px; }
.toc a{ color:var(--ink-dim); text-decoration:none; }
.toc a:hover{ color:var(--lantern); text-decoration:underline; }

/* --- FAQ accordion ------------------------------------------------------- */
/* Built on <details>, so it works with JavaScript disabled, is keyboard
   operable for free, and crucially is present in the DOM even when collapsed.
   That last point is why an accordion is safe for SEO: search engines and AI
   crawlers read the answer whether or not it is open. */

.faq-group{ margin:44px 0 0; }
.faq-group > h2{ margin-bottom:6px; }

details.qa{
  border-bottom:1px solid var(--line);
}
details.qa summary{
  display:flex; align-items:flex-start; gap:14px;
  padding:19px 0; cursor:pointer; list-style:none;
  font-size:17px; font-weight:600; line-height:1.45; color:var(--ink);
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary:hover{ color:var(--lantern); }
details.qa summary:focus-visible{ outline:2px solid var(--lantern); outline-offset:3px; border-radius:4px; }

/* The chevron is drawn in CSS rather than shipped as an icon: it is two lines,
   and it needs to rotate. */
details.qa summary::after{
  content:""; flex:none; margin-left:auto; margin-top:7px;
  width:9px; height:9px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg); transition:transform .22s ease;
}
details.qa[open] summary::after{ transform:rotate(-135deg); margin-top:11px; }

details.qa .answer{ padding:0 34px 22px 0; }
details.qa .answer > *:last-child{ margin-bottom:0; }

/* --- Footer -------------------------------------------------------------- */

.sub-foot{
  border-top:1px solid var(--line); padding:30px 0 44px;
  font-size:13px; color:var(--ink-faint);
}
.sub-foot .wrap{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
}
.sub-foot nav{ display:flex; flex-wrap:wrap; gap:18px; }
.sub-foot a{ color:var(--ink-faint); text-decoration:none; }
.sub-foot a:hover{ color:var(--lantern); text-decoration:underline; }

/* The six mood colours, as a seam. The one piece of the landing page's visual
   language that survives onto these pages. */
.spectrum-mini{
  height:2px; width:100%; margin-bottom:26px;
  background:linear-gradient(90deg,#7ec8e3,#4d78b5,#e8c46a,#9b7ec8,#7fa25c,#d05555);
  opacity:.75;
}

/* --- Buttons ------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:11px;
  background:var(--lantern); color:var(--ink-on-lantern);
  font-weight:600; font-size:15px; text-decoration:none;
  border:1px solid transparent;
}
.btn:hover{ filter:brightness(1.08); }
.btn.ghost{
  background:none; color:var(--ink); border-color:var(--line);
}
.btn.ghost:hover{ border-color:var(--lantern); color:var(--lantern); filter:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }

@media (max-width: 640px){
  body{ font-size:16px; }
  .page-head{ padding:52px 0 26px; }
}