@charset "UTF-8";
/* =========================================================================
   Experience Murrells Inlet
   Design system

   Palette is taken from the supplied brand sheet. Where a printed hex label
   was legible it wins; the sampled pixel is recorded beside it so the choice
   stays auditable.

   Heading rule: display headings are centred, fill their container, and never
   run to a third line. clamp() gets close on its own; data-fit in site.js
   closes the gap by measuring and writing --fit-size. Hyphenation and
   mid-word breaking are pinned off, so a fit can never be achieved by slicing
   a word in half. Size is the only lever.
   ========================================================================= */

:root {
  /* brand, from the sheet */
  --deep:      #0B3D5B;   /* Deep Ocean */
  --deep-ink:  #072B41;   /* derived, dark grounds */
  --deep-wash: #114A6C;
  --teal:      #0097A7;   /* Teal Wave */
  --teal-deep: #007787;   /* derived, text on light */
  --marsh:     #6B8F3D;   /* Marsh Green */
  --gold:      #FFB347;   /* Sunset Gold */
  --gold-deep: #C9822A;   /* derived, gold text on light */
  --sand:      #F2ECE1;   /* Sand, cooled from the sheet's #F4E7D1 */
  --shell:     #FBF7F0;   /* derived, lightest ground */
  --ink:       #24313A;
  --ink-soft:  #55636D;
  --ink-faint: #8493A0;
  --line:      #E5DCCE;
  --line-soft: #F0E9DD;

  --bg: #FDFAF4;          /* warm paper, the sheet's ground */
  --surface: #FFFFFF;
  --focus: var(--teal-deep);

  --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --f-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --a11y-scale: 1;
  --step-0: calc(clamp(1rem, .96rem + .2vw, 1.1rem) * var(--a11y-scale));
  --step-1: calc(clamp(1.14rem, 1.05rem + .36vw, 1.35rem) * var(--a11y-scale));
  --small:  calc(clamp(.82rem, .8rem + .1vw, .88rem) * var(--a11y-scale));
  --micro:  calc(clamp(.69rem, .67rem + .08vw, .75rem) * var(--a11y-scale));

  --wrap: 1240px;
  --gut: clamp(1.15rem, 4vw, 3rem);
  --band: clamp(3.5rem, 8vw, 7rem);
  --r: 3px;                       /* restrained on purpose */
  --shadow: 0 1px 2px rgba(11,61,91,.06), 0 8px 24px -12px rgba(11,61,91,.18);
}

:root[data-theme="dark"] {
  --bg: #08293E; --surface: #0E3752; --ink: #F1F6F9; --ink-soft: #B4CBD8;
  --ink-faint: #86A3B4; --line: #1A4964; --line-soft: #123C56; --shell: #08293E;
  --sand: #0E3752; --gold-deep: #FFC36B; --teal-deep: #4FD0DF; --deep: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--step-0)/1.68 var(--f-body);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--deep); color: #fff; padding: .8rem 1.2rem;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------------------------------------------------------------- headings */
/* Centred, container-filling, never three lines, never a hyphenated break.   */
.display {
  font-family: var(--f-display); font-weight: 700; text-align: center; color: var(--deep);
  line-height: 1.02; letter-spacing: -.018em; margin: 0;
  text-wrap: balance; hyphens: none; word-break: normal; overflow-wrap: normal;
  font-size: var(--fit-size, clamp(2.1rem, 8.2vw, 5.4rem));
}
h1.display { font-size: var(--fit-size, clamp(2.4rem, 9vw, 6.4rem)); }
.eyebrow {
  text-align: center; font-size: var(--micro); letter-spacing: .22em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-deep);
  margin: 0 0 1rem;
}
.dek {
  text-align: center; font-size: var(--step-1); line-height: 1.55;
  color: var(--ink-soft); max-width: 62ch; margin: 1.4rem auto 0; text-wrap: pretty;
}
.section-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* ------------------------------------------------------------------ header */
.topline {
  background: var(--deep-ink); color: #DCE8EF; font-size: var(--micro);
  letter-spacing: .06em;
}
.topline__in { display: flex; align-items: center; gap: 1rem; justify-content: space-between; min-height: 38px; }
.tideflash { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.tideflash b { color: var(--gold); font-weight: 700; }
.tideflash span { color: #93AEBE; font-weight: 500; }

.masthead { background: var(--deep); color: #fff; position: sticky; top: 0; z-index: 90; }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 74px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 46px; height: 46px; flex: none; }
.brand__txt { line-height: 1; }
.brand__k { display: block; font-size: 9px; letter-spacing: .3em; color: var(--gold); font-weight: 700; }
.brand__n { display: block; font-family: var(--f-display); font-size: 1.32rem; font-weight: 700; letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav__a {
  text-decoration: none; font-size: var(--small); font-weight: 600; letter-spacing: .04em;
  padding: .65rem .85rem; border-radius: var(--r); color: #EAF2F6;
  text-transform: uppercase; transition: background .18s, color .18s;
}
.nav__a:hover, .nav__a[aria-expanded="true"] { background: rgba(255,255,255,.1); color: #fff; }
.nav__a--cta { background: var(--gold); color: var(--deep-ink); }
.nav__a--cta:hover { background: #FFC470; color: var(--deep-ink); }
.icobtn {
  background: none; border: 0; color: #EAF2F6; padding: .5rem; cursor: pointer;
  border-radius: var(--r); display: grid; place-items: center;
}
.icobtn:hover { background: rgba(255,255,255,.1); }

/* mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--surface);
  border-top: 3px solid var(--gold); box-shadow: var(--shadow);
  display: none; padding: 2.2rem 0 2.4rem; color: var(--ink);
}
.mega[data-open="true"] { display: block; }
.mega__grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 2.4rem; }
.mega__h {
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin: 0 0 .9rem;
}
.mega__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.4rem; }
.mega__list a {
  display: block; padding: .34rem 0; text-decoration: none; font-size: var(--small);
  color: var(--ink-soft); break-inside: avoid;
}
.mega__list a:hover { color: var(--teal-deep); }
.mega__feat { border-left: 1px solid var(--line); padding-left: 2rem; }
.mega__feat img { border-radius: var(--r); aspect-ratio: 3/2; object-fit: cover; }
.mega__feat p { font-size: var(--small); color: var(--ink-soft); margin: .8rem 0 0; }

/* ------------------------------------------------------------------- hero */
/* Panoramic photograph with the H1 set into the sky, not a card on a scrim. */
.hero { position: relative; background: var(--deep-ink); overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,43,65,.82) 0%, rgba(7,43,65,.36) 42%, rgba(7,43,65,.9) 100%);
}
.hero__in {
  position: relative; padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5rem);
  color: #fff; text-align: center;
}
.hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.hero .dek { color: #DDE9F0; }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem;
  margin-top: 2.2rem; font-size: var(--small); color: #C6DCE8;
}
.hero__meta b { color: var(--gold); }


/* --------------------------------------------------------- the tide gauge */
.gauge { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem); }
@media (max-width: 820px) { .gauge { grid-template-columns: 1fr; } }
.gauge__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.4rem, 2.6vw, 2rem);
}
.gauge__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.gauge__name { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; margin: 0; }
.gauge__state {
  font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--teal-deep);
}
.gauge__note { font-size: var(--small); color: var(--ink-soft); margin: 0 0 1.3rem; }
.gauge__viz { height: 74px; margin-bottom: 1.1rem; }
.gauge__viz svg { width: 100%; height: 100%; overflow: visible; }
.gauge__rows { display: grid; gap: .1rem; }
.gauge__row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: .8rem; align-items: baseline;
  padding: .5rem 0; border-top: 1px solid var(--line-soft);
}
.gauge__k {
  font-size: var(--micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint);
}
.gauge__row--next .gauge__k { color: var(--gold-deep); }
.gauge__t { font-family: var(--f-display); font-size: 1.18rem; font-weight: 700; }
.gauge__ft { font-size: var(--small); color: var(--ink-soft); }
.gauge__src { font-size: var(--micro); color: var(--ink-faint); margin: 1rem 0 0; letter-spacing: .04em; }

