/* =========================================================================
   Red Maple Cafe — site stylesheet
   Design direction: "Sunlit Social" — warm blush + sand, maple red accent,
   Clash Display headings, General Sans body, soft 24/40px radii.
   Change a colour or font in the :root block below and it updates everywhere.
   ========================================================================= */

:root{
  /* ---- surfaces ---- */
  --blush:#FDF4EE;
  --blush-2:#F8E7DC;
  --sand:#F2E3D3;
  --white:#FFFFFF;

  /* ---- ink ---- */
  --ink:#2A1E19;
  --ink-soft:#6B594F;
  --ink-faint:#A8968A;

  /* ---- accents ---- */
  --maple:#C13A22;
  --maple-solid:#95291A;
  --sage:#5F7A5B;
  --gold:#D99B33;
  --line:#EBD9CB;

  /* ---- type scale ---- */
  --text-xs:clamp(.75rem,.7rem + .2vw,.8125rem);
  --text-sm:clamp(.875rem,.83rem + .2vw,.9375rem);
  --text-base:clamp(1rem,.96rem + .25vw,1.0625rem);
  --text-lg:clamp(1.125rem,1rem + .7vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.6rem,1rem + 4.6vw,5.75rem);

  /* ---- spacing ---- */
  --s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;
  --s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;

  --r:24px; --r-lg:40px;
  --font-display:'Clash Display',Georgia,serif;
  --font-body:'General Sans','Inter',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blush);color:var(--ink);font-family:var(--font-body);
  font-size:var(--text-base);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1280px,92vw);margin-inline:auto}
.narrow{width:min(880px,92vw);margin-inline:auto}
h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{display:inline-block;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--maple-solid);background:var(--blush-2);padding:.4rem .9rem;border-radius:99px}
.eyebrow.on-sand{background:var(--white)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--text-sm);font-weight:600;
  padding:.9rem 1.7rem;border-radius:99px;border:1.5px solid var(--ink);cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn-solid{background:var(--maple);border-color:var(--maple);color:#fff}
.btn-solid:hover{background:var(--maple-solid);border-color:var(--maple-solid)}
.btn-line:hover{background:var(--ink);color:var(--blush)}
.btn-sm{padding:.65rem 1.25rem;font-size:var(--text-xs)}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap}
.btn{white-space:nowrap}

/* ---------- header ---------- */
.topbar{background:var(--ink);color:#E4D6CC;font-size:var(--text-xs);letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:.6rem var(--s4)}
.topbar b{color:var(--gold);font-weight:600}
header{position:sticky;top:0;z-index:70;background:rgba(253,244,238,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s3) 0}
.brand{display:flex;align-items:center;flex:0 0 auto}
/* Client-supplied logo artwork. Height drives it; width follows the source ratio. */
.brand-logo{height:62px;width:auto;display:block}
.links{display:flex;gap:var(--s2);font-size:var(--text-sm);font-weight:500}
.links a{padding:.45rem .85rem;border-radius:99px;transition:.25s;white-space:nowrap}
.links a:hover{background:var(--blush-2);color:var(--maple-solid)}
.links a[aria-current="page"]{background:var(--blush-2);color:var(--maple-solid)}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s}
#mobile-nav{display:none;border-top:1px solid var(--line);background:var(--blush)}
#mobile-nav.open{display:block}
#mobile-nav a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);font-weight:500}
#mobile-nav a:last-child{border-bottom:0}

/* ---------- page banner (inner pages) ---------- */
.pagehead{padding-block:var(--s16) var(--s10)}
.pagehead h1{font-size:var(--text-2xl);margin-top:var(--s4);max-width:22ch}
.pagehead p{color:var(--ink-soft);max-width:56ch;margin-top:var(--s5);font-size:var(--text-lg);font-weight:300}
.pagehead-split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s12);align-items:center}
.pagehead-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}

/* ---------- home hero (full-bleed photo, copy in the airy right side) ---------- */
/* aspect-ratio matches the photo (16:9) so the plated composition is never
   cropped; max-height stops it running away on ultra-wide screens. */
.hero-full{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;
  width:100%;aspect-ratio:16/9;max-height:min(820px,78vh)}
/* Bottom-anchored: any trimming comes off the empty marble at the top, never the plate. */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 100%;z-index:-2}
.hero-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,
  rgba(253,244,238,0) 20%,rgba(253,244,238,.55) 42%,rgba(253,244,238,.92) 56%,rgba(253,244,238,.97) 100%)}
