/* location.html page-scoped styles. Linked ONLY on location.html, after
   styles.css + pages.css, so later-order overrides win at equal specificity.
   Everything is loc- prefixed (or scoped under a loc- wrapper) so this file
   is inert if it ever loads elsewhere. Tokens come from styles.css. */

/* ---------- Hero: editorial left composition on the pinned band ---------- */

/* The location page gets its own hero photo so it does not repeat the home
   page image; .hero supplies the scrim, this only swaps the picture.
   The picture is the hall interior with the checkered marble floor, because
   this page's own lede says "from a courthouse ceremony downtown": it is the
   one frame in her library that reads civic at all. The 16:9 file is cropped
   to keep her head in the frame (the earlier crop cut it). */
.loc-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("images/sc/veil-hall-wide.webp") center 40% / cover no-repeat #000;
  display: grid;
  grid-template-columns: minmax(0, 640px) auto;
  align-items: center;
  justify-content: center;
  column-gap: clamp(2.5rem, 7vw, 7rem);
  text-align: left;
  gap: clamp(2.5rem, 7vw, 7rem);
  padding: 4rem clamp(1.5rem, 6vw, 6rem) 7.5rem;
}
/* Hold the photograph still against the viewport while the hero scrolls over
   it (the hero itself is no longer pinned, see styles.css). This has to be
   restated here and cannot be inherited from .hero: the shorthand above resets
   background-attachment and background-position to their initial values, and
   location.css loads after styles.css, so it would win. Same +65px viewport
   correction and same desktop-pointer guard as the base rule. */
@media (hover: hover) and (pointer: fine) {
  .loc-hero {
    background-attachment: scroll, fixed;
    background-position: 0% 0%, center calc(38% + 65px);
  }
}


/* THIS HERO DOES NOT PIN. styles.css makes .hero sticky for the HOME page; on
   an interior page the owner wants the words to SCROLL while the photo stays
   locked (Tupelo, 2026-09-08, the day after the home pin was reinstated).
   location.css loads after styles.css, so this wins. */
.loc-hero { position: relative; }

/* THE PHOTO IS FIXED IN THE BACKGROUND AND THE WORDS SCROLL OFF IT. iOS breaks
   a fixed BACKGROUND but handles a fixed ELEMENT correctly, .hero's own
   stacking context contains the negative-z layer, and the opaque
   `main > :not(.hero) { z-index: 1 }` sections cover it once the hero is past.

   KNOWN AND ACCEPTED: a viewport-locked layer computes `cover` against the
   screen rather than the hero box, so on a hero taller than the phone the crop
   sits slightly tighter than a hero-sized background would. Do NOT try to
   cancel it by pinning background-size/position: on Tupelo that matched one
   phone to 0.3% while being 43-50% out on three others, because the hero's
   height is content-driven and no single percentage tracks it. */
@media (max-width: 800px) {
  .loc-hero { background: none; }
  .loc-hero::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      url("images/sc/veil-hall-wide.webp") center calc(40% + 62px) / cover no-repeat #000;
  }
}

.loc-hero-kicker { letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.85); margin-bottom: 1.6rem; }
.loc-hero .loc-hero-h1 { margin-bottom: 1.4rem; }
.loc-hero-in {
  font-size: 0.4em;
  letter-spacing: 0.32em;
  opacity: 0.85;
  vertical-align: 0.55em;
  margin-right: 0.4em;
}
.loc-hero-town {
  font-size: 1.32em;
  line-height: 1.02;
  color: #fff;
  display: inline-block;
}
.loc-hero .pg-hero-actions { justify-content: flex-start; margin-top: 2rem; }

.loc-hero-marker {
  justify-self: start;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: clamp(1.3rem, 2.2vw, 2.2rem);
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}
.loc-marker-script { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; color: #fff; }
.loc-marker-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: 0.85;
}
.loc-marker-label {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Venue ticker along the hero's top edge (the bottom edge hides under the
   fold by one header height and is immediately covered by the content that
   scrolls over the pinned hero) */
.loc-ticker {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.95rem 0;
}
.loc-ticker-track { display: flex; width: max-content; }
.loc-ticker-run { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; }
.loc-ticker-run span {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
/* The separator was U+2733 EIGHT SPOKED ASTERISK as an entity. Work Sans has
   no glyph for it, so iOS fell through the font stack to Apple Color Emoji and
   drew a full colour emoji in the middle of the ticker. It is an inline SVG
   now: font independent, and it inherits the colour below through
   fill="currentColor". Same treatment as .pg-stars in pages.css. */
.loc-ticker-run .loc-tick-star {
  color: #facad1;
  font-size: 0.8rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
}
.loc-tick-star .ico-ast { width: 1em; height: 1em; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .loc-ticker-track { animation: loc-tick 38s linear infinite; }
}
@keyframes loc-tick { to { transform: translateX(-50%); } }

/* ---------- Venue photo band: staggered offset trio ---------- */

.loc-venueband { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.loc-vb-grid { grid-template-columns: 1fr 1.28fr 1fr; align-items: start; }
.loc-vb-grid figure:nth-child(1) { margin-top: clamp(1.4rem, 3.5vw, 3rem); }
/* The grayscale sits on card 2, NEVER card 1. Card 1 is the colour card: it
   carries the setting the band's first caption names, and desaturating it
   flattens the whole trio. Card 2 is evenly lit against a plain ground, so it
   loses nothing in black and white. Do not move this rule back to card 1. */
.loc-vb-grid figure:nth-child(2) .pg-frame img { filter: grayscale(1); }
.loc-vb-grid figure:nth-child(2) .pg-frame img { aspect-ratio: 3 / 4; }
.loc-vb-grid figure:nth-child(3) { margin-top: clamp(2.8rem, 7vw, 6rem); }
.loc-venueband .loc-vb-grid figcaption { text-align: left; padding-left: 0.2rem; }

/* ---------- Venue guide garnish (shared picker classes stay) ---------- */

.loc-venues .pg-ven-item { justify-content: flex-start; }
.loc-venues .pg-ven-arrow { margin-left: auto; transition: opacity 0.3s, translate 0.3s; translate: -6px 0; }
.loc-venues .pg-ven-item.is-live .pg-ven-arrow { translate: 0 0; }
.loc-ven-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--rose);
  opacity: 0.75;
  min-width: 1.7em;
}
.loc-venues .pg-stage-media { overflow: hidden; }

