/* ==========================================================================
   Bench Deli — bench-deli.otlusites.com
   One hand-written stylesheet. Nothing is loaded from another domain.

   WHERE THE LOOK COMES FROM
   Bench Deli is a neoclassical portico in gold lettering on Surajmal Vihar
   Main Road, and their printed menu is a cream card with a fine gold frame,
   scrolled corners and prices ranged hard right. So the site is that card:
   the paper (#F5E2BA, sampled off their own menu photographs) is the page,
   their gold is the only accent, the frame and its corner scrolls are
   redrawn here as SVG, and every price sits where it sits on the card.

   The dark scheme is their building after sunset rather than an inversion —
   a warm near-black taken off the night photographs of the facade, with the
   gold lifted to champagne so it reads as gold rather than mud.

   TYPE
   Cormorant Garamond for anything said out loud: its capitals are the
   Trajan-ish roman of the BENCH lettering over the door. Jost for
   everything read quietly, letterspaced in caps for section headings, which
   is the deco note their printed card strikes. Two families, no more.
   ========================================================================== */

/* ---- fonts, self-hosted -------------------------------------------------
   Cormorant Garamond and Jost are cut to Google's "latin" subset, which
   does not carry the rupee sign. The third file is Cormorant subset down to
   that one glyph — 1 KB — so ₹250 renders in the site's own typeface
   instead of falling back to whatever the phone happens to have.

   Jost has no ₹ at all, in any subset. Prices on this site are therefore
   always set in Cormorant, which does. The rupee cut is registered under
   the Jost family too, purely as a safety net: if a ₹ ever ends up in sans
   text it renders from a real self-hosted file rather than a system font.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin-italic.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-rupee.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/cormorant-garamond-rupee.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20B9;
}

/* ---- colour -------------------------------------------------------------
   Three blocks, in this order:
     1. :root                                   → light, the default
     2. device asks dark AND light is not pinned → dark
     3. dark pinned with the switch              → dark
   The dark values are written twice on purpose. There is no build step in
   the browser, so there is nothing to generate one from the other, and two
   adjacent honest copies beat any clever way round it.
   ------------------------------------------------------------------------ */

:root {
  color-scheme: light;

  --bg:         #fbf5e9;  /* their menu paper, lifted so it can hold a page */
  --bg-2:       #f5e6c6;  /* the paper itself — the menu card blocks        */
  --ink:        #221b10;  /* warm near-black. Never #000                    */
  --muted:      #6e6047;
  --line:       #dfcfa9;
  --accent:     #7e601a;  /* their gold, taken down until it reads as text  */
  --accent-ink: #fff8ea;
  --gold:       #b08e33;  /* leaf gold — rules and ornament only, never text */
  --shade:      rgba(34, 27, 16, .06);
  --header-bg:  rgba(251, 245, 233, .93);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:         #17140d;  /* the facade at night, off their own photograph */
    --bg-2:       #1f1b12;
    --ink:        #f0e7d3;
    --muted:      #a79878;
    --line:       #342d1f;
    --accent:     #d9b45c;  /* the same gold, lifted so it stays gold        */
    --accent-ink: #17140d;
    --gold:       #c9a24a;
    --shade:      rgba(0, 0, 0, .3);
    --header-bg:  rgba(23, 20, 13, .92);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:         #17140d;
  --bg-2:       #1f1b12;
  --ink:        #f0e7d3;
  --muted:      #a79878;
  --line:       #342d1f;
  --accent:     #d9b45c;
  --accent-ink: #17140d;
  --gold:       #c9a24a;
  --shade:      rgba(0, 0, 0, .3);
  --header-bg:  rgba(23, 20, 13, .92);
}

