/* the mission pull-quote sits on velvet and needs a little more air */
.mission{text-align:center;}
.mission .quote{margin-bottom:clamp(1.6rem,3.4vh,2.4rem);}
.mission__text{
  margin-inline:auto;max-width:66ch;
  font-size:clamp(.96rem,.5vw + .86rem,1.08rem);color:var(--cream);
}
/* The rendered prop shot. Its baked-in ground is --velvet-dark, matching the
   #beyond section exactly, so the JPEG's edges dissolve into the page. */
.propshot{
  margin:0;background:var(--black);   /* must match the rendered JPEG's ground */
  transition:transform .9s var(--ease);
}
.propshot img{width:100%;height:auto;}
/* `html.mo .split:hover` — the extra qualifier is load-bearing. `.propshot`
   also carries `.rv`, and motion.css settles that with
   `html.mo .rv.is-in{transform:none}` at (0,3,1), which outranks a plain
   `.split:hover .propshot` at (0,3,0). This hover had been dead ever since the
   motion layer landed. */
html.mo .split:hover .propshot,
html.mo .split:focus-within .propshot{transform:translateY(-5px) scale(1.012);}
html:not(.mo) .split:hover .propshot{transform:translateY(-5px) scale(1.012);}
@media (prefers-reduced-motion:reduce){ .split:hover .propshot{transform:none;} }

/* ==========================================================================
   TOUR STOP PLAQUES  (.stopc)  — the cards inside the pinned #tour track
   --------------------------------------------------------------------------
   Portrait plaques rather than generic panels: an engraved gold ordinal at the
   top, the city set large in Playfair, and the status pushed to the foot so
   every card reads on one baseline no matter how long the venue name runs.
   Only the visual treatment lives here — the pin/track mechanics in base.css
   are untouched, so the scroll animation behaves exactly as before.
   ========================================================================== */
.pin__track > .stopc{flex:0 0 clamp(268px,22.5vw,338px);}
.stopc{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:clamp(340px,44vh,430px);
  padding:clamp(1.5rem,2vw,2.05rem);
  border:1px solid var(--line-quiet);
  border-radius:var(--r-md);
  /* BLACK wash: #tour is flat #7A1E22 now, so a velvet tint would vanish. */
  /* SOLID black, not a black wash. A wash over the #7A1E22 ground composited
     to #66191d-#6e1b1f (measured by raster) - exactly the family of red
     variations the client asked to remove. A panel on this ground has to be
     one of the two scheme colours, and #7A1E22 on #7A1E22 is invisible. */
  background:var(--black);
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease);
}
/* the hover wash — a second gradient faded in underneath the content */
.stopc::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:0;
  background:linear-gradient(168deg,rgba(216,190,134,.15) 0%,rgba(216,190,134,.04) 58%,rgba(216,190,134,0) 100%);
  transition:opacity .6s var(--ease);
}
/* a gold hairline seated on the top edge, drawn in from the left on hover */
.stopc::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold) 42%,rgba(185,154,91,0));
  transform:scaleX(.22);transform-origin:left;
  transition:transform .7s var(--ease);
}
.stopc:hover,
.stopc:focus-within{
  border-color:var(--line-strong);
  transform:translateY(-6px);
  box-shadow:0 38px 64px -38px rgba(11,7,9,.95);
}
.stopc:hover::before,.stopc:focus-within::before{opacity:1;}
.stopc:hover::after,.stopc:focus-within::after{transform:scaleX(1);}

/* ---- head: ordinal + hairline + date ------------------------------------ */
.stopc__ord{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--pf);font-size:1.02rem;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.stopc__ord::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(185,154,91,.42),rgba(185,154,91,0));
}
.stopc__date{
  display:block;margin-top:clamp(1.5rem,3vh,2.1rem);
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(216,190,134,.86);
}

