/* ==========================================================================
   Local Needlepoint Shops, styled to match stitchatlasapp.com
   ========================================================================== */

:root {
  --bg-cream: #f7ead9;
  --card-white: #ffffff;
  --navy: #1f2b4d;
  --green-dark: #1c6b46;
  --green-darker: #155336;
  --green-pill-bg: #dde8dd;
  --green-pill-text: #1c6b46;
  --text-body: #4b5768;
  --text-muted: #59636f;
  --border-soft: #ece1cf;
  --shadow-card: 0 10px 30px rgba(31, 43, 77, 0.08);
  --radius-card: 28px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Faint canvas weave over the cream, drawn in CSS rather than shipped as an image.
     Evokes needlepoint canvas at a cost of zero bytes and no photography to license. */
  background-color: var(--bg-cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(31, 43, 77, 0.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(31, 43, 77, 0.035) 0 1px, transparent 1px 9px);
  font-family: 'Nunito Sans', sans-serif;
  color: var(--text-body);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  color: var(--navy);
  margin: 0;
}

/* ---------- Nav ---------- */

.site-nav {
  background: var(--card-white);
  border-bottom: 1px solid var(--border-soft);
}

.site-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--navy);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a.active {
  border-bottom-color: var(--green-dark);
  color: var(--green-dark);
}

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

/* The header sits on one line with the tagline beside the wordmark. Stacked and
   centered it stood 132px tall on every page before the nav even began, which on
   the index pushed all but the first row of cards below the fold. This is 53px. */
.site-header {
  padding: 0;
}

/* Centered, because everything else on the page is.

   The box was always centered correctly at 960px, but the brand and tagline
   were packed to its left edge and together they only fill about 630px of it.
   That left roughly 290px of empty box to the right of the tagline, so the
   wordmark sat well left of the card below it while the nav, the footer and
   every card were centered. The header was the one thing on the page not on
   the page's center line, which is what made the top look crooked no matter
   how carefully the breadcrumb underneath it was aligned. */
.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 18px 20px 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.brand-stitch {
  color: var(--green-dark);
  font-size: 1.15rem;
}

.brand p {
  font-size: 1.375rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  margin: 0;
}

.tagline {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.8125rem;
  border-left: 1px solid var(--border-soft);
  padding-left: 14px;
}

/* Below 560px the tagline drops under the wordmark and loses its divider, so a
   long tagline never squeezes the brand into two lines. */
@media (max-width: 560px) {
  .tagline {
    border-left: 0;
    padding-left: 0;
    flex-basis: 100%;
  }

  /* Back to the left edge once the tagline has dropped onto its own line.
     Centering is right on a desktop, where the brand and tagline sit side by
     side and read as one centered unit. Here they are stacked, and a centered
     wordmark over a left-aligned block of tagline text looks like neither
     choice was made on purpose. */
  .header-inner {
    justify-content: flex-start;
  }
}

/* ---------- Shared "card" look (matches the white rounded panels) ---------- */

.card {
  background: var(--card-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  max-width: 960px;
  margin: 24px auto;
  padding: 40px clamp(20px, 5vw, 56px);
}

.eyebrow-badge {
  display: inline-block;
  background: var(--green-pill-bg);
  color: var(--green-pill-text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.card h1,
.card h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 18px;
}

.card p.card-body {
  color: var(--text-body);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 0 16px;
}

.card p.card-body:last-child {
  margin-bottom: 0;
}

.card p.card-body a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}

.card p.card-body a:hover {
  text-decoration: underline;
}

/* ---------- Main directory card (search + map) ---------- */

main {
  padding: 0 16px;
}

.directory-card {
  padding-bottom: 32px;
}

/* ---------- Homepage slice ----------

   A band of the thread wall between the intro line and the region strip. It
   is the only photograph on the homepage and it earns its keep by making the
   page look like a place that has been to a shop, which is the whole claim
   the page is making.

   The files are cropped to a band rather than being the Rhode Island page's
   photograph reused. A 1440x811 file in a box this shape has two thirds of
   its height cropped off, and the visitor still pays for those pixels. The
   band is the same picture on screen for about half the bytes.

   The height is fixed and the crop floats within it, so the band cannot grow
   on a narrow screen. 104px on a phone was measured against the region strip
   and the browse button, both of which still sit in the first screen.

   It aligns with the region strip below it rather than with the paragraph
   above, which is capped at 640px. The strip is the element it sits against. */

.home-slice {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  margin: 4px 0 24px;
}

@media (max-width: 640px) {
  .home-slice {
    height: 104px;
    border-radius: 12px;
    margin: 2px 0 18px;
  }
}

/* ---------- Region strip (the written-up regions, above the map) ----------

   The map is the loudest thing on the homepage and it produces no indexable
   content. This strip sits above the search box so the hand-checked directory
   is seen first. Generated by build.mjs from data/shops.json, so the counts
   cannot drift from the pages. */

.region-strip {
  margin: 22px 0 4px;
  padding: 16px 18px;
  background: #fdfaf4;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
}

.region-strip-label {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--text-body);
  font-weight: 600;
}

