/* Justdoit.work — shared design system
   Light-first minimal, automatic dark mode. Accent: signal orange. */

:root{
  --bg:#faf9f7; --surface:#ffffff; --ink:#16130f; --muted:#6f6a63; --faint:#a8a29a;
  --line:#e9e5df; --accent:#ff5941; --accent-soft:#fff0ed; --chip:#f1eee9;
  --mark:#8a6d1f; --mark-soft:#faf3dd;
  --shadow:0 1px 2px rgba(22,19,15,.04), 0 8px 24px -12px rgba(22,19,15,.12);
  --mono:'SF Mono',ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141210; --surface:#1d1a17; --ink:#f2efe9; --muted:#a39d94; --faint:#6f6a63;
    --line:#2b2723; --accent:#ff6a55; --accent-soft:#2c1c18; --chip:#26221e;
    --mark:#f8d96b; --mark-soft:#2b2410;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}

/* ===== Header ===== */
header.site{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:60px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:17px}
.brand .dot{width:26px; height:26px; border-radius:8px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-family:Georgia, serif; font-size:16px; line-height:1}
.nav-links{display:flex; gap:20px; font-size:14px; color:var(--muted); overflow-x:auto; scrollbar-width:none; white-space:nowrap}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink); font-weight:600}
.nav-links a.ge{color:var(--accent)}

/* ===== Daily band (refreshed from /cases/daily-widget.html, D1-served) ===== */
.daily{border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, var(--bg), color-mix(in srgb, var(--accent) 6%, var(--bg)) 55%, var(--bg))}
.daily .dw{display:grid; grid-template-columns:auto 1fr auto; gap:8px 22px; align-items:center;
  max-width:760px; margin:0 auto; padding:14px 20px; color:inherit; text-decoration:none}
