main[data-statki-page] { overflow: clip; }

.statki-hero { padding: calc(var(--space-9) + 2rem) 0 var(--space-9); }
.statki-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; }
.statki-hero__copy { min-width: 0; max-width: 31.875rem; display: flex; flex-direction: column; gap: var(--space-4); }
.statki-hero__copy > * { margin: 0; }
.statki-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-caption); }
.statki-breadcrumbs span { color: var(--color-text-muted); }
.statki-hero__copy h1 { font-size: clamp(2.75rem, 5vw, 4rem); }
.statki-hero__lead { font-size: var(--text-lead); line-height: var(--leading-lead); }
.statki-hero__scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--border); border-bottom: var(--border); }
.statki-hero__scope span { min-width: 0; padding: var(--space-3) var(--space-2); color: var(--color-deep-harbour); font-size: var(--text-meta); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.statki-hero__scope span + span { border-left: var(--border); }
.statki-hero__media { min-width: 0; height: 36.25rem; overflow: hidden; border: var(--border); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 5.5rem; }
.statki-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

.statki-search { background: var(--color-limestone); }
.statki-section-heading { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.statki-section-heading > * { margin: 0; }
.statki-search__intro { max-width: 38.75rem; }
.statki-search__panel { margin-top: var(--space-6); padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-mist-blue); }
.statki-search__panel form { display: flex; flex-direction: column; gap: var(--space-5); }
.statki-search__form-row { display: flex; gap: var(--space-3); min-width: 0; }
.statki-search__field { flex: 1 1 auto; min-width: 22.5rem; }
.statki-search__field label { display: block; }
.statki-search__button { flex: 0 0 10.5rem; width: 10.5rem; }
.statki-filter-intro { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); }
.statki-filter-intro > * { min-width: 0; }
.statki-filter-intro p { max-width: 42.5rem; margin: 0; }
.statki-text-button { min-height: 2.75rem; padding: .5rem; border: 0; background: transparent; color: var(--color-mediterranean-blue); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-coral); text-underline-offset: .18em; }
.statki-filter-toggle { display: none; }
.statki-filters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); min-width: 0; }
.statki-filter-group { position: relative; min-width: 0; }
.statki-filter-group:nth-child(1), .statki-filter-group:nth-child(5), .statki-filter-group:nth-child(8) { grid-column: span 4; }
.statki-filter-group:nth-child(2), .statki-filter-group:nth-child(3), .statki-filter-group:nth-child(6), .statki-filter-group:nth-child(7), .statki-filter-group:nth-child(9) { grid-column: span 2; }
.statki-filter-group:nth-child(4) { grid-column: span 2; }
.statki-filter-trigger { display: flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .625rem .75rem; border: var(--border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-deep-harbour); font-size: var(--text-control); font-weight: 600; text-align: left; }
.statki-filter-trigger.is-selected { border-color: var(--color-mediterranean-blue); background: var(--color-mediterranean-blue); color: var(--color-white); }
.statki-filter-count { display: inline-grid; min-width: 1.25rem; min-height: 1.25rem; place-items: center; border-radius: 50%; background: var(--color-seafoam); color: var(--color-deep-harbour); font-size: .75rem; }
.statki-filter-menu { position: absolute; z-index: 4; top: calc(100% + .25rem); left: 0; width: max-content; min-width: 100%; max-width: 18rem; padding: var(--space-3); border: var(--border); border-radius: var(--radius-md); background: var(--color-pearl-white); box-shadow: var(--shadow-card); }
.statki-filter-menu label { display: flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; margin: 0; font-weight: 400; }
.statki-data-note { max-width: 42.5rem; margin: var(--space-5) 0 0; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-left: 2px solid var(--color-coral); color: var(--color-text-muted); font-size: var(--text-caption); }

