@font-face{font-family:"Gloock";src:url(../fonts/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Gloock Fallback";src:local("Georgia");size-adjust:104%;ascent-override:92%}

:root{
  --cream:#F4ECDF; --paper:#EBE0CF; --ink:#2A1B14; --muted:#6B5446; --rust:#A4471F; --rust-d:#8A3A18;
  --juniper:#34473B; --sage:#C9D3C4; --line:rgba(42,27,20,.14);
  --serif:"Gloock","Gloock Fallback",Georgia,serif; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --edge:clamp(20px,5vw,72px); --max:1280px;
  --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:clamp(2.1rem,3.6vw,3.2rem); --step-4:clamp(2.6rem,5vw,4.6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 var(--step-0)/1.6 var(--sans);overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.04;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{width:100%;max-width:calc(var(--max) + var(--edge)*2);margin:0 auto;padding:0 var(--edge)}
.mono,.label{font-family:var(--mono);font-weight:500;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.label{color:var(--rust-d);margin-bottom:1.1rem}
.label--light{color:var(--sage)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:8px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:4px}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,box-shadow .3s}
.nav.is-scrolled{background:rgba(244,236,223,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav__row{display:flex;align-items:center;gap:2rem;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);font-size:1.45rem;margin-right:auto}
.brand__mark{width:22px;height:28px;background:var(--juniper);clip-path:polygon(50% 0,80% 38%,66% 38%,96% 78%,56% 78%,56% 100%,44% 100%,44% 78%,4% 78%,34% 38%,20% 38%);display:inline-block;flex:none}
.nav__links{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0}
.nav__links a{text-decoration:none;font-size:.95rem;font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding:4px 0;transition:background-size .25s}
.nav__links a:hover{background-size:100% 2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.4rem;border-radius:999px;background:var(--rust);color:var(--cream);text-decoration:none;font-weight:600;font-size:1rem;border:2px solid var(--rust);transition:transform .18s,background .18s,box-shadow .18s}
.btn:hover{background:var(--rust-d);border-color:var(--rust-d);transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(138,58,24,.7)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--small{min-height:40px;padding:0 1.1rem;font-size:.92rem}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:96px 0 56px;isolation:isolate}
.hero__back{position:absolute;inset:auto 0 4% 0;z-index:-2;text-align:center;pointer-events:none}
.hero__back span{font-family:var(--serif);font-size:clamp(8rem,26vw,25rem);line-height:.8;color:var(--paper);letter-spacing:-.03em;display:block;white-space:nowrap}
.hero__stage{position:absolute;z-index:-1;inset:0}
.hero__arch{position:absolute;z-index:-1;right:calc(30vw - min(19vw,300px));top:16%;width:min(38vw,600px);height:76%;background:#B8643A;border-radius:999px 999px 0 0}
.hero__stage canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.hero__stage.is-live canvas{opacity:1}
.hero__still{position:absolute;left:70%;top:52%;transform:translate(-50%,-50%);width:min(46vw,680px);height:auto;opacity:1;transition:opacity .9s ease}
.hero__stage.is-live .hero__still{opacity:0}
.no-webgl .hero__stage canvas{display:none}
.hero__front{position:relative}
.hero__copy{max-width:38rem}
.hero h1{font-size:var(--step-4);margin-bottom:1.4rem;text-wrap:balance}
.lede{font-size:var(--step-1);max-width:31rem;color:var(--ink)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0 1.6rem}
.hero__fact{display:flex;align-items:baseline;gap:.6rem;color:var(--muted);margin:0}
.hero__fact strong{font-family:var(--serif);font-weight:400;font-size:1.9rem;color:var(--ink)}
.hero__scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);color:var(--muted);margin:0;font-size:.72rem}
.hero__scroll::after{content:"";display:block;width:1px;height:28px;background:var(--muted);margin:8px auto 0;animation:drip 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
[data-enter]{animation:enter .9s cubic-bezier(.2,.7,.2,1) both .1s}
@keyframes enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* sections */
section{scroll-margin-top:72px}
.section-head{max-width:40rem;margin-bottom:3.2rem}
.section-head h2,.story h2{font-size:var(--step-3);margin-bottom:1.1rem}
.section-head p:last-child{color:var(--muted);font-size:var(--step-1)}

.coffee{padding:clamp(80px,12vh,140px) 0;min-height:100vh;display:flex;align-items:center;background:var(--paper)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{position:relative;background:var(--cream);border-radius:18px;padding:26px 24px 24px;display:flex;flex-direction:column;min-height:330px;box-shadow:0 1px 0 var(--line),0 20px 40px -30px rgba(42,27,20,.45);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;will-change:transform}
.card.reveal.is-in{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry))}
.card.is-tilting{transition:transform .08s linear,box-shadow .3s;box-shadow:0 1px 0 var(--line),0 30px 50px -28px rgba(42,27,20,.55)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.32),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card.is-tilting::after{opacity:1}
.card__top{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);margin-bottom:auto}
.price{font-family:var(--serif);font-size:1.6rem;color:var(--ink)}
.card h3{font-size:2rem;margin:4.5rem 0 .7rem}
.card p{color:var(--muted);font-size:1rem;margin-bottom:1.4rem}
.roast{height:8px;border-radius:99px;background:linear-gradient(90deg,#C9A57A,#9A6738 40%,#5A341D 72%,#2A1B14);position:relative}
.roast span{position:absolute;top:50%;left:calc(var(--r)*100%);width:18px;height:18px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);transform:translate(-50%,-50%)}

.story{padding:clamp(80px,12vh,140px) 0;min-height:100vh;display:flex;align-items:center}
.story__grid{display:grid;grid-template-columns:7fr 5fr;grid-template-rows:auto auto;gap:28px 64px;align-items:end}
.story__photo{margin:0;overflow:hidden;border-radius:18px}
.story__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.story__photo:hover img{transform:scale(1.03)}
.story__photo--big{grid-row:1 / span 2;aspect-ratio:4/4.4}
.story__copy{max-width:30rem}
.story__copy p:not(.label){font-size:var(--step-1)}
.story__photo--small{aspect-ratio:3/2;max-width:26rem}

.visit{background:var(--juniper);color:var(--cream);padding:clamp(80px,12vh,140px) 0;min-height:80vh;display:flex;align-items:center}
.visit__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end}
.visit__address{font-size:clamp(3rem,8vw,7.5rem);line-height:.95;letter-spacing:-.02em;margin-bottom:1rem}
.visit__city{font-size:var(--step-2);color:var(--sage);margin:0}
.visit__facts{margin:0;display:grid;gap:0}
.visit__facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid rgba(244,236,223,.25)}
.visit__facts dt{color:var(--sage);padding-top:.2rem}
.visit__facts dd{margin:0;font-size:var(--step-1)}
.visit__facts a{text-decoration-thickness:1px;text-underline-offset:4px}

.footer{background:var(--ink);color:#E9DFCF;padding:40px 0 32px;font-size:.95rem}
.footer__row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid rgba(233,223,207,.18);margin-bottom:18px}
.footer__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.3rem;margin:0}
.footer__brand .brand__mark{background:#C9D3C4}
.footer__concept{margin:0}
.footer__concept a{color:#fff;font-weight:600;margin-left:.3rem;text-underline-offset:3px}
.footer__credits{color:#B9A99A;font-size:.84rem;margin:0;max-width:72rem}
.footer__credits a{color:#E9DFCF}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.cards .reveal:nth-child(2){transition-delay:.08s}.cards .reveal:nth-child(3){transition-delay:.16s}.cards .reveal:nth-child(4){transition-delay:.24s}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .nav__links{display:none}
}
@media (max-width:760px){
  .hero{align-items:flex-end;padding-top:0}
  .hero__stage{position:absolute;right:auto;left:0;top:64px;width:100%;height:46vh}
  .hero__still{left:50%;top:calc(64px + 23vh);width:min(88vw,420px)}
  .hero__arch{right:auto;left:18%;width:64%;top:calc(64px + 4vh);height:35vh}
  .hero__back{inset:12% 0 auto 0}
  .hero__copy{padding-top:calc(64px + 42vh)}
  .hero h1{font-size:2.5rem}
  .lede{font-size:1.08rem}
  .hero__scroll{display:none}
  .nav__row{height:64px}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .card h3{margin-top:2rem}
  .story__grid,.visit__grid{grid-template-columns:1fr;gap:28px}
  .story__photo--big{grid-row:auto;aspect-ratio:4/3.4}
  .visit__facts div{grid-template-columns:7rem 1fr}
  .coffee,.story,.visit{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  [data-depth]{transform:none!important}
}
.roast[data-r="light"]{--r:.28}.roast[data-r="mid"]{--r:.5}.roast[data-r="md"]{--r:.72}
.story__photo--big img{object-position:40% 50%}
.visit__facts dd{overflow-wrap:anywhere}