/* ============================================================================
   local-info.css — the LOCAL INFO reading page and its index.
   ----------------------------------------------------------------------------
   WHAT THIS IS. The visitor-facing surface for `kind='article'` records
   (ARTICLES-SYSTEM.md) at /local-info/<slug>/ plus the index at /local-info/.
   A visitor searches "clam gun", gets a Local Info row, and lands here. The
   page must read as THE SITE ANSWERING A QUESTION — a reference board — and
   never as a blog. Everything below is built to hold that line:

     no posted-on date       no author-first layout    no recent-posts river
     no comments             no tag cloud              no pagination
     no share row            no "related posts"

   The one date on the page is a "Checked" line in the FOOT (.li-checked).
   An evergreen reference page earns a *verified-on*; only a blog needs a
   *posted-on*, and the difference is the whole distinction the owner asked for.

   WHAT IT IS NOT. Not a second card kit, not a second art window, not a second
   "no photo" treatment. Those already exist and this file USES them:
     .ce-plate / .ce-plate--book   member-plate.css — THE no-photo bookplate
                                   (owner ruling 2026-08-28). Never invent a
                                   second monogram. Renderer: js/utils/member-plate.js
     .ce-artwin                    ce-artwin.css — THE letterboxed art window,
                                   so a portrait photo is not beheaded
     .ce-wrap .ce-sec .ce-head     coastal.css — the shared kit
     .ce-grid .ce-chip .ce-cta
     .ce-ic                        the feather-style inline SVG set
                                   (paths in js/header-loader.js). NO EMOJI.

   PAGES THAT LINK IT
     /local-info/index.html  and  /local-info/<slug>/index.html
     Both also link css/style.css + css/coastal.css + css/ce-artwin.css +
     css/member-plate.css, in that order, before this file.
     🔴 A NEW file on purpose (same reasoning as member-plate.css): coastal.css
     is linked by 19 pages under separate `?v=` keys, so editing it to ship an
     article style would drag every stale key with it. This file starts at v=1
     on both new pages at once. See KNOWN_ERRORS.md.

   COLOUR. Tokens only — every colour, radius and font here is a `--ce-*` from
   coastal.css `:root`. A hex literal would fight the Design Studio's theme
   bake, which is the one and only colour gate. There are no hex literals in
   this file except `#fff`, which is the site-wide convention for a white card
   ground and is what the existing kit uses.

   PATTERNS COPIED (never linked) from the house UI catalog:
       copied from ui-foundry #card.ledger — do not link       .li-group rule
       copied from ui-foundry #card.namecard — do not link     .li-rec--stay
   Foundry THEMES are never imported; only layout vocabulary is taken.

   NO STICKY ANYTHING. Nothing in this file pins to the viewport, so the
   documented "sticky element hides under the 60px mobile header" bug
   (--ce-hdr-h-sm) cannot happen here. The in-page jump list (.li-jump) is
   deliberately static for that reason.
   ========================================================================== */


/* ============================================================================
   1. SCAFFOLD
   ========================================================================== */

/* The page ground is warm sand, not white: a reference board, not a document.
   The article itself sits on a white sheet so the prose has an edge. */
.li-page { background: var(--ce-sand); }

/* The reading column. 68ch is the measure the body copy is tuned for; the
   `--li-col` custom property lets a wide block (a figure, a fact box) break
   out to the full sheet without a second wrapper. */
.li-sheet {
  --li-col: 68ch;
  max-width: 860px; margin: 0 auto; background: var(--ce-cream);
  border-radius: var(--ce-r-card-lg); border: var(--ce-border-warm);
  box-shadow: var(--ce-shadow-card);
  padding: clamp(26px, 4.4vw, 54px) clamp(20px, 4vw, 60px) clamp(30px, 4vw, 48px);
}

/* Everything inside the sheet is centred on the measure. */
.li-sheet > * { max-width: var(--li-col); margin-left: auto; margin-right: auto; }


/* ============================================================================
   2. BREADCRUMB — top of page, and the return band at the foot
   ========================================================================== */

/* At the TOP because that is where "you are here" belongs on an information
   board, and where a BreadcrumbList is read. The foot carries a return band
   (.li-back) as well, since three auto-blocks sit between the prose and it. */
/* ----------------------------------------------------------------------------
   2b. THE HERO  (added 2026-09-06, owner ruling on the first live page)

   The masthead is a FULL-BLEED BAND, not the top of the reading card. On a real
   wide monitor the page opened with an 860px white card floating in sand with
   ~520px of empty ground either side, and it read as nothing else on this site:
   "doesn't remind me of any of the other pages." The cause was exact - every
   other public page opens with style.css's `.page-hero`, and this one did not.

   So this REUSES that component whole: same navy, same dawn-glow gradient, same
   coral kicker, same display h1, same luminous seam at its base. Nothing new was
   designed and no colour was chosen here. All that follows is the handful of
   parts that now sit ON the navy and need light-on-dark values.

   RED FLAG: the ANSWER PANEL did NOT move into the hero. As a hero lede it
   becomes the one thing this whole design refuses to be - a lede reads as the
   start of an essay, a panel reads as an answer. It stays a panel, and it is
   still the first thing on the sheet.
   ---------------------------------------------------------------------------- */

