/* ============================================================
   野田雄一 / Yuichi Noda — Glass as Universe
   深宇宙の夜空に光を差す、ギャラリー空間のような装丁
   ============================================================ */

:root{
  /* Colors */
  --bg-0:       #050A14;
  --bg-1:       #0A0E1A;
  --bg-2:       #0F1626;
  --line:       rgba(255,255,255,0.10);
  --line-soft:  rgba(255,255,255,0.05);
  --text:       #FFFFFF;
  --text-sub:   #B0BEC5;
  --text-mute:  #6B7a8a;
  --accent-blue:  #4FC3F7;
  --accent-purple:#9C6CF4;
  --accent-teal:  #26D0CE;

  /* Aurora gradient */
  --aurora: linear-gradient(120deg, #4FC3F7 0%, #9C6CF4 55%, #26D0CE 100%);
  --aurora-soft: linear-gradient(120deg, rgba(79,195,247,0.55), rgba(156,108,244,0.55), rgba(38,208,206,0.55));

  /* Fonts */
  --f-en:       "Cormorant Garamond", "Noto Serif JP", serif;
  --f-jp-serif: "Noto Serif JP", "Cormorant Garamond", serif;
  --f-jp-sans:  "Noto Sans JP", "Helvetica Neue", sans-serif;

  /* Layout */
  --max:        1360px;
  --pad-x:      clamp(20px, 5vw, 80px);
  --section-py: clamp(100px, 14vh, 180px);
  --radius:     2px;

  /* Motion */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-2: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ───── Base ───── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(156,108,244,0.10), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(79,195,247,0.08), transparent 55%),
    radial-gradient(1000px 800px at 50% 110%, rgba(38,208,206,0.06), transparent 60%),
    var(--bg-0);
  color:var(--text);
  font-family:var(--f-jp-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  letter-spacing:0.03em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:0.02em; }
p{ margin:0; }
ol,ul,dl,dd{ margin:0; padding:0; list-style:none; }

::selection{ background:rgba(79,195,247,0.35); color:#fff; }

/* Grain overlay — 全体に粒子感を重ねて深度を出す */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px var(--pad-x);
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding:14px var(--pad-x);
  background:rgba(5,10,20,0.72);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:30px;
}
.nav__logo{
  display:flex; flex-direction:column; gap:2px; line-height:1;
}
.nav__logo-jp{
  font-family:var(--f-jp-serif);
  font-size:15px; letter-spacing:0.3em;
}
.nav__logo-en{
  font-family:var(--f-en);
  font-size:11px; font-style:italic;
  color:var(--text-sub); letter-spacing:0.25em;
}
.nav__menu{ display:flex; gap:clamp(18px, 2.6vw, 38px); }
.nav__menu a{
  position:relative;
  font-family:var(--f-en);
  font-size:13px; letter-spacing:0.22em;
  color:var(--text-sub);
  padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--aurora);
  transition:width .4s var(--ease);
}
.nav__menu a:hover{ color:var(--text); }
.nav__menu a:hover::after{ width:100%; }

