/* =========================================================================
   TABI NO OMOIDE / 旅の思い出 — Design System
   Desktop 1440 · Tablet 768 · Mobile 390
   ========================================================================= */

:root{
  /* --- Color System --- */
  --c-black:      #0a0a0b;
  --c-charcoal:   #16151a;
  --c-navy:       #12141f;
  --c-navy-2:     #1a1d2e;
  --c-ivory:      #f4efe6;
  --c-cream:      #ece4d3;

  --c-gold:       #c9a24b;
  --c-gold-light: #e6c877;
  --c-bronze:     #8a6a3f;
  --c-vermillion: #a8402c;
  --c-teal:       #10373a;

  --c-text-hi:    var(--c-ivory);
  --c-text-mid:   #c9c4ba;
  --c-text-low:   #8b8880;
  --c-border:     rgba(244,239,230,0.12);
  --c-border-2:   rgba(201,162,75,0.35);

  /* --- Typography --- */
  --f-serif: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --f-sans:  'Jost', 'Noto Sans JP', -apple-system, sans-serif;
  --f-ja-serif: 'Noto Serif JP', serif;
  --f-ja-sans:  'Noto Sans JP', sans-serif;

  /* --- Spacing --- */
  --gutter: clamp(24px, 6vw, 96px);
  --section-pad: clamp(64px, 10vw, 160px);
  --radius: 2px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-text-hi);
  font-family:var(--f-sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
.section-inner{
  max-width:1320px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* =========================================================================
   Bilingual Language System
   ========================================================================= */
body.lang-en .ja{ display:none; }
body.lang-ja .en{ display:none; }

.lang-switch{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  color:var(--c-text-mid);
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:0.08em;
  cursor:pointer;
  padding:6px 4px;
}
.lang-switch__en,.lang-switch__ja{ transition:color .3s var(--ease); }
.lang-switch__sep{ color:var(--c-border-2); font-weight:300; }
body.lang-en .lang-switch__en{ color:var(--c-gold-light); }
body.lang-ja .lang-switch__ja{ color:var(--c-gold-light); }

/* =========================================================================
   Placeholder Image Blocks (swap for real assets from IMAGE SPECIFICATION)
   ========================================================================= */
.ph{
  position:relative;
  width:100%;
  aspect-ratio:var(--ar, 4/5);
  background:#0e0e12;
  border:1px solid var(--c-border);
  overflow:hidden;
}
.ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.ph picture{ display:block; position:absolute; inset:0; width:100%; height:100%; }
/* Oversized so scroll-parallax translation never exposes an edge */
.ph img.parallax-img{
  inset:auto;
  top:-15%; left:0;
  width:100%; height:130%;
}
.ph--hero{ --ar:1536/844; position:relative; width:100%; height:auto; border:none; }
/* Desktop uses a different hero photo (see the <picture> source in
   index.html) with its own native aspect ratio, so the zero-crop box
   needs to match it at this breakpoint specifically. */
@media (min-width:1025px){
  .ph--hero{ --ar:1536/1024; }
}
.ph--portrait{ --ar:3/4; }
.ph--artist{ --ar:3/4; }
.ph--event{ --ar:16/10; }
.ph--stage{ --ar:16/9; position:absolute; inset:0; height:100%; width:100%; border:none; }
.ph--map{ --ar:4/3; }
.ph--reserve{ --ar:16/9; position:absolute; inset:0; height:100%; width:100%; border:none; }

/* =========================================================================
   Navigation
   ========================================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .3s var(--ease);
  padding:22px 0;
}
.nav.is-scrolled{
  background:rgba(10,10,11,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-border);
  padding:14px 0;
}
.nav__inner{
  max-width:1440px;
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; }
.nav__emblem{ width:34px; height:34px; flex-shrink:0; color:var(--c-gold); }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.nav__brand-en{
  font-family:var(--f-serif);
  font-size:19px;
  letter-spacing:0.03em;
  color:var(--c-ivory);
}
.nav__brand-ja{
  font-family:var(--f-ja-serif);
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--c-gold);
  margin-top:2px;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px;
  letter-spacing:0.06em;
}
.nav__links a{
  color:var(--c-text-mid);
  transition:color .25s var(--ease);
  position:relative;
}
.nav__links a:hover{ color:var(--c-gold-light); }
.nav__links a.ja{ font-family:var(--f-ja-sans); }
.nav__actions{ display:flex; align-items:center; gap:22px; }
.nav__burger{
  display:none;
  position:relative;
  z-index:101;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:6px;
}
.nav__burger span{ width:22px; height:1px; background:var(--c-ivory); display:block; transition:transform .3s var(--ease), opacity .3s var(--ease); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:14px 30px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn .ja{ font-family:var(--f-ja-sans); letter-spacing:0.06em; }
.btn--gold{
  background:linear-gradient(135deg, var(--c-gold-light), var(--c-gold));
  color:#1a1305;
  box-shadow:0 0 0 rgba(201,162,75,0);
}
.btn--gold:hover{
  box-shadow:0 6px 28px rgba(201,162,75,0.45);
  transform:translateY(-1px);
}
.btn--gold .btn__arrow{ transition:transform .35s var(--ease); }
.btn--gold:hover .btn__arrow{ transform:translateX(4px); }
.btn__arrow{ width:15px; height:15px; }
.btn--nav{ padding:11px 22px; font-size:12px; }
.btn--xl{ padding:20px 48px; font-size:14px; }
.btn--sm{ padding:10px 20px; font-size:11px; margin-top:18px; }
.btn--block{ width:100%; }
.btn--gold-outline{
  background:transparent;
  color:var(--c-gold-light);
  border-color:var(--c-border-2);
}
.btn--gold-outline:hover{ background:rgba(201,162,75,0.08); border-color:var(--c-gold); }

/* =========================================================================
   Typography helpers
   ========================================================================= */
.kicker{
  font-family:var(--f-sans);
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--c-gold);
  margin-bottom:18px;
}
.kicker--light{ color:var(--c-gold-light); }
.kicker .ja{ font-family:var(--f-ja-sans); letter-spacing:0.1em; }
.eyebrow{
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--c-gold-light);
  margin-bottom:28px;
}
.eyebrow .ja{ font-family:var(--f-ja-sans); letter-spacing:0.12em; }
.display{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(32px, 4vw, 52px);
  line-height:1.15;
  color:var(--c-ivory);
}
.display .ja{ font-family:var(--f-ja-serif); font-weight:500; font-size:0.72em; display:block; margin-top:10px; letter-spacing:0.02em; }
.display--light{ color:var(--c-ivory); }
.display--xl{ font-size:clamp(38px, 5.5vw, 68px); }
.section-head{ max-width:720px; margin:0 auto 64px; text-align:center; }
.section-sub{ margin-top:20px; font-size:16px; color:var(--c-text-mid); }
.section-sub .ja{ font-family:var(--f-ja-sans); }
.body-copy p{
  font-size:17px;
  color:var(--c-text-mid);
  margin-bottom:20px;
  max-width:52ch;
}
.body-copy .ja{ font-family:var(--f-ja-sans); line-height:1.9; }
.body-copy .emphasis{ color:var(--c-ivory); font-family:var(--f-serif); font-style:italic; font-size:20px; }
.body-copy .emphasis.ja{ font-family:var(--f-ja-serif); font-style:normal; font-size:18px; }
.body-copy--light p{ color:rgba(244,239,230,0.82); }
.body-copy--light .emphasis{ color:var(--c-gold-light); }
.body-copy--center{ margin:0 auto; text-align:center; }
.body-copy--center p{ max-width:60ch; margin-left:auto; margin-right:auto; }
.editable .en, .editable .ja{ color:var(--c-text-low); font-style:italic; font-size:15px; }

/* =========================================================================
   Hero
   ========================================================================= */
/* Hero: the group photo is shown complete (zero crop) at its native
   aspect ratio on every breakpoint, with the title/tagline text
   flowing below it rather than overlaid on top. A wide photo like
   this one can't be both "fully visible" and "overlaid with a full
   text block" on a narrow phone screen — the box would have to be
   too short to fit the text. Stacking image-then-text sidesteps that
   entirely and stays consistent across desktop/tablet/mobile. */
.hero{
  position:relative;
  overflow:hidden;
  text-align:center;
}
.hero__bg{ position:relative; width:100%; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,0) 82%, rgba(10,10,11,0.7) 100%);
}
.hero__content{ position:relative; z-index:2; max-width:920px; margin:0 auto; padding:48px var(--gutter) 0; }
.hero__title{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:28px; }
.hero__title-en{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(48px, 9vw, 108px);
  letter-spacing:0.01em;
  color:var(--c-ivory);
  line-height:1;
}
.hero__title-ja{
  font-family:var(--f-ja-serif);
  font-weight:500;
  font-size:clamp(18px, 2.4vw, 28px);
  letter-spacing:0.28em;
  color:var(--c-gold-light);
}
.hero__message{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(22px, 2.6vw, 32px);
  color:var(--c-gold-light);
  margin-bottom:22px;
}
.hero__message .ja{ font-family:var(--f-ja-serif); font-style:normal; letter-spacing:0.03em; }
.hero__sub{ font-size:17px; color:var(--c-text-mid); max-width:56ch; margin:0 auto; }
.hero__sub .ja{ font-family:var(--f-ja-sans); }
.hero__performers{
  position:relative; z-index:2;
  margin-top:48px;
  padding:0 var(--gutter) 56px;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--c-text-low);
  text-align:center;
}
.hero__performers .ja{ font-family:var(--f-ja-sans); letter-spacing:0.06em; text-transform:none; }

