/* Stella Maris Tours design system — canonical stylesheet.
 *
 * Source of truth for the claude.ai/design project AND the Rails app
 * (mirrored into app/assets/tailwind/application.css as @theme tokens).
 *
 * Register: Marian blue on a white sheet floating over pale water — the logo is
 * a star of the sea over waves, and the whole site is that sheet. Serif display
 * used once, at scale, for the wordmark; everything else is a humanist sans.
 * Audience skews older and books trips costing thousands: large type, high
 * contrast, no ambiguity about what is a button.
 *
 * Every value below was measured from the live WordPress site, with one
 * deliberate departure — see "the split" under Brand.
 */

/* ---------- Tokens ---------- */

:root {
  /* Brand — the teal family.
   *
   * THE SPLIT: #2bafd4 is the identity and the live site uses it for
   * everything, but it measures 2.57:1 on white and fails WCAG AA as text and
   * as a button fill. So the family is divided by job:
   *   --sea       decoration only — the wordmark, rules, tinted grounds
   *   --sea-ink   information — headings, card titles, controls (5.18:1)
   */
  --sea: #2bafd4;            /* identity teal — display sizes and decoration */
  --sea-ink: #1d7691;        /* the same hue, readable — text and controls */
  --sea-deep: #175d72;       /* hover / pressed */
  --sea-night: #124a5b;      /* footer ground */
  --sea-mid: #6ecfe2;        /* quote marks, hairlines, quiet accents */
  --sea-pale: #99dde7;       /* the water behind the sheet */
  --sea-mist: #eaf8fa;       /* header band, sunk panels, callouts */

  /* Action — the greener teal the live site uses on card buttons. Darkened
   * from #2bafb4 for the same contrast reason. */
  --tide: #1c7d81;
  --tide-deep: #146066;

  /* Surfaces & text */
  --sheet: #ffffff;          /* the white content sheet */
  --card: #ffffff;
  --ink: #4a4855;            /* body copy — darkened from the site's #676475 */
  --ink-soft: #6f6c7d;       /* secondary text */
  --line: #dfe6ea;           /* default borders */

  /* Feedback */
  --ok: #1f7a5c;
  --ok-wash: #eaf5f1;
  --warn: #8a6212;
  --warn-wash: #faf3e4;
  --alert: #a83232;          /* darkened from the site's coral #ff6d6d */
  --alert-wash: #fbeded;
  --coral: #ff6d6d;          /* the original coral — decoration only */
  --coral-soft: #ffc9c9;     /* the same warmth, light enough to read on --sea-ink */

  /* Type */
  --font-serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --font-sans: "Nunito Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-sm: 0.9375rem;      /* 15px */
  --text-base: 1.125rem;     /* 18px — matches the live site */
  --text-lg: 1.25rem;        /* 20px — card titles */
  --text-xl: 1.5rem;
  --text-2xl: 2.125rem;      /* 34px — section headings */
  --text-display: 5rem;      /* 80px — the wordmark, once per page */
  --leading: 1.7;            /* the site uses 1.9; too loose for itineraries */
  --leading-tight: 1.3;

  /* Shape & depth — the live site is squared off. Keep it that way. */
  --radius: 5px;
  --radius-sm: 3px;
  --shadow-sheet: 0 0 20px rgba(18, 74, 91, 0.08);
  --shadow-card: 0 1px 2px rgba(18, 74, 91, 0.05);

  /* Spacing scale (rem) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  /* The pale water the sheet floats on. */
  background: var(--sea-pale);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--sea-ink);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { margin: 0 0 var(--sp-4); }

a { color: var(--sea-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--sea-deep); }

/* Nothing on the live site has a focus style. Everything here does. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.smt-input:focus-visible {
  outline: 2px solid var(--sea-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.smt-muted { color: var(--ink-soft); }
.smt-small { font-size: var(--text-sm); }

.smt-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea-ink);
  margin: 0 0 var(--sp-2);
}

/* ---------- The sheet ---------- */
/* One idea does most of the work: a white sheet on pale water. */

.smt-sheet {
  max-width: 90rem;          /* 1440px */
  margin: 0 auto;
  background: var(--sheet);
  box-shadow: var(--shadow-sheet);
  min-height: 100%;
}

.smt-pad { padding: var(--sp-6) var(--sp-5); }
@media (min-width: 64rem) { .smt-pad { padding: var(--sp-7) var(--sp-8); } }

/* Running text wants ~75 characters, not the full sheet width. */
.smt-measure { max-width: 42rem; }

/* ---------- Wordmark ---------- */
/* The serif appears once, at scale. Anywhere else it reads as decoration. */

.smt-wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, var(--text-display));
  line-height: 1;
  color: var(--sea);
  margin: 0;
}

/* ---------- Header ---------- */

.smt-header {
  background: var(--sea-mist);
  box-shadow: 0 0 7px rgba(18, 74, 91, 0.1);
}

.smt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 6.5rem;
  padding: 0 var(--sp-5);
}

/* The logo overhangs the band — carried over from the live site. */
.smt-header__logo { width: 145px; height: auto; display: block; transform: translateY(8px); }

.smt-nav { display: flex; align-items: center; gap: var(--sp-6); }

.smt-nav a {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--sea-ink);
  text-decoration: none;
}
.smt-nav a:hover { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 6px; }
.smt-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Section headings ---------- */

.smt-section-heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--sea-ink);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-6);
}

/* ---------- Buttons ---------- */
/* Squared and unambiguous. The live site's pill-free look, kept. */

.smt-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* The masthead call to action. */
.smt-btn--primary { background: var(--sea-ink); color: #fff; text-transform: uppercase; letter-spacing: 0.02em; }
.smt-btn--primary:hover { background: var(--sea-deep); color: #fff; }

/* Card-level "Learn More" — the greener teal. */
.smt-btn--action { background: var(--tide); color: #fff; font-weight: 500; }
.smt-btn--action:hover { background: var(--tide-deep); color: #fff; }

.smt-btn--secondary { background: transparent; color: var(--sea-ink); border-color: var(--sea-ink); }
.smt-btn--secondary:hover { background: var(--sea-mist); color: var(--sea-deep); }

.smt-btn--quiet { background: transparent; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding: 0.65rem 0.4rem; }
.smt-btn--quiet:hover { color: var(--ink); }

/* ---------- Trip card ---------- */

.smt-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.smt-card__media { display: block; width: 100%; height: 13rem; object-fit: cover; }

.smt-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--sp-3); }

.smt-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0;
}
.smt-card__title a { color: var(--sea-ink); text-decoration: none; }
.smt-card__title a:hover { color: var(--sea-deep); text-decoration: underline; text-underline-offset: 3px; }

.smt-card__meta { margin: 0; font-size: var(--text-base); color: var(--ink); }

.smt-card__foot { margin-top: auto; }

.smt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-5);
}

/* ---------- Badges ---------- */

.smt-badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--sea-mist);
  color: var(--sea-deep);
  white-space: nowrap;
}

.smt-badge--urgent { background: var(--alert-wash); color: var(--alert); }
.smt-badge--full   { background: var(--sea-mist); color: var(--ink-soft); }
.smt-badge--open   { background: var(--ok-wash); color: var(--ok); }

/* ---------- Itinerary ---------- */
/* Day headings and dates are derived from the trip, never typed. */

.smt-days { display: flex; flex-direction: column; gap: var(--sp-3); }

.smt-day { border: 1px solid var(--line); background: var(--card); }

