/* Churroman: shared styles for every page (home, menu, our story, jobs, kids, 404) */

:root {
  /* palette taken from the stand design */
  --cream: #F4E6C8;
  --brown: #4A2415;
  --gold: #D99A32;
  --red: #A62C24;
  --espresso: #24130D;

  --bg: var(--cream);
  --ink: var(--brown);
  --scroll: #95661F;          /* the stand's bronze-gold scrollwork on cream */
  --year: var(--red);
  --wm-light: block;
  --wm-dark: none;

  --panel: var(--red);
  --panel-ink: var(--cream);
  --btn-bg: var(--cream);
  --btn-ink: var(--brown);
  --btn-sub: #6A3B25;
  --btn-edge: #6E1712;
  --icon-bg: var(--gold);
  --icon-ink: var(--espresso);
  --focus: var(--cream);

  /* menu cards */
  --card: #FBF4E3;
  --card-shadow: #DCC59C;
  --rule: rgba(74, 36, 21, .16);
  --muted: #6A3B25;
  --price: var(--red);
  --tint: rgba(217, 154, 50, .17);
  --leader: rgba(74, 36, 21, .38);
  --tile: #F4E6C8;
  --tile-edge: rgba(74, 36, 21, .16);

  /* old photo prints */
  --paper: #FFFCF4;
  --print-shadow: 0 .35rem .7rem .2rem rgba(36, 19, 13, .2);

  /* food photos on the home page */
  --reel-ph: #E8D3B3;
  --reel-shadow: 0 .3rem .8rem rgba(74, 36, 21, .22);
  --pop-bg: var(--espresso);

  --page-top: var(--bg);

  color-scheme: light dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--espresso);
    --ink: var(--cream);
    --scroll: #DDA038;
    --year: var(--gold);
    --wm-light: none;
    --wm-dark: block;
    --card: #311C13;
    --card-shadow: #120906;
    --rule: rgba(244, 230, 200, .14);
    --muted: #D9C39E;
    --price: var(--gold);
    --tint: rgba(217, 154, 50, .14);
    --leader: rgba(244, 230, 200, .3);
    --tile: #24130D;
    --tile-edge: rgba(244, 230, 200, .14);
    --print-shadow: 0 .4rem .9rem .25rem rgba(0, 0, 0, .45);
    --reel-ph: #3A2419;
    --reel-shadow: 0 .35rem .9rem rgba(0, 0, 0, .5);
    --pop-bg: #3B2116;
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--espresso);
  --ink: var(--cream);
  --scroll: #DDA038;
  --year: var(--gold);
  --wm-light: none;
  --wm-dark: block;
  --card: #311C13;
  --card-shadow: #120906;
  --rule: rgba(244, 230, 200, .14);
  --muted: #D9C39E;
  --price: var(--gold);
  --tint: rgba(217, 154, 50, .14);
  --leader: rgba(244, 230, 200, .3);
  --tile: #24130D;
  --tile-edge: rgba(244, 230, 200, .14);
  --print-shadow: 0 .4rem .9rem .25rem rgba(0, 0, 0, .45);
  --reel-ph: #3A2419;
  --reel-shadow: 0 .35rem .9rem rgba(0, 0, 0, .5);
  --pop-bg: #3B2116;
}
/* inner pages start with the red band, so the phone's top safe area is red too */
:root.sub { --page-top: var(--red); }

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

html {
  min-height: 100%;
  /* top half matches the first band, bottom half matches the footer, so overscroll and
     the phone's safe areas never show a stray color */
  background: linear-gradient(to bottom, var(--page-top) 50%, var(--espresso) 50%) no-repeat var(--page-top);
  scroll-padding-top: env(safe-area-inset-top, 0px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.3;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.nowrap { white-space: nowrap; }

/* =====================================================================
   Home: logo lockup, laid out like the stand
   ===================================================================== */
.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.25rem .9rem;
  text-align: center;
}

.seal {
  width: clamp(6.5rem, 33vw, 9rem);
  width: clamp(6.5rem, min(33vw, 19svh), 9rem);
  height: auto;
  margin: 0 0 .55rem;
  animation: rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(-.75rem) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.line {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 1rem;
  letter-spacing: .06em;
  line-height: 1.2;
  color: var(--ink);
}
.line span { white-space: nowrap; }
.line .year { font-size: 1.3em; letter-spacing: .04em; color: var(--year); }

/* gold scrollwork, traced from the stand */
.scroll {
  flex: 0 1 auto;
  min-width: 0;
  height: auto;
  fill: var(--scroll);
  overflow: visible;
}
.scroll-top { width: 3.4rem; }
.scroll-low { width: 2.75rem; }
.scroll.flip { transform: scaleX(-1); }

/* the stand sets a thin gold rule with a dot under "A family tradition" */
.line-top .tag { position: relative; }
.line-top .tag::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: calc(100% + .1rem);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--scroll) 0 calc(50% - .45rem), transparent calc(50% - .45rem) calc(50% + .45rem), var(--scroll) calc(50% + .45rem) 100%);
}
.line-top .tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + .1rem);
  width: 5px;
  height: 5px;
  margin: -1.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--scroll);
}

.wordmark {
  width: min(100%, 19rem);
  margin: .95rem 0 .45rem;
  line-height: 0;
}
.wm { width: 100%; height: auto; }
.wm-light { display: var(--wm-light); }
.wm-dark  { display: var(--wm-dark); }

.fleuron {
  width: 3.6rem;
  height: auto;
  margin: .5rem 0 0;
  fill: var(--scroll);
}

/* one plain line that says what we sell, for people and for search engines */
.tagline {
  margin: .55rem 0 0;
  max-width: 22rem;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ink);
  text-wrap: balance;
}

/* =====================================================================
   Red band with the big buttons, like the stand's stripe
   ===================================================================== */
.panel {
  flex: none;
  background: var(--panel);
  color: var(--panel-ink);
  padding: 1.1rem 1.25rem 1rem;
}
.panel-inner { max-width: 26rem; margin: 0 auto; }

/* heading with a rule on each side */
.follow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 .85rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.follow span { margin-right: -.14em; text-wrap: balance; }
.follow::before,
.follow::after {
  content: "";
  flex: 1 0 1.5rem;
  height: 2px;
  background: currentColor;
  opacity: .45;
}

.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 4rem;
  padding: .6rem 1rem .6rem .7rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-align: left;
  text-decoration: none;
  border-radius: 1rem;
  box-shadow: 0 .25rem 0 var(--btn-edge);
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.link::before {
  content: "";
  position: absolute;
  inset: .22rem;
  border: 1.5px solid var(--btn-ink);
  border-radius: .8rem;
  opacity: .22;
  pointer-events: none;
}
.link:active {
  transform: translateY(.2rem);
  box-shadow: 0 .05rem 0 var(--btn-edge);
}
.link:focus-visible {
  outline: .2rem solid var(--focus);
  outline-offset: .25rem;
}
@media (hover: hover) {
  .link:hover { transform: translateY(-.1rem); box-shadow: 0 .35rem 0 var(--btn-edge); }
  .link:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--btn-edge); }
}

.icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--icon-bg);
  color: var(--icon-ink);
}
.icon svg { width: 1.4rem; height: 1.4rem; }

.label { display: flex; flex-direction: column; min-width: 0; }
.platform { font-weight: 700; font-size: 1.5rem; line-height: 1.05; }
.handle { font-weight: 500; font-size: 1.125rem; line-height: 1.15; color: var(--btn-sub); overflow-wrap: anywhere; }

.cta-text {
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* the big espresso buttons: Our menu, Our story */
.ctas { display: grid; gap: .8rem; margin: 0 0 1.15rem; }
.link-big {
  --btn-bg: var(--espresso);
  --btn-ink: var(--cream);
  --icon-bg: var(--gold);
  --icon-ink: var(--espresso);
  justify-content: center;
  gap: .9rem;
  min-height: 4rem;
  padding: .55rem 1.1rem;
}

/* gold scroll band along the bottom of the red bands */
.strip {
  height: 1.75rem;
  margin: .85rem -1.25rem 0;
  background: url("img/strip.svg") center / auto 100% repeat-x;
}

/* =====================================================================
   Home: what first-time visitors look for, right under the logo
   ===================================================================== */
.panel .ctas { margin-bottom: .85rem; }

/* hours, directions and phone in one card */
.quick {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: 1rem;
  box-shadow: 0 .25rem 0 var(--btn-edge);
}
.quick li + li { border-top: 1.5px solid rgba(74, 36, 21, .14); }
.quick-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.6rem;
  padding: .55rem .85rem .55rem .7rem;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.quick-row .icon { width: 2.3rem; height: 2.3rem; }
.quick-row .icon svg { width: 1.2rem; height: 1.2rem; }
.quick-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.quick-label { font-weight: 700; font-size: 1.3rem; line-height: 1.1; }
.quick-value { font-weight: 500; font-size: 1.1rem; line-height: 1.2; color: var(--btn-sub); }
.quick-go { flex: none; width: 1.15rem; height: 1.15rem; color: var(--btn-sub); }
.quick-row:focus-visible { outline: .2rem solid var(--brown); outline-offset: -.3rem; border-radius: .8rem; }
.quick-row:active { background: rgba(217, 154, 50, .2); }
@media (hover: hover) {
  .quick-row:hover { background: rgba(217, 154, 50, .16); }
}

/* wholesale: its own button, under the quick card */
.quick-solo {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.6rem;
  margin-top: .85rem;
  padding: .55rem .85rem .55rem .7rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: 1rem;
  box-shadow: 0 .25rem 0 var(--btn-edge);
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.quick-solo .icon { width: 2.3rem; height: 2.3rem; }
.quick-solo .icon svg { width: 1.2rem; height: 1.2rem; }
.quick-solo:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--btn-edge); }
.quick-solo:focus-visible { outline: .2rem solid var(--cream); outline-offset: .25rem; }
@media (hover: hover) {
  .quick-solo:hover { transform: translateY(-.1rem); box-shadow: 0 .35rem 0 var(--btn-edge); }
  .quick-solo:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--btn-edge); }
}

/* social links as a small row of round icons */
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin: 1.4rem 0 0;
}
.social h2 { margin: 0; font-weight: 700; font-size: 1.2rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase; }
.social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .75rem; }
.social a {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: 0 .2rem 0 var(--btn-edge);
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.social svg { width: 1.45rem; height: 1.45rem; }
.social a:active { transform: translateY(.15rem); box-shadow: 0 .05rem 0 var(--btn-edge); }
.social a:focus-visible { outline: .2rem solid var(--cream); outline-offset: .2rem; }
@media (hover: hover) {
  .social a:hover { transform: translateY(-.1rem); box-shadow: 0 .3rem 0 var(--btn-edge); }
  .social a:active { transform: translateY(.15rem); box-shadow: 0 .05rem 0 var(--btn-edge); }
}

/* the hiring link: easy to spot, quieter than the menu */
.hire { margin: 1.2rem 0 0; text-align: center; }
.hire a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .3rem .95rem .3rem .4rem;
  border: 1.5px solid rgba(244, 230, 200, .55);
  border-radius: 99px;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
}
.hire .badge { font-size: .82rem; }
.hire svg { flex: none; width: 1.1rem; height: 1.1rem; }
.hire a:focus-visible { outline: .2rem solid var(--cream); outline-offset: .2rem; }
.hire a:active { background: rgba(244, 230, 200, .14); }
@media (hover: hover) {
  .hire a:hover { background: rgba(244, 230, 200, .12); border-color: var(--cream); }
}

/* =====================================================================
   Home: photos of the food, always gliding by
   ===================================================================== */
