.journey-page { width: min(100% - 48px, 60rem); margin-inline: auto; }
.journey-intro { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 64px; align-items: center; padding: 48px 0; }
.journey-intro h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.045em; }
.journey-intro p { max-width: 29rem; margin-top: 24px; font-size: 1.125rem; line-height: 1.6; color: var(--secondary); }
.prototype-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; color: var(--ice-blue); font-size: 1rem; }
.prototype video { aspect-ratio: 9 / 16; background: #102e44; }
.journey-page img { display: block; width: 100%; height: auto; }
.process-images { display: grid; gap: 28px; }
.journey-card { position: relative; border-radius: 14px; background: #0b293b; isolation: isolate; }
.journey-card > a, .sheet-grid { display: block; overflow: hidden; border-radius: inherit; }
.journey-card a { display: block; }
.journey-card a:focus-visible { outline-color: var(--ice-blue); }
.journey-card figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px, 4vw, 44px); background: linear-gradient(90deg, rgb(4 25 40 / .92), rgb(4 25 40 / .74) 42%, transparent 84%); border-radius: inherit; color: white; opacity: 0; pointer-events: none; }
.journey-card h2 { max-width: 24rem; font-size: clamp(1.125rem, 2.6vw, 1.75rem); line-height: 1.4; font-weight: 500; letter-spacing: -.02em; }
.journey-card figcaption p { max-width: 29rem; font-size: 1.0625rem; line-height: 1.5; }
.journey-card h2 + p { margin-top: 16px; }
.journey-card:hover figcaption, .journey-card:focus-within figcaption { opacity: 1; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.terrain-panorama figcaption { padding-block: 20px; }
.terrain-panorama figcaption p { max-width: 35rem; }
.lessons { padding: 56px 0; }
.lessons > h2, .about-creator h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 650; }
.lessons ul { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; list-style: none; margin: 28px 0 0; padding: 0; }
.lessons li { color: var(--secondary); font-size: 1.0625rem; line-height: 1.6; }
.lessons-intro { max-width: 42rem; margin-top: 20px; color: var(--secondary); font-size: 1.0625rem; line-height: 1.6; }
.lessons h3 { margin: 0 0 10px; font-size: inherit; line-height: 1.4; font-weight: 600; }
.about-creator { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 40px; align-items: center; border-top: 1px solid var(--line); padding: 40px 0; }
.about-creator > img { border-radius: 14px; }
.about-creator p { max-width: 31rem; margin-top: 16px; color: var(--secondary); font-size: 1.0625rem; line-height: 1.6; }
.creator-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 16px; }
.creator-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ice-blue); font-size: 1rem; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .journey-card { transition: transform .2s ease; }
  .journey-card:hover, .journey-card:focus-within { transform: scale(1.015); }
}
@media (prefers-reduced-motion: no-preference) {
  .journey-card figcaption { transition: opacity .2s ease; }
}
@media (max-width: 700px) {
  .journey-page { width: calc(100% - 40px); }
  .journey-intro { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .journey-intro p { font-size: 1.0625rem; }
  .prototype { width: min(100%, 14rem); margin-inline: auto; }
  .process-images { gap: 24px; }
  .lessons { padding: 40px 0; }
  .lessons ul { grid-template-columns: 1fr; gap: 24px; }
  .about-creator { grid-template-columns: 1fr; gap: 24px; }
  .about-creator > img { max-width: 12rem; }
}
@media (max-width: 700px), (hover: none) {
  .journey-card figcaption { position: static; padding: 22px; opacity: 1; background: none; }
  .journey-card h2 { font-size: 1.0625rem; }
  .journey-card > a, .sheet-grid { border-radius: 14px 14px 0 0; }
}
@media (max-width: 480px) {
  .sheet-grid { grid-template-columns: 1fr; }
}