/* One eyebrow contract, and a premium credential wall.
   Loaded last. Earlier files size the eyebrow per section (10px to 17px, .055em to
   .17em, and text-transform:none on the premium.css base); every one of those local
   values is superseded here so the label reads identically wherever it appears. */

/* ------------------------------------------------- 1. The eyebrow, everywhere */
/* Selector list is deliberate: each entry outweighs the one !important rule that
   used to win in that context (.atelier-copy, #membership, .credentials-head). */
html body .eyebrow,
html body .atelier-copy .eyebrow,
html body #membership .atelier-copy>.eyebrow,
html body #membership .plan-atelier .atelier-copy>.eyebrow,
html body .credentials-head .eyebrow,
html body .hero-design-a .eyebrow,
html body .film-live-caption .film-live-eyebrow{
  font-size:12px!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
  font-weight:600!important;
  line-height:1.5;
  font-variant-ligatures:none;
  font-feature-settings:"kern" 1;
}

/* The mark is part of the label, so it scales with it and is never dropped.
   Every eyebrow now carries the same object, the bronze court screen, in place of
   the generic chevron. It is sized from the label's own em, so the panel and the type
   stay in proportion at every step of the scale, and it is tilted on a short
   perspective so the screen reads as a milled bronze part standing next to the words
   rather than a flat glyph. The artwork is 689x375; the box below holds that ratio
   exactly, so the honeycomb is never stretched. */
html body .eyebrow{gap:.85em!important}
html body .eyebrow:before,
html body .atelier-copy .eyebrow:before{
  content:'';
  display:block;
  flex:0 0 auto;
  width:2.33em;height:1.27em;          /* 1.27em x 1.8373 = the source ratio */
  background:url(assets/img/eyebrow-court-mark-96.webp) center/contain no-repeat;
  clip-path:none;                       /* retires the chevron polygon in premium.css */
  opacity:1;
  /* Rotated about a point near the text edge, so the optical gap to the first letter
     holds steady while the far side of the panel falls away. */
  transform:perspective(7em) rotateY(-21deg) rotateX(6deg);
  transform-origin:72% 50%;
  /* drop-shadow reads the artwork's alpha, so the first two passes extrude the bronze
     frame and its cutouts, and the third drops the whole part onto the page. */
  filter:
    drop-shadow(.4px .5px 0 rgba(92,58,28,.55))
    drop-shadow(.9px 1.1px 0 rgba(52,31,14,.42))
    drop-shadow(1.7px 2.3px 2.2px rgba(6,20,16,.3));
}
/* On the pine sections there is no paper to catch a shadow, so the light that lifts
   the part off the ground comes off the bronze itself and the cast goes darker. */
html body .dark .eyebrow:before,
html body .hero .eyebrow:before,
html body .credentials-head .eyebrow:before,
html body .web-inclusion .eyebrow:before,
html body #membership .plan-atelier .atelier-copy>.eyebrow:before{
  filter:
    brightness(1.07)
    drop-shadow(.4px .5px 0 rgba(63,38,17,.6))
    drop-shadow(1px 1.2px 0 rgba(28,16,7,.5))
    drop-shadow(1.8px 2.4px 2.6px rgba(0,0,0,.42));
}
/* film-live-eyebrow is a caption label with no mark; it only borrows the type. */
html body .film-live-caption .film-live-eyebrow{line-height:1.5}

/* One uniform step down on small screens: all eyebrows move together. */
@media(max-width:699px){
  html body .eyebrow,
  html body .atelier-copy .eyebrow,
  html body #membership .atelier-copy>.eyebrow,
  html body #membership .plan-atelier .atelier-copy>.eyebrow,
  html body .credentials-head .eyebrow,
  html body .hero-design-a .eyebrow,
  html body .film-live-caption .film-live-eyebrow{
    font-size:11px!important;
    letter-spacing:.15em!important;
  }
  html body .eyebrow{gap:.8em!important}
  /* Sizes are em-based, so the screen has already stepped down with the type; only
     the tilt eases off, because a 14px panel cannot carry 21 degrees of it. */
  html body .eyebrow:before,
  html body .atelier-copy .eyebrow:before{
    transform:perspective(6.4em) rotateY(-17deg) rotateX(5deg);
    filter:
      drop-shadow(.4px .5px 0 rgba(92,58,28,.5))
      drop-shadow(.8px 1px 0 rgba(52,31,14,.4))
      drop-shadow(1.3px 1.8px 1.8px rgba(6,20,16,.28));
  }
  html body .dark .eyebrow:before,
  html body .hero .eyebrow:before,
  html body .credentials-head .eyebrow:before,
  html body .web-inclusion .eyebrow:before,
  html body #membership .plan-atelier .atelier-copy>.eyebrow:before{
    filter:
      brightness(1.07)
      drop-shadow(.4px .5px 0 rgba(63,38,17,.58))
      drop-shadow(.9px 1.1px 0 rgba(28,16,7,.48))
      drop-shadow(1.4px 1.9px 2.1px rgba(0,0,0,.4));
  }
}

/* ------------------------------------------- 2. Credentials: the credential wall */
/* Lifted out of the paper section into a dark inset panel, matching the pine
   brand-work cards directly above it, so the names carry weight. */