.reel {
  --w: 216px;         /* photo width (whole pixels keep the loop seamless) */
  --gap: 12px;        /* space between photos */
  --per: 5.5s;        /* time for the row to move one photo over: sets the speed */
  --fade: 1.25rem;    /* soft left and right edges */
  flex: none;
  background: var(--bg);
  padding: .75rem 0 .55rem;
}
.reel-inner { position: relative; max-width: 150rem; margin: 0 auto; }
.reel-view {
  overflow: hidden;
  padding: .6rem 0 .95rem;   /* room for the photo shadows */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
/* two identical rows side by side; sliding left by one row and starting over has no seam */
.reel-track {
  display: flex;
  width: max-content;
  animation: reel calc(var(--n, 8) * var(--per)) linear infinite;
}
@keyframes reel {
  to { transform: translate3d(-50%, 0, 0); }
}
.reel-set {
  flex: none;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0 var(--gap) 0 0;
  list-style: none;
}
.reel-set li {
  flex: none;
  width: var(--w);
  aspect-ratio: 4 / 3;
  border-radius: .9rem;
  overflow: hidden;
  background: var(--reel-ph);
  box-shadow: var(--reel-shadow);
}
.reel-set img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* hold still while the mouse is over a photo, or after the pause button */
@media (hover: hover) and (pointer: fine) {
  .reel-view:hover .reel-track { animation-play-state: paused; }
}
.reel.is-paused .reel-track,
.reel.is-away .reel-track { animation-play-state: paused; }   /* is-away: scrolled off screen */

.reel-toggle {
  position: absolute;
  right: .7rem;
  bottom: 1.3rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 19, 13, .8);
  color: var(--cream);
  box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reel-toggle[hidden] { display: none; }
.reel-toggle svg { width: 1.15rem; height: 1.15rem; }
.reel-toggle .i-play,
.reel.is-paused .reel-toggle .i-pause { display: none; }
.reel.is-paused .reel-toggle .i-play { display: block; }
.reel-toggle:focus-visible { outline: .2rem solid var(--ink); outline-offset: .2rem; }
.reel-view:focus-visible { outline: .2rem solid var(--ink); outline-offset: .1rem; border-radius: .9rem; }

/* =====================================================================
   Home: about us and good-to-know questions, in plain words for
   people and for search engines
   ===================================================================== */
.about {
  flex: none;
  background: var(--bg);
  color: var(--ink);
  padding: 1.2rem 1.25rem 2.2rem;
}
.about-story,
.about-faq { max-width: 34rem; margin: 0 auto; }
.about-story { margin-bottom: 2.1rem; }
.about-text p {
  margin: 0 0 .85rem;
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.42;
  text-wrap: pretty;
}
.about-text p:last-child { margin-bottom: 0; }
.about-more { margin-top: 1rem; }
/* questions: tap one to see the answer (the answers are still on the page for search engines) */
.faq { border-top: 1.5px solid var(--rule); }
.qa { border-bottom: 1.5px solid var(--rule); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .65rem 0;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qa summary::-webkit-details-marker { display: none; }
.qa-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  transition: transform .2s ease, background-color .15s ease;
}
.qa-icon svg { width: 1.1rem; height: 1.1rem; }
.qa[open] .qa-icon { transform: rotate(180deg); }
.qa p { margin: -.2rem 0 1rem; padding-right: 3rem; font-weight: 500; font-size: 1.15rem; line-height: 1.38; color: var(--muted); text-wrap: pretty; }
.qa .text-link { color: var(--ink); }
.qa summary:focus-visible { outline: .2rem solid var(--ink); outline-offset: .2rem; border-radius: .3rem; }
@media (hover: hover) {
  .qa summary:hover .qa-icon { background: var(--gold); color: var(--espresso); }
}

/* =====================================================================
   Home: catering & wholesale
   ===================================================================== */
.catering {
  flex: none;
  background: var(--brown);
  color: var(--cream);
  padding: 1.9rem 1.25rem 2.2rem;
}
.catering-inner { max-width: 26rem; margin: 0 auto; }
.offers { display: grid; gap: 1.1rem; margin: 0 0 1.4rem; }
.offer { display: flex; align-items: flex-start; gap: .85rem; scroll-margin-top: 1rem; }
.offer h3 { margin: .35rem 0 .3rem; font-weight: 700; font-size: 1.5rem; line-height: 1.05; letter-spacing: .06em; text-transform: uppercase; }
.offer p { margin: 0; font-weight: 500; font-size: 1.2rem; line-height: 1.3; }

/* =====================================================================
   Footer on every page: Visit us
   ===================================================================== */
.info {
  flex: none;
  background: var(--espresso);
  color: var(--cream);
  padding: 1.6rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.info-inner { max-width: 26rem; margin: 0 auto; }

.visit,
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.visit span,
.title span { margin-right: -.14em; min-width: 0; text-wrap: balance; }
.visit span { white-space: nowrap; }
.info .scroll { width: 3rem; fill: #DDA038; }
.title .scroll { flex: none; width: 3rem; }
.title-lg { font-size: 2rem; letter-spacing: .12em; }
.title-lg span { margin-right: -.12em; }
.title-lg .scroll { width: 3.3rem; }

.details { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.detail {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .45rem 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.detail:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; border-radius: .6rem; }
.info .icon { width: 2.5rem; height: 2.5rem; }
.info .icon svg { width: 1.3rem; height: 1.3rem; }

.detail-text { display: flex; flex-direction: column; min-width: 0; font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
a.detail .detail-text > span:first-child {
  text-decoration: underline;
  text-decoration-color: rgba(217, 154, 50, .6);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.hint { margin-top: .1rem; font-size: 1.05rem; font-weight: 500; color: var(--gold); }

.hours {
  margin: 0;
  min-width: 0;
  display: grid;
  row-gap: .2rem;
  font-size: 1.25rem;
  line-height: 1.2;
}
.hours div { display: flex; flex-wrap: wrap; column-gap: 1rem; }
.hours dt { min-width: 9rem; font-weight: 700; white-space: nowrap; }
.hours dd { margin: 0; font-weight: 500; white-space: nowrap; }
.hours-wrap { min-width: 0; }
.hours-note { margin: .4rem 0 0; font-size: 1.05rem; line-height: 1.25; color: var(--gold); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem 1.5rem;
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(244, 230, 200, .16);
}
.site-nav a {
  padding: .35rem 0;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; border-radius: .3rem; }
@media (hover: hover) {
  .site-nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .25em; }
}

/* =====================================================================
   Inner pages: red top band with the logo and page tabs
   ===================================================================== */
.topbar {
  flex: none;
  background: var(--red);
  color: var(--cream);
  padding: .9rem 1.25rem 0;
  text-align: center;
}
.brand { display: inline-block; line-height: 0; border-radius: .4rem; }
.brand img { width: min(13rem, 56vw); height: auto; }
.brand:focus-visible { outline: .2rem solid var(--cream); outline-offset: .35rem; }
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: .75rem 0 0;
}
.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: .3rem 1rem .25rem;
  border: 2px solid rgba(244, 230, 200, .5);
  border-radius: 99px;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.tabs a[aria-current="page"] { background: var(--cream); border-color: var(--cream); color: var(--red); }
.tabs a:focus-visible { outline: .2rem solid var(--cream); outline-offset: .2rem; }
@media (hover: hover) {
  .tabs a:not([aria-current]):hover { border-color: var(--cream); background: rgba(244, 230, 200, .12); }
}
.topbar .strip { margin-top: .9rem; }

/* shared section layout for inner pages */
.band { flex: none; padding: 2rem 1.25rem 2.4rem; }
.wrap { max-width: 36rem; margin: 0 auto; }
.wrap-wide { max-width: 62rem; margin: 0 auto; }
.prose p { margin: 0 0 1rem; font-weight: 500; font-size: 1.3rem; line-height: 1.45; }
.prose p:last-child { margin-bottom: 0; }
.eyebrow {
  margin: 0 0 .45rem;
  text-align: center;
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  font-variant-numeric: lining-nums;
}
.page-intro {
  max-width: 26rem;
  margin: -.2rem auto 1.5rem;
  text-align: center;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--muted);
  text-wrap: balance;
}
.text-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.text-link:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; border-radius: .2rem; }

/* =====================================================================
   Menu page
   ===================================================================== */
.menu-section {
  flex: 1 0 auto;
  background: var(--bg);
  color: var(--ink);
  padding: 1.9rem 1.25rem 2.4rem;
}
.menu-inner { max-width: 28rem; margin: 0 auto; }

/* jump straight to a part of the menu */
.jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 30rem;
  margin: -.35rem auto 1.4rem;
}
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .2rem 1rem;
  border: 1.5px solid var(--tile-edge);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.jump a:active { background: var(--tint); }
.jump a:focus-visible { outline: .2rem solid var(--ink); outline-offset: .15rem; }
@media (hover: hover) {
  .jump a:hover { background: var(--tint); border-color: var(--leader); }
}
.card { scroll-margin-top: 1rem; }

/* the menu: rows of cards; cards in the same row always share a top and bottom edge */
.menu-grid { display: grid; gap: 1rem; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.15rem 1.2rem;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 .25rem 0 var(--card-shadow);
}
.card::before {
  content: "";
  position: absolute;
  inset: .22rem;
  border: 1.5px solid var(--ink);
  border-radius: .8rem;
  opacity: .14;
  pointer-events: none;
}
.card h2 {
  margin: 0 0 .95rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* the stand's thin gold rule with a dot, under every heading */
.card h2::after {
  content: "";
  display: block;
  width: 6.5rem;
  height: 6px;
  margin: .5rem auto 0;
  background:
    radial-gradient(circle, var(--scroll) 0 2.5px, transparent 3px) center / 6px 6px no-repeat,
    linear-gradient(90deg, var(--scroll) 0 calc(50% - .55rem), transparent calc(50% - .55rem) calc(50% + .55rem), var(--scroll) calc(50% + .55rem) 100%) center / 100% 2px no-repeat;
}
.card-note { margin: -.25rem auto .1rem; max-width: 34rem; text-align: center; font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--muted); text-wrap: balance; }
/* sits at the bottom of the card, even when the card is stretched to match its neighbor */
.card-foot { margin: auto 0 0; padding-top: 1rem; text-align: center; font-weight: 500; font-size: 1.05rem; line-height: 1.3; color: var(--muted); text-wrap: balance; }

.badge {
  display: inline-block;
  padding: .22rem .55rem .18rem;
  border-radius: 99px;
  background: var(--red);
  color: var(--cream);
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-gold { background: var(--gold); color: var(--espresso); }
.item-name .badge { margin-left: .35rem; vertical-align: .18em; }

/* item rows: name, a dotted line, then the price, like a printed menu */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; align-content: start; }
/* when a card is stretched to match its neighbor, the extra room is shared between the rows
   instead of piling up as a blank space at the bottom */
.card > .items { flex: 1 0 auto; align-content: space-between; }
.item {
  display: grid;
  grid-template-columns: auto minmax(1rem, 1fr) auto;
  align-items: baseline;
  column-gap: .45rem;
}
.item::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border-bottom: 2px dotted var(--leader);
}
.item-name { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.price {
  grid-column: 3;
  grid-row: 1;
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--price);
  white-space: nowrap;
}
.item-desc { grid-column: 1 / -1; grid-row: 2; margin-top: .15rem; font-weight: 500; font-size: 1.1rem; line-height: 1.28; color: var(--muted); }

