/* ============ TOKENS ============ */
:root {
  --bg1:#0C1B26; --bg2:#123041;
  --glow1:#D9A845; --glow2:#3E7FA6;
  --accent:#E3B658; --accent-ink:#101114;
  --ink:#F2EDE3; --muted:#9DAAB0;
  --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.11);
  --log-bg:#071019;
  --focus:#E3B658;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg1:#F0F4F5; --bg2:#DEE9EC;
    --glow1:#C9974F; --glow2:#7FB0C4;
    --accent:#8A6410; --accent-ink:#FFFFFF;
    --ink:#14232E; --muted:#54666F;
    --card:rgba(255,255,255,.72); --line:rgba(20,35,46,.14);
    --log-bg:#14232E;
    --focus:#8A6410;
  }
}
:root[data-theme="light"] {
  --bg1:#F0F4F5; --bg2:#DEE9EC;
  --glow1:#C9974F; --glow2:#7FB0C4;
  --accent:#8A6410; --accent-ink:#FFFFFF;
  --ink:#14232E; --muted:#54666F;
  --card:rgba(255,255,255,.72); --line:rgba(20,35,46,.14);
  --log-bg:#14232E;
  --focus:#8A6410;
}

/* ============ FONTS ============ */
@font-face { font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/assets/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ============ BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme: dark light; }
body {
  font-family:Inter, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 460px at 78% -8%, color-mix(in srgb, var(--glow2) 16%, transparent), transparent 70%),
    radial-gradient(760px 300px at 12% 4%, color-mix(in srgb, var(--glow1) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 130%);
  background-attachment: fixed;
  min-height:100vh;
  transition: background .35s, color .35s;
}
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
main { max-width:1080px; margin:0 auto; }

.stars { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.65;
  background-image:
    radial-gradient(1px 1px at 12% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 8%,  rgba(255,255,255,.32) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 20%, rgba(255,255,255,.38) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 30%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 34%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 4%,  rgba(255,255,255,.32) 50%, transparent 51%);
}
:root[data-theme="light"] .stars { opacity:0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .stars { opacity:0; } }
body > * { position:relative; z-index:1; }

/* ============ NAV / FOOTER ============ */
.nav { max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:26px 28px; }
.mark { display:flex; align-items:center; gap:13px; }
.mark .sq { width:36px; height:36px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; border-radius:8px; font-family:'Space Grotesk'; font-weight:700; font-size:14px; backdrop-filter:blur(4px); }
.mark .nm { font-family:'Space Grotesk'; font-weight:500; font-size:16px; }
.nav .links { display:flex; gap:26px; align-items:center; font-size:14px; font-weight:500; color:var(--muted); }
.nav .links a:hover { color:var(--ink); }
.theme-toggle { background:none; border:1px solid var(--line); color:var(--muted); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:15px; line-height:1; }
.theme-toggle:hover { color:var(--ink); border-color:var(--ink); }
.foot { max-width:1080px; margin:0 auto; padding:34px 28px; font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.14em; color:var(--muted); opacity:.8; }

/* ============ HERO ============ */
.hero { padding:64px 28px 30px; max-width:820px; }
.hero .kicker { font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; }
.hero .headline { font-family:'Instrument Serif'; font-weight:400; font-size:clamp(38px, 6.4vw, 66px); line-height:1.05; letter-spacing:-.5px; }
.hero .headline em { font-style:italic; color:var(--accent); }
.hero .sub { margin-top:22px; font-size:17px; color:var(--muted); line-height:1.65; max-width:540px; }

/* ============ SHIPPING LOG ============ */
.ship { margin:38px 28px 0; border:1px solid var(--line); background:var(--log-bg); color:#F2EDE3; border-radius:12px; padding:16px 24px; display:flex; align-items:center; gap:22px; overflow-x:auto; }
.ship .lbl { font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.16em; color:var(--glow1); white-space:nowrap; }
.ship .log { font-family:'JetBrains Mono'; font-size:12px; color:#B8C4CE; white-space:nowrap; }
.ship .log b { color:#F2EDE3; font-weight:500; }

/* ============ APP CARDS ============ */
.cardgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; padding:34px 28px 8px; }
.appcard { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; backdrop-filter:blur(6px); position:relative; transition:transform .2s, border-color .2s, box-shadow .2s; }
.appcard:hover { border-color:color-mix(in srgb, var(--accent) 55%, transparent); transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.35); color:inherit; }
.appcard .ver { position:absolute; top:20px; right:20px; font-family:'JetBrains Mono'; font-size:10px; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:4px; }
.appcard h3 { font-family:'Space Grotesk'; font-size:18px; font-weight:700; letter-spacing:-.3px; padding-right:56px; }
.appcard p { margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.appcard .go { margin-top:16px; font-size:13px; font-weight:600; color:var(--accent); }

/* ============ TEASER ============ */
.teaser { margin:34px 28px 0; border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius:14px; padding:28px; }
.teaser .eyebrow { font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.teaser h2 { font-family:'Instrument Serif'; font-weight:400; font-size:30px; }
.teaser p { margin-top:10px; color:var(--muted); font-size:15px; line-height:1.65; max-width:560px; }
.teaser a { color:var(--accent); font-weight:600; }

/* ============ SUBPAGES ============ */
.pagehead { padding:56px 28px 12px; max-width:820px; }
.pagehead .kicker { font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.pagehead h1 { font-family:'Instrument Serif'; font-weight:400; font-size:clamp(34px, 5vw, 52px); line-height:1.08; }
.pagehead .tagline { margin-top:12px; color:var(--muted); font-size:17px; }
.prose { padding:14px 28px 56px; max-width:680px; font-size:16px; line-height:1.75; }
.prose p + p { margin-top:1em; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-ink); font-family:'Space Grotesk'; font-weight:700; font-size:14px; border-radius:9px; padding:12px 26px; margin-top:20px; }
.btn:hover { color:var(--accent-ink); filter:brightness(1.08); }

/* ============ BLOG ============ */
@font-face { font-family:'Newsreader'; src:url('/assets/fonts/newsreader-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/assets/fonts/newsreader-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/assets/fonts/newsreader-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/assets/fonts/newsreader-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

.yearspine { display:flex; justify-content:center; align-items:flex-end; gap:6px; padding:26px 28px 6px; flex-wrap:wrap; }
.yearspine .yr { display:flex; flex-direction:column; align-items:center; gap:6px; }
.yearspine .bar { width:14px; background:var(--card); border:1px solid var(--line); border-radius:3px 3px 0 0; transition:background .15s, border-color .15s; }
.yearspine .yr:hover .bar, .yearspine .yr.active .bar { background:var(--accent); border-color:var(--accent); }
.yearspine .y { font-family:'JetBrains Mono'; font-size:9.5px; color:var(--muted); }
.archive-note { text-align:center; font-family:'Instrument Serif'; font-style:italic; font-size:17px; color:var(--muted); padding:10px 28px 26px; }
.archive-note b { color:var(--accent); font-style:normal; font-weight:400; }

.postlist { max-width:680px; margin:0 auto; padding:8px 28px 56px; display:flex; flex-direction:column; gap:16px; }
.postlist .row { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.postlist .row .t { font-family:'Newsreader'; font-size:19px; font-weight:500; }
.postlist .row .t:hover { color:var(--accent); }
.postlist .row .d { font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted); white-space:nowrap; }

.post-head { max-width:680px; margin:0 auto; padding:56px 28px 8px; }
.post-head .date { font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.post-head h1 { font-family:'Newsreader'; font-weight:700; font-size:clamp(30px, 4.6vw, 42px); line-height:1.15; margin-top:12px; letter-spacing:-.3px; }

.post-body { max-width:680px; margin:0 auto; padding:18px 28px 40px; font-family:'Newsreader'; font-size:19px; line-height:1.75; overflow-wrap:break-word; }
.post-body p { margin:0 0 1.1em; }
.post-body a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.post-body img { max-width:100%; height:auto; border-radius:8px; }
.post-body blockquote { border-left:3px solid var(--accent); padding-left:18px; font-style:italic; color:var(--muted); margin:1.2em 0; }
.post-body figure { margin:1.4em 0; }
.post-body figcaption, .post-body .img-missing { font-family:Inter; font-size:13px; color:var(--muted); font-style:italic; margin-top:6px; }
.post-body pre { font-family:'JetBrains Mono'; font-size:13.5px; background:var(--log-bg); color:#F2EDE3; border-radius:8px; padding:16px; overflow-x:auto; }
.post-body table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; font-family:Inter; font-size:14px; }
.post-body table td, .post-body table th { border:1px solid var(--line); padding:6px 10px; }

.private-badge { font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:4px; padding:4px 10px; display:inline-block; margin-bottom:14px; }

.comments { max-width:680px; margin:0 auto; padding:8px 28px 64px; }
.comments h2 { font-family:'Instrument Serif'; font-weight:400; font-size:24px; margin-bottom:18px; }
.comments .comment { border-top:1px solid var(--line); padding:14px 0; }
.comments .who { font-weight:600; font-size:14px; font-family:Inter; }
.comments .when { font-family:'JetBrains Mono'; font-size:10px; color:var(--muted); margin-left:10px; }
.comments .comment .body { font-size:15px; line-height:1.6; margin-top:6px; color:var(--ink); font-family:Inter; }

/* homepage latest-writing row */
.bloghome { margin:26px 28px 0; padding:24px 0 10px; border-top:1px solid var(--line); display:flex; gap:44px; align-items:baseline; }
.bloghome .h { font-family:'Instrument Serif'; font-size:19px; font-style:italic; white-space:nowrap; }
.bloghome > div { display:flex; gap:36px; flex-wrap:wrap; }
.bloghome a { font-size:13px; color:var(--muted); }
.bloghome a b { color:var(--ink); font-weight:500; display:block; font-size:14px; }

/* ============ ADMIN ============ */
body.admin { max-width:none; }
.admin-nav { max-width:1080px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:18px 28px; border-bottom:1px solid var(--line); }
.admin-nav .links { display:flex; gap:20px; align-items:center; font-size:13.5px; font-weight:500; color:var(--muted); }
.admin-nav .links a:hover { color:var(--ink); }
.admin-main { max-width:1080px; margin:0 auto; padding:0 28px 60px; }

.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.filters input, .filters select { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:7px; padding:8px 12px; font-size:13.5px; font-family:Inter; }
.filters input[type="text"] { flex:1; min-width:180px; }

/* Native <option> popups render outside the page's own background/backdrop,
   so a translucent var(--card) shows through as plain white with whatever
   the OS default text color is — force an opaque background + explicit
   ink color on every select AND its options, everywhere in the admin. */
body.admin select { background:var(--bg2); color:var(--ink); }
body.admin select option { background:var(--bg2); color:var(--ink); }

.admin-table { width:100%; border-collapse:collapse; font-family:Inter; font-size:13.5px; }
.admin-table thead th { position:sticky; top:0; background:var(--bg2); text-align:left; font-weight:600; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); }
.admin-table td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-table td.actions, .admin-table th.actions { text-align:right; white-space:nowrap; }

.pill { display:inline-block; font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; padding:3px 8px; border:1px solid var(--line); color:var(--muted); }
.pill.public, .pill.published { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.pill.private, .pill.draft { color:var(--muted); background:var(--card); }

.btn-sm { font-family:'Space Grotesk'; font-size:12.5px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); }

.flash { background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:8px; padding:12px 16px; font-size:13.5px; margin-bottom:18px; }

.pager { display:flex; gap:6px; margin-top:18px; }
.pager a { border:1px solid var(--line); border-radius:6px; padding:6px 11px; font-size:12.5px; font-family:'JetBrains Mono'; color:var(--muted); }
.pager a.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

.hub-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; margin-top:20px; }
.hub-card { border:1px solid var(--line); border-radius:10px; padding:18px; }
.hub-card-h { font-family:'Space Grotesk'; font-size:15px; font-weight:700; margin-bottom:14px; }
.hub-unavailable { color:var(--muted); font-size:13px; font-style:italic; }

.hub-launcher { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hub-app { display:block; border:1px solid var(--line); border-radius:8px; padding:12px; color:inherit; }
.hub-app:hover { border-color:var(--accent); color:inherit; }
.hub-app h3 { font-family:'Space Grotesk'; font-size:14px; margin-top:8px; }
.hub-freshness { font-size:11.5px; color:var(--muted); margin-top:4px; }

.hub-sparkline { display:flex; align-items:flex-end; gap:2px; height:32px; margin:10px 0 4px; }
.hub-spark-bar { flex:1; background:var(--accent); border-radius:1px 1px 0 0; min-height:2px; }
.hub-caption { font-size:11px; color:var(--muted); }

.hub-health-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px solid var(--line); }
.hub-git-table { width:100%; font-family:'JetBrains Mono'; font-size:11px; margin-top:10px; border-collapse:collapse; }
.hub-git-table td { padding:3px 4px; color:var(--muted); }
.hub-log { font-family:'JetBrains Mono'; font-size:11px; background:var(--log-bg); color:#F2EDE3; border-radius:6px; padding:10px; margin-top:10px; max-height:140px; overflow-y:auto; white-space:pre-wrap; }

@media (max-width: 860px) {
  .hub-grid { grid-template-columns:1fr; }
  .hub-launcher { grid-template-columns:1fr; }
}

/* ============ ERROR ============ */
.errbox { padding:110px 28px; max-width:640px; }
.errbox .kicker { font-family:'JetBrains Mono'; font-size:12px; letter-spacing:.3em; color:var(--accent); }
.errbox h1 { font-family:'Instrument Serif'; font-weight:400; font-size:44px; margin-top:14px; }
.errbox .sub { margin-top:12px; color:var(--muted); line-height:1.65; }

/* ============ MOTION — "quietly alive" ============ */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.reveal { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.reveal-2 { animation:rise .6s cubic-bezier(.2,.7,.2,1) .12s both; }
.reveal-3 { animation:rise .6s cubic-bezier(.2,.7,.2,1) .24s both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}