@font-face{font-family:"Space Grotesk";src:url("assets/space-grotesk.ttf") format("truetype");font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/dm-sans.ttf") format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/ibm-plex-mono.ttf") format("monospace");font-display:swap}

:root{
  --cream:#FFF6E9; --paper:#FFFDF6; --ink:#1E2A32; --ink-soft:#43565F;
  --teal:#0E7C7B; --teal-dark:#095E5D; --yellow:#FFC53D; --coral:#FF6B6B;
  --mint:#BFE8C9; --sky:#BEE3F8; --sand:#F3E3C3; --line:#1E2A32;
  --radius:18px;
  --shadow:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.55;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:radial-gradient(#0e7c7b22 1.4px, transparent 1.4px);
  background-size:22px 22px;
}
main,header.masthead,footer.footer{position:relative;z-index:1}

/* bubbles */
.bubbles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bubbles span{position:absolute;bottom:-60px;border-radius:50%;border:2px solid #0e7c7b33;background:#ffffff55;animation:rise 14s linear infinite}
.bubbles span:nth-child(1){left:4%;width:22px;height:22px;animation-duration:13s}
.bubbles span:nth-child(2){left:12%;width:12px;height:12px;animation-duration:9s;animation-delay:1s}
.bubbles span:nth-child(3){left:24%;width:30px;height:30px;animation-duration:16s;animation-delay:2s}
.bubbles span:nth-child(4){left:38%;width:14px;height:14px;animation-duration:10s;animation-delay:.5s}
.bubbles span:nth-child(5){left:52%;width:26px;height:26px;animation-duration:15s;animation-delay:3s}
.bubbles span:nth-child(6){left:63%;width:11px;height:11px;animation-duration:9s;animation-delay:1.5s}
.bubbles span:nth-child(7){left:72%;width:24px;height:24px;animation-duration:14s;animation-delay:2.5s}
.bubbles span:nth-child(8){left:81%;width:15px;height:15px;animation-duration:11s;animation-delay:.8s}
.bubbles span:nth-child(9){left:89%;width:28px;height:28px;animation-duration:17s;animation-delay:4s}
.bubbles span:nth-child(10){left:95%;width:12px;height:12px;animation-duration:10s;animation-delay:2s}
.bubbles span:nth-child(11){left:47%;width:10px;height:10px;animation-duration:8s;animation-delay:5s}
.bubbles span:nth-child(12){left:18%;width:16px;height:16px;animation-duration:12s;animation-delay:6s}
@keyframes rise{to{transform:translateY(-110vh)}}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* masthead */
.masthead{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:30}
.masthead-inner{max-width:1180px;margin:0 auto;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none}
.brand-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.5px;display:block;line-height:1}
.brand-sub{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:1.6px;opacity:.8}
.brand-drum svg{display:block;filter:drop-shadow(2px 2px 0 #000)}
.topnav{display:flex;gap:.4rem;margin-left:auto;flex-wrap:wrap}
.topnav a{color:var(--cream);text-decoration:none;font-family:"IBM Plex Mono",monospace;font-size:.78rem;border:1.5px solid #ffffff44;padding:.35rem .7rem;border-radius:999px}
.topnav a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.tally-pill{display:inline-block;background:var(--yellow);color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;border:2px solid #000;box-shadow:2px 2px 0 #000}
.ticker{background:var(--yellow);color:var(--ink);border-top:2px solid #000;border-bottom:2px solid #000;overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:700;padding:.3rem 0;animation:tick 22s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* hero */
.hero{max-width:1180px;margin:0 auto;padding:3rem 1.2rem 1rem;display:grid;grid-template-columns:1.25fr .9fr;gap:2rem;align-items:center}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:2px;text-transform:uppercase;background:var(--ink);color:var(--yellow);display:inline-block;padding:.35rem .7rem;border-radius:999px;margin:0 0 1rem}
.hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.4rem,5.2vw,4.2rem);line-height:.98;margin:0 0 1rem;letter-spacing:-1px}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 55%, var(--yellow) 55%);padding:0 .1em}
.lede{font-size:1.08rem;max-width:34rem;color:var(--ink-soft)}
.lede strong{color:var(--ink)}
.cycle-legend{list-style:none;display:flex;gap:.6rem;flex-wrap:wrap;margin:1.3rem 0 0;padding:0}
.cycle-legend li{display:flex;align-items:center;gap:.45rem;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:.35rem .75rem;font-weight:700;font-size:.85rem;box-shadow:3px 3px 0 var(--ink)}
.cycle-legend small{font-family:"IBM Plex Mono",monospace;font-weight:400;opacity:.7}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
.dot-todo{background:var(--sand)} .dot-prog{background:var(--sky)} .dot-block{background:var(--coral)} .dot-done{background:var(--mint)}

/* washer */
.hero-machine{display:flex;justify-content:center}
.washer{background:var(--paper);border:3px solid var(--ink);border-radius:26px;padding:1rem 1rem 1.1rem;width:min(340px,100%);box-shadow:8px 8px 0 var(--ink);transform:rotate(2deg)}
.washer-top{display:flex;gap:.5rem;align-items:center;margin-bottom:.8rem}
.washer-top i{width:34px;height:14px;border:2px solid var(--ink);border-radius:999px;background:var(--sand);display:block}
.washer-top i:nth-child(2){background:var(--mint)}
.washer-top .dial{width:30px;height:30px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);margin-left:auto;position:relative}
.washer-top .dial::after{content:"";position:absolute;left:50%;top:3px;width:3px;height:10px;background:var(--ink);transform:translateX(-50%) rotate(40deg);transform-origin:bottom}
.washer-door{border:3px solid var(--ink);border-radius:50%;width:240px;height:240px;margin:0 auto;overflow:hidden;background:#123;background:radial-gradient(circle at 50% 40%, #2AA5A3, #0E7C7B 60%, #083F3E);position:relative}
.washer-drum{position:absolute;inset:14px;border-radius:50%;border:3px dashed #ffffffaa;animation:spin 9s linear infinite;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem;padding:2rem}
.washer-drum span{font-size:1.5rem;display:inline-block;animation:wob 1.6s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wob{to{transform:translateY(-6px) rotate(12deg)}}
.washer-note{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:1px;margin:.8rem 0 0}

/* deck */
.deck{max-width:1180px;margin:1rem auto 0;padding:0 1.2rem}
.deck h2{font-family:"Space Grotesk",sans-serif;font-size:1.6rem;margin:0}
.deck-sub{margin:.2rem 0 1rem;color:var(--ink-soft)}
.panel.controls{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem;display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:1.2rem;align-items:start}
.control label,.count-label{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;display:block;margin-bottom:.45rem}
.control input[type="search"],.control select{width:100%;font:inherit;font-size:1rem;padding:.7rem .9rem;border:2.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
.control input[type="search"]:focus-visible,.control select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.hint{font-size:.82rem;color:var(--ink-soft);margin:.4rem 0 0}
.count-num{font-family:"Space Grotesk",sans-serif;font-size:2.6rem;font-weight:700;line-height:1;margin:0}
.count-total{font-size:1.1rem;color:var(--ink-soft)}
.btn{font:inherit;font-weight:700;border:2.5px solid var(--ink);border-radius:999px;padding:.6rem 1.1rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-dark)}
.btn.ghost{background:#fff;margin-top:.7rem;font-size:.85rem}
.btn.warm{background:var(--yellow);color:var(--ink)}

/* washing line */
.line-section{max-width:1180px;margin:2rem auto 0;padding:0 1.2rem}
.line-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.line-head h2{font-family:"Space Grotesk",sans-serif;font-size:1.6rem;margin:0}
.line-sub{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--ink-soft);margin:0}
.line{list-style:none;margin:1.2rem 0 0;padding:2.6rem .4rem 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.6rem 1.2rem;position:relative}
.line::before{content:"";position:absolute;top:14px;left:-10px;right:-10px;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 14px, transparent 14px 22px);border-radius:99px;opacity:.9}
/* garment */
.garment{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:6px 6px var(--radius) var(--radius);padding:1.7rem 1rem 1rem;box-shadow:var(--shadow);animation:sway 5s ease-in-out infinite alternate;transform-origin:top center;display:flex;flex-direction:column;gap:.55rem}
.garment:nth-child(2n){transform:rotate(-1.2deg)} .garment:nth-child(3n){transform:rotate(1.1deg);animation-delay:.8s} .garment:nth-child(4n){animation-delay:1.6s}
.garment:hover{transform:rotate(0);z-index:2}
@keyframes sway{from{rotate:-1.1deg}to{rotate:1.1deg}}
.pin{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:26px;height:34px;background:var(--yellow);border:3px solid var(--ink);border-radius:6px}
.pin::after{content:"";position:absolute;left:50%;top:6px;bottom:4px;width:3px;background:var(--ink);transform:translateX(-50%)}
.garment[data-status="todo"]{background:#FBEDD3}
.garment[data-status="in-progress"]{background:#DDF0FD}
.garment[data-status="blocked"]{background:#FFE0DE}
.garment[data-status="done"]{background:#DFF3E4}
.status-tag{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:.2rem .6rem;background:#fff}
.garment h3{font-family:"Space Grotesk",sans-serif;font-size:1.12rem;line-height:1.25;margin:0}
.garment .summary{font-size:.9rem;color:var(--ink-soft);margin:0}
.meta{display:flex;flex-wrap:wrap;gap:.35rem;font-family:"IBM Plex Mono",monospace;font-size:.7rem}
.meta span{border:1.5px solid var(--ink);border-radius:999px;padding:.15rem .55rem;background:#ffffffcc}
.avatar{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-weight:700;margin-right:.3rem}
.open-btn{margin-top:auto;align-self:stretch;text-align:center;background:var(--ink);color:var(--cream);border-radius:12px;padding:.65rem;font-weight:700;text-decoration:none;border:2.5px solid var(--ink);cursor:pointer;font-size:.92rem}
.open-btn:hover{background:var(--teal)}
.pri{font-weight:700}
.pri-high{color:#B3261E}.pri-medium{color:#7A5C00}.pri-low{color:#0E7C7B}

/* empty */
.empty{background:var(--paper);border:3px dashed var(--ink);border-radius:var(--radius);padding:2.2rem 1.5rem;text-align:center;box-shadow:var(--shadow);margin-top:1rem}
.empty-sock{font-size:2.6rem}
.empty h3{font-family:"Space Grotesk",sans-serif;margin:.4rem 0}

/* care */
.care{max-width:1180px;margin:2.5rem auto 0;padding:0 1.2rem 1rem}
.care h2{font-family:"Space Grotesk",sans-serif;font-size:1.6rem}
.care-tag{font-family:"IBM Plex Mono",monospace;font-size:.7rem;background:var(--ink);color:var(--yellow);border-radius:999px;padding:.25rem .7rem;vertical-align:middle;letter-spacing:1px}
.care-cards{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.care-cards li{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:1rem;box-shadow:4px 4px 0 var(--ink)}
.lounge{margin-top:1rem;display:flex;gap:1rem;align-items:center;background:var(--ink);color:var(--cream);border-radius:14px;padding:.9rem;border:3px solid var(--ink)}
.lounge img{width:140px;height:100px;object-fit:cover;border-radius:10px;border:2px solid var(--cream)}
.lounge figcaption{font-size:.85rem}
.fineprint{font-size:.8rem;color:var(--ink-soft)}

.footer{background:var(--ink);color:var(--cream);margin-top:2rem;padding:1.1rem;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.78rem}
.footer a{color:var(--yellow)}

/* overlay / sheet = inspection drawer */
.overlay{position:fixed;inset:0;background:#1e2a32aa;z-index:50;display:flex;justify-content:flex-end;backdrop-filter:blur(2px)}
.overlay[hidden]{display:none}
.sheet-holder{width:min(520px,100%);padding:1rem;display:flex}
.sheet{background:var(--paper);border:3px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink);width:100%;max-height:calc(100vh - 2rem);overflow:auto;padding:0;animation:slidein .22s ease-out}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
.sheet-top{padding:1rem 1.2rem .6rem;border-bottom:2.5px dashed var(--ink);display:flex;gap:.8rem;align-items:flex-start;background:var(--yellow);border-radius:17px 17px 0 0}
.sheet-top .caretag{font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:700;letter-spacing:1.5px;margin:0}
.sheet-body{padding:1.2rem}
.sheet-body h2{font-family:"Space Grotesk",sans-serif;font-size:1.6rem;line-height:1.15;margin:.2rem 0 .7rem}
.sheet-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;margin-bottom:.8rem}
.sheet-meta span{border:1.5px solid var(--ink);border-radius:999px;padding:.2rem .6rem;background:#fff}
.body-text{white-space:pre-line;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:.9rem;font-size:.96rem}
.status-box{margin-top:1rem;background:var(--mint);border:2.5px solid var(--ink);border-radius:12px;padding:.9rem}
.status-box label{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;display:block;margin-bottom:.4rem}
.status-box select{width:100%;font:inherit;font-weight:700;padding:.65rem;border:2.5px solid var(--ink);border-radius:10px;background:#fff}
.feedback{margin:.6rem 0 0;font-weight:700;min-height:1.4em}
.close-row{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.drum-mini{display:flex;align-items:center;gap:.6rem;margin-top:1rem;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-soft)}
.drum-mini .mini{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ink);display:inline-block;animation:spin 6s linear infinite;background:conic-gradient(var(--coral) 0 25%, var(--yellow) 0 50%, var(--sky) 0 75%, var(--mint) 0)}

/* toast */
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) rotate(-1deg);background:var(--ink);color:var(--cream);border:2.5px solid #000;box-shadow:4px 4px 0 #000;border-radius:999px;padding:.7rem 1.2rem;font-weight:700;z-index:80;max-width:min(92vw,560px);text-align:center}
.toast[hidden]{display:none}
.toast b{color:var(--yellow)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .panel.controls{grid-template-columns:1fr 1fr}
  .control-count{grid-column:1/-1}
  .care-cards{grid-template-columns:1fr}
  .sheet-holder{padding:.6rem}
}
@media (max-width:560px){
  .panel.controls{grid-template-columns:1fr}
  .line{grid-template-columns:1fr}
  .masthead-inner{gap:.5rem}
  .topnav{margin-left:0}
  .overlay{justify-content:center;align-items:flex-end}
  .sheet-holder{width:100%}
  .sheet{max-height:92vh}
  .lounge{flex-direction:column;align-items:flex-start}
  .lounge img{width:100%;height:140px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .garment{transform:none!important}
}