/* =======================================================================
   uke-o-ono.com — "Faithful flyer"
   A web translation of the printed Fringe poster: vermillion red field,
   cream + ink stencil typography, condensed display caps, grain, and the
   gig list carried on a cream ticket. Display: Anton. Body: Archivo.
   ======================================================================= */

:root {
  --red: #e02d23;
  --red-deep: #b21e18;
  --cream: #f4ecd0;
  --cream-dim: #e6dcba;
  --ink: #16110d;
  --ink-soft: #2e2820;
  --measure: 60rem;
  --measure-home: 72rem;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  /* body sets overflow-x: hidden, which stops the body background from
     propagating to the canvas — without this the scrollbar gutter shows the
     default grey. Paint the root red so the gutter matches the field. */
  background: var(--red);
}
body {
  margin: 0;
  background: var(--red);
  color: var(--cream);
  font-family: "Archivo", system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Faint vignette so the flat red reads like printed stock (sits behind content). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 240, 200, 0.16), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(80, 10, 8, 0.4), transparent 55%);
}
/* Scratched-stock grunge laid OVER everything (content included) and multiplied
   in, so the whole poster — red field, cream ink, ticket — picks up the same
   rust and scuffs. Tuned subtle; the headline erosion below does the heavy work. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background: url("/grunge.png") repeat;
  background-size: 360px;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.5rem 1.4rem 3rem;
}
/* The flyer home runs wider to make room for the photo column. */
.wrap:has(.flyer) {
  max-width: var(--measure-home);
}

a {
  color: var(--cream);
}

/* ------------------------------ Header / footer ---------------------- */
header.site {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.5rem;
}
.brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.brand-name {
  font-family: "Anton", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
}
.brand::before {
  content: "★";
  color: var(--cream);
  margin-right: 0.5rem;
  font-size: 0.9rem;
}
footer.site {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 2px solid rgba(244, 236, 208, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: space-between;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--cream-dim);
}
.footer-links a {
  color: var(--cream-dim);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ------------------------------ Vertical rail ------------------------ */
/* The flyer's giant rotated "Ballads & Bangers". Decorative; shown only
   where there's room to run it up the side. */
.rail {
  display: none;
}
@media (min-width: 1280px) {
  .rail {
    display: block;
    position: fixed;
    left: max(0.5rem, calc((100vw - var(--measure-home)) / 2 - 3.2rem));
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    width: 4rem;
  }
  .rail span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: "Anton", sans-serif;
    text-transform: uppercase;
    font-size: 3.4rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 2px rgba(22, 17, 13, 0.55);
    opacity: 0.85;
  }
}

/* ------------------------------ Flyer grid + photos ------------------ */
/* Mobile: single column, photos drop in as a band right under the hero
   (DOM order: hero, photos, dates, follow). Desktop: a two-column poster
   with the B&W collage running full-height down the right, like the flyer. */
.flyer-grid {
  display: grid;
}
.photos {
  position: relative;
  margin: 0.5rem 0 1.5rem;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0.4rem 0.4rem 0 rgba(22, 17, 13, 0.4);
}
.photos img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  /* Bias to the top row of the collage (the singing/playing faces) — the
     mid-rows crop awkwardly into torsos and hands at band height. */
  object-position: center 6%;
  filter: grayscale(1) contrast(1.04);
}
/* A whisper of red so the photos sit inside the poster rather than on top. */
.photos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  mix-blend-mode: multiply;
  opacity: 0.16;
}
@media (min-width: 920px) {
  .flyer-grid {
    grid-template-columns: minmax(0, 1fr) clamp(232px, 26vw, 300px);
    grid-template-areas:
      "hero   photos"
      "dates  photos"
      "follow photos";
    column-gap: 2.2rem;
    align-items: start;
  }
  .hero {
    grid-area: hero;
  }
  .photos {
    grid-area: photos;
    align-self: stretch;
    margin: 1rem 0 0;
  }
  .photos img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: center;
  }
}

/* ------------------------------ Hero --------------------------------- */
.hero {
  position: relative;
  padding: 1rem 0 2.5rem;
  animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* Official PBH's Free Fringe 2026 logo. Its red blob is the same red as the
   field, so it sits on a small cream sticker card to lift it off. */
.pbh {
  float: right;
  width: 6.2rem;
  height: 6.2rem;
  margin: 0 0 0.6rem 1.1rem;
  background: var(--cream);
  border-radius: 14px;
  padding: 7px;
  object-fit: contain;
  transform: rotate(-5deg);
  box-shadow: 0.25rem 0.25rem 0 rgba(22, 17, 13, 0.45);
}
.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--cream);
  padding: 0.3rem 0.7rem;
  margin: 0 0 1rem;
  transform: rotate(-1.2deg);
}
.hero-title {
  font-family: "Anton", sans-serif;
  font-size: clamp(3.6rem, 13vw, 9rem);
  line-height: 0.9;
  /* The erosion mask clips to the border-box, so the caps must sit inside it;
     padding keeps the glyph tops/bottoms from being masked away. */
  padding: 0.1em 0 0.04em;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--cream);
  text-shadow: 0.05em 0.05em 0 var(--ink);
}
/* Distress the big display type: a scattered scuff mask eats sparse flecks out
   of the letters so the field shows through, the way the printed flyer's caps
   are eroded. Kept to the largest type so body copy stays crisp. The mask only
   subtracts — with it unsupported the type just renders solid. */
