/* location.css — page-scoped styles for location.html only (loaded after
   pages.css; never linked from any other page, so overrides of .vg/.step/
   .faq here are safe). Every new class is lo- prefixed. Palette vars come from
   styles.css. */

/* ---------- hero: copy left, layered postcard art right ---------- */
.lo-hero{padding:84px 0 96px}
.lo-hero h1{font-size:clamp(2.3rem,3.6vw,3.2rem)}
.lo-hero .lead{max-width:44ch}
.lo-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:76px;align-items:center}
.lo-hero-grid .lo-hero-art{order:-1}

.lo-hero-art{position:relative}
.lo-main{position:relative;margin:0 6px 0 26px}
.lo-main img,
.lo-main video {display:block;width:100%;height:520px;object-fit:cover;box-shadow:0 36px 70px rgba(43,38,32,.2)}
.lo-main::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold-pale);z-index:-1}

.lo-pol{--rot:4deg;position:absolute;top:-34px;right:-8px;z-index:2;width:188px;margin:0;background:#fff;border:1px solid var(--line);padding:9px 9px 12px;box-shadow:0 26px 52px rgba(43,38,32,.24);transform:rotate(var(--rot))}
.lo-pol img,
.lo-pol video {display:block;width:100%;height:148px;object-fit:cover}
.lo-pol figcaption{padding-top:9px;text-align:center;font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#A79A87}

.lo-route{--rot:-3deg;position:absolute;bottom:-40px;left:-26px;z-index:2;width:252px;background:#fff;border:1px solid var(--line);padding:18px 18px 14px;box-shadow:0 26px 52px rgba(43,38,32,.2);transform:rotate(var(--rot))}
.lo-route svg{display:block;width:100%;height:auto}
@media(prefers-reduced-motion:no-preference){.lo-road{animation:loroad 2.8s linear infinite}}
@keyframes loroad{from{stroke-dashoffset:0}to{stroke-dashoffset:-18}}
.lo-route-towns{display:flex;justify-content:space-between;margin-top:6px;font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep)}
.lo-route-note{margin-top:8px;text-align:center;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-size:1.06rem;color:var(--ink);line-height:1.3}

/* hero load choreography */
@media(prefers-reduced-motion:no-preference){
  .lo-hero-copy .eyebrow{animation:lorise .8s cubic-bezier(.2,.6,.2,1) both .05s}
  .lo-hero-copy h1{animation:lorise .8s cubic-bezier(.2,.6,.2,1) both .16s}
  .lo-hero-copy .lead{animation:lorise .8s cubic-bezier(.2,.6,.2,1) both .27s}
  .lo-hero-copy .hero-cta{animation:lorise .8s cubic-bezier(.2,.6,.2,1) both .38s}
  .lo-hero-art .lo-main{animation:lorise .9s cubic-bezier(.2,.6,.2,1) both .2s}
  .lo-hero-art .lo-pol{animation:lopop .7s cubic-bezier(.2,.6,.2,1) both .6s}
  .lo-hero-art .lo-route{animation:lopop .7s cubic-bezier(.2,.6,.2,1) both .75s}
}
@keyframes lorise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lopop{from{opacity:0;transform:rotate(var(--rot,0deg)) translateY(16px) scale(.95)}to{opacity:1;transform:rotate(var(--rot,0deg)) translateY(0) scale(1)}}

/* venue photo band: staggered editorial figures with drive-time captions */
.lo-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:96px;padding-bottom:34px;align-items:start}
.lo-shots figure{margin:0;position:relative}
.lo-shots figure:nth-child(2){transform:translateY(30px)}
.lo-shots .ph{position:relative;overflow:hidden;border:1px solid var(--line)}
.lo-shots figure:nth-child(1) .ph{height:300px}
.lo-shots figure:nth-child(2) .ph{height:344px}
.lo-shots figure:nth-child(3) .ph{height:300px}
.lo-shots .ph::after{content:"";position:absolute;inset:10px;border:1px solid rgba(250,246,239,.55);pointer-events:none}
.lo-shots img,
.lo-shots video {width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.lo-shots figure:hover img,
.lo-shots figure:hover video {transform:scale(1.05)}
.lo-shots figcaption{padding-top:13px;font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em}
.lo-shots figcaption b{display:block;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.16rem;color:var(--ink);letter-spacing:.05em}
.lo-shots figcaption b::after{content:"";display:block;width:26px;height:1px;background:var(--gold);margin:7px 0 6px}

/* ---------- claims band as a drifting ticker ---------- */
.lo-band{padding:0}
.lo-tick{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.lo-track{display:flex;width:max-content;animation:lodrift 38s linear infinite}
.lo-tick:hover .lo-track{animation-play-state:paused}
.lo-set{display:flex;align-items:center;padding:21px 0;font-size:.72rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.22em;white-space:nowrap}
.lo-set span{padding:0 22px}
/* The separator was the character U+2733, which is in none of the self-hosted
   font subsets, so every device chose its own fallback: Zapf Dingbats on a Mac,
   Apple Color Emoji on iOS, where it painted as a green emoji. Drawn in CSS it
   is the same four-pointed star the review sections already use, it takes the
   gold from currentColor, and it depends on no font at all. */
.lo-set i{font-style:normal;color:var(--gold);font-size:0;line-height:0}
.lo-set i::before{
  content:"";display:inline-block;width:11px;height:11px;background:currentColor;
  -webkit-clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);
}
@keyframes lodrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .lo-track{animation:none;width:100%;justify-content:center}
  .lo-set{white-space:normal;flex-wrap:wrap;justify-content:center;gap:10px 0}
  .lo-set[aria-hidden="true"]{display:none}
  .lo-tick{-webkit-mask-image:none;mask-image:none}
}

/* ---------- venue guide elevation ---------- */
.s-venues .vg{gap:56px;margin-top:64px}
.s-venues .vg-item{padding:22px 14px;position:relative}
.s-venues .vg-item .lo-idx{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:1.2rem;color:var(--gold);flex:none;width:2.1ch}
.s-venues .vg-item>span:nth-child(2){flex:1}
.lo-vgrow{margin-bottom:10px}
.lo-vgrow .vg-label{margin-bottom:0}
.s-venues .vg-item.is-live{box-shadow:inset 3px 0 0 var(--gold)}
.s-venues .vg-stage{position:relative}
.s-venues .vg-stage::before{content:"";position:absolute;top:16px;right:-16px;left:16px;height:400px;border:1px solid var(--gold-pale)}
.s-venues .vg-media{height:400px;z-index:1}
.s-venues .vg-card{border-top:1px solid var(--line);margin:-62px 26px 0 44px;position:relative;z-index:2;box-shadow:0 26px 52px rgba(43,38,32,.16);padding:30px 32px}
.lo-vgrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.lo-vgcount{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-size:1rem;color:var(--gold-deep);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  .s-venues .vg-media img.is-live,
  .s-venues .vg-media video.is-live {animation:lozoom 12s ease-out both}
}
@keyframes lozoom{from{transform:scale(1.07)}to{transform:scale(1)}}

/* ---------- what-we-offer: editorial index rows ---------- */
.lo-offers{margin-top:64px}
.lo-offer{display:grid;grid-template-columns:92px 216px 1fr auto;gap:34px;align-items:center;padding:30px 18px;border-top:1px solid var(--line);transition:background .35s}
.lo-offer:last-of-type{border-bottom:1px solid var(--line)}
.lo-offer:hover{background:#fff}
.lo-num{font-size:.68rem;font-weight:700;letter-spacing:.28em;color:var(--gold)}
.lo-oimg{display:block;overflow:hidden;border:1px solid var(--line);height:150px}
.lo-oimg img,
.lo-oimg video {display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.lo-offer:hover .lo-oimg img,
.lo-offer:hover .lo-oimg video {transform:scale(1.06)}
.lo-otx h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.62rem;margin-bottom:8px;letter-spacing:.03em}
.lo-otx p{color:var(--ink-soft);font-size:.96rem;max-width:52ch}
.lo-go{font-style:italic;color:var(--gold-deep);font-size:.98rem;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;white-space:nowrap;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.lo-offer:hover .lo-go{transform:translateX(6px)}

/* ---------- areas served: outlined zone numerals + dashed route ---------- */
.lo-zones .steps{position:relative}
.lo-zones .steps::before{content:"";position:absolute;top:34px;left:4%;right:4%;border-top:1px dashed var(--gold-pale)}
.lo-zones .step{position:relative}
.lo-zones .step .n{font-style:italic;font-size:4.4rem;color:transparent;-webkit-text-stroke:1.4px var(--gold);display:inline-block;background:var(--paper-2);position:relative;padding-right:20px}
.lo-zones .tag::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:2px}

/* ---------- faq: sticky side rail + animated open ---------- */
.lo-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start;text-align:left}
.lo-faq-side{position:sticky;top:112px}
.lo-ask{background:#fff;border:1px solid var(--line);padding:26px 28px;margin-top:36px}
.lo-ask b{display:block;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.34rem;letter-spacing:.03em;margin-bottom:8px}
.lo-ask p{color:var(--ink-soft);font-size:.94rem;margin-bottom:14px}
.lo-faq .faq{margin:0;max-width:none}
.lo-faq .faq details:first-of-type{border-top:none}
.s-local-faq .faq details[open] p{animation:lofade .45s ease both}
@keyframes lofade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.s-local-faq .faq details[open] p{animation:none}}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .lo-faq{grid-template-columns:1fr;gap:44px}
  .lo-faq-side{position:static}
  .s-venues .vg-stage::before{height:260px}
  .s-venues .vg-media{height:260px}
  .s-venues .vg-card{margin:-40px 14px 0 24px}
  /* The stage's offset frame (::before) hangs right:-16px on purpose. On a
     phone the wrap is edge to edge, so that bleed becomes 7px of horizontal
     PAGE scroll. Clip it at the section; the frame still reads the same,
     it just stops at the screen edge. clip, not hidden, so nothing here
     turns into a scroll container. */
  .s-venues{overflow-x:clip}
}
/* NARROW PHONES (layout audit 2026-08-09). The venue guide's single grid track
   is 1fr, which floors at its min-content, and that floor is set by the
   vg-card CTA: a nowrap pill (287px for this label) plus the card's side
   padding and inset margins = 390.56px. On anything narrower than ~420px
   viewport the whole guide sat pinned at that width and the .s-venues clip
   cut it at the screen edge: the active row's arrow was entirely off screen
   at 390, and at 360 the row subtitles and the card's note text lost their
   last 13px of glyphs mid-letter. (The kit has the same latent floor with its
   shorter placeholder label; this build's real label widened it past 390.)
   minmax(0,1fr) removes the floor so the track matches the wrap again, and
   the CTA label is allowed to wrap onto a second line, which it does only
   when its container genuinely cannot hold it. No geometry is set on the
   button itself. 421px and up render exactly as before. */
@media(max-width:420px){
  .vg{grid-template-columns:minmax(0,1fr)}
  .vg-card .btn{white-space:normal}
}
@media(max-width:820px){
  .lo-hero{padding:64px 0 84px}
  .lo-hero-grid{grid-template-columns:1fr;gap:70px}
  .lo-hero-grid .lo-hero-art{order:0}
  .lo-main{margin:0 14px}
  .lo-main img,
  .lo-main video {height:400px}
  .lo-pol{top:-26px;right:2px;width:152px}
  .lo-pol img,
  .lo-pol video {height:120px}
  .lo-route{bottom:-34px;left:2px;width:216px}
  .lo-shots{grid-template-columns:1fr;gap:38px;margin-top:84px;padding-bottom:0}
  .lo-shots figure:nth-child(2){transform:none}
  .lo-shots figure:nth-child(1) .ph,.lo-shots figure:nth-child(2) .ph,.lo-shots figure:nth-child(3) .ph{height:250px}
  .lo-offer{grid-template-columns:1fr;gap:16px;padding:28px 6px}
  .lo-oimg{height:200px;order:-1}
  .lo-go{justify-self:start}
  .lo-zones .steps::before{display:none}
}