/* ---- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  font-weight: 350;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  z-index: 60; padding: .6rem 1.1rem; background: var(--accent);
  color: var(--accent-ink); text-decoration: none; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { top: .5rem; }

/* ---- type --------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.1rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.3rem); }
h3 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.28rem, 1.05rem + .95vw, 1.85rem);
  line-height: 1.42;
  font-weight: 350;
  color: var(--ink);
}

/* Small letterspaced caps — the deco note off their printed card. */
.eyebrow {
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.eyebrow--mid { text-align: center; }

.note {
  font-size: .8rem;
  letter-spacing: .045em;
  color: var(--muted);
}

.serif-i {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
}

/* ---- layout ------------------------------------------------------------- */

.wrap { width: min(100% - 2.4rem, 1180px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.4rem, 760px); }
@media (max-width: 380px) { .wrap { width: calc(100% - 1.6rem); } }

.band { padding-block: clamp(3.4rem, 7vw, 6.5rem); }
.band--paper { background: var(--bg-2); }
.band--tight { padding-block: clamp(2.4rem, 4.5vw, 4rem); }

.rule-top { border-top: 1px solid var(--line); }

/* ---- the plate: their menu card, redrawn --------------------------------
   Two hairlines and four scrolled corners. The corners are <use> references
   to one sprite at the top of the body, so they inherit currentColor and
   cost four tiny elements rather than four files.
   ------------------------------------------------------------------------ */

.plate { position: relative; padding: clamp(1.5rem, 3.6vw, 3rem); }
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.plate::before { inset: 0; border-radius: 3px; }
.plate::after  { inset: 6px; border-radius: 2px; opacity: .55; }

.plate__c {
  position: absolute;
  width: clamp(28px, 4.4vw, 42px);
  height: clamp(28px, 4.4vw, 42px);
  color: var(--gold);
  pointer-events: none;
}
.plate__c--tl { top: 4px; left: 4px; }
.plate__c--tr { top: 4px; right: 4px; transform: scaleX(-1); }
.plate__c--bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.plate__c--br { bottom: 4px; right: 4px; transform: scale(-1); }

.plate__in { position: relative; }

/* ---- header ------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--line);
}

.site-head__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding-block: .6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .62rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand__mark { width: 30px; color: var(--accent); flex: none; }
.brand__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__sub {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .48em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .22rem;
  margin-left: .12em;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.7rem); }
.nav a {
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.head-tools { display: flex; align-items: center; gap: .55rem; }

/* the light / dark switch — one button, two states */
.tog {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  width: 62px;
  min-height: 32px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tog svg { width: 15px; height: 15px; position: relative; z-index: 1; flex: none; }
.tog__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .22;
  transition: transform .18s ease;
}
.tog[aria-pressed="true"] .tog__knob { transform: translateX(28px); }
.tog:hover { border-color: var(--gold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tog__knob { transition: none; } }

.nav-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-btn svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .nav-btn { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.2rem 1.4rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -24px var(--shade);
  }
  .nav[hidden] { display: none; }
  .nav a {
    padding: .95rem .2rem;
    border-bottom: 1px solid var(--line);
    font-size: .82rem;
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); }
}

/* ---- buttons ------------------------------------------------------------ */

