/* Boarcher Cebu Lechon House — restaurant landing page.
   Copy, headings and structured data are taken from the live boarchercebulechon.com.
   Decoration is charcoal, smoke and ember.

   Type: Prompt for headings, Lato for running text, DM Sans for labels — the
   brand's own pairing, chosen 1 October 2026. The page used to ship five
   switchable type systems for comparison; that is settled now, so the other
   four and their font files have been removed. */

/* ---------- faces ---------- */
@font-face { font-family: "Prompt"; src: url("../fonts/prompt-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Prompt"; src: url("../fonts/prompt-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Prompt"; src: url("../fonts/prompt-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Prompt"; src: url("../fonts/prompt-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------- type ----------
   --display  headings        --body  running text        --ui  labels, buttons, nav
   The [data-font] attribute is kept on <html> so nothing that reads it breaks,
   but there is only one value now. */
:root,
[data-font="brand"] {
  --display: "Prompt", system-ui, sans-serif;
  --body:    "Lato", system-ui, sans-serif;
  --ui:      "DM Sans", system-ui, sans-serif;
  --h-weight: 700; --h-ls: -.005em; --h-lh: 1.16; --h-scale: 1;
}

/* ---------- palette ---------- */
:root {
  /* The page was a warm cream (#faf6f1). It is white now, on the owner's
     instruction, and the greys and the rule colour come with it: a warm
     line (#e6dcd0) and a warm grey read as dirt once the paper is white. */
  --cream: #ffffff; --cream-2: #f7f7f8; --paper: #fff;
  --ink: #17161a; --ink-2: #5c6068; --ink-3: #656a70;
  --line: #e3e3e5;
  --red: #d10000; --red-deep: #9e0b12; --red-soft: #fdf0ee;
  --char: #171412;
  --w: min(1240px, 92vw);
  --r: 4px;
  --gap: clamp(58px, 6.4vw, 96px);
  --shadow: 0 18px 50px -24px rgba(20, 20, 26, .34);  /* neutral; the warm brown muddied white */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* height:auto is required — the width/height attributes on each <img> otherwise
   pin the used height and the picture renders stretched. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: var(--h-weight);
  line-height: var(--h-lh); letter-spacing: var(--h-ls); margin: 0;
}

.wrap { width: var(--w); margin-inline: auto; }

/* Vertical rhythm. One gap value drives the whole page: a section pays for its
   own top and bottom space, and consecutive plain sections drop the duplicate
   so the gap between any two blocks is always exactly one --gap. Sections with
   their own background (.band) always keep both, or the colour would crowd. */
.sec { padding-block: var(--gap); }
.sec + .sec { padding-top: 0; }
.band { background: var(--cream-2); }
.sec.band, .band + .sec { padding-top: var(--gap); }
.sec-tight { padding-block: calc(var(--gap) * .62); }
/* the dark value bar is a contained card, so the section after it tops up to
   exactly one --gap rather than stacking two full pads */
.sec-tight + .sec { padding-top: calc(var(--gap) * .38); }

.eyebrow {
  font-family: var(--ui); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--red); margin: 0 0 14px;
}
.lede { color: var(--ink-2); font-size: 16.5px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 300; font-family: var(--ui); }
.skip:focus { left: 12px; top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 28px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-ghost { border-color: var(--red); color: var(--red); }
.btn-ghost:hover { background: var(--red); color: #fff; transform: translateY(-2px); }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(250,246,241,.93); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.nav.stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(0,0,0,.5); }
.nav-in { width: var(--w); margin-inline: auto; display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 12px; }
/* the logo art is already transparent and square — no disc, no crop, so the
   whole mascot reads instead of a circle cut out of the middle of it */
.brand-mark { width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { display: block; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: .09em; line-height: 1; }
.brand-sub { display: block; font-family: var(--ui); font-size: 8.5px; font-weight: 500; letter-spacing: .3em; color: var(--ink-3); text-transform: uppercase; margin-top: 5px; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav-links a { font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; position: relative; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); }
.nav-links a.on { color: var(--red); }
.nav .btn { padding: 13px 22px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: var(--r); cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-in { width: var(--w); margin-inline: auto; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1fr); gap: 40px; align-items: center; padding: 52px 0 64px; }
.hero h1 { font-size: calc(clamp(44px, 5.6vw, 78px) * var(--h-scale)); }
/* the live site's own tagline, set in each system's display face */
.hero .tagline { display: block; font-family: var(--display); font-weight: 400; color: var(--red); font-size: calc(clamp(21px, 2.4vw, 32px) * var(--h-scale)); line-height: 1.2; margin-top: 12px; letter-spacing: normal; }
.hero .lede { max-width: 46ch; margin: 22px 0 26px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* the four claims the live site runs under its masthead */
.claims { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.claims li { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 7px 13px; }

/* ember glow replaces the earlier disc: warmth off the coals, no flag reading */
.hero-art { position: relative; min-height: 460px; display: grid; place-items: center; }

/* 3D relief canvas sits over the flat photo and only takes its place once the
   textures are up, so there is never an empty hole while it loads */
.hero-3d { position: absolute; inset: 0; z-index: 2; }
.hero-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-art.is-3d .hero-shot { opacity: 0; }
.hero-shot { transition: opacity .45s ease; }
.glow {
  position: absolute; inset: 6% 0 10%;
  background:
    radial-gradient(ellipse 44% 40% at 52% 44%, rgba(209, 64, 0, .20), transparent 68%),
    radial-gradient(ellipse 62% 52% at 50% 52%, rgba(240, 150, 60, .13), transparent 72%);
  filter: blur(26px);
}
.smudge { position: absolute; inset: 30% -4% 8% -2%; background: radial-gradient(ellipse 48% 34% at 44% 74%, rgba(96,62,40,.11), transparent 70%); filter: blur(18px); }
/* multiply drops the studio white so the cut-out sits straight on the cream */
.hero-shot { position: relative; width: 100%; max-width: 620px; mix-blend-mode: multiply; }

/* The rail sits over a photograph, so a white panel with dark icons
   disappeared into the bright parts of it. Black bar, white icons. */
.rail {
  position: absolute; right: 0; top: 52%; transform: translateY(-50%);
  background: #0d0c0c; border-radius: 8px 0 0 8px;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.6);
  display: grid; z-index: 20; overflow: hidden;
}
.rail a { color: rgba(255,255,255,.82); }
.rail a:hover { color: #fff; background: rgba(255,255,255,.12); }
.rail .rail-wa:hover { background: #25d366; color: #0d0c0c; }
.rail a { width: 46px; height: 46px; display: grid; place-items: center; color: var(--ink-2); transition: color .2s, background .2s; }
.rail a:hover { color: #fff; background: var(--red); }
.rail svg { width: 17px; height: 17px; }

/* ---------- marquee (the live site's scrolling claim strip) ---------- */
.marquee { background: var(--char); color: #fff; overflow: hidden; padding: 15px 0; }
/* align-items:center — the separator is drawn, not typed, because the glyph
   previously used sat below the cap height and looked dropped. */
.marquee-track { display: flex; align-items: center; width: max-content; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.marquee b {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--red); margin: 0 26px; flex: none; text-indent: -9999px; overflow: hidden;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- three-up value bar ---------- */
.bar { width: var(--w); margin: 0 auto; background: var(--char); color: #fff; border-radius: 6px; }
.bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bar-cell { padding: 32px 28px; display: flex; gap: 15px; align-items: flex-start; position: relative; }
.bar-cell + .bar-cell::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; background: rgba(255,255,255,.13); }
.bar-cell svg { width: 28px; height: 28px; color: var(--red); flex: none; margin-top: 3px; }
.bar-cell h3 { font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 7px; }
.bar-cell p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62); }

/* ---------- alternating split ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 52px; align-items: center; }
.split.rev .split-txt { order: 2; }
.split h2 { font-size: calc(clamp(27px, 3.1vw, 38px) * var(--h-scale)); margin-bottom: 14px; }
.split p { color: var(--ink-2); margin: 0 0 16px; }
.split-img { border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.split-img img { width: 100%; }
.ticks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 7px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }

/* ---------- menu / price list ---------- */
.menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.menu-head h2 { font-size: calc(clamp(27px, 3.1vw, 38px) * var(--h-scale)); }
.more { font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.more svg { width: 15px; height: 15px; transition: transform .2s; }
.more:hover svg { transform: translateX(4px); }
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.06); }
.card-body { padding: 17px 17px 19px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card h3 { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); flex: 1; }
.price { font-family: var(--display); font-size: 20px; font-weight: var(--h-weight); color: var(--red); }
.price.na { color: var(--ink-3); font-size: 14px; font-style: italic; font-weight: 400; }
.menu-note { margin: 22px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ---------- order request + about ---------- */
/* The two halves were set to unequal widths with a tight gutter, which made the
   dark card and the about column read as two unrelated blocks. Equal columns, a
   real gutter, and both halves top-aligned to the same line. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; align-items: start; }
.book { background: var(--char); color: #fff; border-radius: 8px; padding: 38px 34px 34px; position: relative; overflow: hidden; }
.book-art { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.book .eyebrow { color: #ff5a5a; }
.book h2 { font-size: calc(clamp(24px, 2.5vw, 30px) * var(--h-scale)); margin-bottom: 10px; position: relative; line-height: 1.2; }
.book > p { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.65; margin: 0 0 22px; max-width: 44ch; position: relative; }
.fields { display: grid; grid-template-columns: 1.25fr .85fr 1fr; gap: 10px; margin-bottom: 15px; position: relative; }
.field { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 12px 13px; }
.field svg { width: 15px; height: 15px; color: var(--red); flex: none; }
.field input, .field select { background: transparent; border: 0; color: #fff; font-family: var(--ui); font-size: 12.5px; width: 100%; outline: none; min-width: 0; }
.field select option { background: var(--char); color: #fff; }
.book .btn { width: 100%; position: relative; }
.book-note { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.48); margin: 14px 0 0; position: relative; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 30px; align-items: start; }
.about-grid h2 { font-size: calc(clamp(24px, 2.5vw, 30px) * var(--h-scale)); margin-bottom: 12px; line-height: 1.2; }
.about-grid p { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; }
.sig { font-family: var(--display); font-size: 26px; margin-top: 20px; font-weight: var(--h-weight); font-style: italic; line-height: 1; margin-bottom: 6px; }
.sig-name { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.video { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5)); }
.play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: var(--red); border: 0; display: grid; place-items: center; cursor: pointer; z-index: 2; color: #fff; transition: transform .2s; }
.play:hover { transform: scale(1.08); }
.play svg { width: 19px; height: 19px; margin-left: 3px; }
.video-label { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); text-align: center; margin-top: 11px; }

/* ---------- two-up feature cards ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.feat { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 34px 32px; }
.feat h2 { font-size: calc(clamp(22px, 2.3vw, 28px) * var(--h-scale)); margin-bottom: 12px; }
.feat p { color: var(--ink-2); margin: 0 0 14px; font-size: 14.5px; }
.feat p:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.faq-head { text-align: center; max-width: 62ch; margin: 0 auto 34px; }
.faq-head h2 { font-size: calc(clamp(27px, 3.1vw, 38px) * var(--h-scale)); margin-bottom: 12px; }
/* two columns, each item its own height: align-items:start stops a long open
   answer on one side from leaving a tall empty gap on the other */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 46px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:nth-child(1), .faq-item:nth-child(2) { border-top: 1px solid var(--line); }
.faq-q { margin: 0; font: inherit; }
.faq-q button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--ui); font-size: 14.5px; font-weight: 700; color: var(--ink);
  line-height: 1.45; padding: 21px 34px 21px 0; position: relative;
}
.faq-q button::after {
  content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform .2s, top .2s;
}
.faq-q button[aria-expanded="true"]::after { transform: rotate(-135deg); top: 31px; }
.faq-q button:hover { color: var(--red); }
.faq-q button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.faq-a { margin: 0; padding: 0 44px 22px 0; color: var(--ink-2); font-size: 14.5px; }

/* ---------- delivery areas ---------- */
.areas { text-align: center; }
.areas h2 { font-size: calc(clamp(24px, 2.6vw, 32px) * var(--h-scale)); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 0; padding: 0; list-style: none; }
.chips li { font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 8px 16px; }
.rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; text-align: left; }
.rate { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 18px 18px; }
.rate b { display: block; font-family: var(--display); font-size: 18px; font-weight: var(--h-weight); color: var(--red); margin-bottom: 5px; }
.rate span { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; display: block; }

/* ---------- articles ---------- */
.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.post { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post-img { aspect-ratio: 16/10; overflow: hidden; background: var(--cream-2); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover .post-img img { transform: scale(1.05); }
.post-body { padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post h3 { font-size: 15px; line-height: 1.35; flex: 1; }
.post .read { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- closing CTA ---------- */
.cta { background: var(--char); color: #fff; text-align: center; padding: 74px 0; position: relative; overflow: hidden; }
.cta h2 { font-size: calc(clamp(28px, 3.4vw, 42px) * var(--h-scale)); margin-bottom: 14px; position: relative; }
.cta p { color: rgba(255,255,255,.62); margin: 0 auto 28px; max-width: 54ch; position: relative; }
.cta .btn { position: relative; }

/* ---------- footer ---------- */
.foot { background: var(--cream-2); border-top: 1px solid var(--line); padding: 52px 0 28px; position: relative; overflow: hidden; }
.foot-art { position: absolute; right: -20px; bottom: 0; width: min(420px, 38%); opacity: .5; pointer-events: none; }
/* Five columns: the brand, then the three groups a reader actually browses
   by, then hours and contact. It was one "Quick Links" column holding
   twenty-two links in a single stack, which is a list, not a footer. */
.foot-grid {
  display: grid; gap: 34px 30px; position: relative;
  grid-template-columns: 1.45fr .95fr 1.05fr 1fr 1.05fr;
}
.foot-brandcol { max-width: 340px; }
.foot h4 + h4 { margin-top: 22px; }
@media (max-width: 1240px) {
  .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .foot-brandcol { grid-column: 1 / -1; max-width: 520px; }
}
.foot h4 { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 15px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a, .foot li { font-size: 13.5px; color: var(--ink-2); }
.foot a:hover { color: var(--red); }
.foot .brand { margin-bottom: 13px; }
.foot-tag { font-size: 13.5px; color: var(--ink-2); max-width: 27ch; margin: 0 0 16px; }
.signup { display: flex; gap: 8px; max-width: 320px; }
.signup input { flex: 1; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px; font-family: var(--ui); font-size: 12.5px; color: var(--ink); outline: none; }
.signup input:focus { border-color: var(--red); }
.signup button { border: 0; background: var(--red); color: #fff; border-radius: var(--r); padding: 0 16px; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.hours span { display: block; font-size: 13.5px; color: var(--ink-2); }
.hours b { color: var(--ink); }
.cc { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin: 0 0 11px; }
.cc svg { width: 14px; height: 14px; color: var(--red); flex: none; margin-top: 5px; }
.foot-base { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); position: relative; }
.foot-base a { color: var(--ink-2); }

/* ---------- reveals ---------- */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 10.5px; letter-spacing: .09em; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .bar-grid { grid-template-columns: repeat(2, 1fr); }
  .bar-cell:nth-child(3)::before { display: none; }
  .rates { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; column-gap: 0; }
  .faq details:nth-child(2) { border-top: 0; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-links[data-open] { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); padding: 16px 4vw; gap: 2px; }
  .nav-links[data-open] a { padding: 11px 0; font-size: 13px; }
  .burger { display: flex; }
  .nav .btn { margin-left: 12px; }
  .hero-in { grid-template-columns: 1fr; gap: 18px; padding-top: 32px; }
  .hero-art { min-height: 320px; order: -1; }
  .rail { display: none; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.rev .split-txt { order: 0; }
  .duo, .about-grid, .pair { grid-template-columns: 1fr; }
  .video { aspect-ratio: 16/9; max-width: 420px; }
}
@media (max-width: 700px) {
  :root { --w: 90vw; }
  .sec { padding: 56px 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .bar-grid { grid-template-columns: 1fr; }
  .bar-cell + .bar-cell::before { left: 28px; right: 28px; top: 0; bottom: auto; width: auto; height: 1px; }
  .menu-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-brandcol { grid-column: 1 / -1; }
  .fields { grid-template-columns: 1fr; }
  .book { padding: 30px 22px; }
}
@media (max-width: 460px) {
  .cards, .posts, .rates { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  /* the header runs brand + burger + CTA; below 460 the sub-line and the button
     icon are what push the CTA past the viewport, so both come out here */
  .nav-in { gap: 10px; }
  .nav .brand-sub { display: none; }
  .brand-name { font-size: 16px; }
  .brand-mark { width: 38px; height: 38px; }
  .burger { width: 40px; height: 40px; }
  .nav .btn { padding: 11px 13px; font-size: 10px; letter-spacing: .07em; white-space: nowrap; }
  .nav .btn svg { display: none; }
}

/* ---------- cookie notice (consent.js) ---------- */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  max-width: 360px; background: var(--char); color: #fff;
  border-radius: 10px; padding: 16px 18px; box-shadow: 0 18px 50px -18px rgba(0,0,0,.6);
  font-family: var(--ui);
}
.consent p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.78); }
.consent-btns { display: flex; gap: 8px; }
.consent button {
  flex: 1; border: 0; border-radius: 6px; padding: 9px 12px; cursor: pointer;
  font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: var(--red); color: #fff;
}
.consent button.ghost { background: transparent; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.8); }
.consent button:hover { filter: brightness(1.1); }
@media (max-width: 560px) { .consent { left: 10px; right: 10px; bottom: 10px; max-width: none; } }

/* ---------- home-page photo band ----------
   Three photographs between the delivery section and the blog, and the only
   route to the gallery from the home page. The strip grid lives in
   console.css, which the home page does not load, so it is restated here at
   the size this one band needs. */
/* Scoped to #photos. Unscoped it reached every inner page through this
   shared stylesheet and forced a 4:5 crop on strips that are supposed to
   keep each photograph's own proportions -- the home page is the one place
   a crop is wanted, to hold the band in a neat row. */
#photos .shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; }
#photos .shots figure { margin: 0; border-radius: 10px; overflow: hidden; background: #f3f3f4; }
#photos .shots img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photoband-more { margin: 20px 0 0; }
@media (max-width: 760px) {
  #photos .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #photos .shots figure:nth-child(3) { display: none; }
}

/* ===================================================================
   MASTHEAD DROPDOWNS

   Eight flat links already overflowed the bar at 1320px, and the thirteen
   October 2026 pages brought the total to twenty-two. Three groups plus two
   flat links hold all of it in five slots.

   Built from a button and a panel rather than <details>, for the same reason
   the FAQ is: a bare <details> on this site did not hide its own content.
   The panel is `hidden` in the markup, so a reader without JavaScript sees
   the top-level links and the footer carries the rest.
   =================================================================== */
.navgrp { position: relative; display: inline-flex; }
.navgrp-b {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ui); font-size: 10px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
  background: transparent; border: 0; padding: 6px 0; cursor: pointer;
  white-space: nowrap; transition: color .15s;
}
.navgrp-b svg { width: 11px; height: 11px; opacity: .65; transition: transform .2s; }
.navgrp-b:hover, .navgrp-b[aria-expanded="true"], .navgrp-b.on { color: #fff; }
.navgrp-b.on { color: #ff6a5e; }
.navgrp-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.navgrp-m[hidden] { display: none; }
.navgrp-m {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 248px; background: #141313; border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px; padding: 7px; display: grid; gap: 1px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.85); z-index: 80;
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.navgrp-m::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.navgrp-m a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-family: var(--ui); font-size: 12.5px; letter-spacing: .01em;
  text-transform: none; color: rgba(255,255,255,.80); white-space: nowrap;
}
.navgrp-m a:hover, .navgrp-m a:focus-visible { background: rgba(255,255,255,.10); color: #fff; }
.navgrp-m a.on { color: #ff6a5e; }
.navgrp-m a::after { display: none; }

/* On a phone the bar collapses to the burger menu, so the groups flatten
   into plain headed lists rather than trying to be dropdowns in a drawer. */
@media (max-width: 1320px) {
  .navgrp { display: block; }
  .navgrp-b { width: 100%; justify-content: space-between; padding: 11px 0; font-size: 13px; letter-spacing: .1em; }
  .navgrp-m {
    position: static; transform: none; min-width: 0; margin: 2px 0 8px;
    background: rgba(255,255,255,.05); box-shadow: none; border-color: rgba(255,255,255,.1);
  }
  .navgrp-m a { font-size: 13px; padding: 10px 12px; }
}