/* Seawolf Cove home: "Work order" grammar. One custom job through five
   stations, a work-order ticket as the navigation, stamped as each lands. */

:root { --rail: 0px; --strip: 0px; }
@media (min-width: 1180px) { :root { --rail: 212px; } }
@media (max-width: 1179px) { :root { --strip: 58px; } body { padding-bottom: var(--strip); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.anchor { position: relative; top: calc(-1 * var(--nav-h)); }

/* shared station type */
.station__label { display: flex; align-items: center; gap: .7rem; color: var(--surf); margin: 0 0 1.2rem; }
.station__label span { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.6rem; padding: 0 .4rem; border: 1px solid rgb(79 176 172 / .5); border-radius: 2px; color: var(--white); }
.station__title { font: 900 clamp(2.8rem, 5.6vw, 5.6rem)/.88 var(--sc-font-display); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 1.4rem; text-wrap: balance; }
.station__title span { color: var(--teal); }
.home .sc-body { color: var(--sc-ink-soft); font-size: 1.08rem; line-height: 1.65; }

/* =========================================================== THE ORDER ===
   Desktop: a ticket pinned to the left edge. Phones: a strip along the bottom. */
.order {
  position: fixed; z-index: 70; left: 16px; top: calc(var(--nav-h) + 22px); width: 180px;
  background: rgb(18 38 46 / .92); border: 1px solid var(--sc-hairline-strong); border-radius: 3px;
  box-shadow: var(--sc-e2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.order__head { display: grid; gap: .25rem; margin: 0; padding: .8rem .9rem .7rem; border-bottom: 1px dashed var(--sc-hairline-strong); font: 500 .66rem/1.2 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--surf); }
.order__no { color: var(--sc-ink-soft); }
.order ol { list-style: none; margin: 0; padding: .3rem 0; }
.order a {
  position: relative; display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: 0 .9rem;
  text-decoration: none; color: var(--sc-ink-soft); transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.order a:hover { color: var(--white); background: rgb(236 237 232 / .04); }
.order a[aria-current="step"] { color: var(--white); }
.order a[aria-current="step"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--surf); }
.order__n { font: 500 .72rem/1 var(--sc-font-mono); letter-spacing: .06em; color: var(--surf); }
.order__v { font: 800 1.3rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: .02em; }

/* the stamp: rubber, slightly off-square, lands with a thud */
.stamp {
  position: absolute; right: .6rem; top: 50%; pointer-events: none;
  padding: .2rem .35rem; border: 2px solid var(--surf); border-radius: 3px;
  font: 600 .56rem/1 var(--sc-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--surf);
  background: rgb(6 11 22 / .55);
  opacity: 0; transform: translateY(-50%) rotate(var(--r, -8deg)) scale(1.9);
  -webkit-mask-image: radial-gradient(140% 120% at 30% 40%, #000 62%, rgb(0 0 0 / .55) 80%, #000 92%);
          mask-image: radial-gradient(140% 120% at 30% 40%, #000 62%, rgb(0 0 0 / .55) 80%, #000 92%);
}
.stamp.is-on { opacity: .95; transform: translateY(-50%) rotate(var(--r, -8deg)) scale(1); transition: opacity 90ms linear, transform 260ms cubic-bezier(.3, 1.35, .5, 1); }
.order li.is-thud { animation: thud 260ms var(--ease); }
@keyframes thud { 0% { transform: none; } 35% { transform: translateY(2px); } 100% { transform: none; } }

@media (max-width: 1179px) {
  .order { left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 0; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .order__head { display: none; }
  .order ol { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; }
  .order a { flex-direction: column; justify-content: center; gap: .3rem; min-height: var(--strip); padding: 0 .2rem; }
  .order__v { font-size: 1rem; }
  .order a[aria-current="step"]::before { left: 18%; right: 18%; top: 0; bottom: auto; width: auto; height: 2px; }
  /* no room for a word stamp in a 78px cell: the number takes the ink instead */
  .stamp { display: none; }
  .order__n { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.25rem; border: 1.5px solid transparent; border-radius: 2px; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
  .order li.is-stamped .order__n { background: var(--surf); color: var(--abyss); transform: rotate(var(--r, -6deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp, .stamp.is-on { transition: none; }
  .order li.is-thud { animation: none; }
}

/* ============================================================ 1 · BENCH === */
.bench__stage { height: 100vh; height: 100svh; overflow: hidden; background: var(--abyss); }
.bench__plate, .bench__plate img, .bench__live { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bench__plate img, .bench__live { object-fit: cover; object-position: 62% 50%; }
.bench__live { opacity: 0; transition: opacity 600ms ease-out; }
.bench__live.is-on { opacity: 1; }
.bench__plate { transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--hp, 0) * -2.5vh), 0) scale(calc(1.03 + var(--hp, 0) * .05)); transform-origin: 70% 60%; will-change: transform; }
.bench__light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 46% at 72% 44%, rgb(79 176 172 / .16), transparent 70%);
  opacity: calc(.8 + var(--hp, 0) * .4);
}
.bench__part {
  position: absolute; left: 58%; bottom: 17vh; width: clamp(240px, 24vw, 440px); aspect-ratio: 1;
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--hp, 0) * -5vh), 0) scale(calc(1 + var(--hp, 0) * .1));
  transform-origin: 50% 92%; will-change: transform;
}
.bench__part img { position: relative; width: 100%; height: 100%; max-width: none; }
.bench__shadow { position: absolute; left: 12%; right: 10%; bottom: 5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent); filter: blur(6px); }
.bench__paper {
  position: absolute; right: -2vw; bottom: -7vh; width: clamp(380px, 40vw, 760px); height: auto; max-width: none;
  transform: translate3d(calc(var(--mx, 0) * -30px + var(--hp, 0) * 8vw), calc(var(--hp, 0) * 42vh), 0) rotate(calc(-9deg + var(--hp, 0) * -6deg));
  filter: blur(.4px) drop-shadow(0 30px 40px rgb(0 0 0 / .55)); will-change: transform;
}
.bench__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(6 11 22 / .95) 0, rgb(6 11 22 / .9) calc(var(--rail) + 34vw), rgb(6 11 22 / 0) calc(var(--rail) + 54vw)); }
@media (max-width: 860px) {
  /* dark behind the copy, with a soft window over the printer's build plate so the print shows */
  .bench__scrim { background: linear-gradient(180deg, rgb(6 11 22 / .9) 0, rgb(6 11 22 / .75) 46%, rgb(6 11 22 / 0) 62%);
    -webkit-mask-image: radial-gradient(22% 9% at 94% 61%, transparent 0, transparent 45%, #000 100%);
            mask-image: radial-gradient(22% 9% at 94% 61%, transparent 0, transparent 45%, #000 100%); }
}
.bench__fade { position: absolute; inset: auto 0 0 0; height: 22vh; background: linear-gradient(transparent, var(--abyss)); pointer-events: none; }

.bench__copy { position: absolute; z-index: 3; left: calc(var(--rail) + var(--sc-gutter)); top: 50%; translate: 0 -46%; max-width: 680px; }
.bench__eyebrow { color: var(--white); margin: 0 0 1.4rem; display: flex; align-items: center; gap: .8rem; }
.bench__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--surf); }
.bench__title { font: 900 clamp(4rem, 7.4vw, 8rem)/.85 var(--sc-font-display); text-transform: uppercase; letter-spacing: .005em; margin: 0; white-space: nowrap; }
.bench__title span { color: var(--teal); }
.bench__sub { color: #C7CED0; font-size: 1.12rem; line-height: 1.6; max-width: 42ch; margin: 1.6rem 0 2rem; }
.bench__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.bench__beat {
  position: absolute; z-index: 3; left: calc(var(--rail) + var(--sc-gutter)); top: 50%; translate: 0 -50%; margin: 0; max-width: 11ch;
  font: 900 clamp(3rem, 6.4vw, 6.4rem)/.88 var(--sc-font-display); text-transform: uppercase;
}

@media (max-width: 860px) {
  .bench__plate img, .bench__live { object-position: 74% 50%; }
  .bench__copy { top: calc(var(--nav-h) + 4vh); translate: 0 0; right: var(--sc-gutter); }
  .bench__title { font-size: clamp(3.4rem, 15vw, 5rem); }
  .bench__sub { font-size: 1rem; margin: 1rem 0 1.3rem; max-width: 34ch; }
  .bench__eyebrow { margin-bottom: 1rem; }
  .bench__part { left: 50%; margin-left: -27vw; width: 54vw; bottom: calc(var(--strip) + 6vh); }
  .bench__paper { width: 64vw; right: auto; left: -14vw; bottom: calc(var(--strip) - 10vh); }
  .bench__beat { top: calc(var(--nav-h) + 6vh); translate: 0 0; font-size: 3.4rem; right: var(--sc-gutter); }
}
@media (max-width: 860px) and (max-height: 700px) {
  .bench__sub { display: none; }
  .bench__part { width: 44vw; margin-left: -22vw; }
}

/* =========================================================== 2 · SHARE ==== */
.station { position: relative; }
.share { padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 7rem); }
.share__wrap, .quote__wrap, .shelf .sc-wrap, .close__wrap { padding-left: calc(var(--rail) + var(--sc-gutter)); max-width: calc(var(--sc-maxw) + var(--rail)); }
.share__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.station__head { position: sticky; top: calc(var(--nav-h) + 3rem); }
.share__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 1.6rem; }
.share__item figure { margin: 0; border-radius: 3px; overflow: hidden; border: 1px solid var(--sc-hairline); background: var(--hull); }
.share__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.share__item--photo { grid-row: 1 / 3; }
.share__item--photo figure { aspect-ratio: 4 / 5; }
.share__item--sketch { margin-top: 3.5rem; }
.share__item--sketch figure { aspect-ratio: 3 / 2; background: #0B141C; }
.share__item--sketch img { object-fit: contain; padding: .6rem; }
.share__item--words { align-self: end; }
.share__quote { margin: 0 0 1rem; padding: 1.4rem 1.3rem; border: 1px dashed var(--sc-hairline-strong); border-radius: 3px; font: 400 1.05rem/1.55 var(--sc-font-text); color: var(--white); }
.share__label { margin: .9rem 0 0; color: var(--sc-ink-soft); font-size: .98rem; line-height: 1.5; }
.share__label .data { color: var(--surf); margin-right: .6rem; }
.share__label strong { color: var(--white); font-weight: 600; }
@media (max-width: 860px) {
  .share__wrap { grid-template-columns: 1fr; }
  .station__head { position: static; }
  .share__items { grid-template-columns: 1fr 1fr; }
  .share__item--photo { grid-row: auto; grid-column: 1 / -1; }
  .share__item--photo figure { aspect-ratio: 5 / 4; }
  .share__item--sketch { margin-top: 0; }
}
@media (max-width: 520px) { .share__items { grid-template-columns: 1fr; } }

/* =========================================================== 3 · QUOTE ==== */
.quote { padding-block: clamp(5rem, 16vh, 11rem); border-top: 1px solid var(--sc-hairline); }
.quote__line { padding-block: .1em .05em; }
.quote__big { margin: 0; font: 900 clamp(3.6rem, 9vw, 9.5rem)/.86 var(--sc-font-display); text-transform: uppercase; letter-spacing: .005em; }
.quote__big span { color: var(--teal); }
.quote__fine { margin: 2.4rem 0 0 auto; max-width: 44ch; }
@media (min-width: 861px) { .quote__fine { margin-right: 6vw; } }

/* ============================================================ 4 · MORPH ===
   Three registered frames of one bracket, then the orbit clip. The frame box
   always holds the frames' own aspect, so the dimension SVG stays on the part. */
.morph__stage { height: 100vh; height: 100svh; overflow: hidden; background: var(--abyss); }
/* desktop: full height, the bracket (57% across the frame) centred in the
   space right of the title block */
.morph__frames {
  --shade: calc(var(--rail) + min(32vw, 500px));
  position: absolute; top: 0; height: 100%; aspect-ratio: 1600 / 904;
  left: calc((var(--shade) + 100vw) / 2 - 0.57 * 177vh);
}
@media (min-aspect-ratio: 2/1) { .morph__frames { height: auto; width: 100vw; top: 50%; translate: 0 -50%; left: calc((var(--shade) + 100vw) / 2 - 57vw); } }
.morph__f, .morph__f img, .morph__video, .morph__dims { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.morph__f img { object-fit: fill; }
.morph__video { opacity: 0; object-fit: fill; }
.morph__video.is-live { opacity: 1; }
.morph__f--cad { opacity: calc(1 - var(--m2, 0)); }
.morph__f--sketch { clip-path: inset(0 0 0 calc(var(--m1, 0) * 100%)); }
.morph__frames::after { /* the model building across the sheet: one hairline at the boundary */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--m1, 0) * 100%); width: 1px;
  background: var(--surf); opacity: calc(min(var(--m1, 0) * 20, 1) * min((1 - var(--m1, 0)) * 20, 1));
}
.morph__dims { pointer-events: none; opacity: calc(1 - var(--m2, 0)); }
.dim path { fill: none; stroke: #1F5E6B; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--dd, 0)); stroke-linecap: square; }
.dim text { font: 500 30px var(--sc-font-mono); fill: #1F5E6B; letter-spacing: .04em; opacity: var(--dd, 0); }
.morph[data-phase="cad"] .dim path, .morph[data-phase="cad"] .dim text { stroke: var(--surf); }
.morph[data-phase="cad"] .dim text { fill: var(--surf); stroke: none; }

/* a solid title block at the lead edge: copy never sits on the paper */
.morph__shade { position: absolute; inset: 0 auto 0 0; width: calc(var(--rail) + min(32vw, 500px)); background: var(--abyss); border-right: 1px solid var(--sc-hairline); }
.morph__copy { position: absolute; z-index: 3; left: calc(var(--rail) + var(--sc-gutter)); top: 50%; translate: 0 -50%; width: min(32vw - 2 * var(--sc-gutter), 440px); }
.morph__steps { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; min-height: 6.5rem; }
.morph__steps li { position: absolute; inset: 0 0 auto 0; font-size: 1.12rem; line-height: 1.55; color: #C7CED0; }
.morph__steps .data { display: block; color: var(--surf); margin-bottom: .55rem; }

@media (max-width: 860px) {
  .morph__frames { top: calc(var(--nav-h) + 2vh); left: 50%; translate: -57% 0; width: auto; height: 52vh; }
  .morph__shade { inset: auto 0 0 0; width: auto; height: calc(100% - var(--nav-h) - 2vh - 52vh); border-right: 0; border-top: 1px solid var(--sc-hairline); }
  .morph__copy { top: auto; bottom: calc(var(--strip) + 1.2rem); translate: 0 0; left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  .morph__copy .station__title { font-size: 2.6rem; margin-bottom: .8rem; }
  .morph__copy .station__label { margin-bottom: .8rem; }
  .morph__steps { min-height: 5.4rem; }
  .morph__steps li { font-size: 1rem; }
}

/* ============================================================= 5 · RAIL ==== */
.rail__stage { height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--abyss); }
.rail__track { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.6rem); padding-left: calc(var(--rail) + var(--sc-gutter)); padding-right: 8vw; }
.rail__head { flex: none; width: min(30rem, 78vw); }
.rail__item { flex: none; width: min(clamp(15rem, 24vw, 22rem), 50vh); margin: 0; }
.rail__item:nth-of-type(even) { margin-top: 9vh; }
.rail__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; border: 1px solid var(--sc-hairline); }
.rail__item figcaption { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin-top: .9rem; color: var(--sc-ink-soft); font-size: .95rem; }
.rail__item figcaption .data { color: var(--surf); grid-row: 1 / 3; padding-top: .3rem; }
.rail__item figcaption strong { font: 800 1.45rem/1 var(--sc-font-display); text-transform: uppercase; color: var(--white); }
.rail__end { flex: none; width: 18rem; margin: 0; font: 900 clamp(2.2rem, 3.4vw, 3.4rem)/.9 var(--sc-font-display); text-transform: uppercase; }
.rail__end span { color: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .rail__item { opacity: clamp(.55, calc((var(--sc-p, 0) - var(--k, 0)) * 6 + .55), 1); transition: opacity 200ms linear; }
  .rail__item:nth-of-type(1) { --k: -1; } .rail__item:nth-of-type(2) { --k: .08; } .rail__item:nth-of-type(3) { --k: .22; }
  .rail__item:nth-of-type(4) { --k: .38; } .rail__item:nth-of-type(5) { --k: .52; }
}
@media (max-width: 860px) {
  .rail__stage { align-items: flex-start; padding-top: calc(var(--nav-h) + 3vh); }
  .rail__item { width: min(66vw, 40vh); }
  .rail__item:nth-of-type(even) { margin-top: 0; }
  .rail__track { align-items: flex-start; }
  .rail__head .station__title { font-size: 2.8rem; }
}

/* ============================================================= 6 · SHIP ==== */
.ship__stage { height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: var(--nav-h) var(--sc-gutter) 0 calc(var(--rail) + var(--sc-gutter)); background: linear-gradient(180deg, var(--abyss), #081420 60%, var(--hull)); }
.ship__voices { position: relative; min-height: 22rem; }
.ship__q { position: absolute; inset: 0 0 auto 0; margin: 0; padding: 2rem 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.ship__q p { margin: 0 0 1.4rem; font: 400 clamp(1.2rem, 1.55vw, 1.55rem)/1.45 var(--sc-font-text); color: var(--white); text-wrap: pretty; }
.ship__q p::before { content: "\201C"; } .ship__q p::after { content: "\201D"; }
.ship__q footer { color: var(--surf); }
.ship__q footer a { color: var(--surf); text-decoration: underline; text-underline-offset: .2em; }
.ship__emblem { position: absolute; right: var(--sc-gutter); bottom: calc(var(--strip) + 2rem); width: 120px; height: auto; mix-blend-mode: lighten; opacity: .9; }
@media (max-width: 860px) {
  .ship__stage { grid-template-columns: 1fr; align-content: center; gap: 2rem; padding-bottom: var(--strip); }
  .ship__copy .station__title { font-size: 2.6rem; }
  .ship__voices { min-height: 17rem; }
  .ship__q p { font-size: 1.02rem; line-height: 1.5; margin-bottom: .9rem; }
  .ship__copy .sc-body { font-size: .98rem; }
  .ship__emblem { display: none; }
}

/* ============================================================ 7 · SHELF ==== */
.shelf { border-top: 1px solid var(--sc-hairline); }
.shelf__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.6rem; }
.shelf__head .station__title { margin: 0; }
.shelf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-bottom: 0; }
@media (max-width: 1100px) { .shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .shelf__grid { grid-template-columns: 1fr; } }

/* ============================================================ 8 · CLOSE ==== */
.close { border-top: 1px solid var(--sc-hairline); background: radial-gradient(60% 50% at 75% 40%, rgb(46 138 138 / .10), transparent 70%); scroll-margin-top: var(--nav-h); }
.close__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.close__copy { position: sticky; top: calc(var(--nav-h) + 3rem); }
.close__note { color: var(--sc-ink-soft); line-height: 1.9; margin-top: 2rem; }
.close__pad { position: relative; perspective: 1400px; }
.close__done {
  position: absolute; z-index: 4; inset: 0 0 auto 0; background: var(--hull); border: 1px solid var(--sc-hairline-strong); border-radius: 3px;
  box-shadow: var(--sc-e3); transform-origin: 8% 0%;
  transition: transform 760ms cubic-bezier(.5, 0, .2, 1), opacity 420ms ease-out 300ms;
}
.close__done ol { list-style: none; margin: 0; padding: .4rem 1.4rem 1.2rem; }
.close__done li { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--sc-hairline); font: 800 1.4rem/1 var(--sc-font-display); text-transform: uppercase; }
.close__done b { font: 600 .66rem/1 var(--sc-font-mono); letter-spacing: .12em; color: var(--surf); border: 2px solid var(--surf); border-radius: 3px; padding: .3rem .45rem; transform: rotate(-7deg); }
.close__done li:nth-child(2) b { transform: rotate(4deg); } .close__done li:nth-child(3) b { transform: rotate(-3deg); } .close__done li:nth-child(4) b { transform: rotate(6deg); }
.close__pad.is-torn .close__done { transform: translate3d(-4%, -18%, 0) rotate(-9deg) rotateX(58deg); opacity: 0; pointer-events: none; }
.close .ticket { max-width: none; }
@media (max-width: 960px) {
  .close__wrap { grid-template-columns: 1fr; }
  .close__copy { position: static; }
}
@media (prefers-reduced-motion: reduce) { .close__done { display: none; } }

/* footer clears the bottom strip on phones */
.home ~ .site-foot { padding-left: calc(var(--rail) + var(--sc-gutter)); }

/* ============================================================ REDUCED ===== */
@media (prefers-reduced-motion: reduce) {
  .bench__plate, .bench__part, .bench__paper { transform: none; }
  .bench__paper { transform: rotate(-9deg); }
}

/* short phones: the full Etsy reviews need the room, so the station copy steps down */
@media (max-width: 860px) and (max-height: 720px) {
  .ship__stage { gap: 1.1rem; padding-top: calc(var(--nav-h) + .5rem); }
  .ship__copy .station__title { font-size: 2rem; margin-bottom: .6rem; }
  .ship__copy .station__label { margin-bottom: .6rem; }
  .ship__copy .sc-body { display: none; }
  .ship__q { padding-top: 1.1rem; }
  .ship__q p { font-size: .95rem; }
}