/* 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. */
.loc-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("images/loc-hero.jpg") center 38% / 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);
  }
}

.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: #cbb6ae;
  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 is
   the only frame in the trio carrying the room (green wall, warm brick, wood
   floor), and desaturating it flattens the whole band. Card 2 is a plain pale
   backdrop lit evenly, so it loses nothing in black and white and its caption
   sells the lighting, not the colour. 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: #cbb6ae; color: #cbb6ae; }

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

@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) {
  /* Same swash-cap clipping as the selfie and glam heroes: the descending
     loop of the O in "Oxford MS" ran off the left edge of the screen. */
  .loc-hero-town { padding-left: 0.3em; }
}