/*
 * Poe's November calendar — 1280px fixed stage, letterboxed.
 * All measurements are written in poster pixels (the source is 1325px wide)
 * and converted with --u, so the rebuilt block lines up with the cropped art.
 */
:root {
  --u: calc(1280px / 1325);      /* one source-poster pixel */
  --ink: #ecebe7;                /* listing type: near-neutral off-white */
  --rule: #d6d5d1;               /* dividers & footer rules */
  --ground: #000;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ground); }
html {
  scrollbar-gutter: stable;
  overflow-y: scroll; /* keep nav from shifting when a page needs a scrollbar */
}
body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  width: 1280px;
  min-width: 1280px;
  margin: 0 auto;              /* leftover browser width = black letterbox */
  background: var(--ground);
  overflow: hidden;
}
.art {
  display: block;
  width: 1280px;
  height: calc(1062 * var(--u));
}

.art--wordmark {
  height: auto;
}

/* ---------- listings block (poster rows 1062–2048) ---------- */
.listings {
  position: relative;
  height: calc(986 * var(--u));
}
.center-rule {
  position: absolute;
  left: calc(675 * var(--u));
  top: calc(36 * var(--u));          /* poster y 1098 */
  width: calc(3 * var(--u));
  height: calc(821 * var(--u));      /* to poster y 1919 */
  background: var(--rule);
}
.col {
  position: absolute;
  top: calc(38 * var(--u));
}
.col--left  { left: calc(132 * var(--u)); width: calc(520 * var(--u)); }  /* right edge = poster x 652 */
.col--right { left: calc(697 * var(--u)); width: calc(560 * var(--u)); --gap: 22; } /* right edge = poster x 1257 */

.event {
  margin-bottom: calc(var(--gap, 18) * var(--u));
  display: flex;
  align-items: flex-start;
}