.hero-inner{width:min(1280px,92vw);padding-block:var(--s8)}
.hero-copy{width:min(46%,500px);margin-left:auto}
.hero-full h1{font-size:clamp(2.1rem,3.6vw,3.6rem);line-height:1.04;margin-top:1.1rem;letter-spacing:-.015em}
.hero-full h1 .hl{color:var(--maple)}
.hero-full .lede{font-size:var(--text-lg);color:var(--ink-soft);margin-top:var(--s5);font-weight:300}
.hero-cta{display:flex;gap:var(--s3);margin-top:var(--s7);flex-wrap:wrap}
.hero-facts{padding-block:0 var(--s12)}

.pill-row{display:flex;gap:var(--s3);margin-top:var(--s10);flex-wrap:wrap}
.pill{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s6);flex:1 1 190px}
.pill span{display:block;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.pill strong{font-family:var(--font-display);font-size:1.3rem;font-weight:500}

/* ---------- ticker ---------- */
.ticker{background:var(--maple-solid);color:var(--blush);overflow:hidden;padding:var(--s4) 0}
.ticker-track{display:flex;gap:var(--s8);white-space:nowrap;animation:slide 40s linear infinite;
  font-family:var(--font-display);font-size:1.3rem;font-weight:500}
.ticker-track i{color:var(--gold);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- sections ---------- */
section{padding-block:var(--s24)}
section.tight{padding-block:var(--s16)}
section.no-top{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s8);margin-bottom:var(--s12);flex-wrap:wrap}
.sec-head h2{font-size:var(--text-2xl);max-width:17ch;margin-top:var(--s4)}
.sec-head p{max-width:38ch;color:var(--ink-soft)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(42,30,25,.28)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-body{padding:var(--s6)}
/* Side-by-side variant: the photo sits to the LEFT of the name and description
   instead of above them. Used for menu-item cards, where the description is the
   thing being read and a full-width photo pushed it too far down the page.
   Two columns rather than three, because a horizontal card needs the width. */
.cards.side{grid-template-columns:repeat(2,1fr)}
/* min-height keeps the photo panel a reasonable size when an item has a one-line
   description; without it a short entry collapses to a letterbox strip. */
.card.side{display:grid;grid-template-columns:38% 1fr;position:relative;min-height:200px}
/* The photo is taken out of flow so the card's height is set by the text, not by
   the photo's own proportions. Left in flow, a portrait photo made the card
   ~120px taller than its text and left a band of empty white under the
   description. Absolute + object-fit:cover fills the left column at any
   height, so tall and wide photos both crop to the same tidy panel. */
.card.side img{position:absolute;top:0;bottom:0;left:0;width:38%;height:100%;aspect-ratio:auto}
.card.side .card-body{grid-column:2}
/* With two cards per row, an odd number leaves the last one alone at half width,
   which reads as a mistake. A horizontal card takes a full-width row happily, so
   the odd one out spans both columns. The client controls how many items have
   photos, so this has to hold for any count. */
/* 19% rather than 38%: on a full-width card 38% would be a ~500px photo, where
   19% of the wider card is roughly the same physical panel as its half-width
   neighbours. The text column has to match, or the photo leaves a white gap. */
.cards.side > .card:last-child:nth-child(odd){grid-column:1 / -1;grid-template-columns:19% 1fr}
.cards.side > .card:last-child:nth-child(odd) img{width:19%}
/* min-width:0 stops a long unbroken word in the description from widening the
   text column and squeezing the photo out of shape. */
.card.side .card-body{min-width:0;display:flex;flex-direction:column}
/* Pins the price row to the bottom so it lines up across cards of one row. */
.card.side .card-foot{margin-top:auto}
.card h3{font-size:1.4rem}
.card p{font-size:var(--text-sm);color:var(--ink-soft);margin-top:var(--s3)}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.card-foot .price{font-family:var(--font-display);font-size:1.3rem;color:var(--maple-solid);font-weight:600}
.chip{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--sage);background:#EAF0E8;padding:.3rem .7rem;border-radius:99px;white-space:nowrap}
.chip.hot{color:var(--maple-solid);background:var(--blush-2)}
.chip.gold{color:#7A5410;background:#F8EBD3}

/* ---------- sand block ---------- */
.block{background:var(--sand);border-radius:var(--r-lg);padding:var(--s16);
  display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s12);align-items:center}
.block.reverse{grid-template-columns:1.1fr 1fr}
.block.solo{grid-template-columns:1fr;text-align:center;justify-items:center}
.block h2{font-size:var(--text-2xl);margin-top:var(--s4)}
.block p{color:var(--ink-soft);margin-top:var(--s5);max-width:46ch}
.block.solo p{max-width:60ch}
.cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cluster img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px}
.cluster img:nth-child(2){aspect-ratio:auto;height:100%;grid-row:span 2;border-radius:22px}

/* ---------- scroller ---------- */
/* Named "scroller" historically; it is now a plain wrapping grid, because a
   sideways scroller hides cards from anyone who does not think to drag it. */
.scroller{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);align-items:stretch}
.scroller figure{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.scroller figcaption{margin-top:auto}
.scroller img{width:100%;aspect-ratio:1;object-fit:cover}
.scroller figcaption{padding:var(--s4) var(--s5);min-height:5.9rem}
.scroller figcaption strong{font-family:var(--font-display);font-size:1.15rem;display:block}
.scroller figcaption span{font-size:var(--text-sm);color:var(--ink-soft)}

/* ---------- photo grids ---------- */
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3)}
.wall img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:16px}
.mosaic{columns:4;column-gap:var(--s4)}
.mosaic img{width:100%;margin-bottom:var(--s4);border-radius:20px;break-inside:avoid;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mosaic img:hover{transform:scale(1.02)}
.grid-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.grid-gallery figure{border-radius:var(--r);overflow:hidden;background:var(--white);border:1px solid var(--line)}
.grid-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.grid-gallery figure:hover img{transform:scale(1.04)}
.grid-gallery figcaption{padding:var(--s4) var(--s5);font-size:var(--text-sm);color:var(--ink-soft)}

/* ---------- menu list ---------- */
/* A jump-to-a-section index. It wraps onto as many lines as it needs instead of
   hiding options in a sideways scroller, so all 15 food sections are visible at
   once. Wrapping makes it several lines tall on a phone, which is why it is no
   longer sticky — a multi-line sticky bar would cover most of a small screen. */
.menu-nav{background:var(--blush);border-bottom:1px solid var(--line);padding-block:var(--s4)}
.menu-nav-inner{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:var(--text-xs);
  letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.menu-nav a{padding:.5rem .95rem;border-radius:99px;border:1px solid var(--line);
  background:var(--white);white-space:nowrap;transition:.25s;color:var(--ink-soft)}
.menu-nav a:hover{background:var(--maple);border-color:var(--maple);color:#fff}

.legend{display:flex;gap:var(--s6);flex-wrap:wrap;padding:var(--s6);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);font-size:var(--text-sm)}
.legend div{display:flex;align-items:center;gap:.5rem}
.legend b{color:var(--maple-solid)}

/* Each section is an anchor target for the index above, so keep its heading
   clear of the sticky site header when the browser jumps to it. */
.mgroup{padding-block:var(--s12) 0;scroll-margin-top:96px}
.mgroup > h2{font-size:var(--text-xl);padding-bottom:var(--s4);border-bottom:2px solid var(--ink)}
.mgroup .note{font-size:var(--text-sm);color:var(--ink-soft);margin-top:var(--s4);max-width:78ch}
.mlist{margin-top:var(--s8);display:grid;grid-template-columns:1fr 1fr;gap:var(--s8) var(--s12)}
.mlist.single{grid-template-columns:1fr}
.mitem{padding-bottom:var(--s5);border-bottom:1px dashed var(--line)}
/* Only rows with a photo become a two-column flex row, so a row without one is
   byte-for-byte the layout it always was. min-width:0 lets the dotted leader
   shrink instead of pushing the price out of the column. */
.mitem-body{min-width:0}
.mitem.has-shot{display:flex;gap:var(--s4);align-items:flex-start}
.mitem.has-shot .mitem-body{flex:1 1 auto;min-width:0}
.mitem-shot{flex:0 0 auto;display:block;width:88px;height:88px;border-radius:16px;
  overflow:hidden;background:var(--blush-2);border:1px solid var(--line)}
.mitem-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.mitem:hover .mitem-shot img{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.mitem-shot img{transition:none}
  .mitem:hover .mitem-shot img{transform:none}}
.mitem-top{display:flex;align-items:baseline;gap:var(--s3)}
.mitem-name{font-family:var(--font-display);font-size:1.15rem;font-weight:500;line-height:1.3}
.mitem-dots{flex:1 1 auto;border-bottom:1px dotted var(--ink-faint);transform:translateY(-4px);min-width:18px}
.mitem-price{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--maple-solid);white-space:nowrap}
.mitem-desc{font-size:var(--text-sm);color:var(--ink-soft);margin-top:.4rem;max-width:60ch}
.mitem-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.55rem}
.tag{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:.22rem .55rem;border-radius:99px;background:var(--blush-2);color:var(--maple-solid)}
.tag.veg{background:#EAF0E8;color:var(--sage)}
.tag.gf{background:#F8EBD3;color:#7A5410}
.star{color:var(--maple);font-size:.9em}
.mitem-adds{margin-top:.6rem;font-size:var(--text-xs);color:var(--ink-soft);
  display:grid;gap:.15rem}
.mitem-adds span b{color:var(--ink);font-weight:600}

/* ---------- flavour chips ---------- */
.flavors{display:flex;flex-wrap:wrap;gap:.5rem}
.flavors span{background:var(--white);border:1px solid var(--line);border-radius:99px;
  padding:.4rem .9rem;font-size:var(--text-sm)}
.flavors span.pow{border-color:var(--gold)}

/* ---------- info / visit ---------- */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:stretch}
.visit-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s12)}
.visit-card h2{font-size:var(--text-xl);margin-top:var(--s4)}
.detail{padding-block:var(--s4);border-bottom:1px solid var(--line)}
.detail:last-of-type{border-bottom:0}
.detail span{display:block;font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:4px}
.visit > img{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:var(--r-lg)}
.map{width:100%;height:420px;border:0;border-radius:var(--r-lg);display:block}

