/* Marujyu Market theme.
   Loaded after site.css, which is the shared structure. Nothing here is layout, only the palette, the type, the
   texture, and the surfaces where the shared sheet carries a brand colour.

   It comes from their own site (marujyumarket.com, 2007): a sage-green page, cream panels with warm brown borders, a
   lauhala mat across the header fading into cream, plumeria in the header corner and down the sidebar (and as the
   bullets), Georgia headings in gold-brown, and an apricot nav bar. Plus their logo: a red wordmark and a blue ahi.

   v3 (Sep 16 2026, Keoki: "something seems off… maybe it's the bold lettering"): the shared sheet's loud chrome — a
   heavy display face, 2–4px black outlines, bold everything — fought the soft lauhala and plumeria. So: Gelasio (a
   free, metric-compatible Georgia, their own heading face), regular weights, thin tan borders.

   The lauhala is a vector tile (img/lauhala.svg). The plumeria are THEIR OWN flower art, lifted from their 2007 sidebar
   (sidebar_3flowers.jpg, cut out and enlarged 4x): drawn flowers read fake, photographs were too literal and took over
   the page, their own soft airbrushed art is the middle (Keoki, Sep 16 2026). As on their old header, the flowers sit
   on the lauhala in the header's top-right corner. CSS url()s resolve against this file, so they work under
   /_s/marujyu/ too. */

/* The fonts are loaded here rather than from content (business.js theme.fonts), so a type change ships with a hosting
   deploy alone. business.js names the same families for the next re-seed. */
@import url("https://fonts.googleapis.com/css2?family=Gelasio:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap");

:root {
  --ink: #2B1A0C;
  --ink-2: #4E3A26;
  --muted: #6F5E4B;
  --line: #E8DDC8;
  --line-strong: #CDBB99;
  --paper: #F6F2E8;
  --page: #FFFFFF;

  /* From their 2007 stylesheet: page #9cc391, borders #954c1b / #6c2f07, headings #9d7b24, nav #e9b27b, box #d4c59d. */
  --sage: #9CC391;
  --cream: #FBF8F1;
  --kraft-soft: #F6F2E8;
  --brown: #6C2F07;
  --heading: #7E3F14;
  --brown-mid: #954C1B;
  --gold: #7A5F14; /* their #9d7b24, darkened to clear 4.5:1 for small caps on cream */
  --apricot: #E9B27B;
  --band: #46260E;
  --brand-red: #B8262B;

  --yellow: #F5B335; /* plumeria yellow: primary buttons, the Book chip */
  --yellow-soft: #FBE3B0;
  --yellow-wash: #FFF7E8;

  --leaf: #2A6439;
  --leaf-soft: #DDEDDF;
  --navy: #954C1B; /* links and focus rings: their brown */
  --navy-soft: #F3E3D4;

  /* --red stays an error red: form errors, double-booked crew, overdue flags, the delete button. */
  --red: #B3261E;
  --red-soft: #FBE4DE;

  --display: "Gelasio", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  /* The shared sheet sets prices and phone numbers in a monospace. Here they stay in the body face, with even-width
     figures: a slashed-zero mono read as "tech" beside the flowers. */
  --mono: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --script: "Gelasio", Georgia, serif;

  --r: 12px;
  --shadow: 0 1px 4px rgba(70, 38, 14, 0.12);
  --shadow-lg: 0 8px 22px rgba(70, 38, 14, 0.14);

  --lauhala: url(../img/lauhala.svg) 0 0 / 176px 176px repeat;
}

