/* Task Happens. A production board: lanes, tickets, keys.
   Cobalt ink and a highlighter, on paper by day and on a cobalt field by night.
   Material names, not roles. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  color-scheme:light dark;
  --paper:#fbfbf8; --wash:#e8ecfb; --ink:#0b1457; --ink-2:#3a4380; --rule:rgba(11,20,87,.22);
  --cobalt:#1530d6; --cobalt-hi:#0f24a8; --on-cobalt:#ffffff;
  --hi:#e8ff3a; --on-hi:#0b1457;
  --ticket:#ffffff; --ticket-ink:#0b1457; --ticket-line:rgba(11,20,87,.28);
  --pick:#1530d6; --stage-b:#1530d6; --on-b:#ffffff; --on-b-2:rgba(255,255,255,.82); --b-rule:rgba(255,255,255,.3);
  --bad:#b3261e;
  --display:"Archivo",ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --snap:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0b1457; --wash:#0f1a68; --ink:#f3f2ea; --ink-2:#b9c0ea; --rule:rgba(243,242,234,.24);
  --cobalt:#e8ff3a; --cobalt-hi:#f3ff8a; --on-cobalt:#0b1457;
  --ticket:#f6f5ee; --ticket-ink:#0b1457; --ticket-line:rgba(11,20,87,.35);
  --pick:#e8ff3a; --stage-b:#070d3f; --on-b:#f3f2ea; --on-b-2:rgba(243,242,234,.82); --b-rule:rgba(243,242,234,.24);
  --bad:#ff8a80;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--display);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pick);outline-offset:3px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-stretch:74%;font-weight:800;line-height:.98;margin:0}

/* masthead */
.top{border-bottom:1px solid var(--rule);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-stretch:80%;font-size:1.25rem;text-decoration:none;letter-spacing:.005em}
.brand img{width:26px;height:26px;border-radius:5px}
.top nav{display:flex;align-items:center;gap:clamp(14px,3vw,30px);font-size:.95rem;font-weight:550}
.top nav a:not(.btn){text-decoration:none}
.top nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:3px;border:2px solid var(--ink);background:var(--cobalt);color:var(--on-cobalt);font:700 1rem var(--display);text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.sm{min-height:38px;padding:0 14px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}

/* keys */
kbd,.cap{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;height:2.1em;padding:0 .55em;border-radius:5px;background:var(--ticket);color:var(--ticket-ink);font:700 .9em var(--display);border:1px solid var(--ticket-line);box-shadow:0 3px 0 var(--ticket-line);line-height:1}
.keys{display:inline-flex;gap:6px;vertical-align:middle}
button.cap{cursor:pointer;font-size:1rem;min-width:2.4em;transition:transform .1s,box-shadow .1s}
button.cap:active,button.cap.hit{transform:translateY(3px);box-shadow:0 0 0 var(--ticket-line)}

