/* Client booking site.
   Everything decorative comes from the shop: black walls with gold trim, gilded
   mirrors with an LED bar over each one, tufted black chairs, the compass badge. */

.boot, .boot-error { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 16px; text-align: center; padding: 24px; }
.boot img { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: scale(.96); } }
.loading-block { display: grid; place-items: center; padding: 48px 0; color: var(--gold); }
.block { display: block; }

/* ── Ornaments ──────────────────────────────────────────────────────────── */
.compass-star .lt { fill: var(--gold); }
.compass-star .dk { fill: var(--gold-deep); }
.compass-star .hub { fill: var(--ink); stroke: var(--gold); stroke-width: 2.5; }

/* Gold trim meeting at the compass: draws outward when it scrolls into view */
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 520px; margin: 0 auto; padding: 8px 24px; }
.orn-line { flex: 1; height: 1px; position: relative; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.orn-line.l { background: linear-gradient(90deg, transparent, var(--gold-line)); transform-origin: right; }
.orn-line.r { background: linear-gradient(270deg, transparent, var(--gold-line)); transform-origin: left; }
.orn-line::after { content: ''; position: absolute; top: -2.5px; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--gold-line); background: var(--ink); }
.orn-line.l::after { right: 18%; }
.orn-line.r::after { left: 18%; }
.orn .compass-star { flex: none; transform: rotate(-45deg) scale(.6); opacity: 0; transition: transform 1.2s var(--ease-out), opacity .6s; }
.orn.in .orn-line { transform: none; }
.orn.in .compass-star { transform: none; opacity: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; padding: 0 8px 0 16px;
  padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
  display: flex; align-items: center; gap: 8px; transition: background .35s, backdrop-filter .35s;
}
.site-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: 0; transition: opacity .35s;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
}
.site-head.scrolled { background: color-mix(in srgb, var(--ink) 84%, transparent); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
.site-head.scrolled::after { opacity: 1; }

/* The lettering takes over once the hero badge has scrolled away */
.brand {
  position: relative; display: block; margin-right: auto; line-height: 0; border-radius: 4px;
  opacity: 0; transform: translateY(8px) scale(.94); pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.brand img { height: 40px; width: auto; }
.brand::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 249, 230, .95) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url(/assets/img/wordmark.webp) center / contain no-repeat; mask: url(/assets/img/wordmark.webp) center / contain no-repeat;
}
.brand-on .brand { opacity: 1; transform: none; pointer-events: auto; }
.brand-on .brand::after { animation: sheen 1.3s .25s var(--ease-out) both; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

.head-nav { display: none; align-items: center; gap: 26px; margin-right: 18px; }
.head-nav a { color: var(--bone-dim); text-decoration: none; font-weight: 500; font-size: var(--t-sm); position: relative; padding: 6px 0; transition: color .2s; }
.head-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.head-nav a:hover { color: var(--bone); }
.head-nav a:hover::after { transform: none; }
.nav-rule { width: 1px; height: 18px; background: var(--line); }
.head-nav .staff-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ash); }
.head-nav .staff-link .icon { color: var(--gold); }
.menu-btn { color: var(--bone); }
@media (min-width: 900px) {
  .site-head { padding: 0 32px; height: 76px; }
  .brand img { height: 46px; }
  .head-nav { display: flex; }
  .menu-btn { display: none; }
}

