/* Clube Pulso, demo da Upsite Labs.
   Poster club: black ink, bone paper, cyan and magenta spot inks, off-register.
   One stylesheet for the whole site. */

@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Ink and paper. The page is mostly ink; bone is the paper the posters are
     printed on, so the two never compete for the same surface. */
  --black: #0A0A0A;
  --black-2: #131313;
  --black-3: #1D1D1D;
  --bone: #EDEBE4;
  --bone-2: #DDD9CE;
  --bone-3: #C6C1B3;
  --ink: #0A0A0A;
  /* Secondary text tiers, each one measured against its own ground. On ink the
     muted tier clears 6.4:1; on bone it clears 5.9:1. Concrete is a rule and
     border colour only, never body text. */
  --mute: #9C9A93;
  --mute-2: #8A887F;
  --ink-2: #54524C;
  --concrete: #6E6E6E;
  --cyan: #12C3D6;
  --cyan-deep: #0A7E8C;
  --magenta: #E23A8A;
  --magenta-deep: #A81F5F;

  --line-d: rgba(237, 235, 228, 0.20);
  --line-d-2: rgba(237, 235, 228, 0.42);
  --line-l: rgba(10, 10, 10, 0.18);
  --line-l-2: rgba(10, 10, 10, 0.55);

  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3.25rem, 13.5vw, 12.5rem);
  --fs-title: clamp(2.25rem, 6.4vw, 5.5rem);
  --fs-sub: clamp(1.5rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.75rem);
  --fs-body: clamp(0.975rem, 0.92rem + 0.28vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-micro: 0.6875rem;

  --wrap: 1400px;
  --gutter: clamp(1.125rem, 4.2vw, 4.5rem);
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3.5rem;
  --sp-8: 5rem;
  --sp-9: 7rem;
  --sec-y: clamp(3.5rem, 8vw, 7.5rem);
  --head-h: 96px;

  --dur-1: 160ms;
  --dur-2: 300ms;
  --dur-3: 620ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --rule: var(--line-d);
  --rule-2: var(--line-d-2);
  --focus-ring: var(--cyan);
  --focus-halo: rgba(10, 10, 10, 0.92);
  /* Context tokens. Components read these, never the raw palette, so a section
     can flip from ink to paper without touching a single component. */
  --bg: var(--black);
  --fg: var(--bone);
  --surface: var(--black-2);
  --surface-2: var(--black-3);
  --accent: var(--cyan);
  --accent-2: var(--magenta);

  /* The heartbeat, as a mask so one glyph can be printed in either spot ink. */
  --glyph-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath d='M0 8h5l3-6 3 12 3-8 2 2h7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--head-h);
  /* Proximity, never mandatory: the page still scrolls freely and the keyboard
     is never pulled back to a snap point. */
  scroll-snap-type: y proximity;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, dl, dd, dt, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 0;
  left: var(--gutter);
  z-index: 90;
  transform: translateY(-140%);
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A three pixel dot screen, like the raster of a printed flyer. Fixed so it
   sits on everything, inert to the pointer. */
.screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(237, 235, 228, 0.055) 0.5px, transparent 0.6px),
    radial-gradient(rgba(18, 195, 214, 0.05) 0.5px, transparent 0.6px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: screen;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule--thick { border-top-width: 3px; border-color: var(--rule-2); }

/* Display type ------------------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: 0.005em;
}

/* Off register overprint: the same words stamped twice, one spot ink up left,
   the other down right, with the paper impression on top. Painted with text
   shadows, so the extra impressions never widen the element. */
.overprint {
  color: var(--fg);
  text-shadow:
    -0.024em 0.018em 0 var(--accent),
    0.024em -0.018em 0 var(--accent-2);
}

/* Header ------------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--line-d);
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark { width: 30px; height: 30px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.head-nav { margin-left: auto; }
.head-nav ul {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
  align-items: center;
}
.head-nav a {
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--bone);
  padding: 0.55rem 0.15rem;
  border-bottom: 2px solid transparent;
}
.head-nav a:hover { border-bottom-color: var(--cyan); }
.head-cta { flex: 0 0 auto; }

/* Ticker: a second deck of the bar, running the format names. It repeats
   content that the formats section prints in full, so it is decoration and is
   hidden from assistive technology. */
.ticker {
  border-top: 1px solid var(--line-d);
  background: var(--surface);
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  flex: 0 0 auto;
  will-change: transform;
  animation: ticker 42s linear infinite;
}
.ticker__run {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ticker__item {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-3);
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 0.75rem;
  margin-inline: 1.1rem;
  background-color: var(--cyan);
  -webkit-mask: var(--glyph-pulse) no-repeat center / contain;
  mask: var(--glyph-pulse) no-repeat center / contain;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  border: 2px solid var(--bone);
  color: var(--bone);
  background: transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--bone); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}
.btn--primary:hover { background: var(--bone); border-color: var(--bone); }
.btn--ghost { border-color: var(--line-d-2); }
.btn--ghost:hover { border-color: var(--bone); background: transparent; color: var(--bone); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.is-bone .btn { border-color: var(--ink); color: var(--ink); }
.is-bone .btn:hover { background: var(--ink); color: var(--bone); }
.is-bone .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.is-bone .btn--primary:hover { background: var(--magenta-deep); border-color: var(--magenta-deep); color: var(--bone); }
.is-bone .btn--ghost { border-color: var(--line-l-2); }

/* Section frame ------------------------------------------------------------ */

.sec {
  position: relative;
  padding-block: var(--sec-y);
  scroll-snap-align: start;
  scroll-margin-top: var(--head-h);
}
.is-bone {
  background: var(--bone);
  color: var(--ink);
  --bg: var(--bone);
  --fg: var(--ink);
  --surface: var(--bone-2);
  --surface-2: var(--bone-3);
  --accent: var(--cyan-deep);
  --accent-2: var(--magenta-deep);
  --rule: var(--line-l);
  --rule-2: var(--line-l-2);
  --mute: var(--ink-2);
  --mute-2: var(--ink-2);
  --focus-ring: var(--magenta-deep);
  --focus-halo: rgba(237, 235, 228, 0.95);
  --line-d: var(--line-l);
  --line-d-2: var(--line-l-2);
}

.sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: var(--sp-6);
}
.sec__index {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--cyan);
}
.is-bone .sec__index { color: var(--magenta-deep); }
.sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-title);
  line-height: 0.86;
}
.sec__spec {
  max-width: 52ch;
  color: var(--mute);
  font-size: var(--fs-body);
}
.sec__demo {
  font-size: var(--fs-small);
  color: var(--mute);
  border-left: 2px solid var(--magenta);
  padding-left: 0.7rem;
  max-width: 52ch;
}
.is-bone .sec__demo { border-left-color: var(--magenta-deep); }

@media (min-width: 900px) {
  .sec__head {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 34ch);
    align-items: end;
    column-gap: var(--sp-6);
  }
  /* Scoped to the head: these names are reused on their own elsewhere. */
  .sec__head .sec__index { grid-row: 1; }
  .sec__head .sec__title { grid-column: 2; }
  .sec__head .sec__spec { grid-column: 3; grid-row: 1; }
  .sec__head .sec__demo { grid-column: 3; }
}

/* Hero --------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-5);
  overflow: clip;
  isolation: isolate;
  scroll-snap-align: start;
}
.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 900px);
  z-index: -2;
}
.hero__media picture,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media img { filter: grayscale(1) contrast(1.14) brightness(0.92); }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--cyan) 0%, var(--magenta) 100%);
  mix-blend-mode: color;
  opacity: 0.42;
}
.hero__mask {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(92deg, var(--bg) 22%, rgba(10, 10, 10, 0.62) 48%, rgba(10, 10, 10, 0.18) 72%, rgba(10, 10, 10, 0.52) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(10, 10, 10, 0) 34%);
}
.hero__inner {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--sp-5);
  padding-block: var(--sp-7);
}
.hero__kicker {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__pulse { flex: 0 0 auto; width: 68px; color: var(--cyan); }
.hero__title {
  font-size: var(--fs-hero);
  max-width: 12ch;
}
.hero__lead {
  max-width: 40ch;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--bone);
  line-height: 1.45;
}
.hero__foot {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-d);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__specs {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  font-size: var(--fs-small);
  color: var(--mute);
  margin: 0;
}
.hero__specs dd {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--bone);
  letter-spacing: 0.02em;
  margin: 0;
}
.hero__specs dt { margin: 0; }
.hero__demo { font-size: var(--fs-micro); color: var(--mute-2); max-width: 70ch; }

/* Hero heartbeat, drawn across the plate. */
.hero__beat {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  z-index: -1;
  width: 100%;
  height: 120px;
  color: var(--cyan);
  opacity: 0.5;
  pointer-events: none;
}
.hero__beat path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw 3.6s var(--ease-out) 0.25s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Diagonal marquee --------------------------------------------------------- */

