/*
 * SIGNAL — a release as a sequence of graphic events.
 * The composition borrows the grammar of music campaigns, not their assets:
 * scale shifts, repetition, image echoes and one hard accent at a time.
 */

body[data-density="minimal"] .composition--signal .optional,
body[data-density="standard"] .composition--signal .optional--full {
  display: none !important;
}

.composition--signal {
  --signal-black: #0a0a09;
  --signal-paper: #f1eee5;
  --signal-acid: #d3ff38;
  --signal-coral: #ff5b42;
  --signal-mint: #3f9c85;
  background: var(--signal-black);
  color: var(--signal-paper);
}

.signal-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 70px);
  overflow: hidden;
  background: var(--signal-black);
}

.signal-meta {
  position: absolute;
  z-index: 4;
  top: 24px;
  left: 28px;
  display: flex;
  gap: 25px;
  font: 500 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.signal-contact {
  position: absolute;
  z-index: 7;
  top: 22px;
  right: calc(clamp(175px, 14vw, 230px) + 28px);
  display: flex;
  gap: 7px;
}

.signal-contact a {
  display: block;
  padding: 9px 12px;
  border: 1px solid rgba(241,238,229,.55);
  color: var(--signal-paper);
  font: 600 9px/1 var(--mono);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.signal-contact a:first-child {
  border-color: var(--signal-acid);
  background: var(--signal-acid);
  color: var(--signal-black);
}

.signal-hero-media {
  position: absolute;
  z-index: 1;
  top: 7%;
  right: clamp(210px, 17vw, 270px);
  width: min(42vw, 680px);
  height: 78%;
  margin: 0;
}

.signal-hero-media::before,
.signal-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/assets/images/demo/mara-riera-voss/hero.jpg') center 31% / cover;
  filter: grayscale(1) contrast(1.08);
}

.signal-hero-media::before { transform: translate(-34px, 30px); opacity: .38; }
.signal-hero-media::after { transform: translate(-68px, 60px); opacity: .16; }
.signal-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 31%; }
.signal-hero-media figcaption { position: absolute; right: 0; bottom: 0; padding: 8px 10px; background: var(--signal-paper); color: var(--signal-black); font: 500 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.signal-title {
  position: absolute;
  z-index: 3;
  left: 3vw;
  bottom: 4vh;
  max-width: calc(100% - 235px);
}

.signal-title p { margin: 0 0 12px 5px; font: 650 clamp(15px, 1.5vw, 23px)/1 var(--sans); text-transform: uppercase; }
.signal-title h1 { margin: 0; font: 760 clamp(75px, 10.5vw, 170px)/.73 var(--sans); letter-spacing: -.085em; text-transform: uppercase; }
.signal-title time { display: inline-block; margin: 18px 0 0 6px; padding: 7px 10px; background: var(--signal-paper); color: var(--signal-black); font: 600 10px/1 var(--mono); letter-spacing: .12em; }

.signal-play {
  position: absolute;
  z-index: 5;
  right: clamp(175px, 14vw, 230px);
  bottom: 14%;
  display: grid;
  place-content: center;
  width: clamp(95px, 9vw, 145px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--signal-acid);
  color: var(--signal-black);
  text-align: center;
  text-decoration: none;
  transform: rotate(-8deg);
}

.signal-play span { font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.signal-play b { margin-top: 8px; font-size: 32px; }

.signal-streams {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: clamp(175px, 14vw, 230px);
  border-left: 1px solid rgba(241,238,229,.32);
  background: rgba(10,10,9,.93);
}

.signal-streams p { margin: 0; padding: 27px 22px; border-bottom: 1px solid rgba(241,238,229,.32); color: var(--signal-acid); font: 500 9px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.signal-streams a { display: grid !important; grid-template-columns: 30px 1fr 18px; align-items: center; min-height: 98px; padding: 22px; border-bottom: 1px solid rgba(241,238,229,.32); text-decoration: none; }
.signal-streams a b { color: var(--signal-acid); font: 500 9px/1 var(--mono); }
.signal-streams a span { font-size: 15px; font-weight: 600; text-transform: uppercase; }
.signal-streams a i { font-style: normal; }

.signal-story {
  position: relative;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(55px, 9vw, 150px);
  min-height: 100svh;
  padding: clamp(85px, 10vw, 160px) clamp(25px, 8vw, 130px);
  overflow: hidden;
  background: var(--signal-acid);
  color: var(--signal-black);
}

.signal-side { position: absolute; right: -.08em; bottom: -.33em; color: rgba(10,10,9,.075); font: 760 min(75vw, 1000px)/1 var(--sans); }
.signal-story header, .signal-story-intro, .signal-story blockquote, .signal-story-copy { position: relative; z-index: 1; }
.signal-story header p, .signal-press-index { margin: 0 0 38px; font: 500 10px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.signal-story h2 { margin: 0; font: 720 clamp(53px, 7.7vw, 125px)/.82 var(--sans); letter-spacing: -.075em; text-transform: uppercase; }
.signal-story-intro { align-self: end; margin: 0; padding-top: 25px; border-top: 2px solid; font: 550 clamp(21px, 2.2vw, 35px)/1.2 var(--sans); letter-spacing: -.035em; }

.signal-story blockquote { grid-column: 1 / -1; max-width: 1150px; margin: clamp(80px, 10vw, 150px) 0 20px; font: 650 clamp(38px, 5.5vw, 88px)/.96 var(--sans); letter-spacing: -.055em; }
body[data-density="stress"] .signal-story-copy { grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(30px, 5vw, 75px); max-width: 1250px; padding-top: 50px; border-top: 2px solid; font-size: 16px; line-height: 1.68; }
body[data-density="stress"] .signal-story-copy p:last-child { grid-column: 2 / 4; max-width: 700px; }

.signal-press {
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr);
  min-height: 100svh;
  background: var(--signal-coral);
  color: var(--signal-black);
}
.signal-press figure { position: relative; margin: 0; min-height: 760px; overflow: hidden; background: var(--signal-black); }
.signal-press figure::before { content: "PRESS / PRESS / PRESS"; position: absolute; z-index: 2; left: -2%; bottom: -0.16em; white-space: nowrap; color: var(--signal-acid); font: 750 clamp(70px, 8vw, 130px)/.8 var(--sans); letter-spacing: -.07em; transform: rotate(-90deg); transform-origin: left bottom; }
.signal-press figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }
.signal-press figure figcaption { position: absolute; z-index: 3; right: 0; bottom: 0; padding: 9px 12px; background: var(--signal-acid); font: 500 8px/1 var(--mono); text-transform: uppercase; }
.signal-press-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(65px, 7vw, 115px) clamp(32px, 5vw, 82px); }
.signal-press-copy h2 { margin: 0 0 48px; font: 730 clamp(58px, 6.5vw, 108px)/.79 var(--sans); letter-spacing: -.075em; text-transform: uppercase; }
.signal-press-intro { margin: 0; font: 560 clamp(20px, 2vw, 29px)/1.25 var(--sans); letter-spacing: -.03em; }
.signal-press-copy .stress-copy { gap: 0; margin-top: 45px; padding-top: 28px; border-top: 2px solid; font-size: 15px; line-height: 1.68; }
.signal-press-copy > a { display: flex; justify-content: space-between; margin-top: 50px; padding: 17px 0; border-top: 2px solid; border-bottom: 2px solid; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.signal-press-copy > a span { font: 500 9px var(--mono); letter-spacing: .1em; }
.signal-footer { display: grid; grid-template-columns: 1.4fr repeat(2, auto) 1.4fr; align-items: center; gap: clamp(24px, 4vw, 70px); padding: 42px clamp(20px, 4vw, 64px); border-top: 8px solid var(--signal-acid); background: var(--signal-black); color: var(--signal-paper); font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.signal-footer a { padding: 13px 18px; border: 1px solid var(--signal-acid); color: var(--signal-acid); font: 700 13px/1 var(--sans); text-decoration: none; }
.signal-footer span:last-child { text-align: right; }

@media (max-width: 760px) {
  .signal-hero { min-height: 850px; }
  .signal-meta { top: 19px; left: 16px; right: 16px; justify-content: space-between; gap: 10px; font-size: 7px; }
  .signal-meta span:nth-child(2) { display: none; }
  .signal-contact { top: 11px; right: 11px; gap: 4px; }
  .signal-contact a { padding: 8px 7px; font-size: 7px; }
  .signal-hero-media { top: 55px; right: 20px; width: calc(100% - 58px); height: 565px; }
  .signal-hero-media::before { transform: translate(-12px, 15px); }
  .signal-hero-media::after { transform: translate(-24px, 30px); }
  .signal-title { left: 17px; right: 17px; bottom: 195px; max-width: none; }
  .signal-title p { font-size: 13px; }
  .signal-title h1 { font-size: 65px; line-height: .76; }
  body[data-copy="long"] .signal-title h1 { font-size: 46px; line-height: .82; }
  .signal-title time { margin-top: 13px; }
  .signal-play { right: 19px; bottom: 166px; width: 82px; }
  .signal-play span { display: none; }
  .signal-play b { margin: 0; font-size: 25px; }
  .signal-streams { top: auto; left: 0; width: 100%; height: 145px; flex-direction: row; border-top: 1px solid rgba(241,238,229,.32); border-left: 0; overflow-x: auto; }
  .signal-streams p { min-width: 72px; padding: 20px 14px; border-right: 1px solid rgba(241,238,229,.32); border-bottom: 0; }
  .signal-streams a { grid-template-columns: 22px auto 15px; min-width: 170px; min-height: 0; padding: 18px 14px; border-right: 1px solid rgba(241,238,229,.32); border-bottom: 0; }
  .signal-story { grid-template-columns: minmax(0, 1fr); gap: 52px; min-height: 0; padding: 85px 20px; }
  .signal-story > * { min-width: 0; }
  .signal-story h2 { font-size: 45px; }
  .signal-story-intro { font-size: 22px; }
  .signal-story blockquote { grid-column: 1; margin-top: 65px; font-size: 40px; }
  body[data-density="stress"] .signal-story-copy { grid-column: 1; grid-template-columns: 1fr; gap: 18px; padding-top: 35px; }
  body[data-density="stress"] .signal-story-copy p:last-child { grid-column: 1; }
  .signal-press { grid-template-columns: 1fr; }
  .signal-press figure { min-height: 0; aspect-ratio: 4 / 5; }
  .signal-press figure::before { font-size: 66px; }
  .signal-press-copy { padding: 75px 20px; }
  .signal-press-copy h2 { font-size: 55px; }
  .signal-footer { grid-template-columns: 1fr 1fr; gap: 16px; padding: 34px 20px; }
  .signal-footer a { text-align: center; }
  .signal-footer span:last-child { text-align: left; }
}