/* 00-base.css */
/* Virga 55: tokens, fonts, resets. Dark graphite base with pearl interludes (01-BUILD-BRIEF, section 3).
   Type, direction A (13 Oct): Archivo variable (weight 100 to 900, width 62% to 125%) carries display and text;
   the masthead and wordmark run expanded at 700, headings at 500 and 112% width, the second line of a heading
   (em) at 300 and normal width. IBM Plex Mono carries figures and labels. */
/* Archivo variable, instanced to the ranges the site uses (weights 300 to 700, widths 100 to 125%): 57 KB against
   88 KB for the full axes. No italic file: the site's em is the light phrase, never a slant. */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-wdth.woff2') format('woff2');font-style:normal;font-weight:300 700;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}

picture{display:contents}
:root{
  --graphite:#15181B;--slate:#22272B;--pearl:#ECEAE3;--mist:#AEB6B9;--bronze:#B08D5B;--storm:#5B6368;--sea:#3F5F6B;--ink:#1C2023;
  --ground:var(--graphite);--text:var(--pearl);--muted:var(--mist);--rule:color-mix(in srgb,var(--storm) 70%,transparent);
  --display:'Archivo',Arial,Helvetica,sans-serif;
  --sans:'Archivo',Arial,Helvetica,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --gutter:5.2vw;--header-h:76px;
  --space:clamp(7rem,9.5vw,10rem);--space-sm:clamp(4rem,5.5vw,5rem);
  --col-gap:clamp(.75rem,1.6vw,2rem)
}
@media(max-width:700px){:root{--gutter:max(6vw,20px);--header-h:68px;--space:4.5rem;--space-sm:4rem}}

*{box-sizing:border-box}
html{background:var(--ground);color:var(--text);scroll-padding-top:6rem;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.7}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;cursor:pointer}
img{display:block;width:100%;height:auto}
figure{margin:0}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--display);font-weight:500;font-stretch:108%;line-height:.98;letter-spacing:-.025em}
h1 em,h2 em{font-weight:300;font-stretch:100%;font-style:normal;letter-spacing:-.015em}
em{font-style:normal;font-weight:300}
::selection{background:var(--bronze);color:var(--graphite)}
[tabindex='-1']:focus{outline:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:1rem;left:1rem;z-index:100;padding:1rem;background:var(--pearl);color:var(--ink);transform:translateY(-200%)}
.skip-link:focus{transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Light interludes: pearl ground with ink text (Design interiors passage, Enquire). */
.on-pearl{--ground:var(--pearl);--text:var(--ink);--muted:#4b5257;--rule:color-mix(in srgb,var(--ink) 25%,transparent);background:var(--ground);color:var(--text)}
.on-slate{--ground:var(--slate);background:var(--ground)}

/* Affordances that only mean something with JavaScript running. */
html:not(.js) [data-js-only]{display:none}

/* 10-home.css */
/* Home composition: hero, five chapters and the film band, in the framework home pattern on graphite. */

/* 1. Hero */
.site-opening{position:relative;min-height:740px;height:100svh;max-height:1400px;isolation:isolate;overflow:hidden;color:var(--pearl);background:var(--slate)}
.opening-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.site-opening:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#15181b80 0%,#15181b5c 24%,#15181b2e 42%,transparent 58%,#15181b80 100%)}
.site-masthead{position:absolute;top:9%;left:0;width:100%;margin:0;text-align:center;font-family:var(--display);font-weight:700;font-stretch:125%;font-size:19.5vw;line-height:.86;letter-spacing:-.005em;text-transform:uppercase;animation:title-arrive 1.25s ease-out both}
.opening-foot{position:absolute;bottom:3rem;left:var(--gutter);right:var(--gutter);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.opening-foot p{font-family:var(--display);font-weight:500;font-stretch:112%;letter-spacing:-.03em;font-size:clamp(1.9rem,3vw,3.6rem);line-height:1;margin:0;max-width:35rem}
.opening-foot em{display:block;color:var(--bronze);font-style:normal;font-weight:300;font-stretch:100%;letter-spacing:-.02em}
.opening-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 2.5rem}
.film-hero-link{justify-content:flex-start;gap:.7rem}
.film-hero-link span{margin-left:auto;padding-left:1.5rem}
.film-play-icon{flex:none;transform:translateY(-1px)}
@keyframes title-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* 2. Chapter 01, The yacht: heading, intro, full-width plate */
.h-yacht{padding:var(--space) var(--gutter) var(--space-sm);scroll-margin-top:1rem}
.h-yacht h2{font-size:clamp(3.5rem,6.4vw,7.25rem);line-height:.96;margin:0 0 1.75rem 13.7%}
.h-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start;margin:0 0 3.5rem 13.7%}
.h-intro .small-note{font-family:var(--display);font-style:normal;font-weight:300;font-size:1.3rem;color:var(--mist);padding-top:.35rem}
.h-intro-copy{justify-self:end;width:min(100%,26rem)}
.h-intro .body-copy{max-width:none}
.h-intro .text-link{margin-top:2rem}
.h-plate{margin:0 0 0 13.7%}
.h-plate img{height:72svh;min-height:480px;max-height:1000px;object-fit:cover}
.h-plate figcaption{display:flex;justify-content:space-between;gap:2rem;margin-top:1.25rem}

/* 3. Chapter 02, Design: copy left, plate in columns */
.h-design{display:grid;grid-template-columns:1fr 1.65fr;gap:3rem;padding:var(--space) var(--gutter)}
.h-design .chapter-label{padding-top:.8rem}
.h-design h2{font-size:clamp(3rem,5.4vw,6rem);margin-bottom:2.5rem}
.h-design .body-copy{margin-left:18%}
.h-design .chapter-link{margin-left:18%}
.h-design figure{grid-column:2;grid-row:1 / span 2;align-self:start}
.h-design figure img{height:72svh;min-height:420px;max-height:900px;object-fit:cover}
.h-design figcaption{margin-top:1.25rem}

/* 4. Chapter 03, Performance: slate ground with the spec strip */
.h-perf{background:var(--slate);padding:var(--space-sm) var(--gutter)}
.h-perf-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:13%;align-items:start}
.h-perf h2{font-size:clamp(3.25rem,5.6vw,6.25rem);line-height:.94;margin-bottom:0}
.h-perf .body-copy{max-width:26rem;justify-self:end;padding-top:.5rem}
@media(max-width:700px){.h-perf .body-copy{padding-top:0}}
.h-perf .spec-strip{margin-top:3.5rem}
.h-perf .chapter-link{margin-top:3rem}

