@charset "UTF-8";
/* =========================================================
   Low Tide Sessions — common.css
   tokens / reset / base / shared parts (header, footer, buttons)
   rem basis: PC 1440 -> 1rem = 10px (100vw/144, no cap)
              SP  390 -> 1rem = 10px (min(100vw/39, 10px)), BP 1024
   ========================================================= */

:root {
  /* color (Figma fills) */
  --color-teal: #0B4F5C;
  --color-teal-deep: #073A44;
  --color-orange: #FF5B22;
  --color-orange-soft: #EC6738;
  --color-orange-letter: #E84A14;
  --color-yellow: #FFC53D;
  --color-cream: #ECE4D2;
  --color-ink: #17191B;
  --color-mint: #9FD8D2;
  --color-placeholder: #757575;
  --color-ink-25: rgba(23, 25, 27, 0.25);
  --color-ink-30: rgba(23, 25, 27, 0.3);
  --color-cream-88: rgba(236, 228, 210, 0.88);
  --color-cream-75: rgba(236, 228, 210, 0.75);
  --color-cream-22: rgba(236, 228, 210, 0.22);

  /* font family */
  --ff-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --ff-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* type roles */
  --fs-sec-title: 12.096rem;   /* THE RESIDENTS / TOUR DATES / TICKETS / MERCH TABLE */
  --ls-sec-title: -0.06048rem;
  --fs-lead: 1.7rem;           /* section leads / liner body */
  --lh-lead: 2.635rem;
  --fs-mono: 1.2rem;           /* mono labels */
  --ls-mono: 0.072rem;
  --fs-small: 1.5rem;          /* perks / notes */
  --lh-small: 2.325rem;

  /* layout */
  --gutter: 9.6rem;            /* PC side padding (96px) */
  --sec-pad-top: 11.79rem;     /* heading top offset in titled sections */
}

@media (max-width: 1023px) {
  :root {
    --fs-sec-title: 5.6rem;
    --ls-sec-title: -0.028rem;
    --fs-lead: 1.6rem;
    --lh-lead: 2.48rem;
    --gutter: 1.8rem;
    --sec-pad-top: 6.2rem;
  }
}

