/* Story page — printmaker layout, b/w portraits, red sun + cobalt brush.
   Ported from design/kos-hp/project/story-page.css. */

.story-page-hero { padding: 56px 0 80px; position: relative; }
.story-page-hero::before {
  content: '';
  position: absolute;
  left: -60px; top: 280px;
  width: 220px; height: 320px;
  background: url('../assets/mark-scribble-red.svg') no-repeat left center;
  background-size: contain;
  opacity: 0.3;
  pointer-events: none;
  transform: rotate(-8deg);
}

.sph-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--kos-brick);
  margin-bottom: 24px;
}
.sph-eyebrow .num { color: var(--kos-brick); }
.sph-eyebrow .dot-sep { color: var(--kos-coal); opacity: 0.4; }
.sph-eyebrow .sph-squiggle { width: 110px; height: 12px; margin-left: 4px; }

.sph-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.sph-copy h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  margin: 0 0 28px;
  color: var(--kos-coal);
}
.sph-copy h1 .redperiod { color: var(--kos-brick); }
.sph-copy .lede {
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: var(--kos-coal);
  max-width: 480px;
  margin: 0;
}

/* Right-side visual: red sun + cobalt brush + b/w photo + dot matrix */
.sph-visual { position: relative; aspect-ratio: 1 / 0.92; }
.sph-visual .sph-sun {
  position: absolute;
  left: 4%; top: 0;
  width: 70%; aspect-ratio: 1;
  background: var(--kos-brick);
  border-radius: 50%;
  filter: url(#rough-heavy);
  z-index: 1;
}
.sph-visual .sph-brush {
  position: absolute;
  right: -40px; top: 18%;
  width: 62%; height: 56%;
  background: url('../assets/mark-brush-cobalt.svg') no-repeat right center;
  background-size: contain;
  opacity: 0.92;
  z-index: 1;
  transform: rotate(-2deg);
}
.sph-visual .sph-photo {
  position: absolute; inset: 8% 8% 4% 14%;
  background: url('../assets/2.jpg') no-repeat;
  background-size: cover; background-position: center 14%;
  filter: grayscale(1) contrast(1.18);
  z-index: 3;
  box-shadow: 5px 5px 0 0 var(--kos-coal);
}
.sph-visual .sph-dots {
  position: absolute;
  right: 0; bottom: -6%;
  width: 120px; height: 120px;
  background: url('../assets/mark-dot-matrix.svg') no-repeat right bottom;
  background-size: contain;
  opacity: 0.55;
  z-index: 4;
}

/* ---- Two-column body --------------------------------------------- */
.story-body {
  padding: 64px 0 56px;
  border-top: 1px solid var(--kos-concrete);
}
.sb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  /* Top-align so the photo lines up with the section headline,
     not vertically centered against the much taller body copy. */
  align-items: start;
}
.sb-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: visible;
}

/* Desktop only: photo sticks to top of viewport while the user scrolls
   through the body copy. Releases when the .sb-grid row ends. */
@media (min-width: 881px) {
  .sb-photo {
    position: sticky;
    top: 100px;  /* clears the sticky nav (~88px) + a bit of breathing room */
  }
}
.sb-photo .sb-photo-img {
  position: absolute; inset: 0;
  background: url('../assets/collage.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  /* Filter intentionally omitted - the collage's warm tones come through
     so it stays distinct from the b/w hero/quote portraits. */
  box-shadow: 4px 4px 0 0 var(--kos-coal);
}
.sb-photo .sb-scribble {
  position: absolute;
  left: -16px; bottom: -22px;
  width: 240px;
  z-index: 3;
}
.sb-copy h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1.0;
  letter-spacing: -0.005em;
  margin: 0 0 20px;
  color: var(--kos-coal);
}
.sb-copy p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: var(--kos-coal);
  margin: 0 0 16px;
  max-width: 460px;
}

/* ---- Pull quote ------------------------------------------------- */
.story-quote { padding: 72px 0 88px; }
.sq-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.sq-copy { position: relative; padding-left: 56px; }
.sq-mark {
  position: absolute;
  left: 0; top: -12px;
  font-family: var(--font-display);
  font-size: 80px;
  color: var(--kos-brick);
  line-height: 1;
}
.sq-copy h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0 0 22px;
  color: var(--kos-coal);
}
.sq-copy h2 .redperiod { color: var(--kos-brick); }
.sq-attrib {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--kos-coal);
}

.sq-photo { position: relative; aspect-ratio: 16 / 9; }
.sq-photo .sq-photo-img {
  position: absolute; inset: 0;
  background: url('../assets/guitar.jpg') no-repeat;
  background-size: cover; background-position: center center;
  filter: grayscale(1) contrast(1.15);
  box-shadow: 4px 4px 0 0 var(--kos-coal);
}
.sq-photo .sq-brush {
  position: absolute;
  right: -36px; bottom: -30px;
  width: 240px; height: 110px;
  background: url('../assets/mark-brush-red.svg') no-repeat right center;
  background-size: contain;
  transform: rotate(2deg);
  z-index: 2;
  pointer-events: none;
}

/* ---- Mobile / narrow tablet ------------------------------------- */
@media (max-width: 880px) {
  .sph-grid, .sb-grid, .sq-grid { grid-template-columns: 1fr; gap: 36px; }
  .story-page-hero { padding: 32px 0 48px; }
  .sph-copy h1 { font-size: clamp(40px, 11vw, 64px); }
  .sb-copy h2 { font-size: clamp(26px, 6vw, 32px); }
  .sq-copy { padding-left: 36px; }
  .sq-mark { font-size: 56px; }
  .story-quote { padding: 48px 0 56px; }
}