@font-face { font-family: PJS; src: url("assets/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root { --black:#090807; --espresso:#251915; --brown:#6c4634; --tan:#c6a586; --cream:#f4e9d9; --white:#fffefa; --line:#2b1e18; }
* { box-sizing:border-box; }
html { background:#b2aaa1; }
body { margin:0; font-family:PJS,Arial,sans-serif; color:var(--black); -webkit-font-smoothing:antialiased; }
.canvas { width:min(100%,430px); margin:0 auto; min-height:100vh; overflow:hidden; background:var(--cream); box-shadow:0 22px 70px rgba(0,0,0,.2); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.utility { height:44px; padding:0 19px; display:flex; align-items:center; justify-content:space-between; background:var(--black); color:var(--cream); border-bottom:1px solid rgba(255,255,255,.4); font-size:9px; font-weight:750; letter-spacing:.13em; white-space:nowrap; }
.utility i { margin:0 4px; font-style:normal; }

.hero { position:relative; min-height:323px; padding:19px 19px 18px; overflow:hidden; border-bottom:2px solid var(--black); background:var(--tan); }
.hero::before { content:""; position:absolute; z-index:0; right:-110px; top:14px; width:280px; height:280px; border:1.5px solid rgba(38,25,20,.42); border-radius:50%; }
.hero::after { content:""; position:absolute; z-index:0; right:-74px; top:50px; width:208px; height:208px; border:1px solid rgba(38,25,20,.26); border-radius:50%; }
.hero-meta { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; }
.round-tag { display:inline-flex; align-items:center; min-height:29px; padding:6px 13px; border:1.5px solid var(--black); border-radius:99px; background:var(--cream); font-size:9px; font-weight:800; letter-spacing:.13em; transform:rotate(-3deg); }
.tiny-mark { margin-right:4px; font-size:28px; line-height:1; }
.logo-sticker { position:absolute; z-index:2; right:7px; top:4px; width:145px; height:135px; transform:rotate(10deg); filter:drop-shadow(5px 8px 0 rgba(37,25,21,.32)); }
.logo-sticker img { width:100%; height:100%; object-fit:contain; }
.hero-type { position:relative; z-index:1; display:flex; flex-direction:column; width:100%; margin-top:29px; line-height:.77; letter-spacing:-.09em; }
.hero-type span { display:block; font-size:clamp(63px,20vw,92px); font-weight:220; }
.hero-type span:nth-child(2) { margin-left:-4px; }
.hero-type b { display:block; margin-top:9px; font-size:clamp(76px,24vw,108px); font-weight:800; letter-spacing:-.085em; }
.hero-foot { position:relative; z-index:3; display:flex; align-items:end; justify-content:space-between; gap:10px; margin-top:19px; padding-top:10px; border-top:1.5px solid var(--black); }
.hero-foot p { margin:0; font-size:11px; line-height:1.55; font-weight:650; }
.circle-note { width:51px; height:51px; flex:0 0 51px; display:grid; place-content:center; border:1.5px solid var(--black); border-radius:50%; font-size:10px; font-weight:800; line-height:1.1; text-align:center; transform:rotate(12deg); }
.ribbon { height:34px; display:flex; align-items:center; justify-content:space-around; gap:16px; overflow:hidden; border-bottom:2px solid var(--black); color:var(--cream); background:var(--espresso); font-size:9px; font-weight:750; letter-spacing:.16em; white-space:nowrap; }
.ribbon span:nth-child(2n) { font-size:17px; }

.link-stack { padding:17px 14px 28px; display:grid; gap:17px; background:var(--cream); }
.menu-card { padding:15px 15px 11px; min-height:172px; color:var(--white); background:var(--espresso); border:2px solid var(--black); box-shadow:5px 5px 0 var(--brown); }
.card-small,.card-bottom,.access-top,.studio-small,.panel-top { display:flex; justify-content:space-between; gap:8px; font-size:9px; line-height:1.2; font-weight:800; letter-spacing:.13em; }
.card-small { color:#d8bfa7; }
.menu-card-main { display:flex; justify-content:space-between; align-items:end; gap:8px; margin-top:13px; }
.menu-card h2 { margin:0; font-size:38px; line-height:.91; letter-spacing:-.07em; font-weight:800; }
.cream-dot { color:var(--tan); }
.round-arrow { display:grid; place-items:center; width:51px; height:51px; flex:0 0 51px; border-radius:50%; color:var(--espresso); background:var(--cream); font-size:28px; font-weight:400; }
.card-bottom { align-items:center; margin-top:14px; padding-top:8px; border-top:1px solid rgba(244,233,217,.45); color:#d8bfa7; font-size:8px; }
.barcode { display:block; width:55px; height:13px; background:repeating-linear-gradient(90deg,var(--cream) 0 2px,transparent 2px 4px,var(--cream) 4px 5px,transparent 5px 8px); }
.access-card { position:relative; min-height:194px; padding:15px 15px 16px; background:var(--white); border:2px solid var(--black); box-shadow:5px 5px 0 #ac8369; overflow:hidden; }
.access-card::before { content:""; position:absolute; right:-61px; top:42px; width:205px; height:205px; border:1.5px solid rgba(37,25,21,.28); border-radius:50%; }
.access-top { position:relative; z-index:1; align-items:center; }
.access-star { font-size:23px; line-height:1; }
.access-card h2 { position:relative; z-index:1; margin:17px 0 14px; font-size:39px; line-height:.86; letter-spacing:-.085em; font-weight:800; }
.access-card h2 span { color:var(--brown); }
.access-foot { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:8px; }
.access-foot p { max-width:190px; margin:0; color:#514239; font-size:10px; line-height:1.4; }
.soon-pill { flex:0 0 auto; padding:7px 8px; border:1.5px solid var(--black); border-radius:99px; background:var(--tan); font-size:8px; font-weight:800; letter-spacing:.1em; transform:rotate(-5deg); }

.coffee-panel { padding:15px 14px 24px; background:#b98f71; border-top:2px solid var(--black); border-bottom:2px solid var(--black); }
.panel-top { padding-bottom:11px; border-bottom:1.5px solid var(--black); }
.coffee-stage { position:relative; height:303px; margin-top:13px; overflow:hidden; background:radial-gradient(circle at 70% 48%,rgba(244,233,217,.85) 0 90px,transparent 91px),radial-gradient(var(--brown) .75px,transparent 1px) 0 0 / 8px 8px,#cba889; border:1.5px solid var(--black); }
.coffee-stage::after { content:""; position:absolute; inset:13px; border:1px solid rgba(37,25,21,.3); pointer-events:none; }
.outline-word { position:absolute; top:14px; left:14px; font-size:59px; font-weight:800; line-height:1; letter-spacing:-.085em; color:transparent; -webkit-text-stroke:1.4px var(--espresso); }
.drawn-star { position:absolute; right:17px; top:47px; color:var(--espresso); font-size:47px; line-height:1; transform:rotate(-14deg); }
.coffee-stage img { position:absolute; z-index:1; left:50%; bottom:-20px; width:290px; height:290px; object-fit:contain; transform:translateX(-50%) rotate(-6deg); filter:drop-shadow(0 16px 8px rgba(37,25,21,.28)); }
.photo-tag { position:absolute; z-index:2; right:10px; bottom:10px; padding:6px 9px; color:var(--cream); background:var(--espresso); font-size:8px; font-weight:800; letter-spacing:.08em; }
.panel-copy { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:18px; }
.panel-copy h2 { margin:0; font-size:29px; line-height:.95; font-weight:800; letter-spacing:-.065em; }
.panel-copy p { max-width:133px; margin:0; font-size:10px; line-height:1.45; }

.studio-card { position:relative; margin:18px 14px 23px; min-height:169px; padding:15px; background:var(--cream); border:2px solid var(--black); border-radius:25px 25px 5px 5px; box-shadow:5px 5px 0 var(--espresso); overflow:hidden; }
.studio-card h2 { position:relative; z-index:1; margin:18px 0 5px; font-size:38px; line-height:.84; font-weight:800; letter-spacing:-.08em; }
.studio-card h2 span { position:relative; top:-17px; margin-left:3px; font-size:13px; letter-spacing:0; }
.studio-card p { position:relative; z-index:1; margin:12px 0 0; max-width:245px; font-size:10px; }
.studio-spark { position:absolute; right:22px; bottom:21px; font-size:57px; color:var(--brown); }

footer { background:var(--black); color:var(--cream); padding:17px 14px 20px; }
.footer-top,.footer-bottom { display:flex; justify-content:space-between; gap:10px; font-size:9px; font-weight:800; letter-spacing:.13em; }
.social-row { display:flex; gap:10px; margin:27px 0 34px; }
.social-row span { flex:1; display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 13px; border:1px solid rgba(244,233,217,.65); border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.1em; }
.social-row b { font-size:16px; font-weight:400; }
.footer-bottom { padding-top:11px; border-top:1px solid rgba(244,233,217,.38); font-size:8px; }

@media (max-width:340px) {
  .utility { padding:0 13px; font-size:8px; }
  .hero { padding-left:14px; padding-right:14px; }
  .hero-type span { font-size:60px; }
  .hero-type b { font-size:73px; }
  .logo-sticker { right:1px; width:132px; height:125px; }
  .hero-foot p { font-size:10px; }
  .menu-card h2 { font-size:34px; }
  .access-card h2 { font-size:35px; }
}
@media (min-width:431px) { .canvas { margin-top:30px; margin-bottom:30px; } }

a { color:inherit; text-decoration:none; }
a[href] { cursor:pointer; }
a[href]:focus-visible { outline:3px solid #2563eb; outline-offset:4px; }
a[href]:active { transform:translate(2px,2px); }
.link-stack { gap:15px; }
.menu-card,.access-card,.studio-card { display:block; }
.menu-card h2,.access-card h2,.studio-card h2 { letter-spacing:-.03em; }
.quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.quick-card { display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:110px; padding:12px; border:2px solid var(--black); background:var(--tan); box-shadow:4px 4px 0 var(--espresso); }
.quick-card-dark { color:var(--cream); background:var(--brown); }
.quick-index { font-size:8px; font-weight:800; letter-spacing:.12em; }
.quick-card strong { display:flex; align-items:center; justify-content:space-between; gap:4px; font-size:27px; line-height:1; font-weight:800; letter-spacing:-.07em; }
.quick-card strong span { font-size:24px; font-weight:400; }
.quick-card small { font-size:7px; font-weight:800; letter-spacing:.08em; line-height:1.25; }
.coffee-panel { padding:21px 14px 27px; background:#eee1cf; }
.panel-top { color:#5d463b; border-bottom:1px solid rgba(37,25,21,.42); }
.coffee-stage { height:312px; margin-top:17px; border:0; border-radius:180px 180px 6px 6px; background:#d8b89d; }
.coffee-stage::after { content:none; }
.coffee-stage-label { position:absolute; z-index:2; top:26px; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--espresso); font-size:10px; font-weight:800; letter-spacing:.16em; }
.coffee-stage img { bottom:-3px; width:272px; height:272px; transform:translateX(-50%); filter:drop-shadow(0 13px 13px rgba(37,25,21,.2)); }
.photo-tag { right:auto; left:50%; bottom:11px; transform:translateX(-50%); white-space:nowrap; padding:6px 11px; border:1px solid rgba(37,25,21,.34); border-radius:99px; color:var(--espresso); background:rgba(255,254,250,.9); font-size:7px; }
.panel-copy { align-items:end; gap:10px; margin-top:20px; }
.panel-copy h2 { font-size:31px; line-height:.98; letter-spacing:-.04em; }
.panel-copy p { max-width:210px; margin:10px 0 0; font-size:10px; line-height:1.45; }
.panel-copy a { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:10px 0 7px; border-bottom:1px solid var(--espresso); font-size:8px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.panel-copy a span { font-size:17px; font-weight:400; }
.is-pending { cursor:default; }
.quick-card.is-pending { opacity:.67; }
.social-row a { flex:1; display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 13px; border:1px solid rgba(244,233,217,.65); border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.1em; }
.social-row a[aria-disabled="true"] { opacity:.5; cursor:default; }
@media (max-width:340px) { .hero-foot p { max-width:200px; } .quick-card strong { font-size:20px; } .quick-card strong span { font-size:18px; } .quick-card { padding:10px; } .panel-copy h2 { font-size:27px; } .panel-copy a { font-size:7px; } }

/* Motion edition: readable type and a lighter hierarchy at phone widths. */
.utility { font-size:10px; }
.hero-foot p { max-width:285px; font-size:14px; line-height:1.48; }
.ribbon { display:block; height:36px; }
.ribbon-track { display:flex; width:max-content; height:100%; }
.ribbon-group { display:flex; flex:0 0 auto; align-items:center; gap:22px; padding-right:22px; height:100%; }
.ribbon-group span { font-size:10px; font-weight:800; letter-spacing:.13em; }
.ribbon-group span:nth-child(even) { font-size:16px; }
.card-small,.card-bottom,.access-top,.studio-small,.panel-top { font-size:10px; }
.card-bottom { font-size:10px; line-height:1.35; }
.quick-index { font-size:10px; line-height:1.2; }
.quick-card { min-height:120px; }
.quick-card small { font-size:10px; line-height:1.3; letter-spacing:.035em; }
.quick-card strong { font-size:25px; }
.access-card { min-height:151px; box-shadow:3px 3px 0 #ac8369; }
.access-card h2 { margin:9px 0 11px; font-size:32px; line-height:.92; }
.access-foot p { max-width:185px; font-size:13px; line-height:1.45; }
.soon-pill { font-size:9px; }
.coffee-panel { padding-top:24px; }
.panel-top { font-size:10px; }
.panel-copy p { max-width:195px; font-size:14px; line-height:1.5; }
.panel-copy a { font-size:12px; }
.studio-card p { font-size:14px; line-height:1.45; }
.footer-top,.footer-bottom { font-size:10px; }
.footer-bottom { font-size:10px; }
.photo-tag { font-size:9px; }
a[href]:focus-visible { outline:3px solid var(--black); outline-offset:4px; }
a[href]:active { transform:translate(2px,2px) scale(.99); }

/* The intro is added only by a tiny head script; the page is complete without JS. */
.intro-screen { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:22px; color:var(--cream); background:var(--espresso); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(0); }
.intro-inner { width:min(100%,430px); min-height:320px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; position:relative; }
.intro-index { display:flex; width:100%; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid rgba(244,233,217,.6); font-size:10px; font-weight:800; letter-spacing:.15em; }
.intro-inner img { width:148px; height:148px; margin:25px 0 6px auto; object-fit:contain; transform:rotate(8deg); }
.intro-inner p { margin:0; font-size:clamp(42px,13vw,72px); line-height:.92; font-weight:250; letter-spacing:-.08em; }
.intro-inner p strong { font-weight:800; }
.intro-strokes { display:flex; gap:8px; width:100%; margin-top:30px; }
.intro-strokes i { display:block; flex:1; height:4px; background:var(--tan); transform:scaleX(.1); transform-origin:left; }
html.intro-pending .intro-screen { opacity:1; visibility:visible; pointer-events:auto; }
html.intro-pending.intro-exiting .intro-screen { transform:translateY(-102%); transition:transform .46s cubic-bezier(.68,0,.24,1); }

@media (hover:hover) {
  .menu-card,.quick-card,.studio-card { transition:transform .18s ease,box-shadow .18s ease; }
  .menu-card:hover,.quick-card:hover,.studio-card:hover { transform:translate(-2px,-2px); }
  .menu-card:hover { box-shadow:7px 7px 0 var(--brown); }
  .quick-card:hover { box-shadow:6px 6px 0 var(--espresso); }
  .studio-card:hover { box-shadow:7px 7px 0 var(--espresso); }
  .round-arrow,.quick-card strong span,.panel-copy a span,.studio-spark { transition:transform .2s ease; }
  .menu-card:hover .round-arrow,.quick-card:hover strong span,.panel-copy a:hover span { transform:translate(4px,-4px); }
  .studio-card:hover .studio-spark { transform:rotate(18deg); }
}

@media (prefers-reduced-motion:no-preference) {
  html.intro-pending .intro-inner img { animation:intro-sticker .55s cubic-bezier(.2,.9,.2,1) both; }
  html.intro-pending .intro-strokes i { animation:ink-fill .55s ease-out both; }
  html.intro-pending .intro-strokes i:nth-child(2) { animation-delay:.1s; }
  html.intro-pending .intro-strokes i:nth-child(3) { animation-delay:.2s; }
  html.motion-ready .hero-meta { animation:rise-in .48s ease-out both; }
  html.motion-ready .hero-type span:first-child { animation:headline-in .68s cubic-bezier(.16,1,.3,1) .06s both; }
  html.motion-ready .hero-type span:nth-child(2) { animation:headline-in .7s cubic-bezier(.16,1,.3,1) .14s both; }
  html.motion-ready .hero-type b { animation:headline-in .73s cubic-bezier(.16,1,.3,1) .22s both; }
  html.motion-ready .logo-sticker { animation:sticker-drop .66s cubic-bezier(.18,1.35,.32,1) .18s both; }
  html.motion-ready .hero-foot { animation:rise-in .5s ease-out .34s both; }
  html.motion-ready .menu-card { animation:rise-in .56s cubic-bezier(.2,.8,.2,1) .27s both; }
  html.motion-ready .quick-card:first-child { animation:rise-in .55s cubic-bezier(.2,.8,.2,1) .37s both; }
  html.motion-ready .quick-card:last-child { animation:rise-in .55s cubic-bezier(.2,.8,.2,1) .46s both; }
  .ribbon.is-visible .ribbon-track { animation:ribbon-loop 21s linear infinite; }
  .motion-pending .coffee-stage,.motion-pending.studio-card,.motion-pending.access-card { opacity:0; transform:translateY(17px); }
  .motion-pending.is-visible .coffee-stage,.motion-pending.is-visible.studio-card,.motion-pending.is-visible.access-card { opacity:1; transform:translateY(0); transition:opacity .55s ease,transform .58s cubic-bezier(.2,.8,.2,1); }
  .coffee-panel.is-visible .coffee-stage img { animation:coffee-lift .68s cubic-bezier(.2,.8,.2,1) .1s both; }
  .coffee-panel.is-visible .photo-tag { animation:photo-tag-in .46s ease-out .35s both; }
  .access-card.is-visible .soon-pill { animation:stamp-settle .43s cubic-bezier(.2,1.2,.3,1) .2s both; }
  .studio-card.is-visible .studio-spark { animation:star-turn .55s ease-out .16s both; }
  @keyframes intro-sticker { from { opacity:0; transform:translateY(26px) rotate(-12deg) scale(.85); } to { opacity:1; transform:translateY(0) rotate(8deg) scale(1); } }
  @keyframes ink-fill { from { transform:scaleX(.1); } to { transform:scaleX(1); } }
  @keyframes rise-in { from { opacity:0; transform:translateY(17px); } to { opacity:1; transform:translateY(0); } }
  @keyframes headline-in { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
  @keyframes sticker-drop { from { opacity:0; transform:translateY(-16px) rotate(-12deg) scale(.8); } to { opacity:1; transform:translateY(0) rotate(10deg) scale(1); } }
  @keyframes ribbon-loop { to { transform:translateX(-50%); } }
  @keyframes stamp-settle { from { opacity:0; transform:rotate(4deg) scale(.9); } to { opacity:1; transform:rotate(-5deg) scale(1); } }
  @keyframes star-turn { from { opacity:.2; transform:rotate(-70deg) scale(.7); } to { opacity:1; transform:rotate(0) scale(1); } }
  @keyframes coffee-lift { from { opacity:.65; transform:translateX(-50%) translateY(22px) scale(.96); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
  @keyframes photo-tag-in { from { opacity:0; transform:translateX(-50%) translateY(9px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .ribbon { display:flex; align-items:center; justify-content:center; }
  .ribbon-track { width:auto; }
  .ribbon-group:nth-child(2),.ribbon-group span:nth-child(n+3) { display:none; }
  .intro-screen { display:none; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media (max-width:360px) {
  .utility { font-size:9px; }
  .hero-foot p { max-width:225px; font-size:13px; }
  .quick-card { padding:10px; }
  .quick-card strong { font-size:22px; }
  .quick-card strong span { font-size:19px; }
  .quick-card small { font-size:10px; }
  .access-foot p { max-width:170px; }
  .panel-copy { display:block; }
  .panel-copy p { max-width:260px; margin-top:10px; }
  .panel-copy a { width:max-content; margin-top:12px; }
  .studio-card p { max-width:185px; }
}