:root{
  --navy:#0b2948;
  --navy2:#173b5d;
  --gold:#b68a38;
  --gold2:#d1ad62;
  --silver:#c9ced4;
  --cream:#f7f1e6;
  --paper:#fbf7ef;
  --ink:#162942;
  --muted:#6d6255;
  --max:1500px;
  --pad:clamp(18px,2.4vw,34px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
}
a{color:inherit}
img{display:block;max-width:100%}

/* HERO */
.hero{
  position:relative;
  min-height:clamp(430px,50vh,515px);
  overflow:hidden;
  background:#dfe9e7;
}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
}
.wash{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(250,247,239,.97) 0%,
      rgba(250,247,239,.86) 24%,
      rgba(250,247,239,.58) 39%,
      rgba(250,247,239,.10) 61%,
      rgba(16,45,75,.02) 100%);
}

/* MASTHEAD */
.mast{
  position:relative;
  z-index:2;
  max-width:var(--max);
  margin:auto;
  padding:20px var(--pad) 8px;
  display:grid;
  grid-template-columns:170px minmax(430px,1fr) auto;
  gap:22px;
  align-items:start;
}
.seal-link{
  display:block;
  width:156px;
  height:156px;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));
  transition:transform .18s ease;
}
.seal-link:hover{transform:translateY(-2px)}
.seal{
  width:100%;
  height:100%;
  object-fit:contain;
}

.brand-division{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding-top:14px;
  white-space:nowrap;
}
.brand-mom{
  font-size:clamp(3.1rem,4.7vw,5rem);
  line-height:.9;
  letter-spacing:.05em;
  color:var(--navy);
}
.brand-star{
  color:var(--silver);
  font-size:1.18rem;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  transform:translateY(-.16em);
}
.brand-division-name{
  font-size:clamp(2.15rem,3.2vw,3.35rem);
  line-height:.95;
  letter-spacing:.01em;
  color:var(--navy);
}

