/* DOS to AI shared styles for /blog, /about and /privacy. Home and /links keep their own inline CSS. */
:root{--navy:#0a1030;--indigo:#1e1b6b;--violet:#5b21b6;--cyan:#22d3ee;--text:#fff;--muted:#c7d2fe;--line:rgba(199,210,254,.22);--card:rgba(255,255,255,.06);--bad:#fca5a5;--ok:#5eead4}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--text);background:var(--navy);font:18px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.w{max-width:680px;margin:0 auto;padding:0 20px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cyan);font-size:.95rem;letter-spacing:.02em}
.muted{color:var(--muted)}

/* top bar */
.top{border-bottom:1px solid var(--line)}
.top .w{display:flex;align-items:center;justify-content:space-between}
.brand{color:var(--text);text-decoration:none;font-weight:800;font-size:1.05rem;padding:12px 0;display:inline-flex;gap:.5em;align-items:center}
.brand b{color:var(--cyan);font-family:ui-monospace,Menlo,monospace;font-weight:700}
.top nav a{color:var(--muted);text-decoration:none;font-size:.95rem;padding:12px 10px;display:inline-block}
.top nav a:hover,.top nav a[aria-current]{color:var(--text)}

/* gradient band for page heads */
.band{background:radial-gradient(60vmax 40vmax at 80% 0%,rgba(34,211,238,.22),transparent 60%),linear-gradient(135deg,var(--navy) 0%,var(--indigo) 60%,var(--violet) 100%);padding:56px 0 44px}
h1{font-size:clamp(2rem,7vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:.2em 0 .3em;font-weight:800}
h2{font-size:1.45rem;line-height:1.25;margin:2em 0 .5em}
.lede{font-size:1.15rem;color:var(--muted);margin:0}
main{padding:40px 0 64px}

/* signup form */
.sub{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sub label{flex:1 1 100%;font-size:.9rem;color:var(--muted)}
.sub input[type=email]{flex:1 1 220px;min-width:0;height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:rgba(10,16,48,.6);color:var(--text);font:inherit;font-size:16px}
.sub input[type=email]:focus{border:2px solid var(--cyan);outline:none}
.sub input.bad{border:2px solid var(--bad)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;border-radius:10px;background:var(--cyan);color:var(--navy);font:inherit;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.btn:hover{background:#67e8f9}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
/* end of a blog post: back to the list, or back to the top */
.post-end{display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 24px}
.err{flex:1 1 100%;margin:0;color:var(--bad);font-size:.9rem}
.fine{font-size:.85rem;color:var(--muted);margin:12px 0 0}
.thanks{border:1px solid var(--ok);border-radius:14px;padding:16px 18px;margin-top:20px;background:var(--card)}
.thanks strong{display:block;font-size:1.1rem}
@media(max-width:480px){.sub .btn{flex:1 1 100%}}

/* blog */
.posts{list-style:none;padding:0;margin:0}
.posts li{border-top:1px solid var(--line)}
.posts a{display:block;padding:20px 0;color:var(--text);text-decoration:none}
.posts a:hover h2{color:var(--cyan)}
.posts .soon{padding:20px 0;opacity:.55}  /* not a link yet */
.posts .read{display:inline-block;margin-top:8px;font-weight:600;color:var(--cyan);transition:transform .15s}  /* link cue for touch screens */
.posts a:hover .read{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.posts .read{transition:none}.posts a:hover .read{transform:none}}
.posts h2{margin:0 0 4px;font-size:1.25rem}
.meta{font-size:.9rem;color:var(--muted)}
.meta span{margin:0 .4em;opacity:.6}
article p,article li{color:#e0e7ff}
article h2{color:var(--text)}
article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cyan);font-size:.95em}
.video{margin:28px 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--indigo),var(--violet))}
.video button{all:unset;cursor:pointer;width:100%;height:100%;display:grid;place-items:center;text-align:center;color:var(--text);font-weight:700}
.video button:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.video .play{display:block;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--cyan);clip-path:polygon(38% 28%,38% 72%,74% 50%)}
.video small{display:block;font-weight:400;color:var(--muted);margin-top:4px}
.video iframe{width:100%;height:100%;border:0}
.video.soon{display:grid;place-items:center;text-align:center;font-weight:700;color:var(--text)}  /* placeholder until the video is posted */
.video.soon p{margin:0}
/* screen snips from the video: shown at 65% of their Retina pixels, so their text matches body size */
.snip{margin:14px 0 26px}
.snip img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.snip figcaption{margin-top:8px;font-size:.85rem;color:var(--muted)}
.shortcut{margin:44px 0 0;padding:22px;border-radius:16px;border:1px solid var(--cyan);background:var(--card)}
.shortcut h2{margin:0 0 6px;font-size:1.25rem}
.shortcut p{margin:0 0 16px;color:var(--muted)}
.ph{background:#3a2d08;color:#fab219;padding:0 4px;border-radius:4px}

footer{border-top:1px solid var(--line);padding:28px 0 48px;font-size:.85rem;color:var(--muted)}
footer a{color:var(--muted);text-underline-offset:4px}
footer p:first-child a{display:inline-block;padding:12px 0}
footer a:hover{color:var(--cyan)}
footer p{margin:4px 0}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
p.mono a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
p.mono a:hover{text-decoration-color:currentColor}
.phbox{border:2px dashed #fab219;color:#fab219;background:#3a2d08;border-radius:12px;padding:28px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;margin:16px 0 32px}
/* about: DOS screen in the title band (Ian) */
.band .split{display:grid;gap:28px;align-items:center}
@media(min-width:760px){.band .w.split{max-width:960px;grid-template-columns:1fr 1fr}}
.dos{aspect-ratio:4/3;background:#000;color:#c0c0c0;border-radius:6px;padding:14px 16px;font:15px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;cursor:text;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.dos pre{margin:0;font:inherit;white-space:pre-wrap}
.dos-line{display:block;position:relative}
.dos-line input{position:absolute;inset:0;opacity:0;width:100%;font:16px monospace;border:0;padding:0}
.dos-cur{animation:blink 1.1s steps(1) infinite}
.dos:focus-within{outline:2px solid var(--cyan);outline-offset:3px}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.dos-cur{animation:none}}
.soon-note{margin:24px 0;color:var(--muted)}