@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-6.ttf) format('truetype');
}

:root {
 --background: oklch(0.989 0.006 84); --foreground: oklch(0.391 0.049 47);
 --primary: var(--foreground); --primary-foreground: var(--background);
 --accent: oklch(0.569 0.127 42); --secondary: oklch(0.879 0.025 58);
 --muted-foreground: oklch(0.53 0.035 47); --border: oklch(0.87 0.028 58);
 --surface: oklch(1 0 0); --footer: oklch(0.966 0.014 63);
 --shadow-picture: 0 20px 48px oklch(0.391 0.049 47 / 12%);
 --shadow-note: 0 8px 25px oklch(0.391 0.049 47 / 9%);
}
* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:'Outfit',sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
img { display:block; max-width:100%; object-fit:cover; }
h1,h2,h3,p { margin:0; letter-spacing:0; }
h1,h2,h3 { font-family:'Playfair Display',serif; font-weight:400; }
.page-width { width:min(1220px, calc(100% - 96px)); margin-inline:auto; }
.site-header { padding:16px 48px; min-height:94px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--border); background:var(--background); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:14px; font:600 23px 'Playfair Display',serif; }
.brand img { width:60px; height:60px; border-radius:50%; }
.site-header nav { display:flex; align-items:center; gap:34px; font-size:12px; text-transform:uppercase; }
.site-header nav a:hover,.text-link:hover,.email:hover,.phone:hover { color:var(--accent); }
.nav-order { color:var(--accent); }
.nav-order span { margin-left:8px; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-block:65px 85px; }
.eyebrow { color:var(--accent); font-size:12px; font-weight:500; text-transform:uppercase; display:block; margin-bottom:20px; }
.hero h1 { font-size:59px; line-height:1.15; margin-bottom:16px; font-weight:600; }
.hero h2 { font-size:42px; line-height:1.22; max-width:520px; }
em { color:var(--accent); font-weight:400; }
.hero-copy>p { font-size:17px; line-height:1.75; max-width:420px; margin-top:25px; color:var(--muted-foreground); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.bakery-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:14px 24px; border-radius:30px; font-size:14px; font-weight:500; transition:background .2s,color .2s; }
.bakery-button-primary { color:var(--primary-foreground); background:var(--primary); border:1px solid var(--primary); }
.bakery-button-primary:hover { background:var(--accent); border-color:var(--accent); }
.bakery-button-outline { border:1px solid var(--border); }
.bakery-button-outline:hover { background:var(--secondary); }
.hero-copy>p.hero-note { font-size:12px; margin-top:22px; }
.hero-picture { position:relative; }
.hero-picture>img { width:100%; aspect-ratio:1; height:auto; border-radius:24px; box-shadow:var(--shadow-picture); }
.picture-note { position:absolute; bottom:-25px; left:-25px; background:var(--surface); border:1px solid var(--border); padding:22px 26px; border-radius:16px; box-shadow:var(--shadow-note); display:flex; align-items:center; gap:15px; }
.note-symbol { font-size:34px; color:var(--accent); }
.picture-note p { font-family:'Playfair Display',serif; font-size:17px; line-height:1.6; }
.story-band { background:var(--primary); color:var(--primary-foreground); padding:54px 0; }
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:64px; text-align:center; }
.story-icon { font-size:32px; display:block; height:46px; }
.story-grid h3 { font-size:23px; margin:9px 0 14px; }
.story-grid p { font-size:14px; line-height:1.8; opacity:.8; max-width:310px; margin:auto; }
.specialties { padding-block:80px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:36px; }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading h2 { font-size:40px; }
.section-heading p { margin-top:12px; color:var(--muted-foreground); }
.text-link { color:var(--accent); font-size:14px; padding-bottom:5px; border-bottom:1px solid var(--border); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product img { width:100%; height:auto; aspect-ratio:3/4; border-radius:16px; transition:transform .25s; }
.product a { display:block; overflow:hidden; border-radius:16px; }
.product a:hover img { transform:scale(1.025); }
.product h3 { font-size:22px; margin:19px 0 8px; }
.product p { font-size:13px; color:var(--muted-foreground); line-height:1.7; }
.menu-note { margin-top:35px; padding-top:22px; border-top:1px solid var(--border); font-size:13px; color:var(--muted-foreground); }
.menu-note span { float:right; font-size:12px; }
.site-footer { background:var(--footer); border-top:1px solid var(--border); padding:58px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.1fr 1.1fr 1fr; gap:55px; }
.footer-brand { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.footer-brand img { border-radius:50%; width:72px; height:72px; }
.footer-brand h2 { font-size:26px; }
address { font-style:normal; line-height:1.8; font-size:14px; color:var(--muted-foreground); }
.social-links { display:flex; gap:18px; margin-top:20px; }
.bakery-button-social { padding:0; min-height:32px; border-radius:0; font-size:12px; border-bottom:1px solid var(--border); }
.bakery-button-social:hover { color:var(--accent); }
.footer-grid h3 { font-size:21px; margin:20px 0 28px; }
.contact-label { text-transform:uppercase; font-size:11px; color:var(--muted-foreground); margin-bottom:10px; }
.phone { display:block; font-size:19px; line-height:1.9; }
.email-label { margin-top:23px; }
.email { display:block; font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
.hours-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:12px; border-bottom:1px solid var(--border); padding:12px 0; }
.hours-row strong { font-weight:500; }
.holiday { color:var(--accent); }
.delivery-note { font-size:13px; line-height:1.8; margin-top:25px; color:var(--muted-foreground); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--border); padding-top:24px; margin-top:55px; font-size:11px; color:var(--muted-foreground); }
@media(min-width:1500px) { .hero { padding-block:75px 90px; } }
@media(max-width:1050px) { .hero { gap:38px; } .hero h1 { font-size:48px; } .hero h2 { font-size:34px; } .footer-grid { gap:26px; } .page-width { width:calc(100% - 64px); } .site-header { padding-inline:32px; } .story-grid { gap:28px; } }
@media(max-width:700px) { .page-width { width:calc(100% - 40px); } .site-header { padding:12px 20px; min-height:78px; flex-wrap:wrap; gap:12px; position:relative; } .brand { font-size:21px; } .brand img { width:48px; height:48px; } .site-header nav { width:100%; justify-content:space-between; gap:12px; font-size:10px; padding-bottom:5px; } .hero { grid-template-columns:1fr; gap:34px; padding-block:38px 55px; } .hero h1 { font-size:43px; } .hero h2 { font-size:33px; } .hero-copy>p { font-size:16px; margin-top:20px; } .hero .eyebrow { margin-bottom:15px; } .hero-actions { gap:10px; margin-top:23px; } .bakery-button { padding:12px 18px; font-size:13px; } .hero-picture { margin-left:12px; } .picture-note { left:-12px; bottom:-18px; padding:14px 20px; } .picture-note p { font-size:15px; } .story-grid { grid-template-columns:1fr; gap:34px; } .story-band { padding-block:40px; } .story-grid h3 { font-size:23px; } .specialties { padding-block:50px; } .section-heading { align-items:start; flex-direction:column; gap:20px; } .section-heading h2 { font-size:34px; } .product-grid { grid-template-columns:repeat(2,1fr); gap:28px 18px; } .product h3 { font-size:20px; } .product p { font-size:12px; } .menu-note { line-height:1.8; } .menu-note span { float:none; display:block; margin-top:6px; } .footer-grid { grid-template-columns:1fr; gap:22px; } .footer-grid h3 { margin:12px 0 20px; } .footer-bottom { flex-wrap:wrap; line-height:1.7; margin-top:35px; } .hours-row { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }