/* 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%);
}
/* The two .lo-set blocks MUST be identical. The loop translates half the
   TRACK, so unequal sets put the wrap point somewhere inside set two and the
   ticker visibly jumps. The kit's placeholder shipped two different lorem
   lists until 2026-09-23. The home page's band (styles.css .band.is-tick)
   avoids the trap entirely by cloning its set at runtime in site.js. */
@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: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 removed: these three rows are destinations, not a numbered sequence. */
.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}
}

/* ---------- venue guide, PHONE LAYOUT ("Tabs") -------------------------------
   The four venues become a 2x2 tab head welded to the panel below, so the
   picker and the answer read as one object and all four are on screen without
   scrolling. Picked by the owner from five mobile layouts, 2026-09-25.

   THIS BLOCK IS MOBILE ONLY AND MUST STAY THAT WAY. Every rule lives inside
   the 900px query and is scoped to .s-venues, which is what keeps desktop
   untouched: proven with a zero pixel diff at 1440, 1024 and 901, one pixel
   above the breakpoint. It is appended LAST on purpose, because it has to win
   over the 900px block and the 420px narrow-phone block above it. Moving it
   earlier in this file changes what it does.
   -------------------------------------------------------------------------- */
@media (max-width:900px){

  .s-venues .vg{display:block;margin-top:34px}

  /* --- the tab head ------------------------------------------------------- */
  .s-venues .vg-list{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    border:1px solid var(--line);border-bottom:none
  }
  .s-venues .vg-item{
    display:block;min-width:0;position:relative;
    border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:14px 15px 16px;min-height:98px;background:none;
    transition:background .3s ease,box-shadow .3s ease
  }
  .s-venues .vg-item:nth-of-type(2n){border-right:none}
  .s-venues .vg-item:last-of-type{border-bottom:1px solid var(--line)}
  .s-venues .vg-item .lo-idx{display:block;width:auto;font-size:1rem;line-height:1.3;margin-bottom:4px}
  .s-venues .vg-item .n{font-size:1.02rem;line-height:1.22}
  .s-venues .vg-item .s{font-size:.68rem;line-height:1.45;margin-top:5px}
  /* no room for the arrow inside a tab, and a tab that is white with a gold
     top edge has already said which one it is */
  .s-venues .vg-item .arr{display:none}
  .s-venues .vg-item.is-live{background:#fff;box-shadow:inset 0 3px 0 var(--gold)}
  .s-venues .vg-item.is-live .lo-idx{color:var(--gold-deep)}
  /* the weld: a live tab on the bottom row loses the hairline it shares with
     the panel, so the white runs straight through */
  .s-venues .vg-item:nth-of-type(n+3).is-live{border-bottom-color:#fff}

  /* A 2x2 head assumes an EVEN count. The venue list is hand authored per
     build (it is not reconciled from client_packages), so a build with three
     or five venue types would otherwise leave a ragged half cell on the last
     row. An odd final tab takes the whole line instead, the same rule the
     contact form uses for a field left alone on a shared row. Inert at four. */
  .s-venues .vg-item:nth-of-type(odd):last-of-type{grid-column:1/-1;border-right:none}

  /* --- the panel ---------------------------------------------------------- */
  .s-venues .vg-stage{
    background:#fff;border:1px solid var(--line);border-top:none;
    box-shadow:0 20px 40px rgba(43,38,32,.10)
  }
  .s-venues .vg-stage::before{content:none}
  .s-venues .vg-media{
    height:auto;aspect-ratio:16/10;border:none;border-bottom:1px solid var(--line)
  }
  .s-venues .vg-card{
    margin:0;background:none;border:none;box-shadow:none;padding:24px 22px 26px
  }
  .s-venues .vg-note{font-size:1rem;line-height:1.64}
  .s-venues .vg-card .btn{
    display:block;width:100%;text-align:center;white-space:normal;
    margin-top:20px;padding:16px 22px
  }
}