.statki-results__top { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: end; }
.statki-results__intro { max-width: 42.5rem; display: flex; flex-direction: column; gap: var(--space-3); }
.statki-results__intro > * { margin: 0; }
.statki-results__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); min-width: 0; }
.statki-results__tools label { min-width: 10.5rem; margin: 0; }
.statki-results__tools select { margin-top: var(--space-2); }
.statki-view-switch { display: flex; align-self: end; gap: .25rem; padding: .25rem; border: var(--border); border-radius: var(--radius-sm); background: var(--color-pearl-white); }
.statki-view-switch button { min-height: 2.25rem; padding: .4rem .65rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-deep-harbour); font-weight: 600; }
.statki-view-switch button.is-active { background: var(--color-mediterranean-blue); color: var(--color-white); }
.statki-results-list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.statki-ship-card { min-width: 0; padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-card); }
.statki-ship-card__main { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-5); min-width: 0; }
.statki-ship-card__media { min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xl); background: var(--color-mist-blue); }
.statki-ship-card__media img { width: 100%; height: 100%; object-fit: cover; }
.statki-ship-card__copy, .statki-ship-card__aside { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.statki-ship-card__copy > *, .statki-ship-card__aside > * { margin: 0; }
.statki-ship-card__line { color: var(--color-mediterranean-blue); font-size: var(--text-meta); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.statki-ship-card__summary { color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; }
.statki-key-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.statki-key-data div, .statki-spec-grid div { min-width: 0; }
.statki-key-data dt, .statki-spec-grid dt { color: var(--color-text-muted); font-size: var(--text-meta); font-weight: 600; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }
.statki-key-data dd, .statki-spec-grid dd { margin: var(--space-1) 0 0; color: var(--color-deep-harbour); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.3; }
.statki-ship-card__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.statki-ship-card__actions .button { width: 100%; }
.statki-compare-button.is-selected { border-color: var(--color-deep-harbour); background: var(--color-seafoam); color: var(--color-deep-harbour); }
.statki-expand { margin-top: var(--space-4); border-top: var(--border); padding-top: var(--space-4); }
.statki-expand button { min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--color-mediterranean-blue); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-coral); text-underline-offset: .18em; }
.statki-full-spec { margin-top: var(--space-4); }
.statki-spec-grid { display: grid; grid-template-columns: repeat(5, minmax(9.375rem, 1fr)); gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-mist-blue); }
.statki-comparison-panel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: center; margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-deep-harbour); border-radius: var(--radius-lg); background: var(--color-seafoam); }
.statki-comparison-panel__copy { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.statki-comparison-panel__copy > * { margin: 0; }
.statki-comparison-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.statki-comparison-list li { display: flex; align-items: center; gap: var(--space-2); padding: .35rem .5rem; border: 1px solid var(--color-mediterranean-blue); border-radius: var(--radius-sm); background: var(--color-pearl-white); font-size: var(--text-caption); font-weight: 600; }
.statki-comparison-list button { min-height: 1.8rem; border: 0; background: transparent; color: var(--color-mediterranean-blue); text-decoration: underline; }
.statki-comparison-panel__action { min-width: 0; }
.statki-comparison-panel__action .button { width: 100%; }
.statki-results-area[data-view="comparison"] .statki-results-list { overflow-x: auto; flex-direction: row; padding-bottom: var(--space-3); scroll-snap-type: x mandatory; }
.statki-results-area[data-view="comparison"] .statki-ship-card { flex: 0 0 min(52rem, 88vw); scroll-snap-align: start; }

.statki-reading { background: var(--color-mist-blue); }
.statki-reading__lead { max-width: 42.5rem; }
.statki-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.statki-reading-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding-left: var(--space-4); border-left: 2px solid var(--color-mediterranean-blue); }
.statki-reading-card > * { margin: 0; }
.statki-reading-card p, .statki-reading-card li { max-width: 21.25rem; }
.statki-reading-card ul { padding-left: 1.25em; }

