/* Peeped — shared stylesheet for every page.
   One home for colour, type, spacing, radius and the site chrome.
   Page-specific layout stays in the page. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-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{
  color-scheme: dark;

  /* ground */
  --bg:        #0a0b12;
  --plane:     #0c0e17;
  --panel:     #12141f;
  --panel-2:   #171a28;
  --panel-3:   #1e2233;

  /* line — translucent, so it composites on any ground */
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.05);

  /* ink. --ink-3 is 3.67:1 — large or non-essential text only */
  --ink:       #eef0f7;
  --ink-2:     #9aa0b6;
  --ink-3:     #646a82;

  /* brand */
  --iris:      #7b74ff;
  --iris-2:    #9a92ff;
  --iris-deep: #5a52d6;   /* button ground: white on this is 5.81:1 */
  --iris-wash: rgba(123,116,255,0.12);
  --aqua:      #37d0ae;

  /* state */
  --good:      #2fb350;
  --bad:       #e05555;
  --warn:      #c98500;

  /* data series, validated on the dark ground */
  --s-blue:    #3987e5;
  --s-orange:  #d95926;
  --s-aqua:    #199e70;
  --s-yellow:  #c98500;
  --s-violet:  #9085e9;

  /* measure */
  --maxw:      1180px;   /* app pages */
  --maxw-prose: 820px;   /* docs, blog, legal */

  /* radius */
  --r-sm:      6px;
  --r-md:      10px;
  --r-lg:      14px;
  --r-pill:    999px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--ink); font-family:var(--sans); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background: var(--bg);
}
a{ color:var(--iris-2); text-decoration:none }
a:hover{ text-decoration:underline }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }
.wrap.prose{ max-width:var(--maxw-prose) }

/* figures: every number on the site is mono and tabular */
.num, .price, .stat-value, td.num, th.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* wide content scrolls inside itself; the page never does */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  font:inherit; font-weight:600; border-radius:var(--r-md);
  padding:11px 20px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{ border-color:var(--ink-3); text-decoration:none }
.btn-primary{ background:var(--iris-deep); border-color:var(--iris-deep); color:#fff }
.btn-primary:hover{ background:var(--iris); border-color:var(--iris); text-decoration:none }
.btn-sm{ padding:8px 15px; font-size:14px; border-radius:var(--r-sm) }

/* ---------- header ---------- */
header.site{
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px);
}
header.site .row{ display:flex; align-items:center; gap:16px; height:60px }
.brand{
  display:flex; align-items:center; gap:9px; font-weight:750; font-size:16px;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none;
}
.brand:hover{ text-decoration:none }
.brand .glyph{ width:20px; height:20px; flex:none }
.brand .x{ color:var(--aqua) }

header.site nav{ margin-left:auto; display:flex; gap:22px; font-size:14px }
header.site nav a{ color:var(--ink-2); text-decoration:none }
header.site nav a:hover{ color:var(--ink); text-decoration:none }
header.site nav a[aria-current="page"]{ color:var(--ink) }
.nav-cta{ flex:none }

/* mobile drawer — no JavaScript */
.navtoggle{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none }
.navburger{
  display:none; margin-left:auto; width:38px; height:38px; flex:none;
  align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink-2);
}
.navburger:hover{ color:var(--ink) }
.navburger svg{ width:18px; height:18px }
header.site nav a.cta-fallback{ display:none }

@media (max-width:860px){
  header.site .row{ flex-wrap:wrap; height:auto; padding-top:11px; padding-bottom:11px }
  .navburger{ display:inline-flex; order:2; margin-left:12px }
  .nav-cta{ order:1; margin-left:auto }
  header.site nav{
    display:none; order:3; width:100%; margin:0;
    flex-direction:column; gap:0; padding:4px 0 2px;
    border-top:1px solid var(--line-2);
  }
  header.site nav a{ padding:11px 2px; font-size:15px }
  .navtoggle:checked ~ nav{ display:flex }
}
@media (max-width:430px){
  .nav-cta{ display:none }
  .navburger{ margin-left:auto }
  header.site nav a.cta-fallback{ display:block; color:var(--iris-2); font-weight:600 }
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line-2); margin-top:56px;
  padding:34px 0 40px; color:var(--ink-3); font-size:13px;
}
footer.site .cols{ display:flex; flex-wrap:wrap; gap:28px 56px; align-items:flex-start }
footer.site h4{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px; font-weight:600;
}
footer.site ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px }
footer.site a{ color:var(--ink-2); text-decoration:none }
footer.site a:hover{ color:var(--ink); text-decoration:none }
footer.site .end{
  margin-top:28px; padding-top:18px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
}
footer.site .end .sp{ margin-left:auto }