/* ---- city + venue -------------------------------------------------------- */
.stopc__city{
  margin:.6rem 0 0;
  font-family:var(--pf);font-weight:400;
  font-size:clamp(1.5rem,1.5vw + 1rem,2rem);line-height:1.06;
  letter-spacing:-.01em;color:var(--cream);
}
.stopc__state{
  display:block;margin-top:.5rem;
  font-family:var(--ms);font-weight:500;
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(185,154,91,.9);
}
.stopc__venue{
  margin:clamp(.9rem,2vh,1.25rem) 0 0;
  font-size:.85rem;line-height:1.55;color:var(--cream);
}
.stopc__venue b{display:block;margin-top:.3rem;font-weight:400;color:var(--gold-lt);letter-spacing:.02em;}

/* ---- foot: status, pinned to the bottom edge ----------------------------- */
.stopc__foot{
  margin-top:auto;padding-top:clamp(1.1rem,2.4vh,1.5rem);
  border-top:1px solid var(--line-quiet);
}

/* ---- the Finals plaque closes the track and earns the gold treatment ----- */
.stopc--finals{
  border-color:var(--line-strong);
  background:var(--black);
}
.stopc--finals::after{transform:scaleX(1);}
.stopc--finals .stopc__ord,
.stopc--finals .stopc__date{color:var(--gold-lt);}
/* the real ABA monogram, masked in as a faint watermark behind the type */
.stopc__mark{
  position:absolute;z-index:-1;right:-14%;bottom:-8%;
  width:62%;aspect-ratio:1;
  background:rgba(216,190,134,.10);
  -webkit-mask:var(--mono) center/contain no-repeat;
          mask:var(--mono) center/contain no-repeat;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .stopc:hover,.stopc:focus-within{transform:none;}
}

/* the three opportunity panels overlap the band above them slightly */
.opps__grid{margin-top:clamp(2.4rem,5vh,3.6rem);}
/* ---- photograph at the head of a division card -------------------------- */
/* .div carries its own padding, so the picture is pulled full-bleed with
   negative margins equal to it; the card's overflow:hidden and border-radius
   then clip the top corners for free. 2/1 keeps the card from becoming a
   photograph with a caption. */
.div__pic{
  position:relative;
  margin:calc(-1 * clamp(1.9rem,3vw,3rem)) calc(-1 * clamp(1.9rem,3vw,3rem))
         clamp(1.5rem,3vh,2.1rem);
  overflow:hidden;line-height:0;
}
.div__pic img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;}
/* A LIGHT bottom fade, only enough to seat the photograph in the card. The
   first version ran to 94% black, which against a red velvet card read as a
   black bar with a hard top edge — and it was solving a problem that does not
   exist, since the tier chip sits BELOW the photograph, not over it. */
.div__pic::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(180deg,rgba(11,7,9,0) 0%,rgba(11,7,9,.34) 100%);
}

/* ---- the 3D gallery ----------------------------------------------------- */
/* FOUR figures, because four divides cleanly into 4 / 2 / 1 columns and so
   never strands a single figure on a row of its own. Five did, at every mid
   breakpoint. */
.gal__grid{
  --gal-lift:clamp(1.2rem,3vw,2.4rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.8rem,1.5vw,1.4rem);
  align-items:start;
  /* the two lifted figures rise out of the row, so the row reserves that much
     room at the bottom and the section below is never crowded */
  padding-bottom:var(--gal-lift);
}
/* Every figure is the same box on the same plane — the composition is the
   alternating Y offset and nothing else, so widths, heights and the gaps
   between them stay identical across all four. */
.gal__fig{
  position:relative;margin:0;
  border:1px solid var(--line);
  background:var(--black);
  overflow:hidden;
}
.gal__fig--lift{transform:translateY(calc(var(--gal-lift) * -1));}
/* the stage carries the lift as top padding so the raised pair clears the
   intro copy above instead of colliding with it */
.gal__stage{padding-top:calc(clamp(2.4rem,5vh,3.6rem) + clamp(1.2rem,3vw,2.4rem));}
@media (max-width:900px){
  .gal__stage{padding-top:clamp(2.4rem,5vh,3.6rem);}
}
/* ---- the hover -----------------------------------------------------------
   TRAP: `transform` on the figure belongs to the pointer tilt (motion.css),
   and a second rule writing it here would silently kill the lean. So the
   hover animates the CHILDREN instead — the image scales, the caption rises,
   and a gold inset frame draws itself on ::before. The tilt's own 5px lift is
   invisible on a 380px photograph; this is what makes the card feel alive.
   -------------------------------------------------------------------------- */
