/* A paper-and-leaf palette shared by the portal and the working pages.
   Light is the HTML default; only an explicit saved choice selects dark. */
:root {
  color-scheme: light;
  --paper: #f7f4ec;
  --surface: #fffdf7;
  --surface-sunk: #eeeadd;
  --ink: #153c2c;
  --muted: #526055;
  --brand: #21553e;
  --brand-deep: #153c2c;
  --gold-ink: #89601e;
  --hairline: #d8d8c9;
  --hairline-dk: #d1d5c6;
  --edge: #7a8876;
  --edge-dk: #73826f;
  --theme-nav: rgb(247 244 236 / 88%);
  --theme-line: rgb(21 60 44 / 18%);
  --theme-edge: rgb(21 60 44 / 50%);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0a0c0e;
  --surface: #151b1b;
  --surface-sunk: #1b2421;
  --ink: #ede7dc;
  --muted: #a8b4ad;
  --brand: #9dc9ac;
  --brand-deep: #101916;
  --brand-lift: #16221c;
  --brand-lit: #b2d7bf;
  --gold-ink: #e8b86a;
  --paste: #b5c6a0;
  --stain-day: #e7a47b;
  --stain-peak: #edac95;
  --stain-set: #f2c8bb;
  --hairline: #34433a;
  --hairline-dk: #34433a;
  --edge: #768c7c;
  --edge-dk: #768c7c;
  --open: #a2d0ba;
  --held: #e8bc73;
  --closed: #a8b4ad;
  --danger: #f0a69c;
  --warn: #edac95;
  --theme-nav: rgb(10 12 14 / 88%);
  --theme-line: rgb(237 231 220 / 18%);
  --theme-edge: rgb(237 231 220 / 50%);
}
/* Hide the page's scrollbar, without disabling scrolling or reserving a gutter.
   Nested tables, menus and text fields keep their own native scroll controls. */
html, html:has(.label-home) {
  background: var(--paper);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
  scroll-padding-top: 78px;
}
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
html::before, body::after, .ambient { display: none; }
body { background: var(--paper); background-image: none; }
.skip { background: var(--ink); color: var(--paper); }
.brandmark .brand-gold { display: none; }
.brandmark .brand-ink { display: block; }
html[data-theme="dark"] .brandmark .brand-gold { display: block; }
html[data-theme="dark"] .brandmark .brand-ink { display: none; }
.masthead, .label-home .masthead {
  background: var(--theme-nav);
  color: var(--ink);
  border-bottom: 1px solid var(--theme-line);
  padding-bottom: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav a, .nav .as-link, .label-home .nav a, .label-home .nav .as-link { color: var(--ink); }
.nav a:hover, .nav .as-link:hover, .label-home .nav a:hover { color: var(--gold-ink); }
.nav a[aria-current="page"] { color: var(--gold-ink); box-shadow: inset 0 -2px 0 var(--gold-ink); }
.nav-button, .label-home .nav-button { color: var(--ink); border-color: var(--theme-edge); }
.nav a.nav-signin { border-color: var(--theme-edge); }
.nav a.wa-solid, .label-home .nav a.wa-solid { background: transparent; color: var(--ink); border: 1px solid var(--theme-edge); box-shadow: none; }
.masthead .wa-dot { background: var(--gold-ink); }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  min-width: 64px;
  padding: 0 4px;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 500 11px/1.4 var(--text);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--gold-ink); }
