/* ============================================================
   Tair Haim — Nocturne
   main.css — extracted verbatim from the Nocturne design source,
   with self-hosted @font-face (no runtime CDN / Google Fonts).
   ============================================================ */

/* ---------- SELF-HOSTED FONTS (variable, latin subset) ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 600;
  font-stretch:100%;
  font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url("../fonts/cormorant-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 400;
  font-display:swap;
  src:url("../fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --black:#05060a;
  --ink:#0d1424;
  --ink-2:#070b14;
  --gold:#c9a84c;
  --gold-soft:#d9bd6e;
  --jewel:#1f6f63;        /* single jewel accent (emerald, echoes the Maktub gown) */
  --ivory:#efe9dc;
  --ivory-dim:#b9b3a6;
  --bar:#000;
  --letterbox: 5.2vh;     /* height of cinematic black bars */
  --ease: cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--black);
  color:var(--ivory);
  font-family:"Archivo",sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- SKIP LINK (a11y) ---------- */
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:100000;
  background:var(--gold); color:var(--black);
  padding:.7rem 1.2rem; font-family:"Archivo",sans-serif;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  transition:top .3s var(--ease);
}
.skip-link:focus{ top:1rem; outline:2px solid var(--ivory); }

/* ---------- LETTERBOX BARS (frame the whole viewport) ---------- */
.letterbox{
  position:fixed; left:0; right:0; height:var(--letterbox);
  background:var(--bar); z-index:120; pointer-events:none;
  display:flex; align-items:center;
}
.letterbox.top{ top:0; box-shadow:0 6px 24px rgba(0,0,0,.6); }
.letterbox.bottom{ bottom:0; justify-content:flex-end; box-shadow:0 -6px 24px rgba(0,0,0,.6); }
.letterbox .tick{
  font-size:.58rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); opacity:.65; padding:0 5vw; font-family:"Archivo",sans-serif;
  white-space:nowrap;
}
.letterbox.bottom .tick{ color:var(--ivory-dim); opacity:.45; }

/* ---------- FILM GRAIN OVERLAY ---------- */
.grain{
  position:fixed; inset:0; z-index:110; pointer-events:none; opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain.anim{ animation:grainshift .5s steps(3) infinite; }
@keyframes grainshift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

/* ---------- SIDE PROGRESS TIMELINE ---------- */
.timeline{
  position:fixed; top:calc(var(--letterbox) + 8vh); bottom:calc(var(--letterbox) + 8vh);
  left:2.6vw; width:1px; background:rgba(201,168,76,.16); z-index:100;
}
.timeline .fill{
  position:absolute; top:0; left:-1px; width:3px; height:0%;
  background:linear-gradient(var(--gold),var(--gold-soft));
  box-shadow:0 0 12px rgba(201,168,76,.6);
}
.timeline .reel{
  position:absolute; left:-22px; width:46px; display:flex; flex-direction:column; gap:.18rem;
  transform:translateY(-50%); text-align:center; color:var(--gold);
  font-size:.5rem; letter-spacing:.3em; opacity:.55; transition:opacity .4s;
}
.timeline .dot{ width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0 auto;opacity:.4;transition:.4s }
.timeline .reel.active{opacity:1} .timeline .reel.active .dot{opacity:1;box-shadow:0 0 8px var(--gold);transform:scale(1.5)}

/* ---------- TOP NAV ---------- */
nav{
  position:fixed; top:calc(var(--letterbox)); left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 5vw 1.2rem; transition:background .5s, padding .5s;
}
nav.solid{ background:linear-gradient(var(--ink-2),transparent); padding-top:1rem; }
nav .logo img{ height:30px; filter:brightness(1.6) sepia(.2); opacity:.92; }
nav .navlinks{ display:flex; gap:2.1rem; }
nav .navlinks a{
  font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory); /* larger + brighter for readability (client 12/10/2026) */
  position:relative; padding-bottom:3px; transition:color .35s;
}
nav .navlinks a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .4s var(--ease); }
nav .navlinks a:hover{ color:var(--gold); } nav .navlinks a:hover::after{ width:100%; }
.nav-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-burger span{ width:24px;height:1px;background:var(--gold);display:block; }

