/* ============================================================
   OstrichSign — shared site styling
   Quiet, traditional, readable. Serif on cool neutral paper, hairline
   rules instead of boxes, a calm slate-blue accent that holds up in
   both light and dark. The console (console.html) keeps its own look
   and does not use this file.
   ============================================================ */

:root{
  --bg:#f1f3f6;
  --surface:#e7eaef;
  --ink:#23262d;
  --muted:#5b626d;
  --faint:#8b909b;
  --rule:#dde0e7;
  --accent:#3f5d8f;
  --accent-hover:#33507a;
  --accent-soft:rgba(63,93,143,.10);
  --accent2:#2c7a72;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"]{
  --bg:#11141a;
  --surface:#191d25;
  --ink:#e4e7ee;
  --muted:#9aa1ad;
  --faint:#646b78;
  --rule:#262b34;
  --accent:#8aa6d8;
  --accent-hover:#a6bee4;
  --accent-soft:rgba(138,166,216,.13);
  --accent2:#6fbdb2;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased}
body{min-height:100vh}
.wrap{max-width:720px;margin:0 auto;padding:0 22px 96px}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
::selection{background:var(--accent-soft)}

/* ---------- top nav ---------- */
.nav{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:24px 0 18px;margin-bottom:8px;border-bottom:1px solid var(--rule)}
.nav .wm{font-size:20px;font-weight:600;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.nav .wm .ring{color:var(--accent)}
.nav .links{margin-left:auto;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.nav a.lnk{font-size:15px;color:var(--muted);text-decoration:none}
.nav a.lnk:hover{color:var(--ink)}
.nav a.lnk.on{color:var(--accent)}

/* theme toggle */
.themetoggle{background:none;border:0;padding:2px;margin:0 0 0 2px;cursor:pointer;
  color:var(--muted);line-height:0;align-self:center;border-radius:3px}
.themetoggle:hover{color:var(--ink)}
.themetoggle .ic-sun{display:none}
.themetoggle .ic-moon{display:inline}
html[data-theme="dark"] .themetoggle .ic-sun{display:inline}
html[data-theme="dark"] .themetoggle .ic-moon{display:none}

/* ---------- hero (home) ---------- */
.hero{padding:46px 0 8px}
.hero .meta-line{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--faint);margin:0 0 14px}
.hero h1{font-size:clamp(36px,7vw,58px);font-weight:600;letter-spacing:-.01em;
  line-height:1.05;margin:0;color:var(--ink)}
.hero h1 .ring{color:var(--accent)}
.lede{font-size:20px;line-height:1.6;color:var(--muted);max-width:34em;margin:22px 0 0}
.lede b{color:var(--ink);font-weight:500}

/* ---------- buttons (quiet) ---------- */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{font-family:var(--serif);font-size:16px;color:var(--accent);
  border:1px solid var(--rule);background:transparent;padding:9px 18px;border-radius:3px;
  text-decoration:none;display:inline-block;transition:.14s}
.btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-hover)}

/* ---------- generic sections ---------- */
.section{margin-top:52px}
.section > h2{font-size:25px;font-weight:600;letter-spacing:-.01em;margin:0 0 16px}
.lead-block{font-size:17px;color:var(--muted);max-width:36em;margin:0}
.lead-block p{margin:0 0 16px}

/* ---------- prose (the article you paste / I draft) ---------- */
.prose{font-size:17px;line-height:1.78;color:var(--ink);max-width:36em}
.prose h1{font-size:clamp(30px,5vw,42px);font-weight:600;letter-spacing:-.01em;
  line-height:1.12;margin:8px 0 6px}
.prose .standfirst{font-size:19px;color:var(--muted);font-style:italic;margin:0 0 30px}
.prose h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:38px 0 12px}
.prose h3{font-size:19px;font-weight:600;margin:30px 0 10px}
.prose p{margin:0 0 18px}
.prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.5px}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose ul{margin:0 0 18px;padding-left:20px;list-style:none}
.prose ul li{position:relative;margin:0 0 12px;padding-left:4px}
.prose ul li:before{content:"";position:absolute;left:-14px;top:.82em;
  width:5px;height:5px;border-radius:50%;background:var(--accent)}
.prose blockquote{margin:22px 0;padding:2px 0 2px 22px;border-left:2px solid var(--rule);
  color:var(--muted);font-style:italic}
.prose code{font-family:var(--mono);font-size:13.5px;color:var(--ink);
  background:var(--surface);border-radius:3px;padding:1px 5px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:34px 0}

/* gentle handoff into the console (no box) */
.handoff{margin:34px 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.handoff p{margin:0 0 14px;color:var(--muted);font-style:italic;max-width:38em}
.handoff p b{color:var(--ink);font-style:normal;font-weight:600}

/* ---------- related tools: roomy stacked entries, not a grid ---------- */
.related .item{padding:26px 0;border-top:1px solid var(--rule)}
.related .item:first-of-type{border-top:0;padding-top:8px}
.related .item h3{font-size:22px;font-weight:600;margin:0 0 6px}
.related .item h3 a{color:var(--ink);text-decoration:none}
.related .item h3 a:hover{color:var(--accent)}
.related .item .src{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin:0 0 12px}
.related .item p{margin:0 0 10px;color:var(--muted);max-width:40em}
.related .item p:last-child{margin-bottom:0}

/* ---------- sources list (no boxes) ---------- */
.sources{list-style:none;margin:0;padding:0}
.sources li{padding:18px 0;border-top:1px solid var(--rule)}
.sources li:first-child{border-top:0;padding-top:6px}
.sources a{font-size:18px;color:var(--ink);text-decoration:none}
.sources a:hover{color:var(--accent)}
.sources .d{color:var(--muted);font-size:15px;margin-top:3px;max-width:40em}

/* ---------- footer ---------- */
footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--rule);
  color:var(--faint);font-size:14px;line-height:1.65}
footer p{margin:0 0 10px;max-width:46em}
footer .fnav a{color:var(--muted);text-decoration:none}
footer .fnav a:hover{color:var(--accent)}

/* ---------- paste-here placeholder (delete when you add content) ---------- */
.slot{border:1px dashed var(--accent);background:var(--accent-soft);border-radius:3px;
  padding:18px;color:var(--muted);font-size:15px;line-height:1.6;font-style:italic}
.slot b{color:var(--accent);font-style:normal}

@media(max-width:560px){
  .nav{padding-top:20px}
  .nav .links{margin-left:0;width:100%;gap:16px}
  .hero{padding-top:34px}
  .btn{flex:1;text-align:center}
}

/* ---- signed-message cards (homepage hero + examples page) ---- */
.signed{border:1px solid var(--rule);border-radius:6px;background:var(--surface);max-width:560px;margin:36px 0 2px}
.signed-msg{font-size:18px;line-height:1.52;color:var(--ink);margin:0;padding:18px 20px 18px;font-style:italic;white-space:pre-line}
.signed-sec{border-top:1px solid var(--rule);padding:14px 20px}
.signed-k{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--faint);text-transform:uppercase}
.signed-keys{list-style:none;margin:11px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.idrow{min-width:0}
.idmeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.idname{font-family:var(--serif);font-size:14px;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idtitle{color:var(--faint);font-size:13px;line-height:1.3;margin-top:1px}
.idnpub{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idnpub .np-pfx{color:var(--accent2)}
.signed-sig{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:9px;word-break:break-all;line-height:1.5}
.signed-sig .pfx{color:var(--accent2)}
.sxdots{display:flex;gap:8px;margin:14px 2px 0;flex-wrap:wrap}
.sxdot{width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--rule);transition:background .2s,transform .2s}
.sxdot[aria-selected="true"]{background:var(--accent);transform:scale(1.15)}
.signed-cap{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--faint);margin:15px 2px 0;max-width:54ch}
.herolinks{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;font-size:16px}
.herolinks a{color:var(--accent);text-decoration:none}
.herolinks a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
.exitem{margin:44px 0 58px}
.exitem .signed{margin:20px 0 10px}
.ex-about{max-width:58ch;margin:0 0 0 24px}
.ex-about p{margin:0 0 6px;font-size:13px;line-height:1.55;color:var(--faint)}
@media (max-width:520px){.signed-keys{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.sx-anim{animation:sxfade .34s ease}}
@keyframes sxfade{from{opacity:.4}to{opacity:1}}
.hero-cta{margin:20px 0 0}
.cta{display:inline-block;padding:9px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-family:var(--mono);font-size:14px;text-decoration:none;transition:background .15s,color .15s}
.cta:hover{background:var(--accent);color:var(--bg)}
.prose .signed-keys{padding-left:0}
.prose .signed-keys li{margin:0;padding-left:0}
.prose .signed-keys li:before{content:none;display:none}