/* stephanieajmeria.com - cinematic stylesheet v2 (designer pass, Oct 2026)
   greige ground, black band + slate + footer, Oswald display over Helvetica */
:root{
  /* dark coffee ground, espresso band + slate + footer, cream type */
  --bg:#281e19; --bg-2:#201612; --paper:#31261f; --band:#130d0b;
  --ink:#f1e9df; --soft:#cfc1b0; --faint:#ab9c8b; --rule:rgba(241,233,223,.16); --rule-strong:#f1e9df; --hover:#fff;
  --accent:#a9cde6; --accent-dim:#7fa6c2; --on-band:#f1e9df; --on-band-dim:#a8998a; --on-band-rule:#281e19; --on-band-link:#d9cdbe;
  --display:"Barlow Condensed","Oswald","Helvetica Neue Condensed","Arial Narrow",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1200px; --wrap-wall:1240px; --gutter:32px; --gutter-phone:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media(max-width:720px){.wrap{padding:0 var(--gutter-phone)}}
#portfolio,#about,#contact{scroll-margin-top:80px}
.u{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
.u:hover{text-decoration-color:var(--ink)}

/* section head pattern */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--rule-strong);padding-bottom:12px;margin-bottom:32px}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.sec-head a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);text-decoration:none;white-space:nowrap}
.sec-head a:hover{color:var(--ink)}

