/* Supporting pages only (paint, menu, events, kids, visit, faq).
   Loads after styles.css. Tokens and components come from there. */

.page { min-height: 100svh; display: flex; flex-direction: column; }
.page main { flex: 1; }
/* every block clears the fired line parked at the left edge */
.page main .wrap, .site-foot { padding-left: calc(var(--sc-gutter) + 1.25rem); }
@media (max-width: 860px) { .page main .wrap, .site-foot { padding-left: calc(var(--sc-gutter) + 0.5rem); } }

/* page head: one h1, one lede, optional actions */
.ph { padding-block: clamp(2.5rem, 8vh, 5.5rem) clamp(1.5rem, 5vh, 3rem); }
.ph .t-display { max-width: 18ch; }
.ph .t-lede { margin-top: var(--sc-5); }
.ph .btn-row { margin-top: var(--sc-6); }
.ph--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-7); align-items: start; }
@media (max-width: 860px) { .ph--split { grid-template-columns: 1fr; } .ph--split .plate { max-width: 420px; } }

.section--tight { padding-block: clamp(2rem, 5vh, 3.5rem); }
.section + .section { border-top: 1px solid var(--sc-hairline); }
.band { background: var(--sc-surface); }
.side--play.band { background: var(--sc-canvas); }
.side--play .btn--quiet { border-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); }
.side--play .btn--quiet:hover { border-color: var(--sc-ink); }
.side--play .price-list > div { border-top-color: color-mix(in oklab, var(--sc-ink) 18%, transparent); }

/* the four steps: number, title, line. Plain type on space, hairlines between. */
.steps { display: grid; gap: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--sc-4) var(--sc-5); align-items: baseline; padding-block: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps .num { font-family: var(--sc-font-display); font-weight: 650; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); line-height: 1; letter-spacing: var(--sc-track-tight); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.steps h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem); line-height: 1.1; letter-spacing: var(--sc-track-snug); }
.steps p { margin-top: var(--sc-2); color: var(--sc-ink-soft); }

/* two photographs side by side with captions */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-6); align-items: start; }
.duo figure:nth-child(2) { margin-top: var(--sc-9); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .duo figure:nth-child(2) { margin-top: 0; } }

/* glaze names as a plain inline list, never UI colours */
.glazes { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.3rem, 1rem + 1.2vw, 2.2rem); letter-spacing: var(--sc-track-snug); line-height: 1.1; }
.glazes li::after { content: "."; color: var(--sc-ink-soft); }