/* =========================================================================
   About
   ========================================================================= */
.about{ position:relative; padding:var(--section-pad) 0; overflow:hidden; }
.about__ja-bg{
  position:absolute; top:-4%; right:-4%;
  font-family:var(--f-ja-serif);
  font-size:min(24vw, 300px);
  font-weight:700;
  color:rgba(244,239,230,0.02);
  writing-mode:vertical-rl;
  pointer-events:none;
  z-index:0;
}
.about__grid{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:center; }
.about__copy h2{ margin-bottom:28px; }

/* Icon row — sensory pillars (Rhythm / Breath / Movement / Memory) */
.icon-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
  margin-top:44px;
  padding-top:40px;
  border-top:1px solid var(--c-border);
}
.icon-row__icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border:1px solid var(--c-border-2);
  border-radius:50%;
  color:var(--c-gold);
  margin-bottom:16px;
}
.icon-row__icon svg{ width:24px; height:24px; }
.icon-row__item h4{ font-family:var(--f-serif); font-size:17px; color:var(--c-ivory); margin-bottom:6px; }
.icon-row__item h4 .ja{ font-family:var(--f-ja-serif); }
.icon-row__item p{ font-size:13px; color:var(--c-text-mid); line-height:1.6; }
.icon-row__item p .ja{ font-family:var(--f-ja-sans); }

/* =========================================================================
   Event
   ========================================================================= */
.event{ padding:var(--section-pad) 0; background:var(--c-charcoal); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.event__grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:80px; align-items:start; }
.event__intro .display{ margin-bottom:24px; }
.event__intro .btn{ margin-top:8px; }
.event__card{ background:var(--c-black); border:1px solid var(--c-border); }
.event__row{ display:flex; gap:18px; padding:26px 28px; border-bottom:1px solid var(--c-border); }
.event__icon{ flex-shrink:0; width:24px; height:24px; color:var(--c-gold); margin-top:2px; }
.event__icon svg{ width:100%; height:100%; }
.event__row h3{ font-family:var(--f-sans); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-gold-light); margin-bottom:8px; }
.event__row h3 .ja{ font-family:var(--f-ja-sans); letter-spacing:0.08em; }
.event__row p{ font-size:14.5px; color:var(--c-text-mid); line-height:1.7; }
.event__row p .ja{ font-family:var(--f-ja-sans); }
.event__photo{ padding:16px; }

/* =========================================================================
   Artists
   ========================================================================= */
.artists{ padding:var(--section-pad) 0; background:var(--c-black); }
.artist-gallery{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2px;
  background:var(--c-border);
  border:1px solid var(--c-border);
}
.artist-card{
  background:var(--c-black);
  display:flex;
  flex-direction:column;
  flex:1 1 calc(20% - 1.6px);
  max-width:calc(20% - 1.6px);
}
.artist-card__body{ padding:32px 28px 40px; position:relative; }
.artist-card__index{
  position:absolute; top:-22px; right:28px;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:15px;
  color:var(--c-gold);
  background:var(--c-black);
  padding:0 8px;
}
.artist-card__name{ font-family:var(--f-serif); font-size:26px; color:var(--c-ivory); margin-bottom:4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.artist-card__name .ja{ font-family:var(--f-ja-serif); font-size:0.6em; color:var(--c-gold-light); letter-spacing:0.06em; }
.artist-card__role{ font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-gold); margin-bottom:18px; }
.artist-card__role .ja{ font-family:var(--f-ja-sans); text-transform:none; letter-spacing:0.04em; }
.artist-card__profile{ font-size:14.5px; color:var(--c-text-mid); line-height:1.75; margin-bottom:18px; }
.artist-card__profile .ja{ font-family:var(--f-ja-sans); }
.artist-card__tags{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-text-low); border-top:1px solid var(--c-border); padding-top:16px; }

