/* =============================================================================
   LAYER 3 — COMPONENTS
   The design.md §4 primitives. Every one is self-contained and consumes only tokens.

   RULE: if something here is used by exactly one context, it belongs in layer 4.
   If something in layer 4 is needed by a second context, it moves HERE.
   Duplication across 4-context/*.css is the failure mode this layer prevents.

   Naming: BEM-lite, sr- prefixed. Blocks emit these class names so the editor writes
   prose, never class strings.
   ============================================================================= */

/* =============================================================================
   HEADER (design.md §4, D8/D9)
   ============================================================================= */
.sr-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s4);
}
.sr-header--scrolled { box-shadow: var(--shadow-1); }

.sr-logo { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.sr-logo img, .sr-logo svg { width: auto; height: 40px; }
.sr-logo__word { font-family: var(--f-display); font-weight: 800; color: var(--sea); }
.sr-logo__tld  { color: var(--coral); }

.sr-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s4); }
.sr-nav__link {
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding: var(--s1) 0; border-bottom: 2px solid transparent;
}
.sr-nav__link:hover, .sr-nav__link:focus-visible { color: var(--sea); border-bottom-color: var(--sea); }

/* Propisi carries the flagship cue — the one coral element in the nav. */
.sr-nav__flag {
  background: var(--coral); color: var(--on-fill);
  font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-pill);
  margin-left: var(--s1); vertical-align: 1px;
}

/* D9: no cart, no account. Enforced in inc/cleanup.php — these rules are a SAFETY NET for
   a stray editor-added link, not the mechanism. Removing it in PHP is the mechanism. */
.sr-header .wc-menu-item,
.sr-header .cart-contents { display: none !important; }

@media (max-width: 768px) {
  .sr-nav { display: none; }
  .sr-nav--open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 200;
    background: var(--surface); padding: var(--s7) var(--s4); gap: var(--s5);
    overflow-y: auto;
  }
}

/* =============================================================================
   BREADCRUMBS — logical tree, not URL path (D8; RankMath supplies the markup)
   ============================================================================= */
.sr-crumbs { font-size: var(--fs-small); color: var(--muted); margin-bottom: var(--s4); }
.sr-crumbs a { color: var(--muted); }
.sr-crumbs [aria-current="page"] { color: var(--ink); }

/* =============================================================================
   UKRATKO — the GEO lever. Present near the top of every editorial template.
   ============================================================================= */
.sr-ukratko {
  background: var(--azure-tint);
  border-left: 4px solid var(--sea);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s5) var(--s5) var(--s4);
  margin-block: var(--s5);
}
.sr-ukratko__title { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.sr-ukratko__list { margin: var(--s3) 0 0; padding-left: var(--s5); }
.sr-ukratko__list > li { margin-bottom: var(--s2); }
/* Real <ul>, never an image — the whole point is that assistants can extract it. */

/* Blog uses a shortened variant — the one sanctioned exception (design.md §7b). */
.sr-ukratko--short .sr-ukratko__list { display: none; }

/* =============================================================================
   STATUS PILLS — REGULATORY MEANING ONLY (design.md §1, §4)
   ============================================================================= */
.sr-pill {
  display: inline-block;
  font-family: var(--f-body); font-weight: 600; font-size: 13px;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 11px; border-radius: var(--r-pill);
  color: var(--on-fill);
  white-space: nowrap; /* a date range must never break mid-value: "1.4. – 31.5." */
}
.sr-pill--closed { background: var(--closed); }
.sr-pill--open   { background: var(--open); }
.sr-pill--none   { background: transparent; color: var(--muted); border: 1px solid var(--muted); }

/* Freshness cue next to H1 — answers "is this current" before any body copy. */
.sr-freshness {
  display: inline-block; background: var(--sea); color: var(--surface);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
}

/* =============================================================================
   DATA TABLE — responsive by CARD-STACK, not horizontal scroll
   -----------------------------------------------------------------------------
   design.md §4, revised 2026-08-04. The original overflow-x + min-width spec is
   WITHDRAWN: it was shipped on Handy Labels and clipped the last column on mobile
   (operator-caught 2026-07-15). Below 768px each row becomes a card and every <td>
   re-injects its own column name from data-label.

   EVERY <td> MUST CARRY data-label="…" — the card view renders blank without it.
   ============================================================================= */
.sr-table-wrap { overflow-x: auto; }      /* desktop-narrow fallback ONLY, never the mobile strategy */
.sr-table-wrap:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }

.sr-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sr-table caption { text-align: left; font-size: var(--fs-small); color: var(--muted); padding-bottom: var(--s2); }
.sr-table th {
  background: var(--sea); color: var(--surface);
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
  padding: 11px var(--s3);
}
.sr-table td { padding: 11px var(--s3); border-bottom: 1px solid var(--border); }
.sr-table tbody tr:nth-child(even) { background: var(--zebra); }
.sr-table td:first-child { font-weight: 600; }

@media (max-width: 768px) {
  .sr-table thead { display: none; }
  .sr-table tbody tr {
    display: flex; flex-wrap: wrap;
    margin-bottom: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--surface);
  }
  .sr-table tbody tr:nth-child(even) { background: var(--surface); }
  .sr-table td { border-bottom: 0; padding: 9px var(--s3); box-sizing: border-box; width: 100%; }

  /* Comparable values sit SIDE BY SIDE, not stacked.
     Every cell at 100% left the right half of each row empty and made a two-value row read
     as two unrelated facts (owner, 2026-08-11: the fee table, sportski vs rekreacijski).
     Cells after the first now share the row at ~half width each, so a 3-column table gives
     one full-width title and two values to compare at a glance; a 4-column table wraps to
     2+1 rather than four stacked lines. The first cell keeps full width — it is the card
     title, not a value. */
  .sr-table td:not(:first-child) { flex: 1 1 44%; width: auto; min-width: 44%; }
  .sr-table td:not(:first-child) + td { border-left: 1px solid var(--border); }
  .sr-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 3px;
  }
  /* The first cell is the card title — no label, tinted, full width. */
  .sr-table td:first-child {
    background: var(--azure-tint);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-h4);
  }
  .sr-table td:first-child::before { display: none; }

  /* Per-table column ratios live in layer 4 — a 4-column regs table and a 5-column gear
     cross-link table want different splits, and design.md §4 specifies them per table.
     The default above (everything full width) is the safe fallback. */
}

/* =============================================================================
   BUY-BOX — affiliate CTA
   -----------------------------------------------------------------------------
   DENSITY, settled 2026-08-04 (ruling 2, option c): ONE solid coral CTA per group;
   every sibling in that group is OUTLINED coral. The old "one primary per viewport,
   alternatives as text links" rule is withdrawn — no template obeyed it on desktop.
   Solid-vs-outline carries the hierarchy at every width, so mobile needs no special case.
   ============================================================================= */
.sr-buybox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }

.sr-buybox {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
}
.sr-buybox__name    { font-weight: 600; font-size: 17px; }
.sr-buybox__verdict { color: var(--muted); font-size: 15px; }
.sr-buybox__micro   { font-size: 13px; color: var(--muted); }

.sr-btn {
  display: inline-block; text-align: center; text-decoration: none;
  font-family: var(--f-body); font-size: var(--fs-btn); font-weight: 600;
  padding: 11px var(--s5); border-radius: var(--r-input);
  border: 1.5px solid transparent; cursor: pointer;
}
/* The one solid coral per group. White on --coral is large/bold only; this is 16px 600,
   which is why the hover state drops to --coral-dark (4.6:1) rather than lightening. */
.sr-btn--buy         { background: var(--coral); color: var(--on-fill); border-color: var(--coral); }
.sr-btn--buy:hover   { background: var(--coral-dark); border-color: var(--coral-dark); color: var(--on-fill); }
/* Siblings in the same group. */
.sr-btn--buy-alt       { background: transparent; color: var(--coral-dark); border-color: var(--coral); }
.sr-btn--buy-alt:hover { background: var(--coral); color: var(--on-fill); }

/* Email capture is --sea, NEVER --coral — coral stays exclusively affiliate money.
   (design.md §7b, and the Propisi flagship carries no affiliate intent at all.) */
.sr-btn--email       { background: var(--sea); color: var(--surface); border-color: var(--sea); }
.sr-btn--email:hover { background: var(--sea-dark); border-color: var(--sea-dark); color: var(--surface); }

/* Placed BEFORE the first buy-box on every template that has one (added to Templates A
   and B by the 2026-08-04 wireframe review). Compliance placement, not a footer line. */
.sr-disclosure { font-size: 15px; color: var(--muted); font-style: italic; margin-block: var(--s4); }

/* =============================================================================
   SPECIES CARD
   ============================================================================= */
