/* laia.mrcuculain.com — improved copy of laiacabrera.cargo.site */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-italic.woff2) format('woff2')}

:root{
  --pad:3rem; --t:1.2rem;
  --white:#ffffff; --ink:rgba(0,0,0,.75); --cap:rgba(0,0,0,.4);
  --radius:1.2rem; --nav-h:4.6rem;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:max(11px,.9vw);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#c9c9c9;color:var(--white);font-family:'Inter',Helvetica,Arial,sans-serif;font-weight:500;font-size:var(--t);line-height:1.2;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
a:active{opacity:.7}
img,video{display:block;max-width:100%}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.overlay:focus{outline:none}

/* ---------- top bar (pinned, frosted) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.5rem 1.5rem 0}
.bar{display:grid;grid-template-columns:3fr 6fr 3fr;gap:1rem;align-items:center;background:rgba(0,0,0,.1);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);border-radius:.5rem;padding:.8rem 1.5rem}
.bar .links{display:flex;justify-content:center;gap:0 3.7rem;flex-wrap:wrap}
.bar .info-link{justify-self:end}
.bar a{transition:opacity .2s}
.bar a:hover{opacity:.7}

/* ---------- backdrops (fixed, so they cover the whole page) ---------- */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden}
.backdrop.wallpaper img{width:100%;height:100%;object-fit:cover}
.backdrop.gradient{background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 55%,var(--g3) 100%)}
.backdrop.gradient i{position:absolute;width:90vmax;height:90vmax;border-radius:50%;filter:blur(8vmax);opacity:.85;will-change:transform}
.backdrop.gradient i:nth-child(1){background:var(--g1);left:-30vmax;top:-40vmax;animation:drift1 26s ease-in-out infinite alternate}
.backdrop.gradient i:nth-child(2){background:var(--g2);right:-35vmax;top:10vmax;animation:drift2 32s ease-in-out infinite alternate}
.backdrop.gradient i:nth-child(3){background:var(--g3);left:-10vmax;bottom:-50vmax;animation:drift3 29s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(28vmax,18vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-30vmax,14vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(22vmax,-24vmax) scale(1.1)}}

