/* Restraint is the brief. One accent, plain type, hairline rules, a lot of air. The directory is always visible on the left; content sits in a card on the right. LIGHT AND DARK ARE SITE-WIDE, not a gallery setting. The switch sets data-theme on ; every colour below comes from a variable, so nothing else has to know which mode it is in. The eyes listen for the same switch. */ :root, :root[data-theme="light"]{ --ink:#16161a; --ink-2:#55555f; --ink-3:#8a8a94; --line:#e6e6ea; --bg:#fff; --card:#fff; --tile:#fff; --code:#f5f5f7; --accent:#1a4fd6; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --side:300px; } :root[data-theme="dark"]{ --ink:#eceaf2; --ink-2:#a9a6b6; --ink-3:#76727f; --line:#26242e; --bg:#0b0913; --card:#100e19; --tile:#0b0913; --code:#171522; --accent:#8fa9ff; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font:16px/1.6 var(--sans); } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:10} .page{display:grid;grid-template-columns:var(--side) 1fr;gap:0;min-height:100vh;max-width:1500px} /* ---------- the directory, always visible ---------- */ .side{padding:54px 34px 60px;border-right:1px solid var(--line);position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto} .brand{display:block;font-size:30px;font-weight:600;letter-spacing:-.01em;color:var(--accent)} .brand:hover{text-decoration:none} .def{margin:6px 0 0;color:var(--ink-3);font-size:14.5px;line-height:1.45;white-space:pre-line} .side nav{margin-top:44px} .side ul{list-style:none;margin:0;padding:0} .side nav > ul > li{border-top:1px solid var(--line)} .side nav > ul > li:last-child{border-bottom:1px solid var(--line)} .side nav a,.side nav summary{ display:block;padding:11px 0;color:var(--ink);font-size:16px;cursor:pointer; } .side nav a:hover,.side nav summary:hover{color:var(--accent);text-decoration:none} .side nav a.on{color:var(--accent)} .side nav summary{list-style:none;display:flex;align-items:center;justify-content:space-between} .side nav summary::-webkit-details-marker{display:none} .side nav summary::after{content:"⌄";color:var(--ink-3);font-size:14px;line-height:1;transform:translateY(-2px)} .side nav details[open] summary::after{content:"⌃";transform:translateY(2px)} .side nav ul.sub{padding:0 0 8px 0} .side nav ul.sub a{padding:7px 0 7px 14px;font-size:15px;color:var(--ink-2)} /* ---------- content ---------- */ main{padding:54px 46px 120px;min-width:0} .card{max-width:760px;border:1px solid var(--line);border-radius:14px;padding:34px 38px 40px;background:var(--card)} .card > :first-child{margin-top:0} h1{font-size:29px;font-weight:600;letter-spacing:-.015em;margin:0 0 18px} h2{font-size:21px;font-weight:600;margin:34px 0 10px} h3{font-size:17px;font-weight:600;margin:26px 0 8px} p{margin:0 0 16px} hr{border:0;border-top:1px solid var(--line);margin:30px 0} blockquote{margin:0 0 16px;padding-left:16px;border-left:2px solid var(--line);color:var(--ink-2)} code{font:13.5px var(--mono);background:var(--code);padding:1px 5px;border-radius:4px} pre{background:var(--code);padding:14px 16px;border-radius:10px;overflow-x:auto} pre code{background:none;padding:0} img{max-width:100%;height:auto;border-radius:8px} .meta{color:var(--ink-3);font-size:14px} /* post lists on topic pages */ ul.posts{list-style:none;margin:26px 0 0;padding:0} ul.posts li{border-top:1px solid var(--line);padding:14px 0} ul.posts a{font-size:17px} ul.posts time{display:block;color:var(--ink-3);font-size:13px;font-family:var(--mono);margin-top:2px} ul.posts .sum{display:block;color:var(--ink-2);font-size:14.5px;margin-top:4px} /* the light/dark switch, under the menu */ .themebar{margin-top:26px;display:flex;gap:6px} .themebar button{ font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase; border:1px solid var(--line);background:transparent;color:var(--ink-3); border-radius:999px;padding:6px 12px;cursor:pointer } .themebar button:hover{color:var(--ink-2)} .themebar button.on{border-color:var(--ink-2);color:var(--ink)} /* ---------- the eyes ---------- */ .gallery{margin:26px 0 0} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px} .eye{display:block;color:inherit} .eye:hover{text-decoration:none} .eye .tile{ aspect-ratio:1/1;border-radius:12px;overflow:hidden;display:block;width:100%; background:var(--tile);border:1px solid var(--line); } .eye canvas{display:block;width:100%;height:100%} .eye .cap{margin-top:9px} .eye .txt{ font-size:13.5px;line-height:1.4;color:var(--ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .eye .num{font:11px var(--mono);color:var(--ink-3);margin-top:4px;letter-spacing:.02em} .eye:hover .txt{color:var(--accent)} /* ---------- small screens: the directory moves on top ---------- */ @media(max-width:860px){ .page{grid-template-columns:1fr} .side{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding:34px 22px 26px} main{padding:26px 22px 90px} .card{padding:24px 22px 30px;border:0;border-radius:0} .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px} }