.sr-species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4); }
.sr-species-card {
  display: block; text-decoration: none; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.sr-species-card:hover { border-color: var(--sea); }
/* height:auto is LOAD-BEARING: without it the img's height="…" attribute wins and
   aspect-ratio is legally ignored — the exact portrait-tile bug the mockup shipped
   on 2026-08-08 and the owner caught from a screenshot. Do not remove. */
.sr-species-card__photo { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; display: block; }
/* No-photo fallback: a designed tile (gradient + initial), never an empty hole.
   Zubatac shipped photo-less on 2026-08-09 and the bare card read as broken. */
.sr-species-card__noph {
  aspect-ratio: 3 / 2; width: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--sea) 0%, var(--azure) 130%);
  color: var(--on-fill); opacity: .92;
  font-family: var(--f-display); font-weight: 800; font-size: 44px;
}
.sr-species-card__body  { padding: var(--s3); }
.sr-species-card__name  { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--sea); }
.sr-species-card__latin { font-style: italic; color: var(--muted); font-size: 13.5px; }

/* =============================================================================
   FAQ ACCORDION — on every editorial template; highest-risk a11y component here
   Markup contract (wireframes §0.8): heading > button[aria-expanded][aria-controls],
   panel carries [hidden] when collapsed. Answers stay in the DOM — never injected on
   click, because the GEO value depends on them being crawlable.
   ============================================================================= */
.sr-faq { border-top: 1px solid var(--border); }
.sr-faq__item { border-bottom: 1px solid var(--border); }
.sr-faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h4);
  color: var(--sea); padding: var(--s4) var(--s6) var(--s4) 0; position: relative;
}
.sr-faq__q::after {
  content: "+"; position: absolute; right: var(--s2); top: 50%; translate: 0 -50%;
  font-size: 22px; font-weight: 400; color: var(--muted);
}
.sr-faq__q[aria-expanded="true"]::after { content: "\2212"; }
.sr-faq__a { padding-bottom: var(--s4); }
.sr-faq__a[hidden] { display: none; }

/* --- <details> variant — THE CANONICAL ONE for editor-authored FAQ ------------
   The block pattern emits core/details rather than the button markup above. That is a
   straight upgrade on both requirements the button version existed to satisfy:
   <details> is natively keyboard-operable with NO JavaScript, and the answer stays in
   the DOM open or closed, which is exactly the property the GEO value depends on.

   The button styles above stay for anything hand-coded, but new content should use this.
   --------------------------------------------------------------------------- */
details.sr-faq__item { border-bottom: 1px solid var(--border); }
details.sr-faq__item > summary {
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h4);
  color: var(--sea); padding: var(--s4) var(--s6) var(--s4) 0; position: relative;
}
details.sr-faq__item > summary::-webkit-details-marker { display: none; }
details.sr-faq__item > summary::after {
  content: "+"; position: absolute; right: var(--s2); top: 50%; translate: 0 -50%;
  font-size: 22px; font-weight: 400; color: var(--muted);
}
details.sr-faq__item[open] > summary::after { content: "\2212"; }
details.sr-faq__item > :not(summary) { padding-bottom: var(--s4); }
/* Focus lands on <summary>; the shared :focus-visible rule in layer 2 covers it. */

/* =============================================================================
   SAND CALLOUT — neutral emphasis. Deliberately NOT a status pill: --open/--closed
   are regulatory only, so news, seasonal and zone notes use sand instead.
   ============================================================================= */
.sr-callout { background: var(--sand); border-radius: var(--r-card); padding: var(--s4) var(--s5); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.sr-footer { background: var(--sea); padding: var(--s6) var(--s4) var(--s5); }
.sr-footer h4 { color: var(--on-fill); font-size: 15px; margin-bottom: var(--s2); }
/* #B8D9EE is the azure family at ~5:1 on --sea — azure itself would fail here. */
.sr-footer a, .sr-footer p { color: var(--footer-link); font-size: 15px; }
.sr-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s5); }
.sr-footer__legal {
  border-top: 1px solid var(--footer-rule); margin-top: var(--s5); padding-top: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--fs-small);
}

/* =============================================================================
   DIAGRAMS (design.md §5) — inline SVG, never <img>, so strokes inherit tokens.
   The casing stroke punches the visual gap that encodes "this strand passes UNDER";
   it MUST be painted in the panel's own background or it becomes a visible scar.
   ============================================================================= */
