/* ============================================================================
   Runner Tourism and Travel - app.css
   One hand-written stylesheet. No framework, no build step (CLAUDE.md).

   Values come from the approved mockups (scrape/mockup/base.css), which were
   audited against the brand guidelines. Class names were reworked on the way
   in: the mockups were separate files, so several reused the same name for
   different components (.feat was both a boat feature list and a featured
   journal post, .two was a button row and a form grid, .related appeared with
   two different layouts). In one shared stylesheet those collide, so each
   component now owns its name.

   Palette is fixed at seven colours, with two deliberate additions documented
   at their token: --danger, because validation cannot be communicated without
   a red, and --gold-text, a darkened gold for the places the design puts words
   in gold on a light ground.

   Order: tokens, reset, primitives, layout, components, utilities, responsive.
   ========================================================================= */

/* ----------------------------------------------------------------- 0. fonts */
/* Self-hosted. No Google Fonts request: it would cost a third-party origin in
   the CSP, a DNS lookup and a connection on the critical path, and it hands a
   visitor log to another party. Variable weight axis, one file each.
   font-display:swap so text paints immediately in Georgia or Calibri.
   No unicode-range: the site is bilingual and these files must cover Turkish
   (ğ ş ı İ ç ö ü); declaring a range would claim coverage we have not proved
   per glyph and would show tofu instead of falling back. */
@font-face{
  font-family:'EB Garamond';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('/assets/fonts/eb-garamond-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans 3';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------- 1. tokens */
:root{
  /* Brand palette. Nothing outside these seven. */
  --navy:#1C2A4E;          /* Deep Navy   - headings, dark bands */
  --blue:#3858A0;          /* Runner Blue - primary, links, buttons */
  --sky:#E7EFF6;           /* Sky Mist    - section grounds, cards */
  --gold:#B8894B;          /* Antique Gold- hairlines, small labels, focus */
  --cream:#FBF9F5;         /* Warm Paper  - page ground */
  --muted:#595959;         /* Slate Gray  - secondary text */
  --ink:#2C2C2C;           /* Ink         - body text */

  /* Derived from the palette, never hand-picked. */
  --paper:#FFFFFF;
  --navy-deep:color-mix(in srgb, var(--navy) 88%, #000);
  --navy-mid:color-mix(in srgb, var(--navy) 82%, var(--blue));
  --blue-hover:#2F4A88;
  --gold-hover:#9E732F;
  --line:oklch(88% 0.01 250);
  --line-mist:oklch(84% 0.03 250);
  --field-border:color-mix(in srgb, var(--muted) 30%, var(--cream));

  /* Antique Gold carries words in this design (eyebrow labels, column
     headings), but at #B8894B it reaches only 2.97:1 on Warm Paper, which
     fails WCAG 2.2 AA for text. The brand rule says the same thing: gold is
     never body copy on a light ground.

     So gold splits in two. --gold stays exactly the brand colour and is used
     for rules, borders, focus rings, icons and anything on a navy ground
     (4.51:1 there, which passes). --gold-text is the same hue darkened until
     it clears 4.5:1 on every light ground it can land on, and is the only one
     allowed to carry text on a light ground.

     Sky Mist is the binding constraint, not the cream page: it is the darker
     of the two light grounds, so a value that passes on cream can still fail
     on a mist section. Measured: 5.39:1 on cream, 4.88:1 on sky, 5.67:1 on
     white cards. Same colour to the eye, legible to everyone. */
  --gold-text:#875F2E;

  /* Muted secondary text. The earlier value mixed toward cream and landed at
     4.21:1, under the AA floor for the 12-13px notes it was used on. */
  --sand:color-mix(in srgb, var(--muted) 88%, var(--cream));

  /* Text layers for navy bands: Sky Mist at reducing opacity. */
  --on-dark:var(--sky);
  --on-dark-muted:oklch(from var(--sky) l c h / .78);
  --on-dark-faint:oklch(from var(--sky) l c h / .58);

  /* The one deliberate addition: form validation needs a red. */
  --danger:#B23B3B;

  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Editorial, not app-like. */
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;

  /* Low, warm, diffuse. No hard black. */
  --shadow-xs:0 1px 2px oklch(28% 0.06 262 / .06);
  --shadow-sm:0 2px 8px oklch(28% 0.06 262 / .08);
  --shadow-md:0 8px 24px oklch(28% 0.06 262 / .10);
  --shadow-lg:0 18px 48px oklch(28% 0.06 262 / .14);

  /* Quiet motion: fades and small lifts only, no bounce or spring. */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms;
  --dur-base:240ms;
  --dur-slow:420ms;

  --hd-h:74px;
  --wrap:1240px;
  color-scheme:light;
}

/* ----------------------------------------------------------------- 2. reset */
*{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  /* Anchor targets must clear the sticky header instead of hiding under it. */
  scroll-padding-top:calc(var(--hd-h) + 16px);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
svg{display:block;}

a{color:var(--blue);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard);}
a:hover{color:var(--gold-text);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--navy);text-wrap:balance;margin:0 0 .5em;}
/* balance suits a heading; a multi-line quote reads better with pretty. */
blockquote{font-family:var(--serif);font-weight:400;color:var(--navy);text-wrap:pretty;margin:0;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

button{font-family:inherit;font-size:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;}

/* Gold ring on every interactive element. Legible on cream and on navy.

   outline, not box-shadow. A shadow-based ring is drawn on the same property
   that components use for their own elevation, so any later rule setting
   box-shadow silently erases it: focusing a card showed its resting shadow and
   no ring at all. outline occupies a property nothing else touches, follows
   border-radius, and cannot be overwritten by a component. */
:focus-visible{
  outline:3px solid oklch(from var(--gold) l c h / .65);
  outline-offset:2px;
}

/* ------------------------------------------------------------ 3. primitives */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.wrap--narrow{max-width:900px;}
.wrap--article{max-width:760px;}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--navy);color:var(--cream);
  padding:12px 18px;border-radius:var(--radius-sm);
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{top:8px;color:var(--cream);}

/* Signature element: a gold rule, then small tracked caps. */
.eyebrow{
  display:inline-flex;align-items:center;gap:13px;
  font-size:12px;font-weight:600;letter-spacing:.18em;
  color:var(--gold-text);text-transform:uppercase;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;}
.eyebrow--centered{justify-content:center;}
.eyebrow--centered::after{content:"";width:34px;height:1px;background:currentColor;}

.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto;}
.ornament::before,.ornament::after{content:"";height:1px;width:64px;background:var(--gold);opacity:.55;}
.ornament i{width:4px;height:4px;border-radius:50%;background:var(--gold);display:block;}

.rule-fill{flex:1;height:1px;background:var(--line);}

/* --------------------------------------------------------------- 4. buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;
  border:1px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:active{transform:translateY(1px);}

/* Anchor-qualified so the generic `a` colour cannot win and hide the label. */
a.btn-solid,.btn-solid{background:var(--blue);color:var(--cream);}
a.btn-solid:hover,.btn-solid:hover{background:var(--blue-hover);color:var(--cream);}
a.btn-gold,.btn-gold{background:var(--gold);color:var(--navy);}
a.btn-gold:hover,.btn-gold:hover{background:var(--gold-hover);color:var(--cream);}
a.btn-ghost,.btn-ghost{background:transparent;color:var(--cream);border-color:oklch(from var(--cream) l c h / .55);}
a.btn-ghost:hover,.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
a.btn-outline,.btn-outline{background:var(--paper);color:var(--ink);border-color:var(--line);}
a.btn-outline:hover,.btn-outline:hover{border-color:var(--muted);color:var(--ink);}
.btn--full{width:100%;}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn-row--centered{justify-content:center;}

/* Text link with a gold underline, used for secondary navigation. */
.link-arrow{
  display:inline-block;
  border-bottom:1px solid var(--gold);padding-bottom:4px;
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);
}
.link-arrow:hover{color:var(--gold-text);}

/* ---------------------------------------------------------------- 5. layout */
.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.section--loose{padding:112px 0;}
.section--flush-top{padding-top:0;}
.section--mist{background:var(--sky);}
.section--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section--dark{background:var(--navy);color:var(--on-dark);}
.section--dark h2,.section--dark h3{color:var(--cream);}

.section-head{text-align:center;max-width:720px;margin:0 auto 56px;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin:0;}
.section-head p{color:var(--muted);font-size:17px;margin:16px auto 0;max-width:60ch;text-wrap:pretty;}
.section--dark .section-head p{color:var(--on-dark-muted);}

/* Heading on the left, "view all" on the right. */
.section-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:48px;flex-wrap:wrap;text-align:left;max-width:none;
}
.section-head--split h2{font-size:clamp(30px,4vw,46px);line-height:1.08;max-width:16ch;}

.grid{display:grid;gap:28px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);gap:36px;}

/* ------------------------------------------------------------------ 6. hero */
.hero{
  position:relative;
  min-height:62vh;min-height:62dvh;  /* dvh stops the mobile browser bar jump */
  display:flex;align-items:flex-end;
  color:var(--cream);
}
/* The two viewport bands. Above 900px hero--fit takes the height away from
   them and gives it to the photograph; below 900px they are what is left, and
   they are still needed. See the note on the breakpoint further down. */
