/* Romina Romay — site styles (single consolidated stylesheet) */
:root{--ink:#151310;--paper:#eeeae2;--copper:#bc7951;--stone:#c4bdb2;--line:rgba(21,19,16,.22);--line-dark:rgba(255,255,255,.22)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button,summary,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,summary{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
::selection{background:var(--copper);color:var(--ink)}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:400}
em{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.light{background:var(--paper);color:var(--ink)}
.eyebrow{font-size:11px;letter-spacing:2.4px;line-height:1.7}
.skip{position:fixed;top:-80px;left:20px;z-index:50;background:var(--paper);color:var(--ink);padding:15px}
.skip:focus{top:10px}

/* header + menu */
header{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:27px 4.6%;border-bottom:1px solid #ffffff30}
.signature{font-family:Georgia,serif;font-size:30px;letter-spacing:-4px}
.header-right{display:flex;align-items:center;gap:30px}
.lang{display:flex;gap:10px;font-size:11px;letter-spacing:2px;min-height:44px;align-items:center}
.lang [aria-current]{color:var(--copper)}
.lang a{padding:10px 0}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
#menu>summary{font-size:11px;letter-spacing:2px;display:flex;align-items:center;gap:23px;min-height:44px}
.bars{font-size:21px}
#menu nav{position:absolute;right:0;top:100%;width:min(520px,100%);background:#191611;padding:25px 45px 40px;box-shadow:0 20px 40px #0005}
#menu nav a{font-family:Georgia,serif;font-size:42px;display:flex;justify-content:space-between;border-bottom:1px solid #ffffff30;padding:17px 0}
#menu nav small{font:11px Arial;align-self:center;color:var(--copper)}
.back-link{font-size:11px;letter-spacing:2px;padding:12px 0}

/* hero */
.hero{position:relative;min-height:760px;height:100svh;max-height:1250px;isolation:isolate;overflow:hidden}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;z-index:-3}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#070605ad,transparent 68%),linear-gradient(0deg,#090705ad,transparent 30%)}
.hero-title{position:absolute;left:7%;top:31%}
.hero h1{font-size:clamp(85px,10.7vw,175px);line-height:.92;letter-spacing:-7px;margin-top:32px}
.period{color:var(--copper)}
.hero-bottom{position:absolute;bottom:37px;left:4.6%;right:4.6%;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px}
.hero-bottom a{display:flex;gap:32px;align-items:center;padding:12px}
.hero-bottom a span{font-size:28px}

/* statement */
.statement{padding:110px 8% 70px}
.statement h2{font-size:clamp(55px,7.6vw,122px);line-height:1.03;letter-spacing:-4px;margin:45px 0}
.statement h2 em{color:#79533d}

/* projects */
.projects{padding:40px 8% 105px}
.section-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:24px 0 45px;gap:25px}
.section-line h2{font-size:11px;letter-spacing:2px;line-height:1.5}
.project{display:grid;grid-template-columns:1.1fr 1fr;gap:9%;align-items:center;margin-bottom:85px;position:relative}
.project-art{height:530px;position:relative;overflow:hidden;background:#23170f;color:var(--paper)}
.project-art img{width:100%;height:100%;object-fit:cover;object-position:57%;display:block}
.project-art::after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#0008);pointer-events:none}
.project-copy h3{font-size:clamp(38px,4.2vw,70px);line-height:1.06;letter-spacing:-2px;margin:35px 0 25px}
.project-copy p{font-size:14px;line-height:1.9;max-width:330px}
.project-more{margin-top:35px;border-top:1px solid var(--line);padding-top:20px;font-size:13px}
.project-more summary{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.project-more summary span{font-size:23px;line-height:1}
.project-more summary span::before{content:'+'}
.project-more[open] summary span::before{content:'\2212'}
.project-more p{margin:18px 0}
.project-more a{display:inline-block;padding:10px 0}
.electronic{direction:rtl;margin-bottom:0}
.electronic>*{direction:ltr}
.project-art.romee-photo{height:auto;background:#171614}
.project-art.romee-photo img{height:auto;object-fit:contain}
.project-art.romee-photo::after{display:none}
.text-link{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 0;margin-top:25px;font-size:13px}
.romee-card .text-link::after{content:'';position:absolute;inset:0} /* whole card is one real link */
.romee-card:focus-within .project-art{outline:2px solid var(--copper);outline-offset:6px}

/* listen */
.moments{padding:75px 8% 110px}
.moments .section-line,.watch .section-line{border-color:#ffffff38}
.moments-heading{margin:0 0 45px}
.moments h3,.watch h3{font-size:clamp(45px,6vw,90px);line-height:1.05;letter-spacing:-2px}
.media-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:7%;align-items:start}
.moment-photo{display:block;width:100%;border:0;padding:0;background:#0b0a09;color:var(--paper);overflow:hidden;transform:translateY(-18px)}
.moment-photo img{width:100%;height:auto;display:block}
.audio-list h4{font:400 clamp(36px,4vw,65px) Georgia,serif;margin:22px 0 14px}
.track{border-top:1px solid #ffffff38;padding:18px 0;display:grid;grid-template-columns:auto 1fr auto;gap:8px 16px;align-items:center}
.track-text{grid-column:2;display:block}
.track-title{display:block;font-size:16px}
.track-text small{display:block;margin-top:5px;font-size:12px;letter-spacing:.3px;line-height:1.5;color:var(--stone)}
.track audio{grid-column:1/-1;width:100%;height:36px}
.track.is-enhanced audio{display:none}
.play{grid-column:1;grid-row:1;width:46px;height:46px;border-radius:50%;border:1px solid var(--copper);background:none;color:var(--copper);font-size:14px;display:grid;place-items:center;padding:0 0 0 2px}
.play[aria-pressed=true]{background:var(--copper);color:var(--ink);padding:0}
.time{grid-column:3;grid-row:1;font-size:11px;letter-spacing:1px;color:var(--stone);font-variant-numeric:tabular-nums}
.seek{grid-column:1/-1;width:100%;height:20px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.seek::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--copper) var(--p,0%),#ffffff40 var(--p,0%))}
.seek::-moz-range-track{height:2px;background:#ffffff40}
.seek::-moz-range-progress{height:2px;background:var(--copper)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--paper);border:0;margin-top:-5px}
.seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);border:0}

/* watch */
.watch{padding:0 8% 110px}
.watch h3{margin:0 0 45px}
.watch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.video{position:relative;aspect-ratio:16/9;background:#0b0a09;border:1px solid #ffffff2a}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:22px;color:var(--paper);background:radial-gradient(120% 120% at 100% 0,#2a1f17,#0b0a09 70%)}
.video-play strong{font-weight:400;font-family:Georgia,serif;font-size:clamp(20px,2vw,28px);line-height:1.15}
.video-play small{font-size:12px;color:var(--stone);line-height:1.5}
.video-play .icon{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid var(--copper);color:var(--copper);display:grid;place-items:center;font-size:14px;padding-left:2px}
@media(hover:hover){.video-play:hover .icon{background:var(--copper);color:var(--ink)}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6%;padding:100px 8%;align-items:center}
.about-portrait{background:transparent}
.about-portrait img{display:block;width:100%;height:auto}
.about h2{font-size:clamp(50px,5.5vw,85px);line-height:.98;letter-spacing:-3px;margin:25px 0 30px}
.about-copy>p:not(.eyebrow){font-size:15px;line-height:1.9;margin-bottom:16px}

/* contact */
.contact{padding:95px 8% 0}
.contact h2{font-size:clamp(50px,9vw,145px);letter-spacing:-4px;margin:35px 0}
.contact h2 em{color:var(--copper)}
#contact-form{max-width:700px;margin:40px 0 55px}
#contact-form label{display:block;font-size:12px;letter-spacing:1px;margin-bottom:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#contact-form input,#contact-form textarea{display:block;width:100%;margin-top:10px;padding:14px;border:1px solid #797168;border-radius:0;color:var(--paper);background:#201d19;font:16px Arial,sans-serif}
#contact-form textarea{resize:vertical}
#contact-form input:focus,#contact-form textarea:focus{outline:2px solid var(--copper);outline-offset:2px}
#contact-form button{padding:15px 24px;border:1px solid var(--paper);background:var(--paper);color:var(--ink);letter-spacing:1px}
#contact-form button[disabled]{opacity:.6;cursor:wait}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
#contact-status{margin-top:14px;font-size:13px;line-height:1.6;color:var(--stone);min-height:1.6em}
.booking-contact{margin-top:42px}
.booking-contact .eyebrow{margin-bottom:16px}
.email{display:flex;justify-content:space-between;align-items:center;max-width:700px;font-size:clamp(17px,2.8vw,40px);border-bottom:1px solid #ffffff45;padding:0 0 25px}
.email span{color:var(--copper)}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff30;margin-top:100px;padding:28px 0;font-size:11px;letter-spacing:1.5px}
footer a{padding:6px 0}

/* photo dialog */
dialog{border:0;background:#100e0c;color:var(--paper);padding:55px 16px 16px;max-width:95vw;max-height:95svh}
dialog::backdrop{background:#000d}
dialog img{display:block;max-width:85vw;max-height:78svh;object-fit:contain}
.close-photo{position:absolute;right:20px;top:16px;background:none;color:inherit;border:0;padding:10px;letter-spacing:2px;font-size:11px}

/* ROMEE page */
.romee-page header{position:relative}
.romee-hero{min-height:calc(100svh - 95px);display:grid;grid-template-columns:1fr 1.35fr;align-items:center;gap:6%;padding:70px 8%}
.romee-hero figure,.story-image{margin:0}
.romee-hero img{width:100%;height:min(78svh,760px);object-fit:cover;display:block}
.romee-hero h1{font-size:clamp(80px,10vw,160px);line-height:.9;letter-spacing:-5px;margin:28px 0}
.romee-intro{max-width:330px;font-size:16px;line-height:1.8}
figcaption{font-size:11px;letter-spacing:.6px;line-height:1.6;margin-top:12px;opacity:.65}
.her-voices-story{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1.1fr 1fr;gap:10%;padding:120px 10%;align-items:center}
.story-image img{width:100%;display:block}
.story-copy h2{font-size:clamp(50px,6vw,90px);line-height:1;letter-spacing:-3px;margin:28px 0}
.story-copy>p:not(.eyebrow){font-size:15px;line-height:1.9;margin-bottom:18px;max-width:470px}
.romee-footer{display:flex;justify-content:space-between;padding:30px 8%;font-size:11px;letter-spacing:1.5px}

/* 404 */
.notfound{min-height:100svh;display:grid;place-content:center;gap:24px;padding:8%;text-align:left}
.notfound h1{font-size:clamp(60px,12vw,160px);letter-spacing:-5px;line-height:.95}
.notfound a{border-bottom:1px solid var(--copper);padding:8px 0;font-size:13px;letter-spacing:2px;justify-self:start}

@media(hover:hover){#menu nav a:hover,.text-link:hover,.project-more summary:hover{color:var(--copper)}.moment-photo img{transition:filter .4s}.moment-photo:hover img{filter:brightness(1.1)}}
@media(min-width:1600px){.hero-title{left:9%}}
@media(max-width:900px){.watch-grid{grid-template-columns:1fr}}
@media(max-width:700px){
header{padding:16px 6%}.header-right{gap:18px}
.hero{min-height:700px;max-height:1000px}.hero-photo{object-position:59% center}
.hero-shade{background:linear-gradient(0deg,#090705dd,transparent 75%)}
.hero-title{left:7%;top:auto;bottom:130px}.hero h1{font-size:90px;letter-spacing:-4px;margin-top:20px}
.hero-bottom{left:7%;right:7%;bottom:22px}
.statement{padding:75px 7% 45px}.statement h2{font-size:54px;letter-spacing:-2px;margin:30px 0}
.projects{padding:30px 7% 65px}.section-line{padding-bottom:28px}
.project{grid-template-columns:1fr;gap:30px;margin-bottom:60px}.project-art{height:410px}
.project-copy h3{font-size:48px;margin:20px 0}.project-copy p{max-width:100%}.project-more{margin-top:20px}
.moments{padding:60px 7%}.media-grid{grid-template-columns:1fr;gap:35px}.moment-photo{transform:none}
.watch{padding:0 7% 70px}
.about{grid-template-columns:1fr;padding:65px 7%;gap:35px}.about h2{font-size:65px}
.contact{padding:65px 7% 0}.contact h2{font-size:60px;letter-spacing:-2px}.form-row{grid-template-columns:1fr;gap:0}.email{font-size:20px}
footer{margin-top:70px;letter-spacing:1px}
#menu nav{padding:20px 7% 30px}#menu nav a{font-size:35px}
.romee-hero,.her-voices-story{grid-template-columns:1fr;padding:65px 7%;gap:40px}.romee-hero{min-height:auto}.romee-hero img{height:auto}
.romee-footer{padding:25px 7%;gap:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}