/* Full-screen menu on phones: tufted leather, a compass on the wall */
.menu-sheet {
  position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(120% 70% at 85% 100%, #120f08, #000 60%), #000; outline: none;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(22px + var(--safe-b)) 20px;
  animation: menu-in .4s var(--ease-out) both;
}
.menu-sheet::before { content: ''; position: absolute; inset: 0; background: var(--tuft); opacity: .9; pointer-events: none; }
.menu-sheet > * { position: relative; }
.menu-head { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.menu-head img { height: 40px; width: auto; }
.menu-nav { display: grid; margin: 34px 0 0; padding: 0; list-style: none; }
.menu-nav a {
  display: flex; align-items: center; gap: 14px; padding: 9px 0; text-decoration: none; color: var(--bone);
  font: 400 clamp(30px, 8.6vw, 38px)/1.15 var(--f-display); letter-spacing: .005em;
  animation: menu-item .6s var(--ease-out) both; animation-delay: calc(90ms + var(--i, 0) * 50ms);
}
.menu-nav a .compass-star { opacity: .35; transition: opacity .2s, transform .4s var(--ease-out); }
.menu-nav a:hover .compass-star, .menu-nav a:focus-visible .compass-star { opacity: 1; transform: rotate(45deg); }
.menu-nav .menu-sub { font: 500 var(--t-md)/1.4 var(--f-ui); color: var(--ash); gap: 10px; margin-top: 14px; }
.menu-nav .menu-sub .icon { color: var(--gold); }
.menu-foot { margin-top: auto; display: grid; gap: 16px; padding-right: 12px; animation: menu-item .6s .35s var(--ease-out) both; }
.menu-foot p { display: flex; gap: 10px; align-items: center; color: var(--ash); font-size: var(--t-sm); }
.menu-foot p .icon { color: var(--gold); flex: none; }
.menu-watermark { position: absolute !important; right: -38vw; bottom: -30vw; width: 110vw; height: 110vw; opacity: .07; pointer-events: none; animation: bezel-turn 300s linear infinite; }
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-item { from { opacity: 0; transform: translateY(14px); } }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; display: grid; justify-items: center; text-align: center; isolation: isolate;
  padding: 80px 16px 44px; gap: 6px; overflow: hidden;
}
.hero-badge { position: relative; width: min(78vw, 400px); aspect-ratio: 1; display: grid; place-items: center; }
.hero-badge .bezel { position: absolute; inset: -9%; width: 118%; height: 118%; opacity: .32; animation: bezel-in 1.8s .15s var(--ease-out) both; will-change: transform, rotate; }
.bezel line, .bezel .ring { stroke: var(--gold); fill: none; }
.bezel .ring { stroke-width: .7; }
.bezel .ring.faint { opacity: .45; stroke-width: .5; }
.bezel .gem { fill: var(--gold); stroke: none; }
@keyframes bezel-in { from { opacity: 0; transform: rotate(-60deg) scale(.92); } }
@keyframes bezel-turn { to { transform: rotate(360deg); } }
/* The turning comes from Bezel() in brand.js. On phones the dial is smaller, so it's a bit brighter. */
@media (max-width: 959px) { .hero-badge .bezel { opacity: .42; } }
/* The badge swings like a compass needle finding north, then settles */
.badge { width: 100%; height: auto; position: relative; animation: settle 2.6s var(--ease-out) both paused; will-change: transform; }
.hero-badge.ready .badge { animation-play-state: running; }
@keyframes settle {
  0% { opacity: 0; transform: rotate(-34deg) scale(.88); }
  26% { opacity: 1; transform: rotate(12deg) scale(1.005); animation-timing-function: ease-in-out; }
  44% { transform: rotate(-6deg) scale(1); animation-timing-function: ease-in-out; }
  61% { transform: rotate(2.8deg); animation-timing-function: ease-in-out; }
  78% { transform: rotate(-1.1deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}
.badge-glow {
  position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 64%);
  filter: blur(22px); animation: glow-in 2.4s ease-out both;
}
@keyframes glow-in { from { opacity: 0; } }
.hero-copy { display: grid; justify-items: center; gap: 10px; animation: copy-in 1s 1.05s var(--ease-out) both; max-width: 560px; width: 100%; }
@keyframes copy-in { from { opacity: 0; transform: translateY(10px); } }
.hero-line { font-size: clamp(40px, 11vw, 80px); line-height: 1.02; margin-top: 8px; }
/* One pass of light across the lettering once the badge has settled */
@supports (height: 1lh) {
  .hero-line.split {
    background-image: linear-gradient(105deg, transparent 42%, rgba(255, 250, 232, .95) 50%, transparent 58%),
      linear-gradient(180deg, var(--gold) 0 52%, var(--gold-hi) 52% 55.5%, var(--gold-deep) 55.5% 100%);
    background-size: 250% 100%, 100% 1lh; background-repeat: no-repeat, repeat-y; background-position: 120% 0, 0 0;
    animation: tag-shine 1.7s 2.2s var(--ease-out) both;
  }
}
@keyframes tag-shine { from { background-position: 120% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
.addr { color: var(--bone-dim); font-size: var(--t-md); text-wrap: balance; }
.addr .icon { display: inline-block; color: var(--gold); vertical-align: -3px; margin-right: 7px; }
.hero-cta { display: grid; gap: 6px; width: 100%; max-width: 360px; margin-top: 16px; }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; justify-items: start; text-align: left;
    min-height: min(100vh, 920px); max-width: 1240px; margin: 0 auto; padding: 110px 40px 64px; column-gap: 64px;
  }
  .hero-badge { width: min(44vw, 580px); justify-self: center; }
  .hero-copy { justify-items: start; }
  .hero-cta { grid-auto-flow: column; justify-content: start; width: auto; max-width: none; }
}

/* Returning client */
.welcome { width: 100%; margin-top: 18px; display: grid; gap: 12px; text-align: left; }
.welcome-hi { font-weight: 600; font-size: var(--t-lg); text-align: center; }
@media (min-width: 960px) { .welcome-hi { text-align: left; } }
.welcome-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 16px 16px 18px; border-radius: 12px;
  background: linear-gradient(180deg, #110e09, #070604); border: 1px solid var(--gold-line); color: var(--bone); text-decoration: none;
  box-shadow: inset 0 0 0 4px #000, inset 0 0 0 5px color-mix(in srgb, var(--gold) 10%, transparent);
  transition: border-color .2s;
}
a.welcome-card:hover { border-color: var(--gold); }
.welcome-card strong { font-size: var(--t-lg); font-weight: 600; margin: 2px 0; }
.welcome-card > .icon { color: var(--gold); }
.welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.welcome-actions .btn.primary, .welcome-actions .btn.ghost:not(.sm) { flex: 1 1 160px; }
.forget { justify-self: center; }
@media (min-width: 960px) { .forget { justify-self: start; } }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { max-width: 1160px; margin: 0 auto; padding: 56px 16px 64px; scroll-margin-top: 72px; }
.section-head { display: grid; gap: 8px; margin-bottom: 30px; }
.section-head h2, .visit h2 { font-size: clamp(34px, 7vw, 54px); }
@media (min-width: 860px) { .section { padding: 80px 32px 88px; } }

/* Barbers: one light over the stations. It flickers on as the list comes into
   view and lights the cards below; each card is a station in a gilded frame. */
.barbers .section-head { position: relative; z-index: 3; margin-bottom: 32px; }
.tube {
  position: relative; display: block; height: 3px; margin-top: 14px; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, #fff1d2, #fff 50%, #fff1d2);
  box-shadow: 0 0 10px 1px rgba(255, 240, 205, .6), 0 0 34px 8px rgba(255, 236, 190, .25);
  opacity: .08;
}
.tube::after {
  content: ''; position: absolute; left: -6%; right: -6%; top: 2px; height: 460px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(50% 52% at 50% 0%, rgba(255, 236, 196, .13), rgba(255, 236, 196, .035) 55%, transparent 76%);
}
.section-head.on .tube { animation: tube-on 1.5s .15s linear forwards; }
.barber-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.barber {
  position: relative; border-radius: 12px; background: linear-gradient(180deg, #110f0a, #070605 72%);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  box-shadow: inset 0 0 0 4px #000, inset 0 0 0 5px color-mix(in srgb, var(--gold) 9%, transparent);
  transition: border-color .3s;
}
/* Reaching for a chair turns its station light up */
.barber::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(60% 75% at 50% 0%, rgba(255, 238, 200, .1), transparent 72%);
}
.barber:hover, .barber:has(.barber-main:active) { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.barber:hover::after, .barber:has(.barber-main:active)::after { opacity: 1; }
.barber-main {
  width: 100%; display: flex; align-items: center; gap: 15px; padding: 14px 66px 14px 15px; text-align: left;
  background: none; border: 0; border-radius: inherit; position: relative; z-index: 1;
}
.barber-text { display: grid; gap: 1px; min-width: 0; }
.barber-name { font: 620 19px/1.2 var(--f-ui); letter-spacing: -.005em; }
.barber-bio { font-size: var(--t-sm); line-height: 1.35; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 18px/1.2 var(--f-cond); font-stretch: 80%; color: var(--gold); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.next .icon { flex: none; transform: translateY(-1px); }
.next.none { color: var(--ash); font-weight: 500; }
.barber .next { margin-top: 3px; font-size: 16px; }
.barber-ig {
  position: absolute; top: 50%; right: 12px; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bone-dim);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  transition: color .2s, border-color .2s, background .2s;
}
.barber-ig::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.barber-ig:hover, .barber-ig:active { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
@media (min-width: 760px) {
  /* Two wide columns: room for the whole bio line, and ten barbers make five even rows */
  .barber-grid { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barber-grid > .barber:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
  .barber-main { gap: 18px; padding: 18px 70px 18px 18px; }
  .barber .avatar { --av: 64px !important; }
  .barber-name { font-size: 20px; }
}

/* Price board: the shop's menu board, gilded twice, scrolls in the corners */
.board {
  position: relative; max-width: 780px; margin: 0 auto; padding: 60px 26px 38px; border-radius: 4px;
  border: 1px solid var(--gold-line); background: var(--tuft), linear-gradient(180deg, #0d0b07, #000 70%);
}
.board::before { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); border-radius: 2px; pointer-events: none; }
.corner { position: absolute; width: 52px; height: 52px; }
.corner path { fill: none; stroke: var(--gold-deep); stroke-width: 1.7; stroke-linecap: round; }
.corner .thin { stroke-width: .9; opacity: .7; }
.corner .gem { fill: var(--gold); stroke: none; }
.corner.tl { top: 13px; left: 13px; }
.corner.tr { top: 13px; right: 13px; transform: scaleX(-1); }
.corner.bl { bottom: 13px; left: 13px; transform: scaleY(-1); }
.corner.br { bottom: 13px; right: 13px; transform: scale(-1); }
@media (min-width: 640px) { .board { padding: 70px 64px 46px; } .corner { width: 64px; height: 64px; } }
@media (min-width: 760px) { .board { background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), var(--tuft), linear-gradient(180deg, #0d0b07, #000 70%); } }
.board-title { text-align: center; font-size: clamp(38px, 8vw, 58px); margin-bottom: 8px; }
.board-sub { display: flex; align-items: center; gap: 12px; font: 600 var(--t-sm)/1 var(--f-ui); color: var(--gold); margin: 30px 0 4px; }
.board-sub::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-row { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.price-row:last-child { border-bottom: 0; }
.pr-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--gold-line); background: radial-gradient(circle at 50% 30%, #1a150c, #000); }
.pr-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pr-name { font: 600 var(--t-lg)/1.2 var(--f-ui); }
.leader { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--gold) 42%, transparent); transform: translateY(-5px); min-width: 16px; }
.pr-price { font-size: 28px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.price-row p { margin-top: 3px; max-width: 54ch; }
.board-note { text-align: center; margin-top: 24px; }

/* Visit: the real room, full-bleed. Graded so only the gold keeps its colour,
   darkened where the text sits. The light bars flicker on as it scrolls in and
   the room lights up with them, like walking in first thing in the morning. */
.scene { position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 0; }
.scene-media { position: absolute; top: 0; left: 0; right: 0; height: 142vw; z-index: -2; overflow: hidden; }
.scene-media picture, .scene-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-media img { object-fit: cover; object-position: 50% 70%; transform: scale(1.06); animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.06) translate3d(-1.2%, 0, 0); } to { transform: scale(1.12) translate3d(1.2%, -1%, 0); } }
/* Legibility: black at the edges and behind the copy */
.scene-media::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .05) 16%, rgba(0, 0, 0, .12) 48%, rgba(0, 0, 0, .72) 70%, #000 90%);
}
/* Lights off until the section is in view */
.scene-shade { position: absolute; inset: 0; z-index: 1; background: #000; opacity: .9; }
.scene.on .scene-shade { animation: room-on 1.9s .15s linear forwards; }
@keyframes room-on {
  0% { opacity: .9; } 9% { opacity: .55; } 11% { opacity: .88; } 20% { opacity: .4; } 22% { opacity: .84; }
  33% { opacity: .22; } 35% { opacity: .62; } 48% { opacity: .08; } 51% { opacity: .3; } 62%, 100% { opacity: 0; }
}

/* The light bars: LED tubes like the ones over every mirror */
.scene-lights { position: absolute; top: 0; left: 0; right: 0; height: 0; display: flex; justify-content: center; gap: 6vw; padding-top: 96px; }
.scene-lights i {
  position: relative; display: block; width: 26vw; max-width: 300px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #fff1d2, #fff 50%, #fff1d2); opacity: .08;
  box-shadow: 0 0 10px 1px rgba(255, 240, 205, .6), 0 0 34px 8px rgba(255, 236, 190, .25);
}
.scene-lights i::after {
  content: ''; position: absolute; left: -30%; right: -30%; top: 2px; height: 46vh;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 236, 196, .2), rgba(255, 236, 196, .05) 50%, transparent 72%);
  pointer-events: none;
}
.scene.on .scene-lights i { animation: tube-on 1.5s linear forwards; }
.scene.on .scene-lights i:nth-child(1) { animation-delay: .1s; }
.scene.on .scene-lights i:nth-child(2) { animation: tube-on 1.5s .45s linear forwards, tube-hum 13s 5s linear infinite; }
.scene.on .scene-lights i:nth-child(3) { animation-delay: .75s; }
@keyframes tube-on {
  0% { opacity: .08; } 8% { opacity: .9; } 11% { opacity: .1; } 19% { opacity: 1; } 23% { opacity: .2; }
  36% { opacity: .95; } 39% { opacity: .45; } 52%, 100% { opacity: 1; }
}
/* Every so often the middle tube catches, like an old fluorescent */
@keyframes tube-hum { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .35; } 92% { opacity: .95; } 93.2% { opacity: .5; } 94% { opacity: 1; } }

.scene-inner { position: relative; max-width: 1160px; margin: 0 auto; padding: 98vw 16px 84px; }
.visit-where { display: grid; gap: 18px; align-content: start; max-width: 520px; }
.visit-where h2 { font-size: clamp(34px, 7vw, 54px); }
address { font-style: normal; font-size: var(--t-xl); line-height: 1.35; font-weight: 500; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.visit-actions .btn.ghost { background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.visit-actions .btn.ghost .icon { color: var(--gold); }
.icon-only { width: 48px; padding: 0; }
.visit-hours { margin-top: 6px; border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); padding-top: 18px; }
.hours-title { font: 600 var(--t-md)/1 var(--f-ui); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.hours-title .icon { color: var(--gold); }
.hours { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); text-align: left; font-weight: 500; }
.hours td { text-align: right; font-size: 19px; font-weight: 500; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr.today th, .hours tr.today td { color: var(--gold); font-weight: 600; }
.hours tr.today th::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 0; transform: rotate(45deg); background: var(--gold); }
.scene-coords {
  position: absolute; right: 16px; bottom: 28px; margin: 0; display: flex; align-items: center; gap: 9px;
  color: color-mix(in srgb, var(--bone) 70%, transparent); font: 500 13px/1 var(--f-cond); font-stretch: 85%; letter-spacing: .08em; white-space: pre;
  text-shadow: 0 1px 8px #000;
}
@media (min-width: 760px) {
  .scene { min-height: max(760px, 100svh); display: grid; align-items: center; }
  .scene-media::after {
    background:
      linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .92) 34%, rgba(0, 0, 0, .68) 52%, rgba(0, 0, 0, .14) 76%, rgba(0, 0, 0, .3) 100%),
      linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 70%, #000 100%);
  }
  .scene-media { height: auto; bottom: 0; }
  .scene-media img { object-position: 62% 40%; }
  .scene-inner { width: 100%; padding: 160px 32px 120px; }
  .scene-lights { justify-content: flex-end; gap: 4vw; padding-right: 5vw; padding-top: 128px; }
  .scene-lights i { width: 14vw; }
  .scene-lights i::after { height: 70vh; }
  .scene-coords { bottom: 34px; right: 32px; }
}