.nav__toggle{
  display:none;
  width:32px; height:24px; position:relative;
}
.nav__toggle span{
  position:absolute; left:0; right:0; height:1px; background:var(--text);
  transition:transform .4s var(--ease), opacity .3s var(--ease), top .3s var(--ease);
}
.nav__toggle span:nth-child(1){ top:4px; }
.nav__toggle span:nth-child(2){ top:12px; }
.nav__toggle span:nth-child(3){ top:20px; }
.nav__toggle.is-open span:nth-child(1){ top:12px; transform:rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ top:12px; transform:rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:0 var(--pad-x);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.55) saturate(1.05) contrast(1.02);
  transform:scale(1.06);
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,10,20,0.45) 0%, rgba(5,10,20,0.25) 35%, rgba(5,10,20,0.75) 100%),
    linear-gradient(90deg, rgba(5,10,20,0.65) 0%, transparent 55%);
}
.hero__aurora{
  position:absolute; left:-10%; top:-20%; width:60%; height:80%;
  background:var(--aurora);
  filter:blur(120px); opacity:0.22;
  animation:auroraFloat 20s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes auroraFloat{
  0%  { transform:translate(0,0) rotate(0deg); }
  100%{ transform:translate(120px, 80px) rotate(15deg); }
}

.hero__content{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; width:100%;
  padding-top:clamp(80px, 14vh, 160px);
  padding-bottom:clamp(80px, 10vh, 120px);
}
.hero__eyebrow{
  font-family:var(--f-en); font-style:italic; font-weight:300;
  color:var(--text-sub);
  letter-spacing:0.35em; font-size:13px;
  margin-bottom:clamp(24px, 4vh, 44px);
  opacity:0; animation:fadeUp 1.2s var(--ease) .3s forwards;
}
.hero__title{
  display:flex; flex-direction:column; gap:clamp(14px, 2.5vh, 22px);
  line-height:0.95;
}
.hero__title-en{
  font-family:var(--f-en);
  font-weight:400;
  font-size:clamp(58px, 11vw, 168px);
  letter-spacing:-0.01em;
  line-height:0.92;
  background:linear-gradient(180deg, #fff 40%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0; transform:translateY(40px);
  animation:fadeUp 1.6s var(--ease) .5s forwards;
}
.hero__title-jp{
  font-family:var(--f-jp-serif);
  font-weight:300;
  font-size:clamp(16px, 1.8vw, 22px);
  letter-spacing:0.4em;
  color:var(--text-sub);
  opacity:0; transform:translateY(30px);
  animation:fadeUp 1.4s var(--ease) 1s forwards;
}
.hero__name{
  margin-top:clamp(40px, 8vh, 80px);
  display:flex; align-items:baseline; gap:24px;
  border-top:1px solid var(--line);
  padding-top:22px;
  max-width:480px;
  opacity:0; animation:fadeUp 1.3s var(--ease) 1.3s forwards;
}
.hero__name-jp{
  font-family:var(--f-jp-serif);
  font-size:clamp(18px, 2vw, 22px);
  letter-spacing:0.35em;
}
.hero__name-en{
  font-family:var(--f-en); font-style:italic;
  font-size:14px; letter-spacing:0.2em;
  color:var(--text-sub);
}

.hero__scroll{
  position:absolute;
  right:var(--pad-x); bottom:36px; z-index:3;
  display:flex; align-items:center; gap:18px;
  color:var(--text-sub);
  font-family:var(--f-en); font-style:italic;
  font-size:12px; letter-spacing:0.3em;
  opacity:0; animation:fadeUp 1.2s var(--ease) 1.6s forwards;
}
.hero__scroll-line{
  display:block; width:60px; height:1px;
  background:var(--text-sub);
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; inset:0;
  background:var(--aurora);
  transform-origin:left;
  animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%  { transform:scaleX(0); transform-origin:left; }
  50% { transform:scaleX(1); transform-origin:left; }
  51% { transform:scaleX(1); transform-origin:right; }
  100%{ transform:scaleX(0); transform-origin:right; }
}

@keyframes fadeUp{
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   Section Shell
   ============================================================ */
.section{
  position:relative;
  padding:var(--section-py) var(--pad-x);
  max-width:var(--max);
  margin:0 auto;
}
.section__header{
  display:flex; align-items:baseline; gap:clamp(16px, 3vw, 40px);
  margin-bottom:clamp(50px, 8vh, 90px);
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.section__index{
  font-family:var(--f-en); font-style:italic;
  font-size:14px; letter-spacing:0.3em;
  color:var(--text-mute);
}
.section__title{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.section__title-en{
  font-family:var(--f-en); font-weight:400;
  font-size:clamp(36px, 5vw, 62px);
  letter-spacing:0.01em;
  line-height:1;
}
.section__title-jp{
  font-family:var(--f-jp-serif); font-weight:300;
  font-size:clamp(13px, 1.2vw, 15px);
  letter-spacing:0.4em;
  color:var(--text-sub);
}
.section__line{
  flex:1; height:1px; background:var(--line);
  margin-left:auto;
}

/* Reveal-on-scroll — JSで .is-visible を付与 */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   Exhibition
   ============================================================ */
.exhibition__list{ display:flex; flex-direction:column; gap:40px; }

.ex-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr 180px;
  gap:clamp(24px, 5vw, 60px);
  padding:clamp(36px, 5vw, 60px);
  background:linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.ex-card::before{
  /* 左端にオーロラのアクセントライン */
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px; background:var(--aurora);
  opacity:0.6;
}
.ex-card:hover{ border-color:rgba(255,255,255,0.2); }

.ex-card__badge{
  position:absolute; top:clamp(24px, 4vw, 40px); right:clamp(24px, 4vw, 40px);
  padding:7px 16px;
  font-family:var(--f-en);
  font-size:11px; letter-spacing:0.35em; text-transform:uppercase;
  background:var(--aurora);
  color:#050A14;
  font-weight:500;
  border-radius:100px;
  box-shadow:0 0 40px rgba(79,195,247,0.35);
  animation:badgePulse 3s ease-in-out infinite;
}
.ex-card__badge::before{ content:"● "; color:#050A14; font-size:8px; }

@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 30px rgba(79,195,247,0.3); }
  50%    { box-shadow:0 0 55px rgba(156,108,244,0.5); }
}

.ex-card__label{
  font-family:var(--f-en); font-style:italic;
  color:var(--text-sub); font-size:13px; letter-spacing:0.3em;
  margin-bottom:18px;
}
.ex-card__title{
  font-family:var(--f-jp-serif); font-weight:400;
  font-size:clamp(26px, 3.5vw, 44px);
  line-height:1.35; letter-spacing:0.05em;
  margin-bottom:36px;
}
.ex-card__title span{
  display:block;
  font-size:0.6em; color:var(--text-sub);
  margin-top:10px; letter-spacing:0.1em;
}

.ex-card__info{
  display:flex; flex-direction:column; gap:14px;
  max-width:640px;
}
.ex-card__info > div{
  display:grid; grid-template-columns:110px 1fr;
  gap:20px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--line-soft);
}
.ex-card__info dt{
  font-family:var(--f-jp-serif);
  font-size:13px; letter-spacing:0.25em;
  color:var(--text-sub);
}
.ex-card__info dd{
  font-size:15px; color:var(--text);
}
.ex-card__info a{
  border-bottom:1px solid var(--accent-blue);
  transition:color .3s var(--ease);
}
.ex-card__info a:hover{ color:var(--accent-blue); }

.exhibition__gallery{
  margin-top:clamp(32px, 5vw, 48px);
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:clamp(12px, 1.6vw, 18px);
}
.exhibition__shot{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
.exhibition__shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(5,10,20,0.18) 100%);
  pointer-events:none;
}
.exhibition__shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform 1.2s var(--ease), filter .8s var(--ease);
  filter:brightness(0.96) saturate(1.02);
}
.exhibition__shot:hover img{
  transform:scale(1.04);
  filter:brightness(1) saturate(1.08);
}
.exhibition__shot--01{
  grid-column:span 4;
  grid-row:span 2;
  min-height:clamp(280px, 42vw, 420px);
}
.exhibition__shot--02,
.exhibition__shot--03{
  grid-column:span 2;
  min-height:clamp(132px, 16vw, 200px);
}
.exhibition__shot--04,
.exhibition__shot--05{
  grid-column:span 3;
  min-height:clamp(160px, 18vw, 220px);
}

.ex-card__side{
  border-left:1px solid var(--line);
  padding-left:clamp(20px, 2.5vw, 30px);
  display:flex; flex-direction:column; justify-content:space-between;
  color:var(--text-mute);
}
.ex-card__side-label{
  font-family:var(--f-en); font-style:italic;
  font-size:12px; letter-spacing:0.35em; text-transform:uppercase;
}
.ex-card__side-num{
  font-family:var(--f-en);
  font-size:clamp(60px, 7vw, 100px);
  line-height:1; color:var(--text);
  opacity:0.15;
}

/* ============================================================
   Works
   ============================================================ */
.works__lead{
  font-family:var(--f-jp-serif);
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:2;
  color:var(--text-sub);
  max-width:600px;
  margin-bottom:clamp(60px, 10vh, 100px);
}
.works__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 1.8vw, 24px);
}
.work{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-2);
  cursor:pointer;
}
.work img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease), filter 1s var(--ease);
  filter:brightness(0.9) saturate(1.05);
}
.work::before{
  /* ホバー時に現れるオーロラグロー */
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--aurora-soft);
  mix-blend-mode:overlay;
  opacity:0; transition:opacity .8s var(--ease);
  pointer-events:none;
}
.work::after{
  /* 内側シャドウでガラス越しの感じ */
  content:""; position:absolute; inset:0; z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
  pointer-events:none;
}
.work figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:24px;
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-jp-serif);
  font-size:14px; letter-spacing:0.2em;
  color:#fff;
  background:linear-gradient(0deg, rgba(5,10,20,0.85) 0%, rgba(5,10,20,0) 100%);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.work figcaption span{
  font-family:var(--f-en); font-style:italic;
  font-size:11px; letter-spacing:0.3em;
  color:var(--accent-blue);
}