/* the house specialty: a featured card with the five sizes as tiles */
.card-feature { padding-bottom: 1.3rem; }
.card-feature::before { border: 2px solid var(--gold); opacity: .7; }
.ribbon { margin: -.05rem 0 .6rem; text-align: center; line-height: 1; }
.sizes {
  list-style: none;
  margin: .2rem 0 0;
  padding: .75rem 0 0;          /* room for the badges that sit on a tile's top edge */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem .8rem;
}
.size {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 1.05rem .5rem .75rem;
  text-align: center;
  background: var(--tile);
  border: 1.5px solid var(--tile-edge);
  border-radius: .9rem;
}
.size-best { grid-column: 1 / -1; }   /* phones: Familia runs the full width */
.size-name { font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; }
.size-count { margin-top: .3rem; font-weight: 500; font-size: 1.05rem; line-height: 1; color: var(--muted); }
.size-count b {
  display: block;
  margin-bottom: .15rem;
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.size-price {
  align-self: stretch;
  margin-top: .65rem;
  padding-top: .5rem;
  border-top: 1px solid var(--tile-edge);
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--price);
}
.size-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -52%); }

.vegan {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.2rem 0 0;
  padding: .65rem .9rem;
  border-radius: .8rem;
  background: var(--tint);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--muted);
}
.vegan strong { display: block; font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.vegan .icon { width: 2.4rem; height: 2.4rem; }
.vegan .icon svg { width: 1.3rem; height: 1.3rem; }

.menu-foot { display: grid; justify-items: center; gap: .9rem; margin: 1.6rem 0 0; text-align: center; }
.board-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .45rem 1.2rem .45rem .95rem;
  border: 2px solid currentColor;
  border-radius: 99px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.board-link svg { width: 1.25rem; height: 1.25rem; flex: none; }
.board-link:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; }
@media (hover: hover) {
  .board-link:hover { background: var(--ink); color: var(--bg); }
}
.pay { margin: 0; font-weight: 500; font-size: 1.05rem; line-height: 1.25; color: var(--muted); }
.crowd { margin: .2rem 0 0; font-size: 1.2rem; line-height: 1.3; }

/* =====================================================================
   Our story page
   ===================================================================== */
.story-intro { background: var(--bg); color: var(--ink); padding-top: 1.8rem; }
.story-intro .line { margin: -.35rem 0 0; }

