@import url('figround.css');

body {
  background: #333;
}

.poster {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  background: linear-gradient(to right,
    #f4f4f4 0%,
    #e4eaf0 12%,
    #98a8b8 38%,
    #3a4d66 68%,
    #0f1926 100%
  );
  padding: 3vh 0 6vh 0;
}

/* ── TITLE ── */
.main-title {
  padding-bottom: 3vh;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  padding-right: 24vw;
}

/* ── SUBTITLE ROW ── */
/* Override shared subtitle-row from figround.css */
.subtitle-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: none;
  margin: 0 0 2.2em 0;
  padding: 0 4vw;
}

.subtitle-left {
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-style: italic;
  color: #000;
  text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,0.5);
  /* offset down to match Odysseus starting on second line */
  margin-top: 1.6em;
}

.subtitle-right {
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-style: italic;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,0.5);
}

/* ── INTERLEAVED + OVERLAPPING ── */
:root {
  --base-size: clamp(0.72rem, 0.88vw, 0.92rem);
  --line-unit: 1.55em;
  --double-line: calc(var(--line-unit) * 2);
}

.interleave {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 3vw;
  position: relative;
}

.col-odysseus,
.col-siren {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--base-size);
  line-height: var(--double-line);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Odysseus: left-aligned, extends to ~42% */
.col-odysseus {
  width: 42%;
  justify-self: start;
  color: #000000;
  font-weight: 500;
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 18px rgba(255,255,255,0.6),
    0 0 30px rgba(255,255,255,0.3);
  padding-left: 1vw;
  padding-right: 2vw;
  /* Odysseus starts on second line */
  margin-top: var(--line-unit);
  /* fade out text at right edge — stay opaque longer */
  -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
  mask-image: linear-gradient(to right, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
}

/* Siren: right-aligned, extends to ~68%, overlapping Odysseus */
.col-siren {
  width: 68%;
  justify-self: end;
  color: #ffffff;
  font-weight: 400;
  text-shadow:
    0 0 8px rgba(0,0,0,0.9),
    0 0 18px rgba(0,0,0,0.6),
    0 0 30px rgba(0,0,0,0.3);
  padding-right: 1vw;
  padding-left: 2vw;
  /* Siren starts first — no offset */
  /* fade out text at left edge — stay opaque longer */
  -webkit-mask-image: linear-gradient(to left, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
  mask-image: linear-gradient(to left, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
}

/* Paragraph spacing — multiples of line unit to stay in sync */
.col-odysseus p,
.col-siren p {
  margin-bottom: var(--double-line);
}

.col-odysseus p:last-child,
.col-siren p:last-child {
  margin-bottom: 0;
}

/* ── MOBILE: swipeable overlapping columns ── */
@media (max-width: 1366px) and (orientation: portrait) {
  body {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  :root {
    --base-size: 1.25rem;
    --mobile-margin: 4vw;
  }

  .poster {
    width: 170vw;
    padding: 3vh 0 6vh 0;
    /* gentler gradient: white → light blue → night blue */
    background: linear-gradient(to right,
      #f4f4f4 0%,
      #e4eaf0 15%,
      #98a8b8 48%,
      #3a4d66 75%,
      #0f1926 100%
    );
  }

  .main-title {
    justify-content: center;
    padding-right: 36vw;
    padding-left: 0;
    font-size: 2.0rem;
  }

  .subtitle-row {
    padding: 0 var(--mobile-margin);
  }

  .subtitle-left {
    font-size: 1.5rem;
    margin-top: 1.2em;
  }

  .subtitle-right {
    font-size: 1.5rem;
    white-space: nowrap;
  }

  .interleave {
    padding: 0;
  }

  /* Both columns widen to ~60%, creating ~20vw overlap zone */
  .col-odysseus {
    width: 60%;
    scroll-snap-align: start;
    font-weight: 600;
    padding-left: var(--mobile-margin);
    padding-right: var(--mobile-margin);
    /* stronger mask: fade more on mobile */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 75%, rgba(0,0,0,0.2) 110%);
    mask-image: linear-gradient(to right, black 0%, black 75%, rgba(0,0,0,0.2) 110%);
    /* stronger glow for readability */
    text-shadow:
      0 0 10px rgba(255,255,255,1),
      0 0 22px rgba(255,255,255,0.7),
      0 0 36px rgba(255,255,255,0.4);
  }

  .col-siren {
    width: 60%;
    scroll-snap-align: end;
    padding-left: var(--mobile-margin);
    padding-right: var(--mobile-margin);
    -webkit-mask-image: linear-gradient(to left, black 0%, black 92%, rgba(0,0,0,0.4) 100%);
    mask-image: linear-gradient(to left, black 0%, black 92%, rgba(0,0,0,0.4) 100%);
    text-shadow:
      0 0 10px rgba(0,0,0,1),
      0 0 22px rgba(0,0,0,0.7),
      0 0 36px rgba(0,0,0,0.4);
  }
}

/* ── PRINT: A1 portrait (594 × 841 mm) ── */
@media print {
  @page {
    size: 594mm 841mm;
    margin: 0;
  }

  body {
    background: none;
    margin: 0;
    padding: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .poster {
    width: 594mm;
    min-height: 841mm;
    padding: 25mm 0 30mm 0;
    background: linear-gradient(to right,
      #f4f4f4 0%,
      #e4eaf0 12%,
      #98a8b8 38%,
      #3a4d66 68%,
      #0f1926 100%
    );
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  .interleave {
    padding: 0 3vw;
  }

  /* Reset mobile overrides — force desktop layout */
  .col-odysseus {
    width: 42%;
    font-weight: 500;
    padding-left: 1vw;
    padding-right: 2vw;
    scroll-snap-align: unset;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
    mask-image: linear-gradient(to right, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
    text-shadow:
      0 0 8px rgba(255,255,255,0.9),
      0 0 18px rgba(255,255,255,0.6),
      0 0 30px rgba(255,255,255,0.3);
  }

  .col-siren {
    width: 68%;
    padding-left: 2vw;
    padding-right: 1vw;
    scroll-snap-align: unset;
    -webkit-mask-image: linear-gradient(to left, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
    mask-image: linear-gradient(to left, black 0%, black 88%, rgba(0,0,0,0.3) 100%);
    text-shadow:
      0 0 8px rgba(0,0,0,0.9),
      0 0 18px rgba(0,0,0,0.6),
      0 0 30px rgba(0,0,0,0.3);
  }

  .main-title {
    padding-right: 24vw;
    padding-left: 0;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
  }
}