.hero--tall{min-height:82vh;min-height:82dvh;}
.hero--short{min-height:56vh;min-height:56dvh;}
/* The hero takes its height from the picture instead of from the window.

   A viewport-height band is whatever shape the window happens to be. Measured
   on one journey page it ran from 0.56:1 on a phone to 2.87:1 on a wide
   monitor, so the same 2.38:1 photograph showed a quarter of its width in one
   place and 83% of its height in another, for no reason the reader can see.

   The first version of this rule did match the picture, but by naming a ratio:
   a height of 56.25vw, which is 16:9. That was true of the pages it was
   written for and false of the rest. The journey photographs are 1500x630, the
   gulets are 4:3 and 1:1, and the journal carries 1.5, 1.78 and 2.38 side by
   side, so one assumed ratio cropped a fifth off the sides of one page and a
   third off the top of another.

   So no ratio is named here at all. The picture is laid out in flow and the
   words are stacked over it, which makes the box exactly as tall as the
   picture at full bleed, or as tall as the words when the words need more room
   than the picture leaves. Either way the picture fills the box and `cover`
   crops only the surplus. A photograph swapped in the admin panel changes the
   shape of the hero by itself.

   The cap stops a wide monitor from handing back a hero taller than the
   window. Past it the crop returns, and the answer there is a photograph with
   headroom, not more CSS.

   `max-height` is safe on the image where `aspect-ratio` + `max-height` was
   not safe on the section: the image has a specified width, so the cap clamps
   its height instead of pulling its width in, and the section stays full
   bleed. Measured at 375, 1280, 1920 and 2560; side gap zero at each.

   Why this only starts at 901px, and not on a phone.

   Handing the box to the picture makes the box shorter, and a shorter box puts
   the words higher up the frame. That is free on a wide screen and it is not
   free on a phone, because the phone scrim is a band that only begins to
   darken at 30% of the box and does not reach full strength until 62%. Letting
   the journey hero shrink to its own words moved its breadcrumbs from 39% down
   the frame to 9%, which is bare photograph: measured at 1.83:1 against the
   4.5:1 that 13px text has to meet.

   The band is also the thing that gives the words somewhere dark to sit. A box
   that is exactly as tall as its own text has no room left for a scrim that is
   not also a wash over the whole picture, so on a phone the trade is not worth
   making: the picture is cropped there whatever we do (a 2.38:1 photograph in
   a portrait box), and the readable text is worth more than the extra 15% of a
   frame nobody can see anyway.

   So below 901px nothing here applies and the bands above are what run. */
@media(min-width:901px){
  .hero--fit{
    display:grid;grid-template-areas:"stack";align-items:stretch;min-height:0;
  }
  .hero--fit > *{grid-area:stack;}
  /* In flow, so the row is sized by the picture rather than by the window. */
  .hero--fit > .hero__bg{position:static;display:grid;}
  .hero--fit > .hero__bg picture{display:block;height:100%;}
  /* max-height is the original ceiling: past it a wide monitor gets a crop
     instead of a hero taller than the window, exactly as before.
     min-height is new, and it is a floor under hero__inner's words, not
     under the image for its own sake: 640px, measured off the tallest real
     hero on the site at 901-1024px wide and rounded up for headroom. Below
     it a short, wide photograph (the 2.4:1 journey heroes, at these widths)
     rendered shorter than the words needed, and because CSS resolves a
     min-height/max-height conflict in min-height's favour, this can only
     ever widen the crop on a short photograph, never defeat the 88vh ceiling
     on a tall one. Both live on the image itself, not on hero__bg or the
     section, because object-fit:cover only crops correctly, keeping
     object-position, when it is the box being sized against that is
     constrained; a cap one layer up just clips whatever the image rendered
     at, off centre. */
  .hero--fit > .hero__bg img{min-height:640px;max-height:88vh;}
  /* Taken out of the grid item flow entirely, rather than merely
     bottom-aligned within it. A grid row with no explicit height auto-sizes
     to the tallest CONTRIBUTOR regardless of align-self, and hero__inner was
     still one: a wide enough facts-and-photo-link row made the text block
     taller than the image, and the row grew to match it while the image
     stayed capped at 88vh, and the difference was hero__bg's own navy
     background, showing as a stripe under the photograph. Absolute
     positioning removes hero__inner from that calculation, leaving only the
     image to size the row, which is what align-self:end was already trying
     to express: the box is exactly as tall as the picture, full stop. */
  .hero--fit > .hero__inner{position:absolute;inset:auto 0 0 0;}
}
.hero__bg{position:absolute;inset:0;overflow:hidden;background:var(--navy);}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
/* A scrim under the text, not a wash over the picture.

   It used to be a band across the bottom, which is where the text is but also
   where the rest of the photograph is: at .90 and .93 the lower half of every
   hero was very nearly flat navy, and the picture only existed above the fold
   of the gradient.

   The text does not need a band, it needs a corner. Measured across the pages
   that use this, the heading sits between 1% and 48% from the left and below
   77% down, at every width above the phone. So the scrim is one ellipse
   anchored to that corner: strong where the words are, gone by 88% of the way
   out, which leaves the top of the frame and the whole right side untouched.

   Ratios are measured, not estimated: `php tools/check_hero_contrast.php`
   composites this gradient over each hero and reports the worst pixel behind
   each piece of text. Change a stop and run it again.

   The last stop is navy at zero alpha rather than `transparent`, which is
   transparent BLACK and greys the midtones as it interpolates. */
.hero__shade{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 110% 85% at 0% 100%,
    oklch(from var(--navy) l c h / .93) 0%,
    oklch(from var(--navy) l c h / .82) 45%,
    oklch(from var(--navy) l c h / .30) 70%,
    oklch(from var(--navy) l c h / 0) 88%);
}
.hero__shade--side{
  background:linear-gradient(90deg,
    oklch(from var(--navy) l c h / .86) 0%,
    oklch(from var(--navy) l c h / .50) 46%,
    oklch(from var(--navy) l c h / .14) 100%);
}
/* Back to top. Bottom right, out of the way of the content and of the reading
   line, and 48px square so it is a comfortable touch target well clear of the
   24px minimum. It only appears once there is something to go back up from,
   which app.js decides; without JS it stays hidden rather than sitting on a
   short page offering to scroll nowhere. */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--cream);
  box-shadow:0 4px 16px oklch(from var(--navy) l c h / .35);
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.to-top[hidden]{display:none;}
.to-top:hover{background:var(--blue);color:var(--cream);transform:translateY(-2px);}
.to-top:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .to-top{transition:none;}
  .to-top:hover{transform:none;}
}
@media(max-width:560px){
  .to-top{right:14px;bottom:14px;}
}

.hero__inner{position:relative;width:100%;padding:120px 0 56px;}
.hero .eyebrow{color:var(--sky);}
.hero h1{color:var(--cream);font-size:clamp(38px,5.2vw,64px);line-height:1.04;margin:16px 0 12px;max-width:18ch;}
.hero p{font-size:18px;font-weight:300;color:var(--sky);max-width:56ch;margin:0;}
.hero__sub{font-family:var(--serif);font-size:clamp(19px,2.3vw,25px);color:var(--sky);font-weight:400;}
/* The larger type scale, kept apart from the height. It used to hang off
   hero--tall, which was fine while the only page with big type was also the
   only page with a tall box. The journey page now takes its height from its
   photograph and still wants the flagship type, so the two are separate
   modifiers: hero--tall is a height, hero--feature is a type scale. */
.hero--feature h1{font-size:clamp(40px,5.6vw,70px);max-width:15ch;margin:24px 0 20px;}
.hero--feature p{font-size:19px;max-width:52ch;margin:0 0 34px;}

/* Flat navy band for pages with no hero photograph. */
/* Hero slider. A cross-fade, never a horizontal translate: nothing reflows, so
   the layout shift stays at zero no matter when a slide changes. Slides are
   stacked in the same grid cell, which also means the section is exactly as
   tall as its tallest slide and never jumps between them. */
.hero-slider{display:grid;grid-template-areas:"stack";}
.hero-slider__track{grid-area:stack;display:grid;grid-template-areas:"slide";min-height:inherit;}
/* The cross-fade is slower than the rest of the interface on purpose: a hero
   photograph changing is the largest thing that moves on the page, and at the
   standard duration it reads as a flicker rather than a change. */
.hero-slide{
  grid-area:slide;position:relative;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;
  transition:opacity 800ms cubic-bezier(.4,0,.2,1),visibility 0s linear 800ms;
}
.hero-slide.is-current{opacity:1;visibility:visible;transition-delay:0s;}
/* Slide two and three carry a paragraph, not an h1: one h1 per page. It has to
   look identical to the h1 on slide one, and for a while it did not: this is a
   <p> inside .hero--tall, so `.hero--tall p` (0,2,1) outranked a lone class
   (0,1,0) and set it to 19px in the body colour. The selector now carries the
   same weight, which is why the element name is in it. */
.hero--tall p.hero-slide__heading{
  font-family:var(--serif);color:var(--cream);
  font-size:clamp(40px,5.6vw,70px);line-height:1.04;max-width:15ch;
  margin:24px 0 20px;font-weight:400;
}
/* The arrows sit on the left and right edges of the slider, vertically centred.
   The layer itself takes no pointer events, so only the two buttons are
   clickable and the rest of the hero stays selectable. */
.hero-slider__controls{
  grid-area:stack;align-self:stretch;position:relative;z-index:2;
  width:100%;pointer-events:none;
}
.hero-slider__arrow{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;cursor:pointer;font-size:17px;line-height:1;
  /* Opaque enough that the glyph clears 4.5:1 even over a pale photograph:
     at 55% a white sky underneath dropped it to roughly 2.4:1. */
  color:var(--cream);background:oklch(from var(--navy) l c h / .85);
  border:1px solid oklch(from var(--cream) l c h / .4);border-radius:50%;
}
.hero-slider__arrow--prev{left:16px;}
.hero-slider__arrow--next{right:16px;}
.hero-slider__arrow:hover{border-color:var(--gold);color:var(--gold);}

/* The heading is left aligned and reaches the same edge the left arrow wants:
   measured at 1280, the copy occupies x 12 to 534 and the arrow would land on
   the glyphs. The slider's copy therefore keeps an arrow lane on both sides.
   It is the one block on the page that does not start on the page measure, and
   that is deliberate: the alternative is an arrow sitting on the headline. */