/* 5. Film band: poster with the highlight loop over it (26-brand-film.css carries the layer) */

/* 6. Chapter 04, Voyages: copy left, plate right in columns 4 to 12 */
.h-voyages{padding:var(--space) var(--gutter)}
.h-voyages-head{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:5%;align-items:start;margin:0 0 3.5rem 25%}
.h-voyages h2{font-size:clamp(3.25rem,5.4vw,6rem);margin:0}
.h-voyages-head>div:last-child{justify-self:end;width:min(100%,24rem);padding-top:.5rem}
.h-voyages .body-copy{max-width:none;margin-left:0}
.h-voyages .chapter-link{margin:2rem 0 0}
.h-voyages figure{margin-left:25%}
.h-voyages figure img{height:78svh;min-height:420px;max-height:1000px;object-fit:cover}
.h-voyages figcaption{margin-top:1.25rem}

/* 7. Chapter 05, Enquire: a closing statement on graphite */
.h-enquire{padding:var(--space) var(--gutter) calc(var(--space) * .9);border-top:1px solid var(--rule)}
.h-enquire h2{font-size:clamp(3.5rem,7vw,7.75rem);line-height:.94;margin:0 0 2.5rem}
.h-enquire-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.h-enquire-foot p{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;line-height:1.2;margin:0}
.h-links{display:flex;align-items:flex-end;gap:2.5rem;flex-wrap:wrap}

@media(min-width:1800px){.h-yacht,.h-design,.h-perf,.h-voyages{padding-top:10rem;padding-bottom:10rem}.body-copy,.h-intro .body-copy{font-size:1.1875rem}}
@media(max-width:1000px) and (min-width:701px){
  .h-design{column-gap:7%}.h-design .body-copy,.h-design .chapter-link{margin-left:0}
  .h-perf-copy{column-gap:7%}
  .h-voyages-head{column-gap:7%;margin-left:0}.h-voyages figure{margin-left:0}
}
@media(max-width:700px){
  .site-opening{height:86svh;min-height:600px}
  .site-masthead{top:19%;font-size:21.5vw;letter-spacing:0}
  .opening-foot{bottom:2rem;align-items:flex-start;flex-direction:column;gap:1.75rem}.opening-foot p{font-size:min(2.2rem,9.5vw)}
  .opening-actions{gap:.9rem 1.5rem}
  .h-yacht{padding-top:5rem;padding-bottom:4rem}
  .h-yacht h2{font-size:min(10.5vw,4.5rem);margin-left:0}.h-intro{grid-template-columns:1fr;gap:1.5rem;margin:0 0 3rem}.h-intro-copy{justify-self:start;width:auto}
  .h-plate{margin:0 calc(-1 * var(--gutter))}.h-plate img{height:auto;min-height:0;aspect-ratio:4/5}.h-plate figcaption{margin:1rem var(--gutter) 0}.h-plate figcaption span:last-child{display:none}
  .h-design{display:block;padding-top:4.5rem;padding-bottom:4rem}.h-design .chapter-label{padding-top:0;margin-bottom:3rem}.h-design h2{font-size:min(10vw,4.25rem);margin-bottom:2rem}
  .h-design .body-copy,.h-design .chapter-link{margin-left:0}.h-design figure{margin-top:3rem}.h-design figure img{height:auto;min-height:0;aspect-ratio:4/5}
  .h-perf{padding-top:4.5rem;padding-bottom:4rem}.h-perf-copy{display:block}.h-perf h2{font-size:min(11vw,4.75rem);margin-bottom:2rem}.h-perf .spec-strip{margin-top:3rem}.h-perf .chapter-link{margin-top:2.5rem}
  .h-voyages{padding-top:5rem;padding-bottom:4rem}.h-voyages-head{display:block;margin:0 0 3rem}.h-voyages-head>div:last-child{width:auto;padding-top:0}.h-voyages h2{font-size:min(11vw,4.75rem);margin-bottom:2rem}
  .h-voyages .body-copy,.h-voyages .chapter-link{margin-left:0}.h-voyages figure{margin:0 calc(-1 * var(--gutter))}.h-voyages figure img{height:auto;min-height:0;aspect-ratio:4/5}.h-voyages figcaption{margin:1rem var(--gutter) 0}
  .h-enquire{padding-top:4.5rem}.h-enquire h2{font-size:min(12vw,5.25rem)}.h-enquire-foot{flex-direction:column;align-items:flex-start;gap:2rem}.h-enquire-foot p{font-size:min(1.5rem,6.5vw)}
  .h-links{flex-direction:column;align-items:flex-start;gap:1.25rem}
}