.smt-day__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--sea-mist);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
}
.smt-day__summary::-webkit-details-marker { display: none; }
.smt-day__summary:hover { background: #dff2f6; }

.smt-day__label { font-weight: 400; color: var(--ink-soft); }

.smt-day__sign { color: var(--sea-ink); font-size: 1.4rem; line-height: 1; flex: none; }
.smt-day[open] .smt-day__sign--plus { display: none; }
.smt-day__sign--minus { display: none; }
.smt-day[open] .smt-day__sign--minus { display: inline; }

.smt-day__body { padding: var(--sp-4) var(--sp-5); }
.smt-day__body p:last-child { margin-bottom: 0; }

.smt-day__meals { color: var(--ink-soft); font-size: var(--text-sm); margin-top: var(--sp-3); }

/* ---------- Callouts ---------- */

.smt-callout {
  border: 1px solid var(--line);
  background: var(--sea-mist);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.smt-callout--ok    { background: var(--ok-wash);    border-color: var(--ok); }
.smt-callout--warn  { background: var(--warn-wash);  border-color: var(--warn); }
.smt-callout--alert { background: var(--alert-wash); border-color: var(--alert); }

/* ---------- Price rows ---------- */

.smt-prices { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }

.smt-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--sea-mid);
}

.smt-price__amount {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--sea-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Forms ---------- */

.smt-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.smt-label { font-weight: 600; font-size: var(--text-sm); }

.smt-input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  width: 100%;
}
.smt-input:focus { outline: 2px solid var(--sea-ink); outline-offset: 1px; border-color: var(--sea-ink); }

.smt-hint { font-size: var(--text-sm); color: var(--ink-soft); }

/* ---------- Footer ---------- */

.smt-footer { background: var(--sea-night); color: var(--sea-mist); padding: var(--sp-7) var(--sp-5); }
.smt-footer a { color: var(--sea-mist); }
.smt-footer a:hover { color: #fff; }
.smt-footer__rule { border: 0; border-top: 1px solid var(--sea-deep); margin: var(--sp-6) 0 var(--sp-4); }

/* ---------- Page hero ---------- */
/* Every live page opens with a full-bleed photo band, then the title. */

.smt-hero { position: relative; }
.smt-hero__media { display: block; width: 100%; height: clamp(14rem, 30vw, 26rem); object-fit: cover; background: var(--sea-mist); }
.smt-hero__title { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--text-2xl); }
.smt-hero__lede { font-size: var(--text-lg); color: var(--ink); max-width: 48rem; }

/* ---------- Year sections ---------- */
/* The homepage is one list per departure year, plus a "Future" bucket for
 * trips with no dates yet. The heading is the only divider. */

.smt-year { margin-bottom: var(--sp-8); }
.smt-year:last-child { margin-bottom: 0; }