@media(min-width:901px){
  .hero-slider .hero__inner{padding-left:86px;padding-right:86px;}
}
/* On a phone the copy fills the frame: measured at 375 it runs from y 91 to
   622 of a 666px hero, so there is no free band at either edge for an arrow to
   sit in without covering words. They go back to the foot of the slider, which
   is the one place nothing else occupies. */
@media(max-width:900px){
  .hero-slider__controls{
    align-self:end;display:flex;justify-content:flex-end;gap:10px;
    padding:0 22px;margin-bottom:26px;
  }
  .hero-slider__arrow{position:static;transform:none;width:44px;height:44px;}
}

.hero-plain{background:var(--navy);color:var(--cream);padding:120px 0 56px;}
.hero-plain .eyebrow{color:var(--sky);margin-bottom:16px;}
.hero-plain h1{color:var(--cream);font-size:clamp(36px,4.8vw,58px);line-height:1.05;margin:0 0 14px;max-width:16ch;}
.hero-plain p{font-size:18px;font-weight:300;color:var(--sky);max-width:56ch;margin:0;}

/* Facts and the photo-count link on one row, pushed to the ends. On tour
   pages the link wraps to a left-aligned line of its own under the facts once
   the row runs out of width, rather than sitting center-stage under nothing. */
.hero-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 34px;margin-top:24px;}

/* Key facts under a hero heading. */
.hero-facts{display:flex;gap:34px;flex-wrap:wrap;}
.hero-facts dt{font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--gold);margin-bottom:4px;text-transform:uppercase;}
.hero-facts dd{font-family:var(--serif);font-size:20px;color:var(--cream);margin:0;}

/* "View all N photographs". A jump link with JavaScript off, the viewer with
   it on. Bordered rather than solid so it never competes with the enquiry
   button, which is the only solid control on the page. */
.hero__photos{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:11px 20px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-size:13px;letter-spacing:.06em;color:var(--cream);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.hero__photos::before{
  content:"";width:14px;height:12px;flex:none;
  border:1.5px solid currentColor;border-radius:2px;
}
.hero__photos:hover,.hero__photos:focus-visible{background:rgba(255,255,255,.14);border-color:var(--cream);}

/* ----------------------------------------------------------- 7. breadcrumbs */
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:16px;}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
.breadcrumbs li+li::before{content:"/";margin-right:8px;color:var(--sand);}
/* Small text, so the hit area is grown without moving the layout:
   the negative margin gives back exactly what the padding takes. */
.breadcrumbs a{display:inline-block;padding-block:6px;margin-block:-6px;}
.hero .breadcrumbs,.hero-plain .breadcrumbs{color:var(--on-dark-muted);}
.hero .breadcrumbs a,.hero-plain .breadcrumbs a{color:var(--on-dark-muted);}
.hero .breadcrumbs a:hover,.hero-plain .breadcrumbs a:hover{color:var(--gold);}
.hero .breadcrumbs li+li::before,.hero-plain .breadcrumbs li+li::before{color:var(--on-dark-faint);}

/* ---------------------------------------------------------------- 8. header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:oklch(from var(--cream) l c h / .94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--hd-h);}

.brand{display:flex;align-items:center;gap:13px;}
.brand-word{display:flex;flex-direction:column;align-items:center;line-height:1;}
.brand-word b{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--navy);letter-spacing:.01em;}
.brand-word span{font-size:10px;font-weight:600;letter-spacing:.34em;margin-top:3px;color:var(--gold);padding-left:.34em;}

.primary-nav{display:flex;align-items:center;gap:24px;}
.primary-nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
/* 16px, not 14.5px. Most of the people reading this site are over fifty-five,
   and a small navigation is the first thing that fails for them. */
/* padding-block lifts the 23px text box past the 24px minimum target size
   (WCAG 2.5.8); the drawer override below replaces it on small screens. */
.primary-nav a{font-size:16px;font-weight:500;color:var(--navy);padding-block:10px;}
.primary-nav a:hover{color:var(--gold-text);}
.primary-nav a[aria-current="page"]{color:var(--gold-text);}

/* Journeys disclosure panel. */
.nav-has-panel{position:relative;display:flex;align-items:center;gap:4px;}
.nav-panel-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;cursor:pointer;
  background:none;border:none;color:var(--navy);
}
.nav-panel-toggle:hover{color:var(--gold-text);}
.nav-panel-caret{
  width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-base) var(--ease-out);
}
.nav-panel-toggle[aria-expanded="true"] .nav-panel-caret{transform:rotate(225deg) translate(-2px,-2px);}
.nav-panel{
  position:absolute;top:calc(100% + 14px);left:-24px;z-index:60;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:24px 28px;min-width:440px;
}
/* Bridges the 14px gap between the label and the panel. Without it the pointer
   leaves the menu on the way into it and the close timer starts for no reason. */
.nav-panel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;}
.nav-panel__inner{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;}
.nav-panel__label{
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.nav-panel ul{display:block;margin:0;padding:0;list-style:none;}
.nav-panel li{margin-bottom:2px;}
.nav-panel a{display:block;padding:7px 0;font-size:15.5px;line-height:1.3;}
.nav-panel__group--all{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px;}
/* The short panels: Destinations, Fleet and About carry two to four links, so
   they take their width from their longest entry instead of the 440px the
   seven-category journeys panel needs. Left aligned to the label rather than
   the -24px overhang, which on a narrow panel would hang it off the section it
   belongs to. */
.nav-panel--list{min-width:0;left:-16px;padding:14px 22px;}
.nav-panel--list ul{white-space:nowrap;}

.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 10px;
}
/* Two-letter labels are naturally narrower than the 24px minimum target, so
   they are padded out rather than left as a 17px hit area. */
.lang-switch a{color:var(--muted);min-width:24px;padding:2px 4px;text-align:center;}
.lang-switch a[aria-current="true"]{color:var(--navy);}
.lang-switch span{color:var(--sand);}

.header-actions{display:flex;align-items:center;gap:14px;}

/* 44px is the WCAG 2.5.8 minimum target. */
.nav-toggle{
  display:none;width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;
}
.nav-toggle-bars{display:flex;flex-direction:column;gap:5px;}
.nav-toggle-bars span{
  display:block;width:19px;height:1.5px;background:var(--navy);
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) linear;
}
/* The sticky header clips at its own edge, so the default 2px offset would cut
   the ring on the first and last controls in the bar. */
.site-header :focus-visible{outline-offset:1px;}
[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ----------------------------------------------------------- 9. trust strip */
.trust-strip{background:var(--navy);color:var(--on-dark-muted);}
.trust-strip__inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 40px;padding:20px 40px;}
.trust-strip__item{display:flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:.02em;min-height:24px;}
.trust-strip__item b{color:var(--cream);font-weight:600;}
.trust-strip__sep{width:1px;height:22px;background:oklch(from var(--cream) l c h / .16);}
.trust-strip a{display:inline-block;min-height:24px;padding:2px 2px;color:var(--on-dark-muted);box-shadow:inset 0 -1px 0 oklch(from var(--gold) l c h / .7);}
.trust-strip a:hover{color:var(--gold);}
.stars{color:var(--gold-text);letter-spacing:2px;font-size:13px;}

/* ----------------------------------------------------------- 10. manifesto */
.manifesto{max-width:900px;margin:0 auto;text-align:center;padding:104px 40px 88px;}
.manifesto .eyebrow{margin-bottom:26px;}
.manifesto p{
  font-family:var(--serif);font-size:clamp(22px,2.8vw,32px);
  line-height:1.46;color:var(--navy);font-weight:400;margin:0;
}

/* ---------------------------------------------------------------- 11. cards */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  color:inherit;
  display:flex;flex-direction:column;
}
a.card{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:inherit;}

.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
a.card:hover .card__media img{transform:scale(1.04);}
.card__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.card__label{font-size:11.5px;font-weight:600;letter-spacing:.2em;color:var(--gold-text);text-transform:uppercase;}
.card__body h3{font-size:23px;line-height:1.16;margin:10px 0 10px;}
.card__body p{font-size:15px;color:var(--muted);margin:0 0 18px;line-height:1.6;}
.card__foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:15px;margin-top:auto;
}
.card__meta{font-size:13px;font-weight:600;color:var(--muted);}
.card__go{font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);}

/* Corner tag over a card image. */
.card__tag{
  position:absolute;top:14px;left:14px;z-index:1;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);background:var(--gold);
  border-radius:var(--radius-sm);padding:4px 9px;
}

/* Navy invitation card that sits inside a grid of tour cards. */
.card--invitation{
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:var(--cream);border:none;justify-content:center;padding:34px;
}
.card--invitation .eyebrow{color:var(--sky);margin-bottom:14px;}
/* Any heading level: the archive pages promote this card's title to h2 so the
   outline has no gap, and a level-specific selector would leave it navy on
   navy. */
.card--invitation :is(h2,h3,h4){color:var(--cream);font-size:24px;margin:0 0 10px;}
.card--invitation p{color:var(--sky);font-size:15px;font-weight:300;margin:0 0 20px;}

/* Numbered value proposition, no card chrome. */
.value{}
.value__number{font-family:var(--serif);font-size:34px;color:var(--gold-text);line-height:1;}
.value__dash{width:28px;height:1px;background:var(--blue);margin:18px 0;}
.value h3{font-size:21px;line-height:1.2;margin:0 0 12px;}
.value p{font-size:15px;color:var(--muted);margin:0;}

/* ------------------------------------------------------ 12. feature split */
.feature-split{
  display:grid;grid-template-columns:1.05fr .95fr;
  border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--paper);
}
.feature-split__media{position:relative;min-height:440px;}
.feature-split__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feature-split__body{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;}
.feature-split__body .eyebrow{margin-bottom:18px;}
.feature-split__body h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;margin:0 0 18px;}
.feature-split__body p{font-size:16.5px;color:var(--muted);margin:0 0 26px;}

