/* E+ROSE — site design system. Paper, ink, photographs. */
:root{
  --paper:#F4F3F1; --ink:#111111; --soft:#3d3a36; --mute:#8A8A8A; --hair:rgba(17,17,17,.12); --rose:#E23D7B;
  --sans:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --gx:clamp(20px,3.2vw,48px);
  --measure:62ch;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
::selection{background:#e6e4e0}
.mute{color:var(--mute)}
.skip-nav{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip-nav:focus{left:var(--gx)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gx);font-size:14px;color:var(--soft);transition:color .6s}
.site-header .wordmark{letter-spacing:.12em;font-weight:500;padding:6px 0}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav a{padding:6px 0}
.site-nav a:not(.order):hover,.wordmark:hover{color:var(--mute)}
body.page .site-header{background:linear-gradient(var(--paper) 55%,transparent);padding-bottom:30px}

/* order button */
.order{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:34px;padding:0 16px!important;border:1px solid currentColor;font-size:14px;line-height:1;transition:background .25s,border-color .25s,color .25s}
.order .lbl{transition:opacity .15s}
.order::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:opacity .2s .05s,transform .3s .05s;
 background:linear-gradient(#111,#111) center/1px 100% no-repeat,linear-gradient(#111,#111) center/100% 1px no-repeat}
.order:hover{background:#fff;border-color:#fff;color:#111}
.order:hover .lbl{opacity:0}
.order:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.page .order:hover,body.landing:not(.s2) .order:hover{border-color:#111}

/* ---------- landing (index) ---------- */
html.landing,body.landing{overflow:hidden;height:100%}
body.landing .content,body.landing .site-footer{display:none}
.hero{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100lvh;min-height:100%;display:grid;place-items:center;cursor:pointer;overflow:hidden;background:var(--paper);z-index:5}
body.view-discover .hero{display:none}
.hero .mark{font-size:clamp(72px,17vw,300px);line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--soft);transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .5s;user-select:none;will-change:transform;position:relative;z-index:2}
.hero .mark span{font-weight:400}
.hero.s1 .mark{transform:scale(1.45)}
.hero.s2 .mark{transform:scale(1.9);opacity:0}
.hero .cup{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;opacity:0;transform:scale(1.04);transition:opacity .8s .1s,transform 1.2s cubic-bezier(.2,.7,.2,1) .1s;pointer-events:none}
.hero .cup img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero.s2 .cup{opacity:1;transform:scale(1)}
body.s2 .site-header{color:#fff}

/* discover — gate: quote → bigger quote → bowl → release */
body.gate-on{overflow:hidden;height:100%}
html.gate-on{overflow:hidden;height:100%}
.gate{position:relative;height:100svh;overflow:hidden}
body.gate-on .gate{position:fixed;top:0;left:0;right:0;bottom:0;height:100lvh;z-index:4;background:var(--paper)}
.g-quote{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gx);transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s;transform-origin:left center}
.g-quote p{font-family:var(--serif);font-size:clamp(34px,5.6vw,96px);line-height:.98;letter-spacing:-.025em;text-wrap:balance;max-width:16ch}
.g-quote p i{color:var(--mute)}
.g-quote small{display:block;margin-top:4vh;font-size:14px;color:var(--mute)}
.gate.g1 .g-quote{transform:scale(1.28)}
.gate.g2 .g-quote{transform:scale(1.6);opacity:0}
.g-bowl{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s .1s,transform 1.2s cubic-bezier(.2,.7,.2,1) .1s}
.g-bowl img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.g-bowl h2{position:absolute;left:var(--gx);bottom:6vh;color:var(--ink);font-family:var(--serif);font-size:clamp(36px,5.6vw,92px);line-height:.98;letter-spacing:-.025em;font-weight:400}
.gate.g2 .g-bowl{opacity:1;transform:scale(1)}
body.gate-on.g2 .site-header{color:#fff}
body.view-discover:not(.gate-on) .gate .g-quote{display:none}
body.view-discover:not(.gate-on) .gate .g-bowl{opacity:1;transform:none}
/* discover */
.line{min-height:100svh;display:flex;align-items:center;padding:16vh var(--gx) 14vh}
.line p{font-family:var(--serif);font-size:clamp(40px,7.4vw,124px);line-height:.98;letter-spacing:-.025em;text-wrap:balance;max-width:14ch}
.line p i{color:var(--mute)}
.line small{display:block;margin-top:5vh;font-family:var(--sans);font-size:14px;color:var(--mute);letter-spacing:0}
.menu{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,80px);padding:6vh var(--gx) 14vh;align-items:start}
.menu h2{font-size:14px;color:var(--mute);font-weight:400;margin-bottom:22px}
.menu .row{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--hair);transition:opacity .2s}
.menu .row:last-child{border-bottom:1px solid var(--hair)}
.menu .row .n{font-family:var(--serif);font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:-.02em}
.menu .row .d{font-size:15px;color:var(--mute);align-self:end;max-width:44ch}
.menu:has(.row:hover) .row:not(:hover){opacity:.35}
.reveal{position:sticky;top:12vh;aspect-ratio:4/5;overflow:hidden;background:#ECEBE8}
.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.reveal img.on{opacity:1}
.boom img{width:100%;height:min(88svh,900px);object-fit:cover}
.boom h2{font-family:var(--serif);font-size:clamp(36px,5.6vw,92px);line-height:.98;letter-spacing:-.025em;font-weight:400;padding:5vh var(--gx) 0;text-wrap:balance}
.places{padding:18vh 0 0}
.places h2{font-family:var(--serif);font-size:clamp(40px,7.4vw,124px);line-height:.95;letter-spacing:-.025em;font-weight:400;padding:0 var(--gx) 6vh}
.places h2 i{color:var(--mute)}
.strip{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 2px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 min(72vw,480px);scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.strip figcaption{font-size:14px;padding:10px 4px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:560px;padding:7vh var(--gx) 0;font-size:15px;line-height:1.9}
.cols h3{font-size:14px;color:var(--mute);font-weight:400;margin-bottom:4px}
.cols a{display:block}.cols a:hover{color:var(--mute)}
.founder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);padding:20vh var(--gx) 16vh;align-items:center}
.founder img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.founder p{font-family:var(--serif);font-size:clamp(26px,2.9vw,44px);line-height:1.12;letter-spacing:-.015em;max-width:22ch}
.founder small{display:block;margin-top:28px;font-size:14px;color:var(--mute)}
.founder small a{border-bottom:1px solid var(--hair)}

/* ---------- inner pages ---------- */
.content{padding:calc(18vh + 20px) 0 12vh}
.content>*{padding-left:var(--gx);padding-right:var(--gx)}
.content>h1{font-family:var(--serif);font-size:clamp(44px,6.8vw,112px);line-height:.96;letter-spacing:-.025em;font-weight:400;max-width:16ch;text-wrap:balance;margin-bottom:5vh}
.content>h1 em{font-style:italic;color:var(--mute)}
.content>h1+p{font-size:clamp(17px,1.4vw,21px);line-height:1.5;max-width:var(--measure);color:var(--soft);margin-bottom:10vh}
.content>h2{font-family:var(--serif);font-size:clamp(32px,4.2vw,64px);line-height:1;letter-spacing:-.02em;font-weight:400;max-width:20ch;text-wrap:balance;margin:14vh 0 4vh}
.content>h2 em,.content>h3 em{font-style:italic;color:var(--mute)}
.content>h3{font-family:var(--serif);font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.015em;font-weight:400;margin:8vh 0 2vh}
.content>h4{font-size:15px;font-weight:500;margin:5vh 0 1vh}
.content>p{max-width:var(--measure);margin-bottom:1.4em;color:var(--soft);font-size:16px;line-height:1.6}
.content>p a{border-bottom:1px solid var(--hair)}
.content>p a:hover{color:var(--mute)}
.content>.lbl{font-size:14px;color:var(--mute);margin:10vh 0 18px;max-width:none}
.content>h2+.lbl,.content>.lbl+.lbl{margin-top:0}
.content>.lbl+h2{margin-top:0}
.content>.meta{font-family:var(--serif);font-style:italic;color:var(--mute);font-size:17px;margin-top:-1vh;margin-bottom:6vh}
.content>ul,.content>ol{max-width:var(--measure);margin:0 0 3vh;padding-left:calc(var(--gx) + 1.2em);color:var(--soft);line-height:1.7}
.content>blockquote{font-family:var(--serif);font-size:clamp(24px,2.6vw,40px);line-height:1.15;letter-spacing:-.015em;max-width:26ch;margin:4vh 0}
.content>blockquote strong{font-weight:400}
.content .pic{padding:0;margin:8vh 0}
.content .pic img{width:100%;height:auto;max-height:90vh;object-fit:cover}
.content .gallery{display:grid;gap:2px;padding:0 2px;margin:8vh 0}
.content .gallery.n2{grid-template-columns:1fr 1fr}.content .gallery.n3{grid-template-columns:repeat(3,1fr)}.content .gallery.n4{grid-template-columns:repeat(4,1fr)}
.content .gallery img{width:100%;aspect-ratio:4/5;object-fit:cover}
.content .actions{display:flex;flex-wrap:wrap;gap:14px;margin:3vh 0 6vh}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border:1px solid var(--ink);font-size:14px;line-height:1;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:#fff}
.actions.end{margin-top:12vh}

/* rows: menu items, FAQs, values */
.content .rows{margin:0 0 6vh}
.rows .row{display:grid;grid-template-columns:minmax(160px,300px) 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--hair)}
.rows .row:last-child{border-bottom:1px solid var(--hair)}
.rows .n{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.05;letter-spacing:-.015em}
.rows .d{font-size:15px;color:var(--mute);align-self:end;line-height:1.55}
.rows .d strong{color:var(--soft);font-weight:500}

/* cards: locations, reviews, team, articles */
.content .cards{display:grid;gap:56px clamp(20px,3vw,44px);margin:2vh 0 8vh}
.cards.cols-3{grid-template-columns:repeat(3,1fr)}.cards.cols-2{grid-template-columns:repeat(2,1fr)}.cards.cols-1{grid-template-columns:1fr;max-width:var(--measure)}
.card{border-top:1px solid var(--hair);padding-top:16px;font-size:15px;color:var(--soft);line-height:1.55}
.card .pic{margin:0 0 16px;padding:0}
.card .pic img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card h3{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.05;letter-spacing:-.015em;font-weight:400;margin:0 0 8px}
.card h2{font-family:var(--serif);font-size:clamp(24px,2.2vw,34px);line-height:1.05;font-weight:400;margin:0 0 8px}
.card p{margin-bottom:8px}
.card .lbl,.card .meta{font-size:13px;color:var(--mute);margin-bottom:6px}
.card .meta{font-family:var(--serif);font-style:italic;font-size:16px}
.card blockquote{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.2;margin:0 0 12px}
.card .actions{margin:12px 0 0;gap:10px}
.card .btn{height:34px;padding:0 16px;font-size:13px}
.card ul,.card ol{padding-left:1.2em;margin:6px 0}
.card .rows{margin:8px 0}
.card .rows .row{grid-template-columns:1fr;gap:2px;padding:10px 0}
.card .rows .n{font-family:var(--sans);font-size:15px;letter-spacing:0}

/* forms */
.form{max-width:640px;margin:2vh 0 8vh;display:grid;gap:18px}
.form label{display:block;font-size:13px;color:var(--mute);margin-bottom:6px}
.form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.form select,.form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;font:inherit;font-size:16px;color:var(--ink);border-radius:0}
.form textarea{min-height:140px;resize:vertical}
.form select{appearance:none}
.form input[type=checkbox],.form input[type=radio]{margin-right:8px;accent-color:var(--ink)}
.form fieldset{border:0}
.form legend{font-size:13px;color:var(--mute);margin-bottom:8px}
.form div,.form fieldset{display:grid;gap:14px}
.form .btn,.form button{justify-self:start;margin-top:8px}
.form small,.form p{font-size:13px;color:var(--mute)}

/* footer */
.site-footer{border-top:1px solid var(--hair);padding:56px var(--gx) 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;font-size:14px;line-height:1.75}
.site-footer .col{display:flex;flex-direction:column}
.site-footer a:hover{color:var(--mute)}
.site-footer .small{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--mute);font-size:12.5px;margin-top:48px;flex-wrap:wrap;gap:12px}

@media (max-width:860px){
  .menu{grid-template-columns:1fr}.reveal{display:none}.menu .row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .founder{grid-template-columns:1fr}.founder img{max-width:420px}
  .cards.cols-3,.cards.cols-2{grid-template-columns:1fr 1fr}
  .rows .row{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .content .gallery.n3,.content .gallery.n4{grid-template-columns:1fr 1fr}
  .site-footer{grid-template-columns:1fr 1fr}
  .content{padding-top:14vh}
}
@media (max-width:540px){
  .cards.cols-3,.cards.cols-2{grid-template-columns:1fr}.cols{grid-template-columns:1fr}.site-footer{grid-template-columns:1fr}
  .site-nav{gap:16px}
}