/* Scale House Studio — deliberately separate identity from the rest of
   scale-house.co. No red, no eggshell. Off-white, ink, warm grey only. */

:root{
  --page:  #faf9f7;
  --ink:   #141311;
  --grey:  #7a7168;
  --rule:  #e5e1db;

  --display: 'Boska', Georgia, serif;
  --text:    'Switzer', 'Helvetica Neue', Helvetica, sans-serif;

  --pad: clamp(1.25rem, 5vw, 5rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--text);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- masthead ---------- */
.mast{
  padding:clamp(4rem,10vw,8rem) var(--pad) clamp(2rem,5vw,3rem);
  text-align:center;
}
.mast__kicker{
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:.6rem;
}
.mast__wordmark{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(3.5rem,16vw,10rem);
  line-height:0.9;
  letter-spacing:-0.02em;
}

/* ---------- the cast ---------- */
.cast{ padding:clamp(1rem,3vw,2rem) var(--pad) clamp(4rem,8vw,6rem); }
.cast__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.5rem);
}
.cast__item img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}
.cast__item figcaption{
  margin-top:.6rem;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
  text-align:center;
}

/* ---------- shoot sections ---------- */
.shoot{
  padding:clamp(3rem,6vw,5rem) var(--pad);
  border-top:1px solid var(--rule);
}
.shoot__title{
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:400;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.shoot__title span{
  font-family:var(--text);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
  vertical-align:middle;
  margin-left:.5rem;
}
.shoot__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem) clamp(1rem,2vw,1.5rem);
}
.shoot__img{ width:100%; height:auto; }
.shoot__img--offset{ margin-top:clamp(2rem,6vw,4rem); }

/* ---------- footer ---------- */
.foot{
  padding:clamp(3rem,6vw,5rem) var(--pad);
  text-align:center;
  border-top:1px solid var(--rule);
}
.foot p{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--grey);
}
.foot a:hover{ color:var(--ink); }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .cast__grid{ grid-template-columns:repeat(2,1fr); }
  .shoot__grid{ grid-template-columns:1fr; }
  .shoot__img--offset{ margin-top:0; }
}

/* ---------- motion setup ----------
   Only hide things when JS is present AND the visitor hasn't asked for
   reduced motion. GSAP animates them back in. Without JS, or with reduced
   motion, nothing is hidden and the page reads as plain HTML. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{ opacity:0; transform:translateY(24px); }
  .js [data-stagger] > *{ opacity:0; transform:translateY(24px); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}