/* ============================================
   Shared shell for /blog pages: tokens, base,
   nav, buttons, footer — adapted from the inline
   <style> in index.html so every post doesn't
   have to carry its own copy of the whole thing.
   ============================================ */

:root{
  --ink: #1a1a1a;
  --ink-soft: #232323;
  --ash: #2b2b2a;
  --hairline: rgba(255,255,255,0.12);
  --paper: #ffffff;
  --mist: #b9b6ad;
  --shine: #cbb181;
  --shine-deep: #a68e5f;
  --shine-dim: rgba(203,177,129,0.14);
  --serif: "Lulo Clean One Bold", "Archivo Black", -apple-system, sans-serif;
  --sans: "Oxygen", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1180px;
  --maxw-post: 760px;
  --edge: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
img, video{ -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
::selection{ background:var(--shine); color:var(--ink); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; margin:0; letter-spacing:-0.01em; }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:0.72rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--mist);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--shine); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--shine); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ============================================
   NAV (simplified: always solid, no hero to
   scroll over on blog pages)
   ============================================ */
.nav{
  position:sticky; top:0; left:0; width:100%; z-index:100;
  background:rgba(26,26,26,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; height:112px; }
.logo-img{ height:82px; width:auto; display:block; }
.foot-logo-img{ height:54px; width:auto; display:block; margin-bottom:14px; }
.nav-right{ display:flex; align-items:center; gap:40px; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{ font-size:1rem; font-weight:600; color:var(--paper); transition:opacity 0.2s; white-space:nowrap; }
.nav-links a:hover, .nav-links a.current{ opacity:0.7; color:var(--shine); }

/* padding-bottom + matching negative margin extends this li's actual
   hoverable box down to meet the dropdown menu with zero gap, so the
   cursor never crosses "dead" space and loses :hover mid-transit. */
.nav-dropdown{ position:relative; padding-bottom:18px; margin-bottom:-18px; }
/* inline-flex, not flex — this needs to stay an inline-level box so
   .nav-dropdown's text-align:center on mobile actually centers it like
   every other nav link, instead of it defaulting to the left edge the
   way a block-level box would. */
.nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; }
.nav-dropdown-trigger svg{ width:11px; height:11px; flex:none; transition:transform 0.2s ease; }
.nav-dropdown:hover .nav-dropdown-trigger svg, .nav-dropdown:focus-within .nav-dropdown-trigger svg{ transform:rotate(180deg); }
.nav-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--ink); border:1px solid var(--hairline); border-radius:12px;
  padding:8px; min-width:200px; box-shadow:0 12px 30px rgba(0,0,0,0.4);
  opacity:0; pointer-events:none;
  transition:opacity 0.15s ease; z-index:50;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1; pointer-events:auto;
}
.nav-dropdown-menu a{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px; font-size:0.9rem; font-weight:600; color:var(--paper); white-space:nowrap; }
.nav-dropdown-menu a:hover{ background:var(--ink-soft); color:var(--shine); opacity:1; }
.nav-dropdown-icon{ display:flex; flex:none; width:16px; height:16px; color:var(--shine); }
.nav-dropdown-icon svg{ width:100%; height:100%; }
.nav-mobile-actions{ display:none; }
.nav-socials{ display:flex; align-items:center; gap:14px; margin-left:8px; }
.nav-social-icon{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--hairline); color:var(--paper);
  transition:background 0.2s, color 0.2s;
}
.nav-social-icon:hover{ background:var(--paper); color:var(--ink); }
.nav-social-icon svg{ width:16px; height:16px; }
.nav-actions{ display:flex; align-items:center; gap:14px; flex:none; }
a.btn.nav-cta{ padding:9px 18px; font-size:0.82rem; color:var(--ink); }
.nav-toggle{
  display:none; background:none; border:0; color:var(--paper); font-size:1.5rem; cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center;
}

@media (max-width:900px){
  .logo-img{ height:56px; }
  .nav .wrap{ height:88px; }
  .nav-links{
    position:fixed; inset:88px 0 0 0; background:var(--ink);
    flex-direction:column; justify-content:flex-start; padding:40px var(--edge);
    transform:translateX(100%); transition:transform 0.3s ease; gap:22px;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.3rem; }
  /* Services stays collapsed until tapped, instead of always showing its
     submenu inline (which also used to render left-aligned and out of
     step with the rest of the centered menu). */
  .nav-dropdown{ padding-bottom:0; margin-bottom:0; text-align:center; }
  .nav-dropdown-menu{
    position:static; opacity:1; pointer-events:none;
    box-shadow:none; background:none; border:none; padding:0; margin-top:0;
    max-height:0; overflow:hidden; transition:max-height 0.25s ease, margin-top 0.25s ease;
  }
  .nav-dropdown.open .nav-dropdown-menu{ pointer-events:auto; max-height:160px; margin-top:10px; }
  .nav-dropdown-trigger svg{ display:inline-block; }
  .nav-dropdown.open .nav-dropdown-trigger svg{ transform:rotate(180deg); }
  /* Desktop's 200px min-width made sense as a dropdown panel — on mobile
     it was forcing this wider than the actual content, throwing off
     centering relative to "Services" above it. Same inline-flex trick as
     the trigger: shrink-wrap the link so text-align:center on the <li>
     actually centers it. */
  .nav-dropdown-menu{ min-width:0; transform:none; }
  .nav-dropdown-menu li{ text-align:center; }
  .nav-dropdown-menu a{ display:inline-flex; justify-content:center; }
  .nav-toggle{ display:flex; }
  a.btn.nav-cta span{ display:none; }
  a.btn.nav-cta{ padding:11px; border-radius:50%; }
  a.btn.nav-cta .btn-icon{ width:19px; height:19px; }
  .nav-mobile-actions{
    display:flex; flex-direction:column; gap:12px; width:100%; margin-top:10px;
    padding-top:26px; border-top:1px solid var(--hairline);
  }
  .nav-mobile-actions .btn{ width:100%; justify-content:center; }
  /* .nav-links a{ color:var(--paper) } up top was also catching these two
     buttons, since they're technically <a> tags in the same list —
     overriding "Check Your Date" back to black-on-white, since its actual
     background is white and white-on-white was unreadable. */
  .nav-mobile-actions .btn-solid{ color:var(--ink); }
  .nav-mobile-actions .btn-solid .btn-icon{ color:var(--ink); }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 28px;
  border-radius:100px; font-weight:800; font-size:0.92rem; cursor:pointer; border:1px solid transparent;
  transition:transform 0.15s ease, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--paper); color:var(--ink); }
.btn-solid:hover{ background:var(--shine); }
.btn-ghost{ border-color:var(--hairline); color:var(--paper); background:transparent; }
.btn-ghost:hover{ border-color:var(--paper); background:var(--paper); color:var(--ink); }
.btn-icon{ width:18px; height:18px; flex-shrink:0; }

/* ============================================
   SECTIONS (shared page-section pattern, matches index.html)
   ============================================ */
.section{ padding:50px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.08; text-transform:uppercase; }
.section-head p{ color:var(--mist); margin-top:16px; font-size:1.03rem; }
.alt-bg{ background:var(--ink-soft); }

/* ============================================
   CAROUSEL + REVIEWS (shared: ported from index.html
   so any page can embed the live reviews widget)
   ============================================ */
.carousel{ position:relative; }
.carousel-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-top:10px; padding-bottom:10px; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > *{ scroll-snap-align:start; flex:0 0 auto; }
.carousel-controls{ display:flex; gap:12px; margin-top:24px; justify-content:flex-end; }
.carousel-full{ width:100%; display:flex; align-items:center; gap:14px; padding:0 var(--edge); box-sizing:border-box; }
.carousel-full .carousel-track{ flex:1; }
.car-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--hairline);
  background:var(--ash); color:var(--paper); cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:border-color 0.2s, background 0.2s;
}
.car-btn:hover{ border-color:var(--shine); background:var(--shine-dim); }
.car-btn-edge{ flex:none; visibility:hidden; opacity:0; transition:opacity 0.2s ease; pointer-events:none; }
.car-btn-edge.visible{ visibility:visible; opacity:1; pointer-events:auto; }
@media (max-width:700px){
  .car-btn-edge{ display:none; }
  .carousel-full{ gap:0; }
}

.reviews-loading{ color:var(--mist); font-size:0.95rem; padding:40px; text-align:center; }

