@charset "UTF-8";
/* =========================================================================
   Explore Pawleys Island
   Design system and page styles

   Palette values were sampled directly off the supplied brand sheet swatches
   and reconciled against the printed hex labels. Where a printed label was
   legible and plausible it wins; where the label was garbled in the export the
   sampled pixel value wins. Both are recorded on each token so the decision is
   auditable later.

   Type: Playfair Display for display, Montserrat for everything else.

   Heading rule enforced throughout: display headings are centred, fill 100% of
   their container, and never run past two lines. CSS clamp() gets within a few
   percent on its own, and the data-fit script in site.js closes the gap by
   writing --fit-size. Mid-word breaks and hyphenation are switched off outright
   rather than relied on to behave.
   ========================================================================= */

/* -------------------------------------------------------------- tokens */
:root {
  /* brand, sampled + label reconciled */
  --deep:      #0A3A5B;   /* label #0A3A5B, sample #012E46 */
  --deep-ink:  #07293D;   /* derived, dark grounds */
  --deep-wash: #0F4869;   /* derived, gradient partner */
  --tidal:     #1E6F8A;   /* label #1E6F8A, sample #22667B */
  --glass:     #6FB3C5;   /* label #6FB3C5, sample #6CADBD */
  --marsh:     #7A8548;   /* label garbled, sample #798548 */
  --salt:      #B8BF88;   /* label garbled, sample #B8BF88 */
  --sand:      #CFAC6F;   /* label garbled, sample #CFAC6F */
  --sand-deep: #B58F4E;   /* derived, sand text on light */
  --oyster:    #F8F5F2;   /* label #F8F5F2, sample #F5F3EE */
  --cream:     #FDFCF9;   /* derived, lightest ground */
  --charcoal:  #2E3A42;   /* label #2E3A42, sample #343D41 */

  /* semantic */
  --bg:        var(--cream);
  --surface:   #FFFFFF;
  --ink:       var(--charcoal);
  --ink-soft:  #5A6670;
  --ink-faint: #8794A0;
  --line:      #E3DED6;
  --line-soft: #EFEAE3;
  --accent:    var(--tidal);
  --focus:     #0A3A5B;

  /* type scale, fluid */
  --f-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --a11y-scale: 1;
  --step-0: calc(clamp(1rem, 0.96rem + 0.18vw, 1.09rem) * var(--a11y-scale));
  --step-1: calc(clamp(1.13rem, 1.05rem + 0.34vw, 1.32rem) * var(--a11y-scale));
  --step-2: calc(clamp(1.32rem, 1.18rem + 0.6vw, 1.66rem) * var(--a11y-scale));
  --small:  calc(clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem) * var(--a11y-scale));
  --micro:  calc(clamp(0.68rem, 0.66rem + 0.08vw, 0.74rem) * var(--a11y-scale));

  /* rhythm */
  --shell: 1280px;
  --gut: clamp(1.15rem, 3.4vw, 2.75rem);
  --sec-y: clamp(4rem, 8.5vw, 8.5rem);
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 22px;
  --r-xl: 34px;

  --sh-1: 0 1px 2px rgba(10, 58, 91, .05), 0 4px 14px rgba(10, 58, 91, .06);
  --sh-2: 0 2px 6px rgba(10, 58, 91, .07), 0 18px 44px rgba(10, 58, 91, .11);
  --sh-3: 0 4px 12px rgba(7, 41, 61, .12), 0 34px 80px rgba(7, 41, 61, .2);

  --ease: cubic-bezier(.22, .8, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --hdr-h: 128px;
}

/* ------------------------------------------------------------ dark mode */
:root[data-theme="dark"] {
  --bg:        #06212F;
  --surface:   #0B2C3E;
  --ink:       #E8EEF2;
  --ink-soft:  #A9BCC8;
  --ink-faint: #7C93A2;
  --line:      #17405A;
  --line-soft: #123449;
  --oyster:    #0A2938;
  --cream:     #06212F;
  --deep:      #7FC3D8;
  --accent:    var(--glass);
  --focus:     #9FD7E6;
  --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.28);
  --sh-2: 0 2px 8px rgba(0,0,0,.36), 0 18px 44px rgba(0,0,0,.4);
  --sh-3: 0 4px 14px rgba(0,0,0,.44), 0 34px 80px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 1rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-0)/1.68 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -.015em; }
p, ul, ol, dl, table, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--sand); color: var(--deep-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: 200; padding: .85rem 1.6rem; background: var(--deep); color: #fff;
  border-radius: 0 0 var(--r) var(--r); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------- layout */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5.5vw, 5rem); }
.section--cream  { background: var(--cream); }
.section--oyster { background: var(--oyster); }
.section--deep {
  background:
    radial-gradient(1200px 620px at 12% -10%, rgba(30,111,138,.42), transparent 62%),
    radial-gradient(900px 520px at 92% 6%, rgba(122,133,72,.24), transparent 60%),
    linear-gradient(168deg, var(--deep) 0%, var(--deep-ink) 62%, #05202F 100%);
  color: #EAF2F6;
}
.section--marsh {
  background:
    radial-gradient(900px 480px at 84% 0%, rgba(184,191,136,.28), transparent 60%),
    linear-gradient(158deg, #5F6A38 0%, #46512A 58%, #33401F 100%);
  color: #F3F5E9;
}
.section--deep a:not(.btn):not(.chip), .section--marsh a:not(.btn):not(.chip) { color: var(--sand); }
.section--deep .dek, .section--marsh .dek { color: rgba(234,242,246,.82); }

/* ------------------------------------------------- headings, the fit rule */
/*
  Every display heading sits centred and stretches to the full container. The
  clamp is the floor; --fit-size is written by the script once it has measured
  the real box. text-wrap: balance splits a two line heading evenly instead of
  leaving one orphan word, and hyphens plus word-break are pinned off so a word
  can never be sliced in half.
*/
.fit,
.d1, .d2, .d3, .hero__h1 {
  font-family: var(--f-display);
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
  letter-spacing: -.02em;
  line-height: 1.06;
  max-width: 100%;
}
.hero__h1 { font-size: var(--fit-size, clamp(2.4rem, 8.2vw, 6.6rem)); font-weight: 700; }
.d1       { font-size: var(--fit-size, clamp(2.2rem, 7.2vw, 5.4rem)); }
.d2       { font-size: var(--fit-size, clamp(1.95rem, 5.6vw, 4.2rem)); }
.d3       { font-size: var(--fit-size, clamp(1.7rem, 4.2vw, 3rem)); }

/* the fitter reports how many lines it landed on, purely for debugging */
.fit[data-fit-lines="3"] { outline: 0; }

.kicker {
  margin: 0 0 .95rem;
  font: 600 var(--micro)/1.4 var(--f-body);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tidal);
  text-align: center;
}
.kicker--sand { color: var(--sand); }
.section--deep .kicker, .section--marsh .kicker { color: var(--sand); }

.dek {
  margin: 1.15rem auto 0;
  max-width: 62ch;
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}

.sechead { margin-bottom: clamp(2.25rem, 4.6vw, 4rem); }
.sechead__rule {
  display: block;
  width: clamp(120px, 22vw, 260px);
  height: 2px;
  margin: 1.9rem auto 0;
  background: linear-gradient(90deg, transparent, var(--sand) 22%, var(--tidal) 78%, transparent);
  opacity: .8;
}
.sechead--light .sechead__rule { background: linear-gradient(90deg, transparent, var(--sand), transparent); opacity: .9; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 var(--small)/1 var(--f-body);
  letter-spacing: .04em; color: var(--tidal);
}
.link-arrow .ico { transition: transform .3s var(--ease); }
.ico { flex: none; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  border: 0; border-radius: 100px;
  font: 600 var(--small)/1 var(--f-body);
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.3), transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
/* Colours declared on .btn itself so a section level link rule can never
   repaint button text into its own background. */
.btn.btn--sand  { background: var(--sand); color: var(--deep-ink); }
.btn.btn--deep  { background: var(--deep); color: #fff; }
.btn.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.section--deep .btn.btn--ghost, .section--marsh .btn.btn--ghost {
  color: #EAF2F6; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.btn.btn--sand:hover, .btn.btn--sand:focus-visible  { color: var(--deep-ink); }
.btn.btn--deep:hover, .btn.btn--deep:focus-visible  { color: #fff; }
.btn--sm { padding: .68rem 1.15rem; }
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.iconbtn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent; border: 1.5px solid transparent; border-radius: 50%;
  color: inherit; cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.iconbtn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); transform: translateY(-1px); }

/* ================================================================ HEADER */
.hdr {
  position: sticky; top: 0; z-index: 90;
  color: #EAF2F6;
  background:
    radial-gradient(760px 240px at 8% 0%, rgba(30,111,138,.5), transparent 62%),
    linear-gradient(178deg, var(--deep) 0%, var(--deep-ink) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
  transition: box-shadow .3s var(--ease);
}
.hdr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--marsh), var(--tidal) 32%, var(--glass) 56%, var(--sand));
  opacity: .9;
}
[data-header].is-stuck { box-shadow: 0 10px 34px rgba(7,41,61,.34); }

.hdr__rail { border-bottom: 1px solid rgba(255,255,255,.09); }
.hdr__rail-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.hdr__tag {
  font: 500 var(--micro)/1 var(--f-body);
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(234,242,246,.66);
}
.hdr__rail-right { display: flex; align-items: center; gap: .7rem; }

.tidechip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem; border-radius: 100px;
  background: rgba(255,255,255,.09);
  color: #EAF2F6 !important; text-decoration: none;
  font-size: var(--micro); letter-spacing: .04em;
  transition: background-color .22s var(--ease);
}
.tidechip:hover { background: rgba(255,255,255,.18); }
.tidechip__k { color: rgba(234,242,246,.6); text-transform: uppercase; letter-spacing: .18em; }
.tidechip strong { color: var(--sand); }
.tidechip__t { color: rgba(234,242,246,.7); }

.hdr__bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(.75rem, 2.4vw, 2.25rem);
  min-height: 86px;
}

