/* ---------------------------------------------
   RESORT — base
--------------------------------------------- */
:root {
  --bg: #ffffff;
  --fg: #16130d;
  --coral: #ff5a3c;
  --coral-dim: #c9432b;
  --light: #f3ead9;
  --gray: #a8a8a8;
  --line: rgba(22, 19, 13, 0.14);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "Offset TM";
  src: url("assets/fonts/Offset TM.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gray);
  color: var(--bg);
  font-family: var(--font);
  letter-spacing: -0.03em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font); font-weight: 700; margin: 0; }

img, video { max-width: 100%; display: block; }

/* raw link — no pills, no chrome, underline appears on hover */
.raw-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.raw-link:hover { text-decoration: underline; }

/* grain overlay — 90% grainy background, jittered like real film grain
   (oversized so the edges never scroll into view while it jitters) */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------
   Hero (homepage) — centered, full-bleed background image
--------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  padding: 72px 24px 80px;
  background: var(--gray);
  --hero-frame-w: clamp(220px, 28vw, 420px);
}

/* the photo frame — 4:3, scaled down so the cream page shows around it,
   cropped in tighter on the subjects */
.hero-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 70%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

@media (min-width: 721px) {
  .hero-photo {
    width: clamp(400px, 49vw, 660px);
  }
}


.hero-center {
  position: relative;
  z-index: 2;
  transition: transform 1s ease;
}

/* step 1: the fullscreen photo fades in first (1.2s), then RESORT fades
   in centered on the page (JS sets the initial translateY offset), then
   glides up into its resting position while the photo shrinks — see
   initHeroIntro in script.js */
.hero-title {
  /* the title is the RESORT logo image now. It's sized in the same units the
     old "RESORT" text was, so it takes up exactly the same footprint at every
     screen width: the text's letters were 3.58× the font size wide, and
     sat 0.075× below the top of its 0.85×-tall line (measured). The h1's own
     height is fixed so the intro animation (which measures it on load) lands
     the same whether or not the image has finished loading. */
  --hero-title-size: clamp(77px, 12vw, 168px);
  height: calc(0.85 * var(--hero-title-size));
  opacity: 0;
  animation: titleFadeIn 2s ease-out 1.2s forwards;
}

.hero-logo {
  display: block;
  width: calc(3.58 * var(--hero-title-size));
  height: auto;
  /* moved down with position, not a margin: a margin here collapses out of
     the h1 and makes the whole title block taller, shifting what's below */
  position: relative;
  top: calc(0.075 * var(--hero-title-size));
}

@keyframes titleFadeIn {
  to { opacity: 1; }
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: center 42%;
}

/* grain, confined to the photo */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes heroFadeIn {
  to { opacity: 1; }
}

/* step 3: photo is in, now every remaining element fades in together */
.hero-links,
.hero-release {
  opacity: 0;
  animation: heroFadeIn 1s ease 4.2s forwards;
}

/* the photo frame — sized modestly so it doesn't take over the page,
   centered under RESORT. LISTEN TO TRANSPARENT NOW is anchored to its
   bottom edge, so it always sits at the bottom of the photo */
.hero-photo-frame {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: var(--hero-frame-w);
}

.hero-photo-clip {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
}

.hero-photo-img {
  display: block;
  width: 100%;
  height: auto;
  /* stays invisible until initHeroIntro (script.js) reveals it at the
     exact instant the fullscreen intro photo lands and hides — otherwise
     it's already sitting here at full opacity, and while the intro photo
     is still semi-transparent during its own fade-in, this real one (and
     the rest of the settled page) shows straight through it */
  opacity: 0;
}

/* step 2 (new intro): a fullscreen copy of the photo sits on top of
   everything while RESORT fades in, then shrinks down via JS (script.js)
   to land exactly on .hero-photo-frame's real position, unveiling the
   page background as it shrinks. Hidden the instant it lands, since by
   then it's pixel-identical to the real photo underneath. */
.hero-intro-photo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  animation: heroIntroPhotoFadeIn 1.2s ease-out forwards;
  transition: top 1s ease, left 1s ease, width 1s ease, height 1s ease;
}

@keyframes heroIntroPhotoFadeIn {
  to { opacity: 1; }
}

