:root{
  --concrete:#2c2e30; --slab:#242628; --chalk:#ecebe4; --muted:#a3a5a7; --tape:#f2c230; --brick:#c1402f; --brick-d:#8f2c20;
  --manila:#dcc995; --manila-d:#c9b57e; --ink:#2a2218; --ok:#6fae6a;
  --display:"Big Shoulders Stencil Display","Impact","Arial Narrow",sans-serif;
  --text:"Archivo","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--concrete);color:var(--chalk);font:400 1rem/1.55 var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:var(--tape)} a:hover{color:#fff}
:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:.02em;line-height:1;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:clamp(2.6rem,7vw,5rem)} h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:2.2em} h2.small{font-size:1.4rem;margin-top:1.6em}
p{margin:.4em 0 1em;max-width:62ch}
code{background:var(--slab);color:var(--chalk);padding:.1em .45em;border-radius:3px;font-size:.92em}
.wrap{width:min(1120px,100% - 32px);margin:0 auto;padding:36px 0 24px}
.narrow{width:min(620px,100% - 32px)}

.tape{height:14px;background:repeating-linear-gradient(-45deg,var(--tape) 0 18px,#171717 18px 36px)}
.top{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between;width:min(1120px,100% - 32px);margin:0 auto;padding:18px 0;border-bottom:2px solid #444649}
.brand{font:900 2rem/1 var(--display);color:var(--chalk);text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
.brand{display:flex;flex-wrap:wrap;gap:0 .4em}
.brand span{color:var(--brick)}
.top nav{display:flex;gap:22px;flex-wrap:wrap}
.top nav a{color:var(--chalk);text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--tape)}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:56px;align-items:start;padding-top:48px}
.pitch h1{color:var(--chalk)}
.lede{font-size:1.15rem;color:#d8d7cf;max-width:52ch}
.counts{display:flex;flex-wrap:wrap;gap:12px 36px;margin:28px 0 8px}
.counts div{border-left:4px solid var(--brick);padding-left:12px}
.counts dt{color:var(--muted);font-size:.9rem} .counts dd{margin:0;font:900 2rem/1.1 var(--display);letter-spacing:.02em}

.wanted{list-style:none;padding:0;margin:0 0 8px;max-width:520px;counter-reset:w}
.wanted li{display:grid;grid-template-columns:2.2rem 1fr auto auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px dashed #55585b;counter-increment:w}
.wanted li::before{content:counter(w);font:900 1.5rem/1 var(--display);color:var(--tape)}
.wanted b{font-weight:700} .wanted span{color:var(--muted)} .wanted em{font-style:normal;font-weight:600}
.empty{color:var(--muted);border-left:4px solid #55585b;padding-left:14px}
.link{font-weight:600}

/* the manila folder: sign in / register */
.folder{position:relative;margin-top:8px}
.tabs{display:flex;gap:6px;padding-left:18px}
.tabs a{background:var(--manila-d);color:#4b3f27;text-decoration:none;font-weight:700;padding:9px 22px;border-radius:8px 8px 0 0;transform:translateY(2px)}
.tabs a.on{background:var(--manila);color:var(--ink)}
.folder-body{background:var(--manila);color:var(--ink);padding:28px 28px 26px;border-radius:0 6px 6px 6px;box-shadow:0 18px 0 -8px #00000040,0 22px 40px #0006;
  background-image:linear-gradient(transparent 31px,#0000000f 32px);background-size:100% 32px}
.folder-body h2{margin-top:0;color:var(--ink)}
.folder label{display:block;font-weight:700;margin:0 0 16px}
.folder input,.inline-form input{display:block;width:100%;margin-top:6px;padding:11px 12px;font:inherit;color:var(--ink);background:#f6efd9;border:2px solid #8a7a52;border-radius:3px}
.folder input:focus{border-color:var(--brick);outline:none;box-shadow:0 0 0 3px #c1402f40}
.folder small,.folder .hint{display:block;font-weight:400;color:#5c4f33;margin-top:4px}
.folder .hint{margin-top:14px;font-size:.92rem}

.btn{display:inline-block;background:var(--brick);color:#fff;border:0;border-radius:3px;padding:12px 26px;font:900 1.15rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--brick-d)}
.btn:hover{background:#d24a38;color:#fff} .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brick-d)}

.note{padding:10px 14px;border-radius:3px;margin:0 0 16px;font-weight:600;max-width:none}
.note.bad{background:#5b1f19;color:#ffd9d2;border-left:5px solid var(--brick)}
.note.ok{background:#1f4020;color:#d4f2d0;border-left:5px solid var(--ok)}
.folder-body .note.bad{background:#f2c9bf;color:#6b1a10} .folder-body .note.ok{background:#d6e8c3;color:#1f4020}

.how{padding-top:8px} .steps{max-width:62ch;padding-left:1.3rem} .steps li{margin:.4em 0;padding-left:.3em}

/* case file */
.dossier{position:relative;background:var(--manila);color:var(--ink);padding:34px 30px 22px;border-radius:0 8px 8px 8px;margin-top:34px;box-shadow:0 20px 40px #0006}
.dossier-tab{position:absolute;top:-30px;left:0;background:var(--manila);padding:5px 22px;border-radius:8px 8px 0 0;font:900 1.1rem/1.5 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--brick-d)}
.dossier h1{margin-bottom:.3em;color:var(--ink);word-break:break-all}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 24px;margin:0 0 12px}
.facts div{border-top:2px solid #0004;padding-top:6px}
.facts dt{font-size:.86rem;color:#5c4f33} .facts dd{margin:0;font-weight:700;font-size:1.15rem}
.dossier .hint{color:#5c4f33}
.hint{color:var(--muted);font-size:.92rem;margin:.3em 0 .8em}

.mugs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,470px),1fr));gap:26px}
.mug{display:flex;gap:0;background:var(--slab);border:2px solid #4a4d50;border-radius:4px;overflow:hidden}
.chart{position:relative;flex:0 0 82px;background:#d8d4c6;border-right:3px solid #111;min-height:420px;
  background-image:repeating-linear-gradient(to top,#0000 0 19px,#00000030 19px 20px)}
.chart i{position:absolute;left:0;right:0;font:700 .72rem/1 var(--text);font-style:normal;color:#222;border-top:2px solid #222;padding:1px 6px}
.chart .you{position:absolute;left:0;right:0;height:0;border-top:5px solid var(--brick);box-shadow:0 0 0 2px #fff8}
.chart .you::after{content:"";position:absolute;right:-1px;top:-14px;border:7px solid transparent;border-bottom:0;border-top:9px solid var(--brick);transform:rotate(90deg)}
.mug-body{padding:20px 22px;flex:1;min-width:0}
.mug h3{font-size:2rem;margin-bottom:.1em;word-break:break-word}
.sub{color:var(--tape);font-weight:700;margin:0 0 12px}
.bar{height:12px;background:#111;border:2px solid #555;border-radius:2px;overflow:hidden}
.bar span{display:block;height:100%;background:repeating-linear-gradient(-45deg,var(--tape) 0 8px,#d8a90e 8px 16px)}
.facts.tight{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px 18px;margin-top:16px}
.facts.tight div{border-color:#55585b} .facts.tight dt{color:var(--muted)} .facts.tight dd{font-size:1.05rem}

.table-wrap{overflow-x:auto;margin-top:14px}
.sheet{width:100%;border-collapse:collapse;min-width:620px}
.sheet th{text-align:left;font-weight:700;color:var(--muted);padding:10px 12px;border-bottom:3px solid var(--tape)}
.sheet td{padding:10px 12px;border-bottom:1px dashed #55585b}
.sheet tbody tr:nth-child(-n+3) td:first-child{font:900 1.4rem/1 var(--display);color:var(--tape)}

.inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:end;max-width:900px}
.inline-form label{font-weight:700} .inline-form input{background:#1b1c1e;color:var(--chalk);border-color:#5a5d60}
.inline-form .btn{justify-self:start}

.bottom{width:min(1120px,100% - 32px);margin:48px auto 0;padding:20px 0 40px;border-top:2px solid #444649;color:var(--muted);font-size:.9rem}
.bottom p{margin:0}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:36px}
  .chart{flex-basis:64px;min-height:380px}
  .mug{flex-direction:row}
}
@media (prefers-reduced-motion:no-preference){
  .folder-body{animation:slide .45s cubic-bezier(.2,.8,.2,1) both}
  @keyframes slide{from{transform:translateY(18px) rotate(-.6deg);opacity:0}to{transform:none;opacity:1}}
}