/* 20-site.css */
/* Shared shell: header, chapter dialog, footer, primitives, inner-route typography. */

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:var(--header-h);padding:1.1rem var(--gutter);color:var(--pearl);font-size:.875rem;letter-spacing:.025em;transition:background .3s,color .3s,box-shadow .3s}
.header-home{display:flex;align-items:center;min-height:44px;min-width:0;flex:1 1 auto}
.header-home>*{min-width:0}
.site-header>*{min-width:0}
.menu-toggle{flex:none}
.header-descriptor{text-transform:uppercase;letter-spacing:.15em;font-size:.8125rem;line-height:1.3}
.header-brand{display:none;font-family:var(--display);font-weight:700;font-stretch:125%;text-transform:uppercase;font-size:1.4rem;line-height:1;letter-spacing:.01em}
.site-header.is-solid,.site-header.is-scrolled{background:var(--graphite);color:var(--pearl);box-shadow:0 1px color-mix(in srgb,var(--storm) 60%,transparent)}
.is-solid .header-brand,.is-scrolled .header-brand{display:block}
.is-scrolled .header-descriptor{display:none}
.chapter-nav{display:flex;align-items:center;gap:2.4rem}
.chapter-nav a{position:relative;padding:.75rem 0}
.chapter-nav a:after{content:'';position:absolute;bottom:.35rem;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.chapter-nav a:hover:after{transform:scaleX(1)}
.chapter-nav a[aria-current]:after{transform:scaleX(1);background:var(--bronze)}
.chapter-nav .nav-enquire:after{transform:scaleX(1);background:var(--bronze)}
.chapter-nav .nav-enquire:hover:after{background:var(--pearl)}
.menu-toggle{display:none;background:none;border:0;min-height:44px;padding:.5rem 0;font-size:.875rem}
.menu-toggle span{margin-left:1rem;font-size:1.3rem}
@media(max-width:1000px){
  .chapter-nav{gap:1.25rem;flex-wrap:wrap;justify-content:flex-end}
  .js .chapter-nav{display:none}
  .js .menu-toggle:not([hidden]){display:inline-flex;align-items:center}
}
@media(max-width:700px){
  .site-header{padding-top:.75rem;padding-bottom:.75rem;gap:1rem}
  .header-descriptor{display:none} /* phones: VIRGA + Menu; on the home opening the masthead is the wordmark, so the small one arrives on scroll */
  .chapter-nav{gap:1rem;font-size:.875rem}
}

/* ---------- Chapter dialog ---------- */
.chapter-menu{inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:1.25rem var(--gutter) 2rem;border:0;background:var(--graphite);color:var(--pearl);overflow-y:auto}
.chapter-menu[open]{display:flex;flex-direction:column}
.chapter-menu::backdrop{background:var(--slate)}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.8125rem;letter-spacing:.04em}
.menu-close{display:flex;align-items:center;gap:1rem;padding:.75rem 0;min-height:44px;border:0;background:none;font-size:.875rem}
.menu-close span{font-size:1.5rem}
.chapter-menu nav{display:flex;flex-direction:column;gap:1.35rem;margin:3rem 0}
.chapter-menu nav a{display:flex;align-items:baseline;gap:1.5rem;font-family:var(--display);font-weight:500;font-stretch:112%;letter-spacing:-.03em;font-size:clamp(2.25rem,7vw,4rem);line-height:1.05}
.chapter-menu nav span{font-family:var(--mono);font-size:.75rem;color:var(--mist)}
.chapter-menu nav a[aria-current]{color:var(--bronze)}
.menu-note{margin:auto 0 0;font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:-.01em}
.menu-note em{color:var(--bronze)}
.menu-is-open{overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{padding:2rem var(--gutter) 1.5rem;background:var(--graphite);color:var(--pearl);overflow:hidden}
.footer-wordmark{display:block;font-family:var(--display);font-weight:700;font-stretch:125%;font-size:19vw;text-transform:uppercase;text-align:center;letter-spacing:-.005em;line-height:.92;margin:0 0 2rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;border-top:1px solid var(--rule);padding-top:1.5rem;font-size:.75rem;line-height:1.5;color:var(--mist)}
.footer-return{border-bottom:1px solid currentColor;padding-bottom:.15rem;transition:border-color .25s}
.footer-return:hover{border-bottom-color:var(--bronze)}
@media(max-width:700px){
  .site-footer{padding-top:2rem}
  .footer-wordmark{font-size:18vw;letter-spacing:0;margin:1.5rem 0;line-height:1}
  .footer-bottom{gap:1.2rem;flex-wrap:wrap}
  .footer-bottom span:nth-child(2){display:none}
  .footer-bottom .footer-return{margin-left:auto}
}

/* ---------- Primitives ---------- */
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding-inline:var(--gutter)}
.g12>*{grid-column:var(--c,1/-1);min-width:0}
/* A band: heading on the left line, supporting copy beside it with its column ending on the right edge. */
.band{display:grid;grid-template-columns:minmax(0,var(--band-l,1.1fr)) minmax(0,1fr);column-gap:6%;align-items:start}
.band>h2{margin:0}
.band>.body-copy,.band>.band-copy{justify-self:end;width:min(100%,26rem);padding-top:.5rem}
@media(max-width:700px){.band{display:block}.band>h2{margin-bottom:1.5rem}.band>.body-copy,.band>.band-copy{width:auto;padding-top:0}}
.wrap{max-width:calc(1600px + 2 * var(--gutter));margin-inline:auto}
@media(min-width:701px) and (max-width:1000px){.g12>*{grid-column:var(--ct,var(--c,1/-1))}}
@media(max-width:700px){.g12{display:block}}
.focal{object-position:var(--fx,50%) var(--fy,50%)}
@media(max-width:700px){.focal{object-position:var(--mfx,50%) var(--mfy,50%)}}
.image-frame{overflow:hidden;background:var(--slate)}
.plate img{width:100%;height:auto}
.plate figcaption{margin-top:1.25rem}
figcaption{font-size:.8125rem;line-height:1.6;letter-spacing:.015em;color:var(--muted)}
figcaption span+span{margin-left:auto}
.text-link{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 3rem;min-height:44px;padding:0 0 .65rem;border-bottom:1px solid currentColor;font-size:.875rem;letter-spacing:.03em;transition:border-color .25s}
.text-link:hover{border-bottom-color:var(--bronze)}
.text-link span{font-family:var(--mono);font-size:.75rem;opacity:.8}
.text-link.is-quiet{border-bottom-color:color-mix(in srgb,currentColor 50%,transparent)}
.text-link.is-primary{justify-content:center;gap:.75rem;padding:.95rem 1.5rem;border:1px solid var(--bronze);transition:background-color .25s,color .25s,border-color .25s}
.text-link.is-primary:hover{background:var(--bronze);border-color:var(--bronze);color:var(--ink)}
.chapter-label{display:flex;align-items:baseline;gap:1.7rem;margin:0 0 4.5rem;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.chapter-label span{font-family:var(--mono);font-size:.75rem;letter-spacing:0;color:var(--muted)}
.body-copy{font-size:1.0625rem;line-height:1.75;max-width:28rem;margin:0}
.chapter-link{margin:2.75rem 0 0}
@media(min-width:1440px){.body-copy{font-size:1.0625rem}}
@media(max-width:700px){.chapter-label{margin-bottom:3.5rem}.chapter-link{margin-top:2.25rem}.text-link{min-width:min(10rem,60vw);gap:.5rem 1.5rem}}

/* ---------- Inner-route typography ---------- */
.route-inner h1{font-size:clamp(4.75rem,7.2vw,8rem);line-height:.94;letter-spacing:-.045em;margin:0}
.route-inner main h2{font-size:clamp(3.25rem,5.2vw,5.75rem);margin:0}
.route-inner h1 em,.route-inner h2 em{color:var(--bronze)}
.on-pearl h1 em,.on-pearl h2 em{color:inherit}
.page-label{margin:0 0 1.5rem}
@media(min-width:701px) and (max-width:1000px){
  .route-inner h1{font-size:clamp(3.75rem,8vw,4.75rem)}
  .route-inner main h2{font-size:clamp(2.75rem,6vw,3.75rem)}
}
@media(max-width:700px){
  .route-inner h1{font-size:min(12vw,4rem);line-height:.96}
  .route-inner main h2{font-size:min(9.5vw,3.25rem);line-height:1}
  .page-label{margin-bottom:1.25rem}
}
@media(min-width:701px){.nowrap{white-space:nowrap}}
.route-inner h1,.route-inner main h2{overflow-wrap:break-word}

/* ---------- Full-bleed hero ---------- */
.hero-bleed{position:relative;isolation:isolate;overflow:hidden;height:88svh;min-height:640px;max-height:1200px;margin-top:0;color:var(--pearl);background:var(--slate)}
.hero-bleed>img,.hero-bleed>picture>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero-bleed:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(15deg,#15181bcc 0%,#15181b73 30%,transparent 60%)}
.hero-bleed-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:3.5rem}
.hero-bleed.hero-top-copy .hero-bleed-copy{top:calc(var(--header-h) + 2.5rem);bottom:auto}
.hero-bleed.hero-top-copy:after{background:linear-gradient(180deg,#15181bb3 0%,#15181b40 35%,transparent 65%)}
.hero-settle>img,.hero-settle>picture>img{animation:hero-settle 11s cubic-bezier(.12,.4,.3,1) both}
@keyframes hero-settle{from{transform:scale(1.025)}to{transform:scale(1)}}
@media(max-width:700px){.hero-bleed{height:78svh;min-height:560px}.hero-bleed-copy{bottom:2.25rem}}

/* ---------- 404 ---------- */
.nf{padding-block:calc(var(--header-h) + var(--space)) var(--space);min-height:72svh;row-gap:3rem;align-content:end}
.nf-foot .text-link{margin-top:2rem}
@media(max-width:700px){.nf-foot{margin-top:2.5rem}}

/* 26-brand-film.css */
/* The film. Three ways in: Film in the header, menu and footer (every page), "Watch the film" under
   the home masthead, and the home film band with a silent highlight loop. One full-screen layer over
   a 94% graphite scrim. The film loads only when the layer opens. */

/* Film band (Home) */
.film-band{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;height:80svh;min-height:540px;max-height:980px;color:var(--pearl);background:var(--slate)}
.film-band>img,.film-band>picture>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.film-band-loop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s linear}
.film-band-loop.is-playing{opacity:1}
.film-band-loop.is-cut{transition:none}
.film-band:after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 55%,#15181ba6 0%,#15181b66 60%,#15181b40 100%)}
.film-band .chapter-label{position:absolute;top:3rem;left:var(--gutter);margin:0}
.film-band-play{display:grid;justify-items:center;gap:1.4rem;color:var(--pearl);text-decoration:none;text-align:center}
.film-band-play:after{content:'';position:absolute;inset:0}
.film-band-circle{display:grid;place-items:center;width:6.5rem;height:6.5rem;border:1px solid var(--pearl);border-radius:50%;transition:background-color .35s,color .35s,transform .35s}
.film-band-circle svg{transform:translateX(2px)}
.film-band-title{font-family:var(--display);font-weight:500;font-stretch:108%;font-size:clamp(2.75rem,5.2vw,5.75rem);line-height:.95;letter-spacing:-.025em}
.film-band-title em{font-style:normal;font-weight:300;font-stretch:100%;letter-spacing:-.015em}
.film-band-title em{color:var(--pearl)}
.film-band-meta{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
.film-band-meta span{font-family:var(--mono);letter-spacing:0}
.film-band-play:hover .film-band-circle,.film-band-play:focus-visible .film-band-circle{background:var(--pearl);color:var(--ink);transform:scale(1.04)}
.film-band-play:focus-visible{outline:none}
.film-band-play:focus-visible .film-band-circle{outline:1px solid var(--pearl);outline-offset:6px}

/* Film layer */
.film-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--pearl);overflow:hidden}
.film-dialog[open]{display:grid;place-items:center}
.film-dialog::backdrop{background:rgba(21,24,27,.94)}
.film-frame{position:relative;width:min(80vw,calc((100svh - 9rem) * 16 / 9))}
.film-video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.film-close{position:absolute;right:-7px;bottom:calc(100% + .35rem);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--pearl);cursor:pointer;transition:opacity .25s}
.film-close:hover{opacity:.7}
.film-close:focus-visible{outline:1px solid var(--pearl);outline-offset:2px}
html.film-is-open{overflow:hidden}