/* Footer */
.site-foot { position: relative; border-top: 1px solid var(--line); padding: 56px 16px calc(116px + var(--safe-b)); display: grid; justify-items: center; gap: 14px; text-align: center; overflow: hidden; }
.site-foot::before { content: ''; position: absolute; top: -1px; left: 50%; width: 220px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.foot-mark { width: 210px; height: auto; opacity: .95; margin-top: 4px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.foot-links a { color: var(--bone-dim); text-decoration: none; }
.foot-links a:hover { color: var(--gold); }
.foot-social { display: flex; gap: 6px; }
.foot-social a { color: var(--ash); }
.foot-social a:hover { color: var(--gold); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: var(--ash); font-size: var(--t-sm); text-decoration: none; margin-top: 6px; }
.to-top:hover { color: var(--gold); }
@media (min-width: 860px) { .site-foot { padding-bottom: 60px; } }

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 14px 16px calc(12px + var(--safe-b));
  background: linear-gradient(transparent, rgba(0, 0, 0, .86) 30%, #000); transform: translateY(115%); transition: transform .35s var(--ease-out);
}
.mobile-bar.show { transform: none; }
@media (min-width: 860px) { .mobile-bar { display: none; } }

/* ── Booking flow ───────────────────────────────────────────────────────── */
.flow-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .25s; }
.flow {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ink);
  animation: flow-up .38s var(--ease-out);
}
@keyframes flow-up { from { transform: translateY(28px); opacity: 0; } }
@media (min-width: 760px) {
  .flow { left: auto; width: 560px; border-left: 1px solid var(--gold-line); animation: flow-in .42s var(--ease-out); box-shadow: -40px 0 80px rgba(0, 0, 0, .6); }
  @keyframes flow-in { from { transform: translateX(48px); opacity: 0; } }
}
.flow-head {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; position: relative;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 10px; flex: none;
  background: linear-gradient(180deg, #0c0a07, #000);
}
.flow-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.icon-btn-space { width: 44px; }
.flow-title { display: grid; justify-items: center; gap: 7px; min-width: 0; }
/* Progress: four diamonds on a gold thread */
.progress { list-style: none; display: flex; align-items: center; margin: 0; padding: 4px 0 0; }
.progress li { display: flex; align-items: center; }
.progress li + li::before { content: ''; width: 26px; height: 1px; margin: 0 6px; background: var(--line); transition: background .4s; }
.progress li.past::before, .progress li.now::before { background: var(--gold-deep); }
.progress i { display: block; width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--line); transition: background .3s, border-color .3s, box-shadow .3s, width .3s, height .3s; }
.progress li.past i { background: var(--gold-deep); border-color: var(--gold-deep); }
.progress li.now i { width: 10px; height: 10px; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 0 14px color-mix(in srgb, var(--gold) 50%, transparent); }
.crumbs { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.flow-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-x: hidden; }
.flow-foot { display: flex; align-items: center; gap: 14px; padding: 14px 20px calc(14px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--char); }
.step { padding: 8px 20px 32px; animation: step-fwd .42s var(--ease-out) both; }
.flow-body[data-dir='back'] .step { animation-name: step-back; }
@keyframes step-fwd { from { opacity: 0; transform: translateX(26px); } }
@keyframes step-back { from { opacity: 0; transform: translateX(-26px); } }
.step-title { font-size: clamp(28px, 7.4vw, 36px); margin: 20px 0 18px; outline: none; }
.step-note { margin: -6px 0 16px; }
.step-sub { display: flex; align-items: center; gap: 10px; font: 600 var(--t-sm)/1.2 var(--f-ui); color: var(--bone-dim); margin: 22px 0 10px; }
.step-sub .icon { color: var(--gold); }
.step-sub::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.pick-list, .svc-list { list-style: none; margin: 0 -8px; padding: 0; }
.pick, .svc {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 10px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: background .2s;
}
.pick-list li:last-child .pick, .svc-list li:last-child .svc { border-bottom: 0; }
.pick:hover, .svc:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent 80%); }
.pick:active, .svc:active { background: var(--char-2); }
.pick-main, .svc-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pick-main strong, .svc-main strong { font-weight: 600; font-size: var(--t-lg); line-height: 1.2; }
.pick-side, .svc-side { display: grid; justify-items: end; text-align: right; gap: 2px; flex: none; }
/* First available: the fast lane, polished brass like the primary button. One pass
   of light crosses it when the step opens. */