.li-hero .li-crumb { justify-content: center; margin-bottom: 15px; color: var(--ce-mist-2); }
.li-hero .li-crumb a { color: var(--ce-mist-soft); }
.li-hero .li-crumb a:hover { border-bottom-color: var(--ce-mist-soft); }
.li-hero .li-crumb__sep { background: rgba(255, 255, 255, .38); }
.li-hero .li-crumb__here { color: #fff; }
/* The kicker is .page-hero__kicker (coral, lightened for AA on navy). Its usual
   marker is a glowing dot; here it is the topic's own icon, which is the one
   thing that tells a reader which shelf the piece sits on. */
.li-hero .page-hero__kicker .ce-ic { width: 15px; height: 15px; }
/* An article title is a sentence, not a two-word page name, so it takes a
   slightly smaller top end and a measure that does not run the full 780px. */
.li-hero h1 { font-size: clamp(1.95rem, 3.5vw, 2.85rem); max-width: 22ch; margin: 0 auto; }
/* First element on the sheet since the hero landed, so it carries no top margin
   of its own - the sheet's own padding is the space above it. */
.li-sheet > .li-deck:first-child { margin-top: 0; }

/* THE WING (2026-09-06 evening, owner ask: "fancier — an image faded into it").
   A topic-mapped coast photograph on the band's seaward side, masked into the
   navy so the centred title never sits on photograph. The band itself is STILL
   style.css's .page-hero — the wing is a layer inside it, same veil family as
   the homepage ce-hero (coastal.css), not a new hero component.
   Layering: .page-hero is isolated; ::before (atmosphere) is z -2, the wing
   sits at -1 above it, the ::after seam paints over the wing, and the text
   (.page-hero__inner, z 1) is always on top.
   The mask rides the CONTAINER, not the img: everything in the wing (photo AND
   veil) fades into the navy together, so a slow image load can never flash a
   hard-edged veil box where the photograph will be. */
.li-hero { min-height: clamp(200px, 22vw, 290px); display: flex; flex-direction: column; justify-content: center; }
.li-hero__art {
  position: absolute; inset: 0 0 0 auto; width: min(46%, 760px); z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46%);
  mask-image: linear-gradient(to right, transparent 0, #000 46%);
}
.li-hero__art img {
  width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92;
  animation: li-hero-drift 1.8s ease-out;
}
/* A navy veil over the wing: keeps the photo atmospheric rather than postcard,
   and doubles as the fade for browsers without mask-image. */
.li-hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ce-navy) 0%,
    color-mix(in srgb, var(--ce-navy) 55%, transparent) 38%,
    color-mix(in srgb, var(--ce-navy) 24%, transparent) 100%);
}
/* `from` only, and no fill-mode: the animation must END on the element's own
   cascade value, not pin one — a `to {opacity:.92} both` here silently overrode
   the phone veil's .24 at every width (a fill-mode holds beat the media query). */
@keyframes li-hero-drift {
  from { opacity: 0; transform: scale(1.05) translateX(14px); }
}
/* On a phone the band is short and the title needs every pixel of quiet navy:
   the wing dissolves into a faint full-bleed backdrop instead of a side panel. */
@media (max-width: 640px) {
  .li-hero__art { width: 100%; mask-image: none; -webkit-mask-image: none; }
  .li-hero__art img { opacity: .24; }
  .li-hero__art::after { background: color-mix(in srgb, var(--ce-navy) 80%, transparent); }
}

.li-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  font-family: var(--ce-font-body); font-size: 13.5px; color: var(--ce-muted);
}
.li-crumb a { color: var(--ce-ocean); text-decoration: none; border-bottom: 1px solid transparent; }
.li-crumb a:hover { border-bottom-color: currentColor; }
/* A drawn separator, never a text character — it must not be read aloud. */
.li-crumb__sep { width: 5px; height: 5px; border-radius: 50%; background: var(--ce-line-gray); flex: none; }
.li-crumb__here { color: var(--ce-ink); font-weight: 600; }


/* ============================================================================
   3. MASTHEAD — kicker, title, answer panel
   ========================================================================== */

.li-mast { margin-bottom: clamp(22px, 3vw, 32px); }

/* The topic label. Uppercase, tracked — the site's existing kicker treatment
   (.ce-head .kicker), reused so the page reads as part of the site. */
.li-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ce-font-body); font-size: 12.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ce-coral-deep);
  margin: 0 0 12px;
}
.li-kicker .ce-ic { width: 15px; height: 15px; }

.li-title {
  font-family: var(--ce-font-display); font-weight: 700;
  font-size: clamp(31px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--ce-deep); margin: 0; text-wrap: balance;
}

/* THE ANSWER PANEL. The single most important element on the page: the whole
   question answered in one sentence, before any prose. A visitor who reads
   nothing else has been served. It is a panel and not a lede paragraph on
   purpose — a lede reads as the start of an essay, a panel reads as an answer. */
.li-deck {
  /* The bottom margin is load-bearing since the jump list moved into the rail
     (2026-09-06): the panel now sits directly above .li-body, whose first h2
     deliberately drops its own top margin and rule. */
  margin: clamp(18px, 2.4vw, 24px) 0 clamp(28px, 3.4vw, 40px);
  padding: clamp(15px, 2vw, 19px) clamp(17px, 2.2vw, 22px);
  border-left: 4px solid var(--ce-teal-deep);
  border-radius: 0 var(--ce-r-card) var(--ce-r-card) 0;
  background: color-mix(in srgb, var(--ce-teal) 8%, var(--ce-cream));
  font-family: var(--ce-font-body); font-size: clamp(17px, 1.9vw, 19.5px);
  font-weight: 500; line-height: 1.5; color: var(--ce-ink);
}

/* In-page jump list. Static, never sticky. Renders and works with no JS —
   they are plain fragment links. Drop the whole block on a short article. */
