/* ============================================================================
   Timilo Boutique — shared styles for Info section pages
   Base tokens, nav, footer and typography are copied verbatim from the
   existing pages (faq.html / dining.html) so the Info pages match the rest
   of the site exactly. Info-specific components follow below the base.

   ── colour system (2026-07-28) ────────────────────────────────────────────
   Converted to landing.html's v2 monochrome palette: white/charcoal/grey,
   amber as the sole accent. Unlike landing.html's section-by-section rollout,
   these 10 pages get ONE simple template (hero, prose/component body, shared
   footer), so the conversion is a wholesale flip rather than per-section
   overrides: the page body goes light (white/charcoal), and .info-hero, the
   nav and #mobilemenu stay dark — teal becomes charcoal, never flipped to
   white, matching how every other "was dark teal" surface converted on
   landing.html. That's what keeps this a colour-only change: the single
   reversed nav logo (logo-rev-*.webp, the only variant these 10 pages load)
   still works with zero markup edits, because charcoal is dark enough for it
   regardless of nav state. landing.html's nav needed a second (dark) logo
   image specifically because ITS solid state went white — these pages never
   go there, so that split isn't needed here.
   ========================================================================== */

:root{
  --teal:#16292D; --teal-2:#1F3A3F; --cream:#F4F1EA; --white:#FFF; --amber:#F5A623;
  --amber-ink:#9C6100; --mist:#A8BDC3; --ink:#3D5257; --muted:#5A6E72;
  --paper:#FFFFFF; --wash:#F2F2F2; --charcoal:#1E1E1E; --gray:#6B6B6B;
  --line:rgba(30,30,30,.12); --line-d:rgba(255,255,255,.16);
  --display:'Darker Grotesque',sans-serif; --body:'Hanken Grotesk',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--charcoal);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--charcoal);text-decoration:none}
section[id]{scroll-margin-top:80px}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:pretty}
h1{font-weight:300;font-size:clamp(54px,7.5vw,108px);line-height:.92}
h2{font-weight:300;font-size:clamp(40px,5vw,72px);line-height:.96}
.wrap{max-width:1200px;margin:0 auto}
.wrap.narrow{max-width:880px}
.pad{padding:clamp(72px,9vw,120px) clamp(20px,4vw,44px)}
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
.eyebrow span{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gray)}
.on-dark .eyebrow span{color:var(--mist)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(30px,4vw,44px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:15px 30px;border-radius:999px;min-height:48px;transition:background .25s,color .25s,border-color .25s}
.btn-primary{background:var(--amber);color:var(--charcoal)}
/* Lightening to cream on hover nearly vanished the button on this page's now-white
   body, so it inverts to charcoal instead — same correction landing.html's own
   light bands needed. */
.btn-primary:hover{background:var(--charcoal);color:var(--paper)}
/* A few sections are dark via an inline style rather than the info-hero/#nav
   selectors above (each menu page's closing "book a treatment" band) — inverting
   to charcoal on hover would vanish into an already-charcoal section, so .on-dark
   gets the opposite correction: lighten instead of invert. */
.on-dark .btn-primary:hover{background:var(--paper);color:var(--charcoal)}
.btn-ghost{border:1px solid var(--line);color:var(--charcoal)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber-ink)}
/* Kept as the dedicated dark-surface ghost — still used wherever a dark surface
   remains (.info-hero). rgba(244,241,234,x) was cream-tinted; now neutral white. */
.btn-ghost-d{border:1px solid rgba(255,255,255,.35);color:var(--paper)}
.btn-ghost-d:hover{border-color:var(--amber);color:var(--amber)}
/* Full amber measures 2.03:1 on this page's white body — under the 3:1 floor for
   a focus indicator (the same issue found and fixed on landing.html). Charcoal
   clears it; the on-dark override below (nav, hero) keeps the amber ring, since
   amber reads fine against a dark surface — the failure is specific to white. */