/* ---------- CHAPTER (scroll-snap frame) ---------- */
.reel-wrap{
  scroll-snap-type:y proximity;
}
.chapter{
  position:relative; min-height:100vh; width:100%;
  scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--letterbox) + 4rem) 6vw calc(var(--letterbox) + 4rem);
  overflow:hidden;
}
.chapter .frame-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.chapter .frame-bg img{
  position:absolute; inset:-12%; width:124%; height:124%; max-width:none; object-fit:cover; /* max-width:none: the global img reset capped it at 100% and left a dark strip on the right (15/10/2026) */
  filter:brightness(.42) saturate(.85) contrast(1.05);
}
.vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 28%, rgba(5,6,10,.55) 72%, rgba(5,6,10,.96) 100%),
    linear-gradient(180deg, rgba(5,6,10,.55), rgba(5,6,10,.2) 40%, rgba(5,6,10,.7));
}
.chapter .inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; width:100%; }

/* film caption tag */
.cap{
  font-size:.58rem; letter-spacing:.5em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem;
}
.cap::before{ content:""; width:42px; height:1px; background:var(--gold); opacity:.7; display:inline-block; }

.serif{ font-family:"Cormorant Garamond", serif; font-weight:300; }
.eyebrow{ font-size:.6rem; letter-spacing:.45em; text-transform:uppercase; color:var(--gold); }

/* ---------- HERO ---------- */
#hero{ justify-content:center; align-items:center; text-align:center; padding-left:6vw; padding-right:6vw; }
#hero .frame-bg img, #hero .frame-bg video{ filter:brightness(.5) saturate(.9) contrast(1.04); will-change:transform; }
.hero-name{
  font-family:"Cormorant Garamond",serif; font-weight:300;
  font-size:clamp(3.6rem, 13vw, 11.5rem); line-height:.86; letter-spacing:.02em;
  color:var(--ivory); text-shadow:0 10px 60px rgba(0,0,0,.7);
}
.hero-name .b{ display:block; }
.hero-sub{
  margin-top:1.6rem; font-size:clamp(.7rem,1.5vw,.95rem); letter-spacing:.42em;
  text-transform:uppercase; color:var(--gold-soft);
}
.hero-sub .dot{ color:var(--ivory-dim); margin:0 .7rem; }
.hero-cta{ margin-top:2.8rem; display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap; }
.btn{
  font-family:"Archivo",sans-serif; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  padding:1.05rem 2.3rem; border:1px solid var(--gold); color:var(--gold); cursor:pointer;
  background:transparent; transition:.45s var(--ease); position:relative; overflow:hidden; display:inline-flex; gap:.7rem; align-items:center;
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--gold); transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1; }
.btn:hover{ color:var(--black); } .btn:hover::before{ transform:translateY(0); }
.btn.ghost{ border-color:rgba(239,233,220,.35); color:var(--ivory); }
.btn.ghost::before{ background:var(--ivory); } .btn.ghost:hover{ color:var(--black); }
.btn .play{ width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent; }
.scroll-hint{
  position:absolute; bottom:calc(var(--letterbox) + 1.4rem); left:50%; transform:translateX(-50%);
  font-size:.52rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ivory-dim); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-hint .line{ width:1px; height:36px; background:linear-gradient(var(--gold),transparent); animation:dropline 2s infinite; }
@keyframes dropline{ 0%{transform:scaleY(.2);transform-origin:top;opacity:0}50%{opacity:1}100%{transform:scaleY(1);opacity:0;transform-origin:top} }

