:root{
  --bg:#0a0a0a; --bg2:#141414;
  --cream:#f0f0ea; --cream2:#e6e4d8;
  --ink:#0a0a0a; --paper:#f0f0ea;
  --muted-d:#6f6f68; --muted-l:#9a9a92;
  --line-d:rgba(0,0,0,.14); --line-l:rgba(255,255,255,.14);
  --accent:#d4ff3f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--paper);font-family:'Space Grotesk',sans-serif;font-weight:400;overflow-x:hidden;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1360px;margin:0 auto;padding:0 48px}
.mono{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- reveal ---------- */
.reveal{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.reveal.in-view{opacity:1}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:26px 48px;mix-blend-mode:difference}
.logo{font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.04em;color:var(--paper);text-decoration:none}
.navlinks{display:flex;align-items:center;gap:32px}
.navlinks a{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);text-decoration:none;position:relative}
.navlinks a::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.navlinks a:hover::after{transform:scaleX(1)}
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.menu-btn span{width:22px;height:1px;background:var(--paper)}
.menu-overlay{position:fixed;inset:0;background:var(--bg);z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transform:translateY(-100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.menu-overlay.open{transform:translateY(0)}
.menu-overlay a{font-family:'Anton',sans-serif;font-size:34px;color:var(--paper);text-decoration:none}
.menu-close{position:absolute;top:28px;right:32px;background:none;border:none;color:var(--paper);font-size:30px;cursor:pointer}

/* ---------- placeholders ---------- */
.ph{background:repeating-linear-gradient(135deg,#1c1c1c 0 2px,#0d0d0d 2px 5px)}
.ph-light{background:repeating-linear-gradient(135deg,#e0ded2 0 2px,#eeede4 2px 5px)}
.ph-frame{position:relative;overflow:hidden}
.ph-frame img{width:100%;height:100%;object-fit:cover;display:block}
.ph-tag{position:absolute;bottom:14px;left:14px;color:rgba(240,240,234,.55)}
.ph-light .ph-tag{color:rgba(10,10,10,.4)}

/* ---------- section rhythm ---------- */
section{position:relative;padding:150px 0;overflow:hidden}
.dark{background:var(--bg);color:var(--paper)}
.light{background:var(--cream);color:var(--ink)}
.muted-d{color:var(--muted-d)}
.muted-l{color:var(--muted-l)}

/* ---------- edge text ---------- */
.edge{position:absolute;top:0;bottom:0;display:flex;align-items:center;z-index:2;pointer-events:none}
.edge-l{left:20px}
.edge-r{right:20px}
.edge span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.28em;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:0;position:relative}
.hero .season{position:absolute;top:110px;right:48px;font-size:12px;z-index:2;color:#3a3a36}
.hero h1{font-family:'Anton',sans-serif;font-size:clamp(52px,7.2vw,120px);line-height:.92;letter-spacing:-.01em}
.hero .sub{margin-top:10px;max-width:280px;color:var(--muted-l);font-size:15px;}
.hero-cutout{position:absolute;inset:0;z-index:0}
.hero-cutout img,.hero-cutout video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
.hero-cutout video{opacity:0}
.hero-cutout video.playing{opacity:1}
.hero-cutout img.hidden{opacity:0}
.hero-cutout::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.25) 32%,rgba(10,10,10,0) 55%)}
.hero-side{position:absolute;right:56px;top:50%;transform:translateY(-50%);max-width:300px;text-align:right;z-index:2}
.hero-side-dark .sub{color:#3a3a36}
.hero-side-btn{border-color:#1a1a18;color:#1a1a18}
.hero-side-btn:hover{background:#1a1a18;color:var(--paper)}
.tag-stack{position:absolute;left:48px;bottom:60px;display:flex;flex-direction:column;gap:2px}

/* ---------- collage rows ---------- */
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.row3 .ph-frame:nth-child(2){transform:translateY(-30px) rotate(-2deg)}
.row3 .ph-frame:nth-child(3){transform:translateY(18px) rotate(2deg)}
.row3 .ph-frame{aspect-ratio:3/4}

.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split h2{font-family:'Anton',sans-serif;font-size:clamp(30px,3.6vw,52px);line-height:1.05;margin-bottom:20px}
.split p{max-width:420px}
.split .ph-frame{aspect-ratio:4/5}
.split.tilted .ph-frame{transform:rotate(3deg)}

/* ---------- image bleeds past its section boundary: crop window anchored at the line ---------- */
.bleed-section{overflow:visible;min-height:550px}
.bleed-crop{
  position:absolute;right:0;top:-190px;z-index:6;
  width:64%;max-width:900px;
}
.bleed-cutout{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.bleed-section + section{position:relative;z-index:7}
@media(max-width:800px){.bleed-crop{position:relative;right:auto;top:auto;width:80%;max-width:340px;margin:32px auto 0}}

.collection-center{display:flex;justify-content:center;gap:28px}
.collection-center .ph-frame{width:280px;aspect-ratio:3/4.4}
.collection-center .ph-frame:first-child{transform:translateY(24px)}

.overlap-wrap{position:relative;height:640px}
.overlap-wrap .parallax{position:absolute}
.overlap-a{width:52%;height:70%;left:0;top:6%;transform:rotate(-2deg)}
.overlap-b{width:38%;height:46%;right:6%;top:0;transform:rotate(3deg)}
.overlap-c{width:34%;height:40%;left:20%;bottom:0;transform:rotate(-4deg)}

/* ---------- layered cover: rotated dark bg + white-studio cards on top ---------- */
.layered-cover{height:86vh;min-height:600px;max-height:820px;padding:0}
.layered-bg{position:absolute;inset:-40% -20%;transform:rotate(65deg) scale(1.9);z-index:0}
.layered-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.layered-cover::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.35);z-index:1}
.layered-label{position:absolute;left:48px;top:40px;color:var(--paper);z-index:3;line-height:1.9}
.layered-cards{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:26px;height:100%}
.layered-card{width:230px;aspect-ratio:3/4;box-shadow:0 30px 70px rgba(0,0,0,.5);background:var(--cream)}
.layered-cards>.parallax:nth-child(2) .layered-card{transform:translateY(-22px)}
.layered-cards>.parallax:nth-child(3) .layered-card{transform:translateY(16px)}
@media(max-width:800px){
  .layered-cover{height:auto;min-height:0;max-height:none}
  .layered-cards{flex-direction:column;height:auto;padding:100px 24px 40px}
  .layered-card{width:100%;max-width:320px}
  .layered-cards>.parallax:nth-child(2) .layered-card,.layered-cards>.parallax:nth-child(3) .layered-card{transform:none}
}

/* ---------- image-in-text ---------- */
.text-ph{
  background-color:#0a0a0a;
  background-image:
    url('assets/dark-look-01.jpg'),
    url('assets/dark-look-03.jpg'),
    url('assets/dark-look-02.jpg'),
    url('assets/pair-posed-dark.jpg'),
    url('assets/dark-look-04.jpg');
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:auto 100%,auto 100%,auto 100%,auto 100%,auto 100%;
  background-position:0% center,20% center,40% center,65% center,88% center;
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.closing h2{font-family:'Anton',sans-serif;font-size:clamp(70px,14vw,260px);line-height:.85;text-align:center;letter-spacing:-.01em}

/* ---------- magnetic CTA ---------- */
.magnetic{display:inline-flex;align-items:center;gap:10px;padding:18px 34px;border:1px solid currentColor;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s}
.dark .magnetic:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.light .magnetic:hover{background:var(--ink);color:var(--cream)}

/* ---------- footer ---------- */
footer{background:var(--bg);color:var(--muted-l);padding:80px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line-l)}
.foot-grid h4{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-bottom:16px}
.foot-grid a{display:block;color:var(--muted-l);text-decoration:none;font-size:14px;margin-bottom:10px}
.foot-grid a:hover{color:var(--accent)}
.foot-wordmark{font-family:'Anton',sans-serif;font-size:clamp(40px,7vw,90px);color:var(--paper);margin-bottom:8px}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:12px}
.foot-bottom a{text-decoration:underline;color:var(--muted-l)}
.foot-bottom a:hover{color:var(--accent)}

/* ---------- page-hero (inner pages) ---------- */
.page-hero{padding:200px 0 80px;background:var(--bg)}
.page-hero .mono{color:var(--accent);margin-bottom:18px;display:block}
.page-hero h1{font-family:'Anton',sans-serif;font-size:clamp(46px,6.6vw,88px);line-height:.95}
.page-hero p{margin-top:20px;max-width:520px;color:var(--muted-l)}

/* ---------- collection grid ---------- */
.piece-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.piece{background:var(--bg)}
.piece .ph-frame{aspect-ratio:3/4;margin-bottom:20px}
.piece h3{font-family:'Anton',sans-serif;font-size:20px;margin-bottom:8px}
.piece p{color:var(--muted-l);font-size:14px;max-width:320px}
.piece .idx{color:var(--accent);margin-bottom:10px;display:block}

/* ---------- about ---------- */
.about-block{max-width:760px;margin:0 auto 70px}
.about-block p{font-size:19px;line-height:1.7;color:var(--muted-l)}
.about-block p+p{margin-top:22px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:80px;border-top:1px solid var(--line-l);padding-top:40px}
.stat-row .n{font-family:'Anton',sans-serif;font-size:44px;color:var(--accent)}
.stat-row .l{margin-top:8px}

/* ---------- journal ---------- */
.entry-list{border-top:1px solid var(--line-l)}
.entry{display:grid;grid-template-columns:80px 1fr 200px;gap:30px;align-items:center;padding:36px 0;border-bottom:1px solid var(--line-l);text-decoration:none;color:inherit;transition:opacity .3s}
.entry:hover{opacity:.6}
.entry .idx{color:var(--accent)}
.entry h3{font-family:'Anton',sans-serif;font-size:24px}
.entry .meta{text-align:right;color:var(--muted-l)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact-info p{margin-bottom:28px}
.contact-info strong{display:block;color:var(--paper);margin-bottom:4px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.contact-form{display:flex;flex-direction:column;gap:20px}
.contact-form label{display:block;margin-bottom:6px}
.contact-form input,.contact-form textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--line-l);color:var(--paper);padding:10px 0;font-family:'Space Grotesk',sans-serif;font-size:15px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form textarea{resize:vertical;min-height:90px}

@media(max-width:900px){
  nav{padding:20px 24px}
  .wrap{padding:0 24px}
  .navlinks{display:none}
  .menu-btn{display:flex}
  .split{grid-template-columns:1fr;gap:20px}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .hero-cutout{height:100vh;top:0}
  .hero-cutout::after{background:linear-gradient(180deg,rgba(10,10,10,.08) 0%,rgba(10,10,10,.18) 40%,rgba(10,10,10,.78) 76%,rgba(10,10,10,.95) 100%)}
  .hero-side{position:absolute;left:24px;right:24px;bottom:130px;top:auto;transform:none;text-align:left;max-width:100%;padding:0}
  .hero-side-dark .sub{color:var(--muted-l)}
  .hero-side-btn{border-color:var(--paper);color:var(--paper)}
  .hero-side-btn:hover{background:var(--paper);color:#0a0a0a}
  .hero .season{color:var(--muted-l)}
  .tag-stack{left:24px;bottom:56px}
  .row3{grid-template-columns:1fr;gap:20px}
  .row3 .ph-frame:nth-child(2),.row3 .ph-frame:nth-child(3){transform:none}
  .collection-center{flex-direction:column;align-items:center;gap:20px}
  .layered-cards{gap:20px}
  .overlap-wrap{height:auto}
  .overlap-wrap .parallax{position:relative;width:100%!important;height:340px!important;left:0!important;right:0!important;top:0!important;margin-bottom:20px;transform:none!important}
  .piece-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .stat-row{grid-template-columns:1fr}
  .entry{grid-template-columns:50px 1fr;}
  .entry .meta{display:none}
  .edge{display:none}
  section{padding:100px 0}
}