.marquee {
  position: relative;
  z-index: 2;
  width: 118%;
  margin-left: -9%;
  transform: rotate(-3.2deg);
  background: var(--bone);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
  padding-block: 0.35rem;
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  animation: ticker 30s linear infinite;
}
.marquee__run {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.marquee__item {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  display: block;
  width: 1.9rem;
  height: 0.85rem;
  margin-inline: 1.1rem;
  background-color: var(--magenta-deep);
  -webkit-mask: var(--glyph-pulse) no-repeat center / contain;
  mask: var(--glyph-pulse) no-repeat center / contain;
}

/* Poster wall -------------------------------------------------------------- */

.wall__bar {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.filters__label {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  margin-right: 0.4rem;
}
.chip {
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule-2);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--mute);
}
.chip:hover { color: var(--bone); border-color: var(--bone); }
.is-bone .chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
}
.is-bone .chip[aria-pressed="true"] {
  color: var(--bone);
  background: var(--ink);
  border-color: var(--ink);
}
.chip:disabled { opacity: 0.4; cursor: not-allowed; }

.wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--sp-4);
}
.poster { position: relative; }
.poster__link {
  display: grid;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.poster__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.poster__frame picture,
.poster__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.poster__frame img {
  filter: grayscale(1) contrast(1.14) brightness(0.88);
}
.poster__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--cyan), var(--magenta));
  mix-blend-mode: color;
  opacity: 0.42;
}
.poster__code {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.3rem 0.5rem 0.2rem;
  letter-spacing: 0.04em;
}
.poster__energy {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  background: var(--bg);
  color: var(--bone);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.6rem;
}
.poster__link:hover .poster__tint,
.poster__link:focus-visible .poster__tint { opacity: 0.22; }
.poster__name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-sub);
  line-height: 0.9;
}
.poster__spec {
  display: grid;
  gap: 0.15rem;
  font-size: var(--fs-small);
  color: var(--mute);
}
.poster__spec dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.poster__spec dd { display: flex; align-items: center; gap: 0.5rem; }
.poster__spec dd::before {
  content: "";
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.45rem;
  background-color: var(--cyan);
  -webkit-mask: var(--glyph-pulse) no-repeat center / contain;
  mask: var(--glyph-pulse) no-repeat center / contain;
}
.is-bone .poster__spec dd::before { background-color: var(--magenta-deep); }

@media (min-width: 700px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-4);
  }
  /* Nudged, so six posters read as pasted on a wall rather than as a table. */
  .poster:nth-child(2) { transform: translateY(2.2rem); }
  .poster:nth-child(5) { transform: translateY(2.2rem); }
  .poster:nth-child(3) .poster__frame { transform: rotate(0.6deg); }
  .poster:nth-child(4) .poster__frame { transform: rotate(-0.7deg); }
}
.wall__empty {
  border: 1px dashed var(--rule-2);
  padding: var(--sp-6);
  color: var(--mute);
  font-size: var(--fs-small);
}

/* Schedule ----------------------------------------------------------------- */

.sched__layout {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 1240px) {
  .sched__layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
}