/* ---------- ABOUT ---------- */
#about .inner{ max-width:920px; }
.about-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:4vw; align-items:center; }
.about-portrait{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid rgba(201,168,76,.2); }
.about-portrait img{ width:100%;height:100%;object-fit:cover; filter:brightness(.78) saturate(.9); transition:transform 1.2s var(--ease); }
.about-portrait:hover img{ transform:scale(1.05); }
.about-portrait .tag{ position:absolute; bottom:0; left:0; right:0; padding:.7rem 1rem; font-size:.5rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); background:linear-gradient(transparent,rgba(5,6,10,.85)); }
.about-copy h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.05; margin:1rem 0 1.4rem; }
.about-copy h2 em{ font-style:italic; color:var(--gold-soft); }
.about-copy p{ font-size:1rem; line-height:1.85; color:var(--ivory-dim); max-width:46ch; }
.about-copy p + p{ margin-top:1.1rem; }
.about-meta{ margin-top:2rem; display:flex; gap:2.4rem; flex-wrap:wrap; }
.about-meta div span{ display:block; font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
.about-meta div strong{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.3rem; color:var(--ivory); }

/* ---------- MUSIC ---------- */
#music .frame-bg img{ filter:brightness(.3) saturate(.7); }
.music-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:5vw; align-items:center; }
.album-cover{ position:relative; }
.album-cover img{ width:100%; aspect-ratio:1/1; object-fit:cover; box-shadow:0 40px 90px rgba(0,0,0,.7); border:1px solid rgba(201,168,76,.25); }
.album-cover::after{ content:"مكتوب"; position:absolute; bottom:-1.4rem; right:0; font-family:"Cormorant Garamond",serif; font-size:2.4rem; color:var(--gold); opacity:.5; }
.music-info h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2.6rem,6vw,5rem); line-height:.95; margin:.6rem 0 1.6rem; }
.music-info .album-meta{ font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; color:var(--ivory-dim); margin-bottom:1.6rem; }
.platforms{ display:flex; gap:.7rem; flex-wrap:wrap; margin:1.4rem 0; }
.platforms a{ font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; padding:.55rem 1rem; border:1px solid rgba(201,168,76,.3); color:var(--gold); transition:.35s; }
.platforms a:hover{ background:var(--gold); color:var(--black); }
.tracklist{ display:grid; grid-template-columns:1fr 1fr; gap:.1rem 3rem; margin-top:1.6rem; }
.tl-side span{ font-size:.55rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.6rem; }
.tracklist li{ list-style:none; display:flex; gap:.8rem; padding:.42rem 0; font-size:.92rem; color:var(--ivory-dim); border-bottom:1px solid rgba(239,233,220,.06); transition:.3s; cursor:default; }
.tracklist li:hover{ color:var(--ivory); padding-left:.4rem; }
.tracklist li .num{ font-family:"Cormorant Garamond",serif; color:var(--gold); width:1.4rem; }
.spotify-embed{ margin-top:2rem; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.spotify-embed iframe{ display:block; width:100%; }

/* ---------- SINGLES ROW ---------- */
.singles-row{ margin-top:2.6rem; }
.singles-row .singles-label{ font-size:.58rem; letter-spacing:.45em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; display:flex; align-items:center; gap:.9rem; }
.singles-row .singles-label::before{ content:""; width:28px; height:1px; background:var(--gold); opacity:.7; display:inline-block; }
.singles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.single-card{ position:relative; overflow:hidden; border:1px solid rgba(201,168,76,.2); }
.single-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:brightness(.75) saturate(.9); transition:transform .8s var(--ease), filter .5s; display:block; }
.single-card:hover img{ transform:scale(1.05); filter:brightness(.9) saturate(1.05); }
.single-card .single-title{ position:absolute; bottom:0; left:0; right:0; padding:.65rem .9rem; font-size:.54rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); background:linear-gradient(transparent, rgba(5,6,10,.88)); transition:color .35s; }
.single-card:hover .single-title{ color:var(--gold-soft); }

/* ---------- VIDEO ---------- */
#video .frame-bg img{ filter:brightness(.28) saturate(.6); }
.video-head{ text-align:center; margin-bottom:2.4rem; }
.video-head h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2.4rem,5vw,4.2rem); }
.video-stage{
  position:relative; max-width:980px; margin:0 auto; aspect-ratio:16/9; cursor:pointer;
  border:1px solid rgba(201,168,76,.3); overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.7);
}
.video-stage img{ width:100%;height:100%;object-fit:cover; filter:brightness(.6) saturate(.9); transition:transform 1s var(--ease), filter .6s; }
.video-stage:hover img{ transform:scale(1.04); filter:brightness(.45); }
.video-stage iframe{ width:100%;height:100%;border:0; }
.play-btn{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; z-index:2;
}
.play-btn .ring{ width:84px;height:84px;border:1px solid var(--gold); border-radius:50%; display:flex;align-items:center;justify-content:center; transition:.5s var(--ease); background:rgba(5,6,10,.3); backdrop-filter:blur(2px); }
.video-stage:hover .play-btn .ring{ background:var(--gold); transform:scale(1.08); }
.play-btn .ring .tri{ width:0;height:0;border-left:18px solid var(--gold);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px; transition:.5s; }
.video-stage:hover .play-btn .ring .tri{ border-left-color:var(--black); }
.play-btn .label{ font-size:.55rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); }
.clip-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:980px; margin:1.8rem auto 0; }
.clip{ position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid rgba(201,168,76,.15); }
.clip img{ width:100%;height:100%;object-fit:cover; filter:brightness(.5) saturate(.85); transition:.6s var(--ease); }
.clip:hover img{ filter:brightness(.75); transform:scale(1.06); }
.clip span{ position:absolute; bottom:6px; left:8px; font-size:.46rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); }

/* ---------- SHOWS ---------- */
#shows .frame-bg img{ filter:brightness(.32) saturate(.8); }
.shows-head{ text-align:center; margin-bottom:2.4rem; }
.shows-head h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2.4rem,5vw,4.2rem); }
.shows-list{ max-width:820px; margin:0 auto; }
.show-row{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:1.6rem; align-items:center;
  padding:1.5rem .4rem; border-top:1px solid rgba(201,168,76,.18);
}
.show-row:last-child{ border-bottom:1px solid rgba(201,168,76,.18); }
.show-row .date{ font-family:"Cormorant Garamond",serif; font-size:1.5rem; color:var(--gold); min-width:90px; }
.show-row .venue{ font-size:.9rem; color:var(--ivory); }
.show-row .venue small{ display:block; color:var(--ivory-dim); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.25rem; }
.show-row .status{ font-size:.55rem; letter-spacing:.3em; text-transform:uppercase; color:var(--jewel); }
.tickets-disabled{
  font-size:.58rem; letter-spacing:.25em; text-transform:uppercase; padding:.6rem 1.3rem;
  border:1px solid rgba(239,233,220,.18); color:var(--ivory-dim); cursor:not-allowed; opacity:.6;
}
.shows-note{ text-align:center; margin-top:2rem; font-size:.6rem; letter-spacing:.25em; text-transform:uppercase; color:var(--ivory-dim); }
/* Compact SHOWS (no dates list yet, client 15/10/2026) */
#shows.shows-compact{ min-height:62vh; }
#shows.shows-compact .shows-head{ margin-bottom:1.4rem; }
.shows-soon{ text-align:center; }
.shows-soon p{ font-size:1rem; line-height:1.8; color:var(--ivory); letter-spacing:.04em; }

