/* TOASTED home page, sandwich-led (Leo, 18 Oct 2026: "its a sandwich shop"). In order: the hands holding a
   focaccia (hero, edge to edge), The focaccia (white, all seven with a line for the rest of the counter), Feeding a
   crew (marigold, catering), Come grab one (white, Find us), footer (black). Desktop rules sit behind 900px. */

/* Hero (round 4 C, Leo's pick 18 Oct 2026, after Ggiata and Turkey and the Wolf): two hands holding a veggie
   focaccia over their black table, edge to edge. Tall white condensed caps in the shade above the food, one white
   pill on the table below it. No panel, nothing over the focaccia. */
.hero{position:relative;height:calc(100svh - var(--head-h));min-height:560px;max-height:1000px;overflow:hidden;background:var(--ink);color:#fff;padding:0}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero::after{content:"";position:absolute;inset:0 0 auto;height:42%;background:linear-gradient(rgba(17,17,17,.5),transparent);pointer-events:none}
.hero-text{position:absolute;inset:20px 0 auto;z-index:1;padding:0 20px}
.hero h1{font:900 clamp(58px,16.4vw,170px)/.86 var(--body);font-stretch:62%;letter-spacing:-.01em;text-transform:uppercase}
.hero p{margin-top:12px;font-size:16px;color:rgba(255,255,255,.88)}
.hero-act{position:absolute;inset:auto 0 0;z-index:1;display:flex;align-items:center;gap:20px;padding:0 20px 24px}
.btn-pill{border-radius:99px;background:#fff;color:var(--ink);font:700 16px/1 var(--body);letter-spacing:0;text-transform:none;font-stretch:100%;padding:0 28px;min-height:54px}
.hero-act .alt{color:#fff}

/* Shared: price lines with a square + like the hero blocks */
.lede{margin-top:14px;font-size:17px;max-width:30em}
.plist{list-style:none;margin:24px 0 0;padding:0}
.plist li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.plist li:last-child{border-bottom:1px solid var(--line)}
.plist div{flex:1;min-width:0}
.plist b{display:block;font-size:18px;font-weight:700;line-height:1.25}
.plist span{display:block;font-size:14.5px;line-height:1.45;color:var(--muted);margin-top:2px}
.plist em{font:400 19px/1 var(--display);font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
.add{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--ink);color:#fff;font:400 24px/1 var(--display);text-decoration:none;transition:background .15s,color .15s}
.add:hover{background:var(--gold);color:var(--ink)}
section h2{font-size:clamp(38px,10vw,80px)}
.home>section:not(.hero){padding-block:56px}
.home>section.visit{padding-top:0}

/* Our focaccia: white, like the wrapping paper */
.fo-grid{display:grid;gap:28px}
.focaccia{padding-top:0!important}
.fo-photo{width:calc(100% + 40px);margin-inline:-20px;max-width:none;aspect-ratio:4/3;object-fit:cover}
.focaccia .act{margin-top:28px}

/* Feeding a crew: marigold, the colour of their letters */
.crew-band{background:var(--gold);color:var(--ink)}
.home>section.crew-band{padding-top:0}
.crew-grid{display:grid;gap:28px}
.crew-photo{width:calc(100% + 40px);margin-inline:-20px;max-width:none;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%}
.crew-band .lede{max-width:30em}
.crew-band .act{margin-top:24px}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{opacity:.85}
.also{margin-top:20px;font-size:15px;color:var(--muted);max-width:34em}

/* Find us: white, the shopfront wide, then the details */
.visit{padding-top:0}
.visit-photo{width:calc(100% + 40px);margin-inline:-20px;max-width:none;aspect-ratio:16/10;object-fit:cover;object-position:0% 50%}
.visit-grid{display:grid;gap:36px}
.visit address{margin-top:16px;font-size:18px;font-weight:600}
.visit .open-now{margin-top:8px}
.visit .links{display:flex;gap:4px 22px;flex-wrap:wrap;margin-top:4px;font-weight:700}
.visit .links a{min-height:48px;display:inline-flex;align-items:center;text-underline-offset:4px}
blockquote{margin:28px 0 0;padding:0}
blockquote p{font:600 20px/1.35 var(--body);max-width:24em}
cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--muted)}
.map{position:relative;margin-top:28px;aspect-ratio:4/3;background:rgba(17,17,17,.06)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.map-fb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;color:var(--muted)}

@media (min-width:900px){
  .home>section:not(.hero){padding-block:96px}
  .home>section.visit{padding-top:0}
  .wrap{max-width:1240px}

  .home{background:var(--ink)}
  .home>section:not(.hero):not(.crew-band){background:#fff}
  .hero{height:calc(100vh - var(--head-h));max-height:1080px;max-width:1920px;margin-inline:auto}
  .hero-photo img{object-position:50% 50%}
  .hero::after{inset:0 auto 0 0;width:55%;height:auto;background:linear-gradient(90deg,rgba(17,17,17,.5),transparent)}
  .hero-text{inset:0 auto 0 0;width:46%;display:flex;flex-direction:column;justify-content:center;padding:0 0 140px 48px}
  .hero h1{font-size:clamp(64px,5.6vw,116px)}
  .hero p{font-size:18px}
  .hero-act{inset:calc(50% + 40px) auto auto 0;padding:0 0 0 48px}

  .fo-grid{grid-template-columns:5fr 6fr;gap:72px;align-items:start}
  .fo-photo{width:100%;margin:0;position:sticky;top:calc(var(--head-h) + 32px)}
  .focaccia{padding-top:96px!important}
  section h2{font-size:clamp(48px,5vw,80px)}

  .home>section.crew-band{padding-top:96px}
  .crew-grid{grid-template-columns:7fr 5fr;gap:72px;align-items:center}
  .crew-t{grid-column:1;grid-row:1}
  .crew-photo{grid-column:2;grid-row:1;width:100%;margin:0;max-width:460px;justify-self:end;aspect-ratio:4/5;object-position:50% 50%}

  .home>section.visit{padding-top:96px}
  .visit-grid{grid-template-columns:7fr 5fr;column-gap:72px;row-gap:24px;align-items:start}
  .visit-photo{grid-column:1;grid-row:1;width:100%;margin:0;aspect-ratio:16/10;object-position:50% 50%}
  .visit-t{grid-column:2;grid-row:1/3;padding-top:8px}
  .visit-side{grid-column:1;grid-row:2}
  .visit-side .map{margin-top:0;aspect-ratio:16/7}
}