.region-strip-label a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
}

.region-strip-label a:hover {
  text-decoration: underline;
}

.region-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.region-pill {
  display: inline-block;
  background: var(--green-pill-bg);
  color: var(--green-pill-text);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform 0.12s ease;
}

.region-pill:hover {
  transform: translateY(-2px);
}

.region-pill .count {
  opacity: 0.6;
  font-weight: 600;
}

/* The mobile strip has been through two shapes as the directory grew.

   At twelve regions the pills stacked 522px tall, so they became one scrollable
   row. At eighteen that row is 2,875px wide in a 265px window: 10.8 swipes with
   a single pill visible at a time, which is not a compromise, it is broken.

   So on a phone the pills give way to one button. The eighteen links stop being
   visible there, which is a real cost and was the reason for scrolling rather
   than hiding at twelve regions. It is the better trade at this size: the links
   all live on /shops/, which is one tap away and in the nav on every page, and
   a button people use beats eighteen links nobody reaches. Desktop is untouched
   and still shows all of them. */
@media (max-width: 640px) {
  .region-pills {
    display: none;
  }

  /* One action, not two: the inline link would duplicate the button. */
  .region-strip-label a {
    display: none;
  }

  .region-strip-label {
    margin-bottom: 12px;
  }

  .region-cta {
    display: inline-block;
    background: var(--green-dark);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    text-decoration: none;
  }
}

@media (min-width: 641px) {
  .region-cta {
    display: none;
  }
}

/* The homepage button sends phones to /shops/, which made that page the mobile
   browsing surface. At eighteen regions it was eight screens of scrolling, and
   almost all of that height was the teaser paragraph on each card.

   Dropping the teaser below 640px takes a card from about 246px to about 110px
   and the page from eight screens to roughly three. The state, the region and
   the shop count are enough to choose from on a phone; the teaser is still
   there on every desktop and on the region page itself. Scoped to .region-grid
   so the guides index, which needs its descriptions, keeps them. */
@media (max-width: 640px) {
  .region-grid .guide-card {
    padding: 18px 20px;
    gap: 8px;
  }

  .region-grid .guide-card p {
    display: none;
  }
}

/* ---------- Search panel ---------- */

.search-panel {
  margin-top: 28px;
}

.search-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.btn {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 26px;
  font-size: 0.98rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green-dark);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--green-darker);
}

.btn-secondary {
  background: var(--navy);
  color: #ffffff;
}

.btn-secondary:hover {
  background: #16213c;
}

.btn-icon {
  margin-right: 4px;
}

.divider {
  color: var(--text-muted);
  font-size: 0.9rem;
}

#location-input {
  flex: 1 1 220px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: #fdfaf4;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.98rem;
  color: var(--navy);
}

#location-input:focus {
  outline: 2px solid var(--green-dark);
  outline-offset: 2px;
}

#radius-select {
  padding: 14px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: #fdfaf4;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.98rem;
  color: var(--navy);
}

.status-msg {
  color: var(--green-darker);
  font-weight: 600;
  min-height: 1.2em;
  margin: 4px 2px 0;
}

/* ---------- Results + map ---------- */

.results-area {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  margin-top: 24px;
}

.results-list {
  background: #fdfaf4;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 16px;
  max-height: 520px;
  overflow-y: auto;
}

.results-placeholder {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.shop-card {
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 4px;
}

.shop-card:last-child {
  border-bottom: none;
}

/* The results cards are reachable by keyboard, so the focus ring has to be
   visible. Until September 2026 the only :focus rule on the whole stylesheet
   was on the search input, which meant tabbing through the page showed nothing
   at all in browsers that suppress the default outline. */
.results-list .shop-card:focus-visible,
.site-nav a:focus-visible,
.btn:focus-visible,
.region-pill:focus-visible,
.guide-card:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Only the map results are clickable. The same class also wraps the written-up
   shops on the region pages, and those are not, so the pointer and the hover
   highlight are scoped to the results list rather than applied to both. */
.results-list .shop-card {
  cursor: pointer;
}

.results-list .shop-card:hover,
.results-list .shop-card.active {
  background: var(--green-pill-bg);
  border-radius: 12px;
}

.shop-card h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.shop-address,
.shop-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 2px 0;
}

