.ships-page { overflow: hidden; }
.ships-page .section { position: relative; }
.ships-page .lead { margin-bottom: 0; }
.ships-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8.333%; align-items: center; }
.ships-hero__grid > * { min-width: 0; width: 100%; }
.ships-hero__panel { display: flex; flex-direction: column; gap: var(--space-5); padding: clamp(var(--space-5), 4vw, var(--space-7)); border: var(--border-strong-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); background: var(--color-sunny-yellow); }
.ships-hero__panel > * { min-width: 0; margin: 0; }
.ships-hero__panel::before { top: -3rem; left: -3rem; }
.ships-hero__panel .display-title { max-width: 24ch; font-size: clamp(3rem, 6.4vw, 5.5rem); }
.ships-hero__panel .lead { max-width: 55ch; }
.ships-hero__action { align-self: flex-start; }
.ships-hero__note { display: flex; flex-direction: column; gap: var(--space-2); max-width: 28ch; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-md); background: var(--color-sky-blue); font-size: var(--text-sm); line-height: var(--leading-small); box-shadow: var(--shadow-sticker); transform: rotate(-1deg); }
.ships-hero__figure { width: 100%; margin: 0; }
.ships-hero__figure .image-frame { width: 100%; aspect-ratio: 4 / 5; }
.ships-hero__figure figcaption { max-width: 42ch; }
.ships-scale__intro { width: 58.333%; min-width: 0; }
.ships-scale__intro p:not(.eyebrow) { max-width: 64ch; }
.ships-scale__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); align-items: start; }
.ships-scale__cards > * { width: 100%; min-width: 0; }
.ships-scale__card { padding: var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); background: var(--color-white); transition: transform var(--transition-fast); }
.ships-scale__card:hover { transform: translateY(-2px); }
.ships-scale__card--small { background: var(--color-paper-deep); }
.ships-scale__card--medium { margin-top: var(--space-6); }
.ships-scale__card--large { background: var(--color-sunny-yellow); }
.ships-scale__number { display: block; margin-bottom: var(--space-4); font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; line-height: 1; }
.ships-scale__card p { max-width: 32ch; }
.ships-scale__tip { display: flex; width: 41.667%; min-width: 0; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-md); background: var(--color-sky-blue); }
.ships-scale__tip > * { min-width: 0; }
.ships-scale__tip p { margin: 0; }
.ships-scale__compass { display: grid; flex: 0 0 2rem; width: 2rem; aspect-ratio: 1; place-items: center; border: var(--border-width) solid var(--color-dark-brown); border-radius: 50%; font-size: 1.5rem; }
.ships-map__heading { width: 50%; min-width: 0; }
.ships-map__heading .lead { max-width: 60ch; }
.ships-map__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); margin-top: var(--space-7); align-items: stretch; }
.ships-map__layout > * { width: 100%; min-width: 0; }
.ships-map__diagram { display: flex; min-height: 23rem; align-items: center; padding: var(--space-5); border: var(--border-strong-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); background: var(--color-white); }
.ships-map__ship { width: 100%; overflow: hidden; border: var(--border-width) solid var(--color-dark-brown); border-radius: 48% 48% 24% 24% / 18% 18% 15% 15%; background: var(--color-paper); }
.ships-map__bow, .ships-map__stern { padding: var(--space-2) var(--space-4); background: var(--color-sunny-yellow); font-weight: 700; text-align: center; }
.ships-map__deck { display: flex; min-width: 0; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-top: var(--border-width) solid var(--color-dark-brown); font-weight: 700; transition: background-color var(--transition-fast), color var(--transition-fast); }
.ships-map__deck span { min-width: 0; color: var(--color-brown-muted); font-size: var(--text-sm); font-weight: 400; text-align: right; }
.ships-map__deck--one, .ships-map__deck--two { background: var(--color-sky-blue); }
.ships-map__deck--three { background: var(--color-paper-deep); }
.ships-map__deck.is-highlighted { background: var(--color-orange); color: var(--color-paper); }
.ships-map__deck.is-highlighted span { color: var(--color-paper); }
.ships-map__directions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 700; text-align: center; }
.ships-map__annotations { display: flex; flex-direction: column; gap: var(--space-5); }
.ships-map__annotations > * { width: 100%; min-width: 0; }
.ships-map__annotation { padding: var(--space-5); border-left: var(--border-strong-width) solid var(--color-orange); background: var(--color-paper-deep); }
.ships-map__annotation p { max-width: 34ch; margin-bottom: 0; }
.ships-map__lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.ships-map__lower > * { width: 100%; min-width: 0; }
.ships-map__legend, .ships-map__practical { padding: var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); }
.ships-map__legend { background: var(--color-white); }
.ships-map__legend p { max-width: 42ch; margin-bottom: 0; }
.ships-map__legend-items { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.ships-map__legend-button { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-md); background: var(--color-paper); font-size: var(--text-sm); font-weight: 700; text-align: left; }
.ships-map__legend-button span { width: 1rem; flex: 0 0 1rem; aspect-ratio: 1; border: 1px solid var(--color-dark-brown); background: var(--color-sky-blue); }
.ships-map__legend-button[data-map-target="cabins"] span { background: var(--color-paper-deep); }
.ships-map__practical { background: var(--color-sunny-yellow); }
.ships-map__practical ol { margin-bottom: var(--space-3); }
.ships-map__practical p:last-child { max-width: 42ch; margin-bottom: 0; }
.ships-cabin__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.ships-cabin__layout > * { width: 100%; min-width: 0; }
.ships-cabin__figure { position: relative; margin: 0; }
.ships-cabin__figure .image-frame { width: 100%; }
.ships-cabin__sticker { position: absolute; z-index: 1; top: var(--space-4); right: calc(var(--space-4) * -1); }
.ships-cabin__content { min-width: 0; }
.ships-cabin__intro { max-width: 54ch; }
.ships-cabin__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.ships-cabin__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.ships-cabin__points > * { width: 100%; min-width: 0; }
.ships-cabin__points article { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-dark-brown); }
.ships-cabin__points h3 { font-size: var(--text-lead); }
.ships-cabin__points p { max-width: 34ch; margin-bottom: 0; }
.ships-dining__heading { width: 58.333%; min-width: 0; }
.ships-dining__heading .lead { max-width: 62ch; }
.ships-dining__figure { width: 100%; margin: var(--space-7) 0 0; }
.ships-dining__figure .image-frame { width: 100%; aspect-ratio: 16 / 9; }
.ships-dining__moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); align-items: end; }
.ships-dining__moments > * { width: 100%; min-width: 0; }
.ships-dining__moment { padding: var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); }
.ships-dining__moment p:last-child { max-width: 36ch; margin-bottom: 0; }
.ships-dining__moment--morning { background: var(--color-white); }
.ships-dining__moment--day { margin-bottom: var(--space-5); background: var(--color-sky-blue); }
.ships-dining__moment--evening { background: var(--color-paper-deep); }
.ships-outdoor__heading { width: 50%; min-width: 0; }
.ships-outdoor__heading .lead { max-width: 56ch; }
.ships-outdoor__media { position: relative; width: 100%; min-width: 0; margin-top: var(--space-7); }
.ships-outdoor__image { width: 100%; aspect-ratio: 16 / 9; }
.ships-outdoor__callout { position: absolute; z-index: 1; bottom: calc(var(--space-5) * -1); left: var(--space-5); width: min(33.333%, 29rem); min-width: 0; padding: var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); background: var(--color-sunny-yellow); }
.ships-outdoor__callout p { max-width: 40ch; margin-bottom: 0; }
.ships-outdoor__side { position: absolute; z-index: 1; right: var(--space-5); bottom: calc(var(--space-5) * -4); display: flex; width: min(25%, 20rem); min-width: 0; flex-direction: column; gap: var(--space-3); }
.ships-outdoor__side > * { width: 100%; min-width: 0; }
.ships-outdoor__label, .ships-outdoor__checklist { padding: var(--space-4); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-md); }
.ships-outdoor__label { transition: transform var(--transition-fast); }
.ships-outdoor__label:hover { transform: translateY(-2px); }
.ships-outdoor__label--walk { background: var(--color-white); }
.ships-outdoor__label--evening { background: var(--color-sky-blue); }
.ships-outdoor__label h3, .ships-outdoor__checklist h3 { font-size: var(--text-lead); }
.ships-outdoor__label p, .ships-outdoor__checklist p { margin-bottom: 0; }
.ships-outdoor__checklist { background: var(--color-paper); }
.ships-outdoor__checklist ol { margin-bottom: var(--space-3); }
.ships-evening__heading { width: 50%; min-width: 0; }
.ships-evening__heading .lead { max-width: 58ch; }
.ships-evening__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.ships-evening__panels > * { width: 100%; min-width: 0; }
.ships-evening__panel { position: relative; min-height: 100%; padding: clamp(var(--space-5), 4vw, var(--space-7)); border: var(--border-strong-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); transition: transform var(--transition-fast); }
.ships-evening__panel:hover { transform: translateY(-2px); }
.ships-evening__panel p { max-width: 45ch; margin-bottom: 0; }
.ships-evening__panel--theatre { background: var(--color-sea-deep); color: var(--color-paper); }
.ships-evening__panel--theatre h3 { color: var(--color-paper); }
.ships-evening__panel--social { background: var(--color-paper-deep); }
.ships-evening__star { position: absolute; top: var(--space-4); right: var(--space-5); color: var(--color-sunny-yellow); font-size: 3rem; }
.ships-evening__program { width: 100%; margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-md); background: var(--color-sky-blue); font-weight: 700; }
.ships-family__heading { width: 50%; min-width: 0; }
.ships-family__heading .lead { max-width: 58ch; }
.ships-family__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.ships-family__panels > * { width: 100%; min-width: 0; }
.ships-family__panel { position: relative; min-height: 100%; padding: var(--space-6); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); overflow: hidden; }
.ships-family__panel p { max-width: 44ch; margin-bottom: 0; }
.ships-family__panel--family { background: var(--color-sky-blue); }
.ships-family__panel--spa { background: var(--color-paper-deep); }
.ships-family__flag, .ships-family__sun { position: absolute; top: var(--space-4); right: var(--space-5); font-size: 2.4rem; }
.ships-family__sun { color: var(--color-orange); }
.ships-family__close { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-5); margin-top: var(--space-6); text-align: center; }
.ships-family__close > * { min-width: 0; }
.ships-family__close p { max-width: 42ch; margin: 0; }
.ships-port__heading { width: 58.333%; min-width: 0; }
.ships-port__heading .lead { max-width: 60ch; }
.ships-port__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.ships-port__steps::before { position: absolute; top: 2.25rem; right: 12%; left: 12%; z-index: 0; border-top: var(--border-width) dashed var(--color-dark-brown); content: ""; }
.ships-port__steps > * { z-index: 1; width: 100%; min-width: 0; }
.ships-port__step { padding: var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); }
.ships-port__step span { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; margin-bottom: var(--space-4); border: var(--border-width) solid var(--color-dark-brown); border-radius: 50%; background: var(--color-white); font-family: var(--font-heading); font-weight: 800; }
.ships-port__step p { max-width: 36ch; margin-bottom: 0; }
.ships-port__step--one { background: var(--color-sunny-yellow); }
.ships-port__step--two { background: var(--color-paper-deep); }
.ships-port__step--three { background: var(--color-sky-blue); }
.ships-port__cta { display: flex; width: min(100%, 38ch); min-width: 0; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-5); border: var(--border-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); background: var(--color-white); }
.ships-port__cta > * { min-width: 0; margin: 0; }
.ships-port__cta .button { align-self: flex-start; }
.ships-next__heading { width: 58.333%; min-width: 0; }
.ships-next__heading p:not(.eyebrow) { max-width: 56ch; }
.ships-next__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); align-items: start; }
.ships-next__links > * { width: 100%; min-width: 0; }
.ships-next__link { display: flex; min-height: 100%; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: var(--border-strong-width) solid var(--color-dark-brown); border-radius: var(--radius-lg); color: var(--color-dark-brown); text-decoration: none; transition: transform var(--transition-fast); }
.ships-next__link > * { min-width: 0; margin: 0; }
.ships-next__link:hover { color: var(--color-dark-brown); text-decoration: none; transform: translateY(-2px); }
.ships-next__link h3 { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
.ships-next__link h3 span { display: inline-block; transition: transform var(--transition-fast); }
.ships-next__link:hover h3 span { transform: rotate(4deg); }
.ships-next__link p { max-width: 34ch; }
.ships-next__link--yellow { background: var(--color-sunny-yellow); }
.ships-next__link--blue { margin-top: var(--space-5); background: var(--color-sky-blue); }
.ships-next__link--paper { background: var(--color-white); }
.ships-next__note { width: 41.667%; min-width: 0; margin: var(--space-7) auto 0; padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-dark-brown); font-family: var(--font-heading); font-size: var(--text-lead); line-height: var(--leading-lead); text-align: center; }
@media (max-width: 61.25rem) { .ships-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-5); } .ships-hero__panel { padding: var(--space-5); } .ships-hero__figure .image-frame { aspect-ratio: 3 / 4; } .ships-outdoor__callout, .ships-outdoor__side { position: static; width: 100%; } .ships-outdoor__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .ships-outdoor__image { grid-column: 1 / -1; } .ships-outdoor__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 58.75rem) { .ships-map__layout { grid-template-columns: 1fr; } .ships-map__annotations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ships-cabin__layout { grid-template-columns: 1fr; } .ships-cabin__figure { width: min(100%, 34rem); } .ships-cabin__points { grid-template-columns: 1fr; } }
@media (max-width: 55rem) { .ships-scale__cards, .ships-dining__moments, .ships-next__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ships-scale__card--large, .ships-dining__moment--evening, .ships-next__link--paper { grid-column: 1 / -1; } .ships-scale__card--medium, .ships-dining__moment--day, .ships-next__link--blue { margin-top: 0; margin-bottom: 0; } .ships-scale__tip { width: 62.5%; } .ships-port__steps { grid-template-columns: 1fr; } .ships-port__steps::before { top: 3rem; bottom: 3rem; left: 2.4rem; right: auto; border-top: 0; border-left: var(--border-width) dashed var(--color-dark-brown); } }
@media (max-width: 47.5rem) { .ships-hero__grid, .ships-evening__panels, .ships-family__panels { grid-template-columns: 1fr; } .ships-hero__panel .display-title { max-width: 24ch; font-size: clamp(2.625rem, 12vw, 3.75rem); } .ships-hero__action { width: 100%; } .ships-hero__figure .image-frame { aspect-ratio: 16 / 9; } .ships-scale__intro, .ships-map__heading, .ships-dining__heading, .ships-outdoor__heading, .ships-evening__heading, .ships-family__heading, .ships-port__heading, .ships-next__heading { width: 100%; } .ships-map__annotations, .ships-map__lower { grid-template-columns: 1fr; } .ships-map__diagram { min-height: 0; padding: var(--space-4); } .ships-map__deck { flex-direction: column; } .ships-map__deck span { text-align: left; } .ships-dining__moments, .ships-next__links { grid-template-columns: 1fr; } .ships-dining__moment--evening, .ships-next__link--paper { grid-column: auto; } .ships-outdoor__media, .ships-outdoor__side { grid-template-columns: 1fr; } .ships-outdoor__image { aspect-ratio: 4 / 3; } .ships-family__close .button, .ships-port__cta, .ships-port__cta .button { width: 100%; } .ships-port__cta .button { align-self: stretch; } .ships-next__note { width: 100%; } }
@media (max-width: 40rem) { .ships-scale__cards { grid-template-columns: 1fr; } .ships-scale__card--large { grid-column: auto; } .ships-scale__tip { width: 100%; } .ships-cabin__sticker { right: var(--space-2); } .ships-cabin__figure { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ships-scale__card:hover, .ships-outdoor__label:hover, .ships-evening__panel:hover, .ships-next__link:hover, .ships-next__link:hover h3 span { transform: none; } }