/* ---------------------------------------------------------------- 13. steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;max-width:1040px;margin:0 auto;}
.step{text-align:center;}
.step__ring{
  width:60px;height:60px;margin:0 auto 22px;
  border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:22px;color:var(--blue);
}
.step h3{font-size:22px;margin:0 0 12px;}
.step p{font-size:15px;color:var(--muted);margin:0 auto;max-width:30ch;}

/* -------------------------------------------------------------- 14. reviews */
/* Reviews are rendered server-side from stored data with a link to the real
   profile. No third-party widget, so the CSP can stay closed (docs/12 D2). */
.review-badge{
  max-width:760px;margin:0 auto 54px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 34px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.review-badge__score{font-family:var(--serif);font-size:44px;color:var(--navy);line-height:1;}
.review-badge__col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.review-badge__stars{color:var(--gold-text);letter-spacing:3px;font-size:18px;}
.review-badge__meta{font-size:13.5px;color:var(--muted);}
.review-badge__link{
  margin-left:auto;white-space:nowrap;
  display:inline-block;min-height:24px;padding:4px 2px;
  font-size:13.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);box-shadow:inset 0 -1px 0 var(--gold);
}

.review-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:28px 28px 24px;display:flex;flex-direction:column;
}
.review-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.review-card__source{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--sand);}
.review-card blockquote{font-size:18px;line-height:1.5;margin:0 0 20px;flex:1;}
.review-card__who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:15px;}
.review-card__avatar{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:var(--cream);
  font-family:var(--serif);font-size:17px;
  display:flex;align-items:center;justify-content:center;
}
.review-card__name{font-size:14px;font-weight:600;color:var(--ink);}
.review-card__link{font-size:12.5px;color:var(--blue);display:inline-block;padding-block:4px;margin-block:-4px;}
.review-note{text-align:center;margin-top:34px;font-size:13px;color:var(--sand);}

/* A single pulled quote, centred. */
.pull-quote{max-width:900px;margin:0 auto;text-align:center;}
.pull-quote blockquote{font-size:clamp(21px,2.6vw,28px);line-height:1.48;margin:0 0 20px;}
.pull-quote__who{font-size:14px;font-weight:600;color:var(--ink);}
.pull-quote__who span{font-weight:400;color:var(--muted);}
.pull-quote__source{
  display:inline-block;margin-top:18px;
  font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blue);border-bottom:1px solid var(--gold);padding-bottom:3px;
}

/* Handwritten guest letters from the archive, no card chrome. */
.letter__mark{font-family:var(--serif);font-size:56px;line-height:.35;color:var(--gold);margin-bottom:20px;}
.letter blockquote{font-size:19px;line-height:1.5;margin:0 0 18px;}
.letter__sig{font-size:14px;font-weight:600;color:var(--ink);}
.letter__sig span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:3px;}

/* --------------------------------------------------------------- 15. bands */
.cta-band{background:var(--navy);color:var(--cream);text-align:center;padding:104px 40px;}
.cta-band .eyebrow{color:var(--gold);justify-content:center;margin-bottom:24px;}
.cta-band .eyebrow::after{content:"";width:34px;height:1px;background:currentColor;}
.cta-band h2{color:var(--cream);font-size:clamp(30px,4.2vw,48px);line-height:1.1;margin:0 0 18px;}
.cta-band p{font-size:18px;font-weight:300;color:var(--sky);max-width:54ch;margin:0 auto 34px;}

/* Sky band with a gold spine, for a secondary message. */
.note-band{
  background:var(--sky);border-left:3px solid var(--gold);border-radius:var(--radius-sm);
  padding:44px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.note-band .eyebrow{margin-bottom:12px;}
.note-band h3{font-size:26px;line-height:1.2;margin:0 0 8px;}
.note-band p{font-size:15.5px;color:var(--muted);margin:0;max-width:60ch;}

/* ------------------------------------------------------- 16. detail panels */
/* Sticky summary beside a tour or boat narrative. */
/* The specifications band on a boat page.

   Full width, directly under the hero, in the same figure-over-label grammar
   as the fleet cards: a visitor who compared four numbers on the index meets
   the same four in the same order on the boat's own page, and does not have to
   learn a second layout to read the same facts.

   auto-fit rather than a column count, because the number of rows varies with
   what is known about each boat: eight for one with a shipyard and both years,
   five for one without. A fixed grid would leave holes in the short ones. */
.spec-band{background:var(--sky);padding:34px 0;}
.spec-band__label{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 22px;
}
.spec-band__list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:26px 20px;margin:0;
}
.spec-band__list > div{display:flex;flex-direction:column;gap:5px;min-width:0;}
.spec-band__list dd{
  font-family:var(--serif);font-size:26px;line-height:1;color:var(--navy);margin:0;
}
.spec-band__list dt{font-size:12px;letter-spacing:.05em;color:var(--muted);}

/* The panel alone, on the eight boats with no description yet. Held to a
   readable width and centred, so it reads as the whole of that section rather
   than as the leftover half of a two column layout. */
.charter-panel--alone{display:flex;justify-content:center;}
.charter-panel--alone .charter-panel{width:min(460px,100%);position:static;}

.detail-layout{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:start;}
.detail-body h2{font-size:clamp(26px,3.2vw,38px);line-height:1.16;margin:22px 0;}
.detail-body p{font-size:17px;line-height:1.72;color:var(--ink);margin:0 0 18px;}
.detail-body p.dim{color:var(--muted);}

.summary-panel{background:var(--sky);border-radius:var(--radius-md);padding:32px 32px 28px;position:sticky;top:98px;}
.summary-panel__label{font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--gold-text);text-transform:uppercase;margin-bottom:20px;}
.summary-panel dl{display:flex;flex-direction:column;margin:0;}
.summary-panel__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid oklch(from var(--navy) l c h / .12);font-size:14px;
}
.summary-panel dt{color:var(--muted);}
.summary-panel dd{font-weight:600;color:var(--navy);text-align:right;margin:0;}
.summary-panel__price{margin-top:24px;}
.summary-panel__price .from{font-size:13px;color:var(--muted);}
.summary-panel__price .amount{font-family:var(--serif);font-size:30px;color:var(--navy);line-height:1.1;}
.summary-panel__price .note{font-size:12.5px;color:var(--sand);margin-top:2px;}
.summary-panel .btn{margin-top:20px;}
.summary-panel__secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;
  font-size:13px;font-weight:600;color:var(--blue);
  border:1px solid var(--line);background:var(--paper);
  border-radius:var(--radius-sm);padding:12px;
}
.summary-panel__secondary:hover{border-color:var(--gold);color:var(--gold-text);}
/* Sits under the charter button and says what happens next. Not a link, so it
   must not borrow the secondary button box. */
.summary-panel__hint{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted);}

/* The phone counterpart of the summary card. Above 900px the card is sticky and
   this is not rendered at all; below it the card scrolls away near the top of a
   very long page and the enquiry would otherwise be a scroll to the bottom.
   Hidden by default so the desktop path costs nothing. */
.enquiry-bar{display:none;}
@media (max-width:900px){
  .enquiry-bar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--paper);border-top:1px solid var(--line);
    box-shadow:0 -6px 24px rgba(11,31,51,.10);
  }
  .enquiry-bar__from{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
  .enquiry-bar__amount{font-family:var(--serif);font-size:19px;line-height:1.15;color:var(--navy);}
  .enquiry-bar .btn{flex:none;padding:12px 22px;}
  /* Nothing may end up underneath the bar, footer links least of all. */
  body:has(.enquiry-bar){padding-bottom:74px;}
}

/* Highlights and the day-by-day list live inside the narrative column, so that
   column always runs longer than the summary card. With only a short overview
   beside it the card left a dead block of white below the text, and being
   sticky bought nothing because there was nothing to scroll past. */
.detail-highlights,.detail-itinerary{margin-top:44px;padding-top:36px;border-top:1px solid var(--line);}
.detail-highlights .highlights{grid-template-columns:1fr 1fr;gap:28px 36px;margin-top:28px;}
.highlight__link{display:inline-block;margin-top:10px;}
.detail-itinerary h2{font-size:clamp(24px,2.6vw,32px);margin:14px 0 26px;}
.detail-itinerary .itinerary{max-width:none;}
.detail-itinerary .itinerary__tools{justify-content:flex-start;margin-bottom:20px;}

/* Numbered highlights. */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 40px;margin-top:44px;}
.highlight{display:flex;gap:16px;align-items:flex-start;}
.highlight__number{flex:none;font-family:var(--serif);font-size:22px;color:var(--gold-text);line-height:1.2;width:28px;}
.highlight h3{font-size:19px;line-height:1.25;margin:0 0 7px;}
.highlight p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6;}

