/* tenobrus.io — shared styles for generated pages (writing index + essays).
   NOTE: the homepage (index.html) still has its own inline copy of the tokens/
   dock/prose for now; these get DRY'd into this file when we promote. */
:root{
  --bg:#22252c;
  --ink:#a0c2e9; --bright:#d4e6ff; --white:#dfdfdf;
  --blue:#51afef; --cyan:#46d9ff;
  --ml:#2a4965; --ml-dim:#1e2128;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;
  --lam:"Source Code Pro",ui-monospace,monospace;
  --bar-h:42px; --mb-h:38px; --dock-h:80px;
  --prose:#b8c6da;
}
*{box-sizing:border-box}
html,body{overscroll-behavior:none}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--dock-h);
}
a{color:var(--blue);text-decoration:none;transition:color .18s}
a:hover{color:var(--cyan)}
.page{min-height:calc(100vh - var(--dock-h))}

/* reading column (shared by essays + index) */
.prose{max-width:640px;margin:0 auto;padding:64px 24px 96px}
.prose p{margin:0 0 22px;font-size:17px;line-height:1.78;color:var(--prose)}
.prose em{font-style:italic}
.prose strong{color:var(--bright);font-weight:600}
.prose a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--blue) 45%,transparent);transition:color .18s,text-decoration-color .18s}
.prose a:hover{color:var(--cyan);text-decoration-color:var(--cyan)}
.prose img{max-width:100%;height:auto;display:block;margin:30px auto;border:1px solid color-mix(in srgb,var(--blue) 28%,transparent);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.prose figure{margin:30px 0}
.prose hr{border:none;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);margin:40px 0}
.prose h2{font-size:24px;font-weight:600;color:var(--bright);margin:40px 0 14px}
.prose h3{font-size:19px;font-weight:600;color:var(--bright);margin:32px 0 10px}
.prose blockquote{margin:22px 0;padding:2px 0 2px 20px;border-left:2px solid color-mix(in srgb,var(--blue) 45%,transparent);color:color-mix(in srgb,var(--prose) 85%,transparent)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px;color:var(--prose);font-size:17px;line-height:1.78}
.prose li{margin:6px 0}
.prose code{font-family:var(--lam);font-size:.9em;background:color-mix(in srgb,#fff 6%,transparent);padding:1px 5px;border-radius:3px}

/* essay header + footer */
.essay-head{margin-bottom:38px}
.essay-title{font-family:var(--sans);font-weight:600;font-size:clamp(28px,5vw,38px);line-height:1.18;letter-spacing:-.01em;color:var(--bright);margin:0 0 14px}
.essay-meta{font-family:var(--lam);font-size:13px;letter-spacing:.02em;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.essay-meta a{color:color-mix(in srgb,var(--blue) 85%,transparent)}
.essay-foot{margin-top:56px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--ink) 13%,transparent);display:flex;justify-content:space-between;gap:16px;font-family:var(--lam);font-size:13px}

/* writing index */
.windex{max-width:640px;margin:0 auto;padding:64px 24px 96px}
.windex-title{font-family:var(--lam);font-weight:500;font-size:13px;letter-spacing:.09em;color:color-mix(in srgb,var(--ink) 46%,transparent);margin:0 0 6px}
.windex-list{list-style:none;margin:0;padding:0}
.windex-list li{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.w-link{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:18px 2px}
.w-name{font-size:19px;color:var(--blue);transition:color .18s}
.w-link:hover .w-name{color:var(--cyan)}
.w-date{flex:none;font-family:var(--lam);font-size:13px;color:color-mix(in srgb,var(--ink) 50%,transparent)}

/* dock (shared chrome) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50}
.bar{height:var(--bar-h);display:flex;align-items:center;background:var(--ml);border-top:1px solid color-mix(in srgb,var(--blue) 40%,transparent);border-bottom:1px solid color-mix(in srgb,var(--blue) 40%,transparent)}
.ml-lambda{display:flex;align-items:center;justify-content:center;height:100%;padding:0 21px;color:var(--cyan);font-family:var(--lam);font-size:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 22%,transparent),color-mix(in srgb,var(--blue) 10%,transparent));border-right:1px solid color-mix(in srgb,var(--blue) 28%,transparent)}
.ml-name{display:flex;align-items:center;gap:12px;height:100%;padding:0 16px}
.ml-ring{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}
.ml-ring svg{width:24px;height:24px;display:block;overflow:visible}
.ml-name .lbl{color:var(--blue);font-weight:600;font-size:12.5px}
a.lbl:hover{color:var(--cyan)}
.ml-path{display:flex;align-items:baseline;gap:7px;font-size:12.5px;font-weight:600;min-width:0;white-space:nowrap}
.ml-path a{color:var(--blue)}
.ml-path a:hover{color:var(--cyan)}
.ml-path .sep{color:color-mix(in srgb,var(--ink) 45%,transparent);font-weight:400;font-family:var(--lam)}
.ml-path .cur{color:color-mix(in srgb,var(--bright) 78%,transparent);overflow:hidden;text-overflow:ellipsis}
.ml-spacer{flex:1}
.ml-wx{color:color-mix(in srgb,var(--white) 55%,transparent);font-size:12px;letter-spacing:.05em;margin-right:18px;flex:none;white-space:nowrap}
.minibuffer{height:var(--mb-h);display:flex;align-items:center;padding:0 24px;background:var(--ml-dim)}
.caret{width:2px;height:17px;background:var(--cyan);flex:none;animation:blink 1.15s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .caret{animation:none} }