/* Draft 05: Mike's gallery-led, worn gig-poster direction. Presentation only. */
:root {
  --ink: #17232a;
  --panel: var(--ink);
  --blue: var(--ink);
  --cream: #f0ddbb;
  --muted: #d5c3a6;
  --paper: #dfc8a3;
  --red: #732923;
  --red-hover: #60211d;
  --line: #8f8a7b;
  --focus: #f0ddbb;
  --patina: url('/assets/print-patina.svg');
}

/* Keep the actual room, logo and typefaces. The edges belong to the print. */
body { background-color: var(--ink); background-image: var(--patina); }
h1,h2 { text-transform: uppercase; font-weight: 900; letter-spacing: -.035em; }
a:hover { color: var(--cream); text-decoration-thickness: 2px; }
:focus-visible { outline-color: var(--focus); }
.review-bar { background: var(--paper); color: var(--ink); }
.review-bar a:hover { color: var(--red); }
.review-bar :focus-visible,.arrival-strip :focus-visible { outline-color: var(--red); }
.site-header {
  background: var(--blue) var(--patina);
  border-bottom: 4px double var(--paper);
}
.site-header nav a { font-weight: 800; letter-spacing: .035em; }
.site-header nav a:hover,.site-header nav a[aria-current] { border-color: var(--paper); }
.nav-toggle { border-color: var(--paper); }
.button {
  text-transform: uppercase;
  letter-spacing: .035em;
  background: var(--red) var(--patina);
  color: var(--cream);
  border: 1px solid var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.button:hover { color: var(--cream); background-color: var(--red-hover); }
.button.secondary { background: var(--ink) var(--patina); border-color: var(--paper); }
.button.secondary:hover { background-color: var(--blue); }
.hero-centered h1 { text-transform: uppercase; text-shadow: 2px 3px 0 rgba(23,35,42,.65); }
.hero-centered .hero-copy>p { color: var(--cream); }
.arrival-strip {
  background: var(--paper) var(--patina); color: var(--ink);
  border-block: 4px double var(--red); font-weight: 800;
}
.arrival-strip a:hover { color: var(--red); }

/* Worn red wall: the real bar's wood and license plates show through. */
.signup-band {
  background: linear-gradient(rgba(114,39,32,.92),rgba(114,39,32,.92)),
    url('/assets/american-dive-bar-interior-1920.webp') center 62% / cover;
  color: var(--cream); border-block: 4px double var(--paper);
}
.signup-message h2 { font-size: clamp(48px,5.4vw,72px); line-height: .98; }
.signup-form { background: none; border: 0; color: var(--cream); box-shadow: none; }
.signup-form h2 { color: var(--cream); text-transform: uppercase; }
.signup-form>p,.signup-form label,.signup-form .signup-preview { color: var(--cream); }
.signup-form input { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.signup-form input::placeholder { color: #4d4942; }
.signup-form .button { background-color: var(--blue); }
.signup-form .button:hover { background-color: var(--ink); }
.signup-band :focus-visible { outline-color: var(--cream); }

/* A denim-blue gig board with tan handbill surfaces. All four views remain. */
.calendar-section { background: var(--blue) var(--patina); border-bottom: 4px double var(--paper); }
.calendar-heading h2,.music-intro h1 { font-size: clamp(44px,6.5vw,88px); line-height: .98; }
.calendar-heading h2 { padding-block: 16px; border-block: 4px double var(--paper); }
.calendar-heading { margin-bottom: 32px; }
.calendar button { color: var(--cream); background: var(--ink); border-color: var(--paper); font-weight: 800; }
.calendar button:hover { background: var(--red); }
.calendar-tabs { gap: 0; }
.calendar-tabs button { min-height: 48px; border-width: 2px; letter-spacing: .07em; }
.calendar-tabs button+button { border-left-width: 0; }
.calendar-tabs [aria-selected='true'] { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: inset 0 -4px 0 var(--red); }
.calendar .calendar-tabs [aria-selected='true']:hover { background: var(--paper); color: var(--ink); }
.calendar-toolbar { background: var(--ink) var(--patina); border-block: 4px double var(--paper); }
.calendar-toolbar h3 { text-transform: uppercase; letter-spacing: .025em; }
.calendar .calendar-reset { color: var(--cream); }
.show-card {
  background: var(--paper) var(--patina); color: var(--ink);
  border: 0; border-bottom: 5px solid var(--red);
  box-shadow: 4px 4px 0 var(--ink);
}
.show-copy h3 { text-transform: uppercase; font-weight: 900; }
.show-copy p,.show-copy .show-description { color: var(--ink); }
.show-copy .past-show { color: var(--red); }
.show-copy a:hover { color: var(--red); }
.show-date { color: var(--red); border-block: 2px solid var(--red); padding-block: 8px; font-weight: 800; }
.show-details { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.show-card :focus-visible { outline-color: var(--red); }
.month-grid th { background: var(--paper) var(--patina); color: var(--ink); }
.month-grid td { background: var(--ink); border-color: var(--line); }
.month-grid .calendar-outside { background: #101b22; }
.calendar .calendar-day[aria-pressed='true'] { background: var(--paper); color: var(--ink); }
.event-dot { background: var(--paper); }
.calendar-day[aria-pressed='true'] .event-dot { background: var(--red); }
.month-show span { color: var(--paper); }
.week-strip { border-color: var(--paper); }
.week-strip>div { background: var(--ink); color: var(--cream); }
.week-strip .week-has-shows { background: var(--paper) var(--patina); color: var(--ink); }
.calendar-empty { background: var(--ink) var(--patina); border-block: 1px solid var(--paper); }
.calendar-updated { color: var(--cream); }
.music-intro { max-width: none; padding-inline: var(--space); background: var(--blue) var(--patina); }
.music-arrival { max-width: none; background: var(--paper) var(--patina); color: var(--ink); }
.music-arrival .button { background-color: var(--ink); color: var(--cream); border-color: var(--ink); }
.music-arrival .button:hover { background-color: var(--red); }
.music-arrival :focus-visible { outline-color: var(--red); }
.music-intro p { max-width: 760px; padding-bottom: 24px; }

/* Full-width color changes separate the three owner-selected Home features. */
.food-feature,.dive-moments,.room,.group-section {
  max-width: none; padding-inline: max(var(--space),calc((100% - 1188px)/2));
  border-top: 4px double var(--paper);
}
.food-feature,.room { background: var(--paper) var(--patina); color: var(--ink); border-color: var(--red); }
.food-feature h2,.room h2 { color: var(--red); }
.food-feature :focus-visible,.room :focus-visible { outline-color: var(--red); }
.food-feature a:not(.button):hover,.room a:not(.button):hover { color: var(--red); }
.food-spread { border: 7px solid var(--ink); box-shadow: 5px 5px 0 var(--red); }
.feature-copy h2 { font-size: clamp(46px,5.2vw,74px); line-height: .97; }
.dive-moments { background: var(--blue) var(--patina); }
.moments-heading { padding-bottom: 28px; border-bottom: 4px double var(--paper); }
.moments-heading h2 { font-size: clamp(46px,5.4vw,76px); line-height: .97; }
.moments-photos .gallery-frame { border: 5px solid var(--paper); }
.moments-controls button { background: var(--ink) var(--patina); border-color: var(--paper); text-transform: uppercase; letter-spacing: .035em; }
.moments-controls button:hover,.moments-controls button:active { background-color: var(--red); }
.room-tour-player iframe { border: 6px solid var(--ink); }
.group-section { background: var(--red) var(--patina); border-block: 4px double var(--paper); }
.group-section h2 { font-size: clamp(44px,5vw,68px); }
.group-section .button { background-color: var(--blue); }
.group-section .button:hover { background-color: var(--ink); }
footer { background: var(--blue) var(--patina); border-top: 4px double var(--paper); }
footer h2 { text-transform: uppercase; letter-spacing: .035em; }
.footer-bottom { border-top: 4px double var(--paper); }
.social-links { gap: 12px; align-items: center; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; color: var(--cream); text-decoration: none; }
.social-links a:hover { color: var(--blue); background: var(--cream); }
.social-links a:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }
.social-icon { display: block; flex: none; }

/* The menu reads like the house menu; surrounding pages use the same signwork. */
.menu-intro h1,.page-intro h1,.detail h1,.artist-detail h1 { color: var(--cream); }
.menu-intro h1 { line-height: .93; }
.menu-hero-photo { border: 5px solid var(--paper); }
.menu-index h2 { text-transform: uppercase; border-bottom: 4px double var(--paper); padding-bottom: 14px; }
.menu-index nav a { text-transform: uppercase; font-weight: 800; letter-spacing: .025em; }
.menu-index nav a:hover { color: var(--cream); }
.menu-content { background: var(--paper) var(--patina); color: var(--ink); border-top: 7px solid var(--red); box-shadow: 6px 6px 0 var(--red); }
.menu-section { border-bottom: 3px double var(--red); }
.menu-section h2,.menu-item h3,.price { color: var(--red); }
.menu-section h2 { text-transform: uppercase; }
.menu-content a:hover { color: var(--ink); }
.menu-content .reference-note { color: #514638; }
.menu-item-photo { border-bottom: 4px solid var(--red); }
.page-intro { border-bottom: 4px double var(--paper); margin-bottom: 42px; }
.demo-form:not(.signup-form) { background: var(--blue) var(--patina); border: 3px double var(--paper); }
.demo-label,.form-feedback { color: var(--cream); }
input,select,textarea { background-color: var(--ink); border-color: var(--paper); color: var(--cream); }
input::placeholder,textarea::placeholder { color: var(--muted); }
.event-state,.event-time { color: var(--paper); }
.artist-photo,.visit-entrance-photo { border: 5px solid var(--paper); }
.visit-facts dt { text-transform: uppercase; }
.arrival-map { background: var(--blue) var(--patina); border-top: 4px double var(--paper); }
details { border-top: 3px double var(--paper); }
summary { font-weight: 800; }
details[open] summary { color: var(--paper); }

@media(max-width:700px) {
  .site-header nav { background: var(--blue) var(--patina); border-bottom: 4px double var(--paper); }
  .hero-centered h1 { font-size: 36px; line-height: 1.03; }
  .signup-message h2 { font-size: 49px; }
  .calendar-heading h2,.music-intro h1 { font-size: 45px; }
  .calendar-tabs button { letter-spacing: .025em; }
  .show-date { justify-content: flex-start; border-block: 0; padding: 0; }
  .show-card { box-shadow: 3px 3px 0 var(--ink); }
  .feature-copy h2,.moments-heading h2 { font-size: 49px; }
  .food-spread { border-width: 4px; box-shadow: 3px 3px 0 var(--red); }
  .moments-photos .gallery-frame { border-width: 2px; }
  .room-tour-player iframe { border-width: 3px; }
  .menu-content { box-shadow: 3px 3px 0 var(--red); }
  .menu-index nav a { border-color: var(--paper); }
  .page-intro { margin-bottom: 28px; }
}
@media(max-width:360px) {
  .hero-centered h1 { font-size: 32px; }
  .calendar-heading h2,.music-intro h1 { font-size: 39px; }
}

/* Draft 06: tall AMERICAN-style sign lettering, per Mike's correction. */
:root { --sign: 'Bebas Neue', 'Reddit Sans Condensed', sans-serif; }
h1,h2,.show-copy h3,.calendar-toolbar h3 {
  font-family: var(--sign);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: .012em;
  font-synthesis: none;
}
.hero-centered .hero-logo { width: 205px; height: 205px; margin-bottom: 22px; }
.hero-centered h1 { font-size: clamp(44px,4.6vw,62px); line-height: 1.04; text-shadow: none; }
.feature-copy h2,.moments-heading h2 { line-height: 1.04; }
.signup-message h2 { font-size: clamp(52px,5.8vw,78px); line-height: 1.04; }
.calendar-heading h2,.music-intro h1 { line-height: 1.06; }
.show-copy h3 { font-weight: 400; font-size: 36px; }
.show-tile .show-copy h3 { font-size: 31px; }
footer h2 { font-size: 30px; }

/* Texture stays behind content, so every photograph remains clean. */
body {
  background-color: var(--ink);
  background-image: var(--patina), url('/assets/worn-enamel.jpg');
  background-size: 180px 180px, 900px 600px;
  background-blend-mode: normal, soft-light;
}
.signup-band,.calendar-section,.food-feature,.dive-moments,.room,.group-section,
.music-intro,.music-arrival,footer,.menu-content,.page-intro,.inquiry-layout,
.visit-layout,.visit-tour,.tour-layout,.arrival-map,.detail,.artist-detail,.narrow {
  position: relative; isolation: isolate;
}
.signup-band::before,.calendar-section::before,.food-feature::before,.dive-moments::before,
.room::before,.group-section::before,.music-intro::before,.music-arrival::before,
footer::before,.menu-content::before,.page-intro::before,.inquiry-layout::before,
.visit-layout::before,.visit-tour::before,.tour-layout::before,.arrival-map::before,
.detail::before,.artist-detail::before,.narrow::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/worn-enamel.jpg') center / 900px 600px;
  mix-blend-mode: soft-light; opacity: .48;
}

/* Distress only the display lettering; smaller labels and copy stay solid. */
@supports (mask-image: url('/assets/sign-wear.svg')) {
  main h1,main h2,.signup-message h2,.signup-form h2 {
    mask-image: url('/assets/sign-wear.svg');
    mask-mode: luminance;
    mask-size: 260px 130px;
    mask-repeat: repeat;
  }
}
.moments-photos .gallery-frame img { filter: none; }
.moments-photos .gallery-frame::before,.moments-photos .gallery-frame::after { content: none; }

@media(max-width:700px) {
  .hero-centered .hero-logo { width: 156px; height: 156px; margin-bottom: 22px; }
  .hero-centered h1 { font-size: 37px; line-height: 1.06; }
  .signup-message h2 { font-size: 55px; }
  .calendar-heading h2,.music-intro h1 { font-size: 49px; }
  .feature-copy h2,.moments-heading h2 { font-size: 55px; }
  .show-copy h3 { font-size: 29px; }
  .show-tile .show-copy h3 { font-size: 35px; }
}
@media(max-width:360px) {
  .hero-centered .hero-logo { width: 144px; height: 144px; }
  .hero-centered h1 { font-size: 33px; }
  .calendar-heading h2,.music-intro h1 { font-size: 43px; }
}
@media(forced-colors:active) {
  main h1,main h2,.signup-message h2,.signup-form h2 { mask-image: none; }
  body::before,main section::before,footer::before { display: none; }
}
/* Home section swap: worn red food feature, then a tan signup band after music. */
.food-feature{background:var(--red) var(--patina);color:var(--cream);border-color:var(--paper)}
.food-feature h2{color:var(--cream)}
.food-feature .button{background-color:var(--ink)}
.food-feature .button:hover{background-color:#101b22}
.food-feature :focus-visible{outline-color:var(--cream)}
.signup-tan{background:var(--paper) var(--patina);color:var(--ink);border-color:var(--red)}
.signup-tan .signup-form,.signup-tan .signup-form h2,.signup-tan .signup-form>p,.signup-tan .signup-form label{color:var(--ink)}
.signup-tan .signup-form input{background:var(--cream)}
.signup-tan .signup-form .form-feedback:not(:empty){color:var(--ink);border-color:var(--red)}
.signup-tan :focus-visible{outline-color:var(--red)}

/* Menu: owner-supplied lunch poster beside the existing BBQ menu. */
.menu-with-lunch{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;padding-top:56px;align-items:start}
.menu-with-lunch .menu-index{position:static;min-width:0;align-self:stretch}
.menu-sticky-nav{position:sticky;top:118px;max-height:calc(100dvh - 142px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--paper) transparent;padding-bottom:4px}
.menu-welcome h1{font-size:clamp(54px,5.3vw,68px);line-height:.98;color:var(--cream);overflow-wrap:break-word}
.menu-welcome p{margin-top:20px;max-width:27ch}
.menu-lunch-special{margin:28px 0 40px}
.menu-lunch-special>a{display:block}
.menu-lunch-special img{display:block;width:100%;height:auto}
.menu-lunch-special figcaption{display:grid;gap:7px;margin-top:16px;font-size:16px;line-height:1.45;color:var(--cream)}
.menu-lunch-special figcaption strong{font-weight:700}
.menu-lunch-special figcaption>a{margin-top:3px;text-underline-offset:4px}
.menu-with-lunch .menu-content{min-width:0}
@media(min-width:701px) and (max-width:1000px){.menu-with-lunch{grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:30px}.menu-welcome h1{font-size:56px}}
@media(max-width:700px){.menu-with-lunch{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:34px}.menu-welcome h1{font-size:56px}.menu-welcome p{max-width:30ch}.menu-lunch-special{max-width:380px;margin-bottom:32px}.menu-sticky-nav{position:static;max-height:none;overflow:visible}}

/* Owner event-planning revision: authentic team photo and full-width color bands. */
.group-section { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.group-team-photo { width: 100%; height: auto; border: 5px solid var(--paper); }
.group-copy .button { margin-top: 28px; }
.private-events-page { background: var(--paper) var(--patina); color: var(--ink); }
.private-events-page .page-intro { max-width: none; margin-bottom: 0; padding: 65px max(var(--space),calc((100% - 1188px)/2)); background: var(--red) var(--patina); color: var(--cream); border-color: var(--paper); }
.private-events-page .page-intro h1 { color: var(--cream); }
.private-events-page .page-intro p { max-width: 75ch; }
.private-events-page .inquiry-layout { padding-top: 60px; }
.private-events-page .inquiry-layout::before { content: none; }
.event-sidebar { min-width: 0; }
.event-sidebar .feature-photo { aspect-ratio: 1.5; border: 5px solid var(--ink); }
.event-sidebar h2 { font-size: 38px; }
.event-sidebar h3 { margin-top: 30px; font-size: 27px; }
.event-amenities { padding-left: 22px; margin: 18px 0 24px; }
.event-amenities li { margin-block: 9px; padding-left: 4px; }
.event-catering { margin-top: 40px; padding-top: 8px; border-top: 4px double var(--red); }
.event-catering p { margin: 16px 0 24px; }
.catering-media { display: block; width: 100%; height: auto; border: 5px solid var(--ink); }
.private-events-page .demo-form { background: transparent; color: var(--ink); border: 0; border-top: 4px double var(--red); padding: 25px 0 0; }
.private-events-page .demo-label,.private-events-page .form-feedback { color: var(--ink); }
.private-events-page input,.private-events-page select,.private-events-page textarea { background: var(--cream); color: var(--ink); border-color: var(--ink); }
.private-events-page input::placeholder,.private-events-page textarea::placeholder { color: #53514a; }
.private-events-page a:not(.button):hover { color: var(--red); }
.private-events-page :focus-visible { outline-color: var(--red); }
@media (max-width:700px) {
 .group-section { grid-template-columns: 1fr; }
 .private-events-page .page-intro { padding-block: 42px 36px; }
 .private-events-page .inquiry-layout { padding-top: 35px; }
}

/* Visit follows the owner-approved red and tan interior-page treatment. */
.visit-page { background: var(--paper) var(--patina); color: var(--ink); }
.visit-page .page-intro { max-width: none; margin-bottom: 0; padding: 65px max(var(--space),calc((100% - 1188px)/2)); background: var(--red) var(--patina); color: var(--cream); }
.visit-page .visit-layout { padding-top: 60px; }
.visit-page .visit-layout::before { content: none; }
.visit-page .visit-entrance-photo { border-color: var(--ink); }
.visit-page .visit-tour { max-width: none; padding: 60px max(var(--space),calc((100% - 1188px)/2)); background: var(--red) var(--patina); color: var(--cream); border-block: 4px double var(--paper); }
.visit-page .arrival-map { background: var(--paper) var(--patina); color: var(--ink); border-top: 0; }
.visit-page .visit-layout a:not(.button):hover,.visit-page .arrival-map a:not(.button):hover { color: var(--red); }
.visit-page .visit-layout :focus-visible,.visit-page .arrival-map :focus-visible { outline-color: var(--red); }
.visit-page .visit-tour :focus-visible { outline-color: var(--cream); }
@media(max-width:700px) {
 .visit-page .page-intro { padding-block: 42px 36px; }
 .visit-page .visit-layout { padding-top: 35px; }
 .visit-page .visit-tour { padding-block: 40px; }
}

/* Same inline tour controls on Home and Visit; fullscreen never creates a tab. */
.inline-tour { min-width: 0; }
.inline-tour-stage { position: relative; height: 470px; background: var(--ink); border: 5px solid var(--ink); }
.visit-tour .inline-tour-stage { height: 560px; border-color: var(--paper); }
.inline-tour .inline-tour-stage iframe { display: block; border: 0; width: 100%; height: 100%; }
.inline-tour [hidden] { display: none !important; }
.tour-size-toggle { margin-top: 14px; min-height: 44px; padding: 8px 14px; background: var(--ink) var(--patina); color: var(--cream); border: 1px solid var(--paper); font: 600 18px var(--display); }
.inline-tour:is(:fullscreen,.is-expanded) { display: flex; flex-direction: column; width: 100vw; height: 100dvh; padding: 12px; background: var(--ink); color: var(--cream); }
.inline-tour.is-expanded { position: fixed; inset: 0; z-index: 100; }
.inline-tour:is(:fullscreen,.is-expanded) .inline-tour-stage { flex: 1; min-height: 0; height: auto; }
.inline-tour:is(:fullscreen,.is-expanded) .tour-size-toggle { flex-shrink: 0; align-self: center; }
.has-expanded-tour { z-index: 100; }
body.tour-is-expanded { overflow: hidden; }
@media(max-width:700px) {
 .inline-tour-stage { height: 400px; }
 .visit-tour .inline-tour-stage { height: 450px; }
}

/* Owner-requested BBQ label above the existing invitation. */
.food-feature .food-kicker { display: block; margin-bottom: 16px; font-size: clamp(26px,2.6vw,36px); line-height: 1.1; letter-spacing: .04em; }

.food-feature .food-service { font-weight: 700; margin-bottom: 12px; }
.food-feature .food-service + p { margin-top: 0; }

/* Native American Dive Tripleseat form; isolated provider styling and validation. */
.tripleseat-inquiry { min-width: 0; }
.tripleseat-form { display: block; width: 100%; height: 1510px; border: 1px solid var(--ink, #201a17); background: #fff; }
.tripleseat-fallback { font-size: .9rem; line-height: 1.6; margin-top: 1rem; }
@media (max-width: 700px) { .tripleseat-form { height: 1810px; } }