/*
Theme Name: Waakye Abrantie
Theme URI: https://waakyeabrantie.com
Author: Waakye Abrantie
Description: A premium one-off theme for Waakye Abrantie, Kumasi: home, menu with online tray ordering, our story, gallery, and visit and order pages with the three branches, managers and reviews. Activate it and the five pages are created and linked for you. Branches, hours, WhatsApp, menu, prices, managers and reviews are edited at the top of assets/js/script.js.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waakye-abrantie
*/

/* =========================================================
   WAAKYE ABRANTIE — stylesheet
   Layout: alternating "lacquer" (the glossy black shop sign)
   and "paper" sections, with banana-leaf green and gari gold
   as accents. Edit the tokens below to re-theme the site.
   ========================================================= */

:root {
  /* Colour */
  /* Palette: #ff0000 · #c00000 · #800000 · #400000 · #000000 */
  --lacquer: #000000;      /* black: header, footer, dark sections */
  --lacquer-2: #400000;    /* maroon: cards and surfaces on black */
  --red: #ff0000;          /* pure red: buttons, accents */
  --red-deep: #800000;
  --coral: #c00000;        /* crimson */
  --salmon: #800000;
  --gold: #ff0000;         /* accent on black */
  --on-gold: #ffffff;      /* text on accent buttons */
  --leaf: #c00000;         /* small labels on light */
  --leaf-pale: #fdeaea;
  --paper: #fff8f7;        /* light sections */
  --paper-2: #f7e9e7;
  --ink: #1a0000;          /* text on light */
  --muted: #6b3b3b;
  --on-dark: #ffffff;
  --on-dark-muted: #e9c4c4;
  --line: rgba(128, 0, 0, 0.15);
  --line-dark: rgba(255, 255, 255, 0.14);

  /* Type */
  --f-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --f-accent: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.9rem, 7.6vw, 6.4rem);
  --fs-h2: clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.4rem);
  --fs-small: 0.875rem;

  /* Space & shape */
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --gutter: clamp(16px, 4vw, 44px);
  --container: 1240px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 30px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sh: 0 24px 60px rgba(64, 0, 0, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
svg.i { width: 1.15em; height: 1.15em; flex: none; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--lacquer); padding: .6rem 1rem; border-radius: var(--r-sm); font-weight: 700; }
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; }
h1 em, h2 em { font-family: var(--f-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); max-width: 58ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lacquer);
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; }
.twi { font-family: var(--f-accent); font-style: italic; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--dark { background: var(--lacquer); color: var(--on-dark); }
.section--dark .lede { color: var(--on-dark-muted); }
.section--dark .eyebrow { color: var(--on-dark-muted); }
.section--dark .eyebrow::before, .page-hero .eyebrow::before, .hero .eyebrow::before { background: var(--gold); }
.section--paper2 { background: var(--paper-2); }
.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); max-width: 760px; }
.section-head--split { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem 3rem; }
.section-head--split > div { display: grid; gap: 1.1rem; min-width: 0; }
@media (max-width: 760px) { .section-head--split { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .8rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--coral); }
.section--dark .btn--red, .site-header .btn--red, .hero .btn--red, .page-hero .btn--red { background: #fff; color: var(--lacquer); }
.section--dark .btn--red:hover, .site-header .btn--red:hover, .hero .btn--red:hover, .page-hero .btn--red:hover { background: var(--gold); }
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: #fff; color: var(--lacquer); }
.btn--ghost { border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .page-hero .btn--ghost:hover { background: var(--on-dark); color: var(--lacquer); border-color: var(--on-dark); }
.btn--sm { min-height: 2.6rem; padding: .55rem 1.15rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; white-space: nowrap; }
.link-arrow:hover { color: var(--red); }
.section--dark .link-arrow { border-color: var(--gold); }
.section--dark .link-arrow:hover { color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(0, 0, 0, 0.88); color: var(--on-dark);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.6rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand__mark { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: var(--red); }
.brand__name { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; line-height: 1; }
.brand__name span { color: var(--gold); }
.brand__tag { display: block; margin-top: .25rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }

.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav__list { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__link { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--on-dark-muted); padding-block: .4rem; border-bottom: 2px solid transparent; transition: color .2s; }
.nav__link:hover { color: var(--on-dark); }
.nav__link[aria-current="page"] { color: var(--on-dark); border-color: var(--red); }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent; cursor: pointer; place-items: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 2px; background: var(--on-dark); position: relative; transition: transform .3s var(--ease), background-color .3s; content: ""; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: calc(4.6rem + env(safe-area-inset-top, 0px)) 0 auto 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 1.4rem;
    background: var(--lacquer); padding: 1.6rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    border-bottom: 1px solid var(--line-dark);
    transform: translateY(-120%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s;
  }
  .nav-open .nav { transform: none; visibility: visible; }
  .nav__list { flex-direction: column; gap: .2rem; }
  .nav__link { display: block; font-family: var(--f-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: var(--on-dark); border: 0; padding-block: .45rem; }
  .nav__link[aria-current="page"] { color: var(--gold); }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; background: var(--lacquer); color: var(--on-dark); overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.hero::before {
  content: ""; position: absolute; inset: auto -10% -45% auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(255, 0, 0, 0.38), transparent 70%); pointer-events: none;
}
/* Hero light: a dim close-up of waakye grains, with a warm pool of light
   that follows the pointer (rests on the plate) and reveals the food in colour. */
.hero { background: radial-gradient(120% 90% at 75% 40%, #800000 0%, #400000 45%, #000000 100%); isolation: isolate; }
.hero__bg {
  position: absolute; inset: -4%; z-index: -1; pointer-events: none;
  transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -16px), 0);
}
.hero__tex { position: absolute; inset: 0; background: url("assets/images/detail-egg.jpg") center / cover no-repeat; opacity: .13; mix-blend-mode: luminosity; filter: contrast(1.2) saturate(.5); }
.hero__tex--lit {
  opacity: .5; mix-blend-mode: normal; filter: saturate(1.1) brightness(.85);
  -webkit-mask-image: radial-gradient(circle 300px at var(--lx, 72%) var(--ly, 48%), #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
          mask-image: radial-gradient(circle 300px at var(--lx, 72%) var(--ly, 48%), #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
}
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
@media (max-width: 900px) { .hero__bg::after { background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 55%, transparent 85%); } }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__copy { display: grid; gap: 1.6rem; justify-items: start; }
.hero__title { font-size: var(--fs-hero); }
.hero__title em { color: var(--gold); }
.hero__text { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--on-dark-muted); max-width: 46ch; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; list-style: none; padding: 1.4rem 0 0; margin: .4rem 0 0; border-top: 1px solid var(--line-dark); font-size: .92rem; color: var(--on-dark-muted); }
.hero__facts li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__facts svg { color: var(--gold); }
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--on-dark-muted); box-shadow: 0 0 0 4px rgba(191, 174, 162, .18); }
.status-dot.is-open { background: #5cc95a; box-shadow: 0 0 0 4px rgba(92, 201, 90, .2); }

/* Plate anatomy: labelled photo */
.plate { position: relative; margin: 0; }
.plate__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 40px 90px rgba(60,0,0,.55), 0 0 0 10px var(--coral), 0 0 0 22px rgba(255,0,0,.22); }
.plate__tag {
  position: absolute; display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem .38rem .45rem; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.plate__tag::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255,0,0,.25); }
