/*
  Motel Ice Machine: public look (Home, Shows, About).

  Every rule below starts with html[data-zone="public"][data-skin="orange"], which public-zone.js sets only on
  the public pages. The band login and the band workspace never get these rules, so they
  look and work exactly as before. Same words and features; only the skin changes.

  Look: the band's poster. Grainy black-and-white motel photo, bold italic safety-orange
  condensed type, off-white motel paper, black night.
*/
@font-face {
  font-family: "Poster Title";
  src: url("assets/brand/poster-title.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

html[data-zone="public"][data-skin="orange"] {
  --mim-black: #000;
  --mim-night: #0c0c0c;
  --mim-panel: #141414;
  --mim-line: #2e2e2e;
  --mim-paper: #ecebe4;
  --mim-ink: #1d1d1b;
  --mim-orange: #cf4b21;
  --mim-orange-hot: #e0582b;
  --mim-orange-ink: #b23a12;  /* small orange print on paper (5:1) */
  --mim-steel: #a3a9ab;       /* secondary text on black (8:1) */
  --mim-display: "Poster Title", "Barlow Condensed", "Arial Narrow", sans-serif;
  --mim-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mim-body: "DM Sans", Arial, sans-serif;
  --mim-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- Page ---------- */
html[data-zone="public"][data-skin="orange"] body {
  background: var(--mim-black);
  color: var(--mim-paper);
  font-family: var(--mim-body);
}
html[data-zone="public"][data-skin="orange"] body::after {
  /* still film grain over the whole page; it never moves */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background-image: var(--mim-grain);
  opacity: .07;
}
html[data-zone="public"][data-skin="orange"] a:focus-visible,
html[data-zone="public"][data-skin="orange"] button:focus-visible,
html[data-zone="public"][data-skin="orange"] summary:focus-visible {
  outline: 3px solid var(--mim-orange);
  outline-offset: 3px;
}

/* ---------- Header and menu ---------- */
html[data-zone="public"][data-skin="orange"] .site-header {
  background: var(--mim-black);
  border-bottom: 1px solid var(--mim-line);
}
html[data-zone="public"][data-skin="orange"] .small-brand {
  width: 190px;
  background: none;
}
html[data-zone="public"][data-skin="orange"] .small-brand img { opacity: 1; }
html[data-zone="public"][data-skin="orange"] .desktop-nav a {
  font: italic 900 19px/1 var(--mim-display);
  letter-spacing: .04em;
  color: var(--mim-paper);
}
html[data-zone="public"][data-skin="orange"] .desktop-nav a:hover { color: var(--mim-orange-hot); }
html[data-zone="public"][data-skin="orange"] .desktop-nav a[aria-current="page"] {
  color: var(--mim-orange);
  text-decoration-color: var(--mim-orange);
}
html[data-zone="public"][data-skin="orange"] .menu-button {
  background: transparent;
  border: 2px solid var(--mim-paper);
  color: var(--mim-paper);
  font: italic 900 17px/1 var(--mim-display);
  letter-spacing: .04em;
}
html[data-zone="public"][data-skin="orange"] .site-menu {
  background: var(--mim-paper);
  border: 0;
  box-shadow: 6px 6px 0 var(--mim-orange);
}
html[data-zone="public"][data-skin="orange"] .site-menu a {
  color: var(--mim-ink);
  font: italic 900 20px/1 var(--mim-display);
  text-transform: uppercase;
  border-bottom: 1px solid #c9c7bd;
}
html[data-zone="public"][data-skin="orange"] .site-menu a:hover { background: #dedcd2; }
html[data-zone="public"][data-skin="orange"] .band-menu-link { color: var(--mim-orange-ink); border-top: 0; }

/* The root data-home-photo attribute selects the alternate or original photo. */
html{--home-photo:url("assets/brand/motel-night.webp");--home-photo-aspect:386 / 639;--home-photo-height:1.65544;--home-photo-mask:radial-gradient(ellipse 58% 49% at 56% 65%,#000 22%,rgba(0,0,0,.96) 45%,rgba(0,0,0,.58) 73%,transparent 100%)}
html[data-home-photo="alternate"]{--home-photo:url("assets/brand/motel-night-alternate.webp");--home-photo-aspect:1122 / 1402;--home-photo-height:1.24955;--home-photo-mask:none}

/* ---------- Home: the poster ---------- */
html[data-zone="public"][data-skin="orange"] .hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-height: min(calc(100vw * var(--home-photo-height)), 900px);
  padding: 0 16px 34px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 78%, var(--mim-black) 100%),
    var(--home-photo) center top / 100% auto no-repeat,
    var(--mim-black);
}
html[data-zone="public"][data-skin="orange"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
html[data-zone="public"][data-skin="orange"] .hero > * { position: relative; z-index: 1; }
html[data-zone="public"][data-skin="orange"] .hero-brand {
  order: 1;
  width: 95.5%;
  max-width: 620px;
  margin: .6vw 0 0 calc(1.8% - 16px);
  aspect-ratio: auto;
  background: none;
}
html[data-zone="public"][data-skin="orange"] .hero-brand img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
}
html[data-zone="public"][data-skin="orange"] .hero-location {
  order: 2;
  margin: auto 0 10px;
  font: 600 13px/1.2 var(--mim-label);
  letter-spacing: .22em;
  color: var(--mim-steel);
}
html[data-zone="public"][data-skin="orange"] .hero .hero-caption {
  order: 3;
  margin: auto 0 0;
  font: italic 900 clamp(30px, 8vw, 46px)/.95 var(--mim-display);
  text-transform: uppercase;
  color: var(--mim-paper);
}
html[data-zone="public"][data-skin="orange"] .hero-actions { order: 4; margin-top: 20px; }

/* Shared composition at every screen size: sign left, photo right. */
  html[data-zone="public"][data-skin="orange"] .hero {
    min-height: min(78vh, 680px);
    padding: 48px clamp(24px, 6vw, 80px) 56px;
    justify-content: center;
    background: var(--mim-black);
  }
  /* Fade the photo itself around the lit alcove, not across the whole page. */
  html[data-zone="public"][data-skin="orange"] .hero::before {
    content: "";
    position: absolute;
    right: 6%;
    bottom: 0;
    height: 112%;
    aspect-ratio: var(--home-photo-aspect);
    background: var(--home-photo) center / cover no-repeat;
    -webkit-mask-image: var(--home-photo-mask);
    mask-image: var(--home-photo-mask);
    pointer-events: none;
  }
  /* computers: the logo as three straight stacked lines beside the photo */
  html[data-zone="public"][data-skin="orange"] .hero-brand {
    width: min(48vw, 660px);
    max-width: 660px;
    margin: 0;
    aspect-ratio: auto;
    background-image: none;
  }
  html[data-zone="public"][data-skin="orange"] .hero-location { margin: 18px 0 8px; }
  html[data-zone="public"][data-skin="orange"] .hero .hero-caption { margin-top: 14px; }

@media (max-width: 759px) {
  html[data-zone="public"][data-skin="orange"] .hero::before { bottom: -8%; }
  html[data-zone="public"][data-skin="orange"] .hero {
    min-height: clamp(240px, 52vw, 390px);
    padding: clamp(12px, 3vw, 24px) clamp(12px, 6vw, 24px) 0;
  }
  html[data-zone="public"][data-skin="orange"] .hero-brand {
    width: 48vw;
    max-width: 660px;
    margin: 0;
  }
}

/* ---------- Buttons ---------- */
html[data-zone="public"][data-skin="orange"] .button,
html[data-zone="public"][data-skin="orange"] .event-info a.ticket-button {
  display: inline-block;
  background: var(--mim-orange);
  border: 2px solid var(--mim-orange);
  border-radius: 0;
  color: var(--mim-black);
  font: italic 900 20px/1 var(--mim-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 20px 12px;
  filter: none;
}
html[data-zone="public"][data-skin="orange"] .button:hover,
html[data-zone="public"][data-skin="orange"] .event-info a.ticket-button:hover {
  background: var(--mim-orange-hot);
  border-color: var(--mim-orange-hot);
  filter: none;
}
html[data-zone="public"][data-skin="orange"] .button.secondary {
  background: transparent;
  border-color: var(--mim-paper);
  color: var(--mim-paper);
}
html[data-zone="public"][data-skin="orange"] .button.secondary:hover { background: rgba(236, 235, 228, .1); }

/* ---------- Ticker ---------- */
html[data-zone="public"][data-skin="orange"] .ticker {
  background: var(--mim-orange);
  color: var(--mim-black);
  border: 0;
  padding: 12px 14px 11px;
  font: italic 900 clamp(13px, 3.7vw, 26px)/1.15 var(--mim-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Sections and headings ---------- */
html[data-zone="public"][data-skin="orange"] .section-eyebrow {
  font: 700 13px/1.2 var(--mim-label);
  letter-spacing: .24em;
  color: var(--mim-orange);
}
html[data-zone="public"][data-skin="orange"] .section h1,
html[data-zone="public"][data-skin="orange"] .section h2 {
  font: italic 900 clamp(42px, 9vw, 76px)/.92 var(--mim-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--mim-paper);
  margin: 10px 0 12px;
}
html[data-zone="public"][data-skin="orange"] .section p { color: var(--mim-steel); }

/* ---------- Show listings: motel room tags ---------- */
html[data-zone="public"][data-skin="orange"] .section:not(.work-content) > .event-card,
html[data-zone="public"][data-skin="orange"] .event-card {
  background: var(--mim-panel);
  border: 1px solid var(--mim-line);
  border-left: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
  align-items: stretch;
}
html[data-zone="public"][data-skin="orange"] .event-date {
  min-width: 86px;
  padding: 14px 10px;
  border: 0;
  background: var(--mim-orange);
  color: var(--mim-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html[data-zone="public"][data-skin="orange"] .event-date small {
  font: 700 13px/1.1 var(--mim-label);
  letter-spacing: .14em;
  color: var(--mim-black);
}
html[data-zone="public"][data-skin="orange"] .event-date b { font: italic 900 46px/.95 var(--mim-display); }
html[data-zone="public"][data-skin="orange"] .event-info { padding: 16px 18px; }
html[data-zone="public"][data-skin="orange"] .event-info h3 {
  font: italic 900 26px/1 var(--mim-display);
  text-transform: uppercase;
  color: var(--mim-paper);
}
html[data-zone="public"][data-skin="orange"] .event-info p { color: var(--mim-steel); font-size: 14px; }
html[data-zone="public"][data-skin="orange"] .event-info a { color: var(--mim-orange); }
html[data-zone="public"][data-skin="orange"] .event-info a.ticket-button { font-size: 18px; padding: 11px 16px 10px; margin-top: 10px; }
html[data-zone="public"][data-skin="orange"] .event-status {
  font: 700 11px/1 var(--mim-label);
  color: var(--mim-steel);
  border-color: #4a4a4a;
}
html[data-zone="public"][data-skin="orange"] .past-shows { border-top-color: var(--mim-line); }
html[data-zone="public"][data-skin="orange"] .past-shows .past-event {
  background: var(--mim-night) !important;
  border-left-color: transparent !important;
}
html[data-zone="public"][data-skin="orange"] .past-shows .past-event .event-date { background: #3a3a3a; }
html[data-zone="public"][data-skin="orange"] .past-shows .past-event .event-date small,
html[data-zone="public"][data-skin="orange"] .past-shows .past-event .event-date b { color: var(--mim-paper); }
html[data-zone="public"][data-skin="orange"] .show-setlist { border-top-color: var(--mim-line); }
html[data-zone="public"][data-skin="orange"] .show-setlist summary { color: var(--mim-orange); }
html[data-zone="public"][data-skin="orange"] .show-setlist ol { color: var(--mim-paper); }
html[data-zone="public"][data-skin="orange"] .show-setlist li::marker { color: var(--mim-orange); }
html[data-zone="public"][data-skin="orange"] .empty { border-color: #4a4a4a; color: var(--mim-steel); }

/* ---------- Home: the band, on motel paper ---------- */
html[data-zone="public"][data-skin="orange"] .paper {
  position: relative;
  background: var(--mim-paper);
  color: var(--mim-ink);
  border: 0;
}
html[data-zone="public"][data-skin="orange"] .paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--mim-grain);
  opacity: .12;
  mix-blend-mode: multiply;
}
html[data-zone="public"][data-skin="orange"] .paper-inner { position: relative; border-left: 4px solid var(--mim-orange); }
html[data-zone="public"][data-skin="orange"] .paper .section-eyebrow { color: var(--mim-orange-ink); }
html[data-zone="public"][data-skin="orange"] .paper h2 {
  font: italic 900 clamp(38px, 8vw, 70px)/.92 var(--mim-display);
  text-transform: uppercase;
  color: var(--mim-ink);
}
html[data-zone="public"][data-skin="orange"] .paper p { color: #3d3d39; }
html[data-zone="public"][data-skin="orange"] .paper .button {
  background: var(--mim-ink);
  border-color: var(--mim-ink);
  color: var(--mim-paper);
}
html[data-zone="public"][data-skin="orange"] .paper .button:hover { background: var(--mim-orange-ink); border-color: var(--mim-orange-ink); }

/* ---------- About ---------- */
html[data-zone="public"][data-skin="orange"] .about-bio { color: var(--mim-paper); }
html[data-zone="public"][data-skin="orange"] .about-hero-photo {
  border: 10px solid var(--mim-paper);
  box-shadow: 8px 8px 0 var(--mim-orange);
  object-position: 50% 30%;
}
html[data-zone="public"][data-skin="orange"] .member-card { border-top-color: var(--mim-line); }
html[data-zone="public"][data-skin="orange"] .member-card img { border-color: var(--mim-paper); }
html[data-zone="public"][data-skin="orange"] .member-card h3 {
  font: italic 900 28px/1 var(--mim-display);
  text-transform: uppercase;
}
html[data-zone="public"][data-skin="orange"] .member-card strong { color: var(--mim-orange); }
html[data-zone="public"][data-skin="orange"] .member-card p { color: var(--mim-steel); }
html[data-zone="public"][data-skin="orange"] .about-contact { border-top-color: var(--mim-line); }
html[data-zone="public"][data-skin="orange"] .about-contact a:not(.button) { color: var(--mim-orange-hot); }

/* ---------- Link to the band page above the footer ---------- */
html[data-zone="public"][data-skin="orange"] .band-strip {
  background: var(--mim-black);
  border-top: 1px solid var(--mim-line);
  padding: 18px 16px;
}
html[data-zone="public"][data-skin="orange"] .footer-band-link {
  border: 2px solid var(--mim-paper);
  color: var(--mim-paper);
  font: italic 900 20px/1 var(--mim-display);
  letter-spacing: .04em;
  padding: 11px 18px 10px;
}
html[data-zone="public"][data-skin="orange"] .footer-band-link:hover { color: var(--mim-orange-hot); border-color: var(--mim-orange-hot); }

/* ---------- Footer ---------- */
html[data-zone="public"][data-skin="orange"] .footer { background: var(--mim-black); border-top: 1px solid var(--mim-line); }
html[data-zone="public"][data-skin="orange"] .footer-brand {
  font: italic 900 38px/1 var(--mim-display);
  text-transform: uppercase;
  color: var(--mim-orange);
}
html[data-zone="public"][data-skin="orange"] .footer-brand span { color: var(--mim-orange); }
html[data-zone="public"][data-skin="orange"] .footer p { font-family: var(--mim-label); color: var(--mim-steel); }
html[data-zone="public"][data-skin="orange"] .footer small { color: #8a8f91; }

/* ---------- Notices ---------- */
html[data-zone="public"][data-skin="orange"] .toast {
  background: var(--mim-paper);
  color: var(--mim-ink);
  border: 0;
  box-shadow: 6px 6px 0 var(--mim-orange);
}
html[data-zone="public"][data-skin="orange"] .toast.is-error { background: #ffd2c4; }

@media (max-width: 680px) {
  html[data-zone="public"][data-skin="orange"] .small-brand { width: 175px; }
  html[data-zone="public"][data-skin="orange"] .event-date { min-width: 68px; }
  html[data-zone="public"][data-skin="orange"] .event-date b { font-size: 38px; }
  html[data-zone="public"][data-skin="orange"] .event-info { padding: 12px 14px; }
  html[data-zone="public"][data-skin="orange"] .event-info h3 { font-size: 22px; }
}