:root {
  --ink: #171715;
  --paper: #f7f6f2;
  --soft: #eceae4;
  --line: #d7d4cc;
  --muted: #686761;
  --ar-light: #f2efe7;
  --ar-accent: #20201d;
  --ar-overlay: rgba(12, 12, 11, .76);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }

.site-header {
  position: relative;
  z-index: 10;
  min-height: 68px;
  padding: 0 clamp(18px, 3.6vw, 58px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: rgba(247, 246, 242, .94);
  transition: color .35s, border-color .35s, background .35s;
}

.site-wordmark {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-nav { display: flex; align-items: center; gap: clamp(20px, 2.7vw, 42px); }
.site-nav a {
  padding: 25px 0 23px;
  border-bottom: 1px solid transparent;
  color: #55544f;
  font-size: 14px;
  line-height: 1;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); outline: none; }

.hub { min-height: 100svh; background: var(--paper); }
.hub-intro {
  padding: clamp(68px, 9vw, 128px) clamp(18px, 3.6vw, 58px) clamp(42px, 6vw, 80px);
  border-bottom: 1px solid var(--line);
}
.hub-intro h1 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(62px, 9vw, 142px);
  font-weight: 400;
  letter-spacing: -.062em;
  line-height: .92;
}
.hub-summary {
  max-width: 710px;
  margin: 32px 0 0;
  color: #5c5b56;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.55;
}
.section-label {
  margin: 0 0 24px;
  color: #64635e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(44px, 6vw, 80px) clamp(18px, 3.6vw, 58px) clamp(68px, 9vw, 120px);
}
.experience-card { display: block; min-width: 0; }
.card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #e9e8e3;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.experience-card[data-card="nashville-story"] .card-image img,
.experience-card[data-card="more-about-nashville"] .card-image img { object-fit: contain; padding: 6%; }
.experience-card:hover .card-image img,
.experience-card:focus-visible .card-image img { transform: scale(1.018); }
.experience-card:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }
.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--line);
  color: #696862;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.experience-card h2 {
  margin: 17px 0 0;
  font-size: clamp(26px, 2.45vw, 39px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.03;
}
.hub-footer {
  padding: 22px clamp(18px, 3.6vw, 58px);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 22px;
  color: #77766f;
  font-size: 11px;
}

