*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#1d0f09;color:#faf8f1;font-family:Arial,Helvetica,sans-serif}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #e4cd8c;outline-offset:5px}#journey{height:320vh}#stage{height:100svh;min-height:540px;position:sticky;top:0;overflow:clip;background:#28150c}.wood{position:absolute;inset:-10%;background:radial-gradient(ellipse at 43% 45%,transparent,#100703cc 90%),url('assets/wood-seamless.jpg') center/1520px 800px;filter:brightness(.73)}#props{position:absolute;inset:0;pointer-events:none}#beans{position:absolute;left:5%;top:8%;width:34%;height:80%;object-fit:contain;object-position:top left}.plant{position:absolute;width:37%;right:0;top:-1%;mix-blend-mode:lighten;mask-image:radial-gradient(ellipse at 64% 25%,#000 38%,transparent 72%);filter:brightness(.88)}.notebook{position:absolute;right:3%;bottom:-7%;width:25%;height:49%;transform:rotate(31deg);background:linear-gradient(105deg,#9f7a50,#b58e62 40%,#846344);border-radius:4px 14px 12px 3px;box-shadow:8px 15px 25px #000a}.spiral{position:absolute;left:-7px;top:0;bottom:0;width:19px;background:repeating-linear-gradient(0deg,transparent 0 14px,#181612 15px 20px,transparent 21px 29px)}.pen{position:absolute;width:9px;height:67%;background:linear-gradient(90deg,#090909,#464646,#060606);left:43%;top:17%;transform:rotate(-19deg);border-radius:40% 40% 5px 5px;box-shadow:5px 5px 6px #0008}.saucer{position:absolute;width:24vw;height:24vw;left:50%;top:51%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,transparent 62%,#b8874588 63%,#311606 65%,#8c512b 67%,#c18a54 69%,#3e210f 71%),url('assets/wood.jpg') center/cover;box-shadow:14px 25px 30px #000b}header{position:absolute;inset:5% 4% auto;z-index:4;display:flex;justify-content:space-between;align-items:flex-start}.brand{color:inherit;text-decoration:none;line-height:.95;display:block;transform-origin:top left}.brand small{font-size:clamp(9px,1.1vw,16px);display:block;line-height:2;font-weight:bold}.brand span{font-size:clamp(52px,8vw,136px);font-weight:800;letter-spacing:-.055em}nav{display:flex;align-items:center;gap:20px;padding:9px;border:1px solid #ffffff0d;border-radius:40px;background:#10080530;opacity:0;visibility:hidden}nav button{border:0;background:none;color:#fff;font-size:12px;padding:9px 2px}nav .order{background:#fafafa;color:#151515;border-radius:30px;padding:11px 22px;white-space:nowrap}.intro{position:absolute;left:4%;bottom:7%;padding:22px;width:21%;max-width:320px;background:#77666150;backdrop-filter:blur(5px);border:1px solid #ffffff0c;border-radius:3px}.intro h1{font-size:clamp(18px,2vw,33px);line-height:1.01;letter-spacing:-.04em;margin:0}.intro p{border-top:1px solid #ffffff1a;margin:30px 0 0;padding:22px 0 0 48%;font-size:clamp(10px,1vw,16px);line-height:1.3}.description{position:absolute;right:5%;bottom:6%;width:23%;font-size:clamp(12px,1.15vw,18px);line-height:1.35;z-index:2}.end-copy{position:absolute;top:56%;font-size:clamp(22px,2.6vw,44px);font-weight:700;line-height:1.02;letter-spacing:-.045em;opacity:0;z-index:2}.left{left:4%}.right{right:4%;text-align:right}#cup{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.bottom{position:absolute;bottom:20px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:11px;color:#ffffff88;z-index:4}.bottom button{color:inherit;border:0;background:none;font-size:11px;visibility:hidden}.progress{position:absolute;bottom:0;left:0;height:2px;background:#b89a63;width:0}dialog{border:1px solid #78604a;border-radius:14px;background:#27170f;color:#faf8f1;padding:38px;width:min(440px,90vw);box-shadow:0 25px 80px #0009}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}dialog h2{font-size:36px;letter-spacing:-.06em}dialog label{display:block;margin:20px 0;font-size:14px}dialog input,dialog select{display:block;margin-top:9px;width:100%;padding:12px;background:#39271d;color:#fff;border:1px solid #71553e;border-radius:5px}.close{position:absolute;right:14px;top:10px;color:white;background:none;border:0;font-size:26px}#add{background:#eee5b8;color:#24170f;border:0;border-radius:30px;padding:13px 23px}#result,.demo{font-size:12px;line-height:1.5;color:#d4bb9d}@media(max-width:640px){#stage{min-height:650px}header{top:4%}.brand span{font-size:16vw}.brand small{font-size:9px}nav{gap:9px;padding:6px}nav button{font-size:10px}nav button[data-go],#journal{display:none}nav .order{padding:9px 12px}.intro{width:43%;left:5%;bottom:10%;padding:15px}.intro h1{font-size:20px}.intro p{margin-top:18px;padding-top:15px;font-size:10px}.description{width:37%;font-size:11px;bottom:9%}.plant{width:65%;right:-12%;top:15%}#beans{width:56%;left:-8%;top:17%}.notebook{right:-8%;width:43%;height:31%;bottom:9%}.saucer{width:50vw;height:50vw;top:43%}.end-copy{font-size:23px;top:66%;width:90%;left:5%;right:auto}.right{top:77%;text-align:left;font-size:19px}.bottom{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* September 23: preserve the coffee-table world; expand its interactive story. */
#journey{height:540vh}::selection{background:#bd9a6b;color:#211109}html{scrollbar-color:#8f704e #23150d}.cup-shadow{position:absolute;left:50%;top:61%;width:17vw;height:7vw;border-radius:50%;background:#100703;filter:blur(22px);transform:translateX(-35%) rotate(-12deg);pointer-events:none}.chapter{position:absolute;z-index:3;left:58%;right:6%;top:21%;max-width:600px}.chapter[hidden],.cup-tools[hidden]{display:none}.chapter h2{font-size:clamp(34px,4.1vw,66px);line-height:.97;letter-spacing:-.04em;margin:0 0 28px}.chapter h3{font-size:26px;letter-spacing:-.03em;margin:24px 0 8px}.chapter p{color:#ded0ba;font-size:16px;line-height:1.55;max-width:43ch;margin:10px 0}.chapter #drink-note{color:#f3eadb;font-size:19px}.drink-tabs,.ritual-tabs{display:flex;gap:24px;border-bottom:1px solid #b89a6340}.drink-tabs button,.ritual-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:#d3bfa4;padding:14px 0;font-size:14px;min-height:44px}.drink-tabs button[aria-pressed=true],.ritual-tabs button[aria-pressed=true]{border-color:#dfc291;color:#fff7e9}.chapter button:hover,.cup-tools button:hover{color:white;border-color:#fff0d2}#drink-tags{display:flex;flex-wrap:wrap;gap:16px;margin:23px 0;color:#c4ac8e;font-size:12px}#choose-brew,.return-menu{border:1px solid #b79c79;background:#eee1c8;color:#27180f;border-radius:30px;padding:14px 24px;margin:3px 0;font-size:13px;min-height:44px}#choose-brew:hover,.return-menu:hover{background:#fff1d5;color:#27180f}.concept-note{display:block;color:#baa48a;font-size:10px;margin-top:12px}.cup-tools{position:absolute;left:29%;bottom:15%;transform:translateX(-50%);z-index:4}.cup-tools button{background:#261810aa;border:1px solid #a78d6d;color:#ebdac0;padding:12px 20px;border-radius:30px;font-size:12px;min-height:44px}.closing{font-size:28px!important;font-weight:bold;letter-spacing:-.035em;padding-top:24px}#cup{filter:drop-shadow(10px 19px 13px #08040155)}.bottom{color:#d0bda4}nav button{min-height:44px}.drink-info{min-height:203px}@media(max-width:900px) and (min-width:641px){.chapter{left:55%;right:4%;top:24%}.chapter h2{font-size:42px}.chapter p{font-size:14px}.drink-tabs,.ritual-tabs{gap:16px}.intro h1{font-size:22px}}@media(max-width:640px){.chapter{left:6%;right:6%;top:48%;max-width:none}.chapter h2{font-size:32px;margin-bottom:8px;line-height:1.02}.chapter h2 br{display:none}.chapter h3{font-size:21px;margin:13px 0 5px}.chapter p{font-size:13px;line-height:1.4;margin:7px 0}.chapter #drink-note{font-size:15px}.drink-tabs,.ritual-tabs{gap:23px}.drink-tabs button,.ritual-tabs button{font-size:12px;padding:10px 0}.drink-info{min-height:171px}#drink-tags{margin:15px 0;gap:12px;font-size:10px}.concept-note{font-size:9px;margin-top:6px}.cup-tools{left:auto;right:5%;bottom:auto;top:38%;transform:none}.cup-tools button{padding:8px 12px;font-size:10px}.closing{font-size:23px!important;padding-top:10px}.cup-shadow{width:40vw;height:20vw;top:49%}.chapter #choose-brew,.return-menu{padding:11px 20px;font-size:12px}.bottom{font-size:9px;bottom:12px}.chapter .return-menu{margin-top:16px}}
.chapter .return-menu:hover{color:#27180f}.concept-note{font-size:11px}.cup-tools button{font-size:12px}@media(max-width:640px){header nav{position:absolute;right:0;top:0}.brand small{font-size:10px}.bottom,.bottom button{font-size:11px}#drink-tags{font-size:11px}.concept-note{font-size:10px}.cup-tools button{font-size:11px}}
#tray-drag{position:absolute;left:8%;top:19%;width:43%;height:59%;z-index:2;cursor:grab;touch-action:pan-y}#tray-drag:active{cursor:grabbing}#tray-drag:focus-visible{outline:1px solid #cab18a;outline-offset:-12px;border-radius:30px}.tray-controls{position:absolute;left:8%;width:43%;bottom:9%;z-index:5;display:flex;justify-content:center;align-items:center;gap:13px;font-size:11px;color:#dbcaaf}.tray-controls[hidden],#tray-drag[hidden]{display:none}.tray-controls button{min-height:40px;padding:9px 13px;border:1px solid #95795180;border-radius:24px;background:#291b12b0;color:#f1e2ca;font-size:11px}.tray-controls button:hover{background:#61452d}.tray-controls span{margin-right:8px}@media(max-width:640px){#tray-drag{left:3%;width:94%;top:12%;height:32%}.tray-controls{left:5%;width:90%;bottom:auto;top:42%;gap:9px}.tray-controls span{display:none}.tray-controls button{min-height:34px;padding:5px 13px}.chapter{top:50%}.chapter .drink-info{min-height:157px}.chapter h2{font-size:29px}}

@media(max-width:640px){.tray-controls{top:46%}.chapter{top:52%}}

/* A separate still-life chapter; the accepted tray remains intact. */
#ritual{position:absolute;inset:0;z-index:3;pointer-events:none;color:#f7f1e5}#ritual[hidden]{display:none}#ritual button{pointer-events:auto}.collection-heading{position:absolute;left:53%;top:17%}.collection-heading small{font-size:11px;letter-spacing:.18em;color:#c2aa88}.collection-heading h2{font-size:clamp(28px,3.1vw,54px);line-height:1.03;letter-spacing:-.04em;margin:13px 0}.companion-labels{position:absolute;left:48%;right:10%;top:69%;display:flex;gap:6%}.companion-labels button{width:50%;background:none;border:0;border-top:1px solid #aa92774d;padding:13px 0;text-align:left;color:#d7c7ad;cursor:pointer;min-height:65px}.companion-labels button[aria-pressed=true]{border-color:#f0d7ac;color:#fff4dd}.companion-labels small{display:block;font-size:10px;letter-spacing:.14em;margin-bottom:8px}.companion-labels span{font:20px Georgia,serif}.companion-detail{position:absolute;left:53%;right:11%;top:82%;max-width:540px}.companion-detail h3{display:none}.companion-detail p{font-size:14px;line-height:1.6;color:#cdbda6;margin:0}.collection-active #tray-drag{left:6%;width:37%}.collection-active .tray-controls{left:5%;width:39%}.collection-active .tray-controls>span{display:none}
@media(max-width:640px){.collection-heading{left:7%;top:14%}.collection-heading h2{font-size:29px;margin-top:8px}.collection-heading small{font-size:9px}.companion-labels{left:7%;right:7%;top:64%;gap:8%}.companion-labels span{font-size:17px}.companion-labels small{font-size:9px}.companion-detail{left:7%;right:7%;top:79%}.companion-detail p{font-size:13px}.collection-active #tray-drag{left:17%;top:27%;height:17%;width:66%}.collection-active .tray-controls{left:7%;width:86%;top:72%;justify-content:center}}
@media(min-width:641px){.companion-labels{top:76%}.companion-detail{top:86%}}

@media(min-width:641px){.companion-labels{left:46%;right:7%;gap:15%;top:73%}.companion-detail{top:84%}.collection-heading{top:16%}}

.drink-tabs{flex-wrap:wrap;gap:8px 20px}.drink-tabs button{min-height:40px}header{z-index:10!important}nav{pointer-events:auto} @media(max-width:640px){nav button{display:inline-block!important}nav{max-width:92vw;flex-wrap:wrap;justify-content:flex-end;gap:3px!important;top:45px!important}nav button{font-size:10px!important;padding:5px 8px!important}.drink-tabs{gap:3px 14px}}

@media(max-width:640px){nav{top:30px!important}}

/* Generation 2: preserve the table, give the menu a quieter hierarchy. */
.chapter{top:23%;left:60%;right:6%;max-width:520px}
.chapter h2{font-size:clamp(34px,3.6vw,60px);line-height:1.03;letter-spacing:-.035em;margin-bottom:32px}
.drink-tabs{gap:0 22px;padding-bottom:3px}
.drink-tabs button{font-size:13px;color:#d6c5ab;min-height:44px}
.chapter h3{margin-top:27px;font-size:28px;font-weight:500}
.chapter #drink-note{font-size:17px;color:#eadcc6}
.chapter p{font-size:15px;line-height:1.65;max-width:40ch}
.drink-info{min-height:205px}
#drink-tags{gap:15px;color:#cdbb9e;margin:20px 0 24px;font-size:11px}
#choose-brew{padding:14px 25px}
.tray-controls{left:12%;width:43%;gap:9px}
.tray-controls button{border-color:#af927250;background:#27190e66}
.concept-note{color:#c7b292;margin-top:14px}
@media(min-width:641px) and (max-width:1100px){.chapter{left:57%;top:22%;right:4%}.chapter h2{font-size:38px}.drink-tabs{gap:0 14px}.chapter p{font-size:14px}.tray-controls{left:8%;width:44%}}
@media(max-width:640px){
 header{inset:22px 5% auto}header nav{top:43px!important;left:0;right:0;max-width:none;justify-content:space-between;padding:3px 0;background:transparent;border:0;border-radius:0;gap:4px!important;flex-wrap:nowrap}
 nav button{padding:6px 4px!important;min-height:40px;font-size:11px!important}nav .order{padding:9px 13px!important;min-height:36px}
 .chapter{left:6%;right:6%;top:51%;max-width:none}.chapter h2{font-size:27px;margin-bottom:14px;letter-spacing:-.035em}.chapter h2 br{display:none}
 .drink-tabs{gap:0;justify-content:space-between;flex-wrap:nowrap}.drink-tabs button{font-size:11px;padding:9px 0;min-height:42px;white-space:nowrap}
 .chapter h3{font-size:23px;margin:16px 0 7px}.chapter #drink-note{font-size:15px}.chapter p{font-size:13px;line-height:1.5}
 .drink-info{min-height:174px!important}#drink-tags{font-size:10px;gap:12px;margin:15px 0}
 .tray-controls{left:5%;width:90%;top:44.5%;gap:10px}.tray-controls button{font-size:10px;min-height:32px;padding:5px 12px}
 #tray-drag{top:15%;height:28%}.concept-note{font-size:10px;margin-top:9px}.bottom,.bottom button{font-size:10px}
 #stage{min-height:800px}.collection-heading{top:17%}
}
@media(max-width:370px){.chapter h2{font-size:24px}.drink-tabs button{font-size:10px}}

@media(max-width:640px) and (max-height:760px){#stage{min-height:720px}.chapter{top:46%}.chapter h2{font-size:24px;margin-bottom:6px}.chapter h3{margin-top:12px}.chapter p{line-height:1.4}.drink-info{min-height:155px!important}#drink-tags{margin:12px 0}.tray-controls{top:39.5%}.concept-note{margin-top:7px}.chapter #choose-brew{padding:10px 20px}.collection-active .tray-controls{top:72%}}

@media(max-width:640px){.drink-tabs button,.tray-controls button,#drink-tags,.bottom,.bottom button{font-size:11px}.tray-controls button{min-height:36px}.brand small{font-size:11px}}