body { font-size: 1.0625rem; }
.mono, .p-price, .pkg-price, .price b { font-variant-numeric: tabular-nums; }
/* Money reads in straight, even figures: Gelasio's old-style numerals dip below the line ("$1,399.50"). */
#estTotal,
.est-figures strong,
.price b,
.tile-from b { font-family: var(--body); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

/* --- type: regular weights, their colours --- */
.hero h1,
.page-head h1 { font-weight: 500; letter-spacing: -0.01em; color: var(--heading); }
.section-head h2,
.places-teaser h2,
.cat-head h2,
.h-section,
.menu-head h2,
.place-body h2,
.book-head h2 { font-weight: 600; color: var(--heading); }
.loc h3,
.tile-name,
.board-sec h3,
.step legend,
.loc-sign-name { font-weight: 600; }
.eyebrow { font-weight: 600; color: var(--gold); letter-spacing: 0.12em; }
.topbar,
.nav a,
.btn,
.jump a,
.chip,
.open-status,
.dietary,
.p-name,
.pkg-name,
.pkg-card h3,
.field > span,
.ref summary,
.pkg-more summary,
.ways dt,
.strong-note,
.special { font-weight: 600; }
.footer h2 { font-weight: 600; color: var(--apricot); }

/* --- borders: thin tan, not black --- */
.btn { border: 1.5px solid var(--brown-mid); }
.btn--primary { border-color: #C98B2C; color: var(--ink); }
.btn--ghost { border-color: var(--line-strong); }
.loc,
.tile { border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.ref,
.ref:last-child,
.posts li,
.posts li:last-child { border-width: 1px; border-color: var(--line-strong); }
.table-scroll,
.stepper,
.estimate,
.notice { border: 1px solid var(--line-strong); }
.menu { border-top: 1px solid var(--line-strong); }
.board-sec h3::after { height: 1px; background: var(--line-strong); }
.place-group { border-top: 2px solid var(--apricot); }
.story-head { border-bottom: 2px solid var(--apricot); }
.keith,
.prose figure img { border: 0; border-radius: var(--r); }
.pkg:has(input:checked) { border-color: var(--brown-mid); }
.chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: var(--cream); }

/* --- chrome --- */
.topbar { background: var(--sage); color: var(--ink); border-bottom: 0; }

/* Their header, as on their 2007 site: the lauhala mat across the whole bar, only lightly washed on the left behind the logo
   and fading to full weave toward the right (Keoki: "reduce the white… so the lauhala can be seen more"),
   their plumeria in the top-right corner cropped by the edge, and their apricot nav-bar stripe underneath
   (Keoki, Sep 16 2026: "move the lauhala and flower back to the app bar"). */
.masthead {
  background:
    url(../img/marujyu-plumeria.webp) no-repeat right -18px top -46px / 150px auto,
    linear-gradient(90deg, rgba(251, 248, 241, 0.88) 0%, rgba(251, 248, 241, 0.55) 22%, rgba(251, 248, 241, 0.2) 50%, rgba(251, 248, 241, 0) 78%),
    var(--lauhala);
  background-color: var(--cream);
  border-bottom: 5px solid var(--apricot);
}
/* The Book button sits over the flowers' edge, the way their slogan overlapped the petals. */
.masthead-cta { position: relative; box-shadow: 0 2px 8px rgba(70, 38, 14, 0.22); }
.nav a { color: var(--brown); }
.nav a:hover { border-bottom-color: var(--brown); }
.nav a[aria-current="page"] { border-bottom-color: var(--apricot); }
.masthead a:focus-visible { outline-color: var(--brown-mid); }
/* Their logo is a JPEG on white, so it keeps a white sign board, softened. */
.brand { border: 0; border-radius: 10px; padding: 4px 8px; box-shadow: 0 1px 3px rgba(70, 38, 14, 0.18); }
.brand img { width: 181px; } /* the only copy of their logo is 181px wide, so don't stretch it */

.footer { background: #2E1A0B; }
.footer-base { border-top-color: rgba(255, 255, 255, 0.14); }
.signoff { font-weight: 500; }
/* A plumeria beside the sign-off, where Keneke's has its fish. */
.footer-top::before { content: ""; flex: none; width: 50px; height: 64px; background: url(../img/marujyu-plumeria.webp) center / contain no-repeat; }

/* --- page tops --- */
/* Home hero: plain cream. The lauhala and plumeria are in the header, as on their original site. */
.hero { background: var(--kraft-soft); border-bottom: 0; }

/* The hero fills the first screen, so the next section never peeks in under it (Keoki: "i shouldnt see the come by the
   market"). Subtract the header: topbar + masthead measure 152.7px above 820px wide (where the nav wraps), and 195–219px
   below it. Each figure is the smallest measured in its range, so the hero always reaches the fold, never short of it.
   svh = the phone's small viewport, with the browser toolbars showing. */
.hero { display: grid; align-content: center; min-height: calc(100vh - 152px); min-height: calc(100svh - 152px); }
@media (max-width: 820px) {
  .hero { min-height: calc(100vh - 194px); min-height: calc(100svh - 194px); }
}

/* Their storefront, full-bleed behind the opening words (Keoki: "i want the photo to take up the entire space, not
   just the right side as a contained picture"). The template renders this shape whenever business.js has a heroPhoto;
   the two-column figure is gone from the home page, so only .place-media keeps the framed look, on Locations.
   Structural, like Natsunoya's copy of it: it belongs in the shared sheet once site/public/ stops being copied. */
.hero-photo img,
.place-media img { border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-lg); }
/* The framed two-column hero the template falls back to without a heroPhoto. Live pages render from Firestore, so they
   keep that shape until the next re-seed; these rules keep it looking like theirs in the meantime. */
.hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero-photo { max-width: 500px; }
.hero-photo img { aspect-ratio: 1 / 1; max-height: calc(100svh - 312px); object-position: 50% 30%; }
@media (max-width: 800px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-photo { max-width: none; }
  .hero-photo img { aspect-ratio: 4 / 3; max-height: none; }
}
/* Centred in the photo, the way Kama'aina Catering's hero sits (Keoki: "i wanted it to look like kamaina catering"). */
.hero--photo { position: relative; align-content: center; isolation: isolate; overflow: hidden; background: var(--kraft-soft); }
.hero--photo .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photo is landscape and the hero is a whole screen, so the crop is vertical on a desktop and horizontal on a
     phone. 42% keeps their sign and the lit OPEN sign in frame both ways: they are what says "come by the market". */
  object-position: 50% 42%;
  z-index: -2;
}
/* Kama'aina's two layers, in their warm brown instead of black: one from the left, under the words, and a flat floor
   that bounds how bright the photo can get behind any word at any width. No bottom scrim now that the words are
   centred - that one existed to sit under them. Their building is pale in flat daylight where Kama'aina's tent is
   dark, so the floor is heavier than Kama'aina's 0.3. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(36, 20, 8, 0.74) 0%, rgba(36, 20, 8, 0.56) 48%, rgba(36, 20, 8, 0.18) 82%, rgba(36, 20, 8, 0.05) 100%),
    linear-gradient(rgba(36, 20, 8, 0.38), rgba(36, 20, 8, 0.38));
}
/* The words keep the page's own left gutter, lined up with the logo above them, and each line stays a readable
   length. Capping the wrap itself instead would centre the column in the hero, off the strong end of the scrim. */
.hero-photo-in { padding-block: 56px; color: #fff; }
.hero-photo-in > * { max-width: 40rem; }
.hero-photo-in .eyebrow { color: var(--yellow-soft); }
.hero-photo-in h1 { color: #fff; margin: 10px 0 14px; text-wrap: balance; text-shadow: 0 2px 18px rgba(28, 15, 6, 0.45); }
.hero-photo-in .lede { color: rgba(255, 255, 255, 0.94); margin-bottom: 26px; }
.hero-photo-in .actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The outline button has to read on the photo, not on paper — and the gold one has to stay gold: this selector beats
   .btn--primary on its own, so the Book button would otherwise lose its fill and the hero would have two outlines. */
.hero-photo-in .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.hero-photo-in .btn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.hero-photo-in .btn--primary { background: var(--yellow); color: var(--ink); border-color: #C98B2C; }
.hero-photo-in .btn--primary:hover { background: var(--yellow-soft); border-color: var(--yellow-soft); }
/* On a big monitor the photo is enormous and a 4rem headline floats in it. */
@media (min-width: 1800px) {
  .hero-photo-in h1 { font-size: 4.75rem; }
  .hero-photo-in .lede { font-size: 1.1875rem; }
}
@media (max-width: 900px) {
  /* Narrow enough that the words run the full width, so a scrim from the left does nothing for the end of a line:
     an even one instead, heavier because a phone is read outdoors. */
  .hero--photo::after {
    background: linear-gradient(rgba(36, 20, 8, 0.62), rgba(36, 20, 8, 0.62));
  }
}
@media (max-width: 820px) {
  /* The nav wraps onto its own row under the logo; the weave still shows across it, and the flowers are smaller. */
  .masthead {
    background:
      url(../img/marujyu-plumeria.webp) no-repeat right -22px top -30px / 104px auto,
      linear-gradient(90deg, rgba(251, 248, 241, 0.85) 0%, rgba(251, 248, 241, 0.5) 30%, rgba(251, 248, 241, 0.15) 65%, rgba(251, 248, 241, 0) 100%),
      var(--lauhala);
    background-color: var(--cream);
  }
}

/* --- surfaces the shared sheet paints red --- */
/* "What we cater": their sage-green page colour. */
.section--paper { background: var(--sage); border-block: 0; }
.section--paper .section-head h2 { color: var(--brown); }
.section--paper .section-head p,
.section--paper .section-foot { color: var(--ink); }

/* Booking: a dark lauhala band. The shared white-on-dark text rules still hold; headings take the apricot. */
.book { background: linear-gradient(rgba(70, 38, 14, 0.94), rgba(70, 38, 14, 0.94)), var(--lauhala); background-color: var(--band); border-block: 0; }
.book-head h2,
.book .step legend,
.book .menu-lines-h,
.book .sent h3 { color: var(--apricot); }
.book .sent .sent-mark { color: var(--leaf); }
.book .stepper { border-color: transparent; }

/* The location card: their name on a lauhala mat, with a plumeria under it. */
.loc-sign {
  background: radial-gradient(ellipse at center, rgba(251, 248, 241, 0.95) 0 38%, rgba(251, 248, 241, 0.55) 68%, rgba(251, 248, 241, 0.2) 100%), var(--lauhala);
  color: var(--brand-red);
  border-width: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}
.loc-sign::after { content: ""; width: 84px; height: 110px; background: url(../img/marujyu-plumeria.webp) center / contain no-repeat; }
.place { border-top: 1px solid var(--line-strong); }

/* Plumeria above the parties teaser, as in their sidebar. */
.places-teaser::before { content: ""; width: 62px; height: 82px; background: url(../img/marujyu-plumeria.webp) center / contain no-repeat; }

/* Their sidebar bullets were small plumeria. */
.included::before { width: 20px; height: 20px; margin-top: 0.1em; background: url(../img/marujyu-plumeria-one.webp) center / contain no-repeat; border-radius: 0; }

.cta-box { background: var(--kraft-soft); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
.special-tag { background: var(--brand-red); }

/* --- movement: soft, not Keneke's hard offsets --- */
.btn--primary:hover { background: #F7C25C; transform: none; box-shadow: var(--shadow-lg); }
.btn--primary:active { transform: none; box-shadow: var(--shadow); }
.tile:hover { transform: none; box-shadow: var(--shadow-lg); }
.jump a.is-book { border-color: #C98B2C; }

/* Their own plate lunch photo on the Menus page is 150px, so it stays that size, with room before the first section. */
.menu-photo { margin-bottom: 32px; }
.menu-photo img { width: 150px; border-radius: 8px; box-shadow: var(--shadow); }
.menu-photo figcaption { margin-top: 10px; font-family: var(--display); font-style: italic; color: var(--ink-2); }

/* Menu choice chips: a row that stays at the top as you scroll the menu. The pressed chip is their brown. */
.menu-chips { position: sticky; top: 0; z-index: 10; background: var(--cream); border-block: 1px solid var(--line); }
.menu-chips .chips { flex-wrap: nowrap; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.menu-chips .chips::-webkit-scrollbar { display: none; }
.menu-chips .chip { flex: none; border-width: 1.5px; font-size: 0.9375rem; }
.menu-chips .chip:hover { border-color: var(--brown-mid); }
html { scroll-padding-top: 72px; }
/* One section at a time reads as one column, not a column and a gap. */
.board--one { columns: 1; max-width: 640px; min-height: calc(100vh - 120px); }
/* (the min-height leaves room to scroll a short section, like Every day, up to the chip row) */
/* One location, one menu: the chips replace the jump-to-menu button; "Catering menu" stays. */
.page-head .chips-nav .btn:not(.btn--ghost) { display: none; }
/* The section a chip brings up fades in, so the change reads on a phone. */
@keyframes chip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.board-sec.is-shown { animation: chip-in 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) { .board-sec.is-shown { animation: none; } }