.li-jump {
  display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none;
  /* The bottom margin is load-bearing since the hero landed (2026-09-06): the jump
     list now sits directly above .li-body, whose first h2 deliberately drops its own
     top margin and rule, so without this the chips butt into the first heading. */
  margin: clamp(18px, 2.4vw, 24px) 0 clamp(26px, 3.2vw, 38px); padding: 0;
}
.li-jump a {
  display: inline-block; padding: 6px 14px; border-radius: var(--ce-r-pill);
  background: #fff; border: var(--ce-border-warm);
  font-family: var(--ce-font-body); font-size: 13.5px; font-weight: 600;
  color: var(--ce-ink); text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.li-jump a:hover { border-color: var(--ce-ocean); color: var(--ce-ocean); }


/* ============================================================================
   4. BODY PROSE — what the sanitizer's HTML lands in
   ----------------------------------------------------------------------------
   Element selectors, not classes: the body arrives as sanitized `body_html`
   from the composer, so the renderer cannot add a class to every paragraph.
   Everything the newsletter sanitizer permits is styled here.
   ========================================================================== */

.li-body {
  font-family: var(--ce-font-body); font-size: 17.5px; line-height: 1.72;
  color: var(--ce-ink);
}
.li-body > * { max-width: var(--li-col); }
.li-body p { margin: 0 0 1.15em; }
.li-body a { color: var(--ce-ocean); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.li-body a:hover { color: var(--ce-deep); }
.li-body strong { font-weight: 700; color: var(--ce-deep); }

.li-body h2 {
  font-family: var(--ce-font-display); font-weight: 700;
  font-size: clamp(23px, 2.7vw, 29px); line-height: 1.22; letter-spacing: -.01em;
  color: var(--ce-deep); margin: clamp(34px, 4vw, 46px) 0 .5em;
  padding-top: .55em; border-top: 1px solid var(--ce-line);
}
/* The first heading follows the deck or the jump list — it needs no rule. */
.li-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.li-body h3 {
  font-family: var(--ce-font-body); font-weight: 700; font-size: 18.5px;
  line-height: 1.35; color: var(--ce-deep); margin: 1.9em 0 .5em;
}

.li-body ul, .li-body ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.li-body li { margin: 0 0 .5em; padding-left: .2em; }
.li-body ul { list-style: none; padding-left: 0; }
.li-body ul > li { position: relative; padding-left: 1.5em; }
/* A drawn marker rather than a bullet glyph: it takes the accent colour and
   stays put when the line wraps. */
.li-body ul > li::before {
  content: ""; position: absolute; left: .25em; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ce-coral-deep);
}
.li-body ol { list-style: decimal; }
.li-body ol > li::marker { color: var(--ce-coral-deep); font-weight: 700; }

/* PULL QUOTE. Not a blockquote-as-citation — a line lifted out for emphasis.
   Display serif, italic, no quotation marks drawn (the indent does the work). */
.li-body blockquote, .li-quote {
  margin: clamp(26px, 3.4vw, 36px) auto; padding: 0 0 0 clamp(18px, 2.4vw, 26px);
  border-left: 3px solid var(--ce-coral);
  font-family: var(--ce-font-display); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; color: var(--ce-deep);
}
.li-body blockquote p:last-child, .li-quote p:last-child { margin-bottom: 0; }
.li-quote cite {
  display: block; margin-top: 12px;
  font-family: var(--ce-font-body); font-style: normal; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ce-muted);
}

/* FIGURE. The picture rides .ce-artwin so a portrait photo letterboxes onto a
   blurred copy of itself instead of being cropped. Breaks out past the reading
   measure to the full sheet, which is what makes a photo feel deliberate. */
.li-figure { max-width: 100%; margin: clamp(28px, 3.6vw, 40px) 0; }
.li-figure .ce-artwin {
  aspect-ratio: 16 / 10; border-radius: var(--ce-r-card);
  background: var(--ce-navy); box-shadow: var(--ce-shadow-photo);
}
.li-figure figcaption {
  max-width: var(--li-col); margin: 12px auto 0;
  font-family: var(--ce-font-body); font-size: 14px; line-height: 1.5; color: var(--ce-muted);
}
.li-figure figcaption b { color: var(--ce-ink); font-weight: 600; }
/* A portrait or square photo is set narrow rather than blown up. */
.li-figure--tall { max-width: var(--li-col); }
.li-figure--tall .ce-artwin { aspect-ratio: 4 / 5; }

/* FACT BOX — "Good to know". The rule, the number, the thing that must not be
   buried in prose. This is the element that makes the page an information
   board; a blog post has no equivalent. */
.li-facts {
  margin: clamp(28px, 3.4vw, 36px) auto; padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
  background: #fff; border: 1px solid color-mix(in srgb, var(--ce-ocean) 22%, transparent);
  border-radius: var(--ce-r-card);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ce-deep) 6%, transparent);
}
.li-facts__hd {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--ce-font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ce-ocean);
}
.li-facts__hd .ce-ic { width: 16px; height: 16px; flex: none; }
.li-facts dl { margin: 0; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 10px 20px; }
.li-facts dt { font-family: var(--ce-font-body); font-size: 14px; font-weight: 600; color: var(--ce-muted); }
.li-facts dd { margin: 0; font-family: var(--ce-font-body); font-size: 15.5px; line-height: 1.5; color: var(--ce-ink); }
.li-facts dd b { color: var(--ce-deep); }
/* The source line: where the rule comes from. An information board cites; a
   blog does not, and this is the cheapest credibility on the page. */
.li-facts__src {
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--ce-line);
  font-family: var(--ce-font-body); font-size: 13px; line-height: 1.5; color: var(--ce-muted);
}
.li-facts__src a { color: var(--ce-ocean); }
@media (max-width: 560px) {
  .li-facts dl { grid-template-columns: 1fr; gap: 3px; }
  .li-facts dd { margin-bottom: 9px; }
}


/* ----------------------------------------------------------------------------
   3b. TWO COLUMNS ON A WIDE SCREEN  (added 2026-09-06, second owner review)

   "It's reading like a long document and doesn't match the rest of the site."
   It was: ~2,300px of unbroken prose in one 738px column, on a site otherwise
   made of cards, photo grids and coloured bands. The hero fixed the top of the
   page; this fixes the rest of it.

   The shape is NOT new - attraction.html already lays a page about one thing out
   as `.body-grid { 1fr 340px }` with a `.plan` card in the rail. This is that,
   in this section's own colours.

   WHAT THE RAIL MAY HOLD: things ABOUT the article - when it was checked, who to
   ask, where the rest of them are. Never a fact the prose already gives. A rail
   that restates the page is what makes a page feel padded rather than designed.

   RED FLAG - `position: sticky` here is deliberate and it is safe, which is a
   change from this file's original "nothing pins to the viewport" note. The
   documented bug is a sticky element hiding UNDER THE 60px MOBILE HEADER
   (--ce-hdr-h-sm). This rule lives inside a min-width: 1060px query, where that
   header does not exist, and it uses the same offset the site's own .plan card
   uses. Do not lift it out of the media query.
   ---------------------------------------------------------------------------- */

.li-grid > * { min-width: 0; }
.li-main > * { max-width: var(--li-col); }