.theme-symbol { font-size: 20px; line-height: 1; }
.theme-toggle:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.panel, .on-brand .panel, .on-brand .panel-paper { background: var(--surface); border-color: var(--hairline); box-shadow: none; backdrop-filter: none; }
.on-brand .note { background: var(--surface-sunk); }
.btn, .btn:hover, .btn:active { box-shadow: none; }
.btn-primary, .btn-primary:hover, .btn-primary:active { color: var(--ink); background: transparent; border-color: var(--edge); }
.btn-primary:hover { color: var(--gold-ink); border-color: var(--gold-ink); }
html[data-theme="dark"] .btn-primary:hover { color: var(--gold); }
.footer { background: var(--brand-deep); padding-top: var(--band); }
html[data-theme="light"] .footer {
  background: var(--surface-sunk);
  border-top: 1px solid var(--theme-line);
  color: var(--ink);
}
html[data-theme="light"] .footer a { color: var(--ink); }
html[data-theme="light"] .footer-col b { color: var(--gold-ink); }
html[data-theme="light"] .footer .muted { color: var(--muted); }
html[data-theme="light"] .footer-nap picture { display: none; }
html[data-theme="dark"] .day-chip[aria-pressed="true"],
html[data-theme="dark"] .slot[aria-pressed="true"] { color: #153c2c; }
html[data-theme="dark"] .btn-danger { color: var(--danger); }
html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .btn-danger:focus-visible { color: #153c2c; }

/* Portal ink inherits one palette. Photography retains its own dark scrims. */
.label-home {
  color-scheme: light;
  --label-ground: #f7f4ec;
  --label-secondary: #eeeadd;
  --label-ink: #153c2c;
  --label-soft: #526055;
  --label-muted: #646d60;
  --label-amber: #89601e;
  --label-teal: #2e6b72;
  --label-line: rgb(21 60 44 / 18%);
  background-image: none;
}
html[data-theme="dark"] .label-home {
  color-scheme: dark;
  --label-ground: #0a0c0e;
  --label-secondary: #101317;
  --label-ink: #ede7dc;
  --label-soft: #9ea5a8;
  --label-muted: #8d9599;
  --label-amber: #e8b86a;
  --label-teal: #73aeb4;
  --label-line: rgb(237 231 220 / 18%);
}
.label-section { scroll-margin-top: 0; }
.label-home .label-button { border-color: var(--theme-edge); }
.statement-index { -webkit-text-stroke-color: var(--label-line); }
.sleeve { background: var(--surface); border-color: var(--theme-line); }
.deck-ready .sleeve { box-shadow: 0 12px 32px rgb(21 40 28 / 16%); }
html[data-theme="dark"] .deck-ready .sleeve { box-shadow: 0 12px 32px rgb(0 0 0 / 36%); }
.portal-veil {
  background: radial-gradient(ellipse at 53% 47%, transparent 40%, rgb(10 12 14 / 18%) 100%),
              linear-gradient(0deg, rgb(10 12 14 / 32%), transparent 35%, rgb(10 12 14 / 12%));
}
.portal-kicker, .portal-leaf-caption { background: transparent; }
.label-home:not(.motion-ready) .portal-top,
.label-home:not(.motion-ready) .portal-bottom,
.label-home:not(.motion-ready) .portal-bottom .label-link,
.label-home:not(.motion-ready) .portal-note,
.label-home:not(.motion-ready) .portal-scroll,
.label-home:not(.motion-ready) .portal-side { color: #ede7dc; }
.label-home:not(.motion-ready) .portal-kicker,
.label-home:not(.motion-ready) .portal-leaf-caption { visibility: hidden; }
/* Responsive type stays readable rather than shrinking to fit a narrow row. */
.label-home { font-size: 1rem; }
.label-home .micro, .label-home .section-label,
.label-home .portal-kicker, .portal-leaf-caption,
.label-home .portal-scroll, .label-home .portal-note,
.label-home .label-link, .label-home .label-button,
.label-home .collection-disclaimer, .label-home .deck-hint,
.label-home .sleeve-code, .label-home .sleeve-style, .label-home .sleeve-caption p,
.label-home .rates-disclaimer, .label-home .services-fine,
.label-home .service-name p, .label-home .service-name small,
.label-home .service-category, .label-home .service-duration,
.label-home .label-board .board-date small, .label-home .label-board .slot,
.label-home .label-board .slot-more, .label-home .label-board .board-rest,
.label-home .openings-note, .label-home .footer-strip,
.label-reviews footer { font-size: .75rem; }
.label-home .micro { letter-spacing: .1em; }
.label-home .label-lede { font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height: 1.8; }
.statement-bottom { font-size: .9375rem; line-height: 1.8; }
.close-row p, .portal-caption > p { font-size: .9375rem; }
.label-home h2 { font-size: clamp(2.125rem, 4.8vw, 4.375rem); }
.label-home .statement h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.2; }
.label-home .collection h2 { font-size: clamp(2.25rem, 5.4vw, 5rem); }
.label-home .section-heading h2 { font-size: clamp(2rem, 4vw, 3.625rem); }
.label-home .sleeve-caption h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.deck-ready.sleeve-deck { aspect-ratio: auto; padding-bottom: 7.5rem; }
.deck-ready.sleeve-deck::before { content: ''; display: block; width: 100%; aspect-ratio: 1.1; }
.deck-dots button { min-width: 44px; min-height: 44px; padding-inline: 19px; }
.deck-dots button span { width: 6px; height: 6px; }
.footer-strip a, .portal-caption .label-link { min-height: 44px; }
.footer-fine, .footer-col a { font-size: max(.75rem, 12px); }
html[data-theme="light"] .footer-fine { color: var(--muted); }
.sheet > .shell, .on-brand .tile, .tile { box-shadow: none; }
.btn-small { min-height: 44px; }
.ledger-rows { container-type: inline-size; }
@container (max-width: 48rem) {
  .ledger-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ledger-row > :first-child { grid-column: 1 / -1; }
  .ledger-row > :last-child { grid-column: 1 / -1; justify-self: start; }
  .ledger-cell { text-align: left; }
}
.label-wrap { width: min(calc(100% - clamp(2.5rem, 7.8vw, 7rem)), 1400px); }
.label-home .portal-kicker, .portal-leaf-caption { max-width: calc(100% - 2rem); text-align: center; }
.label-home .portal-kicker, .label-home .portal-leaf-caption {
  background: none;
  color: var(--label-ink);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .5px var(--label-ink);
  font-size: clamp(.9375rem, 1.2vw, 1.125rem);
  font-weight: 600;
}
@media (max-width: 1199px) {
  .nav-button { display: inline-flex; }
  .nav, .label-home .nav {
    display: none; position: absolute; inset: 100% 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); max-height: calc(100svh - 66px);
    padding: .75rem max(1.5rem, env(safe-area-inset-left)) 1.25rem;
    overflow-y: auto; overscroll-behavior: contain;
    border-bottom: 1px solid var(--theme-line);
  }
  .nav.open, .label-home .nav.open { display: flex; }
  .nav a, .nav .as-link, .label-home .nav a, .label-home .nav .as-link {
    min-height: 48px; padding: .875rem 0; justify-content: flex-start;
    border-bottom: 1px solid var(--theme-line); border-radius: 0;
    font-size: .8125rem; line-height: 1.5;
  }
  .nav .divider { display: none; }
  .nav a.wa-solid, .label-home .nav a.wa-solid { min-height: 48px; padding: .75rem 1.25rem; margin-top: .875rem; border-radius: 999px; justify-content: center; }
  .theme-toggle { justify-content: flex-start; min-height: 48px; font-size: .8125rem; border-bottom: 1px solid var(--theme-line); }
  .nav a.nav-signin, .label-home .nav a.nav-signin { border: 0; border-bottom: 1px solid var(--theme-line); }
}
@media (max-width: 999px) {
  .collection-grid { grid-template-columns: minmax(0, 1fr); gap: 3.75rem; }
  .collection-copy { max-width: 40rem; }
  .deck-column { width: min(100%, 32rem); margin-inline: auto; padding: 1.875rem .875rem 0; }
  .label-home .collection h2 { font-size: clamp(2.25rem, 6.5vw, 3.5rem); }
  .label-service { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding-block: 1.5rem; }
  .service-category { grid-column: 1; grid-row: 1; }
  .service-name { grid-column: 1; grid-row: 2; }
  .label-service .service-name h3 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
  .service-duration { grid-column: 2; grid-row: 1; text-align: right; }
  .service-price { grid-column: 2; grid-row: 2; align-self: start; padding-top: .3rem; font-size: 1.375rem; }
  .service-price > span { display: none; }
  .section-heading { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 760px) {
  .label-section { padding-block: clamp(4rem, 12vw, 6rem); }
  .label-home h2 { font-size: clamp(2rem, 7vw, 3rem); }
  .statement { min-height: auto; padding-block: 6rem; }
  .statement-bottom { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
  .statement-orb { right: -50%; opacity: .14; }
  .label-home .section-label { flex-wrap: wrap; gap: .5rem .875rem; margin-bottom: 2rem; }
  .service-name p { max-width: 26ch; }
  .service-price { font-size: 1.25rem; }
  .label-home .label-board .board-date { flex-wrap: wrap; gap: .25rem 1rem; }
  .label-home .label-board .slot { padding: .6875rem 1rem; }
  .close-row .label-actions { gap: 1rem 1.5rem; }
  .portal-top { top: 5.5rem; }
  .portal-bottom { bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .portal-caption > p { font-size: .875rem; }
  .scroll-line { height: 2rem; }
  .portal-note { letter-spacing: .08em !important; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 1rem; }
  .step { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .625rem; }
}
@media (max-width: 480px) {
  .deck-controls { display: grid; grid-template-columns: 44px 1fr 44px; gap: .625rem; }
  .deck-controls [data-deck-prev] { grid-column: 1; grid-row: 1; }
  .deck-controls [data-deck-status] { grid-column: 2; grid-row: 1; text-align: center; }
  .deck-controls [data-deck-next] { grid-column: 3; grid-row: 1; }
  .deck-hint { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .label-home .label-actions { align-items: flex-start; gap: 1rem; }
  .collection .label-actions { flex-direction: column; }
  .service-name p { max-width: 23ch; }
}
/* A short landscape viewport gets a compact composition, without cropped copy. */
@media (max-height: 600px) and (min-width: 600px) {
  .portal, .portal-stage { min-height: 390px; }
  .portal-heading { inset: 58px 0 0; padding: 0 50% 0 0; }
  .portal-leaf { width: min(32vw, 40svh); }
  .portal-kicker, .portal-leaf-caption { display: none; }
  .portal-bottom { left: 55%; right: 1.5rem; bottom: 2rem; grid-template-columns: 1fr; gap: 1rem; }
  .portal-bottom .portal-scroll { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: flex-start; }
  .portal-note, .portal-edition, .portal-side { display: none; }
  .portal-top { top: 5rem; }
}
html:not(.js-enabled) .masthead-inner { flex-wrap: wrap; }
html:not(.js-enabled) .nav-button { display: none; }
html:not(.js-enabled) .nav, html:not(.js-enabled) .label-home .nav {
  display: flex; position: static; flex-direction: row; flex-wrap: wrap;
  width: 100%; max-height: none; padding-inline: 0;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .masthead, .label-home .masthead { background: var(--paper); backdrop-filter: none; }
  .label-home { --label-line: var(--theme-edge); }
}
@media (forced-colors: active) { html { scrollbar-width: auto; } html::-webkit-scrollbar { display: revert; width: revert; } }