/*
Theme Name: Miss Cecyls Complet
Description: Site complet DJ Miss Cecyls. À l’activation : cinq pages publiées, accueil configuré, photos incluses, galerie, animations, coordonnées et lettrage or uni.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Author: Miss Cecyls
Text Domain: miss-cecyls-luxe
License: GNU General Public License v2 or later (code only; photographs and branding excluded)
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
  --black: #0d0d0e;
  --surface: #161617;
  --paper: #f5f2ee;
  --white: #fffaf5;
  --muted: #b9b4b3;
  --ink: #242023;
  --gold: #c9b184;
  --charcoal: #101011;
  --neon: #efe2c2;
  --line: rgba(201,177,132,.25);
  --sans: "Manrope", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --gutter: clamp(24px, 5vw, 80px);
  --max: 1320px;
  --header: 96px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--black); scroll-padding-top: calc(var(--header) + 25px); }
body { margin: 0; color: var(--white); background: var(--black); font: 400 1rem/1.8 var(--sans); }
body.menu-open, body.photo-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: .97; }
em { font-family: var(--serif); font-weight: 400; }
svg { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--gold); color: var(--black); }
.wrap { padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.paper { background: var(--paper); color: var(--ink); }
.eyebrow { font-size: .8125rem; font-weight: 500; line-height: 1.7; letter-spacing: .15em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 24px; width: fit-content; padding-block: 7px; font-size: .875rem; border-bottom: 1px solid rgba(255,250,245,.45); transition: color .2s, border-color .2s; }
.text-link:hover { color: var(--gold); border-color: var(--gold); }
.text-link.dark { border-color: #6f6266; }
.text-link.dark:hover { color: var(--charcoal); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 56px; padding: 15px 24px; max-width: 100%; font-size: .875rem; font-weight: 600; line-height: 1.6; border: 1px solid var(--white); transition: background .2s, color .2s, border-color .2s; }
.button.light { background: var(--white); color: var(--black); }
.button.light:hover { background: var(--gold); border-color: var(--gold); }
.button.outline:hover { background: var(--white); color: var(--black); }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 16px; padding: 10px 20px; color: var(--black); background: var(--white); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; display: grid; grid-template-columns: 140px 1fr 140px; align-items: center; gap: 30px; min-height: var(--header); padding: 18px var(--gutter); background: var(--black); border-bottom: 1px solid var(--line); }
.wordmark { width: fit-content; font-family: var(--display); font-size: .9375rem; font-weight: 600; line-height: 1; letter-spacing: .37em; }
.wordmark span { display: block; margin-top: 3px; font-size: 2.4rem; letter-spacing: -.025em; }
.site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(23px, 3vw, 44px); }
.site-nav a { padding-block: 7px; font-size: .875rem; line-height: 1.5; white-space: nowrap; position: relative; }
.site-nav a::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.site-nav a[aria-current="page"]::after, .site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--gold); }
.header-booking { justify-self: end; display: inline-flex; align-items: center; gap: 23px; padding: 10px 16px; border: 1px solid var(--line); font-size: .875rem; line-height: 1.5; transition: border-color .2s; }
.header-booking:hover { border-color: var(--gold); }
.header-booking svg { width: 18px; height: 18px; }
.menu-toggle { display: none; }

.home-hero { position: relative; isolation: isolate; min-height: max(880px, min(1020px, 100svh)); height: auto; overflow: hidden; }
.hero-stage { position: absolute; inset: var(--header) 0 0 auto; width: 52%; z-index: -1; background: var(--black); }
.hero-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 40% top; }
.hero-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 0%, rgba(13,13,14,.15) 12%, transparent 22%), linear-gradient(0deg, var(--black), transparent 25%); }
.hero-content { position: relative; padding-top: calc(var(--header) + clamp(55px, 6vh, 90px)); padding-bottom: 130px; }
.hero-content > .eyebrow { color: var(--gold); margin-bottom: 30px; }
.hero-content h1 { font-size: clamp(7.5rem, 14.4vw, 13rem); line-height: .79; letter-spacing: -.035em; width: fit-content; }
.hero-content h1 span { display: inline-block; margin-top: 11px; }
.hero-content h1 span:first-child { margin-top: 0; }
.hero-signature { margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 2.7vw, 2.6rem); line-height: 1.2; }
.hero-description { color: #d1ccca; margin-top: 17px; font-size: 1rem; line-height: 1.8; max-width: 450px; }
.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 29px; }
.hero-side { position: absolute; right: 26px; top: 45%; writing-mode: vertical-rl; font-size: .75rem; letter-spacing: .16em; text-shadow: 0 1px 5px #000; }
.hero-bottom { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 23px; border-top: 1px solid var(--line); color: #d4cecd; font-size: .8125rem; }
.hero-bottom > span { letter-spacing: .1em; text-transform: uppercase; }
.hero-bottom a { display: inline-flex; align-items: center; gap: 22px; }
.hero-bottom svg { width: 18px; height: 18px; }
.destinations { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; padding-block: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.5vw, 2.25rem); letter-spacing: .06em; }
.home-intro { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; padding-block: 100px; }
.home-intro > .eyebrow { margin-top: 9px; color: #76616a; }
.home-intro h2 { font-size: clamp(3rem, 5.3vw, 5.2rem); }
.home-intro h2 em { display: inline-block; margin-top: 8px; }
.home-intro div > p { max-width: 530px; margin-top: 28px; margin-bottom: 21px; color: #655c5e; font-size: 1rem; }
.home-discover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding-block: 84px; }
.door { display: block; position: relative; overflow: hidden; min-height: 520px; }
.door > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .65s ease; }
.door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,.02) 85%); }
.door > div { position: absolute; z-index: 1; inset: auto 35px 35px; }
.door .eyebrow { display: block; margin-bottom: 19px; }
.door h2 { font-size: clamp(2.7rem, 4.1vw, 4rem); line-height: 1; padding-right: 20px; }
.door h2 em { font-size: 1.05em; }
.circle-arrow { display: grid; place-items: center; margin-top: 25px; width: 47px; height: 47px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; transition: background .2s, color .2s; }
.door:hover > img { transform: scale(1.025); }
.door:hover .circle-arrow { background: var(--white); color: var(--black); }
.booking-band { display: flex; align-items: center; justify-content: space-between; gap: 65px; padding-block: 80px; border-top: 1px solid var(--line); background: linear-gradient(115deg, #080809, #111112 55%, #09090a); box-shadow: inset 0 1px 0 rgba(238,223,187,.06); }
.booking-band .eyebrow { color: var(--gold); margin-bottom: 22px; }
.booking-band h2 { font-size: clamp(3.5rem, 6vw, 5.6rem); }
.booking-band h2 em { display: inline-block; margin-top: 3px; font-size: 1.1em; }
.booking-band > .button { flex-shrink: 0; }

.site-footer { padding-top: 64px; padding-bottom: 25px; }
.footer-top { display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: center; padding-bottom: 40px; }
.footer-wordmark { font-family: var(--display); font-weight: 600; font-size: 3rem; letter-spacing: -.01em; line-height: 1; width: fit-content; }
.footer-identity > p { margin-top: 19px; color: var(--muted); font-size: .875rem; line-height: 1.8; }
.social-links { display: flex; flex-direction: column; gap: 8px; }
.social-links a { display: inline-flex; justify-content: flex-start; align-items: center; gap: 12px; min-height: 44px; font-size: .875rem; line-height: 1.8; }
.social-links .social-logo { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.footer-socials { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; }
.footer-socials a { color: var(--white); }
.social-links a:hover { color: var(--gold); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px 35px; flex-wrap: wrap; padding-top: 23px; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.footer-contacts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px 30px; }
.footer-contacts a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--white); font-size: .875rem; }
.footer-contacts svg { width: 19px; height: 19px; color: var(--gold); }
.footer-contacts a:hover { color: var(--gold); }
.footer-bottom a { overflow-wrap: anywhere; }

.page-intro { padding-top: calc(var(--header) + 65px); padding-bottom: 60px; }
.page-intro > .eyebrow { color: var(--gold); margin-bottom: 32px; }
.page-intro > div { display: flex; align-items: end; justify-content: space-between; gap: 65px; }
.page-intro h1 { font-size: clamp(4.4rem, 8vw, 8.5rem); }
.page-intro h1 em { display: inline-block; margin-top: 6px; font-size: 1.06em; }
.page-intro > div > p { max-width: 280px; margin-bottom: 5px; color: var(--muted); flex-shrink: 0; }
.artist-intro { padding-top: calc(var(--header) + 66px); padding-bottom: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px 9%; align-items: start; }
.artist-title { grid-column: 1; grid-row: 1; }
.artist-title > .eyebrow { color: var(--gold); margin-bottom: 33px; }
.artist-title h1 { font-size: clamp(4.3rem, 7.8vw, 7.4rem); line-height: .98; }
.artist-title h1 em { display: inline-block; margin-top: 8px; font-size: 1.1em; }
.artist-subtitle { font-size: .875rem; margin-top: 30px; }
.artist-subtitle span { color: var(--muted); }
.artist-portrait { grid-row: 1 / 3; grid-column: 2; }
.artist-portrait img { width: 100%; max-height: 790px; aspect-ratio: 4 / 5.2; object-fit: cover; object-position: 40% top; }
.artist-portrait figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 13px; font-size: .75rem; letter-spacing: .1em; color: var(--muted); }
.artist-portrait figcaption span { letter-spacing: 0; }
.artist-story { grid-column: 1; max-width: 590px; }
.artist-story > p { margin-bottom: 21px; color: var(--muted); font-size: 1rem; }
.artist-story > p.lead { color: var(--white); font-size: 1.125rem; }
.artist-story > .text-link { margin-top: 5px; }
.artist-facts { display: grid; grid-template-columns: 1fr 1fr 1.25fr; padding-block: 57px; gap: 30px; }
.artist-facts > div { padding-right: 30px; }
.artist-facts > div + div { border-left: 1px solid #c3b9ba; padding-left: 50px; }
.artist-facts strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 4vw, 4.3rem); line-height: 1.1; }
.artist-facts span { display: block; margin-top: 12px; color: #76686d; font-size: .875rem; }
.artist-live { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 70px; padding-block: 100px; }
.artist-live .eyebrow { color: var(--gold); margin-bottom: 26px; }
.artist-live h2 { font-size: clamp(3.4rem, 5.4vw, 5.5rem); }
.artist-live h2 em { display: inline-block; margin-top: 5px; }
.artist-live > div > p:not(.eyebrow) { max-width: 430px; color: var(--muted); margin-block: 30px 20px; }
.artist-live figure { overflow: hidden; }
.artist-live figure img { width: 100%; height: auto; }
.artist-live figcaption { margin-top: 15px; font-size: .8125rem; color: var(--muted); }

.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 44px; padding-bottom: 90px; }
.service-card figure { position: relative; background: var(--surface); overflow: hidden; }
.service-card figure img { width: 100%; aspect-ratio: 1.24; object-fit: cover; object-position: 50% 35%; }
.service-card figure > span { position: absolute; left: 22px; bottom: 17px; font-family: var(--display); font-size: 2.5rem; line-height: 1; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.service-copy { padding-top: 23px; }
.service-copy h2 { font-size: clamp(2.4rem, 3.5vw, 3.4rem); line-height: 1.1; }
.service-copy > p { color: var(--muted); margin-block: 17px 16px; max-width: 520px; }
.production { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 80px; }
.production .eyebrow { color: #795663; margin-bottom: 25px; }
.production h2 { font-size: clamp(3.4rem, 5.3vw, 5rem); }
.production h2 em { display: inline-block; margin-top: 5px; }
.production > div > p:not(.eyebrow) { margin-top: 25px; color: #655c5e; max-width: 390px; }
.production-details { border-top: 1px solid #c6babb; }
.production-details details { border-bottom: 1px solid #c6babb; }
.production-details summary { display: flex; justify-content: space-between; align-items: center; gap: 22px; list-style: none; font-size: 1.125rem; font-weight: 500; line-height: 1.5; padding-block: 24px; cursor: pointer; }
.production-details summary::-webkit-details-marker { display: none; }
.production-details summary span { font-size: 1.5rem; font-weight: 400; transition: transform .2s; }
.production-details details[open] summary span { transform: rotate(45deg); }
.production-details details p { margin: -5px 30px 25px 0; color: #655c5e; font-size: 1rem; }

.page-galerie .page-intro { padding-bottom: 50px; }
.page-galerie .page-intro h1 { font-size: clamp(5rem, 10.5vw, 10rem); }
.page-galerie .page-intro h1 em { font-size: 1.12em; margin-top: 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 26px; align-items: start; padding-bottom: 80px; }
.gallery-item a { display: block; position: relative; background: var(--surface); overflow: hidden; }
.gallery-item img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; transition: transform .5s ease; }
.gallery-item.item-2, .gallery-item.item-5 { padding-top: 65px; }
.gallery-item.item-2 img, .gallery-item.item-5 img { aspect-ratio: 1; }
.gallery-item.item-6 img { aspect-ratio: 4 / 5; object-fit: cover; background: #111112; }
.gallery-item a:hover img { transform: scale(1.025); }
.gallery-zoom { position: absolute; bottom: 15px; right: 15px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 1.45rem; line-height: 1; background: rgba(0,0,0,.35); }
.gallery-item figcaption { display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: var(--muted); font-size: .8125rem; }
.instagram-band { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding-top: 10px; padding-bottom: 90px; }
.instagram-band > p { font-family: var(--display); font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.05; }
.instagram-band > p em { color: var(--gold); font-size: 1.2em; }
.lightbox { border: 1px solid var(--line); padding: 0; background: #0d0d0e; color: var(--white); width: min(1500px, 96vw); max-width: 96vw; max-height: 94svh; overflow: auto; }
.lightbox::backdrop { background: rgba(0,0,0,.94); }
.lightbox-toolbar { display: flex; gap: 25px; align-items: center; padding: 13px 24px; border-bottom: 1px solid var(--line); font-size: .875rem; }
.lightbox-toolbar > span { margin-right: auto; color: var(--muted); }
.lightbox-toolbar > a { text-decoration: underline; text-underline-offset: 4px; }
.lightbox button { border: 1px solid var(--line); background: transparent; cursor: pointer; min-width: 46px; height: 46px; line-height: 1; font-size: 1.5rem; }
.lightbox button:hover { color: var(--black); background: var(--white); }
.lightbox-toolbar > button { border: 0; font-size: 2rem; }
.lightbox-view { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 20px; align-items: center; padding: 24px; }
.lightbox-view figure { min-width: 0; }
.lightbox-view img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72svh; margin: auto; object-fit: contain; }
.lightbox-view figcaption { text-align: center; margin-top: 17px; font-size: .875rem; color: var(--muted); }
.lightbox-status { text-align: center; padding: 30px; color: var(--muted); font-size: .875rem; }

.contact-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 45px 9%; padding-top: calc(var(--header) + 65px); padding-bottom: 90px; }
.contact-heading { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 9%; align-items: end; }
.contact-heading .eyebrow { grid-column: 1 / -1; color: var(--gold); }
.contact-heading h1 { font-size: clamp(4.3rem, 7.4vw, 7.3rem); }
.contact-heading h1 em { display: inline-block; margin-top: 8px; font-size: 1.07em; }
.contact-heading > p:last-child { color: var(--muted); max-width: 410px; padding-bottom: 5px; }
.contact-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 35%; }
.contact-portrait figcaption { color: var(--muted); font-size: .8125rem; margin-top: 12px; }
.contact-information { align-self: start; }
.contact-row { padding-block: 21px; border-bottom: 1px solid var(--line); }
.contact-row:first-child { border-top: 1px solid var(--line); }
.contact-row > span { display: block; color: var(--gold); font-size: .8125rem; margin-bottom: 12px; }
.contact-row > a { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: clamp(.9375rem, 1.55vw, 1.35rem); line-height: 1.7; overflow-wrap: anywhere; }
.contact-row > a:hover { color: var(--gold); }
.contact-row > p { font-size: 1rem; }
.contact-email { margin-top: 28px; }
.contact-note { max-width: 420px; color: var(--muted); margin-top: 18px; font-size: .875rem; }
.contact-information .social-links { flex-direction: row; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.contact-information .social-links a { gap: 8px; }

.wordmark { color: var(--gold); }
.wordmark span { color: var(--white); }
.header-booking { border-color: rgba(201,177,132,.5); }
.site-nav a::after { box-shadow: 0 0 10px rgba(209,190,149,.65); }
.hero-content > .eyebrow::before { content: ""; display: inline-block; width: 29px; height: 2px; margin-right: 13px; vertical-align: middle; background: var(--neon); box-shadow: 0 0 15px rgba(209,190,149,.7); }
.hero-bottom { background: linear-gradient(90deg, rgba(209,190,149,.035), transparent 55%); }
.button.light { color: #111112; background: linear-gradient(115deg, #b69a67, #e2cfaa 24%, #f5e9cd 44%, #c8ae7c 70%, #d9c3a0); border-color: #c6ad80; box-shadow: inset 0 1px 0 rgba(255,250,233,.45); }
.button.light:hover { background: linear-gradient(115deg, #d0b788, #f8eed9 40%, #dec99f 80%, #e9d7b8); border-color: #e8d5b1; }
.home-intro h2 em, .production h2 em { color: #73531f; }
.page-intro h1 em, .artist-title h1 em, .contact-heading h1 em { color: var(--gold); }
.entry-animation { display: none; }
.entry-animation.is-playing { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #0d0d0e; pointer-events: none; animation: entry-exit .5s 1.05s ease forwards; }
.entry-animation > div { text-align: center; }
.entry-animation span { display: block; color: var(--gold); font-family: var(--display); font-size: clamp(5rem, 14vw, 9rem); font-weight: 600; line-height: .8; letter-spacing: -.02em; animation: entry-name .8s ease both; }
.entry-animation small { display: block; margin-top: 27px; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .23em; }
.entry-animation i { display: block; width: 100%; height: 1px; margin-top: 25px; background: linear-gradient(90deg, var(--gold), var(--neon)); box-shadow: 0 0 13px rgba(209,190,149,.6); transform-origin: left; animation: entry-line 1s ease both; }
@keyframes entry-name { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes entry-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes entry-exit { to { opacity: 0; visibility: hidden; } }
.welcome-widget { position: fixed; z-index: 80; right: 26px; bottom: 23px; width: 265px; }
.welcome-widget > summary { display: flex; align-items: center; gap: 14px; list-style: none; cursor: pointer; padding: 13px 17px; border: 1px solid rgba(201,177,132,.55); border-radius: 4px; background: #111112; box-shadow: 0 8px 35px rgba(0,0,0,.45), 0 0 20px rgba(209,190,149,.1); line-height: 1.4; }
.welcome-widget > summary::-webkit-details-marker { display: none; }
.welcome-monogram { display: grid; place-items: center; width: 36px; height: 36px; color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 1.75rem; border-right: 1px solid var(--line); padding-right: 11px; }
.welcome-widget summary > span:nth-child(2) { color: var(--muted); font-size: .75rem; }
.welcome-widget summary strong { display: block; color: var(--white); font-size: .9375rem; font-weight: 500; }
.welcome-plus { margin-left: auto; font-size: 1.5rem; color: var(--gold); }
.welcome-widget[open] .welcome-plus { transform: rotate(45deg); }
.welcome-panel { position: absolute; inset: auto 0 calc(100% + 10px) auto; width: min(335px, calc(100vw - 48px)); padding: 28px 23px 22px; background: radial-gradient(ellipse at 100% 0, rgba(209,190,149,.12), transparent 65%), #101011; border: 1px solid rgba(201,177,132,.5); box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.welcome-panel > button { position: absolute; top: 3px; right: 5px; width: 37px; height: 37px; padding: 0; font-size: 1.6rem; border: 0; background: transparent; cursor: pointer; color: var(--muted); }
.welcome-panel .eyebrow { margin-bottom: 20px; font-size: .75rem; letter-spacing: .08em; color: var(--gold); padding-right: 10px; }
.welcome-panel h2 { margin-bottom: 23px; font-size: 2.7rem; line-height: 1; }
.welcome-panel .button { width: 100%; font-size: .875rem; padding-inline: 14px; gap: 12px; }
.welcome-panel > .text-link { margin-top: 13px; font-size: .875rem; gap: 18px; }


/* Quiet, solid lettering; no glitter or metallic texture. */
.gold-leaf {
  color: var(--gold);
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}
@media (forced-colors: active) {
  .gold-leaf { background: none; -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; color: CanvasText; }
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-widget { animation: entry-name .6s 1.5s ease backwards; }
  .hero-content, .hero-stage { animation: entrance .7s ease both; }
  .hero-stage { animation-delay: .1s; }
  @keyframes entrance { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 1700px) {
  .hero-stage { width: 51%; }
  .hero-content h1 { font-size: 13rem; }
}
@media (max-width: 1100px) {
  :root { --gutter: 38px; }
  .site-header { grid-template-columns: 105px 1fr 110px; gap: 20px; }
  .site-nav { gap: 24px; }
  .header-booking { gap: 12px; padding-inline: 12px; }
  .hero-content h1 { font-size: 9rem; }
  .hero-content { padding-top: calc(var(--header) + 62px); }
  .hero-stage { width: 61%; }
  .hero-actions { gap: 20px; align-items: start; flex-direction: column; }
  .hero-content .button { min-height: 52px; }
  .hero-description { max-width: 340px; }
  .home-intro { grid-template-columns: .7fr 1.3fr; gap: 45px; }
  .door { min-height: 450px; }
  .door > div { inset-inline: 27px; bottom: 27px; }
  .page-intro > div { gap: 40px; }
  .page-intro > div > p { max-width: 220px; }
  .artist-intro { gap: 28px 7%; }
  .artist-portrait img { min-height: 650px; }
  .artist-facts > div + div { padding-left: 30px; }
  .artist-live { gap: 40px; }
  .production { gap: 45px; }
  .contact-layout { gap: 40px 6%; }
}
@media (max-width: 900px) {
  :root { --header: 84px; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 22px; padding-block: 13px; }
  .wordmark { grid-column: 1; grid-row: 1; }
  .wordmark span { font-size: 2.1rem; }
  .header-booking { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; }
  .js .menu-toggle { display: block; position: relative; z-index: 2; grid-column: 3; grid-row: 1; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
  .menu-toggle > span { position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: var(--white); transition: transform .2s; }
  .menu-toggle > span:first-child { transform: translate(-50%, -4px); }
  .menu-toggle > span:last-child { transform: translate(-50%, 4px); }
  .menu-toggle[aria-expanded="true"] > span:first-child { transform: translate(-50%, 0) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:last-child { transform: translate(-50%, 0) rotate(-45deg); }
  .js .site-nav { position: fixed; inset: var(--header) 0 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 23px; padding: 35px var(--gutter); background: var(--black); overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
  .js .site-nav.open { visibility: visible; opacity: 1; }
  .js .site-nav a { font-family: var(--display); font-size: 2.8rem; line-height: 1.15; text-transform: uppercase; }
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .hero-content { padding-top: 70px; }
  .home-hero { height: auto; min-height: 790px; }
  .hero-stage { width: 66%; }
  .hero-stage img { object-position: 40% top; }
  .hero-content h1 { font-size: clamp(6.8rem, 16vw, 9rem); }
  .hero-content > .eyebrow { margin-bottom: 33px; }
  .hero-signature { font-size: 1.85rem; max-width: 300px; }
  .hero-description { max-width: 310px; }
  .hero-bottom > span { max-width: 260px; font-size: .75rem; }
  .hero-side { right: 14px; }
  .home-intro { grid-template-columns: 1fr; gap: 28px; padding-block: 70px; }
  .home-intro h2 { font-size: 4rem; }
  .home-discover { gap: 23px; padding-block: 60px; }
  .door { min-height: 420px; }
  .door h2 { font-size: 2.9rem; }
  .booking-band { gap: 40px; }
  .booking-band > .button { max-width: 290px; }
  .footer-top { grid-template-columns: 1fr auto; }
  .footer-top .social-links { grid-column: 2; grid-row: 1; max-width: 360px; justify-content: flex-end; }
  .page-intro > div { display: block; }
  .page-intro > div > p { margin-top: 29px; max-width: 420px; }
  .page-intro h1 { font-size: 5.3rem; }
  .artist-intro { gap: 30px 6%; }
  .artist-title h1 { font-size: 4.8rem; }
  .artist-portrait img { min-height: 600px; }
  .artist-story { grid-column: 1 / -1; max-width: 650px; }
  .artist-portrait { grid-row: 1; }
  .artist-facts { gap: 20px; }
  .artist-facts strong { font-size: 2.8rem; }
  .artist-facts > div { padding-right: 0; }
  .artist-facts > div + div { padding-left: 20px; }
  .artist-live { grid-template-columns: 1fr; gap: 35px; padding-block: 70px; }
  .artist-live figure { max-width: 700px; }
  .artist-live h2 { font-size: 4rem; }
  .artist-live > div > p:not(.eyebrow) { max-width: 550px; }
  .services-grid { gap: 45px 27px; }
  .service-copy h2 { font-size: 2.5rem; }
  .service-card figure img { aspect-ratio: 1; }
  .production { grid-template-columns: 1fr; gap: 40px; }
  .production h2 { font-size: 4rem; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .gallery-item.item-2, .gallery-item.item-5 { padding-top: 0; }
  .gallery-item img, .gallery-item.item-2 img, .gallery-item.item-5 img, .gallery-item.item-6 img { aspect-ratio: 4 / 5; }
  .contact-heading { grid-template-columns: 1fr; gap: 26px; }
  .contact-heading h1 { font-size: 5.5rem; }
  .contact-heading > p:last-child { max-width: 480px; }
  .contact-layout { grid-template-columns: .75fr 1fr; gap: 40px 35px; }
  .contact-portrait img { aspect-ratio: 4 / 5.5; }
  .contact-row > a { font-size: 1rem; gap: 10px; }
}
@media (max-width: 600px) {
  :root { --gutter: 24px; --header: 82px; }
  .site-header { gap: 16px; }
  .header-booking { font-size: .8125rem; padding: 10px 12px; gap: 11px; }
  .home-hero { min-height: 950px; }
  .hero-stage { inset: var(--header) 0 auto; width: 100%; height: 580px; }
  .hero-stage img { object-position: 40% top; }
  .hero-stage::after { background: linear-gradient(0deg, var(--black) 0%, rgba(13,13,14,.14) 50%, rgba(13,13,14,.04) 80%); }
  .hero-content { padding-top: 405px; padding-bottom: 120px; }
  .hero-content > .eyebrow { margin-bottom: 22px; font-size: .75rem; }
  .hero-content h1 { font-size: clamp(6.6rem, 26vw, 9.5rem); line-height: .8; }
  .hero-content h1 span { margin-top: 6px; }
  .hero-signature { max-width: none; font-size: 1.8rem; margin-top: 24px; }
  .hero-description { max-width: 340px; margin-top: 15px; }
  .hero-actions { margin-top: 25px; gap: 14px; }
  .hero-bottom { padding-block: 19px; font-size: .75rem; gap: 20px; }
  .hero-bottom > span { max-width: 160px; font-size: .75rem; letter-spacing: .04em; }
  .hero-bottom a { max-width: 150px; gap: 9px; }
  .hero-side { top: 150px; font-size: .75rem; }
  .destinations { gap: 18px; padding-block: 22px; display: grid; grid-template-columns: repeat(2, 1fr); text-align: center; font-size: 1.65rem; }
  .home-intro { padding-block: 58px; }
  .home-intro h2 { font-size: clamp(3rem, 11vw, 4rem); }
  .home-intro div > p { margin-top: 24px; }
  .home-discover { grid-template-columns: 1fr; padding-block: 35px; gap: 25px; }
  .door { min-height: 470px; }
  .door > div { inset-inline: 25px; bottom: 25px; }
  .door h2 { font-size: 3.2rem; }
  .booking-band { flex-direction: column; align-items: flex-start; gap: 31px; padding-block: 60px; }
  .booking-band h2 { font-size: 3.7rem; }
  .booking-band > .button { max-width: 100%; }
  .site-footer { padding-top: 42px; }
  .footer-top { grid-template-columns: 1fr; gap: 25px; padding-bottom: 27px; }
  .footer-wordmark { font-size: 2.55rem; }
  .footer-identity > p { font-size: .875rem; }
  .footer-top .social-links { grid-column: 1; grid-row: auto; justify-content: flex-start; max-width: none; gap: 12px 18px; }
  .footer-top .social-links a { gap: 10px; }
  .footer-bottom { gap: 12px 20px; }
  .footer-bottom > span { flex-basis: 100%; }
  .footer-contacts { flex-direction: column; align-items: flex-start; gap: 3px; }
  .footer-contacts a { font-size: .875rem; }
  .page-intro { padding-top: calc(var(--header) + 42px); padding-bottom: 38px; }
  .page-intro > .eyebrow { margin-bottom: 24px; }
  .page-intro h1 { font-size: clamp(3.4rem, 12.5vw, 4.7rem); }
  .page-intro > div > p { margin-top: 25px; }
  .artist-intro { grid-template-columns: 1fr; padding-top: calc(var(--header) + 40px); gap: 30px; padding-bottom: 50px; }
  .artist-title { grid-column: 1; grid-row: auto; }
  .artist-title h1 { font-size: 4.6rem; }
  .artist-subtitle { margin-top: 24px; }
  .artist-portrait { grid-column: 1; grid-row: auto; }
  .artist-portrait img { min-height: 0; aspect-ratio: 4 / 5; }
  .artist-story { grid-column: 1; }
  .artist-facts { grid-template-columns: 1fr; gap: 26px; padding-block: 40px; }
  .artist-facts > div, .artist-facts > div + div { padding: 0; border: 0; }
  .artist-facts > div + div { padding-top: 23px; border-top: 1px solid #c3b9ba; }
  .artist-facts strong { font-size: 3rem; }
  .artist-facts span { margin-top: 7px; }
  .artist-live { padding-block: 55px; }
  .artist-live h2 { font-size: 3.6rem; }
  .services-grid { grid-template-columns: 1fr; gap: 42px; padding-bottom: 55px; }
  .service-card figure img { aspect-ratio: 1.15; }
  .service-copy { padding-top: 18px; }
  .service-copy h2 { font-size: 2.7rem; }
  .production { padding-block: 55px; }
  .production h2 { font-size: 3.7rem; }
  .production-details summary { font-size: 1rem; }
  .page-galerie .page-intro h1 { font-size: clamp(4rem, 16vw, 6rem); }
  .gallery-grid { grid-template-columns: 1fr; gap: 29px; padding-bottom: 48px; }
  .gallery-item.item-2 img, .gallery-item.item-5 img { aspect-ratio: 1; }
  .gallery-item.item-6 img { aspect-ratio: 1.2; }
  .instagram-band { display: block; padding-bottom: 55px; }
  .instagram-band > p { font-size: 2.7rem; margin-bottom: 29px; }
  .lightbox { width: 100vw; max-width: 100vw; max-height: 100svh; border-inline: 0; }
  .lightbox-toolbar { padding: 10px 14px; gap: 16px; font-size: .8125rem; }
  .lightbox-view { grid-template-columns: 1fr 1fr; gap: 15px; padding: 16px 12px; }
  .lightbox-view figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox-view img { max-height: 64svh; }
  .lightbox-view button { grid-row: 2; width: 48px; }
  .lightbox-view button:first-child { justify-self: end; }
  .lightbox-view button:last-child { justify-self: start; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; padding-top: calc(var(--header) + 40px); padding-bottom: 50px; }
  .contact-heading h1 { font-size: clamp(3.8rem, 13vw, 5rem); }
  .contact-portrait { grid-row: 3; margin-top: 10px; }
  .contact-portrait img { aspect-ratio: 1; }
  .contact-information { grid-row: 2; }
  .contact-row > a { font-size: 1rem; }
  .contact-information .social-links { gap: 22px; }
  .welcome-widget { right: 16px; bottom: 16px; width: 245px; }
}
@media (max-width: 360px) {
  :root { --gutter: 20px; }
  .hero-content h1 { font-size: 6.1rem; }
  .hero-signature { font-size: 1.6rem; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-top .social-links { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .booking-band h2 { font-size: 3.3rem; }
  .button { gap: 20px; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-animation { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Portrait-led home: the image has its own space, without a veil or text overlay. */
.home-hero { display: grid; grid-template-columns: 48% 52%; padding-top: var(--header); min-height: 0; }
.hero-stage { position: relative; inset: auto; width: 100%; height: clamp(710px, calc(100svh - 160px), 920px); min-height: 0; grid-column: 2; grid-row: 1; z-index: 0; }
.hero-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: none; opacity: 1; }
.hero-stage::after { content: none; }
.hero-content { grid-column: 1; grid-row: 1; align-self: center; padding: 80px clamp(28px, 4.5vw, 72px); }
.hero-content h1 { font-size: clamp(5.5rem, 8.5vw, 9rem); line-height: .94; font-weight: 500; letter-spacing: .01em; }
.hero-content h1 span { margin-top: 0; }
.hero-content > .eyebrow { margin-bottom: 32px; font-size: .875rem; letter-spacing: .16em; }
.hero-signature { font-size: clamp(1.65rem, 2.1vw, 2.2rem); margin-top: 30px; }
.hero-description { max-width: 390px; }
.hero-actions { flex-wrap: wrap; gap: 18px 25px; }
.hero-bottom { position: relative; inset: auto; grid-column: 1 / -1; }
.hero-side { top: auto; bottom: 120px; right: 20px; }
.wordmark { color: var(--gold); }
.wordmark span { font-size: 2rem; letter-spacing: .025em; font-weight: 500; }
.footer-wordmark { font-weight: 500; font-size: 2.5rem; letter-spacing: .045em; }
.entry-animation .gold-leaf { font-weight: 500; letter-spacing: .02em; }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 46% 54%; }
  .hero-stage { height: 680px; }
  .hero-content { padding: 50px 26px; }
  .hero-content h1 { font-size: clamp(4rem, 9vw, 6rem); }
  .hero-content > .eyebrow { letter-spacing: .08em; }
}
@media (max-width: 600px) {
  .home-hero { grid-template-columns: 1fr; }
  .hero-stage { grid-column: 1; grid-row: 1; height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .hero-stage img { object-position: center top; }
  .hero-content { grid-column: 1; grid-row: 2; padding: 38px var(--gutter) 42px; }
  .hero-content h1 { font-size: clamp(4.5rem, 19vw, 6.8rem); line-height: .94; }
  .hero-content > .eyebrow { margin-bottom: 20px; }
  .hero-signature { margin-top: 23px; font-size: 1.7rem; }
  .hero-bottom { grid-row: 3; }
  .hero-side { display: none; }
}

/* WordPress integration. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .skip-link { top: 44px; }
.wp-content-area { padding-block: 70px; overflow-wrap: anywhere; }
.wp-standard-page { padding-top: calc(var(--header) + 70px); min-height: 65vh; }
.wp-standard-page h1 { font-size: clamp(3rem, 7vw, 6rem); margin-bottom: 35px; }
.wp-content-area h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-block: 32px 20px; }
.wp-content-area h3 { font-size: 2rem; margin-block: 25px 15px; }
.wp-content-area p, .wp-content-area ul, .wp-content-area ol { margin-block: 18px; }
.wp-content-area a { text-decoration: underline; text-underline-offset: 4px; }
.wp-post-list article + article { margin-top: 50px; padding-top: 35px; border-top: 1px solid var(--line); }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } body.admin-bar .skip-link { top: 58px; } }
@media (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed; } }