/* ---------- GALLERY ---------- */
#gallery{ padding-top:calc(var(--letterbox) + 3rem); }
.gallery-head{ text-align:center; margin-bottom:2rem; }
.gallery-head h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2.4rem,5vw,4.2rem); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:13vh; gap:.7rem; max-width:1200px; margin:0 auto; width:100%;
}
.g-item{ position:relative; overflow:hidden; border:1px solid rgba(201,168,76,.12); }
.g-item img{ width:100%;height:100%;object-fit:cover; filter:brightness(.62) saturate(.88) grayscale(.1); transition:transform 1.1s var(--ease), filter .6s; }
.g-item:hover img{ transform:scale(1.07); filter:brightness(.95) grayscale(0); }
.g-item span{ position:absolute; top:8px; left:10px; font-size:.46rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); opacity:0; transition:.4s; }
.g-item:hover span{ opacity:1; }
.g-a{ grid-column:span 2; grid-row:span 2; } .g-b{ grid-column:span 2; grid-row:span 2; }
.g-c{ grid-column:span 2; grid-row:span 1; } .g-d{ grid-column:span 2; grid-row:span 1; }
.g-e{ grid-column:span 3; grid-row:span 1; } .g-f{ grid-column:span 3; grid-row:span 1; }

/* ---------- EPK / BOOKING ---------- */
#epk .frame-bg img{ filter:brightness(.34) saturate(.8); }
.epk-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:5vw; align-items:center; max-width:1100px; margin:0 auto; }
.epk-copy h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2.4rem,5.5vw,4.6rem); line-height:1; margin:.8rem 0 1.3rem; }
.epk-copy p{ font-size:1rem; line-height:1.8; color:var(--ivory-dim); max-width:48ch; margin-bottom:1.8rem; }
.epk-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.epk-contact{ margin-top:2.2rem; display:flex; gap:2.4rem; flex-wrap:wrap; }
.epk-contact div span{ display:block; font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem; }
.epk-contact div a, .epk-contact div strong{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.2rem; color:var(--ivory); }
.epk-visual{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid rgba(201,168,76,.25); }
.epk-visual img{ width:100%;height:100%;object-fit:cover; filter:brightness(.7) saturate(.9); }

/* ---------- NEWSLETTER + FOOTER ---------- */
#outro{ justify-content:flex-end; padding-bottom:calc(var(--letterbox) + 1rem); }
#outro .frame-bg img{ filter:brightness(.25) saturate(.6); }
.news{ text-align:center; max-width:640px; margin:0 auto 5vh; }
.news h2{ font-family:"Cormorant Garamond",serif; font-weight:300; font-size:clamp(2rem,4.5vw,3.4rem); margin:.8rem 0 .6rem; }
.news p{ color:var(--ivory-dim); font-size:.9rem; margin-bottom:1.6rem; }
.news form{ display:flex; gap:.6rem; max-width:440px; margin:0 auto; }
.news input{
  flex:1; background:transparent; border:1px solid rgba(201,168,76,.3); color:var(--ivory);
  padding:.95rem 1.1rem; font-family:"Archivo",sans-serif; font-size:.8rem; letter-spacing:.05em;
}
.news input:focus{ outline:none; border-color:var(--gold); }
.news input::placeholder{ color:var(--ivory-dim); }
.th-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.news .th-news-msg{ min-height:1.4em; margin:.9rem 0 0; font-size:.85rem; color:var(--ivory); }
footer{ border-top:1px solid rgba(201,168,76,.16); padding-top:2.4rem; max-width:1180px; margin:0 auto; width:100%; }
/* Keep the OCW credit bar clear of the fixed bottom letterbox (15/10/2026) */
.ocw-credit{ margin-bottom:var(--letterbox); }
.foot-contact{ text-align:center; margin-bottom:2.2rem; }
.foot-contact span{ display:block; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem; }
.foot-contact a{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.25rem; color:var(--ivory); transition:color .3s; }
.foot-contact a:hover{ color:var(--gold); }
.foot-grid{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem; }
.foot-logo img{ height:34px; filter:brightness(1.6) sepia(.2); opacity:.9; margin-bottom:1rem; }
.foot-logo p{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ivory-dim); }
.foot-social{ display:flex; gap:1.4rem; }
.foot-social a{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory-dim); transition:.3s; }
.foot-social a:hover{ color:var(--gold); }
.foot-credit{ text-align:center; margin-top:2rem; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(185,179,166,.75); }
.foot-kamea{ display:flex; align-items:center; gap:.7rem; margin-top:1.6rem; opacity:.55; }
.foot-kamea img{ height:26px; object-fit:contain; filter:brightness(1.1) grayscale(.3); }
.foot-kamea span{ font-size:.5rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory-dim); }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(26px); }

