/* Start page: hero (site.css), Sunreef tiles, new arrivals, destination mosaic, preference sheet band, owner band.
   The three stations (#ask, #migration, #garage) bring their own CSS files. */

.slide-card .w { font-size: 0.8125rem; color: rgb(255 255 255 / .78); }
.hero-slide img { object-position: 50% 55%; }

/* ---------- Sunreef first: tiles ---------- */

#built .section-head { max-width: 60ch; }
#built .tile-title { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); max-width: 14ch; }
#built .tile:first-child .tile-title { font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem); }

/* ---------- new to the fleet ---------- */

.strip-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.strip-head .rail-arrows { flex: none; }
@media (max-width: 600px) { .strip-head .rail-arrows { display: none; } }
#new .rail { grid-auto-columns: minmax(260px, 23%); }
@media (max-width: 960px) { #new .rail { grid-auto-columns: minmax(240px, 70%); } }

/* ---------- where they sail: mosaic ---------- */

.mosaic {
  display: grid; gap: 14px;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(220px, 30vh));
}
.mz { position: relative; display: block; overflow: hidden; border-radius: var(--radius); color: #fff; text-decoration: none; isolation: isolate; background: var(--sea); }
.mz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.mz:hover img { transform: scale(1.04); }
.mz::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(6 16 25 / .7) 0%, rgb(6 16 25 / 0) 55%); }
.mz-big { grid-row: 1 / 3; }
.mz-body { position: absolute; left: 22px; right: 22px; bottom: 18px; display: grid; gap: 2px; }
.mz-name { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.05; }
.mz-big .mz-name { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem); }
.mz-meta { font-size: 0.875rem; color: rgb(255 255 255 / .86); }
.mosaic-more { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 24px; }
@media (max-width: 900px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
  .mz-big { grid-row: auto; grid-column: 1 / -1; height: 280px; }
}
@media (max-width: 520px) { .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 210px; } }

/* ---------- preference sheet band ---------- */

.sheet-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  padding: clamp(40px, 6vw, 80px); border-radius: var(--radius); background: var(--wash);
}
.sheet-band-copy { display: grid; gap: 18px; }
.sheet-band-copy h2 { max-width: 15ch; }
.sheet-band-copy p { color: var(--ink-2); max-width: 52ch; }

/* the sheet itself: printed paper on a board, held by a steel clip */
.ps-board {
  --board: #2b3a44; --paper: #fdfdfb; --print: #1e2a33; --rule: #b9c4cc; --tick: var(--sky-ink);
  position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 4 / 5;
  padding: 44px 22px 22px; border-radius: 10px; background: var(--board);
  box-shadow: 0 30px 60px -20px rgb(11 26 36 / .45), inset 0 1px 0 rgb(255 255 255 / .08);
  transform: rotate(-2.2deg);
}
.ps-clip {
  position: absolute; top: -14px; left: 50%; width: 132px; height: 46px; transform: translateX(-50%);
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #e9edf0 0%, #aab4bb 48%, #d7dde1 52%, #8f9aa2 100%);
  box-shadow: 0 6px 10px rgb(0 0 0 / .25); z-index: 2;
}
.ps-clip::after { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 10px; transform: translateX(-50%); border-radius: 6px; background: #6f7a82; opacity: .55; }
.ps-paper {
  position: relative; height: 100%; padding: 26px 24px; border-radius: 2px; background: var(--paper); color: var(--print);
  box-shadow: 0 1px 2px rgb(0 0 0 / .18); display: grid; align-content: start; gap: 10px; overflow: hidden;
}
.ps-title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; padding-bottom: 10px; border-bottom: 2px solid var(--print); margin-bottom: 4px; }
.ps-h { font-size: 0.75rem; font-weight: 700; margin-top: 8px; letter-spacing: .01em; }
.ps-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; font-size: 0.75rem; }
.ps-label:empty { display: none; }
.ps-rule { display: block; height: 1px; background: var(--rule); margin-bottom: 3px; }
.ps-boxes { display: flex; flex-wrap: wrap; gap: 6px 14px; grid-column: 1 / -1; }
.ps-box { display: inline-flex; align-items: center; gap: 6px; }
.ps-box i { width: 12px; height: 12px; border: 1.5px solid var(--print); border-radius: 2px; position: relative; }
.ps-box.is-on i::after { content: ""; position: absolute; left: 2px; top: -3px; width: 5px; height: 10px; border: solid var(--tick); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg); }
.ps-pass {
  position: absolute; right: -26px; bottom: 34px; width: 168px; padding: 12px 14px 12px 18px; display: grid; gap: 2px;
  background: #fff; color: #0b1a24; border-radius: 6px; transform: rotate(7deg);
  box-shadow: 0 16px 30px -10px rgb(11 26 36 / .45);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-left: 2px dashed #c3ccd2;
}
.ps-pass-n { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--sky-ink); }
@media (prefers-color-scheme: dark) {
  .ps-board { --board: #0d1820; --paper: #e9ece9; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .7); }
  .ps-pass { background: #e9ece9; }
  .ps-pass-n { color: #0670b4; }
}
@media (prefers-reduced-motion: no-preference) {
  .ps-pass { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .sheet-band:hover .ps-pass { transform: rotate(4deg) translate(6px, -6px); }
}
@media (max-width: 860px) {
  .sheet-band { grid-template-columns: minmax(0, 1fr); padding: 36px 22px 48px; }
  .ps-board { width: min(100%, 340px); }
  .ps-pass { right: -8px; }
}

/* ---------- owner band ---------- */

.owner-band { position: relative; min-height: 460px; display: grid; align-items: center; color: #fff; isolation: isolate; overflow: hidden; border-radius: var(--radius); background: var(--sea); }
.owner-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.owner-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgb(6 16 25 / .82) 0%, rgb(6 16 25 / .4) 55%, rgb(6 16 25 / .1) 100%); }
.owner-body { justify-self: end; max-width: 460px; padding: 48px; display: grid; gap: 16px; }
.owner-body p { color: rgb(255 255 255 / .9); }
@media (max-width: 760px) { .owner-body { justify-self: stretch; padding: 32px 22px; } .owner-band::after { background: rgb(6 16 25 / .62); } }