.smt-year__heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--sea-ink);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-5);
}
.smt-year__heading::after { content: ""; flex: 1; height: 1px; background: var(--sea-mid); }
.smt-year__count { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

/* ---------- Promo band ---------- */
/* The cruise-desk pitch: a tinted band interrupting the card lists. Used at
 * most once per page — it is the only place the sheet changes colour. */

.smt-band { background: var(--sea-mist); padding: var(--sp-7) var(--sp-5); }
@media (min-width: 64rem) { .smt-band { padding: var(--sp-7) var(--sp-8); } }

.smt-band__inner { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 48rem) { .smt-band__inner { grid-template-columns: 1fr 1fr; } }

.smt-band__media { display: block; width: 100%; height: 100%; min-height: 14rem; object-fit: cover; }
.smt-band p:last-of-type { margin-bottom: var(--sp-5); }

/* ---------- Testimonials ---------- */
/* Measured from the live homepage, where the reviews are a full-width teal band
 * with white quotes: h3 name, the location under it, a rule, then the words.
 * Attribution first is right and it is theirs -- the name is what earns the
 * read.
 *
 * The band's colours could not be taken as they stand. The live section is
 * #2bafd4 with white text at 2.57:1, names in the coral #ff6d6d at 1.06:1
 * against that ground -- which is not "low contrast", it is very nearly
 * invisible -- and locations set to `blue`, the raw CSS keyword, which is
 * somebody's placeholder that shipped.
 *
 * So: the same band, the same order, the same warm accent on the names, at
 * values that survive. --sea-ink carries white at 5.2:1; --coral-soft is the
 * same warmth lightened until a bold name clears 3:1 on it; locations take the
 * mist at 4.7:1. */

.smt-quotes-band { background: var(--sea-ink); color: #fff; }
.smt-quotes-band .smt-section-heading { color: #fff; }

.smt-quotes { display: grid; gap: var(--sp-6) var(--sp-5); }
@media (min-width: 60rem) { .smt-quotes { grid-template-columns: repeat(3, 1fr); } }

.smt-quote { display: flex; flex-direction: column; gap: var(--sp-2); }
.smt-quote__who { font-size: var(--text-lg); font-weight: 700; margin: 0; }
.smt-quote__where { font-size: var(--text-sm); margin: 0; }
.smt-quote__rule { border: 0; border-top: 1px solid var(--sea-mid); width: 2.5rem; margin: var(--sp-3) 0; }
.smt-quote__text { margin: 0; }

/* On the teal band. */
.smt-quotes-band .smt-quote__who { color: var(--coral-soft); }
.smt-quotes-band .smt-quote__where { color: var(--sea-mist); }
.smt-quotes-band .smt-quote__rule { border-top-color: var(--sea-mid); }
.smt-quotes-band .smt-quote a { color: var(--sea-mist); }
.smt-quotes-band .smt-quote a:hover { color: #fff; }

/* On the white sheet, where the same component is used without the band. */
.smt-quote__who { color: var(--sea-ink); }
.smt-quote__where { color: var(--ink-soft); }

/* ---------- Person card ---------- */
/* Measured from the live staff page, which builds these out of Divi team
 * modules: a white card with 30px padding and a soft drop shadow, a circular
 * portrait, and the name and role centred beneath it.
 *
 * Taken as-is: the card, the shadow, the circle, the centring. The circle is
 * doing real work here -- these portraits are candid and cropped
 * inconsistently, and a circle hides a bad crop where a square advertises it.
 *
 * Not taken: the name colour. The live site sets it in the coral #ff6d6d,
 * which measures 2.9:1 on white and fails AA on the one piece of text a
 * visitor is most likely to be scanning for. Same treatment the teal got --
 * keep the hue's job, fix the value. */

.smt-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-5); }

.smt-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.smt-person__photo {
  display: block;
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--sea-mist);
  margin-bottom: var(--sp-3);
}

.smt-person__name { font-size: var(--text-lg); font-weight: 700; color: var(--sea-ink); margin: 0; }
/* The live page puts 25px under the role; the gap is what separates it from
 * the address, so it lives here rather than on the name. */
.smt-person__role { font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--sp-3); }
.smt-person__email { font-size: var(--text-sm); word-break: break-word; }

/* ---------- Gallery ---------- */
/* Masonry, as the live gallery is. These photographs are a mix of portrait and
 * landscape and cropping them all to one ratio throws away half of some of
 * them -- a shrine's spire, or the person the picture is of. */

.smt-gallery { column-count: 2; column-gap: var(--sp-3); }
@media (min-width: 48rem) { .smt-gallery { column-count: 3; } }
@media (min-width: 72rem) { .smt-gallery { column-count: 4; } }

.smt-gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--sp-3);
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  line-height: 0;
}
.smt-gallery img { display: block; width: 100%; height: auto; background: var(--sea-mist); border-radius: var(--radius-sm); }

.smt-gallery__item:hover img { opacity: 0.9; }
.smt-gallery__item:focus-visible { outline: 2px solid var(--sea-ink); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- Lightbox ---------- */
/* A <dialog> opened with showModal(), not a div and a z-index. The native
 * element traps focus, closes on Escape, makes the rest of the page inert to
 * screen readers, and hands focus back to whatever opened it -- all of which a
 * hand-rolled overlay has to reimplement and usually gets wrong. */

.smt-lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--sp-5);
  border: 0;
  background: transparent;
  overflow: auto;
  color: #fff;
}
.smt-lightbox::backdrop { background: rgba(18, 74, 91, 0.92); }

.smt-lightbox__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  min-height: 100%;
  justify-content: center;
}

