/* THE EDITORIAL SHELL (Kevin, 2026-10-26, "do 1 and 2" of the unifying pass): one frame for The show, The audition,
   The auction and The listing, and one button set. Loaded last on each page, so its rules win over the page's own.
   The frame: 1080px wide, the top row, the masthead (standard-mast.css) with an Inter kicker in ink and the 3px
   rule under it, hairlines everywhere else, the black footer. The buttons: black and flat for the main action,
   outlined for the second, red only for the lit state (hover, focus, a chosen answer). Page content keeps its own
   styles. */
:root { --shell-paper: #F6F4EE; --shell-ink: #111; --shell-red: #FF3A3A; --shell-mute: #6B6A66; --shell-w: 1080px; }

/* The frame: the same width and gutters on every page, whether the page wraps its content in .wrap or in main. */
.wrap, body > main { width: 100% !important; max-width: var(--shell-w) !important; margin: 0 auto !important;
  padding: clamp(14px, 3vh, 36px) 20px 48px !important; box-sizing: border-box; }
body > .editorial-top { max-width: var(--shell-w) !important; margin: clamp(14px, 3vh, 36px) auto 26px !important; padding: 0 20px !important; box-sizing: border-box; }
body > .editorial-top + main { padding-top: 0 !important; }

/* The eyebrow over the title is the first half of a sentence the title finishes ("Bid live by watching" / "the show."),
   so it is sentence case, in the same plain Inter as the "We are" line under it, not the mono caps the masthead
   stylesheet gives an eyebrow (Kevin, 2026-10-26, "the eye brow must be sentence case"). */
header.standard-mast .mast-eyebrow { margin: 0 0 2px !important; color: #111 !important; text-transform: none !important;   /* black (Kevin, 2026-10-26, "all eyebrows black") */
  font: 500 clamp(1rem, 2.4vh, 1.3rem)/1.3 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; }
@media (max-width: 560px) { header.standard-mast .mast-eyebrow { font-size: 1.02rem !important; letter-spacing: 0 !important; } }

/* The kicker under the title: a plain Inter sentence in ink, the same on all four. */
header.standard-mast .mast-kick { color: var(--shell-ink) !important; font: 500 clamp(.95rem, 2vw, 1.2rem)/1.4 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important; margin-top: 6px !important; }
header.standard-mast .mast-kick .mast-description { display: inline !important; margin: 0 !important; color: inherit !important; }
@media (max-width: 560px) { header.standard-mast .mast-kick { font-size: .95rem !important; letter-spacing: 0 !important; } }

/* The footer: one black band, the inner row the page's width. Privacy and Krewe login in grey mono, the copyright
   in paper with SOLD OUT! red. The listing's footer uses the homepage's class names, the other three their own. */
footer.editorial-footer, footer.home-foot { margin: 48px 0 0 !important; padding: 0 !important; border: 0 !important; background: #0A0A0A !important; color: #D4D4D4 !important; }
.editorial-footer-inner, .hf-in { max-width: var(--shell-w) !important; margin: 0 auto !important; padding: 28px 20px !important; box-sizing: border-box;
  display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 10px 20px !important; }
.editorial-footer a, .hf-link { justify-self: start; margin: 0 !important; padding: 0 !important; color: #9A9890 !important; text-decoration: none !important;
  font: 700 .7rem/1 'Space Mono', monospace !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
.editorial-footer a:last-child, .hf-link:last-child { justify-self: end !important; }
.editorial-footer a:hover, .editorial-footer a:focus-visible, .hf-link:hover, .hf-link:focus-visible { color: #fff !important; }
.editorial-mark, .hf-mark { color: var(--shell-paper) !important; font: 900 1rem/1 'Inter Tight', 'Inter', sans-serif !important;
  letter-spacing: -.01em !important; text-transform: uppercase !important; white-space: nowrap; }
.editorial-mark b, .hf-mark b { color: var(--shell-red) !important; font-weight: 900 !important; }
@media (max-width: 560px) {
  .editorial-footer-inner, .hf-in { grid-template-columns: 1fr 1fr !important; padding: 22px 20px 24px !important; }
  .editorial-mark, .hf-mark { grid-column: 1 / -1 !important; grid-row: 1 !important; justify-self: center !important; text-align: center; }
}

/* The button set. .shell-btn is the family for new buttons; the rules under it map each page's existing buttons
   onto it: The listing's Continue, Send and Send more (black) and Back (outlined). The show's WATCH buttons and
   The auction's View on eBay are already black; their second buttons already outlined. */
.shell-btn, .listing-controls .btn, .btn.send, #sellAgain {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .4em;
  min-height: 46px; padding: 12px 18px !important; background: var(--shell-ink) !important; color: var(--shell-paper) !important;
  border: 1px solid var(--shell-ink) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  font: 700 .95rem/1.3 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  text-decoration: none !important; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.shell-btn.second, .listing-controls .btn.ghost, #sellAgain { background: transparent !important; color: var(--shell-ink) !important; }
.shell-btn:hover, .shell-btn:focus-visible, .listing-controls .btn:hover, .listing-controls .btn:focus-visible,
.btn.send:hover, .btn.send:focus-visible, #sellAgain:hover, #sellAgain:focus-visible {
  background: var(--shell-red) !important; color: var(--shell-ink) !important; border-color: var(--shell-red) !important; outline: none; }
.shell-btn:focus-visible, .listing-controls .btn:focus-visible, .btn.send:focus-visible, #sellAgain:focus-visible { outline: 2px solid var(--shell-ink) !important; outline-offset: 3px !important; }
.shell-btn:active, .listing-controls .btn:active, .btn.send:active, #sellAgain:active { transform: none !important; box-shadow: none !important; }
/* A hidden button stays hidden: the display rule above would otherwise show The listing's Back, Continue and Send at once. */
.shell-btn[hidden], .listing-controls .btn[hidden], .btn.send[hidden], #sellAgain[hidden] { display: none !important; }

/* THE EXPLANATION, the homepage's "We are" block on every page (Kevin, 2026-10-26, "make those sections look like the
   We are section of the home page"; the catalog look of the same morning is gone): a short plain line, the big line in
   Inter Tight 900 with its red stop, the rest in the blurb's own type. The same rules as index.html's .what. */
.catalog-copy { max-width: none !important; margin: 0 !important; padding: clamp(14px, 2.6vh, 26px) 0 clamp(18px, 3vh, 30px) !important;
  border: 0 !important; border-bottom: 1px solid var(--shell-ink) !important; }
.catalog-copy .what { margin: 0 !important; padding: 0 !important; max-width: none !important; color: #2A2A28 !important;
  font: 500 clamp(1rem, 2.4vh, 1.3rem)/1.4 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; }
.catalog-copy .what .kick, .catalog-copy .what .rest { display: block !important; max-width: 46rem !important; margin: 0 !important; padding: 0 !important;
  color: #2A2A28 !important; font: 500 clamp(1rem, 2.4vh, 1.3rem)/1.4 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.catalog-copy .what .hot { display: block; margin: .12em 0 .18em; color: var(--shell-ink);
  font: 900 clamp(1.5rem, 4.6vh, 2.7rem)/1 'Inter Tight', 'Inter', sans-serif; letter-spacing: -.035em; }
.catalog-copy .what .hot i { font-style: normal; color: var(--shell-red); }
@media (max-width: 560px) {
  .catalog-copy { padding: 14px 0 20px !important; }
  .catalog-copy .what, .catalog-copy .what .kick, .catalog-copy .what .rest { font-size: 1.02rem !important; line-height: 1.45 !important; }
  .catalog-copy .what .hot { font-size: clamp(1.5rem, 8.2vw, 2rem); margin: .1em 0 .16em; }
}

/* THE END OF THE PAGE (Kevin, 2026-10-26, "what about the end of pages. homogenize. Double line?"): every page's
   content closes with one double hairline, a deliberate end mark, and the page's closing section under it (The show's
   subscribe box, The auction's semi-serious note, The audition's folded steps, The listing's nothing), then the black
   footer. The double line on The show had been an accident, a card's bottom rule over the box's top rule. */
.page-end { position: relative !important; margin-top: 40px !important; padding-top: 32px !important;
  border: 0 !important; border-top: 1px solid var(--shell-ink) !important; }
.page-end::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--shell-ink); }
.page-end:empty { padding-top: 0 !important; height: 4px; }
@media (max-width: 560px) { .page-end { margin-top: 30px !important; padding-top: 24px !important; } }

/* THE NAV HEADER (Kevin, 2026-10-26, "redo the 4 page nav headers so they reflect the home page and the style the
   home page is based on. make the header stand apart from the rest of the page"): a black band across the whole
   page, the homepage's own black and red on the editorial paper: Home. in paper at the left, Bid. and
   Sell. at the right drawn as the homepage's pressed buttons read (paper words, red stops, red arrows). A hover is
   red with the stop and arrow white; an open menu is paper with ink words and a red stop and arrow; the current
   page keeps its red underline. The band bleeds to the viewport's edges while its row keeps the page's column. */
/* The scrollbar's space is always reserved, so a page tall enough to scroll (The show, The auction) and one that is
   not (a Coming soon page) share one column; the band's black is painted by a pseudo element clipped at the viewport,
   not a 100vw box, so a scrollbar never shifts the row (Kevin, 2026-10-27, "bid pages are wider than sell pages"). */
html { scrollbar-gutter: stable; }
html, body { overflow-x: clip; }
nav.editorial-top { box-sizing: border-box; position: relative; isolation: isolate; z-index: 80; width: 100% !important; max-width: none !important;
  display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 12px !important;
  min-height: clamp(56px, 7vh, 68px); padding: 0 !important;
  background: transparent !important; color: #F6F4EE !important; }
nav.editorial-top::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: #111; z-index: -1; }
.wrap > nav.editorial-top, main > nav.editorial-top { margin: calc(-1 * clamp(14px, 3vh, 36px)) 0 clamp(18px, 3vh, 30px) 0 !important; }
body > nav.editorial-top { max-width: 1080px !important; margin: 0 auto clamp(18px, 3vh, 30px) !important; padding: 0 20px !important; }   /* a band outside the frame keeps the frame's column for its row */
body > nav.editorial-top + main { padding-top: 0 !important; }
nav.editorial-top a.nav-home, nav.editorial-top a.nav-home:visited { display: flex !important; align-items: center !important; gap: 0 !important;
  padding: 0 !important; margin: 0 !important; color: #F6F4EE !important; background: transparent !important; box-shadow: none !important; transform: none !important;
  font: 900 clamp(1.25rem, 3vw, 1.7rem)/1 'Inter Tight', 'Inter', sans-serif !important; letter-spacing: -.04em !important; text-decoration: none !important; }
/* No stamp in the band: with the masthead's stamp right under it the two read as a double logo (Kevin, 2026-10-26). */
/* The arrow stays, pointing left, red like the menus' arrows and white on the hover (Kevin, 2026-10-26, "put the home arrow nav back"). */
nav.editorial-top a.nav-home .nav-home-arrow { display: inline-block !important; margin: 0 auto 0 0 !important; color: #FF3A3A !important;   /* the arrow at the block's left edge, the word at its right: the menus' own spacing (Kevin, 2026-10-27, "space between arrow and Home") */
  font: 900 1.25rem/1 'Inter Tight', 'Inter', sans-serif !important; rotate: 90deg !important; transform: none !important; }
nav.editorial-top a.nav-home:hover .nav-home-arrow, nav.editorial-top a.nav-home:focus-visible .nav-home-arrow { color: #fff !important; transform: translateY(3px) !important; }
nav.editorial-top a.nav-home i { color: #FF3A3A !important; font-style: normal; }
/* Home. is drawn like Bid. and Sell. (Kevin, 2026-10-26, "home link in nav should be like the nav buy and sell buttons"):
   the same box, red on hover with the stop white; its words stay on the column's edge. */
nav.editorial-top a.nav-home { box-sizing: border-box; min-width: clamp(140px, 15vw, 200px); align-self: stretch; padding: 0 18px !important; margin-left: -18px !important; transition: background-color .15s, color .15s; }   /* the same block as Bid. and Sell. (Kevin, 2026-10-27) */
nav.editorial-top a.nav-home:hover, nav.editorial-top a.nav-home:focus-visible { background: #FF3A3A !important; color: #111 !important; text-decoration: none !important; outline: none; }
nav.editorial-top a.nav-home:hover i, nav.editorial-top a.nav-home:focus-visible i { color: #fff !important; }
nav.editorial-top .commerce-nav { display: flex !important; align-items: stretch !important; gap: 0 !important; border: 0 !important; margin: 0 !important; }
/* Bid. and Sell. in the band are the homepage's buttons in miniature (Kevin, 2026-10-26, "make nav bid and sell buttons
   as much like home page buttons as possible ... no vertical line"): the word at the left, the red arrow at the right
   edge, each a block of the same width, no divider between them; black to start, red on hover with the stop and
   arrow white, paper when open; the current page keeps its red underline and the list its folded corner. */
nav.editorial-top .commerce-nav .sell-nav + .sell-nav { border-left: 0 !important; }
nav.editorial-top .commerce-nav .sell-nav > summary { height: 100%; min-height: 0 !important; box-sizing: border-box; padding: 0 18px !important;
  justify-content: space-between !important; gap: 14px !important; min-width: clamp(140px, 15vw, 200px);
  background: transparent !important; color: #F6F4EE !important; box-shadow: none !important; transform: none !important;
  font: 900 clamp(1.25rem, 3vw, 1.7rem)/1 'Inter Tight', 'Inter', sans-serif !important; letter-spacing: -.045em !important; }
nav.editorial-top .commerce-nav .sell-nav > summary i, nav.editorial-top .commerce-nav .sell-nav > summary::after { color: #FF3A3A !important; }
nav.editorial-top .commerce-nav .sell-nav > summary::after { font: 800 1.25rem/1 'Inter', system-ui, sans-serif !important; letter-spacing: 0 !important; }   /* the homepage's arrow (.pk .dn) */
nav.editorial-top .commerce-nav .sell-nav > summary:hover, nav.editorial-top .commerce-nav .sell-nav > summary:focus-visible { background: #FF3A3A !important; color: #111 !important; }
nav.editorial-top .commerce-nav .sell-nav > summary:hover i, nav.editorial-top .commerce-nav .sell-nav > summary:focus-visible i,
nav.editorial-top .commerce-nav .sell-nav > summary:hover::after, nav.editorial-top .commerce-nav .sell-nav > summary:focus-visible::after { color: #fff !important; }
nav.editorial-top .commerce-nav .sell-nav[open] > summary, nav.editorial-top .commerce-nav .sell-nav[open] > summary:hover { background: #F6F4EE !important; color: #111 !important; }
nav.editorial-top .commerce-nav .sell-nav[open] > summary i, nav.editorial-top .commerce-nav .sell-nav[open] > summary::after { color: #FF3A3A !important; }
nav.editorial-top .commerce-nav .sell-nav.sell-nav-current > summary { box-shadow: inset 0 -4px #FF3A3A !important; }
nav.editorial-top .commerce-nav .sell-nav .sell-nav-list { top: 100% !important; right: 0; border: 2px solid #111 !important; box-shadow: 4px 4px 0 #111 !important; }
@media (max-width: 560px) {
  nav.editorial-top { min-height: 52px; padding: 0 !important; }
  nav.editorial-top a.nav-home { font-size: 1.2rem !important; padding: 0 10px !important; margin-left: -10px !important; min-width: clamp(92px, 24vw, 110px); }
  nav.editorial-top .commerce-nav .sell-nav > summary { font-size: 1.2rem !important; padding: 0 10px !important; min-width: clamp(92px, 24vw, 110px); gap: 8px !important; }
  nav.editorial-top .commerce-nav .sell-nav > summary::after { font-size: 1rem !important; }
}

/* One title size on every masthead, so the stamp beside it sits at the same spot page to page (Kevin, 2026-10-26,
   "the logo in the 4 pages nav bounces a little from page to page": The show and The auction had their own smaller
   title rule, making their mastheads 3px shorter than The audition's and The listing's). */
header.standard-mast h1, header.hero.standard-mast h1, header.editorial-mast.standard-mast h1, header.mast.standard-mast h1 {
  font: 900 clamp(2.2rem, 9vw, 5rem)/.9 'Inter Tight', 'Inter', sans-serif !important; letter-spacing: -.045em !important; white-space: nowrap !important; }
header.standard-mast .mast-copy { min-height: 0 !important; }

/* COMING SOON (Kevin, 2026-10-26, "put coming soon on 3 of the four pages. just don't put it on bid live ... hide
   everything between the line under the explanation and the footer"): while a page carries a .coming-soon section
   after its explanation, everything after the explanation except that section and the footer is hidden. The
   audition, The auction and The listing carry it; The show and the homepage do not. Delete the section to undo. */
.coming-soon { margin: 0 !important; padding: clamp(28px, 6vh, 64px) 0 clamp(36px, 8vh, 90px) !important; border: 0 !important; }
/* A Coming soon page is short, so it fills the screen and its footer sits at the bottom, on screen on load (Kevin,
   2026-10-26, "footer on short height pages should show on load"). */
body:has(.coming-soon) { display: flex !important; flex-direction: column !important; min-height: 100vh; min-height: 100svh; margin: 0; }
body:has(.coming-soon) > .wrap, body:has(.coming-soon) > main { flex: 1 0 auto !important; }
body:has(.coming-soon) > footer.editorial-footer, body:has(.coming-soon) > footer.home-foot { margin-top: auto !important; }
body:has(.coming-soon) > .wrap, body:has(.coming-soon) > main { padding-bottom: 16px !important; }
@media (max-width: 560px) {
  .coming-soon { padding: 14px 0 20px !important; }
  .coming-soon h2 { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
  body:has(.coming-soon) .catalog-copy { padding: 12px 0 16px !important; }
}
@media (max-width: 560px) and (max-height: 600px) {
  .coming-soon { padding: 6px 0 10px !important; }
  .coming-soon h2 { font-size: 2rem !important; }
  body:has(.coming-soon) .catalog-copy { padding: 8px 0 12px !important; }
  body:has(.coming-soon) .catalog-copy .what, body:has(.coming-soon) .catalog-copy .what .kick, body:has(.coming-soon) .catalog-copy .what .rest { font-size: .92rem !important; line-height: 1.35 !important; }
  body:has(.coming-soon) .catalog-copy .what .hot { font-size: 1.45rem !important; }
}
.coming-soon h2 { margin: 0 !important; font: 900 clamp(3rem, 10vw, 6rem)/.95 'Inter Tight', 'Inter', sans-serif !important; letter-spacing: -.045em !important; color: #111 !important; }
.coming-soon h2 i { font-style: normal !important; color: #FF3A3A !important; }
body:has(.coming-soon) .catalog-copy ~ *:not(.coming-soon):not(footer):not(script):not(style):not(link) { display: none !important; }