.priority {
  position: relative; overflow: hidden; isolation: isolate; width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 16px 16px 14px; border-radius: 14px; border: 0; text-align: left; color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 80%, #fff3cf) 0%, var(--gold) 48%, color-mix(in srgb, var(--gold) 84%, #3a2a05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .6), inset 0 -1px 0 rgba(60, 40, 0, .35), 0 10px 28px -14px color-mix(in srgb, var(--gold) 80%, transparent);
  transition: transform .12s, box-shadow .2s;
}
.priority::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 238, .6) 50%, transparent 62%);
  transform: translateX(-130%); animation: priority-shine 1.3s .45s var(--ease-out) both;
}
@keyframes priority-shine { to { transform: translateX(130%); } }
.priority:hover { box-shadow: inset 0 1px 0 rgba(255, 248, 225, .75), inset 0 -1px 0 rgba(60, 40, 0, .35), 0 14px 34px -14px var(--gold); }
.priority:active { transform: translateY(1px) scale(.995); }
.priority-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 14, 2, .12); box-shadow: inset 0 0 0 1.5px rgba(20, 14, 2, .5); }
.priority-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.priority-main strong { font: 700 var(--t-lg)/1.15 var(--f-ui); letter-spacing: -.005em; }
.priority-main span { font-size: var(--t-sm); line-height: 1.3; color: rgba(20, 14, 2, .74); }
.priority-when { flex: none; display: grid; justify-items: end; text-align: right; }
.pw-label { font: 600 12px/1.2 var(--f-ui); color: rgba(20, 14, 2, .7); }
.pw-time { font: 700 19px/1.15 var(--f-cond); font-stretch: 80%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.priority .spinner { color: var(--ink); }
/* First available shares its row with Pick a time: the brass fast lane, and a dark
   tile for people who know when, not who. The next time sits under the name. */
.fast { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 10px; align-items: stretch; }
.priority { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 3px; }
.priority-ico { grid-row: 1 / span 2; }
.priority .pm-sub { display: none; }
.priority-when { grid-column: 2; display: flex; align-items: baseline; gap: 7px; justify-content: start; text-align: left; }
.by-time {
  display: grid; align-content: center; justify-items: start; gap: 2px; padding: 12px 14px; border-radius: 14px; text-align: left;
  color: var(--bone); background: linear-gradient(180deg, #1a160d, #0c0a06); border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .07); transition: border-color .2s, transform .12s;
}
.by-time:hover { border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.by-time:active { transform: translateY(1px) scale(.99); background: var(--char-2); }
.bt-ico { color: var(--gold); display: grid; margin-bottom: 4px; }
.by-time strong { font: 700 17px/1.15 var(--f-ui); white-space: nowrap; }
.bt-sub { font-size: 13px; line-height: 1.25; color: var(--bone-dim); text-wrap: balance; }
/* Phones: both become tiles, icon beside the name, the next time on its own line */
@media (max-width: 479px) {
  .fast { grid-template-columns: minmax(0, 1fr) 112px; }
  .priority { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px; padding: 13px 13px 12px; align-content: center; }
  .priority-ico { grid-row: auto; width: 28px; height: 28px; box-shadow: none; background: none; }
  .priority-ico .icon { width: 24px; height: 24px; }
  .priority-main strong { font-size: 18px; white-space: nowrap; }
  .priority-when { grid-column: 1 / -1; display: grid; justify-items: start; gap: 0; }
  .pw-time { font-size: 18px; }
  .by-time { padding: 13px 12px 12px; }
  .bt-ico { margin-bottom: 2px; }
  .by-time strong { font-size: 15px; }
  .bt-sub { font-size: 12px; }
}
.price { font-size: 25px; font-weight: 600; color: var(--gold); line-height: 1; }
.svc-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--gold-line); background: radial-gradient(circle at 50% 30%, #1a150c, #000); }

.pick-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.pick-list li.pick-row:last-child { border-bottom: 0; }
.pick-row .pick { border-bottom: 0; flex: 1; min-width: 0; }
.pick-ig { flex: none; width: 52px; display: grid; place-items: center; color: var(--ash); text-decoration: none; transition: color .2s; }
.pick-ig:hover { color: var(--gold); }

/* Soonest by barber (first available) */
.soon-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.soon {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px 14px;
  border-radius: 12px; background: linear-gradient(180deg, #100d09, #060504); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  animation: rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.soon-name { display: grid; font-weight: 600; font-size: var(--t-lg); line-height: 1.2; min-width: 0; }
.soon-day { font: 500 var(--t-xs)/1.3 var(--f-ui); color: var(--ash); }
.soon-price { font: 600 20px/1 var(--f-cond); font-stretch: 80%; color: var(--gold); }
.soon-times { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-time {
  min-height: 40px; padding: 0 12px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--char);
  font: 600 17px/1 var(--f-cond); font-stretch: 80%; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--bone);
  transition: border-color .15s, background .15s, color .15s;
}
.chip-time:hover { border-color: var(--gold); }
.chip-time .when { color: var(--gold); margin-right: 5px; font-weight: 600; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.date-strip {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -20px; padding: 4px 20px 10px;
  scrollbar-width: none;
}
.date-strip::-webkit-scrollbar { display: none; }
.day {
  flex: none; width: 62px; height: 88px; display: grid; grid-template-rows: auto auto auto 6px; justify-items: center; align-content: center; gap: 1px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--char); scroll-snap-align: center; padding: 0;
  transition: border-color .2s, background .25s, transform .2s var(--ease-out);
}
.day .dow { font-size: var(--t-xs); color: var(--ash); font-weight: 500; }
.day .dnum { font: 600 29px/1.05 var(--f-cond); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.day .mon { font-size: 11px; color: var(--ash); height: 13px; line-height: 13px; }
.day .dot { width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold); }
.day.full { background: transparent; }
.day.full .dnum { color: var(--ash); }
.day.full .dot { background: transparent; }
.day:hover { border-color: var(--gold-line); }
.day[aria-pressed='true'] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 84%, #fff3cf), var(--gold) 50%, color-mix(in srgb, var(--gold) 88%, #3a2a05));
  border-color: var(--gold); color: var(--ink); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .55), 0 8px 20px -10px color-mix(in srgb, var(--gold) 80%, transparent);
}
.day[aria-pressed='true'] .dow, .day[aria-pressed='true'] .mon, .day[aria-pressed='true'] .dnum { color: var(--ink); }
.day[aria-pressed='true'] .dot { background: var(--ink); }
.day.more { width: 70px; color: var(--gold); grid-template-rows: auto auto; gap: 4px; }
.day.more .dow { color: var(--gold); }
.day-label { font-weight: 600; font-size: var(--t-lg); margin: 20px 0 4px; }
.period-label { display: flex; align-items: center; gap: 8px; font: 500 var(--t-sm)/1 var(--f-ui); color: var(--ash); margin: 20px 0 10px; }
.period-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot {
  height: 50px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--char);
  font-size: 20px; font-weight: 600; letter-spacing: .01em; transition: border-color .12s, background .12s, color .12s;
  animation: rise .35s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 18) * 16ms);
}
.slot:hover { border-color: var(--gold); }
.slot[aria-pressed='true'] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.day-empty { padding: 20px 0 8px; display: grid; gap: 14px; }
.day-empty-actions { display: grid; gap: 10px; }

