/* marcellohenrique.com: shared styles. Page-specific spacing lives inline in src/pages/*.html,
   exactly as designed on the canvas. Colors: ink #2f3a42, blue-gray #6f8296, label #4f6274,
   ground #fafafa, band #eef1f3, buttons #e8ecef. */

body{margin:0;background:#fafafa;color:#2f3a42;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:18px;line-height:1.65}
a{color:#2f3a42}a:hover{color:#6f8296}
img{max-width:100%}
.label{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.3em;font-weight:500}
.title{font-family:Italiana,Georgia,serif;font-weight:400;line-height:1.02;margin:0;color:#6f8296}
.script{font-family:'Mrs Saint Delafield',cursive;color:#2f3a42;line-height:1}
.skip{position:absolute;left:-9999px;top:8px;background:#2f3a42;color:#fafafa;padding:12px 16px;z-index:10}
.skip:focus{left:8px}

/* header */
.nav{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;padding:18px clamp(20px,4vw,56px);background:#ffffff;position:relative;z-index:3}
.nav .brand{font-size:11px;letter-spacing:.4em;color:#2f3a42;text-decoration:none}
.nav .links{display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center}
.nav a{text-decoration:none;color:#5b6670;padding:8px 0}
.nav a[aria-current]{color:#2f3a42;border-bottom:1px solid #2f3a42}
.drop{position:relative}
.drop .sub{display:none;position:absolute;top:100%;left:-16px;background:#ffffff;padding:12px 16px;gap:4px;min-width:170px;box-shadow:0 8px 24px rgba(47,58,66,.08);z-index:4}
.drop:hover .sub,.drop:focus-within .sub{display:grid}

/* footer */
.footer{background:#6f8296;color:#fafafa;padding:40px 20px 34px;text-align:center;display:grid;gap:16px;justify-items:center}
.footer .social{width:44px;height:44px;display:grid;place-items:center;border:1px solid #c9d3d8;border-radius:50%;color:#fafafa}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.footer-links a{text-decoration:none;color:#fafafa;padding:6px 0}
.footer-legal{font-size:9px;color:#e6ebee}
.footer-legal a{color:#e6ebee;text-decoration:none}
.footer a:hover{color:#ffffff;text-decoration:underline}

/* home */
.name{position:absolute;right:clamp(24px,6vw,96px);top:clamp(60px,8vw,130px);text-align:center}
.heroimg{width:100%;aspect-ratio:2200/1250;object-fit:cover;object-position:50% 40%;display:block}
.occ-tab{font:inherit;letter-spacing:inherit;cursor:pointer;padding:12px 16px;min-height:44px;border:0;background:transparent;color:#2f3a42}
.occ-tab[aria-pressed="true"]{background:#6f8296;color:#fafafa}
.video-card{display:grid;gap:14px;text-decoration:none;color:#2f3a42;font:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.video-frame{width:100%;aspect-ratio:16/10;border:0;display:block;background:#000;object-fit:cover}
.video-item{display:grid;gap:10px;align-content:start}
.video-yt{text-decoration:none;color:#4f6274;font-size:9px;padding:10px 0;justify-self:start}
.video-yt:hover{color:#2f3a42}
.video-still{position:relative;display:block}
.video-still img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.video-still .play{position:absolute;inset:0;display:grid;place-items:center}
.video-still .play span{width:64px;height:64px;border-radius:50%;background:rgba(250,250,250,.92);display:grid;place-items:center;color:#2f3a42;transition:transform .2s}
.video-card:hover .play span{transform:scale(1.08)}
/* music player: a bar on every page, minimizes to a small sound-wave button */
.player{position:sticky;bottom:0;background:#fafafa;border-top:1px solid #d5dbe0;z-index:5}
.player[hidden]{display:none}
.player-bar{display:flex;align-items:center;gap:10px 22px;padding:6px clamp(16px,3vw,32px);flex-wrap:wrap}
.track-info{min-width:0;width:220px;flex:0 1 220px}
.track-name{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controls{display:flex;align-items:center;gap:4px}
.pl-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:#4f6274;cursor:pointer;padding:0}
.pl-btn:hover{color:#2f3a42}
.pl-list[aria-expanded="true"]{color:#2f3a42}
.play-btn{width:44px;height:44px;border-radius:50%;border:1px solid #2f3a42;background:none;color:#2f3a42;cursor:pointer;flex:none;display:grid;place-items:center}
.progress{flex:1 1 220px;display:flex;align-items:center;gap:12px;min-width:0}
.time{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.08em;color:#4f6274;font-variant-numeric:tabular-nums;width:34px;flex:none}
.time[data-time="dur"]{text-align:right}
.seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:24px;background:transparent;cursor:pointer;margin:0;--p:0%}
.seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#2f3a42 var(--p),#c9d3d8 var(--p))}
.seek::-moz-range-track{height:2px;background:#c9d3d8}
.seek::-moz-range-progress{height:2px;background:#2f3a42}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#2f3a42;margin-top:-5px}
.seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#2f3a42}
.seek:focus-visible{outline:2px solid #6f8296;outline-offset:2px}
.pl-tracks{list-style:none;margin:0;padding:4px clamp(16px,3vw,32px) 12px;display:grid;gap:2px;border-top:1px solid #e3e8ec}
.pl-tracks[hidden]{display:none}
.pl-tracks button{font:inherit;font-size:17px;color:#2f3a42;background:none;border:0;padding:8px 0;min-height:44px;cursor:pointer;text-align:left;display:flex;gap:12px;align-items:baseline;width:100%}
.pl-tracks button[aria-current="true"]{font-weight:600}
.pl-tracks .note{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.2em;color:#4f6274;text-transform:uppercase}
.player-mini{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:46px;height:34px;border:0;background:#6f8296;color:#fafafa;cursor:pointer;display:grid;place-items:center;z-index:6;box-shadow:0 6px 18px rgba(47,58,66,.18)}
.player-mini[hidden]{display:none}
.wave{display:flex;align-items:center;gap:1.5px;height:16px}
.wave i{display:block;width:1.5px;border-radius:1px;background:currentColor;height:calc(var(--h) * .7px)}
.wave i:nth-child(1){--h:4}.wave i:nth-child(2){--h:9}.wave i:nth-child(3){--h:14}.wave i:nth-child(4){--h:8}.wave i:nth-child(5){--h:19}
.wave i:nth-child(6){--h:12}.wave i:nth-child(7){--h:22}.wave i:nth-child(8){--h:12}.wave i:nth-child(9){--h:17}.wave i:nth-child(10){--h:7}
.wave i:nth-child(11){--h:13}.wave i:nth-child(12){--h:6}.wave i:nth-child(13){--h:3}
/* always moving while the mini player is showing */
.player-mini .wave i{animation:wave 1.1s ease-in-out infinite alternate;transform-origin:center}
.player-mini .wave i:nth-child(3n){animation-delay:-.35s}
.player-mini .wave i:nth-child(3n+1){animation-delay:-.7s}
.player-mini .wave i:nth-child(4n){animation-duration:.8s}
@keyframes wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.player-mini .wave i{animation:none}}
@media(max-width:760px){.track-info{flex:1 1 140px;width:auto}.progress{flex-basis:100%;order:3}}

/* home: meet the artist */
.meet{display:flex;align-items:center;justify-content:center;padding-right:12%}
.meet-script{display:inline-block;font-size:clamp(64px,7vw,92px);color:#6f8296;line-height:1.25;margin-left:-.12em;padding:0 .35em .05em .05em}
.meet-name{font-size:clamp(36px,4.2vw,56px);color:#2f3a42;letter-spacing:.08em;margin-top:-.15em}

/* home: the standard. Three values that overlap like a magazine spread and fit one screen:
   01 top left, 02 right and lower (starting beside 01's text), 03 tucked under 01, beside 02's text. */
.values{max-width:1120px;margin:0 auto;padding:44px 20px 72px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.values-kicker{grid-column:1/-1;grid-row:1;font-size:clamp(34px,3.2vw,44px);color:#6f8296;margin-bottom:-.5em;position:relative;z-index:1;padding-left:.1em}
.value-title{font-size:clamp(46px,6.2vw,86px);line-height:.9;color:#6f8296}
.value-body{display:flex;gap:18px;margin-top:16px;max-width:400px}
.value-body p{margin:0;font-size:17px;line-height:1.6}
.value-num{font-size:clamp(32px,3.4vw,46px);line-height:1;flex:none;margin-top:-2px}
.v1{grid-column:1;grid-row:2}
.v2{grid-column:2;grid-row:2/4;justify-self:end;text-align:right;margin-top:clamp(60px,11vw,150px)}
.v2 .value-body{margin-left:auto;flex-direction:row-reverse}
.v3{grid-column:1/-1;grid-row:3;justify-self:start;margin-left:16%;margin-top:clamp(20px,3.5vw,44px);max-width:46%}

/* home: kind words (quiet: soft blue-gray headline, plain quote, large names) */
.review-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;filter:saturate(.7) brightness(1.1) contrast(.9)}
.kind-words{font-size:clamp(60px,6vw,80px);color:#6f8296;display:block;margin-bottom:28px}
.review-headline{font-size:15px;letter-spacing:.16em;line-height:1.5;color:#5f7386;margin:0 0 26px;font-weight:400}
.review-quote{margin:0;padding-left:28px;border-left:1px solid #c3cdd4}
.review-quote p{margin:0 0 18px;font-size:19px;line-height:1.85;color:#45525c;font-weight:400}
.review-quote footer{color:#5f7386;font-size:10px}
.review-names{display:grid;gap:4px;justify-items:start}
.review-name{font-family:Italiana,Georgia,serif;font-size:clamp(21px,1.9vw,26px);line-height:1.2;color:#2f3a42;background:none;border:0;border-bottom:1px solid transparent;padding:12px 24px 14px 0;cursor:pointer;min-height:44px;text-align:left}
.review-name:hover{color:#6f8296}
.review-name[aria-pressed="true"]{color:#6f8296;border-bottom-color:#6f8296}

/* logo strips */
.logo{flex:none;display:flex;align-items:center;justify-content:center;height:58px;margin:0 clamp(28px,3.6vw,52px);opacity:.5}
.logo img{width:auto;display:block;max-width:none}
.logo-text{font-family:Italiana,Georgia,serif;font-size:21px;color:#26343b;white-space:nowrap}
.logo-hilton{display:flex;align-items:flex-start;gap:4px;color:#26343b;white-space:nowrap}
.logo-hilton .the{font-family:Yellowtail,cursive;font-size:23px;line-height:1;transform:rotate(-7deg)}
.logo-hilton .bh{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:21px;letter-spacing:.07em;line-height:1;margin-top:10px}
.track{display:flex;width:max-content}
/* each logo is its own small moving layer, shifted by --w (one half's width, set by site.js); a whole strip
   moving as one layer was left partly unpainted by Chrome. Without --w (no JS) the strip just stands still. */
.group{display:flex;align-items:center;flex:none}
.group .logo{animation:drift var(--dur,160s) linear infinite;will-change:transform}
@keyframes drift{from{transform:translateX(calc(-1 * var(--w)))}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.group .logo{animation:none}}

/* about, corporate */
.card{display:grid;gap:10px;padding:32px;background:#ffffff;border:1px solid #dfe5e9;text-decoration:none;color:#2f3a42}
.card:hover{border-color:#6f8296;color:#2f3a42}
.list{margin:0;padding:0;list-style:none}
.list li{padding:9px 0;border-bottom:1px solid #d5dbe0;line-height:1.35}

/* repertoire */
.songs{columns:3 240px;column-gap:48px;margin:0;padding:0;list-style:none}
.songs li{break-inside:avoid;padding:7px 0;border-bottom:1px solid #e3e8ec;line-height:1.3}

/* faq: Moses-style. Topic tabs, big stacked F A Q on the left, answers all open on the right */
.faq{max-width:1100px;margin:0 auto;padding:48px 20px 88px}
.faq-kicker{font-size:10px;color:#5f7386;margin:0 0 8px;font-weight:500}
.faq-tabs{display:flex;flex-wrap:wrap;gap:0 28px;border-bottom:1px solid #e3e8ec;margin-bottom:36px}
.faq-tab{font-family:Italiana,Georgia,serif;font-size:clamp(18px,1.55vw,21px);color:#2f3a42;background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:8px 0 10px;cursor:pointer;min-height:44px}
.faq-tab:hover{color:#6f8296}
.faq-tab[aria-pressed="true"]{color:#6f8296;border-bottom-color:#6f8296}
.faq-body{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:56px;align-items:start}
.faq-letters{display:grid;justify-items:center;font-family:Italiana,Georgia,serif;font-size:clamp(84px,9vw,124px);line-height:1.05;color:#6f8296}
.faq-group-name{font-size:10px;color:#5f7386;margin:0 0 18px}
.faq-js .faq-group-name{display:none}
.faq-group + .faq-group{margin-top:40px}
.faq-item{margin:0 0 28px;max-width:62ch}
.faq-q{font-family:Montserrat,sans-serif;font-size:14px;font-weight:500;letter-spacing:.01em;color:#2f3a42;margin:0 0 6px}
.faq-a{margin:0;font-size:18px;line-height:1.7;color:#45525c}
[data-faq-group][hidden]{display:none}

/* weddings */
.moment{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:56px;align-items:center;max-width:1080px;margin:0 auto;padding:56px 20px}
.moment.flip > img{order:2}
.tip{margin-top:22px;padding:18px 22px;background:#eef1f3}

/* corporate Experience photo: the whole picture, flipped, sitting at the right of the band (zoomed out) */
/* fills the right 85% of the band; its left edge fades out so it melts into the white behind the text */
.exp-zoom{width:85%;margin-left:auto;object-fit:cover;object-position:50% 55%;
  -webkit-mask-image:linear-gradient(to left,#000 55%,transparent 100%);mask-image:linear-gradient(to left,#000 55%,transparent 100%)}
@media(max-width:760px){.exp-zoom{width:100%;margin-left:0;object-position:70% 55%;-webkit-mask-image:none;mask-image:none}}

/* whole photo, smaller, against the right edge (Home: shows the dancing guest as well as the band) */
/* the element is exactly the photo's size (width follows its height), so the mask fades the photo's own left edge */
.exp-zoom.exp-whole{width:auto;max-width:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to left,#000 68%,transparent 100%);mask-image:linear-gradient(to left,#000 68%,transparent 100%)}
@media(max-width:760px){.exp-zoom.exp-whole{width:100%;object-position:62% 40%;-webkit-mask-image:none;mask-image:none}}

/* About, How I got here: photo alone on the left, about as tall as the heading + story on the right.
   Phone: heading, then photo, then story. */
.journey{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"photo head" "photo text";column-gap:64px;
  max-width:1080px;margin:0 auto;padding:88px 20px 40px;align-items:start}
.journey-head{grid-area:head;min-width:0;margin-bottom:28px}
.journey-text{grid-area:text;min-width:0}
.journey-photo{grid-area:photo;align-self:center;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:50% 20%;display:block}
@media(max-width:760px){
  .journey{grid-template-columns:1fr;grid-template-areas:"head" "photo" "text";padding-top:64px}
  .journey-photo{aspect-ratio:4/5;margin-bottom:32px}
}

/* Contact intro: small, light sans like Moses Lin's, in the soft slate instead of near-black */
.quiet-intro{font-family:Montserrat,sans-serif;font-weight:400;font-size:12.5px;line-height:1.85;color:#4f6274}
.quiet-intro a{color:#4f6274}

/* forms */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px}
/* Contact: no card around the form, so its wider rows would fit three; keep two */
.grid2.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.field{display:grid;gap:6px}
.field input,.field textarea,.field select{font:inherit;font-size:17px;color:#2f3a42;background:#ffffff;border:1px solid #c9d3d8;border-radius:0;padding:12px 14px;min-height:44px;box-sizing:border-box;width:100%}
.field input:focus,.field textarea:focus,.field select:focus,.consent input:focus,.check input:focus{outline:2px solid #6f8296;outline-offset:1px}
.hint{font-size:15px;color:#4f6274}
.consent{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.5}
.consent input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:#2f3a42}
.checks{border:0;margin:0;padding:0;min-width:0}
.checks legend{display:block;width:100%;padding:0;margin-bottom:8px}
.check-list{display:grid;gap:2px}
.check{display:flex;align-items:center;gap:12px;min-height:44px}
.check input{width:20px;height:20px;accent-color:#2f3a42}
/* Contact tabs, like Moses Lin's: soft grey, the picked one in the blue-grey with off-white text */
.kind-tab{font-family:Montserrat,sans-serif;font-weight:400;font-size:13px;letter-spacing:.14em;cursor:pointer;padding:16px 32px;min-height:44px;border:0;background:#eef1f3;color:#6f8296}
.kind-tab[aria-pressed="true"]{background:#6f8296;color:#fafafa}
/* form buttons (Contact SEND, For Artists APPLY): same look as the picked Contact tab */
.soft-btn{font-family:Montserrat,sans-serif;font-weight:400;font-size:13px;line-height:1.2;letter-spacing:.14em;box-sizing:border-box;cursor:pointer;padding:16px 40px;min-height:44px;border:0;background:#6f8296;color:#fafafa}
.soft-btn:hover{background:#5f7286}
.soft-btn.ghost{background:transparent;color:#6f8296;box-shadow:inset 0 0 0 1px #6f8296}
.soft-btn.ghost:hover{background:#eef1f3}

/* For Artists: the proof line under the hero, and the short FAQ (tap a question to open it) */
.proof{max-width:760px;margin:0 auto;padding:0 20px 72px;text-align:center}
.proof p{margin:0;padding-top:28px;border-top:1px solid #dfe5e9;font-style:italic;font-size:clamp(20px,1.9vw,24px);line-height:1.5;color:#4f6274}
.afaq{border-bottom:1px solid #dfe5e9}
.afaq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;margin:0;min-height:44px;box-sizing:border-box}
.afaq summary::-webkit-details-marker{display:none}
.afaq summary::after{content:"+";font-family:Montserrat,sans-serif;font-weight:400;font-size:20px;color:#6f8296;flex:none}
.afaq[open] summary::after{content:"\2212"}
.afaq .faq-a{padding:0 0 22px}
[data-kind][hidden]{display:none}
/* spam trap: off screen, people never see or reach it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:16px;color:#2f3a42;background:#eef1f3;padding:12px 16px}

/* legal */
.legal h2{font-family:Italiana,Georgia,serif;font-weight:400;font-size:32px;color:#2f3a42;margin:44px 0 10px}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:20px;display:grid;gap:8px}
.terms{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px 32px;border-top:1px solid #d5dbe0;padding:22px 0;margin:0}
.terms dt{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.3em;font-weight:500;color:#4f6274;padding-top:6px}
.terms dd{margin:0}

@media(max-width:760px){
  .nav{justify-content:center}
  .nav .links{justify-content:center}
  .name{position:static;padding:20px 16px 8px}
  .heroimg{aspect-ratio:4/4.6;object-position:33% 50%}
  .moment.flip > img{order:0}
  .meet{padding-right:0}
  .values{grid-template-columns:1fr;row-gap:36px}
  .v1,.v2,.v3{grid-column:1;grid-row:auto;margin:0;max-width:none;justify-self:start;text-align:left}
  .v2 .value-body{margin-left:0;flex-direction:row}
  .terms{grid-template-columns:1fr}
  .faq-body{grid-template-columns:1fr;gap:0}
  .faq-letters{display:none}
}