/* v4: one calm menu, more air, fewer boxes */
.sitenav{display:none!important}
.wrap{gap:40px!important}
.panel{box-shadow:0 1px 2px var(--shadow)!important}
.top{position:relative; display:flex; align-items:center; gap:16px; padding-bottom:12px; border-bottom:2px solid var(--ink)}
.brand{display:flex; flex-direction:column; text-decoration:none; color:var(--ink); margin-right:auto; line-height:1.1}
.brand-co{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stamp)}
.brand-nm{font-family:var(--display); font-size:22px}
.topnav{display:none}
.topnav a,.menunav a{color:var(--ink); text-decoration:none; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase}
.topnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--stamp)}
.menu > summary{list-style:none; cursor:pointer; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  border:2px solid var(--ink); border-radius:3px; padding:8px 14px; background:var(--panel)}
.menu > summary::-webkit-details-marker{display:none}
.menu[open] > summary{background:var(--ink); color:var(--panel)}
.menunav{position:absolute; right:0; left:0; top:calc(100% + 8px); z-index:20; display:flex; flex-direction:column; background:var(--panel);
  border:2px solid var(--ink); border-radius:4px; box-shadow:0 14px 34px var(--shadow)}
.menunav a{padding:14px 16px; border-bottom:1px solid var(--rule); font-size:14px}
.menunav a:last-child{border-bottom:0}
.menunav a[aria-current="page"]{color:var(--stamp)}
@media (min-width:900px){ .topnav{display:flex; flex-wrap:wrap; gap:6px 20px} .menu{display:none} }
footer{gap:10px!important}
.footlinks{display:flex; flex-wrap:wrap; gap:6px 18px}
.footlinks a{font-weight:700}

/* home */
#modes[hidden] ~ #lobby{display:none}
.lobby{display:flex; flex-direction:column; gap:14px; max-width:940px}
.lobby h2{font-size:clamp(24px,4vw,30px)}
.tiles{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:640px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1.5px solid var(--rule); border-radius:6px; background:var(--panel); color:var(--ink); text-decoration:none}
.tile:hover{border-color:var(--ink)}
.tt{font-family:var(--display); font-size:21px; line-height:1.15}
.td{font-size:15px; color:var(--muted)}
.next{display:grid!important; grid-template-columns:minmax(0,1fr); gap:10px!important; max-width:640px}
.next .btn.trlink{background:transparent; color:var(--ink); border:1.5px solid var(--rule); text-align:left; font-family:var(--body); font-size:16px; letter-spacing:0; padding:12px 14px; margin:0}

