:root {
  --cream: #f7eddc;
  --paper: #fffaf0;
  --ink: #292820;
  --pink: #f4b8c9;
  --red: #d94c43;
  --coffee: #643b29;
  --green: #456951;
  --line: rgba(41, 40, 32, 0.22);
  --shell: min(1400px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
body::after { position: fixed; inset: 0; z-index: 99; pointer-events: none; content: ""; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { margin-bottom: 0; font-family: Georgia, "Times New Roman", serif; line-height: .96; letter-spacing: -.055em; }
em { color: var(--red); font-weight: 400; }
::selection { background: var(--pink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 200; padding: .7rem 1rem; color: #fff; background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.demo-banner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .6rem 32px; color: #fff; background: var(--ink); font-size: .7rem; }
.demo-banner p { margin: 0; }
.demo-banner a { color: var(--pink); font-weight: 800; }
.site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; min-height: 82px; padding: 0 32px; background: rgba(247,237,220,.92); border-bottom: 1px solid var(--ink); backdrop-filter: blur(15px); }
.brand { display: inline-flex; gap: .7rem; align-items: center; width: max-content; font-size: .76rem; font-weight: 900; letter-spacing: .13em; }
.brand > span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; color: var(--paper); background: var(--red); border: 1px solid var(--ink); border-radius: 50%; font-family: Georgia,serif; font-size: 1.2rem; font-style: italic; box-shadow: 3px 3px 0 var(--ink); }
nav { display: flex; gap: 2rem; align-items: center; }
nav a { font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.pill { justify-self: end; padding: .75rem 1rem; color: var(--paper); background: var(--green); border: 1px solid var(--ink); border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; transition: transform .18s, box-shadow .18s; }
.pill:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 116px); border-bottom: 1px solid var(--ink); }
.hero-copy { display: flex; padding: clamp(4rem,8vw,9rem) max(32px, calc((100vw - 1400px)/2)); padding-right: clamp(2rem,6vw,6rem); flex-direction: column; align-items: flex-start; justify-content: center; }
.eyebrow { margin-bottom: 1rem; font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero h1 { max-width: 800px; font-size: clamp(4.5rem,8vw,9rem); }
.hero-copy > p:not(.eyebrow) { max-width: 660px; margin: 2rem 0 0; color: #5f594f; font-size: 1.05rem; }
.hero-actions { display: flex; gap: 1.5rem; align-items: center; margin-top: 2.2rem; }
.button { display: inline-flex; min-height: 3.3rem; padding: .9rem 1.2rem; align-items: center; justify-content: center; border: 1px solid var(--ink); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: transform .18s,box-shadow .18s; }
.button:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--red); }
.button-dark { color: var(--paper); background: var(--ink); }
.button-light { background: var(--paper); }
.text-link { display: inline-flex; gap: .55rem; align-items: center; padding-bottom: .2rem; border-bottom: 1px solid currentColor; font-size: .73rem; font-weight: 850; }
.hero-art { position: relative; min-height: 680px; overflow: hidden; background: var(--pink); border-left: 1px solid var(--ink); }
.hero-art::before { position: absolute; top: -20%; right: -13%; width: 60%; aspect-ratio: 1; content: ""; border: 1px solid var(--ink); border-radius: 50%; }
.coffee-cup { position: absolute; top: 27%; left: 45%; width: min(37%,300px); aspect-ratio: 1.12; background: var(--paper); border: 2px solid var(--ink); border-radius: 0 0 48% 48%; transform: translateX(-50%) rotate(-6deg); box-shadow: 12px 12px 0 var(--red); }
.coffee-cup::after { position: absolute; top: 17%; right: -35%; width: 45%; height: 55%; content: ""; border: 2px solid var(--ink); border-left: 0; border-radius: 0 50% 50% 0; }
.coffee-cup span { position: absolute; top: 1.2rem; right: 1rem; left: 1rem; height: 27%; background: var(--coffee); border: 2px solid var(--ink); border-radius: 50%; }
.coffee-steam { position: absolute; top: 11%; left: 45%; display: flex; gap: 1.6rem; transform: translateX(-50%); }
.coffee-steam i { display: block; width: 28px; height: 100px; border: 2px solid var(--ink); border-width: 0 2px; border-radius: 50%; transform: rotate(12deg); }
.coffee-steam i:nth-child(2) { height: 125px; transform: translateY(-20px) rotate(-8deg); }
.plate { position: absolute; right: 8%; bottom: 10%; display: flex; gap: .6rem; align-items: center; justify-content: center; width: 42%; aspect-ratio: 1.65; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; transform: rotate(7deg); box-shadow: 10px 10px 0 var(--green); }
.plate i { width: 27%; aspect-ratio: 1; background: #e8aa48; border: 2px solid var(--ink); border-radius: 55% 45% 60% 40%; }
.plate i:nth-child(2) { background: #a577cc; transform: rotate(25deg); }
.plate i:nth-child(3) { background: #eac368; transform: rotate(-18deg); }
.sun-stamp { position: absolute; left: 7%; bottom: 9%; display: grid; width: 135px; aspect-ratio: 1; place-content: center; justify-items: center; color: var(--paper); background: var(--red); border: 1px solid var(--ink); border-radius: 50%; transform: rotate(-9deg); }
.sun-stamp strong { font-family: Georgia,serif; font-size: 2.8rem; font-style: italic; line-height: .9; }
.sun-stamp span { font-size: .47rem; font-weight: 900; letter-spacing: .14em; }
.art-note { position: absolute; z-index: 3; margin: 0; padding: .7rem; font-size: .48rem; font-weight: 900; letter-spacing: .12em; line-height: 1.4; }
.note-one { top: 8%; left: 7%; color: var(--paper); background: var(--green); transform: rotate(-5deg); }
.note-two { top: 15%; right: 7%; border: 1px solid var(--ink); transform: rotate(7deg); }
.marquee { overflow: hidden; color: var(--paper); background: var(--red); border-bottom: 1px solid var(--ink); }
.marquee > div { display: flex; gap: 2rem; align-items: center; width: max-content; padding: .95rem 2rem; animation: move 20s linear infinite; font-size: .65rem; font-weight: 900; letter-spacing: .13em; }
.marquee i { color: var(--ink); font-style: normal; }
@keyframes move { to { transform: translateX(-42%); } }
.menu-section { padding-block: clamp(6rem,10vw,10rem); }
.section-heading { display: grid; grid-template-columns: .6fr 1.2fr .7fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.section-heading h2 { font-size: clamp(3.8rem,7vw,7rem); }
.section-heading > p:last-child { margin: 0; color: #696257; font-size: .9rem; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr .7fr; border: 1px solid var(--ink); }
.menu-grid article { min-height: 470px; padding: clamp(1.5rem,3vw,2.8rem); background: var(--paper); border-right: 1px solid var(--ink); }
.menu-grid article:last-child { border-right: 0; }
.menu-number { font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
.menu-grid h3 { margin: 3rem 0 2rem; font-size: 3rem; }
.menu-grid ul { padding: 0; margin: 0; list-style: none; }
.menu-grid li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); font-size: .82rem; font-weight: 800; }
.menu-grid li span { display: grid; }
.menu-grid li small { margin-top: .2rem; color: #766e64; font-weight: 500; }
.menu-feature { display: flex; color: var(--paper); background: var(--green)!important; flex-direction: column; justify-content: flex-end; }
.menu-feature > p { margin: 0; font-size: .57rem; font-weight: 900; letter-spacing: .13em; }
.menu-feature h3 { margin: 1rem 0; font-size: 2.6rem; }
.menu-feature > strong { font-family: Georgia,serif; font-size: 2.8rem; }
.menu-feature > small { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.pastry-mark { display: grid; width: 100px; height: 100px; margin: auto; place-items: center; color: var(--ink); background: var(--pink); border: 1px solid var(--ink); border-radius: 50%; font-size: 2.5rem; box-shadow: 6px 6px 0 var(--ink); }
.story-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 730px; border-block: 1px solid var(--ink); }
.story-art { position: relative; display: grid; overflow: hidden; place-items: center; background: var(--red); border-right: 1px solid var(--ink); }
.story-art > span { position: relative; z-index: 2; display: grid; width: 47%; aspect-ratio: 1; place-items: center; color: var(--red); background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; font-family: Georgia,serif; font-size: clamp(7rem,16vw,14rem); font-style: italic; box-shadow: 18px 18px 0 var(--ink); }
.story-art i { position: absolute; width: 65%; aspect-ratio: 1; border: 1px solid var(--paper); border-radius: 50%; }
.story-art i:nth-of-type(2) { width: 82%; border-style: dashed; }
.story-art i:nth-of-type(3) { width: 105%; }
.story-copy { display: flex; padding: clamp(3rem,7vw,8rem); flex-direction: column; align-items: flex-start; justify-content: center; background: var(--paper); }
.story-copy h2 { margin-bottom: 2rem; font-size: clamp(3.5rem,6vw,6.4rem); }
.story-copy > p:not(.eyebrow) { max-width: 620px; color: #675f55; }
.story-copy .text-link { margin-top: 1rem; }
.visit-section { padding-block: clamp(5rem,9vw,9rem); }
.visit-card { padding: clamp(2rem,6vw,6rem); color: var(--paper); background: var(--coffee); border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--pink); }
.visit-card h2 { max-width: 980px; font-size: clamp(3.7rem,7vw,7rem); }
.visit-card h2 em { color: var(--pink); }
.details-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 4rem 0 2rem; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.2); }
.details-grid > div { display: grid; padding: 1.4rem; background: var(--coffee); }
.details-grid span { margin-bottom: 1rem; color: var(--pink); font-size: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.details-grid strong { font-size: .92rem; }
.details-grid small { margin-top: .35rem; color: rgba(255,255,255,.55); }
footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; min-height: 110px; padding: 1rem 32px; border-top: 1px solid var(--ink); }
footer p { margin: 0; color: #71695f; font-size: .68rem; text-align: center; }
footer > a:last-child { justify-self: end; font-size: .68rem; font-weight: 800; }
@media(max-width:1000px){ .site-header{grid-template-columns:1fr auto}.pill{display:none}.hero{grid-template-columns:1fr}.hero-art{min-height:650px;border-left:0;border-top:1px solid var(--ink)}.section-heading{grid-template-columns:1fr}.section-heading>p:last-child{max-width:560px}.menu-grid{grid-template-columns:1fr 1fr}.menu-feature{grid-column:1/-1;min-height:380px}.menu-grid article:nth-child(2){border-right:0}.menu-grid article:last-child{border-top:1px solid var(--ink)}.story-section{grid-template-columns:1fr}.story-art{min-height:600px;border-right:0;border-bottom:1px solid var(--ink)} }
@media(max-width:700px){ :root{--shell:calc(100% - 32px)}.demo-banner{align-items:flex-start;padding:.55rem 16px;flex-direction:column;gap:.15rem}.site-header{min-height:68px;padding:0 16px}.site-header nav{display:none}.hero{min-height:auto}.hero-copy{padding:5rem 16px}.hero h1{font-size:clamp(4rem,18vw,6.5rem)}.hero-actions{align-items:stretch;flex-direction:column;width:100%}.hero-actions>*{width:100%;justify-content:center}.hero-art{min-height:560px}.coffee-cup{left:42%;width:48%}.coffee-steam{left:42%}.plate{right:3%;bottom:9%;width:50%}.sun-stamp{left:4%;bottom:4%;width:105px}.note-two{display:none}.menu-section{padding-block:5rem}.section-heading h2{font-size:3.8rem}.menu-grid{grid-template-columns:1fr}.menu-grid article{min-height:430px;border-right:0;border-bottom:1px solid var(--ink)}.menu-grid article:nth-child(2){border-bottom:1px solid var(--ink)}.menu-grid article:last-child{grid-column:auto;border-bottom:0;border-top:0}.story-art{min-height:470px}.story-copy{padding:4rem 16px}.story-copy h2{font-size:3.6rem}.visit-card{padding:2rem 1.3rem;box-shadow:6px 6px 0 var(--pink)}.visit-card h2{font-size:3.5rem}.details-grid{grid-template-columns:1fr}.button{width:100%}footer{grid-template-columns:1fr auto;padding:1rem 16px}footer p{display:none} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}