.smt-lightbox img {
  display: block;
  max-width: 100%;
  /* Leaves room for the caption and the controls beneath it. */
  max-height: 70vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

.smt-lightbox__caption { margin: 0; max-width: 42rem; text-align: center; font-size: var(--text-base); }

.smt-lightbox__bar { display: flex; align-items: center; gap: var(--sp-5); }
.smt-lightbox__counter { font-size: var(--text-sm); font-variant-numeric: tabular-nums; opacity: 0.85; }

.smt-lightbox__control,
.smt-lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: the same reason every other control here is that size. */
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  cursor: pointer;
}
.smt-lightbox__control:hover,
.smt-lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.smt-lightbox__control:focus-visible,
.smt-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.smt-lightbox__close { position: fixed; top: var(--sp-4); right: var(--sp-4); }

/* ---------- Contact block ---------- */
/* Address, phone, email, Facebook — in that order, one per line, never in a
 * paragraph. Phone and email are always links on touch devices. */

.smt-contact { display: flex; flex-direction: column; gap: var(--sp-4); font-style: normal; }
.smt-contact__line { display: flex; flex-direction: column; gap: var(--sp-1); }
.smt-contact__label { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.smt-contact__value { font-size: var(--text-lg); }

/* ---------- Footer legal row ---------- */

.smt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--text-sm);
}

/* ---------- Category & tags ---------- */
/* Two different jobs, so two different treatments.
 *
 * CATEGORY — exactly one per trip, and it is who is running the trip and
 * whether a passport is involved. It is the only coloured mark on a card:
 *   domestic        Stella Maris runs it, inside the U.S.
 *   international   Stella Maris runs it, passport required
 *   partner         someone else runs it (206 Tours and similar) and we
 *                   register you — the itinerary and terms are theirs
 * Partner trips need their own colour because the answer to "who do I call
 * when something goes wrong" is different, and that is worth a glance.
 *
 * TAGS — zero or more, never coloured: day-trip, cruise, motorcoach,
 * Marian, chaplain-led, parish group, and the departure year. Tags are for
 * narrowing a long list; they are not status and they are not brand.
 *
 * Year stays the sort order. Category and tags filter across it.
 *
 * The partner pair is the coral from the live site given the same treatment
 * the teal got: kept as a wash, darkened to a readable ink. */
:root {
  --far: #a33f4f;
  --far-wash: #fdeef0;
  --tide-wash: #e6f2f2;
}

.smt-cat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
/* A dot, not an icon — it survives at any size and carries the colour when the
 * label is truncated. */
.smt-cat::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }

.smt-cat--domestic      { background: var(--sea-mist);  color: var(--sea-deep); }
.smt-cat--international { background: var(--tide-wash); color: var(--tide-deep); }
.smt-cat--partner       { background: var(--far-wash);  color: var(--far); }

/* Tags: outline, sentence case, no colour. They must never out-shout the
 * category or read as availability. */
.smt-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }

.smt-tag {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}
a.smt-tag { text-decoration: none; }
a.smt-tag:hover { border-color: var(--sea-ink); color: var(--sea-ink); }

/* Card head: category on the left, availability on the right. Two different
 * questions — never stack them in one row of look-alike pills. */
/* Wraps because both marks are nowrap and a card is only ~17rem wide: at
   "Partner-run" plus "Announcing soon" the second one was being cut off by the
   card edge rather than moving to its own line. */
.smt-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* ---------- Filter bar ---------- */
/* Real buttons with aria-pressed, sized for an older audience: 44px targets,
 * full label, counts included so an empty filter is visible before it is
 * pressed. */

.smt-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}

.smt-filters__label { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-right: var(--sp-2); }

.smt-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.smt-filter:hover { border-color: var(--sea-ink); color: var(--sea-ink); }
.smt-filter::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--line); }
.smt-filter[data-cat="domestic"]::before { background: var(--sea-deep); }
.smt-filter[data-cat="international"]::before { background: var(--tide-deep); }
.smt-filter[data-cat="partner"]::before { background: var(--far); }
.smt-filter[data-cat="all"]::before { display: none; }
/* The tag row is the same control without the dot — tags carry no colour. */
.smt-filters--tags { border-bottom: 0; padding-top: 0; margin-bottom: var(--sp-6); }
.smt-filters--tags .smt-filter { min-height: 2.25rem; font-size: var(--text-sm); font-weight: 600; }
.smt-filters--tags .smt-filter::before { display: none; }

