/* Northumberland Fisheries Museum — site styles
   Palette from the harbour and the building: a deep sea navy, the weathered
   red of a lighthouse band, on a warm sand ground.
   Light-theme only by design: this is a brochure site, not an app. */

:root {
  --brand: #0b3c5d;
  --brand-dark: #07293e;
  --brand-ink: #071d2b;      /* near-black navy for dark surfaces */
  --accent: #c9472f;         /* lighthouse red */
  --accent-dark: #a3341f;
  --sea: #7fb2d1;

  --ink: #16202b;
  --body: #46525f;
  --muted: #6f7c89;

  --paper: #ffffff;
  --sand: #f6f4ef;
  --sand-deep: #e9e4d9;
  --line: #dcd6ca;

  --wrap: 1180px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 10px;
  --shadow: 0 1px 2px rgba(11, 30, 43, .06), 0 8px 24px rgba(11, 30, 43, .08);
  --shadow-lg: 0 2px 4px rgba(11, 30, 43, .08), 0 18px 44px rgba(11, 30, 43, .14);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 750;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.2rem); }
h3 { font-size: clamp(1.12rem, 1.04rem + .4vw, 1.32rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--accent-dark); }

/* Last-resort guard against sideways scroll. `anywhere` (unlike `break-word`)
   also shrinks the element's min-content width, which is what actually stops a
   long email or URL forcing a grid column wider than the viewport.
   Reset it wherever these sit in a flex row — there it lets a child collapse
   to one character per line. */
a, p, dd, li, code, blockquote { overflow-wrap: anywhere; }

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

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.narrow { max-width: 46rem; margin-inline: auto; }
.center { text-align: center; }

/* Hidden from sight, still present for assistive tech. Clipped rather than
   pushed off-canvas: content at left:-9999px can be scrolled to on mobile,
   which reads as the page drifting sideways. */
.visually-hidden, .skip, .hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.hp > * { width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; }

.skip:focus {
  position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
  margin: 0; padding: .75rem 1.25rem; overflow: visible; clip: auto;
  clip-path: none; border-radius: 6px; background: var(--ink); color: #fff; z-index: 200;
}

.muted { color: var(--muted); }
.lede { font-size: clamp(1.06rem, 1rem + .4vw, 1.25rem); color: var(--ink); }
.caption { margin-top: .75rem; font-size: .92rem; color: var(--muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

.btn-ghost { border-color: currentColor; color: var(--brand); background: transparent; }
.btn-ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.btn-on-dark { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.btn-on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- notice bar ---------- */

.notice-bar {
  margin: 0; padding: .65rem 1rem; text-align: center;
  background: var(--accent); color: #fff; font-weight: 650; font-size: .95rem;
}

/* ---------- header and navigation ---------- */

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
}

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 80px;
}

/* The logo is a tall badge (450x346), not a wide wordmark, so it is capped by
   height and allowed to keep its proportions. */
.brand { display: block; flex: none; }
.brand img { width: auto; height: 62px; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; flex: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer;
}
.bars, .bars::before, .bars::after {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; }
.bars::after { top: 7px; }
[aria-expanded="true"] .bars { background: transparent; }
[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* --- mobile: a single scrollable panel, submenus always expanded ---------
   Sixteen pages across five sections is too many to hide behind tap-to-open
   accordions on a phone; showing the children indented is fewer taps and no
   guessing. */
.nav { display: none; }
.nav.open {
  display: block; position: absolute; inset: 100% 0 auto;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: .5rem clamp(1rem, 4vw, 2rem) 1.5rem;
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul > li + li { border-top: 1px solid var(--line); }
.nav a {
  display: block; padding: .85rem .25rem; color: var(--ink);
  font-weight: 650; text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-dark); }

.nav .has-sub > ul { margin: 0 0 .6rem .9rem; border-left: 2px solid var(--sand-deep); }
.nav .has-sub > ul a { padding: .55rem .9rem; font-weight: 500; font-size: .95rem; color: var(--body); }

.btn-tickets { width: 100%; margin-top: 1rem; }

/* --- desktop: a real menu bar with hover/focus dropdowns ----------------- */
@media (min-width: 68rem) {
  .nav-toggle { display: none; }
  .nav {
    display: flex !important; position: static; align-items: center;
    gap: 1.25rem; padding: 0; border: 0; box-shadow: none;
    max-height: none; overflow: visible;
  }
  .nav > ul { display: flex; align-items: center; gap: .35rem; }
  .nav > ul > li + li { border-top: 0; }
  .nav > ul > li { position: relative; }
  .nav > ul > li > a {
    padding: .55rem .7rem; font-size: .97rem; border-radius: 6px; white-space: nowrap;
  }
  .nav > ul > li > a:hover { background: var(--sand); }
  .nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); border-radius: 6px 6px 0 0; }

  /* Dropdowns. Opened on hover and on keyboard focus — :focus-within is what
     makes them reachable by tab, which a hover-only menu never is. */
  .nav .has-sub > ul {
    position: absolute; top: 100%; left: 0; min-width: 15rem;
    margin: 0; border: 1px solid var(--line); border-left: 1px solid var(--line);
    border-radius: 0 0 8px 8px; background: var(--paper);
    box-shadow: var(--shadow-lg); padding: .35rem;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
  }
  .nav .has-sub:hover > ul,
  .nav .has-sub:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
  .nav .has-sub > ul a { padding: .55rem .7rem; border-radius: 5px; font-size: .95rem; white-space: nowrap; }
  .nav .has-sub > ul a:hover { background: var(--sand); color: var(--accent-dark); }

  /* A caret, so a parent with children looks different from one without. */
  .nav .has-sub > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  .btn-tickets { width: auto; margin: 0; padding: .65rem 1.2rem; font-size: .95rem; white-space: nowrap; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section-tint { background: var(--sand); }
.page-head {
  padding-block: clamp(2rem, 5vw, 3.25rem);
  background: var(--brand); color: rgba(255,255,255,.9);
}
.page-head h1 { color: #fff; }
.page-head .lede { color: rgba(255,255,255,.9); }
.page-head a { color: #fff; }
.crumb { margin-bottom: .5rem; font-size: .92rem; }

/* ---------- hero ---------- */

.hero { position: relative; display: grid; isolation: isolate; }
.hero > img {
  grid-area: 1 / 1; width: 100%; height: clamp(320px, 52vh, 560px);
  object-fit: cover;
}
.hero::after {
  content: ""; grid-area: 1 / 1; z-index: 1;
  background: linear-gradient(180deg, rgba(7,29,43,.25) 0%, rgba(7,29,43,.72) 100%);
}
.hero-inner {
  grid-area: 1 / 1; z-index: 2; align-self: end;
  padding-block: clamp(1.75rem, 5vw, 3.25rem); color: #fff;
}
.hero-inner h1 { color: #fff; }
.hero-inner .lede { color: rgba(255,255,255,.92); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

/* ---------- grids and cards ---------- */

.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.grid > * { min-width: 0; }
@media (min-width: 44rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: 1.35rem; }
.card-body > :last-child { margin-bottom: 0; }

.more { display: inline-block; margin-top: .6rem; font-weight: 700; text-decoration: none; }
.more::after { content: " \2192"; }
.more:hover { text-decoration: underline; }

.rounded { border-radius: var(--radius); box-shadow: var(--shadow); }

.split { display: grid; gap: var(--gap); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }

.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.shot figcaption { margin-top: .6rem; font-size: .9rem; color: var(--muted); }

.panel-note {
  margin-top: var(--gap); padding: 1.35rem 1.5rem;
  background: var(--paper); border-left: 4px solid var(--sea); border-radius: 0 8px 8px 0;
}

.gallery-shop { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 56rem) { .gallery-shop { grid-template-columns: repeat(5, 1fr); } }
.gallery-shop img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* ---------- quotes ---------- */

.quotes blockquote {
  margin: 0; padding: 1.4rem 1.5rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.quotes blockquote p { font-size: .98rem; }
.quotes cite { display: block; margin-top: .8rem; font-style: normal; font-weight: 700; color: var(--brand); font-size: .92rem; }

/* ---------- call-to-action band ---------- */

.cta-band {
  background: var(--brand); color: #fff; text-align: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 42rem; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 1.5rem; }

/* ---------- hours ---------- */

.hours { margin: 0 0 1rem; }
.hours > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.hours > div:last-child { border-bottom: 0; }
.hours dt { font-weight: 650; }
.hours dd { margin: 0; }
/* On a light background the white divider is invisible. */
.section .hours > div, .hours-lg > div { border-bottom-color: var(--line); }
.hours-lg > div { padding: .7rem 0; font-size: 1.05rem; }

.admission-note {
  margin-top: 1rem; padding: .85rem 1.1rem;
  background: var(--sand-deep); border-radius: 8px; font-weight: 600; color: var(--ink);
}

.addr-block {
  padding: 1.25rem 1.4rem; background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.addr { font-style: normal; }

.route-list { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 42rem; }
.route-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.route-list li:last-child { border-bottom: 0; }
.route-list span { font-weight: 650; color: var(--ink); }

.map-embed { margin-top: 1.5rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-embed iframe { display: block; width: 100%; height: clamp(280px, 45vh, 420px); border: 0; }

/* ---------- FAQ ---------- */

.faq { max-width: 52rem; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); margin-bottom: .85rem; box-shadow: var(--shadow);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details > div { padding: 0 1.3rem 1.3rem; }

/* ---------- blog and news ---------- */

.post-grid { align-items: start; }
.post-card .post-thumb { display: block; }
.post-card .post-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.post-thumb-blank { display: block; aspect-ratio: 4 / 3; background: var(--sand-deep); }
.post-date { margin: 0 0 .3rem; font-size: .86rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.post-title { font-size: 1.15rem; margin-bottom: .5rem; }
.post-title a { color: var(--ink); text-decoration: none; }
.post-title a:hover { color: var(--accent-dark); }

.news-list { display: grid; gap: var(--gap); max-width: 56rem; }
.news-item { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 44rem) { .news-item { grid-template-columns: 16rem 1fr; } }
.news-item h2 { font-size: 1.3rem; }
.news-item h2 a { color: var(--ink); text-decoration: none; }
.news-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

.post-hero { margin-bottom: 1.75rem; }

/* Post bodies are staff-written HTML from the old editor — the styling here
   has to cope with whatever it contains, not an ideal document. */
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose img { border-radius: 8px; margin: 1.5rem 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote {
  margin: 1.5rem 0; padding: .3rem 0 .3rem 1.2rem;
  border-left: 4px solid var(--sea); color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose th, .prose td { padding: .5rem .7rem; border: 1px solid var(--line); text-align: left; }
/* Video embeds arrived as fixed-width iframes; make them fit a phone. */
.prose iframe, .embed-holder iframe {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px;
}

.post-nav {
  display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2.5rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
@media (min-width: 40rem) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a {
  display: block; padding: .9rem 1.1rem; background: var(--sand);
  border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 650;
}
.post-nav a:hover { background: var(--sand-deep); }
.post-nav span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.post-nav-next { text-align: right; }
.post-back { margin-top: 2rem; }

.resource-list { display: grid; gap: var(--gap); max-width: 52rem; margin-inline: auto; }
.resource { padding: 1.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.resource h3 { margin-bottom: .8rem; }

/* ---------- Dine, Shop & Stay directory ---------- */

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.75rem; }
.filter-label { font-weight: 700; color: var(--ink); margin-right: .3rem; }
.chip {
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--body); cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.directory { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.biz {
  display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: start;
  padding: 1.25rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (min-width: 40rem) { .biz { grid-template-columns: 13rem 1fr; } }
.biz[hidden] { display: none; }
.biz-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.biz h2 { font-size: 1.16rem; margin-bottom: .2rem; }
.biz h2 a { color: var(--ink); text-decoration: none; }
.biz h2 a:hover { color: var(--accent-dark); text-decoration: underline; }
.biz-cat {
  display: inline-block; margin: 0 0 .5rem; padding: .12rem .6rem;
  background: var(--sand-deep); border-radius: 999px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand);
}
.biz-body > :last-child { margin-bottom: 0; }
.directory-note { margin-top: 1.5rem; font-size: .9rem; }

/* ---------- support page ---------- */

.support-feature {
  padding: 1.75rem; margin-bottom: var(--gap); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.support-feature img { border-radius: 8px; margin-bottom: 1.25rem; max-height: 20rem; object-fit: cover; width: 100%; }
.price-line { font-size: 1.1rem; color: var(--ink); }
.price-line strong { color: var(--accent-dark); }

/* ---------- forms ---------- */

.form { margin-top: 1.25rem; }
.field { margin-bottom: 1.1rem; }
.row { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .row { grid-template-columns: 1fr 1fr; } }
label { display: block; margin-bottom: .35rem; font-weight: 650; color: var(--ink); }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; color: var(--ink); background: var(--paper);
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.hint { margin: .4rem 0 0; font-size: .88rem; color: var(--muted); }

.alert { padding: 1rem 1.2rem; border-radius: 8px; margin-bottom: 1.25rem; }
.alert p:last-child { margin-bottom: 0; }
.alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.alert.ok { background: #e7f5ec; border: 1px solid #7fc79b; color: #14532d; }
.alert.err { background: #fdecec; border: 1px solid #e39c9c; color: #7f1d1d; }
.alert.info { background: #eef4fa; border: 1px solid #9fc0e0; color: #0b3c5d; }

/* ---------- long-form legal pages ---------- */

.prose h2 { margin-top: 2.2rem; }
.prose code { background: var(--sand-deep); padding: .1rem .35rem; border-radius: 4px; font-size: .92em; }

/* ---------- footer ---------- */

.site-foot { background: var(--brand-ink); color: rgba(255,255,255,.82); padding-top: clamp(2.75rem, 6vw, 4rem); }
.site-foot h2 { color: #fff; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase; }
.site-foot a { color: #fff; }
.site-foot a:hover { color: var(--sea); }
.site-foot .muted { color: rgba(255,255,255,.6); }

.foot-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; padding-bottom: 2.5rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: repeat(3, 1fr); } }
/* An email address is one long unbreakable string; without this it sets the
   column's minimum width and pushes the page sideways on a phone. */
.foot-grid > * { min-width: 0; }
.foot-grid a { overflow-wrap: anywhere; }

.social { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.foot-legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  align-items: center; padding-block: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.14); font-size: .89rem;
}
.foot-legal p { margin: 0; }
.foot-legal a + a { margin-left: 1.25rem; }

/* ==========================================================================
   Wild Salmon Unlimited components
   ==========================================================================
   One set of patterns, reused. A list of news items, projects, links or
   documents is the same object in different clothes, so they share the same
   row: optional thumbnail at a fixed width, text beside it, one column below
   44rem. Doing it once is what makes the pages look like one site.
   ========================================================================== */

/* Only the measure. NOT the margins.
   Most prose sections are <div class="wrap narrow">, so setting margin-inline
   here overrides .wrap's own `margin-inline: auto` and drags the whole
   container to the left edge of the viewport, while the heading above it stays
   in the centred wrap. That is what put the first section of every page hard
   against the left with the right half empty. */
.narrow { max-width: 46rem; }

.eyebrow {
  display: block; margin-bottom: .5rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sea);
}
.page-head .crumb { margin-bottom: .4rem; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.more-wrap { margin-top: 2rem; }
.home-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; }

/* --- the shared media row ------------------------------------------------ */
.news-list, .project-list, .doc-list, .link-list, .meeting-list, .board-list, .logo-grid {
  list-style: none; margin: 0; padding: 0;
}
.news-item, .project {
  display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.news-item:last-child, .project:last-child { border-bottom: 0; }
.news-thumb, .project-thumb { flex: 0 0 15rem; max-width: 100%; display: block; }
.news-thumb img, .project-thumb img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 8px; box-shadow: var(--shadow);
}
/* min-width:0 lets the text column shrink rather than force the row wider.
   Without it, an item with no thumbnail sat in a 15rem column and the text
   ran down the left in a ribbon. */
.news-body, .project-body { flex: 1 1 22rem; min-width: 0; }
.news-body > :last-child, .project-body > :last-child { margin-bottom: 0; }
.news-item h3, .project h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.news-item h3 a, .project h2 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover, .project h2 a:hover { color: var(--accent-dark); }

.news-year { margin-bottom: 2.5rem; }
.news-year > h2 {
  padding-bottom: .4rem; margin-bottom: .5rem;
  border-bottom: 3px solid var(--brand); font-size: 1.5rem; color: var(--brand);
}

/* --- documents and links ------------------------------------------------- */
.doc-list li, .link-list li, .meeting-list li { border-bottom: 1px solid var(--line); }
.doc-list li:last-child, .link-list li:last-child, .meeting-list li:last-child { border-bottom: 0; }

.doc-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
  padding: .95rem .5rem; text-decoration: none; border-radius: 8px; color: var(--ink);
}
.doc-list a:hover { background: var(--sand); }
.doc-year { flex: 0 0 4rem; font-weight: 700; color: var(--brand); }
.doc-title { flex: 1 1 18rem; min-width: 0; font-weight: 650; }
.doc-title em { display: block; font-style: normal; font-weight: 400; font-size: .92rem; color: var(--muted); }
.doc-meta { flex: none; font-size: .85rem; color: var(--muted); }
.doc-link { display: inline-block; font-size: .9rem; font-weight: 650; }

.link-group { margin-bottom: 2.5rem; }
.link-group > h2 { color: var(--brand); }
.link-list li { padding: 1rem .25rem; }
.link-list h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.link-list p { margin: 0; font-size: .94rem; color: var(--body); }

.meeting-list li {
  display: flex; flex-wrap: wrap; gap: .2rem 1.25rem; align-items: baseline; padding: .8rem .25rem;
}
.meeting-date { flex: 0 0 9rem; font-size: .88rem; color: var(--muted); }

/* --- board --------------------------------------------------------------- */
.board-group { margin-bottom: 2.5rem; }
.board-group > h2 { color: var(--brand); font-size: 1.35rem; }
.board-list { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .board-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .board-list { grid-template-columns: repeat(3, 1fr); } }
.board-list li {
  padding: .9rem 1.1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
}
.board-name { display: block; font-weight: 700; color: var(--ink); }
.board-role { display: block; font-size: .88rem; color: var(--brand); }

/* --- life cycle ---------------------------------------------------------- */
.lifecycle { list-style: none; margin: 0; padding: 0; counter-reset: stage; }
.stage {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center;
  padding: 2rem 0; border-bottom: 1px solid var(--line);
}
.stage:last-child { border-bottom: 0; }
/* These were running the full width of the page. Half the row, and capped. */
.stage img {
  flex: 1 1 20rem; width: 100%; max-width: 30rem;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.stage > div { flex: 1 1 20rem; min-width: 0; }
.stage h2 { counter-increment: stage; font-size: 1.4rem; color: var(--brand); }
.stage h2::before {
  content: counter(stage); display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; margin-right: .6rem;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: .95rem; vertical-align: .1em;
}
/* Alternate which side the picture sits on, so seven stages have some rhythm. */
@media (min-width: 52rem) { .stage:nth-child(even) img { order: 2; } }

/* --- membership tiers ---------------------------------------------------- */
.tier-grid { align-items: start; }
.tier {
  padding: 1.5rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tier-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; margin-bottom: .6rem;
}
.tier-head h3 { margin: 0; font-size: 1.2rem; }
.tier-price { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--brand); }
.tier-price span { font-size: .9rem; font-weight: 600; color: var(--muted); }
.tier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.1rem; }
.give .tier-price { margin: .5rem 0 1rem; }

/* --- notices, quotes, video ---------------------------------------------- */
.notice-panel {
  padding: 1.5rem 1.75rem; background: var(--sand);
  border-left: 5px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0;
}
.notice-panel h2 { margin-top: 0; color: var(--brand); }

.tick-list { list-style: none; margin: 0 0 1.15em; padding: 0; }
.tick-list li { position: relative; padding: .35rem 0 .35rem 1.9rem; }
.tick-list li::before {
  content: ""; position: absolute; left: .25rem; top: .95rem;
  width: .55rem; height: .3rem; border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg);
}

.pull-quote {
  margin: 2rem 0 0; padding: 1.35rem 1.6rem;
  background: var(--sand); border-left: 5px solid var(--sea); border-radius: 0 8px 8px 0;
}
.pull-quote p { font-size: 1.02rem; }
.pull-quote cite { display: block; margin-top: .7rem; font-style: normal; font-weight: 700; color: var(--brand); font-size: .9rem; }

/* A fixed-width iframe pushes a phone sideways; give it a ratio instead. */
.video { margin: 1.75rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* --- logos --------------------------------------------------------------- */
.logo-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
.logo-tile {
  display: grid; place-items: center; gap: 1rem;
  padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.logo-tile img { max-width: 100%; height: auto; }
.on-white { background: #fff; }
.on-black { background: #111; }
.on-check {
  background-image:
    linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%),
    linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: #fff;
}
.logo-actions { margin-top: 1.25rem; }

/* --- photo gallery ------------------------------------------------------- */
.album { margin-bottom: 3rem; }
.album-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .3rem 1rem; padding-bottom: .4rem; margin-bottom: 1.1rem;
  border-bottom: 3px solid var(--brand);
}
.album-head h2 { margin: 0; color: var(--brand); font-size: 1.5rem; }

.photo-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid a { display: block; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s ease; }
.photo-grid a:hover img { transform: scale(1.04); }

/* --- nav: the four section parents are headings, not links ---------------- */
.sub-toggle {
  display: block; width: 100%; text-align: left;
  padding: .85rem .25rem; border: 0; background: none;
  font: inherit; font-weight: 650; color: var(--ink); cursor: pointer;
}
.btn-join { width: 100%; margin-top: 1rem; }

@media (min-width: 68rem) {
  .sub-toggle {
    width: auto; padding: .55rem .7rem; border-radius: 6px;
    font-size: .97rem; white-space: nowrap;
  }
  .sub-toggle:hover { background: var(--sand); }
  .sub-toggle::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .btn-join { width: auto; margin: 0; padding: .65rem 1.2rem; font-size: .95rem; }
}

/* --- post navigation ----------------------------------------------------- */
.post-nav-prev span, .post-nav-next span { color: var(--muted); }

/* --- photo lightbox ------------------------------------------------------ */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(7, 29, 43, .92);
}
.lb.is-open { display: flex; }
body.lb-locked { overflow: hidden; }

.lb-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  max-width: 100%; max-height: 100%;
}
.lb-figure img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lb-figure figcaption {
  color: rgba(255, 255, 255, .88); font-size: .92rem; text-align: center;
  max-width: 46rem;
}

.lb button {
  flex: none; display: grid; place-items: center;
  width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 1.9rem; line-height: 1; cursor: pointer;
}
.lb button:hover { background: rgba(255, 255, 255, .24); }
.lb-close {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  font-size: 1.6rem;
}

/* On a phone the arrows sit under the picture rather than squeezing it. */
@media (max-width: 44rem) {
  .lb { flex-wrap: wrap; }
  .lb-figure { order: -1; flex: 1 0 100%; }
  .lb-figure img { max-height: 66vh; }
}