/* ============================================================
   JADE PATTERI — design system
   Editorial / fashion-magazine language: an "issue" built around
   four running features (Music, Acting, Dance, Modeling).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:        #15120F;
  --ink-soft:   #211C17;
  --bone:       #ECE4D3;
  --bone-dim:   #DCD2BC;
  --cream:      #F5EFE2;
  --emerald:    #1E4638;
  --emerald-lt: #2E5F4C;
  --rose:       #8B3A2B;
  --rose-lt:    #A9503D;
  --gold:       #B8925A;
  --line-dark:  rgba(245,239,226,0.18);
  --line-light: rgba(21,18,15,0.14);

  --serif: 'Fraunces', serif;
  --sans:  'Inter', sans-serif;

  --max: 1220px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0;
  line-height:1.05;
  letter-spacing:-0.01em;
}
p{margin:0;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,64px);}

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

/* ---------- masthead / nav ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--bone);
  border-bottom:1px solid var(--line-light);
}
.masthead-inner{
  max-width:var(--max);margin:0 auto;
  padding:18px clamp(20px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.wordmark{
  font-family:var(--serif);
  font-size:1.5rem;
  font-style:italic;
  font-weight:500;
  white-space:nowrap;
}
.masthead nav{
  display:flex;gap:clamp(14px,2vw,30px);
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.02em;
}
.masthead nav a{
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.masthead nav a:hover, .masthead nav a.active{border-color:var(--ink);}
.masthead .kicker{
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--rose);
  font-weight:600;
}
.nav-toggle{display:none;}

@media (max-width: 780px){
  .masthead nav{
    position:fixed;inset:64px 0 0 0;
    background:var(--bone);
    flex-direction:column;
    padding:24px clamp(20px,6vw,40px);
    gap:20px;
    font-size:1.1rem;
    transform:translateY(-8px);
    opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .masthead nav.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .nav-toggle{
    display:block;background:none;border:1px solid var(--ink);
    border-radius:100px;padding:8px 16px;font-family:var(--sans);
    font-size:0.8rem;letter-spacing:0.03em;cursor:pointer;
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
}
.hero video, .hero .hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0.82;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,18,15,0.05) 0%, rgba(21,18,15,0.15) 45%, rgba(21,18,15,0.92) 100%);
}
.hero-content{position:relative;z-index:2;padding:0 clamp(20px,4vw,64px) 56px;max-width:var(--max);margin:0 auto;width:100%;}
.hero-eyebrow{
  font-size:0.78rem;letter-spacing:0.06em;color:var(--gold);
  margin-bottom:14px;font-weight:500;
}
.hero h1{
  font-size:clamp(3rem, 8vw, 6.4rem);
  color:var(--cream);
  max-width:14ch;
}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero-sub{
  margin-top:22px;max-width:46ch;
  font-size:1.05rem;color:rgba(245,239,226,0.82);
}
.hero-meta{
  margin-top:36px;display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;
  border-top:1px solid var(--line-dark);padding-top:18px;
}
.hero-meta div{font-size:0.82rem;color:rgba(245,239,226,0.65);}
.hero-meta strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--cream);font-weight:500;margin-bottom:2px;}

/* ---------- page hero (secondary pages) ---------- */
.page-hero{
  background:var(--ink);color:var(--cream);
  padding:110px clamp(20px,4vw,64px) 64px;
}
.page-hero .kicker{color:var(--gold);font-size:0.8rem;letter-spacing:0.06em;font-weight:500;margin-bottom:14px;display:block;}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:var(--cream);max-width:16ch;}
.page-hero p.lede{margin-top:20px;max-width:56ch;font-size:1.08rem;color:rgba(245,239,226,0.78);}

/* ---------- section rhythm ---------- */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:44px;border-bottom:1px solid var(--line-light);padding-bottom:22px;
}
.section-head .num{font-family:var(--serif);font-style:italic;color:var(--rose);font-size:1rem;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);}
.section-head p{max-width:38ch;font-size:0.95rem;color:rgba(21,18,15,0.62);}
.dark{background:var(--ink);color:var(--cream);}
.dark .section-head{border-color:var(--line-dark);}
.dark .section-head p{color:rgba(245,239,226,0.65);}
.dark h2{color:var(--cream);}
.emerald{background:var(--emerald);color:var(--cream);}
.emerald .section-head{border-color:rgba(245,239,226,0.22);}
.emerald h2{color:var(--cream);}

/* ---------- contents grid (home: four disciplines) ---------- */
.contents-list{display:flex;flex-direction:column;}
.contents-row{
  display:grid;grid-template-columns:90px 1fr 260px;align-items:center;
  gap:28px;padding:30px 0;border-top:1px solid var(--line-light);
  text-decoration:none;color:inherit;
}
.contents-row:last-child{border-bottom:1px solid var(--line-light);}
.contents-row .tag{font-family:var(--serif);font-style:italic;color:var(--rose);font-size:1.1rem;}
.contents-row h3{font-size:clamp(1.6rem,3.4vw,2.4rem);transition:color .2s ease;}
.contents-row .desc{font-size:0.92rem;color:rgba(21,18,15,0.6);max-width:46ch;margin-top:6px;}
.dark .contents-row .desc{color:rgba(245,239,226,0.62);}
.dark .contents-row{border-color:var(--line-dark);}
.dark .contents-row:last-child{border-bottom-color:var(--line-dark);}
.dark .contents-row:hover h3{color:var(--gold);}
.contents-row .thumb{
  width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--ink);
}
.contents-row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.contents-row:hover .thumb img{transform:scale(1.05);}
.contents-row:hover h3{color:var(--rose);}
@media (max-width: 720px){
  .contents-row{grid-template-columns:1fr;gap:14px;}
  .contents-row .tag{order:1;}
  .contents-row .thumb{order:2;aspect-ratio:16/10;}
  .contents-row h3, .contents-row .desc{order:3;}
}

/* ---------- editorial split ---------- */
.split{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(28px,5vw,72px);align-items:center;
}
.split.reverse{grid-template-columns:0.9fr 1.1fr;}
.split.reverse .split-img{order:2;}
.split-img img{width:100%;height:100%;object-fit:cover;}
.split-eyebrow{font-size:0.78rem;letter-spacing:0.05em;color:var(--rose);font-weight:600;margin-bottom:16px;}
.split h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:20px;}
.split p{font-size:1.02rem;color:rgba(21,18,15,0.72);max-width:52ch;}
.split p + p{margin-top:16px;}
@media (max-width: 860px){
  .split, .split.reverse{grid-template-columns:1fr;}
  .split.reverse .split-img{order:0;}
}

/* ---------- credit marquee ---------- */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:26px 0;}
.marquee{display:flex;gap:64px;white-space:nowrap;animation:scroll 32s linear infinite;width:max-content;}
.marquee span{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:rgba(245,239,226,0.55);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- gallery grid ---------- */
.gallery{
  columns:3 260px;column-gap:18px;
}
.gallery figure{margin:0 0 18px;break-inside:avoid;position:relative;}
.gallery img{width:100%;border-radius:2px;}
.gallery figcaption{
  font-size:0.76rem;color:rgba(21,18,15,0.55);margin-top:8px;font-style:italic;font-family:var(--serif);
}
@media (max-width: 640px){.gallery{columns:2 160px;}}

/* ---------- quote ---------- */
.quote-block{
  max-width:820px;margin:0 auto;text-align:center;
}
.quote-block blockquote{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.3;margin:0;
}
.quote-block cite{
  display:block;margin-top:24px;font-style:normal;font-family:var(--sans);
  font-size:0.85rem;color:rgba(245,239,226,0.6);letter-spacing:0.02em;
}
.quote-block cite b{color:var(--cream);font-weight:600;}

/* ---------- credit list (bio / dance / acting) ---------- */
.credit-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.credit-group h4{
  font-size:0.78rem;letter-spacing:0.06em;text-transform:none;
  color:var(--rose);margin-bottom:16px;font-family:var(--sans);font-weight:600;
}
.credit-group ul{list-style:none;margin:0;padding:0;}
.credit-group li{
  padding:12px 0;border-top:1px solid var(--line-light);
  font-family:var(--serif);font-size:1.05rem;
}
.credit-group li:last-child{border-bottom:1px solid var(--line-light);}
.credit-group li span{
  display:block;font-family:var(--sans);font-size:0.8rem;color:rgba(21,18,15,0.55);margin-top:2px;
}
@media (max-width:700px){.credit-cols{grid-template-columns:1fr;}}

/* ---------- cards (streaming / venues) ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:14px;}
.pill{
  border:1px solid var(--line-dark);border-radius:100px;padding:12px 26px;
  font-size:0.9rem;font-weight:500;transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.dark .pill{border-color:var(--line-dark);color:var(--cream);}
.dark .pill:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
.pill.solid{background:var(--rose);color:var(--cream);border-color:var(--rose);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-size:0.9rem;font-weight:600;
  border:1px solid var(--ink);
}
.btn.light{background:var(--ink);color:var(--cream);}
.btn.outline{background:transparent;color:var(--ink);}
.btn.on-dark{border-color:var(--cream);color:var(--cream);}
.btn.on-dark.solid{background:var(--cream);color:var(--ink);}

/* ---------- reel / video ---------- */
.reel-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
}
.reel-frame video{width:100%;height:100%;object-fit:cover;}
.reel-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}
.reel-grid .reel-frame:nth-child(2){aspect-ratio:9/12;}
@media (max-width:780px){.reel-grid{grid-template-columns:1fr;}}

/* ---------- instagram strip ---------- */
.insta-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.insta-strip a{position:relative;display:block;aspect-ratio:1;overflow:hidden;}
.insta-strip img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.insta-strip a:hover img{transform:scale(1.08);}
@media (max-width:700px){.insta-strip{grid-template-columns:repeat(3,1fr);}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(245,239,226,0.6);padding:64px 0 32px;}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid var(--line-dark);}
.foot-word{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--cream);}
.foot-links{display:flex;gap:48px;flex-wrap:wrap;}
.foot-links h5{font-size:0.72rem;letter-spacing:0.06em;color:var(--gold);margin-bottom:14px;font-family:var(--sans);font-weight:600;}
.foot-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:0.9rem;}
.foot-bottom{display:flex;justify-content:space-between;padding-top:28px;font-size:0.78rem;flex-wrap:wrap;gap:10px;}

/* ---------- contact ---------- */
.form-grid{display:grid;gap:20px;max-width:640px;}
.form-grid label{display:block;font-size:0.8rem;color:rgba(245,239,226,0.6);margin-bottom:8px;}
.form-grid input, .form-grid textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-dark);
  color:var(--cream);font-family:var(--sans);font-size:1rem;padding:10px 2px;
}
.form-grid input:focus, .form-grid textarea:focus{outline:none;border-color:var(--gold);}
.form-grid textarea{resize:vertical;min-height:110px;}

/* ---------- utility ---------- */
.mt-s{margin-top:14px;}.mt-m{margin-top:28px;}.mt-l{margin-top:48px;}
.center{text-align:center;}
.eyebrow-line{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.eyebrow-line span{font-size:0.78rem;letter-spacing:0.06em;color:var(--rose);font-weight:600;}
.eyebrow-line::after{content:"";flex:1;height:1px;background:var(--line-light);}
.dark .eyebrow-line::after{background:var(--line-dark);}