/* ----------------------------------------------------------- 17. itinerary */
/* <details> gives open/close and keyboard operation for free, with no JS. */
.itinerary{max-width:1000px;margin:0 auto;border-top:1px solid var(--line);}
.itinerary__tools{display:flex;justify-content:center;gap:18px;margin-bottom:36px;}
.itinerary__tools button{
  font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--blue);
  background:transparent;border:none;
  /* Underline drawn with a shadow rather than a border, so the 24px minimum
     target height can come from padding without pushing the rule away. */
  box-shadow:inset 0 -1px 0 var(--gold);
  padding:4px 2px;min-height:24px;cursor:pointer;
}
.itinerary__tools button:hover{color:var(--gold-text);}
.day{border-bottom:1px solid var(--line);}
.day summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:22px;padding:24px 4px;}
.day summary::-webkit-details-marker{display:none;}
.day__number{flex:none;width:62px;font-size:11.5px;font-weight:600;letter-spacing:.13em;color:var(--gold-text);padding-top:3px;}
.day__title{flex:1;font-family:var(--serif);font-size:21px;line-height:1.22;color:var(--navy);}
.day__stay{flex:none;font-size:13px;color:var(--muted);text-align:right;min-width:150px;}
.day__icon{flex:none;font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1;transition:transform var(--dur-base) var(--ease-out);}
.day[open] .day__icon{transform:rotate(45deg);}
.day__body{padding:0 4px 28px 84px;}
.day__body p{font-size:16px;line-height:1.72;color:var(--ink);margin:0 0 14px;}
.day__meta{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.day__meta b{color:var(--gold-text);font-weight:600;}

/* ---------------------------------------------------------- 18. list pairs */
/* Included / not included, and boat feature lists. */
.list-pair{display:grid;grid-template-columns:1fr 1fr;gap:52px;}
.list-pair h3{font-size:24px;margin:0 0 6px;}
.list-pair__dash{width:34px;height:1px;background:var(--gold);margin:14px 0 22px;}
.marked-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.marked-list li{display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.55;}
.marked-list li::before{content:"\2726";flex:none;color:var(--blue);font-size:14px;line-height:1.4;}
.marked-list--excluded li{color:var(--muted);}
.marked-list--excluded li::before{content:"\2014";color:var(--sand);}

/* ---------------------------------------------------------------- 19. faq */
.faq{max-width:820px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 2px;font-family:var(--serif);font-size:20px;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--serif);font-size:26px;color:var(--gold);transition:transform var(--dur-base) var(--ease-out);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq__answer{padding:0 2px 24px;font-size:16px;line-height:1.7;color:var(--ink);max-width:70ch;}

/* Site-wide FAQ page. The chips are jump links, not filters, so nothing on
   this page is hidden from a crawler or from Ctrl+F. */
.faq-jump{background:var(--paper);border-bottom:1px solid var(--line);padding:16px 0;}
.faq-jump__inner{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
a.filter-chip{display:inline-block;text-decoration:none;}
a.filter-chip:hover{color:var(--navy);border-color:var(--gold);}
.faq-tools{display:flex;justify-content:center;gap:18px;margin-bottom:8px;}
.faq-tools button{
  font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--blue);
  background:transparent;border:none;box-shadow:inset 0 -1px 0 var(--gold);
  padding:4px 2px;min-height:24px;cursor:pointer;
}
.faq-tools button:hover{color:var(--gold-text);}
.faq-group{max-width:820px;margin:0 auto;}
.faq-group+.faq-group{margin-top:56px;}
/* scroll-margin keeps a jump target clear of the sticky header. */
.faq-group h2{font-size:clamp(23px,2.4vw,29px);margin:0 0 8px;scroll-margin-top:110px;}

/* ------------------------------------------------------------ 20. gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:16px;grid-auto-flow:dense;}
.gallery__cell{position:relative;overflow:hidden;border-radius:var(--radius-sm);padding:0;border:none;background:none;cursor:zoom-in;}
.gallery__cell img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out);}
.gallery__cell:hover img{transform:scale(1.05);}
.gallery__cell--wide{grid-column:span 2;}
.gallery__cell--large{grid-column:span 2;grid-row:span 2;}

/* Native <dialog>: the browser supplies the modal semantics, focus trap and
   Escape handling, so the JS stays under budget. */
.lightbox{
  border:none;padding:0;background:transparent;
  max-width:min(92vw,1200px);max-height:92vh;
  position:relative; /* the arrows are positioned against this box */
}
.lightbox::backdrop{background:oklch(from var(--navy) l c h / .88);}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--radius-sm);}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 4px;}
.lightbox__caption{color:var(--on-dark-muted);font-size:14px;}
.lightbox__close{
  width:44px;height:44px;flex:none;
  background:transparent;border:1px solid oklch(from var(--cream) l c h / .4);
  border-radius:50%;color:var(--cream);font-size:18px;cursor:pointer;
}
.lightbox__close:hover{border-color:var(--gold);color:var(--gold);}
.lightbox__count{color:var(--on-dark-muted);font-size:13px;letter-spacing:.08em;margin-left:auto;}
/* 48px square, which is above the 44px minimum for a touch target and large
   enough to hit with a thumb at the edge of a phone screen. */
.lightbox__nav{
  position:absolute;top:calc(50% + 22px);transform:translateY(-50%);
  width:48px;height:48px;
  background:oklch(from var(--navy) l c h / .55);
  border:1px solid oklch(from var(--cream) l c h / .35);
  border-radius:50%;color:var(--cream);font-size:26px;line-height:1;cursor:pointer;
}
.lightbox__nav:hover{background:oklch(from var(--navy) l c h / .8);border-color:var(--gold);color:var(--gold);}
.lightbox__nav--prev{left:12px;}
.lightbox__nav--next{right:12px;}

/* Headline figures under a manifesto. The number is display-sized so it clears
   the 3:1 large-text threshold in gold; the label underneath is body-sized and
   uses Slate Gray, which is what it needs to reach 4.5:1. */
.stat-row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;margin:34px 0 0;}
.stat-row > div{text-align:center;}
.stat-row dd{font-family:var(--serif);font-size:34px;line-height:1;color:var(--gold-text);margin:0 0 6px;}
.stat-row dt{font-size:13px;color:var(--muted);}

/* -------------------------------------------------------------- 21. fleet */
/* ---------------------------------------------------------------- the fleet

   The question, then the grid. Nine boats is few enough to show at once and
   too many to hold in the head, so the page does the holding: every card
   carries the same four figures in the same order and the columns line up
   down the page, which is what turns nine adverts into one comparison. */

.fleet-bar{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:14px 24px;margin-bottom:34px;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.fleet-bar[hidden]{display:none;}
.fleet-bar__question{font-size:17px;font-weight:500;margin:0;white-space:nowrap;}
.fleet-bar__options{display:flex;flex-wrap:wrap;gap:8px;}
.fleet-bar__count{
  grid-column:1 / -1;margin:0;font-size:14px;color:var(--muted);
  /* Reserved rather than appearing: an empty result line that pushes the grid
     down every time a chip is pressed reads as the page jumping. */
  min-height:1.4em;
}
/* The border is the whole outline of the control, so it answers to WCAG 2.2
   1.4.11 and needs 3:1 against the page. --line-mist, which is right for a
   hairline between two blocks of text, measured 1.55:1 here and would have
   left the resting chips as shapes you can only see if you already know they
   are there. Navy at .55 over the cream ground measures 3.4:1. */
.fleet-chip{
  border:1px solid oklch(from var(--navy) l c h / .55);background:transparent;color:var(--ink);
  border-radius:22px;padding:9px 16px;font-size:14px;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard);
}
.fleet-chip:hover{border-color:var(--gold);}
.fleet-chip.is-on{background:var(--navy);border-color:var(--navy);color:var(--cream);}
.fleet-chip:focus-visible{outline:3px solid oklch(from var(--gold) l c h / .65);outline-offset:2px;}
.fleet-empty{margin:28px 0 0;color:var(--muted);}

/* auto-fit with a floor rather than a fixed three: at 320px a card is wide
   enough for the photograph to read and for four figures to sit on one line,
   and the count then follows the width instead of a breakpoint list. */
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;}

.boat-card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.boat-card[hidden]{display:none;}
.boat-card:hover{
  border-color:var(--line-mist);
  box-shadow:0 10px 30px oklch(from var(--navy) l c h / .12);
  transform:translateY(-3px);
}
.boat-card:focus-visible{outline:3px solid oklch(from var(--gold) l c h / .65);outline-offset:3px;}
.boat-card:hover h3{color:var(--blue);}

.boat-card__frame{
  display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--blue) 100%);
}
.boat-card__frame picture{display:block;width:100%;height:100%;}
.boat-card__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-standard);
}
.boat-card:hover .boat-card__frame img{transform:scale(1.03);}

.boat-card__body{display:flex;flex-direction:column;gap:18px;padding:20px 22px 22px;flex:1;}
.boat-card__head{display:block;}
.boat-card__head h3{font-size:24px;line-height:1.15;margin:0;
  transition:color var(--dur-fast) var(--ease-standard);}
/* The tier reads as a price band here rather than as a claim floating over the
   bow, which is where it used to sit, competing with the boat for the corner
   of its own photograph. */
.boat-card__tier{
  display:block;margin-top:5px;
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-text);
}
.boat-card__figures{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding:16px 0;border-block:1px solid var(--line);
}
.boat-card__figures > span{display:flex;flex-direction:column;gap:3px;min-width:0;}
.boat-card__figures b{font-family:var(--serif);font-weight:400;font-size:20px;
  color:var(--navy);line-height:1;white-space:nowrap;}
.boat-card__figures i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.04em;}
.boat-card__go{
  margin-top:auto;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);
}

/* Kept: the boat detail page still stacks a name over its hero. */
.boat-card__top{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--blue) 100%);
  display:flex;align-items:flex-end;
}
.boat-card__top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* The gradient behind the name is the ground the boat name is measured
   against. Without it the cream text sits directly on an unpredictable
   photograph, where a bright sky makes the name vanish. */
.boat-card__top::after{
  content:"";position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(180deg,
    oklch(from var(--navy) l c h / 0) 0%,
    oklch(from var(--navy) l c h / .82) 100%);
}
/* Above the scrim: an ::after pseudo-element paints after its siblings, so
   without an explicit layer the gradient would cover the name it exists to
   make readable. */