/* ---------- prose pages: legal, docs, blog ---------- */
main.legal{ padding:44px 0 72px }
main.legal h1{ font-size:34px; letter-spacing:-.022em; margin:0 0 6px }
.updated{ color:var(--ink-3); font-family:var(--mono); font-size:13px; margin:0 0 26px }
main.legal h2{ font-size:19px; margin:34px 0 10px; letter-spacing:-.015em }
main.legal h3{ font-size:15px; margin:22px 0 6px; color:var(--ink) }
main.legal p, main.legal li{ color:var(--ink-2); font-size:15.5px }
main.legal ul{ padding-left:20px; margin:8px 0 }
main.legal li{ margin:5px 0 }
main.legal strong{ color:var(--ink) }
main.legal a{ font-weight:500 }
.lead{ font-size:17px; color:var(--ink)!important; margin:0 0 8px }

.toc{ border:1px solid var(--line); background:var(--panel); border-radius:var(--r-lg);
  padding:16px 20px; margin:8px 0 30px }
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:28px }
.toc li{ margin:4px 0; break-inside:avoid }
@media (max-width:620px){ .toc ol{ columns:1 } }

.note{ border:1px solid rgba(123,116,255,0.3); background:var(--iris-wash);
  border-radius:var(--r-lg); padding:14px 18px; font-size:13.5px; color:var(--ink-2); margin:0 0 28px }
.note strong{ color:var(--iris-2) }

table.tbl{ width:100%; border-collapse:collapse; margin:12px 0; font-size:14px }
table.tbl th, table.tbl td{ border:1px solid var(--line); padding:8px 12px; text-align:left; color:var(--ink-2) }
table.tbl th{ color:var(--ink); background:var(--panel-2); font-weight:600 }

/* ---------- blog ---------- */
.bloglead{ margin:8px 0 30px }
.bloglist{ list-style:none; padding:0; margin:0 }
.postcard{ border:1px solid var(--line); background:var(--panel); border-radius:var(--r-lg);
  padding:20px 22px; margin:0 0 16px; display:block; transition:border-color .15s }
.postcard:hover{ border-color:var(--iris); text-decoration:none }
.postcard .tag{ display:inline-block; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--iris-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 10px; margin-bottom:10px }
.postcard h2{ font-size:20px; color:var(--ink); margin:0 0 6px; letter-spacing:-.015em }
.postcard .date{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); margin:0 0 8px }
.postcard p{ color:var(--ink-2); font-size:15px; margin:0 }
.postmeta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 22px }
.postmeta .tag{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--iris-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 10px }
.postmeta .date{ font-family:var(--mono); font-size:13px; color:var(--ink-3) }
.backlink{ display:inline-block; font-size:13.5px; color:var(--ink-2); margin:0 0 22px }
.post h2{ font-size:20px; margin:30px 0 8px }
.post h3{ font-size:16px; margin:22px 0 6px }
.post ul{ padding-left:20px } .post li{ margin:6px 0 }
.post .src{ font-size:13px; color:var(--ink-3); border-top:1px solid var(--line-2); margin-top:34px; padding-top:16px }
.post .src a{ color:var(--ink-3) }
.disc{ font-size:12.5px; color:var(--ink-3); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:12px 16px; margin:26px 0 0 }

/* ---------- subscribe ---------- */
.subscribe{ border:1px solid var(--line); background:var(--panel); border-radius:var(--r-lg);
  padding:22px 24px; margin:34px 0 8px }
.subscribe h2{ font-size:19px; margin:0 0 6px }
.subscribe p{ color:var(--ink-2); font-size:14.5px; margin:0 0 14px }
.subrow{ display:flex; gap:10px; flex-wrap:wrap }
.subrow input{ flex:1; min-width:210px; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-md); padding:11px 13px; font:inherit }
.subrow input:focus{ outline:none; border-color:var(--iris) }
.subrow button{ background:var(--iris-deep); color:#fff; border:0; border-radius:var(--r-md); padding:11px 22px;
  font:inherit; font-weight:600; cursor:pointer }
.subrow button:hover{ background:var(--iris) }
.submsg{ font-size:13px; color:var(--ink-2); margin-top:10px; min-height:1.1em }

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