:root{
  --ink: #0b0b0d;
  --bone: #edeae2;
  --bone-dim: #cbc9c2;
  --slate: #5c6470;
  --accent: #b98d4e;
  --accent-ink: #7a5c30;
  --hair: #232327;
  --paper: #ffffff;
  --paper-line: #e4e2dc;
}
 
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
 
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
 
::selection{ background:var(--accent); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline: 1px solid var(--accent); outline-offset: 4px; }
 
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:30;
  opacity:0.05; mix-blend-mode:overlay;
}
 
/* ================= PRELOADER ================= */
#preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
}
#preloader .plabel{
  font-family:'Fraunces', serif; font-style:italic; font-weight:300;
  font-size:15px; letter-spacing:0.04em; color:var(--ink);
}
#preloader .track{
  width:min(260px, 60vw); height:2px; background:var(--paper-line); position:relative;
}
#preloader .fill{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background:var(--ink);
}
#preloader .handle{
  position:absolute; top:50%; left:0%;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
}
.curtain{
  position:fixed; inset:0; z-index:199; background:var(--paper);
  transform-origin:top; pointer-events:none;
}
#preloader.done{ opacity:0; transition:opacity .5s ease .1s; pointer-events:none; }
.curtain.done{
  transform:scaleY(0);
  transition: transform 0.9s cubic-bezier(.65,0,.35,1);
}
 
/* ================= HEADER ================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding: 26px 5vw;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink);                 /* default: black, sits over the white hero */
  transition: color .35s ease;
}
header.on-dark{ color:var(--bone); } /* swapped once scrolled past the hero, via JS */
 