.btns { display: flex; flex-wrap: wrap; gap: .6rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 46px;
  padding: .6rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: transparent;
  color: var(--accent);
  font-family: "Jost", sans-serif;
  font-size: .755rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { background: var(--accent); color: var(--accent-ink); }

.btn--fill { background: var(--accent); color: var(--accent-ink); }
.btn--fill:hover { background: transparent; color: var(--accent); }

.btn--quiet { border-color: var(--line); color: var(--ink); }
.btn--quiet:hover { background: transparent; border-color: var(--gold); color: var(--accent); }

/* ---- the opener --------------------------------------------------------- */

.opener { padding-block: clamp(2.4rem, 5vw, 4.6rem) clamp(3rem, 6vw, 5.4rem); }
.opener__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.opener__hours {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.4rem;
  margin: 1.9rem 0 1.7rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.opener__hours b { color: var(--ink); font-weight: 500; }

.frame {
  position: relative;
  padding: 9px;
  border: 1px solid var(--gold);
  border-radius: 2px;
}
.frame img { border-radius: 1px; width: 100%; }
.frame figcaption {
  margin-top: .7rem;
  font-size: .715rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 860px) {
  .opener__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .opener__art { max-width: 420px; margin-inline: auto; width: 100%; }
}

/* ---- section headings, with their flourish ------------------------------ */

.sec-head { text-align: center; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.sec-head--left { text-align: left; }

.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  color: var(--gold);
  margin-bottom: .85rem;
}
.orn svg { width: 34px; height: 18px; flex: none; }
/* the pair mirrors, so the heading sits between two facing scrolls. The
   heading element is between them, so this cannot be an adjacent-sibling
   selector — that was the first thing to go wrong here. */
.orn svg:last-of-type { transform: scaleX(-1); }
.orn__t {
  font-family: "Jost", sans-serif;
  font-size: clamp(.86rem, .78rem + .3vw, 1.02rem);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.orn--sm svg { width: 26px; height: 14px; }
.orn--sm .orn__t { font-size: .8rem; letter-spacing: .24em; }

/* On a narrow phone a long section name will not sit between the two
   scrolls, so the scrolls move onto their own line and face each other
   above the heading instead of being dropped. */
@media (max-width: 560px) {
  .orn { flex-wrap: wrap; gap: .3rem .55rem; }
  .orn svg { width: 26px; height: 14px; }
  .orn__t { order: 3; flex-basis: 100%; white-space: normal; text-align: center; }
  .sec-head--left .orn { justify-content: flex-start; }
  .sec-head--left .orn__t { text-align: left; }
}

/* ---- the menu list ------------------------------------------------------ */

.menu-jump {
  position: sticky;
  top: 68px;
  z-index: 30;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--line);
}
.menu-jump ul {
  display: flex;
  gap: .3rem;
  margin: 0;
  padding: .55rem 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-jump ul::-webkit-scrollbar { display: none; }
.menu-jump a {
  display: block;
  padding: .42rem .78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
.menu-jump a:hover { color: var(--accent); border-color: var(--gold); }

.cols { columns: 1; }
@media (min-width: 1080px) {
  .cols { columns: 2; column-gap: clamp(2.5rem, 5vw, 4.4rem); }
}

.msec {
  break-inside: avoid;
  margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
  scroll-margin-top: 130px;
}
.msec:last-child { margin-bottom: 0; }

.msec__sub {
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.06rem;
  color: var(--muted);
  margin: -.4rem 0 1rem;
}
.msec__note {
  text-align: center;
  font-size: .715rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: -.2rem 0 1.2rem;
}

.items { margin: 0; }

.item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1.2rem;
  padding: .78rem 0;
  border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }

.item__n {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 1.05rem + .32vw, 1.36rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: .005em;
}
.item__p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.08rem, 1rem + .3vw, 1.28rem);
  font-weight: 500;
  line-height: 1.22;
  white-space: nowrap;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.item__p small {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  margin-top: .1rem;
}
.item__d {
  grid-column: 1 / 2;
  margin: .28rem 0 0;
  font-size: .805rem;
  line-height: 1.5;
  letter-spacing: .012em;
  color: var(--muted);
  max-width: 46ch;
}

.gst {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- signature picks on the home page ----------------------------------- */

.picks { display: grid; gap: 0; }
.pick {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1.4rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.pick:last-of-type { border-bottom: 0; }
.pick:hover .pick__n { color: var(--accent); }
.pick__n {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem);
  line-height: 1.16;
}
.pick__d {
  grid-column: 1 / 2;
  margin: .2rem 0 0;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .02em;
}
.pick__p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.2rem, 1.05rem + .55vw, 1.5rem);
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- full-bleed photograph ---------------------------------------------- */

.bleed { position: relative; }
.bleed img { width: 100%; height: clamp(240px, 42vw, 460px); object-fit: cover; }
.bleed figcaption {
  padding: .85rem 0 0;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- the index: what is on the card, and a way straight into it ---------
   Not three photographs in a row — the three menus have one usable
   photograph between them, and a contents page is what a menu this long
   actually needs. Every section name here is a link to that section.
   ------------------------------------------------------------------------ */

.index { display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); }
@media (min-width: 720px) { .index { grid-template-columns: repeat(3, 1fr); } }

.index__col { border-top: 1px solid var(--gold); padding-top: 1.2rem; }

.index__n {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: lining-nums;
}
.index__n span {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
}
.index__h { margin: .95rem 0 .85rem; }
.index__h a { text-decoration: none; }
.index__h a:hover { color: var(--accent); }

.index ul { margin: 0; padding: 0; list-style: none; }
.index li { border-bottom: 1px solid var(--line); }
.index li:last-child { border-bottom: 0; }
.index li a {
  display: block;
  padding: .46rem 0;
  font-size: .84rem;
  letter-spacing: .015em;
  text-decoration: none;
  color: var(--muted);
}
.index li a:hover { color: var(--accent); }

/* ---- story -------------------------------------------------------------- */

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }

.pull {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.55rem, 1.15rem + 1.75vw, 2.6rem);
  line-height: 1.32;
  font-weight: 350;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.pull em { font-style: italic; color: var(--accent); }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.2rem);
  align-items: start;
}
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
/* height:auto, not 100% — with 100% the grid row stretches to the tallest
   item and every shorter photograph gets a field of empty paper under it. */