a:focus-visible,button:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 5px rgba(30,30,30,.65)}
.on-dark a:focus-visible,#nav a:focus-visible,#nav button:focus-visible{outline-color:var(--amber);box-shadow:0 0 0 5px rgba(255,255,255,.5)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber);color:var(--charcoal);font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:14px 22px;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ── nav — stays dark throughout, unlike landing.html's (see file header) ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(20px,4vw,44px);background:transparent;transition:background .35s,box-shadow .35s}
#nav.solid{background:rgba(30,30,30,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
#nav .brand{display:flex;align-items:center;gap:14px}
/* The mark is a reversed (cream-on-transparent) lockup now, so it needs no plate.
   The nav is transparent until you scroll, which puts the logo straight onto the
   hero photograph — the drop-shadow is what holds it there against a pale sky. */
#nav .logo{display:flex;align-items:center;justify-content:center;padding:2px 0}
#nav .logo img{height:48px;width:auto;filter:drop-shadow(0 2px 14px rgba(10,20,23,.85)) drop-shadow(0 0 3px rgba(10,20,23,.6))}
/* From the desktop breakpoint up, the mark grows and steps in from the edge.
   It overflows the bar downward onto the hero rather than making the bar
   taller — #mobilemenu is pinned to an 80px nav, so the bar has to stay 80px.
   The negative bottom margin is what keeps its flow height at 48px. */
