:root{
  --black:#000;
  --room:#15120F;
  --bone:#EDE6DC;
  --smoke:#9A9188;
  --red:#FF1A10;
  --line:rgba(237,230,220,.16);
  --pad:clamp(20px,4.4vw,64px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--room);color:var(--bone);font-family:'Archivo',system-ui,sans-serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:50;background:var(--bone);color:#000;padding:8px 14px}

/* ---------- Navigation pill ---------- */
.pill{position:fixed;z-index:20;top:22px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:max-content;padding:6px;border:1px solid rgba(255,26,16,.45);border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.pill .side{display:flex;align-items:center;gap:4px}
.pill .side.l{justify-content:flex-end}
.pill .side.r{justify-content:flex-start}
.pill a{text-decoration:none;font-size:15px;font-weight:600;font-stretch:112%;letter-spacing:.01em;padding:10px 18px;border-radius:999px}
.pill a:hover{background:rgba(237,230,220,.08)}
.pill a[aria-current="page"]{background:var(--red);color:#000}
.pill .mark{padding:2px 16px;display:flex;align-items:center;flex-shrink:0}
.pill .mark img{height:40px;width:auto;max-width:none;filter:drop-shadow(0 0 6px rgba(255,26,16,.35))}
.pill .mark:hover,.pill .mark[aria-current="page"]{background:transparent}
.pill a.ico{display:flex;align-items:center;gap:8px;padding:10px 14px}
.pill a.ico svg{width:19px;height:19px;flex-shrink:0}
.pill a.reel svg{color:var(--red)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;text-decoration:none;font-weight:700;font-stretch:112%;font-size:15px;letter-spacing:.02em;border:1.5px solid var(--red)}
.btn.ghost{color:var(--bone);background:rgba(0,0,0,.4)}
.btn.ghost:hover{background:rgba(255,26,16,.14)}
.btn.solid{background:var(--red);color:#000}
.btn.solid:hover{background:#ff4a3d}
.btn svg{width:14px;height:14px}

/* ---------- Home: full-screen loop ---------- */
.home{background:var(--black)}
.hero{position:relative;height:100svh;min-height:560px;background:var(--black);overflow:hidden;isolation:isolate}
.frame{position:absolute;inset:0;z-index:-1}
.frame video{width:100%;height:100%;object-fit:cover}
.frame video{object-position:50% 50%}
.frame .fill{display:none}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 50%,rgba(0,0,0,.72) 100%)}
.hero-copy{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,6svh,64px)}
.hero h1{margin:0;font-weight:900;font-stretch:100%;font-size:clamp(46px,10.8vw,184px);line-height:.92;letter-spacing:-.045em;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.role{margin:22px 0 0;font-weight:700;font-stretch:118%;font-size:clamp(22px,2.6vw,40px);line-height:1.1;letter-spacing:-.01em;color:#fff}
.lede{margin:12px 0 0;max-width:46ch;font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:#fff}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (prefers-reduced-motion:no-preference){.hero-copy{animation:rise .9s ease .3s both}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* ---------- Inner pages ---------- */
main.page{flex:1;padding:clamp(130px,14vw,180px) var(--pad) clamp(80px,9vw,130px);position:relative;overflow:hidden}
main.page::before{content:"";position:absolute;width:70vw;height:70vw;left:-25vw;top:-32vw;background:radial-gradient(closest-side,rgba(255,26,16,.18),transparent);pointer-events:none}
.head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
h1.title{margin:0;font-weight:800;font-stretch:118%;font-size:clamp(44px,7vw,112px);line-height:.92;letter-spacing:-.03em}
.head p{margin:0;max-width:44ch;color:var(--smoke);justify-self:end}

/* Work */
.grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(20px,2.4vw,36px)}
.film{all:unset;cursor:pointer;display:block;width:100%}
.film:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:14px}
.still{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1d1916;border:1px solid var(--line)}
.still img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.still.noimg{background:radial-gradient(120% 120% at 80% 100%,rgba(255,26,16,.35),transparent 60%),#1d1916}
.still.noimg::before{content:attr(data-label);position:absolute;left:24px;top:20px;font-weight:850;font-stretch:118%;font-size:clamp(28px,4vw,56px);letter-spacing:-.03em;color:rgba(237,230,220,.22)}
.film:hover .still img{transform:scale(1.03)}
.watch{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid rgba(237,230,220,.25);font-weight:700;font-stretch:112%;font-size:14px;letter-spacing:.02em}
.film:hover .watch{background:var(--red);color:#000;border-color:var(--red)}
.watch svg{width:12px;height:12px}
.film h2{margin:22px 0 4px;font-weight:800;font-stretch:118%;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;line-height:1}
.credit{margin:0;color:var(--smoke);font-size:17px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.tags li{font-size:13px;font-stretch:85%;font-weight:600;letter-spacing:.03em;padding:6px 14px;border:1px solid rgba(255,26,16,.55);border-radius:999px}

/* About */
.about{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.portrait{border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#1d1916}
.portrait img{width:100%;height:100%;object-fit:cover}
.about h1.title{margin-bottom:32px}
.about p{margin:0 0 18px;max-width:52ch;font-size:clamp(18px,1.4vw,21px)}
.about p.quiet{color:var(--smoke)}
.about .ctas{margin-top:32px}

/* Contact */
.contact h1.title{margin-bottom:28px;position:relative}
.mail{position:relative;display:inline-block;font-weight:800;font-stretch:112%;font-size:clamp(22px,4.4vw,68px);letter-spacing:-.025em;line-height:1.1;text-decoration:none;word-break:break-all;background:linear-gradient(var(--red),var(--red)) left bottom/0% 3px no-repeat;padding-bottom:6px;transition:background-size .35s ease}
.mail:hover,.mail:focus-visible{background-size:100% 3px}
.links{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:clamp(48px,6vw,80px) 0 0;padding:28px 0 0;border-top:1px solid var(--line);list-style:none}
.links span{display:block;font-size:14px;font-stretch:85%;color:var(--smoke);margin-bottom:4px}
.links a{font-weight:700;font-size:19px;text-decoration:none}
.links a:hover{color:var(--red)}
.contact .ctas{margin-top:36px;position:relative}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px var(--pad) 32px;background:var(--black);color:var(--smoke);font-size:14px;border-top:1px solid var(--line)}

/* Player */
dialog{width:min(1200px,94vw);padding:0;border:0;background:transparent;color:var(--bone)}
dialog::backdrop{background:rgba(0,0,0,.88)}
.player-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
.player-top p{margin:0;font-weight:700;font-stretch:112%}
.close{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--red);background:transparent;color:var(--bone);font:inherit;font-weight:700;cursor:pointer}
.close:hover{background:var(--red);color:#000}
.video{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.video iframe{width:100%;height:100%;border:0}
.video video{width:100%;height:100%;background:#000}
.yt{display:inline-block;margin-top:10px;font-size:14px;color:var(--smoke)}

/* ---------- Small screens ---------- */
@media (max-width:820px){
  .pill{gap:0;padding:4px;top:14px}
  .pill .side{gap:0}
  .pill a{font-size:13px;padding:9px 10px}
  .pill .mark{padding:2px 8px}
  .pill .mark img{height:32px}
  .pill .hide-s{display:none}
  .pill a.ico{padding:9px 9px}
  .pill a.reel svg{display:none}
  .head{grid-template-columns:1fr}
  .head p{justify-self:start}
  .grid{grid-template-columns:1fr}
  .watch{right:10px;bottom:10px;padding:8px 13px;font-size:13px}
  .about{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .links{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.still img{transition:none}}
@media (max-width:400px){.pill a,.pill a.ico{font-size:12px;font-stretch:100%;letter-spacing:0;padding:9px 7px}.pill .mark{padding:2px 4px}.pill .mark img{height:28px}}
@media (max-width:350px){.pill a,.pill a.ico{font-size:11px;padding:8px 5px}.pill .mark{padding:2px 2px}.pill .mark img{height:24px}}
.yt[hidden]{display:none}