.plate__tag small { font-weight: 500; color: var(--muted); }
.plate__caption { position: absolute; left: 50%; bottom: -1.2rem; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .55rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: .9rem; white-space: nowrap; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .plate { max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (max-width: 480px) { .plate__tag { font-size: .72rem; padding: .3rem .6rem .3rem .4rem; } .plate__tag small { display: none; } }

/* ---------- Strip of essentials ---------- */
.strip { background: var(--coral); color: #fff; overflow: hidden; }
.strip__track { display: flex; gap: 2.6rem; width: max-content; padding-block: 1rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: -0.01em; animation: strip 38s linear infinite; }
.strip__track span { display: inline-flex; align-items: center; gap: 2.6rem; white-space: nowrap; }
.strip__track span::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- Dish cards ---------- */
.dish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
@media (max-width: 960px) { .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dish-grid { grid-template-columns: 1fr; } }
.dish { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 0 var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.dish:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.dish__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.dish:hover .dish__media img { transform: scale(1.05); }
.dish__tag { position: absolute; top: 1rem; left: 1rem; background: var(--lacquer); color: var(--gold); padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dish__tag--red { background: var(--red); color: #fff; }
.dish__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.5rem 1.5rem; flex: 1; }
.dish__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dish__price { font-weight: 800; color: var(--lacquer); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dish__desc { color: var(--muted); font-size: .95rem; flex: 1; }
.dish__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.dish__cat { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leaf); }

.add-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; font-weight: 700; font-size: .86rem; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.add-btn:hover { background: var(--ink); color: var(--paper); }
.add-btn.is-added { background: var(--leaf); border-color: var(--leaf); color: #fff; }

/* ---------- Story split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } }
.split__copy { display: grid; gap: 1.4rem; justify-items: start; min-width: 0; }
.split__copy p { max-width: 56ch; }
/* Story photos: two equal slides that fill the column; hover slides to the next */
.split:has(.story-slider) { align-items: stretch; }
.story-slider { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 440px; height: 100%; box-shadow: var(--sh); background: var(--paper-2); }
.story-slider__track { position: absolute; inset: 0; display: flex; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.story-slider__slide { flex: 0 0 100%; margin: 0; position: relative; overflow: hidden; }
.story-slider__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scale(1.08); transition: transform 6s ease-out; }
.story-slider__slide.is-active img { transform: scale(1); }
.story-slider__slide figcaption {
  position: absolute; left: 1.2rem; bottom: 1.2rem; padding: .45rem 1rem; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--lacquer); font-size: .85rem; font-weight: 700;
}
.story-slider__dots { position: absolute; right: 1.2rem; bottom: 1.3rem; display: flex; gap: .5rem; padding: .45rem .6rem; border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px); }
.story-slider__dots button { width: .7rem; height: .7rem; padding: 0; border-radius: 999px; border: 2px solid #fff; background: transparent; cursor: pointer; transition: width .4s var(--ease), background-color .3s; }
.story-slider__dots button[aria-current="true"] { width: 2rem; background: #fff; }
@media (max-width: 860px) { .story-slider { height: auto; aspect-ratio: 4 / 3.4; min-height: 0; } }
.definition { display: grid; gap: .25rem; padding: 1.2rem 1.4rem; border-left: 3px solid var(--red); background: var(--paper-2); border-radius: 0 var(--r-md) var(--r-md) 0; max-width: 46ch; }
.definition__word { font-family: var(--f-accent); font-style: italic; font-size: 1.8rem; line-height: 1.1; }
.definition__word small { font-family: var(--f-body); font-style: normal; font-size: .82rem; color: var(--muted); margin-left: .4rem; }
.definition p { color: var(--muted); font-size: .95rem; }
.section--dark .definition { background: var(--lacquer-2); }
.section--dark .definition p, .section--dark .definition small { color: var(--on-dark-muted); }

/* ---------- Plate components (anatomy list) ---------- */
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .parts { grid-template-columns: 1fr; } }
.part { display: grid; gap: .6rem; align-content: start; padding: clamp(1.4rem, 3vw, 2rem); background: var(--lacquer); }
.part__name { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.part__twi { font-family: var(--f-accent); font-style: italic; color: var(--gold); font-size: 1.15rem; }
.part p { color: var(--on-dark-muted); font-size: .95rem; }

/* ---------- Promises ---------- */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 900px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .promises { grid-template-columns: 1fr; } }
.promise { display: grid; gap: .7rem; align-content: start; padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.promise svg { width: 1.8rem; height: 1.8rem; color: var(--red); }
.promise p { color: var(--muted); font-size: .95rem; }

/* ---------- Guests mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 18vw, 230px); gap: clamp(.6rem, 1.4vw, 1rem); }
.mosaic figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-md); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
@media (max-width: 700px) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Branches ---------- */
.branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
@media (max-width: 1020px) { .branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .branches { grid-template-columns: 1fr; } }
.branch { display: grid; gap: 1.2rem; align-content: start; padding: clamp(1.6rem, 3.4vw, 2.4rem); border-radius: var(--r-lg); background: var(--lacquer-2); border: 1px solid var(--line-dark); }
.branch__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.branch__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.035em; line-height: 1; }
.branch__badge { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-dark); padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
.branch__rows { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.branch__rows li { display: flex; gap: .8rem; align-items: start; color: var(--on-dark-muted); min-width: 0; }
.branch__rows svg { color: var(--gold); margin-top: .25rem; }
.branch__rows a { color: var(--on-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.branch__rows a:hover { border-color: var(--gold); }
.branch .btn-row { margin-top: .4rem; }
.hours-note { margin-top: 1.4rem; font-size: .9rem; color: var(--on-dark-muted); }

/* ---------- Order (tray builder) ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 900px) { .order { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 1px 0 var(--line); min-width: 0; }
.panel h3 { margin-bottom: 1.2rem; }
.picker { display: grid; gap: 1.4rem; }
.picker__group h4 { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.picker__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper); font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip svg { width: .95em; height: .95em; }

.tray { display: grid; gap: .2rem; list-style: none; padding: 0; margin: 0 0 1.4rem; }
.tray__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); }
.tray__name { font-weight: 600; min-width: 0; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; }
.qty button { width: 2.1rem; height: 2.1rem; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; font-weight: 700; border-radius: 50%; }
.qty button:hover { background: var(--paper-2); }
.qty output { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tray-empty { padding: 1.4rem; border: 1.5px dashed var(--line); border-radius: var(--r-md); color: var(--muted); text-align: center; margin-bottom: 1.4rem; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }
.field { display: grid; gap: .35rem; min-width: 0; }
.field label, .field legend { font-size: .82rem; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color .2s, background-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.field textarea { resize: vertical; min-height: 5rem; }
.segmented { display: flex; gap: .4rem; border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.segmented legend { width: 100%; padding: 0; margin-bottom: .35rem; font-size: .82rem; font-weight: 700; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; text-align: center; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: .92rem; background: var(--paper); }
.segmented input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.segmented input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.form-error { color: var(--red-deep); font-weight: 600; font-size: .92rem; }

.result { margin-top: 1.4rem; padding: 1.4rem; border-radius: var(--r-md); background: var(--leaf-pale); display: grid; gap: 1rem; }
.result pre { margin: 0; white-space: pre-wrap; font: 500 .9rem/1.6 var(--f-body); background: #fff; padding: 1rem; border-radius: var(--r-sm); max-height: 260px; overflow: auto; }
.result__phones { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-weight: 700; }
.result__phones a { text-decoration: none; border-bottom: 2px solid var(--red); }

/* Floating order pill */
.fab {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.3rem; border-radius: 999px;
  background: var(--red); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 14px 34px rgba(128, 0, 0, .5);
  transition: transform .25s var(--ease);
}
.fab:hover { transform: translateY(-3px); }
.fab__count { min-width: 1.5rem; height: 1.5rem; padding-inline: .35rem; border-radius: 999px; background: var(--gold); color: var(--lacquer); display: inline-grid; place-items: center; font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--red), var(--coral) 55%, var(--red-deep)); color: #fff; border-radius: var(--r-lg); padding: clamp(2.2rem, 6vw, 4.4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.cta h2 em { color: var(--lacquer); }
.cta p { margin-top: 1rem; max-width: 48ch; opacity: .9; }
.cta .btn--ghost:hover { background: #fff; color: var(--red); border-color: #fff; }
.cta__leaf { position: absolute; right: -40px; top: -60px; width: 220px; opacity: .14; transform: rotate(24deg); pointer-events: none; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: var(--lacquer); color: var(--on-dark); padding-block: clamp(3.6rem, 8vw, 6.4rem); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -8%; top: -30%; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; background: radial-gradient(closest-side, rgba(255,0,0,.32), transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; display: grid; gap: 1.2rem; justify-items: start; }
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
.page-hero h1 em { color: var(--gold); }
.page-hero .lede { color: var(--on-dark-muted); }
.page-hero .eyebrow { color: var(--on-dark-muted); }
.hero .eyebrow { color: var(--on-dark-muted); }

/* ---------- Menu page ---------- */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.tab { padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; font-weight: 700; cursor: pointer; }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu-cat { display: grid; gap: 2rem; }
.menu-cat + .menu-cat { margin-top: clamp(3rem, 6vw, 5rem); }
.menu-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.menu-cat__head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.menu-cat__head p { color: var(--muted); font-family: var(--f-accent); font-style: italic; font-size: 1.2rem; }
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; list-style: none; padding: 0; margin: 0; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }
.board li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px dashed var(--line); }
.board__name { font-weight: 700; font-size: 1.05rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.board__name .dish__price { font-size: .95rem; }
.board__desc { color: var(--muted); font-size: .92rem; grid-column: 1; }
.board .add-btn { grid-row: 1 / span 2; grid-column: 2; }
.menu-note { margin-top: 2.4rem; color: var(--muted); font-size: .92rem; }

/* ---------- Gallery ---------- */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.masonry { columns: 3 280px; column-gap: 1rem; }
.masonry figure { margin: 0 0 1rem; break-inside: avoid; position: relative; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; }
.masonry button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.masonry button:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.masonry img { width: 100%; transition: transform .6s var(--ease); }
.masonry figure:hover img { transform: scale(1.04); }
.masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem .9rem; background: linear-gradient(transparent, rgba(0,0,0,.82)); color: var(--on-dark); font-weight: 600; font-size: .92rem; }

.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .94); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
.lightbox figure { margin: 0; display: grid; gap: .8rem; justify-items: center; max-width: min(1100px, 100%); }
.lightbox img { max-height: 80vh; width: auto; border-radius: var(--r-md); }
.lightbox figcaption { color: var(--on-dark); font-weight: 600; text-align: center; }
.lightbox__btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-dark); background: var(--lacquer-2); color: var(--on-dark); cursor: pointer; display: grid; place-items: center; }
.lightbox__close { top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.site-footer { background: var(--lacquer); color: var(--on-dark-muted); padding-block: clamp(3.6rem, 7vw, 5.6rem) calc(2rem + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.4rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid > div { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.footer-title { font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-list a { text-decoration: none; color: var(--on-dark); }
.footer-list a:hover { color: var(--gold); }
.socials { display: flex; gap: .6rem; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-dark); color: var(--on-dark); }
.socials a:hover { background: var(--gold); color: var(--lacquer); border-color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); font-size: .85rem; }
.footer-word { display: block; width: 100%; height: auto; margin-top: 2.4rem; overflow: visible; user-select: none; }
.footer-word text { font-family: var(--f-display); font-weight: 800; font-size: 136px; letter-spacing: -0.04em; fill: var(--lacquer-2); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 1rem); z-index: 90; background: var(--lacquer); color: var(--on-dark); padding: .75rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Motion ---------- */
/* Hero plate: spirals in, then turns slowly like a plate being served.
   The stage tilts toward the pointer (script.js). Tap the plate to replay. */
.plate { perspective: 1200px; }
.plate__stage { position: relative; border-radius: 50%; transform-style: preserve-3d; transition: transform .5s var(--ease); cursor: pointer; }
.plate__stage::before {
  content: ""; position: absolute; inset: -34px; border-radius: 50%;
  border: 2px dashed rgba(255, 0, 0, .5); pointer-events: none;
}
.plate__stage:hover { transform: scale(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .9s var(--ease) both; }
  .rise-2 { animation-delay: .12s; }
  .rise-3 { animation-delay: .24s; }
  .plate__img { animation: spiral 1.9s cubic-bezier(.2,.7,.2,1) both, turn 120s linear 1.9s infinite; }
  .plate__stage::before { animation: ring-in 1.4s var(--ease) .9s both, turn 60s linear reverse infinite; }
  .plate__tag, .plate__caption { animation: pop .7s cubic-bezier(.34,1.56,.64,1) both; }
  .plate__tag:nth-of-type(1) { animation-delay: 1.5s; }
  .plate__tag:nth-of-type(2) { animation-delay: 1.62s; }
  .plate__tag:nth-of-type(3) { animation-delay: 1.74s; }
  .plate__tag:nth-of-type(4) { animation-delay: 1.86s; }
  .plate__tag:nth-of-type(5) { animation-delay: 1.98s; }
  .plate__caption { animation-name: pop-caption; animation-delay: 2.1s; }
  .plate.is-replay .plate__img { animation: spiral 1.9s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes rise { from { opacity: .001; transform: translateY(18px); } }
@keyframes spiral {
  0%   { opacity: .001; transform: rotate(-600deg) translateX(55%) rotate(-120deg) scale(.12); }
  35%  { opacity: 1;    transform: rotate(-380deg) translateX(32%) rotate(-80deg) scale(.45); }
  70%  { transform: rotate(-110deg) translateX(8%) rotate(-20deg) scale(.9); }
  88%  { transform: rotate(8deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes ring-in { from { opacity: .001; transform: scale(.6) rotate(-90deg); } }
@keyframes pop { from { opacity: .001; transform: translateY(10px) scale(.4); } }
@keyframes pop-caption { from { opacity: .001; transform: translate(-50%, 12px) scale(.6); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Red-and-black palette: keep accents readable where red sits on red */
.cta .btn--gold { background: var(--lacquer); color: #fff; }
.cta .btn--gold:hover { background: #fff; color: var(--lacquer); }
.branch__badge { color: var(--on-dark-muted); }
.branch__rows svg { color: #fff; }
.branch .btn--gold { background: #fff; color: var(--lacquer); }
.branch .btn--gold:hover { background: var(--red); color: #fff; }

/* ---------- Reviews ---------- */
.reviews__nav { display: flex; gap: .6rem; }
.round-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s; }
.round-btn:hover { background: var(--ink); color: var(--paper); }
.reviews {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 3rem) / 3)); gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .4rem;
}
.reviews::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .reviews { grid-auto-columns: minmax(260px, 78%); } }
.review { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.review__stars { display: flex; gap: .15rem; color: var(--red); }
.review blockquote { margin: 0; flex: 1; font-family: var(--f-accent); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.35; color: var(--ink); }
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption { display: flex; align-items: center; gap: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.review figcaption strong { display: block; font-size: .95rem; }
.review figcaption small { color: var(--muted); font-size: .82rem; }
.review__avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--lacquer); color: #fff; font-weight: 800; flex: none; }

/* ---------- Managers ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2rem); }
@media (max-width: 860px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; max-width: 360px; } }
.manager { margin: 0; display: grid; gap: 1.1rem; }
.manager__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--red-deep), var(--lacquer-2) 60%, var(--lacquer)); color: rgba(255, 255, 255, .14);
  display: grid; place-items: end center;
}
.manager__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.manager:hover .manager__photo img { transform: scale(1.04); }
.manager__ph { width: 78%; height: auto; }
.manager__branch {
  position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: 999px; background: #fff; color: var(--lacquer); font-size: .8rem; font-weight: 700;
}
.manager__branch svg { color: var(--red); }
.manager figcaption { display: grid; gap: .2rem; }
.manager figcaption strong { font-family: var(--f-display); font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.1; }
.manager figcaption span { color: var(--muted); font-size: .92rem; }

/* ---------- Story beats (home) ---------- */
.story-beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.8rem); margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
@media (max-width: 800px) { .story-beats { grid-template-columns: 1fr; } }
.story-beat { display: grid; gap: .7rem; align-content: start; }
.story-beat__label { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.story-beat h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.story-beat p { color: var(--muted); max-width: 42ch; }
.story-beat .twi { color: var(--ink); font-size: 1.1em; }

/* ---------- Warm sections (guests, managers) ----------
   Sunny gari-gold to soft blush, with a fine diagonal line pattern kept
   to the outer edges and shifts a few pixels with the pointer. */
.section--warm {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #fff3dc 0%, #ffe9d6 45%, #ffe1dc 100%);
}
.section--warm::before {
  content: ""; position: absolute; inset: -20px; z-index: -1; pointer-events: none;
  /* Lines live at the outer edges and fade out toward the centre, where the text sits. */
  background-image: repeating-linear-gradient(135deg, rgba(192, 0, 0, .06) 0 1px, transparent 1px 18px);
  -webkit-mask-image: radial-gradient(75% 85% at 50% 50%, transparent 45%, rgba(0,0,0,.5) 75%, #000 100%);
          mask-image: radial-gradient(75% 85% at 50% 50%, transparent 45%, rgba(0,0,0,.5) 75%, #000 100%);
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0);
  transition: transform 1.2s var(--ease);
}
.section--warm .story-slider, .section--warm .manager__photo { box-shadow: 0 24px 50px rgba(128, 0, 0, .14); }
.section--warm .definition { background: rgba(255, 255, 255, .55); }

/* Layout fixes */
.section-head--split > .reviews__nav { display: flex; }
.branch__head { flex-direction: column; align-items: flex-start; gap: .7rem; }

/* ---------- Red mesh overlay (dark sections) ----------
   A fine red grid, visible only inside a soft pool that drifts slowly
   (and eases toward the pointer on desktop), over a faint red glow. */
@property --gx { syntax: "<percentage>"; inherits: true; initial-value: 78%; }
@property --gy { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
.section--dark { position: relative; overflow: hidden; isolation: isolate; transition: --gx 1.6s var(--ease), --gy 1.6s var(--ease); }
.section--dark::before, .section--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.section--dark::before {
  background: radial-gradient(60% 70% at var(--gx) var(--gy), rgba(192, 0, 0, .22), transparent 70%),
              radial-gradient(50% 60% at 8% 100%, rgba(128, 0, 0, .25), transparent 70%);
}
.section--dark::after {
  background-image:
    linear-gradient(rgba(255, 0, 0, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, .16) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(55% 75% at var(--gx) var(--gy), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
          mask-image: radial-gradient(55% 75% at var(--gx) var(--gy), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
  .section--dark:not(:hover) { animation: mesh-drift 26s ease-in-out infinite alternate; }
}
@keyframes mesh-drift { 0% { --gx: 78%; --gy: 30%; } 50% { --gx: 55%; --gy: 65%; } 100% { --gx: 25%; --gy: 35%; } }
.section--dark .part { background: rgba(0, 0, 0, .62); }

/* =========================================================
   WordPress additions
   ========================================================= */
.admin-bar .site-header { top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 782px) { .admin-bar .site-header { top: calc(46px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 600px) { .admin-bar .site-header { top: env(safe-area-inset-top, 0px); } }

/* Plain WordPress pages and posts (anything not using the five designed templates) */
.wp-content { max-width: 46rem; }
.wp-content > * + * { margin-top: 1.1em; }
.wp-content h2, .wp-content h3 { margin-top: 1.8em; }
.wp-content img { max-width: 100%; height: auto; border-radius: 12px; }
.wp-content a { color: var(--red, #c4161c); text-decoration: underline; }
.wp-content ul, .wp-content ol { padding-left: 1.3em; }
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, .wp-element-caption { font-size: .9rem; opacity: .75; margin-top: .4em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.post-list { display: grid; gap: 2rem; }
.post-list h2 a { color: inherit; text-decoration: none; }
.pagination-wrap { margin-top: 2.5rem; }