header .mark{ display:flex; align-items:center; gap:10px; }
header .mark .box{
  background:var(--bone); color:var(--ink);   /* the filled logo box never changes */
  font-family:'Inter', sans-serif; font-weight:500;
  padding:4px 8px; font-size:11px; letter-spacing:0.1em;
}
header .mark .sub{ color:#6a6a6a; font-style:italic; font-family:'Fraunces', serif; font-size:12px; text-transform:none; letter-spacing:0; transition: color .35s ease; }
header.on-dark .mark .sub{ color:var(--bone-dim); }
 
header nav{ display:flex; align-items:center; gap:10px; }
header nav a{
  opacity:1;
  font-size:10px;
  letter-spacing:0.1em;
  padding:4px 8px;
  background:var(--ink); color:var(--bone);   /* default: over the white hero */
  transition: background .35s ease, color .35s ease, opacity .3s ease;
}
header.on-dark nav a{
  background:var(--bone); color:var(--ink);   /* flips once scrolled to dark sections */
}
header nav a:hover{ opacity:0.8; }
 
/* ================= HERO (white) ================= */
.hero{
  min-height:100svh;
  background:var(--paper);
  color:var(--ink);
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:stretch;
  padding: 0;
  overflow:hidden;
}
 
.hero-copy{ position:relative; z-index:2; padding: 140px 5vw 0; display:flex; flex-direction:column; justify-content:center; }
 
h1.title{
  font-family:'Fraunces', serif;
  font-optical-sizing:auto;
  font-style:italic; font-weight:300;
  font-size: clamp(56px, 10.5vw, 160px);
  line-height:1.05;
  padding-bottom:0.08em;
  letter-spacing:-0.01em;
  color:var(--ink);
  overflow:visible;
}
 
.type-line{
  margin-top:30px;
  font-family:'Space Mono', monospace;
  font-size: clamp(13px, 1.35vw, 17px);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  min-height:1.4em;
}
.type-line .hl{ color: var(--accent); }   /* highlighted word (VISION./FASHION.) inside the typewriter line */
.type-line .cursor{
  display:inline-block;
  width:0.5em; height:1em;
  background:var(--ink);
  vertical-align:text-bottom;
  margin-left:2px;
  animation: cursorFade 1.3s ease-in-out infinite;
}
@keyframes cursorFade{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
@keyframes blink{ 60%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .type-line .cursor{ animation:none; }
}
 
.signature{
  margin-top:24px;
  font-family:'Fraunces', serif; font-style:italic;
  font-size:14px; color:#8a8a8a;
}
 
.hero-foot{
  position:absolute; bottom:44px; left:5vw; right:5vw; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end;
  font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:#9a9a9a;
}
.hero-foot .scroll{ display:flex; align-items:center; gap:12px; }
.hero-foot .line{
  width:1px; height:38px;
  background:linear-gradient(#9a9a9a, transparent);
  animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop{
  0%,100%{ transform:scaleY(1); transform-origin:top; opacity:0.6; }
  50%{ transform:scaleY(0.4); transform-origin:top; opacity:1; }
}
.hero-foot .catno{ font-family:'Fraunces', serif; font-style:italic; font-size:13px; letter-spacing:0; color:#6a6a6a; }
 
/* model image slot — fills the right column edge-to-edge, top to bottom */
.model-slot{
  position:relative; height:100%; z-index:1;
  perspective: 1400px;    /* gives the seesaw tilt real depth */
}
.model-frame{
  position:relative; width:100%; height:100%;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.model-img{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1.1s ease;
}
.model-img.active{ opacity:1; }
 
.model-photo{
  width:100%;
  height:100%;
  object-fit:cover;       /* crops to fill, never stretches or blurs */
  object-position: center 20%;
  display:block;
}
 
/* placeholder silhouette — used only until a real cut-out photo is added.
   Currently unused in the markup (kept in case the silhouette placeholder is needed again). */
.model-placeholder{
  width:62%; height:88%;
  margin:auto;
  background: linear-gradient(180deg, #d8d5cd 0%, #c3bfb5 55%, #a9a49a 100%);
  -webkit-mask-image: radial-gradient(ellipse 46% 48% at 50% 42%, #000 60%, transparent 100%),
                      linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
  mask-image: radial-gradient(ellipse 46% 48% at 50% 42%, #000 60%, transparent 100%),
              linear-gradient(#000, #000);
  filter: grayscale(1) contrast(1.05);
  opacity:0.9;
}
/* model-caption is currently commented out in the markup, styles kept for when it's re-enabled */
.model-caption{
  position:absolute; bottom:80px; right:5vw;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#9a9a9a;
  z-index:2;
}
.model-caption .blink{
  display:inline-block;
  animation: blink 1s steps(1) infinite;
}
 
/* ================= LATEST (SC-style track row) ================= */
.latest{
  padding: 8vh 5vw 6vh;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.section-label{
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:36px; display:flex; align-items:center; gap:14px;
}
.section-label::after{ content:''; flex:1; height:1px; background:var(--hair); }
 
.sc-embed-wrap{
  filter: saturate(0.9);
}
.sc-embed-wrap iframe{ display:block; border:none; }
 
/* ================= RELEASES ================= */
.releases{ padding: 12vh 5vw 10vh; }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 4vw 2vw; }
 
.release{
  display:block;
  position:relative; opacity:0; transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.release.in{ opacity:1; transform:translateY(0); }
.release:hover .cover{ filter: saturate(1) brightness(1.05); }
.release:hover .name{ color:var(--accent); }
 
.release:nth-child(1){ grid-column: 1 / 8; }
.release:nth-child(2){ grid-column: 8 / 13; margin-top:14vh; }
.release:nth-child(3){ grid-column: 1 / 5; margin-top:6vh; }
.release:nth-child(4){ grid-column: 5 / 13; }
.release:nth-child(5){ grid-column: 2 / 10; margin-top:10vh; }
 
.cover{ aspect-ratio: 4 / 5; width:100%; position:relative; overflow:hidden; filter: saturate(0.9); transition: filter .35s ease; }
.cover-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  transform: translateY(var(--py, 0px)) scale(1.12);   /* 1.12 baseline gives room for the parallax travel without exposing edges */
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.release:hover .cover-img{
  transform: translateY(var(--py, 0px)) scale(1.2);    /* contained zoom on hover — .cover keeps overflow:hidden so it never spills into neighbouring tiles */
}
@media (prefers-reduced-motion: reduce){
  .cover-img{ transform:none !important; transition:none; }
}
.cover::after{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:0.28; z-index:2;
}
.cover .catno{ position:absolute; bottom:20px; right:20px; font-family:'Fraunces', serif; font-style:italic; font-size:13px; letter-spacing:0; color:rgba(11,11,13,0.65); z-index:3; }
 
/* off-white placeholders — matches the light backgrounds of the real SC cover art.
   cover-3/4/5 are currently unused since those releases are commented out in the markup. */
.cover-1{ background: linear-gradient(155deg, #f5f3ec, #e5e1d5 65%, #d9c9a3); }
.cover-2{ background: linear-gradient(200deg, #ecece9, #dadcda 55%, #d6bd8d); }
.cover-3{ background: linear-gradient(120deg, #f7f4ee, #e2ddd0 60%, #d3bf95); }
.cover-4{ background: linear-gradient(170deg, #f0efe8, #dcdedb 60%, #c9ac78); }
.cover-5{ background: linear-gradient(140deg, #f8f6f0, #e6e3da 55%, #cbb08a); }
 
.release .meta{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:16px;
}
.release .name{ order:1; font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:22px; line-height:1.25; color:var(--bone); transition: color .3s ease; }
.release .kind{ order:2; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:#c19961ea; }
 
/* ================= FOOTER ================= */
footer{
  padding: 8vh 5vw 6vh;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
  border-top:1px solid var(--hair);
}
footer .col{ font-size:12px; color:var(--bone-dim); line-height:2; }
footer .col .head{ display:block; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:10px; }
footer a:hover{ color:var(--accent); }
 
/* ============================================================
   RESPONSIVE — tablet and below
   ============================================================ */
@media (max-width: 900px){
  header{ padding: 20px 6vw; }
  header nav{ gap:8px; }
  header nav a{ padding:4px 7px; font-size:9px; letter-spacing:0.08em; }
  header nav a.nav-social{ display:none; }
 
  .hero{
    grid-template-columns: 1fr;
    min-height: auto;           /* let the hero size to its content instead of stretching to fill the screen */
  }
  .hero-copy{
    padding: 108px 6vw 32px;
    justify-content: flex-start;   /* was center — on a short single column that pushed text oddly low */
  }
  h1.title{ font-size: clamp(46px, 15vw, 100px); }
  .type-line{ margin-top:22px; }
  .signature{ margin-top:18px; }
 
  .model-slot{
    position:relative;
    height:auto;
    aspect-ratio: 4 / 5;          /* was a fixed vh value — didn't scale sensibly across phone sizes */
    perspective:none;
  }
  .model-photo{ object-position: center top; }
 
  .hero-foot{
    position:relative; bottom:auto; left:0; right:0;   /* was left:5vw + right:5vw while position:relative, which pushed it visibly off-center */
    margin-top:0; padding: 18px 6vw 32px;
  }
 
  .latest{ padding: 6vh 6vw 5vh; }
  .releases{ padding: 9vh 6vw 8vh; }
  .section-label{ margin-bottom:26px; }
}
 
@media (max-width: 720px){
  .release:nth-child(1), .release:nth-child(2), .release:nth-child(3),
  .release:nth-child(4), .release:nth-child(5){ grid-column: 1 / 13; margin-top:0; }
  .grid{ row-gap:12vh; }
  .sc-embed-wrap iframe{ height:140px; }
}
 
@media (max-width: 480px){
  header .mark .sub{ display:none; }   /* keep only the logo box on the tightest phones */
  header nav a{ padding:4px 6px; font-size:8px; }
  .hero-copy{ padding-top:100px; }
}
 
@media (prefers-reduced-motion: reduce){
  .hero-foot .line{ animation:none; }
  .release{ transition:none; opacity:1; transform:none; }
  .model-frame{ transform:none !important; }
  .model-caption .blink{ animation:none; }
}