@media(max-width:700px){
  .film-band{height:72svh;min-height:460px}
  .film-band .chapter-label{top:2rem}
  .film-band-circle{width:5rem;height:5rem}
  .film-band-title{font-size:clamp(2.25rem,10vw,3rem)}
  .film-frame{width:calc(100vw - 2 * var(--gutter))}
}
@media(prefers-reduced-motion:reduce){.film-band-circle{transition:none}.film-band-loop{display:none}}

/* 27-bg-video.css */
/* Background loops laid over the approved stills by /bg-video.js. Hidden until the first frame has painted, then a straight cut (the still is that frame). */
.bg-video{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s linear;pointer-events:none}
.bg-video.is-cut{transition:none}
.bg-video.is-playing{opacity:1}
.v-sand .image-frame{position:relative}
.v-sand .bg-video{z-index:0}
@media(prefers-reduced-motion:reduce){.bg-video{display:none}}
/* Heroes that carry a loop run no settle zoom: the loop carries the motion. */
.site-opening .opening-image,.y-hero .hero-image,.p-hero .hero-image{animation:none}

/* 28-spec.css */
/* Spec panel system: the strip (large figures) and the table. Figures in IBM Plex Mono, tabular. */
.spec-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--col-min,13rem)),1fr));gap:2.5rem var(--col-gap);margin:0;padding:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.spec-strip>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:.6rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.spec-strip .fig{grid-column:1;margin:0;font-size:clamp(3rem,5.2vw,6rem);line-height:1;letter-spacing:-.03em;color:var(--pearl);white-space:nowrap}
.spec-strip .unit{grid-column:2;margin:0;font-size:clamp(.875rem,1.1vw,1.125rem);color:var(--mist);letter-spacing:.02em}
.spec-strip dt{grid-column:1 / -1;margin-top:.9rem;font-family:var(--sans);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.spec-strip.is-six{--col-min:10rem}
.spec-strip.is-six .fig{font-size:clamp(2rem,3.1vw,3.75rem)}
.on-pearl .spec-strip .fig{color:var(--ink)}
.on-pearl .spec-strip dt{color:var(--muted)}

.spec-table-frame{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--rule)}
.spec-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.spec-table caption{text-align:left;font-family:var(--display);font-weight:500;font-stretch:112%;letter-spacing:-.03em;font-size:clamp(1.75rem,2.4vw,2.4rem);line-height:1.1;padding:1.5rem 0 1.75rem}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:.85rem 1.5rem .85rem 0;border-bottom:1px solid var(--rule);font-weight:400}
.spec-table thead th{font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);padding-top:0}
.spec-table thead th:not(:first-child),.spec-table td.num{text-align:right;padding-right:0;padding-left:1.5rem;white-space:nowrap}
.spec-table tbody th{width:38%;color:var(--pearl)}
.spec-table td{color:var(--pearl)}
.spec-table td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.spec-table td[colspan]{color:var(--mist)}
.spec-table .spec-group th{padding:2.5rem 0 .9rem;font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--bronze);border-bottom:1px solid var(--storm)}
.spec-table tbody:first-of-type .spec-group th{padding-top:1rem}
.spec-note{display:block;font-size:.75rem;color:var(--mist);margin-top:.2rem}
.spec-table-note{margin:1.5rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--mist);max-width:40rem}

