/* ============================================================
   Studio Nova — bespoke creative-studio portfolio.
   Brutalist-editorial: Syne display, stark warm-grey paper, a
   vermilion accent, oversized type and a project lightbox.
   Standalone; nothing shared with the other samples.
   ============================================================ */
:root{
  --accent:#ff4326; --accent-2:#7c5cff;            /* fx3d reads these */
  --paper:#eceae4; --paper-2:#e2dfd7; --ink:#111013; --ink-2:#39362f;
  --verm:#ff4326; --muted:#6c6960; --muted-2:#9a978d; --line:rgba(17,16,19,.16); --line-2:rgba(17,16,19,.08);
  --disp:'Syne', system-ui, sans-serif; --sans:'Inter', system-ui, sans-serif;
  --wrap:1280px; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:clamp(14px,.4vw+13px,16px); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block} a{color:inherit; text-decoration:none}
.wrap{width:min(var(--wrap),92vw); margin-inline:auto}
h1,h2,h3{font-family:var(--disp); font-weight:800; margin:0; line-height:.98; letter-spacing:-.02em}
.eyebrow{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--verm)}
.verm{color:var(--verm)}

.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; padding:14px 24px; border-radius:999px; cursor:pointer;
  border:2px solid var(--ink); background:var(--ink); color:var(--paper); transition:background .25s var(--ease), color .25s, transform .2s}
.btn:hover{background:var(--verm); border-color:var(--verm); color:#fff; transform:translateY(-2px)}
.btn-line{background:transparent; color:var(--ink)} .btn-line:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* nav */
.nav{position:fixed; inset:0 0 auto 0; z-index:40; padding:22px 0; transition:padding .3s var(--ease), background .3s, border-color .3s; border-bottom:1px solid transparent; mix-blend-mode:difference; color:#fff}
.nav.stuck{mix-blend-mode:normal; color:var(--ink); padding:12px 0; background:rgba(236,234,228,.9); backdrop-filter:blur(12px); border-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.logo{font-family:var(--disp); font-weight:800; font-size:1.15rem; letter-spacing:-.01em; text-transform:uppercase}
.nav-links{display:flex; gap:26px; font-weight:600; font-size:.86rem}
.nav-links a{position:relative} .nav-links a::after{content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:currentColor; transition:width .3s var(--ease)} .nav-links a:hover::after{width:100%}
.nav .btn{padding:9px 18px}
.burger{display:none; background:none; border:0; color:currentColor; cursor:pointer} .burger svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}

/* hero */
.hero{padding:150px 0 40px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(3.4rem,10vw,8rem); text-transform:uppercase}
.hero h1 .out{-webkit-text-stroke:2px var(--ink); color:transparent}
.hero .lede{margin:26px 0 30px; color:var(--ink-2); max-width:40ch; font-size:1.1rem}
.hero-foot{display:flex; gap:34px; align-items:center; flex-wrap:wrap; margin-top:34px}
.hero-foot .yr{font-family:var(--disp); font-weight:800; font-size:1.1rem}
.dhero-art{position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:#0e0d12; display:grid; place-items:center}
.dhero-art .art-emoji{font-size:clamp(4rem,10vw,7rem); transition:opacity .6s}
.dhero-art .gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.dhero-art.gl-fallback .art-emoji{animation:floaty 5s ease-in-out infinite}

/* marquee */
.strip{border-block:2px solid var(--ink); overflow:hidden; white-space:nowrap; padding:16px 0; margin-top:30px; background:var(--verm); color:#fff}
.strip .t{display:inline-flex; gap:34px; animation:marq 24s linear infinite}
.strip:hover .t{animation-play-state:paused}
.strip span{font-family:var(--disp); font-weight:800; font-size:1.5rem; text-transform:uppercase; letter-spacing:-.01em}
.strip i{font-style:normal; opacity:.6}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip .t{animation:none}}

/* work */
.sec{padding:clamp(64px,8vw,120px) 0}
.work-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:38px}
.work-head h2{font-size:clamp(2.4rem,6vw,4.4rem); text-transform:uppercase}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.filters button{font:inherit; font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:none; border:2px solid var(--line); border-radius:999px; padding:9px 18px; cursor:pointer; transition:all .2s}
.filters button.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.filters button:not(.on):hover{border-color:var(--ink); color:var(--ink)}
.work-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.proj{cursor:pointer; grid-column:span 1}
.proj.hide{display:none}
.proj.big{grid-column:span 2}
.proj-img{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--paper-2); border-radius:6px}
.proj.big .proj-img{aspect-ratio:16/8}
.proj-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .4s}
.proj:hover .proj-img img{transform:scale(1.05)}
.proj-img::after{content:"View"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(17,16,19,.5); color:#fff;
  font-family:var(--disp); font-weight:800; font-size:1.4rem; text-transform:uppercase; letter-spacing:.02em; opacity:0; transition:opacity .3s}