/* menu */
.menu-nav ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.menu-nav a { text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; border-bottom: 1px solid var(--sc-hairline-strong); padding-bottom: 0.1em; white-space: nowrap; }
.menu-nav a:hover { border-bottom-color: currentColor; }
.menu-grid { columns: 2; column-gap: var(--sc-9); }
.menu-grid > section { break-inside: avoid; page-break-inside: avoid; margin-bottom: var(--sc-8); }
.menu-grid h2 { font-family: var(--sc-font-display); font-weight: 650; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.8rem); line-height: 1.08; letter-spacing: var(--sc-track-snug); }
.menu-grid .t-small { margin-top: var(--sc-2); }
.menu-grid .price-list { margin-top: var(--sc-4); }
.price-list .desc { grid-column: 1 / -1; margin-top: -0.25em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-wrap: pretty; }
.price-list--extras > div { padding-block: 0.4em; }
@media (max-width: 860px) {
  .menu-grid { columns: 1; }
  .menu-nav ul { gap: 0 1.1rem; }
  .menu-nav a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* hours table */
.hours { border-collapse: collapse; width: 100%; max-width: 30rem; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 0.5em 0; border-top: 1px solid var(--sc-hairline); font-weight: 400; }
.hours tr:first-child :is(th, td) { border-top: 0; }
.hours th { color: var(--sc-ink-soft); width: 9rem; font-size: var(--sc-t-sm); }
.hours .closed { color: var(--sc-ink-soft); }

/* faq */
.faq { display: grid; gap: 0; max-width: var(--sc-measure); }
.faq > div { padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.faq > div:first-child { border-top: 0; padding-top: 0; }
.faq h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.1; letter-spacing: var(--sc-track-snug); text-wrap: balance; }
.faq p { margin-top: var(--sc-3); color: var(--sc-ink-soft); text-wrap: pretty; }
.faq p + p { margin-top: var(--sc-2); }

/* the fixed CTA. Desktop: a small button bottom-right once the header has scrolled away.
   Phones: a bottom bar, always present, same navy as the landing page's balance bar. */
.cta-fixed { position: fixed; right: var(--sc-gutter); bottom: 1.25rem; z-index: var(--sc-z-chrome); display: flex; align-items: center; gap: var(--sc-3);
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s linear 180ms; }
.cta-fixed.is-on { visibility: visible; transition-delay: 0s; }
.cta-fixed.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cta-fixed .cta-wa { display: none; }
@media (max-width: 860px) {
  .page { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .cta-fixed { left: 0; right: 0; bottom: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 1rem; padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in oklab, var(--navy) 94%, transparent); color: var(--bisque); box-shadow: 0 -1px 0 color-mix(in oklab, var(--bisque) 14%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .cta-fixed .sheet-btn { color: var(--bisque); background: color-mix(in oklab, var(--bisque) 12%, transparent); border-color: color-mix(in oklab, var(--bisque) 38%, transparent); }
  .cta-fixed .sheet-btn:hover { background: color-mix(in oklab, var(--bisque) 20%, transparent); border-color: var(--bisque); color: var(--bisque); }
  .cta-fixed .cta-wa { display: inline-flex; align-items: center; min-height: 46px; color: var(--bisque); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--bisque) 40%, transparent); }
  .cta-fixed .btn { min-height: 46px; }
}

@media (max-width: 480px) { .page .btn { white-space: normal; text-align: center; } }
/* three controls do not fit 360px. They stay three, but they stop wrapping. */
@media (max-width: 400px) {
  .cta-fixed { gap: var(--sc-2); padding: 0 0.6rem; }
  .cta-fixed .btn, .cta-fixed .sheet-btn, .cta-fixed .cta-wa {
    white-space: nowrap; font-size: 0.92rem; padding-inline: 0.7em; }
  .cta-fixed .cta-wa { padding-inline: 0; }
  .page .btn { white-space: nowrap; }
}

/* reveals: opacity and a short rise, only when JS is present. Reduced motion keeps the opacity only. */
html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); }
html.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { transform: none; transition: opacity 300ms var(--sc-ease-out); }
  .cta-fixed { transition: none; }
}

/* a reveal that has not arrived yet is still focusable, so focus reveals it */
html.js .rv:focus-within { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .menu-nav a { min-height: 44px; min-width: 44px; justify-content: center; }
}

/* ==================================================== THE RAIL, NOT A BAR ==
   The landing page has no bar: the brushstroke is the chrome. One click in
   the identity was disappearing into a conventional horizontal header, so
   the same object carries over. The fired stroke sits at the left edge at
   its full painted width (48px of the 56px path, not 28px), and the header
   hangs on it: the name chip and the one CTA held against the rail, the six
   page links in a quiet row under a hairline.

   One label, not two: once the line is parked at the edge, the Play side of
   it is off screen. That is the same reason the landing page's two chips
   close into one lockup at the collapse, so the inner pages simply start
   where the landing page ends.                                             */
@media (min-width: 861px) {
  .glaze-line--edge { transform: translateX(-8px); }
  /* every block clears the wider rail */
  .page main .wrap, .site-foot { padding-left: calc(var(--sc-gutter) + 2.75rem); }
  /* the header is hung on the rail, not laid out on the page grid */
  .site-head .wrap { flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4);
    padding-left: 4rem; padding-block: var(--sc-4) 0; }
  .site-head .mark { color: var(--bisque); border-radius: var(--sc-r-sm);
    background: color-mix(in oklab, var(--navy) 88%, transparent);
    padding: 0.35em 0.75em; }
  .site-head .btn { margin-left: 0; }
  /* the quiet row sits on the page's own column, so the chip and the CTA are
     the only things hung off the rail */
  .site-head nav { order: 3; width: 100%; margin: 0; margin-top: var(--sc-4);
    border-top: 1px solid var(--sc-hairline); padding-block: var(--sc-3);
    padding-left: calc(var(--sc-gutter) + 2.75rem - 4rem); }
  .site-head nav ul { gap: var(--sc-5) var(--sc-6); }
  /* 45px pointer targets, drawn as a hit box so the quiet row keeps its
     type size and the current-page rule stays on the word */
  .site-head nav a { color: var(--sc-ink-soft); position: relative; }
  .site-head nav a::after { content: ""; position: absolute; inset: -11px -7px; }
  .site-head nav a[aria-current="page"], .site-head nav a:hover { color: var(--sc-ink); }
}