@media (min-width:941px){
  /* flex:none or the bar squeezes the mark to a sliver once the links crowd it */
  #nav .brand,#nav .logo,#nav .logo img{flex:none}
  /* Both the step-in and the size ramp with the viewport: at 941px there is only
     so much room beside the links, while a wide monitor can carry the full 120px.
     The bar itself stays 80px — the negative bottom margin holds the mark's flow
     height at 48px and lets the rest of it spill onto the hero. */
  #nav .brand{margin-left:clamp(0px,18vw - 120px,280px);transition:margin-left .35s ease}
  #nav .logo img{height:clamp(72px,7vw,120px);margin-bottom:calc(48px - clamp(72px,7vw,120px));
    transition:height .35s ease,margin-bottom .35s ease}
  /* align-items centres the Tibetan on the mark's 48px flow box, which sits near
     the top of the mark once it overflows. Drop it by half the overflow so it
     lines up with what the eye reads as the middle. */
  #nav .tib{transform:translateY(calc((clamp(72px,7vw,120px) - 48px) / 2));transition:transform .35s ease}
  /* Once the bar goes solid the mark condenses into it and returns to the edge,
     so it stops hanging over the content being scrolled past. */
  #nav.solid .brand{margin-left:0}
  #nav.solid .logo img{height:48px;margin-bottom:0}
  #nav.solid .tib{transform:none}
}
@media (prefers-reduced-motion:reduce){
  #nav .brand,#nav .logo img,#nav .tib{transition:none}
}
.tib{font-family:'Noto Serif Tibetan',serif;font-weight:600;font-size:19px;line-height:1.9;color:var(--amber);white-space:nowrap}
@media (max-width:1120px){#nav .tib{display:none}}
#navlinks{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
#navlinks>a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.3px;text-transform:none;color:var(--paper);transition:color .2s}
#navlinks>a:hover{color:var(--amber)}
#navlinks>a[aria-current="page"]{color:var(--amber)}
.nav-book{background:var(--amber);color:var(--charcoal);font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:12px 22px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;transition:background .25s,color .25s}
.nav-book:hover{background:var(--paper)}
#navtoggle{display:none;width:44px;height:44px;flex:none;padding:0;background:none;border:none;cursor:pointer;align-items:center;justify-content:center}
#navtoggle span{position:relative;display:block;width:22px;height:2px;background:var(--paper)}
#navtoggle span::before,#navtoggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--paper);transition:transform .25s}
#navtoggle span::before{top:-7px}#navtoggle span::after{top:7px}
#navtoggle[aria-expanded="true"] span{background:transparent}
#navtoggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
#navtoggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ── Info dropdown (desktop) — accessible pure-CSS disclosure ─────────────── */
.has-sub{position:relative;display:inline-flex;align-items:center}
.sub-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:inherit;font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:.3px;text-transform:none;color:var(--paper);background:none;border:none;cursor:pointer;padding:0;transition:color .2s}
.has-sub.here .sub-toggle{color:var(--amber)}
.sub-toggle:hover,.has-sub:hover .sub-toggle,.has-sub:focus-within .sub-toggle{color:var(--amber)}
.sub-toggle .caret{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
.has-sub:hover::after{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:14px}
/* Dropdown stays dark-themed, matching the nav it hangs off — unlike
   landing.html's own subnav, which turned white because ITS nav did too. */
.subnav{position:absolute;top:calc(100% + 8px);right:0;min-width:236px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px rgba(30,30,30,.18);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;z-index:120}
/* Rooms sits mid-bar, so its panel hangs left rather than right. */
.rooms-sub .subnav{right:auto;left:0}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.subnav a{display:flex;align-items:center;min-height:42px;padding:6px 14px;font-family:var(--display);font-size:17px;font-weight:500;letter-spacing:.2px;text-transform:none;color:var(--charcoal);border-radius:9px;transition:background .15s,color .15s}
.subnav a:hover,.subnav a:focus-visible{background:var(--wash);color:var(--amber-ink)}
.subnav a[aria-current="page"]{color:var(--amber-ink);background:rgba(245,166,35,.1)}

/* ── mobile menu — stays dark, same reasoning as the nav ──────────────────── */
#mobilemenu{display:flex;position:fixed;top:80px;left:0;right:0;z-index:99;background:var(--charcoal);padding:8px clamp(20px,4vw,44px) 28px;box-shadow:0 20px 40px rgba(0,0,0,.4);flex-direction:column;max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateY(-8px);transition:transform .25s ease,opacity .25s ease,visibility 0s linear .2s}
#mobilemenu.open{visibility:visible;opacity:1;transform:translateY(0);transition-delay:0s}
/* ── mobile menu ───────────────────────────────────────────────────────── *
   Seven numbered rows; the two with children collapse into <details>, which
   also supplies the open/close state and keyboard behaviour, so no JS. */
#mobilemenu .nav-book{color:var(--charcoal);justify-content:center;margin:22px 0 2px}
#mobilemenu .nav-book:hover{background:var(--charcoal);color:var(--paper)}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;font-family:var(--display);font-size:28px;font-weight:500;line-height:1.1;color:var(--paper);border-bottom:1px solid rgba(255,255,255,.14);cursor:pointer;list-style:none}
.m-row::-webkit-details-marker{display:none}
.m-row .m-label{display:inline-flex;align-items:center;gap:12px;min-width:0}
.m-row .m-num{flex:none;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:2px;color:var(--mist);opacity:.6}
.m-row[aria-current="page"],.m-group.here>summary{color:var(--amber)}
.m-row[aria-current="page"] .m-num{color:var(--amber);opacity:.8}
/* Chevron points down while the group is shut and up once it is open. */
.m-group>summary .m-label::after{content:"";flex:none;width:9px;height:9px;margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s ease}
.m-group[open]>summary .m-label::after{transform:rotate(-135deg);margin-top:4px}
.m-group[open]>summary{border-bottom-color:transparent}
.m-group[open]{border-bottom:1px solid rgba(255,255,255,.14)}
.m-panel{display:flex;flex-direction:column;padding:0 0 14px}
.m-panel a{display:flex;align-items:center;min-height:50px;font-family:var(--display);font-size:27px;font-weight:500;line-height:1.1;color:var(--mist);transition:color .2s}
.m-panel a:hover,.m-panel a[aria-current="page"]{color:var(--amber)}
/* The last row's rule already separates the footer; a second one just stacks. */
.m-foot{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.m-social{display:flex;gap:12px}
.m-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:var(--mist);transition:color .2s,border-color .2s}
.m-social a:hover{color:var(--amber);border-color:var(--amber)}
.m-social svg{width:17px;height:17px;fill:currentColor;display:block}
.m-legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.m-legal a{font-size:12.5px;font-weight:600;color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.m-legal a:hover{color:var(--amber)}
.m-legal span{font-size:11px;color:var(--mist);opacity:.7}
@media (prefers-reduced-motion:reduce){.m-group>summary .m-label::after{transition:none}}

/* ── info hero — kept dark (charcoal), matching every other converted dark
   surface on the site; see the file header note on why this keeps the single
   reversed logo working with no markup changes ────────────────────────────── */
.info-hero{background:var(--charcoal);padding:clamp(122px,15vh,172px) clamp(20px,4vw,44px) clamp(52px,7vw,86px)}
.info-hero .wrap{max-width:900px;display:flex;flex-direction:column;gap:16px}
.info-hero h1{color:var(--paper)}
.info-hero .lede{margin:0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.7;color:var(--mist);max-width:62ch}
.info-hero .meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--mist)}
.info-hero .meta span{display:inline-flex;align-items:center;gap:8px}
.info-hero .meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}