.gallery img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 4; }
.gallery figcaption {
  margin-top: .5rem;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.gallery .wide { grid-column: span 2; }
.gallery .wide img { aspect-ratio: 3 / 2; }

/* ---- visit -------------------------------------------------------------- */

.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.2rem);
}
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }

.facts { margin: 0; }
.facts dt {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1.6rem;
}
.facts dt:first-child { margin-top: 0; }
.facts dd {
  margin: .45rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  line-height: 1.42;
}
.facts dd a { text-decoration-color: var(--gold); text-underline-offset: 3px; }

.subhead {
  font-family: "Jost", sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.6rem 0 .9rem;
}

/* ---- the enquiry form --------------------------------------------------- */

.enquiry { margin: 0; }
.enquiry__field { margin-bottom: 1.15rem; }
.enquiry label {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.enquiry__optional { text-transform: none; letter-spacing: .04em; }
.enquiry input,
.enquiry textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", sans-serif;
  font-size: 1rem;
  font-weight: 350;
}
.enquiry textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.enquiry input:focus, .enquiry textarea:focus { border-color: var(--gold); }
.enquiry button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .6rem 2rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: "Jost", sans-serif;
  font-size: .755rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.enquiry button[type="submit"]:hover { background: transparent; color: var(--accent); }
.enquiry button[disabled] { opacity: .55; cursor: default; }
.enquiry__done {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0;
}
.enquiry__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- footer ------------------------------------------------------------- */

.site-foot {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.8rem, 5vw, 4.2rem) 1.6rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  padding-bottom: 2.4rem;
}
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-grid h2 {
  font-family: "Jost", sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.foot-list { margin: 0; padding: 0; list-style: none; font-size: .88rem; line-height: 2; }
.foot-list a { text-decoration: none; }
.foot-list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.foot-brand__mark { width: 40px; color: var(--accent); margin-bottom: .9rem; }
.foot-brand p { font-size: .88rem; color: var(--muted); max-width: 34ch; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--muted);
  letter-spacing: .03em;
}

.built-by {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .09em;
  opacity: .82;
}
.built-by:hover { opacity: 1; }
.built-by img { width: 96px; height: 20px; }
.built-by .on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .built-by .on-light { display: none; }
  :root:not([data-theme="light"]) .built-by .on-dark  { display: block; }
}
:root[data-theme="dark"] .built-by .on-light { display: none; }
:root[data-theme="dark"] .built-by .on-dark  { display: block; }

/* ---- 404 ---------------------------------------------------------------- */

.oops { display: grid; place-items: center; min-height: 62vh; text-align: center; }

/* ---- print --------------------------------------------------------------
   Menus and price lists get printed and stuck by a till. A printed page
   with a navigation bar and a WhatsApp button on it looks careless.
   ------------------------------------------------------------------------ */

@media print {
  .site-head, .menu-jump, .site-foot, .btns, .btn, .bleed, .tog, .nav-btn,
  .skip, .enquiry, .plate__c, .frame, .gallery { display: none !important; }

  html, body { background: #fff; color: #000; }
  body { font-size: 10.5pt; line-height: 1.45; }

  .plate { padding: 0; }
  .plate::before, .plate::after { display: none; }
  .band { padding-block: 0; }
  .wrap, .wrap--narrow { width: 100%; }

  .cols { columns: 2; column-gap: 14mm; }
  .msec { break-inside: avoid; margin-bottom: 7mm; }
  .item { padding: 2.4pt 0; border-bottom: .4pt solid #ccc; }
  .item__n, .item__p { font-size: 10.5pt; color: #000; }
  .item__d { font-size: 8pt; color: #444; }
  .orn svg { display: none; }
  .orn__t { font-size: 10pt; letter-spacing: .2em; }

  a[href]::after { content: ""; }
  @page { margin: 14mm; }
}