.li-rail { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(34px, 4vw, 46px); }
.li-card {
  background: var(--ce-sand); border: var(--ce-border-warm);
  border-radius: var(--ce-r-card); padding: 18px 20px 20px;
}
/* The checked card is the quietest thing in the rail on purpose: it is provenance,
   not an offer. Same ground as the page so it reads as a note, not a button. */
.li-card--check { background: none; border-style: dashed; }
.li-card__hd {
  font-family: var(--ce-font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ce-coral-deep);
  margin: 0 0 9px;
}
.li-card__p {
  font-family: var(--ce-font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--ce-muted); margin: 0 0 12px;
}
.li-card__row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--ce-line);
  font-family: var(--ce-font-body); font-size: 15px; font-weight: 600;
  color: var(--ce-ocean); text-decoration: none; word-break: break-word;
}
.li-card__row:first-of-type { border-top: 0; }
.li-card__row:hover { color: var(--ce-deep); }
.li-card__row .ce-ic { width: 17px; height: 17px; flex: none; color: var(--ce-coral-deep); }
/* In the rail the checked line stacks instead of running across the page. */
.li-rail .li-checked { flex-direction: column; align-items: flex-start; gap: 7px; margin: 0; }

/* "On this page" is the tallest thing in the rail, and that is the point: a column
   of two small cards beside a long article reads as an afterthought. */
.li-card--jump .li-jump { margin: 0; }

@media (min-width: 1060px) {
  /* The sheet widens to the site's own wrap so the rail has somewhere to live; the
     reading measure itself never moves - it is still --li-col on .li-main > *. */
  .li-sheet { max-width: 1180px; }
  .li-sheet > .li-grid { max-width: none; }
  .li-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(40px, 4.4vw, 64px); align-items: start;
  }
  .li-rail { margin-top: 0; position: sticky; top: 92px; }
  /* In the rail the jump list is a stacked table of contents, not a chip row. */
  .li-card--jump .li-jump { flex-direction: column; gap: 0; }
  .li-card--jump .li-jump li { width: 100%; }
  .li-card--jump .li-jump a {
    display: block; width: 100%; background: none; border: 0;
    border-top: 1px solid var(--ce-line); border-radius: 0;
    padding: 9px 0; font-size: 14.5px; color: var(--ce-ink);
  }
  .li-card--jump .li-jump li:first-child a { border-top: 0; padding-top: 0; }
  .li-card--jump .li-jump a:hover { color: var(--ce-ocean); }
}

/* BELOW 1060px there is no second column, so the rail dissolves: `display: contents`
   promotes its cards to grid items of .li-grid, and `order` puts the table of contents
   ABOVE the article (where a reader wants it) and the provenance and contact cards
   BELOW it (where they belong). One set of markup, two honest layouts - the jump list
   is never emitted twice. */
@media (max-width: 1059px) {
  .li-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  .li-rail { display: contents; }
  .li-card--jump { order: -1; margin-bottom: clamp(26px, 3.2vw, 38px); }
  .li-main { order: 0; }
  .li-card--check { order: 1; margin-top: clamp(30px, 4vw, 42px); }
  .li-card--ask { order: 2; margin-top: 16px; }
  .li-card--more { order: 3; margin-top: 16px; }
  /* The chips ARE the right control on a phone - a boxed list of seven wastes the
     screen before the reader reaches a word of the article. */
  .li-card--jump { background: none; border: 0; padding: 0; }
  .li-card--jump .li-card__hd { color: var(--ce-muted); }
}

/* ============================================================================
   5. THE AUTO BLOCKS — nearby places, nearby businesses, where to stay
   ----------------------------------------------------------------------------
   These are GENERATED, not written. They sit in their own band below the sheet
   so a reader can tell at a glance that the site added them and the writer did
   not. That separation is what stops "Where to stay" reading as an ad break:
   it is page furniture in the same voice as the rest of the site, in the same
   card as the other two blocks, and it is never dressed up.

   🔴 AN AUTO BLOCK NEVER HIDES. The existing attraction-showcase buildNearby()
   is the anti-pattern: a bad slug is filtered away and the whole section goes
   display:none, silently. Here the fallback line is IN THE MARKUP ALWAYS and
   is hidden only when a card is actually present:

       .li-block:has(.li-rec) .li-empty { display: none; }

   If :has() is unsupported the fallback shows ALONGSIDE the cards — visible
   and slightly redundant. That is the correct direction to fail in. Never
   invert this to `.li-empty { display:none }` + a JS un-hide.
   ========================================================================== */

/* The band carries its own ground and hairline rather than relying on the page
   adding .ce-sec--alt. The separation from the prose above is the entire point
   of the band, and it must not depend on a class a template can forget. */
.li-around {
  padding: clamp(40px, 5.5vw, 66px) 0 clamp(30px, 4vw, 44px);
  background: var(--ce-cream); border-top: 1px solid var(--ce-line);
}
.li-around__intro {
  max-width: 640px; margin: 0 auto clamp(26px, 3.4vw, 36px); text-align: center;
}
.li-around__intro h2 {
  font-family: var(--ce-font-display); font-weight: 700;
  font-size: clamp(25px, 3vw, 33px); color: var(--ce-deep); margin: 0 0 8px;
}
.li-around__intro p {
  font-family: var(--ce-font-body); font-size: 15.5px; line-height: 1.6;
  color: var(--ce-muted); margin: 0;
}
.li-around__kicker {
  font-family: var(--ce-font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ce-coral-deep);
  margin: 0 0 8px;
}

/* THE SIGNPOST CARDS (2026-09-06 evening — the bare fallback rows read as unbuilt).
   Three equal cards: a coast photo strip, an accent sigil bridging it, the label,
   the line, an arrow link. Each block carries ONE accent via --li-accent so the
   sigil, wash and link agree — all three values are the AA-safe fills coastal.css
   already designates for white text / small text.
   When GAPS #70 lands real .li-rec cards the grid below returns the blocks to
   full-width rows (the :has() rule) and the existing never-hides contract takes
   over. Without :has() support the 3-up grid simply keeps the rec cards narrow —
   degraded, visible, functional: the correct direction to fail in. */
