/* ============================================================
   MYSTIQUE COMPANIONS — production stylesheet

   This is concept 07 "Lagoon" verbatim, plus a block at the end for
   the page types a one-page concept did not need: interior page
   headers, forms, tables, article prose, the journal and a 404.
   The concept's own rules are untouched, so the homepage renders
   exactly as approved.

   Original concept header follows.
   ------------------------------------------------------------
   MYSTIQUE COMPANIONS — Concept 07 "Lagoon"
   Riviera's structure and typography, re-tuned for travel.
   Marcellus + DM Sans.

   The palette is built around the brand's current aqua (#83BDCD,
   the colour the live site already runs) rather than the retired
   Golden-Beige. #88CFE9 on its own reads bright and thin at page
   scale, so it is used as a highlight, not a ground: warm shell and
   sand carry the surfaces, deep lagoon carries the authority, and
   the aqua family does the signalling. Warmth comes from the sand
   and the photography, which is what stops a coastal palette
   turning clinical.

   Every text/ground pair below is contrast-checked; the values are
   noted beside each token.
   ============================================================ */

:root{
  /* -- grounds: a creamy blue, not a saturated one ------------------
     #88CFE9 was tried as the page ground and fails on its own logo:
     the blue wordmark sits at 1.2:1 against it and all but vanishes.
     A 13% tint of the brand aqua reads unmistakably blue, holds the
     mark at 1.9:1, and keeps every text pair above AA. --------------- */
  --shell:#EDF4F6;       /* page ground — creamy blue                */
  --sand-2:#DCE9EE;      /* image placeholder — cool, so it does not
                            flash warm before the photography lands  */
  --milk:#FBFDFE;        /* raised surfaces, a shade above the ground*/

  /* -- the aqua family -- */
  --aqua:#83BDCD;        /* THE brand colour, from the live site     */
  --aqua-lt:#A9DCEC;     /* the client's #88CFE9, a shade softened   */
  --aqua-mid:#4A8FA3;    /* display-size accent   — 3.39:1 on shell  */
  --aqua-dp:#3A7387;     /* links and small text  — 4.74:1 on shell  */
  --aqua-soft:#CDE7EF;   /* tints, rules, chips                      */
  --aqua-on-dark:#A9DCEC;/* highlight on lagoon   — 5.05:1           */
  --accent-em:var(--aqua-dp);      /* highlight colour, restated per band */

  /* -- depth -- */
  --lagoon:#1D5C6B;       /* deep lagoon, dark bands — 6.75:1 on shell*/
  --lagoon-dp:#12414D;
  --foam:#9FC6CE;        /* numeral diamonds, chips                  */

  /* -- text -- */
  --ink:#1E3238;         /* 12.04:1 on shell                         */
  --ink-2:#46606A;       /*  6.01:1 on shell                         */
  --ink-3:#6A828C;       /*  3.55:1 on shell — micro labels only     */
  --hair:rgba(30,50,56,.13);
  --hair-aqua:rgba(131,189,205,.55);
  --hair-aqua-2:rgba(131,189,205,.3);

  --f-micro: clamp(.66rem, .61rem + .2vmin, .74rem);
  --f-small: clamp(.82rem, .76rem + .3vmin, .92rem);
  --f-body:  clamp(1rem, .93rem + .45vmin, 1.11rem);
  --f-lead:  clamp(1.1rem, .96rem + .9vmin, 1.5rem);
  --f-h3:    clamp(1.3rem, 1.02rem + 1.5vmin, 2.1rem);
  --f-h2:    clamp(1.9rem, 1.2rem + 3.2vmin, 3.9rem);
  --f-h1:    clamp(2.5rem, 1.25rem + 5.8vmin, 6.2rem);

  --gut: clamp(1.15rem, .5rem + 3.2vw, 4.2rem);
  --band: clamp(3.4rem, 1.5rem + 7.4vmin, 8.5rem);
  /* The arch and the soft radius are retired: this concept frames its
     imagery the way Deco does. Kept as 0/none so any rule still asking
     for them resolves to a square edge rather than silently breaking. */
  --arch: 0;
  --r-soft: 0px;
  --frame-pad: clamp(.45rem,1.1vmin,.85rem);  /* outer rule to image     */
  --frame-in:  clamp(.24rem,.6vmin,.45rem);   /* outer rule to inner rule*/
  --shadow: 0 30px 70px -40px rgba(20,45,52,.42);
  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--shell);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;font-size:var(--f-body);line-height:1.74;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,picture{max-width:100%;display:block}
img{height:auto;background:var(--sand-2)}
img[src*="logo"],img[src*="monogram"]{background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Marcellus",Georgia,serif;font-weight:400;margin:0;line-height:1.12}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--lagoon);outline-offset:3px;border-radius:4px}
::selection{background:var(--aqua-soft);color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--milk);padding:.8rem 1.2rem;z-index:999;border-radius:99px}
.skip:focus{left:.6rem;top:.6rem}
.shell{width:min(100% - (var(--gut) * 2),1480px);margin-inline:auto}

/* ---- Type helpers ---- */
.tag{display:inline-flex;align-items:center;gap:.6em;font-size:var(--f-micro);font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--aqua-dp);margin:0 0 1.2rem}
.tag::before{content:"";width:1.6rem;height:1px;background:var(--aqua)}
.tag--c{justify-content:center}
.tag--c::after{content:"";width:1.6rem;height:1px;background:var(--aqua)}
.h2{font-size:var(--f-h2);margin:0 0 1rem}
.h2 em{font-style:italic;color:var(--accent-em);font-family:"Marcellus",serif}
.sub{font-size:var(--f-lead);color:var(--ink-2);max-width:56ch}

/* ---- Buttons: soft, rounded ---- */
.btn{display:inline-flex;align-items:center;gap:.65em;border-radius:99px;cursor:pointer;
  padding:clamp(.8rem,.6rem + .65vmin,1.1rem) clamp(1.4rem,1rem + 1.6vmin,2.3rem);
  background:var(--ink);color:var(--milk);border:1px solid var(--ink);
  font-family:"DM Sans",sans-serif;font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:background .42s var(--ease),color .42s var(--ease),border-color .42s var(--ease),transform .42s var(--ease)}
.btn:hover{background:var(--aqua-dp);border-color:var(--aqua-dp);transform:translateY(-2px)}
.btn--out{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn--out:hover{background:var(--milk);border-color:var(--aqua);color:var(--aqua-dp)}
.btn--lagoon{background:var(--lagoon);border-color:var(--lagoon)}
.btn--lagoon:hover{background:var(--lagoon-dp);border-color:var(--lagoon-dp)}
.arrow{transition:transform .42s var(--ease)}
.btn:hover .arrow{transform:translateX(.3em)}
.tl{display:inline-flex;align-items:center;gap:.5em;font-size:var(--f-micro);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--aqua-dp);
  border-bottom:1px solid rgba(198,155,88,.45);padding-bottom:.25rem;transition:color .35s,border-color .35s}
.tl:hover{color:var(--ink);border-color:var(--ink)}
.tl:hover .arrow{transform:translateX(.3em)}

/* ============ FLOATING PILL NAV ============ */
.dock{position:sticky;top:clamp(.6rem,1.6vh,1.2rem);z-index:80;padding-inline:var(--gut);margin-top:clamp(.6rem,1.6vh,1.2rem)}
/* The blur lives on a pseudo-element, not on .dock__in itself.
 * backdrop-filter makes an element the containing block for its
 * position:fixed descendants, and the mobile drawer is one of those — so
 * with the filter here the open drawer resolved against this 61px pill
 * instead of the viewport and rendered as a 61px strip with its links
 * overflowing, on every page. Moving the filter down one level fixes the
 * drawer and leaves the pill pixel-identical. */
