.home-page { overflow: hidden; }
.home-page a { text-underline-offset: .18em; }
.home-hero { padding: var(--space-9) 0 var(--space-8); }
.home-hero__grid { display: grid; align-items: start; }
.home-hero__grid > * { min-width: 0; }
.home-hero__title-block { grid-column: 1 / 12; }
.home-hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); color: var(--color-mauve-deep); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-hero__eyebrow::before { width: 2rem; height: 1px; background: var(--color-mauve); content: ""; }
.home-hero__title { max-width: 11ch; margin-bottom: 0; font-size: var(--text-display); }
.home-hero__ship { grid-column: 4 / span 4; width: 100%; margin: 0 0 -2.5rem; }
.home-hero__ship img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); object-fit: cover; }
.home-hero__sea { grid-column: 9 / span 4; width: 100%; margin: 0; }
.home-hero__sea img { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); object-fit: cover; }
.home-hero figcaption { margin: var(--space-2) 0 0; }
.home-hero figcaption span { margin-right: var(--space-2); color: var(--color-mauve-deep); font-weight: 700; }
.home-hero__intro { display: flex; grid-column: 8 / span 4; min-width: 0; flex-direction: column; gap: var(--space-5); margin-top: -2rem; border-radius: var(--radius-md); padding: var(--space-5); box-shadow: 20px 20px 60px #d9d4cc, -20px -20px 60px #ffffff; }
.home-hero__intro p { max-width: 29rem; margin: 0; font-size: var(--text-lead); line-height: var(--leading-lead); }
.home-hero__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }
.home-start__intro { width: min(100%, 37rem); }
.home-start__cards { display: grid; grid-template-columns: 3fr 3fr 5fr 1fr; gap: var(--space-5); align-items: start; margin-top: var(--space-7); }
.home-start__cards > * { min-width: 0; }
.home-topic-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.home-topic-card p, .home-topic-card h3 { margin: 0; }
.home-topic-card a { width: fit-content; margin-top: auto; font-weight: 700; }
.home-topic-card--wide { grid-column: 3 / span 2; }
.home-topic-card__links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-4); }
.home-ship__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.home-ship__grid > * { min-width: 0; }
.home-ship__heading { grid-column: 1 / span 7; }
.home-ship__heading h2 { max-width: 17ch; }
.home-ship__heading a { font-weight: 700; }
.home-ship__items { display: flex; grid-column: 5 / span 6; min-width: 0; flex-direction: column; gap: var(--space-6); }
.home-numbered-item { display: grid; grid-template-columns: minmax(2.5rem, 1fr) minmax(0, 5fr); gap: var(--space-4); border-top: var(--border-default); padding-top: var(--space-5); }
.home-numbered-item > * { min-width: 0; }
.home-numbered-item > span, .home-prep__items > article > span, .home-next__items span { color: var(--color-mauve-deep); font-size: var(--text-sm); font-weight: 700; }
.home-numbered-item h3 { margin-bottom: var(--space-3); }
.home-numbered-item p { max-width: 39rem; }
.home-numbered-item div > :last-child { margin-bottom: 0; }
.home-numbered-item a { font-weight: 700; }
.home-board__heading { width: min(100%, 34rem); }
.home-board__cards { display: grid; grid-template-columns: 3fr 5fr 3fr 1fr; gap: var(--space-5); align-items: stretch; margin-top: var(--space-7); }
.home-board__cards > * { min-width: 0; }
.home-board-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.home-board-card > * { margin: 0; }
.home-board-card ul { padding-left: 1.25rem; }
.home-board-card a { width: fit-content; margin-top: auto; font-weight: 700; }
.home-board-card--wide { grid-column: 2 / span 2; }
.home-destinations__intro { width: min(100%, 42rem); }
.home-destinations__intro > :last-child { margin-bottom: 0; font-weight: 700; }
.home-filter { display: grid; grid-template-columns: 3fr 7fr 2fr; gap: var(--space-5); align-items: end; margin-top: var(--space-7); }
.home-filter > * { min-width: 0; }
.home-filter__interests { display: grid; gap: var(--space-2); }
.home-filter__interests legend { font-size: var(--text-sm); font-weight: 700; }
.home-filter__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.home-filter__choices label { display: flex; min-width: 0; min-height: 2.75rem; align-items: center; gap: var(--space-2); border: var(--border-default); border-radius: var(--radius-xs); background: var(--color-paper); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.home-filter__choices label:has(input:checked) { border-color: var(--color-mauve-deep); background: rgb(154 140 152 / 16%); }
.home-filter__reset { display: flex; min-width: 0; flex-direction: column; gap: var(--space-2); }
.home-filter__reset p { margin: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }
.home-destination-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.home-destination-results > * { min-width: 0; }
.home-destination-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.home-destination-card > * { margin: 0; }
.home-destination-card h3 { font-size: clamp(1.45rem, 2vw, 1.8rem); }
.home-destination-card__tags { color: var(--color-ink-muted); font-size: var(--text-sm); }
.home-destination-card a { width: fit-content; margin-top: auto; font-weight: 700; }
.home-no-results { margin-top: var(--space-5); color: var(--color-ink-muted); }
.home-routes__intro { width: min(100%, 42rem); }
.home-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.home-route-grid > * { min-width: 0; }
.home-route { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.home-route > * { margin: 0; }
.home-route__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.home-route__steps li { position: relative; min-width: 0; padding-left: var(--space-5); }
.home-route__steps li::before { position: absolute; top: .35em; left: 0; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-mauve-deep); content: ""; }
.home-cabins__intro { width: min(100%, 43rem); }
.home-cabin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.home-cabin-grid > * { min-width: 0; }
.home-cabin-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.home-cabin-card > * { margin: 0; }
.home-cabin-card__select { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); color: var(--color-mauve-deep); font-size: var(--text-sm); font-weight: 700; }
.home-cabin-card dl { display: grid; gap: var(--space-3); margin-top: auto; }
.home-cabin-card dl div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); border-top: var(--border-default); padding-top: var(--space-2); }
.home-cabin-card dd { margin: 0; }
.home-cabin-actions { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); }
.home-cabin-actions p { margin: 0; color: var(--color-ink-muted); }
.home-comparison { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); margin-top: var(--space-5); padding: var(--space-5); }
.home-comparison > * { min-width: 0; }
.home-comparison h3, .home-comparison p { margin: 0; }
.home-comparison__table { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.home-comparison__table section { min-width: 0; border-top: var(--border-default); padding-top: var(--space-3); }
.home-comparison__table h4 { margin-bottom: var(--space-3); }
.home-comparison__table dl { display: grid; gap: var(--space-2); margin: 0; }
.home-comparison__table dd { margin: 0; }
.home-prep__heading { width: min(100%, 42rem); }
.home-prep__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.home-prep__items > * { min-width: 0; }
.home-prep__items article { min-width: 0; border-top: var(--border-default); padding-top: var(--space-5); }
.home-prep__items h3 { margin-top: var(--space-3); }
.home-prep__items ul { margin-bottom: var(--space-4); }
.home-prep__items a { font-weight: 700; }
.home-faq__grid { display: grid; grid-template-columns: 4fr 7fr 1fr; gap: var(--space-5); }
.home-faq__grid > * { min-width: 0; }
.home-faq__list { grid-column: 2 / span 2; }
.home-faq__list details { padding-bottom: var(--space-4); }
.home-faq__list summary { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-heading); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; }
.home-faq__list summary::after { flex: 0 0 auto; color: var(--color-mauve-deep); content: "+"; font-family: var(--font-body); font-size: 1.4rem; }
.home-faq__list details[open] summary::after { content: "−"; }
.home-faq__list details p { width: min(100%, 42rem); margin: var(--space-4) 0 0; }
.home-next__heading { width: min(100%, 27rem); }
.home-next__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.home-next__items > * { min-width: 0; }
.home-next__items article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border-top: var(--border-default); padding-top: var(--space-4); }
.home-next__items h3, .home-next__items p { margin: 0; }
.home-next__items a { width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; margin-top: auto; font-weight: 700; }
@media (max-width: 67.5rem) { .home-hero__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.25rem; } .home-hero__title-block { grid-column: 1 / -1; } .home-hero__ship { grid-column: 2 / span 4; margin-bottom: 0; } .home-hero__sea { grid-column: 6 / span 3; } .home-hero__intro { grid-column: 5 / span 4; margin-top: 0; } .home-cabin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 61.25rem) { .home-start__cards { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-topic-card { grid-column: span 4; } .home-topic-card--wide { grid-column: 1 / -1; } .home-ship__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-ship__heading { grid-column: 1 / span 6; } .home-ship__items { grid-column: 2 / span 6; } .home-board__cards { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-board-card { grid-column: span 4; } .home-board-card--wide { grid-column: span 4; } .home-board-card:last-child { grid-column: 1 / -1; } .home-filter { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-filter__region, .home-filter__interests { grid-column: span 4; } .home-filter__reset { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; } .home-destination-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-route:last-child { grid-column: 1 / -1; } .home-prep__items { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-prep__items article { grid-column: span 4; } .home-prep__items article:last-child { grid-column: 1 / -1; } .home-faq__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-faq__grid > div:first-child, .home-faq__list { grid-column: 1 / -1; } .home-next__items { grid-template-columns: repeat(8, minmax(0, 1fr)); } .home-next__items article { grid-column: span 4; } .home-next__items article:last-child { grid-column: 1 / -1; } }
@media (max-width: 47.9375rem) { .home-hero { padding-top: var(--space-7); } .home-hero__grid { display: flex; flex-direction: column; gap: var(--space-5); } .home-hero__title-block, .home-hero__ship, .home-hero__sea, .home-hero__intro { width: 100%; } .home-hero__title { font-size: clamp(3rem, 14vw, 4.5rem); } .home-hero__intro { order: 2; padding: var(--space-4); } .home-hero__ship { order: 3; width: calc(100% + 2rem); margin-inline: -1rem; } .home-hero__sea { order: 4; width: calc(100% + 2rem); margin-inline: -1rem; } .home-hero figcaption { width: calc(100% - 2rem); margin-inline: auto; } .home-hero__actions { flex-direction: column; } .home-hero__actions a { width: 100%; } .home-start__cards, .home-board__cards, .home-destination-results, .home-route-grid, .home-cabin-grid, .home-prep__items, .home-next__items { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .home-topic-card, .home-topic-card--wide, .home-board-card, .home-board-card--wide, .home-board-card:last-child, .home-route:last-child, .home-prep__items article, .home-prep__items article:last-child, .home-next__items article, .home-next__items article:last-child { grid-column: 1; } .home-ship__grid { display: block; } .home-ship__heading { width: 100%; } .home-ship__items { width: 100%; margin-top: var(--space-6); } .home-numbered-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .home-filter { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } .home-filter__region, .home-filter__interests, .home-filter__reset { grid-column: 1; } .home-filter__choices { grid-template-columns: minmax(0, 1fr); } .home-filter__reset { align-items: stretch; flex-direction: column; } .home-filter__reset button { width: 100%; } .home-cabin-actions { align-items: stretch; flex-direction: column; } .home-cabin-actions button { width: 100%; } .home-comparison { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } .home-comparison button { width: 100%; } .home-comparison__table { grid-template-columns: minmax(0, 1fr); } .home-faq__grid { grid-template-columns: minmax(0, 1fr); } .home-faq__grid > div:first-child, .home-faq__list { grid-column: 1; } .home-faq__list summary { padding-block: var(--space-2); } .home-faq__list details p { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .home-page * { transition: none !important; transform: none !important; } }