/* HEADER BAND */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--band);color:var(--on-band)}
nav.top.rule{border-bottom:1px solid var(--on-band-rule)}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center;height:68px}
nav.top .brand{text-decoration:none;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
nav.top .brand small{display:block;font-family:var(--body);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-band-dim);margin-top:9px;font-weight:400}
nav.top .links{display:flex;gap:30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
nav.top .links a{text-decoration:none;color:var(--on-band-link);padding:6px 0}
nav.top .links a:hover{color:#fff}
nav.top .links a.on{color:#fff;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
@media(max-width:720px){
  nav.top .wrap{height:auto;display:grid;grid-template-columns:1fr;gap:8px;padding:12px var(--gutter-phone) 10px}
  nav.top .brand{font-size:17px;letter-spacing:.06em}
  nav.top .brand small{display:none}
  nav.top .links{gap:0 14px;font-size:10px;letter-spacing:.1em;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.top .links::-webkit-scrollbar{display:none}
  nav.top .links a{padding:4px 0}
  nav.top .links a.on{text-underline-offset:6px}
  nav.top.compact .links{display:none}
}

/* HERO + SLATE */
.hero{position:relative;background:#000;width:100%;aspect-ratio:21/9;max-height:min(72vh,820px);overflow:hidden}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 45%)}
.hero .hit{position:absolute;top:0;bottom:0;width:50%;cursor:w-resize;z-index:2}
.hero .hit.next{right:0;cursor:e-resize}
.slate{background:var(--band);color:var(--on-band)}
.slate .wrap{height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.slate .txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slate .ctl{display:flex;align-items:center;gap:4px;flex:none}
.slate .n{color:var(--on-band-dim);font-variant-numeric:tabular-nums;margin-right:12px;letter-spacing:.12em}
.slate .arrow{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:var(--on-band);cursor:pointer;opacity:.8}
.slate .arrow:hover{opacity:1}
@media(max-width:720px){.hero{aspect-ratio:4/3;max-height:none}.hero .hit{display:none}.slate .wrap{height:44px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero .slide{transition:none}}

/* PORTFOLIO WALL */
.wall{padding:80px 0 96px}
.wall .wrap{max-width:var(--wrap-wall)}
.wall h2{font-family:var(--display);font-weight:400;font-size:clamp(64px,9vw,112px);letter-spacing:.03em;text-transform:uppercase;text-align:center;line-height:.9}
.wall .sub{text-align:center;color:var(--soft);font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-top:14px}
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px;margin-top:48px}
.poster{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--bg-2);text-decoration:none;color:#fff;border:1px solid rgba(241,233,223,.12)}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.poster:hover img,.poster:focus-visible img{transform:scale(1.02);filter:brightness(.9)}
.poster .veil{position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.6));opacity:0;transition:opacity .25s ease;display:flex;align-items:flex-end;padding:20px 18px}
.poster:hover .veil,.poster:focus-visible .veil{opacity:1}
.poster .veil .m{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#f1e9df}
.poster.card{display:flex;flex-direction:column;background:#0e0d0c;isolation:isolate;padding:0}
.poster.card .ground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:grayscale(.4) brightness(.38) contrast(1.05);z-index:-1;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.poster.card::after{content:"";position:absolute;inset:14px;border:1px solid rgba(241,239,234,.3);pointer-events:none}
.poster.card .t{margin:26% 24px 0;text-align:center;font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--on-band)}
.poster.card .bill{margin-top:auto;padding:0 24px 30px;text-align:center;font-family:var(--display);font-weight:400;font-size:9px;line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,239,234,.72)}
.poster.card:hover .ground,.poster.card:focus-visible .ground{filter:grayscale(.2) brightness(.46) contrast(1.05);transform:scale(1.02)}
.poster-cap{margin-top:10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.poster-cap b{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.poster-cap span{font-size:11px;letter-spacing:.06em;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
/* second band: assisted credits */
.wall.also{padding:0 0 96px}
.wall.also .sec-head{margin-bottom:0}
.wall.also .sec-head h2{font-size:26px;font-weight:500;letter-spacing:.06em;line-height:1;text-align:left}
.wall.also .sub-inline{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.posters.small{grid-template-columns:repeat(4,1fr);gap:24px 16px;margin-top:32px}
.poster.static{cursor:default}
.poster.static img{transition:none}
.poster-role{font-size:11px;color:var(--faint);margin-top:4px;letter-spacing:.02em}
@media(max-width:720px){
  .wall.also{padding:0 0 64px}
  .wall.also .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .wall.also .sub-inline{white-space:normal}
  .posters.small{grid-template-columns:repeat(2,1fr);gap:20px 12px;margin-top:24px}
  .poster-role{font-size:10px}
}
@media(max-width:720px){
  .wall{padding:64px 0}
  .posters{grid-template-columns:repeat(2,1fr);gap:20px 12px;margin-top:36px}
  .poster .veil{display:none}
  .poster-cap span{display:none}
  .poster-cap b{font-size:11px}
  .poster.card .t{font-size:24px;margin-top:28%}
  .poster.card .bill{font-size:8px;padding-bottom:20px}
}

/* ABOUT */
.about{padding:96px 0;background:var(--bg-2)}
.about-grid{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.about .portrait{width:300px;height:450px;object-fit:cover}
.about p{font-size:18px;line-height:1.6;max-width:560px;color:var(--ink)}
.about p+p{margin-top:16px}
.facts{display:grid;grid-template-columns:150px 1fr;max-width:640px;margin-top:36px;border-top:1px solid var(--rule)}
.fact{display:contents}
.fact .fl,.fact .fv{padding:11px 0;border-bottom:1px solid var(--rule)}
.fact .fl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding-top:14px}
.fact .fv{font-size:15px;line-height:1.5;color:var(--ink)}
.fact .fv i{font-style:italic}
@media(max-width:760px){
  .about{padding:64px 0}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about .portrait{width:200px;height:300px}
  .facts{grid-template-columns:1fr}
  .fact .fl{border:0;padding:12px 0 0}
  .fact .fv{padding-top:4px}
}

/* CREDIT ROWS (home block + credits page) */
.credits-home{padding:96px 0}
.cr{display:grid;grid-template-columns:76px 1fr 170px 1.3fr;gap:0 24px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.4}
.cr .y{font-size:12px;color:var(--faint);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr .t b{font-weight:500}
.cr .t:not(:has(a)) b{font-weight:400}
.cr .fmt,.cr .co{font-size:13px;color:var(--soft)}
.cr .t a{text-decoration:none;transition:color .15s}
.cr .t a:hover{color:var(--hover);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:760px){
  .credits-home{padding:64px 0}
  .cr{grid-template-columns:60px 1fr;gap:0 16px}
  .cr .fmt,.cr .co{grid-column:2;font-size:12.5px}
  .cr .co{margin-top:1px}
}

/* FOOTER */
footer.site{background:var(--band);color:var(--on-band);padding:80px 0 40px}
footer.site .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
footer.site h2{font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
footer.site .role{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--on-band-dim);margin-top:8px}
footer.site .c{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.35;letter-spacing:.01em}
footer.site .c a{color:var(--on-band);text-decoration:none}
footer.site .c a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
footer.site .c .loc{display:block;font-family:var(--body);font-size:13px;letter-spacing:.04em;color:var(--on-band-dim);margin-top:12px}
footer.site .dl{display:flex;flex-wrap:wrap;gap:24px;margin-top:22px}
footer.site .dl a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-band);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--on-band-rule)}
footer.site .dl a:hover{text-decoration-color:var(--on-band)}
footer.site .fine{grid-column:1/-1;border-top:1px solid var(--on-band-rule);padding-top:20px;margin-top:32px;font-size:11px;color:var(--on-band-dim);letter-spacing:.04em;line-height:1.8}
@media(max-width:720px){
  footer.site{padding:56px 0 32px}
  footer.site .wrap{grid-template-columns:1fr;gap:32px}
  footer.site .c{font-size:22px}
}

/* PAGE HEAD (project + credits pages) */
.page-head{padding:64px 0 32px}
.page-head .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.page-head .kicker a{text-decoration:none}
.page-head .kicker a:hover{color:var(--ink)}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(48px,7vw,96px);line-height:.95;letter-spacing:.01em;text-transform:uppercase;margin-top:12px;padding-bottom:16px;border-bottom:1px solid var(--rule-strong)}
.head-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;margin-top:22px}
.page-head .meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);line-height:1.5}
.page-head .crew{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:14px;font-size:15px;color:var(--ink)}
.page-head .crew small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.page-head .award{margin-top:20px;display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.page-head .award::before{content:"";width:20px;height:1px;background:var(--ink);flex:none}
.page-head .brief{font-size:18px;line-height:1.6;max-width:62ch;color:var(--ink)}
.page-head .brief a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
.page-head .brief a:hover{text-decoration-color:var(--ink)}
.page-head .note{font-size:12px;color:var(--faint);margin-top:12px}
@media(max-width:860px){.head-grid{grid-template-columns:1fr;gap:24px}.page-head{padding:40px 0 24px}.page-head .brief{font-size:17px}.page-head .meta{font-size:12px}}

/* STILLS: two-column masonry, every photo at its own proportions, nothing cropped */
.gallery{columns:2;column-gap:20px;padding:32px 0 40px}
.gallery figure{margin:0 0 28px;cursor:zoom-in;break-inside:avoid;display:block}
.gallery figure.wide{column-span:all;margin-bottom:32px}
.gallery .ph{overflow:hidden;background:var(--bg-2)}
.gallery img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.015)}
.gallery figcaption{font-size:12px;color:var(--soft);padding:8px 0 0;display:flex;justify-content:space-between;gap:12px}
.gallery figcaption .b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
@media(max-width:860px){.gallery{column-gap:12px}.gallery figure{margin-bottom:20px}}
@media(max-width:520px){.gallery{columns:1}.gallery figure{margin-bottom:24px}}
.proj-foot{font-size:12px;color:var(--faint);padding:0 0 32px}
.poster-lead{padding:32px 0 24px}
.poster-lead img{width:min(100%,380px);border:1px solid rgba(241,233,223,.12)}

/* PREV / NEXT */
.proj-nav{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid var(--rule-strong);padding:32px 0 96px}
.proj-nav a{display:flex;gap:16px;align-items:center;text-decoration:none;min-width:0}
.proj-nav a.next{flex-direction:row-reverse;text-align:right;justify-self:end}
.proj-nav .th{width:48px;height:72px;object-fit:cover;border:1px solid rgba(241,233,223,.12);flex:none;background:#0e0d0c}
.proj-nav .th.card{display:grid;place-items:center;color:var(--on-band);font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.06em}
.proj-nav small{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.proj-nav .tt{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.1}
.proj-nav a:hover .tt{color:var(--soft)}
@media(max-width:520px){.proj-nav{gap:16px;padding-bottom:64px}.proj-nav .tt{font-size:15px}.proj-nav .th{width:40px;height:60px}}

/* CREDITS PAGE */
.credits-cols{padding:8px 0 80px}
.role-block{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:28px 0 36px;border-top:1px solid var(--rule-strong)}
.role-block h3{position:sticky;top:84px;align-self:start;font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding-top:4px}
@media(max-width:760px){.role-block{grid-template-columns:1fr;gap:12px}.role-block h3{position:static}}

/* LIGHTBOX */
.lb{position:fixed;inset:0;background:rgba(14,9,6,.97);display:none;z-index:100;overflow:auto;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .2s ease}
.lb.open{display:block}
.lb.in{opacity:1}
.lb .inner{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 64px;gap:24px}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:1240px;width:100%}
.lb figure img{max-width:100%;max-height:76vh;object-fit:contain;opacity:0;transition:opacity .25s ease}
.lb figure img.ready{opacity:1}
.lb figure.board img{max-height:36vh;background:#fff;padding:6px}
.lb figure figcaption{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-band-dim)}
@media(min-width:1024px){
  .lb .inner{flex-direction:row;align-items:center;justify-content:center}
  .lb figure{width:auto;max-width:68%}
  .lb figure.board{max-width:32%}
  .lb figure.board img{max-height:70vh}
  .lb figure img{max-height:80vh}
}
.lb .cap{position:fixed;bottom:18px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-band);padding:0 72px}
.lb .cap .n{color:var(--on-band-dim);margin-left:12px;font-variant-numeric:tabular-nums}
.lb button{position:fixed;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:var(--on-band);cursor:pointer;opacity:.85;z-index:2}
.lb button:hover{opacity:1}
.lb .x{top:12px;right:14px}
.lb .prev{left:10px;top:50%;transform:translateY(-50%)}
.lb .next{right:10px;top:50%;transform:translateY(-50%)}
@media(max-width:720px){
  .lb .inner{padding:52px 12px 64px;gap:14px}
  .lb .prev,.lb .next{top:auto;bottom:36px;transform:none}
  .lb .cap{bottom:16px;padding:0 60px;font-size:10px}
}

/* 404 */
.simple{padding:96px 0 120px;text-align:center}
.simple h1{font-family:var(--display);font-weight:400;font-size:48px;letter-spacing:.02em;text-transform:uppercase}
.simple p{margin-top:16px;color:var(--soft)}

@media(prefers-reduced-motion:reduce){
  .poster img,.poster.card .ground,.gallery img{transition:none}
  .poster:hover img,.poster.card:hover .ground,.gallery figure:hover img{transform:none}
}

/* LIGHT BLUE ACCENT, used on small lettering only */
.wall .sub,.page-head .kicker,.page-head .crew small,.fact .fl,.proj-nav small,.poster-role,.wall.also .sub-inline,.gallery figcaption .b{color:var(--accent)}
.page-head .kicker a:hover{color:var(--ink)}
.page-head .award{color:var(--accent)}
.page-head .award::before{background:var(--accent)}
.sec-head a{color:var(--accent)}
.sec-head a:hover{color:var(--ink)}
.slate .n{color:var(--accent)}
nav.top .links a.on{text-decoration-color:var(--accent)}
nav.top .brand small{color:var(--accent-dim)}
footer.site .role{color:var(--accent)}
footer.site .c a:hover,footer.site .dl a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.cr .t a:hover{color:var(--accent)}
.page-head .brief a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.poster .veil .m{color:var(--accent)}
.poster.card .bill{color:var(--accent)}
.lb figure figcaption,.lb .cap .n{color:var(--accent)}

/* TRAILER + TITLE BLOCK (show pages with an official trailer) */
.page-head.has-trailer{padding-bottom:16px}
.top-grid{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start;margin-top:22px}
.top-grid .facts-col h1{margin-top:0;border-bottom:0;padding-bottom:0;font-size:clamp(40px,4.6vw,64px)}
.top-grid .facts-col .meta{margin-top:14px}
.top-grid .facts-col .brief{margin-top:22px;font-size:16px;max-width:52ch}
.trailer{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden;cursor:pointer;border:1px solid rgba(241,233,223,.12)}
.trailer img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .3s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.trailer:hover img,.trailer:focus-visible img{opacity:1;transform:scale(1.015)}
.trailer .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(18,11,7,.72);border:1px solid rgba(241,233,223,.5);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.trailer .play::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--on-band)}
.trailer:hover .play{background:rgba(169,205,230,.9);border-color:transparent}
.trailer:hover .play::after{border-left-color:#120b07}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.trailer-credit{font-size:11px;color:var(--faint);margin-top:8px;letter-spacing:.02em}
@media(max-width:860px){.top-grid{grid-template-columns:1fr;gap:24px}.top-grid .facts-col h1{font-size:clamp(34px,8vw,48px)}}