/* hero: the board itself */
.hero{padding:0}
.hero .wrap{display:grid;grid-template-rows:1fr auto;min-height:min(calc(100svh - 61px),920px)}
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--rule);outline:0;min-height:430px}
.lanes:focus-visible{outline:3px solid var(--pick);outline-offset:-3px}
.lane{container-type:inline-size;border-right:1px solid var(--rule);padding:26px clamp(14px,1.6vw,24px) 18px;background:var(--lane-bg,transparent)}
.lane:nth-child(2){background:color-mix(in srgb,var(--wash) 55%,transparent)}
.lane h2{font-size:10.6cqw;white-space:nowrap;margin:0 0 20px;letter-spacing:0}
.tk{display:block;position:relative;background:var(--ticket);color:var(--ticket-ink);border:1px solid var(--ticket-line);border-radius:3px;padding:12px 14px 12px 36px;margin-bottom:12px;font-weight:600;line-height:1.25;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tk::before{content:"";position:absolute;left:13px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ticket-line)}
.tk.sel{border-color:var(--ink);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--pick)}
.tk.landed{animation:land .4s var(--snap)}
.tk.gone{animation:gone .3s var(--ease) forwards}
@keyframes land{0%{transform:translate(-3px,-14px) scale(.96)}100%{transform:translate(-3px,-3px)}}
@keyframes gone{to{opacity:0;transform:translateX(24px)}}
@media (prefers-reduced-motion:reduce){.tk.landed,.tk.gone{animation:none}.tk{transition:none}}
.tag{display:inline-flex;gap:5px;align-items:center;margin-top:7px;font-size:.78rem;font-weight:700;border:1px solid var(--ticket-line);border-radius:2px;padding:1px 6px}
.tag.me{background:var(--ticket-ink);color:var(--ticket);border-color:var(--ticket-ink);margin-left:6px}
.tk .done{position:absolute;right:12px;top:10px;font-weight:800}
.bar{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:end;padding:22px 0 30px;border-top:1px solid var(--rule)}
.keybar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;font-size:.9rem;font-weight:550;margin:0 0 18px}
.keybar span{display:inline-flex;align-items:center;gap:8px}
.msg{min-height:1.5em;margin:0;font-size:.9rem;color:var(--ink-2)}
.lede{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.3;font-weight:500;max-width:36ch;margin:0}
.join{display:flex;gap:12px;flex-wrap:wrap}
.join .field{flex:1 1 220px}
.earlyform{display:flex;gap:12px;flex-wrap:wrap}
.earlyform .field{flex:1 1 220px}
input[type=email]{width:100%;min-height:46px;padding:0 14px;border-radius:3px;border:2px solid var(--ink);background:var(--ticket);color:var(--ticket-ink);font:500 1rem var(--display)}
input[type=email]::placeholder{color:#5b638f}
.fine{font-size:.88rem;color:var(--ink-2);margin:12px 0 0}
.earlymsg{flex:1 0 100%;margin:0;font-size:.9rem;color:var(--ink-2)}
.earlymsg.is-bad{color:var(--bad)}
.earlydone{display:flex;gap:.7rem;align-items:flex-start;font-size:1.05rem;font-weight:600;outline:0;animation:rise .3s var(--ease) both}
.earlytick{flex:0 0 auto;width:1.4em;height:1.4em;margin-top:.1em}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* shared section type */
section.s{padding:clamp(60px,9vw,128px) 0}
h2.big{font-size:clamp(2.6rem,6.4vw,6rem);text-wrap:balance}
.stageb{background:var(--stage-b);color:var(--on-b)}
.stageb .btn{border-color:var(--on-b);box-shadow:4px 4px 0 var(--on-b)}
.stageb p{color:var(--on-b-2)}
.stageb{--rule:var(--b-rule)}
.stageb .btn{background:var(--hi);color:var(--on-hi)}

/* keys section */
.keysec .wrap:first-child{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.keysec p{max-width:42ch;margin:22px 0 0;font-size:1.1rem}
.kb{display:grid;gap:18px}
.kr{display:flex;gap:12px}
.kr:nth-child(2){padding-left:30px}
.kr:nth-child(3){padding-left:60px}
.k{display:grid;justify-items:center;gap:8px;width:84px;font-size:.8rem;font-weight:600;white-space:nowrap;color:var(--on-b-2)}
.k i{font-style:normal;display:grid;place-items:center;width:64px;height:64px;border-radius:7px;background:var(--ticket);color:var(--ticket-ink);font-size:1.5rem;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.35),inset 0 0 0 1px var(--ticket-line)}
.k.sp{width:auto;justify-items:start;flex:1}
.k.sp i{width:100%;max-width:470px;height:54px;font-size:1rem}
.paletteframe{margin-top:clamp(36px,5vw,72px);border:2px solid var(--on-b);border-radius:3px;overflow:hidden;box-shadow:8px 8px 0 var(--hi)}
.paletteframe img{width:100%;height:auto}
.caption{margin:14px 0 0;font-size:.9rem;color:var(--on-b-2)}

/* instant */
.instant{background:var(--hi);color:var(--on-hi)}
.instant .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:end}
.instant p{margin:0 0 14px;font-size:1.15rem;font-weight:550;max-width:36ch}
.instant b{font-weight:800}