.daily .dk{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.daily .dt b{display:block; font-size:15px; letter-spacing:-.01em}
.daily .dt span{display:block; font-size:13px; color:var(--muted); margin-top:2px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.daily .dr{font-family:var(--mono); font-size:12.5px; color:var(--accent); border:1px solid var(--accent); border-radius:8px; padding:6px 12px; white-space:nowrap}
@media(max-width:720px){.daily .dw{grid-template-columns:1fr}.daily .dr{justify-self:start}}

/* ===== Hero ===== */
.hero{padding:64px 0 36px}
.hero h1{font-size:clamp(28px,5.5vw,42px); font-weight:800; letter-spacing:-.035em; line-height:1.12}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{margin-top:14px; font-size:17px; color:var(--muted); max-width:52ch}
.hero .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.btn{display:inline-block; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700; transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:#fff}
.btn-ghost{border:1px solid var(--line); color:var(--ink); background:var(--surface)}

/* ===== Filter chips ===== */
.filters{display:flex; flex-wrap:wrap; gap:8px; padding:22px 0 8px}
.chip{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s ease; font-family:inherit;
}
.chip:hover{color:var(--ink); border-color:var(--faint)}
.chip.active{background:var(--ink); color:var(--bg); border-color:var(--ink)}

/* ===== Project cards ===== */
.list{padding:14px 0 30px; display:flex; flex-direction:column; gap:10px}
.card{
  display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--faint)}
.rank{width:22px; text-align:center; font-size:14px; font-weight:700; color:var(--faint); flex-shrink:0}
.logo{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff;
  font-family:Georgia, serif;
}
.meta{min-width:0; flex:1}
.meta .name{font-weight:700; font-size:16px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.badge{font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--accent);
  background:var(--accent-soft); border-radius:5px; padding:2px 6px; text-transform:uppercase}
.meta .tagline{color:var(--muted); font-size:14px; margin-top:2px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.meta .tags{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; font-weight:600; color:var(--muted); background:var(--chip); border-radius:5px; padding:2px 8px}
.go{
  flex-shrink:0; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); transition:all .15s ease; font-size:15px;
}
.card:hover .go{background:var(--accent); border-color:var(--accent); color:#fff; transform:translate(1px,-1px)}
.domain{display:none}
@media(min-width:640px){
  .domain{display:block; flex-shrink:0; font-size:12px; color:var(--faint); max-width:150px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right}
}

/* ===== Panels / sections (method page + method strip) ===== */
section.block{padding:40px 0 8px}
section.block h2{font-size:22px; letter-spacing:-.02em; margin-bottom:8px}
section.block > .lead, .panel > p.lead{color:var(--muted); font-size:15px; max-width:60ch}
.panel{
  margin:26px 0 0; padding:26px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
}
.panel h2{font-size:18px; letter-spacing:-.02em}
.panel p{color:var(--muted); font-size:14px; margin-top:6px; max-width:60ch}
.steps{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.step{font-size:12px; font-weight:600; color:var(--muted); background:var(--chip); padding:5px 10px; border-radius:7px}
.step b{color:var(--accent); font-weight:800; margin-right:4px}

/* ===== Metrics strip ===== */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:34px}
.metrics article{text-align:center}
.metrics strong{display:block; font-size:clamp(22px,3vw,30px); font-family:var(--mono); color:var(--accent)}
.metrics span{font-size:12.5px; color:var(--faint)}
@media(max-width:560px){.metrics{grid-template-columns:repeat(2,1fr); gap:16px 8px}}

/* ===== Case rows ===== */
.case-rows{display:grid; gap:10px; margin-top:22px}
.crow{display:grid; grid-template-columns:86px 1fr auto; gap:16px; align-items:center;
  padding:15px 18px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  transition:border-color .15s ease, box-shadow .15s ease}
.crow:hover{border-color:var(--faint); box-shadow:var(--shadow)}
.crow .no{font-family:var(--mono); font-weight:800; color:var(--accent); font-size:12px; letter-spacing:.06em}
.crow b{display:block; font-size:15px}
.crow small{color:var(--faint); font-size:13px}
.crow .dur{font-family:var(--mono); font-weight:700; white-space:nowrap; color:var(--mark);
  background:var(--mark-soft); border-radius:7px; padding:4px 9px; font-size:12.5px}
@media(max-width:600px){.crow{grid-template-columns:1fr; gap:5px}.crow .dur{justify-self:start}}

/* ===== Timeline ===== */
.timeline{list-style:none; margin:26px 0 0; position:relative; max-width:640px}
.timeline::before{content:""; position:absolute; left:56px; top:8px; bottom:8px; width:2px; background:var(--line)}
.timeline li{position:relative; display:grid; grid-template-columns:44px 1fr; gap:30px; padding-bottom:24px}
.timeline time{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--muted); text-align:right; padding-top:2px}
.timeline li::before{content:""; position:absolute; left:51px; top:7px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:3px solid var(--accent)}
.timeline h3{font-size:15.5px; margin-bottom:3px}
.timeline p{font-size:14px; color:var(--muted)}
@media(max-width:600px){.timeline::before{left:5px}
  .timeline li{grid-template-columns:1fr; gap:2px; padding-left:26px}
  .timeline li::before{left:0}
  .timeline time{text-align:left; color:var(--accent)}}

/* ===== Post board (launch copy) ===== */
.post-board{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px}
.post-panel{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column}
.post-panel h3{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.post-panel p{font-size:13.5px; color:var(--muted); margin-bottom:10px}
.post-panel .post-link{margin-top:auto; font-family:var(--mono); font-size:12.5px; color:var(--accent);
  border:1px solid var(--accent); border-radius:8px; padding:8px 14px; text-align:center}
@media(max-width:760px){.post-board{grid-template-columns:1fr}}

/* ===== Evidence grid ===== */
.ev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px}
.ev{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.ev .num{font-family:var(--mono); font-size:20px; color:var(--accent); display:block; margin-bottom:2px}
.ev b{display:block; margin-bottom:5px; font-size:14.5px}
.ev p{font-size:13.5px; color:var(--muted)}
@media(max-width:760px){.ev-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ev-grid{grid-template-columns:1fr}}

/* ===== Footer ===== */
footer.site{padding:44px 0 60px; color:var(--faint); font-size:13px; border-top:1px solid var(--line); margin-top:44px}
.f-cols{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:26px; margin-bottom:30px}
.f-cols h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.f-cols ul{list-style:none}
.f-cols li{margin-bottom:9px}
.f-cols li a{color:var(--muted); font-size:13.5px}
.f-cols li a:hover{color:var(--ink)}
.f-cols li small{display:block; color:var(--faint); font-size:12px}
@media(max-width:700px){.f-cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.f-cols{grid-template-columns:1fr}}
.f-base{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:18px}
.f-base a{color:var(--muted)} .f-base a:hover{color:var(--ink)}
.hidden{display:none}

/* ===== Case log (cases.html) ===== */
.case{margin-bottom:72px; scroll-margin-top:74px}
.case-head{border-top:3px solid var(--accent); padding-top:18px; margin-bottom:20px}
.case-head h2{font-size:clamp(24px,4vw,34px); letter-spacing:-.025em; line-height:1.05; margin-bottom:8px}
.case-meta{display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--faint); font-size:13.5px; font-weight:600}
.io-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 28px}
@media(max-width:700px){.io-grid{grid-template-columns:1fr}}
.io{border-radius:14px; padding:18px 20px; border:1px solid var(--line); background:var(--surface)}
.io h3{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:10px}
.io ul{margin:0; padding-left:18px; display:grid; gap:6px; color:var(--muted); font-size:14px}
.io.out{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.io.out h3{color:var(--accent)}
.io.out ul{color:var(--ink)}
.seq{list-style:none; margin:18px 0 0; padding:0; position:relative; max-width:680px}
.seq::before{content:""; position:absolute; left:70px; top:6px; bottom:6px; width:2px; background:var(--line)}
.seq li{position:relative; display:grid; grid-template-columns:56px 1fr; gap:28px; padding:0 0 22px}
.seq time{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--muted); text-align:right; padding-top:1px}
.seq li::before{content:""; position:absolute; left:64px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:3px solid var(--accent)}
.seq li.mark::before{background:var(--accent); border-color:var(--accent)}
.seq b{display:block; font-size:15px; margin-bottom:2px}
.seq p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
.seq.noclock::before{left:6px}
.seq.noclock li{grid-template-columns:1fr; padding-left:30px}
.seq.noclock li::before{left:0}
@media(max-width:640px){.seq::before{left:6px}
  .seq li{grid-template-columns:1fr; gap:2px; padding-left:30px}
  .seq li::before{left:0}
  .seq time{text-align:left; color:var(--accent)}}
.honest{margin-top:26px; border-radius:14px; padding:18px 20px; background:var(--mark-soft); border:1px solid color-mix(in srgb, var(--mark) 35%, var(--line))}
.honest h3{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:8px; color:var(--mark)}
.honest ul{margin:0; padding-left:18px; display:grid; gap:5px; font-size:14px; color:var(--muted)}
.takeaway{margin-top:22px; font-size:16px; font-weight:800; letter-spacing:-.01em}
.case-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}