.lag {
  background: var(--deep); color: #fff; border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; gap: 1.4rem; align-items: center;
}
.lag__n { font-family: var(--f-display); font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: .9; color: var(--gold); }
.lag__t { font-size: var(--small); line-height: 1.6; color: #CFE2EC; margin: 0; }

/* ------------------------------------------------------------ editorial */
.prose { max-width: 68ch; margin-inline: auto; }
.prose p { margin: 0 0 1.35rem; text-wrap: pretty; }
.prose p:first-of-type::first-letter {
  float: left; font-family: var(--f-display); font-size: 3.9em; line-height: .78;
  padding: .06em .1em 0 0; color: var(--deep); font-weight: 700;
}
:root[data-theme="dark"] .prose p:first-of-type::first-letter { color: var(--gold); }

.pull {
  border-left: 3px solid var(--gold); padding: .2rem 0 .2rem 1.4rem;
  font-family: var(--f-display); font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.34; color: var(--deep); margin: 2.2rem 0;
}
:root[data-theme="dark"] .pull { color: #CFE6EF; }

/* full bleed photography, deliberately breaking the container */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); position: relative; }
.bleed img { width: 100%; height: clamp(260px, 46vh, 520px); object-fit: cover; }
.bleed figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.6rem var(--gut) 1.1rem;
  background: linear-gradient(transparent, rgba(7,43,65,.85));
  color: #E6F0F5; font-size: var(--small);
}

/* --------------------------------------------------- "Off the Dock" notes */
.dock { display: grid; gap: 0; border-top: 1px solid var(--line); }
.dock__row {
  display: grid; grid-template-columns: minmax(180px, 22%) 1fr; gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) { .dock__row { grid-template-columns: 1fr; gap: .35rem; } }
