/* TOASTED home page. In order: the counter (hero, black), Our focaccia (white), Burgers and beef tallow fries
   (marigold, their letters), Coffee from 6am (black, the early start), Find us (white), footer (black).
   Desktop rules sit behind 900px. */

/* Hero (option A, after Oporto and Lardo): the Deli focaccia full bleed, the words on black under it.
   On a phone the photo fills the screen above the words; nothing sits over the food. */
.hero{display:flex;flex-direction:column;min-height:calc(100svh - var(--head-h));padding:0;background:var(--ink);color:#fff}
.hero-photo{flex:1;min-height:300px;position:relative;overflow:hidden}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-text{padding:22px 20px 20px}
.hero h1{font-size:clamp(34px,9vw,64px)}
.hero p{margin-top:10px;font-size:15px;color:rgba(255,255,255,.8)}
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.blocks .btn{min-height:56px;padding:0 10px}

/* 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)}
.more{margin-top:18px;font-weight:700}
.more a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
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:1/1;object-fit:cover;object-position:50% 85%}
.focaccia .act{margin-top:28px}

/* Burgers and fries: marigold, the colour of their letters */
.burgers{background:var(--gold);color:var(--ink)}
.burgers .plist span{color:rgba(17,17,17,.78)}
.burgers .plist li,.burgers .plist li:last-child{border-color:rgba(17,17,17,.22)}
.also{margin-top:24px;font-size:16px;max-width:34em}
.also a{font-weight:700;text-underline-offset:4px}
.bu-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}
.bu-photos img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* Coffee from 6am: black, the early start */
.coffee{background:var(--ink);color:#fff}
.coffee .lede{color:rgba(255,255,255,.85)}
.coffee .plist span{color:rgba(255,255,255,.72)}
.coffee .plist li,.coffee .plist li:last-child{border-color:rgba(255,255,255,.18)}
.coffee .plist em{color:var(--gold)}
.coffee .add{background:var(--gold);color:var(--ink)}
.coffee .add:hover{background:#fff}
.co-grid{display:grid;gap:28px}
.co-photos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-photos img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:899px){.co-photos{grid-template-columns:1fr}.co-photos img+img{display:none}.co-photos img{aspect-ratio:1/1}}

/* 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:0;padding:0}
blockquote p{font:400 clamp(21px,5.4vw,32px)/1.1 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:none}
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)}
.crew{margin-top:24px;font-size:16px}
.crew a{font-weight:700;text-underline-offset:4px}

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

  .hero{display:grid;grid-template-columns:4fr 8fr;min-height:calc(100vh - var(--head-h));max-height:1100px;max-width:1920px;margin-inline:auto}
  .home{background:var(--ink)}
  .home>section:not(.hero):not(.burgers):not(.coffee){background:#fff}
  .hero-photo{grid-column:2;grid-row:1;min-height:0}
  .hero-text{grid-column:1;grid-row:1;align-self:end;padding:0 40px 56px 48px}
  .hero h1{font-size:clamp(44px,4.6vw,76px)}
  .blocks{max-width:420px}

  .fo-grid{grid-template-columns:5fr 6fr;gap:72px;align-items:center}
  .fo-photo{width:100%;margin:0;aspect-ratio:1/1;object-position:50% 92%}
  .focaccia{padding-top:96px!important}
  section h2{font-size:clamp(48px,5vw,80px)}

  .burgers .wrap{display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:stretch}
  .bu-photos img{height:100%;aspect-ratio:auto}
  .burgers h2,.burgers .lede{grid-column:1}
  .bu-photos{grid-column:2;grid-row:1/4;margin-top:0}
  .burgers .plist,.burgers .more,.burgers .also{grid-column:1}

  .co-grid{grid-template-columns:7fr 5fr;gap:72px;align-items:center}
  .co-photos{grid-column:1;grid-row:1}.co-t{grid-column:2;grid-row:1}

  .home>section.visit{padding-top:96px}
  .visit-grid{grid-template-columns:7fr 5fr;column-gap:72px;row-gap:72px;align-items:center}
  .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}
  .visit-side{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:5fr 7fr;column-gap:72px;align-items:center}
  .visit-side blockquote,.visit-side .crew{grid-column:1}
  .visit-side blockquote{align-self:end}.visit-side .crew{align-self:start;margin-top:28px}
  .visit-side .map{grid-column:2;grid-row:1/3;margin-top:0;aspect-ratio:1/1;max-height:560px;width:100%;max-width:560px;justify-self:end}
}