.review-filters{
  display:flex; gap:28px; flex-wrap:wrap; justify-content:center;
  border-bottom:1px solid var(--hairline); padding-bottom:0;
}
.review-filter{
  display:flex; align-items:center; gap:8px; padding:0 0 14px;
  background:none; border:none; border-bottom:2px solid transparent;
  color:var(--mist); font-weight:600; font-size:0.92rem; font-family:inherit; cursor:pointer;
  transition:color 0.2s, border-color 0.2s;
}
.review-filter img{ width:17px; height:17px; object-fit:contain; border-radius:50%; flex:none; }
.review-filter .rf-rating{ font-weight:800; color:var(--paper); }
.review-filter:hover{ color:var(--paper); }
.review-filter.active{ color:var(--paper); border-bottom-color:var(--shine); }
.review-filter.active .rf-rating{ color:var(--shine); }
@media (max-width:480px){
  .review-filters{ gap:14px; }
  .review-filter{ font-size:0.82rem; gap:6px; padding-bottom:12px; }
  .review-filter img{ width:15px; height:15px; }
}

.review-card{
  width:270px; flex:none; background:var(--ash); border:1px solid var(--hairline); border-radius:16px; padding:18px;
  text-align:center; display:flex; flex-direction:column; max-height:520px; min-height:0;
  transition:transform 0.2s ease, border-color 0.2s;
}
.review-card:hover{ transform:translateY(-3px); border-color:var(--shine); }
.review-card.card-expanded{ max-height:none; }
.review-photos{ display:grid; gap:5px; margin-bottom:12px; border-radius:10px; overflow:hidden; }
.review-photos img{ width:100%; height:100%; object-fit:cover; object-position:center 65%; display:block; }
.review-photos.photos-1{ grid-template-columns:1fr; aspect-ratio:4/3; }
.review-photos.photos-2{ grid-template-columns:1fr 1fr; aspect-ratio:16/9; }
.review-photos.photos-3{ grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:4/3; gap:5px; }
.review-photos.photos-3 img:first-child{ grid-row:span 2; }
.review-card .stars{ color:var(--shine); font-size:1.15rem; letter-spacing:3px; margin-bottom:10px; }
.review-card .body{
  color:var(--paper); font-size:0.88rem; line-height:1.5; margin-bottom:4px;
  flex:1 1 auto; overflow:hidden; min-height:0;
}
.review-card .body.expanded{ flex:0 0 auto; overflow:visible; }
.review-card .read-more{ color:var(--shine); font-size:0.78rem; cursor:pointer; margin-bottom:12px; display:none; flex:none; }
.review-card .read-more.visible{ display:inline-block; }
.review-card .reviewer{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:0; padding-top:12px; flex:none; }
.review-card .avatar-wrap{ position:relative; flex:none; margin-bottom:3px; }
.review-card .avatar{
  width:38px; height:38px; border-radius:50%; background:var(--shine-dim);
  color:var(--shine); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem;
  overflow:hidden;
}
.review-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.review-card .platform-badge{
  position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--ash); overflow:hidden;
}
.review-card .platform-badge img{ width:100%; height:100%; object-fit:contain; }
.review-card .name-row{ display:flex; align-items:center; justify-content:center; gap:5px; }
.review-card .name{ font-weight:700; font-size:0.92rem; text-decoration:underline; text-decoration-color:var(--hairline); }
.review-card .verified-wrap{ display:inline-flex; cursor:help; }
.review-card .verified{ width:14px; height:14px; flex:none; }
.review-card .meta{ color:var(--mist); font-size:0.78rem; }
.review-card .meta-date{ opacity:0.75; margin-top:1px; }