/* ---------------------------------------------------------------- brand */
.brand {
  display: flex; align-items: center; gap: clamp(.5rem, 1.1vw, .95rem);
  text-decoration: none; color: inherit; flex: none;
}
.brand__emblem {
  width: auto; height: clamp(46px, 5.2vw, 64px);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.28));
  transition: transform .5s var(--ease-out);
}
.brand:hover .brand__emblem { transform: translateY(-2px) rotate(-1.5deg); }
.brand__rule { width: 1.5px; align-self: stretch; margin-block: 6px; background: linear-gradient(180deg, transparent, rgba(234,242,246,.55), transparent); }
.brand__type { display: grid; gap: 1px; line-height: 1; }
.brand__explore {
  display: flex; align-items: center; gap: .4rem; justify-content: center;
  font: 600 clamp(.5rem, .78vw, .62rem)/1 var(--f-body);
  letter-spacing: .38em; text-transform: uppercase; color: var(--sand);
  padding-left: .38em;
}
.brand__hair { flex: 1; height: 1px; background: currentColor; opacity: .55; min-width: 12px; }
.brand__name {
  font: 700 clamp(1.32rem, 2.5vw, 2.05rem)/.94 var(--f-display);
  letter-spacing: .01em; color: #fff; text-align: center;
}
.brand__island {
  font: 600 clamp(.56rem, .92vw, .74rem)/1 var(--f-body);
  letter-spacing: .44em; text-transform: uppercase; color: rgba(234,242,246,.9);
  text-align: center; padding-left: .44em;
}
.brand--footer .brand__name { color: #fff; }
.brand--drawer .brand__emblem { height: 46px; }

/* ------------------------------------------------------------ mega menu */
.mega { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.mega__list { display: flex; align-items: center; gap: clamp(.1rem, .7vw, .55rem); }
.mega__top {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .72rem .78rem; border-radius: 100px;
  color: #EAF2F6 !important; text-decoration: none;
  font: 500 var(--small)/1 var(--f-body); letter-spacing: .03em;
  white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
/* The panel is a full width sheet anchored to the header bar, not to the nav
   item that triggers it. Anchoring it to the item pushed a 900px panel off the
   left edge of the viewport as soon as the trigger sat on the right hand side,
   so mega__item is deliberately static and hdr__bar owns the positioning. */
.mega__item { position: static; }
.mega__top:hover, .mega__item.is-open > .mega__top { background: rgba(255,255,255,.13); }
.mega__top.is-here { color: var(--sand) !important; }
.mega__chev { transition: transform .28s var(--ease); opacity: .7; }
.mega__item.is-open .mega__chev { transform: rotate(180deg); }

.hdr__bar { position: relative; }

.panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 95;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -12px rgba(7, 41, 61, .32);
  opacity: 0; transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .24s var(--ease), transform .3s var(--ease-out);
}
.panel::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--marsh), var(--tidal), var(--glass), var(--sand));
}
.mega__item.is-open .panel { opacity: 1; transform: none; pointer-events: auto; }
.panel__in {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(230px, 270px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: clamp(1.75rem, 2.6vw, 2.4rem);
}
.panel__lead .kicker { text-align: left; margin-bottom: .6rem; }
.panel__blurb { font-size: var(--small); color: var(--ink-soft); line-height: 1.6; }
.panel__all {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font: 600 var(--small)/1 var(--f-body); text-decoration: none; color: var(--tidal);
}
.panel__all:hover .ico { transform: translateX(4px); }
.panel__all .ico { transition: transform .3s var(--ease); }

.panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .15rem .5rem; align-content: start;
}
.panel__grid a {
  display: flex; gap: .7rem; align-items: flex-start; padding: .62rem .7rem;
  border-radius: var(--r); text-decoration: none; color: inherit;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.panel__grid a:hover { background: var(--oyster); transform: translateX(3px); }
.panel__ico {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(150deg, rgba(30,111,138,.13), rgba(122,133,72,.13));
  color: var(--tidal);
}
.panel__txt { display: grid; gap: 2px; min-width: 0; }
.panel__txt strong { font-size: var(--small); font-weight: 600; line-height: 1.3; }
.panel__txt small {
  font-size: var(--micro); color: var(--ink-faint); line-height: 1.5;
  /* two lines of blurb, then ellipsis, so one long description cannot make the
     whole panel three times taller than its neighbours */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.panel__feat {
  display: grid; gap: .8rem; align-content: start;
  padding: .8rem; border-radius: var(--r);
  background: var(--oyster); text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.panel__feat:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
.panel__feat-media { display: block; border-radius: 9px; overflow: hidden; aspect-ratio: 4 / 3; }
.panel__feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.panel__feat:hover .panel__feat-media img { transform: scale(1.06); }
.panel__feat-txt { display: grid; gap: 3px; }
.panel__feat-txt em {
  font: 600 var(--micro)/1 var(--f-body); font-style: normal;
  letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep);
}
.panel__feat-txt strong { font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; }
.panel__feat-txt small { font-size: var(--micro); color: var(--ink-soft); line-height: 1.5; }

.hdr__tools { display: flex; align-items: center; gap: .25rem; flex: none; }
.burger { display: none; width: 46px; height: 44px; background: none; border: 0; cursor: pointer; padding: 11px 9px; }
.burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger span + span { margin-top: 5px; }
[aria-expanded="true"].burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"].burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"].burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------- translate */
.tr { position: relative; }
.tr__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
  background: rgba(255,255,255,.07); cursor: pointer;
  font-size: var(--micro); letter-spacing: .06em; color: #EAF2F6;
  transition: background-color .22s var(--ease);
}
.tr__btn:hover { background: rgba(255,255,255,.16); }
.tr__menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 96;
  width: 260px; padding: .8rem;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r); box-shadow: var(--sh-3);
}
.tr__note { font-size: var(--micro); color: var(--ink-faint); line-height: 1.5; margin-bottom: .55rem; }
.tr__menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tr__menu button {
  width: 100%; text-align: left; padding: .42rem .55rem;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--micro);
}
.tr__menu button:hover { background: var(--oyster); }
.tr__menu button[aria-current="true"] { background: var(--deep); color: #fff; }
/* Google injects its own furniture. Keep it out of the layout. */
.skiptranslate iframe, .goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
#google_translate_element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ================================================================== HERO */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(600px, 92svh, 940px);
  display: grid; align-items: center;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* <picture> is an inline box with auto height by default, so height:100% on the
   img resolved against the picture's intrinsic height rather than the hero.
   That left the photograph ending partway down with bare gradient underneath.
   The wrapper has to be a block that fills the hero before cover can work. */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 640px at 50% 32%, rgba(7,41,61,.34), transparent 68%),
    linear-gradient(178deg, rgba(7,41,61,.78) 0%, rgba(10,58,91,.62) 34%, rgba(7,41,61,.86) 100%);
}
.hero__grain {
  position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__in { position: relative; text-align: center; color: #fff; display: grid; justify-items: center; }
.hero__h1 { color: #fff; text-shadow: 0 3px 30px rgba(7,41,61,.5); margin-bottom: .35rem; }
.hero__dek {
  max-width: 60ch; margin: 1.15rem auto clamp(2rem, 3.6vw, 2.9rem);
  font-size: var(--step-1); font-weight: 300; line-height: 1.62;
  color: rgba(255,255,255,.9); text-wrap: pretty;
}
.hero__down {
  position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  display: grid; place-items: center; width: 44px; height: 44px;
  color: rgba(255,255,255,.72); border-radius: 50%;
  animation: bob 2.6s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* --------------------------------------------------------- search field */
.find { width: min(760px, 100%); }
.find__wrap {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .45rem .45rem 1.15rem;
  background: rgba(255,255,255,.97);
  border-radius: 100px;
  box-shadow: var(--sh-3);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.find__wrap:focus-within { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(7,41,61,.2), 0 0 0 3px var(--sand); }
.find__ico { display: grid; place-items: center; color: var(--tidal); flex: none; }
.find__in {
  flex: 1 1 auto; min-width: 0;
  padding: .95rem .3rem;
  background: none; border: 0; outline: 0;
  font: 400 var(--step-1) var(--f-body); color: var(--charcoal);
}
.find__in::placeholder { color: #97A3AD; }
.find__in::-webkit-search-cancel-button { -webkit-appearance: none; }
.find__go { flex: none; padding: .92rem 1.5rem; }
.find__hint {
  margin-top: .8rem; font-size: var(--small);
  color: rgba(255,255,255,.72); text-align: center;
}
.is-inner .find__hint { color: var(--ink-faint); }

.find { position: relative; }
.sug {
  position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 60;
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-3); overflow: hidden; text-align: left;
  padding: .35rem;
}
.sug li a, .sug li button {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .6rem .75rem; border: 0; background: none; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); cursor: pointer; text-align: left;
}
.sug li[aria-selected="true"] a, .sug li a:hover { background: var(--oyster); }
.sug .ico { color: var(--tidal); }
.sug strong { font-size: var(--small); font-weight: 600; }
.sug em { font-style: normal; font-size: var(--micro); color: var(--ink-faint); margin-left: auto; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.chip {
  display: inline-block; padding: .48rem 1rem;
  border: 1px solid rgba(255,255,255,.32); border-radius: 100px;
  background: rgba(255,255,255,.1);
  color: #fff !important; text-decoration: none;
  font-size: var(--small); letter-spacing: .02em;
  transition: background-color .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.chip:hover { background: var(--sand); border-color: var(--sand); color: var(--deep-ink) !important; transform: translateY(-2px); }
.is-inner .chip { border-color: var(--line); background: var(--surface); color: var(--ink) !important; }

.hero__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 3.4vw, 3rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.5rem, 2.6vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.2);
  width: min(760px, 100%);
}
.hero__stats > div { text-align: center; }
.hero__stats dt {
  font: 600 var(--micro)/1 var(--f-body);
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6);
  margin-bottom: .4rem;
}
.hero__stats dd {
  margin: 0; font: 600 clamp(1.6rem, 3vw, 2.4rem)/1 var(--f-display); color: #fff;
}
.hero__stats dd span { font-size: .5em; color: var(--sand); margin-left: 1px; }
.hero__stats dd.is-sm { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--sand); }

/* ============================================================ TIDE PANEL */
/* Three stations plus the conditions card. Fixed counts so the set is always
   one row of four or two rows of two, never three and a widow. */
.tide-grid {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.35rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .tide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tide-grid { grid-template-columns: repeat(4, 1fr); } }
.tcard {
  padding: clamp(1.2rem, 2vw, 1.65rem);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  backdrop-filter: blur(9px);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.tcard:hover { transform: translateY(-4px); border-color: rgba(207,172,111,.5); background: rgba(255,255,255,.11); }
.tcard--lead { border-color: rgba(207,172,111,.42); background: rgba(207,172,111,.1); }
/* The status pill gets its own row above the name. Sitting it beside the name
   squeezed a three word station label onto three lines. */
.tcard__h { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.tcard__h > div { order: 2; width: 100%; }
.tcard__h h3 {
  font-family: var(--f-display); font-size: var(--step-1); color: #fff;
  line-height: 1.16; text-wrap: balance;
}
.tcard__note { margin-top: .4rem; font-size: var(--micro); line-height: 1.55; color: rgba(234,242,246,.68); }
.tcard__state {
  order: 1; flex: none;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem; border-radius: 100px;
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
}
.tcard__state--rising { background: rgba(111,179,197,.24); color: #BFE4EE; }
.tcard__state--falling { background: rgba(207,172,111,.22); color: #EED9B4; }

.tcard__list { display: grid; gap: 1px; }
.tcard__list li {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  grid-template-areas: "type time ft" "type in in";
  gap: 0 .7rem; align-items: center;
  padding: .55rem .1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.tcard__list li:first-child { border-top: 0; }
.tcard__list li.is-next { background: linear-gradient(90deg, rgba(207,172,111,.16), transparent); border-radius: 8px; padding-inline: .55rem; }
.tcard__type {
  grid-area: type;
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .1rem; text-align: center; border-radius: 5px;
}
.tcard__type--h { background: rgba(111,179,197,.22); color: #C6E7F0; }
.tcard__type--l { background: rgba(122,133,72,.28); color: #D7DFB2; }
.tcard__time { grid-area: time; font: 600 var(--step-1)/1.1 var(--f-display); color: #fff; }
.tcard__ft { grid-area: ft; font-size: var(--micro); color: var(--sand); font-variant-numeric: tabular-nums; }
.tcard__in { grid-area: in; font-size: var(--micro); color: rgba(234,242,246,.6); }
.tcard__src { margin-top: auto; font-size: var(--micro); color: rgba(234,242,246,.44); letter-spacing: .04em; }
.tcard__err { font-size: var(--small); color: #EED9B4; line-height: 1.55; }

.tcard--cond .condrow { display: flex; flex-wrap: wrap; gap: 1.1rem clamp(1rem, 2.4vw, 1.75rem); }
.condrow p { display: grid; gap: .25rem; }
.condrow__k { font: 600 var(--micro)/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(234,242,246,.6); }
.condrow strong {
  font: 600 clamp(1.8rem, 3vw, 2.5rem)/1 var(--f-display);
  color: var(--sand); letter-spacing: -.02em; white-space: nowrap;
}
.condrow strong sup { font-size: .46em; vertical-align: super; margin-left: 1px; letter-spacing: .02em; }

/* ------------------------------------------------------- what is biting */
.biting { margin-top: clamp(2.5rem, 4.6vw, 4rem); }
.biting__h { text-align: center; max-width: 74ch; margin-inline: auto; }
.biting__h h3 {
  font-family: var(--f-display); font-size: var(--fit-size, clamp(1.5rem, 3.6vw, 2.5rem));
  color: #fff; text-align: center; text-wrap: balance; hyphens: none; word-break: keep-all;
}
.biting__h p { margin-top: .8rem; font-size: var(--small); color: rgba(234,242,246,.74); line-height: 1.65; }
/* Four cards, one complete row. Fixed counts, never auto-fill. */
.biting__grid {
  display: grid; gap: clamp(.75rem, 1.4vw, 1.1rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 560px)  { .biting__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .biting__grid { grid-template-columns: repeat(4, 1fr); } }
/* Explicit internal rows. Each band lines up across every card in the row even
   though the copy in them is different lengths, which is what makes the set
   read as a designed row rather than four cards that happen to sit together. */
.bit {
  position: relative;
  padding: 1.3rem 1.15rem 1.15rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .4rem;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.bit__facts { display: grid; gap: .45rem; align-content: start; }
.bit:hover { transform: translateY(-3px); border-color: rgba(207,172,111,.45); }
.bit--peak { background: rgba(207,172,111,.11); border-color: rgba(207,172,111,.34); }
/* Always rendered, so the flag never changes the card's internal rhythm. */
.bit__flag {
  justify-self: start;
  padding: .2rem .6rem; border-radius: 100px;
  background: var(--sand); color: var(--deep-ink);
  font: 700 var(--micro)/1.5 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
}
.bit__flag--off {
  background: rgba(255,255,255,.1); color: rgba(234,242,246,.62);
}
.bit h4 { font-family: var(--f-display); font-size: var(--step-1); color: #fff; }
.bit__also { font-size: var(--micro); font-style: italic; color: rgba(234,242,246,.6); }
.bit__where, .bit__bait {
  display: grid; grid-template-columns: 14px 1fr; gap: .45rem; align-items: start;
  font-size: var(--micro); color: rgba(234,242,246,.82); line-height: 1.5;
}
.bit__where .ico, .bit__bait .ico { margin-top: 3px; color: var(--glass); }
.bit__tip {
  align-self: end; margin-top: .35rem; padding-top: .65rem;
  border-top: 1px dashed rgba(255,255,255,.16);
  font-size: var(--micro); line-height: 1.6; color: rgba(234,242,246,.68);
}
.biting__more { text-align: center; margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.biting__more a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.4rem; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.24);
  font: 600 var(--small)/1 var(--f-body); text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.biting__more a:hover { background: rgba(255,255,255,.1); border-color: var(--sand); }
.biting__more a:hover .ico { transform: translateX(3px); }
.biting__more .ico { transition: transform .3s var(--ease); }
.biting__lic {
  margin-top: clamp(1.5rem, 2.6vw, 2rem); padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,.06); border-left: 3px solid var(--sand); border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--small); line-height: 1.65; color: rgba(234,242,246,.85);
}
.biting__lic strong { color: var(--sand); }
.biting__lic a { display: inline-flex; align-items: center; gap: .35rem; margin-left: .3rem; white-space: nowrap; }

/* ============================================================== PROSE */
.prose { max-width: 74ch; margin-inline: auto; }
.prose p { margin-bottom: 1.3rem; text-wrap: pretty; }
.prose__lede {
  font-family: var(--f-display); font-size: var(--step-2); font-weight: 500;
  line-height: 1.42; color: var(--deep); margin-bottom: 1.5rem !important;
}
:root[data-theme="dark"] .prose__lede { color: var(--glass); }
.pullout {
  margin: 2.25rem 0; padding: 1.5rem 1.75rem;
  background: linear-gradient(140deg, rgba(30,111,138,.08), rgba(122,133,72,.08));
  border-left: 3px solid var(--sand); border-radius: 0 var(--r) var(--r) 0;
}
.pullout__k {
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .22em;
  text-transform: uppercase; color: var(--sand-deep); margin-bottom: .6rem;
}
.pullout__q { font-family: var(--f-display); font-size: var(--step-2); font-style: italic; line-height: 1.42; margin: 0 !important; }

.notes {
  display: grid; gap: 1px; margin-top: clamp(2.5rem, 4.4vw, 3.75rem);
  max-width: 900px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--line-soft);
}
.notes li {
  display: grid; grid-template-columns: 170px 1fr; gap: 1.25rem;
  padding: 1.15rem 1.4rem; background: var(--surface);
}
.notes__k {
  font: 600 var(--small)/1.4 var(--f-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tidal);
}
.notes__v { font-size: var(--small); line-height: 1.65; color: var(--ink-soft); }

/* ====================================================== ANCHOR PLACES */
/* Fixed column counts, never auto-fit. auto-fit picks whatever number of
   columns happens to fit, which is how a six item set ended up as four plus
   two with a hole in the second row. Six divides cleanly by three and by two,
   so every row is complete at every breakpoint. */
.pgrid {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .42s var(--ease-out), box-shadow .42s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.pcard__hit { position: absolute; inset: 0; z-index: 3; }
.pcard__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--oyster); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pcard:hover .pcard__media img { transform: scale(1.055); }
.pcard__body { padding: clamp(1.1rem, 1.8vw, 1.5rem); display: grid; gap: .55rem; align-content: start; flex: 1; }
/* One line, ellipsed. Two of these labels wrapped to a second line, which threw
   the card titles below them out of alignment across the row. */
.pcard__area {
  display: flex; align-items: center; gap: .35rem;
  font: 600 var(--micro)/1.3 var(--f-body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--tidal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard__area .ico { color: var(--sand-deep); }
.pcard__area em { opacity: .45; font-style: normal; }
.pcard__area > span { overflow: hidden; text-overflow: ellipsis; }
.pcard h3 { font-family: var(--f-display); font-size: var(--step-2); text-wrap: balance; }
.pcard__blurb { font-size: var(--small); line-height: 1.65; color: var(--ink-soft); }
/* Pinned to the bottom so the call to action lines up across the row no matter
   how long each blurb runs. */
.pcard .link-arrow { margin-top: auto; padding-top: .5rem; }
.pcard:hover .link-arrow .ico { transform: translateX(4px); }

/* ========================================================== DIRECTORY */
/* Column count comes from grid_plan() via --cols. Only populated groups are
   rendered, so the total moves with the sync and cannot be hard coded. */
.dirgrid {
  display: grid; gap: clamp(1.1rem, 2.2vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .dirgrid { grid-template-columns: repeat(min(2, var(--cols, 2)), 1fr); } }
@media (min-width: 1040px) { .dirgrid { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
@media (max-width: 1039px) { .dirgrid > * { grid-column: auto !important; } }
.dirblk {
  padding: clamp(1.25rem, 2vw, 1.7rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dirblk:hover { border-color: var(--glass); transform: translateY(-3px); box-shadow: var(--sh-1); }
.dirblk__h { font-family: var(--f-display); font-size: var(--step-2); margin-bottom: .4rem; text-wrap: balance; }
.dirblk__h a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.dirblk__h a:hover { color: var(--tidal); }
.dirblk__h .ico { color: var(--sand-deep); transition: transform .3s var(--ease); }
.dirblk__h a:hover .ico { transform: translateX(4px); }
.dirblk__b { font-size: var(--micro); color: var(--ink-faint); line-height: 1.55; margin-bottom: 1rem; }
.dirblk__l { display: grid; gap: 1px; }
.dirblk__l a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; margin-inline: -.55rem;
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
  font-size: var(--small);
  transition: background-color .2s var(--ease), padding-left .2s var(--ease);
}
.dirblk__l a:hover { background: var(--oyster); padding-left: .85rem; }
.dirblk__l .ico { color: var(--tidal); }
.dirblk__l em {
  margin-left: auto; font-style: normal; font-size: var(--micro);
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  background: var(--oyster); padding: .1rem .45rem; border-radius: 100px;
}
.emptynote {
  display: flex; gap: .7rem; align-items: flex-start;
  max-width: 860px; margin: clamp(2rem, 3.4vw, 3rem) auto 0;
  padding: 1.1rem 1.35rem;
  background: var(--oyster); border: 1px dashed var(--line);
  border-radius: var(--r); font-size: var(--small); line-height: 1.65; color: var(--ink-soft);
}
.emptynote .ico { margin-top: 4px; color: var(--sand-deep); }
code {
  font: 500 .88em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(30,111,138,.1); padding: .16em .42em; border-radius: 4px;
}

/* ========================================================= HOW TO FISH */
/* Four guides. Two columns then four, so never a widowed card. */
.howgrid {
  display: grid; gap: clamp(.85rem, 1.6vw, 1.35rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .howgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .howgrid { grid-template-columns: repeat(4, 1fr); } }
.howcard {
  position: relative;
  padding: clamp(1.3rem, 2vw, 1.75rem);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  display: grid; gap: .8rem; align-content: start;
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}
.howcard:hover { transform: translateY(-5px); background: rgba(255,255,255,.12); border-color: rgba(207,172,111,.5); }
.howcard h3 { font-family: var(--f-display); font-size: var(--step-2); color: #fff; text-wrap: balance; }
.howcard__b { font-size: var(--small); line-height: 1.68; color: rgba(243,245,233,.84); }
.howcard__gear {
  padding-top: .7rem; border-top: 1px dashed rgba(255,255,255,.2);
  font-size: var(--micro); line-height: 1.55; color: rgba(243,245,233,.7);
}
.howcard__gear span {
  display: block; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sand); margin-bottom: .25rem;
}
.howcard .link-arrow { color: var(--sand); }
.howcard:hover .link-arrow .ico { transform: translateX(4px); }

/* ========================================================== DAY PLANS */
.plans { display: grid; gap: .8rem; max-width: 980px; margin-inline: auto; }
.plan a {
  display: grid; gap: .6rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.25rem, 2.2vw, 1.9rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan a:hover { border-color: var(--sand); transform: translateX(5px); box-shadow: var(--sh-1); }
.plan__if, .plan__then { display: grid; grid-template-columns: 3.6rem 1fr; gap: .9rem; align-items: baseline; }
.plan__if span, .plan__then span {
  font: 700 var(--micro)/1.6 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
}
.plan__if span { color: var(--tidal); }
.plan__then span { color: var(--sand-deep); }
.plan__if { font-family: var(--f-display); font-size: var(--step-2); font-weight: 600; }
.plan__then { font-size: var(--small); line-height: 1.68; color: var(--ink-soft); }
.plan a:hover .link-arrow .ico { transform: translateX(4px); }
.plan .link-arrow { padding-left: 4.5rem; }

/* ============================================================ HISTORY */
/*
  A timeline, not a card grid. There are five history beats, and five items in
  any multi column grid leaves a ragged final row. A chronology also genuinely
  wants to be read in order, which a grid does not communicate. A single rail
  with dated stops cannot go uneven no matter how many beats get added.
*/
.beats {
  counter-reset: beat;
  max-width: 860px; margin-inline: auto;
  display: grid; gap: 0;
}
.beat {
  position: relative; counter-increment: beat;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 clamp(1.1rem, 2.4vw, 2rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.beat:last-child { padding-bottom: 0; }
/* the rail */
.beat::before {
  content: ""; position: absolute; left: 1.7rem; top: 3.2rem; bottom: 0;
  width: 1px; background: linear-gradient(180deg, rgba(207,172,111,.5), rgba(207,172,111,.06));
}
.beat:last-child::before { display: none; }
/* the numbered stop */
.beat::after {
  content: counter(beat, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 3;
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: rgba(207,172,111,.14);
  border: 1px solid rgba(207,172,111,.4);
  font: 700 var(--small)/1 var(--f-display); color: var(--sand);
}
.beat__era {
  grid-column: 2; align-self: center; min-height: 3.5rem;
  display: flex; align-items: center;
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sand);
}
.beat h3 {
  grid-column: 2;
  font-family: var(--f-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: #fff; text-wrap: balance; line-height: 1.16; margin-bottom: .55rem;
}
.beat__b {
  grid-column: 2;
  font-size: var(--small); line-height: 1.72; color: rgba(234,242,246,.78);
}
@media (max-width: 560px) {
  .beat { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 1rem; }
  .beat::after { width: 2.6rem; height: 2.6rem; font-size: var(--micro); }
  .beat::before { left: 1.3rem; top: 2.4rem; }
  .beat__era { min-height: 2.6rem; }
}
.hist__more { text-align: center; margin-top: clamp(2.25rem, 3.6vw, 3.25rem); }

/* ================================================================ FAQ */
/*
  Both the question and the answer fill 100% of the container and both are
  centred. The summary is a grid so the plus marker stays pinned to the right
  without taking width away from the question text.
*/
.faq { max-width: 1000px; margin-inline: auto; display: grid; gap: .7rem; }
.faq__i {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__i[open] { border-color: var(--glass); box-shadow: var(--sh-1); }
.faq__i > summary {
  display: grid; grid-template-columns: 1fr 30px; align-items: center; gap: 1rem;
  width: 100%;
  padding: clamp(1.05rem, 1.8vw, 1.45rem) clamp(1.15rem, 2.2vw, 1.9rem);
  cursor: pointer; list-style: none;
}
.faq__i > summary::-webkit-details-marker { display: none; }
.faq__i > summary:hover .faq__q { color: var(--tidal); }
.faq__q {
  grid-column: 1;
  width: 100%;
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fit-size, clamp(1.05rem, 2.1vw, 1.55rem));
  font-weight: 600; line-height: 1.22;
  text-align: center; text-wrap: balance;
  hyphens: none; word-break: keep-all; overflow-wrap: normal;
  transition: color .22s var(--ease);
}
.faq__pm {
  grid-column: 2; position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--oyster); justify-self: end;
  transition: background-color .25s var(--ease), transform .35s var(--ease);
}
.faq__pm::before, .faq__pm::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 2px; border-radius: 2px;
  background: var(--tidal); translate: -50% -50%;
  transition: transform .35s var(--ease);
}
.faq__pm::after { transform: rotate(90deg); }
.faq__i[open] .faq__pm { background: var(--tidal); transform: rotate(180deg); }
.faq__i[open] .faq__pm::before, .faq__i[open] .faq__pm::after { background: #fff; }
.faq__i[open] .faq__pm::after { transform: rotate(0); }
.faq__a {
  padding: 0 clamp(1.15rem, 2.2vw, 1.9rem) clamp(1.15rem, 2vw, 1.6rem);
  animation: faqin .38s var(--ease-out);
}
.faq__a p {
  width: 100%; max-width: 100%; margin: 0;
  font-size: var(--step-0); line-height: 1.72;
  color: var(--ink-soft); text-align: center; text-wrap: pretty;
}
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ========================================================= PROVENANCE */
.srctbl { max-width: 860px; margin-inline: auto; font-size: var(--small); }
.srctbl caption { text-align: left; }
.srctbl th, .srctbl td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.srctbl thead th {
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
  border-bottom-color: var(--ink-faint);
}
.srctbl tbody th { font-weight: 600; color: var(--ink); }
.srctbl td a { display: inline-flex; align-items: center; gap: .35rem; }

.byline {
  display: flex; gap: 1.25rem; align-items: flex-start;
  max-width: 860px; margin: clamp(2.25rem, 3.6vw, 3.25rem) auto 0;
  padding: clamp(1.15rem, 2vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  font-size: var(--small); line-height: 1.68; color: var(--ink-soft);
}
.byline--todo { border-style: dashed; border-color: var(--sand); background: rgba(207,172,111,.07); }
.byline__img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex: none; }
.byline__k {
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sand-deep); margin-bottom: .5rem;
}
.byline p + p { margin-top: .6rem; }
.byline__n { color: var(--ink); }
.byline__rev { font-size: var(--micro); color: var(--ink-faint); }

/* ============================================================== PAGES */
.pagehead {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, var(--oyster), var(--cream));
  text-align: center;
}
.pagehead .find { margin: 1.75rem auto 0; }
.crumbs { margin-bottom: 1.25rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; font-size: var(--micro); }
.crumbs li { display: flex; align-items: center; gap: .35rem; }
.crumbs a { color: var(--tidal); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .ico { color: var(--ink-faint); }
.crumbs [aria-current] { color: var(--ink-faint); }

.soon, .lost { text-align: center; }
.soon { max-width: 660px; margin-inline: auto; }
.soon__k {
  font: 600 var(--micro)/1 var(--f-body); letter-spacing: .24em;
  text-transform: uppercase; color: var(--sand-deep); margin-bottom: .9rem;
}
.soon h2 { font-family: var(--f-display); font-size: var(--step-2); margin-bottom: 1rem; }
.soon p { color: var(--ink-soft); font-size: var(--small); line-height: 1.7; margin-bottom: .8rem; }
.soon__cta { margin-top: 1.75rem; }
.lost .find { margin: 2rem auto 0; }
.lost .dek { margin-bottom: 0; }
.results__wait { text-align: center; color: var(--ink-faint); }
.results__grid { display: grid; gap: .6rem; max-width: 780px; margin-inline: auto; }
.results__grid a {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.15rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.results__grid a:hover { border-color: var(--glass); transform: translateX(4px); }
.results__grid .ico { color: var(--tidal); }
.results__grid em { margin-left: auto; font-style: normal; font-size: var(--micro); color: var(--ink-faint); }

/* ============================================================== CARDS */
.card {
  position: relative; background: var(--surface);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.card__hit { position: absolute; inset: 0; z-index: 3; }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--oyster); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__ph { display: grid; place-items: center; height: 100%; color: var(--line); }
.card__rate {
  position: absolute; bottom: .6rem; left: .6rem;
  display: flex; align-items: center; gap: .3rem;
  padding: .28rem .6rem; border-radius: 100px;
  background: rgba(7,41,61,.82); color: #fff; font-size: var(--micro);
  backdrop-filter: blur(6px);
}
.card__rate .stars { color: var(--sand); letter-spacing: -1px; }
.card__body { padding: 1.15rem; display: grid; gap: .4rem; }
.card__cat { font: 600 var(--micro)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--tidal); }
.card h3 { font-family: var(--f-display); font-size: var(--step-1); }
.card__blurb { font-size: var(--micro); color: var(--ink-soft); line-height: 1.6; }
.card__meta { display: flex; align-items: center; gap: .35rem; font-size: var(--micro); color: var(--ink-faint); }
.stars { letter-spacing: -1px; }

/* ============================================================= FOOTER */
.ftr {
  position: relative;
  padding-top: clamp(3.5rem, 6vw, 6rem);
  background:
    radial-gradient(900px 460px at 88% 0%, rgba(122,133,72,.26), transparent 62%),
    linear-gradient(178deg, var(--deep-ink) 0%, #041B27 100%);
  color: rgba(234,242,246,.78);
}
.ftr__wave {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--marsh), var(--tidal) 34%, var(--glass) 58%, var(--sand));
}
.ftr__top {
  display: grid; gap: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(2.5rem, 4.4vw, 4rem);
}
@media (min-width: 900px) { .ftr__top { grid-template-columns: 360px minmax(0, 1fr); } }
.ftr__brand .brand { margin-bottom: 1.35rem; }
.ftr__pitch { font-size: var(--small); line-height: 1.7; margin-bottom: 1.35rem; max-width: 42ch; }
.ftr__sub { display: flex; gap: .5rem; max-width: 380px; }
.ftr__sub input {
  flex: 1 1 auto; min-width: 0; padding: .8rem 1rem;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 100px;
  font: 400 var(--small) var(--f-body);
}
.ftr__sub input::placeholder { color: rgba(234,242,246,.45); }
.ftr__sub input:focus { outline: 3px solid var(--sand); outline-offset: 2px; }
.ftr__sub .btn { flex: none; }
.ftr__fine { margin-top: .7rem; font-size: var(--micro); color: rgba(234,242,246,.5); line-height: 1.55; max-width: 40ch; }

/* Three columns, generous gutters. Deliberately not a sitemap. */
.ftr__cols {
  display: grid; gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: repeat(3, 1fr);
  max-width: 640px; margin-left: auto;
}
@media (max-width: 520px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } }
.ftr__col h2 {
  font: 700 var(--micro)/1 var(--f-body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--sand); margin-bottom: 1.1rem;
}
.ftr__col ul { display: grid; gap: .62rem; }
.ftr__col a { color: rgba(234,242,246,.76); text-decoration: none; font-size: var(--small); }
.ftr__col ul a:hover { color: #fff; text-decoration: underline; }
.ftr__legal {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--micro);
}
.ftr__lg { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.ftr__lg a { color: rgba(234,242,246,.7); text-decoration: none; }
.ftr__lg a:hover { color: var(--sand); text-decoration: underline; }
.ftr__cr { color: rgba(234,242,246,.5); }

/* ==================================================== MOBILE DOCK + NAV */
/*
  The dock is fixed to the viewport at every scroll depth and every route, its
  targets are 56px tall, and the whole bar is padded by safe-area-inset-bottom
  so a home indicator or a notch never sits on top of a call to action.
*/
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--deep-ink) 94%, transparent);
  border-top: 1px solid rgba(255,255,255,.13);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 -8px 28px rgba(4,27,39,.4);
}
.dock::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--marsh), var(--tidal), var(--glass), var(--sand));
  opacity: .85;
}
.dock__a {
  display: grid; justify-items: center; gap: 3px;
  min-height: 56px; padding: .5rem .25rem;
  background: none; border: 0; border-radius: var(--r);
  color: rgba(234,242,246,.72); text-decoration: none; cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.dock__a:active { background: rgba(255,255,255,.1); }
.dock__a.is-here { color: var(--sand); }
.dock__lb { font: 600 var(--micro)/1 var(--f-body); letter-spacing: .04em; }
.dock__a--cta { color: var(--deep-ink); }
.dock__a--cta .dock__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: -14px;
  border-radius: 50%; background: var(--sand);
  box-shadow: 0 6px 18px rgba(207,172,111,.45);
}
.dock__a--cta .dock__lb { color: var(--sand); }

.drawer, .ovl {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4,27,39,.6); backdrop-filter: blur(6px);
  display: grid;
}
.drawer { justify-items: end; }
.ovl { place-items: start center; padding: clamp(1rem, 6vh, 5rem) var(--gut); }
.drawer[hidden], .ovl[hidden], .a11y[hidden] { display: none; }
.drawer__sheet {
  width: min(420px, 100vw); height: 100%;
  background: var(--surface); display: flex; flex-direction: column;
  animation: slidein .38s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
.drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(178deg, var(--deep), var(--deep-ink)); color: #fff;
}
.drawer__scroll { flex: 1; overflow-y: auto; padding: 1.25rem; -webkit-overflow-scrolling: touch; }
.drawer .find__wrap { box-shadow: none; border: 1.5px solid var(--line); }
.drawer .find__hint { color: var(--ink-faint); text-align: left; }
.drawer nav { margin-top: 1.5rem; display: grid; gap: 2px; }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .3rem; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: var(--step-1); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { transition: transform .3s var(--ease); color: var(--tidal); }
.acc[open] summary .ico { transform: rotate(180deg); }
.acc__list { padding: .5rem 0 1rem; display: grid; gap: 1px; }
.acc__list a {
  display: flex; align-items: center; gap: .65rem;
  padding: .62rem .55rem; border-radius: var(--r-sm);
  font-size: var(--small); text-decoration: none; color: var(--ink);
}
.acc__list a:hover { background: var(--oyster); }
.acc__list .ico { color: var(--tidal); }
.acc__all { font-weight: 600; color: var(--tidal) !important; }
.drawer__solo {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .3rem; border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display); font-size: var(--step-1); font-weight: 600;
  text-decoration: none; color: var(--ink);
}
.drawer__solo .ico { color: var(--tidal); }

.ovl__sheet {
  position: relative; width: min(760px, 100%);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  animation: popin .34s var(--ease-out);
}
@keyframes popin { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.ovl__sheet .find__wrap { box-shadow: none; border: 1.5px solid var(--line); }
.ovl__sheet .find__hint { color: var(--ink-faint); }
.ovl__x {
  position: absolute; top: .85rem; right: .85rem;
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--oyster); border: 0; border-radius: 50%; cursor: pointer; color: var(--ink);
}
.ovl__x:hover { background: var(--line); }
.drawer__top .ovl__x { position: static; background: rgba(255,255,255,.15); color: #fff; }

/* ================================================== ACCESSIBILITY PANEL */
.a11y {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-3);
  animation: slidein .38s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.a11y__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(178deg, var(--deep), var(--deep-ink)); color: #fff;
}
.a11y__head .kicker { text-align: left; color: var(--sand); margin-bottom: .35rem; }
.a11y__title { font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; line-height: 1.14; }
.a11y__x { display: grid; place-items: center; width: 38px; height: 38px; flex: none; background: rgba(255,255,255,.15); border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.a11y__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.a11y__scale { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.a11y__scale-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.a11y__scale-row label { font-weight: 600; font-size: var(--small); }
.a11y__scale-row output { font: 600 var(--small) var(--f-body); color: var(--tidal); font-variant-numeric: tabular-nums; }
.a11y__scale input[type="range"] { width: 100%; accent-color: var(--tidal); height: 26px; }
.a11y__help { font-size: var(--micro); color: var(--ink-faint); line-height: 1.5; margin-top: .4rem; }
.a11y__list { display: grid; gap: 2px; }
.sw { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .55rem; margin-inline: -.55rem; border-radius: var(--r-sm); cursor: pointer; }
.sw:hover { background: var(--oyster); }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw__track {
  flex: none; position: relative; width: 42px; height: 24px; margin-top: 2px;
  background: var(--line); border-radius: 100px;
  transition: background-color .25s var(--ease);
}
.sw__dot {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.24);
  transition: transform .25s var(--ease);
}
.sw input:checked + .sw__track { background: var(--tidal); }
.sw input:checked + .sw__track .sw__dot { transform: translateX(18px); }
.sw input:focus-visible + .sw__track { outline: 3px solid var(--focus); outline-offset: 3px; }
.sw__txt { display: grid; gap: 2px; }
.sw__txt strong { font-size: var(--small); font-weight: 600; }
.sw__txt small { font-size: var(--micro); color: var(--ink-faint); line-height: 1.45; }
.a11y__foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: .9rem; justify-items: start; }
.a11y__stmt { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--small); }
.a11y__guide {
  position: fixed; left: 0; right: 0; z-index: 125;
  height: 2.6rem; margin-top: -1.3rem;
  border-top: 2px solid rgba(207,172,111,.9);
  border-bottom: 2px solid rgba(207,172,111,.9);
  background: rgba(207,172,111,.13);
  pointer-events: none;
}

/* ------------------------------------- accessibility preference results */
:root[data-a11y-contrast="on"] {
  --ink: #000; --ink-soft: #16222B; --ink-faint: #2E3A42;
  --line: #6B7883; --bg: #fff; --surface: #fff; --oyster: #F2F2F2;
  --accent: #084566; --focus: #000;
}
:root[data-a11y-contrast="on"][data-theme="dark"] {
  --ink: #fff; --ink-soft: #E4EDF2; --ink-faint: #C6D6DF;
  --line: #8FA6B4; --bg: #000; --surface: #06161F; --oyster: #08202D;
  --accent: #9FD7E6; --focus: #fff;
}
:root[data-a11y-contrast="on"] .hero__scrim { background: rgba(0,0,0,.82); }
:root[data-a11y-contrast="on"] .dek,
:root[data-a11y-contrast="on"] .card__blurb,
:root[data-a11y-contrast="on"] .pcard__blurb { color: var(--ink-soft); }

:root[data-a11y-dyslexia="on"] {
  --f-body: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
  --f-display: "Trebuchet MS", Verdana, sans-serif;
}
:root[data-a11y-dyslexia="on"] body { font-weight: 500; letter-spacing: .012em; }
:root[data-a11y-dyslexia="on"] .fit,
:root[data-a11y-dyslexia="on"] .brand__name { letter-spacing: 0; }

:root[data-a11y-spacing="on"] body { letter-spacing: .055em; word-spacing: .19em; line-height: 2; }
:root[data-a11y-spacing="on"] p { margin-bottom: 1.6rem; }
:root[data-a11y-spacing="on"] .fit { line-height: 1.3; letter-spacing: .012em; }

:root[data-a11y-links="on"] a { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
:root[data-a11y-focus="on"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 5px solid var(--focus) !important; outline-offset: 4px !important;
}
:root[data-a11y-images="on"] .hero__bg,
:root[data-a11y-images="on"] .hero__grain,
:root[data-a11y-images="on"] .panel__feat-media,
:root[data-a11y-images="on"] .pcard__media,
:root[data-a11y-images="on"] .card__media,
:root[data-a11y-images="on"] .brand__emblem { display: none !important; }
:root[data-a11y-images="on"] .hero { min-height: auto; background: linear-gradient(168deg, var(--deep), var(--deep-ink)); }
:root[data-a11y-images="on"] .hero__in { color: #fff; }
:root[data-a11y-bigcursor="on"], :root[data-a11y-bigcursor="on"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M5 2l30 15-13 4-4 13z' fill='%23fff' stroke='%230A3A5B' stroke-width='2.4'/%3E%3C/svg%3E") 3 2, auto !important;
}

/* -------------------------------------------------------- motion policy */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
:root[data-a11y-motion="on"] * , :root[data-a11y-motion="on"] *::before, :root[data-a11y-motion="on"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
:root[data-a11y-motion="on"] [data-reveal] { opacity: 1 !important; transform: none !important; }
:root[data-a11y-motion="on"] .hero__down { display: none; }

/* ========================================================== BREAKPOINTS */
@media (max-width: 1180px) {
  .mega__top { padding-inline: .58rem; font-size: var(--micro); }
  .panel__in { grid-template-columns: minmax(0, 1fr) minmax(210px, 240px); }
  .panel__lead { display: none; }
}
@media (max-width: 1024px) {
  :root { --hdr-h: 108px; }
  .mega { display: none; }
  .burger { display: block; }
  .hdr__bar-in { min-height: 72px; }
}
@media (max-width: 860px) {
  .dock { display: grid; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .notes li { grid-template-columns: 1fr; gap: .35rem; }
  .plan__if, .plan__then { grid-template-columns: 1fr; gap: .2rem; }
  .plan .link-arrow { padding-left: 0; }
  .ftr__legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  :root { --hdr-h: 96px; }
  .hdr__tag { display: none; }
  .hdr__rail-in { justify-content: flex-end; }
  .brand__rule { display: none; }
  .find__wrap { flex-wrap: wrap; border-radius: var(--r-lg); padding: .75rem; gap: .6rem; }
  .find__ico { display: none; }
  .find__in { flex: 1 1 100%; padding: .55rem .35rem; }
  .find__go { width: 100%; }
  .tcard__list li { grid-template-columns: 3.2rem 1fr; grid-template-areas: "type time" "type ft" "in in"; }
  .hero__stats { gap: 1.25rem 2rem; }
  .faq__i > summary { grid-template-columns: 1fr 26px; }
  .srctbl thead { display: none; }
  .srctbl tr { display: grid; gap: .2rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
  .srctbl th, .srctbl td { border: 0; padding: 0; }
}
@media (max-width: 420px) {
  .panel__grid, .tr__menu ul { grid-template-columns: 1fr; }
  .dock__lb { font-size: .6rem; }
}

/* ================================================================ PRINT */
@media print {
  .hdr, .dock, .a11y, .drawer, .ovl, .hero__bg, .hero__down, .ftr__cols { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
  .section--deep, .section--marsh { background: #fff !important; color: #000 !important; }
  .tcard, .bit, .beat, .howcard { border: 1px solid #999 !important; background: #fff !important; }
  .tcard h3, .bit h4, .beat h3, .howcard h3, .tcard__time { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ============================================================== LEGAL */
/*
  Compliance pages get the same design attention as the rest of the site: a
  sticky contents rail, a measured 68ch column, real tables, and type that
  matches the brand. A legal page nobody can read is not compliance.
*/
.pagehead--legal { background: linear-gradient(180deg, var(--oyster), var(--cream)); }
.pagehead__stamp {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.35rem; padding: .4rem .85rem;
  border: 1px solid var(--line); border-radius: 100px;
  font-size: var(--micro); color: var(--ink-faint); letter-spacing: .04em;
}
.pagehead__stamp .ico { color: var(--sand-deep); }

.legal { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) { .legal { grid-template-columns: 238px minmax(0, 1fr); } }

.legal__toc {
  padding: 1.25rem 1.35rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
@media (min-width: 1000px) { .legal__toc { position: sticky; top: calc(var(--hdr-h) + 1.25rem); } }
.legal__toc-h {
  font: 700 var(--micro)/1 var(--f-body); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tidal); margin-bottom: .95rem;
}
.legal__toc ol { display: grid; gap: .5rem; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: flex; gap: .55rem; font-size: var(--small);
  color: var(--ink-soft); text-decoration: none; line-height: 1.45;
}
.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--ink-faint); font-size: var(--micro); font-variant-numeric: tabular-nums; flex: none; padding-top: 2px;
}
.legal__toc a:hover { color: var(--tidal); text-decoration: underline; }

.legal__body { max-width: 68ch; }
.legal__body h2 {
  font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  margin: 2.6rem 0 .95rem; scroll-margin-top: calc(var(--hdr-h) + 1.5rem);
  text-wrap: balance;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-family: var(--f-display); font-size: var(--step-1); margin: 1.75rem 0 .6rem; }
.legal__body p { margin-bottom: 1.15rem; line-height: 1.75; text-wrap: pretty; }
.legal__lede {
  font-family: var(--f-display); font-size: var(--step-2); font-weight: 500;
  line-height: 1.45; color: var(--deep); padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line); margin-bottom: 1.8rem !important;
}
:root[data-theme="dark"] .legal__lede { color: var(--glass); }
.legal__ul { display: grid; gap: .7rem; margin: 0 0 1.5rem; }
.legal__ul li {
  position: relative; padding-left: 1.5rem; line-height: 1.7; font-size: var(--step-0);
}
.legal__ul li::before {
  content: ""; position: absolute; left: .25rem; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sand);
}
.legal__tablewrap { overflow-x: auto; margin: 0 0 1.75rem; border-radius: var(--r); border: 1px solid var(--line); }
.legal__table { font-size: var(--small); min-width: 520px; }
.legal__table th, .legal__table td {
  padding: .85rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft); line-height: 1.6;
}
.legal__table thead th {
  background: var(--oyster);
  font: 700 var(--micro)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.legal__table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.legal__table tbody tr:last-child th, .legal__table tbody tr:last-child td { border-bottom: 0; }

.legal__notice {
  margin: 2.5rem 0 0; padding: 1.25rem 1.4rem;
  background: rgba(207,172,111,.1);
  border: 1px dashed var(--sand); border-radius: var(--r-lg);
  font-size: var(--small); line-height: 1.7; color: var(--ink-soft);
}
.legal__notice-k {
  font: 700 var(--micro)/1 var(--f-body); letter-spacing: .18em;
  text-transform: uppercase; color: var(--sand-deep); margin-bottom: .6rem;
}
.legal__notice p:last-child { margin-bottom: 0; }
.legal__contact {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--small); color: var(--ink-soft);
}

/* -------------------------------------------------------- link cards */
.linkgrid {
  display: grid; gap: clamp(.75rem, 1.5vw, 1.15rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .linkgrid { grid-template-columns: repeat(3, 1fr); } }
.linkcard {
  display: grid; gap: .5rem; align-content: start;
  padding: clamp(1.15rem, 2vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.linkcard:hover { border-color: var(--glass); transform: translateY(-4px); box-shadow: var(--sh-1); }
.linkcard h3 { font-family: var(--f-display); font-size: var(--step-1); text-wrap: balance; }
.linkcard p { font-size: var(--small); color: var(--ink-soft); line-height: 1.65; }
.linkcard .link-arrow { margin-top: .3rem; }
.linkcard:hover .link-arrow .ico { transform: translateX(4px); }
.byline__mono {
  display: grid; place-items: center; flex: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(150deg, var(--tidal), var(--deep));
  color: #fff; font: 600 1.6rem/1 var(--f-display);
}
.byline__prof { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.byline__n strong { font-family: var(--f-display); font-size: var(--step-1); }

/* ========================================================= DIRECTORY PAGE */
.pagehead--dir { text-align: center; }
.dirpage { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 1000px) { .dirpage { grid-template-columns: 288px minmax(0, 1fr); } }

/* ------------------------------------------------------------- filters */
.filters { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .filters { position: sticky; top: calc(var(--hdr-h) + 1rem); } }
.filters__count { font: 600 var(--small)/1 var(--f-body); color: var(--ink-soft); }
.filters__count strong {
  font-family: var(--f-display); font-size: 1.5em; color: var(--deep); margin-right: .3rem;
}
:root[data-theme="dark"] .filters__count strong { color: var(--glass); }
.filters__form {
  display: grid; gap: 1.15rem; padding: 1.15rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.filters__set { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.filters__set legend {
  padding: 0; font: 700 var(--micro)/1 var(--f-body);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
.filters__sel {
  width: 100%; padding: .62rem .8rem;
  font: 400 var(--small) var(--f-body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.chk { display: flex; align-items: center; gap: .55rem; font-size: var(--small); cursor: pointer; }
.chk input { width: 17px; height: 17px; accent-color: var(--tidal); flex: none; }
.filters__pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem .7rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--bg);
  font: 600 var(--micro)/1 var(--f-body); color: var(--ink);
  text-decoration: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.pill:hover { border-color: var(--glass); }
.pill.is-on { background: var(--deep); border-color: var(--deep); color: #fff; }
.pill em { font-style: normal; opacity: .55; font-size: .9em; }
.filters__clear { font-size: var(--micro); color: var(--tidal); }
.filters__map .mapbox { border-radius: var(--r-lg); overflow: hidden; }
.filters__else {
  padding: 1.1rem 1.25rem; background: var(--oyster);
  border-radius: var(--r-lg); border: 1px solid var(--line);
}
.filters__else-h {
  font: 700 var(--micro)/1 var(--f-body); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem;
}
.filters__else ul { display: grid; gap: .45rem; }
.filters__else a {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: var(--small); text-decoration: none; color: var(--ink);
}
.filters__else a:hover { color: var(--tidal); text-decoration: underline; }
.filters__else em { font-style: normal; color: var(--ink-faint); font-size: var(--micro); }

/* -------------------------------------------------------------- results */
.results__list { display: grid; gap: 0; }
.results__list > li { border-top: 1px solid var(--line); }
.results__list > li:first-child { border-top: 0; }
.results__list--plain { gap: .7rem; }
.results__list--plain > li {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem 132px minmax(0, 1fr);
  grid-template-areas: "pos media main" ". . acts";
  gap: .4rem clamp(.85rem, 2vw, 1.35rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
}
.results__list--plain .row { padding-inline: 1.1rem; }
.row__pos {
  grid-area: pos;
  font: 700 var(--step-1)/1.1 var(--f-display); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.row__media {
  grid-area: media; display: block; overflow: hidden;
  aspect-ratio: 1; border-radius: var(--r); background: var(--oyster);
}
.row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.row:hover .row__media img { transform: scale(1.05); }
.row__ph { display: grid; place-items: center; height: 100%; color: var(--line); }
.row__main { grid-area: main; display: grid; gap: .3rem; align-content: start; min-width: 0; }
.row__name { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.2; }
.row__name a { color: var(--ink); text-decoration: none; }
.row__name a:hover { color: var(--tidal); text-decoration: underline; }
.row__rate { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: var(--small); }
.row__rate .stars { color: var(--sand-deep); letter-spacing: -1px; }
.row__rate strong { font-weight: 700; }
.row__reviews { color: var(--ink-faint); font-size: var(--micro); }
.row__rate--none { color: var(--ink-faint); font-size: var(--micro); font-style: italic; }
.row__meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: var(--micro); color: var(--ink-soft);
}
.row__price { font-weight: 700; color: var(--marsh); letter-spacing: .04em; }
.row__open {
  padding: .16rem .5rem; border-radius: 100px;
  font: 700 var(--micro)/1.5 var(--f-body); letter-spacing: .06em;
}
.row__open--yes { background: rgba(122,133,72,.16); color: #55602F; }
.row__open--no  { background: rgba(46,58,66,.1);   color: var(--ink-faint); }
:root[data-theme="dark"] .row__open--yes { background: rgba(184,191,136,.2); color: var(--salt); }
.row__addr {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--micro); color: var(--ink-faint);
}
.row__blurb { font-size: var(--micro); color: var(--ink-soft); line-height: 1.6; }
.row__acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.row__acts .btn { padding: .5rem .85rem; text-transform: none; letter-spacing: .02em; }

@media (max-width: 720px) {
  .row {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas: "media main" "acts acts";
  }
  .row__pos { display: none; }
  .row__acts .btn span { font-size: var(--micro); }
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pager__step { display: inline-flex; align-items: center; gap: .4rem; font: 600 var(--small)/1 var(--f-body); text-decoration: none; }
.pager__back { transform: rotate(180deg); }
.pager__count { font-size: var(--micro); color: var(--ink-faint); }

.dirnote {
  margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.dirnote h2 { font-family: var(--f-display); font-size: var(--step-2); margin-bottom: .85rem; }
.dirnote p { font-size: var(--small); line-height: 1.75; color: var(--ink-soft); margin-bottom: .9rem; max-width: 72ch; }
.dirnote__src { display: flex; align-items: center; gap: .4rem; font-size: var(--micro); color: var(--ink-faint); }

.syncempty {
  padding: clamp(2rem, 4vw, 3.25rem); text-align: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-xl);
}
.syncempty__ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--oyster); color: var(--sand-deep); margin-bottom: 1.1rem; }
.syncempty h3 { font-family: var(--f-display); font-size: var(--step-2); margin-bottom: .8rem; }
.syncempty p { font-size: var(--small); line-height: 1.7; color: var(--ink-soft); max-width: 56ch; margin: 0 auto .9rem; }
.syncempty pre { display: inline-block; margin: .35rem 0 1rem; padding: .7rem 1.1rem; background: var(--oyster); border-radius: var(--r-sm); font-size: var(--small); }
.syncempty__why { font-size: var(--micro) !important; color: var(--ink-faint) !important; }

/* ------------------------------------------------------------- map box */
.mapbox { position: relative; aspect-ratio: 4 / 3; background: var(--oyster); border-radius: var(--r-lg); overflow: hidden; }
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapbox__stub { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1.25rem; text-align: center; }
.mapbox__ico { color: var(--glass); }
.mapbox__t { font-family: var(--f-display); font-size: var(--step-1); }
.mapbox__c { font-size: var(--micro); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mapbox__note { font-size: var(--micro); color: var(--ink-faint); max-width: 30ch; margin-top: .3rem; }
.mapwide { margin-top: clamp(2rem, 4vw, 3rem); }
.mapwide .mapbox { aspect-ratio: 21 / 9; }

/* ======================================================== BUSINESS PAGE */
.bizshots {
  display: grid; gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  max-height: 44vh; overflow: hidden;
}
@media (min-width: 780px) { .bizshots { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } }
.bizshots__i { position: relative; margin: 0; overflow: hidden; background: var(--oyster); }
.bizshots__i img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (min-width: 780px) {
  .bizshots__i--lead { grid-row: span 2; }
  .bizshots__i--lead img { aspect-ratio: 4 / 3.2; }
}
.bizshots figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: .4rem .6rem;
  background: linear-gradient(180deg, transparent, rgba(7,41,61,.8));
  color: rgba(255,255,255,.8); font-size: .62rem; letter-spacing: .02em;
}
.bizshots__i:not(.bizshots__i--lead) figcaption { display: none; }

.bizhead { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; background: var(--cream); }
.bizhead--nophoto { padding-top: clamp(2.5rem, 5vw, 4rem); }
.bizhead .crumbs ol { justify-content: flex-start; }
.bizhead__in { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 900px) { .bizhead__in { grid-template-columns: minmax(0, 1fr) auto; } }
.bizhead__id .fit { text-align: left; margin-bottom: .6rem; }
.bizhead__rate { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--step-0); margin-bottom: .4rem; }
.bizhead__rate .stars { color: var(--sand-deep); letter-spacing: -1px; font-size: 1.15em; }
.bizhead__rate strong { font-weight: 700; }
.bizhead__rate a { font-size: var(--small); }
.bizhead__norate { font-size: var(--small); color: var(--ink-faint); font-style: italic; }
.bizhead__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--small); color: var(--ink-soft); }
.bizhead__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.bizhead__acts .btn { text-transform: none; letter-spacing: .02em; }

.bizbody { display: grid; gap: clamp(1.75rem, 3.4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .bizbody { grid-template-columns: minmax(0, 1fr) 320px; } }
.bizmain { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.bizblock { padding-bottom: clamp(1.5rem, 2.6vw, 2rem); border-bottom: 1px solid var(--line); }
.bizblock:last-child { border-bottom: 0; padding-bottom: 0; }
.bizblock h2 { font-family: var(--f-display); font-size: var(--step-2); margin-bottom: .9rem; }
.bizabout { font-size: var(--step-0); line-height: 1.75; color: var(--ink-soft); }
.bizblock__src { margin-top: .8rem; font-size: var(--micro); color: var(--ink-faint); }
.bizmissing { font-size: var(--small); color: var(--ink-soft); line-height: 1.7; }
.bizTags { display: flex; flex-wrap: wrap; gap: .4rem; }
.bizTags li {
  padding: .35rem .75rem; border-radius: 100px;
  background: var(--oyster); border: 1px solid var(--line);
  font-size: var(--micro); color: var(--ink-soft);
}
.bizhours { max-width: 420px; font-size: var(--small); }
.bizhours th, .bizhours td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.bizhours th { font-weight: 500; color: var(--ink-soft); }
.bizhours td { text-align: right; font-variant-numeric: tabular-nums; }
.bizhours tr.is-today th, .bizhours tr.is-today td { font-weight: 700; color: var(--ink); }
.bizhours tr.is-today th span {
  margin-left: .5rem; padding: .1rem .45rem; border-radius: 100px;
  background: var(--sand); color: var(--deep-ink);
  font: 700 .6rem/1.6 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
}
.bizaddr { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; font-size: var(--small); color: var(--ink-soft); }

.bizside { display: grid; gap: 1rem; }
@media (min-width: 900px) { .bizside { position: sticky; top: calc(var(--hdr-h) + 1rem); } }
.bizcard { padding: 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.bizcard__open { padding: .5rem .8rem; border-radius: var(--r-sm); margin-bottom: 1.1rem; font: 700 var(--small)/1 var(--f-body); text-align: center; }
.bizcard__open--yes { background: rgba(122,133,72,.16); color: #4C562A; }
.bizcard__open--no  { background: rgba(46,58,66,.09);  color: var(--ink-soft); }
:root[data-theme="dark"] .bizcard__open--yes { background: rgba(184,191,136,.2); color: var(--salt); }
.bizcard__dl { display: grid; gap: .9rem; }
.bizcard__dl dt { display: flex; align-items: center; gap: .4rem; font: 700 var(--micro)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem; }
.bizcard__dl dt .ico { color: var(--sand-deep); }
.bizcard__dl dd { margin: 0; font-size: var(--small); line-height: 1.6; word-break: break-word; }
.bizcard__cta { width: 100%; margin-top: 1.25rem; }
.bizcard__claim { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: var(--micro); line-height: 1.6; color: var(--ink-faint); }
.pcard__count { font-size: var(--micro); color: var(--ink-faint); }
.pcard__count strong { font-family: var(--f-display); font-size: 1.4em; color: var(--deep); }
:root[data-theme="dark"] .pcard__count strong { color: var(--glass); }

/* ====================================================== NEWSLETTER POPUP */
.nl {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center; padding: var(--gut);
  background: rgba(4,27,39,.66); backdrop-filter: blur(7px);
  animation: nlfade .3s var(--ease-out);
}
.nl[hidden] { display: none; }
@keyframes nlfade { from { opacity: 0; } to { opacity: 1; } }
.nl__sheet {
  position: relative; width: min(470px, 100%);
  padding: clamp(1.75rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 1.9rem);
  text-align: center; border-radius: var(--r-xl);
  background:
    radial-gradient(520px 260px at 50% -10%, rgba(30,111,138,.18), transparent 65%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  animation: nlpop .42s var(--ease-out);
  max-height: calc(100vh - 2 * var(--gut)); overflow-y: auto;
}
@keyframes nlpop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.nl__sheet::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, var(--marsh), var(--tidal), var(--glass), var(--sand));
}
.nl__art { display: grid; place-items: center; margin-bottom: .5rem; }
.nl__art img { width: 92px; height: auto; }
.nl__t { font-family: var(--f-display); font-size: clamp(1.6rem, 4vw, 2.15rem); margin-bottom: .7rem; text-wrap: balance; }
.nl__b { font-size: var(--small); line-height: 1.68; color: var(--ink-soft); max-width: 38ch; margin: 0 auto 1.5rem; }
.nl__form { display: grid; gap: .55rem; }
@media (min-width: 420px) { .nl__form { grid-template-columns: minmax(0, 1fr) auto; } }
.nl__form input {
  width: 100%; padding: .9rem 1.1rem;
  font: 400 var(--step-0) var(--f-body); color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 100px;
}
.nl__form input:focus { outline: 3px solid var(--sand); outline-offset: 2px; border-color: var(--sand); }
.nl__form .btn { white-space: nowrap; }
.nl__fine { margin-top: 1rem; font-size: var(--micro); color: var(--ink-faint); line-height: 1.55; }
.nl__no {
  margin-top: .9rem; background: none; border: 0; cursor: pointer;
  font: 500 var(--micro)/1 var(--f-body); color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: .2em;
}
.nl__no:hover { color: var(--ink); }
.ftr__msg, .nl__msg, .planner__status {
  font-size: var(--micro); line-height: 1.5; margin-top: .55rem; min-height: 1.1em;
}
.ftr__msg.is-ok, .nl__msg.is-ok, .planner__status.is-ok { color: var(--salt); }
.nl__msg.is-ok, .planner__status.is-ok { color: #4C562A; }
.ftr__msg.is-err, .nl__msg.is-err, .planner__status.is-err { color: #D98A80; }
.nl__msg.is-err, .planner__status.is-err { color: #9C3328; }

/* ============================================================ CONCIERGE CTA */
.cta {
  margin: clamp(2rem, 4vw, 3rem) 0;
  border-radius: var(--r-xl); overflow: hidden;
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(30,111,138,.5), transparent 62%),
    linear-gradient(150deg, var(--deep) 0%, var(--deep-ink) 72%, #05202F 100%);
  color: #EAF2F6;
}
.cta__in {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.6rem, 3.4vw, 2.6rem) clamp(1.4rem, 3.4vw, 2.75rem);
}
@media (min-width: 820px) { .cta__in { grid-template-columns: minmax(0, 1fr) auto; } }
.cta__kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 var(--micro)/1 var(--f-body); letter-spacing: .18em;
  text-transform: uppercase; color: var(--sand); margin-bottom: .7rem;
}
.cta__t {
  font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.05rem);
  color: #fff; text-align: left; text-wrap: balance; line-height: 1.14; margin-bottom: .6rem;
}
.cta__b { font-size: var(--small); line-height: 1.7; color: rgba(234,242,246,.82); max-width: 58ch; }
.cta__act { display: grid; gap: .6rem; justify-items: start; }
@media (min-width: 820px) { .cta__act { justify-items: center; } }
.cta__act .btn { white-space: nowrap; }
.cta__note {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 600 var(--micro)/1 var(--f-body); color: var(--salt); letter-spacing: .04em;
}
.cta--tight .cta__in { padding-block: clamp(1.2rem, 2.4vw, 1.8rem); }

/* ------------------------------------------------- what is biting widget */
.bitew { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem, 2.2vw, 1.5rem); }
.bitew__h .kicker { text-align: left; margin-bottom: .3rem; }
.bitew__h h2 { font-family: var(--f-display); font-size: var(--step-2); text-align: left; margin-bottom: .9rem; }
.bitew__cond { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line-soft); }
.bitew__cond p { display: grid; gap: .1rem; }
.bitew__cond span { font: 700 var(--micro)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bitew__cond strong { font: 600 var(--step-1)/1.1 var(--f-display); color: var(--deep); }
.bitew__cond em { font-style: normal; font-size: var(--micro); color: var(--ink-faint); }
:root[data-theme="dark"] .bitew__cond strong { color: var(--glass); }
.bitew__list { display: grid; gap: .5rem; }
.bitew__list li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: var(--small); }
.bitew__n { font-weight: 600; }
.bitew__p { padding: .1rem .45rem; border-radius: 100px; background: var(--sand); color: var(--deep-ink); font: 700 .6rem/1.6 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.bitew__w { font-size: var(--micro); color: var(--ink-faint); }
.bitew__src { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); font-size: var(--micro); line-height: 1.6; color: var(--ink-faint); }

/* --------------------------------------------------------- planner form */
.pagehead--planner { background: linear-gradient(178deg, var(--oyster), var(--cream)); text-align: center; }
.planner__free { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; padding: .42rem .95rem; border-radius: 100px; background: rgba(122,133,72,.14); color: #4C562A; font: 600 var(--small)/1 var(--f-body); }
.plannerpage { display: grid; gap: clamp(1.75rem, 3.4vw, 3rem); align-items: start; }
@media (min-width: 980px) { .plannerpage { grid-template-columns: minmax(0, 1fr) 320px; } }
.planner__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.planner__steps { display: grid; gap: 1rem; counter-reset: pstep; }
.pstep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.2rem, 2.4vw, 1.75rem); }
.pstep__h { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.2rem; }
.pstep__n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--deep); color: #fff; font: 700 var(--small)/1 var(--f-body); }
.pstep__h h2 { font-family: var(--f-display); font-size: var(--step-2); text-align: left; }
.pstep__h p { font-size: var(--micro); color: var(--ink-faint); margin-top: .2rem; }
.pstep__body { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pfield { display: grid; gap: .35rem; }
.pfield--wide, .pfield--checks { grid-column: 1 / -1; }
.pfield label, .pfield legend { font: 700 var(--micro)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 0; }
.pfield label em { font-style: normal; color: var(--sand-deep); margin-left: .3rem; }
.pfield input, .pfield select, .pfield textarea {
  padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font: 400 var(--step-0) var(--f-body); background: var(--bg); color: var(--ink); width: 100%;
}
.pfield input:focus, .pfield select:focus, .pfield textarea:focus { outline: 3px solid var(--sand); outline-offset: 1px; border-color: var(--sand); }
.pfield__help { font-size: var(--micro); color: var(--ink-faint); line-height: 1.5; }
.pfield--checks fieldset { border: 0; padding: 0; margin: 0; }
.pchecks { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: .6rem; }
.pchk { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); font-size: var(--small); cursor: pointer; }
.pchk:hover { border-color: var(--glass); }
.pchk input { width: 17px; height: 17px; accent-color: var(--tidal); flex: none; }
.pchk:has(input:checked) { border-color: var(--tidal); background: rgba(30,111,138,.07); }
.planner__send { margin-top: 1.5rem; text-align: center; display: grid; gap: .7rem; justify-items: center; }
.planner__fine { font-size: var(--micro); color: var(--ink-faint); line-height: 1.6; max-width: 46ch; }
.plannerside { display: grid; gap: 1rem; }
@media (min-width: 980px) { .plannerside { position: sticky; top: calc(var(--hdr-h) + 1rem); } }
.pwhy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; }
.pwhy h2 { font-family: var(--f-display); font-size: var(--step-2); text-align: left; margin-bottom: 1rem; }
.pwhy__i { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line-soft); }
.pwhy__i:last-child { border: 0; margin: 0; padding: 0; }
.pwhy__i h3 { font-size: var(--small); font-weight: 700; margin-bottom: .25rem; }
.pwhy__i p { font-size: var(--micro); line-height: 1.65; color: var(--ink-soft); }

/* -------------------------------------------------------------- thanks */
.thanks { text-align: center; }
.thanks__mark { display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: rgba(122,133,72,.16); color: var(--marsh); margin-bottom: 1.25rem; }
.thanks__ps { margin-top: 1.5rem; font-size: var(--small); color: var(--ink-soft); }

/* =============================================================== ARTICLE */
.arthead { padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.4vw, 2rem); background: linear-gradient(180deg, var(--oyster), var(--cream)); text-align: center; }
.arthead__stamp { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: center; margin-top: 1.1rem; font-size: var(--micro); color: var(--ink-faint); }
.arthead__stamp .ico { color: var(--sand-deep); }

/*
   Full content width, centred.

   Two earlier attempts were wrong. Capping it at 880px left it narrower than
   everything around it. Matching it to the 68ch prose column then pinned it to
   the left with dead space beside it, because the sidebar does not begin until
   below the video. The player is the lead asset on this page, so it gets the
   whole shell and the caption centres under it.
*/
.artvid { padding-bottom: clamp(1.75rem, 3.4vw, 2.75rem); }
.artvid .ytf { width: 100%; }
.artvid__cap, .artvid__alt { max-width: 70ch; margin-inline: auto; }
.ytf { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--deep-ink); box-shadow: var(--sh-2); }
.ytf__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.ytf__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), opacity .3s var(--ease); }
.ytf__btn:hover .ytf__thumb { transform: scale(1.03); opacity: .88; }
.ytf__play { position: absolute; inset: 0; display: grid; place-items: center; }
.ytf__play svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); transition: transform .3s var(--ease); }
.ytf__btn:hover .ytf__play svg { transform: scale(1.09); }
.ytf iframe { width: 100%; height: 100%; border: 0; display: block; }
.ytf__fallback { position: absolute; inset: auto 0 1rem; text-align: center; color: #fff; }
.artvid__cap { margin-top: .8rem; font-size: var(--micro); line-height: 1.65; color: var(--ink-faint); text-align: center; }
.artvid__cap strong { display: block; color: var(--ink); font-size: var(--small); margin-bottom: .2rem; }

.artbody { display: grid; gap: clamp(1.75rem, 3.4vw, 3rem); align-items: start; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 980px) { .artbody { grid-template-columns: minmax(0, 1fr) 300px; } }
.artmain { max-width: 68ch; }
.art__lede { font-family: var(--f-display); font-size: var(--step-2); font-weight: 500; line-height: 1.5; color: var(--deep); margin-bottom: 1.6rem; }
:root[data-theme="dark"] .art__lede { color: var(--glass); }
.artmain h2 { font-family: var(--f-display); font-size: clamp(1.45rem, 2.8vw, 2rem); margin: 2.4rem 0 .9rem; text-align: left; text-wrap: balance; scroll-margin-top: calc(var(--hdr-h) + 1.5rem); }
.artmain p { margin-bottom: 1.15rem; line-height: 1.78; text-wrap: pretty; }
.art__ul { display: grid; gap: .7rem; margin: 0 0 1.5rem; }
.art__ul li { position: relative; padding-left: 1.5rem; line-height: 1.72; }
.art__ul li::before { content: ""; position: absolute; left: .25rem; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--sand); }
.art__steps { display: grid; gap: .7rem; margin: 0 0 1.6rem; counter-reset: astep; }
.art__steps li { counter-increment: astep; display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .9rem; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.art__steps li::before { content: counter(astep); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--deep); color: #fff; font: 700 var(--small)/1 var(--f-body); }
.art__steps strong { font-size: var(--step-0); }
.art__steps span { font-size: var(--small); line-height: 1.65; color: var(--ink-soft); }
.art__note { display: flex; gap: .7rem; align-items: flex-start; margin: 1.6rem 0; padding: 1rem 1.2rem; background: rgba(30,111,138,.08); border-left: 3px solid var(--tidal); border-radius: 0 var(--r) var(--r) 0; }
.art__note .ico { margin-top: 3px; color: var(--tidal); flex: none; }
.art__note p { margin: 0 !important; font-size: var(--small); line-height: 1.7; }
.art__q { margin: 1.8rem 0; padding: 1.4rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sand); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.art__q blockquote { margin: 0; }
.art__q p { font-family: var(--f-display); font-size: var(--step-1); font-style: italic; line-height: 1.55; margin-bottom: .9rem !important; }
.art__q figcaption { font-size: var(--micro); }
.art__q figcaption strong { display: block; color: var(--ink); font-size: var(--small); }
.art__q figcaption span { color: var(--ink-faint); }
.art__close { margin: 2.2rem 0 0; padding: 1.5rem 1.7rem; text-align: center; background: linear-gradient(150deg, var(--deep), var(--deep-ink)); border-radius: var(--r-lg); color: #EAF2F6; }
.art__close blockquote { margin: 0; }
.art__close p { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.45; color: #fff; margin-bottom: .8rem !important; }
.art__close figcaption { font-size: var(--micro); color: var(--sand); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.art__src { display: flex; gap: .5rem; align-items: flex-start; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--micro) !important; line-height: 1.65 !important; color: var(--ink-faint); }
.art__src .ico { margin-top: 2px; flex: none; }

.artside { display: grid; gap: 1rem; }
@media (min-width: 980px) { .artside { position: sticky; top: calc(var(--hdr-h) + 1rem); } }
.emerg { padding: 1.3rem; background: rgba(180,60,50,.07); border: 1px solid rgba(180,60,50,.28); border-radius: var(--r-lg); }
.emerg__k { font: 700 var(--micro)/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: #9C3328; margin-bottom: .5rem; }
.emerg__n { font: 700 1.8rem/1 var(--f-display); margin-bottom: .6rem; }
.emerg__n a { color: #9C3328; text-decoration: none; }
.emerg__b { font-size: var(--micro); line-height: 1.65; color: var(--ink-soft); }
.artnav { padding: 1.2rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.artnav__k { font: 700 var(--micro)/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .8rem; }
.artnav ul { display: grid; gap: .55rem; }
.artnav a { font-size: var(--small); text-decoration: none; color: var(--ink); }
.artnav a:hover { color: var(--tidal); text-decoration: underline; }

/* ============================================================ GROUP HUB */
/* Column count comes from grid_plan() via --cols, so the last row is always
   complete regardless of how many categories a group holds. */
.ghgrid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .ghgrid { grid-template-columns: repeat(min(2, var(--cols, 2)), 1fr); } }
@media (min-width: 1040px) { .ghgrid { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
/* Spans only apply once the planned column count is actually in effect. */
@media (max-width: 1039px) { .ghgrid > * { grid-column: auto !important; } }
.ghcard {
  display: grid; grid-template-columns: 46px minmax(0,1fr) 18px; gap: .9rem; align-items: center;
  padding: 1.05rem 1.15rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ghcard:hover { border-color: var(--glass); transform: translateY(-3px); box-shadow: var(--sh-1); }
.ghcard__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(30,111,138,.13), rgba(122,133,72,.13)); color: var(--tidal); }
.ghcard__txt { display: grid; gap: .2rem; min-width: 0; }
.ghcard__txt strong { display: flex; align-items: center; gap: .5rem; font-size: var(--step-0); }
.ghcard__txt em { font-style: normal; font-size: var(--micro); font-weight: 600; color: var(--ink-faint);
  background: var(--oyster); padding: .1rem .45rem; border-radius: 100px; }
.ghcard__txt small { font-size: var(--micro); color: var(--ink-faint); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ghcard__go { color: var(--sand-deep); transition: transform .25s var(--ease); }
.ghcard:hover .ghcard__go { transform: translateX(4px); }

.ghtips { display: grid; gap: .7rem; grid-template-columns: 1fr; max-width: 900px;
  margin: clamp(2rem, 4vw, 3rem) auto 0; }
@media (min-width: 720px) { .ghtips { grid-template-columns: repeat(2, 1fr); } }
.ghtips li { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--sand); border-radius: 0 var(--r) var(--r) 0; }
.ghtips__t { font: 700 var(--small)/1.3 var(--f-body); margin-bottom: .35rem; }
.ghtips__d { font-size: var(--micro); line-height: 1.65; color: var(--ink-soft); }
.ghfish { max-width: 900px; margin-inline: auto; }
.ytf.is-live { background: #000; }
.artvid__alt { margin-top: .6rem; font-size: var(--micro); color: var(--ink-faint); text-align: center; }
.artvid__alt a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }