/* R.Song AquaStudio — layered over style.css.
   Same type scale, same section vocabulary, different water.

   The R.Song and AerialFX studios are deliberately monochrome: near-black,
   white and greys, no accent anywhere. That is right for a photograph of a
   brick room and wrong for this — every picture here is glacial turquoise and
   gold, and style.css desaturates tiles on purpose. So: a lake palette, and
   the grayscale filter turned off rather than fought. */

:root{
  /* Their colours, read out of the Canva payload -- not picked by us. The first
     build of this page invented a teal that was close but not theirs. */
  --ink:#231F20;        /* their near-black */
  --ink-2:#33383a;
  --grey:#6b7a7c;
  --grey-2:#a9bdbf;
  --line:#d6ecea;
  --paper:#f2fbfa;
  --wave:#45C7C3;       /* the turquoise the whole Canva site is keyed to */
  --foam:#CFF9F7;
}

/* Photographs stay in colour. This is the whole point of the brand. */
.disc img,.team img,.js .disc figure.lit img,.js .team figure.lit img{filter:none}
.disc figure:hover img{filter:none}
.disc img{transform:scale(1); transition:transform .5s ease}
.disc figure:hover img{transform:scale(1.03)}
.disc figure{overflow:hidden}

/* Their turquoise is LIGHT (#45C7C3). White on it measures about 1.9:1, which
   fails outright -- so anything sitting on the accent takes the dark ink, and
   the accent is used as a ground, never as text on white. */
.btn{border-color:var(--wave); background:var(--wave); color:var(--ink)}
.btn:hover{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--ghost:hover{background:var(--wave); border-color:var(--wave); color:var(--ink)}
.btn--light{background:#fff; border-color:#fff; color:var(--ink)}
.btn--light:hover{background:transparent; color:#fff; border-color:#fff}
/* aqua.css loads after style.css, so a bare `.btn` rule here outranks the
   variants there by source order. Re-assert the one that sits on photography. */
.btn--outline-light{background:transparent; border-color:rgba(255,255,255,.8); color:#fff}
.btn--outline-light:hover{background:#fff; border-color:#fff; color:var(--ink)}

/* the accent is too light to read as text on white; eyebrows keep the grey */
.sec--ink .eyebrow{color:var(--wave)}
.hero .eyebrow{color:rgba(255,255,255,.85)}
.sec--ink{background:var(--ink)}
.sec--ink .eyebrow{color:var(--grey-2)}

/* A season that has ended has to say so before the visitor reads a price.
   It sits directly under the hero rather than above it: the header is fixed and
   the hero deliberately runs up underneath it, so a strip above the hero would
   land behind the nav. */
.season{background:var(--wave); color:var(--ink); padding:1.1rem 0}
.season .shell{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.2rem}
.season b{font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.season span{font-size:var(--t-body); color:var(--ink)}
.season a{color:var(--ink); text-underline-offset:.2em}

/* The sailing list. A departure time is the single most functional line on the
   page -- it does not get caption size either. */
.sail{display:grid; gap:1rem; margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sail div{border:1px solid var(--line); padding:1.5rem 1.6rem; background:#fff}
.sail h3{font-size:var(--t-body); letter-spacing:.04em}
.sail p{margin-top:.6rem; font-size:var(--t-body); color:var(--ink-2); line-height:1.5}
.sail p + p{margin-top:.3rem}
.sec--paper .sail div{background:#fff}

/* Numbered process steps.
   These are instructions a customer has to follow to give the studio money, so
   they are set at body size, not caption size. They were --step--1 (13.8px) on a
   dark ground at 72% opacity, which is a caption pretending to be a paragraph. */
.steps{counter-reset:s; margin-top:3rem; border-top:1px solid var(--line)}
.steps > div{counter-increment:s; display:grid; gap:.5rem 1.6rem; padding:1.9rem 0;
  border-bottom:1px solid var(--line); grid-template-columns:auto 1fr}
.steps > div::before{content:counter(s); grid-row:1/3; font-size:var(--t-h2);
  font-weight:700; color:var(--grey-2); line-height:1}
.steps h3{font-size:var(--t-h3); letter-spacing:.02em}
.steps p{font-size:var(--t-body); color:var(--ink-2); line-height:1.6; max-width:62ch}
.sec--ink .steps{border-color:rgba(255,255,255,.18)}
.sec--ink .steps > div{border-color:rgba(255,255,255,.18)}
.sec--ink .steps p{color:rgba(255,255,255,.86)}
.sec--ink .steps > div::before{color:var(--grey-2)}

/* spec list */
.spec{margin-top:2.4rem; border-top:1px solid var(--line)}
.spec li{list-style:none; padding:1rem 0; border-bottom:1px solid var(--line);
  font-size:var(--t-body); line-height:1.6}
.spec{padding-left:0}

/* The package cards carry a bulleted list, which style.css has no rule for. */
.card ul{font-size:var(--t-body); color:var(--ink-2); line-height:1.6}

/* The gallery.
   A 1:1 crop is wrong for this set: the strongest frame in it is a 2400x1600
   silhouette of an aerialist at dusk, and squaring it throws the lake away.
   Masonry columns show every photograph as it was shot. */
.gal--masonry{columns:4; column-gap:14px; margin-top:3rem}
.gal--masonry figure{break-inside:avoid; margin:0 0 14px; position:relative; overflow:hidden}
.gal--masonry img{width:100%; height:auto; display:block; aspect-ratio:auto;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gal--masonry figure:hover img{transform:scale(1.04)}
@media(max-width:1200px){.gal--masonry{columns:3}}
@media(max-width:900px){.gal--masonry{columns:2}}
@media(max-width:560px){.gal--masonry{columns:1}}

/* a live map beats a screenshot of one, and it is licensed */
.map{margin-top:2.5rem; border:1px solid var(--line); background:var(--paper)}
.map iframe{width:100%; height:min(60vh,460px); border:0; display:block}

/* The WebGL hero layer. It sits ON TOP of the photograph at opacity 0 and only
   becomes visible once a frame has actually rendered, so every failure mode --
   no WebGL, script blocked, an exception, a slow connection that never gets
   there -- leaves a perfectly good photograph on screen. */
.hero__gl{position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  opacity:0; transition:opacity .9s ease; pointer-events:none}
.hero__gl.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.hero__gl{display:none}}