.work:hover img{ transform:scale(1.08); filter:brightness(1) saturate(1.15); }
.work:hover::before{ opacity:0.35; }
.work:hover figcaption{ opacity:1; transform:translateY(0); }

/* ============================================================
   Artist
   ============================================================ */
.artist__grid{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:clamp(40px, 6vw, 90px);
  align-items:flex-start;
}
.artist__photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
}
.artist__photo::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 60%, rgba(5,10,20,0.6) 100%);
  pointer-events:none;
}
.artist__photo img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.9) contrast(1.05);
  transition:transform 2s var(--ease);
}
.artist__photo:hover img{ transform:scale(1.04); }
.artist__photo figcaption{
  position:absolute; left:20px; bottom:20px; z-index:2;
  font-family:var(--f-en); font-style:italic;
  font-size:12px; letter-spacing:0.3em;
  color:var(--text-sub);
}

.artist__text{ padding-top:clamp(8px, 2vh, 20px); }
.artist__name{
  display:flex; align-items:baseline; gap:24px;
  padding-bottom:28px;
  margin-bottom:40px;
  border-bottom:1px solid var(--line);
}
.artist__name-jp{
  font-family:var(--f-jp-serif); font-weight:400;
  font-size:clamp(28px, 3vw, 36px);
  letter-spacing:0.2em;
}
.artist__name-en{
  font-family:var(--f-en); font-style:italic;
  font-size:clamp(16px, 1.4vw, 20px);
  color:var(--text-sub);
  letter-spacing:0.12em;
}
.artist__bio{ display:flex; flex-direction:column; gap:22px; }
.artist__bio p{
  font-family:var(--f-jp-serif); font-weight:300;
  font-size:clamp(14px, 1.1vw, 16px);
  line-height:2;
  color:var(--text-sub);
  letter-spacing:0.08em;
}
.artist__bio p.artist__bio-emphasis{
  font-family:var(--f-jp-serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(20px, 2vw, 26px);
  line-height:1.7;
  color:var(--text);
  letter-spacing:0.04em;
}

/* ============================================================
   History — Timeline
   ============================================================ */
.timeline{
  position:relative;
  max-width:820px;
  margin:0 auto;
  padding-left:clamp(20px, 4vw, 40px);
}
.timeline::before{
  content:""; position:absolute;
  left:clamp(6px, 1.2vw, 12px); top:10px; bottom:10px;
  width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--line) 10%,
    var(--line) 90%,
    transparent 100%);
}
.timeline__item{
  position:relative;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:clamp(20px, 3vw, 40px);
  padding:22px 0;
  border-bottom:1px dashed var(--line-soft);
  transition:transform .5s var(--ease);
}
.timeline__item:last-child{ border-bottom:none; }
.timeline__item:hover{ transform:translateX(6px); }