.dock__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  width:min(100%,1480px);margin-inline:auto;
  border:1px solid rgba(30,50,56,.10);border-radius:99px;
  padding:.55rem .7rem .55rem clamp(1rem,2vw,1.6rem);box-shadow:0 18px 40px -34px rgba(20,45,52,.5)}
.dock__in::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:rgba(253,251,247,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.dock__logo img{width:clamp(126px,10vw + 60px,196px)}
.dock__nav{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.9rem)}
/* Only the drawer has room for it; in the desktop bar it would sit in
   the middle of the nav row. */
.dock__note{display:none}
.dock__nav a{font-size:var(--f-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);transition:color .35s var(--ease)}
.dock__nav a:hover{color:var(--aqua-dp)}
.dock .btn{padding-block:.7rem}
.burger{display:none;width:2.7rem;height:2.7rem;border-radius:99px;border:1px solid var(--hair);
  background:var(--milk);cursor:pointer;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
/* .burger span is 0-1-1 and .vh is 0-1-0, so the visually-hidden "Menu"
   label lost its position:absolute, stayed in flow as a 17px flex item and
   shoved the bars off centre. Scoped so the label leaves the flow again. */
.burger .vh{position:absolute}
.burger span:not(.vh){width:1.05rem;height:1px;background:var(--ink);position:relative;display:block}
.burger span:not(.vh)::before,.burger span:not(.vh)::after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.burger span:not(.vh)::before{top:-.3rem}.burger span:not(.vh)::after{top:.3rem}
.burger[aria-expanded="true"] span:not(.vh){background:transparent}
.burger[aria-expanded="true"] span:not(.vh)::before{transform:translateY(.3rem) rotate(45deg)}
.burger[aria-expanded="true"] span:not(.vh)::after{transform:translateY(-.3rem) rotate(-45deg)}

/* ============ HERO — arch centrepiece ============ */
.hero{position:relative;padding:clamp(2rem,5vh,4.5rem) var(--gut) var(--band);text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% 50% auto;translate:50% 0;width:min(140vw,90rem);height:min(140vw,90rem);
  background:radial-gradient(closest-side,rgba(232,214,180,.55),transparent 72%);z-index:-1;pointer-events:none}
.hero h1{font-size:var(--f-h1);margin:0 auto 1.2rem;max-width:16ch;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--accent-em)}
.hero__sub{font-size:var(--f-lead);color:var(--ink-2);max-width:52ch;margin:0 auto clamp(1.6rem,3.4vh,2.6rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
/* ---- Framed plate ----------------------------------------------
   Ported from Deco in place of Riviera's three arches, but softened
   to Riviera's radius so the double rule reads as this concept's own
   rather than as a transplant. ------------------------------------ */
.hero__plate{position:relative;margin-top:clamp(2.2rem,5vh,4rem);
  width:min(100%,1420px);margin-inline:auto}
/* Deco's double rule, restated in aqua. Sharp corners throughout — the
   imagery in this concept is framed, not rounded, so --frame-pad and
   --frame-in are the only two numbers that set the geometry anywhere. */
.frame{position:relative;padding:var(--frame-pad)}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none}
.frame::before{inset:0;border:1px solid var(--hair-aqua)}
.frame::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}

/* A landscape window on a portrait photograph.
 *
 * Every picture on this site was shot portrait, so an article opening with
 * one at its natural height pushed the writing most of a screen down the
 * page. The frame is fixed at 16:9 and the image is cropped into it.
 *
 * Which part survives is the whole question, and centring is wrong more
 * often than it is right here — the subject is usually the setting in the
 * lower half, not the sky above it. `--focus` carries a measured point per
 * photograph (see _build/data/focus.js); 50% is the fallback when there is
 * no measurement, which is the old behaviour and never worse than it. */
.frame--wide{overflow:hidden}
.frame--wide img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:50% var(--focus,50%)}
.hero__plate img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 40%;
  box-shadow:var(--shadow)}
.hero__note{position:absolute;left:50%;bottom:clamp(-1.1rem,-1.8vw,-.6rem);translate:-50% 0;z-index:3;
  background:var(--milk);border-radius:99px;padding:.6rem 1.4rem;box-shadow:var(--shadow);
  font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--aqua-dp);white-space:nowrap}