.li-around__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px); max-width: 1180px; margin: 0 auto;
}
.li-around__grid:has(.li-rec) { grid-template-columns: minmax(0, 1fr); }

.li-block--places     { --li-accent: var(--ce-teal-deep); }
.li-block--businesses { --li-accent: var(--ce-ocean); }
.li-block--stay       { --li-accent: var(--ce-coral-deep); }

.li-block {
  display: flex; flex-direction: column; overflow: hidden; margin: 0;
  background: #fff; border: var(--ce-border-warm); border-radius: var(--ce-r-card-lg);
  box-shadow: var(--ce-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.li-block:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-photo); }

.li-block__media {
  position: relative; aspect-ratio: 21 / 9; background: var(--ce-navy); flex: none;
}
.li-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The accent wash: ties the photograph to the block's colour without tinting it flat. */
.li-block__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--li-accent, var(--ce-teal-deep)) 22%, transparent),
    transparent 58%);
}
/* z-index 2 is MANDATORY on anything riding the picture (documented, event card
   2026-08-31); -19px bottom makes the sigil bridge the photo/body seam. */
.li-block__sigil {
  position: absolute; z-index: 2; left: 18px; bottom: -19px;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--li-accent, var(--ce-teal-deep)); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--li-accent, var(--ce-teal-deep)) 45%, transparent),
              0 0 0 3px #fff;
}
.li-block__sigil .ce-ic { width: 20px; height: 20px; }

.li-block__body {
  padding: 30px 20px 20px; display: flex; flex-direction: column; flex: 1; min-width: 0;
}

/* Ruled group heading: label, then a hairline that fills the rest of the line.
   copied from ui-foundry #card.ledger (.rc-ledger__group) — do not link */
.li-block__hd {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  font-family: var(--ce-font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ce-deep);
}
.li-block__hd .ce-ic { width: 17px; height: 17px; flex: none; color: var(--ce-coral-deep); }
.li-block__hd::after { content: ""; flex: 1; height: 1px; background: var(--ce-line); }

/* --- the record card, shared by all three blocks ------------------------- */

/* THREE across, in every block including lodging. The first draft gave lodging
   four slots and it came out visibly SMALLER than the two blocks above it —
   the exact opposite of "present and obvious on every article". Equal width is
   what makes the lodging block read as the third of three equal sections
   rather than as a smaller afterthought bolted on the end.
   .li-recs--4 stays available as a setting: four slots spread the rotation a
   little further, at the cost of cards 26% narrower than their siblings. With
   20 lodging members, ~12 articles and a weekly reseed, three slots is already
   36 appearances a week — every lodging member still gets a turn most weeks,
   which is the sentence that has to survive a dues conversation. */
.li-recs { display: grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: repeat(3, 1fr); }
.li-recs--4 { grid-template-columns: repeat(4, 1fr); }

.li-rec {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: var(--ce-border-warm); border-radius: var(--ce-r-card);
  box-shadow: var(--ce-shadow-card);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.li-rec:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-photo); border-color: color-mix(in srgb, var(--ce-ocean) 30%, transparent); }
.li-rec:focus-visible { outline: none; box-shadow: var(--ce-focus-ring), var(--ce-shadow-card); }

/* The art box. Positioned, because .ce-plate is absolute:inset:0 and sits
   UNDER the photo — a photo that 404s removes itself and the bookplate is
   already there. Same contract member.html and members.html use. */
.li-rec__art {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--ce-navy); flex: none;
}
.li-rec__art > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
/* A LOGO IS NOT A PHOTOGRAPH. `cover` crops a wide logo's ends off, and a good
   number of members supply a logo rather than a picture of the premises. The
   member record already carries the answer — the `image_fit` field — so the
   renderer sets this modifier from the data instead of guessing. The plate
   colour behind it is the same navy the box already uses. */
.li-rec__art--contain > img { object-fit: contain; padding: 12px; }
/* The plate sizes itself down inside a card-sized box (member-plate.css MD). */
.li-rec__art .ce-plate { --cep-ghost: 130px; --cep-mono: 32px; --cep-gap: 10px; }

/* The category chip rides the picture. z-index 2 is MANDATORY — anything
   absolutely positioned inside a .ce-artwin-style box paints beneath the
   image at the default `auto` (documented, bit the event card 2026-08-31). */
.li-rec__cat {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  padding: 4px 11px; border-radius: var(--ce-r-pill);
  background: var(--ce-teal-deep); color: #fff;
  font-family: var(--ce-font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}

.li-rec__body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* min-width:0 + wrapping: a 44-character business name is the normal case in
   this directory ("RV Inn Style Westport RV Park and Motel"), not the edge. It
   wraps to as many lines as it needs and the card grows; it is never clipped
   mid-word and never sets the height of its neighbours (the grid does). */
.li-rec__name {
  font-family: var(--ce-font-display); font-weight: 700; font-size: 18px;
  line-height: 1.22; color: var(--ce-deep); margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.li-rec__meta {
  margin-top: auto; padding-top: 10px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-family: var(--ce-font-body); font-size: 13px; color: var(--ce-muted);
}
.li-rec__town { font-weight: 600; color: var(--ce-ink); }
/* DISTANCE IS OPTIONAL BY DESIGN. It is printed only when the coordinate's
   `source` is a precise one. Eight members are geocoded to a town centroid;
   "0.4 miles away" for one of those is a false statement on a public page,
   made by us, about a dues-paying member. No coordinate quality, no number —
   the card still shows, and the town still tells the visitor what they need. */
.li-rec__dist { font-variant-numeric: tabular-nums; }

/* --- WHERE TO STAY -------------------------------------------------------
   This block funds the grant, so it must be present, obvious and attractive on
   every article — and must not read as an ad. The answer is: SAME card, more
   room. It is the same component as the other two blocks (so it is plainly
   site furniture, not a paid slot), given a taller picture and a warm hairline
   so the eye lands on it. No "sponsored" chrome, no coloured ad box, no badge.
   copied from ui-foundry #card.namecard — do not link
   ------------------------------------------------------------------------- */
.li-block--stay .li-rec { border-color: color-mix(in srgb, var(--ce-coral) 34%, transparent); }
.li-block--stay .li-rec:hover { border-color: var(--ce-coral-deep); }
.li-block--stay .li-rec__art { aspect-ratio: 4 / 3; }
.li-block--stay .li-rec__cat { background: var(--ce-coral-deep); }
.li-block--stay .li-block__hd .ce-ic { color: var(--ce-coral-deep); }

/* --- the fallback that is always in the markup ---------------------------- */
/* A REAL CARD, not a placeholder. This was a dashed-outline box, and three of them
   in a row read as three unfilled form fields - which is exactly what the owner saw
   at the foot of the first live article. The block still never hides (that rule is
   below and unchanged); it just stops announcing that something is missing, because
   from a visitor's side nothing is: it is a signpost to the directory. */
.li-empty {
  margin: 0; padding: 18px 22px;
  background: #fff; border: var(--ce-border-warm); border-left: 3px solid var(--ce-coral);
  border-radius: var(--ce-r-card); box-shadow: var(--ce-shadow-card);
  font-family: var(--ce-font-body); font-size: 15.5px; line-height: 1.6; color: var(--ce-ink);
}
.li-empty a {
  color: var(--ce-ocean); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ce-ocean) 35%, transparent);
}
.li-empty a:hover { color: var(--ce-deep); border-bottom-color: currentColor; }
.li-block:has(.li-rec) .li-empty { display: none; }
/* Inside a signpost card the fallback IS the card's copy, not a boxed patch —
   the boxed base style above stays for the index's own empty state. The line,
   then the arrow link pinned to the card foot so all three CTAs align. */
