:root{--red:#ec302b;--ink:#331d1a;--paper:#faf2df;--line:#331d1a40}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 system-ui,sans-serif}
a{color:inherit}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid currentColor;outline-offset:4px}
img{display:block;width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px clamp(20px,6vw,96px);background:var(--red)}
.top a{text-decoration:none;font-weight:750}
.top nav{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,44px)}
.wordmark{font-size:clamp(15px,1.8vw,25px);letter-spacing:.12em;font-weight:950!important}
.hero{position:relative;display:grid;align-items:center;justify-items:end;min-height:clamp(560px,75vh,850px);color:white;padding:48px 7%}
.hero>img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 44%,#112c43b8)}
.hero-copy{z-index:1;position:relative;width:min(41vw,530px)}
.hero-copy>p:not(.eyebrow){font-size:clamp(19px,2vw,27px)}
.eyebrow{font-size:13px;letter-spacing:.15em;font-weight:850}
h1{font-size:clamp(74px,9vw,155px);font-weight:950;letter-spacing:-.09em;line-height:.84;margin:15px 0 20px}
h1 span{color:#ff574d}
h2{font-size:clamp(44px,7vw,102px);font-weight:900;line-height:.96;letter-spacing:-.075em;margin:12px 0 28px}
h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.075em}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.button{display:inline-flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 19px;min-height:48px;font-size:16px;font-weight:750;border:1px solid currentColor;text-decoration:none}
.primary{background:var(--red);color:#24110f;border-color:var(--red)}.ghost{color:white}.outline{color:var(--ink)}
.wrap{width:min(100%,1480px);margin:auto;padding:clamp(44px,7vw,100px) clamp(22px,6vw,88px)}
.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,7vw,110px)}
.intro img{aspect-ratio:5/4;object-fit:cover}.intro p:last-child{max-width:460px}
.menu{background:#f0dfbf}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px}
.rail-buttons{display:flex;gap:8px;margin-bottom:24px}.rail-buttons button{width:46px;height:46px;border:1px solid currentColor;background:transparent;color:inherit;font-size:22px;cursor:pointer}
.photo-rail{display:grid;grid-auto-flow:column;grid-auto-columns:31%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:var(--red) transparent}
.photo-rail a{scroll-snap-align:start;background:#e7d5b7}.photo-rail img{aspect-ratio:4/5;object-fit:contain}
.recipes{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px}.recipes li{border-bottom:1px solid var(--line);padding:12px 0;font-weight:700}
.sweet-grid,.journal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sweet-grid img,.journal-grid img{aspect-ratio:4/5;object-fit:cover}
.coffee{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--paper)}.coffee img{height:100%;max-height:600px;object-fit:cover}.coffee-copy{align-content:center;padding:clamp(30px,6vw,90px);background:linear-gradient(#331d1ae8,#331d1ae8),url("photos/beans_bg.webp") center/cover}
.location-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.location{padding:clamp(18px,3vw,36px);border:1px solid var(--line);display:flex;flex-direction:column;align-items:start;gap:12px}.number{font-size:13px;letter-spacing:.1em;font-weight:800}.location h3{font-size:clamp(29px,4vw,54px);line-height:1}.location h3 svg{display:none}.hours{width:100%}.hours div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:7px 0}.hours strong{text-align:right}.location .button{margin-top:auto}.details{font-size:15px}
.events{background:var(--ink);color:var(--paper)}.events .button,.journal .button{margin-top:22px}.events .photo-rail img{aspect-ratio:5/4;object-fit:cover}.journal-grid img{aspect-ratio:4/3;object-fit:contain;background:#f0dfbf}
footer.top{background:var(--ink);color:var(--paper)}footer img:first-child{width:min(130px,30vw)}footer img:last-child{width:54px}
@media(max-width:760px){.top{flex-wrap:wrap;gap:8px;padding:13px 20px}.top nav{font-size:15px;gap:16px}.social{display:none}.hero{display:flex;flex-direction:column;min-height:0;padding:0}.hero>img{position:static;aspect-ratio:16/10;height:auto;object-position:left center}.hero::after{display:none}.hero-copy{width:100%;padding:22px;color:var(--ink);background:var(--paper)}h1{font-size:clamp(54px,14vw,96px);margin:8px 0 13px}.hero h1 span{color:var(--red)}.hero .ghost{color:var(--ink)}.actions{margin-top:14px}.intro,.coffee,.location-grid{grid-template-columns:1fr}.photo-rail{grid-auto-columns:76%}.recipes,.sweet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.journal-grid{grid-template-columns:1fr}.section-head{align-items:start}.rail-buttons{margin-top:20px}.rail-buttons button{width:40px;height:42px}.wrap{padding-inline:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* Menu photography and editorial layouts. */
.top { min-height: 76px; padding-block: 16px; }
.top nav a:hover, .top nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.hero { min-height: clamp(540px, 74vh, 830px); }
.hero-copy .primary, .event-copy .primary { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hero-copy .button:hover, .event-copy .button:hover, .inquiry .button:hover { filter: brightness(.9); }
.menu .section-head, .catering-offer .section-head { align-items: end; margin-bottom: 28px; }
.section-head > p { max-width: 360px; margin-bottom: 28px; }
.recipe-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 18px; }
.recipe-card { min-width: 0; background: var(--paper); border: 1px solid var(--line); }
.recipe-card > a { display: block; overflow: hidden; background: #9e1812; }
.recipe-card img { aspect-ratio: 5/7; object-fit: contain; transition: transform .22s ease; }
.recipe-card > a:hover img { transform: scale(1.025); }
.recipe-label { padding: 12px 14px; }
.recipe-label h3 { font-size: clamp(15px, 1.45vw, 21px); line-height: 1.2; }
.variant { display: inline-block; margin-top: 5px; font-size: 13px; }
.event-teaser, .catering-hero, .inquiry { display: grid; grid-template-columns: 1fr 1fr; }
.event-teaser > img, .catering-hero > img, .inquiry > img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.event-copy { padding: clamp(30px, 6vw, 94px); align-content: center; }
.event-copy p:not(.eyebrow) { max-width: 520px; }
.catering-hero { background: var(--ink); color: var(--paper); }
.catering-hero h1 { font-size: clamp(60px, 7.6vw, 124px); }
.catering-hero h1 em { font-family: Georgia, serif; font-weight: 400; }
.catering-hero .button, .festivals .button { margin-top: 22px; }
.back { display: inline-block; margin-bottom: 24px; text-underline-offset: 4px; font-size: 15px; }
.event-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.event-gallery img { aspect-ratio: 4/3; object-fit: cover; }
.festivals { background: #4d1e1a; color: var(--paper); }
.inquiry { align-items: center; gap: clamp(24px, 6vw, 90px); }
.inquiry > img { aspect-ratio: 5/4; }
@media (max-width: 760px) {
  .top { min-height: auto; padding-block: 13px; }
  .hero { min-height: 0; }
  .hero-copy .primary { background: var(--red); border-color: var(--red); }
  .hero-copy .actions { gap: 8px; }
  .hero-copy .button { padding-inline: 10px; gap: 6px; font-size: 15px; }
  .section-head { display: block; }
  .section-head > p { margin-bottom: 0; }
  .recipe-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .recipe-label { padding: 10px 9px; }
  .event-teaser, .catering-hero, .inquiry { grid-template-columns: 1fr; }
  .catering-hero > img { grid-row: 1; aspect-ratio: 16/10; min-height: 0; }
  .event-gallery { grid-template-columns: 1fr 1fr; }
  .event-gallery img:first-child { grid-column: 1/-1; aspect-ratio: 16/9; }
}
@media (prefers-reduced-motion: reduce) {
  .recipe-card img { transition: none; }
}

/* Social links in the header and footer. */
.social-links { display: flex; gap: 4px; }
.top .social-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; }
.social-icon svg { width: 23px; height: 23px; }
.top .social-icon:hover { background: var(--ink); color: var(--paper); }
footer.top nav { align-items: center; gap: 10px; }
@media (max-width: 760px) {
  header.top { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  header.top nav { grid-column: 1/-1; grid-row: 2; }
  header.top .social-links { grid-column: 2; grid-row: 1; }
}


.menu .wrap { container-type: inline-size; }
.franchise { min-height: 58vh; }
.franchise h1 { font-size: clamp(58px, 12vw, 142px); }

/* Quiet brand header with the original Foca Ciao wordmark. */
header.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 85px;
  padding-block: 17px;
  background: var(--paper);
  border-bottom: 1px solid #331d1a18;
}
header .wordmark { display: block; width: clamp(112px, 13vw, 185px); }
header .wordmark img { width: 100%; height: auto; }
header.top nav { gap: clamp(16px, 3.5vw, 54px); }
header.top nav a { font-size: 15px; font-weight: 680; }
header .social-links { justify-self: end; }
.top .social-icon { border: 0; border-radius: 0; }
.top .social-icon:hover { background: transparent; color: #b12722; }
footer.top .social-icon:hover { color: #ff7167; }
.social-icon svg { width: 21px; height: 21px; }
.menu-link { display: inline-flex; align-items: center; gap: 12px; align-self: end; margin-bottom: 28px; text-decoration: none; border-bottom: 1px solid currentColor; padding: 0 0 5px; font-weight: 700; }
.menu-end { margin-top: 30px; }
.menu-end .button:hover { color: var(--paper); background: var(--ink); }
.full-menu-head { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.full-menu h1 { font-size: clamp(56px, 9vw, 128px); line-height: .93; }
.full-menu h1 em { font-family: Georgia,serif; font-weight: 400; }
.menu-index { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.menu-index a { text-underline-offset: 5px; font-weight: 700; }
.menu-chapter { padding-top: 36px; }
.menu-chapter h2 { font-size: clamp(27px, 3.5vw, 48px); letter-spacing: -.045em; }
.menu-page .recipe-card { background: #fff8e9; }
@media (max-width: 760px) {
  header.top { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; min-height: 0; padding: 9px 20px 12px; }
  header.top nav { grid-column: 1/-1; grid-row: 2; gap: 10px 20px; }
  header.top nav a { font-size: 14px; }
  .menu-link { margin-bottom: 0; }
  .full-menu h1 { font-size: clamp(43px, 12vw, 74px); }
}