.nav{
  display:flex;
  gap:clamp(12px,1.5vw,24px);
  align-items:center;
  justify-content:flex-end;
  padding-top:16px;
  font:600 clamp(.68rem,.78vw,.82rem) Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav a{text-decoration:none}
.member{
  border:1px solid var(--gold);
  padding:12px 16px;
  background:rgba(255,255,255,.50);
}

/* HERO COPY */
.hero-copy{
  position:relative;
  z-index:2;
  width:min(510px,39vw);
  margin-left:max(var(--pad),calc((100vw - var(--max))/2 + 145px));
  padding:0 12px 18px;
  text-align:center;
}
.hero-copy h1{
  margin:0;
  font-size:clamp(2.8rem,4.1vw,4.45rem);
  line-height:.96;
  font-weight:400;
}
.rule{
  display:flex;
  align-items:center;
  gap:15px;
  color:var(--gold);
  margin:14px 0 14px;
}
.rule:before,.rule:after{
  content:"";
  height:1px;
  background:var(--gold);
  flex:1;
}
.hero-copy h2{
  margin:0 0 11px;
  font:600 .88rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#986617;
}
.hero-copy p{
  margin:0 auto 8px;
  max-width:500px;
  font-size:1rem;
  line-height:1.48;
}
.invite{
  margin-top:11px!important;
  font-style:italic;
  font-size:1.14rem!important;
}

/* DOORS */
.explore{
  max-width:var(--max);
  margin:auto;
  padding:20px var(--pad) 52px;
}
.doors{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.door{
  background:var(--paper);
  border:1px solid rgba(182,138,56,.62);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(41,35,24,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.door:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(41,35,24,.11);
}
.door>img{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
}
.door>div{padding:20px 26px 24px}
.door h3{
  margin:0 0 4px;
  font-size:clamp(1.55rem,1.9vw,1.95rem);
  text-transform:uppercase;
}
.eyebrow{
  margin:0 0 12px;
  color:#986617;
  font-style:italic;
  font-size:1.06rem;
}
.door p{line-height:1.5}
.door a{
  display:inline-block;
  margin-top:10px;
  text-decoration:none;
  text-transform:uppercase;
  font:700 .8rem Arial,sans-serif;
  letter-spacing:.06em;
}

/* FOOTER */
footer{
  background:#f0e6d5;
  border-top:1px solid rgba(182,138,56,.42);
}
.foot{
  max-width:var(--max);
  margin:auto;
  padding:24px var(--pad);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:25px;
  align-items:center;
}
.parent{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
}
.parent img{width:56px;height:56px;object-fit:contain}
.parent span,.place{display:flex;flex-direction:column}
.parent em,.place span{
  margin-top:4px;
  color:var(--muted);
  font-size:.78rem;
}
.foot nav{
  display:flex;
  gap:17px;
  font:600 .7rem Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.foot nav a{text-decoration:none}
.place{text-align:right}

/* MEDIUM DESKTOP */
@media (max-width:1180px) and (min-width:901px){
  .mast{
    grid-template-columns:126px minmax(360px,1fr) auto;
    gap:16px;
  }
  .seal-link{width:120px;height:120px}
  .brand-division{gap:11px;padding-top:10px}
  .brand-mom{font-size:clamp(2.55rem,4.15vw,3.55rem)}
  .brand-division-name{font-size:clamp(1.8rem,2.85vw,2.65rem)}
  .brand-star{font-size:.95rem}
  .nav{
    gap:12px;
    padding-top:13px;
    font-size:.68rem;
  }
  .member{padding:10px 12px}
  .hero{min-height:470px}
  .hero-copy{
    width:min(470px,43vw);
    margin-left:clamp(38px,6.5vw,80px);
  }
}

/* TABLET */
@media (max-width:900px){
  .hero{
    min-height:auto;
    padding-bottom:30px;
  }
  .wash{
    background:linear-gradient(180deg,
      rgba(250,247,239,.91) 0%,
      rgba(250,247,239,.72) 58%,
      rgba(250,247,239,.44) 100%);
  }
  .mast{
    grid-template-columns:90px 1fr;
    padding:17px 18px 8px;
  }
  .seal-link{width:84px;height:84px}
  .brand-division{
    justify-content:flex-start;
    gap:9px;
    padding-top:5px;
  }
  .brand-mom{font-size:clamp(2.2rem,7vw,3rem)}
  .brand-division-name{font-size:clamp(1.65rem,5.7vw,2.4rem)}
  .brand-star{font-size:.8rem}
  .nav{
    grid-column:1/-1;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 16px;
    padding-top:4px;
  }
  .hero-copy{
    width:min(620px,calc(100% - 36px));
    margin:34px auto 0;
    padding:24px;
    background:rgba(251,247,239,.86);
    border:1px solid rgba(182,138,56,.24);
    border-radius:14px;
    backdrop-filter:blur(2px);
  }
  .hero-copy h1{font-size:clamp(2.8rem,8vw,4rem)}
  .doors{grid-template-columns:1fr}
  .door>img{aspect-ratio:16/6}
  .foot{
    grid-template-columns:1fr;
    text-align:center;
  }
  .parent,.foot nav{justify-content:center}
  .place{text-align:center}
}

/* PHONE */
@media (max-width:560px){
  .mast{
    grid-template-columns:66px 1fr;
    gap:10px;
  }
  .seal-link{width:62px;height:62px}
  .brand-mom{font-size:1.85rem}
  .brand-division-name{font-size:1.45rem}
  .brand-star{font-size:.68rem}
  .nav{justify-content:flex-start;font-size:.64rem}
  .member{padding:9px 11px}
  .hero-copy{
    width:calc(100% - 22px);
    margin-top:24px;
    padding:21px 16px;
  }
  .hero-copy h1{font-size:2.55rem}
}


/* ==========================================================
   FINAL MASTHEAD NAV SIMPLIFICATION
   Parent seal + Streamers at left.
   MOM Streamers seal at right = member-access doorway.
   ========================================================== */

@media (min-width: 901px){
  .mast{
    grid-template-columns:205px minmax(300px,1fr) 138px;
    gap:10px;
    align-items:center;
  }

  .seal-link{
    width:190px!important;
    height:190px!important;
    align-self:center;
  }

  .seal{
    width:100%!important;
    height:100%!important;
    object-fit:contain;
  }

  .brand-division{
    align-self:center;
    padding:0;
    margin-left:-48px;
    display:flex;
    align-items:center;
  }

  .brand-division-name{
    font-size:4rem;
    line-height:1;
  }

  .streamers-access{
    width:122px;
    height:122px;
    justify-self:end;
    align-self:center;
    display:block;
    border-radius:50%;
    text-decoration:none;
    line-height:0;
    filter:drop-shadow(0 5px 7px rgba(0,0,0,.16));
    transition:transform .18s ease, filter .18s ease;
  }

  .streamers-access img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  .streamers-access:hover{
    transform:translateY(-3px) scale(1.02);
    filter:
      drop-shadow(0 0 8px rgba(182,138,56,.22))
      drop-shadow(0 7px 10px rgba(0,0,0,.18));
  }

  .streamers-access:focus-visible{
    outline:2px solid #f7f1e6;
    outline-offset:4px;
  }

  /* Retire old text-nav styling if cached markup survives anywhere. */
  .nav,
  .member{
    display:none!important;
  }
}

@media (max-width:900px){
  .mast{
    grid-template-columns:88px 1fr 82px;
    gap:10px;
    align-items:center;
  }

  .seal-link{
    width:84px;
    height:84px;
  }

  .brand-division{
    margin-left:0;
    padding:0;
  }

  .brand-division-name{
    font-size:clamp(2.1rem,6.5vw,3rem);
  }

  .streamers-access{
    width:76px;
    height:76px;
    justify-self:end;
    display:block;
    border-radius:50%;
    line-height:0;
  }

  .streamers-access img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .nav,
  .member{
    display:none!important;
  }
}

@media (max-width:560px){
  .mast{
    grid-template-columns:66px 1fr 58px;
    gap:8px;
  }

  .seal-link{
    width:62px;
    height:62px;
  }

  .brand-division-name{
    font-size:1.9rem;
  }

  .streamers-access{
    width:54px;
    height:54px;
  }
}


/* ==========================================================
   DOOR CARD REFINEMENT
   Preserve photo proportions, art-direct crops, and align CTAs.
   ========================================================== */

/* Cards stretch to equal height across the row. */
.doors{
  align-items:stretch;
}

.door{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Fixed visual window: image frame may resize, photo never distorts. */
.door > img{
  width:100%;
  height:220px;
  object-fit:cover;
  flex:0 0 220px;
}

/* Individual art direction for each door image. */
#shows > img{
  object-position:55% center;
}

#connections > img{
  object-position:center 42%;
}

#associates > img{
  object-position:58% center;
}

/* Make the copy area fill remaining card height so CTAs align. */
.door > div{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.door > div > a{
  margin-top:auto;
  padding-top:16px;
}

/* Normal laptop / narrower desktop */
@media (max-width:1100px) and (min-width:901px){
  .door > img{
    height:185px;
    flex-basis:185px;
  }
}

/* Once cards stack, give photography room again. */
@media (max-width:900px){
  .door > img{
    height:240px;
    flex-basis:240px;
  }
}

/* Phones */
@media (max-width:560px){
  .door > img{
    height:210px;
    flex-basis:210px;
  }
}


/* ==========================================================
   DOOR CARD FINAL CROP CLEANUP
   Shorter image windows + no distortion.
   ========================================================== */

.door > img{
  width:100%;
  height:188px;
  flex-basis:188px;
  object-fit:cover;
}

/* Art-directed crops */
#shows > img{
  object-position:55% 46%;
}

#connections > img{
  object-position:center 44%;
}

#associates > img{
  object-position:58% 46%;
}

@media (max-width:1100px) and (min-width:901px){
  .door > img{
    height:172px;
    flex-basis:172px;
  }
}

@media (max-width:900px){
  .door > img{
    height:230px;
    flex-basis:230px;
  }
}

@media (max-width:560px){
  .door > img{
    height:205px;
    flex-basis:205px;
  }
}