.hero-intro-photo.is-hidden {
  display: none;
}

.hero-intro-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* sits just below the photo, not on top of it */
.hero-release {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 60px;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}

.hero-release-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--bg);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.hero-release-link:hover { opacity: 0.7; }

.hero-release-icon { flex-shrink: 0; }

.hero-release-text {
  font-weight: 700;
  font-size: clamp(19px, 3vw, 42px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Offset TM always sits at normal tracking, regardless of what wraps it */
.font-offset { font-family: "Offset TM", var(--font); letter-spacing: 0.08em; }

.hero-links {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-links .raw-link {
  position: absolute;
  pointer-events: auto;
  font-family: var(--font);
  font-size: 17px;
  color: var(--bg);
}

.hero-links .raw-link:hover {
  transform: translateY(-4px);
}

/* stacked as one cluster in the top-left corner */
.link-home       { top: 32px;  left: 32px; right: auto; bottom: auto; }
.link-tour       { top: 60px;  left: 32px; right: auto; bottom: auto; }
.link-merch      { top: 88px;  left: 32px; right: auto; }
.link-experience { top: 116px; left: 32px; right: auto; }

/* ---------------------------------------------
   Experience link — the open-door house icon (same as the Experience page's
   home button and the favicon), tucked into the bottom of the photo. Sized
   to the footprint the old CSS-drawn house had (box + roof, ~60×55px at
   its largest, ~42×38px at its smallest)
--------------------------------------------- */
.people-box {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  width: clamp(38px, 3.8vw, 55px);
  height: clamp(38px, 3.8vw, 55px);
  color: var(--bg);
  opacity: 0;
  animation: heroFadeIn 1s ease 4.2s forwards;
  transition: transform 0.2s ease;
}

.people-box svg {
  display: block;
  width: 100%;
  height: 100%;
}

.people-box:hover { transform: translateX(-50%) translateY(-4px); }

/* ---------------------------------------------
   Footer
--------------------------------------------- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 100px 32px 40px;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.social-row a {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.social-row a:hover { opacity: 0.55; }

.social-row svg { display: block; width: 26px; height: 26px; }

/* ---------------------------------------------
   Inner pages (news / merch / archive / tour) —
   same staged-reveal spirit as the homepage hero, just simpler: back link,
   then title, then note each fade up in sequence on load
--------------------------------------------- */
@keyframes pageFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-section {
  position: relative;
  padding: 180px 48px 100px;
  max-width: none;
  width: 100%;
  margin: 0 auto;
}

/* pinned to the actual viewport corner, same as the homepage tabs —
   not to the content column, so it never drifts in from the edge */
.site-nav {
  position: fixed;
  top: 32px;
  left: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: pageFadeUp 0.6s ease both;
}

.site-nav a {
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

.site-nav a:hover { color: var(--bg); text-decoration: underline; }

.loading-note {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------
   News
--------------------------------------------- */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.news-item:last-child { border-bottom: 1px solid var(--line); }

.news-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 4px;
}

.news-title {
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  margin-bottom: 8px;
}

.news-body {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
}

/* ---------------------------------------------
   Tour — kept to a narrow column instead of running the page's
   full width, tickets link pinned to the far end of each row
--------------------------------------------- */
.tour-list {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.tour-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
}

.tour-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tour-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.tour-date {
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--bg);
}

.tour-dash {
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--bg);
}

.tour-title {
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
}

.tour-location {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.tour-tickets {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  border: 1px solid var(--line);
  padding: 9px 18px;
  transition: opacity 0.2s ease;
}

.tour-tickets:hover { opacity: 0.6; }

.tour-tickets-soon {
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.tour-tickets-soon:hover { opacity: 1; }

.tour-blurred {
  filter: blur(6px);
  -webkit-user-select: none; /* Safari ignores the unprefixed property */
  user-select: none;
  pointer-events: none;
}

/* ---------------------------------------------
   Merch — just the asset, no card. Description sits centered underneath.
--------------------------------------------- */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.merch-item {
  position: relative;
  cursor: pointer;
}

.merch-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-sizing: border-box;
}

.merch-item[data-id="open-house-x-ryan-naga-poster"] .merch-image,
.merch-item[data-id="open-house-poster"] .merch-image {
  padding: 12px;
}

.merch-item[data-id="transparent-sticker-pack"] .merch-image {
  padding: 48px;
}

.merch-image.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
}

.merch-image.is-empty::after { content: "IMAGE"; }

.merch-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.merch-item:hover .merch-image img { opacity: 0.85; }

.merch-info {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.merch-name {
  font-size: 13px;
  font-weight: 600;
}

.merch-price {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 1024px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .merch-item[data-id="transparent-sticker-pack"] .merch-image {
    padding: 16px;
  }
}

.merch-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: var(--coral);
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
}

/* ---------------------------------------------
   Cart toggle + drawer
--------------------------------------------- */
.cart-toggle {
  position: fixed;
  top: 32px;
  right: 32px;
  z-index: 10;
  background: var(--bg);
  border: none;
  color: var(--fg);
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cart-toggle:hover { opacity: 0.8; }

.cart-count {
  display: inline-block;
  margin-left: 4px;
  color: rgba(22, 19, 13, 0.55);
}

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  justify-content: flex-end;
}

.cart-drawer[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-inner {
  width: min(400px, 100%);
  height: 100%;
  background: var(--gray);
  display: flex;
  flex-direction: column;
  padding: 32px;
  transform: translateX(24px);
  transition: transform 0.25s ease;
}

.cart-drawer[data-open="true"] .cart-drawer-inner { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.cart-drawer-header h3 {
  font-size: 18px;
  font-weight: 700;
}

.cart-close {
  background: none;
  border: none;
  color: var(--bg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.cart-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cart-item-image {
  width: 56px;
  height: 70px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.cart-item-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-name { font-size: 13px; font-weight: 600; }
.cart-item-size { font-size: 12px; color: rgba(255, 255, 255, 0.6); }

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.qty-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--bg);
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  font-size: 13px;
}

.qty-value { font-size: 13px; min-width: 12px; text-align: center; }

.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cart-item-price { font-size: 13px; }

.cart-item-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.cart-drawer-footer {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 20px;
}

.cart-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.cart-checkout-btn {
  display: block;
  text-align: center;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px;
  transition: opacity 0.2s ease;
}

.cart-checkout-btn:hover { opacity: 0.8; }

/* ---------------------------------------------
   Merch quick-view modal
--------------------------------------------- */
.merch-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.merch-modal[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.merch-modal-inner {
  position: relative;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--gray);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.merch-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  color: var(--bg);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.merch-modal-image {
  aspect-ratio: 4 / 5;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: zoom-in;
  padding: 40px;
  box-sizing: border-box;
}

.merch-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
  transform-origin: center;
}

.merch-modal-image[data-zoom="1"] { cursor: zoom-in; }
.merch-modal-image[data-zoom="1"] img { transform: scale(1.8); }
.merch-modal-image[data-zoom="2"] { cursor: zoom-out; }
.merch-modal-image[data-zoom="2"] img { transform: scale(2.8); }

.merch-modal-info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.merch-modal-name { font-size: 20px; font-weight: 700; }
.merch-modal-price { font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.merch-modal-desc { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }

.merch-modal-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.size-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--bg);
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.size-btn.is-selected {
  background: var(--bg);
  color: var(--fg);
}

.size-btn.is-soldout {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
  cursor: not-allowed;
}

.merch-modal-add {
  margin-top: 8px;
  background: var(--bg);
  color: var(--fg);
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.merch-modal-add:hover { opacity: 0.8; }

.merch-modal-add:disabled {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

/* ---------------------------------------------
   Checkout page
--------------------------------------------- */
.checkout-wrap {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.checkout-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin-bottom: 32px;
}

.checkout-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.checkout-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin-bottom: 32px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  font-family: var(--font);
  font-size: 14px;
  color: var(--bg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  padding: 10px 12px;
  resize: vertical;
}

.checkout-field select option { color: var(--fg); }

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
  outline: 1px solid var(--bg);
}

.checkout-totals {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.checkout-total-row-final {
  font-size: 15px;
  font-weight: 700;
  color: var(--bg);
}

.checkout-note {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

.checkout-submit {
  background: var(--bg);
  color: var(--fg);
  border: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.checkout-submit:hover { opacity: 0.8; }

.checkout-status {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  min-height: 18px;
}

/* ---------------------------------------------
   Archive
--------------------------------------------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 1025px) {
  .archive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    gap: 40px 32px;
  }

  .archive-card {
    width: 420px;
  }
}

@media (max-width: 720px) {
  .archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.archive-card {
  cursor: pointer;
}

.archive-thumb {
  aspect-ratio: 2.4 / 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse, black 82%, transparent 100%);
  mask-image: radial-gradient(ellipse, black 82%, transparent 100%);
}

.archive-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.archive-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 55%, black 100%);
  mask-image: radial-gradient(ellipse at center, transparent 55%, black 100%);
}

.archive-thumb::after {
  content: "▶";
  color: var(--bg);
  font-size: 26px;
  z-index: 2;
  transition: transform 0.2s ease;
}

@media (max-width: 1024px) {
  .archive-thumb::after {
    font-size: 16px;
  }
}

.archive-card:hover .archive-thumb::after {
  transform: scale(1.15);
}

/* ---------------------------------------------
   Lightbox — deliberately inverted (lights-down video viewer)
--------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(14, 13, 12, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.lightbox[data-open="true"] { display: flex; }

.lightbox-inner {
  max-width: 900px;
  width: 100%;
}

.lightbox-inner video {
  width: 100%;
  max-height: 70vh;
  background: #000;
}

.lightbox-caption { margin-top: 20px; }

.lightbox-credit {
  font-size: 11px;
  color: rgba(243, 234, 217, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: var(--light);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}

/* ---------------------------------------------
   Responsive
--------------------------------------------- */
/* mobile only: title moves to the top so it doesn't sit over the faces in the
   photo, and the quadrant scatter collapses back to a single centered row below it */
@media (max-width: 720px) {
  .hero {
    min-height: 100dvh;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
  }

  /* photo drops below the tab stack instead of sitting centered behind it,
     so the tabs stay on the cream and never sit on top of the photo */
  .hero-photo {
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* enough top clearance to clear the fixed 4-line .site-nav stack */
  .page-section { padding: 180px 20px 80px; }

  .news-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* nudge the whole logo-to-music-icon stack up a little */
  .hero { padding-top: 44px; }

  /* fixed-pixel breakout matching .hero's own 20px side padding — vw
     units can disagree with the real visible width on some phones
     (notch/dynamic-island safe areas, rounding) */
  .hero-photo-frame {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: calc(100% + 40px);
    margin: 28px -20px 0;
  }

  .cart-toggle { top: auto; bottom: 24px; right: 20px; }
  .cart-drawer-inner { width: 100%; padding: 24px; }
  .merch-modal-inner { grid-template-columns: 1fr; }
  .merch-modal-info { padding: 28px; }
}

/* tablet: give the stack (tabs / photo / LISTEN TO TRANSPARENT NOW) room to
   breathe, and pin the footer icons to the bottom of the page */
@media (min-width: 721px) and (max-width: 1024px) {
  .hero-links { margin-top: 28px; }

  /* LISTEN TO TRANSPARENT NOW hangs below the photo outside the flow, so
     the hero needs bottom padding to keep it clear of the footer icons */
  .hero { padding-bottom: 130px; }

  /* fixed-pixel breakout matching .hero's own 24px side padding */
  .hero-photo-frame {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: calc(100% + 48px);
    margin: 44px -24px 0;
  }
  .hero-release {
    top: 100%;
    margin-top: 44px;
  }
  .hero-release-link { display: inline-flex; }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  main { flex: 1 0 auto; display: flex; }
  .hero { flex: 1 0 auto; }
  .site-footer { padding-top: 60px; margin-top: auto; }
}

/* desktop: pin the photo to a fixed distance from the top instead of a
   percentage of the hero's height, so growing the hero for extra bottom
   clearance doesn't just push the photo further down too */
@media (min-width: 1025px) {
  .hero-photo-frame {
    top: 280px;
    transform: translateX(-50%);
  }

  .hero-release { margin-top: 90px; }

  /* 100vh + 240px alone is only tall enough on a roomy viewport — on a
     short one (a projector, a small window) it ends above the bottom of
     the photo + LISTEN TO TRANSPARENT NOW, which then runs over the
     footer icons and blocks them. So the hero is never shorter than: the
     photo's top offset (280) + the photo itself (2:3 portrait, hence 1.5×
     its width) + the link's gap (90) + the link (~70) + a little spare */
  .hero {
    min-height: max(
      calc(100vh + 240px),
      calc(280px + var(--hero-frame-w) * 1.5 + 90px + 70px + 20px)
    );
  }
}

/* mobile + tablet: tabs move under the RESORT logo as a small, spaced-out
   horizontal row instead of the desktop's stacked top-left cluster */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .hero-links {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
  }

  .hero-links .raw-link {
    position: static;
    font-size: 12px;
    white-space: nowrap;
  }

  /* cap the bled photo's height so it can't grow past a safe ceiling on
     in-between widths (e.g. ~500-720px) where full width * natural ratio
     would otherwise get tall enough to overlap the title above it */
  .hero-photo-clip { height: min(150vw, 65vh); }
  .hero-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* inner pages: nav scrolls away with the page instead of staying
     pinned to the viewport (only desktop keeps it fixed) */
  .site-nav {
    position: absolute;
    top: 32px;
    left: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* still show a plain fade (no large motion) instead of killing every
     transition outright — reduced motion means "avoid big movement," not
     "nothing should ever animate" */
  html { scroll-behavior: auto; }
  .reveal { transition: opacity 0.4s ease; transform: none; }

  .hero-title,
  .hero-links,
  .hero-release,
  .people-box,
  .hero-intro-photo {
    animation-duration: 0.4s;
    animation-delay: 0s;
  }

  .hero-intro-photo {
    transition-duration: 0.4s;
  }

  .site-nav { transform: none; }
}

/* ---------------------------------------------
   Edit mode — ?edit on the homepage: drag and resize the hero elements
   freely to try out layouts. Nothing here is saved; reload without ?edit
   (or refresh) to get the real site back.
--------------------------------------------- */
body.edit-mode .hero-links .raw-link {
  pointer-events: none;
}

body.edit-mode [data-editable] {
  outline: 1px dashed rgba(255, 90, 60, 0.8);
  outline-offset: 2px;
  cursor: grab;
  animation: none !important;
  opacity: 1 !important;
  touch-action: none;
}

body.edit-mode [data-editable].is-dragging {
  cursor: grabbing;
  outline-color: #ff5a3c;
}

.edit-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #ff5a3c;
  border: 2px solid var(--light);
  border-radius: 50%;
  cursor: nwse-resize;
  z-index: 50;
}

.edit-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: #ff5a3c;
  color: var(--light);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 4px;
  pointer-events: none;
}

/* ---------------------------------------------
   Interactive house — "Experience". A real 3D interior (GLB) you walk
   through room to room; tap a glowing hotspot to open its demo.
--------------------------------------------- */
body.house-page { background: #000; overflow: hidden; height: 100dvh; }

.house-scene {
  position: fixed;
  inset: 0;
}

.house-canvas {
  position: absolute;
  inset: 0;
  /* canvas is a replaced element — inset:0 alone won't stretch it the
     way it would a div, since it keeps its intrinsic attribute size */
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.house-canvas:active { cursor: grabbing; }

.house-loading {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: var(--bg);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.house-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.house-hint {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: var(--bg);
  font-size: 13px;
  text-align: center;
  padding: 0 32px;
  pointer-events: none;
}

.house-topdown-panel {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: monospace;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  text-align: center;
  pointer-events: none;
}

.house-topdown-panel .house-topdown-sub {
  opacity: 0.6;
  font-size: 11px;
  margin-top: 4px;
}

.house-close {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.room-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--gray);
  border-top: 1px solid var(--line);
  padding: 28px 32px calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.room-panel[data-open="true"] { transform: translateY(0); }

.room-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.room-panel-room {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}

.room-panel-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
}

.room-panel-close {
  background: none;
  border: none;
  color: var(--bg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.room-panel-audio {
  width: 100%;
}

.room-panel-photo,
.room-panel-video {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.room-panel-photo + .room-panel-video,
.room-panel-photo + .room-panel-audio,
.room-panel-video + .room-panel-audio {
  margin-top: 12px;
}

.room-panel-soon {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}