/* Who's cutting? (several barbers free at the picked time) */
.who-list { list-style: none; margin: 0 -6px; padding: 0; display: grid; }
.who {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 8px; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.who-list li:last-child .who { border-bottom: 0; }
.who:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent); }
.who strong { font-size: var(--t-lg); font-weight: 600; }
.who .grow { display: grid; }
.who-any { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--gold-line); }

.details .summary {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px;
  background: linear-gradient(180deg, #110e09, #070604); border: 1px solid var(--gold-line);
  box-shadow: inset 0 0 0 4px #000, inset 0 0 0 5px color-mix(in srgb, var(--gold) 9%, transparent);
}
.sum-when { font-weight: 600; font-size: var(--t-lg); line-height: 1.25; }
.sum-price { display: grid; justify-items: end; gap: 3px; }
.addons { display: grid; gap: 8px; margin-top: 12px; }
.addon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--gold-line); border-radius: 12px; cursor: pointer; }
.addon .svc-ico { width: 38px; height: 38px; }
.addon.disabled { opacity: .55; cursor: default; }
.known { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 8px 14px 16px; border-radius: 12px; background: var(--char); }
.known > .icon { color: var(--gold); flex: none; }
.fields { display: grid; gap: 16px; margin-top: 22px; }
.hint.err { color: #F08A79; }
.add-note { margin-top: 10px; padding-left: 0; }
.details .field textarea { margin-top: 2px; }
.details > .field { margin-top: 16px; }
.details .form-error { margin-top: 14px; }
.flow-cta {
  position: sticky; bottom: 0; margin: 20px -20px -32px; padding: 18px 20px calc(18px + var(--safe-b));
  background: linear-gradient(180deg, transparent, var(--ink) 26%); display: grid; gap: 10px;
}
.fine { text-align: center; }

/* Done: the compass settles, the check is stamped, a gold ring goes out */
.done { text-align: center; display: grid; justify-items: center; gap: 10px; padding-top: 30px; }
.done-mark { position: relative; width: 136px; height: 136px; }
.done-mark img { width: 100%; height: 100%; animation: settle 2.2s var(--ease-out) both; }
.done-mark::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: ring-out 1.6s 1s var(--ease-out) both; }
@keyframes ring-out { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.45); } }
.done-check {
  position: absolute; right: -4px; bottom: 2px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-line);
  animation: stamp .5s .8s var(--ease-out) both;
}
@keyframes stamp { 0% { opacity: 0; transform: scale(1.8) rotate(-18deg); } 60% { opacity: 1; transform: scale(.92) rotate(3deg); } 100% { transform: none; } }
.done-title { font-size: clamp(30px, 8vw, 40px); margin-top: 10px; }
.done-sub { max-width: 40ch; margin-bottom: 8px; }
.done .booked-card { text-align: left; width: 100%; }
.done-actions { display: flex; gap: 10px; width: 100%; margin-top: 8px; }
.done-actions .btn { flex: 1; }