/* ---- Stat pills ---- */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:clamp(2.6rem,5vh,4rem)}
.pills span{background:var(--milk);border:1px solid var(--hair);border-radius:99px;
  padding:.55rem 1.15rem;font-size:var(--f-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.pills b{color:var(--aqua-dp)}

/* ============ SECTIONS ============ */
.band{padding-block:var(--band)}
.band--milk{background:var(--milk)}
.band--lagoon{background:var(--lagoon);color:#DCEBEF;--accent-em:var(--aqua-on-dark)}
.band--lagoon h2,.band--lagoon h3{color:#fff}
.band--lagoon .tag{color:var(--aqua-soft)}
.band--lagoon .tag::before,.band--lagoon .tag::after{background:var(--aqua-soft)}
.band--lagoon .sub{color:rgba(220,235,239,.86)}
/* .tl is the light-ground inline link. Dropped into a dark band it was
   1.33:1 — invisible. It takes the on-dark accent there instead. */
.band--lagoon .tl,.band--lagoon .prose a{color:var(--aqua-on-dark);border-color:rgba(169,220,236,.5)}
.band--lagoon .tl:hover,.band--lagoon .prose a:hover{color:#fff}
.head{max-width:60ch;margin:0 0 clamp(2rem,1rem + 3vmin,3.6rem)}
.head--c{margin-inline:auto;text-align:center}

/* ---- Destination arches (this concept leads with travel) ---- */
.dests{display:grid;gap:clamp(1rem,.5rem + 1.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.dest{margin:0;position:relative;transition:transform .6s var(--ease)}
.dest:hover{transform:translateY(-6px)}
.dest__img{position:relative;padding:var(--frame-pad);background:var(--milk);box-shadow:var(--shadow)}
.dest__img::before,.dest__img::after{content:"";position:absolute;pointer-events:none}
.dest__img::before{inset:0;border:1px solid var(--hair-aqua)}
.dest__img::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}
.dest__img > picture{display:block;overflow:hidden}
.dest__img img{width:100%;aspect-ratio:3/4.2;object-fit:cover;transition:transform 1.2s var(--ease)}
.dest:hover .dest__img img{transform:scale(1.06)}
.dest figcaption{text-align:center;padding-top:1.1rem}
.dest figcaption b{display:block;font-family:"Marcellus",serif;font-size:var(--f-h3);font-weight:400}
.dest figcaption span{font-size:var(--f-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.dest__btn{position:absolute;inset:0;width:100%;background:none;border:0;cursor:zoom-in;padding:0}
.dest__btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---- Marquee of cities ---- */
.ticker{overflow:hidden;padding-block:clamp(1rem,2.4vmin,1.8rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker__t{display:flex;gap:clamp(1.4rem,3.4vw,3.4rem);width:max-content;animation:drift 42s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.ticker__t i{font-style:normal;font-family:"Marcellus",serif;font-size:clamp(1.3rem,.8rem + 2.2vmin,2.6rem);
  color:var(--ink-3);white-space:nowrap;display:flex;align-items:center;gap:clamp(1.4rem,3.4vw,3.4rem)}
.ticker__t i::after{content:"✦";font-size:.34em;color:var(--aqua)}
@media (prefers-reduced-motion:reduce){.ticker__t{animation:none;width:auto;flex-wrap:wrap}}

/* ---- Services: soft cards ---- */
/* ---- Framed trio ------------------------------------------------
   Deco's single framed block with hairline dividers, in place of
   Riviera's three separate floating cards. ----------------------- */
.trip{display:grid;gap:0;grid-template-columns:1fr;background:var(--milk)}
@media (min-width:52rem){.trip{grid-template-columns:repeat(3,1fr)}}
.trip__p{text-align:center;padding:clamp(1.6rem,1rem + 2.4vmin,3rem) clamp(1.1rem,2vw,2.2rem);
  border-top:1px solid var(--hair)}
.trip__p:first-child{border-top:0}
@media (min-width:52rem){
  .trip__p{border-top:0}
  .trip__p + .trip__p{border-left:1px solid var(--hair)}
}
.trip__n{display:grid;place-items:center;width:2.9rem;height:2.9rem;margin:0 auto 1.3rem;
  rotate:45deg;border:1px solid var(--aqua);background:var(--foam)}
.trip__n b{rotate:-45deg;font-family:"Marcellus",serif;font-size:1.05rem;color:var(--num-on-foam);font-weight:400}
.trip__p h3{font-size:var(--f-h3);margin:0 0 .8rem}
.trip__p p{font-size:var(--f-small);color:var(--ink-2);line-height:1.86;margin:0}

/* ---- Centred rule eyebrow (Deco's, for the framed sections) ---- */
.rule{display:flex;align-items:center;justify-content:center;gap:.75rem;margin:0 0 1.3rem}
.rule::before,.rule::after{content:"";height:1px;flex:1;max-width:5rem;background:var(--aqua)}
.rule span{font-family:"DM Sans",system-ui,sans-serif;font-size:var(--f-micro);font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--aqua-dp)}

.cards{display:grid;gap:clamp(1rem,.5rem + 1.6vw,2rem);grid-template-columns:1fr}
@media (min-width:52rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--milk);padding:clamp(1.5rem,.9rem + 2.4vmin,2.8rem);
  border:1px solid var(--hair);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card__n{display:grid;place-items:center;width:3rem;height:3rem;border-radius:99px;
  background:var(--shell);color:var(--aqua-dp);font-family:"Marcellus",serif;font-size:1.1rem;margin-bottom:1.3rem}
.card h3{font-size:var(--f-h3);margin:0 0 .8rem}
.card p{font-size:var(--f-small);color:var(--ink-2);line-height:1.82}

/* ---- Companions: framed row, still stepped ---- */
/* The default stays as the concept had it — six across on a wide screen,
   which is right where the register is a supporting band on a page about
   something else. The full register page opts into .folk--airy below. */
.folk{display:grid;gap:clamp(.9rem,.4rem + 1.5vw,1.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}

/* The full register is the whole point of its page, so it gets four to a
   row and a much wider gutter. Six across there read as a contact sheet. */
.folk--airy{gap:clamp(1.4rem,.8rem + 2.4vw,3.2rem);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:56rem){.folk--airy{grid-template-columns:repeat(3,1fr)}}
@media (min-width:78rem){.folk--airy{grid-template-columns:repeat(4,1fr)}}
/* The stagger is a transform, which reserves no space, so whatever follows
   the grid collided with the dropped columns. This reserves it. */
@media (min-width:46rem){.folk{padding-bottom:clamp(1rem,2.6vw,3.2rem)}}

/* .cta-row was written into the markup and never existed in the stylesheet,
   so the "View the full register" button sat inline at the grid's left edge. */
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.cta-row--c{justify-content:center}
.folk__i{margin:0}
.folk__i .ar{position:relative;padding:var(--frame-pad);background:var(--milk);box-shadow:var(--shadow)}
.folk__i .ar::before,.folk__i .ar::after{content:"";position:absolute;pointer-events:none;z-index:1}
.folk__i .ar::before{inset:0;border:1px solid var(--hair-aqua)}
.folk__i .ar::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}
.folk__i .ar > picture{display:block;overflow:hidden}
.folk__i img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--ease)}
.folk__i:hover img{transform:scale(1.05)}
.folk__i figcaption{padding-top:1rem}
.folk__i h3{font-size:var(--f-h3);margin:0 0 .1rem}
.folk__i .loc{font-size:var(--f-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
.folk__i p{font-size:var(--f-small);color:var(--ink-2);line-height:1.72;margin:0}
@media (min-width:64rem){
  .folk__i:nth-child(even){transform:translateY(clamp(1rem,2.6vw,3.2rem))}
}

/* ---- Steps ---- */
.walk{display:grid;gap:clamp(1.2rem,.6rem + 2vw,2.4rem);grid-template-columns:1fr;counter-reset:w}
@media (min-width:46rem){.walk{grid-template-columns:repeat(2,1fr)}}
@media (min-width:80rem){.walk{grid-template-columns:repeat(4,1fr)}}
.walk__s{counter-increment:w;position:relative;padding-top:2.6rem}
.walk__s::before{content:counter(w,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:"Marcellus",serif;font-size:var(--f-h3);color:var(--aqua-soft)}
.walk__s::after{content:"";position:absolute;top:1.4rem;left:0;right:0;height:1px;background:rgba(255,255,255,.2);z-index:-1}
.walk__s h3{font-size:var(--f-h3);margin:0 0 .6rem}
.walk__s p{font-size:var(--f-small);line-height:1.85;margin:0;color:rgba(220,235,239,.85)}

/* ---- Membership card ---- */
.join{display:grid;gap:clamp(1.6rem,1rem + 3vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:64rem){.join{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}
.join__list{list-style:none;margin:1.6rem 0 2rem;padding:0;display:grid;gap:.85rem}
.join__list li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline;font-size:var(--f-small);line-height:1.72}
.join__list li::before{content:"✦";color:var(--aqua);font-size:.7em}
.join__card{background:var(--milk);border:1px solid var(--hair);
  padding:clamp(1.6rem,1rem + 2.6vmin,3rem);box-shadow:var(--shadow);align-self:start}
.join__card h3{font-size:var(--f-h3);margin:0 0 .9rem}
.join__card p{font-size:var(--f-small);color:var(--ink-2);line-height:1.82}
.join__fine{font-size:var(--f-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:1.4rem 0 0}

/* ---- FAQ ---- */
.ask{display:grid;gap:.7rem}
.ask details{background:var(--milk);border:1px solid var(--hair);
  padding:0 clamp(1rem,2.4vw,1.8rem);transition:border-color .4s var(--ease)}
.ask details[open]{border-color:rgba(198,155,88,.5)}
.ask summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-block:clamp(.95rem,2.2vmin,1.4rem);font-family:"Marcellus",serif;font-size:var(--f-h3);line-height:1.3}
.ask summary::-webkit-details-marker{display:none}
.ask summary i{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:99px;background:var(--shell);
  display:grid;place-items:center;color:var(--aqua-dp);font-style:normal;font-size:1rem;transition:transform .45s var(--ease)}
.ask details[open] summary i{transform:rotate(45deg);background:var(--aqua);color:var(--milk)}
.ask__a{padding:0 0 clamp(1rem,2.4vmin,1.6rem);max-width:76ch}
.ask__a p{margin:0;font-size:var(--f-small);color:var(--ink-2);line-height:1.88}

/* ---- Closing ---- */
.send{text-align:center;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3rem,2rem + 6vmin,7rem) clamp(1.2rem,4vw,4rem)}
/* The inner rule reads as a frame drawn on the photograph, the way Deco
   frames its dark panels. */
.send::before{content:"";position:absolute;inset:var(--frame-in);z-index:1;pointer-events:none;
  border:1px solid rgba(196,230,242,.42)}
.send__bg{position:absolute;inset:0;z-index:-2}
/* <picture> is the element the image sizes against, so it needs the height
   too — without it height:100% resolved to auto and the photograph covered
   only the top of a tall mobile box. */
.send__bg > picture{display:block;width:100%;height:100%}
.send__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.send__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,40,47,.62),rgba(14,40,47,.84))}
/* Was an inline style pointing at --gold-soft, a token the palette rename
   removed; it resolved to nothing and inherited the dark body colour. */
.send .tag{color:var(--aqua-soft)}
.send .tag::before,.send .tag::after{background:rgba(196,230,242,.75)}
.send h2{color:#fff;font-size:var(--f-h2);max-width:20ch;margin:0 auto 1rem}
.send p{color:rgba(253,251,247,.88);max-width:48ch;margin:0 auto 2rem;font-size:var(--f-lead)}
.send .btn{background:var(--milk);color:var(--ink);border-color:var(--milk)}
.send .btn:hover{background:var(--aqua);border-color:var(--aqua);color:var(--ink)}

/* ---- Footer ---- */
.foot{background:var(--milk);border-top:1px solid var(--hair);padding:var(--band) var(--gut) 1.8rem;font-size:var(--f-small)}
.foot__g{display:grid;gap:clamp(1.6rem,1rem + 3vw,3.6rem);grid-template-columns:1fr}
@media (min-width:44rem){.foot__g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:70rem){.foot__g{grid-template-columns:1.5fr repeat(3,1fr)}}
.foot h2,
.foot h4{font-family:"DM Sans",sans-serif;font-size:var(--f-micro);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--aqua-dp);margin:0 0 1.1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;color:var(--ink-2)}
.foot a:hover{color:var(--aqua-dp)}
.foot__logo img{width:clamp(150px,14vw,215px);margin-bottom:1.1rem}
.foot__end{margin-top:var(--band);padding-top:1.4rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2rem;justify-content:space-between;
  font-size:var(--f-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---- Lightbox ----
   Author styles outrank the UA sheet, so `dialog:not([open])`
   must be re-stated here or the dialog paints while closed. */
.lb:not([open]){display:none}
.lb{position:fixed;inset:0;z-index:200;background:rgba(35,28,20,.94);display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);border:0;width:100%;height:100%;max-width:none;max-height:none}
.lb::backdrop{background:rgba(35,28,20,.9)}
.lb img{max-width:min(92vw,60rem);max-height:82svh;width:auto;object-fit:contain}
.lb__cap{color:var(--aqua-soft);text-align:center;margin:1rem 0 0;font-size:var(--f-micro);
  letter-spacing:.26em;text-transform:uppercase}
.lb__x{position:absolute;top:clamp(.8rem,3vw,2rem);right:clamp(.8rem,3vw,2rem);width:2.9rem;height:2.9rem;
  border-radius:99px;border:1px solid rgba(253,251,247,.35);background:transparent;color:var(--milk);
  cursor:pointer;font-size:1.1rem;line-height:1}
.lb__x:hover{background:var(--milk);color:var(--ink)}

/* ---- Reveal ---- */
[data-in]{opacity:0;transform:translateY(1.6rem);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-in].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-in]{opacity:1;transform:none}}

/* ============================================================
   ORIENTATION + LIQUID BEHAVIOUR
   ============================================================ */

@media (max-width:64rem){
  .burger{display:flex}
  .dock__nav{position:fixed;inset:0 0 0 auto;width:min(84vw,24rem);background:var(--milk);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.15rem;
    padding:calc(var(--gut) + 5.5rem) var(--gut) var(--gut);
    transform:translateX(101%);transition:transform .55s var(--ease);z-index:90;
    box-shadow:-30px 0 60px -40px rgba(20,45,52,.6);overflow-y:auto}
  .dock__nav[data-open="true"]{transform:none}
  .dock__nav a{font-family:"Marcellus",serif;font-size:var(--f-lead);letter-spacing:.02em;text-transform:none}
  /* .dock__nav a is 0-1-1 and .btn is 0-1-0, so the call to action was
     rendering the dark link colour on its own dark ground. */
  .dock__nav a.btn{color:var(--milk);font-family:inherit;font-size:var(--f-micro);
    letter-spacing:.16em;text-transform:uppercase;margin-top:.6rem}
  .dock__nav a.btn:hover{color:var(--milk)}
  /* the panel is tall and the list is short; a quiet line at the foot stops
     it reading as an empty white slab */
  .dock__note{display:block;margin-top:auto;padding-top:2rem;font-size:var(--f-micro);line-height:1.7;
    letter-spacing:.06em;color:var(--ink-3);border-top:1px solid var(--hair)}
  .dock__note b{display:block;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--aqua-dp);margin-bottom:.5rem}
  /* .dock__nav a is 0-1-1 again — without this the address in the note
     renders at the drawer link size and runs off the panel. */
  .dock__note a{font-family:inherit;font-size:inherit;letter-spacing:inherit;
    color:var(--aqua-dp);overflow-wrap:anywhere}
  .dock > .dock__in > .btn{display:none}
  /* The scrim was at 85, above .dock's 80. .dock has a z-index, so it is a
     stacking context and the drawer's z-index:90 is scoped INSIDE it — the
     drawer could never rise above the scrim, and opened tinted dark. The
     scrim belongs below the dock, above everything else. */
  .scrim{position:fixed;inset:0;background:rgba(20,45,52,.4);opacity:0;pointer-events:none;
    transition:opacity .5s var(--ease);z-index:75}
  .scrim[data-open="true"]{opacity:1;pointer-events:auto}
}
@media (min-width:64.0625rem){.dock__nav .btn{display:none}.scrim{display:none}}

/* PHONE IN LANDSCAPE — the arch centrepiece would be taller than the
   screen, so the hero becomes a side-by-side and the arches flatten. */
@media (orientation:landscape) and (max-height:34rem){
  :root{--band:clamp(1.8rem,1rem + 3.2vmin,3.2rem)}
  .hero{text-align:left;padding-top:1.4rem;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0 1.6rem;align-items:center}
  .hero__copy{grid-column:1;grid-row:1}
  .hero h1{margin-inline:0;font-size:clamp(1.9rem,1rem + 5.6vmin,3.4rem)}
  .hero .tag--c{justify-content:flex-start}
  .hero .tag--c::after{display:none}
  .hero__sub{margin-inline:0;margin-bottom:1.1rem;font-size:var(--f-body)}
  .hero__cta{justify-content:flex-start}
  .hero__plate{grid-column:2;grid-row:1;margin-top:0}
  .hero__plate img{aspect-ratio:4/3}
  .hero__note{display:none}
  .pills{grid-column:1 / -1;margin-top:.8rem;justify-content:flex-start}
  .dock__nav{width:min(70vw,30rem);display:grid;grid-template-columns:repeat(2,1fr);align-content:center;gap:.9rem 1.5rem}
  .dock__nav .btn{grid-column:1 / -1;justify-content:center}
  .dest__img img{aspect-ratio:3/3.4}
  .folk__i:nth-child(even){transform:none}
  .lb img{max-height:74svh}
}

/* Tablet portrait — the arch imagery gets room to breathe */
@media (orientation:portrait) and (min-width:46rem) and (max-width:64rem){
  .dests{grid-template-columns:repeat(2,1fr)}
  .folk{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}

@media (hover:none){
  .dest:hover{transform:none}
  .card:hover{transform:none}
  .folk__i:hover img,.dest:hover .dest__img img{transform:none}
}


/* ============================================================
   PRODUCTION ADDITIONS
   Everything below is new for the multi-page site. Nothing above
   this line was changed from the approved concept.
   ============================================================ */

/* ---- Shell widths for prose and mid-width pages ---- */
.shell--mid{width:min(100% - (var(--gut) * 2),1080px)}
.shell--narrow{width:min(100% - (var(--gut) * 2),68ch)}

/* ---- Accessibility: the micro-text token -------------------------
   --ink-3 carries every piece of small uppercase text on the site:
   breadcrumbs, companion locations, destination captions, the footer
   base line, the credential labels. At its concept value of #6A828C it
   measured 3.64:1 on the page ground and 3.97:1 on milk, and all of it
   is 12px, so WCAG AA wants 4.5:1. Darkened one step to clear both.
   This is the only value taken from the approved concept, and it is a
   correction rather than a redesign: same hue, same role, 12% darker.
   Revert this block to restore the concept value exactly. ---------- */
:root{
  --ink-3:#5D727B;      /* was #6A828C — 3.64:1 on shell. Now 4.54:1 / 4.95:1 on milk. */
  --aqua-dp:#386E82;    /* was #3A7387 — 4.25:1 on --sand-2. Now 4.55:1 there, 5.07:1 on shell. */
  --num-on-foam:#12414D;/* the numeral inside a --foam diamond: 6.06:1, where --aqua-dp gave 2.87:1 */
}

/* ---- Interior page hero — "the veil" -----------------------------
   The first version of this copied the homepage hero outright: centred
   type over a big framed 16:9 plate. That was wrong twice over. It spent
   the homepage's one big moment again on every interior page, so nothing
   felt like an arrival; and it pushed the actual content of the page most
   of a screen down.

   Here the photograph stops being an object and becomes atmosphere. It
   bleeds full width behind the type at 16% and is masked along the
   diagonal, densest at the top-left and gone by about three-fifths of the
   way to the bottom-right. The aqua glow then sits in the opposite corner
   as a counterweight, so the composition balances across that diagonal
   instead of leaning into one side.

   The type goes left-aligned, where the homepage is centred. That is a
   deliberate signal rather than a whim: centred and ceremonial means you
   are on the homepage, left and editorial means you are inside the site.
   Same family, different register. ---------------------------------- */
/* The dock is a floating island. It should sit OVER the imagery, the way
 * it does on the homepage where the ground is uniform — but it occupies
 * about 80px of flow space before this section, and with a veil starting
 * at the section edge that strip rendered as flat page ground with a hard
 * seam under it.
 *
 * So the veil is pulled up behind the dock. overflow:hidden cannot do
 * that (it clips all four sides), so the containment moves to a clip-path
 * with a negative top inset: the sides and the bottom still clip, which is
 * what keeps the glow from causing page overflow, and the top is open.
 * Anything above the document origin simply never paints, so overshooting
 * the dock height costs nothing. */
.phero{position:relative;isolation:isolate;overflow:visible;
  clip-path:inset(-9rem 0 0 0);
  padding:clamp(5.5rem,10vh,7.6rem) 0 clamp(2.8rem,5vh,4.2rem);
  border-bottom:1px solid var(--hair-aqua)}

.phero__veil{position:absolute;inset:-9rem 0 0 0;z-index:-2;pointer-events:none}
/* The wash keeps the veil on-colour so a faint photograph does not go
   grey, but it must not peak where the IMAGE peaks — at .26 over the
   top-left it was smothering the very part of the picture that is meant
   to be legible, which is why the hero read as a colour gradient rather
   than a photograph. It is lighter now and weighted slightly further
   along the diagonal, so it unifies the fade-out instead of the subject. */
.phero__veil::after{content:"";position:absolute;inset:0;
  background:linear-gradient(215deg,rgba(131,189,205,.12) 0%,rgba(150,205,222,.16) 30%,transparent 60%)}
.phero__veil picture{display:block;width:100%;height:100%}
/* 30%, densest at the top-right where nothing sits in front of it, fading
   down and to the left so it has thinned to nothing by the time it reaches
   the copy. A little saturation and contrast so it reads as a photograph
   at this weight rather than as a stain. */
.phero__veil img{width:100%;height:100%;object-fit:cover;object-position:62% 34%;
  opacity:.30;filter:saturate(1.16) contrast(1.05);
  -webkit-mask-image:linear-gradient(215deg,#000 0%,#000 26%,rgba(0,0,0,.66) 44%,rgba(0,0,0,.22) 58%,transparent 72%);
          mask-image:linear-gradient(215deg,#000 0%,#000 26%,rgba(0,0,0,.66) 44%,rgba(0,0,0,.22) 58%,transparent 72%)}

/* The copy column does not shrink as fast as the hero does, so below the
   widest breakpoint it reaches further across. The mask pulls back to keep
   the photograph out from under the words. */
@media (max-width:80rem){
  .phero__veil img{
    -webkit-mask-image:linear-gradient(215deg,#000 0%,#000 18%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.14) 44%,transparent 56%);
            mask-image:linear-gradient(215deg,#000 0%,#000 18%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.14) 44%,transparent 56%)}
}
@media (max-width:64rem){
  .phero__veil img{opacity:.32;
    -webkit-mask-image:linear-gradient(212deg,#000 0%,#000 13%,rgba(0,0,0,.42) 26%,rgba(0,0,0,.10) 36%,transparent 46%);
            mask-image:linear-gradient(212deg,#000 0%,#000 13%,rgba(0,0,0,.42) 26%,rgba(0,0,0,.10) 36%,transparent 46%)}
}

/* the counterweight, opposite the image mass */
.phero::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-18%;bottom:-64%;width:min(108vw,64rem);height:min(108vw,64rem);
  background:radial-gradient(closest-side,rgba(169,220,236,.38),transparent 70%)}

.phero__in{position:relative;z-index:1;
  width:min(100% - (var(--gut) * 2),1420px);margin-inline:auto}
.phero h1{font-size:clamp(2.1rem,1rem + 4.1vmin,4.3rem);line-height:1.05;letter-spacing:-.015em;
  margin:0 0 1rem;max-width:19ch}
.phero h1 em{font-style:italic;color:var(--aqua-mid)}
.phero__sub{font-size:var(--f-lead);color:var(--ink-2);max-width:54ch;
  margin:0 0 clamp(1.5rem,3vh,2.2rem)}
.phero__cta{display:flex;flex-wrap:wrap;gap:.8rem}
/* --ink-3 clears AA on the plain ground by 0.04, so any veil at all breaks
   it. The hero's small text takes a colour with room to spare. */
.phero .crumbs{color:var(--ink-2)}
.phero .tag{color:var(--lagoon)}
.phero .tag::before{background:var(--aqua-mid)}
.phero .crumbs a{color:var(--lagoon)}

/* the homepage's own stat pills, reused rather than reinvented */
.phero .pills{justify-content:flex-start;margin-top:clamp(1.8rem,3.5vh,2.9rem)}

/* Breadcrumbs sit above the eyebrow, left with everything else. */
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  margin:0 0 1.3rem;padding:0;list-style:none;
  font-size:var(--f-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.crumbs a{color:var(--aqua-dp)}
.crumbs a:hover{color:var(--lagoon)}
.crumbs li+li::before{content:"/";margin-right:.45rem;color:var(--hair-aqua)}

/* On a phone the diagonal has no room to read, so the veil goes to a
   plain top-down fade and the type recentres under it. */
@media (max-width:46rem){
  .phero{padding-top:clamp(4.8rem,14vh,6rem);text-align:center}
  .phero h1,.phero__sub{margin-inline:auto}
  .phero__cta,.phero .pills,.crumbs{justify-content:center}
  /* Centred, full-width copy leaves nowhere beside it for a picture, so on
     phones the veil is a band across the top: strong enough to read as a
     photograph in the clear space around the dock, finished before the
     breadcrumbs begin. */
  .phero__veil img{object-position:50% 24%;opacity:.40;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 14%,rgba(0,0,0,.34) 22%,transparent 30%);
            mask-image:linear-gradient(180deg,#000 0%,#000 14%,rgba(0,0,0,.34) 22%,transparent 30%)}
  .phero::after{left:-40%;bottom:-50%}
}

/* ---- Editorial split ----
   Image one side, copy the other, alternating down the page. This is
   what replaces the wall of prose the client called dry. */
.split{display:grid;gap:clamp(1.6rem,1rem + 3vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:60rem){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--flip .split__fig{order:2}
}
.split + .split{margin-top:clamp(3rem,2rem + 5vmin,6rem)}
/* The destination cards on the homepage lift and zoom on hover and carry
   a caption tab. These behave the same way, so an image in an editorial
   split feels like the same object as an image in the grid. */
.split__fig{margin:0;position:relative;transition:transform .6s var(--ease)}
.split__fig:hover{transform:translateY(-5px)}
.split__fig .frame{background:var(--milk);box-shadow:var(--shadow)}
.split__fig picture{display:block;overflow:hidden}
.split__fig img{width:100%;aspect-ratio:4/4.6;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.split__fig:hover img{transform:scale(1.05)}
/* the tab, matching .hero__note's pill exactly */
.split__cap{position:absolute;left:50%;bottom:clamp(-1rem,-1.6vw,-.6rem);translate:-50% 0;z-index:3;
  background:var(--milk);border-radius:99px;padding:.55rem 1.25rem;box-shadow:var(--shadow);
  border:1px solid var(--hair);margin:0;
  font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aqua-dp);white-space:nowrap}
.split__body > :first-child{margin-top:0}
.split__body h2{font-size:clamp(1.6rem,1.1rem + 2vmin,2.6rem);margin:0 0 1rem}
.split__body p{color:var(--ink-2);line-height:1.8}
.split__body p:last-child{margin-bottom:0}

/* ---- Lede ---- */
.lede{font-family:"Marcellus",serif;font-size:clamp(1.15rem,1rem + .9vmin,1.6rem);
  line-height:1.55;color:var(--ink);max-width:60ch}
.lede + p{margin-top:1.2rem}

/* ---- Pull quote ---- */
.quote{position:relative;margin:clamp(2.6rem,5vh,4.4rem) 0;
  padding:clamp(2.6rem,1.4rem + 3.4vmin,4rem) 0 clamp(1.8rem,1rem + 3vmin,3.2rem);
  border-block:1px solid var(--hair-aqua);text-align:center}
/* the same rotated diamond, used as a quotation mark */
.quote::before{content:"";position:absolute;top:0;left:50%;translate:-50% -50%;
  width:1.5rem;height:1.5rem;rotate:45deg;background:var(--foam);border:1px solid var(--aqua)}
.quote p{font-family:"Marcellus",serif;font-size:clamp(1.35rem,1rem + 2vmin,2.4rem);
  line-height:1.4;color:var(--lagoon);max-width:26ch;margin:0 auto}
.quote cite{display:block;margin-top:1.1rem;font-style:normal;font-size:var(--f-micro);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}

/* ---- Numbered editorial notes ----
   The homepage sets its three "ways" in a diamond rotated 45deg with the
   numeral rotated back inside it. Same motif here, so a numbered list on
   an interior page is recognisably the same design language. */
.notes{display:grid;gap:0;border-top:1px solid var(--hair-aqua);margin:0;padding:0}
.notes > li{list-style:none;display:grid;align-items:start;
  gap:.35rem clamp(1.2rem,3vw,2.4rem);grid-template-columns:auto 1fr;
  padding:clamp(1.5rem,1rem + 1.8vmin,2.6rem) 0;border-bottom:1px solid var(--hair)}
.notes__n{display:grid;place-items:center;width:2.9rem;height:2.9rem;
  rotate:45deg;border:1px solid var(--aqua);background:var(--foam);margin-top:.25rem}
.notes__n b{rotate:-45deg;font-family:"Marcellus",serif;font-weight:400;
  font-size:.95rem;color:var(--num-on-foam)}
.notes strong{display:block;margin-bottom:.4rem;font-weight:400;
  font-family:"Marcellus",serif;font-size:var(--f-h3);color:var(--ink)}
.notes p{margin:0;color:var(--ink-2);line-height:1.8}
.band--lagoon .notes{border-color:rgba(169,220,236,.34)}
.band--lagoon .notes > li{border-color:rgba(169,220,236,.2)}
.band--lagoon .notes strong{color:#fff}
.band--lagoon .notes p{color:rgba(220,235,239,.86)}
.band--lagoon .notes__n{background:transparent;border-color:var(--aqua-on-dark)}
.band--lagoon .notes__n b{color:var(--aqua-on-dark)}

/* ---- Tier cards (Four / Five / Six Star) ---- */
.tiers{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.8rem);grid-template-columns:1fr}
@media (min-width:56rem){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{position:relative;background:var(--milk);padding:clamp(1.8rem,1rem + 2.6vmin,3rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tier::before,.tier::after{content:"";position:absolute;pointer-events:none}
.tier::before{inset:0;border:1px solid var(--hair-aqua)}
.tier::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}
.tier > *{position:relative;z-index:1}
.tier--vip::before{border-color:rgba(169,220,236,.42)}
.tier--vip::after{border-color:rgba(169,220,236,.26)}
.tier:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tier__s{display:flex;gap:.22rem;color:var(--aqua);font-size:.95rem;letter-spacing:.1em}
/* .band--lagoon sets every h2/h3 white for headings that sit directly on
   the dark ground. These cards carry their own light ground inside that
   band, so they have to take the colour back or the name disappears. */
.tier h3{font-size:var(--f-h3);margin:0;color:var(--ink)}
.tier p{margin:0;color:var(--ink-2);line-height:1.75;font-size:var(--f-small)}
.tier--vip{background:var(--lagoon);border-color:var(--lagoon)}
.tier--vip h3{color:#fff}
.tier--vip p{color:rgba(220,235,239,.88)}
.tier--vip .tier__s{color:var(--aqua-on-dark)}

/* ---- Chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.chips li{font-size:var(--f-micro);letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .9rem;border:1px solid var(--hair-aqua);background:var(--milk);color:var(--ink-2)}

/* ---- Two-column checklist (aligned / not aligned) ---- */
.pair{display:grid;gap:clamp(1.2rem,.8rem + 2vw,2.6rem);grid-template-columns:1fr}
@media (min-width:56rem){.pair{grid-template-columns:repeat(2,1fr)}}
/* A single hairline box is the most generic shape on the web. The double
   rule is the one the whole site frames its imagery with, so the panes
   use it too. */
.pane{position:relative;background:var(--milk);padding:clamp(1.7rem,1rem + 2.4vmin,2.9rem);
  box-shadow:var(--shadow)}
.pane::before,.pane::after{content:"";position:absolute;pointer-events:none}
.pane::before{inset:0;border:1px solid var(--hair-aqua)}
.pane::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}
.pane > *{position:relative;z-index:1}
.pane h3{margin:0 0 1.1rem;font-size:var(--f-h3);color:var(--ink)}
.pane ul{margin:0;padding:0;list-style:none;display:grid;gap:.8rem}
.band--lagoon .pane p{color:var(--ink-2)}
.pane li{position:relative;padding-left:1.9rem;color:var(--ink-2);line-height:1.7;font-size:var(--f-small)}
.pane li::before{position:absolute;left:0;top:.05em;font-size:1rem}
.pane--yes li::before{content:"\2713";color:var(--aqua-dp)}
.pane--no li::before{content:"\2715";color:var(--ink-3)}
/* A cross is a prohibition, and only one of the three places this component
   is used is actually a do-and-don't. The other two set out courteous
   requests — "Grooming matters ✕" reads exactly wrong. Those get the site's
   own diamond instead, which marks an item without judging it. The double
   class keeps this above .pane--no whatever order the file ends up in. */
.pane.pane--note li::before{content:"";top:.62em;width:.4rem;height:.4rem;
  rotate:45deg;background:var(--aqua)}

/* ---- Bands the concept did not need ---- */
.band--tint{background:var(--sand-2)}
.band--tight{padding-block:clamp(2.2rem,1rem + 4vmin,4.2rem)}
/* The closing band sits directly under a band that has already paid for
   the space above it — the homepage does this, so the two must agree. */
.band--flush{padding-top:0}

/* ---- Feature grid ---- */
.grid{display:grid;gap:clamp(1.1rem,.6rem + 1.6vw,2.2rem);grid-template-columns:1fr}
@media (min-width:46rem){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:70rem){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:80rem){.grid--4{grid-template-columns:repeat(4,1fr)}}
.card__n{display:block;font-family:"Marcellus",serif;font-size:var(--f-h3);color:var(--aqua);margin-bottom:.5rem}

/* ---- Cities ---- */
.cities{display:flex;flex-wrap:wrap;gap:.5rem .35rem;margin:0;padding:0;list-style:none}
.cities li{font-family:"Marcellus",serif;font-size:clamp(1.05rem,.7rem + 1.5vmin,2rem);color:var(--ink);line-height:1.3}
.cities li::after{content:"\00B7";color:var(--aqua);margin-inline:.5em}
.cities li:last-child::after{content:""}

/* ---- Data table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--f-small);background:var(--milk);border:1px solid var(--hair)}
.tbl caption{text-align:left;font-size:var(--f-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:.7rem}
.tbl th,.tbl td{text-align:left;padding:.95rem 1.1rem;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl thead th{font-family:"Marcellus",serif;font-weight:400;font-size:var(--f-body);
  background:var(--aqua-soft);border-bottom:1px solid var(--hair-aqua)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child,.tbl th:first-child{font-weight:700;color:var(--ink)}
.tbl-wrap{overflow-x:auto}

/* ---- Article and legal prose ---- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,1.1rem + 1.6vmin,2.2rem);margin:2.6rem 0 .9rem}
.prose h3{font-size:var(--f-h3);margin:2rem 0 .7rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);line-height:1.85}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1.3rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--aqua)}
.prose strong{color:var(--ink)}
.prose a{color:var(--aqua-dp);border-bottom:1px solid var(--hair-aqua)}
.prose a:hover{color:var(--lagoon);border-color:var(--lagoon)}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.6rem 0}
.prose__meta{font-size:var(--f-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--hair)}
.callout{background:var(--milk);border-left:2px solid var(--aqua);padding:1.2rem 1.4rem;margin:1.8rem 0}
.callout p:last-child{margin-bottom:0}
.toc{background:var(--milk);border:1px solid var(--hair);padding:1.3rem 1.5rem;margin:0 0 2.4rem}
.toc p{font-size:var(--f-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .7rem}
.toc ol{margin:0;padding-left:1.1rem}
.toc li{margin-bottom:.35rem;font-size:var(--f-small)}
.toc a{color:var(--aqua-dp)}

/* ---- Journal ---- */
.posts{display:grid;gap:clamp(1.4rem,.8rem + 2vw,2.6rem);grid-template-columns:1fr}
@media (min-width:52rem){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:78rem){.posts{grid-template-columns:repeat(3,1fr)}}
.post{margin:0}
/* It is an <a>, so it defaults to display:inline — padding then does not
   affect the line box and the double rule drew as broken vertical
   fragments beside the picture instead of a frame around it. */
.post__img{display:block;position:relative;padding:var(--frame-pad);background:var(--milk);box-shadow:var(--shadow)}
.post__img::before,.post__img::after{content:"";position:absolute;pointer-events:none;z-index:1}
.post__img::before{inset:0;border:1px solid var(--hair-aqua)}
.post__img::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}
.post__img > picture{display:block;overflow:hidden}
.post__img img{width:100%;aspect-ratio:3/2;object-fit:cover;
  object-position:50% var(--focus,50%);transition:transform 1.1s var(--ease)}
.post:hover .post__img img{transform:scale(1.04)}
.post__meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:1rem 0 .5rem;
  font-size:var(--f-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.post__meta b{color:var(--aqua-dp);font-weight:700}
.post h3{font-size:var(--f-h3);margin:0 0 .55rem;line-height:1.24}
.post p{font-size:var(--f-small);color:var(--ink-2);line-height:1.8;margin:0 0 .9rem}
@media (hover:none){.post:hover .post__img img{transform:none}}

/* ---- Forms ---- */
.form{display:grid;gap:1.15rem}
.form__row{display:grid;gap:1.15rem}
@media (min-width:44rem){.form__row--2{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:.45rem}
.field > label{font-size:var(--f-micro);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.field .req{color:var(--aqua-dp)}
.field input,.field select,.field textarea{font-family:inherit;font-size:var(--f-body);color:var(--ink);
  background:var(--milk);border:1px solid var(--hair);padding:.85rem 1rem;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:9rem;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(131,189,205,.24)}
.field small{font-size:var(--f-micro);color:var(--ink-3);letter-spacing:.02em;text-transform:none;font-weight:400}
.check{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--f-small);color:var(--ink-2);line-height:1.7}
.check input{width:1.05rem;height:1.05rem;margin-top:.35rem;flex:0 0 auto;accent-color:var(--lagoon)}
.form__note{font-size:var(--f-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:flex-start;gap:.6em}
.form__note::before{content:"";width:1.4rem;height:1px;background:var(--aqua);flex:0 0 auto;
  margin-top:.55em}
/* `display:flex` above beats the browser's own [hidden]{display:none}, so
   the status line — empty until the form has something to say — still took
   7px and painted its rule under the button. The attribute has to win. */
.form__note[hidden]{display:none}
/* The hard outline cut the panel out of the page and fought the framed
   imagery elsewhere. A soft ground and a shadow sit it on the page instead. */
.form-panel{background:var(--milk);border:0;box-shadow:var(--shadow);
  padding:clamp(1.6rem,1rem + 2.8vmin,3rem)}

/* ---- Register filters ---- */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem}
.filters button{font-family:inherit;font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);background:var(--milk);border:1px solid var(--hair);
  padding:.6rem 1.2rem;border-radius:99px;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.filters button:hover{border-color:var(--aqua)}
.filters button[aria-pressed="true"]{background:var(--lagoon);border-color:var(--lagoon);color:var(--milk)}

/* ---- 404 ---- */
.oops{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:var(--band)}
/* --aqua on the page ground is 1.86:1. The numeral is the whole point of
   this page, so it takes the mid tone and clears the 3:1 large-text bar. */
.oops__n{font-family:"Marcellus",serif;font-size:clamp(5rem,3rem + 12vmin,11rem);line-height:1;
  color:var(--aqua-mid);margin:0 0 .4rem}

/* ---- Footer legal strip ---- */
/* .foot ul sets display:grid for the link columns, and at 0-1-1 it
 * outranks a bare .foot__legal at 0-1-0 whatever the order — which is why
 * these four sat in a stacked column instead of a row. Qualified here so
 * it actually applies, with a hairline between the items and a clean
 * stack only when there is genuinely no room. */
.foot ul.foot__legal{display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem 1.1rem;list-style:none;margin:0;padding:0;justify-content:flex-end}
.foot ul.foot__legal li{display:flex;align-items:center;gap:1.1rem}
.foot ul.foot__legal li+li::before{content:"";width:1px;height:.85em;
  background:var(--hair-aqua);flex:0 0 auto}
@media (max-width:52rem){
  .foot ul.foot__legal{justify-content:center}
}

/* ---- The dock is fixed, so interior pages need clearance ---- */
body.has-phead{padding-top:0}

/* ---- Article layout: prose beside a sidebar ---- */
.art{display:grid;gap:clamp(2.4rem,1.5rem + 3vw,4.5rem);grid-template-columns:1fr}
@media (min-width:64rem){.art{grid-template-columns:minmax(0,1fr) 20rem}}
@media (min-width:84rem){.art{grid-template-columns:minmax(0,1fr) 22rem}}
.art__main{min-width:0}
.art__main .prose{max-width:68ch}

/* ---- Sidebar ---- */
.side{display:grid;gap:clamp(1.4rem,1rem + 1.6vw,2.2rem);align-content:start;min-width:0}
@media (min-width:64rem){
  /* it follows the reader down a long article rather than scrolling away */
  .side{position:sticky;top:clamp(5.5rem,10vh,7rem)}
}
.side__b{position:relative;background:var(--milk);padding:clamp(1.3rem,1rem + 1.2vmin,1.8rem)}
.side__b::before,.side__b::after{content:"";position:absolute;pointer-events:none}
.side__b::before{inset:0;border:1px solid var(--hair-aqua)}
.side__b::after{inset:var(--frame-in);border:1px solid var(--hair-aqua-2)}
.side__b > *{position:relative;z-index:1}
.side__b h2{font-size:var(--f-micro);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--aqua-dp);margin:0 0 1.1rem;font-family:"DM Sans",sans-serif}

.side__list{list-style:none;margin:0;padding:0;display:grid;gap:.95rem;counter-reset:s}
.side__list li{display:grid;gap:.2rem;padding-bottom:.95rem;border-bottom:1px solid var(--hair)}
.side__list li:last-child{padding-bottom:0;border-bottom:0}
.side__list a,.side__list span{font-family:"Marcellus",serif;font-size:1.02rem;line-height:1.35;
  color:var(--ink)}
.side__list a:hover{color:var(--aqua-dp)}
.side__list time{font-size:var(--f-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* the post being read stays in the list, marked rather than removed */
.side__list li[aria-current="page"] span{color:var(--aqua-dp)}
.side__list li[aria-current="page"]::after{content:"Reading now";font-size:var(--f-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--aqua-mid)}

.side__cats{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.side__cats a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:var(--f-small);color:var(--ink-2);padding:.45rem .7rem;
  border:1px solid transparent;transition:border-color .35s var(--ease),color .35s var(--ease)}
.side__cats a:hover{color:var(--ink);border-color:var(--hair-aqua)}
.side__cats b{font-size:var(--f-micro);letter-spacing:.1em;color:var(--aqua-dp);
  background:var(--shell);padding:.2rem .55rem;font-weight:700}

.side__b--news{background:var(--lagoon)}
.side__b--news::before{border-color:rgba(169,220,236,.4)}
.side__b--news::after{border-color:rgba(169,220,236,.22)}
.side__b--news h2{color:var(--aqua-on-dark)}
.side__b--news p{color:rgba(220,235,239,.88);font-size:var(--f-small);line-height:1.7;margin:0 0 1.1rem}
.side__form{display:grid;gap:.7rem}
.side__form input{width:100%;font:inherit;font-size:var(--f-small);padding:.75rem .9rem;
  background:rgba(253,251,247,.08);border:1px solid rgba(169,220,236,.4);color:#fff;border-radius:0}
.side__form input::placeholder{color:rgba(220,235,239,.6)}
.side__form input:focus-visible{outline:2px solid var(--aqua-on-dark);outline-offset:2px}
.side__form .btn{justify-content:center;background:var(--milk);color:var(--ink);border-color:var(--milk)}
.side__form .form__note{color:var(--aqua-on-dark)}
.side__form .form__note::before{background:var(--aqua-on-dark)}

/* ---- Pagination ---- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.4rem;
  margin-top:clamp(2.6rem,5vh,4.4rem);padding-top:clamp(1.6rem,3vh,2.4rem);
  border-top:1px solid var(--hair-aqua)}
.pager__step{display:inline-flex;align-items:center;gap:.5em;min-width:6.5rem;
  font-size:var(--f-micro);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aqua-dp)}
.pager__step:last-child{justify-content:flex-end}
a.pager__step:hover{color:var(--lagoon)}
.pager__n{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.pager__n a,.pager__n span{display:grid;place-items:center;min-width:2.4rem;height:2.4rem;
  padding:0 .5rem;font-size:var(--f-small);color:var(--ink-2);
  border:1px solid var(--hair);background:var(--milk);transition:all .35s var(--ease)}
.pager__n a:hover{border-color:var(--aqua);color:var(--ink)}
.pager__n span[aria-current]{background:var(--lagoon);border-color:var(--lagoon);color:#fff}
@media (max-width:46rem){
  .pager{justify-content:center}
  .pager__step{min-width:0}
  .pager__n{order:-1;width:100%;justify-content:center}
}

/* ---- Preloader ----------------------------------------------------
   The wordmark over a hairline that sweeps, which is the same rule motif
   the page headings use. A spinner would read as software; this reads as
   the brand pausing for a moment.

   It cannot hurt the performance grade. No script gates rendering — if
   site.js never runs, `pre-out` clears the panel after 1.1s anyway. No
   webfont is involved, so there is nothing to wait for. The mark carries
   explicit width and height, so it shifts nothing. Under reduced motion
   it does not animate at all and is simply not there.
   ------------------------------------------------------------------- */
.pre{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--shell);animation:pre-out .55s var(--ease) 1.1s forwards}
.pre__in{display:grid;justify-items:center;gap:1.35rem;
  animation:pre-rise .7s var(--ease) both}
.pre__in img{display:block;width:min(46vw,11.5rem);height:auto}
.pre__rule{display:block;position:relative;overflow:hidden;
  width:min(52vw,13rem);height:1px;background:var(--hair-aqua)}
.pre__rule i{position:absolute;inset:0 auto 0 0;width:36%;
  background:linear-gradient(90deg,transparent,var(--aqua-mid),transparent);
  animation:pre-sweep 1.6s var(--ease) infinite}
@keyframes pre-sweep{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
@keyframes pre-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pre-out{to{opacity:0;visibility:hidden}}
html.is-loaded .pre{animation:pre-out .4s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){
  .pre{animation:none;opacity:0;visibility:hidden}
  .pre__in,.pre__rule i{animation:none}
}

/* ---- Form status --------------------------------------------------
   The line the AJAX handler writes into. Quiet until it has something to
   say, and coloured by tone rather than by an icon font. ------------- */
.form__note[data-tone]{display:flex;align-items:center;gap:.6rem;
  margin-top:1rem;font-size:var(--f-small);line-height:1.6}
.form__note[data-tone]::before{content:"";flex:0 0 auto;
  width:.5rem;height:.5rem;transform:rotate(45deg)}
.form__note[data-tone="ok"]{color:var(--aqua-dp)}
.form__note[data-tone="ok"]::before{background:var(--aqua)}
.form__note[data-tone="bad"]{color:var(--lagoon);font-weight:700}
.form__note[data-tone="bad"]::before{background:var(--lagoon)}