@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#070707;
  --bg2:#0d0d0d;
  --panel:#111;
  --text:#f2f0ec;
  --muted:#8f8d89;
  --line:rgba(255,255,255,.12);
  --soft:rgba(255,255,255,.05);
  --accent:#d5cbc0;
  --red:#7e1118;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.hidden{display:none!important}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:.07;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.75) 0 0.6px,transparent .7px),
    radial-gradient(circle at 80% 65%,rgba(255,255,255,.7) 0 0.55px,transparent .65px);
  background-size:6px 6px,7px 7px;
  mix-blend-mode:soft-light;
}

/* AGE GATE */
.age-gate{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%,#28221e 0,transparent 34%),
    linear-gradient(145deg,#050505 0%,#090909 45%,#030303 100%);
  padding:28px;
}
.age-gate::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}
.age-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(70px);
  opacity:.28;
}
.age-orb-a{
  width:260px;height:260px;
  background:#8f7b69;
  top:10%;left:10%;
}
.age-orb-b{
  width:320px;height:320px;
  background:#3a3a3a;
  bottom:8%;right:4%;
}
.age-card{
  width:min(720px,100%);
  border:1px solid rgba(255,255,255,.13);
  background:rgba(12,12,12,.72);
  backdrop-filter:blur(22px);
  padding:56px;
  position:relative;
  z-index:2;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.micro,.section-label,.edition,.hero-meta,.hero-index,.visual-code,.look-caption small,.statement span,.statement small,footer{
  font-family:"Space Mono",monospace;
  letter-spacing:.12em;
}
.micro{
  color:#8d8984;
  font-size:11px;
  margin-bottom:54px;
}
.age-mark{
  width:78px;height:78px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:24px;
  margin-bottom:34px;
}
.age-card h1{
  font-size:clamp(42px,8vw,76px);
  letter-spacing:-.065em;
  line-height:.92;
  margin:0;
  font-weight:900;
}
.age-card h1 span{color:#a89d93}
.lead{
  font-size:18px;
  color:#bbb5af;
  margin:24px 0 40px;
}
.age-copy{
  max-width:580px;
  font-size:15px;
  color:#a7a39e;
  line-height:1.65;
}
.age-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:34px;
}
.btn{
  min-height:58px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:.25s ease;
  font-size:12px;
  letter-spacing:.09em;
  font-weight:700;
}
.btn-primary{
  background:#f0ede8;
  color:#111;
}
.btn-primary:hover{
  background:#fff;
  transform:translateY(-2px);
}
.btn-ghost{
  color:#a7a39e;
  background:rgba(255,255,255,.02);
}
.btn-ghost:hover{
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.age-note{
  margin:24px 0 0;
  color:#5f5c59;
  font-size:11px;
}

/* TOP BAR */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:74px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 34px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,7,7,.58);
  backdrop-filter:blur(18px);
}
.brand{font-weight:900;letter-spacing:-.04em}
.brand span{color:#918980}
.topbar nav{display:flex;gap:28px}
.topbar nav a{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:#8b8986;
  transition:.2s;
}
.topbar nav a:hover{color:#fff}
.edition{
  justify-self:end;
  font-size:9px;color:#62605d;
}

/* HERO */
.hero{
  height:100vh;
  min-height:760px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:0 5vw 8vh;
  background:
    radial-gradient(ellipse at 74% 42%,rgba(193,176,161,.20),transparent 22%),
    radial-gradient(ellipse at 75% 50%,rgba(255,255,255,.06),transparent 8%),
    linear-gradient(115deg,#070707 0%,#11100f 50%,#050505 100%);
}
.hero-grid{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent);
}
.hero-glow{
  position:absolute;
  width:42vw;height:80vh;
  min-width:320px;
  right:9vw;top:8vh;
  border-radius:46% 54% 48% 52%;
  background:
    linear-gradient(100deg,rgba(255,255,255,.03),rgba(216,200,185,.2) 48%,rgba(255,255,255,.02)),
    radial-gradient(circle at 48% 30%,rgba(255,255,255,.28),transparent 18%),
    #171513;
  box-shadow:
    inset -40px -40px 80px rgba(0,0,0,.7),
    inset 20px 10px 45px rgba(255,255,255,.07),
    0 50px 120px rgba(0,0,0,.55);
  transform:rotate(-4deg);
  opacity:.9;
}
.hero-content{position:relative;z-index:3}
.eyebrow{
  color:#817b75;
  letter-spacing:.18em;
  font-size:10px;
  font-weight:700;
  margin-bottom:22px;
}
.hero h2{
  margin:0;
  font-size:clamp(82px,16vw,250px);
  line-height:.72;
  letter-spacing:-.095em;
  font-weight:900;
}
.hero h2 span{
  display:block;
  color:#8e8379;
}
.hero-text{
  margin:36px 0 0;
  font-size:clamp(16px,2vw,27px);
  line-height:1.35;
  font-weight:500;
  letter-spacing:-.03em;
}
.hero-meta{
  position:absolute;
  top:112px;
  left:5vw;
  right:5vw;
  display:flex;
  justify-content:space-between;
  color:#65615d;
  font-size:9px;
}
.hero-index{
  position:absolute;
  right:5vw;
  bottom:5vh;
  font-size:9px;color:#5b5957;
}
.scroll-cue{
  position:absolute;
  right:5vw;
  bottom:18vh;
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:9px;
  letter-spacing:.12em;
  color:#8e8984;
}
.scroll-cue i{
  width:58px;height:1px;background:#5a5652;
}

/* GENERIC */
.section{padding:120px 5vw}
.section-label{
  font-size:9px;
  color:#686562;
  margin-bottom:76px;
}
.section h3{
  margin:0;
  letter-spacing:-.06em;
  line-height:.88;
  font-size:clamp(54px,8vw,118px);
}
.section h3 em{
  color:#91867d;
  font-style:normal;
}

/* MANIFEST */
.manifest{
  background:#0b0b0b;
  border-top:1px solid var(--line);
}
.manifest-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:10vw;
  align-items:end;
}
.manifest-copy{
  color:#a8a49f;
  max-width:560px;
}
.manifest-copy p{
  font-size:16px;
  line-height:1.75;
  margin:0 0 24px;
}
.spec-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:16px 0;
  font-family:"Space Mono",monospace;
  font-size:9px;
  letter-spacing:.08em;
}
.spec-row span{color:#555}
.spec-row strong{font-weight:400;color:#aaa6a0}

/* LOOKS */
.looks{background:#070707}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:70px;
}
.section-head p{
  max-width:260px;
  color:#77736f;
  font-size:13px;
  line-height:1.6;
}
.look-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.look-card{grid-column:span 4}
.look-card.tall{grid-column:span 5}
.look-card.wide{grid-column:span 7}
.visual{
  height:590px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#111;
}
.tall .visual{height:760px}
.wide .visual{height:620px}
.visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 38%);
}
.visual-01{background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/pearl-form.jpg');background-size:cover;background-position:center;}
.visual-02{background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/obsidian.jpg');background-size:cover;background-position:center;}
.visual-03{background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/gunmetal.jpg');background-size:cover;background-position:center;}
.visual-04{background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/white-room.jpg');background-size:cover;background-position:center;}
.visual-05{background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/night-structure.jpg');background-size:cover;background-position:center;}
.visual-06{background-image:linear-gradient(to top,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('assets/mirror-skin.jpg');background-size:cover;background-position:center;}
.figure{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:40%;
  height:70%;
  border-radius:48% 52% 42% 44% / 24% 25% 66% 69%;
  box-shadow:
    inset 12px 0 28px rgba(255,255,255,.22),
    inset -18px -8px 40px rgba(0,0,0,.65),
    0 30px 80px rgba(0,0,0,.4);
}
.figure::before{
  content:"";
  position:absolute;
  width:44%;
  aspect-ratio:1;
  border-radius:50%;
  left:28%;
  top:-12%;
  background:inherit;
  box-shadow:inset 8px 0 18px rgba(255,255,255,.13);
}
.figure-a{background:#b7aa9d}
.figure-b{background:#090909}
.figure-c{background:#666d70}
.figure-d{background:#9b8b7d;width:24%;left:60%}
.figure-e{background:#171717}
.figure-f{background:#737b7f}
.visual-code{
  position:absolute;
  z-index:4;
  left:20px;top:20px;
  font-size:9px;
  color:rgba(255,255,255,.55);
}
.look-caption{
  display:flex;
  justify-content:space-between;
  padding:18px 2px 36px;
  border-top:1px solid rgba(255,255,255,.07);
}
.look-caption span{
  display:block;
  color:#5f5b58;
  font-size:9px;
  margin-bottom:5px;
}
.look-caption strong{
  font-size:13px;
  font-weight:600;
}
.look-caption small{
  color:#565350;
  font-size:8px;
}

/* DETAILS */
.details{
  background:#0c0c0c;
  border-top:1px solid var(--line);
}
.details-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:70px;
}
.details-head p{
  color:#75716d;
  max-width:280px;
  font-size:13px;
  line-height:1.65;
}
.detail-strip{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr .9fr;
  gap:12px;
  height:520px;
}
.detail{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.detail span{
  position:absolute;
  left:16px;bottom:16px;
  font-family:"Space Mono",monospace;
  font-size:8px;
  letter-spacing:.08em;
  color:rgba(255,255,255,.58);
}
.detail-a{
  background:
    linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 49%,transparent 56%),
    linear-gradient(150deg,#090909,#3a3430);
}
.detail-b{
  background:
    radial-gradient(ellipse at 55% 75%,#101010 0 28%,transparent 29%),
    linear-gradient(#625a54,#161515);
}
.detail-c{
  background:
    linear-gradient(60deg,rgba(255,255,255,.15),transparent 20% 55%,rgba(255,255,255,.18)),
    linear-gradient(120deg,#303336,#777d7f,#191b1c);
}
.detail-d{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.2),transparent 4%),
    linear-gradient(120deg,#0b0b0b,#897a6d 60%,#15120f);
}

/* STATEMENT */
.statement{
  min-height:88vh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%,rgba(141,122,105,.18),transparent 28%),
    #050505;
}
.statement-grid{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;
}
.statement-inner{
  position:relative;
  z-index:2;
  text-align:center;
}
.statement-inner > span{
  font-size:8px;color:#68635e;
}
blockquote{
  margin:42px 0;
  font-size:clamp(46px,7vw,104px);
  line-height:.9;
  font-weight:900;
  letter-spacing:-.07em;
}
.statement small{
  font-size:8px;color:#5e5a56;
}

/* ABOUT */
.about{
  background:#efede8;
  color:#0a0a0a;
}
.about .section-label{color:#8b8882}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;
}
.about h3{
  font-size:clamp(58px,8vw,110px);
}
.about h3 span{color:#9b9188}
.about-lead{
  font-size:18px;
  line-height:1.5;
  max-width:520px;
  color:#5d5955;
}
.about-copy{
  align-self:end;
  font-size:15px;
  line-height:1.75;
  color:#4e4a46;
}
.p5-link{
  margin-top:42px;
  display:inline-flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #111;
  padding-bottom:8px;
  color:#111;
  font-weight:700;
  font-size:11px;
  letter-spacing:.09em;
}

/* FOOTER */
footer{
  min-height:120px;
  background:#050505;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw;
  font-size:8px;
  color:#65615e;
  border-top:1px solid var(--line);
}
footer a:hover{color:#fff}

/* MOBILE */
@media (max-width: 900px){
  .age-card{padding:38px 28px}
  .age-actions{grid-template-columns:1fr}
  .topbar{
    grid-template-columns:1fr auto;
    height:64px;
    padding:0 18px;
  }
  .topbar nav{display:none}
  .edition{font-size:8px}
  .hero{
    min-height:720px;
    padding:0 20px 70px;
  }
  .hero-meta{top:92px;left:20px;right:20px}
  .hero-glow{
    width:68vw;
    right:-15vw;
    height:65vh;
    top:15vh;
  }
  .hero h2{font-size:clamp(78px,22vw,150px)}
  .hero-index{right:20px;bottom:30px}
  .scroll-cue{display:none}
  .section{padding:90px 20px}
  .section-label{margin-bottom:48px}
  .manifest-grid,.about-grid{grid-template-columns:1fr;gap:64px}
  .manifest h3,.details h3{font-size:clamp(56px,17vw,100px)}
  .section-head,.details-head{
    align-items:flex-start;
    flex-direction:column;
    gap:30px;
  }
  .look-grid{grid-template-columns:1fr}
  .look-card,.look-card.tall,.look-card.wide{grid-column:auto}
  .visual,.tall .visual,.wide .visual{height:72vh;min-height:520px}
  .detail-strip{
    grid-template-columns:1fr 1fr;
    height:auto;
  }
  .detail{height:330px}
  blockquote{font-size:clamp(42px,12vw,76px)}
  .statement{min-height:72vh;padding:50px 20px}
  footer{
    padding:28px 20px;
    min-height:150px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
  }
}

.hero-subcopy{
  position:relative;
  z-index:3;
  max-width:430px;
  margin:22px 0 0;
  color:#75716d;
  font-size:12px;
  line-height:1.65;
  letter-spacing:.01em;
}
@media (max-width:900px){
  .hero-subcopy{max-width:320px;font-size:11px}
}

/* V3 — approved SECOND SKIN imagery */
.visual .figure{display:none}
.visual{
  background-repeat:no-repeat;
  transition:transform .5s ease, filter .5s ease;
}
.look-card:hover .visual{
  filter:brightness(1.06);
}
.look-card{overflow:hidden}


/* =========================================================
   V4 — APPROVED GUNMETAL HEADER / P5.SECOND SKIN
   ========================================================= */

.brand-v4{
  display:flex;
  align-items:baseline;
  gap:7px;
}
.brand-v4 small{
  font-family:"Space Mono",monospace;
  font-size:7px;
  letter-spacing:.12em;
  color:#5f5b58;
  font-weight:400;
}

.hero-v4{
  position:relative;
  height:auto;
  min-height:0;
  padding:0;
  display:block;
  background:#050505;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.hero-v4 .hero-art{
  display:block;
  width:100%;
  line-height:0;
}

.hero-v4 .hero-art img{
  display:block;
  width:100%;
  height:auto;
  min-height:680px;
  max-height:calc(100svh - 74px);
  object-fit:cover;
  object-position:center center;
}

.hero-v4-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.12),transparent 18%,transparent 76%,rgba(0,0,0,.30)),
    linear-gradient(90deg,rgba(0,0,0,.08),transparent 22%,transparent 78%,rgba(0,0,0,.08));
}

.hero-v4-mobile-title{
  display:none;
}

.hero-v4-cue{
  bottom:34px;
  right:34px;
  padding:11px 14px;
  background:rgba(5,5,5,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
}

@media (max-width: 900px){
  .brand-v4 small{display:none}

  .hero-v4{
    margin-top:0;
    min-height:calc(100svh - 64px);
  }

  .hero-v4 .hero-art{
    position:absolute;
    inset:0;
  }

  .hero-v4 .hero-art img{
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    object-fit:cover;
    object-position:center center;
  }

  .hero-v4-shade{
    background:
      linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.12) 45%,rgba(0,0,0,.72) 100%);
  }

  .hero-v4-mobile-title{
    display:flex;
    position:absolute;
    left:20px;
    right:20px;
    bottom:72px;
    z-index:4;
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-v4-mobile-title span{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.04em;
    margin-bottom:6px;
  }

  .hero-v4-mobile-title strong{
    font-size:clamp(42px,13vw,72px);
    font-weight:400;
    line-height:.88;
    letter-spacing:-.055em;
  }

  .hero-v4-mobile-title small,
  .hero-v4-mobile-title em{
    font-family:"Space Mono",monospace;
    font-style:normal;
    letter-spacing:.16em;
  }

  .hero-v4-mobile-title small{
    margin-top:14px;
    color:#c7c2bc;
    font-size:8px;
  }

  .hero-v4-mobile-title em{
    margin-top:8px;
    color:#716d68;
    font-size:7px;
  }

  .hero-v4-cue{
    display:none;
  }
}