/* breadcrumb — sits in the dark hero */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--mist)}
.crumb a{color:var(--mist);transition:color .2s}
.crumb a:hover{color:var(--amber)}
.crumb .sep{opacity:.5}

/* ── prose — the page body, now on the white ground ───────────────────────── */
.prose{color:var(--charcoal);font-size:16px;line-height:1.72}
.prose>*+*{margin-top:18px}
.prose h2{color:var(--charcoal);font-size:clamp(30px,3.6vw,46px);line-height:1;margin-top:clamp(40px,5vw,64px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--body);color:var(--charcoal);font-size:18px;font-weight:700;letter-spacing:.2px;margin-top:30px}
.prose h4{font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-top:24px;color:var(--gray)}
.prose p{margin:0}
.prose strong{color:var(--charcoal);font-weight:700}
.prose a{color:var(--amber-ink);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose li{padding-left:4px}
.prose ul li::marker{color:var(--amber)}
.prose ol li::marker{color:var(--amber-ink);font-weight:700}
.prose hr{border:none;border-top:1px solid var(--line);margin:clamp(34px,4vw,52px) 0}

/* two-column layout: content + sticky aside */
.split{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(30px,5vw,72px);align-items:start}
.aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}
.aside .shot{border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#DDD6C8}
.aside .shot img{width:100%;height:100%;object-fit:cover}
@media (max-width:920px){.split{grid-template-columns:1fr}.aside{position:static;order:-1}.aside .shot{aspect-ratio:16/10}}

/* ── note / callout ──────────────────────────────────────────────────────── */
.note{border-left:3px solid var(--amber);background:rgba(245,166,35,.09);padding:16px 20px;border-radius:0 12px 12px 0}
.note p{margin:0;font-size:14.5px;line-height:1.6;color:var(--charcoal)}
.note strong{color:var(--amber-ink)}
.note.teal{border-left-color:var(--charcoal);background:rgba(30,30,30,.05)}
.note.teal strong{color:var(--charcoal)}

/* ── tables ──────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid var(--line)}
.info-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px;background:var(--paper)}
.info-table caption{text-align:left;font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gray);padding:14px 16px 0}
.info-table th,.info-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.info-table thead th{font-family:var(--body);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gray);font-weight:700;background:rgba(30,30,30,.03)}
.info-table tbody tr:last-child td{border-bottom:none}
.info-table tbody tr:hover{background:rgba(245,166,35,.06)}
.info-table td:first-child{font-weight:600;color:var(--charcoal)}
.info-table td .amt{color:var(--amber-ink);font-weight:700;white-space:nowrap}

/* ── card grid (places / festivals) ──────────────────────────────────────── */
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card .shot{aspect-ratio:4/3;overflow:hidden;background:#DDD6C8}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .shot img{transform:scale(1.05)}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-family:var(--display);font-weight:300;font-size:28px;line-height:.98;color:var(--charcoal)}
.card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--charcoal)}
.badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--amber-ink);background:rgba(245,166,35,.15);padding:5px 11px;border-radius:999px}