.stars {
  color: var(--green-dark);
}

.map {
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

@media (max-width: 720px) {
  .results-area {
    grid-template-columns: 1fr;
  }
  .map {
    min-height: 320px;
  }
}

/* ---------- Placeholder LNS-style cards ---------- */

.placeholder-card {
  text-align: left;
}

/* A page that is nothing but running text gets the reading measure, the same
   one the guides and the privacy policy have always used. The 960px card was
   built for the homepage, where it holds a map; on About and Contact it left
   264px of empty card down the right of every line, which nobody noticed until
   a photograph was put in it and gave the eye a hard edge to measure against.

   Deliberately NOT applied to .placeholder-card itself. The homepage uses that
   class twice, underneath two 960px cards, so narrowing the class would step
   the homepage in halfway down the page. This is opt-in per page instead. */
.card.card-measure {
  max-width: 720px;
}

/* ---------- Breadcrumb ---------- */

/* The breadcrumb has to line up with the card it introduces, and for a long
   time it did not. It was pinned to 960px while 34 of the 35 pages that carry
   one hold 720px of content, so on almost every interior page it started 120px
   to the left of the card and aligned with nothing at all. Easy to miss on a
   guide, obvious on About once that page was narrowed and the gap grew.

   720 is now the default because it is the overwhelming majority. Only the
   shops index is 960, and it opts in below. */
/* Lining the breadcrumb up with the heading underneath it takes more care than
   it looks, because the breadcrumb is a sibling of <main> rather than a child,
   so it inherits none of main's layout.

   Three things have to be reproduced for the letters to start on the same
   pixel as the h1, at every width:

     main's 16px side padding      the breadcrumb never had it
     the card's own padding        clamp(20px, 5vw, 56px), which varies
     the card's 720px measure

   Hence a 752px box (720 plus main's 32) with both paddings inside it. Getting
   only the max-width right lines the two boxes up and still leaves the words
   36px apart on a desktop, which is what a box edge being invisible does to
   you. Getting only the padding right lines them up on a desktop and leaves
   them 16px apart on a phone, because above about 750px the card is centered
   and symmetric padding cancels out, while below it the card is flush and
   main's padding starts to count.

   Keep the two paddings in step with main and .card if either ever changes. */
.breadcrumb {
  max-width: 752px;
  margin: 20px auto 0;
  padding: 0 calc(16px + clamp(20px, 5vw, 56px));
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb.breadcrumb-wide {
  max-width: 992px;
}

.breadcrumb a {
  color: var(--green-dark);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ---------- Homepage guide showcase ---------- */

.guide-teaser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.guide-teaser-head h2 {
  margin: 0;
}

.guide-teaser-head .see-all {
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.guide-teaser-head .see-all:hover {
  text-decoration: underline;
}

.guide-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

/* ---------- Guide hub grid ---------- */

.guide-intro {
  text-align: center;
}

.guide-intro h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.guide-grid {
  max-width: 960px;
  margin: 0 auto 40px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.guide-card {
  background: var(--card-white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease;
}

.guide-card:hover {
  transform: translateY(-3px);
}

.guide-card .guide-tag {
  color: var(--green-pill-text);
  background: var(--green-pill-bg);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

.guide-card h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.guide-card p {
  color: var(--text-body);
  font-size: 0.95rem;
  margin: 0;
}

.guide-card .read-more {
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: auto;
}

/* ---------- Long-form guide article ---------- */

.guide-article {
  max-width: 720px;
  /* Calmer than the 28px shared card radius. That roundness suits the small
     cards on the index and reads slightly bubbly around a page of running text. */
  border-radius: 18px;
}

.guide-article .guide-tag {
  color: var(--green-pill-text);
  background: var(--green-pill-bg);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 16px;
}

.guide-article h1 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.2;
  margin-bottom: 10px;
}

/* The dek was 1.1rem against 1rem body and in a lighter grey, so it read as an
   ordinary first paragraph rather than a standing subtitle. Italic serif in navy
   separates it from body copy by voice instead of by a fraction of a point. */
.guide-article .guide-dek {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--navy);
  opacity: 0.82;
  margin-bottom: 26px;
}

/* 1.4rem against 1rem body is only 1.37x and reads flat over a long page. */
.guide-article h2 {
  font-size: 1.6875rem;
  margin-top: 42px;
  margin-bottom: 12px;
  padding-top: 18px;
  position: relative;
}

/* A short running stitch above each section head. Ties the hierarchy to the
   craft rather than adding a generic rule. */
.guide-article h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 3px;
  background-image: linear-gradient(90deg, var(--green-dark) 0 6px, transparent 6px 10px);
  background-size: 10px 3px;
}

.guide-article h3 {
  font-size: 1.15rem;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--navy);
}

.guide-article p {
  margin: 0 0 16px;
  font-size: 1.02rem;
}

.guide-article ul,
.guide-article ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.guide-article li {
  margin-bottom: 8px;
}

.guide-article strong {
  color: var(--navy);
}

/* ---------- Photographs ----------

   Shot in shops we have actually stood in. The caption is part of the
   content, not decoration: it says what the thread is and where it was,
   because a photograph of a thread wall is worthless as evidence if the
   reader cannot tell whether it came from a shop or from a stock library.

   Dimensions are set on every img so the page does not reflow as the
   photograph arrives. The files are 1440px wide, which is 2x the article
   measure and no more. */

.guide-article figure,
.region-figure {
  margin: 26px 0 30px;
}

.guide-article figure img,
.region-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
}

.guide-article figcaption,
.region-figure figcaption {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.guide-article figcaption strong,
.region-figure figcaption strong {
  color: var(--navy);
  font-weight: 600;
}

/* The lede photograph runs to the full width of the card, under the dek,
   so the article opens on the thing the article is about. */
.guide-article figure.figure-lede {
  margin-top: 4px;
}

/* Inside a plain card the prose is capped at 640px by .card p.card-body, but
   the card itself is wider than that. A photograph left to fill the card runs
   about 200px past the end of every line of text above it, which reads as a
   mistake rather than as a deliberate full-bleed. Match the measure. */
.card:not(.guide-article) > .region-figure {
  max-width: 640px;
}

/* A detail shot held upright by the camera. Capped by height rather than
   width, so it stays a detail on a wide screen instead of becoming a column
   of thread half a page tall, and stays the same shape on a phone. */
.guide-article figure.figure-portrait img,
.region-figure.figure-portrait img {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
}

.guide-article figure.figure-portrait figcaption,
.region-figure.figure-portrait figcaption {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

@media (max-width: 640px) {
  .guide-article figure,
  .region-figure {
    margin: 20px 0 24px;
  }

  .guide-article figure img,
  .region-figure img {
    border-radius: 12px;
  }
}

/* ---------- In-article ad slot ----------

   Hidden by default and revealed by ads.js, so that with ads switched off
   there is no empty box and no layout shift. See the master switch at the
   top of ads.js. Placement is chosen by hand per guide, never automatically,
   because an ad dropped into the middle of a comparison sequence breaks the
   argument the section is making. */

.ad-slot {
  display: none;
  margin: 38px 0;
  padding: 14px 14px 16px;
  background: #fdfaf4;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  text-align: center;
}

.ad-slot.is-live {
  display: block;
}

.ad-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* CTA box linking back to the shop search */

.cta-box {
  background: #f2f8f2;
  border: 1px solid var(--green-pill-bg);
  border-radius: 18px;
  padding: 24px;
  margin: 32px 0;
  text-align: center;
}

.cta-box p {
  margin-bottom: 14px;
  color: var(--navy);
  font-weight: 600;
}

.cta-box a.btn {
  display: inline-block;
  text-decoration: none;
}

.guide-nav-footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}

.guide-nav-footer a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
}

.guide-nav-footer a:hover {
  text-decoration: underline;
}

/* ---------- Affiliate product lists (buying guides) ---------- */

.affiliate-disclosure {
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-cream);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 28px;
}

.product-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.product-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.product-list li:last-child {
  border-bottom: none;
}

.product-list a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
}

.product-list a:hover {
  text-decoration: underline;
}

.product-list .product-note {
  display: block;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}

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

.site-footer {
  max-width: 960px;
  margin: 40px auto 30px;
  padding: 0 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 4px 0;
}

.fine-print {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.site-footer a {
  color: var(--green-dark);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--navy);
}

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 43, 77, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal[hidden] {
  display: none;
}

.modal-content {
  background: var(--card-white);
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow-card);
  max-height: 85vh;
  overflow-y: auto;
}

.modal-photo {
  width: 100%;
  border-radius: 14px;
  margin-bottom: 12px;
  max-height: 220px;
  object-fit: cover;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
}