.li-block .li-empty {
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  flex: 1; font-size: 15px; color: var(--ce-muted);
}
.li-block .li-empty a {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  color: var(--li-accent, var(--ce-ocean)); font-size: 14px; font-weight: 700;
  text-decoration: none; border-bottom: 0;
}
.li-block .li-empty a:hover { color: var(--li-accent, var(--ce-ocean)); border-bottom: 0; }
.li-block .li-empty a .ce-ic { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }
.li-block .li-empty a:hover { text-decoration: underline; text-underline-offset: 3px; }
.li-block .li-empty a:hover .ce-ic { transform: translateX(4px); }
.li-block .li-empty a:focus-visible { outline: 2px solid var(--ce-ocean); outline-offset: 3px; border-radius: 2px; }

/* One card in a three-column grid looks broken. When a block resolves a single
   record it keeps the card at a readable width instead of stretching it across
   the row — the renderer adds .li-recs--few when it emits fewer than three. */
.li-recs--few { grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: start; }


/* ============================================================================
   6. FOOT — checked line, return band
   ========================================================================== */

.li-foot { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px) clamp(40px, 5vw, 60px); }
/* The index is 1180 wide, not an 860 sheet — its closing band matches its own
   content or it sits stranded in the middle of the page. */
.li-foot--wide { max-width: 1180px; padding-left: 24px; padding-right: 24px; }

/* The ONLY date on the page. "Checked" not "Posted": these pages are evergreen
   and get re-verified, and saying so is worth more to a visitor than a
   publication date is. Byline is optional and deliberately small and last —
   the Chamber answers the question; the columnist is a credit, not a headline. */
.li-checked {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 15px 0 0; border-top: 1px solid var(--ce-line);
  font-family: var(--ce-font-body); font-size: 13.5px; color: var(--ce-muted);
}
.li-checked .ce-ic { width: 15px; height: 15px; }
.li-checked b { color: var(--ce-ink); font-weight: 600; }

/* The return band: deep-to-navy ground with the coast faded in from the right —
   the same masked-wing gesture the hero opens with, so the page closes the way
   it opened. Text and button ride above the art on their own layer. */
.li-back {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px; margin-top: clamp(24px, 3vw, 32px);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 2.6vw, 28px);
  background: linear-gradient(115deg, var(--ce-deep) 0%, var(--ce-navy) 100%);
  border: 1px solid color-mix(in srgb, var(--ce-mist) 14%, transparent);
  border-radius: var(--ce-r-card-lg); color: var(--ce-mist);
}
.li-back__art {
  position: absolute; inset: 0 0 0 auto; width: min(58%, 520px); z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%);
  mask-image: linear-gradient(to right, transparent 0, #000 55%);
}
.li-back__art img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; }
.li-back__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--ce-deep) 0%,
    color-mix(in srgb, var(--ce-deep) 52%, transparent) 45%,
    color-mix(in srgb, var(--ce-navy) 30%, transparent) 100%);
}
.li-back p { margin: 0; font-family: var(--ce-font-body); font-size: 15.5px; line-height: 1.5; }
.li-back b { color: #fff; font-weight: 600; }
/* The button: lift + glow, the arrow leans into the click, and a single sheen
   sweeps across on hover-in (transition, not a keyframe loop — an idle pulsing
   button is exactly the tacky this site refuses). */
.li-back .ce-cta {
  flex: none; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.li-back .ce-cta .ce-ic { transition: transform .18s ease; }
.li-back .ce-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ce-ocean) 50%, transparent);
}
.li-back .ce-cta:hover .ce-ic { transform: translateX(4px); }
.li-back .ce-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.li-back .ce-cta::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.li-back .ce-cta:hover::before { left: 125%; transition: left .55s ease; }


/* ============================================================================
   7. THE INDEX PAGE — /local-info/
   ----------------------------------------------------------------------------
   A dozen articles, grouped by topic. It is a real crawlable page: plain <a>
   elements in the served bytes, no JS anywhere in this layout, so a crawler
   that does not run scripts sees the whole set. No pagination — twelve records
   never need it, and a pager is a blog tell.
   ========================================================================== */

.li-index { padding: clamp(34px, 4.5vw, 56px) 0 clamp(44px, 6vw, 72px); }

/* (The index used to carry its own centred masthead here. The .page-hero band
   replaced it on 2026-09-06 - see 2b. Removed rather than left dead.) */