.proj:hover .proj-img::after{opacity:1}
.proj-meta{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-top:14px; padding-bottom:14px; border-bottom:2px solid var(--ink)}
.proj-meta h3{font-size:clamp(1.4rem,2.6vw,2rem); text-transform:uppercase}
.proj-meta .cat{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:right; white-space:nowrap}
.proj-meta .no{font-family:var(--disp); font-weight:800; color:var(--muted-2)}

/* studio split */
.studio{background:var(--ink); color:var(--paper)}
.studio-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.studio-art{min-height:460px; overflow:hidden} .studio-art img{width:100%; height:100%; object-fit:cover}
.studio-text{padding:clamp(36px,6vw,90px); display:flex; flex-direction:column; justify-content:center}
.studio-text h2{font-size:clamp(2rem,4.4vw,3.4rem); text-transform:uppercase} .studio-text h2 .verm{color:var(--verm)}
.studio-text p{color:#bdb9b0; margin-top:18px; max-width:46ch}
.studio-stats{display:flex; gap:40px; margin-top:34px; flex-wrap:wrap}
.studio-stats .n{font-family:var(--disp); font-weight:800; font-size:2.2rem} .studio-stats .l{color:#9a978d; font-size:.82rem; margin-top:2px}

/* services */
.svc{border-top:2px solid var(--ink)}
.svc-row{display:grid; grid-template-columns:80px 1fr 1.2fr; gap:24px; padding:36px 0; border-bottom:2px solid var(--ink); align-items:start; transition:background .3s}
.svc-row:hover{background:var(--paper-2)}
.svc-row .no{font-family:var(--disp); font-weight:800; font-size:1.4rem; color:var(--verm)}
.svc-row h3{font-size:clamp(1.8rem,4vw,3rem); text-transform:uppercase}
.svc-row p{color:var(--muted)}
.svc-row .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.svc-row .tags span{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--muted)}

/* CTA + footer */
.cta{text-align:center; padding:clamp(70px,10vw,140px) 0}
.cta h2{font-size:clamp(2.6rem,8vw,6rem); text-transform:uppercase; line-height:.95}
.cta .btn{margin-top:30px; font-size:.95rem; padding:18px 34px}
.foot{border-top:2px solid var(--ink); padding:48px 0 32px}
.foot-grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:30px}
.foot h5{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem} .foot a:hover{color:var(--verm)}
.foot-base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:.82rem}

/* lightbox */
.lb{position:fixed; inset:0; z-index:80; background:rgba(14,13,18,.96); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; color:#fff}
.lb.open{opacity:1; visibility:visible}
.lb-bar{display:flex; align-items:center; justify-content:space-between; padding:20px clamp(16px,4vw,40px)}
.lb-bar .ti{font-family:var(--disp); font-weight:800; font-size:1.3rem; text-transform:uppercase}
.lb-bar .ti small{display:block; font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.06em; color:#a7a39a; text-transform:uppercase; margin-top:2px}
.lb-close{background:none; border:0; color:#fff; cursor:pointer; font-size:1.8rem; line-height:1}
.lb-stage{flex:1; display:flex; align-items:center; justify-content:center; gap:16px; padding:0 clamp(10px,3vw,40px) 30px; min-height:0}
.lb-stage img{max-width:min(1100px,84vw); max-height:76vh; object-fit:contain; border-radius:4px; box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.lb-nav{background:rgba(255,255,255,.1); border:0; color:#fff; cursor:pointer; width:54px; height:54px; border-radius:50%; font-size:1.5rem; flex:0 0 auto; transition:background .2s}
.lb-nav:hover{background:var(--verm)}
.lb-count{text-align:center; padding-bottom:24px; color:#a7a39a; font-size:.82rem; letter-spacing:.08em}

.rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:34px} .dhero-art{order:-1; max-width:420px; margin-inline:auto}
  .work-grid{grid-template-columns:1fr} .proj.big{grid-column:span 1} .proj.big .proj-img{aspect-ratio:16/11}
  .studio-grid{grid-template-columns:1fr} .studio-art{min-height:300px}
  .svc-row{grid-template-columns:1fr; gap:12px}
  .nav-links{display:none} .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:center; gap:16px; padding:22px; background:var(--paper); border-block:2px solid var(--ink); mix-blend-mode:normal; color:var(--ink)}
  .lb-stage img{max-width:92vw}
}

/* ============================================================
   Ultra-luxury accent — brushed sheen on the hero highlight
   (light → base → deep, in this template's own accent colour)
   ============================================================ */
h1 .verm{
  background-image:linear-gradient(176deg,
    color-mix(in srgb, var(--verm) 60%, #ffffff) 0%,
    var(--verm) 48%,
    color-mix(in srgb, var(--verm) 72%, #000000) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.20));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  h1 .verm{ -webkit-text-fill-color:currentColor; background-image:none; }
}