/* ---------- pages ---------- */
.page{padding:calc(var(--nav-h) + 1.5rem) var(--pad) 4rem}
.ptitle{margin:0 0 3.4rem;text-align:center;font-size:2rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.ptitle.light{color:rgba(255,255,255,.75)}
.media{display:block;border:.1rem solid rgba(0,0,0,.16);border-radius:var(--radius);overflow:hidden;filter:drop-shadow(.2rem .2rem .5rem rgba(0,0,0,.14));background:rgba(0,0,0,.08)}
.media img,.media video{width:100%;height:auto}
a.media{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
a.media:hover{transform:translateY(-.25rem)}

/* landing */
.landing{background:#1a1414}
.landing-main{position:fixed;inset:0}
.landing-img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}

/* 01 film — freeform collage (positions in % of the content width) */
.freeform{position:relative;container-type:inline-size;height:calc(var(--h) * 1cqw)}
.freeform .fi{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1cqw);width:calc(var(--w) * 1%);transform:rotate(var(--r));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.freeform .fi:hover{z-index:20!important}
.freeform video{aspect-ratio:16/9;object-fit:cover;background:#000}
.freeform.videos{margin-top:1rem}
.freeform.posters{margin-top:7rem}

/* 02 headshots — scrub slideshows */
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:3.2rem}
.slideshow{position:relative;height:max(22rem,calc(100vh - 19.5rem));aspect-ratio:3/4;cursor:ew-resize;touch-action:pan-y}
.slideshow.right{justify-self:end}
.slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.slideshow img.on{visibility:visible}
.slideshow:focus-visible{outline-offset:4px}

/* 03 theater */
.theater-page{max-width:55%;margin:0 auto;padding-left:0;padding-right:0;min-height:100vh}
.theater-page .ptitle{margin-bottom:.6rem}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.tgrid figure{margin:0 0 1rem}
.caption{display:block;margin-top:1em;text-align:center;color:var(--cap);font-size:1.2rem;line-height:1.2}
.caption a{color:var(--cap)}
.caption i a{text-decoration:underline}
.caption a:hover{color:rgba(0,0,0,.65)}

/* project pages */
.project .page{padding-left:var(--pad);padding-right:var(--pad)}
.pcols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.pimgs{display:flex;flex-direction:column;gap:3rem}
.ptext{padding:0 0 0 .2rem}
.ptext h1{margin:.6rem 0 3.6rem;text-align:center;font-size:var(--t);font-weight:600;letter-spacing:0}
.ptext p{margin:0 0 1.2em}
.ptext p.gap{margin-top:2.4em}
.ptext .center{text-align:center}
.ptext b{font-weight:700}
.ptext a{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.15em}
.ptext a.back{text-decoration:none;opacity:.8}
.ptext a.back:hover{opacity:1}
.trailer{margin:2.4em 0 1em}
.pafter{margin-top:3rem}
.film{position:relative;display:block;width:100%;background:#000;color:#fff;text-decoration:none!important}
.film img{width:100%;height:100%;object-fit:cover;opacity:.9}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-play{position:absolute;left:1.2rem;bottom:1.2rem;display:flex;align-items:center;gap:.8rem}
.film-play .dot{width:3.4rem;height:3.4rem;border-radius:50%;background:rgba(255,255,255,.9);color:#000;display:grid;place-items:center}
.film-play .mono{font-size:1rem}

/* ---------- overlays: Information & Contact ---------- */
.overlay{position:fixed;inset:0;z-index:100;overflow-y:auto;-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);background:rgba(20,16,16,.28);padding:1rem;opacity:0;transition:opacity .2s linear}
.overlay.show{opacity:1}
.overlay[hidden]{display:none}
.ov-inner{min-height:100%}
.ov-head{display:grid;grid-template-columns:6fr 3fr 3fr;gap:1rem;padding:.2rem 0 .5rem}
.ov-head a{justify-self:end}
.ov-head a:hover,.ov-links a:hover,.agent a:hover{opacity:.7}
.overlay hr{border:0;height:1px;background:rgba(255,255,255,.28);margin:0 0 .9rem}
.overlay .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:4.2rem}
.overlay .row > div:last-child{max-width:44rem}
.ov-links{display:flex;flex-direction:column}
.ov-end{height:2rem}
.agent h3,.agent .direct{margin:0 0 1.2em;font-size:var(--t);font-weight:600;line-height:1.2}
.agent u{text-underline-offset:.15em}
.agent .direct{font-weight:500;opacity:.85}
body.ov-open{overflow:hidden}

/* lightbox (project images) */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(197,197,197,.97);display:grid;place-items:center;padding:3rem}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:calc(100vh - 6rem);width:auto;height:auto;border-radius:var(--radius)}
.lightbox button{position:absolute;background:rgba(87,87,87,.35);border:0;color:rgba(255,255,255,.9);font-size:16px;width:44px;height:44px;border-radius:50%;cursor:pointer}
.lb-close{top:14px;right:14px}.lb-prev{left:14px;top:50%;transform:translateY(-50%)}.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:rgba(0,0,0,.45);font-size:13px}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  html{font-size:12px}
  .theater-page{max-width:80%}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  html{font-size:12.2px}
  :root{--t:1.45rem;--pad:1rem}
  .nav{position:absolute;padding:1rem 1rem 0}
  .bar{grid-template-columns:1fr 1fr;padding:.9rem 1.5rem;align-items:start;gap:0 1rem}
  .bar .links{flex-direction:column;align-items:flex-start;gap:0;grid-column:2;grid-row:1}
  .bar .info-link{grid-column:2;grid-row:2;justify-self:start}
  .bar a{min-height:2.4rem;display:flex;align-items:center}
  .bar .name{grid-row:1;align-self:start}
  :root{--nav-h:13.6rem}
  .page{padding-top:calc(var(--nav-h) + .5rem)}
  .ptitle{font-size:2.2rem;margin-bottom:2rem}
  .freeform{height:auto;container-type:normal}
  .page{overflow-x:clip}
  .freeform.videos{display:flex;flex-direction:column;gap:3.5rem}
  .freeform.videos .fi{position:relative;left:auto;top:auto;width:100%}
  .freeform.posters{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:5rem}
  .freeform.posters .fi{position:relative;left:auto;top:auto;width:100%}
  .hrow{grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}
  .slideshow,.slideshow.right{height:auto;width:100%;justify-self:center}
  .theater-page{max-width:none;padding-left:var(--pad);padding-right:var(--pad)}
  .tgrid{grid-template-columns:1fr 1fr;gap:1rem}
  .caption{font-size:1.35rem}
  .pcols{grid-template-columns:1fr;gap:3rem}
  .pimgs{gap:1.5rem}
  .ptext h1{margin:0 0 2rem}
  .overlay{padding:1rem}
  .overlay .row{grid-template-columns:8.5rem 1fr;gap:1rem;margin-bottom:3rem}
  .ov-head{grid-template-columns:8.5rem 1fr auto}
  .lightbox{padding:3.5rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  .backdrop.gradient i{animation:none}
  *{transition:none!important}
}