.review-summary-card{
  width:270px; flex:none; background:var(--ash); border:1px solid var(--shine); border-radius:16px; padding:20px 18px;
  display:flex; flex-direction:column; transition:transform 0.2s ease, border-color 0.2s;
  animation:summaryGlow 2.6s ease-in-out infinite;
}
@keyframes summaryGlow{
  0%, 100%{ box-shadow:0 0 0 0 rgba(203,177,129,0); }
  50%{ box-shadow:0 0 16px 2px rgba(203,177,129,0.45); }
}
.review-summary-card:hover{ transform:translateY(-3px); border-color:var(--shine); }
.review-summary-card .stars{ color:var(--shine); font-size:1.15rem; letter-spacing:3px; margin-bottom:14px; text-align:center; }
.review-summary-card ul{ list-style:none; padding:0; margin:0 0 16px; }
.review-summary-card li{ display:flex; gap:8px; font-size:0.88rem; color:var(--paper); margin-bottom:12px; line-height:1.5; text-align:left; }
.review-summary-card li svg{ flex:none; margin-top:2px; }
.review-summary-card .summary-footer{ text-align:center; margin-top:auto; padding-top:8px; }
.review-summary-card .summary-icon{
  width:32px; height:32px; border-radius:50%; margin:0 auto 8px; background:linear-gradient(135deg,#8e6bff,#5b8cff);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.95rem;
}
.review-summary-card .summary-label{ color:#9b8bff; font-weight:700; font-size:0.8rem; }
.review-summary-card .summary-based{ color:var(--mist); font-size:0.74rem; margin-top:2px; }

/* ============================================
   ABOUT (ported from index.html so any page can
   embed the real About Ryan section)
   ============================================ */
.sound-toggle{
  position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(26,26,26,0.65); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 0.2s, border-color 0.2s, transform 0.15s;
}
.sound-toggle:hover{ background:rgba(26,26,26,0.85); border-color:var(--shine); transform:scale(1.06); }
.sound-toggle svg{ width:18px; height:18px; fill:none; stroke:var(--paper); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sound-toggle .icon-muted{ display:block; }
.sound-toggle .icon-on{ display:none; }
.sound-toggle.is-on .icon-muted{ display:none; }
.sound-toggle.is-on .icon-on{ display:block; }

.about{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
.about-media{ display:flex; flex-direction:column; gap:20px; }
.about-video-slot, .about-photo-slot{
  position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  background:linear-gradient(155deg, var(--ash), var(--ink-soft));
  border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
}
.about-video-slot{ aspect-ratio:16/10; }
.about-video, .about-photo-img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-media-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mist); font-size:0.85rem; text-align:center; padding:20px; }
.media-credit{
  position:absolute; right:8px; bottom:8px; z-index:2; background:rgba(26,26,26,0.72); backdrop-filter:blur(4px);
  padding:4px 9px; border-radius:100px; font-size:0.65rem; color:var(--mist); line-height:1.3;
}
.media-credit a{ color:var(--paper); text-decoration:underline; text-underline-offset:2px; }
.media-credit a:hover{ color:var(--shine); }
.about h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.08; margin-bottom:20px; text-transform:uppercase; }
.about p{ color:var(--mist); margin-bottom:16px; }
.about strong{ color:var(--paper); }
.about-signature{
  font-family:"Alex Brush", cursive; font-size:2.6rem; color:var(--paper);
  margin:-4px 0 20px; line-height:1; font-weight:400;
}
@media (max-width:860px){ .about{ grid-template-columns:1fr; } }

/* ============================================
   SERVICE AREA MAP (ported from index.html so any
   page can embed the real travel-area map)
   ============================================ */
.area-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.area-map{ position:sticky; top:130px; display:flex; align-items:center; justify-content:center; }
.area-map svg{ width:100%; height:auto; max-width:580px; overflow:visible; }
.area-map .region-home, .area-map .region-away{
  stroke:var(--ink); stroke-width:6; stroke-linejoin:round;
  cursor:pointer; transform-box:fill-box; transform-origin:center;
  transition:transform 0.2s ease, filter 0.2s ease;
  outline:none;
}
.area-map .region-home{ fill:var(--shine); }
.area-map .lake-cutout{ fill:var(--ink); pointer-events:none; }
.area-map .region-away{ fill:var(--ash); }
.area-map .region-away:hover, .area-map .region-away:focus, .area-map .region-away:focus-visible{ fill:var(--shine-deep); transform:scale(1.035); }
.area-map .region-home:hover, .area-map .region-home:focus, .area-map .region-home:focus-visible{ filter:brightness(1.08); transform:scale(1.035); }
.area-map .map-labels{ pointer-events:none; }
.area-map .region-label{ font-family:var(--sans); font-weight:700; font-size:15px; fill:var(--mist); letter-spacing:0.04em; }
.area-map .home-pin-emoji{ font-size:46px; }
.area-map .home-label{ font-family:var(--serif); font-weight:700; font-size:30px; fill:var(--ink); }
.area-map .home-sub{ font-family:var(--sans); font-weight:600; font-size:15px; fill:var(--ink-soft); letter-spacing:0.03em; opacity:0.8; }
.map-tip{
  position:absolute; left:0; top:0; z-index:5; pointer-events:none;
  background:var(--ink-soft); border:1px solid var(--hairline); border-radius:10px;
  padding:8px 14px; font-family:var(--sans); font-size:0.85rem; font-weight:700; color:var(--paper);
  box-shadow:0 8px 20px rgba(0,0,0,0.45); white-space:nowrap;
  opacity:0; transform:translate(-50%,-100%) translateY(-6px);
  transition:opacity 0.15s ease, transform 0.15s ease;
}
.map-tip.visible{ opacity:1; transform:translate(-50%,-100%) translateY(-12px); }
.map-tip .tip-mark{ color:var(--shine); margin-right:5px; }
.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip{
  border:1px solid var(--hairline); border-radius:100px; padding:9px 18px;
  font-size:0.85rem; color:var(--mist); font-weight:600;
}
.area-groups{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.area-group{
  border:1px solid var(--hairline); border-radius:14px; padding:14px 18px;
  background:var(--ink-soft); transition:border-color 0.2s;
}
.area-group[open]{ border-color:var(--hairline); }
.area-group .chip-grid{ margin-top:14px; }
.area-group-title{
  font-family:var(--sans); font-size:0.95rem; font-weight:800; color:var(--paper);
  margin:0; display:flex; align-items:center; gap:10px; cursor:pointer;
  list-style:none; user-select:none;
}
.area-group-title::-webkit-details-marker{ display:none; }
.area-group-title::after{
  content:""; width:9px; height:9px; margin-left:auto; flex:none;
  border-right:2px solid var(--mist); border-bottom:2px solid var(--mist);
  transform:rotate(45deg); transition:transform 0.2s ease;
}
.area-group[open] .area-group-title::after{ transform:rotate(-135deg); }
.area-group-title:hover::after{ border-color:var(--shine); }
.area-group-badge{
  font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink); background:var(--shine); padding:3px 10px; border-radius:100px;
}
.area-group-badge--fee{
  color:var(--mist); background:transparent; border:1px solid var(--hairline);
  text-transform:none; letter-spacing:0.01em; font-weight:600;
}
.area-note{ color:var(--mist); font-size:0.82rem; margin-top:14px; }
@media (max-width:860px){ .area-wrap{ grid-template-columns:1fr; align-items:start; } .area-map{ position:static; width:100%; max-width:460px; margin:0 auto 32px; order:-1; } }

/* ============================================
   CONTACT FORM (ported from index.html so any page
   can embed the real "Check Your Date" section)
   ============================================ */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.82rem; font-weight:700; color:var(--mist); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; max-width:100%; min-width:0; background:var(--ink-soft); border:1px solid var(--hairline); border-radius:10px;
  padding:13px 15px; color:var(--paper); font-family:var(--sans); font-size:0.95rem;
}
.field input::placeholder, .field textarea::placeholder{ color:#7a7770; }
/* iOS Safari's native date-input control has its own internal minimum
   width for the mm/dd/yyyy segments + calendar icon that ignores
   width:100% on narrow screens, pushing it past the field's border. A
   little less padding gives it enough room to actually fit. */
@media (max-width:480px){
  .field input[type="date"]{ padding-left:10px; padding-right:10px; }
}
.checks{ display:flex; flex-direction:column; gap:10px; }
.checks .check-pill{
  border:1px solid var(--hairline); border-radius:12px; padding:12px 16px; font-size:0.88rem; color:var(--paper);
  display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color 0.2s, background 0.2s;
}
.checks .check-pill:hover{ border-color:var(--shine); background:var(--shine-dim); }
.checks .check-pill input[type="checkbox"]{ flex:none; width:18px; height:18px; margin:0; accent-color:var(--shine); }
.checks .check-pill .check-icon{ flex:none; width:20px; height:20px; color:var(--shine); }
.checks .check-pill .check-icon svg{ width:100%; height:100%; fill:currentColor; display:block; }
.info-line{ display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:0.98rem; }
.info-line .ico{ width:20px; text-align:center; color:var(--shine); }
.contact-events-mini{
  margin-top:8px; padding:16px 18px; background:var(--ink-soft);
  border:1px solid var(--hairline); border-radius:14px; max-width:420px;
}
.contact-events-mini-title{ font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--shine); margin-bottom:10px; }
.contact-events-mini ul{ list-style:none; margin:0; padding:0; }
.contact-events-mini li{ padding:8px 0; border-top:1px solid var(--hairline); }
.contact-events-mini li:first-child{ border-top:none; padding-top:0; }
.contact-events-mini a{ display:block; }
.contact-events-mini a:hover .contact-events-mini-name{ color:var(--shine); }
.contact-events-mini-name{ font-weight:700; font-size:0.9rem; color:var(--paper); transition:color 0.2s; }
.contact-events-mini-date{ display:block; color:var(--mist); font-size:0.78rem; margin-top:2px; }
@media (max-width:860px){
  /* Stacked single-column layout — the 60px gap made sense as a column
     gutter on desktop, but stacked vertically it left a big empty gap
     between the "upcoming show" widget and the form below it. */
  .contact-wrap{ grid-template-columns:1fr; gap:28px; }
}
/* Direct-contact fallback, deliberately de-emphasized and pushed below
   the form (see markup) so the lead form reads as the primary way to
   reach out, not phone/email/walking up. */