/* =========================================================================
   Haneda Stage (full-bleed)
   ========================================================================= */
.stage{ position:relative; padding:calc(var(--section-pad) + 40px) 0; overflow:hidden; background:var(--c-teal); }
.stage__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,26,28,0.95) 22%, rgba(8,26,28,0.68) 65%, rgba(8,26,28,0.4) 100%),
    linear-gradient(0deg, rgba(16,55,58,0.4), transparent 55%);
}
.stage__content{ position:relative; z-index:1; max-width:640px; }
.stage__content .display{ margin-bottom:28px; }
.stage__tiat-mark{
  margin-top:32px;
  font-family:var(--f-sans);
  font-size:13px;
  letter-spacing:0.3em;
  color:var(--c-gold-light);
  text-transform:uppercase;
}
.stage__tiat-mark span{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  letter-spacing:0.12em;
  color:rgba(244,239,230,0.55);
  text-transform:none;
}

/* =========================================================================
   Access
   ========================================================================= */
.access{ padding:var(--section-pad) 0; background:var(--c-navy); }
.access__grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.access__venue{ font-family:var(--f-serif); font-size:32px; color:var(--c-ivory); margin-top:24px; }
.access__venue-sub{ font-size:14px; color:var(--c-text-mid); margin:6px 0 32px; }
.access__venue-sub .ja{ font-family:var(--f-ja-sans); }
.access__list{ margin-bottom:36px; }
.access__list li{
  font-size:14.5px;
  color:var(--c-text-mid);
  padding:16px 0;
  border-top:1px solid var(--c-border);
}
.access__list li:last-child{ border-bottom:1px solid var(--c-border); }
.access__list .ja{ font-family:var(--f-ja-sans); }

/* =========================================================================
   Contact
   ========================================================================= */
.contact{ padding:var(--section-pad) 0; background:var(--c-black); }
.contact-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; max-width:680px; margin:0 auto; }
.contact-grid--single{ grid-template-columns:1fr; max-width:360px; }
.contact-card{
  display:block;
  background:var(--c-charcoal);
  border:1px solid var(--c-border);
  padding:36px 32px;
  text-align:center;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.contact-card:hover{ border-color:var(--c-border-2); transform:translateY(-2px); }
.contact-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid var(--c-border-2);
  color:var(--c-gold);
  margin-bottom:18px;
}
.contact-card__icon svg{ width:22px; height:22px; }
.contact-card h3{ font-family:var(--f-sans); font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--c-gold-light); margin-bottom:10px; }
.contact-card h3 .ja{ font-family:var(--f-ja-sans); letter-spacing:0.08em; }
.contact-card p{ font-size:14px; }
.contact__social{ justify-content:center; margin-top:48px; }

/* =========================================================================
   Reserve CTA
   ========================================================================= */