.smt-filter[aria-pressed="true"] { background: var(--sea-ink); border-color: var(--sea-ink); color: #fff; }
.smt-filter[aria-pressed="true"]::before { background: #fff; }

.smt-filter__count { font-weight: 400; font-size: var(--text-sm); opacity: 0.8; font-variant-numeric: tabular-nums; }

/* Shown when a filter empties a year section — the year heading stays, so the
 * absence reads as "none this year", not as a broken page. */
.smt-year__empty { color: var(--ink-soft); font-size: var(--text-sm); margin: 0; }

/* ---------- Header wave ---------- */
/* Three bands of the same blue at different tints, cresting and troughing and
 * overlapping -- which is what the logo does, and what the single flat swoop
 * this replaces did not. That swoop was the same colour as the band it hung
 * from, so it read as the header's bottom edge cut on a curve rather than as
 * water in front of anything.
 *
 * Tints run deepest at the top to palest at the bottom. That order is doing the
 * work twice over: it is the direction that reads as distance, and it keeps the
 * teal up near the nav so that text tucked into the swoop lands on the pale
 * band and never on the teal.
 *
 * Sampled from the rendered page rather than estimated. A heading in --sea-ink
 * on the pale band measures 4.82:1, which clears AA for normal text and not
 * just the 3:1 a large heading would need; body ink on it is 8.32:1. The same
 * heading would be 3.73:1 on the middle band and 3.19:1 on the front one, which
 * is why the depths are capped where they are -- those two bands must stay
 * above the text, not merely behind it.
 *
 * Translucent on purpose. Over the white sheet it changes almost nothing.
 * Over a trip page's hero photograph, where this paints across the top of the
 * image, the photograph reads through the upper bands -- the same overlap the
 * logo is built from. */

.smt-header { position: relative; }
:root { --wave-h: clamp(4rem, 10vw, 10rem); }

.smt-wave {
  display: block;
  width: 100%;
  height: var(--wave-h);
  pointer-events: none;
  /* Above a photograph or a colour band, below text. See the tuck rules. */
  position: relative;
  z-index: 1;
  /* The bands are cut from a taller viewBox than they fill; without this the
     overshoot on the deepest crest would be clipped into a flat edge. */
  overflow: visible;
}

/* Opacities are what make three bands read as three. At 0.3-0.4 over a white
 * sheet the two upper ones were a wash you had to look for; the step between
 * adjacent bands is what registers, not the absolute value.
 *
 * The pale band is 0.85 rather than opaque, and that is the whole point of the
 * exercise. Over the white sheet it is indistinguishable from solid, because
 * white is what sits behind it anyway. Over a trip page's hero photograph --
 * where these paint across the top of the image -- the photograph reads through
 * the water instead of being cut off by it. Opaque, the upper two bands never
 * overlap anything but the pale one and the layering is invisible on exactly
 * the page it does the most for. */
.smt-wave__band--far  { fill: var(--sea-mist); fill-opacity: 0.85; }
.smt-wave__band--mid  { fill: var(--sea-pale); fill-opacity: 0.75; }
.smt-wave__band--near { fill: var(--sea-mid);  fill-opacity: 0.6; }

/* Tucking content into the swoop.
 *
 * Without this the wave would be a divider: mist, then the arc, then content
 * starting cleanly below it, and the arc's area reads as empty because nothing
 * ever sits in it. Instead the first block on every page rises into the curve.
 *
 * 0.72 rather than the full height: at 1.0 the text rides up level with the
 * nav; below about two thirds it stops reading as deliberate. The multiplier is
 * of --wave-h, so the pull flattens along with the curve on a narrow screen
 * rather than stranding a heading half on mist and half on white.
 *
 * Applied by position rather than by a class on each template, so a page added
 * later gets it without anyone remembering to. Which of the two treatments a
 * page gets depends on what it opens with, and the difference is only ever
 * which one paints on top:
 *
 *   opens with words   the block sits ON the water, bands sweeping behind it
 *   opens with a photo the bands are drawn ACROSS the top of the image
 *
 * A flash message is exempt. It is not what the page is about, and a notice
 * floating in the swoop reads as a mistake. */

/* Words. Above the wave, so the bands pass behind the text. */
.smt-main > .smt-pad:first-child:not(.smt-pad--flush),
.smt-main > .smt-tucked:first-child {
  margin-top: calc(var(--wave-h) * -0.72);
  position: relative;
  z-index: 2;
}

/* A photograph or a colour band. Below the wave, so the water reads across it. */
.smt-main > .smt-hero:first-child,
.smt-main > .smt-banner:first-child {
  margin-top: calc(var(--wave-h) * -0.72);
}

/* ---------- Reflections ---------- */
/* Measured from the rendered live page, not from its shortcodes -- half of
 * what that page's content holds sits in disabled sections and never reaches a
 * visitor.
 *
 * Four columns of loosely staggered entries. Each is a card defined not by a
 * fill or a border but by a solid teal shadow thrown up and to the left:
 * box-shadow: -6px -10px 0 #2bafd4, corners rounded 12px. It reads as a frame
 * lifted off the page, and it is the most distinctive thing on the site.
 * Photographs sit in the same columns but carry no frame at all.
 *
 * CSS columns rather than grid, because the entries are wildly uneven and the
 * point of the live layout is that a two-line reflection costs two lines. */

.smt-reflections {
  column-count: 1;
  column-gap: var(--sp-5);
}
@media (min-width: 40rem) { .smt-reflections { column-count: 2; } }
@media (min-width: 64rem) { .smt-reflections { column-count: 4; } }

.smt-reflection {
  /* A column break through the middle of a reflection separates a photograph
     from the paragraph it illustrates, which is the one thing this layout must
     not do. */
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* The frame belongs to the words, not to the photograph. On the live page an
 * entry with a picture shows the picture plain and the paragraph framed. */
.smt-reflection__text {
  margin: 0;
  padding: 0.75rem;
  font-size: var(--text-base);
  line-height: 1.3;
  color: #000;
  border-radius: 12px;
  box-shadow: -6px -10px 0 var(--sea);
}

.smt-reflection__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--sea-mist);
}

/* An entry with no photograph is not a different kind of thing here -- the
 * frame already gives every entry its weight, so it needs no second treatment.
 * Kept as a hook for the app, which still marks them. */
.smt-reflection--plain { }

/* The opening entry, at the top of the first column. */
.smt-reflection__lead::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.2em;
  line-height: 0.82;
  color: var(--sea);
  padding: 0.05em 0.1em 0 0;
}