.sr-diagram { background: var(--dg-bg); border-radius: var(--r-card); }
.sr-diagram svg { display: block; width: 100%; height: auto; }
.k-line   { fill: none; stroke: var(--dg-line);   stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.k-active { fill: none; stroke: var(--dg-active); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.k-casing { fill: none; stroke: var(--dg-bg);     stroke-width: 13; stroke-linecap: round; }
.k-hook   { fill: none; stroke: var(--dg-hook);   stroke-width: 4; stroke-linecap: round; }

/* =============================================================================
   SPOKE TEASERS — hub/pillar/index cards (moved from pillar.css: used by the
   /propisi/ index AND pillar pages — two contexts = components)
   ============================================================================= */
.sr-spokes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.sr-spoke {
  border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s4);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--s2);
}
.sr-spoke:hover { border-color: var(--sea); }
.sr-spoke__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h4); color: var(--sea); }
.sr-spoke__teaser {
  font-size: 15.5px; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.sr-spoke__more { font-size: var(--fs-small); font-weight: 600; margin-top: auto; }

/* =============================================================================
   LOVOSTAJ BAND — dated status + source caption (home, hubs; the propisi page uses
   its own richer strip). Data comes from the self-expiring widget; the band renders
   nothing once the verification date goes stale.
   ============================================================================= */
.sr-band { background: var(--surface); border-block: 1px solid var(--border); }
.sr-band__in { max-width: var(--shell); margin-inline: auto; padding: 13px var(--s4);
  display: flex; align-items: center; gap: var(--s3) var(--s5); flex-wrap: wrap; font-size: 15px; }
.sr-band__label { font-weight: 700; font-family: var(--f-display); color: var(--sea); }
.sr-band__item { display: flex; align-items: center; gap: 7px; }
.sr-band__more { margin-left: auto; font-size: var(--fs-small); }
.sr-band__src { width: 100%; font-size: 13px; color: var(--muted); }
@media (max-width: 768px) {
  .sr-band__label { width: 100%; }
  .sr-band__item { flex: 0 0 calc(50% - 11px); justify-content: space-between; }
  .sr-band__more { margin-left: 0; width: 100%; }
}

/* =============================================================================
   PANEL BUTTON — outlined sea action (index links on water panels and hubs;
   Codex review #23: index links must read as actions, not footer text)
   ============================================================================= */
.sr-btn--panel { background: transparent; color: var(--sea); border-color: var(--sea);
  padding: 10px 18px; font-size: 15px; }
.sr-btn--panel:hover { background: var(--sea); color: var(--surface); }

/* =============================================================================
   KICK — small uppercase scope label ("Najtraženije vrste"), so a 6-tile grid
   reads as a highlight, not the whole catalogue (owner 2026-08-08)
   ============================================================================= */
.sr-kick { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }

/* =============================================================================
   NEWSLETTER BAND — sea panel, --sea action, NEVER coral (coral = money only).
   Rendering is gated in PHP until an email-capture plugin exists (D14 gap).
   ============================================================================= */
.sr-news { background: var(--sea); border-radius: 12px; padding: var(--s6);
  color: var(--surface); display: flex; align-items: center; gap: var(--s5) var(--s7);
  flex-wrap: wrap; }
.sr-news h2 { color: var(--surface); font-size: 24px; }
.sr-news p { color: var(--on-sea-soft); font-size: 15.5px; }
.sr-news form { display: flex; gap: var(--s3); flex-wrap: wrap; flex: 1 1 320px; }
.sr-news input { flex: 1 1 200px; }

/* =============================================================================
   LAYOUT HELPERS
   ============================================================================= */
.sr-shell   { max-width: var(--shell);   margin-inline: auto; padding-inline: var(--s5); }
.sr-measure { max-width: var(--measure); }
.sr-section { padding-block: var(--pad-section); }
@media (max-width: 768px) { .sr-section { padding-block: var(--pad-section-m); } }

/* --- site footer (inc/footer.php) -------------------------------------------
   Renders on every page of all three installs and is, until a real primary menu
   exists on each install, the site's only complete navigation — so it is styled as
   a first-class region, not as fine print. Sea ground because the footer is the one
   place the brand colour can carry a whole block without competing with content.
   --------------------------------------------------------------------------- */
.sr-footer { background: var(--sea); color: var(--footer-link); margin-top: var(--s7); padding: var(--s6) 0 var(--s5); }
.sr-footer__cols {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.sr-footer__head {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-fill); margin: 0 0 var(--s3);
}
.sr-footer__list { list-style: none; margin: 0; padding: 0; }
.sr-footer__list li + li { margin-top: var(--s2); }
.sr-footer__list a { color: var(--footer-link); text-decoration: none; }
.sr-footer__list a:hover,
.sr-footer__list a:focus-visible { color: var(--on-fill); text-decoration: underline; }
.sr-footer__legal {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--footer-rule);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: var(--fs-small); color: var(--footer-link);
}
.sr-footer__legal a { color: var(--on-fill); }

