/* NVS: life aboard. One photograph of one small yacht, a few lines about the life of her, and the short list of what is asked of her.
   Mounts into <section data-nvs-vessel> (vessel.js). Uses the house tokens (lux.css, lux-scene.css). No tabs, no rooms. */
.ab { background: var(--night, #08161F); color: var(--sc-ink, #F4F7F5); overflow: hidden; }
.ab-stage { position: relative; min-height: clamp(560px, 92svh, 900px); display: grid; align-items: end; isolation: isolate; background: #0B2530; }
.ab-stage picture { position: absolute; inset: 0; z-index: -2; }
.ab-stage img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; filter: saturate(.62) contrast(1.03) brightness(.97); }
/* the shade reads as weather: the top holds the header, the left and the foot hold the words; the yacht stands clear of both */
.ab-stage::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, rgba(8, 22, 31, .5) 0%, rgba(8, 22, 31, 0) 20%, rgba(8, 22, 31, 0) 48%, rgba(8, 22, 31, .56) 76%, #08161F 100%),
  linear-gradient(90deg, rgba(8, 22, 31, .66) 0%, rgba(8, 22, 31, .4) 26%, rgba(8, 22, 31, 0) 52%); }
.ab-in { display: grid; gap: 18px; justify-items: start; padding-block: 140px 56px; }
.ab-in h2 { font: 300 clamp(34px, 4.4vw, 62px)/1.04 var(--disp); letter-spacing: -.022em; max-width: 9em; text-shadow: 0 1px 24px rgba(8, 22, 31, .5); }
.ab-in h2 em { font-style: italic; }
.ab-lede { max-width: 25em; font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--disp); letter-spacing: -.004em; color: var(--sc-ink, #F4F7F5); text-wrap: pretty; text-shadow: 0 1px 14px rgba(8, 22, 31, .85); }
.ab-in .pln { margin-top: 6px; }
.ab-body { display: grid; gap: clamp(56px, 7vw, 104px); padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 120px); }
.ab-life { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.ab-life li { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1px solid rgba(244, 247, 245, .28); }
.ab-life h3 { font: 300 italic clamp(21px, 1.7vw, 26px)/1.15 var(--disp); letter-spacing: -.01em; color: var(--sc-ink, #F4F7F5); }
.ab-life p { font: 400 16px/1.6 var(--sans); color: var(--sc-soft, #E3ECEA); max-width: 30em; text-wrap: pretty; }
.ab-ask { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(24px, 3vw, 48px); align-items: start; }
.ab-ask h3 { font: 300 clamp(28px, 2.8vw, 40px)/1.1 var(--disp); letter-spacing: -.022em; }
.ab-ask dl { margin: 0; display: grid; }
.ab-ask dl > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 4px 24px; padding-block: 16px; border-top: 1px solid rgba(244, 247, 245, .2); }
.ab-ask dl > div:last-child { border-bottom: 1px solid rgba(244, 247, 245, .2); }
.ab-ask dt { font: 300 italic 17px/1.4 var(--disp); color: var(--sc-quiet, #C7D9D8); }
.ab-ask dd { margin: 0; display: grid; gap: 2px; }
.ab-ask dd b { font: 400 18px/1.4 var(--disp); letter-spacing: -.004em; color: var(--sc-ink, #F4F7F5); }
.ab-ask dd span { font: 400 15px/1.55 var(--sans); color: var(--sc-soft, #E3ECEA); }
@media (max-width: 1100px) { .ab-life { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  /* on a phone the yacht keeps the upper part of the screen to herself and the words sit below her, on the dark water */
  .ab-stage { min-height: 0; display: block; }
  .ab-stage picture { position: relative; display: block; height: 62svh; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .ab-stage img { object-position: 71% 60%; }
  .ab-stage::after { z-index: 0; bottom: auto; height: 62svh; background: linear-gradient(180deg, rgba(8, 22, 31, .56) 0%, rgba(8, 22, 31, 0) 26%, rgba(8, 22, 31, 0) 70%, rgba(8, 22, 31, .5) 100%); }
  .ab-stage { background: #08161F; }
  .ab-in { position: relative; z-index: 1; margin-top: -9svh; padding-block: 0 8px; gap: 14px; }
  .ab-in h2 { font-size: 32px; }
  .ab-life { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-ask { grid-template-columns: minmax(0, 1fr); }
  .ab-ask dl > div { grid-template-columns: minmax(0, 1fr); }
}