/* together */
.together .head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end}
.together .head p{margin:0;font-size:1.15rem;max-width:40ch;color:var(--ink-2)}
.shotframe{margin:clamp(30px,4vw,56px) 0 0;border:2px solid var(--ink);border-radius:3px;overflow:hidden;box-shadow:8px 8px 0 var(--pick);background:var(--ticket)}
.shotframe img{width:100%;height:auto}
.rows{margin-top:clamp(34px,5vw,64px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,4vw,64px);padding:22px 0;border-top:2px dashed var(--rule);align-items:baseline}
.row:last-child{border-bottom:2px dashed var(--rule)}
.row h3{font-size:clamp(1.6rem,2.8vw,2.5rem);font-stretch:78%}
.row p{margin:0;font-size:1.1rem;max-width:46ch;color:var(--ink-2)}

/* a card */
.anat{border-top:2px solid var(--ink)}
.anat .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);align-items:start}
.ticketbig{position:sticky;top:24px;background:var(--ticket);color:var(--ticket-ink);border:2px solid var(--ink);border-radius:3px;padding:22px 24px 22px 54px;box-shadow:10px 10px 0 var(--pick);max-width:420px;position:relative}
.ticketbig::before{content:"";position:absolute;left:20px;top:26px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ticket-line)}
.ticketbig h3{font-size:1.9rem;font-stretch:85%;line-height:1.05;margin:0 0 14px}
.ticketbig .meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ticketbig .meta span{border:1px solid var(--ticket-line);border-radius:2px;padding:2px 8px;font-weight:700;font-size:.85rem;white-space:nowrap}
.ticketbig .meta .urg{background:var(--ticket-ink);color:var(--ticket)}
.ticketbig .lines i{display:block;height:8px;border-radius:2px;background:var(--ticket-line);margin:0 0 9px;opacity:.55}
.ticketbig .lines i:nth-child(2){width:82%}.ticketbig .lines i:nth-child(3){width:64%}
.ticketbig .who{margin:16px 0 0;font-weight:700;font-size:.9rem}
.anat dl{margin:0;display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:0 28px}
.anat dt{padding:16px 0;border-top:1px solid var(--rule);font-weight:800;font-stretch:80%;font-size:1.25rem}
.anat dd{margin:0;padding:16px 0;border-top:1px solid var(--rule);color:var(--ink-2)}
.anat .after{margin:26px 0 0;font-weight:600;font-size:1.1rem}

/* join band */
.joinband .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end}
.joinband p.t{margin:20px 0 0;font-size:1.15rem;max-width:40ch}
.joinband input[type=email]{border-color:var(--on-b)}
.joinband .fine,.joinband .earlymsg{color:var(--on-b-2)}

/* footer */
footer{margin-top:auto;padding:30px 0 40px;border-top:1px solid var(--rule);font-size:.92rem;font-weight:550}
footer .wrap{display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:6px 22px;flex-wrap:wrap}
footer a{text-underline-offset:.2em}
.stageb+footer{border-top:0}

/* plain pages */
.page{max-width:64ch;padding:clamp(40px,6vw,88px) 0 72px}
.page h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:20px}
.page h2{font-size:1.7rem;font-stretch:80%;margin:38px 0 8px}
.page p,.page li{color:var(--ink-2)}
.page .lede{color:var(--ink);font-size:1.25rem;max-width:none}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.no-js .rv{opacity:1;transform:none}
.clause{white-space:nowrap}

@media (max-width:1000px){
  .bar,.keysec .wrap:first-child,.instant .wrap,.together .head,.anat .wrap,.joinband .wrap,.row{grid-template-columns:minmax(0,1fr)}
  .ticketbig{position:relative;top:0}
  .hero .wrap{min-height:0}
}
@media (max-width:800px){
  .top nav a:not(.btn){display:none}
  .lanes{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;min-height:0;scrollbar-width:none}
  .lane{scroll-snap-align:start;max-height:440px;overflow-y:auto}
  .kr,.kr:nth-child(2),.kr:nth-child(3){padding-left:0;flex-wrap:wrap}
  .anat dl{grid-template-columns:minmax(100px,140px) minmax(0,1fr);gap:0 16px}
}
@media (max-width:520px){
  .join .btn,.earlyform .btn{flex:1 1 100%}
  .shotframe,.paletteframe{overflow-x:auto}
  .shotframe img,.paletteframe img{min-width:760px;max-width:none}
}

.page .fine{color:var(--ink-2)}
@media (max-width:520px){.anat dl{grid-template-columns:minmax(0,1fr)}.anat dt{padding:14px 0 2px}.anat dd{border-top:0;padding:0 0 14px}}