.boat-card__name{position:relative;z-index:1;padding:18px;color:var(--cream);}
.boat-card__name h3{color:var(--cream);font-size:26px;line-height:1.1;margin:0;}
.boat-card__length{font-size:13px;color:var(--sky);margin-top:4px;letter-spacing:.03em;}
.boat-specs{display:flex;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.boat-specs dt{font-size:11.5px;color:var(--muted);margin-top:5px;letter-spacing:.03em;order:2;}
.boat-specs dd{font-family:var(--serif);font-size:21px;color:var(--navy);line-height:1;margin:0;order:1;}
.boat-specs > div{display:flex;flex-direction:column;}

/* Cabin list on a boat page. */
.cabin{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;background:var(--cream);}
.cabin__icon{
  flex:none;width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--navy);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;
}
.cabin__title{font-weight:600;color:var(--navy);}
.cabin__detail{font-size:13px;color:var(--muted);}

/* Compact cross-links to sibling boats or posts. */
/* The 30px used to be a style attribute on every one of the three places this
   grid appears, and a style attribute is exactly what `style-src 'self'` blocks:
   the margin was dropped in every browser and only ever seen in a console
   warning. Same for the gallery block below. Nothing inline, ever. */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:30px;}
.media-block{margin-top:34px;}
.related-card{
  display:flex;align-items:center;gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:16px;color:inherit;
}
.related-card:hover{border-color:var(--gold);color:inherit;}
.related-card__media{flex:none;width:96px;height:70px;border-radius:var(--radius-sm);overflow:hidden;background:var(--sky);}
.related-card__media img{width:100%;height:100%;object-fit:cover;}
.related-card__name{font-family:var(--serif);font-size:20px;color:var(--navy);}
.related-card__meta{font-size:13px;color:var(--muted);margin-top:3px;}

/* ------------------------------------------------------------ 22. filters */
.filters{
  position:sticky;top:var(--hd-h);z-index:40;
  background:oklch(from var(--cream) l c h / .95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:16px 0;
}
.filters__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
/* Grouped variant: two labelled rows instead of one long row of equals. Not
   sticky, because two rows pinned under the header eat a phone screen. */
.filters--grouped{position:static;padding:22px 0 18px;}
.filters--grouped .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 32px;}
.filters__group{display:flex;flex-direction:column;gap:8px;}
.filters__label{
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.filters--grouped > .wrap > .filter-chip{margin-top:22px;}
.filter-chip{
  font-size:14.5px;font-weight:500;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:8px 16px;cursor:pointer;
}
.filter-chip:hover{border-color:var(--gold);}
.filter-chip[aria-pressed="true"],.filter-chip.is-active{color:var(--cream);background:var(--blue);border-color:var(--blue);}

/* ------------------------------------------------- 22b. photographic header

   The about and team pages opened on the flat navy band used for legal pages,
   which is the right answer for a privacy policy and the wrong one for the two
   pages where a visitor decides whether they want to travel with these people.
   Same measure and type scale as the tall hero, shorter, and it falls back to
   the flat band when no photograph is set rather than breaking. */
.page-hero{position:relative;display:grid;grid-template-areas:"stack";
  background:var(--navy);color:var(--cream);min-height:360px;}
.page-hero__bg{grid-area:stack;position:relative;overflow:hidden;}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
/* The same corner scrim as .hero__shade, for the same reason.

   This used to be two gradients stacked, a horizontal one over a vertical one.
   Stacked layers do not add, they compound: 1-(1-a)(1-b). Even where each was
   at its weakest, the right hand edge halfway down still came out near .50, so
   there was no part of the frame the wash did not reach. The photograph was
   never actually visible; it was a texture under a navy panel.

   position matters here, it is not decoration. `.page-hero__bg` is positioned,
   this was not, and a positioned sibling paints above a static one: the
   gradient was being drawn underneath the photograph, so the heading sat on
   raw image. Positioning the shade puts tree order back in charge. */
.page-hero__shade{
  grid-area:stack;position:relative;
  background:radial-gradient(ellipse 110% 85% at 0% 100%,
    oklch(from var(--navy) l c h / .93) 0%,
    oklch(from var(--navy) l c h / .82) 45%,
    oklch(from var(--navy) l c h / .30) 70%,
    oklch(from var(--navy) l c h / 0) 88%);
}
.page-hero__inner{grid-area:stack;position:relative;align-self:end;
  width:100%;padding:120px 0 44px;}
.page-hero .eyebrow{color:var(--sky);}
/* The shadow is insurance, not the contrast mechanism: the scrim above carries
   the ratio, and this only keeps the letters anchored where a bright detail in
   the photograph runs behind them. An outline would do the same job worse, by
   thickening the stems and closing the counters of 56px display type. */
.page-hero h1{color:var(--cream);font-size:clamp(34px,4.6vw,56px);line-height:1.06;
  margin:14px 0 12px;max-width:17ch;
  text-shadow:0 1px 2px oklch(from var(--navy) l c h / .45),
              0 2px 14px oklch(from var(--navy) l c h / .30);}
.page-hero__lead{font-size:18px;font-weight:300;color:var(--sky);max-width:54ch;margin:0;}
.page-hero--plain{min-height:0;}
.page-hero--plain .page-hero__inner{padding:120px 0 56px;}

/* The numbers that a claim about experience should be checkable against. */
.fact-band{background:var(--paper);border-bottom:1px solid var(--line);}
.fact-band__list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:26px 0;}
/* A compact band already carries 26px of its own padding, so a following
   section that also opens with 96px measured 132px of dead space from the last
   number to the first word. The space belongs to the relationship between the
   two blocks, not to the section token, so only this join is tightened and the
   96px rhythm every other section keeps stays intact. 64px is an existing step
   in the scale, not a new number. */
.fact-band + .section{padding-top:64px;}
.fact{text-align:center;}
.fact__value{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);color:var(--navy);line-height:1;}
.fact__label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:8px 0 0;}

/* Story: the prose keeps a reading measure while the margin carries the label
   and a line worth stopping on, instead of a single centred column. */
.story{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start;}
.story__aside{position:sticky;top:96px;}
.story__pull{font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--navy);
  margin:16px 0 0;padding-top:16px;border-top:2px solid var(--gold);}
/* The body carries .article for its typography and inherits its page padding
   with it: 64px on top of the section's 96px, which pushed the prose 160px
   down while the label beside it started at 105px. Same rules, no box. */
.story__body.article{max-width:64ch;margin:0;padding:0;}
.story__body h2{font-size:clamp(22px,2.4vw,28px);margin:32px 0 12px;}
.story__body > :first-child{margin-top:0;}

/* --------------------------------------------------------------- 23. team */
/* The team directory.

   --portrait is the one number that decides how large a face is allowed to be,
   and it is set by the files, not by taste. Five of the eight portraits are
   255 x 255: at 112px the browser still has better than two device pixels per
   CSS pixel, so they are sharp on a phone. A 360px box, which is what this
   page used to use, was already upscaling at ordinary density. Raise this the
   day real portraits (4:5, 800 x 1000 or better) are in place. */
/* The column count is not chosen, it falls out of the line length.

   Continuous text wants 45 to 75 characters a line; below that the eye returns
   too often and a paragraph reads like a list. These biographies are 300 to
   470 characters, so they are paragraphs. At this font a character averages
   7.15px, which puts 45 characters at 320px: four fixed columns measured 37
   characters and was measurably too narrow.

   auto-fit with a 320px floor makes the browser fit as many columns as it can
   without any of them going under that, so the measure is right at every width
   and there is no breakpoint to keep in sync. */
.team-grid{
  --portrait:112px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:56px 32px;
}
.team-member{display:flex;flex-direction:column;}
.team-member__head{display:flex;flex-direction:column;gap:16px;margin-bottom:18px;}
.team-member__portrait{
  width:var(--portrait);height:var(--portrait);flex:none;
  border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-mid),var(--blue));
  display:flex;align-items:center;justify-content:center;
}
/* <picture> is inline, so it sizes to the image and the img's width:100% then
   resolves against the file rather than the box. Both have to be told. */
.team-member__portrait picture,
.person__photo picture,
.page-hero__bg picture{display:block;width:100%;height:100%;}
/* A round crop keeps the middle. Faces sit in the upper half of a frame, so
   the centre of a portrait is the chin. Biasing upwards keeps the eyes in the
   circle, which is the whole point of showing a face at all. */
.team-member__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;}
.team-member__initial{
  font-family:var(--serif);font-size:calc(var(--portrait) * .46);
  color:oklch(from var(--sky) l c h / .62);line-height:1;
}
.team-member__name h2{font-size:20px;line-height:1.25;margin:0 0 4px;}
.team-member__role{
  font-size:12.5px;font-weight:600;letter-spacing:.09em;
  color:var(--gold-text);text-transform:uppercase;margin:0;
}
.team-member__bio p{font-size:15.5px;line-height:1.7;color:var(--ink);margin:0 0 12px;}
.team-member__bio p:last-child{margin-bottom:0;}
.team-member__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--blue);background:var(--sky);
  border-radius:20px;padding:6px 14px;margin-top:4px;
}

/* Portraits on the about page: a preview of the team page, at a size where a
   face is actually a face. */
.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.person{text-align:center;}
.person__photo{
  display:block;width:100%;aspect-ratio:4/5;margin:0 0 16px;
  border-radius:var(--radius-md);overflow:hidden;
  background:linear-gradient(135deg,var(--navy-mid),var(--blue));
  color:var(--sky);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:52px;
}
.person__photo img{width:100%;height:100%;object-fit:cover;}
.person{text-align:left;}
.person h3{font-size:20px;margin:0 0 2px;}
.person__role{font-size:13px;color:var(--gold-text);font-weight:600;letter-spacing:.04em;}

