/* Shared stylesheet for /projects/* pages. Reference: /projects/long-video-kv/.
   Fonts and accent color match the root page (Source Sans Pro, Roboto Mono, #40045c). */
:root {
  --text:#2c2c2c; --muted:#666; --border:#e0e0e0; --accent:#40045c;
  --bar:#111; --bar-light:#aaa; --surface:#fafafa;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--text); background:#fff; font-family:"Source Sans Pro",-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
main { max-width:760px; margin:0 auto; padding:2rem 2rem 2rem; }

/* Header: back link, sloth-icon home link + H1, meta line */
.back { display:inline-block; margin-bottom:1.5rem; color:var(--muted); font-size:0.9rem; }
.site-head { display:flex; align-items:center; gap:0.9rem; margin-bottom:2rem; }
.site-head .mark { display:block; flex:none; width:36px; height:36px; line-height:0; border-radius:8px; overflow:hidden; }
.site-head .mark img { display:block; width:100%; height:100%; }
.site-head .mark:hover { text-decoration:none; }
.site-head h1 { margin:0; font-size:1.7rem; font-weight:700; line-height:1.25; }
.period { margin:-1rem 0 0.4rem 0; color:var(--muted); font-size:0.9rem; }
.role-line { margin:0 0 1.5rem 0; font-size:0.97rem; line-height:1.5; }
.period:not(:has(+ .role-line)) { margin-bottom:1.5rem; }

/* Sections */
h2 { margin:2.25rem 0 0.75rem; padding-top:1.5rem; border-top:1px solid var(--border); font-size:1.4rem; font-weight:700; line-height:1.3; }
h2.first { margin-top:0; padding-top:0; border-top:0; }
p, li { font-size:0.97rem; }
p { margin:0.6rem 0; }
ul, ol { padding-left:1.25rem; }
li { margin:0.2rem 0; }
.lead { font-size:1.08rem; }
.note { margin:0.25rem 0 0; color:var(--muted); font-size:0.82rem; line-height:1.5; }
code { font-family:"Roboto Mono",monospace; font-size:0.85em; }

/* Link buttons (external links) */
.links { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.75rem 0; padding:0; list-style:none; }
.links a { display:inline-block; padding:0.3rem 0.75rem; border:1px solid var(--accent); border-radius:4px; font-size:0.9rem; }
.links a:hover { color:#fff; background:var(--accent); text-decoration:none; }

/* Media */
figure { margin:1.25rem 0; }
figure img { display:block; max-width:100%; height:auto; margin:0 auto; }
figure.narrow img { max-width:280px; }
figure.boxed { padding:1rem; border:1px solid var(--border); border-radius:6px; }
figcaption { margin-top:0.4rem; color:var(--muted); font-size:0.82rem; text-align:left; }
.video-wrap { margin:0 0 1.5rem; }
.video-wrap video { display:block; width:100%; background:#000; border-radius:6px; }
.video-ph { display:none; padding:2.5rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--border); font-size:0.9rem; }

/* Tables and bar charts */
.scroll { overflow-x:auto; margin:0.75rem 0 0.5rem; }
table { width:100%; border-collapse:collapse; font-size:0.88rem; font-variant-numeric:tabular-nums; }
th, td { padding:0.4rem 0.6rem; text-align:left; white-space:nowrap; border-bottom:1px solid var(--border); }
th { font-weight:600; border-bottom:1px solid var(--text); }
td.n, th.n { text-align:right; }
tr.ref td { color:var(--muted); }
caption { padding:0 0 0.4rem; text-align:left; font-weight:600; }
.bars { margin:0.75rem 0; }
.bar-row { display:grid; grid-template-columns:90px minmax(0,1fr) 60px; gap:0.6rem; align-items:center; margin:0.3rem 0; font-size:0.88rem; }
.bar-row .track { height:16px; }
.bar-row .fill { display:block; height:100%; background:var(--bar); }
.bar-row .fill.light { background:var(--bar-light); }
.bar-row .val { font-variant-numeric:tabular-nums; text-align:right; }

/* Simple flow diagram (boxes joined by links) */
.flow { display:grid; grid-template-columns:auto minmax(32px,1fr) auto minmax(32px,1fr) auto; align-items:center; margin:1rem 0; padding:1.25rem 1rem; border:1px solid var(--border); border-radius:6px; font-family:"Roboto Mono",monospace; font-size:0.78rem; }
.flow .node { padding:0.6rem 0.75rem; border:1px solid var(--text); border-radius:4px; text-align:center; background:#fff; }
.flow .node.dark { color:#fff; background:#111; }
.flow .edge { position:relative; height:34px; }
.flow .edge span { position:absolute; top:0; left:0; right:0; color:var(--muted); font-size:0.72rem; text-align:center; }
.flow .edge::after { content:""; position:absolute; left:0; right:0; top:22px; border-top:1px solid var(--text); }
.flow .edge.dashed::after { border-top-style:dashed; }
.flow .edge i { position:absolute; top:19px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#111; animation:pkt 2.4s linear infinite; }
.flow .edge.dashed i { border-radius:1px; animation-duration:3s; }
.flow .edge i:nth-of-type(2) { animation-delay:-0.8s; } .flow .edge i:nth-of-type(3) { animation-delay:-1.6s; }
@keyframes pkt { 0% { left:0; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { left:100%; opacity:0; } }
@media (prefers-reduced-motion:reduce) { .flow .edge i { animation:none; display:none; } }

/* Footer */
.site-foot { max-width:760px; margin:0 auto; padding:1.5rem 2rem 3rem; color:var(--muted); font-size:0.85rem; }
.site-foot .inner { padding-top:1.25rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.site-foot a { color:var(--muted); }

@media (max-width:640px) {
  main { padding:1.25rem 1.25rem 1.5rem; }
  .site-foot { padding:1rem 1.25rem 2.5rem; }
  .site-head h1 { font-size:1.35rem; }
  .flow { grid-template-columns:1fr; gap:0; text-align:center; }
  .flow .edge { height:30px; }
  .flow .edge::after { left:50%; right:auto; top:4px; bottom:4px; border-top:0; border-left:1px solid var(--text); }
  .flow .edge.dashed::after { border-left-style:dashed; }
  .flow .edge span { top:6px; left:calc(50% + 8px); right:auto; }
  .flow .edge i { display:none; }
}

/* Label/value lists ("At a glance", "Tech stack") and per-item Problem / What I did / Outcome */
h3 { margin:1.75rem 0 0.4rem; font-size:1.1rem; font-weight:700; line-height:1.35; }
dl.kv { display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:0.35rem 1rem; margin:0.75rem 0; font-size:0.97rem; }
dl.kv dt { color:var(--muted); font-weight:600; font-size:0.9rem; padding-top:0.05rem; }
dl.kv dd { margin:0; }
dl.kv dd ul { margin:0; }
@media (max-width:640px) {
  dl.kv { grid-template-columns:1fr; gap:0.1rem; }
  dl.kv dd { margin-bottom:0.5rem; }
}

/* Left-side table of contents (built by /assets/js/project-toc.js).
   Fixed in the left margin so the 760px main column stays centered; hidden below 1200px. */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
main h2[id], main h3[id] { scroll-margin-top:1.5rem; }
.page-toc { display:none; }
@media (min-width:1200px) {
  .page-toc { display:block; position:fixed; top:7.25rem; left:calc(50% - 380px - 228px); width:196px; max-height:calc(100vh - 9rem); overflow-y:auto; font-size:0.8rem; line-height:1.4; }
  main > a.back { visibility:hidden; }
  .page-toc a.toc-home { display:block; margin:0 0 1.1rem; padding:0; border-left:0; color:var(--muted); font-size:0.8rem; text-decoration:none; }
  .page-toc a.toc-home:hover { color:var(--accent); text-decoration:none; }
  .page-toc .toc-label { margin:0 0 0.5rem; color:var(--muted); font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
  .page-toc ol { margin:0; padding:0; list-style:none; }
  .page-toc li { margin:0; font-size:inherit; }
  .page-toc a { display:block; padding:0.22rem 0 0.22rem 0.75rem; color:#888; border-left:2px solid var(--border); text-decoration:none; }
  .page-toc a:hover { color:var(--text); text-decoration:none; }
  .page-toc a.active { color:var(--accent); border-left-color:var(--accent); font-weight:600; }
  .page-toc li.sub a { padding-left:1.5rem; font-size:0.76rem; }
  .page-toc li.has-sub > ol { display:none; }
  .page-toc li.has-sub.open > ol { display:block; }
}