@media(min-width:701px) and (max-width:1000px){
  .spec-strip{--col-min:14rem}.spec-strip.is-six{--col-min:11rem}
}
@media(max-width:700px){
  .spec-strip,.spec-strip.is-six{--col-min:8.5rem;gap:2rem 1.25rem}
  .spec-strip .fig,.spec-strip.is-six .fig{font-size:clamp(2rem,9vw,3.25rem)}
  .spec-strip .unit{font-size:.8125rem}
  .spec-strip dt{margin-top:.6rem;font-size:.75rem}
  .spec-table{font-size:.875rem;min-width:0}
  .spec-table th,.spec-table td{padding-right:1rem}
  .spec-table tbody th{width:40%}
  .spec-table td.num{white-space:normal}
}

/* 29-hotspots.css */
/* Hotspot view of the cutaway. Markers are positioned links over the image; the key is the information. */
.hotspots{position:relative;margin:0}
.hotspots .image-frame{position:relative}
.hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--pearl);border-radius:50%;background:color-mix(in srgb,var(--graphite) 70%,transparent);color:var(--pearl);font-family:var(--mono);font-size:.8125rem;line-height:1;transition:background .25s,color .25s,transform .25s}
.hotspot:hover,.hotspot:focus-visible,.hotspot.is-active{background:var(--pearl);color:var(--ink);transform:translate(-50%,-50%) scale(1.08)}
.hotspot:focus-visible{outline:1px solid var(--pearl);outline-offset:4px}
.hotspot-label{position:absolute;z-index:2;max-width:16rem;padding:.6rem .85rem;background:var(--pearl);color:var(--ink);font-size:.8125rem;line-height:1.45;pointer-events:none;transform:translate(-50%,.9rem)}
.hotspot-label[hidden]{display:none}
.hotspot-key{counter-reset:hs;list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem var(--col-gap)}
.hotspot-key li{counter-increment:hs;display:grid;grid-template-columns:1.75rem 1fr;gap:.25rem .75rem;padding:1rem 0 0;border-top:1px solid var(--rule);font-size:.875rem;line-height:1.5}
.hotspot-key li:before{content:counter(hs);font-family:var(--mono);font-size:.8125rem;color:var(--bronze)}
.hotspot-key li[aria-current]{color:var(--pearl)}
.hotspot-key li[aria-current]:before{color:var(--pearl)}
.hotspots figcaption{margin-top:1.25rem}
@media(max-width:1000px){.hotspot-key{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}}
@media(max-width:700px){.hotspot{display:none}.hotspot-key{grid-template-columns:1fr;gap:.75rem}}
@media(prefers-reduced-motion:reduce){.hotspot{transition:none}}

