:root{--brown:#241711;--cream:#eee3cf;--orange:#b9562d}*{box-sizing:border-box}html{scroll-snap-type:y mandatory;scroll-behavior:smooth}body{margin:0;background:var(--brown);color:var(--cream);font-family:Georgia,serif}header{position:fixed;z-index:10;inset:0 0 auto;display:flex;justify-content:space-between;padding:25px 5vw}header a{color:inherit;text-decoration:none;letter-spacing:.18em}nav{display:flex;gap:28px;font:11px Arial}.panel{min-height:100svh;scroll-snap-align:start;padding:10vh 8vw;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;overflow:hidden}.panel p:first-child{font:11px Arial;letter-spacing:.3em;color:#ce8e69}.panel h1,.panel h2{font-weight:400;font-size:clamp(48px,8vw,108px);line-height:1.05;margin:22px 0}.hero{background:radial-gradient(circle at 77% 50%,#69402b,transparent 30%),var(--brown)}.hero a,.button{color:inherit;text-decoration:none;border-bottom:1px solid;padding:10px 0}.bean{width:min(35vw,430px);aspect-ratio:.72;border-radius:50%;background:linear-gradient(100deg,#3a1e12 48%,#b66a41 50%,#32190f 53%);transform:rotate(18deg);box-shadow:0 40px 100px #000}.beans{background:var(--cream);color:var(--brown)}.copy{max-width:450px;line-height:2}.roast{font-size:clamp(35px,6vw,90px);line-height:1.35;color:#8d725f}.roast b{color:var(--orange)}.space{background:#38241a}.cup{width:70%;aspect-ratio:1;border:2px solid #d8c5a6;border-radius:50%;box-shadow:inset 0 0 0 18px #2b1911,inset 0 0 0 20px #aa7856}.access{display:grid;place-items:center;text-align:center;background:var(--orange)}.access>div{max-width:800px}.char{display:inline-block}.js .char{opacity:0;transform:translateY(.65em);transition:.55s}.js .active .char{opacity:1;transform:none}@media(max-width:760px){nav{display:none}.panel{grid-template-columns:1fr;padding:14vh 7vw}.bean{position:absolute;right:-15%;width:55vw;opacity:.45}.panel h1,.panel h2{font-size:52px}.roast{font-size:38px}.cup{width:50%;margin:auto}}
html{overflow-x:hidden}