.gal__fig img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  /* held slightly back at rest so the hover has somewhere to go */
  filter:saturate(.9) contrast(1.02) brightness(.82);
  transform:scale(1.001);transform-origin:50% 42%;
  transition:transform 1.05s var(--ease),filter .7s var(--ease);
}
.gal__fig:hover img,
.gal__fig.is-hot img,
.gal__fig:focus-within img{
  transform:scale(1.07);
  filter:saturate(1.02) contrast(1.03) brightness(1);
}

/* a gold hairline frame, inset from the edge, drawn on hover */
.gal__fig::before{
  /* above the caption (z-index 4) so the frame closes as a complete rectangle
     instead of vanishing into the caption's gradient along the bottom edge */
  content:"";position:absolute;z-index:5;pointer-events:none;
  inset:clamp(.5rem,.9vw,.85rem);
  border:1px solid rgba(216,190,134,.55);
  opacity:0;transform:scale(1.035);
  transition:opacity .55s var(--ease),transform .75s var(--ease);
}
.gal__fig:hover::before,
.gal__fig.is-hot::before,
.gal__fig:focus-within::before{opacity:1;transform:scale(1);}

.gal__fig figcaption{
  position:absolute;z-index:4;left:0;right:0;bottom:0;
  padding:clamp(1.8rem,3.2vw,2.6rem) clamp(1rem,1.6vw,1.4rem) clamp(1rem,1.7vw,1.3rem);
  font-size:.7rem;line-height:1.65;letter-spacing:.015em;
  color:var(--cream);
  background:linear-gradient(180deg,rgba(11,7,9,0) 0%,rgba(11,7,9,.74) 46%,rgba(11,7,9,.95) 100%);
  transform:translateY(18%);opacity:.82;
  transition:transform .6s var(--ease),opacity .5s var(--ease);
}
.gal__fig:hover figcaption,
.gal__fig.is-hot figcaption,
.gal__fig:focus-within figcaption{transform:translateY(0);opacity:1;}

/* the shared tilt sheen is tuned for flat velvet panels and disappears over a
   lit photograph — these figures get a stronger wash */
html.mo .gal__fig[data-tilt]::after{
  background:radial-gradient(58% 58% at var(--mx,50%) var(--my,50%),
    rgba(216,190,134,.34) 0%,rgba(185,154,91,.12) 44%,rgba(185,154,91,0) 74%);
}
@media (prefers-reduced-motion:reduce){
  .gal__fig img,.gal__fig figcaption,.gal__fig::before{transition:none;}
  .gal__fig img{transform:none;filter:saturate(.98) contrast(1.02);}
  .gal__fig figcaption{transform:none;opacity:1;}
}
@media (max-width:1180px){
  .gal__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  /* below the 3D breakpoint the lift is switched off in motion.css too, so the
     grid must not keep reserving room for it */
  .gal__grid{--gal-lift:0px;padding-bottom:0;}
  .gal__fig--lift{transform:none;}
}
@media (max-width:620px){
  .gal__grid{grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vw,1.8rem);}
  .gal__fig img{aspect-ratio:16/11;}
}

/* ---- the recognition ladder (#awards) ----------------------------------- */
.awards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,228px),1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
}
.awards__note{
  margin-top:clamp(1.4rem,3vh,2rem);
  font-size:.86rem;color:rgba(216,206,196,.72);max-width:64ch;
}
.awards__more{margin-top:clamp(3.4rem,7vh,5.4rem);}
/* A stacked variant of the panel list - the three-up row is wrong beside a
   portrait photograph, where the column is half the page wide. */
.feat--stack{grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3.4vh,2.4rem);}
.h2--sm{font-size:clamp(1.5rem,2.4vw,2.1rem);}
/* The studio photograph sits above the opportunity panels, full width. */
.opps__art{margin-bottom:clamp(2.4rem,5vh,3.6rem);}
.opps__art img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;}
/* ---- per-slide city backgrounds behind the pinned tour slider ----------- */
/* The layers sit inside .pin__sticky so they fill the viewport for exactly as
   long as the section is pinned. `isolation` keeps their negative z-index from
   escaping behind the section's own #7A1E22, which is what they paint over. */