.li-group { margin-bottom: clamp(34px, 4.5vw, 52px); }
.li-group:last-child { margin-bottom: 0; }
/* Same ruled heading as the auto blocks — one heading treatment on both pages.
   The count is set by the renderer and is honest: it is a dozen articles, and
   saying "4" tells a visitor the section is finite and browsable. */
.li-group__hd {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-family: var(--ce-font-body); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ce-deep);
}
.li-group__hd .ce-ic { width: 17px; height: 17px; flex: none; color: var(--ce-coral-deep); }
.li-group__n { font-weight: 600; color: var(--ce-muted); font-variant-numeric: tabular-nums; }
.li-group__hd::after { content: ""; flex: 1; height: 1px; background: var(--ce-line); }

/* A CAPPED ROW, not a fixed column count. Group sizes here are editorial and
   will not be uniform — with the adaptive grouping rule (a topic earns its own
   heading at two articles) the common sizes are two to four. A fixed three-up
   strands a fourth card alone on a new row; a fixed four-up leaves the last
   column empty in most groups. A wrapping row with a width cap does the right
   thing at every size: three fill the row, two end it early at full card
   width, and a fourth wraps at the SAME width as its siblings rather than
   stretching across the gap. */
.li-cards { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.2vw, 22px); align-items: stretch; }
/* Small groups share the same full-width horizontal guide rows as larger ones. */
.li-idx { flex: 1 1 300px; max-width: 380px; }

.li-idx {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: var(--ce-border-warm); border-radius: var(--ce-r-card-lg);
  box-shadow: var(--ce-shadow-card); text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.li-idx:hover { transform: translateY(-4px); box-shadow: var(--ce-shadow-photo); border-color: color-mix(in srgb, var(--ce-ocean) 30%, transparent); }
.li-idx:focus-visible { outline: none; box-shadow: var(--ce-focus-ring), var(--ce-shadow-card); }
.li-idx__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ce-navy); flex: none; }
.li-idx__art > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.li-idx__art .ce-plate { --cep-ghost: 140px; --cep-mono: 34px; --cep-gap: 11px; }
.li-idx__body { padding: 17px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.li-idx__t {
  font-family: var(--ce-font-display); font-weight: 700; font-size: 19.5px;
  line-height: 1.25; color: var(--ce-deep); margin: 0 0 9px; text-wrap: balance;
}
/* The deck IS the value on this page — a visitor should be able to answer the
   easy questions without clicking. It is never truncated to a teaser. */
.li-idx__d {
  font-family: var(--ce-font-body); font-size: 14px; line-height: 1.55;
  color: var(--ce-muted); margin: 0;
}
/* No date, no author, no "read more" — a card that ends on the answer. */

/* The index's own empty state, same never-hides discipline as the auto blocks. */
.li-index .li-empty { flex: 1 1 100%; max-width: none; }

/* Visitor hub: homepage hero/photocards and ui-foundry #card.ledger's divided
   navigation rows, adapted to the Chamber tokens — do not link to the foundry. */
.li-page {
  --li-gap: clamp(16px, 2vw, 24px);
  --li-inset: clamp(20px, 2.5vw, 30px);
  --li-section: clamp(38px, 5vw, 64px);
}
.li-hub-hero { min-height: 540px; }
.li-hub-hero .ce-wrap { width: 100%; }
.li-hub-hero::after { background: linear-gradient(90deg, color-mix(in srgb, var(--ce-navy) 90%, transparent), color-mix(in srgb, var(--ce-navy) 58%, transparent) 55%, color-mix(in srgb, var(--ce-navy) 15%, transparent)); }
.li-hub-hero .li-crumb { color: var(--ce-mist); margin-bottom: var(--li-gap); }
.li-hub-hero .li-crumb a, .li-hub-hero .li-crumb__here { color: var(--ce-cream); }
.li-hub-hero h1 { max-width: 13ch; font-family: var(--ce-font-display); }
.li-hub-hero .ce-hero-search { max-width: 600px; margin-top: var(--li-gap); }
.li-hub-hero .ce-hero-search:focus-within { box-shadow: var(--ce-focus-ring); }
.li-hub-search-note { color: var(--ce-mist); font: 500 13px/1.5 var(--ce-font-body); margin: 12px 0 0; }
.li-hub-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--li-gap); margin-bottom: var(--li-gap); }
.li-hub-heading .kicker, .li-hub-tools > .kicker { color: var(--ce-coral-deep); font: 700 11px/1.5 var(--ce-font-body); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 8px; }
.li-hub-heading h2 { color: var(--ce-deep); font: 700 clamp(27px, 3vw, 36px)/1.15 var(--ce-font-display); margin: 0; }
.li-hub-heading > p { color: var(--ce-muted); font: 400 15px/1.6 var(--ce-font-body); max-width: 34ch; margin: 0; }
.li-hub-topics { padding-top: var(--li-section); padding-bottom: var(--li-section); }
.li-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.li-topic-grid form { min-width: 0; margin: 0; }
.li-topic { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 72px; padding: 16px 20px; background: var(--ce-cream); border: var(--ce-border-warm); border-radius: var(--ce-r-card); color: var(--ce-deep); text-align: left; font: 600 15px/1.4 var(--ce-font-body); cursor: pointer; transition: border-color .18s, background .18s; }
.li-topic > .ce-ic:first-child { color: var(--ce-teal-deep); width: 23px; height: 23px; flex: none; }
.li-topic > .ce-ic:last-child { margin-left: auto; width: 17px; flex: none; color: var(--ce-coral-deep); }
.li-topic:hover { background: var(--ce-teal-tint); border-color: var(--ce-teal); }
.li-topic:focus-visible, .li-tool:focus-visible { outline: 2px solid var(--ce-ocean); outline-offset: 3px; }
.li-index { background: var(--ce-cream); border-block: 1px solid var(--ce-line); padding-block: var(--li-section); }
.li-hub-guide-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--li-gap); align-items: start; }
.li-index .li-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--li-gap); }
.li-index .li-idx { max-width: none; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); background: var(--ce-sand); box-shadow: none; }
.li-index .li-idx__art { aspect-ratio: auto; min-height: 270px; height: 100%; }
.li-index .li-idx__art > img { position: absolute; inset: 0; }
.li-index .li-idx__body { padding: var(--li-inset); }
.li-index .li-idx__t { font-size: clamp(22px, 2.2vw, 28px); text-wrap: initial; }
.li-index .li-idx__d { font-size: 15px; }
.li-idx__go { display: flex; align-items: center; gap: 12px; padding-top: var(--li-gap); margin-top: auto; color: var(--ce-ocean); font: 700 13px/1.5 var(--ce-font-body); }
.li-idx__go .ce-ic { width: 17px; height: 17px; }
.li-hub-tools { background: var(--ce-sand); padding: var(--li-inset); border-radius: var(--ce-r-card-lg); border: var(--ce-border-warm); }
.li-hub-tools h2 { font: 700 25px/1.2 var(--ce-font-display); color: var(--ce-deep); margin: 0 0 16px; }
.li-tool { display: flex; align-items: center; gap: 12px; padding-block: 17px; color: var(--ce-deep); text-decoration: none; border-top: 1px solid var(--ce-line); }
.li-tool > .ce-ic { width: 20px; height: 20px; flex: none; color: var(--ce-teal-deep); }
.li-tool > .ce-ic:last-child { margin-left: auto; width: 16px; }
.li-tool strong, .li-tool small { display: block; font-family: var(--ce-font-body); line-height: 1.5; }
.li-tool strong { font-size: 15px; }
.li-tool small { font-size: 12px; color: var(--ce-muted); }
.li-tool:hover strong { color: var(--ce-ocean); text-decoration: underline; }
.li-hub-explore { padding-block: var(--li-section); }
.li-hub-explore .ce-photocard { min-height: 270px; }
.li-hub-explore .ce-photocard h3 { font-family: var(--ce-font-display); }
@media (max-width: 900px) {
  .li-hub-guide-layout { grid-template-columns: minmax(0, 1fr); }
  .li-hub-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--li-gap); }
  .li-hub-tools > .kicker, .li-hub-tools > h2 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .li-hub-hero { min-height: 0; }
  .li-hub-hero::after { background: color-mix(in srgb, var(--ce-navy) 72%, transparent); }
  .li-hub-hero .eyebrow { letter-spacing: .1em; }
  .li-hub-hero .ce-hero-search { padding-left: 14px; }
  .li-hub-hero .ce-hero-search button { padding: 12px 14px; font-size: 13px; }
  .li-hub-heading { align-items: start; flex-direction: column; gap: 12px; }
  .li-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .li-topic { gap: 10px; padding: 14px 12px; font-size: 13px; }
  .li-topic > .ce-ic:last-child { display: none; }
  .li-index .li-idx { grid-template-columns: minmax(0, 1fr); }
  .li-index .li-idx__art { aspect-ratio: 16 / 9; min-height: 0; }
  .li-hub-tools { grid-template-columns: minmax(0, 1fr); }
  .li-hub-explore .ce-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================================
   8. RESPONSIVE
   ----------------------------------------------------------------------------
   Most chamber visitors are on a phone. Both grids step 3 → 2 → 1, matching
   the shared kit's own breakpoints (.ce-grid, coastal.css) so the article page
   and the rest of the site reflow at the same widths.
   ========================================================================== */