.contact-direct{ max-width:900px; margin:48px auto 0; padding-top:32px; border-top:1px solid var(--hairline); text-align:center; }
.contact-direct-label{ font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--mist); margin-bottom:16px; }
.contact-direct-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; }
.contact-direct-row .info-line{ margin-bottom:0; }

/* ============================================
   BLOG-SPECIFIC
   ============================================ */
.shine-word{ color:var(--shine); }
.blog-header{
  padding:64px 0 40px; border-bottom:1px solid var(--hairline); text-align:center;
  background-color:var(--ink);
}
.blog-header .eyebrow{ text-shadow:0 2px 10px rgba(0,0,0,0.75), 0 0 22px rgba(0,0,0,0.5); }
.blog-header h1{
  font-size:clamp(1.6rem, 4.6vw, 3.4rem); white-space:nowrap;
  text-shadow:0 4px 24px rgba(0,0,0,0.5), 0 0 46px rgba(255,255,255,0.28);
}
.blog-header p{
  color:var(--mist); margin:14px auto 0; font-size:clamp(0.85rem, 2.6vw, 1.05rem); white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
}

.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:56px 0 90px; }
@media (max-width:980px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{
  display:flex; flex-direction:column; background:var(--ink-soft); border:1px solid var(--hairline);
  border-radius:16px; overflow:hidden; transition:transform 0.2s ease, border-color 0.2s;
}
.post-card:hover{ transform:translateY(-3px); border-color:var(--shine); }
.post-card-media{ aspect-ratio:16/10; background:var(--ash); overflow:hidden; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; }
.post-card-body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.post-card-date{ color:var(--shine); font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.post-card h2, .post-card h3{ font-size:1.2rem; margin-top:8px; line-height:1.25; }
.post-card p{ color:var(--mist); font-size:0.9rem; margin-top:10px; flex:1; }
.post-card-readmore{ color:var(--shine); font-size:0.85rem; font-weight:700; margin-top:16px; }

.blog-empty{ color:var(--mist); text-align:center; padding:80px 20px; }
.blog-empty p{ margin-top:8px; }

/* Individual post article */
.post-hero-img{ width:100%; height:440px; object-fit:cover; }
.post-layout{
  max-width:1180px; margin:0 auto; padding:56px var(--edge) 100px;
  display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:start;
}
.post-article{ max-width:none; margin:0; padding:0; }
.post-article .post-meta{ color:var(--mist); font-size:0.85rem; margin-bottom:14px; }
.post-article h1{ font-size:clamp(1.9rem, 4.4vw, 2.8rem); line-height:1.15; margin-bottom:20px; }
.post-article .post-body{ font-size:1.05rem; color:#e6e3dc; }
.post-article .post-body p{ margin:0 0 20px; }
.post-article .post-body h2{ font-size:1.5rem; color:var(--paper); margin:36px 0 14px; }
.post-article .post-body h3{ font-size:1.2rem; color:var(--paper); margin:28px 0 12px; }
.post-article .post-body ul{ list-style:disc; padding-left:22px; margin:0 0 20px; }
.post-article .post-body li{ margin-bottom:8px; }
.post-article .post-body a{ color:var(--shine); text-decoration:underline; text-underline-offset:2px; }
.post-article .post-body strong{ color:var(--paper); }
.post-article .post-body h2{ border-top:1px solid var(--hairline); padding-top:28px; }
.post-article .post-body h2:first-of-type{ border-top:none; padding-top:0; }
.venue-meta{ color:var(--mist); font-size:0.85rem; margin:-10px 0 16px !important; }
.venue-meta a{ color:var(--shine); }
.venue-links{ font-size:0.82rem; margin:-8px 0 20px !important; }
.venue-links a{ margin-right:14px; }
.venue-photo{ width:100%; height:auto; border-radius:12px; margin:0 0 18px !important; }
/* Same-height row: each photo keeps its own natural width (landscape shots
   render wide, portrait shots render narrower) instead of forcing every
   photo into one identical box shape, which crops landscape photos into
   unnaturally narrow slivers. */
.venue-photo-grid{ display:flex; gap:12px; margin:0 0 18px; height:280px; }
.venue-photo-grid img{ height:100%; width:auto; flex:1 1 auto; min-width:0; object-fit:cover; border-radius:12px; }
@media (max-width:500px){
  .venue-photo-grid{ flex-direction:column; height:auto; }
  .venue-photo-grid img{ width:100%; height:220px; }
}
.post-cta{
  max-width:var(--maxw-post); margin:0 auto 90px; padding:32px var(--edge);
  background:var(--ink-soft); border:1px solid var(--hairline); border-radius:20px; text-align:center;
}
.post-cta h3{ font-size:1.4rem; margin-bottom:10px; }
.post-cta p{ color:var(--mist); margin-bottom:20px; }
.back-link{ color:var(--mist); font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; }
.back-link:hover{ color:var(--shine); }

@media (max-width:980px){
  .post-layout{ grid-template-columns:1fr; }
  .post-sidebar{ position:static !important; }
}

/* ============================================
   POST SIDEBAR
   ============================================ */
.post-sidebar{ display:flex; flex-direction:column; gap:24px; position:sticky; top:132px; }
.sidebar-card{ background:var(--ink-soft); border:1px solid var(--hairline); border-radius:16px; padding:24px; }
.sidebar-card h3{ font-size:1.05rem; margin-bottom:6px; }
.sidebar-card > p:first-of-type{ color:var(--mist); font-size:0.88rem; margin:0 0 16px; }

.sidebar-services{ list-style:none; margin:0 0 18px; padding:0; }
.sidebar-services li{
  display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--paper);
  padding:10px 0; border-top:1px solid var(--hairline);
}
.sidebar-services li:first-child{ border-top:none; }
.sidebar-services svg{ flex:none; width:16px; height:16px; color:var(--shine); }
.sidebar-card .btn{ width:100%; justify-content:center; }

.sidebar-posts{ list-style:none; margin:0; padding:0; }
.sidebar-post-link{ display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--hairline); }
.sidebar-post-link:first-child{ border-top:none; padding-top:0; }
.sidebar-post-link img{ width:64px; height:48px; object-fit:cover; border-radius:8px; flex:none; }
.sidebar-post-link span{ font-size:0.88rem; font-weight:600; color:var(--paper); line-height:1.3; }
.sidebar-post-link:hover span{ color:var(--shine); }
.sidebar-empty-note{ color:var(--mist); font-size:0.85rem; margin:0; }

.sidebar-card .field{ margin-bottom:14px; }
.sidebar-card .field label{ display:block; font-size:0.78rem; font-weight:700; color:var(--mist); margin-bottom:6px; }
.sidebar-card .field input, .sidebar-card .field textarea{
  width:100%; background:var(--ink); border:1px solid var(--hairline); border-radius:10px;
  padding:11px 13px; color:var(--paper); font-family:var(--sans); font-size:0.9rem;
}
.sidebar-card .field textarea{ resize:vertical; }
.sidebar-card #leadFormStatus{ color:var(--mist); font-size:0.8rem; margin-top:10px; min-height:1.2em; }

/* ============================================
   FOOTER
   ============================================ */
footer{ border-top:1px solid var(--hairline); padding:56px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.foot-grid h4{ font-family:var(--sans); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--mist); margin-bottom:16px; }
.foot-grid li{ margin-bottom:10px; }
.foot-grid a{ color:var(--paper); font-size:0.92rem; }
.foot-grid a:hover{ color:var(--shine); }
.foot-socials{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.foot-social-icon{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--hairline); color:var(--paper);
  transition:background 0.2s, color 0.2s;
}
.foot-social-icon:hover{ background:var(--paper); color:var(--ink); }
.foot-social-icon svg{ width:16px; height:16px; }
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--hairline); padding-top:24px; color:var(--mist); font-size:0.8rem; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr 1fr; } }