/* ---------- Page banner ---------- */
/* The live "Why a Pilgrimage?" opens on a solid teal band with the title in
 * white on the left and a photograph on the right -- not a full-bleed photo.
 *
 * The live band is #2bafd4, which puts white text at 2.57:1 and fails AA even
 * at the large-text threshold of 3:1. So the band takes --sea-ink, the same
 * hue at a value that reads (5.2:1). Identical at a glance, and the same trade
 * this file already made for every other piece of teal text. */

.smt-banner { background: var(--sea-ink); color: #fff; }

.smt-banner__inner {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6) var(--sp-5);
  max-width: 90rem;
  margin: 0 auto;
}
@media (min-width: 55rem) {
  .smt-banner__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-7); padding: var(--sp-7) var(--sp-8); }
}

.smt-banner__title { margin: 0; color: #fff; font-size: var(--text-2xl); line-height: var(--leading-tight); }
.smt-banner__media { display: block; width: 100%; height: 100%; max-height: 20rem; object-fit: cover; }

/* ---------- Person bio ---------- */
/* The staff page opens with the founder's story before the grid. Portrait
 * left, prose right, and it is the only place a person gets more than a
 * caption. */

.smt-bio { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 55rem) { .smt-bio { grid-template-columns: 20rem 1fr; gap: var(--sp-7); } }
.smt-bio__photo { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sea-mist); border-radius: var(--radius); }
.smt-bio__lede { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.45; color: var(--sea-ink); margin: 0 0 var(--sp-5); }