/* feature rows (festivals) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.feature:nth-child(even) .feat-media{order:2}
.feature .feat-media{border-radius:20px;overflow:hidden;aspect-ratio:5/4;background:#DDD6C8}
.feature .feat-media img{width:100%;height:100%;object-fit:cover}
.feature .feat-body{display:flex;flex-direction:column;gap:14px}
.feature .feat-body p{margin:0;color:var(--charcoal);line-height:1.72}
.feature+.feature{margin-top:clamp(44px,6vw,88px)}
@media (max-width:820px){.feature{grid-template-columns:1fr}.feature .feat-media{order:-1 !important;aspect-ratio:16/10}}

/* ── amenities grid ──────────────────────────────────────────────────────── */
.amenities{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:clamp(14px,2vw,20px)}
.amenity{display:flex;gap:15px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:border-color .25s,transform .25s}
.amenity:hover{border-color:rgba(245,166,35,.6);transform:translateY(-3px)}
.amenity .ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(245,166,35,.14);display:flex;align-items:center;justify-content:center;color:var(--amber-ink)}
.amenity .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.amenity h3{font-family:var(--body);font-size:15.5px;font-weight:700;color:var(--charcoal);margin-bottom:5px}
.amenity p{margin:0;font-size:13.5px;line-height:1.55;color:var(--gray)}

/* stat / quick-reference strip — a dark accent band within the light body,
   same idiom as landing.html's reviews/spaces bands */
.quickref{background:var(--charcoal);color:var(--paper);border-radius:22px;padding:clamp(26px,3.4vw,40px)}
.quickref h2{color:var(--paper);font-size:clamp(28px,3vw,38px);margin-bottom:6px}
.quickref .sub{color:var(--mist);font-size:14px;margin:0 0 20px}
.quickref dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,56px)}
.quickref .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-d)}
.quickref dt{color:var(--mist);font-size:13.5px}
.quickref dd{margin:0;color:var(--paper);font-weight:700;font-size:14.5px;text-align:right}
.quickref dd em{color:var(--amber);font-style:normal}
@media (max-width:640px){.quickref dl{grid-template-columns:1fr}}