/* ------------------------------------------------------------ 24. article */
.article{max-width:760px;margin:0 auto;padding:64px 40px 40px;}
.article__lead{font-family:var(--serif);font-size:23px;line-height:1.5;color:var(--navy);margin:0 0 30px;}
.article p{font-size:17.5px;line-height:1.8;color:var(--ink);margin:0 0 24px;}
.article h2{font-size:28px;line-height:1.2;margin:44px 0 16px;}
.article h3{font-size:22px;line-height:1.25;margin:32px 0 12px;}
.article ul,.article ol{margin:0 0 24px;padding-left:22px;}
.article li{font-size:17px;line-height:1.75;margin-bottom:8px;}
.article blockquote{
  border-left:3px solid var(--gold);margin:32px 0;padding:6px 0 6px 26px;
  font-size:22px;line-height:1.5;
}
.article figure{margin:32px 0;}
.article figure img{width:100%;border-radius:var(--radius-md);}
.article figcaption{font-size:13px;color:var(--muted);padding:10px 2px;}
.article__byline{font-size:14px;color:var(--muted);margin-bottom:8px;}

/* Featured post: image beside an excerpt. */
.feature-post{
  display:grid;grid-template-columns:1.2fr 1fr;
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
  background:var(--paper);margin-bottom:44px;
}
.feature-post__media{min-height:340px;position:relative;overflow:hidden;}
.feature-post__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feature-post__body{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;}
.feature-post__body h2{font-size:clamp(26px,3vw,36px);line-height:1.14;margin:0 0 14px;}
.feature-post__body p{font-size:16px;color:var(--muted);margin:0 0 22px;line-height:1.65;}

/* --------------------------------------------------------------- 25. legal */
.legal-layout{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start;max-width:1080px;margin:0 auto;}
.toc{position:sticky;top:98px;}
.toc__label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:14px;}
.toc ul{list-style:none;margin:0;padding:0;}
.toc a{display:block;font-size:14px;color:var(--muted);padding:6px 0 6px 14px;border-left:2px solid var(--line);}
.toc a:hover{color:var(--navy);border-color:var(--gold);}
.legal-body h1{font-size:clamp(30px,3.6vw,42px);margin:0 0 8px;}
.legal-body__updated{font-size:13.5px;color:var(--sand);margin:0 0 30px;}
.legal-body h2{font-size:22px;margin:38px 0 12px;}
.legal-body p,.legal-body li{font-size:16px;line-height:1.75;color:var(--ink);}
.legal-body ul{margin:0 0 16px;padding-left:20px;}
.legal-body li{margin-bottom:6px;}
.legal-body .note{background:var(--sky);border-radius:var(--radius-md);padding:16px 20px;font-size:14.5px;color:var(--navy);}

/* --------------------------------------------------------------- 26. forms */
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:7px;}
.field .required{color:var(--danger);}
.field__hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;}

.input,.textarea,.select{
  width:100%;
  border:1px solid var(--field-border);border-radius:var(--radius-sm);
  padding:12px 13px;background:var(--paper);color:var(--ink);
  outline:none;font-size:15px;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
/* Fields get the gold border on any focus, including a pointer click, so the
   active field is obvious to everyone. The outline ring above is added on top
   for keyboard focus only. */
.input:focus,.textarea:focus,.select:focus{border-color:var(--gold);}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--danger);}
.textarea{resize:vertical;min-height:96px;line-height:1.55;}
.field__error{display:block;font-size:12.5px;color:var(--danger);margin-top:6px;}

.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* The honeypot. Hidden from sight and from assistive technology, but still
   submitted by a bot that fills every field it finds (docs/12 B2). */
.field-trap{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}

.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 34px 30px;box-shadow:var(--shadow-sm);
}
.form-card h2{font-size:24px;margin:0 0 6px;}
.form-card__intro{font-size:14px;color:var(--muted);margin:0 0 22px;}
.form-note{font-size:12px;color:var(--sand);text-align:center;margin:14px 0 0;}

/* Replaces the form after a successful send, rather than sitting under it: a
   filled form left on screen is an invitation to send the same lead twice. */
.form-success{text-align:center;padding:12px 0 6px;}
.form-success__mark{
  width:52px;height:52px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky);color:var(--blue);font-size:24px;
}
.form-success h2{font-size:26px;margin:0 0 10px;}
.form-success p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 auto 18px;max-width:44ch;}
.form-success__meta{font-size:14px;margin-top:22px;}

/* Turnstile keeps its own size; this only gives it room and centres it. */
.cf-turnstile{display:flex;justify-content:center;margin:20px 0 4px;min-height:0;}

.alert{border-radius:var(--radius-md);padding:16px 20px;margin-bottom:24px;font-size:15px;}
.alert--error{background:oklch(from var(--danger) l c h / .08);border:1px solid oklch(from var(--danger) l c h / .35);color:var(--danger);}
.alert--success{background:var(--sky);border:1px solid var(--line-mist);color:var(--navy);}

/* ---------------------------------------------------- 26b. tailor-made brief */
/* Five fieldsets in one form. app.js hides all but the current one; with the
   script off they simply stack and the single submit button still posts. */
.wizard-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
.wizard-intro h2{font-size:clamp(26px,3vw,34px);line-height:1.16;margin:14px 0 16px;}
.wizard-intro p{font-size:16.5px;line-height:1.7;color:var(--muted);margin:0 0 22px;}
.wizard-intro__note{font-size:13px;color:var(--sand);margin-top:22px;}
.wizard-intro .marked-list{margin-bottom:0;}

.wizard-step{border:none;padding:0;margin:0 0 30px;min-width:0;}
.wizard-step[hidden]{display:none;}
.wizard-step legend{
  font-family:var(--serif);font-size:23px;line-height:1.2;color:var(--navy);
  padding:0;margin-bottom:6px;
}
.wizard-step__hint{font-size:13px;color:var(--muted);margin:0 0 16px;}

.chip-set{display:flex;flex-wrap:wrap;gap:10px;}
.chip-choice{position:relative;}
/* The input stays in the layout and keeps its own focus ring: hiding it with
   display:none would take it out of the tab order entirely. */
.chip-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.chip-choice span{
  display:block;font-size:14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:10px 18px;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.chip-choice input:hover+span{border-color:var(--gold);}
.chip-choice input:focus-visible+span{
  outline:3px solid oklch(from var(--gold) l c h / .65);outline-offset:2px;
}
.chip-choice input:checked+span{background:var(--blue);border-color:var(--blue);color:var(--cream);}

.wizard-progress{margin-bottom:26px;}
.wizard-progress__bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.wizard-progress__bar span{
  display:block;height:100%;width:20%;background:var(--gold);
  transition:width var(--dur-base) var(--ease-out);
}
.wizard-progress__label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:10px 0 0;}
.wizard-nav{display:flex;gap:12px;margin-bottom:14px;}
.wizard-nav .btn{flex:1;}
.wizard-nav[hidden]{display:none;}
.value__role{font-size:13.5px;color:var(--muted);margin:6px 0 0;}

/* -------------------------------------------------------------- 27. contact */
.contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
.contact-info h1{font-size:clamp(30px,3.8vw,46px);line-height:1.1;margin:0 0 18px;}
.contact-info__lead{font-size:17px;color:var(--muted);margin:0 0 30px;line-height:1.7;max-width:44ch;}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line);}
.contact-row__icon{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--sky);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.contact-row__label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:3px;}
.contact-row__value{font-size:16px;color:var(--navy);font-weight:600;}
.contact-row__value a{color:var(--navy);}
.contact-row__value a:hover{color:var(--gold-text);}
.contact-row__detail{font-size:13.5px;color:var(--muted);margin-top:2px;}

/* WhatsApp brand green is required for recognition; it is a logo colour on a
   single button, not a palette addition. */
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:9px;
  background:#25D366;color:#0B2E1A;font-weight:600;font-size:14px;
  border-radius:var(--radius-sm);padding:12px 18px;margin-top:20px;
}
.btn-whatsapp:hover{background:#1FB855;color:#0B2E1A;}

/* --------------------------------------------------------------- 28. wizard */
.wizard{max-width:760px;margin:0 auto;padding:40px 40px 96px;}
.stepper{display:flex;align-items:center;margin-bottom:8px;}
.stepper__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.stepper__dot{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
}
.stepper__label{font-size:11px;color:var(--muted);}
.stepper__step.is-current .stepper__dot{background:var(--blue);border-color:var(--blue);color:var(--cream);}
.stepper__step.is-current .stepper__label{color:var(--navy);font-weight:600;}

.progress{height:3px;background:var(--line);border-radius:3px;margin:14px 0 34px;overflow:hidden;}
.progress__bar{height:100%;background:var(--gold);width:0;transition:width var(--dur-base) var(--ease-out);}

.choice-set{display:flex;flex-wrap:wrap;gap:12px;}
.choice{
  font-size:14.5px;font-weight:500;cursor:pointer;
  padding:12px 18px;border-radius:var(--radius-sm);
  border:1px solid var(--field-border);background:var(--paper);color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.choice:hover{border-color:var(--gold);}
.choice[aria-pressed="true"],.choice.is-selected{border-color:var(--blue);background:var(--blue);color:var(--cream);}

.wizard-nav{display:flex;align-items:center;justify-content:space-between;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.wizard-nav__back{font-size:14px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;letter-spacing:.03em;}
.wizard-nav__back:hover{color:var(--gold);}

.specialist-match{
  display:flex;gap:18px;align-items:center;
  background:var(--sky);border-radius:var(--radius-lg);padding:20px 22px;margin:24px 0 26px;
}
.specialist-match__avatar{
  flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:var(--navy);color:var(--cream);
  font-family:var(--serif);font-size:24px;
  display:flex;align-items:center;justify-content:center;
}
.specialist-match__label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);}
.specialist-match__name{font-family:var(--serif);font-size:22px;color:var(--navy);margin-top:2px;}
.specialist-match__role{font-size:13.5px;color:var(--muted);margin-top:2px;}

.confirmation{text-align:center;padding:20px 10px 10px;}
.confirmation__mark{
  width:64px;height:64px;margin:0 auto 22px;
  border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:28px;font-family:var(--serif);
}
.confirmation h2{font-size:28px;margin:0 0 12px;}
.confirmation p{color:var(--muted);font-size:15.5px;max-width:44ch;margin:0 auto 8px;}

/* --------------------------------------------------------------- 29. mice */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.service__icon{
  width:52px;height:52px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20px;color:var(--blue);margin-bottom:16px;
}
.service h3{font-size:20px;margin:0 0 10px;}
.service p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6;}