@media (max-width: 980px) {
  .li-recs, .li-recs--4 { grid-template-columns: repeat(2, 1fr); }
  .li-idx { max-width: none; }
  /* One centred column of signposts; the photo strip shortens so three stacked
     cards stay a glance, not a scroll. */
  .li-around__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .li-block__media { aspect-ratio: 3 / 1; }
}
@media (max-width: 640px) {
  .li-recs, .li-recs--4 { grid-template-columns: 1fr; }
  .li-recs--few { grid-template-columns: 1fr; }
  .li-idx { flex-basis: 100%; }
  /* The sheet loses its card edges on a phone: at 375px a rounded inset box
     wastes the only width there is. */
  .li-sheet {
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
    padding-left: 20px; padding-right: 20px;
  }
  .li-body { font-size: 17px; }
  .li-back { flex-direction: column; align-items: stretch; text-align: center; }
  .li-back .ce-cta { justify-content: center; }
  /* Stacked band: the wing would sit behind the button, so it dissolves into a
     faint full-bleed backdrop under a stronger veil — same rule as the hero. */
  .li-back__art { width: 100%; mask-image: none; -webkit-mask-image: none; }
  .li-back__art img { opacity: .35; }
  .li-back__art::after { background: color-mix(in srgb, var(--ce-deep) 76%, transparent); }
}


/* ============================================================================
   9. ACCESSIBILITY, MOTION, PRINT
   ========================================================================== */

/* Every card is one link. The whole card is the target, so it needs a visible
   focus ring that is not the browser default outline swallowed by overflow. */
.li-rec:focus-visible, .li-idx:focus-visible, .li-jump a:focus-visible, .li-crumb a:focus-visible {
  outline: 2px solid var(--ce-ocean); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .li-rec, .li-idx, .li-block, .li-back .ce-cta, .li-back .ce-cta .ce-ic,
  .li-block .li-empty a .ce-ic { transition: none; }
  .li-rec:hover, .li-idx:hover, .li-block:hover, .li-back .ce-cta:hover { transform: none; }
  .li-hero__art img { animation: none; }
  .li-back .ce-cta::before { display: none; }
  .li-back .ce-cta:hover .ce-ic, .li-block .li-empty a:hover .ce-ic { transform: none; }
}

/* A reference page is a page people print and take to the beach. Drop the
   furniture, keep the answer, the prose and the facts. */
@media print {
  .li-page { background: #fff; }
  .li-hero__art { display: none; }
  .li-sheet { max-width: none; border: 0; box-shadow: none; padding: 0; }
  .li-around, .li-back, .li-jump, .li-crumb { display: none; }
  .li-deck { border-left-width: 2px; background: none; }
  .li-figure { break-inside: avoid; }
  .li-facts { break-inside: avoid; border-color: var(--ce-ink); box-shadow: none; }
  .li-body a { text-decoration: none; }
}