:root {
  color-scheme: dark;
  --purple: #2c006d;
  --white: #f5f4ee;
  --gutter: clamp(22px, 4.2vw, 88px);
  --header: 76px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
}
body {
  margin: 0;
  color: var(--white);
  background: #030204;
  font-family: 'custom_148379', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
p,
h1,
h2,
figure {
  margin: 0;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
}
button {
  border: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px;
  background: white;
  color: black;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
.portfolio-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--header);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: linear-gradient(#09030dbb, #09030d00);
  font-family: 'custom_146852', Arial, sans-serif;
}
.signature {
  display: inline-flex;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
}
.signature img {
  width: 46px;
  filter: brightness(0) invert(1);
}
.header-project {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.burger {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
}
.burger img {
  width: 31px;
}
.yahoo-intro {
  position: relative;
  min-height: 620px;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header) var(--gutter);
  background: var(--purple);
  overflow: clip;
}
.yahoo-intro h1 {
  width: min(76vw, 1100px);
  font-size: 0;
}
.campaign-logo {
  width: 100%;
}
.intro-caption {
  margin-top: 44px;
  font-size: 12px;
  letter-spacing: 0.035em;
}
.scroll-cue {
  position: absolute;
  bottom: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.scroll-cue > span:last-child {
  font-size: 22px;
}
.case-board {
  position: relative;
  background: #030204;
  padding-top: 40px;
}
.section-rail {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--gutter) 24px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.board-display {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  text-align: center;
}
.concept-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  max-width: 1480px;
  margin-inline: auto;
  padding: 100px var(--gutter) 120px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}
.concept-copy h2 {
  margin-top: 22px;
  font-size: clamp(30px, 3.8vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.concept-copy > div:last-child {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.55;
  color: #d4ccdd;
}
.concept-copy p + p {
  margin-top: 20px;
}

/* Static flow is also the complete fallback for no JS, reduced motion and short screens. */
.capsule-story {
  position: relative;
  background: #030204;
}
.capsule-stage {
  position: relative;
  isolation: isolate;
}
.capsule-visual {
  position: relative;
  width: 100%;
  height: min(75vw, 90svh);
  overflow: hidden;
  background: #030204;
}
.capsule-visual img,
.capsule-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.capsule-canvas {
  display: none;
}
.capsule-canvas {
  opacity: 0;
}
.capsule-canvas[data-frame] {
  opacity: 1;
}
.capsule-shade {
  display: none;
}
.capsule-invitation {
  position: absolute;
  top: 30px;
  width: 100%;
  text-align: center;
}
.capsule-invitation h2 {
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.03em;
  margin-top: 12px;
}
.capsule-invitation > p:last-child {
  font-size: 12px;
  margin-top: 18px;
  color: #d4ccdd;
}
.phase {
  position: relative;
  padding: 80px var(--gutter);
  background: radial-gradient(ellipse at 50% 100%, #4e0b6d66, transparent 70%);
}
.phase-heading {
  text-align: center;
  margin-bottom: 32px;
}
.phase-heading h2 {
  margin-top: 10px;
  font-size: clamp(28px, 3.2vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.phase-heading .eyebrow {
  color: #d3b6e6;
}
.phase-content {
  max-width: 1360px;
  margin-inline: auto;
}
.phase-copy {
  font-size: clamp(14px, 1.12vw, 18px);
  line-height: 1.5;
}
.phase-copy > p + p {
  margin-top: 18px;
}
.phase-copy .phase-lead {
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.phase-content figure > img {
  width: 100%;
  border-radius: 10px;
}
.phase-content figcaption {
  font-size: 10px;
  line-height: 1.4;
  margin-top: 12px;
  color: #d3c2df;
}
.influencer-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  max-width: 880px;
}
.influencer-video {
  position: relative;
  height: min(52svh, 560px);
  aspect-ratio: 9/16;
  justify-self: end;
  max-width: 100%;
}
.influencer-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  background: #1c0c23;
  box-shadow: 0 25px 70px #0007;
}
.video-toggle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 40px;
  background: #11051cd9;
  border: 1px solid #ffffff40;
  font-size: 10px;
}
.influencer-still {
  margin-top: 26px;
  width: 210px;
  max-width: 100%;
}
.film-layout,
.activation-layout {
  display: grid;
  grid-template-columns: 1fr 1.02fr 1fr;
  gap: clamp(25px, 3vw, 55px);
  align-items: center;
}
.film-memory,
.activation-web {
  position: relative;
}
.memory-one {
  transform: rotate(-3deg);
}
.memory-two {
  transform: rotate(3deg);
  padding-bottom: 18%;
}
.phase-content .memory-inset {
  position: relative;
  width: 72%;
  margin: -8% -3% 0 auto;
  transform: rotate(-6deg);
  border: 3px solid #170720;
  box-shadow: 0 12px 30px #0005;
}
.activation-billboard {
  transform: rotate(-3deg);
}
.activation-web {
  transform: rotate(3deg);
  padding-bottom: 8%;
}
.capsule-outro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 85svh;
  background: var(--purple);
  text-align: center;
  padding: 60px var(--gutter);
}
.capsule-outro .campaign-logo {
  width: min(76vw, 1000px);
  margin-block: 50px;
}
.outro-credits {
  font-size: 12px;
  line-height: 1.6;
}
.phase-navigation,
.story-skip {
  display: none;
}

/* One contained stage: layers cannot leak into the case board or the footer. */
.yahoo-enhanced .capsule-story {
  height: 900svh;
}
.yahoo-enhanced .capsule-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.yahoo-enhanced .capsule-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.yahoo-enhanced .capsule-canvas {
  display: block;
}
.yahoo-enhanced .capsule-shade {
  display: block;
  position: absolute;
  inset: 0;
  opacity: var(--shade, 0);
  background: linear-gradient(180deg, #08000c55 10%, #0d001ebd 30%, #16051a99 65%, transparent 90%);
  pointer-events: none;
}
.yahoo-enhanced .capsule-invitation {
  top: calc(var(--header) + 35px);
  z-index: 1;
}
.yahoo-enhanced .phase {
  position: absolute;
  inset: calc(var(--header) + 20px) var(--gutter) 17%;
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 100%;
}
.yahoo-enhanced .phase-heading {
  flex: 0 0 auto;
  margin-bottom: clamp(24px, 4vh, 48px);
}
.yahoo-enhanced .phase-content {
  width: 100%;
}
.yahoo-enhanced .phase-copy {
  text-shadow: 0 2px 20px #150422;
}
.yahoo-enhanced .phase-copy {
  position: relative;
  isolation: isolate;
}
.yahoo-enhanced .phase-copy::before {
  content: '';
  position: absolute;
  inset: -14px -12px;
  z-index: -1;
  border-radius: 10px;
  background: linear-gradient(135deg, #210733c9, #210733a8);
}
.yahoo-enhanced .capsule-outro {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding-top: var(--header);
  opacity: 0;
  visibility: hidden;
}
.yahoo-enhanced .phase-navigation {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: 26px;
  display: flex;
  gap: 30px;
}
.yahoo-enhanced .capsule-stage::after {
  content: '';
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, #030204ed);
  pointer-events: none;
}
.phase-navigation a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  width: 134px;
  min-height: 44px;
  font-size: 11px;
  color: #c8b8d3;
}
.phase-navigation a > span:first-child {
  font-size: 9px;
}
.phase-navigation i {
  grid-column: 1/-1;
  display: block;
  height: 1px;
  width: 100%;
  background: #ffffff30;
  position: relative;
}
.phase-navigation i::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: white;
}
.phase-navigation a[aria-current='step'] {
  color: white;
}
.yahoo-enhanced .story-skip {
  display: block;
  position: absolute;
  right: var(--gutter);
  bottom: 38px;
  font-size: 10px;
  color: #ddd2e2;
  z-index: 4;
}

.portfolio-footer {
  font-family: 'custom_146852', Arial, sans-serif;
  padding: 65px var(--gutter) 28px;
  background: #0c0d10;
  color: #f5f4ee;
}
.footer-top {
  display: flex;
  gap: 70px;
  margin-bottom: 70px;
  align-items: start;
}
.footer-top p + p {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 16px;
}
.footer-top > a:last-child {
  margin-left: auto;
  border-bottom: 1px solid #ffffff80;
  padding-bottom: 14px;
  font-size: 14px;
}
.project-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-block: 1px solid #ffffff40;
  padding-block: 42px;
}
.project-link p {
  margin-top: 24px;
  font-size: clamp(38px, 6.5vw, 110px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.05em;
}
.project-link > span {
  font-size: 70px;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.project-link[rel='prev']:hover > span {
  transform: translate(-6px, -6px);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-top: 28px;
  font-size: 10px;
  line-height: 1.5;
}

@media (min-width: 1600px) {
  .yahoo-enhanced .phase-content {
    max-width: 1480px;
  }
  .yahoo-enhanced .influencer-layout {
    max-width: 980px;
  }
}
@media (max-width: 1100px) {
  .film-layout,
  .activation-layout {
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 24px;
  }
  .phase-copy {
    font-size: 14px;
  }
  .phase-copy .phase-lead {
    font-size: 23px;
  }
  .phase-copy > p + p {
    margin-top: 12px;
  }
}
@media (max-width: 900px) {
  :root {
    --header: 64px;
  }
  .signature img {
    width: 37px;
  }
  .header-project {
    font-size: 8px;
    letter-spacing: 0.03em;
  }
  .portfolio-header {
    gap: 16px;
  }
  .yahoo-intro {
    min-height: 460px;
  }
  .yahoo-intro h1 {
    width: 90vw;
  }
  .intro-caption {
    font-size: 10px;
    margin-top: 30px;
  }
  .scroll-cue {
    bottom: 30px;
  }
  .section-rail {
    font-size: 8px;
    gap: 10px;
  }
  .case-board {
    padding-top: 28px;
  }
  .concept-copy {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 60px;
    padding-bottom: 70px;
  }
  .concept-copy h2 {
    font-size: 36px;
  }
  .concept-copy > div:last-child {
    font-size: 15px;
  }
  .phase {
    padding-block: 55px;
  }
  .phase-heading h2 {
    font-size: clamp(26px, 7vw, 34px);
    margin-top: 9px;
  }
  .phase-heading .eyebrow {
    font-size: 9px;
  }
  .influencer-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 22px;
  }
  .influencer-video {
    width: 100%;
    height: auto;
  }
  .phase-copy {
    font-size: 13px;
    line-height: 1.4;
  }
  .phase-copy .phase-lead {
    font-size: 20px;
    margin-bottom: 16px;
  }
  .influencer-still {
    margin-top: 18px;
  }
  .influencer-still figcaption {
    font-size: 8px;
  }
  .video-toggle {
    right: 8px;
    bottom: 8px;
    padding: 6px 10px;
    font-size: 9px;
    gap: 6px;
  }
  .film-layout,
  .activation-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }
  .film-layout .phase-copy,
  .activation-layout .phase-copy {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .film-layout .phase-lead,
  .activation-layout .phase-lead {
    font-size: 21px;
    margin-bottom: 12px;
  }
  .film-layout .phase-lead br,
  .activation-layout .phase-lead br {
    display: none;
  }
  .film-memory,
  .activation-billboard,
  .activation-web {
    align-self: start;
  }
  .phase-content figcaption {
    font-size: 8px;
    margin-top: 8px;
  }
  .phase-content .memory-inset {
    width: 64%;
    margin-top: -16%;
  }
  .phase-content figure > img {
    border-radius: 6px;
  }
  .memory-two,
  .activation-web {
    padding-bottom: 0;
  }
  .yahoo-enhanced .capsule-story {
    height: 940svh;
  }
  .yahoo-enhanced .phase {
    inset: calc(var(--header) + 20px) var(--gutter) 20%;
  }
  .yahoo-enhanced .phase-heading {
    margin-bottom: 28px;
  }
  .yahoo-enhanced .capsule-visual {
    width: 100%;
  }
  .yahoo-enhanced .phase-navigation {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 23px;
    gap: 18px;
  }
  .phase-navigation a {
    width: auto;
    flex: 1;
    gap: 8px;
    font-size: 9px;
  }
  .yahoo-enhanced .story-skip {
    right: var(--gutter);
    bottom: 85px;
    font-size: 9px;
  }
  .capsule-outro .campaign-logo {
    width: 90vw;
    margin-block: 35px;
  }
  .outro-credits {
    font-size: 11px;
  }
  .capsule-outro > .eyebrow {
    font-size: 10px;
  }
  .portfolio-footer {
    padding-top: 45px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 25px;
    margin-bottom: 45px;
  }
  .footer-top > a:last-child {
    grid-column: 2;
    justify-self: start;
    margin: 0;
    font-size: 13px;
  }
  .footer-top p + p {
    font-size: 12px;
  }
  .footer-top .eyebrow {
    font-size: 10px;
  }
  .project-link {
    padding-block: 28px;
    gap: 15px;
  }
  .project-link .eyebrow {
    font-size: 10px;
  }
  .project-link p {
    font-size: 38px;
    margin-top: 20px;
  }
  .project-link > span {
    font-size: 40px;
  }
  .footer-bottom {
    flex-wrap: wrap;
    font-size: 9px;
  }
  .footer-bottom > span {
    order: 3;
    width: 100%;
    color: #aaa;
  }
}
@media (max-height: 740px) and (max-width: 900px) {
  .yahoo-enhanced .phase {
    inset-block: calc(var(--header) + 8px) 15%;
  }
  .yahoo-enhanced .phase-heading {
    margin-bottom: 18px;
  }
  .phase-heading h2 {
    font-size: 25px;
  }
  .phase-copy {
    font-size: 12px;
    line-height: 1.35;
  }
  .phase-copy .phase-lead {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .phase-copy > p + p {
    margin-top: 10px;
  }
  .film-layout,
  .activation-layout {
    gap: 16px;
  }
  .film-layout > figure,
  .activation-layout > figure {
    max-width: 155px;
  }
  .influencer-still {
    width: 120px;
  }
  .yahoo-enhanced .story-skip {
    bottom: 74px;
  }
  .yahoo-enhanced .phase-navigation {
    bottom: 15px;
  }
}
@media (max-height: 740px) and (min-width: 901px) {
  .yahoo-enhanced .phase {
    inset-block: calc(var(--header) + 5px) 15%;
  }
  .yahoo-enhanced .phase-heading {
    margin-bottom: 20px;
  }
  .phase-heading h2 {
    font-size: 32px;
  }
  .phase-copy {
    font-size: 13px;
  }
  .phase-copy .phase-lead {
    font-size: 21px;
    margin-bottom: 12px;
  }
  .influencer-video {
    height: 44svh;
  }
  .influencer-still {
    width: 140px;
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
  .capsule-visual {
    background: #000;
  }
  .capsule-invitation > p:last-child {
    display: none;
  }
}

.project-link + .project-link {
  border-top: 0;
}
.project-link[rel='next']:hover > span {
  transform: translate(6px, -6px);
}

/* The original title-free board and its separate logo share one coordinate system.
   Registration measured against the supplied 2046 × 1150 board. */
.yahoo-opening {
  position: relative;
  background: #030204;
}
.board-art {
  position: relative;
  width: 100%;
}
.board-background {
  width: 100%;
}
.board-art > .board-logo-target {
  position: absolute;
  left: calc(100% * 797.7 / 2046);
  top: calc(100% * 80.4 / 1150);
  width: calc(100% * 446 / 2046);
  height: auto;
  pointer-events: none;
}
.is-scroll-opening {
  height: calc(var(--opening-travel) + var(--opening-pin-height));
}
.is-scroll-opening .opening-pin {
  position: sticky;
  top: 0;
}
.is-scroll-opening .case-board {
  padding-top: calc(var(--header) + 20px);
}
.is-scroll-opening .yahoo-intro {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 100svh;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}
.is-scroll-opening .yahoo-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--purple);
  opacity: var(--opening-purple, 1);
}
.is-scroll-opening .yahoo-intro h1 {
  position: relative;
  transform-origin: 0 0;
  will-change: transform;
}
.is-scroll-opening .board-logo-target {
  opacity: 0;
}
.is-scroll-opening .intro-caption,
.is-scroll-opening .scroll-cue {
  position: relative;
  opacity: var(--opening-cue, 1);
}
.is-scroll-opening .scroll-cue {
  position: absolute;
  pointer-events: auto;
}
.is-scroll-opening .scroll-cue[inert] {
  pointer-events: none;
  visibility: hidden;
}
.scroll-cue .cue-icon {
  display: block;
  animation: capsule-scroll-hint 1.9s ease-in-out infinite;
}
.opening-cue-paused .cue-icon {
  animation-play-state: paused;
}
@keyframes capsule-scroll-hint {
  0%,
  100% {
    transform: translateY(0);
  }
  55% {
    transform: translateY(8px);
  }
}
@media (max-height: 560px) {
  .is-scroll-opening .yahoo-intro h1 {
    width: min(76vw, calc((100svh - 200px) * 1260 / 316));
  }
  .is-scroll-opening .intro-caption {
    margin-top: 22px;
  }
  .is-scroll-opening .scroll-cue {
    bottom: 18px;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue .cue-icon {
    animation: none;
  }
}

/* The activation film is the focal point; the web execution remains alongside it. */
.activation-layout {
  grid-template-columns: minmax(0, 2.2fr) minmax(220px, 0.85fr);
  gap: clamp(26px, 4vw, 64px);
}
.activation-billboard {
  transform: none;
  min-width: 0;
}
.billboard-film {
  position: relative;
  background: #09080e;
  border-radius: 10px;
  overflow: hidden;
}
.billboard-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.billboard-toggle {
  z-index: 1;
}
.activation-details {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.activation-details .activation-web {
  width: 100%;
  max-width: 320px;
  transform: rotate(2deg);
  padding: 0;
}
.activation-details .phase-copy {
  grid-column: auto;
  grid-row: auto;
}
.activation-details .memory-inset {
  width: 52%;
  margin-top: -22%;
}
.yahoo-enhanced .phase-three {
  inset-block-end: 12%;
}
.yahoo-enhanced .phase-three .phase-heading {
  margin-bottom: 22px;
}
.yahoo-enhanced .activation-layout {
  max-width: min(1360px, 116svh);
}
.yahoo-enhanced .activation-details .phase-copy {
  font-size: 13px;
  line-height: 1.4;
}
.yahoo-enhanced .activation-details .phase-lead {
  font-size: 25px;
}
@media (max-width: 900px) {
  .activation-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .activation-details {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 22px;
    align-items: center;
  }
  .activation-details .activation-web {
    max-width: none;
  }
  .yahoo-enhanced .phase-three {
    inset-block-end: 13%;
  }
  .yahoo-enhanced .activation-layout {
    max-width: 680px;
  }
  .yahoo-enhanced .activation-details .phase-lead {
    font-size: 20px;
    margin-bottom: 0;
  }
  .yahoo-enhanced .activation-details .phase-copy > p:not(.phase-lead) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .yahoo-enhanced .activation-details {
    max-width: 480px;
    margin-inline: auto;
    grid-template-columns: 1fr 1fr;
  }
  .yahoo-enhanced .activation-details .phase-copy::before {
    display: none;
  }
  .yahoo-enhanced .activation-details .activation-web {
    max-width: 155px;
    justify-self: end;
  }
  .yahoo-enhanced .activation-layout > .activation-billboard {
    width: 100%;
    max-width: none;
  }
  .yahoo-enhanced .billboard-film {
    width: min(100%, 72svh);
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .billboard-film video {
    aspect-ratio: 800/820;
  }
  .yahoo-enhanced .billboard-film {
    width: min(100%, 43svh);
  }
  .yahoo-enhanced .activation-layout {
    gap: 18px;
  }
  .yahoo-enhanced .activation-details {
    gap: 16px;
  }
  .yahoo-enhanced .phase-three .phase-heading {
    margin-bottom: 18px;
  }
}
@media (max-width: 700px) and (max-height: 740px) {
  .yahoo-enhanced .phase-three {
    inset-block: calc(var(--header) + 8px) 12%;
  }
  .yahoo-enhanced .phase-three .phase-heading h2 {
    font-size: 24px;
  }
  .yahoo-enhanced .phase-three .phase-heading {
    margin-bottom: 12px;
  }
  .yahoo-enhanced .billboard-film {
    width: min(100%, 39svh);
  }
  .yahoo-enhanced .activation-details .phase-lead {
    font-size: 17px;
  }
  .yahoo-enhanced .activation-details .activation-web {
    max-width: 115px;
  }
  .yahoo-enhanced .activation-layout {
    gap: 12px;
  }
}
@media (min-width: 701px) and (max-width: 900px) and (max-height: 740px) {
  .yahoo-enhanced .billboard-film {
    width: min(100%, 53svh);
  }
  .yahoo-enhanced .activation-layout {
    gap: 12px;
  }
  .yahoo-enhanced .activation-details .activation-web {
    max-width: 115px;
  }
}

/* ---------- Telefono e tablet ---------- */
/* Il testo della board come testo vero: a quella larghezza nella board è illeggibile. Sul
   computer questa sezione non c'è (si legge nella board). */
.board-notes {
  display: none;
}
@media (max-width: 1100px) {
  .board-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
    padding: 48px var(--gutter) 0;
    background: #030204;
    color: #ddd4e4;
    font-size: 15px;
    line-height: 1.5;
  }
  .board-notes h3 {
    margin: 32px 0 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .board-notes-col > h3:first-child {
    margin-top: 0;
  }
  .board-notes h4 {
    margin: 22px 0 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .board-notes h4 em {
    color: #cbbfd6;
    font-weight: 400;
  }
  .board-notes p + p {
    margin-top: 12px;
  }
  .board-notes strong,
  .board-notes-close {
    color: #fff;
    font-weight: 700;
  }
  .board-notes-close {
    margin-top: 16px;
  }
}
@media (max-width: 700px) {
  .board-notes {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 36px;
  }
  /* Sul telefono la board inquadra i ragazzi, la capsula e il logo, più grandi: le miniature in
     basso sono raccontate più avanti, nelle tre fasi. */
  .board-display {
    overflow: hidden;
    aspect-ratio: 1.26;
  }
  .board-art {
    width: 205%;
    margin-left: -52.5%;
  }
}

/* Scrollytelling sul telefono: testi più grandi, su fondi più scuri e coprenti, e la voce attiva
   in basso ben distinta. La capsula resta visibile sotto. */
@media (max-width: 900px) {
  .yahoo-enhanced .capsule-shade {
    background: linear-gradient(
      180deg,
      #08000c8c 5%,
      #0d001ee0 28%,
      #12031ad6 62%,
      #12031a80 88%,
      transparent 100%
    );
  }
  .yahoo-enhanced .phase-copy {
    text-shadow: none;
  }
  .yahoo-enhanced .phase-copy::before {
    background: linear-gradient(135deg, #1b062bf2, #1b062be6);
    box-shadow: 0 12px 40px #00000080;
  }
  .phase-copy {
    font-size: 14px;
    line-height: 1.45;
  }
  .phase-copy .phase-lead {
    font-size: 21px;
  }
  .phase-heading .eyebrow {
    color: #e6d6f2;
    font-size: 10px;
  }
  .phase-content figcaption {
    color: #ddd2e5;
    font-size: 10px;
  }
  .phase-navigation a {
    color: #b9a9c6;
    font-size: 11px;
  }
  .phase-navigation a > span:first-child {
    font-size: 10px;
  }
  .phase-navigation a[aria-current='step'] {
    color: #fff;
    font-weight: 700;
  }
  .phase-navigation a[aria-current='step'] i {
    height: 2px;
  }
  .yahoo-enhanced .story-skip {
    font-size: 11px;
  }
  /* Fase 3: la frase resta su un fondo invece che sulla luce della capsula. */
  .yahoo-enhanced .activation-details .phase-copy::before {
    display: block;
    inset: -12px -12px;
  }
}
@media (max-height: 740px) and (max-width: 900px) {
  .phase-copy {
    font-size: 13px;
  }
}
/* Telefono: l'intestazione copre meglio il testo che le scorre sotto. */
@media (max-width: 900px) {
  .portfolio-header {
    background: linear-gradient(#09030df2 0%, #09030dd9 55%, #09030d00);
  }
}
/* Telefono e tablet in verticale: durante l'apertura la board sta al centro dello schermo invece
   che in alto con un vuoto sotto. */
@media (max-width: 1100px) and (orientation: portrait) {
  .is-scroll-opening .opening-pin {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  /* Il testo della board sale nel vuoto lasciato sotto la board centrata (metà dello spazio
     libero dell'apertura: schermo meno intestazione, didascalie e board). */
  .is-scroll-opening + .board-notes {
    position: relative;
    margin-top: min(0px, calc((64px + 20px + 38px + 100vw / 1.26 - 100svh) / 2));
  }
}