/* ---------- PRELOADER ---------- */
#tair-preloader{position:fixed;inset:0;z-index:99999;background:var(--black);display:flex;
 flex-direction:column;align-items:center;justify-content:center;gap:24px;
 transition:opacity .6s ease,visibility .6s ease}
#tair-preloader.tp-done{opacity:0;visibility:hidden;pointer-events:none}
#tair-preloader .tp-logo{height:42px;width:auto;opacity:.9;animation:tpPulse 1.7s ease-in-out infinite}
#tair-preloader .tp-bar{width:180px;height:2px;background:rgba(239,233,220,.14);border-radius:2px;overflow:hidden}
#tair-preloader .tp-fill{height:100%;width:0%;background:var(--gold);transition:width .25s ease}
#tair-preloader .tp-pct{font-size:11px;letter-spacing:.4em;color:var(--gold);direction:ltr;opacity:.85}
@keyframes tpPulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#tair-preloader .tp-logo{animation:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  :root{ --letterbox:3.4vh; }
  .reel-wrap{ scroll-snap-type:none; }
  .chapter{ min-height:auto; padding:calc(var(--letterbox) + 5rem) 7vw 4rem; }
  #hero{ min-height:100vh; }
  nav .navlinks{ display:none; } .nav-burger{ display:flex; }
  nav .navlinks.open{ display:flex; flex-direction:column; position:absolute; top:100%; right:5vw; background:var(--ink-2); padding:1.6rem 2rem; gap:1.4rem; border:1px solid rgba(201,168,76,.2); }
  nav .navlinks.open a{ font-size:.95rem; letter-spacing:.22em; padding:.2rem 0; }
  #shows.shows-compact{ min-height:auto; }
  .timeline{ display:none; }
  .about-grid, .music-grid, .epk-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .singles-grid{ grid-template-columns:1fr; }
  .clip-row{ grid-template-columns:repeat(2,1fr); }
  .tracklist{ grid-template-columns:1fr; }
  .show-row{ grid-template-columns:auto 1fr; gap:.7rem 1.1rem; }
  .show-row .status, .show-row .tickets-disabled{ grid-column:2; justify-self:start; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:26vh; }
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f{ grid-column:span 1; grid-row:span 1; }
  .news form{ flex-direction:column; }
  .album-cover::after{ font-size:1.8rem; }
}
@media(prefers-reduced-motion:reduce){
  .grain.anim{ animation:none; } .scroll-hint .line{ animation:none; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* =========================================================================
   TOP BAR v2 + BRIGHT HERO (client mockup, 26/10/2026)
   Links left · pink logo center · social icons right. The hero clip shows
   its real colours; only a soft top shade keeps the bar legible.
   Same layout in both looks (pastel.css only recolours the scrolled bar).
   ========================================================================= */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
nav.nav-v2{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:2rem; padding:1.5rem 3.2vw 1.3rem; }
nav.nav-v2 .navlinks{ grid-column:1; grid-row:1; justify-self:start; gap:2.1rem; align-items:center; }
nav.nav-v2 .logo{ grid-column:2; grid-row:1; justify-self:center; display:block; line-height:0; }
nav.nav-v2 .logo img{ height:clamp(20px,1.9vw,30px); width:auto; max-width:none; filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); opacity:1; }
nav.nav-v2 .nav-social.in-bar{ grid-column:3; grid-row:1; justify-self:end; }
nav.nav-v2 .navlinks a{ font-size:.74rem; font-weight:300; letter-spacing:.3em; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.35); padding-bottom:.5rem; }
nav.nav-v2 .navlinks a::after{ background:#fff; height:1.5px; }
nav.nav-v2 .navlinks a.is-active::after{ width:100%; }
nav.nav-v2 .navlinks a:hover{ color:#fff; }
nav.nav-v2.solid{ background:linear-gradient(rgba(5,6,10,.82),rgba(5,6,10,0)); }
nav.nav-v2 .nav-burger{ display:none; grid-column:1; grid-row:1; justify-self:start; padding:.4rem 0; }
nav.nav-v2 .nav-burger span{ background:#fff; }
.nav-social{ display:flex; align-items:center; gap:1.3rem; }
.nav-social a{ display:inline-flex; width:21px; height:21px; color:#fff; filter:drop-shadow(0 1px 6px rgba(0,0,0,.35)); transition:transform .3s var(--ease), opacity .3s; }
.nav-social a:hover{ transform:translateY(-2px); opacity:.8; }
.nav-social svg{ width:100%; height:100%; fill:currentColor; display:block; }
nav.nav-v2 .navlinks .nav-social.in-menu{ display:none; }

#hero .frame-bg video, #hero .frame-bg img{ filter:brightness(1) saturate(1.12) contrast(1.03) !important; }
#hero .vignette{ background:linear-gradient(180deg, rgba(5,6,10,.5) 0%, rgba(5,6,10,.14) 18%, rgba(5,6,10,0) 32%, rgba(5,6,10,0) 74%, rgba(5,6,10,.3) 100%); }
#hero{ justify-content:flex-end; padding-bottom:calc(var(--letterbox) + 8.5rem); }
#hero .hero-cta{ margin-top:0; }
#hero .btn{ color:#fff; border-color:rgba(244,190,218,.95); background:rgba(14,10,14,.32); padding:1.15rem 2.6rem; font-size:.74rem; letter-spacing:.34em; gap:2.4rem; }
#hero .btn::before{ background:#fff; }
#hero .btn:hover{ color:#111; }
#hero .btn .arr{ font-size:1rem; letter-spacing:0; line-height:1; }
#hero .scroll-hint{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
#hero .scroll-hint .line{ background:linear-gradient(#fff,transparent); }

@media(max-width:1180px){
  nav.nav-v2{ grid-template-columns:1fr auto 1fr; padding:1.1rem 5vw 1rem; }
  nav.nav-v2 .nav-burger{ display:flex; }
  nav.nav-v2 .navlinks{ display:none; }
  nav.nav-v2 .navlinks.open{ display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:100%; left:5vw; right:auto; background:rgba(12,10,14,.94); padding:1.6rem 2rem; gap:1.3rem; border:1px solid rgba(255,255,255,.14); }
  nav.nav-v2 .navlinks.open a{ font-size:.95rem; letter-spacing:.22em; padding:.2rem 0; }
  nav.nav-v2 .navlinks.open a::after{ bottom:-2px; }
  nav.nav-v2 .logo img{ height:24px; }
  .nav-social{ gap:1.05rem; }
}
@media(max-width:700px){
  nav.nav-v2 .nav-social.in-bar{ display:none; }
  nav.nav-v2 .navlinks.open .nav-social.in-menu{ display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:.4rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.16); }
  nav.nav-v2 .navlinks.open .nav-social a{ width:22px; height:22px; padding:0; }
  nav.nav-v2 .navlinks.open .nav-social a::after{ display:none; }
  nav.nav-v2 .logo img{ height:auto; width:min(56vw,230px); }
  #hero{ padding-bottom:calc(var(--letterbox) + 7rem); }
}

/* 02/11/2026 (client): JOIN button under the shows, logos centred above the copyright line. */
.shows-join{ margin-top:2rem; }
#join{ scroll-margin-top:12vh; }
.foot-logos{ display:flex; justify-content:center; align-items:center; gap:2.6rem; flex-wrap:wrap; margin-top:2.4rem; }
.foot-logos .foot-logo img{ margin-bottom:0; height:40px; display:block; }
.foot-logos .foot-kamea{ margin-top:0; }
.foot-logos .foot-kamea img{ height:64px; display:block; }