@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Roboto+Slab:wght@500;700;900&display=swap');
*{box-sizing:border-box}:root{--paper:#ead6ae;--paper2:#f0dfbd;--ink:#211c17;--red:#a7282c;--line:#41382d}html{background:#302820}body{margin:0;color:var(--ink);font-family:'Special Elite',monospace;background:#302820}.app{width:min(1500px,100%);margin:auto;min-height:100vh;background:var(--paper);background-image:radial-gradient(#73552d22 1px,transparent 1px);background-size:7px 7px;box-shadow:0 0 40px #0008}header{height:76px;display:flex;justify-content:space-between;align-items:center;padding:13px 22px;border-bottom:3px solid var(--ink)}.brand{font-family:'Roboto Slab',serif;line-height:.72}.brand b{font-size:11px}.brand span{font-size:27px;font-weight:900}.brand small{display:block;letter-spacing:5px;margin:8px 0 0 62px;font-size:9px}nav{display:flex;gap:28px}.navBtn,.link{background:none;border:0;font:13px 'Special Elite',monospace;color:inherit}.navBtn.active{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:8px}.link{text-decoration:underline}.workspace{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(340px,.85fr);min-height:calc(100vh - 76px)}.card{margin:12px;border:1.5px solid var(--line);background:#efdcb7aa;align-self:start}.cardHead{display:flex;justify-content:space-between;gap:10px;padding:16px 18px 10px;border-bottom:1.5px solid var(--line)}h1{font:900 clamp(28px,3vw,46px)/1 'Roboto Slab',serif;margin:0;letter-spacing:1px}h2{font:700 14px 'Roboto Slab',serif;color:var(--red);letter-spacing:2px;margin:7px 0 0}.number{color:var(--red);padding:7px;font-size:24px;align-self:flex-start;transform:rotate(-1deg);white-space:nowrap}.meta{display:grid;grid-template-columns:2.2fr 1fr;border-bottom:1.5px solid var(--line)}.member{display:grid}.meta label{padding:8px 18px;border-bottom:1px solid #74644d66}.meta label:last-child{border-bottom:0}.meta input{border:0;background:transparent;font:inherit;width:72%;color:inherit}.meta p{margin:0;padding:10px 18px;border-left:1.5px solid var(--line);font-size:12px;line-height:1.35}.grid{display:grid;grid-template-columns:repeat(6,1fr)}.cell{aspect-ratio:1;min-width:0;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);position:relative;overflow:visible}.cell:nth-child(6n){border-right:0}.stamp{position:absolute;inset:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:.92;cursor:pointer;mix-blend-mode:multiply;filter:contrast(.92)}.stamp .icon{font:900 clamp(17px,2.2vw,34px) 'Roboto Slab',serif}.stamp .beerName{font:900 clamp(8px,1vw,15px) 'Roboto Slab',serif;text-transform:uppercase;max-width:100%;overflow-wrap:anywhere}.stamp small{margin-top:6px;font-size:8px;letter-spacing:.5px}.stamp:after{content:'';position:absolute;inset:4%;border:2px solid currentColor;border-radius:46% 53% 44% 51%;opacity:.18}.menuPanel{border-left:2px solid #6b5942;padding:22px 24px;background:#ead7b2cc;min-height:100%;box-shadow:inset 12px 0 20px #6b4d2920}.menuTop h3,.sheetTop h3{font:900 30px 'Roboto Slab',serif;margin:0 0 12px}.search{width:100%;padding:12px;background:#f2e2c3aa;border:1px solid #75654f;font:16px 'Special Elite',monospace;margin-bottom:8px}.beer{padding:12px 3px;border-bottom:1px solid #8d785b77;display:flex;justify-content:space-between;gap:10px;align-items:center}.beer b{font-family:'Roboto Slab',serif}.beer small{display:block;margin-top:4px;font-size:10px}.beer button{white-space:nowrap;border:1px solid var(--red);color:var(--red);background:transparent;padding:8px;font:11px 'Special Elite',monospace}.beer button.done{opacity:.55}.stampBtn{display:none}.sheet{position:fixed;inset:0;background:#0009;z-index:10;display:flex;align-items:flex-end;justify-content:center}.hidden{display:none}.sheetInner{width:min(680px,100%);max-height:88dvh;overflow:auto;background:#ead6b1;padding:16px;border-radius:18px 18px 0 0;border:2px solid #594a38;box-shadow:0 -8px 30px #0007}.sheetTop{display:flex;justify-content:space-between;align-items:center}.sheetTop button{font-size:34px;background:none;border:0}.detail label{display:block;margin:18px 0}.detail textarea{display:block;width:100%;min-height:100px;margin-top:8px;padding:10px;background:#f4e3c2;border:1px solid #806e56;font:16px 'Special Elite',monospace}.detail select{font:inherit;padding:6px}.detailSave{display:block;width:100%;margin:12px 0;padding:14px;background:var(--red);color:#f7e8c9;border:0;font:700 15px 'Roboto Slab',serif}.danger{width:100%;padding:13px;border:1px solid #842126;color:#842126;background:none;font:inherit;margin-bottom:10px}
@media(max-width:899px){.app{width:100%}header{height:68px;padding:11px 14px}.brand span{font-size:24px}.brand small{margin-left:55px}nav{display:none}.link{font-size:10px}.workspace{display:block;min-height:calc(100vh - 68px);padding-bottom:78px}.menuPanel{display:none}.card{margin:10px}.cardHead{padding:12px 10px 8px}h1{font-size:clamp(22px,6.5vw,34px)}h2{font-size:11px;letter-spacing:1.5px}.number{font-size:15px;border:2px solid #a7282c99}.meta{grid-template-columns:1fr 1fr;font-size:11px}.meta label{padding:7px 9px}.meta p{padding:7px 9px;font-size:9px}.grid{grid-template-columns:repeat(4,1fr)}.cell:nth-child(6n){border-right:1.5px solid var(--line)}.cell:nth-child(4n){border-right:0}.stamp .icon{font-size:clamp(15px,5vw,28px)}.stamp .beerName{font-size:clamp(7px,2.3vw,12px)}.stampBtn{display:block;position:fixed;z-index:7;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;margin:0;padding:16px;background:var(--red);color:#f7e8c9;border:0;font:700 15px 'Roboto Slab',serif;letter-spacing:1px;box-shadow:2px 3px 0 #6e1d20}.detailSave{position:static;width:100%;margin:12px 0}.sheetInner{padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(max-width:430px){.grid{grid-template-columns:repeat(3,1fr)}.cell:nth-child(4n){border-right:1.5px solid var(--line)}.cell:nth-child(3n){border-right:0}.meta{grid-template-columns:1fr}.meta p{border-left:0;border-top:1.5px solid var(--line)}.number{font-size:13px}.cardHead{align-items:flex-start}}