.pin__sticky{isolation:isolate;}
.pin__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.pin__bgi{
  position:absolute;inset:0;
  background-position:center 42%;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity .9s var(--ease);
  /* These were selected for being DARK, which was right when a heavy scrim sat
     on them. With the scrim gone they need lifting to read as a city. */
  filter:brightness(1.14) saturate(1.05) contrast(1.03);
  /* a slow drift, so a still photograph does not sit dead behind a moving slider */
  transform:scale(1.06);
}
.pin__bgi.is-on{opacity:1;}
/* THE SCRIM. Two jobs: hold the brand colour, and keep every existing card and
   line of type exactly as readable as it was on the flat velvet. The velvet
   layer is what stops the section becoming "a photo section"; the vertical
   black gradient is what protects the type. Nothing above it was changed. */
.pin__scrim{
  position:absolute;inset:0;
  /* Almost nothing. This only seats the photograph where it meets the nav and
     grounds it at the foot. All of the readability is bought LOCALLY, behind
     the text block only — see .pin__sticky > .shell::before. Two earlier
     attempts bracketed this: a .42 velvet blanket (the client: the city is not
     properly visible) and no overlay at all (the type sat on 176,169,169 and
     was unreadable). Neither is necessary; a photograph only has to be dimmed
     where words are actually written on it. */
  background:
    linear-gradient(180deg,
      rgba(11,7,9,.55) 0%,
      rgba(11,7,9,.22) 12%,
      rgba(11,7,9,0)   26%,
      rgba(11,7,9,0)   74%,
      rgba(11,7,9,.30) 100%),
    rgba(122,30,34,.08);
}

/* THE LOCAL BACKDROP — the whole point of this arrangement.
   A soft oval of darkness sitting behind the header block only, fading out
   well before the cards. The photograph stays at full brightness everywhere
   else: across the card row, in the gaps between cards, and through the whole
   bottom third, which is most of what the visitor actually sees of it. */
.pin__sticky > .shell{position:relative;z-index:1;}
.pin__sticky > .shell::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* The horizontal bleed is `--gutter`, NOT a vw figure. `-7vw` reached past
     the viewport edge at narrow widths and, because the pinned wrapper drops
     its `overflow:hidden` below 1024px, that escaped as real horizontal page
     overflow on six of the nine test viewports. The gutter is exactly the
     distance from the shell to the viewport edge, so it can never exceed it. */
  inset:calc(-1 * clamp(2rem,5vh,3.4rem)) calc(-1 * var(--gutter))
        calc(-1 * clamp(1.4rem,3vh,2.2rem));
  background:radial-gradient(118% 150% at 46% 40%,
    rgba(11,7,9,.93) 0%,rgba(11,7,9,.84) 44%,
    rgba(11,7,9,.42) 74%,rgba(11,7,9,0) 100%);
}

/* THE TYPE CARRIES ITS OWN CONTRAST.
   Over a bright photograph the honest fix is a shadow on the glyphs, not a
   veil over the picture: it guarantees local contrast around every letter
   whatever happens to be behind it, and it costs the image nothing. The
   typeface, size, weight, colour and spacing are all untouched — this adds a
   shadow and nothing else. Two layers: a tight offset that separates the
   letterform from the pixel next to it, and a wide soft halo that lifts it off
   a busy background. */
.pin__sticky .shead .eyebrow,
.pin__sticky .shead .h2,
.pin__sticky .shead .body,
.pin__sticky .shead .tlink,
.pin__sticky .pin__hint{
  /* Lighter than it was: the local backdrop now does the work, and this is
     just insurance for a bright detail landing under a thin letterform. */
  text-shadow:0 1px 2px rgba(11,7,9,.8),0 0 14px rgba(11,7,9,.55);
}
/* The gold arrow glyphs in those links are SVG strokes, so a text-shadow does
   not reach them. */
.pin__sticky .shead .tlink svg,
.pin__sticky .pin__hint svg{filter:drop-shadow(0 1px 3px rgba(11,7,9,.95));}
@media (prefers-reduced-motion:reduce){
  .pin__bgi{transition:none;transform:none;}
}