.statki-deck__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(16.25rem, 3fr); gap: var(--space-6); align-items: start; }
.statki-deck__copy { max-width: 35rem; min-width: 0; }
.statki-deck__copy ol { counter-reset: checks; margin-bottom: 0; padding: 0; list-style: none; }
.statki-deck__copy li { position: relative; min-height: 2rem; padding-left: 2.75rem; }
.statki-deck__copy li + li { margin-top: var(--space-3); }
.statki-deck__copy li::before { position: absolute; top: 0; left: 0; color: var(--color-mediterranean-blue); content: counter(checks, decimal-leading-zero); counter-increment: checks; font-size: var(--text-meta); font-weight: 700; letter-spacing: .05em; }
.statki-deck__media { min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; border: var(--border); border-radius: var(--radius-xl); }
.statki-deck__media img { width: 100%; height: 100%; object-fit: cover; }
.statki-deck__tip { min-width: 0; margin-top: 7rem; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-seafoam); }
.statki-deck__tip h3 { margin-bottom: var(--space-3); }
.statki-deck__tip ul { margin-bottom: 0; }
.statki-deck__tip li + li { margin-top: var(--space-3); }

.statki-scenarios { background: var(--color-limestone); }
.statki-scenarios__intro { max-width: 42.5rem; }
.statki-scenarios-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.statki-scenario { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-pearl-white); }
.statki-scenario > * { margin: 0; }
.statki-scenario--primary { grid-column: span 6; background: var(--color-white); }
.statki-scenario:not(.statki-scenario--primary) { grid-column: span 2; }
.statki-scenario__number { color: var(--color-coral); font-size: var(--text-meta); font-weight: 700; letter-spacing: .12em; }
.statki-scenario p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; }
.statki-scenario a { font-weight: 600; }

.statki-method { position: relative; }
.statki-method::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-mediterranean-blue), transparent); content: ""; }
.statki-method__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 4fr); gap: 8.333%; align-items: start; }
.statki-method__copy { max-width: 38.75rem; min-width: 0; }
.statki-method__copy ul { margin-bottom: 0; }
.statki-method__copy li + li { margin-top: var(--space-2); }
.statki-status-panel { min-width: 0; padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-mist-blue); }
.statki-status-list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.statki-status-list div { min-width: 0; }
.statki-status-list dt { color: var(--color-deep-harbour); font-size: var(--text-control); font-weight: 700; }
.statki-status-list dd { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-caption); line-height: 1.45; }

.statki-guides { background: var(--color-limestone); }
.statki-guides__intro { max-width: 42.5rem; }
.statki-guides-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--space-5); margin-top: var(--space-6); }
.statki-guide-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg); background: var(--color-pearl-white); box-shadow: var(--shadow-card); transition: transform var(--transition-standard), border-color var(--transition-standard); }
.statki-guide-card > * { margin: 0; }
.statki-guide-card:hover { border-color: var(--color-mediterranean-blue); transform: translateY(-2px); }
.statki-guide-card p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; }
.statki-guide-card__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.statki-guide-card__links a { min-width: 0; min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; }
.statki-guide-card__eyebrow { color: var(--color-coral); font-size: var(--text-meta); font-weight: 700; letter-spacing: .1em; }

.statki-closing { position: relative; background: var(--color-seafoam); }
.statki-closing::before { position: absolute; top: 1.25rem; right: 0; left: 0; height: 1px; background: var(--color-mediterranean-blue); content: ""; opacity: .45; }
.statki-closing__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8.333%; align-items: center; }
.statki-closing__copy { max-width: 35rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.statki-closing__copy > * { margin: 0; }
.statki-closing__note { max-width: 32.5rem; padding-top: var(--space-3); border-top: 1px solid rgb(18 55 70 / 30%); color: var(--color-text-muted); font-size: var(--text-caption); }
.statki-closing__media { min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; border: var(--border); border-radius: var(--radius-xl); }
.statki-closing__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 61.1875rem) {
  .statki-hero { padding-top: calc(var(--space-8) + 2rem); }
  .statki-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .statki-hero__copy { max-width: 31.875rem; }
  .statki-hero__media { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); }
  .statki-ship-card__main { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-4); }
}