/* three old prints, tossed on the table */
.photo-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 30rem;
  margin: 1.7rem auto 2rem;
  padding: 0 .4rem;
}
.stack-print {
  flex: 0 0 37%;
  display: block;
  padding: .3rem .3rem 1rem;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: var(--print-shadow);
  transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.stack-print img { display: block; width: 100%; height: auto; }
.stack-print.p1 { transform: rotate(-6deg) translate(.2rem, .55rem); margin-right: -8%; }
.stack-print.p2 { flex-basis: 44%; transform: rotate(2deg); z-index: 1; }
.stack-print.p3 { transform: rotate(6deg) translate(-.2rem, .65rem); margin-left: -8%; }
.stack-print:focus-visible { outline: .2rem solid var(--gold); outline-offset: .3rem; z-index: 2; }
@media (hover: hover) {
  .stack-print:hover { transform: rotate(0deg) translateY(-.35rem) scale(1.04); z-index: 2; }
}

.lede p:first-child { font-weight: 700; font-size: 1.45rem; line-height: 1.35; }

.history { background: var(--brown); color: var(--cream); }
.history .scroll { fill: #DDA038; }
.history .eyebrow { color: var(--gold); }

.quote {
  margin: 1.9rem 0 2.1rem;
  padding: 1.3rem .5rem 1.15rem;
  text-align: center;
  border-top: 2px solid rgba(217, 154, 50, .55);
  border-bottom: 2px solid rgba(217, 154, 50, .55);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0;
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  text-wrap: balance;
}
.quote figcaption { margin-top: .55rem; font-weight: 500; font-size: 1.15rem; letter-spacing: .04em; color: var(--gold); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: calc(4.6rem + .65rem - 1px);
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: rgba(217, 154, 50, .5);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  column-gap: 1.3rem;
  padding: .6rem 0;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(4.6rem + .65rem - 6px);
  top: 1.05rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--brown);
}
.when {
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
  color: var(--gold);
  text-align: right;
}
.timeline p { margin: 0; font-weight: 500; font-size: 1.2rem; line-height: 1.35; }

.owner { background: var(--bg); color: var(--ink); }
.letter {
  position: relative;
  padding: 1.4rem 1.3rem 1.3rem;
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 .25rem 0 var(--card-shadow);
}
.letter::before {
  content: "";
  position: absolute;
  inset: .22rem;
  border: 1.5px solid var(--ink);
  border-radius: .8rem;
  opacity: .14;
  pointer-events: none;
}
.signature { display: flex; flex-direction: column; align-items: flex-end; margin: 1.3rem 0 0; }
.sig-name {
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--year);
}
.sig-role { margin-top: .35rem; font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* photo gallery: rows of old prints that keep each photo's own shape */
.gallery-section { background: var(--bg); color: var(--ink); padding-top: .4rem; }
.section-note { margin: -.35rem auto 1.8rem; text-align: center; font-weight: 500; font-size: 1.15rem; color: var(--muted); }
.chapter + .chapter { margin-top: 2.6rem; }
.chapter-note {
  max-width: 30rem;
  margin: -.25rem auto 1.4rem;
  text-align: center;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--muted);
  text-wrap: balance;
}
/* phones: two neat columns, with a few photos running full width */
.gallery {
  --row: 10rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.6rem 1.15rem;
  padding: 0 .3rem;
}
.print.feature { grid-column: 1 / -1; }
.print {
  flex: var(--ar) 1 calc(var(--ar) * var(--row));
  min-width: 0;
  margin: 0;
}
.print-link {
  display: block;
  line-height: 0;
  background: var(--paper);
  border-radius: 1px;
  box-shadow: 0 0 0 .3rem var(--paper), var(--print-shadow);
  -webkit-tap-highlight-color: transparent;
}
.print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
  background: #D9CDB4;
}
.print-link:focus-visible { outline: .2rem solid var(--gold); outline-offset: .6rem; }
@media (hover: hover) {
  .print-link { transition: transform .15s ease; }
  .print-link:hover { transform: translateY(-.2rem) rotate(-.7deg); }
}
.print figcaption { margin-top: .8rem; font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.credit { display: block; margin-top: .15rem; font-size: .92rem; line-height: 1.2; color: var(--muted); }

.cta-band {
  flex: none;
  background: var(--red);
  color: var(--cream);
  padding: 2rem 1.25rem 1rem;
  text-align: center;
}
.cta-band .ctas { max-width: 26rem; margin: 0 auto; }
.cta-lead { margin: -.2rem 0 1.25rem; font-weight: 500; font-size: 1.25rem; line-height: 1.3; }
.cta-band .strip { margin-top: 1.4rem; }

/* =====================================================================
   Jobs page
   ===================================================================== */
/* English / Español: only the chosen language shows (without JavaScript, both do) */
.js[data-show="en"] [data-lang="es"],
.js[data-show="es"] [data-lang="en"] { display: none !important; }
.lang-switch { display: none; justify-content: center; gap: .5rem; margin: -.4rem 0 1.5rem; }
.js .lang-switch { display: flex; }
.lang-switch button {
  min-height: 2.6rem;
  padding: .3rem 1rem .25rem;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lang-switch button:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; }
@media (hover: hover) {
  .lang-switch button[aria-pressed="false"]:hover { background: var(--tint); }
}
/* pay, hours and where are set like the menu's price rows, but may wrap */
.job-items { margin-top: 1rem; }
.job-items .price { white-space: normal; text-align: right; }
/* lists marked with the gold dot from the stand's rule */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; align-content: start; }
/* like the menu: when a card is stretched to match its neighbor, the rows share the extra room */
.card > .ticks { flex: 1 0 auto; align-content: space-between; }
.ticks li { position: relative; padding-left: 1.4rem; font-weight: 500; font-size: 1.2rem; line-height: 1.3; text-wrap: pretty; }
.ticks li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scroll);
  box-shadow: 0 0 0 3px var(--tint);
}
/* how to apply: the red band with the email and phone buttons */
.apply-band .scroll { fill: #DDA038; }
.apply-band .links { max-width: 26rem; margin: 0 auto; text-align: left; }
.apply-note { max-width: 28rem; margin: 1.1rem auto 0; font-weight: 500; font-size: 1.15rem; line-height: 1.3; text-wrap: balance; }
@media (min-width: 46rem) {
  .job-items { width: 100%; max-width: 34rem; margin-left: auto; margin-right: auto; }
  .apply-band .links { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; }
}

/* =====================================================================
   404 page
   ===================================================================== */
.nf { flex: 1 0 auto; display: grid; place-items: center; padding: 2.4rem 1.25rem 3rem; text-align: center; }
.nf-box { max-width: 24rem; }
.nf-seal { display: block; width: 7.5rem; height: auto; margin: 0 auto 1rem; }
.nf-code { margin: 0; font-family: "Alegreya SC", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; color: var(--year); }
.nf-box h1 { margin: .2rem 0 .5rem; font-weight: 700; font-size: 2.3rem; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.nf-box > p { margin: 0 0 1.4rem; font-weight: 500; font-size: 1.3rem; line-height: 1.3; }
.nf-box .ctas { margin: 0; }

/* =====================================================================
   Party packs page
   ===================================================================== */
/* the Bases Loaded ticket is espresso on cream, and brown when the page is dark */
:root { --pp-loaded: var(--espresso); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pp-loaded: var(--brown); }
}
:root[data-theme="dark"] { --pp-loaded: var(--brown); }

/* the game-day note, set like the vegan note on the menu */
.pp-note {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  padding: .65rem .9rem;
  border-radius: .8rem;
  background: var(--tint);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--muted);
}
.pp-note strong { display: block; font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.pp-note .icon { width: 2.4rem; height: 2.4rem; }
.pp-note .icon svg { width: 1.3rem; height: 1.3rem; }

/* the three packs, printed like tickets: the price sits on the stub, past the dashed tear line */
.pp-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pp-ticket {
  --t-bg: var(--gold);
  --t-ink: var(--espresso);
  --t-tear: rgba(36, 19, 13, .45);
  --t-price: var(--espresso);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--t-bg);
  color: var(--t-ink);
}
.pp-dugout { --t-bg: var(--red); --t-ink: var(--cream); --t-tear: rgba(244, 230, 200, .55); --t-price: var(--cream); }
.pp-loaded { --t-bg: var(--pp-loaded); --t-ink: var(--cream); --t-tear: rgba(244, 230, 200, .4); --t-price: var(--gold); }
.pp-main { padding: 1rem .85rem 1.05rem 1.15rem; }
.pp-main h2 { margin: 0 0 .45rem; font-weight: 700; font-size: 1.55rem; line-height: 1.05; letter-spacing: .08em; text-transform: uppercase; }
.pp-items { list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: 1.2rem; line-height: 1.25; }
.pp-split { display: block; margin-bottom: .2rem; font-size: 1.02rem; line-height: 1.2; }
.pp-save { margin: .5rem 0 0; font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.pp-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7.25rem;
  padding: .9rem .4rem;
  border-left: 3px dashed var(--t-tear);
  text-align: center;
}
/* the two notches where the tear line meets the edge */
.pp-stub::before,
.pp-stub::after {
  content: "";
  position: absolute;
  left: -15.5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
}
.pp-stub::before { top: -14px; }
.pp-stub::after { bottom: -14px; }
.pp-price {
  margin: 0;
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2.45rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--t-price);
}
.pp-feeds { margin: .35rem 0 0; font-weight: 700; font-size: 1rem; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; }
.pp-fine { max-width: 30rem; margin: 1.1rem auto 0; text-align: center; font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--muted); text-wrap: balance; }

