/* ============================================================
   WEISSMAN FAMILY — Ship's Log design system
   Palette: deep navy hull, teal wheel-ring, warm wood amber,
   sandy deck cream, gold rivets — pulled straight from the emblem.
   Signature element: the rope divider (wavy line = the rope
   wrapped around the anchor in the crest), used to break up
   every section instead of a plain <hr>.
   ============================================================ */

:root {
  --navy-deep:   #0e2138;
  --navy-ink:    #16233a;
  --navy-panel:  #142a45;
  --teal:        #1c8c93;
  --teal-deep:   #0f5f66;
  --amber-wood:  #c97a32;
  --amber-light: #e3a25c;
  --gold:        #e8c468;
  --sand:        #f6f0e2;
  --sand-deep:   #ece1c8;
  --rope-cream:  #faf6ec;
  --ink-soft:    #3c4a5e;
  --shadow:      0 10px 30px rgba(14, 33, 56, 0.15);
  --shadow-soft: 0 4px 14px rgba(14, 33, 56, 0.10);
  /* Role-based colours: the light values are the original palette, the dark ones are
     set further down under html[data-theme="dark"] ("Night Shift at Sea"). */
  --page-bg:     var(--sand);
  --card:        var(--rope-cream);
  --card-teal:   #dcedee;      /* Log Book card */
  --line:        var(--sand-deep);
  --text:        var(--navy-ink);
  --text-strong: var(--navy-deep);
  --link:        var(--teal-deep);
  --amber-text:  var(--amber-wood);
  --field-bg:    #ffffff;
  --radius:      14px;
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-script:  'Caveat', cursive;
  --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.6;
  font-size: 17px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--amber-text); }

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

.script {
  font-family: var(--font-script);
  color: var(--amber-text);
  font-size: 1.4em;
  font-weight: 700;
}

/* Focus visibility for keyboard nav */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* ---------- Page watermark (emblem on every page) ---------- */
.page-emblem-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/.netlify/images?url=/assets/images/emblem-v2-watermark.png&w=800');
  background-repeat: no-repeat;
  background-position: center 90px;
  background-size: min(640px, 78vw);
  opacity: 0.09;
}
main, header.site-header, footer.site-footer {
  position: relative;
  z-index: 1;
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
/* vertical padding only, so these never wipe out .wrap's 24px side padding */
.section { padding-top: 56px; padding-bottom: 56px; }
.section-tight { padding-top: 32px; padding-bottom: 32px; }

/* ---------- Header / Nav ---------- */
header.site-header {
  background: var(--navy-deep);
  border-bottom: 4px solid var(--teal);
  position: relative;
  z-index: 20; /* above <main> (z-index: 1) so the search dropdown isn't painted over */
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--sand);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}
.brand img { height: 46px; width: auto; border-radius: 8px; }
.brand span.tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-light);
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--teal);
  border-radius: 8px;
  color: var(--sand);
  font-size: 1.4rem;
  padding: 4px 10px;
  cursor: pointer;
}

.search-toggle {
  background: none;
  border: 2px solid var(--teal);
  border-radius: 8px;
  color: var(--sand);
  font-size: 1.15rem;
  line-height: 1;
  padding: 6px 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-toggle:hover, .search-toggle:focus-visible { background: rgba(28, 140, 147, 0.3); }
.search-toggle[aria-expanded="true"] { background: var(--teal); }

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--sand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 8px 14px;
  border-radius: 8px;
  display: block;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: var(--teal);
  color: var(--navy-deep);
}

/* Tablets (761-1000 px): tighter menu so the logo, six links and the search button all fit
   without the page scrolling sideways. */
@media (min-width: 761px) and (max-width: 1000px) {
  .nav-inner { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .main-nav ul { gap: 0; }
  .main-nav a { padding: 8px 7px; font-size: 0.92rem; }
  .brand { gap: 9px; font-size: 1.2rem; }
  .brand span.tag { white-space: nowrap; font-size: 0.58rem; letter-spacing: 0.1em; }
  .header-tools { gap: 6px; }
}
/* Smallest tablets (761-860 px): a little tighter still so the moon and search buttons fit. */
@media (min-width: 761px) and (max-width: 860px) {
  .main-nav a { padding: 8px 5px; font-size: 0.9rem; }
  .brand img { height: 40px; }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; padding: 10px 0 16px; }
  .nav-inner { flex-wrap: wrap; }
  /* Phones: logo/title centred on its own line; below it the menu button on the left
     and the search button on the right, both on the same line. */
  .nav-inner .brand { flex: 0 0 100%; order: 0; justify-content: center; }
  .nav-inner .nav-toggle { order: 1; }
  .nav-inner .search-toggle { order: 2; margin-left: auto; }
}