.timeline__dot{
  position:absolute;
  left:calc(-1 * clamp(20px, 4vw, 40px) + clamp(2px, 0.7vw, 7px));
  top:32px;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--bg-0);
  border:1px solid var(--accent-blue);
  box-shadow:0 0 0 4px var(--bg-0), 0 0 18px rgba(79,195,247,0.5);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.timeline__item:hover .timeline__dot{
  background:var(--accent-blue);
  box-shadow:0 0 0 4px var(--bg-0), 0 0 24px rgba(156,108,244,0.8);
}

.timeline__year{
  font-family:var(--f-en); font-style:italic;
  font-size:clamp(28px, 3vw, 42px);
  letter-spacing:0.05em;
  color:var(--text);
  line-height:1;
  padding-top:6px;
}
.timeline__title{
  font-family:var(--f-jp-serif);
  font-size:clamp(15px, 1.3vw, 18px);
  line-height:1.7;
  padding-top:8px;
  margin:0;
}
.timeline__content{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.timeline__title span{
  display:block;
  font-size:0.85em;
  color:var(--text-sub);
  margin-top:4px;
}

/* ============================================================
   Video
   ============================================================ */
.video__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  max-width:1040px;
  margin:0 auto;
}
.video-card{
  position:relative;
  border:1px solid var(--line);
  background:var(--bg-1);
  overflow:hidden;
}
.video-card::before{
  content:""; position:absolute; inset:0; z-index:2;
  border:1px solid transparent;
  background:var(--aurora) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.video-card:hover::before{ opacity:0.8; }
.video-card video{
  width:100%; height:auto;
  aspect-ratio:16/9;
  background:#000;
  display:block;
}
.video-card figcaption{
  padding:22px 28px;
  display:flex; align-items:center; gap:18px;
  font-family:var(--f-jp-serif);
  font-size:15px; letter-spacing:0.15em;
  border-top:1px solid var(--line-soft);
}
.video-card__num{
  font-family:var(--f-en); font-style:italic;
  font-size:14px; letter-spacing:0.3em;
  color:var(--accent-blue);
}

/* ============================================================
   Contact
   ============================================================ */
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(40px, 7vw, 100px);
}
.contact__lead{
  font-family:var(--f-jp-serif);
  font-size:clamp(18px, 1.6vw, 22px);
  line-height:2;
  color:var(--text);
  margin-bottom:18px;
}
.contact__sub{
  font-family:var(--f-en); font-style:italic;
  font-size:14px; letter-spacing:0.15em;
  color:var(--text-sub);
}