html body .credentials-block{
  position:relative;
  isolation:isolate;
  margin-top:78px;
  padding:clamp(34px,4.3vw,60px) clamp(24px,3.3vw,52px) clamp(30px,3.5vw,48px);
  border-top:0;
  overflow:hidden;
  color:var(--white);
  background:
    radial-gradient(130% 150% at 8% -10%,rgba(213,175,89,.13) 0%,rgba(213,175,89,0) 52%),
    linear-gradient(174deg,var(--pine) 0%,var(--deep) 64%);
}
/* Gold rule across the top edge, fading out like a foil stamp. */
html body .credentials-block::before{
  content:"";
  position:absolute;inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(213,175,89,.5) 34%,rgba(213,175,89,.04) 72%);
}
/* Ledger hairlines: texture at reading distance, invisible at a glance. */
html body .credentials-block::after{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background-image:repeating-linear-gradient(90deg,rgba(230,237,225,.045) 0 1px,transparent 1px 92px);
  pointer-events:none;
}

html body .credentials-head{gap:16px 56px}
html body .credentials-head .eyebrow{color:var(--gold);margin-bottom:6px}
html body .credentials-head h3{
  color:var(--white);
  font-size:clamp(29px,3.2vw,48px);
  letter-spacing:-.038em;
}
html body .credentials-intro{color:var(--muted-dark)}

html body .credentials-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:clamp(34px,3.6vw,52px);
}
/* Columns are divided by a shared hairline rather than boxed cards. */
html body .credentials-group{
  padding:22px 26px 4px 0;
  border-top:1px solid rgba(230,237,225,.17);
}
html body .credentials-group+.credentials-group{
  padding-left:26px;
  border-left:1px solid rgba(230,237,225,.11);
}
html body .credentials-group::before{width:38px;height:2px;background:var(--gold)}
html body .credentials-group dt{
  color:rgba(213,175,89,.86);
  font-size:11px;
  letter-spacing:.17em;
  line-height:1.45;
}
html body .credentials-group dd{margin-top:15px}
/* Each name is its own ruled line with the brand chevron as its marker. */
html body .credentials-group dd span{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding:12px 0;
  border-top:1px solid rgba(230,237,225,.1);
  color:var(--white);
  font-size:16px;
  font-weight:550;
  letter-spacing:-.012em;
  line-height:1.3;
}
html body .credentials-group dd span:first-child{border-top:0;padding-top:2px}
html body .credentials-group dd span::before{
  content:"";
  flex:0 0 7px;
  width:7px;height:9px;
  background:var(--gold);
  clip-path:polygon(0 0,58% 0,58% 48%,100% 22%,100% 73%,0 100%);
  opacity:.75;
  transform:translateY(-1px);
}

html body .credentials-note{
  margin-top:clamp(30px,3vw,42px);
  padding-top:18px;
  border-top:1px solid rgba(230,237,225,.14);
  color:rgba(179,198,187,.82);
  font-size:11px;
  line-height:1.72;
}

@media(max-width:1199px){
  html body .credentials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .credentials-group{padding-right:22px}
  /* Reset the four-across rules, then re-draw them for a two-across grid. */
  html body .credentials-group+.credentials-group{padding-left:0;border-left:0}
  html body .credentials-group:nth-child(2n){padding-left:26px;border-left:1px solid rgba(230,237,225,.11)}
  html body .credentials-group:nth-child(n+3){margin-top:30px}
}
@media(max-width:1079px){
  html body .credentials-block{margin-top:60px}
}
@media(max-width:699px){
  html body .credentials-block{
    margin-top:46px;
    padding:28px 20px 26px;
  }
  html body .credentials-grid{grid-template-columns:1fr;margin-top:30px}
  html body .credentials-group{padding:20px 0 2px}
  html body .credentials-group:nth-child(2n){padding-left:0;border-left:0}
  html body .credentials-group:nth-child(n+2){margin-top:22px}
  html body .credentials-group dd span{font-size:15px;padding:11px 0}
  html body .credentials-block::after{background-image:none}
}

/* Printed, the panel returns to ink on paper. */
@media print{
  /* The screen prints as flat artwork: perspective and cast shadows only muddy it
     at press resolution. */
  html body .eyebrow:before,
  html body .atelier-copy .eyebrow:before,
  html body .dark .eyebrow:before,
  html body .hero .eyebrow:before,
  html body .credentials-head .eyebrow:before,
  html body .web-inclusion .eyebrow:before,
  html body #membership .plan-atelier .atelier-copy>.eyebrow:before{
    transform:none;
    filter:none;
  }
  html body .credentials-block{
    background:none!important;
    color:#112f26!important;
    padding:24px 0 0;
    border-top:1px solid rgba(24,51,40,.19);
  }
  html body .credentials-block::before,
  html body .credentials-block::after{display:none}
  html body .credentials-head h3,
  html body .credentials-group dd span{color:#112f26!important}
  html body .credentials-group,
  html body .credentials-group dd span{border-color:rgba(24,51,40,.19)!important}
  html body .credentials-group+.credentials-group{border-left-color:rgba(24,51,40,.19)!important}
}