.cal__bar {
  display: grid;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-4);
}
.cal__status {
  font-size: var(--fs-small);
  color: var(--mute);
}
.cal__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.daytab {
  flex: 1 1 auto;
  min-width: 3.6rem;
  min-height: 44px;
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.daytab:hover { color: var(--bone); border-color: var(--bone); }
.is-bone .daytab:hover { color: var(--ink); border-color: var(--ink); }
.daytab[aria-pressed="true"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}
.is-bone .daytab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
@media (min-width: 1080px) {
  .daytab { font-size: 1.15rem; }
}

.week {
  display: grid;
  gap: var(--sp-4);
}
/* The column count follows the days that actually pass the filters, so a
   filtered week fills the row instead of leaving empty tracks. */
.week.view-week { grid-template-columns: repeat(var(--week-cols, 7), minmax(0, 1fr)); }
.week.view-day { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) {
  /* A seven column week is unreadable on a phone, so the same data becomes a
     stacked list of days instead of a squeezed grid. */
  .week.view-week { grid-template-columns: minmax(0, 1fr); }
  .week.view-week .day__slots { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}
.day { min-width: 0; }
.day__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--rule-2);
  margin-bottom: var(--sp-3);
}
.day__slots { display: grid; gap: var(--sp-2); }
.slot {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--concrete);
  background: var(--surface);
  color: var(--bone);
}
.is-bone .slot { background: var(--bone-2); color: var(--ink); }
.slot:hover { border-color: var(--cyan); border-left-color: var(--cyan); }
.slot[aria-current="true"] {
  border-color: var(--magenta);
  border-left-color: var(--magenta);
  background: var(--surface-2);
}
.is-bone .slot[aria-current="true"] { background: var(--bone-3); border-color: var(--magenta-deep); border-left-color: var(--magenta-deep); }
.slot__time {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.is-bone .slot__time { color: var(--magenta-deep); }
.slot__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.slot__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 0.4rem;
  font-size: var(--fs-micro);
  color: var(--mute);
}
.slot__room,
.slot__team { min-width: 0; overflow-wrap: break-word; }
.cal__empty {
  margin-top: var(--sp-4);
  border: 1px dashed var(--rule-2);
  padding: var(--sp-5);
  color: var(--mute);
  font-size: var(--fs-small);
}

/* No-JS schedule. The grid is built by app.js from one data table, so with
   scripting off this printed week list stands in for it. Kept in sync by hand. */
.cal-fallback {
  border: 1px solid var(--rule-2);
  padding: var(--sp-5);
}
.cal-fallback__lead { font-size: var(--fs-small); color: var(--mute); margin-bottom: var(--sp-4); }
.cal-fallback dd { font-size: var(--fs-small); color: var(--mute); margin-top: 0.15rem; }
.cal-fallback dt {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--sp-4);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--rule-2);
}
.cal-fallback dd + dd { margin-top: 0.15rem; }

/* Enrolment panel ---------------------------------------------------------- */

.book {
  border: 1px solid var(--rule-2);
  background: var(--surface);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--head-h) + 12px);
}
.is-bone .book { background: var(--bone-2); }
.book__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-sub);
  line-height: 0.9;
}
.book__demo {
  font-size: var(--fs-micro);
  color: var(--mute);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.book__empty {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--mute);
  border-left: 3px solid var(--rule-2);
  padding-left: 0.75rem;
}
.book__slot {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface-2);
  border-left: 3px solid var(--cyan);
}
.is-bone .book__slot { background: var(--bone-3); border-left-color: var(--magenta-deep); }
.book__slot-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
}
.book__slot-meta { font-size: var(--fs-small); color: var(--mute); margin-top: 0.2rem; }
.book__fields { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }

.field { display: grid; gap: 0.4rem; }
.field label, .field legend {
  font-size: var(--fs-small);
  font-weight: 600;
}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  min-height: 44px;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  color: var(--bone);
  border: 1px solid var(--line-d-2);
  font: inherit;
  width: 100%;
}
.is-bone .field input[type="text"],
.is-bone .field input[type="email"],
.is-bone .field select,
.is-bone .field textarea { background: var(--bone); color: var(--ink); border-color: var(--line-l-2); }
.field select { padding-right: 2rem; }
.field textarea { min-height: 88px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--mute-2); }
.field--set { display: grid; gap: 0.5rem; border: 0; }
.field--set legend { padding: 0; margin-bottom: 0.3rem; }
.opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);
  cursor: pointer;
}
.opt:hover { border-color: var(--cyan); }
.is-bone .opt:hover { border-color: var(--ink); }
.opt input { width: 20px; height: 20px; accent-color: var(--cyan); flex: 0 0 auto; }
.is-bone .opt input { accent-color: var(--magenta-deep); }
.err {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--magenta);
  display: flex;
  gap: 0.4rem;
}
.is-bone .err { color: var(--magenta-deep); }
.err::before { content: "!"; font-family: var(--font-display); }
.hint { font-size: var(--fs-micro); color: var(--mute); }
.book__done { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.book__done-title {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--cyan);
}
.is-bone .book__done-title { color: var(--magenta-deep); }
.book__summary {
  display: grid;
  gap: 0.3rem;
  font-size: var(--fs-small);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-3);
}
.book__summary div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.book__summary dt { color: var(--mute); }
.book__summary dd { font-weight: 600; text-align: right; }

/* Prices -------------------------------------------------------------------- */

