/* Shared spacing, reading surfaces, and responsive photographic layouts. */
:root { --clay:#a84e24; --clay-dark:#873b19; --reading:rgba(244,239,230,.86); --measure:1180px;--hero-title:clamp(54px,9vw,108px);--compact-hero-title:clamp(46px,7vw,82px);--chapter-title:clamp(36px,5vw,60px); }
html { scroll-padding-top:112px; }
html:has(body[data-range]) { scroll-padding-top:0; } /* range-page CTAs bring the whole card to the top */
/* The scroll lock while a dialog is up goes on <body>, never on <html>. body's overflow propagates to the
   viewport while html's stays visible, so the viewport remains the page's one scroller in both states.
   Locking html instead stopped that propagation and made body a scroll container; iOS Safari kept body
   as the scroller after the lock lifted, and every position:sticky on the page then stuck to a body
   that never scrolls (the flyover stage and the range cards froze at their static positions). */
html.dialog-open body { overflow:hidden; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #ffd9a8; outline-offset:5px; }
:is(button,input,select,textarea,a) { -webkit-tap-highlight-color:transparent; }
button,a,input,select,textarea { touch-action:manipulation; }
input,select,textarea { font-size:16px !important; }
.btn,.barbtn { min-height:44px; font-size:14px; line-height:1.2; letter-spacing:.025em; }
.btn.fill,.barbtn.fill { background:#a84e24; border-color:#a84e24; color:white; }
.btn.fill:hover,.barbtn.fill:hover { background:#873b19; border-color:#873b19; }
.lede,.ov-tag { line-height:1.55; }
.r { opacity:1; transform:none; }
.reveal-ready .r:not(.in) { opacity:0; transform:translateY(22px); }
.r:focus-within,.r:target { opacity:1 !important; transform:none !important; }
.skip-link { position:fixed;top:-100px;left:20px;z-index:9999;padding:14px 20px;background:#f4efe6;color:#14120f;border-radius:8px; }
.skip-link:focus { top:16px; }
.nav-ranges { position:relative; }
.nav-ranges summary { cursor:pointer;list-style:none;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:8px 11px;border-radius:40px;opacity:.88;display:flex;align-items:center;gap:7px;transition:opacity .2s ease,background-color .2s ease; }
.nav-ranges summary:hover,.nav-ranges[open] summary { opacity:1; }
.nav-ranges[open] summary { background:rgba(244,239,230,.1); }
.nav-ranges summary::after { content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform .2s ease; }
.nav-ranges[open] summary::after { transform:translateY(1px) rotate(225deg); }
.nav-ranges summary::-webkit-details-marker { display:none; }
.nav-ranges > div { position:absolute;top:calc(100% + 8px);left:0;min-width:196px;padding:6px;background:rgba(24,20,16,.94);border:1px solid rgba(244,239,230,.16);border-radius:14px;box-shadow:0 22px 48px -18px #000c,inset 0 1px 0 #ffffff12;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); }
.nav-ranges > div a { display:flex;align-items:center;min-height:42px;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:600;letter-spacing:.01em;text-transform:none;opacity:.92; }
.nav-ranges > div a:hover,.nav-ranges > div a:focus-visible { background:rgba(244,239,230,.1);opacity:1; }
dialog.sheet { width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;overflow:auto;padding:14px 20px 22px;padding-top:max(14px,env(safe-area-inset-top)); }
.sheet nav { margin-top:24px; }
.sheet nav > a,.sheet .menu-range-group > summary { display:flex;align-items:center;gap:8px;font-family:Nunito,system-ui,sans-serif;font-weight:600;font-size:clamp(24px,5vh,36px);line-height:1.2;padding:4px 0; }
.sheet .menu-range-group > summary { display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none; }
.sheet .menu-range-group > summary::-webkit-details-marker { display:none; }
.sheet .menu-range-group > summary::after { content:'⌄';font-size:24px;margin-left:auto; }
.sheet .menu-range-group[open] > summary::after { transform:rotate(180deg); }
.sheet nav > a > span,.sheet .menu-range-group > summary > span { flex:0 0 16px;margin-right:0;vertical-align:baseline;font:400 12px var(--mono);color:var(--clay); }
.sheet .menu-ranges { display:grid;grid-template-columns:1fr;gap:4px;border-left:1px solid #ffffff30;padding:4px 0 8px 24px;margin:0 0 8px; }
.sheet .menu-ranges a { font:600 16px/1.4 Nunito,system-ui,sans-serif;min-height:44px;display:flex;align-items:center; }
.sheet .sheet-foot { padding-top:24px; }
dialog::backdrop { background:#080705bd;backdrop-filter:blur(8px); }
dialog.modal { width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;border:0;background:transparent;color:var(--bone);touch-action:none; }   /* a touch on the veil never scrolls the page behind (ui.js guardTouch) */
dialog.modal .veil { background:transparent;backdrop-filter:none; }
.modal .panel { width:min(600px,100%);max-height:92dvh;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;background:#211d17;color:var(--bone); }   /* the end of the panel never chains to the page */
.modal .panel :is(h2,h3) { font-family:Nunito,system-ui,sans-serif !important;font-weight:700; }
.modal .x { width:44px;height:44px; }
.modal .small { font-size:14px;line-height:1.55; }

.modal form { display:grid;gap:16px;margin-top:20px; }
.modal .field { display:grid;gap:7px; }
.modal .field label { font-size:14px;text-transform:none;letter-spacing:0; }
.modal input,.modal select { width:100%;min-height:48px;padding:12px;border:1px solid #776957;border-radius:8px;background:#171410;color:var(--bone); }
.modal .form-two { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.modal .receipt { padding:20px 0;font-size:16px;line-height:1.6; }
.modal .receipt h3 { margin:0 0 10px; }
.modal .receipt p { margin:0 0 12px; }
.modal .receipt .receipt-ref strong { font-family:var(--mono,ui-monospace,monospace);letter-spacing:.08em;font-size:17px; }
/* Buttons after a confirmation sit in one row with even gaps; no stray margins from the form grid. */
.modal .task-links { display:flex;flex-wrap:wrap;gap:12px;margin-top:20px; }
.modal .task-links .btn { margin:0;width:auto; }
.form-error { color:#ffb293; }
.form-note { font-size:14px;color:var(--reading);line-height:1.5; }
.service-state { padding:24px 0;display:grid;justify-items:start;gap:14px; }
.service-state p { color:var(--reading);max-width:54ch;margin:0; }
.photo-panel { position:relative;isolation:isolate;overflow:hidden;min-height:72svh;display:flex;align-items:flex-end;background:#211d17; }
.photo-panel > img,.photo-panel > video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; }
.photo-panel::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0806041a 15%,#08060455 45%,#080604e6); }
.photo-panel .photo-inner { width:min(var(--measure),100%);margin:auto auto 0;padding:clamp(32px,5vw,72px) var(--pad); }
.photo-panel h1,.photo-panel h2 { margin:0;line-height:1.08; }
.photo-panel h1 { font-family:var(--display);font-size:var(--hero-title);font-weight:200; }
.photo-panel h2 { font-family:var(--display);font-size:var(--chapter-title);font-weight:200; }
.photo-panel p { font-size:clamp(16px,1.8vw,21px);max-width:52ch;line-height:1.55;color:var(--reading);margin:18px 0 0; }
.photo-panel .kicker { display:block;margin-bottom:18px; }
.task-links { display:flex;flex-wrap:wrap;gap:12px;margin-top:28px; }
.range-hero { min-height:100svh; } /* full viewport, like the homepage hero */
.range-story .photo-inner,.rangers-section .photo-inner { display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:54px;padding-top:90px;padding-bottom:72px; }
.price-section { border-radius:18px;padding:28px; }
.price-section h3 { font:700 18px/1.4 Nunito,system-ui,sans-serif;margin:0 0 14px; }
.price-section dl { margin:0 0 24px; }
.price-section dl > div { display:grid;grid-template-columns:1fr auto;gap:16px;padding:10px 0;border-bottom:1px solid #ffffff24;font-size:15px; }
.price-section dt,.price-section dd { margin:0; }
.price-section dd { font-weight:700; }
.price-section p { font-size:15px; }
.content-section { width:min(var(--measure),100%);margin:0 auto;padding:76px var(--pad); }
.section-heading { display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:32px; }
.section-heading h2 { font:200 clamp(28px,4vw,44px)/1.1 var(--display);margin:8px 0;letter-spacing:-.02em; }
.section-heading p { margin:8px 0 0;max-width:52ch;font-size:17px;color:var(--reading); }
/* Rental packages: a tall runway with a sticky stage; the track of package cards slides as the page scrolls (relaunch.js packages). */
.pk { position:relative;z-index:5;color:var(--bone); }
.pk-stage { display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);max-width:var(--maxw);margin:0 auto;padding:calc(clamp(46px,6vw,90px) + var(--seam)) var(--pad) calc(clamp(46px,6vw,90px) + var(--seam-up));box-sizing:border-box; }   /* an ordinary section: the seams above and below overlap its edges by --seam-up */
.pk-stage .fhead h2 { font-size:clamp(30px,4vw,50px); }
.pk-stage .fhead p { margin-top:8px; }
/* The track: a horizontal scroller the page scroll drives (relaunch.js packageCarousel); side padding lets the first and last cards sit centred, neighbours peek in dimmed and shrunk. */
.pk-viewport { position:relative;width:min(1100px,100%);--pk-card:min(560px,62vw); }   /* viewport units: the same length for the card and for the side padding */
.pk-track { display:flex;gap:18px;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:10px calc((100% - var(--pk-card)) / 2) 14px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; }
.pk-track::-webkit-scrollbar { display:none; }
.pk-card { flex:0 0 var(--pk-card);scroll-snap-align:center;display:flex;flex-direction:column;will-change:transform,opacity,filter;box-sizing:border-box;padding:clamp(20px,2.6vw,30px);border-radius:18px;background:linear-gradient(145deg,#f4efe625,#f4efe60a),#1714108c;border:1px solid #f4efe63d;border-top-color:#f4efe66b;box-shadow:0 24px 55px -32px #000b;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.pk-tag { display:inline-block;align-self:flex-start;font:800 10px/1 Nunito,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border:1px solid #ffd9a866;border-radius:30px;padding:7px 10px;margin-bottom:12px; }
.pk-card h3 { font:800 clamp(22px,2.6vw,30px)/1.15 Nunito,system-ui,sans-serif;margin:0 0 6px; }
.pk-one { margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--reading); }
.pk-list { margin:0;padding:0;list-style:none;display:grid;gap:7px;align-content:start;flex:1 0 auto; }   /* takes the spare height, so the price rows of shorter cards line up with the longest */
.pk-list li { position:relative;padding-left:22px;font-size:15px;line-height:1.45; }
.pk-list li::before { content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--clay,#a84e24); }
.pk-price { display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:18px 0 0;padding-top:16px;border-top:1px solid #f4efe624; }
.pk-now { font:800 clamp(30px,3.6vw,40px)/1 Nunito,system-ui,sans-serif;color:var(--amber,#e6b271); }
.pk-now.pk-ask { font-size:clamp(20px,2.4vw,26px);line-height:clamp(30px,3.6vw,40px); }   /* a pack with no price yet: the same row height, quieter words */
.pk-was { font:800 clamp(30px,3.6vw,40px)/1 Nunito,system-ui,sans-serif;color:#f4efe673;text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#f4efe6a6; }   /* the struck value, beside the price at the same size */
.pk-was[hidden] { display:none; }
.pk-num { color:var(--amber,#e6b271);font-weight:800; }   /* the numbers that change with the party */
.pk-now small { font:600 13px/1.3 Nunito,system-ui,sans-serif;color:var(--reading);margin-left:4px; }
.pk-cta { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px; }
/* The party-size control under the price: two round steps and a narrow number; the line under it is the per-person figure. */
/* The upgrade on a card: one checkbox row between the price and the party control. */
.pk-up { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font:600 14px/1.35 Nunito,system-ui,sans-serif;color:var(--bone);cursor:pointer; }
.pk-up input { width:18px;height:18px;margin:0;accent-color:var(--clay,#a84e24);cursor:pointer;flex:none; }
.pk-up-note { font:800 12px/1 Nunito,system-ui,sans-serif;letter-spacing:.06em;color:var(--amber,#e6b271); }
.pk-qty { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px; }
.pk-qty-label { font:700 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--reading);margin-right:4px; }
.pk-step { width:34px;height:34px;padding:0;border-radius:50%;border:1px solid #f4efe680;background:#0b0a0880;color:var(--bone);font:400 20px/1 Nunito,system-ui,sans-serif;display:grid;place-items:center;cursor:pointer;transition:background .2s ease,border-color .2s ease; }
.pk-step:hover { background:var(--clay,#a84e24);border-color:var(--clay,#a84e24);color:#fff; }
.pk-step:disabled { opacity:.3;cursor:default;background:#0b0a0880;border-color:#f4efe680;color:var(--bone); }
.pk-n { width:54px;height:34px;padding:0;text-align:center;font:800 16px/1 Nunito,system-ui,sans-serif;color:var(--bone);background:#171410;border:1px solid #f4efe640;border-radius:8px;-moz-appearance:textfield;appearance:textfield; }
.pk-n::-webkit-inner-spin-button,.pk-n::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
.pk-break { flex-basis:100%;font:600 13px/1.3 Nunito,system-ui,sans-serif;color:var(--reading);min-height:1.3em; }
.pk-nav { display:flex;align-items:center;justify-content:center;gap:14px; }
.pk-arrow { width:44px;height:44px;padding:0;display:grid;place-items:center;background:none;border:0;color:var(--bone);opacity:.75;cursor:pointer;transition:opacity .2s ease,color .2s ease,transform .2s ease; }   /* a step on desktop, the cue to slide on a phone */
.pk-arrow svg { width:20px;height:20px;display:block; }
.pk-arrow:hover { color:var(--amber);opacity:1; }
.pk-arrow:active { transform:scale(.9); }
.pk-arrow:disabled { opacity:.22;cursor:default;color:var(--bone); }
.pk-arrow:focus-visible { outline:2px solid var(--amber);outline-offset:2px;border-radius:50%; }
.pk-card.is-aside { cursor:pointer; }   /* relaunch.js: a click brings a side card to the centre */
.pk-dots { display:flex;gap:10px;justify-content:center; }
.pk-dots button { width:10px;height:10px;padding:0;border-radius:50%;border:1px solid #f4efe680;background:transparent;cursor:pointer;transition:background .2s ease,transform .2s ease; }
.pk-dots button[aria-current="true"] { background:var(--clay,#a84e24);border-color:var(--clay,#a84e24);transform:scale(1.25); }
@media (max-width:780px) { .pk-viewport { --pk-card:82vw; } .pk-card { padding:18px; } .pk-list li,.pk-one { font-size:14px; } }
.class-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
/* Classes page: discipline groups under small headings; a hidden group or card is filtered out. */
.class-group { margin-top:8px; }
.class-group .event-month { margin:30px 0 14px; }
.class-catalog .catalog-controls { margin-top:0; }
.class-catalog [data-class-count] { margin:0 0 6px; }
.class-card { display:flex;flex-direction:column;align-items:start;gap:14px;padding:28px;border-radius:18px; }
.class-card h3 { font:700 23px/1.25 Nunito,system-ui,sans-serif;margin:0; }
.class-card p { color:var(--reading);font-size:16px;margin:0;line-height:1.6; }
.class-card .class-actions { display:flex;align-items:center;gap:18px;margin-top:auto;padding-top:12px;flex-wrap:wrap; }
.range-link { display:block;margin-top:22px;font:700 15px/1.4 Nunito,system-ui,sans-serif; }
a.rtab { color:inherit;text-decoration:none; }
.rtab .full { pointer-events:none; }
.bsec-more[inert] { visibility:hidden; }
.bsec-more.open { visibility:visible; }
#events-sec .fsec-in { padding-top:70px;padding-bottom:70px; }
#events-sec .fhead p { font-family:Nunito,system-ui,sans-serif; }
#events-sec .event-row { background:#171410ba;padding:22px;border-radius:12px;margin-bottom:12px; }
.event-row { display:grid;grid-template-columns:70px 1fr auto;align-items:start;gap:24px;padding:28px 0;border-bottom:1px solid #ffffff30; }
.event-date { text-align:center;color:var(--bone);display:grid;line-height:1;gap:8px; }
.event-date b { font-size:32px;letter-spacing:-.04em; }
.event-date span { font-size:13px;text-transform:uppercase;letter-spacing:.08em; }
.event-row h3 { font:700 23px/1.25 Nunito,system-ui,sans-serif;margin:0 0 10px; }
.event-row p { font:400 15px/1.6 Nunito,system-ui,sans-serif;color:var(--reading);margin:8px 0;white-space:pre-line;overflow-wrap:anywhere; }
.event-row .event-meta { color:#e8b168;font-size:14px; }
.event-row details summary { min-height:44px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--reading);list-style:none; }
.event-row details summary::-webkit-details-marker { display:none; }
.event-row details summary::after { content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.75;transition:transform .2s ease; }
.event-row details[open] summary::after { transform:translateY(1px) rotate(225deg); }
.event-row details summary:hover { color:var(--bone); }
.event-row details > p { margin-top:4px; }
.event-row a { align-self:center;font-size:14px;min-height:44px;display:flex;align-items:center; }
.event-month { font:700 24px/1.2 Nunito,system-ui,sans-serif;margin:36px 0 8px; }
.calendar-controls,.catalog-controls { display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:28px 0 18px; }
.calendar-controls label,.catalog-controls label { display:grid;gap:8px;flex:1;min-width:130px;font-size:14px; }
.calendar-controls input,.calendar-controls select,.catalog-controls input,.catalog-controls select { padding:13px 16px;min-height:48px;width:100%;border:1px solid #ffffff40;border-radius:8px;color:var(--bone);background:#211d17; }
.calendar-controls select option,.catalog-controls select option { color:var(--bone);background:#211d17; }
.catalog-controls .search-field { flex:2;min-width:200px;scroll-margin-top:18px; }   /* the corner search button lands it here: a little clear of the site header (the page's scroll padding), well above a phone's keyboard */
.catalog-count { font-size:14px;color:var(--reading);margin:0 0 24px; }
/* The search and filter area is a panel, the site's own (.panel in relaunch.css, as on the waiver page): a lit outer edge,
   a hairline frame set in, a dark plate offset behind, so it stands clear of the page. Laid out as that panel is: a
   title with a live line under it (the count) on the left, a control on the right (the view toggle), the fields beneath.
   Nothing lies behind it to blur, so the panel's backdrop blur is switched off here. */
.catalog-panel { margin:0 11px 40px 0;padding:clamp(22px,3vw,36px);background:var(--glass-2);-webkit-backdrop-filter:none;backdrop-filter:none; }   /* right margin: room for the offset plate inside the page column */
.catalog-panel-head { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
.catalog-panel-head > div:first-child { flex:1 1 0;min-width:0; }   /* on a phone the count wraps under the title, and the toggle keeps its place on the right */
.catalog-panel-head :is(h2,h3) { font:700 22px/1.2 Nunito,system-ui,sans-serif;letter-spacing:0;margin:0;color:var(--bone); }   /* the panel's title is the section's heading on all three pages */
.catalog-panel-foot { max-width:72ch;margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--reading); }   /* a line the page used to carry above the panel, folded into its foot */
.catalog-panel-note { flex:none;max-width:24ch;margin:4px 0 0;font-size:13px;line-height:1.45;text-align:right;color:var(--reading); }
.catalog-panel-head .catalog-count { margin:6px 0 0; }
.catalog-panel-head .catalog-view { align-self:flex-start; }
.catalog-panel :is(.catalog-controls,.calendar-controls) { margin:20px 0 0; }
@media (max-width:780px) { .catalog-panel { padding:20px 18px 22px; } .catalog-panel-head { gap:12px; } .catalog-panel-head :is(h2,h3) { font-size:18px;white-space:nowrap; } .catalog-panel-note { max-width:14ch;font-size:12px; } }   /* the title holds one line beside the toggle on a phone */
/* The grid packs like masonry. Rows are 4px tracks with no gap; shop.js sets each tile in the shortest column, over as
   many tracks as its own height plus the 16px gutter needs, so a short card (no picture) fills the space beside a tall
   one. Tiles keep their natural height (align-self:start), so nothing stretches to match a neighbour. */
.catalog-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:0;grid-auto-rows:4px;align-items:start; }
.catalog-grid > .service-state { grid-column:1 / -1;grid-row-end:span 44; }
/* The card's edge is layered like the waiver panel's: a clear outer line with a lit top; a hairline frame set 6px in
   (::before); and a dark plate offset 6px behind, down and to the right. The plate is two hard shadows, its fill over a
   1px rim, so it follows the rounded corners and costs no element. There is no soft shadow. */
.catalog-item { position:relative;align-self:start;border:1px solid #f4efe647;border-top-color:#f4efe68a;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#211d17;
  box-shadow:inset 0 1px 0 #ffffff14,6px 6px 0 -1px #100e0b,6px 6px 0 0 #f4efe633; }
.catalog-item::before { content:"";position:absolute;inset:6px;z-index:3;pointer-events:none;border:1px solid #f4efe61c;border-radius:7px; }
.catalog-item .catalog-brand { font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#e8b168; }
/* Item names come from the till, most of them in capitals: set them all as small tracked capitals so they read as one list. */
.catalog-item h2 { font:700 15px/1.35 Nunito,system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;margin:0;overflow-wrap:anywhere; }
.catalog-item p { font-size:14px;color:var(--reading);margin:0; }
.catalog-item .catalog-meta { font-size:13px; }
/* The colours and sizes a card stands for, under its type line: small amber labels, the lists wrapping as they need. */
.catalog-item .catalog-variants { display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13px;line-height:1.45; }
.catalog-variants b { margin-right:5px;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e8b168; }
.catalog-item .catalog-desc { font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.catalog-item .catalog-desc.is-open { display:block;overflow:visible; }
/* More sits in the description's own last line, where the text runs out: a patch of the card's colour fades in from
   the left over the end of that line, then the ellipsis, the word, and a chevron. Open, it drops under the text as Less. */
.catalog-item { --desc-bg:#211d17; }
.catalog-desc-wrap { position:relative; }
.catalog-more-text { position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:4px;margin:0;padding:0 0 0 34px;border:0;color:#e8b168;font:700 13.5px/1.5 Nunito,system-ui,sans-serif;cursor:pointer;
  background:linear-gradient(to right,transparent,var(--desc-bg) 28px); }
.catalog-more-text i { font-style:normal;color:var(--reading);font-weight:400; }
.catalog-more-text svg { width:9px;height:9px;flex:none;transition:transform .2s ease; }
.catalog-more-text[aria-expanded="true"] { position:static;padding:0;margin-top:2px;background:none; }
.catalog-more-text[aria-expanded="true"] i { display:none; }
.catalog-more-text[aria-expanded="true"] svg { transform:rotate(180deg); }
.catalog-more-text[hidden] { display:none; }
.catalog-more-text:focus-visible { outline:2px solid #e8b168;outline-offset:4px; }
/* A card with a product picture. The card is white and the picture (a white square with the product inside a margin) sits
   at its top; the details sit below in dark glass. The glass is one gradient in three joined pieces, bottom to top:
     solid from the card's foot to the middle of the description (--solid, which shop.js measures per card from the top of the details);
     easing to 84% by the top of the text, then to 40% across --fade, a thin band of plain white under the picture (kept
     short: it is height the card does not otherwise need);
     and on over the whole picture (.catalog-photo::after), falling away faster than a straight line, so the veil is
     deepest on the white margin at the picture's foot and all but gone by the product.
   The glass seam's sheen lies over the whole card (::after), so the patch behind the in-line More matches the glass around it. */
.catalog-item.has-photo { --fade:16px;--glass:27,23,18;--desc-bg:#1b1712;position:relative;padding:0;gap:0;overflow:hidden;background:#fff;border:1px solid #5c5851;border-top-color:#8a8478; }   /* solid colours, the same tones the plain card's edge comes to: a translucent line let the white ground through as a bright rim round the dark glass */
.catalog-item.has-photo::before { border-color:#7d766b47; }   /* a mid tone, so the inner frame reads over the white picture and over the dark glass alike */
.catalog-item.has-photo::after { content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(160deg,rgba(244,239,230,.13),rgba(244,239,230,.03) 60%); }
.catalog-photo { position:relative;background:#fff;aspect-ratio:4 / 3; }   /* the square picture sits whole inside it, a little smaller */
.catalog-photo img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain; }   /* out of flow: in flow, the square image set the box's minimum height and overrode its proportion */
.catalog-photo::after { content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(118% 104% at 50% 46%,rgba(var(--glass),0) 50%,rgba(var(--glass),.05) 68%,rgba(var(--glass),.13) 86%,rgba(var(--glass),.24) 100%),   /* a vignette closing in on every side */
    linear-gradient(to top,rgba(var(--glass),.4) 0,rgba(var(--glass),.24) 8%,rgba(var(--glass),.13) 18%,rgba(var(--glass),.065) 32%,rgba(var(--glass),.028) 50%,rgba(var(--glass),.009) 72%,rgba(var(--glass),0) 100%); }
.catalog-photo-note { position:absolute;z-index:2;left:15px;top:15px;font:600 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6d6459;background:#ffffffd9;border:1px solid #1c1a1626;border-radius:20px;padding:5px 8px; }
.catalog-item.has-photo .catalog-info { position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:8px;padding:calc(var(--fade) + 2px) 18px 18px;
  background:linear-gradient(to bottom,rgba(var(--glass),.4) 0,rgba(var(--glass),.62) calc(var(--fade) * .5),rgba(var(--glass),.84) var(--fade),rgb(var(--glass)) var(--solid,65%),rgb(var(--glass)) 100%); }   /* stops run from the top, so a taller (stretched) card keeps them */
.catalog-item.has-photo .catalog-price { margin-top:auto; }
/* The view toggle, and the rows view: one sliding row per category. A row is a plain native horizontal scroller, so it
   moves with the finger and a flick runs on under the platform's own momentum. There is no scroll snap: on a phone a
   snap container cuts a flick short to the next stop, and these rows are long lists meant to be flung through. On a phone the track runs to both screen edges so cards slide off the glass; arrows show only where there is a
   mouse. */
.catalog-view { display:inline-flex;align-self:end;border:1px solid #ffffff40;border-radius:8px;overflow:hidden;min-height:48px; }
.catalog-view button { display:grid;place-items:center;width:50px;padding:0;border:0;background:#211d17;color:var(--reading);cursor:pointer; }
.catalog-view svg { width:20px;height:20px;fill:currentColor; }
.catalog-view button + button { border-left:1px solid #ffffff40; }
.catalog-view button[aria-pressed="true"] { background:var(--bone);color:var(--ink); }
.catalog-view button:focus-visible { outline:2px solid #e8b168;outline-offset:-3px; }
/* --gut is the distance from the screen's edge to the page column; a row's track runs out through it to both edges, so
   cards slide the full width of the screen, and starts and ends its cards on the column. --vw is the width of the page
   as drawn, which shop.js measures: 100vw also counts a desktop scrollbar, and a track that wide would make the page
   itself a few pixels wider than the screen. */
.catalog-grid.is-rows { display:block;--gut:calc(max(0px,(var(--vw,100vw) - var(--measure)) / 2) + var(--pad));--soft:36px; }
.catalog-row { margin:0 0 26px; }
.catalog-row-head { display:flex;align-items:baseline;gap:10px;margin:0 0 12px; }
.catalog-row-head h2 { font:700 20px/1.2 Nunito,system-ui,sans-serif;margin:0; }
.catalog-row-head span { font-size:14px;color:var(--reading); }
.catalog-row-all { margin-left:auto;padding:6px 0;border:0;background:none;color:#e8b168;font:700 13.5px/1 Nunito,system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px; }
.catalog-row-wrap { position:relative; }
/* The page column is the window in focus. Either side of it a band runs to the screen's edge (and --soft into the column)
   and blurs what passes behind it and fades it toward the page colour, both ramped in from nothing by a mask: the same
   out-of-focus edge the grid's sheets have, turned sideways. A band has nothing to soften at the end of the row it
   faces (.at-start, .at-end, which shop.js keeps), so there it clears. Two short strips a row; they take no taps.
   A band (here and on the grid's sheets) sits above everything a card paints, its photo note (2), sheen and inner frame
   (3), or those would stay sharp over the blur; only the controls that stand on a band, the arrows and Show more, go above it. */
.catalog-row-wrap::before,.catalog-row-wrap::after { content:"";position:absolute;z-index:5;top:0;bottom:0;width:calc(var(--gut) + var(--soft));pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity .25s ease; }
.catalog-row-wrap::before { left:calc(var(--gut) * -1);background:linear-gradient(to left,#1c1a1600 0,#1c1a16e0 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,#000 70%);mask-image:linear-gradient(to left,transparent 0,#000 70%); }
.catalog-row-wrap::after { right:calc(var(--gut) * -1);background:linear-gradient(to right,#1c1a1600 0,#1c1a16e0 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 70%);mask-image:linear-gradient(to right,transparent 0,#000 70%); }
.catalog-row-wrap.at-start::before,.catalog-row-wrap.at-end::after { opacity:0; }
.catalog-row-track { display:flex;align-items:stretch;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:2px var(--gut) 10px; }   /* out to both edges of the screen, its cards starting and ending on the page column; a scroller clips what it holds, so room at the foot for the cards' offset plates */
.catalog-row-track::-webkit-scrollbar { display:none; }
.catalog-row-track:focus-visible { outline:2px solid #e8b168;outline-offset:4px; }
/* A column is a pictured card, or a stack of cards without a picture. Columns stretch to one height; a stack's cards
   share it evenly, so small cards fill the space beside a tall one and the row ends in a straight line. A card left alone
   in its column keeps its own height. */
.catalog-row-track > .catalog-item,.catalog-row-track > .catalog-stack { flex:0 0 270px; }
.catalog-row-track > .catalog-item { align-self:stretch; }
.catalog-stack { display:flex;flex-direction:column;gap:14px; }
.catalog-stack > .catalog-item { flex:1 1 auto;align-self:stretch; }
.catalog-stack > .catalog-item:only-child { flex:0 0 auto; }
/* In a row every card has one fixed shape, so rows are short, carry no slack, and never change height when more cards
   arrive or a font lands: the picture box is 3:2, the name is held to two lines (and keeps room for two), the brand and
   type lines to one, and the description is left to the grid. Two small cards then stand as tall as one pictured card. */
.catalog-row-track .catalog-photo { aspect-ratio:3 / 2; }
.catalog-row-track .catalog-item h2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.35em); }
.catalog-row-track .catalog-desc-wrap { display:none; }
.catalog-row-track .catalog-meta,.catalog-row-track .catalog-brand { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
/* In a row a card has one fixed shape, so its colours and sizes take the type line's place (the row already names the
   category) and hold to one line. */
.catalog-row-track .catalog-item .catalog-variants { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.catalog-row-track .catalog-variants span + span { margin-left:12px; }
.catalog-row-track .has-variants .catalog-meta { display:none; }
/* A column is as wide as it is told to be, never as wide as its longest unbroken line. A flex item will not go narrower
   than its content unless told it may, and a card's one-line colour list is long: without this the column stretched past
   the screen, and a phone then enlarged the text in so wide a block. Text is held at its own size for the same reason. */
.catalog-row-track > .catalog-item,.catalog-row-track > .catalog-stack,.catalog-stack > .catalog-item { min-width:0; }
.catalog-grid .catalog-item { -webkit-text-size-adjust:100%;text-size-adjust:100%; }
.catalog-row-track .catalog-item { gap:6px;padding:16px; }
.catalog-row-track .catalog-item.has-photo { padding:0;gap:0; }   /* the gap too: left at 6px it showed the white card as a band between the picture and the glass */
.catalog-row-track .catalog-item.has-photo .catalog-info { gap:6px;padding:calc(var(--fade) + 2px) 16px 14px; }
.catalog-row-arrow { display:none;position:absolute;top:150px;z-index:6;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid #ffffff59;background:#171410e6;color:var(--bone);cursor:pointer;place-items:center; }
.catalog-row-arrow svg { width:16px;height:16px; }
.catalog-row-arrow.is-prev { left:-12px; } .catalog-row-arrow.is-prev svg { transform:rotate(180deg); }
.catalog-row-arrow.is-next { right:-12px; }
.catalog-row-arrow:hover { background:var(--clay,#a84e24);border-color:var(--clay,#a84e24); }
@media (hover:hover) and (pointer:fine) { .catalog-row-arrow { display:grid; } .catalog-row-arrow[hidden] { display:none; } }
/* With a mouse a row can be dragged (shop.js): it shows the open hand, the closed one while it is held, and nothing in it
   is selected as it is pulled. */
@media (hover:hover) and (pointer:fine) { .catalog-row-track { cursor:grab; } .catalog-row-track.is-dragging { cursor:grabbing;-webkit-user-select:none;user-select:none; } .catalog-row-track.is-dragging * { cursor:grabbing; } }
@media (max-width:780px) {
 .catalog-grid.is-rows { --soft:22px; }
 .catalog-row-track > .catalog-item,.catalog-row-track > .catalog-stack { flex-basis:min(76vw,290px); }
}
/* The grid view is sheets of paper, each group one sheet, each laid over the foot of the one before (a later sheet paints
   over an earlier one, and is drawn up over it by --under). A sheet is the page's own colour, so nothing is tinted, and
   its top is not cut: over --feather it comes in from clear to solid, so what lies beneath dissolves into it. The last
   of the sheet beneath is already going by then: a band across the foot of every sheet but the last (::after) blurs what
   is behind it and fades it toward the page colour, both ramped from nothing at the band's top by a mask. Nineteen short
   strips of backdrop blur, never one per card.
   The foot of a sheet is never ragged. shop.js carries every column that stops short on under the next sheet with
   fillers (the group's next cards, or its own again), and holds the grid to the sheet's height; the fillers run past
   that and are cut there (clip-path, which leaves the cards' offset plates alone at the sides), out of sight under the
   next sheet. Fillers take no taps and are out of the reading order.
   A group's name sits small and to the left, just under the feather. A group with more to show keeps its Show more on
   the faded row, above the band. A group shown in full (.is-complete) is made taller by the script, so its own cards
   end clear of the band and only repeats run into it: nothing that cannot be brought back is hidden.
   Among the cards, a photograph of the shop floor is a 4:5 tile with the shop's name at its foot, edged and plated like a
   card so the grid keeps one rhythm. */
.catalog-grid.is-flow { display:block;--under:84px;--band:170px;--feather:64px;overflow-anchor:none; }   /* the script keeps the reader's place itself when a sheet grows; the browser's scroll anchoring would second-guess it */
.catalog-zone { position:relative;isolation:isolate;padding:0;background:linear-gradient(to bottom,#1c1a1600 0,#1c1a16 var(--feather)); }   /* no foot of its own: the next sheet is drawn up over the cards themselves. isolate: a card's glass and frame carry a z-index, and without a stacking context of the sheet's own they would show through the sheet laid over them */
.catalog-zone:first-child { background:none; }
.catalog-zone + .catalog-zone { margin-top:calc(var(--under) * -1); }
.catalog-zone:last-child { padding-bottom:8px; }
.catalog-zone:not(:last-child) > .catalog-grid { clip-path:inset(-12px -12px 0 -12px); }
.catalog-grid [data-filler] { pointer-events:none; }
.catalog-zone:not(:last-child)::after { content:"";position:absolute;z-index:5;left:-8px;right:-8px;bottom:0;height:calc(var(--under) + var(--band));pointer-events:none;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:linear-gradient(to bottom,#1c1a1600 0,#1c1a1680 40%,#1c1a16d1 67%,#1c1a16f2 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60%);mask-image:linear-gradient(to bottom,transparent 0,#000 60%); }
.catalog-head { scroll-margin-top:calc(12px - var(--feather));padding:calc(var(--feather) + 4px) 2px 12px; }   /* See all lands on the name, not on the feather above it */
.catalog-zone:first-child .catalog-head { padding-top:2px;scroll-margin-top:8px; }
.catalog-head h2 { font:700 19px/1.2 Nunito,system-ui,sans-serif;margin:0; }
.catalog-more-tile { position:absolute;z-index:6;left:50%;bottom:calc(var(--under) + 20px);transform:translateX(-50%);display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;padding:13px 22px;border:1px solid #f4efe680;border-radius:999px;background:#1c1a16;color:var(--bone);font:700 15px/1.2 Nunito,system-ui,sans-serif;cursor:pointer; }
.catalog-more-tile span { font-weight:400;font-size:13px;color:var(--reading); }
.catalog-more-tile:hover { border-color:#e8b168; }
.catalog-more-tile:focus-visible { outline:2px solid #e8b168;outline-offset:3px; }
.catalog-more-tile[hidden] { display:none; }
.catalog-shot { align-self:start;position:relative;margin:0;aspect-ratio:4 / 5;overflow:hidden;border:1px solid #5c5851;border-top-color:#8a8478;border-radius:12px;background:#211d17;box-shadow:6px 6px 0 -1px #100e0b,6px 6px 0 0 #f4efe633; }
.catalog-shot img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover; }
.catalog-shot figcaption { position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);background:linear-gradient(to top,#100e0be6,#100e0b00); }
/* One round button held in the corner of the grid view once the filters have scrolled away: search. It sits under the
   site header and its menu sheet, and the rows view does without it. */
.catalog-float { position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;flex-direction:column;gap:10px; }
.catalog-float[hidden],.catalog-grid.is-rows ~ .catalog-float { display:none; }
.catalog-float button { display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #f4efe647;border-top-color:#f4efe68a;background:#211d17f5;color:var(--bone);cursor:pointer;box-shadow:inset 0 1px 0 #ffffff14; }
.catalog-float svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.catalog-float button:hover { background:var(--clay,#a84e24);border-color:var(--clay,#a84e24); }
.catalog-float button:focus-visible { outline:2px solid #e8b168;outline-offset:3px; }
.catalog-item .catalog-brand { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.catalog-item .catalog-price { margin-top:auto; }
.catalog-price { font-size:17px;font-weight:700;margin-top:auto;padding-top:4px; }
.catalog-price small { font-size:13px;font-weight:400;color:var(--reading);margin-right:2px; }
.catalog-hero { min-height:52svh; }
.catalog-hero h1,.events-hero h1 { font-size:clamp(46px,7vw,82px); }
.catalog-section { padding-top:24px; }
.events-hero { min-height:58svh; }
.gq-first { padding-top:130px; }
.gq-first h1 { font-size:clamp(38px,6vw,68px); }
.gq-first .lede { max-width:58ch; }
.gq-main .gq-step h3 { font:700 26px/1.25 Nunito,system-ui,sans-serif;letter-spacing:-.02em; }
.gq-step .ghint,.gq-side p { font-size:15px;line-height:1.6; }
.gq-main .field label { font-size:14px;letter-spacing:0;text-transform:none; }
.gq-side { scroll-margin-top:110px; }
.gq-main .gq-pack .nm { font-size:16px; }
.gq-main .gq-pack .one { font-size:14px;line-height:1.5; }
.gq-main .fine { font-size:14px;line-height:1.55; }
.gq-side [data-demo] { white-space:normal;letter-spacing:0;text-transform:none; }
.note-ex { display:block !important;font-size:14px !important;line-height:1.6; }
@media (max-width:1000px) {
 .bar > nav { gap:16px; } .bar .hours-chip { display:none; }
 .range-story .photo-inner,.rangers-section .photo-inner { gap:28px; }
 .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:780px) {
 html { scroll-padding-top:92px; }
 .photo-panel .photo-inner { padding:44px var(--pad); }
 .photo-panel p { font-size:17px; }
 .range-story .photo-inner,.rangers-section .photo-inner { grid-template-columns:1fr;padding-top:50px;gap:28px; }
 .range-story .photo-inner > div:first-child,.rangers-section .photo-inner > div:first-child { max-width:50ch; }
 .price-section { padding:22px; }
 .price-section dl > div { font-size:15px; }
 .content-section { padding:48px var(--pad); }
 .section-heading { display:block;margin-bottom:24px; }
 .section-heading > a { display:inline-block;margin-top:16px; }
 .class-list { grid-template-columns:1fr; }
 .class-card { padding:24px; }
 .task-links { gap:10px; }
 .task-links .btn { padding:12px 16px;font-size:14px; }
 .tabs-sec .tabs { height:auto; }
 .tabs-sec .rtab { position:sticky;top:72px;min-height:62svh;height:62svh;max-height:none;margin-top:0;border-radius:0; }
 .rtab .full { opacity:1;transform:none; }
 .bsec .bsec-btn { padding-top:26px;padding-bottom:26px; }
 .bsec .bh { font-size:clamp(25px,6.5vw,34px); }
 .bsec .bsub { font-size:15px; }
 .bstat { display:none; }
 .event-row { grid-template-columns:46px minmax(0,1fr);gap:16px;padding:24px 0; }
 .event-row > a { grid-column:2;padding:0; }
 .event-row h3 { font-size:20px; }
 .event-date b { font-size:28px; }
 .event-month { font-size:22px; }
 .catalog-hero { min-height:310px; }
 .catalog-hero .photo-inner { padding-top:130px;padding-bottom:28px; }
 .events-hero { min-height:390px; }
 .catalog-section { padding-top:8px; }
 .catalog-controls { gap:14px;margin-top:20px; }
 .catalog-controls .search-field { min-width:100%; }
 .catalog-grid { grid-template-columns:1fr; }
 .catalog-item.has-photo { padding:0; }
 .gq-first { padding-top:116px; }
 .gq-first .chapter-meta { margin-top:16px; }
 .gq-first h1 { font-size:clamp(34px,9vw,46px); }
 .gq-first .lede { font-size:16px; }
 .gq-first .k { font-size:12px; }
 .gq-step { padding:24px 18px; }
 .gq-packs { grid-template-columns:1fr 1fr; }
}
@media (max-width:380px) { .modal .form-two { grid-template-columns:1fr; } .gq-packs { grid-template-columns:1fr; } }
html.a11y-motion .r,html.a11y-motion .rtab { opacity:1 !important;transform:none !important;filter:none !important; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .r,.reveal-ready .r:not(.in) { opacity:1;transform:none; } * { animation:none !important;transition:none !important; } }

/* Private booking starts with the setting, followed directly by the form. */
.groups-hero { min-height:65svh; }
.groups-hero h1 { font-size:clamp(44px,6.5vw,80px);max-width:16ch; }
.groups-hero .photo-inner { padding-top:140px; }
.gq-first { padding-top:48px; }
.gq-est { border:1px solid #ffffff30 !important;border-radius:14px !important;box-shadow:none !important; }
.gq-est::before,.gq-est::after { display:none !important; }
.gq-est .kicker { display:block; }
.gq-side [data-demo] { display:block;border:0;padding:0;margin-top:12px;font:400 14px/1.55 Nunito,system-ui,sans-serif; }
.gq-main .gq-pack .one { display:block; }
@media (max-width:640px) {
 .groups-hero { min-height:65svh; }
 .gq .gq-packs { grid-template-columns:1fr; }
 .gq .gq-pack-main { padding:18px; }
 .gq .gq-pack .opts { padding:0 18px 18px; }
 .gq-first { padding-top:34px; }
}

dialog.a11y-panel { margin:0;left:auto;top:auto;max-height:90dvh;overflow:auto; }
.a11y-panel button,.a11y-panel .row { min-height:44px; }

.modal .panel { border:1px solid #ffffff40;border-radius:14px;box-shadow:0 20px 60px #0005; }
.modal .panel::before,.modal .panel::after { display:none; }

/* User review: clear type on glass seams, expressive type on photo chapters. */
.bsec .bsec-btn .bh { font-weight:300;letter-spacing:-.02em;line-height:1.12; }
.bsec .bsec-btn .bh em { font-style:normal;font-weight:800; }
:is(body[data-range] #classes,#classes-sec) .section-heading h2 { font-family:var(--display);font-weight:200;line-height:1.1;letter-spacing:-.02em; }
.esec h2,.nextband .big { font-weight:300; }
.btn.fill,body.dark .btn.fill,body.dark .cream .btn.fill { background:var(--bone);border-color:var(--bone);color:var(--ink); }
.btn.fill:hover,body.dark .btn.fill:hover,body.dark .cream .btn.fill:hover { background:#fff;border-color:#fff;color:var(--ink); }
body.dark .bar .barbtn.fill,body.dark .bar.solid .barbtn.fill { background:transparent;border-color:#ffffff70;color:var(--bone); }
body.dark .bar .barbtn.fill:hover { background:#ffffff18; }
body.dark .booking-modal button[type=submit],body.dark .gq-modal [data-send] { background:var(--clay);border-color:var(--clay);color:#fff; }
body.dark .booking-modal button[type=submit]:hover,body.dark .gq-modal [data-send]:hover { background:var(--clay-dark);border-color:var(--clay-dark);color:#fff; }
/* Original Rangers card, restored as a readable section after each shop. */
.photo-chapter { position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:72svh;background:#211d17; }
.photo-chapter > img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; }
.photo-chapter::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#08060466,#08060480); }
#classes-sec > img { filter:saturate(.9) brightness(.85); }
#classes-sec::after { background:linear-gradient(180deg,#08060466,#08060480); }
.rangers-roster { color:var(--bone);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px; }
.class-card,.rangers-roster,.price-section,.bowtech-card { background:linear-gradient(145deg,#f4efe625,#f4efe60a),#1714108c;border:1px solid #f4efe63d;border-top-color:#f4efe66b;box-shadow:0 24px 55px -32px #000b,inset 0 1px 0 #ffffff0d;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .class-card,.rangers-roster,.price-section,.bowtech-card { background:#242019ed; }
}
/* Rangers: portrait-and-name cards. The photo is the point: a large circle with a white ring, the name
   under it, the title small beneath. A lone Ranger sits centred across the panel. */
.rangers-roster .rgr { display:grid;justify-items:center;align-content:start;text-align:center;padding:14px 8px 12px; }
.rangers-roster .rgr:only-child { grid-column:1 / -1;width:100%;max-width:320px;margin:0 auto; }
.rangers-roster .por { width:140px;height:140px;border-radius:50%;border:1px dashed #ffd9a88c;background:repeating-linear-gradient(-45deg,#f4efe617 0 8px,#f4efe605 8px 16px);display:grid;place-items:center;font:400 10px var(--mono);letter-spacing:.1em;color:#f4efe6a6; }
/* A Ranger's portrait: the square photo shown as a circle. */
.rangers-roster img.por { display:block;object-fit:cover;border:3px solid #fff;background:#1a1611;padding:0;box-shadow:0 10px 28px #0009; }
.rangers-roster .rgr > div { margin-top:14px;min-width:0;max-width:100%; }
.rangers-roster .rnote { grid-column:1 / -1;margin:0;padding:6px 2px;font:400 15px/1.6 Nunito,system-ui,sans-serif;color:var(--reading); }
.rangers-roster .rn { display:block;font:800 22px/1.2 Nunito,system-ui,sans-serif;color:#fff;overflow-wrap:anywhere; }
.rangers-roster .rr { display:block;font:700 10.5px/1.5 Nunito,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:7px 0 0; }
.rangers-roster .ra,.rangers-roster .svc-note { font:400 14px/1.55 Nunito,system-ui,sans-serif;color:var(--reading);margin-top:8px; }
.range-hero > .range-video { opacity:0;transition:opacity .45s ease; }
.range-hero > .range-video.video-live { opacity:1; }
.video-toggle { position:absolute;z-index:3;top:92px;left:22px;min-height:44px;padding:10px 16px;border:1px solid #ffffff60;border-radius:999px;background:#17141085;backdrop-filter:blur(8px);color:#fff;font:600 12px/1.3 Nunito,system-ui,sans-serif;cursor:pointer; }
@media(max-width:480px) {
 .rangers-roster { gap:10px;padding:10px; }
 .rangers-roster .rgr { padding:10px 4px 8px; }
 .rangers-roster .por { width:104px;height:104px;font-size:9px; }
 .rangers-roster img.por { border-width:2px; }
 .rangers-roster .rn { font-size:18px; }
 .rangers-roster .rr { font-size:10px;letter-spacing:.14em; }
}

/* Follow-up: tighter display-type rhythm and consistent clear hero actions. */
.photo-panel h1,.photo-panel h2,.hero .ov-name,.rtab .full h2,#classes-sec .fhead h2 { line-height:1; }
.photo-panel .kicker { margin-bottom:8px; }
.photo-panel p { margin-top:8px; }
.range-hero .photo-inner { padding-bottom:32px; }
.range-hero .task-links { margin-top:22px; }
.hero .ov-row { margin-top:8px !important; }
.rtab .full .ov-tag { margin-top:6px; }
/* The range cards' subheader carries the fees (data.js card), so it shows on phones too, in the compact style the old fee line used. */
@media (max-width:780px) { .rtab .full .ov-tag { display:block;margin-top:8px;max-width:none;font-size:12.5px;line-height:1.4;color:var(--amber);text-shadow:0 1px 8px rgba(0,0,0,.8); } }
:is(body[data-range] #classes,#classes-sec) .section-heading h2 { margin:4px 0;line-height:1; }
:is(body[data-range] #classes,#classes-sec) .section-heading p { margin-top:4px; }
#classes-sec .section-heading .kicker { display:block;margin-bottom:8px; }
#classes-sec .class-intro { grid-column:1/-1; }
#classes-sec .class-card p { max-width:64ch; }
#classes-sec .class-card > .kicker { font-size:11px; }
#events-sec .fhead h2 { font-family:var(--display);font-weight:400;line-height:1; }
.hero .ov-copy { left:50%;right:auto;width:min(var(--measure),100%);transform:translateX(-50%); }
.hero .home-hero-title { font-size:var(--hero-title);white-space:nowrap; }
.hero .home-hero-title span { display:inline; }
:is(body[data-range] #classes,#classes-sec) .section-heading h2,#events-sec .fhead h2 { font-size:var(--chapter-title);margin:0; }
:is(body[data-range] #classes,#classes-sec) .section-heading p,#events-sec .fhead p { margin-top:8px; }
.groups-hero h1,.catalog-hero h1,.events-hero h1 { font-size:var(--compact-hero-title); }
@media(max-width:600px) {
 .hero .home-hero-title { white-space:normal; }
 .hero .home-hero-title span { display:block; }
}
@media(max-width:780px) {
 html.a11y-motion .tabs-sec .rtab { position:relative;top:auto; }
}
@media(max-width:780px) and (prefers-reduced-motion:reduce) {
 .tabs-sec .rtab { position:relative;top:auto;transform:none !important;filter:none !important; }
}
.bar .barbtn.btn { display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:14px;line-height:1.2;letter-spacing:.025em;text-transform:uppercase;padding:12px 18px; }
body.dark :is(.hero,.photo-panel) .btn.fill { background:transparent;border-color:rgba(244,239,230,.55);color:var(--bone); }
body.dark :is(.hero,.photo-panel) .btn.fill:hover { background:#f4efe61a;border-color:var(--bone); }

/* Shared chapter rhythm and compact-page hero proportions. */
:is(.fhead,.section-heading) .kicker { display:block;margin-bottom:8px; }
:is(.fhead,.section-heading) h2 { margin:0; }
:is(.fhead,.section-heading) p,.bsec-btn .bsub { margin-top:8px; }
:is(.groups-hero,.events-hero,.catalog-hero) { min-height:65svh; }
:is(.groups-hero,.events-hero,.catalog-hero) .photo-inner {
 padding-top:140px;
 padding-bottom:clamp(32px,5vw,72px);
}
@media(max-width:720px) {
 :is(.groups-hero,.events-hero,.catalog-hero) .photo-inner { padding-bottom:44px; }
}

/* The archery service card shares the shop's full-bleed photograph. */
.bowtech-card { margin:36px auto 0;padding:clamp(22px,3vw,36px);max-width:760px;border-radius:18px;scroll-margin-top:110px; }
.photo-panel .bowtech-card h2 { font:700 clamp(28px,4vw,42px)/1.15 Nunito,system-ui,sans-serif; }
.photo-panel .bowtech-card p { font-size:16px; }
.bowtech-services { display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:26px 0; }
.bowtech-services > div { padding-top:16px;border-top:1px solid #f4efe633; }
.bowtech-services dt { font-weight:800;font-size:16px; }
.bowtech-services dd { margin:7px 0 0;font-size:14px;color:var(--reading);line-height:1.55; }
.photo-panel .bowtech-card .bowtech-note { font-size:14px;line-height:1.6;max-width:65ch; }
.bowtech-card .btn { margin-top:22px; }
body[data-range=archery] .range-shop .photo-inner { padding-top:90px; }
@media(max-width:600px){.bowtech-services{grid-template-columns:1fr;gap:16px}.bowtech-card{margin-top:28px;padding:22px}.photo-panel .bowtech-card h2{font-size:28px}}
/* Visually hidden but present in the DOM. Used for the spam-trap "website" field in
   the class reservation form; the only other definition was scoped to .bow-modal. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0; }

/* ---- Range hero cover (desktop). The hero fills the viewport like the homepage
   hero and stays put while the story panel slides over it; chrome.js heroCover()
   drives the sink (scale + shade), hides covered content from focus, and pauses
   the covered video. Reduced motion falls back to plain flow. ---- */
/* Range pages, every width: every photo card spans at least the viewport and the hero holds
   while the story panel covers it. Every card wears a vignette, so one section meets the next across darkened
   edges rather than a bright edge against a dark one, and the words read over the pictures. */
body[data-range] .photo-panel,body[data-range] .photo-chapter { min-height:100svh; }
body[data-range] .photo-panel::after { background:linear-gradient(180deg,#08060480 0%,#0806041a 16%,#08060455 45%,#080604e6 100%),radial-gradient(120% 100% at 50% 50%,#08060400 52%,#08060473 100%); }
body[data-range] .photo-chapter::after { background:linear-gradient(180deg,#080604a6,#08060466 18%,#08060480 100%),radial-gradient(120% 100% at 50% 50%,#08060400 52%,#08060473 100%); }
html:not(.a11y-motion) .range-hero { position:sticky;top:0;height:100svh;z-index:0;transform-origin:50% 100%;will-change:transform; }
html:not(.a11y-motion) .range-hero ~ * { position:relative;z-index:1; }
/* the shotgun page's hero holds no cover: the folio's sheets follow it in flow */
html:not(.a11y-motion) .range-hero.no-cover { position:relative;top:auto;height:auto;transform:none !important;will-change:auto; }
.range-hero.no-cover .hero-shade,.range-hero.no-cover + * { box-shadow:none; }
.range-hero.no-cover .hero-shade { display:none; }
/* A later section marked data-cover holds the same way (none does now); one taller than the screen holds with its
   bottom at the screen's bottom (chrome.js sets its top). */
html:not(.a11y-motion) .range-hero ~ [data-cover] { position:sticky;top:0;transform-origin:50% 100%;will-change:transform; }
html:not(.a11y-motion) .range-hero + *,html:not(.a11y-motion) [data-cover] + * { box-shadow:0 -18px 60px -18px rgba(0,0,0,.65); }
.range-hero .hero-shade,[data-cover] .hero-shade { position:absolute;inset:0;z-index:2;background:#0e0b08;opacity:0;pointer-events:none; }
.range-hero.is-covered .photo-inner,.range-hero.is-covered .video-toggle,[data-cover].is-covered .photo-inner,[data-cover].is-covered .video-toggle { visibility:hidden; }
@media (prefers-reduced-motion:reduce) {
  .range-hero,[data-cover] { position:relative;top:auto !important;height:auto;transform:none !important; }
  .range-hero .hero-shade,[data-cover] .hero-shade { display:none; }
}

/* ---- Picture-forward cards on the classes page (the shop has its own pictured card above). The image bleeds to
   the card edge; padding on the card stays as it was for the text below. ---- */
.class-card.photo-card .class-photo { width:calc(100% + 56px);margin:-28px -28px 4px;aspect-ratio:16/9;object-fit:cover;border-radius:18px 18px 0 0;background:#2a241c; }
@media (max-width:780px) {
  .class-card.photo-card .class-photo { width:calc(100% + 48px);margin:-24px -24px 4px; }
}

/* ---- Homepage hero: one line under the title. On desktop the title keeps the lower
   position it had above the chips (it clears the logo in the video's opening), so the
   bottom padding gives up the room the line needs. ---- */
.home-hero-tag { margin:12px 0 0;font-size:15px;max-width:60ch; }
/* relaunch-glass.css pads the hero copy with 52px plus the seam overlap (!important); the
   tag line is 35px, so 17px keeps the title exactly where the chips left it. */
@media (min-width:781px) { .hero .ov-copy:has(.home-hero-tag) { padding-bottom:calc(17px + var(--seam-up,18px)) !important; } }

/* ---- Homepage classes: the featured card runs the full width with the flyer beside
   the copy; the other two are the regular picture cards. ---- */
.class-list-home .class-card.featured { grid-column:1 / -1;display:grid;grid-template-columns:minmax(240px,34%) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center; }
.class-list-home .class-card.featured .class-photo.flyer { width:100%;height:auto;aspect-ratio:900 / 1125;object-fit:cover;margin:0;border-radius:14px;background:#1a1611; }
.class-list-home .class-card.featured .class-body { display:flex;flex-direction:column;align-items:start;gap:14px; }
.class-list-home .class-card.featured .class-body .class-actions { margin-top:6px; }
.class-more { margin:22px 0 0; }
@media (max-width:780px) {
  .class-list-home .class-card.featured { grid-template-columns:1fr; }
  .class-list-home .class-card.featured .class-photo.flyer { max-width:360px; }
}

/* ---- iOS status zone. Safari 26 paints the status bar with a colour sampled from the fixed
   element at the top edge and ignores theme-color. A translucent, blurred bar samples as
   see-through, so scrolled content showed above the bar. On iOS the bar is an opaque colour
   without blur, so the sampled colour is solid and the zone reads as part of the bar.
   -webkit-touch-callout exists only on iOS. ---- */
@supports (-webkit-touch-callout:none) {
  /* iOS. Safari paints the status zone with one flat colour taken from the fixed element at
     the top edge; it never blurs there. A blurred bar with no background-colour of its own
     makes WebKit fall back to the page's base colour, so the zone is painted the site's dark
     tone while the bar keeps its frosted glass. The bar keeps the glass theme's gradient and
     blur; only the blend mode is pinned so the sampler sees a normal layer. */
  .bar,body.dark .bar,.bar.solid,body.dark .bar.solid { mix-blend-mode:normal;color:var(--bone); }
  /* The film-grain overlay (body::before in journey.css) is a full-viewport fixed
     pseudo-element. WebKit's status-zone sampler hit-tests the top edge, reports a
     pseudo-element as its parent, walks up from <body>, finds no fixed container, and
     falls back to painting page content into the zone. Verified on-device: the grain as
     a pseudo-element reproduces the artifact; without it the bar's colour extends. */
  body::before { display:none; }
}

/* ---- Reservation dialog on phones: the panel spans the whole viewport instead of floating
   as a bottom sheet with empty space above it; it scrolls inside. Extra bottom padding keeps
   the last line clear of Safari's floating address pill. Desktop keeps the centred card. ---- */
@media (max-width:719px) {
  .modal { align-items:stretch; }
  .modal .panel { height:100dvh;max-height:none;border-radius:0;margin-bottom:0;padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
}

/* ---- One control height on every form and filter bar. Text inputs and selects share 48px;
   selects give up the native (macOS) look so padding and height apply, with one drawn chevron.
   Textareas, checkboxes, and radios keep their own sizing. ---- */
.field input:not([type=checkbox]):not([type=radio]),.field select,
.modal input:not([type=checkbox]):not([type=radio]),.modal select,
.calendar-controls input,.calendar-controls select,.catalog-controls input,.catalog-controls select { box-sizing:border-box;height:48px;min-height:48px;padding-top:0;padding-bottom:0;line-height:1.2; }
.field select,.modal select,.calendar-controls select,.catalog-controls select {
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b7a68f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:12px 8px !important;
  padding-right:40px;
}
input[type=search] { -webkit-appearance:none;appearance:none; }
input[type=search]::-webkit-search-decoration { -webkit-appearance:none; }

/* ---- Status text under a form's button: one margin, one size, one error colour, and reserved
   height so the form does not jump. Progress ("Loading dates…", "Saving…", "Sending…") shows on
   the button itself. ---- */
.form-status { display:block;margin:14px 0 0;min-height:24px;font-size:14px;line-height:1.5;color:var(--reading); }
.form-status.form-error { color:#ffb293; }

/* ---- Required and invalid fields. A required field's label carries an amber mark and each form
   says so once; a field that failed validation takes the error colour until it is edited. ---- */
.field.required > label::after { content:" *";color:var(--amber,#e8b168); }
.req-mark { color:var(--amber,#e8b168); }
.form-legend { font-size:13px;color:var(--reading);margin:0; }
.form-legend::before { content:"* ";color:var(--amber,#e8b168); }
.is-invalid:is(input,select,textarea) { border-color:#ffb293 !important;box-shadow:0 0 0 3px rgba(255,178,147,.18) !important; }
input[type=checkbox].is-invalid { outline:2px solid #ffb293;outline-offset:2px; }
[data-acts].is-invalid { outline:1px solid #ffb293;outline-offset:8px;border-radius:12px; }

/* ---- Site map inside "New to shooting": the full width of the panel, rounded, with a quiet edge. ---- */
/* New-to-shooting steps: the number sits in the line with its heading. */
.step h4 { display:flex;align-items:baseline;gap:12px; }
.step h4 .sn { display:inline;font-size:26px;line-height:1;margin:0; }
/* Site map. Desktop shows the whole map; phones show it zoomed inside a sideways scroller that opens on
   the parking lot (relaunch.js), with a hint that fades once the reader pans. */
.site-map { margin:clamp(22px,3vw,34px) 0 0; }
.site-map-wrap { position:relative; }
.site-map-pan { overflow-x:auto;overflow-y:hidden;border-radius:14px;border:1px solid rgba(244,239,230,.18);background:#1a1611;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none; }
.site-map-pan::-webkit-scrollbar { display:none; }
.site-map img { display:block;width:100%;height:auto;border:0;border-radius:0; }
.site-map .pan-hint { display:none; }
.site-map figcaption { margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--reading); }
@media (max-width:700px) {
  .site-map img { height:300px;width:auto;max-width:none; }
  .folio .site-map img { height:min(70svh,560px); }   /* the course map zoomed further: the station labels read */
  .site-map .pan-hint { display:block;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);pointer-events:none;white-space:nowrap;font:700 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);background:#0000008c;border:1px solid #f4efe63a;border-radius:30px;padding:9px 13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity .4s ease; }
  .site-map-wrap.panned .pan-hint { opacity:0; }
}

/* ---- Homepage closing card: "Come shoot." in the display face, the second word heavy. ---- */
.knock-h { font-family:var(--display);font-weight:200;font-size:clamp(60px,15vw,170px);line-height:1.02;letter-spacing:-.03em; }

/* ---- Folio (shotgun page): the four disciplines as four thin tabs stacked below the hero, square strips with the
   discipline's name in white and a chevron. Open (.is-open, fly.js), a tab's body pops down beneath it: a sub-hero
   with its picture and its name, the explainer in a band with a hairline top and bottom, then its pictures; the tabs
   below slide down; a Close pill fixed at the bottom right of the screen while the tab is open, in the video toggle's
   style, folds it back. The sporting clays sub-hero is the traverse, still until its
   play button (chrome.js) and skimming under a drag once played; its pictures are the course map as the homepage's
   site map (.site-map, further down) and the station grid. The other tabs' grids are two columns at every width. ---- */
/* the fees: a black strip between the hero and the folio's first tab, three columns (targets, ammo, a rental) each with a small drawing beside its figures, white rules between and above (the folio's first strip draws the one below); three across from 1120px, stacked below that, each row about two strips tall */
.fee-strip { display:grid;grid-template-columns:1fr;background:#000;border-top:1px solid #fff;color:var(--bone); }
.fee-title { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.fee-col { display:grid;grid-template-columns:84px 1fr;align-items:center;gap:16px;min-height:88px;padding:10px var(--pad); }
.fee-col + .fee-col { border-top:1px solid #fff; }
.fee-art { position:relative;height:68px;display:grid;place-items:center; }
.fee-art img { display:block;max-height:100%;max-width:100%;width:auto;object-fit:contain; }
.fee-targets .fee-art img { max-height:58px; }
.fee-ammo .fee-art img.fee-box { height:62px;margin-right:18px; }
.fee-ammo .fee-art img.fee-shells { position:absolute;right:-4px;bottom:-6px;height:36px;transform:rotate(-14deg); }
.fee-rental .fee-art img { height:70px; }
.fee-name { margin:0 0 7px;font:600 12px/1 Nunito,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff; }
.fee-prices { display:flex;flex-wrap:wrap;gap:4px 20px;margin:0; }
.fee-prices div { display:flex;flex-direction:column-reverse; }
.fee-prices dt,.fee-per,.fee-note { margin:0;font:400 13px/1.35 Nunito,system-ui,sans-serif;color:var(--reading); }
.fee-prices dd,.fee-big { margin:0;font:600 20px/1.15 Nunito,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#fff; }
.fee-big .fee-per { display:inline;margin-left:4px; }
.fee-note { margin-top:2px;max-width:34ch; }
.fee-note b { display:block;font-weight:600;color:var(--bone); }
@media (min-width:1120px) { .fee-strip { grid-template-columns:repeat(3,1fr); } .fee-col { padding:10px clamp(16px,2vw,28px); } .fee-col + .fee-col { border-top:0;border-left:1px solid #fff; } }
.folio { position:relative;background:#0a0806; }
.folio-sheet { position:relative;background:#0a0806;isolation:isolate; }
.folio-head { position:relative;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:#000;border-top:1px solid #fff;cursor:pointer; }   /* black strips, white rules; the first strip's rule is the line under the fees */
.folio-sheet:last-of-type .folio-head { border-bottom:1px solid #fff; }   /* last-of-type: the Close pill is the folio's last child */
.folio-sheet.is-open .folio-head { cursor:default; }
.folio-name { margin:0;font:600 14px/1 Nunito,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff; }
.folio-open { margin:0 calc(var(--pad) * -1 + 4px) 0 0;padding:0;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer; }
.folio-open:hover { color:var(--amber,#e8b168); }
.folio-open:focus-visible { outline:2px solid #e8b168;outline-offset:-4px; }
/* the chevrons are drawn, not pictures: two edges of a small square, turned */
.folio-open .chev { position:relative;display:block;width:22px;height:22px;transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.folio-open .chev::before { content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-72%) rotate(45deg); }
.folio-open[aria-expanded="true"] .chev { transform:rotate(180deg); }
.folio-body { overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease; }   /* fly.js sets the real height, so the fold moves the same both ways */
.folio-body.open { opacity:1; }
.folio-sub { position:relative;height:min(64svh,640px);height:min(64lvh,640px);overflow:hidden;isolation:isolate; }
.folio-stage { position:absolute;inset:0; }
.folio-stage > img,.folio-stage > video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.folio-stage > .range-video { opacity:0;transition:opacity .45s ease; }
.folio-stage > .range-video.video-live { opacity:1; }
.folio-stage::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#08060466 0%,#0806041a 30%,#08060480 70%,#080604d9 100%),radial-gradient(120% 100% at 50% 50%,#08060400 52%,#08060473 100%); }
.folio-stage > video:not([data-video-state="playing"]):not([data-video-state="loading"]) ~ .video-toggle { top:50%;left:50%;transform:translate(-50%,-50%);min-height:56px;padding:15px 26px;font-size:14px;letter-spacing:.06em;text-transform:uppercase; }
.folio-title { position:absolute;z-index:2;left:0;right:0;bottom:0;width:min(var(--measure),100%);margin:0 auto;padding:0 calc(var(--pad) + 96px) 30px var(--pad);pointer-events:none; }   /* room on the right for the Close */
.folio-h { display:block;font-family:var(--display);font-weight:200;font-size:var(--chapter-title);line-height:1;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 10px #000d,0 6px 30px #000b; }
/* the explainer: a band under the sub-hero with a hairline top and bottom, the shop's field style */
.folio-lead { margin:0;padding:clamp(18px,2.6vw,28px) var(--pad);border-top:1px solid #ffffff40;border-bottom:1px solid #ffffff40;background:#211d17; }
.folio-lead p { width:min(var(--maxw),100%);margin:0 auto;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--bone);text-wrap:pretty; }
.folio .feed-grid { --gap:2px;background:#000;padding:var(--gap) 0; }
.folio .feed-card { border-radius:0; }
.folio .feed-grid-two,.folio .feed-grid-two .feed-card.is-wide { grid-column:auto; }
.folio .feed-grid-two { grid-template-columns:1fr 1fr; }
.folio .feed-grid-two .feed-card.is-wide { grid-column:1 / -1;aspect-ratio:3 / 2;align-self:auto; }
.folio .site-map { margin:0;transform:scale(.82);transform-origin:50% 0;opacity:.4;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s ease; }
.folio-body.open .site-map { transform:none;opacity:1; }
.folio .site-map-pan { border-radius:0;border:0;background:#000; }
/* ---- Pull-ups (shotgun page): the fees and the classes come up from the foot of the screen as sheets on the hero's
   pills, over a veil; the site's dialog helper opens and closes them. ---- */
dialog.pullup[open] { position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--bone);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden; }   /* the whole screen, so no browser's own centring of a dialog moves the sheet: the panel sits at its foot */
dialog.pullup::backdrop { background:#08060499;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); }
dialog.pullup[open] .pullup-in { animation:pullup .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pullup { from { transform:translateY(100%); } to { transform:none; } }
.pullup-in { box-sizing:border-box;width:min(100%,900px);max-height:min(88svh,88dvh);margin:0 auto;padding:18px var(--pad) calc(30px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;background:#0e0b08;box-shadow:0 -30px 80px -20px #000f;overflow:auto;overscroll-behavior:contain; }
.pullup-top { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px; }
.pullup-top h2 { margin:0;font-family:var(--display);font-weight:200;font-size:clamp(28px,4vw,40px);line-height:1; }
.pullup .price-section { margin:0;width:auto;max-width:none; }
.pullup .pullup-sub { margin:0 0 16px;color:var(--reading); }
.pullup .class-list { margin:0; }
@media (prefers-reduced-motion:reduce) { dialog.pullup[open] .pullup-in { animation:none; } }
html.a11y-motion dialog.pullup[open] .pullup-in { animation:none; }
/* the close: one pill for the folio in the video toggle's style, fixed at the bottom right of the screen while a tab is open, so it rides along the scroll; it sits outside every sheet so no stacking context of theirs can put the grid over it */
.folio-close { position:fixed;z-index:120;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));min-height:40px;padding:9px 16px;border:1px solid #ffffff60;border-radius:999px;background:#17141085;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:600 12px/1.3 Nunito,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer; }
.folio-close[hidden] { display:none; }
.folio-close:hover { border-color:#e8b168; }
.folio-close:focus-visible { outline:2px solid #e8b168;outline-offset:3px; }
.folio-sheet.no-anim .folio-body,.folio-sheet.no-anim .folio-open .chev { transition:none; }
html.a11y-motion .folio-body,html.a11y-motion .folio .site-map,html.a11y-motion .folio-open .chev { transition:none; }
@media (prefers-reduced-motion:reduce) { .folio-body,.folio .site-map,.folio-open .chev { transition:none; } }
.feed-grid { display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--gap); }
.feed-card { position:relative;margin:0;overflow:hidden;border-radius:8px;background:#1a1611;aspect-ratio:3 / 4;isolation:isolate; }
.feed-card.is-wide { grid-column:1 / -1;aspect-ratio:3 / 2; }
.feed-card.is-desk { display:none; }
.feed-card > img,.feed-card > video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
/* a thin white station label at the foot of each card over a soft gradient from below; the map has none */
.feed-card::after { content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(to top,#08060480,#08060400); }
.feed-tag { position:absolute;z-index:1;left:12px;right:12px;bottom:11px;margin:0;color:#fff;font:300 13px/1.25 Nunito,system-ui,sans-serif;letter-spacing:.03em;text-shadow:0 1px 6px #0009;pointer-events:none; }
.feed-tag i { font-style:normal;opacity:.78; }
.feed-tag i::before { content:" \00b7 "; }
/* the page's pause control for a clip sits in the card's corner and shows for a pointer over the card or for keyboard focus */
.feed-card .video-toggle { top:10px;right:10px;left:auto;min-height:34px;padding:7px 12px;font-size:11px;opacity:0;transition:opacity .2s ease; }
.feed-card:hover .video-toggle,.feed-card .video-toggle:focus-visible { opacity:1; }
@media (min-width:760px) { .feed-grid { grid-template-columns:repeat(3,1fr); } .feed-card.is-desk { display:block; } .feed-card.is-wide { grid-column:span 2;aspect-ratio:auto;align-self:stretch; } .feed-tag { left:14px;bottom:13px;font-size:14px; } }
@media (prefers-reduced-motion:reduce) { .feed-card .video-toggle { transition:none; } }
/* the explainer tiles among the photographs: a note (a heading, a paragraph or a list, a tip) and a lead panel (a picture with its caption below) in the cards' ground; a band runs the full width, and on a phone every tile does */
.feed-card.is-note,.feed-card.is-lead { grid-column:1 / -1;aspect-ratio:auto;background:#1a1611;color:var(--bone); }
.feed-card.is-note::after,.feed-card.is-lead::after { display:none; }
.feed-card.is-note { padding:clamp(18px,2.4vw,26px) clamp(16px,2vw,22px); }
.feed-card.is-lead figcaption { padding:14px clamp(16px,2vw,22px) 20px; }
.note-h { margin:0 0 8px;font:600 15px/1.3 Nunito,system-ui,sans-serif;letter-spacing:.01em;color:#fff; }
.feed-card.is-note p,.feed-card.is-lead p,.note-list li { margin:0;font:400 15px/1.55 Nunito,system-ui,sans-serif;color:var(--reading);text-wrap:pretty; }
.feed-card.is-note p + p { margin-top:10px; }
.note-list { margin:0;padding:0;list-style:none;display:grid;gap:6px; }
.note-list b { font-weight:600;color:#fff; }
.feed-card.is-note p.note-tip { margin-top:12px;padding-top:12px;border-top:1px solid #ffffff26; }
.lead-pic { aspect-ratio:1151 / 372;overflow:hidden; }   /* the panels keep their painted labels: never cropped */
.lead-pic img { display:block;width:100%;height:100%;object-fit:cover; }
@media (min-width:760px) { .feed-card.is-note,.feed-card.is-lead { grid-column:auto; } .feed-card.is-band { grid-column:1 / -1; } .feed-card.is-note p,.feed-card.is-lead p,.note-list li { font-size:15.5px; } }
@media (min-width:760px) { .feed-card.is-diagram { min-height:clamp(280px,32vw,480px); } .feed-card.is-two { grid-column:span 2; } .folio .feed-card.is-full { grid-column:1 / -1;aspect-ratio:3 / 2;align-self:auto; } }   /* a diagram two columns wide beside its note: the row keeps enough height for the picture, which crops from its own point (object-position on the img); a note marked two takes two columns; a full photograph runs the row's width at 3:2 */

/* ---- Sporting clays flyover (shotgun page). A tall scroller holds a sticky full-height stage; the
   canvas scrubs a frame sequence by scroll position (fly.js). The poster shows until frames paint.
   Reduced motion, data saver, or a load failure collapse it to one still with the caption. ---- */
.fly { position:relative;height:400svh;background:#0a0806; }
/* The stage follows the dynamic viewport so it reaches the bottom once a mobile browser bar collapses; svh is the fallback. */
.fly-stage { position:sticky;top:0;height:100svh;height:100lvh;overflow:hidden;background:#0a0806;isolation:isolate; }
/* The stage is the large viewport, so a phone's toolbar collapsing never reframes the frames. The progress bar and the cue sit under the heading, out of the toolbar's reach; the hint and the chef badge sit low on the locked section, clear of the seam that overlaps its bottom edge. */
.fly-stage > img,.fly-stage > picture > img,.fly-canvas { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; }
.fly-canvas { opacity:0;transition:opacity .4s ease; }
.fly.is-ready .fly-canvas { opacity:1; }
.fly-vignette { position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#080604a6 0%,#0806044d 24%,transparent 42%),linear-gradient(0deg,#080604d1 0%,#08060466 22%,transparent 40%); }
.fly-copy { position:absolute;left:0;right:0;top:0;width:min(var(--measure),100%);margin:0 auto;padding:calc(92px + env(safe-area-inset-top,0px)) var(--pad) 0;pointer-events:none; }
.fly-copy .kicker { display:block;margin-bottom:8px; }
.fly-copy h2 { font-family:var(--display);font-size:var(--chapter-title);font-weight:200;line-height:1;margin:0;max-width:16ch;text-shadow:0 2px 10px #000d,0 6px 30px #000b; }
.fly-copy p { font-size:clamp(16px,1.8vw,21px);max-width:44ch;line-height:1.55;color:var(--reading);margin:10px 0 0;text-shadow:0 2px 10px #000c; }
.fly-cue { display:inline-block;margin:12px 0 0;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;font:400 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--bone);opacity:.7;animation:bob 2.4s ease-in-out infinite;transition:opacity .3s ease; }   /* the same hint as the hero's: small, tracked, bobbing */
.fly-cue.is-hidden { opacity:0; }
.fly-hud { margin:18px 0 0;width:min(100%,300px);pointer-events:none; }   /* inside .fly-copy, under the heading */
.fly-progress { height:3px;border-radius:3px;background:#f4efe647;overflow:hidden; }
.fly-progress > div { height:100%;width:0;background:var(--clay,#a84e24);border-radius:3px; }
.fly.is-static { height:auto; }
.fly.is-static .fly-stage { position:relative; }
.fly.is-static .fly-cue,.fly.is-static .fly-progress,.fly.is-static .fly-canvas { display:none; }
@media (prefers-reduced-motion:reduce) { .fly-cue,.fly-canvas { transition:none; } .fly-cue { animation:none; } }
@media (max-width:780px) { .fly-copy { padding-top:calc(80px + env(safe-area-inset-top,0px)); } .fly-copy p { font-size:16px;max-width:34ch; } .fly-h2-line { display:block; } }

/* ---- Menu card (homepage bar and grill; the section is data-fly-video). The printed menu sits in .fly-sheet inside
   the stage, from just under the heading (--fly-card-top, which fly.js measures) to the bottom. The card carries no
   backdrop blur and no mask; its long sheet fades into a gradient instead. A click expands it to the full width of the
   screen from the top (.fly-zoom, a scrolling dialog fly.js moves to <body>). ---- */
.fly-shade { position:absolute;inset:0;pointer-events:none;background:#080604;opacity:0;transition:opacity .6s ease; }
.fly-hud { transition:opacity .35s ease; }
.fly.is-revealing .fly-hud { opacity:0; }
.fly.is-revealing .fly-shade,.fly.is-static .fly-shade { opacity:.5; }
/* Still (data-fly-still): the stage is one photograph, pinned for most of a screen of scroll so there is time with the
   menu before the page moves on (fly.js has it up by a fifth of that). On arrival .is-revealing darkens the picture,
   then the menu sheet pops up from just below its place with a small overshoot. The heading sits above the shade, so
   only the picture darkens and the words stay in the foreground. .is-instant is the same end state with nothing to
   watch, for a reader coming back up from below. */
.fly[data-fly-still] { height:180svh;height:calc(100lvh + 80svh); }
.fly[data-fly-still].is-static { height:auto; }
.fly[data-fly-still] .fly-copy { z-index:2; }
.fly[data-fly-still].is-revealing .fly-shade,.fly[data-fly-still].is-static .fly-shade { opacity:.62; }
.fly-sheet { position:absolute;z-index:1;left:0;right:0;top:var(--fly-card-top,38%);bottom:0;pointer-events:none;opacity:0;transform:translateY(56px) scale(.94);transform-origin:50% 100%;visibility:hidden;transition:opacity .25s ease,transform .3s ease,visibility 0s .3s; }
.fly.is-revealing .fly-sheet,.fly.is-static .fly-sheet { opacity:1;transform:none;visibility:visible;transition:opacity .3s ease .3s,transform .6s cubic-bezier(.2,.9,.3,1.3) .3s,visibility 0s; }   /* .3s: the darkening leads, the pop follows */
.fly.is-instant .fly-sheet,.fly.is-instant .fly-shade,.fly.is-static .fly-sheet,.fly.is-static .fly-shade { transition:none; }
.fly.is-instant .chef-badge { animation:none;opacity:1;transform:none; }
@media (prefers-reduced-motion:reduce) { .fly-sheet { transition:none; } }
.fly-card { --w:min(92vw,760px);position:relative;display:block;width:var(--w);height:100%;margin:0 auto;box-sizing:border-box;padding:10px 10px 0;overflow:hidden;border-radius:18px 18px 0 0;pointer-events:auto;
  background:linear-gradient(145deg,#f4efe625,#f4efe60a),#171410eb;border:1px solid #f4efe63d;border-top-color:#f4efe66b;border-bottom:0;box-shadow:0 40px 80px -30px #000f;-webkit-tap-highlight-color:transparent; }
.fly-card::after { content:"";position:absolute;left:0;right:0;top:50%;bottom:0;pointer-events:none;background:linear-gradient(to bottom,#08060400,#080604f2); }   /* the long sheet fades out from halfway down */
.fly-card:focus-visible { outline:3px solid var(--clay,#a84e24);outline-offset:6px; }
.fly-card picture,.fly-card img { display:block;width:100%;height:auto;border-radius:10px 10px 0 0; }
.fly-card-hint { position:absolute;z-index:1;left:50%;bottom:calc(30px + var(--seam-up,0px) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);white-space:nowrap;pointer-events:none;font:700 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f4edd9;background:#0b1f17d9;border:1px solid #c99b4388;border-radius:30px;padding:10px 14px; }
/* The head chef's badge: a round portrait with her name, pinned to the menu's top-left corner, popping in just after the sheet. */
.chef-badge { --w:min(92vw,760px);position:absolute;z-index:1;left:max(8px,calc(50% - var(--w) / 2 - 26px));top:12px;margin:0;width:104px;display:grid;justify-items:center;gap:8px;text-align:center;visibility:hidden;opacity:0;transform:scale(.6);pointer-events:none; }
.chef-badge img { display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 10px 28px #000b;background:#1a1611; }
.chef-badge figcaption { font:700 10px/1.35 Nunito,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f4edd9;background:#0b1f17d9;border:1px solid #c99b4388;border-radius:12px;padding:6px 9px; }
.chef-badge figcaption b { display:block;font:800 14px/1.2 Nunito,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;margin-bottom:2px; }
.fly.is-revealing .chef-badge,.fly.is-static .chef-badge { visibility:visible;animation:chef-pop .55s cubic-bezier(.2,.9,.3,1.2) .8s both; }   /* after the menu's own pop */
@keyframes chef-pop { from { opacity:0;transform:scale(.6); } 70% { opacity:1;transform:scale(1.06); } to { opacity:1;transform:scale(1); } }
/* Phones: the badge sits bottom-left, over the faded lower part of the sheet, clear of the heading and the hint. */
@media (max-width:780px) { .chef-badge { width:84px;left:12px;top:auto;bottom:calc(78px + var(--seam-up,0px) + env(safe-area-inset-bottom,0px)); } .chef-badge img { width:76px;height:76px; } }
@media (prefers-reduced-motion:reduce) { .fly.is-revealing .chef-badge,.fly.is-static .chef-badge { animation:none;opacity:1;transform:none; } }
html.a11y-motion .fly.is-revealing .chef-badge,html.a11y-motion .fly.is-static .chef-badge { opacity:1;transform:none; }   /* the tools switch every animation off, and the badge's pop is what made it visible */
.fly-card:hover + .fly-card-hint,.fly-card:focus-visible + .fly-card-hint { background:var(--clay,#a84e24);border-color:var(--clay,#a84e24);color:#fff; }
/* The expanded menu: the sheet at the full width of the screen in a scrolling layer above everything, opened at its top. */
.fly-zoom { position:fixed;inset:0;z-index:260;background:#0a0806;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;cursor:zoom-out;touch-action:pan-x pan-y; }
.fly-card { cursor:zoom-in; }
/* The sheet's width carries the zoom level (fly.js); a pinch in progress scales it with a transform first. */
.fly-zoom-sheet { width:100%;transform-origin:0 0; }
.fly-zoom[hidden] { display:none; }
.fly-zoom picture,.fly-zoom img { display:block;width:100%;height:auto; }
/* Close: an X only. fly.js re-pins it to the visual viewport while the page is pinch-zoomed (inline left/top/transform), so it stays on screen at its normal size. */
.fly-zoom-x { position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:2;width:44px;height:44px;padding:0;display:grid;place-items:center;color:#f4efe6;background:#0b1f17d9;border:1px solid #c99b4388;border-radius:50%;cursor:pointer;transform-origin:0 0; }
.fly-zoom-x svg { width:18px;height:18px;display:block; }
.fly-zoom-x:hover { background:var(--clay,#a84e24);border-color:var(--clay,#a84e24);color:#fff; }
.fly-zoom-x:focus-visible { outline:3px solid #fff;outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .fly-shade,.fly-hud { transition:none; } }

/* The ladder's top two rungs, page titles and chapter titles, are Playfair Display (--display): a light serif at size, mixed case, the cinematic and travel-editorial voice. The heavy word inside one of those is the italic, in the same white: the italic is the contrast. Section titles, seam heads, the menu sheet, and the footer wordmark stay Nunito 200 with the heavy word at 800, upright. */
.ov-name,.disp,.fhead h2,.rtab .full h2,.photo-panel h1,.photo-panel h2,.fly-copy h2,.knock-h { font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:1.02; }
.ov-name em,.disp em,.fhead h2 em,.rtab .full h2 em,.photo-panel h1 em,.photo-panel h2 em,.fly-copy h2 em,.knock-h em { font-family:inherit;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;color:inherit;font-size:1em;line-height:inherit;vertical-align:baseline; }
.bsec .bsec-btn .bh,.esec h2,.nextband .big,.section-heading h2,.sheet nav a,.foot .fw,.duo h3,.h2 { font-family:var(--sans);text-transform:none; }
.bh em,.esec h2 em,.section-heading h2 em,.sheet nav a em,.foot .fw em,.duo h3 em,.h2 em { font-style:normal;font-weight:800; }
:is(body[data-range] #classes,#classes-sec) .section-heading h2 { font-family:var(--display);text-transform:none;letter-spacing:-.01em; }   /* the classes heading is a chapter */
.fly-copy h2 .fly-h2-line { white-space:nowrap; }   /* the heavy half of a flyover title stays on one line; phones stack it (display:block above) */
.bsec-link { text-decoration:none;color:inherit; }   /* a seam that is only a link */