/* 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: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 2026-09-25: the ordinals read as steps, and these three rows are destinations, not a 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", owner pick 2026-09-25) --------
   Picked from five mobile layouts (archived at
   staging/a_extra_sections/sacredseasonsco/venues-mobile/). 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 venues are on screen without
   scrolling.

   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
   byte-identical: proven at 1440, 1024 and 901 (one pixel above the
   breakpoint) with a zero pixel diff before and after this block landed.
   It is appended LAST on purpose. It has to win over the 900px block above
   and over the 420px narrow-phone block, which is the order it was designed
   and tested in. 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
  }
}