/* Focus site. Look: "ember ledger" (issue #27): the omalauncher home screen palette,
   one hairline weight, one radius, ember only for "your turn", DM Mono body, Jura Light titles. */
:root{
  --coal:#1d1d1c; --coal-1:#232322; --coal-2:#2a2b29;
  --sage:#6c7266; --sage-2:#7d837d; --mist:#bec6be; --bone:#e4e9e4;
  --ember:#fa5923; --ember-dim:color-mix(in srgb,#fa5923 22%,#1d1d1c);
  --line:color-mix(in srgb,#6c7266 45%,#1d1d1c);
  --hair:1px solid var(--line);
  --r:6px;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --title:"Jura",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--coal);color:var(--mist);font:400 14px/1.7 var(--mono);overflow-x:hidden}
a{color:var(--mist);text-decoration-color:var(--sage);text-underline-offset:3px}
a:hover{color:var(--ember);text-decoration-color:var(--ember)}
img{max-width:100%;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}

/* top bar */
.topbar{border-bottom:var(--hair)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{font:300 18px/1 var(--title);letter-spacing:.32em;color:var(--bone)}
.brand a{color:inherit;text-decoration:none}
.brand .full{font:400 11px var(--mono);letter-spacing:.04em;color:var(--sage-2)}
.topbar nav{display:flex;gap:18px;flex-wrap:wrap}
.topbar nav a{font-size:12px;letter-spacing:.06em;color:var(--sage-2);text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.topbar nav a[aria-current]{color:var(--mist);border-bottom-color:var(--ember)}

/* type */
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-2);margin:0 0 14px}
h1,h2,h3{font-family:var(--title);font-weight:300;color:var(--bone);margin:0;text-wrap:balance}
h1{font-size:clamp(40px,9vw,88px);line-height:1;letter-spacing:.04em}
h2{font-size:clamp(24px,4vw,32px);line-height:1.2;letter-spacing:.02em}
h3{font-size:18px;font-weight:400;line-height:1.3}
.lede{font-size:15px;max-width:62ch;margin:20px 0 0;color:var(--mist)}
.muted{color:var(--sage-2)}
.ember{color:var(--ember)}
p{margin:0 0 12px}

section{padding:56px 0;border-bottom:var(--hair)}
section:last-of-type{border-bottom:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head .n{font-size:11px;color:var(--sage);letter-spacing:.14em}

/* hero */
.hero{padding:64px 0 56px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:end}
.sub{font:300 clamp(16px,2.4vw,22px)/1.3 var(--title);color:var(--sage-2);margin-top:12px;letter-spacing:.04em}

/* ledger: rows like the phone's agenda widget. Ember bar = your turn, sage bar = Claude's/the app's turn */
.ledger{border:var(--hair);border-radius:var(--r);background:var(--coal-1)}
.ledger .head{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:var(--hair);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-2)}
.row{display:grid;grid-template-columns:3px minmax(0,1fr);gap:12px;padding:12px 14px;border-bottom:var(--hair)}
.row:last-child{border-bottom:0}
.row .bar{border-radius:2px;background:var(--sage)}
.row.you .bar{background:var(--ember)}
.row .t{color:var(--bone);font-size:13px;line-height:1.45}
.row .s{color:var(--sage-2);font-size:12px;line-height:1.5;margin-top:2px}
.meter{height:3px;background:var(--coal-2);border-radius:2px;margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--sage-2)}

/* shots */
figure{margin:0}
.shot{border:var(--hair);border-radius:var(--r);overflow:hidden;background:#000}
figcaption{font-size:12px;color:var(--sage-2);margin-top:10px;line-height:1.5}
figcaption b{color:var(--mist);font-weight:400}
.shots{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:32px;align-items:start}
.shots .tall{max-width:300px}
.hero-shot{margin-top:48px;max-width:640px}

/* feature list: a ledger of plain lines */
.list{list-style:none;margin:0;padding:0;border-top:var(--hair)}
.list li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 24px;padding:14px 0;border-bottom:var(--hair)}
.list li b{font-weight:400;color:var(--bone)}
.list code,.mono-chip{box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:2;font-family:var(--mono);font-size:12.5px;color:var(--ember);background:var(--coal-1);border:var(--hair);border-radius:var(--r);padding:1px 6px;overflow-wrap:anywhere}

.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:var(--hair);border-radius:var(--r)}
.cols > div{padding:20px;border-right:var(--hair)}
.cols > div:last-child{border-right:0}
.cols h3{margin-bottom:8px}
.cols p{color:var(--sage-2);font-size:13px;margin:0}

.note{border-left:2px solid var(--ember);padding:4px 0 4px 16px;color:var(--mist);max-width:70ch}

/* build log */
.page-head{padding:56px 0 40px;border-bottom:var(--hair)}
.page-head h1{font-size:clamp(32px,6vw,56px);line-height:1.1}
.log{list-style:none;margin:0;padding:0}
.log > li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 32px;padding:28px 0;border-bottom:var(--hair)}
.log > li:last-child{border-bottom:0}
.log time{font-size:12px;color:var(--ember);letter-spacing:.06em;padding-top:4px}
.log h3{margin-bottom:10px}
.log ul{margin:0;padding-left:18px;color:var(--mist)}
.log ul li{margin:4px 0}
.log ul li::marker{color:var(--sage)}
.log .refs{font-size:12px;color:var(--sage-2);margin-top:10px}

footer{border-top:var(--hair);padding:28px 0 40px;font-size:12px;color:var(--sage-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:820px){
  .hero-grid,.shots{grid-template-columns:minmax(0,1fr);gap:32px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .cols > div{border-right:0;border-bottom:var(--hair)}
  .cols > div:last-child{border-bottom:0}
}
@media (max-width:560px){
  section{padding:40px 0}
  .hero{padding:40px 0}
  .list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .log > li{grid-template-columns:minmax(0,1fr);gap:4px}
  .topbar nav{gap:14px}
}