/* Sorted pages — the app's own look (apps/sorted/src/index.css): sky-blue world, cream panels, navy ink,
   chunky outlines and pixel type. Loaded after styles.css; it re-points the shared tokens. */
:root{
  --color-ink:#1E3A5F; --color-ink-soft:#1E3A5F; --color-muted:#4E6B88; --color-faint:#5C7A96;
  --color-surface:#E1F1F9; --color-band:#A8D0E6; --color-card:#FBF8F0; --color-sunken:#C6DBE9;
  --color-line:#12233D; --color-accent:#FFD447; --color-accent-text:#B23A2E;
  --color-accent-wash:#FBF8F0; --color-accent-wash-border:#12233D;
  --color-nav-dark:#12233D; --logo-purple:#FF6B57;
  --font-display:"Fraunces",Georgia,serif; --font-body:"Lexend",system-ui,-apple-system,sans-serif;
  --font-mono:"Silkscreen","Courier New",monospace; --font-pixel:"Pixelify Sans","Courier New",monospace;
  --outline:#12233D; --coral:#FF6B57; --btn:#FFD447;
  --r-card:18px;
}
html{ color-scheme:light; background:var(--color-surface); }
::selection{ background:#FFD447; color:#12233D; }
body{ background:var(--color-surface); color:var(--color-ink); }
h1,h2{ font-weight:600; letter-spacing:-.01em; }

header{ background:rgba(168,208,230,.88); border-bottom:4px solid var(--outline); }
header.scrolled{ border-bottom-color:var(--outline); }
.logo{ font-family:"Silkscreen","Courier New",monospace; font-weight:400; font-size:18px; letter-spacing:.14em; color:var(--coral); gap:12px; line-height:1; text-transform:uppercase; }
.logo img{ width:30px; height:30px; border-radius:7px; border:2px solid var(--outline); image-rendering:pixelated; display:block; }
.nav-links{ color:var(--color-muted); font-weight:500; }
.nav-links a:hover{ color:var(--outline); }
.nav-cta{ font-family:var(--font-pixel); font-weight:700; font-size:15px; letter-spacing:.03em; height:36px; border-radius:12px; color:var(--outline); border:3px solid var(--outline); box-shadow:0 3px 0 var(--outline); cursor:default; }
.nav-cta::before{ background:var(--btn); border-radius:9px; }
.mobile-menu{ background:var(--color-band); }

.page-hero{ background:linear-gradient(var(--color-band),var(--color-surface)); border-bottom:4px solid var(--outline); }
.page-hero .section-head{ font-family:var(--font-pixel); font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
.page-hero h1{ font-family:var(--font-pixel); font-weight:700; font-size:clamp(40px,8vw,72px); line-height:.95; color:var(--btn); text-shadow:3px 3px 0 var(--outline); letter-spacing:.01em; }
.page-hero p.lede{ color:var(--color-ink); }
.page-hero .updated{ color:var(--color-faint); }
.hero-icon{ display:block; width:96px; height:96px; margin:0 auto 22px; border:4px solid var(--outline); border-radius:22px; box-shadow:0 6px 0 var(--outline); image-rendering:pixelated; }

.prose-section{ background:var(--color-surface); }
.prose h2{ font-size:24px; color:var(--color-ink); }
.prose p,.prose ul,.prose ol{ color:var(--color-ink); }
.prose p strong,.prose li strong{ color:var(--outline); }
.prose li::marker{ color:var(--coral); }
.prose a{ color:#B23A2E; }
.toc{ background:var(--color-card); border:3px solid var(--outline); box-shadow:0 5px 0 var(--outline); border-radius:var(--r-card); }
.toc h2{ font-family:var(--font-pixel); color:var(--outline); }
.toc a{ color:var(--color-ink); }
.toc a:hover{ color:var(--coral); }

footer{ background:var(--color-band); border-top:4px solid var(--outline); color:var(--color-ink); text-align:center; padding:48px var(--sp-screen) 28px; }
footer .logo{ justify-content:center; margin-bottom:16px; }
footer .foot-links{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin-bottom:22px; font-size:14px; }
footer .foot-links a{ color:var(--outline); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
footer .foot-note{ font-size:13px; color:var(--color-muted); }
.page-hero.has-scene{ position:relative; padding:150px var(--sp-screen) 150px; background:radial-gradient(ellipse 60% 62% at 50% 52%,rgba(18,35,61,.72),rgba(18,35,61,.25) 70%,rgba(18,35,61,.1)),url(/assets/sorted-hero.png) center 46%/cover no-repeat; image-rendering:pixelated; }
.page-hero.has-scene .section-head{ color:#FFB3A6; text-shadow:0 2px 0 var(--outline); }
.page-hero.has-scene p.lede{ color:#fff; text-shadow:0 2px 0 var(--outline); font-weight:500; }
.page-hero.has-scene .updated{ color:#E1F1F9; text-shadow:0 2px 0 var(--outline); }
.page-hero.has-scene .hero-icon{ background:#A8D0E6; }