.contact__form{ display:flex; flex-direction:column; gap:32px; }
.contact__honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.field{ position:relative; }
.field label{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--f-jp-serif);
  font-size:13px; letter-spacing:0.25em;
  color:var(--text-sub);
  margin-bottom:10px;
}
.field label span{
  font-family:var(--f-en); font-style:italic;
  font-size:11px; letter-spacing:0.2em;
  color:var(--text-mute);
}
.field input,
.field textarea{
  width:100%;
  padding:12px 0;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--text);
  font-family:var(--f-jp-sans);
  font-size:15px;
  line-height:1.6;
  letter-spacing:0.04em;
  transition:border-color .4s var(--ease);
  resize:vertical;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:transparent;
  border-image:var(--aurora) 1;
  border-image-slice:1;
  border-bottom-style:solid;
  border-bottom-width:1px;
}

.contact__submit{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 32px;
  margin-top:10px;
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--f-en);
  font-size:13px; letter-spacing:0.35em;
  text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.contact__submit span{ position:relative; z-index:1; }
.contact__submit svg{ position:relative; z-index:1; transition:transform .4s var(--ease); }
.contact__submit::before{
  content:""; position:absolute; inset:0;
  background:var(--aurora);
  transform:translateX(-101%);
  transition:transform .5s var(--ease);
}
.contact__submit:hover{ color:#050A14; border-color:transparent; }
.contact__submit:hover::before{ transform:translateX(0); }
.contact__submit:hover svg{ transform:translateX(4px); }

.contact__note{
  min-height:24px;
  font-family:var(--f-jp-serif);
  font-size:13px; letter-spacing:0.1em;
  color:var(--accent-teal);
}
.contact__note.is-error{
  color:#ff9a9a;
}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  border-top:1px solid var(--line);
  padding:60px var(--pad-x) 40px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.3));
}
.footer__inner{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:40px;
}
.footer__brand{ display:flex; flex-direction:column; gap:4px; line-height:1.2; }
.footer__brand-jp{
  font-family:var(--f-jp-serif); font-size:15px; letter-spacing:0.25em;
}
.footer__brand-en{
  font-family:var(--f-en); font-style:italic;
  font-size:12px; letter-spacing:0.2em;
  color:var(--text-sub);
}
.footer__nav{
  display:flex; justify-content:center; gap:clamp(14px, 2vw, 28px); flex-wrap:wrap;
}
.footer__nav a{
  font-family:var(--f-en);
  font-size:12px; letter-spacing:0.25em;
  color:var(--text-sub);
  transition:color .3s var(--ease);
}
.footer__nav a:hover{ color:var(--text); }
.footer__copy{
  font-family:var(--f-en); font-style:italic;
  font-size:12px; letter-spacing:0.2em;
  color:var(--text-mute);
  white-space:nowrap;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px){
  .nav__menu{
    position:fixed; inset:0; top:0;
    background:rgba(5,10,20,0.96);
    backdrop-filter:blur(20px);
    flex-direction:column; justify-content:center; align-items:center;
    gap:28px;
    opacity:0; pointer-events:none;
    transition:opacity .5s var(--ease);
  }
  .nav__menu.is-open{ opacity:1; pointer-events:auto; }
  .nav__menu a{ font-size:18px; letter-spacing:0.3em; }
  .nav__toggle{ display:block; position:relative; z-index:2; }

  .ex-card{ grid-template-columns:1fr; }
  .ex-card__side{
    border-left:none; border-top:1px solid var(--line);
    padding-left:0; padding-top:20px;
    flex-direction:row; align-items:baseline; justify-content:space-between;
  }
  .exhibition__gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .exhibition__shot--01,
  .exhibition__shot--02,
  .exhibition__shot--03,
  .exhibition__shot--04,
  .exhibition__shot--05{
    grid-column:span 1;
    grid-row:span 1;
    min-height:220px;
  }
  .ex-card__info > div{ grid-template-columns:100px 1fr; gap:14px; }

  .works__grid{ grid-template-columns:repeat(2, 1fr); }

  .artist__grid{ grid-template-columns:1fr; }
  .artist__photo{ max-width:520px; aspect-ratio:3/4; }

  .contact__grid{ grid-template-columns:1fr; }

  .footer__inner{ grid-template-columns:1fr; text-align:center; gap:24px; }
  .footer__copy{ white-space:normal; }
}

@media (max-width: 600px){
  .hero__name{ flex-direction:column; gap:8px; align-items:flex-start; }
  .ex-card__badge{
    position:static; display:inline-block;
    margin-bottom:24px;
  }
  .exhibition__gallery{ grid-template-columns:1fr; }
  .exhibition__shot--01,
  .exhibition__shot--02,
  .exhibition__shot--03,
  .exhibition__shot--04,
  .exhibition__shot--05{ min-height:180px; }
  .ex-card__info > div{ grid-template-columns:1fr; gap:4px; }
  .ex-card__info dt{ font-size:11px; }
  .works__grid{ grid-template-columns:1fr; }
  .timeline{ padding-left:28px; }
  .timeline__item{ grid-template-columns:90px 1fr; gap:16px; }
  .timeline__year{ font-size:26px; }
}

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