/* 30-pages.css */
/* Route compositions: The Yacht, Design, Performance, Voyages, Enquire. */

/* ---------- Performance ---------- */
.p-hero{height:80svh;min-height:600px;max-height:1100px}
.p-hero .hero-bleed-copy{max-width:52%}
.route-performance h1{font-size:clamp(3.75rem,5.6vw,6rem)}
.p-hero:after{background:linear-gradient(160deg,#15181be6 0%,#15181bb3 30%,#15181b66 50%,transparent 72%)}
.p-intro{padding-block:var(--space-sm);align-items:end;row-gap:2rem}
.p-intro-copy{max-width:36rem}
.p-strip{padding-block:var(--space-sm) var(--space-sm)}
.p-strip-band{background:var(--slate);padding-block:var(--space-sm)}
.p-cutaway{padding-block:var(--space) var(--space-sm)}
.p-cutaway .hotspots{grid-column:1/-1}
.p-block{padding-block:var(--space);row-gap:3rem;align-items:start}
.p-hull,.p-structure{background:var(--slate)}
.p-hull{padding-bottom:var(--space-sm)}
.p-structure{padding-top:var(--space-sm)}
.p-block h2{margin-bottom:2rem!important}
.p-block .body-copy{max-width:27rem}
.p-block-copy{align-self:end}
.p-structure .p-exploded{grid-row:1}
.p-structure .p-block-copy{grid-row:1;align-self:center}
.p-propulsion .p-engine{grid-row:1}
.p-propulsion .p-block-copy{grid-row:1;align-self:end;padding-bottom:3rem}
.p-anchor{background:var(--slate);padding-block:var(--space-sm)}
.p-anchor .p-block-copy{padding-bottom:0}
.p-table{padding-block:var(--space-sm) var(--space)}
@media(min-width:701px) and (max-width:1000px){
  .p-structure .p-block-copy{margin-top:3rem}
}
@media(max-width:700px){
  .p-hero{height:72svh;min-height:520px}
  .p-hero .hero-bleed-copy{max-width:none}
  .route-performance h1{font-size:min(11vw,3.75rem)}
  .p-intro .body-copy{margin-top:2rem}
  .p-block{padding-block:var(--space-sm)}
  .p-block-copy{margin-top:2.5rem;padding-bottom:0!important}
  .p-structure .p-exploded{max-width:78%}
}

/* ---------- Crops: 16:9 originals in portrait and 3:2 slots ---------- */
.crop-45{aspect-ratio:4/5;object-fit:cover}
.crop-32{aspect-ratio:3/2;object-fit:cover}

/* ---------- The Yacht ---------- */
.y-hero{height:88svh;min-height:640px;max-height:1200px}
.y-intro{padding-block:var(--space-sm);align-items:start;row-gap:2.5rem}
.y-intro h2{margin:0}
.y-intro .body-copy{margin-top:0;justify-self:end;padding-top:.5rem}
.y-cockpit{padding-block:var(--space-sm) var(--space);row-gap:3rem}
.y-cockpit .plate img{height:78svh;min-height:440px;max-height:1000px;object-fit:cover}
.y-spread{padding-block:0 var(--space);row-gap:3rem;align-items:start}
.y-helm{grid-row:1 / span 2}
.y-helm-copy{grid-row:1;align-self:start;padding-top:1rem}
.y-helm-copy h2{margin-bottom:2rem!important}
.y-platform{grid-row:2;margin-top:3rem}
.y-below{padding-block:var(--space)}
.y-below .g12{row-gap:3.5rem}
.y-below-copy h2{margin-bottom:2rem!important}
.ga-key{counter-reset:ga;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1rem var(--col-gap)}
.ga-key li{counter-increment:ga;display:grid;grid-template-columns:1.75rem 1fr;gap:.25rem .75rem;padding:1rem 0 0;border-top:1px solid var(--rule);font-size:.875rem;line-height:1.5}
.ga-key li:before{content:counter(ga);font-family:var(--mono);font-size:.8125rem;color:var(--bronze)}
.y-maker{padding-block:var(--space-sm)}
.y-maker .g12{align-items:start;row-gap:2rem}
.y-maker .body-copy{padding-top:.5rem}
.y-maker h2{margin:0}
@media(min-width:701px) and (max-width:1000px){
  .ga-key{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
  .y-helm-copy{margin-top:0}
}
@media(max-width:700px){
  .y-hero{height:78svh;min-height:560px}
  .y-intro .body-copy{margin-top:2rem;padding-top:0;justify-self:start}
  .y-cockpit{padding-inline:0}
  .y-cockpit .plate img{height:auto;min-height:0;aspect-ratio:4/5}
  .y-cockpit .plate figcaption,.y-cockpit-copy{padding-inline:var(--gutter)}
  .y-cockpit-copy{margin-top:3rem}
  .y-helm-copy{margin-top:2.5rem}
  .y-platform{margin-top:3rem}
  .ga-key{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:.75rem 1.25rem}
  .y-below .g12>*+*{margin-top:2.5rem}
  .y-maker .body-copy{margin-top:2rem}
}

/* ---------- Design ---------- */
.d-cover{padding-top:calc(var(--header-h) + var(--space-sm))}
.d-cover-head{align-items:start;row-gap:3rem;padding-bottom:3rem}
.d-cover-head .d-intro{justify-self:end;padding-top:1.1rem}
.d-cover-head h1{margin:0}
.route-design h1{font-size:clamp(4.75rem,8.8vw,9.5rem)}
.route-inner .d-intro{margin-top:0;max-width:24rem}
.d-cover-plate .image-frame{height:80svh;min-height:600px;max-height:1100px}
.d-cover-plate img{height:100%;object-fit:cover}
.d-cover-plate figcaption{padding:1.25rem var(--gutter) 0}
.d-top{padding-block:var(--space);align-items:end;row-gap:3rem}
.d-top-plate{grid-row:1}
.d-top-copy{grid-row:1;align-self:start;padding-top:.25rem}
.d-top-copy h2{margin-bottom:1.5rem!important}
.d-interiors{padding-block:var(--space)}
.d-int-head{padding-bottom:3rem}
.d-int-head h2{margin:0}
.d-int-plates{align-items:start;row-gap:var(--space-sm)}
.d-cabin{grid-row:1}
.d-int-copy{grid-row:1;padding-top:.25rem}
.d-bath{grid-row:2}
.d-materials{padding-block:0 var(--space);align-items:center;row-gap:3rem}
.d-mat-copy h2{margin-bottom:2.5rem!important}
.material-notes{margin:0}
.material-notes div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--rule);padding:1rem 0;font-size:.8125rem;line-height:1.5}
.material-notes dt{font-size:.875rem}
.material-notes dd{margin:0;color:var(--muted);text-align:right}
.d-close{padding-block:var(--space-sm) var(--space)}
@media(min-width:701px) and (max-width:1000px){
  .d-int-copy{padding-top:0}
  .d-top-copy{margin-top:2rem}
}
@media(max-width:700px){
  .route-design h1{font-size:min(14vw,4.25rem)}
  .d-cover-head{padding-bottom:var(--space-sm)}
  .route-inner .d-intro{margin-top:2.5rem}
  .d-cover-plate .image-frame{height:auto;min-height:0;aspect-ratio:4/5}
  .d-top-copy{margin-top:2.5rem;padding-bottom:0}
  .d-int-copy{margin-top:2rem}
  .d-bath{margin-top:3rem;max-width:78%}
  .d-mat-copy{margin-top:3rem}
  .material-notes dd{text-align:left}
  .material-notes div{flex-direction:column;gap:.25rem}
}

/* ---------- Voyages ---------- */
.v-hero{height:80svh;min-height:600px;max-height:1100px}
.v-hero .hero-bleed-copy{max-width:60%}
.v-hero h1 em{color:var(--pearl)}
.v-hero:after{background:linear-gradient(20deg,#15181be6 0%,#15181b8c 30%,transparent 62%)}
.v-intro{padding-block:var(--space-sm);align-items:start;row-gap:2.5rem}
.v-intro h2{margin:0}
.v-intro .body-copy{justify-self:end;padding-top:.5rem}
.v-sand{padding-block:var(--space-sm) var(--space)}
.v-sand .plate img{height:80svh;min-height:440px;max-height:1000px;object-fit:cover}
.v-pair{padding-block:0 var(--space);row-gap:3rem;align-items:start}
.v-pair-copy{grid-row:1}
.v-pair-copy h2{margin-bottom:1.5rem!important}
.v-platform{grid-row:2}
.v-cockpit{grid-row:1 / span 2;margin-top:0}
.v-close{padding-bottom:var(--space)}
.v-close-head{padding-bottom:var(--space-sm)}
.v-close-head h2{margin:0}
.v-home .image-frame{height:80svh;min-height:520px;max-height:1000px}
.v-home img{height:100%;object-fit:cover}
.v-home figcaption{padding:1.25rem var(--gutter) 0}
@media(max-width:700px){
  .v-hero{height:72svh;min-height:520px}
  .v-hero .hero-bleed-copy{max-width:none}
  .v-hero{min-height:600px}
  .v-intro .body-copy{margin-top:2rem;padding-top:0;justify-self:start}
  .v-sand{padding-inline:0}
  .v-sand .plate img{height:auto;min-height:0;aspect-ratio:4/5}
  .v-sand .plate figcaption{padding-inline:var(--gutter)}
  .v-platform{margin-top:2.5rem;max-width:78%}
  .v-cockpit{margin-top:3rem}
  .v-home .image-frame{height:auto;min-height:0;aspect-ratio:4/5}
}

/* ---------- Enquire ---------- */
.e-page{padding-block:calc(var(--header-h) + var(--space-sm)) var(--space);align-items:start;row-gap:var(--space-sm)}
.route-inner .e-intro{margin-top:2.5rem}
.e-form-col{padding-top:.5rem}
.e-notice{margin:0 0 1.25rem;padding:1rem 0;border-block:1px solid var(--rule);font-size:.875rem;line-height:1.6}
.field{margin-bottom:1.75rem}
.field label{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;line-height:1.5;margin-bottom:.4rem}
.field-req{font-size:.8125rem;opacity:.8}
.e-form input,.e-form select,.e-form textarea{display:block;width:100%;min-height:48px;padding:.7rem 0;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:1rem;line-height:1.5}
.e-form textarea{resize:vertical;min-height:9rem;border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);padding:.75rem}
.e-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:1.5rem}
.e-form input:focus-visible,.e-form select:focus-visible,.e-form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.e-form [aria-invalid="true"]{border-color:#8a3b2e}
.field-error{margin:.5rem 0 0;color:#8a3b2e;font-size:.875rem;line-height:1.5}
.field-hint{margin:.5rem 0 0;font-size:.8125rem;opacity:.75}
.e-convention{margin:0 0 2rem;font-size:.8125rem;opacity:.75}
.e-submit,.e-edit{min-height:52px;padding:0 2rem;border:1px solid var(--bronze);background:var(--bronze);color:var(--graphite);font-size:.9375rem;letter-spacing:.03em;transition:background .25s,color .25s}
.e-submit:hover,.e-edit:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.e-submit:disabled{opacity:.45;cursor:not-allowed}
.e-review{outline:none}
.e-review h2{font-size:clamp(2rem,2.8vw,2.75rem)!important;line-height:1.15!important;margin:0 0 2rem!important}
.e-review-list{margin:0 0 2.5rem}
.e-review-list div{display:grid;grid-template-columns:10rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--rule);font-size:.9375rem;line-height:1.6}
.e-review-list dt{opacity:.8}
.e-review-list dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.e-line{grid-row:2;margin-top:-4rem}
.route-enquire .site-footer{border-top:1px solid var(--rule)}
@media(max-width:700px){
  .e-form-col{margin-top:3rem}
  .e-review-list div{grid-template-columns:1fr;gap:.25rem}
  .e-line{margin-top:3.5rem;max-width:78%}
}

/* 31-turntable.css */
/* Turntable: one figure, one img (the still of record), frames painted to a canvas by /turntable.js. */
.turntable{position:relative;margin:0;aspect-ratio:16/9;background:#1b1e21;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none}
.turntable img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.turntable-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.turntable.is-ready{cursor:grab}
.turntable.is-dragging{cursor:grabbing}
.turntable:focus-visible{outline:2px solid var(--pearl);outline-offset:4px}
.turntable-hint{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .9rem;border:1px solid color-mix(in srgb,var(--pearl) 35%,transparent);border-radius:999px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pearl);background:color-mix(in srgb,var(--graphite) 55%,transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.turntable.is-ready .turntable-hint{opacity:1}
.turntable.is-dragging .turntable-hint,.turntable.is-turned .turntable-hint{opacity:0}
.turntable.is-stop-left canvas{animation:turn-stop-left .32s cubic-bezier(.2,.8,.3,1)}
.turntable.is-stop-right canvas{animation:turn-stop-right .32s cubic-bezier(.2,.8,.3,1)}
@keyframes turn-stop-left{30%{transform:translateX(7px)}100%{transform:none}}
@keyframes turn-stop-right{30%{transform:translateX(-7px)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.turntable.is-stop-left canvas,.turntable.is-stop-right canvas{animation:none}}
.turntable-hint svg{width:18px;height:18px}
.y-turn{padding-block:0 var(--space-sm);row-gap:1.25rem}
.turn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.turn-head h2{margin:0}
.turn-head>p{margin:0;max-width:22rem;font-size:.875rem;line-height:1.6;color:var(--mist)}
@media(max-width:700px){.turn-head{flex-direction:column;align-items:flex-start;gap:1rem}.turn-head>p{display:none}.turntable-hint{bottom:.75rem}}