/* photos of what comes in a pack */
.pp-photos { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pp-photos li { aspect-ratio: 4 / 3; overflow: hidden; border-radius: .9rem; background: var(--reel-ph); box-shadow: var(--reel-shadow); }
.pp-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 46rem) {
  /* side by side, the tickets stand up, with the stub along the bottom */
  .pp-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .pp-ticket { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; text-align: center; }
  .pp-main { padding: 1.35rem 1.1rem 1.2rem; }
  .pp-stub { width: auto; padding: 1rem .75rem 1.15rem; border-left: 0; border-top: 3px dashed var(--t-tear); }
  .pp-stub::before,
  .pp-stub::after { top: -15.5px; bottom: auto; }
  .pp-stub::before { left: -14px; }
  .pp-stub::after { left: auto; right: -14px; }
  .pp-price { font-size: 3rem; }
  .pp-photos { gap: 1.25rem; margin: 2rem 0; }
}

/* =====================================================================
   Wider screens: use the room instead of one phone-width strip
   ===================================================================== */
@media (min-width: 40rem) {
  .ctas { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .panel .ctas { max-width: 40rem; margin-left: auto; margin-right: auto; }
  .panel .ctas:has(> :nth-child(3)) { max-width: 54rem; }
  .cta-band .ctas { max-width: 40rem; }
  .nf-box { max-width: 30rem; }
  /* a lone button stays one button wide, centered */
  .ctas > .link-big:only-child { justify-self: center; width: 100%; max-width: 26rem; }
}
@media (min-width: 56rem) {
  .panel-inner { max-width: 54rem; }
  .links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick li + li { border-top: 0; border-left: 1.5px solid rgba(74, 36, 21, .14); }
  .quick-row { height: 100%; }
  .quick-go { display: none; }
  .quick-solo { max-width: 30rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 46rem) {
  .band { padding: 2.8rem 2rem 3rem; }
  .strip { margin-left: -2rem; margin-right: -2rem; }
  .panel .strip { margin-left: -1.25rem; margin-right: -1.25rem; }
  .topbar { padding-left: 2rem; padding-right: 2rem; }

  .menu-section { padding: 2.6rem 2rem 3rem; }
  .menu-inner { max-width: 62rem; }
  .jump { max-width: none; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .card-feature, .card-wide { grid-column: 1 / -1; }
  .sizes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .size-best { grid-column: auto; }
  .card-feature .vegan { max-width: 40rem; margin-left: auto; margin-right: auto; }
  .card-wide .items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }

  .reel { --w: 304px; --gap: 16px; --per: 7s; --fade: 3rem; padding: 1rem 0 .75rem; }
  .reel-set li { border-radius: 1.1rem; }
  .reel-toggle { right: 1.4rem; bottom: 1.55rem; }

  .about { padding: 1.6rem 2rem 3rem; }
  .about-story { max-width: 40rem; margin-bottom: 2.6rem; }
  .about-text p { font-size: 1.35rem; }
  .about-faq { max-width: 40rem; }

  .catering { padding: 2.6rem 2rem 2.8rem; }
  .catering-inner { max-width: 54rem; }
  .offers { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .catering .links { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 36rem; margin: 0 auto; }

  .story-intro { padding-top: 2.4rem; }
  .prose p { font-size: 1.4rem; }
  .lede p:first-child { font-size: 1.6rem; }
  .photo-stack { max-width: 36rem; }
  .quote blockquote p { font-size: 2.1rem; }
  .timeline p { font-size: 1.3rem; }
  /* wider screens: rows of prints that keep each photo's own shape, all the same height */
  .gallery { display: flex; flex-wrap: wrap; gap: 1.8rem 1.5rem; }
  .gallery::after { content: ""; flex: 10000 1 0px; }   /* keeps the last row from stretching */
  .cta-band { padding: 2.6rem 2rem 1rem; }

  .info { padding-top: 2.2rem; }
  .info-inner { max-width: 48rem; }
  .details { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 3rem; }
}
/* big screens: bigger photos (this comes after the 46rem block so it wins) */
@media (min-width: 75rem) {
  .reel { --w: 336px; --gap: 18px; --per: 7.6s; --fade: 5rem; }
}

/* =====================================================================
   Full-screen viewers: menu board and photo lightbox
   ===================================================================== */
html:has(dialog[open]) { overflow: hidden; }
.menu-dialog,
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--espresso);
  color: var(--cream);
}
.menu-dialog::backdrop,
.lightbox::backdrop { background: var(--espresso); }
.menu-dialog[open] { display: flex; flex-direction: column; }

.menu-bar,
.lb-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(.7rem + env(safe-area-inset-top, 0px)) 1rem .7rem 1.25rem;
}
.menu-heading { display: flex; flex-direction: column; min-width: 0; }
.menu-title { font-weight: 700; font-size: 1.5rem; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase; }
.menu-hint { font-size: 1.05rem; line-height: 1.2; color: var(--gold); }
.hint-out { display: none; }
.menu-dialog.zoomed .hint-in { display: none; }
.menu-dialog.zoomed .hint-out { display: inline; }
.round-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--espresso);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.round-btn svg { width: 1.3rem; height: 1.3rem; }
.round-btn:focus-visible { outline: .2rem solid var(--cream); outline-offset: .2rem; }

.menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  padding: 0 .75rem calc(1rem + env(safe-area-inset-bottom, 0px));
}
.menu-img {
  display: block;
  width: 100%;
  max-width: 56rem;
  height: auto;
  aspect-ratio: 2000 / 1991;
  margin: 0 auto;
  background: #fff;
  border-radius: .6rem;
  cursor: zoom-in;
}
.menu-dialog.zoomed .menu-img {
  width: min(250%, 2000px);
  max-width: none;
  margin: 0;
  cursor: zoom-out;
}