.booked-card {
  border: 1px solid var(--gold-line); border-radius: 12px; background: linear-gradient(180deg, #110e09, #070604); padding: 18px; display: grid; gap: 16px;
  box-shadow: inset 0 0 0 4px #000, inset 0 0 0 5px color-mix(in srgb, var(--gold) 9%, transparent);
}
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.facts dt { font-size: var(--t-xs); color: var(--ash); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 500; }
.facts dd.cond { font-size: 22px; font-weight: 600; }
.facts dd a { color: var(--bone); text-decoration-color: var(--gold-line); }
.facts .code { letter-spacing: .14em; color: var(--gold); }
.cal-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-row .btn { flex: 1 1 140px; }

/* Manage + find pages */
.page { min-height: 100dvh; }
.page-main { max-width: 600px; margin: 0 auto; padding: 108px 16px 64px; display: grid; gap: 16px; }
.page-main.narrow { max-width: 460px; }
.page-title { font-size: clamp(34px, 9vw, 50px); }
.lede { font-size: var(--t-lg); line-height: 1.45; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.manage-actions .btn { flex: 1 1 200px; }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--char); border: 1px solid var(--line); }
.notice .icon { color: var(--gold); flex: none; margin-top: 2px; }
.is-cancelled .booked-card { opacity: .62; border-color: var(--line); }
.is-cancelled .sum-when { text-decoration: line-through; text-decoration-color: var(--pole); }
.back-home { margin-top: 8px; }
.code-input { letter-spacing: .2em; font-size: 24px !important; font-weight: 600; text-transform: uppercase; }
.site-head.simple { position: absolute; }
.site-head.simple .brand { opacity: 1; transform: none; pointer-events: auto; }