.prices__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .prices__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}
.price-table { width: 100%; }
.price-table caption {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--mute);
  padding-bottom: var(--sp-3);
}
.price-table th, .price-table td {
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.price-table thead th {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  padding-block: var(--sp-2);
  border-bottom: 2px solid var(--rule-2);
}
.price-table tbody th { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; text-transform: uppercase; line-height: 1; }
.price-table .price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.price-table .price small { font-weight: 400; color: var(--mute); }
.price-table .terms { font-size: var(--fs-small); color: var(--mute); }
@media (max-width: 560px) {
  .price-table th, .price-table td { padding: var(--sp-3) var(--sp-2); }
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-table tbody th { display: block; border-bottom: 0; padding-bottom: 0; }
  .price-table tbody td { display: block; border-bottom: 0; padding-top: 0.35rem; }
  .price-table tbody tr { display: block; border-bottom: 1px solid var(--rule); padding-block: var(--sp-3); }
  .price-table tbody td.terms { border-bottom: 0; }
}
.price-table tr[data-offer="1"] { background: rgba(226, 58, 138, 0.10); }
.is-bone .price-table tr[data-offer="1"] { background: rgba(168, 31, 95, 0.10); }
.price-table .tag {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--magenta-deep);
  color: #fff;
  padding: 0.15rem 0.4rem;
  margin-left: 0.4rem;
}

.prices__note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-content: start;
}

/* First visit ---------------------------------------------------------------- */

.first__grid {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 900px) {
  .first__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps__n {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--magenta-deep);
  min-width: 2.2ch;
}
.steps h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.steps p { color: var(--mute); font-size: var(--fs-small); }

.first__media { display: grid; gap: var(--sp-4); }
.first__media figure { position: relative; }
.first__media img { width: 100%; filter: contrast(1.05); }
.first__media figcaption {
  font-size: var(--fs-micro);
  color: var(--mute);
  padding-top: 0.4rem;
}
.first__media .tile {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--cyan), var(--magenta));
  mix-blend-mode: color;
  opacity: 0.22;
}

/* Room plate ---------------------------------------------------------------- */
/* The sala section was an orphan image in a wide field. It becomes one printed
   plate: the photograph bleeds to the right edge, the overprint and the beat
   line carry the poster identity on the left, so the band has a subject. */

.plate {
  position: relative;
  padding-block: var(--sec-y);
  scroll-snap-align: start;
  scroll-margin-top: var(--head-h);
  overflow: clip;
  background: var(--surface);
  --edge: calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gutter));
}
.plate__grid { display: grid; gap: var(--sp-6); }
.plate__body { display: grid; align-content: center; gap: var(--sp-5); max-width: 46ch; }
.plate__title { font-size: var(--fs-title); }
.plate__note { color: var(--mute); max-width: 44ch; }
.plate__fig {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.plate__fig picture,
.plate__fig img { width: 100%; height: 100%; object-fit: cover; }
.plate__fig img { filter: grayscale(0.5) contrast(1.06); }
.plate__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--cyan), var(--magenta));
  mix-blend-mode: color;
  opacity: 0.3;
}
.plate__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 34ch;
  background: var(--bg);
  color: var(--bone);
  font-size: var(--fs-micro);
  padding: 0.45rem 0.7rem;
}
.plate__beat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 56px;
  color: var(--cyan);
  opacity: 0.6;
  pointer-events: none;
}
.plate__beat path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

@media (min-width: 900px) {
  .plate__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; gap: var(--sp-7); }
  /* The photograph runs to the viewport edge, so the band never trails off. */
  .plate__fig { margin-right: calc(-1 * var(--edge)); border-right: 0; min-height: 420px; }
}

/* Visit ---------------------------------------------------------------------- */

.visit {
  background: var(--bg);
  color: var(--bone);
}
.visit__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .visit__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
.hours { width: 100%; }
.hours caption { text-align: left; font-size: var(--fs-small); color: var(--mute); padding-bottom: var(--sp-3); }
.hours th, .hours td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line-d); }
.hours th { font-weight: 600; font-size: var(--fs-small); }
.hours td { color: var(--mute); font-variant-numeric: tabular-nums; text-align: right; }
.visit__addr { font-size: var(--fs-body); color: var(--mute); margin-top: var(--sp-4); max-width: 46ch; }
.visit__city-name {
  font-size: var(--fs-sub);
  line-height: 0.9;
}
.visit__wide { margin-top: var(--sp-6); }
.visit__wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.visit__wide figcaption { padding-top: 0.5rem; }
.visit__city {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.visit__city figure { position: relative; }
.visit__city img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(0.35) contrast(1.08); }
.visit__city .tile {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--cyan), var(--magenta));
  mix-blend-mode: color;
  opacity: 0.3;
}
.visit__city figcaption { font-size: var(--fs-micro); color: var(--mute-2); padding-top: 0.4rem; }

