/* Spin Cycle Washhouse — Neo-Brutalist Poster laundromat */
@font-face{
  font-family:"Oswald"; src:url("assets/oswald.ttf") format("truetype");
  font-weight:400 700; font-display:swap;
}
@font-face{
  font-family:"Work Sans"; src:url("assets/work-sans.ttf") format("truetype");
  font-weight:400 700; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono"; src:url("assets/ibm-plex-mono.ttf") format("truetype");
  font-weight:400 600; font-display:swap;
}

:root{
  --bg:#FFF8E7; --surface:#FFFDF4; --ink:#141414; --muted:#5b5344;
  --accent:#FF4911; --blue:#2436FF; --gold:#E8A50C; --mint:#2EC4B6; --pink:#FF4365;
  --accent-ink:#141414; --line:3px solid var(--ink);
  --shadow:8px 8px 0 var(--ink); --shadow-sm:5px 5px 0 var(--ink);
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Work Sans",Verdana,system-ui,sans-serif; font-size:17px; line-height:1.6;
  background-image:radial-gradient(#14141414 1.2px, transparent 1.2px);
  background-size:22px 22px;
  overflow-x:clip;
}
h1,h2,h3,.display{font-family:"Oswald","Arial Narrow",Impact,system-ui,sans-serif; text-transform:uppercase; line-height:.95; letter-spacing:-.01em;}
.mono,.kicker,.fig,.ticket-strip,.open-sign,.deck-readout,.d-meta,.toast{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;}
a{color:var(--blue); text-underline-offset:3px;}
:focus{outline:3px solid var(--blue); outline-offset:2px;}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}

.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:12px 18px; z-index:99; border-radius:8px; min-height:44px;}
.skip:focus{top:12px; color:#fff;}

/* ticker */
.ticker{background:var(--ink); color:var(--bg); overflow:clip; border-bottom:var(--line); white-space:nowrap;}
.ticker-track{display:inline-block; padding:10px 0; font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.1em; animation:tick 28s linear infinite;}
.ticker-track span{margin-right:2.5rem;}
@keyframes tick{to{transform:translateX(-50%)}}

/* topbar */
.topbar{display:flex; align-items:center; gap:16px; padding:14px 24px; background:var(--bg); border-bottom:var(--line); position:sticky; top:0; z-index:30;}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-family:"Oswald",sans-serif; font-size:22px; text-transform:uppercase; min-height:44px;}
.brand-word em{display:block; font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:11px; letter-spacing:.22em; color:var(--muted);}
.brand-drum{width:46px; height:46px; border:var(--line); border-radius:50%; background:var(--gold); position:relative; overflow:hidden; flex:none; animation:drum 9s linear infinite;}
.brand-drum .brand-sock{position:absolute; border-radius:40% 60% 55% 45%; border:2.5px solid var(--ink);}
.s1{width:22px; height:14px; background:var(--accent); top:8px; left:6px; transform:rotate(-20deg);}
.s2{width:18px; height:12px; background:var(--blue); bottom:9px; left:12px; transform:rotate(14deg);}
.s3{width:14px; height:14px; background:var(--surface); top:16px; right:5px;}
@keyframes drum{to{transform:rotate(360deg)}}
.topbar nav{display:flex; gap:4px; margin-left:auto; overflow-x:auto; padding-inline-end:24px;}
.topbar nav a{padding:10px 14px; min-height:44px; display:inline-flex; align-items:center; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border:2px solid transparent; border-radius:10px; white-space:nowrap;}
.open-sign{font-size:12px; letter-spacing:.14em; border:var(--line); border-radius:999px; padding:8px 14px; background:var(--mint); white-space:nowrap; margin:0;}
.blink{display:inline-block; width:10px; height:10px; border-radius:50%; background:#0a7b2e; margin-right:6px; animation:blink 1.2s steps(2) infinite;}
@keyframes blink{50%{opacity:.25}}

/* hero */
.hero{border-bottom:var(--line); padding:64px 24px 72px; overflow:clip; position:relative;}
.kicker{font-size:12px; letter-spacing:.18em; margin:0 0 8px; background:var(--ink); color:var(--bg); display:inline-block; padding:8px 14px; transform:rotate(-1.5deg);}
#h1{margin:0; font-size:clamp(56px,11vw,168px);}
.h1-small{display:block; font-size:clamp(20px,3vw,38px); letter-spacing:.3em; color:var(--accent); -webkit-text-stroke:0;}
.h1-huge{display:block; animation:drop .5s cubic-bezier(0.22,1,0.36,1) both;}
@keyframes drop{from{transform:translateY(26px); opacity:0}}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; margin-top:28px; align-items:start;}
.lede{font-size:19px; max-width:56ch; margin:0 0 20px;}
.lede strong{background:var(--gold); padding:0 6px; border:2px solid var(--ink);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:600; letter-spacing:.04em; text-decoration:none; color:var(--ink); background:var(--surface); border:var(--line); border-radius:12px; padding:14px 22px; min-height:48px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform 160ms cubic-bezier(0.22,1,0.36,1), box-shadow 160ms;}
.btn.primary{background:var(--accent); color:var(--ink);}
.btn.ghost{background:var(--surface);}
.howto{font-size:14px; color:var(--muted); max-width:60ch; margin:0;}
.howto b{color:var(--ink);}