.hero-title,
.section-head,
.venue-name {
  -webkit-mask-image: url("/erode.png");
  mask-image: url("/erode.png");
  -webkit-mask-size: 300px;
  mask-size: 300px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.hero-show {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0.6rem 0 0;
  color: var(--ink);
}
.hero-blurb {
  max-width: 38rem;
  margin: 1.1rem 0 0;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--cream);
}
.hero-when {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--cream);
  margin: 1.4rem 0 0;
}

/* The flyer's black brush swoop, cropped from the poster. Fills the open red
   under the hero, over toward the photo column. Decorative; desktop only —
   in the stacked mobile layout there's no empty space for it to fill. */
.swoop {
  display: none;
}
@media (min-width: 920px) {
  .swoop {
    display: block;
    position: absolute;
    right: 5.5rem;
    bottom: -3.5rem;
    width: 22rem;
    height: 8rem;
    opacity: 0.38;
    background: url("/swoop.png") no-repeat right center / contain;
  }
}

/* ------------------------------ Section heads ------------------------ */
.section-head {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--cream);
  margin: 2.5rem 0 1.1rem;
}
.section-head::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 0.4rem;
  background: repeating-linear-gradient(90deg, var(--cream) 0 14px, transparent 14px 22px);
  opacity: 0.8;
}

/* ------------------------------ Dates (the ticket) ------------------- */
.ticket {
  background: var(--cream);
  color: var(--ink);
  border-radius: 4px;
  padding: 1.6rem 1.6rem 0.8rem;
  box-shadow: 0.5rem 0.5rem 0 rgba(22, 17, 13, 0.45);
  /* Perforated top/bottom edge, like a torn ticket stub. */
  -webkit-mask:
    radial-gradient(0.5rem at 0.5rem 50%, transparent 98%, #000) 0 0,
    linear-gradient(#000, #000);
}
.ticket .venue {
  margin: 0;
  padding: 1.1rem 0;
  border-top: 2px dashed rgba(22, 17, 13, 0.28);
}
.ticket .venue:first-child {
  border-top: 0;
  padding-top: 0.3rem;
}
.venue-name {
  font-family: "Anton", sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.1rem;
  color: var(--ink);
}
.venue-name a {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.venue-address {
  margin: 0 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.session-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.session {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(22, 17, 13, 0.12);
}
.session:first-child {
  border-top: 0;
}
.session-day {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.92rem;
}
.session-dates {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.session-time {
  justify-self: end;
  font-family: "Anton", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--red-deep);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ Follow ------------------------------- */
.follow p {
  max-width: 36rem;
}
.follow-row {
  margin: 1.3rem 0;
}
.qr img {
  background: var(--cream);
  padding: 0.5rem;
  border-radius: 4px;
}
.contact-line {
  color: var(--cream-dim);
  font-size: 0.92rem;
}
.email-link {
  color: var(--cream);
}

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-block;
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  padding: 0.7rem 1.5rem;
  border-radius: 2px;
  text-decoration: none;
  border: 2px solid var(--cream);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.btn--primary {
  background: var(--cream);
  color: var(--red-deep);
  box-shadow: 0.25rem 0.25rem 0 var(--ink);
}
.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0.45rem 0.45rem 0 var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--cream);
}
.btn.is-disabled {
  border-style: dashed;
  border-color: rgba(244, 236, 208, 0.5);
  color: var(--cream-dim);
  cursor: default;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
}

/* ------------------------------ Secondary pages (privacy / 404) ------ */
/* Carried on a cream panel so long-form copy stays readable off the red. */
.prose,
.page-head {
  position: relative;
  z-index: 1;
  background: var(--cream);
  color: var(--ink);
  border-radius: 4px;
  padding: 2rem 1.8rem;
  margin-top: 1rem;
  box-shadow: 0.4rem 0.4rem 0 rgba(22, 17, 13, 0.4);
}
.page-head {
  text-align: center;
}
.page-head .hero-eyebrow {
  background: var(--red);
  color: var(--cream);
}
.page-head .hero-title {
  color: var(--ink);
  text-shadow: none;
  font-size: clamp(2.6rem, 12vw, 5rem);
}
.page-head .hero-blurb {
  color: var(--ink-soft);
  margin-inline: auto;
}
.prose {
  line-height: 1.7;
}
.prose a {
  color: var(--red-deep);
}
.prose h1 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0;
}
.prose h2 {
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-top: 2rem;
  color: var(--ink);
}
.prose code {
  background: var(--cream-dim);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
}
.prose .btn--ghost {
  border-color: var(--ink);
  color: var(--ink);
}

/* ------------------------------ Consent banner ----------------------- */
.consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 34rem;
  margin: 0 auto;
  z-index: 50;
  background: var(--ink);
  color: var(--cream);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  border: 2px solid var(--cream);
  box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}
.consent[hidden] {
  display: none;
}
.consent-msg {
  margin: 0;
  flex: 1 1 16rem;
}
.consent a {
  color: var(--cream);
}
.consent-cta {
  font-weight: 700;
}
.consent-actions {
  display: flex;
  gap: 0.5rem;
}
.consent-btn {
  font-family: "Anton", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 2px;
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.consent-btn--primary {
  background: var(--cream);
  color: var(--ink);
}