:root { --red:#ea241c; --ink:#101010; --cream:#f3f0e8; --steel:#b9bcb9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.hero { min-height:100svh; background:var(--red); color:#fff; position:relative; overflow:hidden; padding:22px 30px 26px; display:flex; flex-direction:column; }
.nav { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2; font-size:11px; font-weight:800; letter-spacing:.08em; }
.wordmark { font-weight:1000; font-size:31px; letter-spacing:-.14em; line-height:.8; transform:scaleX(1.08); } .wordmark span{ font-size:.5em; vertical-align:middle; margin:0 2px; }
.nav-links { display:flex; gap:26px; margin-left:auto; margin-right:38px; } .order-link { border:1px solid #fff; padding:10px 12px; }
.hero-grid { position:absolute; inset:0; opacity:.18; display:grid; grid-template-columns:repeat(6,1fr); pointer-events:none; } .hero-grid i { border-right:1px solid #fff; }
.hero-copy { position:relative; z-index:1; margin:auto 0 58px; max-width:1000px; }
.eyebrow,.section-label { font-weight:800; letter-spacing:.1em; font-size:10px; margin:0; }
h1,h2,.manifesto-text,h3 { font-weight:1000; letter-spacing:-.085em; line-height:.77; text-transform:uppercase; margin:0; }
h1 { font-size:clamp(82px,15.5vw,232px); max-width:1000px; } em { font-style:normal; color:var(--red); -webkit-text-stroke:1px currentColor; }
.hero h1 em { color:transparent; -webkit-text-stroke:2px #fff; }
.intro { max-width:240px; position:absolute; left:min(71vw,750px); bottom:9px; font-size:13px; line-height:1.3; font-weight:600; }
.hero-stamp { position:absolute; z-index:1; right:31px; bottom:96px; width:82px; height:82px; border:1px solid #fff; border-radius:50%; display:grid; place-content:center; text-align:center; font-size:9px; line-height:1.08; font-weight:bold; transform:rotate(13deg); } .hero-stamp b{font-size:12px;}
.scroll { position:relative; z-index:1; font-size:10px; font-weight:bold; letter-spacing:.09em; } .scroll span { margin-left:8px; font-size:16px; }
.manifesto { background:var(--steel); padding:26px 30px 80px; min-height:570px; position:relative; } .manifesto-text { font-size:clamp(54px,10.5vw,152px); margin-top:165px; } .manifesto-text span { color:transparent; -webkit-text-stroke:1.5px var(--ink); } .manifesto-note { width:210px; font-size:13px; line-height:1.35; position:absolute; right:10%; bottom:83px; }
.menu-section { background:#eceae4; padding:30px; display:grid; grid-template-columns:1fr 1.45fr; gap:50px; min-height:620px; } h2 { font-size:clamp(65px,9.4vw,140px); margin-top:132px; } .menu-list { align-self:end; } .menu-item { border-top:2px solid var(--ink); display:grid; grid-template-columns:52px 1fr 26px; padding:18px 0; gap:7px; } .menu-item span { font-size:11px; font-weight:bold; } h3 { font-size:42px; } .menu-item p { margin:8px 0 0; font-size:12px; } .menu-item b { font-size:22px; }
.daily { padding:30px; background:var(--ink); color:var(--cream); display:grid; grid-template-columns:1.08fr 1fr; gap:8vw; align-items:center; min-height:730px; } .tray { height:440px; border-radius:50%; background:radial-gradient(circle at 50% 46%,#f4f2ed 0 31%,#ccd0ce 32% 55%,#7c8281 56%,#bcc0bf 59% 66%,#717776 67% 70%,#aeb2b1 72%); position:relative; overflow:hidden; box-shadow:inset 0 0 25px #333; } .tray-tag { position:absolute; top:25px; left:31px; width:72px; height:72px; border:1px solid #171717; background:var(--red); border-radius:50%; display:grid; place-content:center; text-align:center; font-size:9px; font-weight:900; transform:rotate(-13deg); z-index:4; } .rice { width:145px; height:95px; border-radius:50%; background:#fcfcfa; position:absolute; top:130px; left:50%; transform:translateX(-50%); box-shadow:inset -15px -10px 20px #deded9; } .egg { width:130px; height:105px; border-radius:54% 48% 49% 46%; background:#fff8dd; position:absolute; top:210px; left:42%; transform:rotate(-14deg); z-index:2; } .egg:after { content:""; position:absolute; width:38px; height:38px; border-radius:50%; background:#f09e14; left:48px; top:27px; box-shadow:0 0 0 7px #efc65955; } .leaf { position:absolute; width:70px; height:130px; border-radius:100% 0 100% 0; background:#436536; z-index:3; } .leaf-one{left:21%;top:202px;transform:rotate(-27deg)} .leaf-two{right:18%;top:175px;transform:rotate(129deg)} .fork { position:absolute; color:#eae6dd; font-size:110px; right:25px; bottom:-7px; transform:rotate(24deg); }
.daily-copy h2 { margin-top:28px; } .daily-copy h2 em { color:transparent; -webkit-text-stroke:1px var(--cream); } .daily-copy > p:not(.section-label) { max-width:265px; margin:36px 0; font-size:14px; line-height:1.4; } .daily-copy a { font-size:11px; font-weight:bold; border-bottom:1px solid var(--cream); padding-bottom:7px; }
.visit { background:var(--red); color:#fff; padding:30px 30px 18px; min-height:620px; } .visit h2 { margin-top:120px; } .visit h2 em { color:transparent; -webkit-text-stroke:1.5px #fff; } .visit-info { border-top:1px solid #fff; margin-top:80px; padding-top:18px; display:grid; grid-template-columns:1fr 1fr auto; align-items:end; font-size:13px; } .visit-info p { font-size:9px; font-weight:bold; letter-spacing:.08em; margin:0 0 4px; } .visit-info a { font-weight:bold; border:1px solid #fff; padding:11px; } footer { border-top:1px solid #fff; margin-top:72px; padding-top:15px; display:flex; align-items:center; justify-content:space-between; font-size:9px; font-weight:bold; letter-spacing:.05em; } footer .wordmark { font-size:25px; }
@media (max-width:640px) { .hero,.manifesto,.menu-section,.daily,.visit { padding-left:18px; padding-right:18px; } .nav-links { display:none; } .wordmark{font-size:27px}.hero-copy { margin-bottom:95px; } h1 { font-size:22vw; } .intro { left:0; bottom:-72px; } .hero-stamp { right:18px; bottom:111px; } .manifesto{min-height:500px}.manifesto-text{margin-top:160px;font-size:16.3vw}.manifesto-note{left:18px;bottom:36px}.menu-section,.daily{grid-template-columns:1fr;gap:22px}.menu-section{padding-bottom:60px}.menu-section h2{margin-top:70px}.menu-list{margin-top:50px}.daily{padding-top:50px;padding-bottom:60px}.tray{height:330px}.daily-copy h2{font-size:16vw}.visit{min-height:600px}.visit h2{font-size:18vw;margin-top:130px}.visit-info{grid-template-columns:1fr 1fr;gap:24px 4px;margin-top:65px}.visit-info a{grid-column:span 2;text-align:center}.visit footer{margin-top:48px;flex-wrap:wrap;gap:13px}.visit footer p:nth-child(2){display:none} }

/* SAPA brand and feed update */
.nav-logo { width:48px; height:48px; object-fit:contain; object-position:left center; }
.hero-mark { position:absolute; z-index:1; right:clamp(22px,5vw,78px); bottom:72px; width:clamp(105px,16vw,185px); height:auto; object-fit:contain; }
.social { padding:30px; background:var(--ink); color:var(--cream); display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:center; min-height:730px; }
.social-copy h2 { margin-top:28px; }.social-copy h2 em { color:transparent; -webkit-text-stroke:1px var(--cream); }.social-copy > p:not(.section-label) { max-width:265px; margin:36px 0; font-size:16px; line-height:1.4; }.social-copy a { font-size:13px; font-weight:bold; border-bottom:1px solid var(--cream); padding-bottom:7px; }
.feed-frame { display:block; max-height:510px; overflow:hidden; border:1px solid #555; background:#252525; }.feed-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 58%; filter:contrast(1.04) saturate(1.04); }.footer-logo { width:40px; height:40px; object-fit:contain; object-position:left center; }
@media (max-width:640px) { .hero,.manifesto,.menu-section,.social,.visit { padding-left:18px; padding-right:18px; }.hero-mark{right:18px;bottom:92px;width:105px}.menu-section,.social{grid-template-columns:1fr;gap:22px}.social{padding-top:50px;padding-bottom:60px}.social-copy h2{font-size:16vw}.feed-frame{max-height:430px} }

/* Embedded Instagram profile and photo booth entry */
.instagram-feed { min-width:0; width:100%; max-width:540px; justify-self:center; }
.instagram-feed .instagram-media { width:100% !important; min-width:0 !important; max-width:540px !important; margin:0 !important; background:#fff; color:#111; padding:16px; border-radius:3px; }
.instagram-feed iframe.instagram-media { padding:0; }
.feed-fallback { font-size:13px; line-height:1.5; margin:16px 0 0; }
.feed-fallback a { text-decoration:underline; text-underline-offset:4px; }
.social-copy .booth-cta { margin:28px 0 0; max-width:none; }
a:focus-visible { outline:2px solid currentColor; outline-offset:5px; }