/* pill list (simple bullet chips) */
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pills li{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:13.5px;color:var(--charcoal)}
.pills li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.pills.no{--x:1}
.pills.no li::before{background:#c0453b}

/* ── accordion (pet policy parts) ────────────────────────────────────────── */
.acc{border-top:1px solid var(--line)}
.acc-row{border-bottom:1px solid var(--line)}
.acc-q{margin:0}
.acc-trigger{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 0;min-height:60px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:var(--body);font-size:17.5px;font-weight:600;color:var(--charcoal)}
.acc-trigger .lbl{display:flex;align-items:baseline;gap:14px}
.acc-trigger .num{font-family:var(--display);font-weight:500;font-size:20px;color:var(--amber-ink);flex:none}
.acc-trigger:hover{color:var(--amber-ink)}
.acc-trigger .sign{flex:none;font-size:22px;line-height:1;color:var(--amber-ink);transition:transform .25s}
.acc-trigger[aria-expanded="true"] .sign{transform:rotate(45deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.acc-panel.open{grid-template-rows:1fr}
.acc-panel>div{overflow:hidden;visibility:hidden;transition:visibility 0s linear .25s}
.acc-panel.open>div{visibility:visible;transition-delay:0s}
.acc-body{padding:0 34px 26px 0}
.acc-body>*+*{margin-top:16px}
@media (prefers-reduced-motion:reduce){.acc-panel,.acc-panel>div,.acc-trigger .sign{transition:none}}

/* ── gallery ─────────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,34px)}
.filter{font:inherit;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--charcoal);cursor:pointer;min-height:42px;transition:background .2s,color .2s,border-color .2s}
.filter:hover{border-color:var(--amber)}
.filter[aria-pressed="true"]{background:var(--charcoal);color:var(--paper);border-color:var(--charcoal)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
.tile{position:relative;border-radius:14px;overflow:hidden;background:#DDD6C8;aspect-ratio:1;margin:0}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.06)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;font-size:12.5px;font-weight:600;letter-spacing:.4px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .25s}
.tile:hover figcaption,.tile:focus-within figcaption{opacity:1}
.tile[hidden]{display:none}

/* ── footer ──────────────────────────────────────────────────────────────── *
   Dead code: every page now renders the shared #site-footer component instead
   (see site-footer.js) — the plain `footer{...}` selector below no longer
   matches anything live, and the ID selector would out-specificity it even if
   it did. Left unrecoloured, same as every other page carrying this same
   leftover from before the footer consolidation. */
footer{background:var(--teal);padding:clamp(40px,4.5vw,60px) clamp(20px,4vw,44px) 22px;overflow:hidden}
footer .lockup{margin:0 0 30px;text-align:center}
footer .lockup .tib-lg{display:block;font-family:'Noto Serif Tibetan',serif;font-weight:400;font-size:clamp(20px,3vw,38px);line-height:2;color:var(--amber);margin-bottom:6px}
footer .wordmark{display:block;font-family:var(--display);font-weight:300;font-size:clamp(80px,16vw,240px);line-height:.75;color:rgba(244,241,234,.92);margin:0}
footer .cols{display:grid;grid-template-columns:1.05fr 1.05fr 1.05fr .85fr;gap:clamp(22px,2.6vw,40px);padding-top:4px}
footer h2.col-head{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cream);line-height:1;margin:0 0 10px}
footer .links{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
footer .links a{display:inline-flex;align-items:center;min-height:40px;font-size:13px;color:var(--mist);transition:color .2s}
footer .links a:hover{color:var(--amber)}
footer .links a[aria-current="page"]{color:var(--amber)}
footer .contact{display:flex;flex-direction:column;font-size:13.5px;color:var(--mist);line-height:1.7}
footer .contact a{color:var(--mist);display:inline-flex;align-items:center;min-height:40px;transition:color .2s}
footer .contact a:hover{color:var(--amber)}
footer .contact .sub{font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cream);margin:12px 0 4px}
footer address{font-style:normal;line-height:1.7}
footer .social{display:flex;gap:14px}
footer .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,241,234,.25);color:var(--mist);transition:color .2s,border-color .2s}
footer .social a:hover{color:var(--amber);border-color:var(--amber)}
footer .social svg{width:18px;height:18px;fill:currentColor;display:block}
footer .bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;border-top:1px solid rgba(244,241,234,.14);margin-top:clamp(26px,3vw,36px);padding-top:18px;text-align:center}
footer .copy{font-size:13px;color:var(--mist);opacity:.8}
footer .copy a{color:var(--amber)}

/* ── responsive nav ──────────────────────────────────────────────────────── */
@media (max-width:940px){#navlinks,#nav .nav-book{display:none}#navtoggle{display:flex}}
@media (min-width:941px){#mobilemenu{display:none}}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .cols{grid-template-columns:1fr}footer .bottom{flex-direction:column;align-items:flex-start;text-align:left}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}#nav,#mobilemenu,.subnav,.card .shot img,.tile img{transition:none}#mobilemenu{transform:none}}