/* Footer ---------------------------------------------------------------------- */

.site-foot {
  background: var(--surface);
  border-top: 3px solid var(--bone);
  padding-block: var(--sp-7);
}
.foot__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 800px) {
  .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.foot__brand {
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  line-height: 1;
}
.foot__nav ul { display: grid; gap: 0.4rem; }
.foot__nav a { font-size: var(--fs-small); color: var(--mute); text-decoration: none; }
.foot__nav a:hover { color: var(--bone); text-decoration: underline; }
.foot__meta { font-size: var(--fs-small); color: var(--mute); display: grid; gap: var(--sp-2); }
.foot__disclaimer {
  font-size: var(--fs-micro);
  color: var(--mute-2);
  margin-top: var(--sp-5);
  max-width: 90ch;
}

.foot__form {
  display: grid;
  gap: var(--sp-4);
  max-width: 30rem;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-d);
}
.foot__form-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-sub);
  line-height: 0.9;
}
.foot__form-note { font-size: var(--fs-micro); color: var(--mute); }
.foot__done { display: grid; gap: var(--sp-2); }
.foot__done-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--cyan);
}

/* Drawer ---------------------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  visibility: hidden;
  /* Visibility flips on immediately when opening, so the panel can take focus
     in the same frame, and waits for the fade before hiding when closing. */
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear 0s;
}
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  border: 0;
}
.drawer__panel {
  position: relative;
  margin-top: auto;
  background: var(--surface);
  border-top: 3px solid var(--cyan);
  padding: var(--sp-5) var(--gutter) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--dur-2) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateY(0); }
.drawer__panel ul { display: grid; gap: 0.2rem; margin-bottom: var(--sp-4); }
.drawer__panel a {
  display: block;
  padding: 0.85rem 0.2rem;
  min-height: 44px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-d);
}
.drawer__panel a:hover { color: var(--cyan); }
.drawer__note { font-size: var(--fs-micro); color: var(--mute); margin-top: var(--sp-4); }
.menu-btn {
  margin-left: auto;
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-d-2);
  align-items: center;
  justify-content: center;
}
.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--bone);
  transition: transform var(--dur-2) var(--ease-out);
}
.menu-btn__bars::before { content: ""; transform: translateY(-6px); }
.menu-btn__bars::after { content: ""; transform: translateY(4px); }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(0) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-2px) rotate(-45deg); }

@media (max-width: 1079px) {
  .head-nav { display: none; }
  .head-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

body.is-locked { overflow: hidden; }

.noscript {
  background: var(--magenta-deep);
  color: var(--bone);
  padding: var(--sp-3) var(--gutter);
  font-size: var(--fs-small);
}

/* Narrow screens --------------------------------------------------------------- */

@media (max-width: 719px) {
  .hero { min-height: auto; padding-top: var(--sp-5); }
  .hero__media { width: 100%; opacity: 0.5; }
  .hero__mask {
    background:
      linear-gradient(0deg, var(--bg) 12%, rgba(10, 10, 10, 0.62) 60%, rgba(10, 10, 10, 0.75) 100%);
  }
  .hero__title { font-size: clamp(3rem, 17vw, 5.5rem); max-width: 9ch; }
  .hero__beat { top: 24%; height: 72px; opacity: 0.45; }
  .marquee { width: 130%; margin-left: -15%; }
  .visit__city { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit__city figure:last-child { display: none; }
  .book { position: static; }
}

/* Motion and transparency preferences ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .ticker__track, .marquee__track { animation: none; }
  .hero__beat path { animation: none; stroke-dashoffset: 0; }
  .topbar, .drawer, .drawer__panel { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--bg);
    backdrop-filter: none;
  }
  .drawer__scrim { background: var(--bg); }
  .screen { display: none; }
  .hero__media::after,
  .poster__tint,
  .first__media .tile,
  .visit__city .tile { mix-blend-mode: normal; opacity: 0.16; }
  .hero__mask { background: rgba(10, 10, 10, 0.86); }
}