/* type pages */
.file{display:flex; flex-direction:column; gap:10px; max-width:760px}
.fileh{font-size:clamp(24px,4vw,30px)}
details.sec{border:1px solid var(--rule); border-radius:6px; background:var(--panel)}
details.sec > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; padding:15px 16px; font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase}
details.sec > summary::-webkit-details-marker{display:none}
details.sec > summary::after{content:"+"; margin-left:auto; font-size:20px; color:var(--stamp)}
details.sec[open] > summary::after{content:"\2212"}
.secn{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--manila); color:var(--ink); font-size:12px; flex:none}
.secb{padding:0 16px 18px; display:flex; flex-direction:column; gap:12px}
.story{display:flex; gap:16px; align-items:center; max-width:760px}
.storythumb{width:96px; height:auto; aspect-ratio:1080/1920; border-radius:4px; border:1px solid var(--rule); background:#F4F1E8; flex:none}
.callout{border-left:4px solid var(--stamp); background:var(--panel); padding:16px 18px; border-radius:0 6px 6px 0; display:flex; flex-direction:column; gap:12px; max-width:760px}
.callout h3{color:var(--stamp)}
a.more{color:var(--stamp); font-weight:700}

/* staff directory */
.jump{display:flex; flex-wrap:wrap; gap:8px}
.jump a{padding:7px 13px; border:1.5px solid var(--rule); border-radius:999px; background:var(--panel); color:var(--ink); text-decoration:none; font-weight:700; font-size:14.5px}
.dept{display:flex; flex-direction:column; gap:12px; scroll-margin-top:16px}
.deptnote{color:var(--muted); max-width:62ch}
.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:760px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
.staffcard{border:1.5px solid var(--rule); border-radius:6px; background:var(--panel)}
.staffcard[open]{border-color:var(--ink)}
.staffcard > summary{cursor:pointer; list-style:none; display:flex; flex-direction:column; gap:3px; padding:14px 16px}
.staffcard > summary::-webkit-details-marker{display:none}
.sname{font-family:var(--display); font-size:22px; line-height:1.15; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sdiv{font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--stamp)}
.smotto{font-style:italic; color:var(--muted); font-size:15.5px}
.qtag{font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--manila); color:var(--ink); padding:2px 7px; border-radius:3px}
.traits{margin:0; padding:0 16px; display:flex; flex-direction:column; gap:2px}
.traits dt{font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.traits dd{margin:0}
.staffcard .kid,.solo .kid{font-family:var(--kid); color:var(--stamp); font-size:28px; transform:rotate(-2deg); display:inline-block; margin:8px 16px 4px}
.solo .kid{margin-left:0}
.staffcard > p{margin:0 16px 14px}
.solo{border-left:4px solid var(--manila); padding:4px 0 4px 16px; display:flex; flex-direction:column; gap:8px; max-width:62ch}
.solo .sname{font-size:24px}
.rule{font-weight:700}
.care{border-left:4px solid var(--stamp); padding:10px 14px; background:var(--panel); border-radius:0 6px 6px 0; max-width:62ch; font-size:15.5px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px}
.btn.ghostlink{background:transparent; color:var(--ink)}
.credit{max-width:62ch}

/* clear */
.wl{max-width:560px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
input[type="email"]{font:inherit; font-size:16px; color:var(--ink); background:var(--field); border:1px solid var(--rule); border-radius:3px; padding:9px 10px; width:100%}
.aside{font-family:var(--display); font-size:17px; color:var(--muted)}
#out details.sec{max-width:760px}
#out details.hotsec{border:2.5px solid var(--stamp)}
#out details.hotsec > summary{color:var(--stamp)}

/* v5: the crew */
.aka{font-size:15px; color:var(--muted)}
.crew{display:flex; flex-direction:column; gap:12px; max-width:760px}
.roster{display:flex; flex-direction:column; gap:8px}
.rc{border:1.5px solid var(--rule); border-radius:8px; background:var(--panel)}
.rc.lead{border:2.5px solid var(--stamp)}
.rc > summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:13px 16px}
.rc > summary::-webkit-details-marker{display:none}
.rrole{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.rc.lead .rrole{color:var(--stamp)}
.rname{font-family:var(--display); font-size:22px; line-height:1.15}
.rdiv{font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--stamp)}
.rbar{display:block; height:6px; background:var(--rule); border-radius:3px; margin-top:8px; overflow:hidden}
.rbar i{display:block; height:100%; background:var(--stamp); border-radius:3px}
.rfacts{margin:0; padding:0 16px; display:flex; flex-direction:column}
.rfacts dt{font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.rfacts dd{margin:0}
.rkid{font-family:var(--kid); color:var(--stamp); font-size:28px; transform:rotate(-2deg); margin:10px 16px 2px}
.rmore{display:inline-block; margin:6px 16px 14px; color:var(--stamp); font-weight:700}
.desk{border-left:4px solid var(--manila); background:var(--panel); padding:14px 16px; border-radius:0 8px 8px 0; display:flex; flex-direction:column; gap:8px}
.cs{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--ink); line-height:1.7}

/* v5.1: How this works pop-ups */
.howbtn{background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:999px; padding:7px 14px; font-size:13px}
.howdlg{max-width:min(560px, calc(100vw - 32px)); width:100%; border:2px solid var(--ink); border-radius:8px; background:var(--panel); color:var(--ink); padding:0}
.howdlg::backdrop{background:rgba(20,18,14,.55)}
.howdlg form{display:flex; flex-direction:column; gap:14px; padding:22px 20px}
.howdlg h2{font-family:var(--display); font-weight:400; font-size:26px; line-height:1.15; outline:none}
.howdlg p{margin:0}
.howsteps{margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:8px}
.howsteps li::marker{font-family:var(--mono); font-weight:700; color:var(--stamp)}
.howdlg button[type=submit]{align-self:flex-start}

/* v6: hooks */
.seen{font-family:var(--display); font-size:clamp(22px,4.6vw,30px); line-height:1.2; color:var(--stamp); margin:2px 0 0}
.cost{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--muted)}
.wb{font-family:var(--mono); font-weight:700; font-size:13.5px; color:var(--stamp); max-width:760px}
.teaser{position:relative; max-width:560px; border:2px solid var(--ink); background:var(--panel); border-radius:4px; padding:22px 18px 12px; display:flex; flex-direction:column; gap:6px; margin-top:6px}
.ttab{position:absolute; top:-13px; left:14px; background:var(--manila); border:2px solid var(--ink); border-bottom:none; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; padding:2px 9px; border-radius:3px 3px 0 0}
.teaser p{font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.teaser i{display:inline-block; height:15px; background:var(--redact); border-radius:2px}
.teaser .bar1{width:150px} .teaser .bar2{width:96px} .teaser .bar3{width:120px} .teaser .bar4{width:70px}
.tnote{font-family:var(--mono); font-weight:700; font-size:12.5px; color:var(--stamp); letter-spacing:.04em}
.qloop{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--stamp); margin:0}
.insight{border:2.5px solid var(--stamp); background:var(--panel); border-radius:8px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; max-width:760px}
.insight .ins{font-family:var(--display); font-size:clamp(22px,4.4vw,28px); line-height:1.25}
.insight .insb{color:var(--muted); font-style:italic}
.editcrew{border:1.5px dashed var(--rule); border-radius:8px; background:var(--panel)}
.editcrew > summary{cursor:pointer; padding:12px 16px; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.04em}
.ecbody{padding:0 16px 16px; display:flex; flex-direction:column; gap:12px}
.chip input[type=checkbox]{position:absolute; opacity:0; width:1px; height:1px}
.crewcardwrap{display:flex; flex-direction:column; gap:8px; max-width:420px}
.memo{border-left:4px solid var(--stamp); background:var(--panel); padding:14px 16px; border-radius:0 8px 8px 0; display:flex; flex-direction:column; gap:10px}
.memo .btn{align-self:flex-start}
.tonight{border:2px solid var(--ink); background:var(--panel); border-radius:8px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; max-width:760px}
.tonight h3{color:var(--stamp)}

/* v7: The Desk */
#dkflow,#dkout{display:flex; flex-direction:column; gap:14px; max-width:680px}
#dkflow[hidden],#dkout[hidden],#dkhead[hidden]{display:none}
.dk-prog{height:6px; background:var(--rule); border-radius:3px; overflow:hidden}
.dk-prog i{display:block; height:100%; background:var(--stamp); transition:width .2s}
#dkq{font-size:clamp(26px,5vw,34px); outline:none}
.dk-hint{color:var(--muted)}
.dk-chips{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
@media (min-width:560px){ .dk-chips{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dk-chip{display:flex; flex-direction:column; gap:2px; text-align:left; background:var(--panel); color:var(--ink); border:1.5px solid var(--rule); border-radius:8px; padding:12px 14px; font:inherit; cursor:pointer; text-transform:none; letter-spacing:0}
.dk-chip.on{border:2.5px solid var(--stamp); background:var(--panel); padding:11px 13px}
.dk-l{font-weight:700; font-size:16.5px}
.dk-chip.on .dk-l::after{content:" ✓"; color:var(--stamp)}
.dk-d{font-size:14.5px; color:var(--muted); font-weight:400}
.dk-lab{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:14px; display:block}
.dk-in{font:inherit; font-size:16px; color:var(--ink); background:var(--field); border:1px solid var(--rule); border-radius:4px; padding:10px 12px; width:100%; margin-top:6px}
.dk-ta{line-height:1.5}
.dk-brad{border:2.5px solid var(--ink); background:var(--panel); border-radius:8px; padding:16px 18px}
.dk-bn{font-family:var(--display); font-size:28px; line-height:1.1; margin:2px 0 8px}
.dk-brad dl,.dk-rl{margin:0; display:flex; flex-direction:column}
.dk-brad dt,.dk-rl dt{font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:10px}
.dk-brad dd,.dk-rl dd{margin:0}
.dk-under{color:var(--muted); margin:10px 0}
.dk-nav{justify-content:space-between}
.dk-report{position:relative; border:2.5px solid var(--ink); background:var(--panel); border-radius:6px; padding:0 20px 20px; display:flex; flex-direction:column; gap:12px}
.dk-rh{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; background:var(--ink); color:var(--panel); margin:0 -20px; padding:10px 20px; font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.1em; border-radius:3px 3px 0 0}
.dk-stamp{align-self:flex-end; border:3px solid var(--stamp); color:var(--stamp); font-family:var(--mono); font-weight:700; letter-spacing:.14em; padding:3px 12px; transform:rotate(4deg); margin:6px 0 -8px}
.dk-report h2{font-size:clamp(24px,5vw,30px)}
.dk-words{border-left:4px solid var(--stamp); padding:6px 0 6px 14px}
.dk-words p:last-child{font-size:18px}
.dk-assess{color:var(--muted)}
.dk-kid{font-family:var(--kid); color:var(--stamp); font-size:40px; transform:rotate(-3deg); align-self:flex-start; line-height:1}
.dk-try{border-top:1.5px solid var(--rule); padding-top:10px}
.dk-site{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
@media print{
  .top, footer, .dk-act, #dkout .fine, #dkcm{display:none!important}
  body{background:#fff!important}
  .wrap{padding:0!important; gap:0!important}
  .dk-report{border-color:#000; break-inside:avoid}
  .dk-rh{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
#dkout .fine a{color:var(--stamp); font-weight:700}

/* v8: polish */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
#modes{scroll-margin-top:16px}
.brand-nm{white-space:nowrap}
.topnav a{padding:6px 2px}
.btn,button{transition:transform .08s ease, box-shadow .12s ease, background-color .12s ease}
.btn:active,button:active{transform:translateY(1px)}
.hero{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:center}
.heroside{display:flex; flex-direction:column; gap:16px}
.bradpic img{display:block; width:100%; height:auto; border:2px solid var(--ink); border-radius:6px; background:var(--panel)}
.herocta{gap:10px; margin-top:4px}
.herocta[hidden]{display:none}
.herocta .btn.big{font-size:17px; padding:14px 22px}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px}
  .hero h1{font-size:clamp(48px,5.4vw,68px)}
  .wrap{gap:48px!important}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  #dkhead .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.crumb{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:-12px 0}
.crumb a{color:var(--stamp)}
.hubh{font-size:clamp(22px,4vw,28px); margin-top:22px}
#dkhead .tiles{max-width:760px}
.about{display:flex; flex-direction:column; gap:12px; max-width:680px}
.about h2{font-size:clamp(22px,4vw,28px); margin-top:14px}
.aboutkid{font-family:var(--kid); color:var(--stamp); font-size:40px; transform:rotate(-3deg); align-self:flex-start; line-height:1}
.footlinks{gap:6px 16px}
.footlinks a{font-weight:700; font-size:14.5px}

/* v8.2: Brad's picture */
.bradpic{margin:0; display:flex; align-items:center; gap:14px; max-width:560px}
.bradpic img{width:104px; height:104px; flex:none; border:2px solid var(--ink); border-radius:6px; background:var(--panel); display:block}
.bradpic figcaption{display:flex; flex-direction:column; gap:3px}
.bp-n{font-family:var(--mono); font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase}
.bp-t{font-family:var(--mono); font-size:12.5px; color:var(--stamp); font-weight:700}
@media (min-width:900px){
  .heroside .bradpic{flex-direction:column; align-items:stretch; gap:0; max-width:none; border:2px solid var(--ink); border-radius:6px; overflow:hidden; background:var(--panel)}
  .heroside .bradpic img{width:100%; height:auto; border:0; border-radius:0}
  .heroside .bradpic figcaption{padding:10px 14px; border-top:2px solid var(--ink)}
}