.dock__h {
  font-family: var(--f-display); font-size: 1.22rem; font-weight: 700; margin: 0;
  color: var(--deep); line-height: 1.25;
}
:root[data-theme="dark"] .dock__h { color: #BFDCE7; }
.dock__p { margin: 0; color: var(--ink-soft); font-size: var(--small); line-height: 1.7; }

/* --------------------------------------------------------- horizontal rail */
.rail { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.2rem; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  scrollbar-width: thin; }
.rail__i { flex: 0 0 clamp(230px, 27vw, 310px); scroll-snap-align: start; text-decoration: none; }
.rail__i img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); }
.rail__n { font-family: var(--f-display); font-size: 1.16rem; font-weight: 700; margin: .8rem 0 .2rem; }
.rail__m { font-size: var(--small); color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------------ table */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--small); }
.cmp th, .cmp td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th {
  background: var(--deep); color: #fff; font-size: var(--micro);
  letter-spacing: .12em; text-transform: uppercase; border: 0;
}
.cmp tbody tr:nth-child(odd) { background: var(--line-soft); }
.cmp td:first-child { font-weight: 700; color: var(--deep); }
:root[data-theme="dark"] .cmp td:first-child { color: #BFDCE7; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .cmp { min-width: 640px; } }

/* -------------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); max-width: 78ch; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.4rem 1.15rem 0; position: relative;
  font-family: var(--f-display); font-size: 1.18rem; font-weight: 700; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq p { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: var(--small); line-height: 1.75; max-width: 68ch; }

/* ----------------------------------------------------------------- footer */
.foot { background: var(--deep-ink); color: #B9CEDA; padding: var(--band) 0 7rem; font-size: var(--small); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
.foot h2 { font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
/* Only the column links are stacked. Making every footer link block level
   also broke inline ones, which is what pushed the operating company onto its
   own line under the copyright. */
.foot a { color: #B9CEDA; text-decoration: none; }
.foot ul a { display: block; padding: .3rem 0; }
.foot a:hover { color: #fff; }
.byline { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.6rem; padding-top: 1.8rem; }
.byline__n { color: #fff; font-weight: 700; }

/* ------------------------------------------------- floating mobile footer */
.dock-nav { display: none; }
@media (max-width: 900px) {
  .dock-nav {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 95; background: var(--deep);
    border-top: 1px solid rgba(255,255,255,.14);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .dock-nav a {
    display: grid; place-items: center; gap: .2rem; padding: .6rem .3rem .5rem;
    color: #D8E7EF; text-decoration: none; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 600; min-height: 56px;
  }
  .dock-nav a[aria-current="page"] { color: var(--gold); }
}

/* ------------------------------------------------------- a11y + translate */
.a11y-panel {
  position: fixed; right: 1rem; bottom: 5rem; z-index: 120; width: min(300px, calc(100vw - 2rem));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 1.2rem; display: none;
}
.a11y-panel[data-open="true"] { display: block; }
.a11y-panel h2 { font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .9rem; color: var(--gold-deep); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line-soft); font-size: var(--small); }
.a11y-row button {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: var(--r); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--micro);
}
.a11y-row button[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }

body[data-contrast="high"] { --ink: #000; --ink-soft: #1a1a1a; --bg: #fff; --surface: #fff; --line: #000; }
body[data-dyslexic="on"] { --f-body: "Atkinson Hyperlegible", Verdana, sans-serif; --f-display: "Atkinson Hyperlegible", Verdana, sans-serif; }
body[data-motion="off"] * { animation: none !important; transition: none !important; }

/* Reveal is an enhancement, never a gate. Content is visible by default; the
   hidden start state is only applied once JS has confirmed it can reveal it
   again. A failed script, a blocked observer or a background tab therefore
   leaves the page readable rather than blank. */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

.band { padding: var(--band) 0; }
/* Sand is a paper tint in the brand sheet, not a field colour. At full band
   width it reads yellow against the cool photography, so alternating bands use
   white against the warm paper ground instead. Sand survives only as a small
   accent, on chips and hover states. */
.band--sand { background: var(--surface); border-block: 1px solid var(--line); }
.band--deep { background: var(--deep); color: #fff; }
.band--deep .dek { color: #C9DEE9; }

/* =========================================================================
   Brand signatures, taken from the sheet
   ========================================================================= */

/* The gold brush swash. On the sheet every section label carries one, and it
   is the single most recognisable thing in the identity after the mark. Drawn
   rather than an image so it recolours and never blurs. */
.swash { display: block; margin: .85rem auto 0; width: clamp(88px, 12vw, 132px); height: 10px; color: var(--gold); }
.swash path { fill: currentColor; }

/* Script, for tagline moments only. The sheet uses it for "Coastal Charm.
   Marshside Magic." and "Life is Better in Murrells Inlet", never for body. */
.script {
  font-family: "Caveat", "Segoe Script", cursive; font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.12; color: var(--gold-deep);
  text-align: center; margin: 0;
}
.hero .script { color: #FFD79A; }

/* ------------------------------------------------------------- masthead */
/* Light, because the supplied lockup is the on-light-background version and
   its wordmark is Deep Ocean. Putting it on navy would need the knockout
   variant, which we do not have as a file. */
.masthead { background: #FFFFFF; color: var(--deep); border-bottom: 1px solid var(--line); }
.masthead__in { min-height: 86px; }
.brand__logo { height: clamp(46px, 5vw, 62px); width: auto; }
.nav__a { color: var(--deep); }
.nav__a:hover, .nav__a[aria-expanded="true"] { background: var(--sand); color: var(--deep); }
.nav__a--cta { background: var(--gold); color: #4A2E06; }
.nav__a--cta:hover { background: #FFC470; }
.icobtn { color: var(--deep); }
.icobtn:hover { background: var(--sand); }
:root[data-theme="dark"] .masthead { background: #0E3752; border-bottom-color: #1A4964; }
/* The supplied lockup is the on-light version, so in dark mode it sits on the
   white plate the brand sheet shows for exactly this case. */
:root[data-theme="dark"] .brand__logo { background: none; padding: 0; }

/* Footer lockup sits on a light plate, which is how the sheet shows the mark
   used against a dark ground. */
.foot__logo { background: #fff; padding: .7rem 1rem; border-radius: var(--r); display: inline-block; margin-bottom: 1.1rem; }
.foot__logo img { height: 52px; width: auto; }

/* ----------------------------------------------------------- icon strip */
/* The sheet's six signature icons, used as a real wayfinding row rather than
   decoration. Not a card grid: no boxes, no borders, just marks and labels. */
.signature { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; text-align: center; }
@media (max-width: 860px) { .signature { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1rem; } }
.signature a { text-decoration: none; color: var(--deep); display: block; }
.signature svg { margin: 0 auto .6rem; color: var(--teal-deep); }
.signature a:hover svg { color: var(--gold-deep); }
.signature span { font-size: var(--micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
:root[data-theme="dark"] .signature a { color: var(--ink); }

/* Hero sits lighter now. The photograph should read as a sunny coast, not a
   dark scrim with text on it. */
.hero__veil {
  background: linear-gradient(180deg, rgba(7,43,65,.62) 0%, rgba(7,43,65,.22) 45%, rgba(7,43,65,.72) 100%);
}
.hero__img img { opacity: .92; }

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

/* =========================================================================
   Listing components
   Shared vocabulary, arranged differently on each silo page.
   ========================================================================= */

/* Ranked editorial row. Number, photograph, prose. Not a card. */
.rank { border-top: 1px solid var(--line); }
.rank__i {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: clamp(1rem,2.5vw,2rem);
  padding: clamp(1.3rem,2.6vw,2rem) 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.rank__n {
  font-family: var(--f-display); font-size: clamp(1.7rem,3vw,2.4rem);
  color: var(--gold-deep); line-height: 1; font-weight: 700;
}
.rank__b { display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: start; }
@media (max-width: 720px) { .rank__b { grid-template-columns: 1fr; } }
.rank__h { font-family: var(--f-display); font-size: clamp(1.3rem,2.4vw,1.7rem); margin: 0 0 .3rem; line-height: 1.2; }
.rank__h a { text-decoration: none; }
.rank__h a:hover { color: var(--teal-deep); }
.rank__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--small); color: var(--ink-soft); margin: 0 0 .5rem; }
.rank__p { font-size: var(--small); color: var(--ink-soft); margin: 0; line-height: 1.7; max-width: 60ch; }
.rank__acts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }

.chip {
  font-size: var(--micro); letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: .2rem .55rem; border-radius: 2px; background: var(--sand); color: var(--deep);
}
.chip--open { background: #E4F2E0; color: #2F5D22; }
.chip--shut { background: var(--line-soft); color: var(--ink-faint); }
.chip--water { background: #DDF0F4; color: #0B5A66; }
.chip--own { background: var(--gold); color: #4A2E06; }
.stars { color: var(--gold-deep); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  font-size: var(--micro); letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 2px; color: var(--deep);
  background: var(--surface); transition: background .16s, border-color .16s;
}
.btn:hover { background: var(--sand); border-color: var(--gold); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: #4A2E06; }
.btn--gold:hover { background: #FFC470; }

/* Text-led category index. A list, not a grid of boxes. */
.index { columns: 3; column-gap: clamp(1.5rem,4vw,3.5rem); }
@media (max-width: 860px) { .index { columns: 2; } }
@media (max-width: 540px) { .index { columns: 1; } }
.index a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
  padding: .62rem 0; border-bottom: 1px solid var(--line-soft); text-decoration: none;
  break-inside: avoid; font-weight: 600;
}
.index a:hover { color: var(--teal-deep); }
.index b { font-weight: 700; font-size: var(--small); }
.index span { font-size: var(--micro); color: var(--ink-faint); font-weight: 600; }

/* Split hero: photograph one side, type the other. Used on Food & Drink. */
.split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: clamp(360px,52vh,540px); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__img { position: relative; }
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .split__img { height: 46vh; } .split__img img { position: static; } }
.split__t {
  background: var(--deep); color: #fff; display: grid; align-content: center;
  padding: clamp(2.2rem,5vw,4rem) clamp(1.5rem,4vw,3.4rem);
}
.split__t .display { color: #fff; text-align: left; }
.split__t .eyebrow { text-align: left; }
.split__t .swash { margin-left: 0; }
.split__t .dek { text-align: left; margin-left: 0; color: #C9DEE9; }

/* Live strip: what is open right now. The thing the competition has not got. */
.livestrip {
  background: var(--deep); color: #fff; padding: 1rem 0;
  position: sticky; top: 86px; z-index: 40;
}
@media (max-width: 900px) { .livestrip { top: 0; } }
.livestrip__in { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; font-size: var(--small); }
.livestrip b { color: var(--gold); }

/* Editorial hero: photo and text overlap. Used on Stay. */
.overlap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
@media (max-width: 860px) { .overlap { grid-template-columns: 1fr; } }
.overlap__img img { aspect-ratio: 4/3; object-fit: cover; }
.overlap__t {
  background: var(--surface); padding: clamp(1.8rem,4vw,3rem);
  margin-left: clamp(-5rem,-4vw,0rem); box-shadow: var(--shadow); position: relative; z-index: 2;
}
@media (max-width: 860px) { .overlap__t { margin-left: 0; margin-top: -3rem; margin-inline: 1rem; } }
.overlap__t .display { text-align: left; } .overlap__t .swash { margin-left: 0; }

/* -------------------------------------------------- masthead, three regions */
/* Brand left, nav centred, actions right. A flex row with space-between shoved
   the nav hard against the right edge, which read as unbalanced against the
   wide horizontal lockup on the left. A three column grid with the middle
   track centred fixes it at every width. */
.masthead__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.masthead__in .nav { justify-content: center; gap: .15rem; }
.mast-act { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.nav__a { font-weight: 700; }

@media (max-width: 1180px) {
  .masthead__in { grid-template-columns: auto 1fr; row-gap: .4rem; }
  .masthead__in .nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .mast-act { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  /* Primary links live in the floating dock at this width, so the masthead
     keeps only the brand and the two controls. */
  .masthead__in .nav { display: none; }
  .masthead__in { grid-template-columns: auto 1fr; }
}

/* The lockup is roughly 3.8:1, so sizing it by height alone lets it eat the
   whole row on a narrow window. Once it does, the actions column collapses to
   nothing and Advertise, search and the accessibility control stack vertically.
   Cap the logo by width as well, and stop the actions row wrapping. */
.brand__logo { height: auto; width: clamp(190px, 22vw, 320px); max-width: 100%; }
.mast-act { flex-wrap: nowrap; white-space: nowrap; }
.mast-act .nav__a--cta { padding: .6rem .9rem; }

@media (max-width: 1180px) {
  .masthead__in { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .brand__logo { width: clamp(170px, 26vw, 240px); }
}
@media (max-width: 620px) {
  .brand__logo { width: 150px; }
  .mast-act .nav__a--cta { padding: .5rem .6rem; font-size: 10px; }
  .masthead__in { min-height: 66px; gap: .5rem; }
}
@media (max-width: 420px) {
  /* Advertise lives in the topline and the dock at this size. */
  .mast-act .nav__a--cta { display: none; }
}

/* Clear space around the lockup. A brand mark with no breathing room reads as
   a banner rather than a masthead, and this one has a tall badge on its left
   that runs the full height of the artwork. */
.masthead__in { padding-block: clamp(.9rem, 1.8vw, 1.4rem); }
.brand { padding: .2rem 0; }
@media (max-width: 620px) { .masthead__in { padding-block: .7rem; } }

/* Centre the nav in the space left over between the lockup and the actions,
   not on the page. A three column grid centres on the page centre, and because
   the lockup is far wider than the actions that leaves a small gap on the left
   and a large one on the right. Flex with the nav taking the remaining track
   and centring inside it gives equal gutters on both sides. */
.masthead__in { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); }
.masthead__in .brand { flex: 0 0 auto; }
.masthead__in .nav { flex: 1 1 auto; justify-content: center; min-width: 0; }
.masthead__in .mast-act { flex: 0 0 auto; }

@media (max-width: 1180px) {
  .masthead__in { flex-wrap: wrap; row-gap: .5rem; }
  .masthead__in .nav { order: 3; flex-basis: 100%; }
  .masthead__in .mast-act { margin-left: auto; }
}
@media (max-width: 760px) { .masthead__in .nav { display: none; } }

/* ------------------------------------------------------------- mega menus */
.mega__grid { grid-template-columns: 1.25fr .85fr .95fr; align-items: start; }
@media (max-width: 1080px) { .mega__grid { grid-template-columns: 1.2fr 1fr; } .mega__feat { display: none; } }
.mega__h { display: flex; align-items: baseline; gap: .5rem; }
.mega__c {
  font-size: 10px; letter-spacing: .06em; background: var(--sand); color: var(--deep);
  padding: .1rem .38rem; border-radius: 2px; font-weight: 700;
}
.mega__list { columns: 2; column-gap: 1.6rem; }
.mega__list--one { columns: 1; }
.mega__list li { break-inside: avoid; margin-bottom: .1rem; }
.mega__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .7rem;
  padding: .32rem 0; font-weight: 600; color: var(--ink);
}
.mega__list a i {
  font-style: normal; font-size: 10px; color: var(--ink-faint); font-weight: 700;
  letter-spacing: .04em;
}
.mega__list a:hover { color: var(--teal-deep); }
.mega__sub { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .85rem; border-left: 2px solid var(--gold); }
.mega__sub a { font-weight: 500; color: var(--ink-soft); font-size: var(--micro); padding: .22rem 0; }

.mega__feat { border-left: 1px solid var(--line); padding-left: clamp(1.2rem,2vw,2rem); text-decoration: none; display: block; }
.mega__feat img { border-radius: var(--r); aspect-ratio: 16/10; object-fit: cover; }
.mega__fh { font-family: var(--f-display); font-size: 1.24rem; margin: .85rem 0 .3rem; color: var(--deep); }
.mega__feat p { font-size: var(--micro); color: var(--ink-soft); margin: 0; line-height: 1.65; }
.mega__go {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem;
  font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-deep);
}
.mega__feat:hover .mega__fh { color: var(--teal-deep); }
.dock-nav__cta { background: var(--gold); color: #4A2E06 !important; }

/* Equal breathing room above and below the hero block. The earlier values were
   top heavy, which left the tide line sitting close to the fold. */
.hero__in { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ---------------------------------------------------------- planning form */
.planform { max-width: 54rem; margin-inline: auto; }
.planform__g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.4rem; }
@media (max-width: 620px) { .planform__g { grid-template-columns: 1fr; } }
.planform label, .planform__wide {
  display: block; font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--deep); margin-bottom: 1rem;
}
.planform input, .planform textarea {
  display: block; width: 100%; margin-top: .4rem; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  font: var(--step-0)/1.5 var(--f-body); color: var(--ink); text-transform: none;
  letter-spacing: normal; font-weight: 400;
}
.planform input:focus, .planform textarea:focus { border-color: var(--teal-deep); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------ footer */
.foot__grid {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start;
}
@media (max-width: 1040px) { .foot__grid { grid-template-columns: 1fr 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 620px)  { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px)  { .foot__grid { grid-template-columns: 1fr; } }

/* The knockout lockup needs no plate. The white rectangle behind it was a
   workaround for only having the on-light artwork. */
.foot__logo { display: inline-block; }
.foot__logo img { height: 46px; width: auto; }
.foot__promise { max-width: 34ch; margin: 1rem 0 1.2rem; }
.foot__all { color: var(--gold) !important; font-weight: 700; font-size: var(--micro);
             letter-spacing: .08em; text-transform: uppercase; padding-top: .5rem; }

.foot__bar { border-top: 1px solid rgba(255,255,255,.13); margin-top: clamp(2rem,4vw,3rem); padding-top: 1.6rem; }
.foot__inline { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.foot__inline a { padding: 0; font-weight: 600; }
.foot__fine { font-size: var(--micro); color: #8FA9B8; line-height: 1.7; max-width: 92ch; margin: 0 0 .7rem; }

/* ------------------------------------------------------- lead capture band */
.inquire { background: var(--deep); color: #fff; }
.inquire__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; padding-block: clamp(1.1rem, 2.4vw, 1.7rem); flex-wrap: wrap;
}
.inquire__k {
  font-family: var(--f-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin: 0 0 .15rem; color: #fff; font-weight: 700;
}
.inquire__p { margin: 0; font-size: var(--small); color: #BBD3E0; }
.inquire__b { flex: 0 0 auto; }
@media (max-width: 620px) { .inquire__in { flex-direction: column; align-items: flex-start; } .inquire__b { width: 100%; justify-content: center; } }

/* ---------------------------------------------------------- topline links */
.topline__nav { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.topline__nav li + li::before {
  content: ""; display: inline-block; width: 1px; height: 11px;
  background: rgba(255,255,255,.28); margin: 0 .9rem; vertical-align: -1px;
}
.topline__nav a {
  color: #C3D6E2; text-decoration: none; font-weight: 700; font-size: var(--micro);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.topline__nav a:hover { color: var(--gold); }
@media (max-width: 700px) {
  .topline__in { justify-content: space-between; gap: .5rem; }
  .topline__nav li:nth-child(n+2) { display: none; }
}

/* Footer, revised.
   `.foot a` was beating `.btn--gold` on specificity and painting the call to
   action the same blue as the links, which made it read as an empty gold
   rectangle. The footer CTA is now its own class rather than a borrowed one. */
.foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.05fr; }
@media (max-width: 1100px) { .foot__grid { grid-template-columns: 1fr 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 700px)  { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 430px)  { .foot__grid { grid-template-columns: 1fr; } }

.foot__col h2 + ul { margin-bottom: 1.4rem; }
.foot__logo { padding: 0; }
.foot__logo img { height: 40px; }
.foot__promise { max-width: 32ch; margin: 1rem 0 1.3rem; }

.foot__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--gold); color: #43290A !important; text-decoration: none;
  font-size: var(--micro); letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  padding: .68rem 1rem; border-radius: 2px;
}
.foot__cta:hover { background: #FFC470; color: #43290A !important; }

.foot ul a em { display: block; font-style: normal; font-size: 10px; color: #7C97A8; letter-spacing: .04em; }
.foot ul a:hover em { color: #9DB6C4; }
.planform select {
  display: block; width: 100%; margin-top: .4rem; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  font: var(--step-0)/1.5 var(--f-body); color: var(--ink); text-transform: none;
  letter-spacing: normal; font-weight: 400;
}
/* The operating company, in the copyright line. Underlined so it reads as a
   link at the small size the fine print uses. */
.foot__owner { color: #C3D6E2 !important; text-decoration: underline; text-underline-offset: 2px; }
.foot__owner:hover { color: var(--gold) !important; }
.foot__owner { display: inline; }

/* The signature row sits on white rather than sand. Directly under a cool blue
   photograph the warm tint read as yellow, and the teal marks lose contrast
   against it. White separates the photograph from the editorial cleanly and
   lets the icons carry the colour. */
.signature-band { background: var(--surface); border-bottom: 1px solid var(--line); }
:root[data-theme="dark"] .signature-band { background: var(--surface); }
.nearby__h {
  font-family: var(--f-display); font-size: 1.35rem; margin: 2rem 0 .2rem;
  color: var(--deep); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
}
.nearby__h span {
  font-family: var(--f-body); font-size: var(--micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}

/* ------------------------------------------------------------------- legal */
.legal { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem,4vw,4rem); align-items: start; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; } .legal__toc { position: static; } }
.legal__toc { position: sticky; top: 110px; }
.legal__toc h2 { font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .8rem; }
.legal__toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.legal__toc a { display: block; padding: .4rem 0 .4rem .9rem; font-size: var(--small); color: var(--ink-soft); text-decoration: none; }
.legal__toc a:hover { color: var(--teal-deep); }
.legal__body { max-width: 68ch; }
.legal__body p { margin: 0 0 1.2rem; }
.legal__h { font-family: var(--f-display); font-size: clamp(1.35rem,2.6vw,1.75rem); margin: 2.2rem 0 .8rem; color: var(--deep); scroll-margin-top: 120px; }
.legal__flag { border-left: 3px solid var(--gold); background: var(--sand); padding: 1rem 1.2rem; font-size: var(--small); }
.legal__ok { font-size: var(--small); color: var(--ink-faint); }
.legal__meta { font-size: var(--micro); color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.4rem; }

/* Fine print fills the footer width. A single 92ch measure left half the row
   empty; two columns use the space and keep the line length readable. */
.foot__fine { max-width: none; }
.foot__legal { columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.foot__legal p { break-inside: avoid; margin: 0 0 .9rem; }
@media (max-width: 760px) { .foot__legal { columns: 1; } }

/* ------------------------------------------------- nav hover, brand swoosh */
/* The sand block was a generic hover chip. The sheet underlines everything
   with a gold brush stroke, so the nav does the same: the swash grows from the
   centre on hover and stays put on the current page. */
.nav__a { position: relative; background: none !important; }
.nav__a::after {
  content: ""; position: absolute; left: 50%; bottom: .18rem;
  width: calc(100% - 1.2rem); height: 6px; transform: translateX(-50%) scaleX(0);
  transform-origin: center; transition: transform .28s cubic-bezier(.34,1.3,.64,1);
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 10'%3E%3Cpath fill='%23FFB347' d='M2 6.2C22 2.4 44 1.2 66 1.6c22 .4 44 2.2 64 5.2-20-1.2-42-1.6-64-1.4-22 .2-44 1.2-64 3.2C.6 8.8 0 7.8 0 7c0-.4.8-.7 2-.8z'/%3E%3C/svg%3E");
}
.nav__a:hover::after,
.nav__a:focus-visible::after,
.nav__a[aria-expanded="true"]::after,
.nav__a[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.nav__a--cta::after { display: none; }
.nav__a--cta { background: var(--gold) !important; }
.nav__a--cta:hover { background: #FFC470 !important; }
@media (prefers-reduced-motion: reduce) { .nav__a::after { transition: none; } }

/* --------------------------------------------------- signature marks, hover */
.signature a { position: relative; padding-bottom: 1.4rem; }
.signature .bmark { margin: 0 auto .7rem; transition: transform .3s cubic-bezier(.34,1.3,.64,1); }
.signature a:hover .bmark { transform: translateY(-4px) scale(1.05); }
.signature a .swash {
  position: absolute; left: 50%; bottom: .1rem; transform: translateX(-50%) scaleX(0);
  transform-origin: center; transition: transform .3s cubic-bezier(.34,1.3,.64,1);
  width: 62px; margin: 0;
}
.signature a:hover .swash, .signature a:focus-visible .swash { transform: translateX(-50%) scaleX(1); }
.signature span { display: block; color: var(--deep); }
@media (prefers-reduced-motion: reduce) {
  .signature .bmark, .signature a .swash { transition: none; }
  .signature a:hover .bmark { transform: none; }
}

/* ---------------------------------------------------------- the torn edge */
.torn {
  position: absolute; left: 0; right: 0; bottom: -1px; width: 100%;
  height: clamp(38px, 4.6vw, 76px); display: block; pointer-events: none;
  /* Behind anything that overlaps the band, so the promise frames sit on top
     of the tear rather than being clipped by it. */
  z-index: 1;
}
.torn--flip { top: -1px; bottom: auto; transform: scaleY(-1); }

/* --------------------------------------------------- the promise strip */
/* Photographic quick links, tilted, with script captions. Not a card grid:
   the frames overlap the band above and each sits at its own angle, which is
   how the strip reads on the brand sheet. */
.promise { background: var(--deep); padding: 0 0 clamp(2.2rem, 4vw, 3.4rem); position: relative; }
.promise__row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(.5rem, 1.2vw, 1rem);
  width: min(100% - var(--gut) * 2, 1400px); margin-inline: auto;
  position: relative; z-index: 2;
  padding-top: clamp(1.4rem, 3vw, 2.4rem);
}
@media (max-width: 1000px) {
  .promise__row { grid-template-columns: repeat(3, 1fr); }
  .promise__c:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 900px) {
  /* One frame at a time. Showing 1.3 of a card is a desktop pattern that hints
     at more; on a phone it just looks like a broken crop. */
  .promise__row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: 0; padding-inline: var(--gut); gap: var(--gut);
    scroll-padding-inline: var(--gut); -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .promise__row::-webkit-scrollbar { display: none; }
  .promise__c { flex: 0 0 calc(100vw - var(--gut) * 2); scroll-snap-align: center; transform: none; }
  .promise__img img { aspect-ratio: 4 / 3; }
}

.promise__c {
  position: relative; display: block; text-decoration: none; color: #fff;
  transform: rotate(calc((var(--i) - 2) * 0.9deg));
  transition: transform .35s cubic-bezier(.34,1.2,.64,1);
}
.promise__c:hover, .promise__c:focus-visible { transform: rotate(0deg) translateY(-6px); }
.promise__img {
  display: block; overflow: hidden; border: 5px solid #fff; border-radius: 2px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.55);
}
.promise__img img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.promise__t {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(7,43,65,.88));
  text-align: center; border-radius: 0 0 2px 2px;
}
.promise__t .script {
  display: block; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  line-height: 1.05; text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.promise__t .swash { width: 54px; margin: .3rem auto .35rem; }
.promise__t em {
  display: block; font-style: normal; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #C6DCE8; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .promise__c { transform: none; transition: none; }
  .promise__c:hover { transform: translateY(-4px); }
}

/* The hero now tears into the strip below it. */
.hero { padding-bottom: 0; }

/* Marks are raster artwork from the brand sheet, so they get a fixed optical
   box and are centred inside it. The six crops have different aspect ratios;
   without a shared box the labels below them would not line up. */
.signature__m { display: grid; place-items: center; height: 54px; margin-bottom: .5rem; }
/* Do NOT set width/height to auto here. The width and height attributes on
   the tag are what put the mark at half its native pixels, which is what makes
   it 2x and sharp. Overriding them to auto renders at 1x and it goes soft. */
.signature .bmark { transition: transform .3s cubic-bezier(.34,1.3,.64,1); }
.signature a:hover .bmark { transform: translateY(-4px) scale(1.04); }

/* =========================================================================
   Above the fold
   Header, hero and the promise strip are sized against the viewport so they
   land in one screen on a laptop. Everything here is a ceiling rather than a
   fixed height, so a short window compresses and a tall one gets air.
   ========================================================================= */
@media (min-width: 901px) {
  /* Condense the masthead: smaller lockup, tighter padding. */
  .masthead__in { min-height: 0; padding-block: .6rem; }
  .brand__logo  { width: clamp(158px, 15vw, 216px); }
  .nav__a       { padding: .5rem .7rem; font-size: var(--micro); letter-spacing: .06em; }
  .mast-act .nav__a--cta { padding: .55rem .85rem; }
  .topline__in  { min-height: 30px; }

  /* Hero takes what is left after the header, minus room for the strip. */
  .hero__in {
    padding-block: clamp(1.1rem, 2.6vh, 2.2rem);
    min-height: clamp(210px, 36dvh, 360px);
    display: grid; align-content: center;
  }
  h1.display { font-size: var(--fit-size, clamp(2.2rem, 5.4vw, 4.4rem)); }
  .hero .script { font-size: clamp(1.15rem, 2.1vw, 1.85rem); margin-top: .5rem; }
  .hero .dek { font-size: var(--step-0); margin-top: .9rem; max-width: 56ch; }
  .hero__meta { margin-top: 1rem; }

  /* Frames shorten so the row clears the fold. */
  .promise { padding-bottom: clamp(1.2rem, 2.4vh, 2rem); }
  .promise__row { padding-top: clamp(.9rem, 2vh, 1.8rem); }
  .promise__img img { aspect-ratio: 4 / 5; }
  .promise__img { border-width: 4px; }
  .promise__t { padding: 1.8rem .7rem .7rem; }
  .promise__t .script { font-size: clamp(1rem, 1.5vw, 1.4rem); }
  .promise__t .swash { width: 42px; margin: .2rem auto .25rem; }
  .promise__t em { font-size: 9px; }
}

/* Short laptops: give up the sub-caption before giving up the photograph. */
@media (min-width: 901px) and (max-height: 780px) {
  .hero .dek { display: none; }
  .promise__t em { display: none; }
  .hero__in { min-height: clamp(200px, 34dvh, 320px); }
}
/* The global img rule sets height:auto, which together with the max-width
   makes the browser ignore the height attribute. The marks are raster art at a
   fixed density, so they opt out of it. */

/* The signature row now closes every page, immediately above the footer. */
.signature-band {
  background: var(--surface); border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
/* Keep hero content clear of the tear. The torn edge is up to 44px tall and
   was slicing through the tide line at the bottom of the hero. */
.hero__in { padding-bottom: clamp(3rem, 5vh, 4.4rem); }
@media (min-width: 901px) {
  .hero__in { padding-bottom: clamp(3.2rem, 5.5vh, 4.6rem); }
}
/* Short windows: the strip loses height before the hero does, because a
   cropped photograph still reads and a cropped headline does not. */
/* Short windows trim the hero rather than the frames: a shorter headline
   still reads, a squashed photograph does not. */
@media (min-width: 901px) and (max-height: 860px) {
  .promise__img img { aspect-ratio: 1 / 1; }
  .hero__in { min-height: clamp(190px, 30dvh, 300px); padding-block: clamp(1rem, 2vh, 1.6rem); }
  .hero__in { padding-bottom: clamp(2.8rem, 4.5vh, 3.8rem); }
}
@media (min-width: 901px) and (max-height: 740px) {
  .hero .dek { display: none; }
  .promise__t em { display: none; }
  .promise__img img { aspect-ratio: 5 / 4; }
}

/* ------------------------------------------------- photographic page header */
.phero { position: relative; background: var(--deep-ink); overflow: hidden; }
.phero__img { position: absolute; inset: 0; }
.phero__img img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.phero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,43,65,.72) 0%, rgba(7,43,65,.42) 45%, rgba(7,43,65,.86) 100%);
}
.phero__in {
  position: relative; z-index: 2; color: #fff; text-align: center;
  padding-block: clamp(2.4rem, 6vh, 4.2rem) clamp(3.4rem, 6vh, 5rem);
}
.phero h1.display { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.38); font-size: var(--fit-size, clamp(2rem, 5vw, 3.6rem)); }
.phero .dek { color: #DCE9F0; }
.phero .eyebrow { color: var(--gold); }
.phero__crumbs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem;
  font-size: var(--small); color: #B9D2E0; margin-bottom: 1rem;
}
.phero__crumbs a { color: #B9D2E0; text-decoration: none; }
.phero__crumbs a:hover { color: var(--gold); }
/* Caption only, so the frames read as pictures rather than as cards. */
.promise__t { padding: 2rem .8rem .8rem; }
.promise__t .swash { margin-bottom: .1rem; }

/* =========================================================================
   The fold
   Hero and quick links are one block the height of the viewport minus the
   header, with the frames pinned to its bottom edge. The hero takes whatever
   is left over, so the photographs land exactly at the fold rather than
   floating with dead space under them.
   --hdr is measured and written by site.js, because the header height moves
   with the accessibility text scale.
   ========================================================================= */
@media (min-width: 901px) {
  .fold {
    min-height: calc(100dvh - var(--hdr, 114px));
    display: flex; flex-direction: column;
  }
  .fold .hero { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  .fold .hero__in { flex: 1 1 auto; }
  .fold .promise { flex: 0 0 auto; padding-bottom: clamp(.6rem, 1.4vh, 1.2rem); }
  .fold .promise__row { padding-top: 0; margin-top: clamp(-1rem, -1.6vh, -.4rem); }
}

/* The photograph runs the full height of the fold. The quick links then sit on
   a tinted continuation of the same image instead of a solid navy slab, so the
   wave reads as a change in the water rather than the edge of a block. */
.fold { position: relative; background: var(--deep-ink); overflow: hidden; }
.fold__img { position: absolute; inset: 0; z-index: 0; }
.fold__img img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.fold__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(7,43,65,.62) 0%, rgba(7,43,65,.30) 34%, rgba(7,43,65,.52) 62%, rgba(7,43,65,.70) 100%);
}
.fold .hero { background: none; position: relative; z-index: 2; }
.fold .hero__img, .fold .hero__veil { display: none; }
.fold .promise { position: relative; z-index: 2; background: rgba(11,61,91,.72); }
.fold .promise .torn { display: none; }
/* The wave belongs to the hero, tearing into the tinted band below it. */
/* The fold is the deliberate exception: its wave breaks into a translucent
   tint over the same photograph, which is not a colour JS can read off an
   element. Marked so paintWaves() leaves it alone. */
.fold .hero .torn { --keep-fill: 1; }
.fold .hero .torn path { fill: rgba(11,61,91,.72) !important; }
/* Plain ticked list. No icon font, no card. */
.tick { list-style: none; margin: 0; padding: 0; }
.tick li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  font-size: var(--small); color: var(--ink-soft); line-height: 1.65;
}
.tick li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 5px;
  border-left: 2px solid var(--marsh); border-bottom: 2px solid var(--marsh);
  transform: rotate(-45deg);
}
.tick--no li::before {
  border: 0; width: 10px; height: 2px; background: var(--gold-deep);
  transform: none; top: .72em;
}

/* Frames pulled in. They were competing with the headline for the fold. */
@media (min-width: 901px) {
  .promise__row { width: min(100% - var(--gut) * 2, 1120px); gap: clamp(.6rem, 1.4vw, 1.1rem); }
  .promise__img { border-width: 4px; }
  .promise__t .script { font-size: clamp(.95rem, 1.35vw, 1.25rem); }
  .promise__t { padding: 1.6rem .6rem .6rem; }
  .promise__t .swash { width: 36px; }
}

/* Hover: the hovered frame straightens and lifts, its photograph eases in, and
   its neighbours lean away to make room. Driven by --lean, which site.js sets
   per card from its distance to the one under the pointer. */
.promise__c {
  transform: rotate(calc((var(--i) - 2) * 0.9deg + var(--lean, 0deg)))
             translateX(var(--shift, 0px)) translateY(var(--lift, 0px));
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.promise__img img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.promise__c:hover .promise__img img,
.promise__c:focus-visible .promise__img img { transform: scale(1.07); }
.promise__c:hover, .promise__c:focus-visible {
  --lean: 0deg; --lift: -10px; z-index: 3;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.6);
}
.promise__c:hover .promise__t, .promise__c:focus-visible .promise__t {
  background: linear-gradient(transparent, rgba(7,43,65,.94));
}
@media (prefers-reduced-motion: reduce) {
  .promise__c, .promise__img img { transition: none; }
  .promise__c { transform: none; }
  .promise__c:hover .promise__img img { transform: none; }
}

/* ------------------------------------------------------- event filters */
.evfilter { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.evfilter__in { display: flex; gap: .3rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: thin; }
.evfilter a {
  flex: 0 0 auto; text-decoration: none; font-size: var(--micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  padding: .5rem .8rem; border-radius: 2px; white-space: nowrap;
}
.evfilter a:hover { background: var(--sand); color: var(--deep); }
.evfilter a[aria-current="page"] { background: var(--deep); color: #fff; }
.evfilter a i { font-style: normal; opacity: .6; margin-left: .2rem; }
a.chip { text-decoration: none; }
a.chip:hover { background: var(--gold); color: #43290A; }

/* The wave is sized for the homepage fold, where it separates a photograph
   from a deep navy band and can afford some height. On an interior header
   breaking into cream the same crests read as a white flood across the
   photograph, so it is shorter and shallower there. */
.phero .torn { height: clamp(18px, 2.2vw, 34px); }
.phero .torn path:not(:last-child) { display: none; }   /* body ribbon only */

/* --------------------------------------------------------- repeat control */
.repeat { border: 1px solid var(--line); border-radius: 2px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.repeat legend {
  font-size: var(--micro); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--deep); padding: 0 .4rem;
}
.repeat__on { display: flex !important; align-items: center; gap: .55rem; text-transform: none !important;
  letter-spacing: normal !important; font-weight: 600 !important; font-size: var(--small) !important; }
.repeat__on input { width: auto !important; margin: 0 !important; }
.repeat__days { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.repeat__days label {
  display: inline-flex !important; align-items: center; gap: .35rem; margin: 0 !important;
  border: 1px solid var(--line); border-radius: 2px; padding: .35rem .6rem;
  text-transform: none !important; letter-spacing: normal !important; font-size: var(--micro) !important;
}
.repeat__days input { width: auto !important; margin: 0 !important; }
.repeat__days label:has(input:checked) { background: var(--deep); color: #fff; border-color: var(--deep); }

/* ------------------------------------------------- submission rules panel */
.rules {
  margin-top: 2rem; padding: 1.4rem 1.6rem; background: var(--sand);
  border-left: 3px solid var(--gold); border-radius: 2px;
}
.rules h2 {
  font-family: var(--f-display); font-size: 1.25rem; margin: 0 0 .7rem; color: var(--deep);
}
.rules p { font-size: var(--small); color: var(--ink-soft); margin: 0 0 .8rem; line-height: 1.7; }
.rules ul { margin-bottom: 1rem; }
.rules__no { font-weight: 700; color: var(--deep); margin-top: .2rem; }

/* --------------------------------------------------------- Facebook group */
.foot__fb {
  display: inline-flex; align-items: center; gap: .6rem; margin: .3rem 0 .2rem;
  padding: .6rem .85rem; border: 1px solid rgba(255,255,255,.2); border-radius: 3px;
  text-decoration: none; color: #D7E6EF !important;
}
.foot__fb:hover { background: rgba(255,255,255,.08); border-color: var(--gold); color: #fff !important; }
.foot__fb b { display: block; font-size: var(--micro); letter-spacing: .08em; text-transform: uppercase; }
.foot__fb em { display: block; font-style: normal; font-size: 10px; color: #8FA9B8; letter-spacing: .04em; }
.foot__fb svg { flex: none; }

.grouplink {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem;
  background: var(--deep); color: #fff; border-radius: 3px; text-decoration: none;
  max-width: 44rem; margin: 1.6rem auto 0;
}
.grouplink:hover { background: var(--deep-wash); }
.grouplink svg { flex: none; color: var(--gold); }
.grouplink b { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.grouplink span { display: block; font-size: var(--small); color: #C1D7E3; }

/* =========================================================================
   No orphans
   A single word stranded on the last line of a paragraph is a design fault,
   the same as a badly wrapped heading. text-wrap: pretty tells the browser to
   look ahead and rebalance the last few lines rather than break greedily, so
   "Claim it." stops leaving "it." on a line of its own.

   Applied to every run of prose on the site rather than case by case, because
   the case by case version is the one that gets missed.
   ========================================================================= */
p, li, dd, figcaption, blockquote, label, summary, caption,
.dek, .rank__p, .dock__p, .foot__fine, .gauge__note, .mega__feat p,
.legal__body p, .rules p, .prose p, .inquire__p, td, th {
  text-wrap: pretty;
}

/* Short display strings get balanced instead: even line lengths matter more
   than orphan avoidance when there are only a few words. */
.display, .script, .rank__h, .dock__h, .gauge__name, .nearby__h, .mega__fh,
.promise__t .script, .eyebrow, .legal__h {
  text-wrap: balance;
}

/* A two word link at the end of a sentence is the classic orphan. Keeping the
   words together means the whole link wraps or none of it does. */
.nowrap { white-space: nowrap; }

/* A band that follows a wave does not need a rule across its top: the wave is
   already the join, and the border draws a hairline straight through it. */
.phero + .band, .hero + .band, .promise + .band,
.phero + .signature-band, .phero + .evfilter,
.phero + section > .torn ~ * { border-top: 0; }
.band--sand { border-top: 0; }
.band--sand + .band, .band + .band--sand { border-top: 1px solid var(--line); }

/* ------------------------------------------------------- mobile menu */
.burger { display: none; }
@media (max-width: 900px) {
  .burger {
    display: grid; place-items: center; background: none; border: 0; cursor: pointer;
    color: var(--deep); padding: .5rem; border-radius: 2px;
  }
  .burger:hover { background: var(--sand); }
  .burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s; }
  .burger span + span { margin-top: 5px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.mobnav {
  position: fixed; inset: 0; z-index: 120; background: var(--deep);
  display: none; overflow-y: auto; padding: 1.2rem var(--gut) 5rem;
  -webkit-overflow-scrolling: touch;
}
.mobnav[data-open="true"] { display: block; }
body.is-locked { overflow: hidden; }
.mobnav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }
.mobnav__top img { height: 44px; width: auto; }
.mobnav__x { background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: .3rem .6rem; }
.mobnav h2 {
  font-size: var(--micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 1.6rem 0 .5rem; font-weight: 700;
}
.mobnav a {
  display: block; color: #EAF2F6; text-decoration: none; padding: .72rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 600;
}
.mobnav a:active { color: var(--gold); }
.mobnav__silo { font-family: var(--f-display); font-size: 1.5rem !important; font-weight: 700 !important; }
.mobnav__sub { padding-left: .9rem; border-left: 2px solid var(--gold); margin: .2rem 0 .6rem; }
.mobnav__sub a { font-size: var(--small); font-weight: 500; color: #B9D2E0; padding: .5rem 0; border: 0; }
.mobnav__cta {
  display: block; background: var(--gold); color: #43290A !important; text-align: center;
  border-radius: 3px; padding: .9rem !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase; font-size: var(--micro); border: 0 !important; margin-top: 1.4rem;
}
.mobnav__fb { display: flex; align-items: center; gap: .6rem; border: 0 !important; margin-top: 1rem; color: #B9D2E0 !important; }

/* ------------------------------------------------------------- tide rail */
.withrail { display: grid; grid-template-columns: 1fr 20rem; gap: clamp(1.6rem, 3vw, 3rem); align-items: start; }
@media (max-width: 940px) { .withrail { grid-template-columns: 1fr; } }
.tiderail {
  background: var(--deep); color: #fff; border-radius: 3px; padding: 1.4rem 1.5rem;
  position: sticky; top: 100px;
}
@media (max-width: 940px) { .tiderail { position: static; } }
.tiderail h2 {
  font-size: var(--micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .7rem; font-weight: 700;
}
.tiderail__state { font-family: var(--f-display); font-size: 1.4rem; margin: 0 0 .1rem; text-transform: capitalize; }
.tiderail__next { font-size: var(--small); color: #CFE2EC; margin: 0 0 1rem; }
.tiderail__next strong, .tiderail__state strong { color: var(--gold); }
.tiderail__p { font-size: var(--small); color: #BBD3E0; margin: 0 0 .9rem; line-height: 1.65; }
.tiderail__p strong { color: #fff; }
.tiderail .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.tiderail .btn:hover { background: rgba(255,255,255,.12); border-color: var(--gold); }
.tiderail__src { font-size: var(--micro); color: #7E9CAF; margin: .9rem 0 0; line-height: 1.5; }

/* ------------------------------------------- mobile menu, collapsed sections */
.mobsearch {
  display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22); border-radius: 3px; padding: .1rem .7rem;
  margin-bottom: 1.4rem; color: #9FBCCD;
}
.mobsearch:focus-within { border-color: var(--gold); background: rgba(255,255,255,.16); }
.mobsearch input {
  flex: 1; background: none; border: 0; color: #fff; font: inherit; font-size: var(--small);
  padding: .8rem 0; min-width: 0;
}
.mobsearch input::placeholder { color: #8AA9BC; }
.mobsearch input:focus { outline: none; }
.mobsearch button { background: none; border: 0; color: var(--gold); cursor: pointer; padding: .5rem; }

.mobsec { border-bottom: 1px solid rgba(255,255,255,.14); }
.mobsec summary {
  list-style: none; cursor: pointer; position: relative; padding: .95rem 2.2rem .95rem 0;
  font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; color: #fff;
}
.mobsec summary::-webkit-details-marker { display: none; }
/* A plus that becomes a minus. Cheaper to read than a chevron at this size. */
.mobsec summary::before,
.mobsec summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; background: var(--gold);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.mobsec summary::before { width: 15px; height: 2px; transform: translateY(-50%); }
.mobsec summary::after  { width: 2px; height: 15px; transform: translate(6.5px, -50%); right: .35rem; }
.mobsec[open] summary::after { transform: translate(6.5px, -50%) rotate(90deg); opacity: 0; }
.mobsec__in { padding: 0 0 .9rem .9rem; border-left: 2px solid var(--gold); margin-bottom: .6rem; }
.mobsec__in a {
  display: block; padding: .58rem 0; border: 0; color: #C7DBE7; font-weight: 500;
  font-size: var(--small);
}
.mobsec__in a:active { color: var(--gold); }
.mobsec__all { color: var(--gold) !important; font-weight: 700 !important;
  font-size: var(--micro) !important; letter-spacing: .08em; text-transform: uppercase; }
.mobsec__kid { padding-left: .9rem !important; font-size: var(--micro) !important; color: #9FBCCD !important; }
.mobsec__kid::before { content: "\\203A\\00a0"; }

/* ------------------------------------------------------------- site search */
.sitesearch {
  display: flex; align-items: center; gap: .6rem; max-width: 42rem; margin: 1.6rem auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: .1rem .3rem .1rem .9rem; color: var(--ink-faint);
}
.sitesearch:focus-within { border-color: var(--teal-deep); }
.sitesearch input {
  flex: 1; border: 0; background: none; font: inherit; padding: .85rem 0; color: var(--ink); min-width: 0;
}
.sitesearch input:focus { outline: none; }
.sitesearch button {
  background: var(--gold); color: #43290A; border: 0; border-radius: 2px; cursor: pointer;
  font: inherit; font-size: var(--micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .7rem 1rem; margin: .25rem;
}
.sitesearch button:hover { background: #FFC470; }