/* Ship at Midnight. The clock stays; the ships pass under it. */
@font-face{font-family:Epilogue;src:url(/fonts/Epilogue-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* taste-skill-ignore: mono is used only for real install commands (code) */
@font-face{font-family:"JetBrains Mono";src:url(/fonts/JetBrainsMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --night:#0b0f1d; --ink:#eef1fb; --muted:#a6aecb; --line:rgba(238,241,251,.14);
  --accent:#b8c4ff; --accent-ink:#0b0f1d;
  --paper:#e7e6e2; --paper-ink:#0e1222; --paper-muted:#454a5c;
  --ground:var(--night);
  --g-ls:#0a1a15; --g-dea:#17140c; --g-at:#170f29; --g-night:#0b0f1d;
  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);
  --step-title:clamp(3.4rem,9.4vw,10.5rem);
  --margin:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 var(--step-body)/1.5 Epilogue,ui-sans-serif,sans-serif;transition:background-color .7s var(--ease);overflow-x:hidden}
html[data-ground=ls]{--ground:var(--g-ls)}html[data-ground=dea]{--ground:var(--g-dea)}html[data-ground=at]{--ground:var(--g-at)}html[data-ground=night]{--ground:var(--g-night)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:900;letter-spacing:-.04em;line-height:.95;margin:0}
p{margin:0}
code{font:500 .92em "JetBrains Mono",ui-monospace,monospace}
.skip{position:absolute;left:var(--margin);top:-60px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 14px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;background:var(--ground);transition:background-color .7s var(--ease);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--margin) 14px}
.wordmark{font-weight:800;font-size:var(--step-small);letter-spacing:-.01em;text-decoration:none}
.wordmark .mono{display:none}
.links{display:flex;gap:28px;font-size:var(--step-small)}
.links a,.navfollow{text-decoration:none;color:var(--muted)}
.links a:hover,.navfollow:hover{color:var(--ink)}
.navfollow{font-size:var(--step-small);font-weight:600;color:var(--ink)}

/* buttons: square, accent, decided once */
.button,.copy,.playpause{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);font:600 var(--step-small) Epilogue,sans-serif;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),filter .2s}
.button:hover,.copy:hover,.playpause:hover{filter:brightness(1.08)}
.button:active,.copy:active,.playpause:active{transform:translateY(1px)}