@media (max-width: 56.25rem) {
  .statki-search__form-row { flex-wrap: wrap; }
  .statki-search__field { min-width: 17.5rem; }
  .statki-filter-toggle { display: inline-flex; width: fit-content; }
  .statki-filters { position: fixed; z-index: 90; inset: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; padding: 5.5rem var(--container-padding) var(--space-5); background: var(--color-pearl-white); }
  .statki-filter-group { width: 100%; }
  .statki-filter-menu { position: static; width: 100%; max-width: none; margin-top: var(--space-2); box-shadow: none; }
  .statki-filter-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
  .statki-filter-actions .button { flex: 1 1 0; }
  .statki-results__top { grid-template-columns: 1fr; gap: var(--space-4); }
  .statki-results__tools { justify-content: flex-start; }
  .statki-ship-card__main { grid-template-columns: 1fr; gap: var(--space-4); }
  .statki-ship-card__media { max-width: 34rem; }
  .statki-ship-card__aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .statki-ship-card__actions { grid-column: span 2; }
  .statki-reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statki-reading-card:nth-child(3) { grid-column: span 2; }
  .statki-deck__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .statki-deck__media { max-width: 38rem; }
  .statki-deck__tip { max-width: 32rem; margin-top: 0; }
  .statki-scenarios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statki-scenario--primary, .statki-scenario:not(.statki-scenario--primary) { grid-column: span 1; }
  .statki-scenario--primary { grid-column: span 2; }
  .statki-method__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .statki-status-panel { max-width: 38rem; }
  .statki-guides-grid { grid-template-columns: 1fr; }
  .statki-guide-card { min-height: 0; }
  .statki-closing__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .statki-closing__media { max-width: 38rem; }
}

@media (max-width: 37.5rem) {
  .statki-hero { padding-top: calc(var(--space-7) + 2rem); }
  .statki-hero__copy h1 { font-size: 2.375rem; }
  .statki-hero__lead { font-size: 1.1875rem; }
  .statki-hero__scope { grid-template-columns: 1fr; }
  .statki-hero__scope span + span { border-top: var(--border); border-left: 0; }
  .statki-hero__media { aspect-ratio: 5 / 4; }
  .statki-search__panel { padding: var(--space-4); }
  .statki-search__field, .statki-search__button { flex: 1 1 100%; width: 100%; min-width: 0; }
  .statki-filter-intro { align-items: start; flex-direction: column; }
  .statki-results__tools { align-items: stretch; flex-direction: column; }
  .statki-results__tools label { width: 100%; min-width: 0; }
  .statki-view-switch { width: fit-content; }
  .statki-ship-card { padding: var(--space-4); }
  .statki-ship-card__media { max-width: none; aspect-ratio: 5 / 4; }
  .statki-ship-card__aside { display: flex; }
  .statki-key-data { display: flex; overflow-x: auto; gap: var(--space-3); padding-bottom: var(--space-2); scroll-snap-type: x mandatory; }
  .statki-key-data div { flex: 0 0 8rem; padding: var(--space-3); border: var(--border); border-radius: var(--radius-md); background: var(--color-pearl-white); scroll-snap-align: start; }
  .statki-ship-card__actions { display: flex; }
  .statki-spec-grid { grid-template-columns: repeat(5, minmax(9rem, 1fr)); overflow-x: auto; }
  .statki-comparison-panel { grid-template-columns: 1fr; padding: var(--space-4); }
  .statki-reading-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .statki-reading-card:nth-child(3) { grid-column: auto; }
  .statki-reading-card p, .statki-reading-card li { max-width: none; }
  .statki-deck__tip { max-width: none; padding: var(--space-4); }
  .statki-scenarios-grid { grid-template-columns: 1fr; }
  .statki-scenario--primary, .statki-scenario:not(.statki-scenario--primary) { grid-column: auto; }
  .statki-guide-card__links { grid-template-columns: 1fr; }
  .statki-closing__copy .button { width: 100%; }
}