/* ============================================
   SUPERMODELME — THE RUNWAY KINGS
   Shared styles for the /the-runway-kings section.

   Same type system and structure as Make It Or Break It,
   but the accent is gold, taken from the key art, so the
   two shows read as one franchise and still stay distinct.
   ============================================ */

:root {
  --black:#050505; --off-black:#0A0A0A; --silver:#9A9A9A; --mid-gray:#555;
  --off-white:#E8E8E8; --white:#fff; --chrome:#B8B8C0;

  /* Kings accent — sampled from the poster */
  --gold:#C9922F;
  --gold-bright:#E8B84B;
  --gold-dim:#8A6420;

  /* Sister show, used only by the switcher */
  --pink:#E91E8C;

  --font-display:'Bebas Neue',sans-serif;
  --font-body:'Outfit',sans-serif;
  --font-ed:'Cormorant Garamond',serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --pad:clamp(1.35rem,4vw,3.75rem);
  --sec:clamp(4.5rem,10vw,8rem);
  --max:1280px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:300;background:var(--black);color:var(--off-white);
  overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section-label{font-size:.57rem;font-weight:600;letter-spacing:.4em;color:var(--gold);text-transform:uppercase}

/* ---------- NAV + SHOW SWITCHER ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease}
.nav.scrolled{background:rgba(5,5,5,.86);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.09)}
.nav__inner{max-width:var(--max);margin:0 auto;padding:.85rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* The switcher is the franchise control: both shows always one click away. */
.switch{display:flex;align-items:stretch;border:1px solid rgba(255,255,255,.16)}
.switch__item{display:flex;align-items:center;padding:.5rem .85rem;font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silver);white-space:nowrap;
  transition:color .3s ease,background .3s ease}
.switch__item + .switch__item{border-left:1px solid rgba(255,255,255,.16)}
.switch__item:hover{color:var(--white)}
.switch__item[aria-current="page"]{color:var(--black);background:var(--gold)}
.switch__item--sister:hover{color:var(--pink)}

.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav__links a{position:relative;font-size:.66rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--off-white);transition:color .3s ease}
.nav__links a::after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__burger{display:none;width:26px;height:16px;position:relative;background:none;border:0;cursor:pointer}
.nav__burger span{position:absolute;left:0;width:100%;height:1.5px;background:var(--white);transition:all .35s var(--ease)}
.nav__burger span:nth-child(1){top:0}
.nav__burger span:nth-child(2){top:50%;transform:translateY(-50%)}
.nav__burger span:nth-child(3){bottom:0}
.nav__burger.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;
  grid-template-columns:minmax(0,1fr) min(44vw, calc(100dvh * 9 / 16));overflow:hidden}
.page{position:relative;z-index:2;background:var(--black);
  padding:clamp(4.5rem,8vw,6rem) clamp(1.35rem,3.5vw,3.75rem) clamp(1.5rem,3vw,2.75rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(1.25rem,2.5vh,2rem)}
.page__grain{position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.folio{position:relative;display:flex;justify-content:space-between;align-items:center;
  padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.16);
  font-size:.55rem;font-weight:600;letter-spacing:.36em;color:var(--silver);text-transform:uppercase}
.folio em{font-style:normal;color:var(--gold)}
.page__body{position:relative;display:flex;flex-direction:column;gap:clamp(.75rem,1.8vh,1.15rem)}
.page__title{font-family:var(--font-display);font-size:clamp(2.9rem,6.2vw,5.8rem);line-height:.86;
  letter-spacing:.03em;color:var(--white);text-transform:uppercase}
.page__title span{display:block;color:var(--gold)}
.page__deck{font-family:var(--font-ed);font-style:italic;font-size:clamp(1rem,1.55vw,1.32rem);
  color:var(--chrome);line-height:1.35;max-width:32ch}

/* Month-only premiere, so no day numeral here */
.datestamp{display:flex;flex-direction:column;gap:.2rem}
.datestamp__mon{font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.6rem);letter-spacing:.08em;
  color:var(--white);line-height:1}
.datestamp__kicker{font-size:.55rem;font-weight:600;letter-spacing:.4em;color:var(--gold);text-transform:uppercase}

.watch{position:relative;padding-top:clamp(1rem,2vh,1.4rem);border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;gap:clamp(.9rem,1.9vh,1.35rem);scroll-margin-top:80px}
.watch__head{font-size:.57rem;font-weight:600;letter-spacing:.4em;color:var(--white);text-transform:uppercase}
.plat{display:flex;flex-direction:column;gap:.5rem}
.plat__top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.plat__mark{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:.1em;color:var(--white);line-height:1;white-space:nowrap}
.plat__mark svg{width:14px;height:14px;flex:none;color:var(--gold)}
.reach{font-size:.55rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(201,146,47,.5);padding:.25rem .55rem;line-height:1}
.plat__note{font-size:.78rem;color:var(--silver);line-height:1.5;max-width:52ch}
.minime{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.1rem);flex-wrap:wrap}
.minime__logo{height:clamp(34px,4vw,54px);width:auto;flex:none;transition:opacity .3s ease}
a:hover > .minime__logo{opacity:.72}
.minime__on{display:flex;align-items:center;gap:.4rem;font-size:.58rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--silver);border-left:1px solid rgba(255,255,255,.18);
  padding-left:clamp(.7rem,1.6vw,1.1rem);align-self:center}
.minime__on svg{width:13px;height:13px;color:var(--white)}

.regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem clamp(1rem,2.5vw,2rem);margin-top:.15rem}
.region{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding-bottom:.28rem;border-bottom:1px solid rgba(255,255,255,.08)}
.region__label{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
.region__name{font-size:.72rem;color:var(--off-white);white-space:nowrap}
.region__new{flex:none;padding:.18rem .32rem;background:var(--gold);color:var(--black);
  font-size:.48rem;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.region__at{font-size:.7rem;font-weight:500;color:var(--gold);white-space:nowrap;transition:color .25s ease}
.region__at:hover{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}

.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.35rem;position:relative;overflow:hidden;
  font-size:.69rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  border:1px solid rgba(255,255,255,.28);transition:border-color .4s var(--ease),color .4s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);
  transform-origin:left;transition:transform .45s var(--ease);z-index:-1}
.btn:hover{border-color:var(--gold-bright)}
.btn:hover::before{transform:scaleX(1)}
.btn svg{width:14px;height:14px;flex:none}
.btn--primary{border-color:var(--gold);background:var(--gold);color:var(--black)}
.btn--primary::before{background:var(--white)}
.ctas{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.15rem}

.plate{position:relative;overflow:hidden;background:var(--off-black)}
.plate__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate__wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(5,5,5,.55) 0%, transparent 14%)}
.plate__caption{position:absolute;left:clamp(.75rem,1.4vw,1.2rem);bottom:clamp(1rem,2.5vh,1.75rem);z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg);font-size:.52rem;font-weight:600;letter-spacing:.42em;
  color:rgba(255,255,255,.55);text-transform:uppercase}

/* ---------- SHARED SECTIONS ---------- */
.about{padding:var(--sec) 0}
.about__headline{font-family:var(--font-ed);font-size:clamp(1.75rem,4vw,3.1rem);line-height:1.2;
  color:var(--white);font-weight:400;margin:.7rem 0 1.25rem;max-width:20ch}
.about__headline em{font-style:italic;color:var(--chrome)}
.about__date{color:var(--gold);font-style:normal}
.about__body{font-size:clamp(.92rem,1.15vw,1.05rem);color:var(--silver);max-width:66ch;line-height:1.75}
.about__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(255,255,255,.1)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);color:var(--white);
  line-height:1;font-weight:400}
.stat span{font-size:.6rem;letter-spacing:.34em;color:var(--silver);text-transform:uppercase}

/* ---------- PAGE HEADER (sub pages) ---------- */
.phead{padding:clamp(7rem,14vw,10rem) 0 clamp(2.5rem,5vw,4rem);text-align:center}
.phead__title{font-family:var(--font-display);font-size:clamp(2.6rem,7vw,5rem);letter-spacing:.05em;
  color:var(--white);line-height:1;margin:.6rem 0 1rem}
.phead__sub{font-family:var(--font-ed);font-style:italic;font-size:clamp(1.05rem,2vw,1.5rem);
  color:var(--chrome);max-width:34ch;margin:0 auto;line-height:1.4}

/* ---------- CARD GRID (contestants + judges) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);padding-bottom:var(--sec)}
.grid--judges{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));max-width:900px;margin:0 auto}
.card{display:flex;flex-direction:column;height:100%}
.card__img{position:relative;aspect-ratio:707/1000;overflow:hidden;background:var(--off-black);
  border:1px solid rgba(255,255,255,.08)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__img img{transform:scale(1.04)}
.card__name{font-family:var(--font-display);font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:.06em;
  color:var(--white);margin-top:.9rem;line-height:1.1}
.card__meta{font-size:.72rem;color:var(--gold);margin-top:.25rem}
.card__bio{font-size:.8rem;color:var(--silver);line-height:1.6;margin:.6rem 0 1.1rem}

/* Video profile slot — dormant until a URL is added, same as the sister show */
.card__video{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.1);font-size:.6rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.3;transition:color .3s ease}
.card__video svg{width:15px;height:15px;flex:none}
.card__video:not([href]){color:var(--mid-gray);cursor:default;pointer-events:none}
.card__video:not([href]) .card__video-live{display:none}
.card__video[href] .card__video-soon{display:none}
.card__video[href]{color:var(--gold)}
.card__video[href]:hover{color:var(--gold-bright)}

/* Judge socials — sit on the card floor like the video slot on the contestant cards */
.card__socials{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin-top:auto;padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.1)}
.card__social{display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;font-weight:500;
  letter-spacing:.1em;color:var(--silver);transition:color .3s ease}
.card__social svg{width:15px;height:15px;flex:none}
.card__social:hover{color:var(--gold-bright)}

/* ---------- FOOTER ---------- */
.foot{padding:var(--sec) 0 clamp(2.5rem,5vw,3.5rem);border-top:1px solid rgba(255,255,255,.09)}
.foot__credits{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(2rem,6vw,5rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid rgba(255,255,255,.09)}
.credit{display:flex;flex-direction:column;gap:.7rem}
.credit__label{font-size:.55rem;font-weight:600;letter-spacing:.34em;color:var(--silver);text-transform:uppercase}
.credit img{height:clamp(26px,3vw,34px);width:auto;opacity:.9;transition:opacity .3s ease}
.credit a:hover img{opacity:1}
.logo-shopee{height:clamp(22px,2.4vw,28px)!important}
.foot__social{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(2rem,4vw,2.75rem) 0}
.social{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:.14em;
  color:var(--silver);text-transform:uppercase;transition:color .3s ease}
.social:hover{color:var(--gold)}
.social svg{width:16px;height:16px}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid rgba(255,255,255,.09);
  font-size:.68rem;color:var(--silver)}

/* ---------- MOTION ---------- */
.up{opacity:0;transform:translateY(22px);animation:up 1.05s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes up{to{opacity:1;transform:none}}
.wipe{clip-path:inset(0 0 100% 0);animation:wipe 1.45s var(--ease) .3s forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:calc(var(--stagger,0) * .09s)}
.rv.seen{opacity:1;transform:none}

/* ---------- MOBILE ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}
  .plate{grid-row:1;aspect-ratio:9/13;height:auto}
  .plate__wash{background:linear-gradient(0deg, rgba(5,5,5,1) 0%, rgba(5,5,5,.3) 24%, transparent 52%)}
  .plate__caption{display:none}
  .page{grid-row:2;padding:0 var(--pad) clamp(2.5rem,7vh,3.5rem);margin-top:-14%;gap:1.35rem}
  .folio{order:-1;margin-bottom:.25rem}
  .page__title{font-size:clamp(2.7rem,12vw,4.2rem)}
  .regions{grid-template-columns:1fr}
  .btn{flex:1 1 auto;justify-content:center}
  .nav__burger{display:block}
  .nav__inner{padding:.7rem var(--pad)}
  .switch__item{padding:.45rem .6rem;font-size:.52rem;letter-spacing:.1em}
  .nav__links{position:fixed;inset:0 0 auto;top:0;padding:5.5rem var(--pad) 2.5rem;
    background:rgba(5,5,5,.97);backdrop-filter:blur(18px);flex-direction:column;align-items:flex-start;
    gap:1.5rem;transform:translateY(-100%);transition:transform .5s var(--ease);
    border-bottom:1px solid rgba(255,255,255,.1)}
  .nav__links.open{transform:translateY(0)}
  .nav__links a{font-size:1rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .up,.wipe{opacity:1;transform:none;animation:none;clip-path:none}
  .rv{opacity:1;transform:none;transition:none}
  .card__img img{transition:none}
  html{scroll-behavior:auto}
}