.reserve{ position:relative; padding:calc(var(--section-pad) + 60px) 0; overflow:hidden; text-align:center; }
.reserve__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(10,10,11,0.5), rgba(10,10,11,0.88) 75%),
    linear-gradient(180deg, rgba(10,10,11,0.65), rgba(10,10,11,0.95));
}
.reserve__content{ position:relative; z-index:1; max-width:760px; }
.reserve__content .display{ margin-bottom:28px; }
.reserve__content .body-copy{ margin-bottom:44px; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer{ background:var(--c-black); border-top:1px solid var(--c-border); padding:80px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.1fr 2fr auto; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--c-border); }
.footer__brand-mark{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.footer__brand-mark .nav__emblem{ width:32px; height:32px; }
.footer__brand-en{ font-family:var(--f-serif); font-size:24px; color:var(--c-ivory); display:block; }
.footer__brand-ja{ font-family:var(--f-ja-serif); font-size:12px; color:var(--c-gold); letter-spacing:0.14em; display:block; margin-top:2px; }
.footer__tagline{ font-size:13px; color:var(--c-text-low); }
.footer__tagline .ja{ font-family:var(--f-ja-sans); }
.footer__tagline .en{ display:block; }
.footer__tagline .ja{ display:block; margin-top:4px; }
.footer__nav{ display:flex; gap:56px; font-size:13.5px; }
.footer__nav-col{ display:flex; flex-direction:column; gap:14px; }
.footer__nav a{ color:var(--c-text-mid); transition:color .25s var(--ease); }
.footer__nav a:hover{ color:var(--c-gold-light); }
.footer__nav a .ja{ font-family:var(--f-ja-sans); }
.footer__social{ display:flex; gap:16px; align-items:flex-start; }
.footer__social a{ width:34px; height:34px; border:1px solid var(--c-border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--c-text-mid); transition:all .25s var(--ease); }
.footer__social a svg{ width:16px; height:16px; }
.footer__social a:hover{ border-color:var(--c-gold); color:var(--c-gold-light); }
.footer__bottom{ padding:26px var(--gutter); text-align:center; font-size:12px; color:var(--c-text-low); letter-spacing:0.04em; }

/* =========================================================================
   Mobile Sticky CTA
   ========================================================================= */
.sticky-cta{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(10,10,11,0.92);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--c-border-2);
}
.sticky-cta .btn{ padding:15px; font-size:13px; }

/* =========================================================================
   Scroll reveal
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================================
   3D Depth — cursor tilt & scroll parallax (CSS/vanilla-JS, no libraries)
   ========================================================================= */
@media (hover:hover) and (pointer:fine){
  .tilt{
    transition:transform .15s ease-out, box-shadow .3s var(--ease);
    will-change:transform;
  }
  .tilt:hover{
    box-shadow:0 26px 50px -18px rgba(0,0,0,0.6);
    z-index:2;
  }
}
.parallax-img{ will-change:transform; }

/* =========================================================================
   Responsive — Tablet (≤1024px design target 768)
   ========================================================================= */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .icon-row{ grid-template-columns:repeat(2, 1fr); gap:32px; }
  .about__grid{ grid-template-columns:1fr; gap:48px; }
  .about__visual{ max-width:420px; }
  .event__grid{ grid-template-columns:1fr; gap:48px; }
  .artist-card{ flex-basis:calc(50% - 1px); max-width:calc(50% - 1px); }
  .access__grid{ grid-template-columns:1fr; gap:48px; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__nav{ grid-column:1 / -1; gap:40px; }
  .footer__social{ grid-column:1 / -1; }
}

/* Mobile nav drawer */
@media (max-width:1024px){
  .nav__links{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 340px);
    background:var(--c-charcoal);
    padding:110px 40px 40px;
    gap:26px;
    font-size:16px;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    border-left:1px solid var(--c-border);
    z-index:99;
  }
  body.nav-open .nav__links{ transform:translateX(0); }
  .nav__burger span:nth-child(1){ transform-origin:left; }
  body.nav-open .nav__burger span:nth-child(1){ transform:rotate(45deg) translate(1px,-1px); }
  body.nav-open .nav__burger span:nth-child(2){ opacity:0; }
  body.nav-open .nav__burger span:nth-child(3){ transform:rotate(-45deg) translate(1px,1px); }
}

/* =========================================================================
   Responsive — Mobile (≤480px design target 390)
   ========================================================================= */
@media (max-width:640px){
  body{ padding-bottom:76px; }
  .sticky-cta{ display:block; }
  .nav__actions .btn--nav{ display:none; }
  .icon-row{ grid-template-columns:1fr; gap:28px; }
  .event__row{ padding:22px 20px; }
  .contact-grid{ grid-template-columns:1fr; }
  .artist-card{ flex-basis:100%; max-width:100%; }
  .footer__grid{ grid-template-columns:1fr; gap:36px; }
  .footer__nav{ flex-wrap:wrap; gap:32px; }
  .hero__content{ padding:32px 24px 0; }
  .hero__performers{ padding:0 24px 40px; margin-top:32px; }
  .hero__title{ margin-bottom:18px; }
  .hero__title-en{ font-size:clamp(40px, 14vw, 64px); }
  .hero__message{ margin-bottom:14px; }
  .section-inner{ padding-left:24px; padding-right:24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
  .tilt{ transition:none !important; }
}