/* ---------- prose ---------- */
.prose h2{font-size:var(--text-xl);margin-top:var(--s12)}
.prose h3{font-size:1.3rem;margin-top:var(--s8)}
.prose p{margin-top:var(--s4);color:var(--ink-soft)}
.prose ul{margin-top:var(--s4);padding-left:1.2rem;color:var(--ink-soft)}
.prose li{margin-bottom:.4rem}
.prose strong{color:var(--ink)}

/* ---------- roles ---------- */
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.role{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.role strong{font-family:var(--font-display);font-size:1.15rem;font-weight:500}

/* ---------- quote ---------- */
.quote{background:var(--ink);color:var(--blush);border-radius:var(--r-lg);padding:var(--s16);text-align:center}
.quote blockquote{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.25;max-width:26ch;margin-inline:auto}
.quote cite{display:block;margin-top:var(--s6);font-style:normal;font-size:var(--text-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#CDBEB4;padding-block:var(--s20) var(--s8);font-size:var(--text-sm);
  border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:var(--s12)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s10)}
footer h4{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-bottom:var(--s4);font-family:var(--font-body);font-weight:600}
footer li{list-style:none;margin-bottom:var(--s2)}
footer a:hover{color:#fff}
.foot-brand{font-family:var(--font-display);font-size:2.1rem;color:var(--blush);line-height:1;font-weight:600}
.foot-bottom{margin-top:var(--s16);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:var(--text-xs);color:#9C8A80}

/* ---------- reveal ---------- */
/* Scoped to .js (set by an inline script in <head>) so the content is visible
   by default. If site.js never runs, sections stay put instead of vanishing. */
.js .reveal{opacity:0;transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .links{gap:0;font-size:var(--text-xs)}
  .links a{padding:.4rem .6rem}
}
@media(max-width:1024px){
  .wall{grid-template-columns:repeat(3,1fr)}
  .mosaic{columns:3}
  .cards.four{grid-template-columns:repeat(2,1fr)}
}
.accolade{display:grid;grid-template-columns:200px 1fr;gap:var(--s10);align-items:center;
  background:var(--ink);color:var(--blush);border-radius:var(--r-lg);padding:var(--s10) var(--s12)}
.accolade img{width:100%;border-radius:var(--r);display:block}
.accolade .eyebrow{background:rgba(217,155,51,.16);color:var(--gold);border-color:transparent}
.accolade h3{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.15;margin:var(--s4) 0 var(--s3);font-weight:600}
.accolade p{color:#D8C6BA;max-width:60ch}

@media(max-width:960px){
  .block,.block.reverse,.visit,.pagehead-split{grid-template-columns:1fr;gap:var(--s8)}
  /* Narrow screens: the photo fills the frame and the copy sits at the foot of it,
     over a bottom-up scrim, so the dish stays the hero instead of being washed out. */
  .hero-full{aspect-ratio:auto;min-height:min(88vh,780px);max-height:none;align-items:flex-end}
  .hero-photo{object-position:38% 38%}
  .hero-veil{background:linear-gradient(180deg,rgba(253,244,238,0) 20%,rgba(253,244,238,.45) 40%,
    rgba(253,244,238,.95) 54%,var(--blush) 66%)}
  .hero-copy{width:100%;max-width:none;margin-left:0}
  .hero-inner{padding-block:var(--s6)}
  .hero-full .lede{margin-top:var(--s4)}
  .hero-cta{margin-top:var(--s5)}
  .block{padding:var(--s8)}
  .cards,.grid-gallery,.scroller{grid-template-columns:1fr 1fr}
  /* A horizontal card needs width to keep the description readable, so it drops
     to one per row here rather than at the usual 600px breakpoint. */
  .cards.side{grid-template-columns:1fr}
  /* Every card is full width now, so the last one is not a special case. */
  .cards.side > .card:last-child:nth-child(odd){grid-template-columns:38% 1fr}
  .cards.side > .card:last-child:nth-child(odd) img{width:38%}
  .mlist{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .links{display:none}
  .menu-toggle{display:block}
  section{padding-block:var(--s16)}
  .menu-nav{top:69px}
  .roles{grid-template-columns:1fr}
  .quote{padding:var(--s10)}
  .accolade{grid-template-columns:1fr;gap:var(--s6);padding:var(--s8)}
  .accolade img{max-width:180px}
}
@media(max-width:600px){
  .cards,.cards.two,.cards.four,.cards.side,.grid-gallery,.scroller{grid-template-columns:1fr}
  /* Photo stays on the left on phones, just narrower, with tighter padding so
     the description still gets a usable measure on a 320px screen. */
  .card.side{grid-template-columns:38% 1fr;min-height:150px}
  .card.side img{width:38%}
  .card.side .card-body{padding:var(--s5)}
  .card.side h3{font-size:1.15rem}
  /* 15 pills, each on its own line, would be a 400px wall before a phone user
     reaches the first menu item, and the longest section name is wider than a
     320px screen. So on a phone the index flows as one compact block of text
     links, which wraps tightly instead of one-pill-per-line. */
  .menu-nav{padding-block:var(--s5)}
  .menu-nav-inner{display:block;line-height:2}
  .menu-nav-inner::before{content:'Jump to a section';display:block;
    color:var(--ink-faint);letter-spacing:.14em;margin-bottom:.15rem}
  .menu-nav a{display:inline;padding:0;border:0;background:none;white-space:normal;
    color:var(--maple-solid);border-radius:0}
  /* Non-breaking space before the dot keeps it at the end of its line. The break
     after it comes from real whitespace in the markup, not from a trailing space
     here — whitespace at the end of generated content collapses away, which left
     two links glued into one unbreakable word. */
  .menu-nav a:not(:last-child)::after{content:'\00A0\00B7';color:var(--ink-faint);
    font-weight:400;letter-spacing:normal}
  .menu-nav a:hover{background:none;color:var(--ink)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .mosaic{columns:2;column-gap:var(--s3)}
  .foot-grid{grid-template-columns:1fr}
  .visit-card{padding:var(--s6)}
  .hero-full{min-height:min(88vh,720px)}
  .hero-full h1{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .eyebrow{font-size:.62rem;letter-spacing:.12em}
  .pill-row{display:grid;grid-template-columns:1fr 1fr}
  .pill{flex:none}
  .map{height:320px}
  .topbar{font-size:.62rem;letter-spacing:.06em}
  .topbar .tb-addr{display:none}
  .brand-logo{height:46px}
  /* Both calls to action stay in the bar on a phone, so the header has to give
     up its horizontal padding and the buttons have to stop shrink-wrapping. */
  .nav-cta{gap:var(--s2)}
  .nav-cta .btn-sm{padding:.5rem .62rem;font-size:.64rem;letter-spacing:.04em;white-space:nowrap}
  /* A phone column is narrow enough that an 88px square crowds the item name. */
  .mitem.has-shot{gap:var(--s3)}
  .mitem-shot{width:68px;height:68px;border-radius:13px}
  /* With a photo taking part of the width the name usually wraps, leaving the
     leader as a two-dot stub against the price. Drop it and let the price sit
     on its own. */
  .mitem.has-shot .mitem-dots{display:none}
}
/* Smallest phones still in use (iPhone SE, 320px): the two buttons plus the
   logo and the menu toggle only fit if the header tightens up further. */
@media(max-width:359px){
  nav.wrap{padding-inline:var(--s3)}
  /* Grid items default to min-width:auto, so a long unbreakable string inside a
     job card was widening its column past the viewport. */
  .role{min-width:0;padding:var(--s5);overflow-wrap:anywhere}
  .brand-logo{height:40px}
  .nav-cta{gap:5px}
  .nav-cta .btn-sm{padding:.45rem .5rem;font-size:.6rem;letter-spacing:.02em}
}