/* ============================================================
   home.css — the homepage only.
   Loads after site.css. Everything here is specific to this page.
   ============================================================ */

/* ---------- 1. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:var(--ground);
}
.hero-shot{position:absolute;inset:0;z-index:1;}
.hero-shot img{
  width:100%;height:100%;
  object-fit:cover;object-position:58% 26%;
  filter:grayscale(1) contrast(1.24) brightness(.78);
}
.hero-shot::after{
  content:"";position:absolute;inset:0;
  background:rgba(16,16,16,.16);
}
/* the hero dissolves into the black of the section below it */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 52%,var(--void) 100%);
}

.hero-type{
  position:relative;z-index:4;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,3.6vw,56px);
  max-width:54%;
}
.hero-name-wrap{
  --name-size:clamp(76px,13vw,210px);
  position:relative;width:100%;
  height:calc(var(--name-size) * 1.7);
}
.hero-name-cycle{
  position:absolute;top:0;left:0;margin:0;
  font-family:var(--fd);font-weight:600;
  font-size:var(--name-size);
  line-height:1.7;letter-spacing:-.02em;
  color:var(--accent);
  white-space:nowrap;
}
.word-jay{animation:heroNameJay 5s cubic-bezier(.65,0,.35,1) infinite;}
.word-sapia{animation:heroNameSapia 5s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes heroNameJay{
  0%{clip-path:inset(0% 0 0% 0);}
  28%{clip-path:inset(0% 0 0% 0);}
  34%{clip-path:inset(50% 0 50% 0);}
  84%{clip-path:inset(50% 0 50% 0);}
  90%{clip-path:inset(0% 0 0% 0);}
  100%{clip-path:inset(0% 0 0% 0);}
}
@keyframes heroNameSapia{
  0%{clip-path:inset(50% 0 50% 0);}
  34%{clip-path:inset(50% 0 50% 0);}
  40%{clip-path:inset(0% 0 0% 0);}
  78%{clip-path:inset(0% 0 0% 0);}
  84%{clip-path:inset(50% 0 50% 0);}
  100%{clip-path:inset(50% 0 50% 0);}
}

.hero-scroll{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:color .2s var(--ease);
}
.hero-scroll:hover{color:var(--ink);}
.hero-scroll svg{width:14px;height:14px;animation:heroScrollBob 1.6s ease-in-out infinite;}
@keyframes heroScrollBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ---------- 2. ABOUT ME ---------- */
.about{
  background:var(--void);
  padding:clamp(76px,10vh,140px) clamp(24px,3.6vw,56px) clamp(84px,11vh,150px);
  scroll-margin-top:80px;
}
.about .kicker{text-align:left;max-width:1320px;margin:0 auto;}
.about-grid{
  display:grid;
  grid-template-columns:1fr minmax(0,clamp(380px,32vw,560px));
  gap:clamp(34px,4.6vw,76px);
  align-items:start;
  max-width:1320px;margin:0 auto;
}
.about-frame{max-width:clamp(380px,32vw,560px);margin:0 auto;}
.about-frame img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.2) brightness(.86);
}
.about-text{display:flex;flex-direction:column;align-items:flex-start;}
@media(min-width:901px){
  .about-text{align-self:stretch;justify-content:center;}
}
.about-body{color:var(--ink);font-weight:500;font-size:clamp(24px,2.3vw,32px);line-height:1.42;letter-spacing:-.01em;max-width:26ch;}
.about-body p{margin:0;}
.about-body p + p{margin-top:19px;}
.about-body .open{color:var(--ink);font-weight:500;}
.about-more{margin-top:clamp(34px,4.6vh,54px);}

/* ---------- 3. THE NEWSLETTER ---------- */
.news{
  position:relative;
  min-height:clamp(560px,78vh,860px);
  display:flex;align-items:center;
  padding:clamp(60px,8vh,110px) clamp(24px,3.6vw,56px);
  overflow:hidden;
  background:var(--lift);
}
.news-bg{position:absolute;inset:0;z-index:1;}
.news-bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 6%;
  transform:scale(1.18);transform-origin:22% 20%;
  filter:grayscale(1) contrast(1.22) brightness(.62);
}
.news-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.62) 40%,rgba(10,10,10,.12) 78%);
}
.news-copy{position:relative;z-index:2;max-width:min(560px,52%);}
.news .kicker{text-align:left;}
.lockup{
  font-family:var(--fd);font-weight:300;
  font-size:clamp(2.6rem,5.6vw,5.2rem);
  line-height:.95;letter-spacing:-.03em;
  margin:0 0 clamp(26px,3.4vh,42px);
}
.lockup em{font-style:italic;color:var(--accent);}
.news-body p{margin:0;color:#D8D5D0;font-size:17px;line-height:1.66;max-width:44ch;}
.news-body p + p{margin-top:17px;}
.news-acts{margin-top:clamp(30px,4vh,46px);}

/* ---------- 4. THE LATEST ---------- */
.latest{
  background:var(--lift);
  padding:clamp(76px,10vh,140px) clamp(24px,3.6vw,56px);
}
.latest-in{max-width:1320px;margin:0 auto;}
.latest-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(36px,5vh,62px);
}
.latest .kicker{text-align:left;margin:0;}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.2vw,52px);
}
.card{
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
}
.card .thumb{
  aspect-ratio:1.9/1;overflow:hidden;background:#0A0A0A;margin-bottom:4px;
}
.card .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.card:hover .thumb img{transform:scale(1.03);}
.card .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.card h3{
  margin:0;font-weight:600;
  font-size:clamp(18px,1.6vw,22px);line-height:1.24;letter-spacing:-.014em;
  transition:color .2s var(--ease);
}
.card .go{
  margin-top:auto;padding-top:8px;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.card:hover h3{color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-type{max-width:100%;}
  .hero-name-wrap{--name-size:clamp(62px,17vw,120px);}

  .about-grid{grid-template-columns:1fr;gap:30px;}
  .about-frame{max-width:320px;order:-1;}

  .news-copy{max-width:100%;}
  .news-bg::after{
    background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.7) 60%,rgba(10,10,10,.5) 100%);
  }
  .news-bg img{
    object-position:50% 6%;
    transform:none;
  }
  .lockup{font-size:clamp(2.2rem,10vw,3.2rem);}

  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr;gap:38px;}
}