/* ---------- root scale ---------- */
html {
  font-size: calc(100vw / 144);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (max-width: 1023px) {
  html { font-size: min(calc(100vw / 39), 10px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address, em, i, cite { font-style: normal; }
img, picture { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; margin: 0; border-radius: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--ff-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.page { overflow-x: clip; }

/* ---------- utilities ---------- */
.u-sp { display: none; }
@media (max-width: 1023px) {
  .u-pc { display: none; }
  .u-sp { display: inline; }
}
.u-yellow { color: var(--color-yellow); }

:focus-visible {
  outline: 0.2rem solid var(--color-yellow);
  outline-offset: 0.3rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-weight: 700;
  line-height: 1;
  border: 0.2rem solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--fill { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-ink); }
.btn--fill:hover { background: var(--color-yellow); border-color: var(--color-yellow); }
.btn--line { border-color: var(--color-ink); color: var(--color-ink); }
.btn--line:hover { background: var(--color-ink); color: var(--color-cream); }
.btn--line-cream { border-color: var(--color-cream); color: var(--color-cream); }
.btn--line-cream:hover { background: var(--color-cream); color: var(--color-ink); }
.btn--ink { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-cream); }
.btn--ink:hover { background: var(--color-teal); border-color: var(--color-teal); }
/* dashed "Sold out": Figma dash 4 / gap ~2, stroke 2 */
.btn--dashed {
  --dash: var(--color-ink);
  border: 0;
  color: var(--color-ink);
  background:
    repeating-linear-gradient(90deg, var(--dash) 0 0.4rem, transparent 0.4rem 0.6rem) left top / 100% 0.2rem no-repeat,
    repeating-linear-gradient(90deg, var(--dash) 0 0.4rem, transparent 0.4rem 0.6rem) left bottom / 100% 0.2rem no-repeat,
    repeating-linear-gradient(180deg, var(--dash) 0 0.4rem, transparent 0.4rem 0.6rem) left top / 0.2rem 100% no-repeat,
    repeating-linear-gradient(180deg, var(--dash) 0 0.4rem, transparent 0.4rem 0.6rem) right top / 0.2rem 100% no-repeat;
  cursor: default;
}
.btn--dashed-dim { --dash: rgba(23, 25, 27, 0.62); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: flex-start; gap: 0.8rem; }
.logo__mark { width: 4.6rem; height: 4.6rem; flex: none; }
.logo__text { display: flex; flex-direction: column; }
.logo__name { font-family: var(--ff-display); font-weight: 900; line-height: 1.2; white-space: nowrap; }
.logo__sub { font-family: var(--ff-mono); font-weight: 500; line-height: normal; white-space: nowrap; }

/* ---------- header ---------- */
.header {
  position: relative;
  height: 8.26rem;
  background: var(--color-teal);
  color: var(--color-cream);
}
.header::after {
  content: "";
  position: absolute;
  left: 4rem; right: 4rem; bottom: 0;
  height: 0.2rem;
  background: var(--color-cream-22);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* nav sits centred in the free space (Figma 571.7–965) */
  height: 100%;
  padding: 0 9.6rem 0.2rem 9.2rem;
}
.header .logo__text { margin-top: 0.11rem; }
.header .logo__name { font-size: 2.5713rem; }
.header .logo__sub { font-size: 0.894rem; letter-spacing: 0.198rem; margin-top: -0.19rem; }
.header .logo { align-self: center; }
.gnav__list { display: flex; gap: 2.72rem; }
.gnav__list a {
  font-family: var(--ff-mono);
  font-size: 1.185rem;
  letter-spacing: 0.096rem;
  line-height: normal;
  color: var(--color-cream);
  transition: color .2s ease;
}
.gnav__list a:hover { color: var(--color-yellow); }
.btn--header { height: 4.46rem; padding: 0 1.675rem; font-size: 1.185rem; letter-spacing: 0.096rem; }

@media (max-width: 1023px) {
  .header::after { left: 0; right: 0; }
  .header__inner { max-width: 39rem; margin: 0 auto; padding: 0 1.8rem 0.2rem 1.4rem; }
  .gnav { display: none; }
}

/* ---------- footer ---------- */
.footer {
  min-height: 32.79rem;
  padding: 4.15rem var(--gutter) 0;
  background: var(--color-cream);
  border-top: 0.3rem solid var(--color-ink);
  color: var(--color-ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: 43.22rem 31.79rem 31.79rem 18rem;
  align-items: start;
}
.footer .logo { margin-left: -0.4rem; }
.footer .logo__mark { margin-top: 0.67rem; }
.footer .logo__name { font-size: 4rem; }
.footer .logo__sub { font-size: 0.9976rem; letter-spacing: 0.22rem; margin-top: -0.55rem; }
.footer__desc { width: 28.5rem; margin-top: 1.44rem; font-size: var(--fs-small); line-height: var(--lh-small); }
.footer__col { margin-top: 0.85rem; }
.footer__heading { font-family: var(--ff-mono); font-weight: 700; font-size: 1.0875rem; letter-spacing: 0.11rem; line-height: normal; }
.footer__links { margin-top: 1.6rem; }
.footer__links li + li { margin-top: 0.93rem; }
.footer__links a {
  display: inline-block;
  font-size: 1.7rem;
  line-height: normal;
  border-bottom: 1px solid var(--color-ink-30);
  transition: border-color .2s ease, color .2s ease;
}
.footer__links a:hover { border-bottom-color: var(--color-orange); color: var(--color-teal); }
.footer__code { margin-top: 0.65rem; }
.footer__code img { width: 18rem; height: auto; }
.footer__code p { margin-top: 0.95rem; font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); line-height: normal; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 4.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-ink-30);
  font-family: var(--ff-mono);
  font-size: 1.29rem;
  letter-spacing: 0.078rem;
  line-height: normal;
}
.footer__credit a, .footer__totop {
  /* Figma 14:1076/1078: 1px rule 14.3px below the text top */
  background: linear-gradient(currentColor, currentColor) left 1.43rem / 100% 1px no-repeat;
}
.footer__credit a:hover, .footer__totop:hover { color: var(--color-orange); }

@media (max-width: 1023px) {
  .footer { min-height: 85.13rem; }
  .footer__grid, .footer__bottom { max-width: 35.4rem; margin-inline: auto; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__desc { margin-top: 1.39rem; }
  .footer__col { margin-top: 3.465rem; }
  .footer__col--else { margin-top: 4.13rem; }
  .footer__links { margin-top: 1.55rem; }
  .footer__links li + li { margin-top: 0.88rem; }
  .footer__links a { font-size: 1.6rem; }
  .footer__code { margin-top: 3.836rem; }
  .footer__code p { line-height: 1.4rem; }
  .footer__bottom { flex-wrap: wrap; margin-top: 4.25rem; padding-top: 1.775rem; }
  .footer__bottom { margin-top: 4.25rem; }
  .footer__copy { flex-basis: 100%; line-height: 1.95rem; }
  .footer__credit, .footer__totop { margin-top: 1.225rem; }
}