/* Chapters 03–05, synchronized with Figma on 2026-09-23. */
.section.story-section {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #0a090d;
}
.story-canvas {
  position: relative;
  width: min(100%, 177.77778svh);
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  color: #fff;
  font-weight: 500;
}
.story-header { position: absolute; left: 3.33333%; top: 6.11111%; }
.story-header h2 { margin: 0; font-size: 1.875cqw; line-height: 1.33333; font-weight: 500; letter-spacing: 0; }
.story-header p { margin: .104167cqw 0 0; color: #7c7d87; font-size: .833333cqw; line-height: 1.75; }
.story-section--principles .story-header p { margin-top: .833333cqw; line-height: 1.3125; }
.story-guide, .story-role, .story-endpoint { position: absolute; }
.story-guide--horizontal { left: 12.39583%; top: 45.18519%; width: 75.02604%; height: 1px; }
.story-guide--vertical { top: 26.01852%; height: 42.31481%; width: 1px; }
.story-role { left: var(--left); top: var(--top); width: var(--width); aspect-ratio: 1; }
.story-role:nth-child(3) { z-index: 1; }
.story-role > img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Apply backdrop blur on the page surface, outside the embedded SVG. */
.story-role:nth-child(2) > .story-role__surface {
  border-radius: 50%;
  -webkit-backdrop-filter: blur(1.265625cqw);
  backdrop-filter: blur(1.265625cqw);
}
.story-role h3, .story-role p { position: absolute; margin: 0; left: var(--text-left); white-space: nowrap; font-weight: 500; }
.story-role h3 { top: var(--title-top); font-size: 1.875cqw; line-height: 1.458333cqw; }
.story-role p { top: var(--copy-top); left: var(--copy-left); font-size: .833333cqw; line-height: 1.458333cqw; color: #7c7d87; }
.story-role--family p { color: rgb(255 255 255 / .8); }
.story-endpoint { left: 87.265625%; top: 44.907407%; width: .3125%; }
.story-question { position: absolute; top: 68.148148%; left: 0; width: 100%; text-align: center; font-size: 1.25cqw; line-height: 2.395833cqw; color: rgb(255 255 255 / .85); margin: 0; }
.story-project { position: absolute; left: 4.010417%; top: 90.185185%; font: 400 .625cqw/1.25 "Montserrat", sans-serif; }
.story-thesis { position: absolute; top: 22.314815%; left: 0; width: 100%; margin: 0; text-align: center; font-size: 2.5cqw; line-height: 1.333333; font-weight: 500; }
.story-rationale { position: absolute; top: 29.814815%; left: 0; width: 100%; margin: 0; text-align: center; font-size: .833333cqw; line-height: 1.3125; }
.story-principle { position: absolute; left: var(--left); top: 37.222222%; width: 16.71875%; }
.story-principle__disc { position: relative; aspect-ratio: 1; }
.story-principle__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-principle h4 { position: absolute; top: 32.39875%; width: 100%; margin: 0; text-align: center; font-size: 1.875cqw; line-height: 1.458333cqw; font-weight: 500; }
.story-principle__copy { position: absolute; top: 50.15576%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 110%; margin: 0; font-size: .833333cqw; line-height: 1.458333cqw; color: rgb(255 255 255 / .8); }
.story-principle__arrow { display: block; width: 8.99373%; height: auto; margin: -.052083cqw auto 0; }
.story-principle__direction { margin: 2.034625cqw 0 0; text-align: center; font-size: 1.25cqw; line-height: 1.666667cqw; }
.story-principle__keywords { margin: .364583cqw 0 0; color: rgb(255 255 255 / .4); font-size: 1.25cqw; line-height: 1.458333cqw; text-align: center; }
.section.story-mood { min-height: 0; background: #111; }
.story-mood__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25vw; }
.story-mood__card { position: relative; overflow: hidden; aspect-ratio: 624 / 688; background: #000; container-type: inline-size; color: white; }
.story-mood__image { position: absolute; width: var(--width); height: var(--height); left: var(--left); top: var(--top); max-width: none; object-fit: cover; }
.story-mood__shade { position: absolute; left: 0; top: 0; width: 100%; height: 19.622093%; background: linear-gradient(rgb(0 0 0 / .65), transparent); }
.story-mood__card h3 { position: absolute; left: 5.608974%; top: 4.94186%; margin: 0; font-size: 7.692308cqw; line-height: 1.333333; font-weight: 500; }
.story-mood__keyword { position: absolute; right: 5.128205%; top: 4.94186%; margin: 0; font-size: 3.846154cqw; line-height: 1.166667; font-weight: 500; }
.story-mood__detail { position: absolute; right: 5.128205%; top: 9.593023%; margin: 0; font-size: 3.846154cqw; line-height: 1.333333; font-weight: 400; white-space: nowrap; }
.story-mood__card--lens .story-mood__keyword { top: 5.377907%; }
.story-mood__card--lens .story-mood__detail { top: 10.755814%; }
.story-mood__logo { position: absolute; width: 19.230769%; height: auto; left: 74.038462%; top: 81.686047%; }
@media (max-width: 600px) {
  .section.story-section { min-height: 0; display: block; padding: 52px 20px; }
  .story-canvas { width: 100%; aspect-ratio: auto; }
  .story-header { position: static; margin-bottom: 28px; }
  .story-header h2 { font-size: 22px; line-height: 1.5; }
  .story-header p, .story-section--principles .story-header p { font-size: 12px; line-height: 1.8; margin-top: 10px; }
  .story-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .story-guide, .story-endpoint { display: none; }
  .story-role { position: relative; left: auto; top: auto; width: 100%; }
  .story-role h3 { top: 35%; left: 0; width: 100%; text-align: center; font-size: 20px; line-height: 1.5; }
  .story-role p { top: 58%; left: 10%; width: 80%; text-align: center; white-space: normal; font-size: 10px; line-height: 1.6; }
  .story-question { position: static; font-size: 14px; line-height: 1.9; margin-top: 26px; }
  .story-question br { display: none; }
  .story-project { position: static; display: block; margin-top: 30px; font-size: 9px; }
  .story-thesis { position: static; font-size: 25px; line-height: 1.5; }
  .story-rationale { position: static; font-size: 12px; line-height: 1.8; margin: 12px 0 32px; }
  .story-principles { display: grid; gap: 32px; }
  .story-principle { position: static; width: min(100%, 280px); margin: auto; }
  .story-principle h4 { font-size: 26px; line-height: 1.4; top: 30%; }
  .story-principle__copy { font-size: 12px; line-height: 1.8; top: 51%; max-width: 100%; }
  .story-principle__arrow { margin-top: -1px; }
  .story-principle__direction { font-size: 19px; line-height: 1.5; margin-top: 20px; }
  .story-principle__keywords { font-size: 16px; line-height: 1.5; margin-top: 4px; }
  .story-mood__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
}