/* the pinned run */
.pin{position:relative}
.pin-layer h1{padding:calc(76px + 6vh) var(--margin) 0;text-align:center;font-size:var(--step-title);color:var(--ink);white-space:nowrap}
.pin-layer{position:sticky;top:0;height:100svh;z-index:2;pointer-events:none}
.pin-layer h1{position:relative}
.pin-meta{position:absolute;left:var(--margin);bottom:calc(30px + env(safe-area-inset-bottom,0px));max-width:34ch;display:grid;gap:8px}
.pin-sub{font-weight:600;font-size:var(--step-body);line-height:1.4}
.pin-clock{font-size:var(--step-small);color:var(--muted)}
.pin-clock .clock{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pin-cta{position:absolute;right:var(--margin);bottom:calc(28px + env(safe-area-inset-bottom,0px));pointer-events:auto}
.panels{margin-top:-100svh}
.panel{--top:calc(76px + 6vh + var(--step-title) + 22px);min-height:100svh;display:grid;justify-items:center;align-content:start;gap:16px;padding:var(--top) var(--margin) 0;margin:0}
.shot{position:relative;height:calc(100svh - var(--top) - 190px);max-width:calc(100vw - 2 * var(--margin));aspect-ratio:16/10;overflow:hidden;background:#000;transform:scale(.94);opacity:.4;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.panel.on .shot{transform:none;opacity:1}
.shot img,.shot video{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.playpause{position:absolute;right:12px;bottom:12px;min-height:36px;padding:0 14px;background:rgba(11,15,29,.78);color:var(--ink)}
.panel figcaption{font-size:var(--step-small);color:var(--muted);text-align:center;max-width:56ch}
.panel figcaption b{color:var(--ink);font-weight:700;margin-right:.35em}
.panel figcaption a{color:var(--ink);margin-left:.35em}
.clock.shipped{color:var(--accent)}

/* sections after the pin */
section:not(.pin){padding:clamp(96px,14vh,160px) var(--margin)}
h2{font-size:var(--step-head);max-width:14ch}
.lead{font-size:var(--step-lead);color:var(--muted);max-width:40ch;margin-top:22px;line-height:1.4}

/* tools: name on the left, the work on the right */
.tool-list{list-style:none;margin:clamp(56px,8vh,96px) 0 0;padding:0;display:grid;gap:clamp(56px,9vh,104px)}
.tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
.tool h3{font-size:var(--step-head)}
.tool-body{display:grid;gap:16px}
.tool-body>p{max-width:62ch}
.tool-body .one{font-size:var(--step-lead);font-weight:700;letter-spacing:-.02em}
.tool-body p:not(.one){color:var(--muted)}
.cmd{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;margin-top:6px}
.cmd code{display:flex;align-items:center;min-height:44px;padding:0 16px;background:rgba(238,241,251,.08);color:var(--ink)}
.copy.ok{background:var(--ink)}
.tool-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--step-small)}
.tool-links a{color:var(--ink)}
.tool-links span{color:var(--muted)}

/* rhythm: the one paper field */
.rhythm{background:var(--paper);color:var(--paper-ink)}
.rhythm .lead{color:var(--paper-muted)}
.week{list-style:none;margin:clamp(48px,7vh,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.week li{display:grid;gap:30px;align-content:space-between;min-height:150px;padding:16px 14px;background:rgba(14,18,34,.06)}
.week b{font-size:var(--step-lead);font-weight:900;letter-spacing:-.03em}
.week span{font-size:var(--step-small);color:var(--paper-muted)}
.week li.ship{background:var(--paper-ink);color:var(--paper)}
.week li.ship span{color:var(--accent)}
.week li.today{outline:2px solid var(--paper-ink);outline-offset:-2px}
.week li.ship.today{outline-color:var(--accent)}
.tally{margin-top:32px;font-size:var(--step-body);color:var(--paper-muted)}
.tally b{color:var(--paper-ink);font-weight:900}

/* log: date column, then the entry */
.log-head p{margin-top:18px;color:var(--muted)}
.entries{margin-top:clamp(48px,7vh,80px);display:grid;gap:clamp(48px,7vh,72px)}
.entry{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px;scroll-margin-top:96px}
.when{font-size:var(--step-small);color:var(--muted);display:grid;gap:4px;align-content:start;font-variant-numeric:tabular-nums}
.when a{color:var(--accent);font-weight:700;text-decoration:none}
.when a:hover{text-decoration:underline}
.what{display:grid;gap:14px}
.what>:not(.entry-img){max-width:64ch}
.what .meta-n{display:none;color:var(--muted)}
.entry-img{width:100%;height:auto;margin-top:10px;background:#000}
.what h3{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem);letter-spacing:-.03em;line-height:1.05}
.what h3 a{text-decoration:none}.what h3 a:hover{text-decoration:underline}
.what p,.what li{color:var(--muted)}
.what b{color:var(--ink);font-weight:600}
.what ul{margin:0;padding-left:1.2em}
.what code{color:var(--ink)}
.links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--step-body)}
.links a{color:var(--ink)}

/* ideas: the count leads */
.ideas-head{display:grid;gap:22px;max-width:60ch}
.ideas-head p:not(:last-child){color:var(--muted);font-size:var(--step-lead);line-height:1.4}
.board{list-style:none;margin:clamp(48px,7vh,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px}
.idea{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start}
.vote{display:grid;justify-items:center;min-width:72px;padding:10px 6px;text-decoration:none;background:rgba(238,241,251,.06);transition:background .2s}
.vote:hover{background:rgba(184,196,255,.18)}
.vote b{font-size:var(--step-lead);font-weight:900;font-variant-numeric:tabular-nums}
.vote span{font-size:var(--step-small);color:var(--muted)}
.idea h3{font-size:clamp(1.3rem,1rem + 1vw,1.75rem);letter-spacing:-.02em;line-height:1.1;margin:0 0 8px}
.idea p:not(.for){color:var(--muted)}

/* follow: four big words */
.channels{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;gap:10px}
.channels a{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;text-decoration:none}
.channels b{font-size:var(--step-head);font-weight:900;letter-spacing:-.04em;line-height:1.05;transition:color .2s}
.channels span{color:var(--muted)}
.channels a:hover b{color:var(--accent)}

.foot{padding:56px var(--margin) calc(48px + env(safe-area-inset-bottom,0px));display:grid;gap:14px;font-size:var(--step-small);color:var(--muted);max-width:110ch}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{color:var(--ink)}

/* entrances */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
.tool-list .reveal:nth-child(2),.board .reveal:nth-child(2n){transition-delay:.08s}
.tool-list .reveal:nth-child(3){transition-delay:.16s}

/* tablet and phone */
@media (max-width:900px){
  .links{display:none}
  .tool,.entry{grid-template-columns:1fr;gap:14px}
  .entry .when{display:none}
  .what .meta-n{display:block}
  .board{grid-template-columns:1fr}
  .week{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .week li{min-height:112px;padding:10px 8px;gap:16px}
  .week b{font-size:var(--step-body)}
  .week span{font-size:13px;line-height:1.25}
}
@media (max-width:600px){
  .wordmark .full{display:none}.wordmark .mono{display:inline}
  .pin-layer h1{font-size:15vw;white-space:normal;padding-top:calc(70px + env(safe-area-inset-top,0px));line-height:.9}
  .pin-meta{position:absolute;left:16px;right:16px;bottom:auto;top:calc(70px + 30vw + 8px);max-width:none;text-align:center}
  .pin-sub{font-size:var(--step-small)}
  .pin-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .panel{--top:calc(70px + 30vw + 110px);padding:var(--top) 16px 0}
  .shot{height:auto;width:100%}
  .shot{width:100%}
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week li{min-height:0;gap:8px}
  .week li.ship{grid-column:span 2}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  .shot{transform:none;opacity:1;transition:none}
}
section{scroll-margin-top:56px}

/* the older releases, one line each */
.earlier-h{margin-top:clamp(64px,9vh,96px);font-size:clamp(1.3rem,1rem + 1vw,1.75rem);letter-spacing:-.02em}
.earlier{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.earlier li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px;color:var(--muted);scroll-margin-top:96px}
.earlier b{color:var(--ink);font-weight:600}
@media (max-width:900px){.earlier li{grid-template-columns:1fr;gap:2px}}
.ideas-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.textlink{font-weight:600;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.textlink:hover{color:var(--accent)}