/* =========================================================
   SHIBUYA MIYASHITA PARK BON DANCE 2026
   Theme: 渋谷カルチャー × 盆踊り × 音楽フェス
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:        #0a0705;   /* warm night black (KV) */
  --bg-2:      #130c08;
  --surface:   #1c1109;
  --line:      rgba(255,255,255,.10);
  --ink:       #f7f1e8;   /* off white (logo white) */
  --ink-dim:   #b9a897;

  --red:       #e2261d;   /* 幟の赤 / logo red */
  --amber:     #ffb029;   /* 提灯 lantern gold */
  --orange:    #ff7d1f;   /* warm lantern glow */
  --deep-red:  #8f1410;

  --grad-fes:  linear-gradient(100deg, var(--red), var(--orange) 55%, var(--amber));

  --font-en:   "Bebas Neue", sans-serif;
  --font-jp:   "Noto Sans JP", sans-serif;
  --font-min:  "Shippori Mincho", serif;

  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 48px);
  --header-h: 64px;
}

/* ---------- Reset-ish ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-jp);
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
  overflow-x:hidden;
  -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,dl,dd{ margin:0; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,10vw,120px); position:relative; }

/* subtle grain / gradient backdrop alternating */
.section:nth-of-type(even){ background:var(--bg-2); }

.section__head{ margin-bottom:clamp(32px,5vw,56px); }
.section__label{
  font-family:var(--font-en); letter-spacing:.22em; font-size:.95rem;
  color:var(--amber); display:inline-block; margin-bottom:.6rem;
  position:relative; padding-left:2.4rem;
}
.section__label::before{
  content:""; position:absolute; left:0; top:50%; width:2rem; height:2px;
  background:var(--grad-fes);
}
.section__title{
  font-family:var(--font-min); font-weight:800;
  font-size:clamp(1.7rem, 5vw, 2.9rem); line-height:1.25; letter-spacing:.01em;
}
.section__desc{ margin-top:1rem; color:var(--ink-dim); font-size:.95rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:.9rem; letter-spacing:.02em;
  padding:.85em 1.6em; border-radius:999px; transition:transform .2s ease, box-shadow .2s ease, background .2s;
  white-space:nowrap;
}
.btn--lg{ padding:1.05em 2em; font-size:1rem; }
.btn--ig{
  background:var(--grad-fes); color:#fff;
  box-shadow:0 8px 30px -8px rgba(226,38,29,.55);
}
.btn--ig:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -8px rgba(255,125,31,.6); }
.btn--ghost{
  border:1.5px solid rgba(255,255,255,.35); color:var(--ink); background:rgba(255,255,255,.02);
}
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }
/* icon-only button (X etc.) */
.btn--icon{
  padding:0; width:2.9em; height:2.9em; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35); color:var(--ink); background:rgba(255,255,255,.03);
  flex:0 0 auto;
}
.btn--icon:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px); }
.btn--icon-lg{ width:3.35em; height:3.35em; }

/* =========================================================
   Header / Nav
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:rgba(10,7,5,.85); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header__inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.header__logo{ display:flex; align-items:center; gap:.55rem; }
.header__logo-jp{
  font-family:var(--font-min); font-weight:800; font-size:1.35rem;
  background:var(--grad-fes); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.header__logo-en{ font-family:var(--font-en); letter-spacing:.14em; font-size:1.05rem; color:var(--ink); }
.header__logo-en b{ color:var(--amber); }

.nav__list{ display:flex; align-items:center; gap:clamp(.8rem,1.8vw,1.6rem); }
.nav__link{
  font-size:.85rem; font-weight:500; letter-spacing:.05em; color:var(--ink); position:relative; padding-block:.3rem;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--grad-fes); transition:width .25s ease;
}
.nav__link:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:.5rem; }
.nav__cta .btn--ig{ padding:.5em 1.1em; font-size:.8rem; }
.nav__cta .btn--icon{ width:34px; height:34px; }

/* Hamburger */
.hamburger{
  display:none; width:44px; height:44px; position:relative; z-index:110; margin-right:-8px;
}
.hamburger span{
  position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.hamburger span:nth-child(1){ top:15px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:27px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 4vh) var(--pad) clamp(96px,13vh,140px);
  overflow:hidden; isolation:isolate;
}
/* Key visual background */
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  animation:kvZoom 22s ease-in-out infinite alternate;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(10,7,5,.30) 0%, rgba(10,7,5,0) 30%, rgba(10,7,5,.62) 72%, rgba(10,7,5,.94) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(226,38,29,.18), transparent 60%);
}
@keyframes kvZoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }

.hero__inner{ max-width:var(--wrap); margin-inline:auto; width:100%; position:relative; }
.hero__eyebrow{
  font-family:var(--font-en); letter-spacing:.22em; color:var(--amber); font-size:clamp(.85rem,2.4vw,1.25rem);
  margin-bottom:.5rem; text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero__eyebrow span{ color:var(--red); padding-inline:.15em; }
.hero__year{
  font-family:var(--font-en); line-height:.9; font-size:clamp(4.5rem,17vw,11rem); letter-spacing:.02em;
  color:var(--ink); margin-bottom:1.2rem;
  background:var(--grad-fes); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55));
}

.hero__facts{
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; margin-bottom:2rem;
}
.hero__facts li{
  display:flex; align-items:center; gap:.7rem; font-size:clamp(.9rem,2.2vw,1.05rem); font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.hero__facts small{ font-size:.6em; color:var(--amber); margin-left:.15em; letter-spacing:.05em; }
.hero__facts-label{
  font-family:var(--font-en); letter-spacing:.15em; font-size:.7rem; color:#fff; text-shadow:none;
  background:var(--red); padding:.15em .65em; border-radius:4px;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* scroll indicator */
.hero__scroll{
  position:absolute; right:var(--pad); bottom:64px;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-en); letter-spacing:.25em; font-size:.7rem; color:var(--ink);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.hero__scroll-line{ width:1px; height:40px; background:linear-gradient(var(--amber),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-40px; left:0; width:100%; height:40px; background:var(--amber); animation:scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ to{ top:40px; } }

/* marquee */
.marquee{
  position:absolute; left:0; right:0; bottom:0; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02); padding-block:.7rem;
}
.marquee__track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee__track span{
  font-family:var(--font-en); letter-spacing:.15em; font-size:1rem; color:var(--ink-dim); white-space:nowrap;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =========================================================
   Concept
   ========================================================= */
.concept__title{
  font-family:var(--font-en); font-weight:400; letter-spacing:.04em; text-transform:none;
  font-size:clamp(1.7rem,4.8vw,3.1rem); line-height:1.15;
}
.concept__title span{ color:var(--red); padding-inline:.1em; }
.concept__lead{
  font-family:var(--font-min); font-weight:700; font-size:clamp(1.15rem,3.2vw,1.75rem);
  line-height:1.7; margin-bottom:1.6rem;
}
.concept__lead em{ font-style:normal; color:var(--amber); }
.concept__text{ color:var(--ink-dim); font-size:clamp(.95rem,2.4vw,1.05rem); margin-bottom:1.4rem; line-height:1.9; }
.pc-br{ display:inline; }
@media (max-width:600px){ .pc-br{ display:none; } }
.concept__catch{
  display:inline-block; font-family:var(--font-min); font-weight:800; font-size:clamp(1.2rem,3.6vw,1.9rem);
  background:var(--grad-fes); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================================================
   Outline
   ========================================================= */
.outline__list{ border-top:1px solid var(--line); }
.outline__row{
  display:grid; grid-template-columns:180px 1fr; gap:1rem; align-items:baseline;
  padding-block:1.3rem; border-bottom:1px solid var(--line);
}
.outline__row dt{
  font-family:var(--font-en); letter-spacing:.1em; color:var(--amber); font-size:1rem;
  font-weight:400;
}
.outline__row dd{ font-size:clamp(1rem,2.6vw,1.25rem); font-weight:700; }
.tag{
  display:inline-block; font-size:.65em; font-weight:700; padding:.15em .5em; border-radius:4px;
  border:1px solid var(--line); margin-inline:.25em; vertical-align:middle; letter-spacing:.05em;
}
.tag--accent{ background:var(--amber); color:var(--bg); border-color:var(--amber); }
.note{ font-size:.75em; color:var(--red); font-weight:500; margin-left:.6em; }

/* =========================================================
   Contents cards
   ========================================================= */
/* Category groups (追加していけるコンテンツ) */
.cgroups{ display:flex; flex-direction:column; gap:clamp(30px,5vw,52px); }
.cgroup{ border-top:1px solid var(--line); padding-top:clamp(20px,3vw,30px); }
.cgroup__head{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:.2rem 1.1rem; margin-bottom:1.4rem;
}
.cgroup__no{
  grid-row:1 / span 2; font-family:var(--font-en); font-size:clamp(2.4rem,6vw,3.6rem); line-height:.9;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28);
}
.cgroup__titles{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.cgroup__title{ font-family:var(--font-en); letter-spacing:.05em; font-size:clamp(1.5rem,3.6vw,2.1rem); }
.cgroup__en{ color:var(--amber); font-size:.82rem; font-weight:700; letter-spacing:.06em; }
.cgroup__lead{ grid-column:2; color:var(--ink-dim); font-size:.92rem; line-height:1.7; }

/* lineup grid = 写真＋名前の項目（写真を大きく見せる） */
.lineup{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:clamp(16px,2.4vw,28px);
}
.litem{
  display:flex; flex-direction:column; gap:.8rem; padding:0; background:none; text-align:left; cursor:pointer;
}
.litem__thumb{
  display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--surface), #2a1a10); border:1px solid var(--line);
  box-shadow:0 12px 30px -18px rgba(0,0,0,.8); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.litem__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.litem__thumb::after{
  content:"＋ 詳しくみる"; position:absolute; left:0; right:0; bottom:0; padding:.9rem;
  font-size:.85rem; font-weight:700; color:#fff; text-align:center; letter-spacing:.02em;
  background:linear-gradient(transparent, rgba(226,38,29,.9)); opacity:0; transition:opacity .3s ease;
}
.litem:hover .litem__thumb, .litem:focus-visible .litem__thumb{
  transform:translateY(-5px); border-color:rgba(255,125,31,.5); box-shadow:0 24px 46px -22px rgba(226,38,29,.6);
}
.litem:hover .litem__thumb img, .litem:focus-visible .litem__thumb img{ transform:scale(1.06); }
.litem:hover .litem__thumb::after, .litem:focus-visible .litem__thumb::after{ opacity:1; }
.litem__name{ font-weight:700; font-size:1.08rem; line-height:1.45; }
.lineup__soon{
  grid-column:1 / -1; color:var(--ink-dim); font-size:.9rem;
  border:1px dashed var(--line); border-radius:12px; text-align:center; padding-block:1.6rem;
}

/* Content detail popup */
.cmodal{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,4,3,.94); backdrop-filter:blur(6px); padding:clamp(14px,4vw,48px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cmodal.is-open{ opacity:1; visibility:visible; }
.cmodal__panel{
  position:relative; width:min(760px,100%); max-height:90vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  transform:scale(.96) translateY(8px); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cmodal.is-open .cmodal__panel{ transform:none; }
.cmodal__media{ background:#000; }
.cmodal__img{ width:100%; max-height:56vh; object-fit:contain; display:block; }
.cmodal__body{ padding:clamp(18px,3vw,30px); }
.cmodal__title{ font-family:var(--font-min); font-weight:800; font-size:clamp(1.2rem,3vw,1.7rem); margin-bottom:.7rem; }
.cmodal__desc{ color:var(--ink-dim); font-size:.98rem; line-height:1.9; white-space:pre-line; }
.cmodal__close{
  position:absolute; top:12px; right:12px; width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; font-size:1.8rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.cmodal__close:hover{ background:var(--red); }

/* =========================================================
   Gallery
   ========================================================= */
.gallery__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
}
.gallery__item{
  margin:0; padding:0; aspect-ratio:1/1; border-radius:12px; overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--surface), #2a1a10);
  border:1px solid var(--line); cursor:pointer; display:block;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.gallery__item::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(226,38,29,.35));
  opacity:0; transition:opacity .3s ease;
}
.gallery__item:hover img,
.gallery__item:focus-visible img{ transform:scale(1.08); }
.gallery__item:hover::after,
.gallery__item:focus-visible::after{ opacity:1; }
/* placeholder shown only when a tile has no <img> (未配置時のフォールバック) */
.gallery__item:not(:has(img))::before{
  content:attr(data-ph);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-jp); font-weight:700; font-size:.85rem; color:var(--ink-dim);
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,4,3,.94); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; padding:clamp(12px,4vw,48px);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:scale(.96); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.lightbox.is-open .lightbox__img{ transform:scale(1); }
.lightbox__close, .lightbox__nav{
  position:absolute; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  width:52px; height:52px; border-radius:50%; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;
}
.lightbox__close:hover, .lightbox__nav:hover{ background:var(--red); border-color:var(--red); transform:scale(1.06); }
.lightbox__close{ top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); font-size:2rem; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox__prev{ left:clamp(8px,2vw,24px); }
.lightbox__next{ right:clamp(8px,2vw,24px); }
@media (max-width:600px){
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__prev{ left:6px; } .lightbox__next{ right:6px; }
}

/* =========================================================
   Access
   ========================================================= */
.access__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,48px); align-items:start; }
.access__place{ font-family:var(--font-min); font-weight:800; font-size:clamp(1.25rem,3.2vw,1.7rem); line-height:1.4; margin-bottom:1.5rem; }
.access__dl > div{ padding-block:.9rem; border-top:1px solid var(--line); }
.access__dl dt{ font-family:var(--font-en); letter-spacing:.1em; color:var(--amber); font-size:.9rem; margin-bottom:.3rem; }
.access__dl dd{ color:var(--ink-dim); font-size:.95rem; }
.access__dl{ margin-bottom:1.6rem; }
.access__map{ position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.access__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.05); }

/* =========================================================
   Organizer / Sponsors
   ========================================================= */
.org-block{ margin-bottom:clamp(28px,4vw,44px); }
.org-block__title{
  font-family:var(--font-min); font-weight:700; font-size:1.15rem; margin-bottom:1.1rem;
  display:flex; align-items:baseline; gap:.7rem;
}
.org-block__title span{ font-family:var(--font-en); letter-spacing:.14em; font-size:.75rem; color:var(--amber); font-weight:400; }
.logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.logo-item{
  aspect-ratio:16/7; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:.5rem; font-size:.85rem; font-weight:700; color:var(--ink-dim);
}
/* 実ロゴが入るタイルは白地にして、黒・カラーのロゴがはっきり見えるようにする */
.logo-item:has(img){ background:#fff; padding:1rem 1.3rem; }
.logo-item img{ max-height:100%; max-width:100%; object-fit:contain; }
.logo-item:not(:has(img))::before{ content:attr(data-ph); }
.logos--text .logo-item{ aspect-ratio:auto; padding:.9rem 1.4rem; color:var(--ink); font-size:1rem; }

/* =========================================================
   Archive
   ========================================================= */
.archive__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(14px,2vw,20px); }
.archive__card{
  position:relative; display:flex; align-items:center; gap:1rem; padding:2rem 1.8rem;
  border-radius:16px; border:1px solid var(--line); overflow:hidden;
  background:linear-gradient(120deg, var(--surface), rgba(24,13,38,.3));
  transition:transform .3s ease, border-color .3s ease;
}
.archive__card:hover{ transform:translateY(-4px); border-color:var(--amber); }
.archive__year{ font-family:var(--font-en); font-size:2.8rem; line-height:1; color:var(--amber); }
.archive__label{ font-weight:700; font-size:.95rem; }
.archive__arrow{ margin-left:auto; font-size:1.4rem; color:var(--amber); transition:transform .3s ease; }
.archive__card:hover .archive__arrow{ transform:translateX(6px); }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:clamp(48px,7vw,72px); }
.footer__inner{ display:flex; flex-wrap:wrap; gap:2rem 3rem; justify-content:space-between; align-items:flex-start; padding-bottom:2.5rem; }
.footer__brand{ display:flex; align-items:center; gap:1rem; }
.footer__logo-jp{
  font-family:var(--font-min); font-weight:800; font-size:2.4rem;
  background:var(--grad-fes); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer__logo-en{ font-family:var(--font-en); letter-spacing:.12em; font-size:.95rem; color:var(--ink-dim); line-height:1.4; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; }
.footer__nav a{ font-size:.85rem; font-weight:500; color:var(--ink-dim); transition:color .2s; }
.footer__nav a:hover{ color:var(--amber); }
.footer__bottom{ border-top:1px solid var(--line); padding-block:1.4rem; }
.footer__copy{ text-align:center; font-family:var(--font-en); letter-spacing:.15em; font-size:.8rem; color:var(--ink-dim); }

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.card.reveal{ transition-delay:calc(var(--i,0) * 80ms); }

/* =========================================================
   Responsive — mobile first drawer nav
   ========================================================= */
@media (max-width:900px){
  .hamburger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:105;
    background:rgba(10,7,5,.97); backdrop-filter:blur(12px);
    display:flex; align-items:center; justify-content:center;
    transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1);
    visibility:hidden;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; }
  .nav__list{ flex-direction:column; gap:1.6rem; text-align:center; }
  .nav__link{ font-size:1.15rem; }
  .nav__cta{ margin-top:.5rem; justify-content:center; }
  .nav__cta .btn--ig{ font-size:1rem; padding:.8em 1.8em; }
  .nav__cta .btn--icon{ width:44px; height:44px; }
}

@media (max-width:600px){
  .outline__row{ grid-template-columns:1fr; gap:.2rem; }
  .outline__row dt{ font-size:.85rem; }
  .access__grid{ grid-template-columns:1fr; }
  .footer__inner{ flex-direction:column; }

  /* Hero: keep overlay compact so the KV logo above stays clear */
  .hero{ padding-bottom:82px; }
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(10,7,5,.28) 0%, rgba(10,7,5,.05) 20%, rgba(10,7,5,.5) 52%, rgba(10,7,5,.97) 100%),
      radial-gradient(120% 70% at 50% 120%, rgba(226,38,29,.2), transparent 60%);
  }
  .hero__eyebrow{ font-size:.72rem; letter-spacing:.14em; margin-bottom:.4rem; }
  .hero__year{ font-size:3.6rem; margin-bottom:.7rem; }
  .hero__facts{ flex-direction:column; align-items:flex-start; gap:.55rem; margin-bottom:1.4rem; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__scroll{ display:none; }
}

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