/* Repeat picker + standing appointment preview */
.repeat { display: grid; gap: 10px; margin: -4px 0 18px; }
.seg { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--char); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; height: 38px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--bone-dim); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s; }
.seg button.on { background: var(--gold); color: var(--ink); }
.repeat-more { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--gold-line); border-radius: 12px; }
.small-seg button { height: 34px; }
.series-box { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--char); border: 1px solid var(--gold-line); display: grid; gap: 10px; }
.series-box.left { text-align: left; width: 100%; }
.series-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.series-head .icon { color: var(--gold); }
.series-head .muted { margin-left: auto; }
.series-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.series-list li, .series-list a { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--bone); text-decoration: none; }
.series-list li:last-child { border-bottom: 0; }
.series-list li > a { border-bottom: 0; width: 100%; padding: 0; }
.series-list .cond { width: 104px; flex: none; font-weight: 600; font-size: 18px; }
.series-list li.skip { opacity: .55; }
.series-list li.alt .cond { color: var(--gold); }
.series-list li.here { color: var(--gold); }
.tag-first { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--gold); font-weight: 600; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); flex: none; }

/* ── Waitlist ───────────────────────────────────────────────────────────── */
.linkish { background: none; border: 0; padding: 0; color: var(--gold); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--bone); }
.wait-hint { margin: 22px 0 4px; }
.wl-summary { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--char); border: 1px solid var(--gold-line); }
.wl-summary > .icon { color: var(--gold); flex: none; margin-top: 2px; }
.wl-summary strong { font-size: var(--t-lg); }
.wl-joined-actions { gap: 10px; }
.wl-notices { display: grid; gap: 10px; margin-top: 18px; width: 100%; max-width: 460px; }
.wl-notice {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--char); border: 1px solid var(--line); color: var(--bone); text-decoration: none; text-align: left;
}
.wl-notice > .icon:first-child { color: var(--ash); }
.wl-notice:hover { border-color: var(--gold-line); }
.wl-notice.hot { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--char)); }
.wl-notice.hot > .icon:first-child, .wl-notice.hot .small { color: var(--gold); }
.wl-slots { margin: 4px 0 8px; }
.wl-slots .slot { height: auto; min-height: 50px; padding: 6px 4px; display: grid; place-content: center; gap: 2px; }
.slot-who { font: 500 12px/1.1 var(--f-ui); letter-spacing: 0; color: var(--ash); }
.slot[aria-pressed='true'] .slot-who { color: var(--ink); }
.wl-leave { justify-self: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-badge .bezel, .menu-watermark, .scene-media img, .badge { animation: none !important; }
  .scene-shade { display: none; }
  .scene-lights i, .tube { opacity: 1 !important; animation: none !important; }
  .brand-on .brand::after, .priority::after { animation: none; }
  .orn-line, .orn .compass-star { transform: none !important; opacity: 1 !important; transition: none; }
}

/* Birthday page */
.bday-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.ref-note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.ref-note .icon { color: var(--gold); flex: none; }