/* ---------- The venue guide on the NAVY ground with GOLD accents ----------
   Owner request 2026-08-02. Scoped with .pg-band so it outranks
   .pg-band--cream (both are single classes; this one is 0,2,0 and this file
   loads after pages.css either way). The white .pg-stage-card that overlaps
   the photo is a CARD, not ground, so it keeps its white face, its ink copy
   and its rose label: gold on white measures 2.2:1 and would not read. */
.pg-band.loc-venues { background: var(--brown); color: #fff; }
/* The stage card is WHITE and its copy inherits the section colour, so the
   line above turned the venue heading and its note white ON white and the card
   read as empty. Restate ink inside the card; only the ground went dark. */
.loc-venues .pg-stage-card { color: var(--ink); }
.loc-venues .pg-head .eyebrow { color: var(--gold); }
.loc-venues .pg-ven-item { border-bottom-color: rgba(255, 255, 255, 0.28); }
.loc-venues .pg-ven-item:hover { background: rgba(255, 255, 255, 0.07); }
.loc-venues .loc-ven-num { color: var(--gold); opacity: 1; }
.loc-venues .pg-ven-item.is-live .pg-ven-name { color: var(--gold); }
.loc-venues .pg-ven-arrow { color: var(--gold); }
.loc-note-venue {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
@media (prefers-reduced-motion: no-preference) {
  .loc-venues .pg-stage-media img.is-live { animation: loc-kb 16s ease-out both; }
}
@keyframes loc-kb { from { scale: 1; } to { scale: 1.08; } }

/* ---------- What-we-offer: level framed trio with gallery captions ----------
   Reuses the venue band's .pg-frame matting so the two photo moments on the
   page share one language. No stagger, no overlap plates (round 2026-07-24). */

.loc-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  align-items: start;
}
.loc-offer .pg-frame { transition: translate 0.4s ease; }
.loc-offer:hover .pg-frame { translate: 0 -4px; }
.loc-offer-caption { text-align: center; padding: 1.4rem 0.6rem 0; }
.loc-offer-caption h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.3vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.loc-offer-caption p {
  font-family: 'Raleway', var(--body);
  font-size: 0.925rem;
  line-height: 1.7;
  max-width: 34ch;
  margin: 0 auto 1rem;
}

/* ---------- Areas served: the page's inverted band ---------- */

.loc-zones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.loc-zone { border-left: 1px solid rgba(245, 243, 240, 0.3); padding-left: clamp(1rem, 2vw, 1.6rem); }
.loc-zone-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: rgba(245, 243, 240, 0.28);
  margin-bottom: 0.7rem;
}
.loc-zone h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.loc-zone p { font-family: 'Raleway', var(--body); font-size: 0.95rem; line-height: 1.7; opacity: 0.9; }
.loc-areas .pg-note { opacity: 0.92; }
.loc-areas .pg-chips span,
.loc-areas .pg-chips a { border-color: rgba(245, 243, 240, 0.4); }
.loc-areas .pg-chips a:hover { border-color: #facad1; color: #facad1; }

/* ---------- Small screens ---------- */

/* A phone box is portrait, so the 16:9 file above would be scaled to the
   viewport HEIGHT and show about a quarter of its width: a blown-up sliver.
   The portrait crop of the same photograph is what the phone gets, exactly as
   styles.css does for the home hero. */
@media (max-width: 800px) {
  .loc-hero {
    background:
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      url("images/sc/veil-hall-tall.webp") center 40% / cover no-repeat #000;
  }
}

@media (max-width: 800px) {
  .loc-hero {
    grid-template-columns: 1fr;
    align-content: center;
    row-gap: 2.6rem;
    padding: var(--header-clear) 1.5rem 6rem;
  }
  .loc-hero-kicker { margin-bottom: 1.2rem; }
  .loc-hero .loc-hero-h1 { font-size: 9.375vw; }
  .loc-hero-town { font-size: 1.6em; }
  .loc-hero-marker {
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 1.2rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding: 1.2rem 0 0;
  }
  .loc-marker-script { grid-column: 1 / -1; }
  .loc-marker-num { font-size: 16vw; }
  .loc-venues .pg-head h2 .script { display: block; }
  .loc-vb-grid { grid-template-columns: 1fr; max-width: 340px; }
  .loc-vb-grid figure { margin-top: 0 !important; }
  .loc-vb-grid figure:nth-child(2) .pg-frame img { aspect-ratio: 4 / 5; }
  .loc-offers { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .loc-zones { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .loc-ticker-track { animation: none; }
  .loc-venues .pg-stage-media img.is-live { animation: none; }
  .loc-offer .pg-frame { transition: none; }
  .loc-offer:hover .pg-frame { translate: 0 0; }
  .loc-venues .pg-ven-arrow { transition: none; translate: 0 0; }
}

/* ==========================================================================
   MOBILE PASS 2026-08-02 — additive, phone-only.
   ========================================================================== */
@media (max-width: 800px) {
  /* Swash-cap clipping: the descending loop of the script town name ran off
     the left edge of the screen. */
  .loc-hero-town { padding-left: 0.3em; }
}