/* Madison Avenue: progressively enhanced, with the original photograph as fallback. */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
a { color:inherit; }
a:focus-visible { outline:1px solid var(--paper); outline-offset:7px; }
.footer { position:relative; }
.scroll-invitation {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-decoration:none;
  color:var(--paper);
  padding:8px 0;
  white-space:nowrap;
}
.scroll-invitation span { display:inline-block; margin-left:13px; }
.madison { position:relative; background:var(--ink); }
.scene {
  position:relative;
  height:100svh;
  min-height:560px;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
}
.scene-frame, .scene-still, .scene-layers, .street-drift, .scene-street,
.scene-shade, .subject-drift, .scene-subject, .scene-vignette {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.scene-still, .scene-street { object-fit:cover; object-position:center; }
.scene-layers { visibility:hidden; }
.scene-shade { background:linear-gradient(120deg,rgba(38,27,16,.22),rgba(9,15,18,.18) 55%,rgba(27,20,13,.3)); }
.scene-type {
  position:absolute;
  top:22%;
  left:0;
  width:100%;
  color:var(--paper);
  font-family:Campaign,Georgia,serif;
  font-size:var(--display-size,min(17vw,28svh));
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.77;
}
.scene-type>span { display:block; white-space:nowrap; }
.word-window { display:inline-block; overflow:hidden; padding:.1em .025em .11em; margin:-.1em -.025em -.11em; vertical-align:top; }
.word-ink { display:inline-block; }
.word-ink, .scene-caption em {
  color:#e9d6b3;
  background:linear-gradient(110deg,#aa8655 0%,#e9d8b9 18%,#fff7e7 36%,#c49c64 49%,#f2e7d2 65%,#ba945e 83%,#eee1c8 100%);
  background-size:220% 100%;
  background-position:100% 50%;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.world-line { padding-left:3vw; }
.moves-line { margin-top:.08em; padding-left:18vw; }
.scene-vignette {
  pointer-events:none;
  background:linear-gradient(180deg,rgba(9,13,14,.58),transparent 24%,transparent 58%,rgba(9,13,14,.72));
}
.scene-bar, .scene-bottom {
  position:absolute;
  left:42px;
  right:42px;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:9px;
  text-shadow:0 1px 12px #000;
}
.scene-bar { top:30px; border-top:1px solid rgba(232,226,213,.3); padding-top:17px; }
.scene-divider { color:var(--muted); padding:0 12px; }
.skip-scene { padding:8px 0 8px 12px; text-decoration:none; }
.skip-scene span { margin-left:12px; }
.scene-caption { position:absolute; z-index:3; bottom:14%; left:5%; }
.scene-caption>.metadata { font-size:8px; letter-spacing:.22em; }
.scene-caption>.metadata:before { content:''; display:inline-block; width:28px; height:1px; background:#c6a576; margin:0 12px 3px 0; }
.caption-mobile { display:none; }
.scene-caption p {
  font-family:Campaign,Georgia,serif;
  font-size:clamp(58px,6.4vw,106px);
  font-weight:500;
  line-height:.87;
  letter-spacing:-.045em;
  margin:19px 0 0;
}
.scene-caption em { font-weight:500; }
.scene-editorial {
  position:absolute;
  z-index:3;
  right:5%;
  bottom:14%;
  width:min(330px,25.5%);
  border-top:1px solid rgba(218,190,144,.48);
  padding-top:17px;
}
.editorial-label { display:block; font-size:7px; letter-spacing:.17em; color:#d6ba8f; white-space:nowrap; }
.editorial-label>span { font-size:13px; margin-right:10px; vertical-align:-1px; }
.editorial-copy { font-family:Campaign,Georgia,serif; font-size:clamp(21px,1.8vw,28px); font-weight:500; line-height:1.16; margin:18px 0 0; color:#e9e0cf; }
.editorial-line { display:block; }
.scene-bottom { bottom:33px; font-size:8px; }
.scene-scroll-label span { margin-left:12px; }
.scene-scroll-label, .scene-progress, .skip-scene { visibility:hidden; }
.scene-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(232,226,213,.16); }
.scene-progress span { display:block; width:100%; height:100%; background:var(--paper); transform:scaleX(0); transform-origin:left; }
.madison.is-animated { height:260svh; }
.is-animated .scene { position:sticky; top:0; }
.is-animated .scene-still { visibility:hidden; }
.is-animated .scene-layers, .is-animated .scene-scroll-label,
.is-animated .scene-progress, .is-animated .skip-scene { visibility:visible; }
.is-animated .scene-frame { will-change:clip-path; }
.is-animated .scene-street, .is-animated .scene-subject { will-change:transform; }
.campaign-close {
  min-height:42svh;
  padding:75px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:28px;
  background:radial-gradient(ellipse at 50% 100%,#302c24,var(--ink) 70%);
  border-top:1px solid rgba(218,190,144,.2);
}
.campaign-close em, h1 .the-don { color:#d5b88a; }
.campaign-close a, .skip-scene { transition:color .25s ease; }
.campaign-close a:hover, .skip-scene:hover { color:#e3c48f; }
.campaign-close>.metadata { color:var(--muted); font-size:8px; }
.campaign-close p { margin:0; font-family:Campaign,Georgia,serif; font-size:clamp(34px,4.8vw,72px); letter-spacing:-.03em; line-height:1; }
.campaign-close a { text-decoration:none; padding:12px; }
.campaign-close a span { margin-left:10px; }
@media (max-width:760px) {
  .scroll-invitation { bottom:30px; font-size:7px; }
  .scene { min-height:560px; }
  .madison.is-animated { height:210svh; }
  .scene-bar, .scene-bottom { left:22px; right:22px; font-size:7px; }
  .scene-bar { top:23px; padding-top:12px; }
  .scene-divider { padding:0 6px; }
  .skip-scene span { margin-left:4px; }
  .scene-type, .caption-desktop { display:none; }
  .scene-editorial { display:none; }
  .caption-mobile { display:inline; }
  .scene-caption { bottom:13%; left:22px; }
  .scene-caption>.metadata { font-size:7px; }
  .scene-caption p { font-size:58px; margin-top:12px; }
  .scene-bottom { bottom:24px; }
  .scene-bottom>span:first-child { max-width:150px; line-height:1.7; }
  .campaign-close { min-height:38svh; gap:23px; }
}
@media (max-height:560px) {
  .scene { min-height:0; }
  .scene-caption { bottom:15%; }
  .scene-caption p { font-size:48px; }
  .scene-caption>.metadata { display:none; }
}
@media (max-height:640px) { .scene-editorial { display:none; } }
@media (forced-colors:active) {
  .word-ink, .scene-caption em { background:none; -webkit-text-fill-color:CanvasText; color:CanvasText; }
}
@media (prefers-reduced-motion:reduce) {
  .madison.is-animated { height:auto; }
  .is-animated .scene { position:relative; }
  .is-animated .scene-still { visibility:visible; }
  .is-animated .scene-layers, .scene-progress, .scene-scroll-label { visibility:hidden; }
}