.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-count { font-weight: 700; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 .75rem;
  touch-action: pan-y pinch-zoom;
}
.lb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .25rem;
}
.lb-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-top: -1.45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 19, 13, .78);
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lb-nav svg { width: 1.5rem; height: 1.5rem; }
.lb-prev { left: .45rem; }
.lb-next { right: .45rem; }
.lb-nav:focus-visible { outline: .2rem solid var(--gold); outline-offset: .15rem; }
.lb-info {
  min-height: 6rem;
  padding: .8rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.lb-chapter { margin: 0; font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.lb-caption { margin: .2rem auto 0; max-width: 40rem; font-weight: 700; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.lb-credit { margin: .2rem 0 0; font-size: 1.05rem; color: #D9C39E; }
.lb-full {
  display: inline-block;
  margin-top: .45rem;
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-underline-offset: .2em;
}
.lb-full:focus-visible { outline: .2rem solid var(--gold); outline-offset: .2rem; border-radius: .2rem; }
@media (min-width: 46rem) {
  .lb-stage { padding: 0 4.8rem; }
  .lb-nav { background: var(--gold); color: var(--espresso); }
  .lb-prev { left: 1.1rem; }
  .lb-next { right: 1.1rem; }
}

/* =====================================================================
   Follow-us card: slides up once per visitor, small enough not to get
   in the way of the page
   ===================================================================== */
.follow-pop {
  position: fixed;
  z-index: 50;
  left: .75rem;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  max-width: 26rem;
  margin: 0 auto;
  padding: .85rem .8rem .8rem 1rem;
  background: var(--pop-bg);
  color: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 1.1rem;
  box-shadow: 0 .7rem 2rem rgba(20, 10, 6, .45), 0 .2rem .5rem rgba(20, 10, 6, .3);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.follow-pop[hidden] { display: none; }
.follow-pop.is-in { opacity: 1; transform: none; }
.fp-title { margin: 0; padding-right: 2.6rem; font-weight: 700; font-size: 1.35rem; line-height: 1.1; text-wrap: balance; }
.fp-handle { margin: .2rem 0 0; font-weight: 500; font-size: 1.05rem; line-height: 1.2; color: var(--gold); }
.fp-links {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.fp-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.9rem;
  padding: 0 .35rem;
  border-radius: .75rem;
  background: var(--cream);
  color: var(--brown);
  box-shadow: 0 .18rem 0 var(--btn-edge);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.fp-links svg { flex: none; width: 1.15rem; height: 1.15rem; }
.fp-links a:active { transform: translateY(.15rem); box-shadow: 0 .03rem 0 var(--btn-edge); }
.fp-links a:focus-visible { outline: .2rem solid var(--gold); outline-offset: .15rem; }
.fp-close {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fp-close svg { width: 1.25rem; height: 1.25rem; }
.fp-close:focus-visible { outline: .2rem solid var(--gold); outline-offset: -.15rem; }
@media (hover: hover) {
  .fp-links a:hover { transform: translateY(-.08rem); box-shadow: 0 .26rem 0 var(--btn-edge); }
  .fp-close:hover { background: rgba(244, 230, 200, .14); }
}
/* while the card is up, keyboard focus is kept clear of it, and the footer gets
   extra room at the bottom so its last links can scroll up above the card */
html.pop-open { scroll-padding-bottom: calc(var(--pop-h, 9rem) + 1.5rem); }
html.pop-open .info { padding-bottom: calc(var(--pop-h, 9rem) + 2.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 46rem) {
  .follow-pop { left: auto; right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); width: 23rem; margin: 0; }
}
@media print {
  .follow-pop { display: none !important; }
}

/* short screens: keep the buttons on screen, drop the extras */
@media (max-height: 690px) {
  .fleuron { display: none; }
  .seal { width: clamp(5.5rem, 30vw, 8rem); width: clamp(5.5rem, min(30vw, 17svh), 8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .seal { animation: none; }
  .link, .stack-print, .print-link, .social a, .qa-icon, .quick-solo, .follow-pop, .fp-links a { transition: none; }
  .follow-pop { transform: none; }

  /* the food photos stay put in one row you can swipe through */
  .reel-track { animation: none; }
  .reel-view {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    scroll-padding: 0 1.25rem;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .reel-view::-webkit-scrollbar { display: none; }
  .reel-set { padding-right: 0; }
  .reel-set[aria-hidden="true"] { display: none; }
  .reel-set li { scroll-snap-align: start; }
  .reel-toggle { display: none; }
}

/* =====================================================================
   Kids corner (games + coloring pages)
   ===================================================================== */
.games-inner { max-width: 34rem; }
.game-feature {
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 1.25rem;
  transition: transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.game-shot {
  display: block;
  margin: 0 0 1rem;
  border-radius: .75rem;
  overflow: hidden;
  background: var(--reel-ph);
  box-shadow: var(--reel-shadow);
  aspect-ratio: 16 / 10;
}
.game-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-blurb {
  margin: 0 auto 1.1rem;
  max-width: 28rem;
  text-align: center;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--muted);
  text-wrap: balance;
}
.game-play {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 3rem;
  padding: .3rem 1.1rem .3rem 1.4rem;
  border-radius: 99px;
  background: var(--red);
  color: var(--cream);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 .25rem 0 var(--btn-edge);
}
.game-play svg { width: 1.2rem; height: 1.2rem; }
.game-feature:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--card-shadow); }
.game-feature:focus-visible { outline: .2rem solid var(--ink); outline-offset: .25rem; }
@media (hover: hover) {
  .game-feature:hover { transform: translateY(-.1rem); box-shadow: 0 .35rem 0 var(--card-shadow); }
  .game-feature:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--card-shadow); }
}
.soon-tiles {
  list-style: none;
  margin: 1rem 0 .2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.soon-tiles li {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border: 2px dashed var(--leader);
  border-radius: .75rem;
  background: var(--tint);
}
.soon-tiles span {
  font-family: "Alegreya SC", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--scroll);
}
@media (prefers-reduced-motion: reduce) {
  .game-feature { transition: none; }
}

/* three coloring pages fanned out on the Kids corner card */
.color-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin: .4rem 0 1.1rem;
  padding: .4rem 0 .2rem;
}
.color-fan img {
  width: 31%;
  height: auto;
  background: #fff;
  border-radius: .3rem;
  box-shadow: var(--reel-shadow);
}
.color-fan img:nth-child(1) { transform: rotate(-6deg) translate(.6rem, .3rem); }
.color-fan img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-.3rem); }
.color-fan img:nth-child(3) { transform: rotate(6deg) translate(-.6rem, .3rem); }

/* coloring page downloads */
.print-inner { max-width: 50rem; }
.crumb { margin: 0 0 .6rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.crumb a::before { content: "\2190\00a0"; }
.print-set { margin-bottom: 1.25rem; scroll-margin-top: 1rem; }
.print-grid { list-style: none; margin: .9rem 0 1.2rem; padding: 0; display: grid; gap: .8rem; }
.print-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .6rem;
  border-radius: .8rem;
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.print-item img {
  flex: none;
  width: 5.5rem;
  height: auto;
  background: #fff;
  border-radius: .3rem;
  box-shadow: 0 .15rem .4rem rgba(36, 19, 13, .2);
}
.print-text { display: grid; gap: .2rem; }
.print-name { font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.print-note { font-weight: 500; font-size: 1.02rem; line-height: 1.25; color: var(--muted); }
.print-dl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .25rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--price);
}
.print-dl svg, .print-all svg { width: 1.15rem; height: 1.15rem; flex: none; }
.print-item:focus-visible { outline: .2rem solid var(--ink); outline-offset: .15rem; }
@media (hover: hover) {
  .print-item:hover { background: rgba(217, 154, 50, .28); }
}
.print-all { text-decoration: none; font-size: 1.1rem; letter-spacing: .04em; padding: .3rem 1.3rem; }
.print-all:focus-visible { outline: .2rem solid var(--ink); outline-offset: .2rem; }
.artists .card-note { margin-bottom: 0; }
@media (min-width: 46rem) {
  .print-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .print-item { flex-direction: column; align-items: stretch; text-align: center; padding: .8rem .8rem 1rem; }
  .print-item img { width: 100%; }
  .print-text { justify-items: center; }
}

/* home page: Kids corner banner under the food photos */
.kids-band { background: var(--bg); color: var(--ink); padding: 1.6rem 1.25rem .4rem; }
.kids-card {
  max-width: 56rem;
  margin: 0 auto;
  display: grid;
  gap: 1.1rem;
  align-items: center;
}
.kids-shot {
  display: block;
  border-radius: .75rem;
  overflow: hidden;
  background: var(--reel-ph);
  box-shadow: var(--reel-shadow);
  aspect-ratio: 16 / 10;
}
.kids-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kids-text { text-align: center; }
.kids-text h2 {
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kids-text p { margin: 0 auto 1rem; max-width: 24rem; font-weight: 500; font-size: 1.2rem; line-height: 1.3; color: var(--muted); text-wrap: balance; }
.kids-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.kids-actions a { text-decoration: none; }
.kids-actions a:focus-visible { outline: .2rem solid var(--ink); outline-offset: .2rem; }
.kids-actions .alt {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: .3rem 1.2rem;
  border-radius: 99px;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.kids-actions .game-play { font-size: 1.15rem; }
.kids-soon { margin: .8rem 0 0; font-weight: 500; font-size: .98rem; color: var(--muted); }
@media (hover: hover) {
  .kids-actions .game-play:hover { filter: brightness(1.08); }
  .kids-actions .alt:hover { background: var(--tint); }
}
@media (min-width: 46rem) {
  .kids-card { grid-template-columns: 1.1fr 1fr; gap: 2rem; }
  .kids-text { text-align: left; }
  .kids-text p { margin-left: 0; }
  .kids-actions { justify-content: flex-start; }
}

/* home page: party packs button inside the catering section */
.catering .pp-cta { max-width: 30rem; margin: 0 auto 1.3rem; }

/* Kids corner page: grid of games */
.kids-inner { max-width: 64rem; }
.kids-inner .page-intro { max-width: 32rem; }
.games-block { margin: 0 0 1.4rem; scroll-margin-top: 1rem; }
.block-title {
  margin: 0 0 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.game-grid li { display: flex; }
.game-tile { flex: 1; color: var(--ink); text-decoration: none; transition: transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color: transparent; }
.game-tile h3 {
  margin: 0 0 .4rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.game-tile .game-blurb { font-size: 1.08rem; margin-bottom: .9rem; }
.game-tile .game-play { margin-top: auto; font-size: 1.15rem; min-height: 2.75rem; }
.game-tile .game-shot { margin-bottom: .85rem; }
.game-tile:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--card-shadow); }
.game-tile:focus-visible { outline: .2rem solid var(--ink); outline-offset: .25rem; }
@media (hover: hover) {
  .game-tile:hover { transform: translateY(-.1rem); box-shadow: 0 .35rem 0 var(--card-shadow); }
  .game-tile:active { transform: translateY(.2rem); box-shadow: 0 .05rem 0 var(--card-shadow); }
}
.coloring-feature, .kids-inner .games-soon { max-width: 34rem; margin-left: auto; margin-right: auto; }
.coloring-feature { scroll-margin-top: 1rem; }
@media (min-width: 40rem) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .game-tile { transition: none; } }

/* Kids corner: the featured new game, wider than the rest */
.game-wide { margin: 0 0 1rem; }
.game-wide .wide-text { display: flex; flex-direction: column; align-items: center; }
.new-badge {
  align-self: center;
  margin: 0 0 .5rem;
  padding: .2rem .75rem;
  border-radius: 99px;
  background: var(--red);
  color: var(--cream);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.game-wide h3 { font-size: 1.7rem; }
@media (min-width: 46rem) {
  .game-wide { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; align-items: center; }
  .game-wide .game-shot { margin: 0; }
}

/* Kids corner: high scores page */
.hs-inner { max-width: 64rem; }
.hs-tabs a[aria-current] { background: var(--red); color: var(--cream); border-color: var(--red); }
.hs-prize { max-width: 40rem; margin: 0 auto 1.2rem; padding: .9rem 1.1rem; border-radius: 1rem; background: #fff3cd; border: 2px solid #ffcf5c; color: #5d3b00; display: grid; gap: .2rem; text-align: center; }
.hs-prize b { font-size: 1.25rem; }
.hs-prize small { font-size: .95rem; opacity: .85; }
.hs-offline { max-width: 34rem; margin: 0 auto 1.2rem; text-align: center; font-weight: 500; font-size: 1.1rem; color: var(--muted); }
.hs-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.hs-card { padding: .9rem; }
.hs-top { display: flex; align-items: center; gap: .8rem; color: var(--ink); text-decoration: none; margin-bottom: .6rem; }
.hs-top img { width: 6.5rem; height: auto; border-radius: .6rem; box-shadow: var(--reel-shadow); }
.hs-top b { display: block; font-size: 1.3rem; line-height: 1.1; }
.hs-top small { display: inline-block; margin-top: .35rem; font-weight: 700; font-size: .95rem; color: var(--price); }
.hs-top:focus-visible { outline: .2rem solid var(--ink); outline-offset: .2rem; border-radius: .6rem; }
.hs-list { list-style: none; margin: 0; padding: 0; }
.hs-list li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .5rem; padding: .3rem .6rem; border-radius: .5rem; font-size: 1.1rem; }
.hs-list li:nth-child(odd) { background: var(--tint); }
.hs-list li:first-child:not(.none) { font-weight: 700; }
.hs-list .rank { font-weight: 700; color: var(--price); }
.hs-list .who { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .2em; }
.hs-list .pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.hs-list li.none { opacity: .45; }
@media (min-width: 40rem) { .hs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .hs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-link { margin: -.4rem 0 1rem; text-align: center; font-size: 1.15rem; }