/* Rosemary Bakery: the menu board (Hero kit, BRIEF.md). Black sections are the board, white ones the box paper. */
.board{background:var(--board);color:#fff}
.btn-s{min-height:40px;padding:8px 14px;font-size:15px}
.btn{font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:19px}
.stack{text-transform:uppercase;line-height:.88;letter-spacing:-.005em}
h2.stack{font-size:clamp(46px,12vw,92px)}
.small a{color:inherit}
figure{margin:0}

/* Header on the board's black */
.site-head{background:var(--board);color:#fff}
.site-head.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.12)}
.brand{text-transform:uppercase;letter-spacing:.08em;font-size:20px}
.site-head nav a:not(.btn){font-weight:600}
:focus-visible{outline-color:currentColor}

/* First screen: MANOUSH / PIDE / PIZZA stacked like the board, the boxes from above under it */
.hero{padding:0;display:grid}
.hero-text{padding:20px 20px 26px}
.hero h1{font-size:clamp(70px,20vw,150px)}
.ar{font-family:Lalezar,var(--display);color:var(--accent);font-size:46px;line-height:1.2;margin-top:4px}
.hero-meta{margin:10px 0 22px;font-size:16px}
.hero-ph{display:block;overflow:hidden} /* clips the photo's settle-in (it starts 6% bigger) */
.hero-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:900px){
  .hero{grid-template-columns:5fr 7fr;min-height:calc(100svh - 64px);max-height:900px}
  .hero-text{align-self:center;padding:40px 40px 40px max(40px,calc((100vw - var(--max))/2 + 40px))}
  .hero h1{font-size:clamp(96px,10vw,148px)}
  .hero-ph img{height:100%;aspect-ratio:auto}
}

/* The ones people come back for: lines off the board, prices lined up on the right */
.faves .wrap{display:grid;gap:36px}
.board-list{list-style:none;margin:28px 0 0;padding:6px 20px;background:var(--board);color:#fff}
.board-list a{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);text-decoration:none}
.board-list li:last-child a{border-bottom:0}
.board-list .n{font:700 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.board-list .d{grid-column:1;color:rgba(255,255,255,.78);font-size:15px}
.board-list .p{grid-column:2;grid-row:1/3;align-self:center;font:800 28px/1 var(--display);font-variant-numeric:tabular-nums}
.board-list a:hover .n{text-decoration:underline;text-underline-offset:.15em}
.more{margin-top:20px;font-weight:600}
.faves-ph img{width:100%;aspect-ratio:1;object-fit:cover}
figcaption{font-size:13px;color:var(--muted);margin-top:8px}
@media (min-width:900px){.faves .wrap{grid-template-columns:1fr 1fr;gap:72px;align-items:center}}

/* In the oven from 6am: the real tray, a white card over its foot (Toad Bakery's move) */
.oven{padding:0;position:relative}
.oven-ph{width:100%;aspect-ratio:4/5;object-fit:cover}
.oven-card{background:#fff;color:var(--ink);margin:-96px 14px 0;position:relative;padding:28px 22px 26px;display:grid;gap:16px}
.oven-card blockquote{margin:6px 0 0;padding:0}
.oven-card blockquote p{font:700 22px/1.25 var(--display);text-transform:none}
.oven-card cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--muted)}
.oven-card .small{color:var(--muted)}
.oven{padding-bottom:56px}
@media (min-width:900px){
  .oven{display:grid;grid-template-columns:5fr 7fr;padding:0;min-height:720px}
  .oven-ph{grid-column:2;grid-row:1;height:100%;aspect-ratio:auto;max-height:820px}
  .oven-card{grid-column:1/3;grid-row:1;align-self:end;width:min(500px,38vw);margin:0 0 56px max(40px,calc((100vw - var(--max))/2 + 40px));padding:36px}
}

/* Very wide screens: the black sections stay full width, their content capped at 1920px and centred */
@media (min-width:1921px){.hero,.oven{padding-inline:calc((100vw - 1920px)/2)}}

/* Visit: on the box paper */
.visit .wrap{display:grid;gap:32px}
.visit .wrap>*,.visit-media>*{min-width:0}
.visit address{margin-top:20px;font-size:18px}
.visit .open-now{margin-top:8px}
.acts{margin-top:18px;font-weight:600;font-size:18px}
.visit .small{margin-top:10px}
.visit-media{display:grid;gap:14px}
.visit-ph img{width:100%;aspect-ratio:1;object-fit:cover}
.map{position:relative;aspect-ratio:2/1;background:rgba(22,19,15,.06);display:grid;place-items:center}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fb{font-weight:600}
.map:has(iframe) .map-fb{display:none}
@media (min-width:900px){.visit .wrap{grid-template-columns:5fr 6fr;gap:72px;align-items:start}.visit-media{grid-template-columns:1fr 1fr}.map{aspect-ratio:1}}

.site-foot{color:rgba(255,255,255,.82)}
.site-foot a{color:#fff}

/* Party pizza page */
.cater .wrap{display:grid;gap:28px}
.cater h1{font-size:clamp(64px,17vw,132px)}
.cater .lede{margin-top:16px;max-width:30em}
.cater-ph{width:100%;aspect-ratio:4/3;object-fit:cover;margin-top:28px}
@media (min-width:900px){.cater .wrap{grid-template-columns:5fr 6fr;gap:72px;align-items:start}}