/* Captain's Log — ofone.dev face.
   The HTML underneath stays semantic and bland (article, headings,
   paragraphs, time). This file does all the vivid. Machines read the
   markup; humans get the terminal. */
:root{
  --bg:#070a09; --panel:#0c1210; --text:#e8f0eb; --muted:#8fa399; --dim:#5c6f66;
  --green:#22ff88; --green-dim:rgba(34,255,136,.12); --border:#1a2922;
  --glow:0 0 32px rgba(34,255,136,.18);
  --measure:38rem;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{
  background-image:
    linear-gradient(rgba(34,255,136,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,255,136,.03) 1px,transparent 1px);
  background-size:48px 48px;
  color:var(--muted);
  font:16px/1.6 Manrope,system-ui,sans-serif;
  min-height:100vh;
}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:calc(var(--measure) + 8rem);margin:0 auto;padding:0 22px 88px}
.top{
  position:sticky;top:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;
  background:rgba(7,10,9,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);
}
.brand{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--text);text-decoration:none}
.brand:hover{color:var(--green);text-decoration:none}
.brand span{color:var(--green)}
.crumb{color:var(--dim);text-decoration:none}
.crumb:hover{color:var(--green)}
.hero{padding:56px 0 32px;max-width:var(--measure)}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
h1{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(2.35rem,5.5vw,3.35rem);line-height:1.05;letter-spacing:-.03em;color:var(--text);margin:0 0 14px}
h2{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.28rem;color:var(--text);margin:2rem 0 .75rem;line-height:1.25}
.lede{color:var(--muted);max-width:44ch;font-size:1.05rem;margin:0 0 8px}
.sub{color:var(--dim);font-size:.95rem;max-width:52ch}
.sub::before{content:"> ";color:var(--green);font-family:"JetBrains Mono",monospace}
.logs{list-style:none;padding:24px 0 0;margin:0;display:grid;gap:0;max-width:var(--measure)}
.logs li{border-top:1px solid var(--border)}
.logs li:last-child{border-bottom:1px solid var(--border)}
.logs a{display:grid;grid-template-columns:7rem 1fr;gap:18px;align-items:baseline;padding:20px 8px 20px 0;color:var(--text);text-decoration:none;transition:.15s}
.logs a:hover{color:var(--green)}
.logs .when{font-family:"JetBrains Mono",monospace;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.logs .title{font-family:"Space Grotesk",sans-serif;font-size:1.12rem;line-height:1.3;font-weight:600}
.meta{font-family:"JetBrains Mono",monospace;color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:28px 0 0}
article.post{max-width:var(--measure);padding-top:8px;color:var(--muted)}
article.post p,article.post li{margin:0 0 .85rem}
article.post ul{padding-left:1.15em;margin:0 0 1rem}
article.post .lede{margin:0 0 1.5rem;color:var(--text)}
article.post strong{color:var(--text)}
hr.rule{border:0;border-top:1px solid var(--border);margin:2rem 0}
.foot{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--border);color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:12px;display:flex;flex-wrap:wrap;gap:10px 18px}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--green)}
code,pre{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.92em;color:var(--green)}
pre{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;overflow-x:auto}
@media (max-width:560px){.logs a{grid-template-columns:1fr;gap:6px;padding:18px 0}}
@media (prefers-reduced-motion:reduce){.top{backdrop-filter:none}}