/* -------------------------------------------------------------- 30. errors */
.error-page{max-width:720px;margin:0 auto;text-align:center;padding:120px 40px 80px;}
.error-page__code{font-family:var(--serif);font-size:clamp(80px,14vw,150px);line-height:1;color:var(--gold);}
.error-page h1{font-size:clamp(28px,3.6vw,40px);margin:8px 0 14px;}
.error-page p{font-size:17px;color:var(--muted);max-width:46ch;margin:0 auto 30px;}
.error-page__links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px;margin-top:44px;}
.error-page__links a{display:inline-block;font-size:14px;font-weight:600;color:var(--blue);padding:6px 8px;min-height:24px;}

/* -------------------------------------------------------------- 31. footer */
.site-footer{background:var(--navy-deep);color:var(--on-dark-muted);padding:74px 0 36px;}
.footer-columns{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:44px;border-bottom:1px solid oklch(from var(--cream) l c h / .1);
}
.site-footer .brand-word b{color:var(--cream);font-size:22px;}
.footer-about{font-size:14.5px;line-height:1.65;color:var(--on-dark-faint);margin:18px 0;max-width:32ch;}
.footer-address{font-size:13.5px;line-height:1.7;color:var(--on-dark-faint);font-style:normal;}
/* The phone and email links here would otherwise inherit Runner Blue, which
   reaches only 2.25:1 on the navy footer. */
.footer-address a{color:var(--on-dark-muted);display:inline-block;padding-block:4px;margin-block:-4px;}
.footer-address a:hover{color:var(--gold);}
.footer-column h2{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--gold);margin-bottom:18px;text-transform:uppercase;font-family:var(--sans);}
.footer-column ul{list-style:none;margin:0;padding:0;}
/* Padding not margin: the target box itself has to clear 24px (WCAG 2.5.8),
   not just the gap between links. */
.footer-column a{display:block;font-size:14px;color:var(--on-dark-muted);padding:5px 0;margin-bottom:4px;}
.footer-column a:hover{color:var(--gold);}

.footer-seals{display:flex;gap:14px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid oklch(from var(--cream) l c h / .1);}
.seal{display:flex;align-items:center;gap:11px;border:1px solid oklch(from var(--gold) l c h / .5);border-radius:var(--radius-sm);padding:10px 15px;}
.seal__icon{
  flex:none;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.seal__title{display:block;font-size:12.5px;color:var(--cream);font-weight:600;}
.seal__detail{font-size:11.5px;color:var(--on-dark-faint);}
/* The TURSAB seal carries the association's own badge graphic instead of a
   glyph we chose, so it gets its own rule rather than forcing the image into
   the 30px icon circle above, which would crop the mark unrecognisably. */
.seal--tursab{transition:border-color var(--dur-fast) var(--ease-standard);}
.seal--tursab:hover,.seal--tursab:focus-visible{border-color:var(--gold);}
.seal__badge{flex:none;height:34px;width:auto;display:block;border-radius:3px;}

.footer-base{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:24px;flex-wrap:wrap;}
.footer-base p,.footer-base a{font-size:13px;color:var(--on-dark-faint);margin:0;}
.footer-legal{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.footer-legal a{display:inline-block;padding-block:6px;margin-block:-6px;}
.footer-social{display:flex;gap:12px;list-style:none;margin:0;padding:0;}
.footer-social a{
  width:34px;height:34px;
  border:1px solid oklch(from var(--cream) l c h / .18);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--on-dark-muted);font-size:12px;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold);}

/* ----------------------------------------------------------- 32. utilities */
.lede{font-size:19px;color:var(--muted);max-width:56ch;}
.text-center{text-align:center;}
.stack-cta{text-align:center;margin-top:52px;}
.measure{max-width:70ch;}

/* ---------------------------------------------------------- 33. responsive */
@media(max-width:1024px){
  .grid--4,.service-grid,.people-grid{grid-template-columns:repeat(2,1fr);}
  .highlights{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:900px){
  .wrap{padding:0 22px;}
  .section{padding:64px 0;}
  .section--loose{padding:80px 0;}
  /* `.wrap` is the later rule and its shorthand resets the vertical padding
     this element sets, which is why the bottom is restored here. The top is
     left at zero deliberately: the box is a band taller than its own words,
     the words are aligned to its bottom, and the lost padding falls in the
     empty part above them. Naming a top padding here would only push the text
     up the frame, away from the scrim. */
  .hero__inner{padding-bottom:44px;}
  /* No hero--fit rule here on purpose: the mechanism is inside a min-width
     query, so a phone gets the plain band and nothing needs undoing. */

  .nav-toggle{display:inline-flex;}
  /* The drawer replaces the row. Links must never simply disappear. */
  .primary-nav{
    position:absolute;top:var(--hd-h);left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    padding:8px 22px 18px;
    max-height:calc(100dvh - var(--hd-h));overflow-y:auto;
  }
  .primary-nav[data-open]{display:flex;}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .primary-nav li{border-bottom:1px solid var(--line);}
  .primary-nav li:last-child{border-bottom:none;}
  .primary-nav a{display:block;padding:15px 2px;font-size:17px;}

  /* In the drawer the panel is not a popover: it opens in the flow, indented
     under Journeys, so nothing floats over the page on a small screen. */
  .nav-has-panel{flex-wrap:wrap;}
  .nav-has-panel > a{flex:1;}
  .nav-panel-toggle{width:44px;height:44px;}
  .nav-panel{
    position:static;width:100%;min-width:0;order:3;
    box-shadow:none;border:none;border-top:1px solid var(--line);
    border-radius:0;padding:8px 0 14px 14px;margin-top:6px;background:transparent;
  }
  .nav-panel__inner{grid-template-columns:1fr;gap:14px;}
  .nav-panel a{font-size:16px;padding:9px 0;}
  .lang-switch{align-self:flex-start;margin-top:14px;}

  .grid--2,.grid--3,.grid--4,.steps,
  .highlights,.detail-highlights .highlights,
  .list-pair,.related-grid,.service-grid,
  .people-grid,.contact-layout,.detail-layout,.wizard-layout{grid-template-columns:1fr;}
  .detail-layout,.contact-layout,.wizard-layout{gap:36px;}
  .summary-panel{position:static;}

  .feature-split,.feature-post{grid-template-columns:1fr;}
  .feature-split__media{min-height:280px;}
  .feature-split__body{padding:40px 26px;}
  .feature-post__media{min-height:220px;}
  .feature-post__body{padding:32px 26px;}

  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px;}
  .gallery__cell--large{grid-column:span 2;grid-row:span 1;}

  .review-badge{flex-direction:column;text-align:center;}
  .review-badge__link{margin-left:0;}
  .review-badge__col{align-items:center;}

  .day__stay{display:none;}
  .day__body{padding-left:4px;}
  .hero-facts{gap:22px;}

  .footer-columns{grid-template-columns:1fr 1fr;gap:30px;}
  .legal-layout{grid-template-columns:1fr;}
  .toc{display:none;}
  .filters{top:0;}

  /* The story margin stops being a margin and becomes an introduction. */
  .story{grid-template-columns:1fr;gap:24px;}
  .story__aside{position:static;}
  .story__pull{font-size:19px;}
}

@media(max-width:820px){
  .team-grid{gap:44px 28px;}
  .people-grid{grid-template-columns:1fr 1fr;}
  .fact-band__list{grid-template-columns:1fr 1fr;gap:20px;}
}

@media(max-width:700px){
  .field-pair{grid-template-columns:1fr;}
  .page-hero h1{max-width:none;}
}

@media(max-width:560px){
  /* On a phone the heading fills the width: measured at 375px it runs from 6%
     to 94%, because 18ch of 38px type is wider than the screen. A corner scrim
     would leave the last two thirds of every line on bare photograph, so here
     the scrim goes back to a band across the bottom. It is the text that
     decides the shape of the scrim, and on a phone the text is a different
     shape. The top 40% still clears, which the old wash never did. */
  .hero__shade,.page-hero__shade{
    background:linear-gradient(180deg,
      oklch(from var(--navy) l c h / 0) 0%,
      oklch(from var(--navy) l c h / 0) 30%,
      oklch(from var(--navy) l c h / .55) 50%,
      oklch(from var(--navy) l c h / .86) 62%,
      oklch(from var(--navy) l c h / .92) 100%);
  }

  /* One column, and the portrait moves beside the name rather than above it.
     Stacked, eight people at full width make a page you scroll past rather
     than read; side by side each entry starts with a face and a name on one
     line, the way a contact list does. */
  /* Below the 320px floor auto-fit already gives one column; this only makes
     the portrait smaller and tightens the rhythm. */
  .team-grid{--portrait:88px;gap:36px;}
  .team-member__head{flex-direction:row;align-items:center;gap:16px;margin-bottom:14px;}
  .footer-columns{grid-template-columns:1fr;}
  .trust-strip__sep{display:none;}
  .gallery{grid-template-columns:1fr;}
  .gallery__cell--wide,.gallery__cell--large{grid-column:span 1;}
  .header-actions .btn{padding:12px 16px;font-size:12.5px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
  a.card:hover{transform:none;}
  a.card:hover .card__media img,.gallery__cell:hover img{transform:none;}
}