/* ---------- Family search ---------- */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--navy-panel);
  border-bottom: 4px solid var(--teal);
  box-shadow: var(--shadow);
  padding: 16px 20px 20px;
  z-index: 60;
}
.search-panel[hidden] { display: none; }
.search-input {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 11px 16px;
  border-radius: 22px;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--sand);
  color: var(--navy-ink);
}
.search-input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.search-results {
  list-style: none;
  margin: 10px auto 0;
  padding: 0;
  max-width: 480px;
  max-height: 340px;
  overflow-y: auto;
}
.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--sand);
  font-family: var(--font-body);
  transition: background 0.12s ease, color 0.12s ease;
}
.search-results a:hover,
.search-results a.active { background: var(--teal); color: var(--navy-deep); }
.search-results .result-category {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--amber-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.search-results a:hover .result-category,
.search-results a.active .result-category { color: var(--navy-deep); }
.search-empty {
  max-width: 480px;
  margin: 10px auto 0;
  padding: 4px 12px;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(246, 240, 226, 0.6);
}
.search-empty[hidden] { display: none; }
@media (max-width: 760px) {
  .search-panel { padding: 14px 16px 18px; }
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding-top: 64px;
  padding-bottom: 40px;
}
.hero .script { display: block; font-size: clamp(2.4rem, 7vw, 4rem); margin-bottom: 4px; }
.hero h1 { margin-bottom: 10px; }
.hero .subtitle {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Seasonal banner (one-off greetings, date-gated via
   data/seasonal-banners.json) ---------- */
.seasonal-banner {
  text-align: center;
  padding: 0 0 40px;
}
.seasonal-banner img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.seasonal-splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.5s ease;
  padding: 24px;
}
.seasonal-splash.seasonal-splash--hide { opacity: 0; }
.seasonal-splash img {
  max-width: 420px;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.seasonal-splash--cutout img {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}
/* Opening parchment: the card starts closed (a thin strip at the middle) and
   unrolls to full size over --open-ms; the two rods ride the top and bottom edges. */
.splash-scroll {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}
.seasonal-splash--reveal { overflow: hidden; }
.seasonal-splash--reveal .splash-scroll img {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
  filter: none;
  clip-path: inset(48% 0 48% 0);
  animation: splash-unroll var(--open-ms, 3000ms) cubic-bezier(0.45, 0, 0.25, 1) var(--rope-ms, 0ms) forwards;
}
.splash-rod {
  position: absolute;
  left: -3%;
  width: 106%;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(to bottom, #8a6a3a 0%, #e9d3a0 28%, #f6e8c4 50%, #d2b37a 75%, #7a5a2c 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 2;
  opacity: 1;
}
.splash-rod--top {
  top: 48%;
  transform: translateY(-50%);
  animation: splash-rod-top var(--open-ms, 3000ms) cubic-bezier(0.45, 0, 0.25, 1) var(--rope-ms, 0ms) forwards;
}
.splash-rod--bottom {
  top: 52%;
  transform: translateY(-50%);
  animation: splash-rod-bottom var(--open-ms, 3000ms) cubic-bezier(0.45, 0, 0.25, 1) var(--rope-ms, 0ms) forwards;
}
@keyframes splash-unroll {
  from { clip-path: inset(48% 0 48% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes splash-rod-top {
  from { top: 48%; }
  to   { top: 0%; }     /* rods centred on the parchment's own edges, so the N and the ribbon text stay visible */
}
@keyframes splash-rod-bottom {
  from { top: 52%; }
  to   { top: 100%; }
}
/* White rope tied around the closed parchment (loop, knot and two tails); it is pulled aside and slides off, then the parchment opens. */
.splash-band {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 20px);
  width: 40px;
  height: 60px;
  z-index: 3;
  animation: splash-rope-off var(--rope-ms, 3000ms) linear forwards;
  pointer-events: none;
}
.splash-band i {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, #ffffff 0 4px, #d6d6d6 4px 6px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.splash-band .rope-loop  { left: 15px; top: 0; width: 10px; height: 60px; }
.splash-band .rope-knot  { left: 11px; top: 21px; width: 18px; height: 18px; border-radius: 50%; }
.splash-band .rope-tail  { top: 30px; width: 7px; height: 28px; transform-origin: 50% 0; }
.splash-band .rope-tail--l { left: 12px; transform: rotate(28deg); }
.splash-band .rope-tail--r { left: 21px; transform: rotate(-28deg); }
@keyframes splash-rope-off {
  0%   { transform: translateX(0) rotate(0deg); }
  12%  { transform: translateX(-10px) rotate(-4deg); }   /* small tug before it slides away */
  100% { transform: translateX(calc(50vw + 50px)) rotate(10deg); }
}
/* Video splash: the mp4 fills the screen (keeping its shape); its dark brown backdrop
   matches the overlay colour and its edges are feathered so no rectangle shows on wide screens. */
.seasonal-splash--video { padding: 0; gap: 0; }
.seasonal-splash .splash-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.seasonal-splash-hint--video {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.55;
  pointer-events: none;
}
.seasonal-splash-hint {
  color: var(--rope-cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

.page-hero {
  text-align: center;
  padding-top: 46px;
  padding-bottom: 24px;
}
.page-hero .eyebrow {
  font-family: var(--font-script);
  color: var(--amber-text);
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

/* ---------- Rope divider (signature element) ---------- */
/* The divider is a photo of an amber rope with an eye at each end. It is
   decorative only (the markup is aria-hidden), so it is a background image.
   The old SVG inside the markup is hidden. Wide screens get the long rope;
   phones get a shorter, thicker rope with a small margin at each side. */
.rope-divider {
  display: block;
  width: calc(100% - 32px);
  max-width: 890px;
  aspect-ratio: 1780 / 135;
  margin: 8px auto 8px;
  background: url('/assets/images/rope-divider-long.webp') center / 100% 100% no-repeat;
}
.rope-divider svg { display: none; }
@media (max-width: 700px) {
  .rope-divider {
    max-width: 560px;
    aspect-ratio: 1200 / 144;
    background-image: url('/assets/images/rope-divider-short.webp');
  }
}

/* Extra breathing room specifically on the homepage, between the hero's
   rope divider and the Announcements card below it - other pages using
   .rope-divider elsewhere (Our Crew, photo/video sections, etc.) are
   unaffected. */
.hero + .rope-divider { margin-bottom: 40px; }

/* ---------- Home page clock: marine chronometer on the left, Israel date and time on the right ----------
   Desktop (1001px and wider): the chronometer (120px) sits at the left and the date, time and UTC
   offset at the right of the welcome block, level with "Ahoy, Weissmans!"; no card behind them.
   Tablets and phones (1000px and under): one row directly under the header, the chronometer
   (56px) on the left and the date and time on the right. */
.hero { position: relative; padding-top: 16px; }
.hero-clock {
  position: absolute;
  top: 7px;
  left: 1.2rem;
  right: 1.2rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  pointer-events: none;            /* the empty middle must not block clicks on the headline */
  -webkit-tap-highlight-color: transparent;
}
.hero-clock[hidden] { display: none; }
.hero-clock > * { pointer-events: auto; cursor: help; }
.hero-clock svg { width: 120px; height: 120px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.hero-clock-text {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--amber-text);
  font-variant-numeric: tabular-nums;
}
.hero-clock-text > span { display: block; }
.hero-clock-text small { font-size: 0.72em; font-weight: inherit; }
.hero-clock:focus-visible { outline: 2px solid var(--amber-text); outline-offset: 4px; border-radius: 12px; }
.hero-clock::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  top: calc(50% + 2.1rem);
  width: max-content;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  background: var(--navy-deep);
  color: var(--amber-text);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
}
.hero-clock.clock-tip-on::after { opacity: 1; visibility: visible; }
/* Hover only counts on devices that really have a mouse (a tap on a phone must not leave it stuck open). */
@media (hover: hover) {
  .hero-clock:hover::after { opacity: 1; visibility: visible; }
}
@media (max-width: 1000px) {
  .hero { padding-top: 0.5rem; }
  .hero-clock {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0 0 0.4rem;
    padding: 0 0.3rem;
  }
  .hero-clock svg { width: 56px; height: 56px; }
  .hero-clock-text { font-size: 0.95rem; }
  .hero-clock::after { top: calc(100% + 4px); right: 0.3rem; }
}


/* ---------- Cards / plank boards ---------- */
.board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.board-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .board-grid { grid-template-columns: 1fr; }
}

.plank-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 8px solid var(--amber-wood);
  padding: 26px 28px 28px;
}
/* "Today's Log Book Entry!" card - same shape/shadow as the amber
   Announcements plank, but a cool teal tint so the two sections read as
   visually distinct at a glance regardless of what's inside them
   (Ronen's request, 29/09/2026). */
.plank-card.plank-card--logbook {
  background: var(--card-teal);
  border-top-color: #ff6a00;
  /* Always exactly half the width of the Announcements card on desktop,
     whatever is inside (a definite width - with only max-width the card
     shrank to fit its content and changed size from one entry type to the
     next). */
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  /* Half-width reads well on desktop but squeezes the heading to 3 lines
     on narrow phones - keep mobile full-width like Announcements. */
  .plank-card.plank-card--logbook { width: 100%; max-width: 100%; }
}
/* ---- Today's Log Book Entry: one coloured, centred panel per type
   (Ronen's request, 10/2026). Each type renders as its own panel inside the
   card, so a day with several types shows several colours. ---- */
.plank-card--logbook .list-clean > li { text-align: center; }
.plank-card--logbook .log-entry {
  border-radius: 12px;
  padding: 16px 18px 18px;
  text-align: center;
  /* Same panel height for every type (the tallest normal one), content
     centred in it - so the card does not change size from day to day.
     It only grows if the text really needs more room (very long names,
     or two or more types on the same day). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 232px;
}
@media (max-width: 760px) {
  /* On phones the larger titles can take two lines, so the shared panel
     height is a little taller there (still identical for every type). */
  .plank-card--logbook .log-entry { min-height: 300px; }
}
.plank-card--logbook .log-entry + .log-entry { margin-top: 12px; }
.plank-card--logbook .log-entry h3 {
  text-align: center;
  font-size: 1.8rem;          /* noticeably bigger than the 1.56rem date */
  line-height: 1.2;
  text-wrap: balance;
}
.plank-card.plank-card--logbook > h2 {
  font-size: 1.85rem;         /* card header, also bigger than the date */
  line-height: 1.2;
  text-wrap: balance;
}
.plank-card.plank-card--logbook > h2 .icon { font-size: 1.6rem; }
@media (max-width: 760px) {
  /* On phones the larger header wraps to two lines - keep the book icon
     inline with the words (centred together) instead of stranded at the side. */
  .plank-card.plank-card--logbook > h2 { display: block; }
  .plank-card.plank-card--logbook > h2 .icon { margin-right: 0.2em; vertical-align: middle; }
}
/* The date sits inside each panel, in the panel's own colours, double size. */
.plank-card--logbook .log-date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.56rem;
  line-height: 1.2;
  margin: 0 0 4px;
}
.plank-card--logbook .log-icon { display: inline-block; line-height: 1; margin: 0 0.18em; vertical-align: middle; }
.plank-card--logbook .log-icon--rings {
  width: 1.5em;
  height: 1.5em;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cg stroke-linecap='round'%3E%3Ccircle cx='14' cy='20' r='10' stroke='%236b4e00' stroke-width='5.4'/%3E%3Ccircle cx='26' cy='20' r='10' stroke='%236b4e00' stroke-width='5.4'/%3E%3Ccircle cx='14' cy='20' r='10' stroke='%23f2c94c' stroke-width='3.4'/%3E%3Ccircle cx='26' cy='20' r='10' stroke='%23f2c94c' stroke-width='3.4'/%3E%3Cpath d='M22.25 29.27 A10 10 0 0 1 18.12 26.18' stroke='%236b4e00' stroke-width='5.4'/%3E%3Cpath d='M22.25 29.27 A10 10 0 0 1 18.12 26.18' stroke='%23f2c94c' stroke-width='3.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.plank-card--logbook .log-entry .announcement-bullets li {
  text-align: center;
  padding-left: 0;
}
.plank-card--logbook .log-entry .announcement-bullets li::before { content: none; }

/* Happy Birthday: pink, a row of balloons floating above the text */
.plank-card--logbook .log-entry--birthday {
  background-color: #f9c9da;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='76' viewBox='0 0 150 76'%3E%3Cg transform='rotate(-7 20 22)'%3E%3Cpath d='M20 39 q-5 9 2 15 q4 7 -1 22' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='20' cy='22' rx='12.5' ry='16' fill='%23e8546e'/%3E%3Cpath d='M20 37.5 l-3.8 5 h7.6 z' fill='%23e8546e'/%3E%3Cellipse cx='15.5' cy='16' rx='2.8' ry='4.8' fill='%23fff' fill-opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(5 58 19)'%3E%3Cpath d='M58 36 q-5 9 2 15 q4 7 -1 22' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='58' cy='19' rx='12.5' ry='16' fill='%23f5c542'/%3E%3Cpath d='M58 34.5 l-3.8 5 h7.6 z' fill='%23f5c542'/%3E%3Cellipse cx='53.5' cy='13' rx='2.8' ry='4.8' fill='%23fff' fill-opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(-5 96 23)'%3E%3Cpath d='M96 40 q-5 9 2 15 q4 7 -1 22' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='96' cy='23' rx='12.5' ry='16' fill='%235aa9e6'/%3E%3Cpath d='M96 38.5 l-3.8 5 h7.6 z' fill='%235aa9e6'/%3E%3Cellipse cx='91.5' cy='17' rx='2.8' ry='4.8' fill='%23fff' fill-opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(6 132 20)'%3E%3Cpath d='M132 37 q-5 9 2 15 q4 7 -1 22' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='132' cy='20' rx='12.5' ry='16' fill='%23a77bd9'/%3E%3Cpath d='M132 35.5 l-3.8 5 h7.6 z' fill='%23a77bd9'/%3E%3Cellipse cx='127.5' cy='14' rx='2.8' ry='4.8' fill='%23fff' fill-opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(4 39 31)'%3E%3Cpath d='M39 48 q-5 6 2 10 q4 4 -1 14' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='39' cy='31' rx='12.5' ry='16' fill='%234cc08a'/%3E%3Cpath d='M39 46.5 l-3.8 5 h7.6 z' fill='%234cc08a'/%3E%3Cellipse cx='34.5' cy='25' rx='2.8' ry='4.8' fill='%23fff' fill-opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(-4 115 32)'%3E%3Cpath d='M115 49 q-5 6 2 10 q4 4 -1 14' stroke='%238a8a8a' stroke-width='1.2' fill='none'/%3E%3Cellipse cx='115' cy='32' rx='12.5' ry='16' fill='%23ff8fab'/%3E%3Cpath d='M115 47.5 l-3.8 5 h7.6 z' fill='%23ff8fab'/%3E%3Cellipse cx='110.5' cy='26' rx='2.8' ry='4.8' fill='%23fff' fill-opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 150px 76px;
  padding-top: 84px;
}
.plank-card--logbook .log-entry--birthday .log-date,
.plank-card--logbook .log-entry--birthday h3,
.plank-card--logbook .log-entry--birthday .announcement-bullets li { color: #5a1230; }

/* Happy Anniversary: green, a row of wedding cakes along the bottom */
.plank-card--logbook .log-entry--anniversary {
  background-color: #a8d5ab;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='66' viewBox='0 0 150 66'%3E%3Cg transform='translate(4 4)'%3E%3Cellipse cx='32' cy='52' rx='30' ry='4' fill='%23fff' fill-opacity='.95'/%3E%3Crect x='7' y='36' width='50' height='15' rx='3' fill='%23fff'/%3E%3Crect x='14' y='23' width='36' height='13' rx='3' fill='%23fff'/%3E%3Crect x='21' y='12' width='22' height='11' rx='3' fill='%23fff'/%3E%3Cpath d='M7 42 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0' stroke='%23e98ba5' stroke-width='2' fill='none'/%3E%3Cpath d='M14 28 q4.5 4 9 0 q4.5 4 9 0 q4.5 4 9 0 q4.5 4 9 0' stroke='%23e98ba5' stroke-width='1.6' fill='none'/%3E%3Cpath d='M32 12 c-4 -8 -14 -2 -7 4 l7 6 l7 -6 c7 -6 -3 -12 -7 -4z' fill='%23e8546e' transform='translate(0 -8) scale(.8) translate(8 3)'/%3E%3Ccircle cx='13' cy='47' r='1.7' fill='%238fc993'/%3E%3Ccircle cx='32' cy='47' r='1.7' fill='%238fc993'/%3E%3Ccircle cx='51' cy='47' r='1.7' fill='%238fc993'/%3E%3C/g%3E%3Cg transform='translate(80 4)'%3E%3Cellipse cx='32' cy='52' rx='30' ry='4' fill='%23fff' fill-opacity='.95'/%3E%3Crect x='7' y='36' width='50' height='15' rx='3' fill='%23fff'/%3E%3Crect x='14' y='23' width='36' height='13' rx='3' fill='%23fff'/%3E%3Crect x='21' y='12' width='22' height='11' rx='3' fill='%23fff'/%3E%3Cpath d='M7 42 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0 q4 5 8.3 0' stroke='%23e98ba5' stroke-width='2' fill='none'/%3E%3Cpath d='M14 28 q4.5 4 9 0 q4.5 4 9 0 q4.5 4 9 0 q4.5 4 9 0' stroke='%23e98ba5' stroke-width='1.6' fill='none'/%3E%3Cpath d='M32 12 c-4 -8 -14 -2 -7 4 l7 6 l7 -6 c7 -6 -3 -12 -7 -4z' fill='%23e8546e' transform='translate(0 -8) scale(.8) translate(8 3)'/%3E%3Ccircle cx='13' cy='47' r='1.7' fill='%238fc993'/%3E%3Ccircle cx='32' cy='47' r='1.7' fill='%238fc993'/%3E%3Ccircle cx='51' cy='47' r='1.7' fill='%238fc993'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.85'%3E%3Ccircle cx='72' cy='30' r='2.2'/%3E%3Ccircle cx='146' cy='30' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 150px 66px;
  padding-bottom: 76px;
}
.plank-card--logbook .log-entry--anniversary .log-date,
.plank-card--logbook .log-entry--anniversary h3,
.plank-card--logbook .log-entry--anniversary .announcement-bullets li { color: #123d1f; }

/* Yahrzeit: black with amber type */
.plank-card--logbook .log-entry--yahrzeit { background: #000; }
.plank-card--logbook .log-entry--yahrzeit .log-date,
.plank-card--logbook .log-entry--yahrzeit h3,
.plank-card--logbook .log-entry--yahrzeit .announcement-bullets li { color: #ffbf00; }

/* Date to Remember: mid-to-dark grey */
.plank-card--logbook .log-entry--remember { background: #5f5f5c; }
.plank-card--logbook .log-entry--remember .log-date,
.plank-card--logbook .log-entry--remember h3,
.plank-card--logbook .log-entry--remember .announcement-bullets li { color: #f4f4f2; }
@keyframes announcement-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-14px); }
  50% { transform: translateY(0); }
  65% { transform: translateY(-7px); }
  80% { transform: translateY(0); }
  90% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.plank-card.jump-in {
  animation: announcement-jump 0.8s ease-out;
}
.plank-card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-size: 1.4rem;
}
.plank-card h2 .icon { font-size: 1.3rem; white-space: nowrap; flex-shrink: 0; }
.plank-card .card-subtitle {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--ink-soft, #7a7267);
  margin: -6px 0 14px;
}
.plank-card .card-update-note {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 0.7rem;
  color: #c0392b;
  margin: -12px 0 14px;
}

.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.list-clean > li:last-child { border-bottom: none; }
.list-clean > li.announcement-extra { display: none; }
.list-clean.expanded > li.announcement-extra { display: list-item; }

.announcements-toggle {
  display: block;
  margin: 14px auto 0;
  padding: 8px 18px;
  border: 1px solid var(--teal);
  border-radius: 20px;
  background: transparent;
  color: var(--link);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.announcements-toggle:hover, .announcements-toggle:focus-visible {
  background: var(--teal);
  color: var(--sand);
}

.entry-date {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--link);
  background: rgba(28, 140, 147, 0.1);
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 4px;
}

.announcement-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.announcement-bullets li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  text-align: justify;
  color: var(--text);
}
.announcement-bullets li:last-child { margin-bottom: 0; }
.announcement-bullets--plain li { padding-left: 0; }
.announcement-entry + .announcement-entry { margin-top: 14px; }
/* Memorial look - black background, amber type (e.g. a yahrzeit
   announcement, only on its own date): the whole date block is black when
   the group is all memorial, or just the one entry when it shares its date
   with ordinary announcements. */
.list-clean > li.announcement-memorial,
.announcement-entry--memorial {
  background: #000;
  color: #fff;
  border-radius: 10px;
}
.list-clean > li.announcement-memorial {
  padding: 14px 16px;
  margin: 8px 0;
  border-bottom: none;
}
.announcement-entry--memorial { padding: 10px 14px; }
.announcement-memorial .entry-date,
.announcement-entry--memorial .entry-date { background: transparent; color: #ffbf00; padding-left: 0; }
.announcement-memorial h3,
.announcement-entry--memorial h3,
.announcement-memorial .announcement-bullets li,
.announcement-entry--memorial .announcement-bullets li { color: #ffbf00; }
/* Larger type for the memorial look (title and text). */
.announcement-memorial h3,
.announcement-entry--memorial h3 { font-size: 1.5rem; line-height: 1.25; }
.announcement-memorial .announcement-bullets li,
.announcement-entry--memorial .announcement-bullets li { font-size: 1rem; line-height: 1.55; text-align: left; }
/* Every announcement (past and future) uses the same sizes as the memorial look:
   title 1.5rem, text and links 1rem, date 0.85rem (see .entry-date). Scoped to
   the Announcements list so the Today's Log Book Entry panels are not affected. */
#announcements-list .announcement-entry h3 { font-size: 1.5rem; }
#announcements-list .announcement-bullets li { font-size: 1rem; }
.seasonal-replay-link,
.announcement-link {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.seasonal-replay-link:hover,
.announcement-link:hover { color: var(--teal); }
.announcement-bullets li::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber-text);
  font-size: 0.85em;
  font-weight: 700;
}
.announcement-bullets--plain li::before { content: none; }
.announcement-bullets--plain li.announcement-quote-line {
  padding-left: 20px;
  font-style: italic;
}

.crew-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.crew-row:last-child { border-bottom: none; }
.crew-row .anchor-bullet {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.crew-row.upcoming {
  background: linear-gradient(90deg, rgba(232,196,104,0.6), transparent);
  border-radius: 8px;
  padding-left: 8px;
  margin-left: -8px;
}
.crew-row .date-prefix { font-weight: 700; color: var(--text-strong); white-space: nowrap; padding-top: 1px; }
.crew-row .who { font-weight: 700; color: var(--text-strong); flex: 1 1 auto; min-width: 0; }
.crew-row .age-tag { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.9em; margin-top: 2px; white-space: nowrap; }
.crew-row .when { font-size: 0.88rem; color: var(--ink-soft); }

.important-date-row { align-items: flex-start; }
.important-date-prefix {
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  padding-top: 1px;
}
.important-date-name {
  display: block;
  font-weight: 700;
  color: var(--text-strong);
}
.important-date-age {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2px;
}

.badge-soon {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-deep);
  background: var(--gold);
  padding: 3px 9px;
  border-radius: 20px;
}

/* "Add to calendar" button at the end of each Dates row, and its little menu */
.cal-btn {
  flex: none;
  margin-left: auto;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--amber-text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Countdown badge on the first line, calendar button always on the second line right under it. */
.row-actions {
  flex: none;
  margin-left: auto;
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.row-actions .badge-soon { margin-left: 0; line-height: 1.4; padding: 2px 9px; }
.row-actions--nobadge::before { content: ''; flex: none; height: 20px; }   /* keeps the button on line 2 when there is no badge */
.row-actions .cal-btn { margin-left: 0; width: 28px; height: 28px; }
/* Very small phones (320-380 px): the rows of the Dates cards are a little more compact. */
@media (max-width: 380px) {
  .crew-row { gap: 8px; }
  .crew-row .anchor-bullet { width: 26px; height: 26px; font-size: 0.95rem; }
  .badge-soon { padding: 3px 7px; }
  .row-actions .badge-soon { padding: 2px 7px; }
}
/* Cards can never be wider than the screen (one column on phones, two on small tablets). */
@media (max-width: 760px) { .board-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 761px) { .board-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Phones and small tablets: the "Dates to Remember" rows have five parts (icon, date, text, countdown, calendar button) and
   did not fit on a narrow card. Here they use a small grid: icon | date above the text | countdown | calendar. */
@media (max-width: 560px), (min-width: 761px) and (max-width: 880px) {
  .important-date-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: start;
  }
  .important-date-row .anchor-bullet { grid-column: 1; grid-row: 1 / span 2; }
  .important-date-row .important-date-prefix { grid-column: 2; grid-row: 1; }
  .important-date-row > span:not([class]) { grid-column: 2; grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
  .important-date-row .row-actions,
  .important-date-row > .badge-soon { grid-column: 3; grid-row: 1 / span 2; }
}
.cal-btn:hover, .cal-btn[aria-expanded="true"] { background: var(--navy-deep); color: var(--gold); border-color: var(--navy-deep); }
.cal-menu {
  position: fixed;
  z-index: 300;
  width: min(300px, calc(100vw - 16px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(14, 33, 56, 0.28);
  padding: 8px;
  font-family: var(--font-body);
}
.cal-menu-title { margin: 2px 8px 6px; font-weight: 700; color: var(--text-strong); font-size: 0.95rem; }
.cal-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.cal-menu-item:hover, .cal-menu-item:focus-visible { background: rgba(232, 196, 104, 0.45); outline: none; }
.cal-menu-note { margin: 6px 10px 4px; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; }

.empty-note {
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--amber-wood);
  color: var(--rope-cream);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--amber-light); color: var(--navy-deep); }
.btn-outline {
  background: transparent;
  border: 2px solid var(--teal);
  color: var(--link);
}
.btn-outline:hover { background: var(--teal); color: white; }

/* ---------- Album / music grids ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 760px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}
.tile-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: block;
}
.tile-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile-card .thumb {
  aspect-ratio: 3/1;
  background: var(--navy-panel);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  font-size: clamp(2rem, 6vw, 3rem);
  overflow: hidden;
  margin: 12px 14px 0;
  border-radius: 10px;
}
.tile-card .thumb img { width: 70%; height: 70%; object-fit: contain; margin: auto; }
.tile-card .tile-body { padding: 10px 14px 14px; }
.tile-card h3 { margin-bottom: 2px; color: var(--text-strong); font-size: 1.05rem; }
.tile-card p { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Music player ---------- */
.player-card {
  background: var(--navy-deep);
  color: var(--sand);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow);
  border-top: 8px solid var(--teal);
}
.player-card h2 { color: var(--sand); }
.album-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.album-cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  box-shadow: var(--shadow-soft);
}
.now-playing {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.now-playing .disc {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex: none;
}
.now-playing .disc.spinning { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.now-playing .track-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.now-playing .track-sub { font-size: 0.85rem; color: var(--amber-light); }

audio { width: 100%; margin-top: 6px; accent-color: #ff6a00; color: #ff6a00; }
audio::-webkit-media-controls-panel { background: var(--navy-panel); }
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #ff6a00;
  -webkit-text-fill-color: #ff6a00;
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
  color: #ff6a00;
  filter: invert(58%) sepia(84%) saturate(3000%) hue-rotate(0deg) brightness(1.05);
}
audio::-webkit-media-controls-timeline {
  filter: invert(58%) sepia(84%) saturate(3000%) hue-rotate(0deg) brightness(1.05);
}

.track-list { list-style: none; margin: 0; padding: 0; }
.track-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.track-item:hover { background: rgba(255,255,255,0.06); }
.track-item.active { background: var(--teal); color: var(--navy-deep); }
.track-item .track-num {
  font-family: var(--font-display);
  width: 22px; text-align: center; opacity: 0.7;
}
.track-item .track-title { flex: 1; }
.track-item .track-len { font-size: 0.82rem; opacity: 0.75; }
.track-item button.play-btn {
  background: none; border: none; color: inherit; font-size: 1.1rem; cursor: pointer;
}

.empty-tracks {
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: var(--amber-light);
}

/* ---------- About page ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
}
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 10px; padding: 8px 0; }
.contact-list .ic { flex: none; width: 22px; text-align: center; }

.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text-strong);
  font-size: 0.95rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 2px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--field-bg);
  color: var(--text);
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--teal); }

.form-status {
  margin-top: 10px;
  font-weight: 600;
  min-height: 1.4em;
}
.form-status.ok { color: var(--link); }
.form-status.err { color: #b3492e; }

.topic-checkboxes {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.topic-checkboxes li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--field-bg);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
}
.topic-checkboxes input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--teal);
}
.topic-checkboxes label {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
}

.subscription-result {
  text-align: center;
  padding: 40px 20px;
}
.subscription-result .icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}
.subscription-result h2 {
  margin-bottom: 10px;
}
.subscription-result p {
  color: var(--navy-mid);
}

.remark {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.remark:last-child { border-bottom: none; }
.remark .remark-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-weight: 700; color: var(--text-strong);
}
.remark .remark-date { font-size: 0.78rem; color: var(--ink-soft); font-weight: 400; font-family: var(--font-body); }

/* ---------- Setup notice (removable) ---------- */
.setup-note {
  background: #fff8e6;
  border: 2px dashed var(--amber-wood);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.setup-note strong { color: var(--amber-text); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: var(--sand);
  padding: 34px 0 24px;
  margin-top: 40px;
  border-top: 4px solid var(--teal);
  text-align: center;
}
.site-footer img { height: 54px; width: auto; margin: 0 auto 10px; border-radius: 8px; }
.site-footer .footer-brand { display: inline-block; transition: opacity 0.15s ease; }
.site-footer .footer-brand:hover, .site-footer .footer-brand:focus-visible { opacity: 0.8; }
.site-footer .foot-links {
  display: flex; justify-content: center; gap: 18px; margin: 10px 0 14px;
  flex-wrap: wrap;
}
.site-footer a { color: var(--amber-light); }
.site-footer .copyright { font-size: 0.82rem; color: rgba(246,240,226,0.6); }
.site-footer .site-meta {
  font-size: 0.78rem;
  color: rgba(246,240,226,0.5);
  margin-top: 6px;
}
.site-footer .site-meta .meta-sep { margin: 0 8px; }
.site-footer .privacy-note {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(246,240,226,0.4);
  margin-top: 6px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Back to top button ---------- */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--teal);
  color: var(--sand);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 50;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--teal-deep); }
@media (max-width: 640px) {
  .back-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 1.15rem; }
}

/* ---------- Humans page: couples + individuals columns ---------- */
.humans-layout {
  display: grid;
  grid-template-columns: 2fr auto 3fr;
  gap: 32px;
  align-items: start;
}
.humans-individuals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.humans-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.humans-divider {
  width: 14px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    135deg,
    var(--amber-wood) 0px, var(--amber-wood) 7px,
    var(--rope-cream) 7px, var(--rope-cream) 14px
  );
  box-shadow: var(--shadow-soft);
  align-self: stretch;
}
@media (max-width: 900px) {
  .humans-layout { grid-template-columns: 1fr; }
  .humans-divider {
    width: auto;
    height: 14px;
    background: repeating-linear-gradient(
      -45deg,
      var(--amber-wood) 0px, var(--amber-wood) 7px,
      var(--rope-cream) 7px, var(--rope-cream) 14px
    );
  }
}
@media (max-width: 600px) {
  .humans-individuals { grid-template-columns: 1fr; }
  .humans-column { grid-template-columns: 1fr; }
}

/* ---------- Empty state (e.g. Others page) ---------- */
.empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--ink-soft);
}
.empty-state-icon {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 12px;
  opacity: 0.6;
}

/* ---------- Pictures: named album sections ---------- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .album-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .album-grid { grid-template-columns: 1fr; }
}
.album-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.album-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.album-card h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  padding: 18px 16px 4px;
  margin: 0;
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-card .thumb {
  aspect-ratio: 4/3;
  background: var(--navy-panel);
  margin: 10px 16px 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-card .thumb img { width: 80%; height: 80%; object-fit: contain; }
.album-card .thumb.has-photo img { width: 100%; height: 100%; object-fit: contain; }
.album-card .view-link {
  display: block;
  padding: 14px 16px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--link);
}

.album-grid-compact {
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .album-grid-compact { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .album-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
.album-grid-compact .album-card h2 {
  font-size: 0.85rem;
  padding: 10px 8px 2px;
  min-height: 2.4em;
}
.album-grid-compact .album-card .thumb {
  margin: 6px 8px 0;
}
.album-grid-compact .album-card .view-link {
  padding: 8px 8px 12px;
  font-size: 0.85rem;
}
.album-card .view-link:hover { color: var(--amber-text); }

/* ---------- Photo grid + lightbox ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.photo-grid--square .photo-item { aspect-ratio: 1; }
.photo-grid--square .photo-item img { object-fit: contain; background: var(--card); }
.year-heading {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--amber-text);
  margin: 0 0 14px;
}
.year-heading--nodate {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 1.02rem;
}
.photo-grid--year { margin-bottom: 30px; }
.photo-grid--year:last-of-type { margin-bottom: 0; }
.photo-item {
  border: none;
  padding: 0;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4/3;
}
.photo-item img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.2s ease; }
.photo-item:hover img { transform: scale(1.05); }

/* "Photos coming soon" placeholder: the tile is exactly the size of the emblem */
.photo-item:has(img[src*="emblem-v2-badge"]) {
  width: 240px; max-width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent; box-shadow: none; border-radius: 0;
}
.photo-item:has(img[src*="emblem-v2-badge"]) img { object-fit: cover; }

.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(14, 33, 56, var(--lb-bg, 0.92));
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 100;
  cursor: zoom-out;
  padding: 24px;
  overflow: hidden;
  touch-action: none;           /* the viewer handles swipe, pinch and double-tap itself */
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 90vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: zoom-in;
  touch-action: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform-origin: 50% 50%;
}
.lightbox-overlay.zoomed img { cursor: grab; }
.lightbox-caption { color: var(--sand); margin-top: 14px; font-family: var(--font-body); transition: opacity 0.2s ease; }
.lightbox-close {
  position: fixed;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: rgba(250, 246, 236, 0.12);
  color: var(--sand);
  font-size: 1.9rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 102;
}
.lightbox-close:hover { background: rgba(250, 246, 236, 0.22); }
.lightbox-counter {
  position: fixed;
  top: 22px; left: 18px;
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.95rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
/* While zoomed in, get the arrows, caption and counter out of the way. */
.lightbox-overlay.zoomed .lightbox-nav,
.lightbox-overlay.zoomed .lightbox-caption,
.lightbox-overlay.zoomed .lightbox-counter { opacity: 0; pointer-events: none; }

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(250, 246, 236, 0.12);
  border: none;
  color: var(--sand);
  font-size: 1.8rem;
  line-height: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  z-index: 101;
}
.lightbox-nav:hover { background: rgba(250, 246, 236, 0.22); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 640px) {
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.4rem; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

.album-description { max-width: 640px; margin: 0 auto 30px; text-align: center; color: var(--ink-soft); }

.video-item {
  background: var(--navy-panel);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 9 / 16;
}
.video-item video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- YouTube embed (click-to-play facade, no autoplay until pressed) ---------- */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-panel);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  border: none;
  padding: 0;
  display: block;
}
.video-embed--portrait { aspect-ratio: 9 / 16; max-width: 360px; }
.video-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}
.video-row .video-embed { margin: 0; }
.video-row .video-embed:not(.video-embed--portrait) { max-width: 520px; }
.video-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--amber-wood);
  color: var(--rope-cream);
  border: 3px solid var(--rope-cream);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(14, 33, 56, 0.4);
  pointer-events: none;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.breadcrumb a { color: var(--link); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Page swipe (mobile): short slide when swiping between the main pages. */
main.swipe-out-to-left  { transition: transform 0.16s ease-in, opacity 0.16s ease-in; transform: translateX(-36px); opacity: 0; }
main.swipe-out-to-right { transition: transform 0.16s ease-in, opacity 0.16s ease-in; transform: translateX(36px);  opacity: 0; }
main.swipe-in-from-right { animation: swipe-in-right 0.22s ease-out; }
main.swipe-in-from-left  { animation: swipe-in-left 0.22s ease-out; }
@keyframes swipe-in-right { from { transform: translateX(36px);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swipe-in-left  { from { transform: translateX(-36px); opacity: 0; } to { transform: none; opacity: 1; } }
html.page-swiping, html.page-swiping body { overflow-x: hidden; }
/* Stop the browser's own swipe-back/forward gesture from fighting the page swipe. */
html, body { overscroll-behavior-x: none; }

/* ---------- Micro-interactions (soft touches; all switched off by the reduced-motion rule above) ---------- */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Announcements and the Log Book entry fade up gently, one date after another. Entries that
   appear later (e.g. "Show older updates") fade up as they open. */
.announcement-entry,
.log-entry { animation: fade-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#announcements-list > li:nth-child(2) .announcement-entry { animation-delay: 0.07s; }
#announcements-list > li:nth-child(3) .announcement-entry { animation-delay: 0.14s; }
#announcements-list > li:nth-child(4) .announcement-entry { animation-delay: 0.21s; }
#announcements-list > li:nth-child(5) .announcement-entry { animation-delay: 0.28s; }
#announcements-list > li:nth-child(n+6) .announcement-entry { animation-delay: 0.35s; }

/* Cards lift a little under the mouse (not on touch screens, where "hover" would stick). */
@media (hover: hover) and (pointer: fine) {
  .plank-card {
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
  }
  .plank-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(14, 33, 56, 0.2);
  }
}

/* Links: colour eases in, and links inside text get a soft underline on hover. */
a { transition: color 0.2s ease; }
.announcement-bullets a,
.site-footer .foot-links a,
.breadcrumb a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.announcement-bullets a:hover,
.site-footer .foot-links a:hover,
.breadcrumb a:hover { text-decoration-color: currentColor; }

/* A small "press" when buttons and photo tiles are tapped. */
.btn:active { transform: scale(0.97); }
.photo-item:active img { transform: scale(0.97); }
.cal-btn:active { transform: scale(0.92); }
@media (prefers-reduced-motion: reduce) {
  .plank-card:hover { transform: none; }
  .btn:active, .photo-item:active img, .cal-btn:active { transform: none; }
}

/* ---------- Home page: wide-screen layout (announcements + "Coming up" sidebar) ---------- */
.coming-up { display: none; }                       /* phones and small tablets stay stacked as before */
.coming-row .coming-text { flex: 1 1 auto; min-width: 0; display: block; }
.coming-row .coming-name { display: block; font-weight: 700; color: var(--text-strong); }
.coming-row .coming-date { display: block; font-size: 0.88rem; color: var(--ink-soft); margin-top: 1px; }
.coming-row .coming-detail { display: block; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin-top: 1px; }
.coming-row .badge-soon { flex: none; }
.coming-up-all {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}
@media (min-width: 1000px) {
  .board-grid--home { grid-template-columns: minmax(0, 1fr) 320px; }
  .board-grid--home .plank-card--announcements.span-2 { grid-column: 1; }
  .board-grid--home .coming-up {
    display: block;
    grid-column: 2;
    align-self: start;
    position: sticky;
    top: 24px;
    padding: 22px 20px 22px;
  }
  .board-grid--home .coming-up h2 { font-size: 1.35rem; }
}

/* ============================================================
   NIGHT SHIFT AT SEA - dark mode
   Switched on by js/theme-init.js (data-theme="dark" on <html>) on a fixed schedule on the
   VISITOR'S OWN CLOCK: day shift 06:00-18:00 (normal colours), night shift 18:00-06:00 (dark). The
   device's own dark-mode setting is ignored. The moon/sun button in the header overrides it until
   the shift ends.
   The header, footer, music player and splash were already navy, so they stay as they are.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;                 /* scrollbars, form controls and the audio player go dark too */
  --page-bg:     #0a1522;
  --card:        #12263d;
  --card-teal:   #11303a;
  --line:        #27405b;
  --text:        #e4ddcc;
  --text-strong: #f6f0e2;
  --ink-soft:    #a9b6c7;
  --link:        #63c7ce;
  --amber-text:  #e3a25c;
  --field-bg:    #0c1b2d;
  --shadow:      0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] { color-scheme: light; }

/* Theme button in the header (added by js/main.js, sits next to the search button) */
.theme-toggle {
  background: none;
  border: 2px solid var(--teal);
  border-radius: 8px;
  color: var(--sand);
  font-size: 1.15rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(28, 140, 147, 0.3); }
.header-tools { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  /* Phones: the group dissolves so the two buttons are separate items on the menu-button line. */
  .header-tools { display: contents; }
  .nav-inner .theme-toggle { order: 2; margin-left: auto; margin-right: 8px; }
  .nav-inner .header-tools .search-toggle { margin-left: 0; }
}
/* A short, soft cross-fade when the button is pressed (not on every page load) */
html.theme-fading body,
html.theme-fading .plank-card,
html.theme-fading .tile-card,
html.theme-fading .album-card,
html.theme-fading .photo-item,
html.theme-fading .cal-menu,
html.theme-fading input,
html.theme-fading textarea { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }

/* ---- Dark-mode touch-ups ---- */
html[data-theme="dark"] .page-emblem-bg { opacity: 0.07; filter: invert(1) brightness(1.4); }
html[data-theme="dark"] .plank-card .card-update-note { color: #ff8f7e; }
html[data-theme="dark"] .form-status.err { color: #ff9a82; }
html[data-theme="dark"] .setup-note { background: #2b2514; }
html[data-theme="dark"] .crew-row.upcoming { background: linear-gradient(90deg, rgba(232, 196, 104, 0.2), transparent); }
html[data-theme="dark"] .entry-date { background: rgba(99, 199, 206, 0.14); }
html[data-theme="dark"] .cal-btn:hover,
html[data-theme="dark"] .cal-btn[aria-expanded="true"] { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
html[data-theme="dark"] .cal-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .cal-menu-item:hover,
html[data-theme="dark"] .cal-menu-item:focus-visible { background: rgba(232, 196, 104, 0.18); }
html[data-theme="dark"] .plank-card:hover { box-shadow: 0 16px 38px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .photo-item img,
html[data-theme="dark"] .album-card .thumb img,
html[data-theme="dark"] .video-embed img { filter: brightness(0.92); }
html[data-theme="dark"] .form-field input::placeholder,
html[data-theme="dark"] .form-field textarea::placeholder { color: #7f8fa3; }
html[data-theme="dark"] .btn-outline:hover { color: var(--navy-deep); }