:root{
  --ink:#0d0d0c; --panel:#161513; --panel-2:#1d1c19; --line:#2c2a26; --line-2:#3a3832;
  --paper:#f3efe6; --muted:#9a9487; --faint:#6b665c;
  --signal:#F5C518; --signal-ink:#1a1500; --signal-soft:rgba(245,197,24,.14);
  --display:"Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:min(1180px, 100% - 2.5rem);
  --r-s:6px; --r-m:12px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 1.0625rem/1.6 var(--body);
  background-image:radial-gradient(1200px 600px at 85% -10%, rgba(245,197,24,.07), transparent 60%);
  background-repeat:no-repeat}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--signal);color:var(--signal-ink);padding:.5rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.muted{color:var(--muted)}

/* top bar */
.bar{width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.25rem 0}
.mark{font:400 1.5rem/1 var(--display);letter-spacing:.04em;text-decoration:none;display:flex;align-items:center;gap:.6rem}
.mark-dot{width:14px;height:14px;background:var(--signal);border-radius:3px;display:inline-block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--signal);color:var(--signal-ink);
  font:700 1rem/1 var(--body);padding:1rem 1.4rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(245,197,24,.25)}
.btn-sm{padding:.65rem 1rem;font-size:.9rem}

/* hero */
.hero{width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding:clamp(2rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem)}
.display{margin:0;font:400 clamp(3.4rem,8.6vw,7.4rem)/.88 var(--display);letter-spacing:.005em}
.display .line{display:block;text-wrap:balance}
.display .line-2{color:transparent;-webkit-text-stroke:1.5px var(--paper);margin-top:.12em}
@supports not (-webkit-text-stroke:1px black){.display .line-2{color:var(--muted)}}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:#d9d3c6;max-width:36ch;margin:1.5rem 0 2rem}
.score{display:flex;flex-wrap:wrap;gap:0;margin:0;border-top:1px solid var(--line)}
.score-cell{flex:1 1 0;min-width:9rem;padding:1rem 1.25rem 0 0}
.score-cell + .score-cell{padding-left:1.25rem;border-left:1px solid var(--line)}
.score dd{margin:0;display:flex;flex-direction:column}
.score-num{font:400 2.6rem/1 var(--display);letter-spacing:.02em;color:var(--muted)}
.score-num b{font-weight:400;color:var(--paper)}
.score-cell:first-child .score-num b{color:var(--signal)}
.score-lbl{font-size:.9rem;color:var(--muted);margin-top:.35rem}

/* the wall: signature element */
.wall{margin:0;padding:clamp(1rem,2vw,1.4rem);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)}
.wall-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(3px,.6vw,6px)}
.wall-grid li{aspect-ratio:1;border-radius:3px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);position:relative}
.wall-grid li.is-done{background:var(--paper);box-shadow:none}
.wall-grid li.is-now{background:var(--signal);box-shadow:none}
.wall-grid li.is-now::after{content:"";position:absolute;inset:-4px;border-radius:5px;border:2px solid var(--signal);opacity:0;animation:ping 2.4s ease-out infinite}
.wall-grid li.is-today:not(.is-now){box-shadow:inset 0 0 0 1px var(--signal)}
@keyframes ping{0%{opacity:.8;transform:scale(.9)}80%,100%{opacity:0;transform:scale(1.35)}}
.wall-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:1rem;font-size:.82rem;color:var(--muted)}
.key{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:-.6rem;vertical-align:-1px}
.key-now{background:var(--signal)} .key-done{background:var(--paper)} .key-empty{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line-2)}

/* now building */
.now{width:var(--wrap);margin:0 auto;padding:0 0 clamp(2.5rem,5vw,4rem)}
.now-title{font:500 1rem/1.4 var(--body);color:var(--muted);margin:0 0 .9rem}
.now-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.job{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.1rem;align-items:start;padding:1.25rem 1.4rem;border-radius:var(--r-m);
  background:linear-gradient(180deg,var(--signal-soft),transparent 140%);border:1px solid rgba(245,197,24,.35)}
.job-code{grid-row:span 3;font:400 3.2rem/.9 var(--display);color:var(--signal)}
.job-kind{font-size:.88rem;color:var(--muted)}
.job-name{font:700 1.35rem/1.2 var(--body);margin:0}
.job-line{margin:.15rem 0 0;color:#d9d3c6;font-size:.98rem}
.job-meta{grid-column:2;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:.6rem;font-size:.85rem;color:var(--muted)}

/* status pill */
.pill{display:inline-flex;align-items:center;gap:.4rem;font:500 .78rem/1 var(--body);padding:.35rem .6rem;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-building{color:var(--signal);border-color:rgba(245,197,24,.45)}
.pill-shipped,.pill-launched,.pill-paying{color:var(--paper);border-color:var(--paper)}
.pill-retired{color:var(--faint)}

/* CTA */
.cta{width:var(--wrap);margin:0 auto clamp(3rem,6vw,5rem);display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between;
  padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-m);background:var(--paper);color:var(--ink)}
.cta .h2{color:var(--ink);margin:0 0 .35rem}
.cta p{margin:0;max-width:52ch;color:#3b382f}
.cta .btn{background:var(--ink);color:var(--paper)}
.cta .btn:hover{box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cta-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cta-form input[type=text],.cta-form input[type=email]{font:inherit;padding:.85rem 1rem;border-radius:999px;border:1px solid #c9c3b5;background:#fff;min-width:12rem}
.cta-form label.consent{flex-basis:100%;font-size:.85rem;color:#3b382f;display:flex;gap:.5rem;align-items:flex-start}

/* sections */
.block{width:var(--wrap);margin:0 auto;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.block-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:1.5rem}
.block-head p{margin:0;color:var(--muted);max-width:52ch}
.h2{font:400 clamp(2.2rem,4.4vw,3.4rem)/1 var(--display);letter-spacing:.01em;margin:0}

/* app tiles */
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.tile{position:relative;min-height:118px;padding:.8rem .85rem;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:.2rem}
.tile-n{font:400 1.9rem/1 var(--display);color:var(--faint)}
.tile-name{font-weight:700;font-size:.98rem;line-height:1.25}
.tile-date{font-size:.78rem;color:var(--faint);margin-top:auto}
.tile-empty .tile-name{color:var(--faint);font-weight:500}
.tile.is-live{background:var(--panel-2);border-color:var(--line-2)}
.tile.is-live .tile-n{color:var(--paper)}
.tile.is-building{border-color:rgba(245,197,24,.55);background:linear-gradient(160deg,var(--signal-soft),var(--panel) 70%)}
.tile.is-building .tile-n{color:var(--signal)}
.tile.is-today:not(.is-building):not(.is-live){border-style:dashed;border-color:var(--line-2)}
.tile .pill{align-self:flex-start;margin-top:.35rem}
.tile a.tile-link{position:absolute;inset:0;border-radius:inherit}
.tile-links{display:flex;gap:.6rem;font-size:.8rem;position:relative;z-index:1}
.tile-links a{color:var(--signal)}
.more{margin-top:1rem;background:transparent;color:var(--paper);border:1px solid var(--line-2);font:500 .95rem/1 var(--body);padding:.8rem 1.2rem;border-radius:999px;cursor:pointer}
.more:hover{border-color:var(--paper)}

/* business weeks */
.weeks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.week{display:grid;grid-template-columns:5.5rem minmax(0,1fr) auto;gap:.25rem 1.5rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.week-n{font:400 2.4rem/1 var(--display);color:var(--faint)}
.week-name{font-weight:700;font-size:1.08rem}
.week-sub{font-size:.88rem;color:var(--muted)}
.week-empty .week-name{color:var(--faint);font-weight:500}
.week.is-building .week-n{color:var(--signal)}
.week.is-live .week-n{color:var(--paper)}

/* rules */
.rules{width:var(--wrap);margin:0 auto;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem 3rem}
.rules-list{list-style:none;margin:0;padding:0;counter-reset:r}
.rules-list li{counter-increment:r;display:grid;grid-template-columns:2.2rem 1fr;gap:.5rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
.rules-list li::before{content:counter(r);font:400 1.6rem/1 var(--display);color:var(--signal)}
.honesty{grid-column:2;margin:0;padding:1rem 1.2rem;border-left:3px solid var(--signal);background:var(--panel);border-radius:0 var(--r-s) var(--r-s) 0;color:#d9d3c6}

/* follow */
.follow{width:var(--wrap);margin:0 auto;padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.follow p{color:var(--muted);margin:.5rem 0 1.25rem}
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.social a{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--line-2);text-decoration:none;font-weight:500;font-size:.95rem}
.social a:hover{border-color:var(--paper)}
.social svg{width:18px;height:18px;fill:currentColor}
.social a.primary{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}

/* footer */
.foot{width:var(--wrap);margin:0 auto;padding:2rem 0 3rem;border-top:1px solid var(--line);font-size:.9rem;color:#c9c3b5}
.foot p{margin:.3rem 0}
.foot a{text-decoration-color:var(--signal);text-underline-offset:3px}
.noscript{width:var(--wrap);margin:1rem auto;color:var(--muted)}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .wall{max-width:520px}
  .rules{grid-template-columns:1fr}
  .honesty{grid-column:1}
}
@media (max-width:560px){
  body{font-size:1rem}
  .bar{padding:1rem 0}
  .score-cell{min-width:0;padding-right:.75rem}
  .score-cell + .score-cell{padding-left:.75rem}
  .score-num{font-size:2rem}
  .score-lbl{font-size:.78rem}
  .tiles{grid-template-columns:repeat(3,1fr);gap:.45rem}
  .tile{min-height:96px;padding:.6rem .65rem}
  .tile-n{font-size:1.6rem}
  .tile-name{font-size:.88rem}
  .tile .pill{font-size:.7rem;padding:.3rem .45rem}
  .week{grid-template-columns:3.4rem minmax(0,1fr);}
  .week .pill{grid-column:2;justify-self:start}
  .week-n{font-size:2rem}
  .cta .btn{width:100%}
  .job-code{font-size:2.6rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}