/* stacked date: month + number / weekday, centered over a fixed axis */
.date {
  flex: none;
  min-width: calc(125 * var(--u));
  padding-right: calc(8 * var(--u));
  height: calc(64 * var(--u));
  border-right: calc(2.6 * var(--u)) solid var(--rule);
  text-align: center;
  font-family: "Noticia Text", Georgia, serif;
  white-space: nowrap;
}
.date-md {
  font-family: "Roboto Serif", Georgia, serif;
  font-weight: 650;
  font-variation-settings: "opsz" 28, "wdth" 82;
  font-size: calc(33 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  top: calc(-2 * var(--u));
}
.date-dow {
  font-family: "Roboto Serif", Georgia, serif;
  font-weight: 450;
  font-variation-settings: "opsz" 20, "wdth" 96;
  font-size: calc(25.5 * var(--u));
  line-height: 1;
  margin-top: calc(6 * var(--u));
  letter-spacing: 0.05em;
}

.date-md, .date-dow { position: relative; left: calc(-4 * var(--u)); }

.body {
  padding-left: calc(19 * var(--u));
  font-family: "Roboto Serif", Georgia, serif;
  font-optical-sizing: none;
}
.title {
  margin: 0;
  font-weight: 640;
  white-space: nowrap;
  font-variation-settings: "opsz" 28, "wdth" var(--w, 74);
  font-size: calc(31 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: 0;
  word-spacing: 0.06em;
}
.title-line { display: block; width: max-content; font-variation-settings: "opsz" 28, "wdth" var(--w, 74); }
.title--italic { font-style: italic; font-weight: 650; letter-spacing: 0.03em; --w: 88; }
.title-note {
  font-weight: 400;
  font-variation-settings: "opsz" 20, "wdth" 90;
  font-size: calc(22 * var(--u));
  letter-spacing: 0.02em;
}
.line {
  margin: 0;
  width: max-content;
  font-weight: 520;
  font-variation-settings: "opsz" 20, "wdth" var(--w, 100);
  white-space: nowrap;
}
.line--sub {
  font-size: calc(24 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: 0.025em;
  --w: 90;
}
.line--film {
  font-style: italic;
  font-weight: 500;
  --w: 86;
  font-size: calc(29 * var(--u));
  line-height: calc(30 * var(--u));
  letter-spacing: 0.03em;
}
.line--lineup {
  font-size: calc(22.5 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: 0.002em;
  --w: 86;
}
.line--tight {
  font-size: calc(21 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: 0;
  --w: 62;
}
.line--info {
  font-size: calc(25 * var(--u));
  line-height: calc(28 * var(--u));
  letter-spacing: 0.035em;
  --w: 94;
}

/* larger treatment for a featured listing (e.g. MADE IN TUCSON ART MARKET) */
.event--big .title { font-size: calc(33.5 * var(--u)); line-height: calc(32 * var(--u)); --w: 84; }
.event--big .line--info { font-size: calc(26.5 * var(--u)); line-height: calc(32 * var(--u)); }

/* ---------- footer: BEER & WINE BAR with rules ---------- */
.footer {
  position: absolute;
  left: 0; right: 0;
  top: calc(896 * var(--u));         /* poster y ~1958 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer::before,
.footer::after {
  content: "";
  display: block;
  width: calc(163 * var(--u));
  height: calc(3 * var(--u));
  background: var(--rule);
  position: relative;
  top: calc(4 * var(--u));
}
.footer-text {
  margin: 0 calc(30 * var(--u));
  font-family: "Noticia Text", Georgia, serif;
  font-weight: 700;
  font-size: calc(70 * var(--u));
  line-height: 1;
  letter-spacing: 0.08em;
  margin-right: calc(22 * var(--u) - 0.08em); /* trailing tracking */
  white-space: nowrap;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---------- site header / nav ---------- */
.site-header {
  background: var(--ground);
  border-bottom: 1px solid rgba(214, 213, 209, 0.28);
}
.nav {
  width: 1280px;
  min-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 2.4rem;
  padding: 0.95rem 1.5rem;
  font-family: "Noticia Text", Georgia, serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.65;
  padding-bottom: 0.15rem;
}
.nav a:hover,
.nav a:focus-visible {
  opacity: 1;
}
.nav a[aria-current="page"] {
  opacity: 1;
  box-shadow: 0 1px 0 var(--ink);
}

/* ---------- inner pages (Visit, later Contact) ---------- */
.page-content {
  padding: 3.5rem 3rem 6rem;
}
.page-title {
  margin: 0 0 1.25rem;
  font-family: "Roboto Serif", Georgia, serif;
  font-weight: 650;
  font-variation-settings: "opsz" 28, "wdth" 80;
  font-size: 2rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.page-lead {
  margin: 0 0 1.25rem;
  font-family: "Noticia Text", Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}
.page-body {
  margin: 0 0 1.25rem;
  font-family: "Noticia Text", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.55;
}
.maps-link {
  color: var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ---------- mid-size (tablet): two columns, scaled to fill the viewport ---------- */
@media (max-width: 1279px) and (min-width: 768px) {
  :root {
    --u: calc(100vw / 1325);
  }

  html, body {
    overflow-x: hidden;
  }

  .stage {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .art {
    width: 100%;
    height: auto;
  }

  .nav {
    width: 100%;
    min-width: 0;
  }

}

/* ---------- phone: single full-width scrolling column ---------- */
@media (max-width: 767px) {
  :root {
    --u: clamp(0.65px, 100vw / 640, 0.85px);
  }

  html, body {
    overflow-x: hidden;
  }

  .stage {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .art {
    width: 100%;
    height: auto;
  }

  .listings {
    height: auto;
    padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
  }

  .center-rule {
    display: none;
  }

  .col,
  .col--left,
  .col--right {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
  }

  .body {
    min-width: 0;
    flex: 1;
  }

  .footer {
    position: static;
    margin-top: calc(28 * var(--u));
  }

  .title,
  .title-line,
  .line,
  .footer-text {
    white-space: normal;
    width: auto;
    max-width: 100%;
  }

  .nav {
    width: 100%;
    min-width: 0;
    gap: 0.4rem 1.4rem;
    padding: 0.85rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  .page-content {
    padding: 2.5rem 1.25rem 4rem;
  }

  .page-title {
    font-size: 1.65rem;
  }
}