.experience {
  --experience-accent: #2a6f45;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  transition: background .4s, color .4s;
}
.experience[data-experience="nashville-story"] { --experience-accent: #9d5035; }
.experience[data-experience="more-about-nashville"] { --experience-accent: #707455; }
.experience[data-experience="inflection"] { --experience-accent: #18813e; }
.experience:has(.ar-stage.is-active) { background: #070707; color: var(--ar-light); }
.experience:has(.ar-stage.is-active) .site-header {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: rgba(8,8,8,.42);
}
.experience:has(.ar-stage.is-active) .site-nav a { color: rgba(255,255,255,.7); }
.experience:has(.ar-stage.is-active) .site-nav a:hover,
.experience:has(.ar-stage.is-active) .site-nav a:focus-visible,
.experience:has(.ar-stage.is-active) .site-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }

.intro {
  position: relative;
  z-index: 4;
  min-height: calc(100svh - 68px);
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(420px, 1.22fr);
  gap: clamp(46px, 7vw, 118px);
  align-items: center;
  padding: clamp(42px, 6vw, 84px) clamp(18px, 5.2vw, 84px) clamp(54px, 7vw, 92px);
  transition: opacity .5s, transform .5s;
}
.intro.is-leaving { opacity: 0; transform: translateY(12px); pointer-events: none; }
.launch-copy { align-self: center; }
.experience-count {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  color: #74736d;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.experience-count span { width: 30px; height: 1px; background: var(--experience-accent); }
.eyebrow {
  margin: 0 0 18px;
  color: var(--experience-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.intro h1 {
  max-width: 640px;
  margin: 0;
  font-size: clamp(54px, 6.4vw, 102px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .92;
  text-wrap: balance;
}
.intro-subtitle {
  max-width: 520px;
  margin: 27px 0 31px;
  color: #63625d;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.58;
}
.begin {
  width: min(280px, 100%);
  padding: 17px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.begin:hover:not(:disabled),
.begin:focus-visible:not(:disabled) { background: transparent; color: var(--ink); outline: none; }
.begin:disabled { opacity: .42; cursor: wait; }
.permission-note { margin: 13px 0 0; color: #85847d; font-size: 10px; }
.back-link {
  display: inline-block;
  margin-top: 25px;
  color: #77766f;
  font-size: 11px;
  border-bottom: 1px solid #aaa8a0;
}
.artwork-plate { min-width: 0; margin: 0; }
.artwork-frame {
  position: relative;
  min-height: min(63vh, 690px);
  padding: clamp(22px, 3.2vw, 52px);
  display: grid;
  place-items: center;
  background: #ecebe6;
}
.artwork-frame img {
  display: block;
  width: 100%;
  height: min(55vh, 610px);
  object-fit: contain;
  box-shadow: 0 15px 40px rgba(24, 23, 20, .11);
}
.experience[data-experience="inflection"] .artwork-frame { padding: 0; background: #222725; }
.experience[data-experience="inflection"] .artwork-frame img { height: min(63vh, 690px); object-fit: cover; box-shadow: none; }
.artwork-plate figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0 0;
  color: #77766f;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ar-stage { position: absolute; inset: 0; z-index: 0; opacity: 0; background: #070707; transition: opacity .45s; }
.ar-stage.is-active { z-index: 2; opacity: 1; }
.ar-stage > video, .ar-stage > canvas { position: absolute !important; inset: 0; }
.scanner { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; color: #f2efe7; }
.scanner[hidden] { display: none; }
.scan-frame { position: relative; width: min(66vw, 430px); aspect-ratio: 1.35; }
.scan-frame i { position: absolute; width: 34px; height: 34px; border-color: #fff; border-style: solid; }
.scan-frame i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.scan-frame i:nth-child(3) { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.scan-frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.scan-line { position: absolute; left: 5%; right: 5%; height: 1px; top: 10%; background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 12px #fff; animation: scan 2.5s ease-in-out infinite alternate; }
@keyframes scan { to { top: 90%; } }
.scan-copy { position: absolute; bottom: 9vh; display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: var(--ar-overlay); backdrop-filter: blur(8px); }
.scan-copy p { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px #fff; }
.close-ar { position: absolute; z-index: 12; right: 24px; top: 82px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(10,9,7,.5); color: #fff; font-size: 24px; cursor: pointer; }

.debug-panel { position: fixed; z-index: 20; right: 14px; bottom: 14px; width: min(320px, calc(100vw - 28px)); padding: 14px; background: rgba(9,9,8,.92); color: #f2efe7; border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(12px); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.debug-panel header { display: flex; justify-content: space-between; color: #fff; margin-bottom: 10px; }
.debug-panel dl { margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.debug-panel dl div { display: flex; justify-content: space-between; gap: 8px; }
.debug-panel dt { color: rgba(255,255,255,.48); }
.debug-panel dd { margin: 0; }
.debug-panel label { display: block; margin-top: 9px; color: rgba(255,255,255,.65); }
.debug-panel output { float: right; color: #fff; }
.debug-panel input { width: 100%; accent-color: #fff; }

.not-found { min-height: 100svh; display: grid; place-content: center; padding: 24px; }
.not-found h1 { margin: 0; font-size: clamp(55px, 9vw, 110px); font-weight: 400; letter-spacing: -.05em; }
.text-link { margin-top: 32px; color: var(--ink); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.listening-note { margin: 5px 0 0; color: #77766f; font-size: 10px; line-height: 1.4; }

@media (max-width: 900px) {
  .site-nav a:nth-child(1), .site-nav a:nth-child(2) { display: none; }
  .experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro { grid-template-columns: 1fr 1fr; gap: 38px; }
}

@media (max-width: 700px) {
  .site-header { min-height: 62px; }
  .site-wordmark { font-size: 13px; }
  .site-nav { gap: 18px; }
  .site-nav a { padding: 23px 0 20px; font-size: 12px; }
  .hub-intro { padding-top: 62px; }
  .hub-intro h1 { font-size: clamp(58px, 18vw, 96px); }
  .hub-summary { margin-top: 24px; font-size: 17px; }
  .experience-grid { grid-template-columns: 1fr; gap: 42px; }
  .experience-card h2 { font-size: 31px; }
  .hub-footer { flex-direction: column; gap: 6px; }
  .intro {
    min-height: calc(100svh - 62px);
    height: calc(100svh - 62px);
    overflow: hidden;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(90px, 25vh) minmax(0, 1fr);
    gap: 14px;
    align-content: stretch;
    padding: 14px 18px max(12px, env(safe-area-inset-bottom));
  }
  .launch-copy { order: 2; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .artwork-plate { order: 1; min-height: 0; height: 100%; overflow: hidden; }
  .artwork-frame { height: 100%; min-height: 0; padding: 10px; }
  .artwork-frame img,
  .experience[data-experience="inflection"] .artwork-frame img { height: 100%; max-height: none; }
  .artwork-plate figcaption { display: none; }
  .experience-count { margin: 0 0 7px; font-size: 8px; }
  .eyebrow { margin-bottom: 7px; font-size: 9px; }
  .intro h1 { font-size: clamp(38px, 11.5vw, 56px); }
  .intro-subtitle { margin: 9px 0 11px; font-size: 13px; line-height: 1.35; }
  .begin { min-height: 46px; padding: 13px 15px; }
  .permission-note { margin-top: 7px; font-size: 9px; }
  .listening-note { margin-top: 3px; font-size: 9px; }
  .back-link { margin: 7px 0 0; font-size: 10px; }
  .close-ar { top: 72px; }
}

@media (max-width: 420px) and (max-height: 640px) {
  .intro {
    grid-template-rows: minmax(68px, 18vh) minmax(0, 1fr);
    gap: 8px;
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .intro h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .intro-subtitle { margin: 6px 0 8px; font-size: 11px; }
  .begin { min-height: 42px; padding: 10px 13px; }
  .experience-count { margin-bottom: 4px; }
  .eyebrow { margin-bottom: 4px; }
  .permission-note { margin-top: 4px; }
  .listening-note { margin-top: 2px; }
  .back-link { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}