/* 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 (org-style folding: each entry expands in place) */
.windex{max-width:640px;margin:0 auto;padding:64px 24px 96px}
.windex-title{display:flex;align-items:baseline;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 10px}
.windex-list .w-item:first-child{border-top:none}
.windex-list+.windex-title{margin-top:80px;padding-top:36px;border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent)}
.windex-list{list-style:none;margin:0;padding:0}
.w-item{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.w-item summary{display:flex;align-items:baseline;gap:14px;padding:18px 2px;cursor:pointer;list-style:none}
.w-item summary::-webkit-details-marker{display:none}
.w-item summary::before{content:"▸";flex:none;font-family:var(--lam);font-size:12px;color:color-mix(in srgb,var(--ink) 38%,transparent);transition:color .18s}
.w-item[open]>summary::before{content:"▾";color:var(--cyan)}
.w-item summary:hover::before{color:var(--cyan)}
.w-name{flex:1;font-size:19px;color:var(--blue);transition:color .18s}
.w-item summary: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)}
.w-body{padding:4px 2px 34px 26px}
.w-body .w-meta{font-family:var(--lam);font-size:12.5px;margin:0 0 20px}
.w-body p{margin:0 0 20px;font-size:16.5px;line-height:1.76;color:var(--prose)}
.w-body em{font-style:italic}
.w-body strong{color:var(--bright);font-weight:600}
.w-body 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)}
.w-body a:hover{color:var(--cyan)}
.w-body img{max-width:100%;height:auto;display:block;margin:26px 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)}
.w-body h2{font-size:22px;font-weight:600;color:var(--bright);margin:34px 0 12px}
.w-body h3{font-size:18px;font-weight:600;color:var(--bright);margin:28px 0 10px}
.w-body hr{border:none;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);margin:34px 0}
.w-body blockquote{margin:20px 0;padding:2px 0 2px 18px;border-left:2px solid color-mix(in srgb,var(--blue) 45%,transparent);color:color-mix(in srgb,var(--prose) 85%,transparent)}
.w-body ul,.w-body ol{margin:0 0 20px;padding-left:24px;color:var(--prose)}
.w-body .tw-seg+.tw-seg{margin-top:22px;padding-top:22px;border-top:1px dashed color-mix(in srgb,var(--ink) 12%,transparent)}
.w-body .tw-quote{margin:14px 0 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-left:2px solid color-mix(in srgb,var(--blue) 45%,transparent);border-radius:6px}
.w-body .tw-quote p{font-size:14px;color:color-mix(in srgb,var(--prose) 72%,transparent);margin:0}
.llms-note{font-family:var(--lam);font-size:12px;color:color-mix(in srgb,var(--ink) 42%,transparent);margin-top:34px}
.copy-page{background:none;border:none;padding:2px;margin-left:10px;color:color-mix(in srgb,var(--ink) 45%,transparent);cursor:pointer;transition:color .18s;display:inline-flex;align-items:center;vertical-align:-3px}
.copy-page svg{width:15px;height:15px;display:block}
.copy-page .ic-check{display:none}
.copy-page:hover{color:var(--cyan)}
.copy-page.copied{color:var(--cyan)}
.copy-page.copied .ic-copy{display:none}
.copy-page.copied .ic-check{display:block}
.copy-page.copy-fail{color:#ff6c6b}
.windex-title .copy-page{margin-left:auto}

/* tweets feed */
.tfeed{max-width:640px;margin:0 auto;padding:64px 24px 96px}
.tfeed-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px;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 24px}
.tfeed-who{font-weight:400;letter-spacing:.02em;font-size:12px;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.tfeed-who:hover{color:var(--cyan)}
.tw-year{display:flex;align-items:center;gap:14px;font-family:var(--lam);font-size:12px;letter-spacing:.09em;color:color-mix(in srgb,var(--ink) 42%,transparent);margin:34px 0 16px}
.tw-year::after{content:"";flex:1;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.tw{border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:8px;padding:20px 22px 12px;margin:0 0 16px;background:color-mix(in srgb,#fff 1.5%,transparent)}
.tw p{margin:0 0 14px;font-size:15.5px;line-height:1.72;color:var(--prose)}
.tw p a,.tweet-page .tw-seg 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)}
.tw p a:hover{color:var(--cyan)}
.tw .tw-seg+.tw-seg{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.tw-quote{margin:0 0 14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);border-left:2px solid color-mix(in srgb,var(--blue) 45%,transparent);border-radius:6px}
.tw-quote p{font-size:14px;color:color-mix(in srgb,var(--prose) 72%,transparent);margin:0}
.tq-who{display:block;font-family:var(--lam);font-size:12px;color:color-mix(in srgb,var(--ink) 55%,transparent);margin-bottom:4px}
.tq-gone{font-style:italic}
.tw-meta{font-family:var(--lam);font-size:12.5px}
.tw-meta{display:flex;gap:8px;align-items:baseline;color:color-mix(in srgb,var(--ink) 45%,transparent);margin-top:6px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.tw-meta a{color:color-mix(in srgb,var(--ink) 60%,transparent)}
.tw-meta a:hover{color:var(--cyan)}
.tw-meta .sep{color:color-mix(in srgb,var(--ink) 30%,transparent)}

/* tweet permanent page */
.tweet-page .tw-seg+.tw-seg{margin-top:26px;padding-top:26px;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent)}
.tweet-page .tw-seg p{font-size:17px;line-height:1.78;color:var(--prose);margin:0 0 22px}
.tweet-page .tw-seg p:last-child{margin-bottom:0}
.tweet-page .tw-quote{margin:18px 0 0}

.nf{color:color-mix(in srgb,var(--prose) 70%,transparent);font-size:15px;margin:14px 0 26px}

/* writing index source marker */
.windex-list .w-name{flex:1}
.w-src{flex:none;font-family:var(--lam);font-size:11.5px;color:color-mix(in srgb,var(--ink) 40%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:4px;padding:1px 7px;margin-right:14px}

/* 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} }