/* Refinements layer (Claude, 2026-10-21). Loads after every other sheet.
   One display face and one button per venue, readable sizes and tap targets,
   the single footer, and the Coming up row of flyer cards. */

@font-face{font-family:Italiana;src:url('/codex/assets/italiana.woff2?v=11531b04cf') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Big Shoulders';src:url('/codex/assets/big-shoulders.woff2?v=755b3a8a99') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Big Shoulders';src:url('/codex/assets/big-shoulders-bold.woff2?v=20ab695c81') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Venue tokens. Brand colors are sampled from each logo (Abigail #f8b800) or the
   control colors already in use (Saint Yves brass); Strand moves from pale lavender
   to a brighter ice neon that still reads against its slate. */
html[data-venue=ab]{--rf-brand:#f8b800;--rf-brand-ink:#251016;--rf-bg:#30151f;--rf-deep:#1d0c13;--rf-ink:#f5e9dd;--rf-muted:#cdbcb9;--rf-line:#62434d;--rf-display:Italiana,Georgia,serif;--rf-foot:#120709}
html[data-venue=sy]{--rf-brand:#af9562;--rf-brand-ink:#101b2f;--rf-bg:#eee7d9;--rf-deep:#121c2b;--rf-ink:#232a2a;--rf-muted:#575044;--rf-line:#a99a80;--rf-display:Forum,Georgia,serif;--rf-foot:#0b121d}
html[data-venue=st]{--rf-brand:#8fe3ff;--rf-brand-ink:#08111c;--rf-bg:#13161a;--rf-deep:#0a0d11;--rf-ink:#eef0f3;--rf-muted:#b3bcc7;--rf-line:#2c3540;--rf-display:'Big Shoulders',Roboto,sans-serif;--rf-foot:#06080b}

/* 9. Display type. Body copy keeps each venue's official face. */
html[data-venue=ab] body :is(.venue-body,.official-article,.venue-upcoming) :is(h1,h2){font-family:var(--rf-display);font-weight:400;letter-spacing:.03em}
html[data-venue=ab] body .venue-body .ab-home-copy h2{font-size:clamp(34px,3.4vw,52px);line-height:1.08}
html[data-venue=st] body :is(.venue-body,.official-article,.venue-upcoming) :is(h1,h2){font-family:var(--rf-display);font-weight:700;letter-spacing:.01em;line-height:1}
html[data-venue=st] body .venue-body .st-home-copy h2{font-size:clamp(38px,3.8vw,58px)}

/* 10. One button per venue: solid brand color, venue ink, the same shape everywhere. */
html[data-venue] body .button.button:not(.secondary):not(.icon-button){background:var(--rf-brand);border:1px solid var(--rf-brand);color:var(--rf-brand-ink);border-radius:2px;font-weight:600;letter-spacing:.06em;text-transform:none;min-height:48px;padding-inline:24px;box-shadow:none;filter:none}
html[data-venue] body .button.button:not(.secondary):not(.icon-button):hover{filter:brightness(1.08)}
html[data-venue] body .button.button:not(.secondary):not(.icon-button):focus-visible{outline:2px solid var(--rf-brand);outline-offset:3px}
/* The glow is feedback on a control, not decoration at rest (taste-skill review 2026-10-21). */
html[data-venue=st] body .button.button:not(.secondary):not(.icon-button):is(:hover,:focus-visible){box-shadow:0 0 22px #8fe3ff40}
html[data-venue] body .button.button:not(.secondary) small{color:inherit;opacity:.75}

/* 5. Nothing a guest reads is smaller than 12px; every small link is a 44px target. */
html[data-venue] body :is(#hero-play,.archive-format,.venue-archive .editorial-eyebrow,.preview-stripe,.preview-stripe span,.preview-stripe button,.footer-preview p,.footer-preview summary,.footer-signature p,.tour-links p,.archive-note,.night-source,.calendar-source,.ab-row-note,.st-row-note,.booking-safety,.viewer-note){font-size:13px}
html[data-venue] body :is(.footer-links a,.inquiry-contact a,.ab-row-note a,.st-row-note a,.footer-phones a,.footer-visit .text-link,.ab-live-link,.st-live-link,.guest-list-link,.tour-links a,.menu-contact a){display:inline-flex;align-items:center;min-height:44px}
/* The home links (bottle menu, live reservations) each on their own line; inline they ran together as "See the bottle menuLive table reservations" (2026-10-27). */
html[data-venue] body :is(.ab-home-copy .ab-live-link,.st-home-copy .st-live-link){display:flex;width:fit-content}
html[data-venue] body .ab-home-copy p a,html[data-venue] body .st-home-copy p a{display:inline-block;padding-block:13px;margin-block:-13px}
html[data-venue] body #motion-toggle{min-height:44px}

/* 2. Saint Yves accordion: a closed panel turns its label sideways instead of breaking words. */
@media(min-width:701px){
  html[data-venue=sy] .sy-photo-accordion .st-image-link[aria-expanded=false] .st-panel-label{inset:24px auto 24px 18px;align-items:flex-start;justify-content:flex-end}
  html[data-venue=sy] .sy-photo-accordion .st-image-link[aria-expanded=false] .st-panel-label strong{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:clamp(22px,2vw,30px);padding:0}
  html[data-venue=sy] .sy-photo-accordion .st-image-link[aria-expanded=false] .st-panel-prompt{position:absolute;top:0;left:0;font-size:0}
  html[data-venue=sy] .sy-photo-accordion .st-image-link[aria-expanded=false] .st-panel-prompt>span{font-size:18px}
}

/* 11. Coming up: a quiet row of The List DC flyer cards. Mechanics copied from
   Code/thelist-react (FlyerCard.jsx, styles.css .flip-*, whats-on.css .wo-*):
   9:16 whole flyer over its blurred copy, hover tilt and flip, brand contour. */
.venue-upcoming{background:var(--rf-bg);color:var(--rf-ink);padding:14px clamp(20px,5.5vw,88px);border-bottom:1px solid var(--rf-line);box-shadow:0 0 0 100vmax var(--rf-bg);clip-path:inset(0 -100vmax)}
.upcoming-heading{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}
.upcoming-heading h2{margin:0;font-size:clamp(20px,1.8vw,26px);line-height:1.1}
.upcoming-actions{display:flex;align-items:center;gap:8px 24px}
.upcoming-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--rf-ink);font:inherit;font-size:14px;letter-spacing:.04em;cursor:pointer}
.upcoming-toggle:hover,.upcoming-toggle:focus-visible{color:var(--rf-brand)}
.upcoming-count{color:var(--rf-muted)}
.upcoming-chevron{width:7px;height:7px;margin-left:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.upcoming-toggle[aria-expanded=true] .upcoming-chevron{transform:translateY(2px) rotate(-135deg)}
.upcoming-panel{padding:18px 0 20px}
.venue-upcoming[hidden],.upcoming-panel[hidden]{display:none}
.venue-upcoming .text-link{color:var(--rf-ink);white-space:nowrap}
.wo-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 8px 16px;margin:-10px -8px 0;scrollbar-width:thin}
.wo-card{flex:0 0 auto;width:220px;scroll-snap-align:start;transition:transform .2s ease}
.wo-card[hidden]{display:none}
.wo-scene{height:483px;cursor:pointer;border-radius:6px;outline:1px solid transparent;outline-offset:3px;perspective:1200px;transition:outline-color .2s ease,box-shadow .2s ease,transform .2s ease-out}
@media(min-width:768px){.wo-card{width:240px}.wo-scene{height:519px}}
.wo-card:hover .wo-scene,.wo-card:focus-within .wo-scene,.wo-card--flipped .wo-scene{outline-color:var(--rf-brand);box-shadow:0 0 0 1px var(--rf-brand),0 0 16px 3px color-mix(in srgb,var(--rf-brand) 50%,transparent),0 0 40px 12px color-mix(in srgb,var(--rf-brand) 20%,transparent)}
.wo-card:hover,.wo-card:focus-within,.wo-card--flipped{transform:translateY(-4px)}
.wo-scene:focus-visible{outline:2px solid var(--rf-brand)}
.wo-scene .flip-card{position:relative;width:100%;height:100%;transition:transform 900ms cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.wo-scene .flip-card.is-flipped{transform:rotateY(180deg)}
.wo-scene .flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;border:1px solid #ffffff1a;background:var(--rf-deep);color:#fff}
.wo-scene .flip-back{transform:rotateY(180deg)}
.wo-front{display:flex;flex-direction:column}
.wo-art{position:relative;flex:none;aspect-ratio:9/16;overflow:hidden;background:#000}
.wo-fill{position:absolute;top:-9%;left:-9%;width:118%;height:118%;max-width:none;object-fit:cover;filter:blur(28px) brightness(.42) saturate(.9)}
.wo-flyer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wo-text{padding:12px}
.wo-venue{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--rf-brand)}
.wo-title{margin:2px 0 0;font:400 17px/1.2 var(--rf-display)}
html[data-venue=st] .wo-title{font-weight:700;font-size:19px}
.wo-when{margin:4px 0 0;font-size:13px;color:#c9c2b6}
.wo-tonight{margin-left:8px;color:var(--rf-brand)}
.wo-menu{padding:16px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.wo-menu .wo-title{font-size:20px}
.wo-reserve{margin-top:8px;min-height:44px;border:0;border-radius:2px;background:var(--rf-brand);color:var(--rf-brand-ink);font-weight:600;font-size:13px;cursor:pointer}
.wo-reserve:hover{filter:brightness(1.08)}
.wo-link,.wo-closed{min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff40;border-radius:2px;font-size:13px;color:#fff;text-decoration:none}
.wo-link:hover,.wo-link:focus-visible{border-color:var(--rf-brand);color:var(--rf-brand)}
.wo-closed{border-color:#ffffff1a;color:#9a948a}
.wo-details{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#c9c2b6;text-underline-offset:4px}
.wo-details:hover{color:var(--rf-brand)}
@media(prefers-reduced-motion:reduce){.wo-card,.wo-scene,.wo-scene .flip-card{transition:none}.wo-card:hover,.wo-card:focus-within,.wo-card--flipped{transform:none}}
html[data-motion=off] :is(.wo-card,.wo-scene,.wo-scene .flip-card){transition:none}
html[data-motion=off] :is(.wo-card:hover,.wo-card:focus-within,.wo-card--flipped){transform:none}

.footer-label{font-size:14px;letter-spacing:0;text-transform:none;margin:0}
.footer-phones li{display:flex;flex-direction:column}
.footer-phones span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c9c2b6}

/* 6. One footer: logo, address, labelled phone lines, links, preview controls. */
html[data-venue] body .journey-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px clamp(24px,4vw,64px);align-items:start;padding:clamp(48px,6vw,80px) clamp(20px,5.5vw,88px) 120px;background:var(--rf-foot);color:#d9d2c6;box-shadow:0 0 0 100vmax var(--rf-foot);clip-path:inset(0 -100vmax);border-top:1px solid #ffffff1f}
html[data-venue] body .journey-footer .footer-logo{max-width:150px;height:auto}
html[data-venue] body .journey-footer .footer-label{color:#a9a196;margin-bottom:10px}
html[data-venue] body .journey-footer address{font-style:normal;font-size:16px;line-height:1.5;color:#fff}
html[data-venue] body .journey-footer :is(.footer-visit .text-link,.footer-phones a,.footer-links a){color:#fff;font-size:15px;text-underline-offset:4px}
html[data-venue] body .journey-footer .footer-phones ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
html[data-venue] body .journey-footer .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:0}
html[data-venue] body .journey-footer .footer-preview{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;border-top:1px solid #ffffff1f;padding-top:20px;color:#a9a196}
@media(max-width:900px){html[data-venue] body .journey-footer{grid-template-columns:1fr 1fr}}
@media(max-width:520px){html[data-venue] body .journey-footer{grid-template-columns:1fr}}

/* editorial.css pins this kicker at 11px with !important; only a matching !important raises it. */
html[data-venue] body .venue-archive .editorial-eyebrow{font-size:13px!important}

/* Coming up, quiet attention (Egie 2026-10-21: "can be easily overlooked ... clever
   special effects ... while still being discreet"): a live beacon, three fanned flyer
   thumbnails, an 11 s light sweep along the bar with a glint on Show nights, and cards
   that rise in when opened. Static pieces stay; motion runs only when it is allowed. */
.venue-upcoming{position:relative}
.upcoming-beacon{position:relative;display:inline-block;width:7px;height:7px;margin-right:12px;border-radius:50%;background:var(--rf-brand);vertical-align:middle;transform:translateY(-2px);box-shadow:0 0 8px color-mix(in srgb,var(--rf-brand) 70%,transparent)}
.upcoming-beacon::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--rf-brand);opacity:0}
.upcoming-peek{display:inline-flex;align-items:center;height:30px;margin-right:10px}
.upcoming-peek:empty{display:none}
.upcoming-peek img{width:17px;height:30px;object-fit:cover;border-radius:2px;border:1px solid var(--rf-line);box-shadow:0 2px 6px #0006;margin-left:-7px;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.upcoming-peek img:first-child{margin-left:0;transform:rotate(-9deg)}
.upcoming-peek img:nth-child(2){position:relative;z-index:1;transform:translateY(-1px)}
.upcoming-peek img:nth-child(3){transform:rotate(9deg)}
.upcoming-toggle:is(:hover,:focus-visible) .upcoming-peek img:first-child{transform:translateX(-5px) rotate(-15deg)}
.upcoming-toggle:is(:hover,:focus-visible) .upcoming-peek img:nth-child(2){transform:translateY(-4px)}
.upcoming-toggle:is(:hover,:focus-visible) .upcoming-peek img:nth-child(3){transform:translateX(5px) rotate(15deg)}
.upcoming-toggle[aria-expanded=true] .upcoming-peek{display:none}
.venue-upcoming::after{content:"";position:absolute;left:0;width:30%;bottom:0;height:1px;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--rf-brand) 50%,transparent)}
@media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .upcoming-beacon::after{animation:up-beacon 2.8s cubic-bezier(.2,.6,.3,1) infinite}
  html:not([data-motion=off]) .venue-upcoming.is-seen::after{animation:up-sweep 11s ease-in-out .4s infinite}
  html:not([data-motion=off]) .venue-upcoming.is-seen .upcoming-toggle[aria-expanded=false]:not(:hover,:focus-visible) [data-upcoming-label]{background:linear-gradient(100deg,var(--rf-ink) 40%,var(--rf-brand) 50%,var(--rf-ink) 60%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:up-glint 11s ease-in-out .4s infinite}
  html:not([data-motion=off]) .venue-upcoming.is-seen .upcoming-toggle[aria-expanded=false] .upcoming-peek{animation:up-lift 11s ease-in-out .4s infinite}
  html:not([data-motion=off]) .upcoming-panel.is-opening .wo-card{animation:up-rise .6s cubic-bezier(.2,.7,.3,1) var(--rise-delay,0ms) both}
}
@keyframes up-beacon{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3.2);opacity:0}}
@keyframes up-sweep{0%{transform:translateX(0);opacity:0}3%{opacity:1}20%{transform:translateX(233%);opacity:1}23%,100%{transform:translateX(233%);opacity:0}}
@keyframes up-glint{0%,8%{background-position:100% 0}22%,100%{background-position:0 0}}
@keyframes up-lift{0%,12%,26%,100%{transform:none}17%{transform:translateY(-3px)}}
@keyframes up-rise{from{transform:translateY(16px)}to{transform:none}}
/* A visible way to fold the row again (Egie 2026-10-21: "no way to hide the flyers"). */
.upcoming-panel{position:relative}
.upcoming-close{display:flex;align-items:center;gap:8px;margin:14px 0 0 auto;min-height:44px;padding:0 16px;border:1px solid var(--rf-line);border-radius:2px;background:transparent;color:var(--rf-ink);font:inherit;font-size:13px;letter-spacing:.06em;cursor:pointer}
.upcoming-close span{font-size:18px;line-height:1}
.upcoming-close:hover,.upcoming-close:focus-visible{border-color:var(--rf-brand);color:var(--rf-brand)}

/* Scroll entrances (scroll-reveal.js): the light edge that rides each photo unveil,
   and a clipped frame for the tour photo's settle. */
.venue-tour .tour-frame{overflow:hidden}
.venue-tour .tour-frame img{transform-origin:50% 60%}

/* Drawn icons instead of arrow and play characters, which iPhones show as color emoji (Egie 2026-10-21). */
.ic-arrow,.ic-play,.ic-check{display:inline-block;vertical-align:-.06em;flex:none;overflow:visible}
/* Running text at 16px or more (taste-skill review 2026-10-21). */
html[data-venue] body :is(.sy-description,.inquiry-intro p,.inquiry-contact){font-size:16px}
html[data-venue] body :is(.ab-home-copy,.st-home-copy) p:not(.ab-row-note,.st-row-note){font-size:16px}

/* Inner pages (taste-skill review 2026-10-21). A short page name leads the first screen. */
html[data-venue] .official-article .editorial-cover.cover-short h1{font-size:clamp(56px,8.4vw,132px)!important;line-height:.98!important;max-width:none}
@media(max-width:700px){html[data-venue] .official-article .editorial-cover.cover-short h1{font-size:clamp(44px,13vw,64px)!important}}
/* Inside the venue: one large photograph and three smaller ones. */
.venue-photo-band{max-width:1320px;margin:0 auto;padding:clamp(56px,8vw,120px) clamp(20px,5.5vw,88px)}
.venue-photo-band h2{font:400 clamp(36px,4.6vw,64px)/1.05 var(--rf-display,Georgia,serif);margin:0 0 32px;color:inherit}
.band-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(180px,22vw));gap:12px}
.band-photo{margin:0;overflow:hidden;background:var(--rf-deep,#111)}
.band-photo:first-child{grid-row:1/3}
.band-photo:nth-child(4){grid-column:2/4}
.band-photo img{width:100%;height:100%;object-fit:cover;display:block}
.band-link{margin:24px 0 0}
@media(max-width:700px){.band-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.band-photo{aspect-ratio:4/5}.band-photo:first-child{grid-row:auto;grid-column:1/3;aspect-ratio:4/3}.band-photo:nth-child(4){grid-column:1/3;aspect-ratio:4/3}.venue-photo-band h2{font-size:clamp(32px,9vw,44px)}}
/* Nothing meant to be read under 13px on the inner pages either (taste-skill 2026-10-21). */
html[data-venue] body :is(.page-breadcrumb a,.page-breadcrumb span,.event-kicker,.calendar-today,.page-discovery small,.photo-collection-heading p,.reservation-dock .button,.vip-chat-launch,.calendar-source,.calendar-legend){font-size:13px}
html[data-venue] body .event-kicker{letter-spacing:0;text-transform:none}
/* Calendar (taste-skill 2026-10-21): the date is the agenda's heading, running text at 16px, and the
   calendar fills its column instead of floating in the middle of it. */
html[data-venue] body .calendar-agenda .agenda-date{font-size:clamp(22px,2vw,28px);margin:0 0 12px}
html[data-venue] body .calendar-agenda .agenda-title{font-size:20px;margin:0 0 6px;color:inherit}
html[data-venue] body .calendar-agenda p{font-size:16px}
html[data-venue] .official-article .venue-events.events-calendar-only{margin-inline:0}
/* The calendar page sits on the same outer margin as its title (72px), not inside a narrower box. */
@media(min-width:701px){html[data-venue] .official-article .editorial-content:has(> .events-calendar-only){max-width:none;margin-inline:72px}}
html[data-venue] .official-article .events-calendar-only .calendar-layout{max-width:none;width:100%}
/* The bar's venue name stays on one line on a phone (Saint Yves wrapped, 2026-10-21). */
html[data-venue] body .reservation-dock>span:first-child{white-space:nowrap}
@media(max-width:480px){html[data-venue] body .reservation-dock>span:first-child{font-size:16px}html[data-venue] body .reservation-dock .button{padding-inline:14px;gap:10px}}
/* Calendar page (taste-skill 2026-10-21): the calendar sits on the title's 72px edge, with no box. */
@media(min-width:701px){
 html[data-venue] .official-article .editorial-content:has(> .events-calendar-only){padding-inline:0}
 html[data-venue] .official-article .venue-events.events-calendar-only{border:0;padding-inline:0;background:none}
 html[data-venue] .official-article .editorial-content:has(> .events-calendar-only) .venue-photo-band{padding-inline:0;max-width:none}
}
/* The step labels already name each part of the inquiry; the matching legend is for screen readers. */
html[data-venue] body .guided-inquiry .inquiry-form legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:0;padding:0}
/* On inner pages the bar steps aside while the page's cover is on screen (vip-chat.js). */
html[data-venue] body .reservation-dock.is-tucked{transform:translate(-50%,calc(100% + 32px));opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){html[data-venue] body .reservation-dock{transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s ease-out}}
/* The photo band runs to the page's 72px edges on desktop, like the cover (taste-skill 2026-10-21). */
@media(min-width:701px){html[data-venue] .official-article .editorial-content .venue-photo-band{width:calc(100vw - 144px);max-width:none;margin-left:calc(50% - 50vw + 72px);margin-right:0;padding-inline:0;box-sizing:border-box}}
/* The table-booking simulator, to the taste-skill rules (Egie 2026-10-21: "fix the table-booking
   simulator so it passes the taste skill too"). Surfaces are told apart by a fill, not a 1px outline;
   nothing meant to be read is under 13px; the 14 nights sit in a 7-day grid instead of a sideways row. */
html[data-venue] #room .reservation-card{border:0;box-shadow:none}
html[data-venue] #room .map-viewport{border:0}
html[data-venue] #room .card-form .sample-panel{border:0;background:var(--panel)}
html[data-venue] #room .demo-card{border:0;background:var(--panel)}
html[data-venue] #room .demo-card span{font:14px/1.4 var(--body);letter-spacing:0}
html[data-venue] #room :is(.map-caption,.map-perspective-note,.map-view-status,.selection-image-note,.selection-facts,.card-safety,.card-selection,.sample-panel,.card-note,.card-consent){font-size:14px}
html[data-venue] #room :is(.card-form small,.demo-card small,.selection-action-label,.card-steps li,.map-angles button){font-size:13px}
html[data-venue] #room .night-choices{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;overflow:visible;margin-inline:0;padding:4px 0 14px}
html[data-venue] #room .night-choices [role=radio]{min-width:0;min-height:84px;padding:8px 2px;font-size:13px}
html[data-venue] #room .night-choices [role=radio] small{font-size:13px}
@media(max-width:700px){
  html[data-venue] #room .night-choices{gap:5px}
  html[data-venue] #room .night-choices [role=radio]{min-height:76px;padding:6px 0}
  html[data-venue] #room .night-choices strong{font-size:22px}
  html[data-venue] #room .card-form .button{font-size:13px}
}
/* Over a light ground (Saint Yves' cream pages and sections) the dock's venue name turns dark, like the
   chat button; vip-chat.js reads the ground and sets .on-light (Egie 2026-10-21). */
html[data-venue] body .reservation-dock.on-light>span:first-child{color:#1b1f24}
/* Inner page titles with a React Bits part (site_content.py, title_fx). The invisible copy and the part share
   one grid cell, so the title keeps its size and place while the part mounts, types or flips. */
html[data-venue] .title-fx{display:inline-grid;vertical-align:top;max-width:100%}
html[data-venue] .title-fx>*{grid-area:1/1;min-width:0}
html[data-venue] .title-fx__ghost{visibility:hidden}
html[data-venue] .title-fx__part{display:block}
/* Shuffle ships a pixel font in capitals; on a page title it keeps the page's own type. */
html[data-venue] .title-fx .shuffle-parent{font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:none}
html[data-venue] .title-fx .shuffle-char{line-height:inherit}
/* MaskedHeading lays out its words as see-through text under the photograph that fills them; they only hold
   the shape, so they are hidden (same layout, not read or counted as text under a picture). */
html[data-venue] .title-fx .masked-heading__measure{visibility:hidden}
/* On the gallery title the copy lies on top as see-through text, so the word stays real, selectable text over the
   photograph that fills it. */
html[data-venue] .title-fx--gallery .title-fx__ghost{visibility:visible;color:transparent;position:relative;z-index:1}
/* The home section headings (site_content.py heading_fx, Egie 2026-10-21): the part sits on the ghost copy, like title_fx. */
html[data-venue] body .title-fx.title-fx--section .title-fx__part>p{margin:0;display:block!important;text-wrap:inherit;text-align:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit;color:inherit;max-width:none}
html[data-venue] .title-fx--section .split-parent{display:block!important;text-align:inherit!important}
/* The Contact, Private events and Gallery titles start from nothing (typed, unfolded, risen), so their plain text must not show first and then vanish (gsap-core check 2026-10-22: Contact and Private events flashed the plain title for a frame). Only while the effect will run; if it never loads, the plain title shows after 2.5 s. */
@media (prefers-reduced-motion:no-preference){html[data-venue]:not([data-motion=off]) :is(.title-fx--contact,.title-fx--private-events,.title-fx--gallery) .title-fx__part:not(:has(*)){visibility:hidden;animation:title-fx-failsafe 0s 2.5s forwards}}
@keyframes title-fx-failsafe{to{visibility:visible}}