/* --- spoke cards with a picture (inc/template-hubs.php) ----------------------
   The owner's note was "too much text, not enough images". A spoke is now a picture card:
   16:9 image, then title, teaser and CTA. Cards whose destination has no photograph get a
   tinted tile in one of four brand-derived washes rather than a hole in the grid, so a
   half-illustrated hub still reads as a deliberate grid. As archive originals land the
   tiles become photographs with no code change.
   --------------------------------------------------------------------------- */
.sr-spokes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.sr-spoke {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.sr-spoke:hover { border-color: var(--sea); transform: translateY(-2px); }
.sr-spoke__img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--sand); }
.sr-spoke__img--none { background: linear-gradient(135deg, var(--sea) 0%, var(--azure) 100%); opacity: .16; }
.sr-spoke__img--none[data-n="2"] { background: linear-gradient(135deg, var(--azure) 0%, var(--sea) 100%); }
.sr-spoke__img--none[data-n="3"] { background: linear-gradient(160deg, var(--sea) 0%, var(--amber) 120%); }
.sr-spoke__img--none[data-n="4"] { background: linear-gradient(200deg, var(--azure) 0%, var(--sea) 90%); }
.sr-spoke__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.sr-spoke__title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3-m); color: var(--sea); line-height: var(--lh-head); }
.sr-spoke__teaser { font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-body); }
.sr-spoke__more { margin-top: auto; font-size: var(--fs-small); font-weight: 600; color: var(--sea); }

/* --- inline archive figures (restored 2026-08-10) ---------------------------
   The 2013/2014 photographs are small originals (many under 640px wide), so they are
   capped rather than stretched: an upscaled archive frame looks worse than a modest one.
   Centred with breathing room so they read as punctuation in a long article.
   --------------------------------------------------------------------------- */
.sr-inline-fig { margin: var(--s5) 0; text-align: center; }
.sr-inline-fig img {
  max-width: 100%; height: auto; border-radius: var(--r-card);
  border: 1px solid var(--border);
}

/* --- FAQ break (sr_faq_divider) ---------------------------------------------
   A visible gear change before the Q&A block, which otherwise arrives after ~2000 words
   and reads as more body copy. Rule + label + one quiet regulatory link. NOT coral:
   coral is the money path only, and the next step from a species page is the regs table.
   --------------------------------------------------------------------------- */
.sr-faq-break {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin: var(--s6) 0 var(--s4); padding-top: var(--s4);
  border-top: 2px solid var(--sea);
}
.sr-faq-break__label {
  font-family: var(--f-display); font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sea);
}
.sr-faq-break__link { font-size: var(--fs-small); font-weight: 600; margin-left: auto; }

/* Caption under an inline archive figure. Photo credit belongs visible, not in metadata:
   these are the owner's own catch photographs and the credit is what separates them from
   the stock imagery design.md §5 bans. */
.sr-inline-fig figcaption {
  margin-top: var(--s2); font-size: var(--fs-small); color: var(--muted); font-style: italic;
}

/* --- header lockup (inc/branding.php) ---------------------------------------
   Mark + live wordmark. The sub-label under the name is what tells a visitor which of the
   three installs they are on, so it is set in the display face and spaced, not shrunk into
   a caption. --f-display keeps it in family with the H1 it sits above.
   --------------------------------------------------------------------------- */
.sr-brand__lock { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.sr-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.sr-brand__name {
  font-family: var(--f-display); font-weight: 800; font-size: 21px;
  letter-spacing: -.015em; color: var(--sea);
}
.sr-brand__tld { color: var(--coral); }
.sr-brand__sub {
  font-family: var(--f-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px;
}
.sr-brand__lock:hover .sr-brand__name { color: var(--azure); }
@media (max-width: 480px) { .sr-brand__name { font-size: 18px; } }