/* washer illustration */
.hero-machine{display:flex; flex-direction:column; align-items:center; gap:0; position:relative;}
.washer{border:4px solid var(--ink); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); width:min(360px,100%); transform:rotate(2deg);}
.washer-top{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:var(--line); font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em;}
.knobs i{display:inline-block; width:16px; height:16px; border:2.5px solid var(--ink); border-radius:50%; background:var(--gold); margin-left:6px;}
.porthole{padding:22px; display:grid; place-items:center; background:repeating-linear-gradient(0deg,#f3ead2 0 10px,#efe3c8 10px 20px);}
.drum{width:210px; height:210px; border:4px solid var(--ink); border-radius:50%; background:#bfe3ff; position:relative; overflow:hidden; animation:drum 7s linear infinite;}
.garment{position:absolute; border:3px solid var(--ink); border-radius:46% 54% 52% 48%;}
.g1{width:74px; height:52px; background:var(--accent); top:34px; left:30px; transform:rotate(-18deg);}
.g2{width:60px; height:60px; background:var(--surface); bottom:30px; right:34px;}
.g3{width:52px; height:36px; background:var(--pink); bottom:44px; left:36px; transform:rotate(12deg);}
.g4{width:40px; height:40px; background:var(--gold); top:52px; right:44px; border-radius:50%;}
.water{position:absolute; inset:auto -10px -34px -10px; height:90px; background:#2436ff33; border-top:3px solid var(--ink); border-radius:50% 50% 0 0;}
.washer-base{border-top:var(--line); padding:10px 16px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; display:flex; gap:8px; align-items:center;}
.cycle-light{width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid var(--ink); animation:blink 1s steps(2) infinite;}
.hero-numeral{font-family:"Oswald",sans-serif; font-size:clamp(64px,7vw,110px); line-height:1; margin:14px 0 0; background:var(--blue); color:#fff; border:var(--line); border-radius:16px; box-shadow:var(--shadow-sm); padding:6px 22px; transform:rotate(-2deg);}
.hero-numeral .pct{font-size:18px; font-family:"IBM Plex Mono",monospace; letter-spacing:.12em; display:block;}

/* sections */
section{padding:64px 24px;}
section h2{font-size:clamp(28px,4vw,46px); margin:0 0 6px;}
.fig{font-family:"IBM Plex Mono",monospace; font-size:14px; letter-spacing:.14em; background:var(--ink); color:var(--bg); padding:4px 10px; margin-right:10px; vertical-align:middle;}

/* machines */
.machines{background:var(--ink); color:var(--bg); border-top:var(--line); border-bottom:var(--line);}
.machines h2{color:var(--bg);}
.machine-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:26px;}
.machine{background:var(--bg); color:var(--ink); border:3px solid #000; outline:3px solid var(--bg); border-radius:16px; padding:18px 16px 16px; text-align:left; cursor:pointer; min-height:150px; display:flex; flex-direction:column; gap:8px; box-shadow:6px 6px 0 #ffffff2e; font-family:inherit; transition:transform 160ms cubic-bezier(0.22,1,0.36,1);}
.machine .m-name{font-family:"Oswald",sans-serif; text-transform:uppercase; font-size:20px; line-height:1;}
.machine .m-count{font-family:"Oswald",sans-serif; font-size:52px; line-height:1;}
.machine .m-hint{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; color:var(--muted);}
.machine[data-status="todo"]{background:#BFE3FF;}
.machine[data-status="in-progress"]{background:var(--gold);}
.machine[data-status="blocked"]{background:#FF9AAE;}
.machine[data-status="done"]{background:#B9F0C9;}
.machine[aria-pressed="true"]{outline:4px solid var(--accent); transform:translate(-2px,-2px);}
.machine:active{transform:scale(.97);}

/* deck */
.deck-panel{border:var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); padding:24px; display:grid; grid-template-columns:1.4fr 1fr; gap:20px; margin-top:24px; transform:rotate(-.4deg);}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;}
.field input,.field select{font-size:16px; font-family:inherit; padding:14px 16px; border:var(--line); border-radius:10px; background:#fff; min-height:52px; width:100%;}
.deck-readout{grid-column:1/-1; margin:0; font-size:14px; letter-spacing:.04em; border-top:2px dashed var(--ink); padding-top:14px;}

/* loads */
.floor-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;}
.floor-sub{color:var(--muted); margin:0;}
.loads{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px;}
.load{border:var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden; transition:transform 180ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms;}
.load-top{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:var(--line); font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em;}
.status-todo .load-top{background:#BFE3FF;}
.status-in-progress .load-top{background:var(--gold);}
.status-blocked .load-top{background:#FF9AAE;}
.status-done .load-top{background:#B9F0C9;}
.load-body{padding:18px 18px 8px;}
.load-body h3{margin:0 0 8px; font-size:24px;}
.load-body .sum{margin:0 0 12px; font-size:15.5px; color:#33302a;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; padding:0; list-style:none;}
.chips li{font-family:"IBM Plex Mono",monospace; font-size:12px; border:2px solid var(--ink); border-radius:999px; padding:4px 10px; background:#fff;}
.chip-pri-high{background:var(--accent) !important; color:var(--ink);}
.stamp{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; border:2.5px solid var(--accent); color:#B22A00; border-radius:8px; padding:3px 9px; transform:rotate(-4deg); margin-bottom:10px; font-weight:600;}
.load-foot{margin-top:auto; padding:12px 18px 18px; display:flex; gap:10px; align-items:center; justify-content:space-between; border-top:2px dashed var(--ink);}
.load-foot .who{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted);}
.open-btn{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px; border:var(--line); background:var(--ink); color:#fff; border-radius:10px; padding:12px 18px; min-height:48px; cursor:pointer; transition:transform 150ms cubic-bezier(0.22,1,0.36,1), background 150ms;}
.open-btn:active{transform:scale(.97);}

/* empty */
.empty{border:var(--line); border-radius:18px; background:var(--ink); color:var(--bg); padding:56px 28px; text-align:center; margin-top:28px; box-shadow:var(--shadow);}
.empty-big{font-family:"Oswald",sans-serif; font-size:clamp(40px,6vw,72px); text-transform:uppercase; margin:0;}
.empty p{margin:8px 0 20px;}
.empty .btn.primary{box-shadow:5px 5px 0 #ffffff44;}
[hidden]{display:none !important;}

/* lost + footer */
.lost{background:var(--gold); border-top:var(--line); border-bottom:var(--line);}
.lost p{max-width:70ch; font-size:18px;}
footer{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:28px 24px 60px; font-family:"IBM Plex Mono",monospace; font-size:13px;}

/* dialog / detail */
dialog{border:var(--line); border-radius:20px; padding:0; width:min(620px,calc(100vw - 32px)); box-shadow:12px 12px 0 var(--ink);}
dialog::backdrop{background:#141414aa;}
#detailArticle{padding:0;}
.d-head{background:var(--surface); border-bottom:var(--line); padding:22px 26px 18px;}
.ticket-strip{margin:0 0 10px; font-size:12px; letter-spacing:.14em; background:var(--ink); color:var(--bg); display:inline-block; padding:6px 12px; border-radius:6px;}
.d-head h2{font-size:clamp(30px,5vw,44px); margin:0 0 10px;}
.d-meta{display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px;}
.d-meta span{border:2px solid var(--ink); border-radius:999px; padding:4px 11px; background:#fff;}
.d-body{padding:22px 26px; font-size:16.5px;}
.d-body p{margin:0 0 14px; max-width:62ch;}
.d-controls{border-top:var(--line); padding:20px 26px 26px; background:#F6EEDA; border-radius:0 0 17px 17px;}
.saved-note{margin:12px 0 0; font-size:14px; font-weight:600; background:#B9F0C9; border:2px solid var(--ink); border-radius:8px; padding:10px 14px;}
.d-btns{display:flex; gap:12px; margin-top:16px;}

/* toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) rotate(-1deg); background:var(--ink); color:var(--bg); border:3px solid var(--bg); outline:3px solid var(--ink); border-radius:12px; padding:14px 22px; font-family:"IBM Plex Mono",monospace; font-size:14px; z-index:60; max-width:min(520px,calc(100vw - 32px)); box-shadow:6px 6px 0 #00000055;}

/* hover / focus / active states */
@media (hover:hover) and (pointer:fine){
  .topbar nav a:hover{background:var(--ink); color:var(--bg);}
  .brand:hover .brand-drum{transform:rotate(24deg);}
  .btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
  .machine:hover{transform:translate(-3px,-3px) rotate(-.5deg);}
  .load:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink);}
  .open-btn:hover{background:var(--accent);}
  .load-body h3:hover{color:var(--blue);}
  footer a:hover{background:var(--gold);}
}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.topbar nav a:focus-visible,.btn:focus-visible,.machine:focus-visible,.open-btn:focus-visible,.load:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
.load:focus-within{box-shadow:8px 8px 0 var(--blue);}
.btn:active,.machine:active,.open-btn:active{transform:scale(.97);}

@media (max-width:760px){
  section{padding:48px 16px;}
  .hero{padding:48px 16px 56px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-machine{order:-1;}
  .washer{width:min(300px,100%); transform:rotate(0deg);}
  .drum{width:170px; height:170px;}
  .machine-row{grid-template-columns:1fr 1fr;}
  .deck-panel{grid-template-columns:1fr;}
  .topbar{flex-wrap:wrap;}
  .topbar nav{order:3; width:100%; margin-left:0;}
  .open-sign{margin-left:auto;}
  body{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  .ticker-track{white-space:normal;}
}