/* Circle Bar B Stables - site stylesheet (Lantern design system)
   Base: the locked prototype's stylesheet; production additions are marked "prod". */

:root{
  --day:#F4EFE3; --noon:#FDFDF9; --gold:#F0D9A6; --golddeep:#E8B45F;
  --dusk:#3B3E5A; --dusk2:#2E3047; --dusk3:#262842;
  --night:#1B1A26; --deep:#141320; --pit:#100F19;
  --ink:#2B2735; --inkmute:#6B6478;
  --cream:#EFE9DC; --creammute:#B7B1C4;
  --lantern:#E8A84C; --lanternlt:#F3CD8F;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Albert Sans",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);color:var(--ink);background:var(--day);line-height:1.66;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
/* prod: collapse guard - a first-child margin-top (ttable, tlog, legs...) must not
   collapse through .wrap and push a zero-padding section down, exposing a bar of
   the body's day-cream background above it (Leon's trails-B report, 2026-08-25) */
section>.wrap::before,section>.wrap::after{content:"";display:table}
h1,h2,h3{font-family:var(--serif);font-weight:450;letter-spacing:-.005em;line-height:1.08}
h2{font-size:clamp(32px,4.4vw,54px);font-optical-sizing:auto;margin:14px 0 18px}
h2 em,h1 em{font-style:italic;font-weight:400}
.lead{font-size:19px;max-width:58ch;color:var(--inkmute)}
section{padding:110px 0}
.tk{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tk b{font-weight:800;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase}
.tk i{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--inkmute)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;padding:14px 27px;border:1px solid var(--ink);border-radius:6px;font-weight:700;font-size:15.5px;text-decoration:none;transition:background .2s ease,color .2s ease}
.btn.solid{background:var(--ink);color:var(--day)}
.btn.solid:hover{background:#443E52}
.btn.ghost:hover{background:var(--ink);color:var(--day)}
.rise{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rise.seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* prod: skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--lantern);color:var(--deep);padding:10px 16px;border-radius:0 0 8px 0;font-weight:800;text-decoration:none}
.skip:focus{left:0}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:40;padding:18px 0;transition:background .35s ease,padding .3s ease,box-shadow .35s ease}
header.stuck{background:rgba(20,19,32,.95);padding:10px 0;box-shadow:0 2px 24px rgba(16,15,25,.4)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav .logo-dark{height:46px;width:auto;transition:height .3s ease}
header.stuck .logo-dark{display:none}
/* scrolled header carries the white wordmark, not the orange key mark (Patrick, 2026-10-06) */
header.stuck .logo-light{display:block;height:38px}
.nav ul{display:flex;gap:26px;list-style:none}
.nav ul a{text-decoration:none;font-weight:600;font-size:14.5px}
header.stuck .nav>ul>li>a{color:var(--cream)}
.nav ul a:hover{color:var(--lantern)}
.call-btn{display:inline-block;padding:10px 20px;background:var(--ink);color:var(--day);border-radius:6px;border:0;font-weight:700;font-size:14px;text-decoration:none}
header.stuck .call-btn{background:var(--lantern);color:var(--deep)}
.burger{display:none;width:44px;height:40px;border:1px solid rgba(43,39,53,.3);border-radius:8px;background:rgba(244,239,227,.75);cursor:pointer;padding:0}
header.stuck .burger{background:rgba(20,19,32,.7);border-color:rgba(239,233,220,.35)}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform .3s ease,opacity .25s ease,background .3s ease}
header.stuck .burger span{background:var(--cream)}
.burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
header.open-menu{background:var(--deep)}
.mobile-menu{display:none;background:var(--deep);max-height:calc(100vh - 70px);overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;padding:10px 0 18px;display:block}
.mobile-menu li a{display:block;padding:11px 4px;text-decoration:none;font-weight:700;font-size:17px;color:var(--cream);border-bottom:1px solid rgba(239,233,220,.14)}
.mobile-menu li.grp{padding:16px 4px 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lanternlt);font-weight:800}
.mobile-menu li.sub a{font-weight:500;font-size:15.5px;padding-left:16px;color:#D9D3C6}
@media(max-width:900px){
  .nav ul,.nav .call-btn{display:none}
  .burger{display:block}
}

/* prod: dropdown nav */
.nav>ul>li{position:relative}
.nav li.has-sub>a::after{content:"\25BE";font-size:9px;margin-left:6px;opacity:.7;vertical-align:2px}
.nav .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);background:rgba(20,19,32,.97);border:1px solid rgba(232,168,76,.35);border-radius:12px;padding:10px;min-width:224px;display:block;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;box-shadow:0 14px 40px rgba(16,15,25,.45);z-index:50}
.nav .sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav li.has-sub:hover .sub,.nav li.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(10px)}
.nav .sub li{display:block}
.nav .sub a{display:block;padding:9px 14px;border-radius:8px;color:var(--cream);text-shadow:none;font-size:14px;font-weight:600}
.nav .sub a:hover{background:rgba(232,168,76,.14);color:var(--lanternlt)}

/* the homepage hero is a photo wall, so its header borrows the scrolled treatment from the top */
.nav .logo-light{display:none;height:46px;width:auto;transition:height .3s ease}
.theme-hero header:not(.stuck) .logo-dark{display:none}
.theme-hero header:not(.stuck) .logo-light{display:block}
.theme-hero header:not(.stuck) .nav>ul>li>a{color:var(--cream);text-shadow:0 1px 10px rgba(14,13,22,.92),0 0 3px rgba(14,13,22,.8)}
.theme-hero header:not(.stuck) .logo-light{filter:drop-shadow(0 1px 8px rgba(14,13,22,.85))}
.theme-hero header:not(.stuck) .call-btn{background:var(--lantern);color:var(--deep)}
.theme-hero header:not(.stuck) .burger{background:rgba(20,19,32,.55);border-color:rgba(239,233,220,.4)}
.theme-hero header:not(.stuck) .burger span{background:var(--cream)}
/* prod: pages that open on a dark band take the light treatment without the shadows */
.theme-dark header:not(.stuck) .logo-dark{display:none}
.theme-dark header:not(.stuck) .logo-light{display:block}
.theme-dark header:not(.stuck) .nav>ul>li>a{color:var(--cream)}
.theme-dark header:not(.stuck) .call-btn{background:var(--lantern);color:var(--deep)}
.theme-dark header:not(.stuck) .burger{background:rgba(20,19,32,.55);border-color:rgba(239,233,220,.4)}
.theme-dark header:not(.stuck) .burger span{background:var(--cream)}

/* the wall: an image-grid ground in Lantern's palette */
.hero-m{position:relative;padding:0;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--pit)}
.wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:8px;padding:8px;z-index:0}
.wall .t{position:relative;overflow:hidden}
.wall .t img{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
/* the stat rail crosses this one tile, and its middle band is the pale ocean */
.wall .t6 img{filter:brightness(.68)}
.wall .t1{grid-area:1/1/3/3}.wall .t2{grid-area:1/3/2/5}.wall .t3{grid-area:1/5/3/7}
.wall .t4{grid-area:2/3/4/5}.wall .t5{grid-area:3/1/5/3}.wall .t6{grid-area:4/3/5/5}.wall .t7{grid-area:3/5/5/7}
@keyframes lkb{from{transform:scale(1)}to{transform:scale(1.07) translate(1.2%,-1%)}}
.wall .kb img{animation:lkb 16s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.wall .kb img{animation:none}}
.hero-m .veil{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 52% 52% at 50% 54%,rgba(14,13,22,.74) 0%,rgba(14,13,22,.6) 32%,rgba(14,13,22,.32) 60%,rgba(14,13,22,0) 84%)}
/* top shade so the menu reads over the photo wall on load, before the header sticks (Patrick, 2026-10-06) */
.hero-m::after{content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,13,22,.72) 0%,rgba(14,13,22,.5) 42%,rgba(14,13,22,.18) 76%,rgba(14,13,22,0) 100%)}
.hero-m .inner{position:relative;z-index:2;text-align:center;max-width:920px;padding:150px 28px 56px}
.hero-m .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lanternlt);margin-bottom:22px;text-shadow:0 1px 10px rgba(14,13,22,.9),0 0 3px rgba(14,13,22,.8)}
.hero-m .eyebrow span{color:rgba(243,205,143,.5);margin:0 6px}
.hero-m h1{font-size:clamp(44px,7.2vw,98px);max-width:none;color:#FBF8F1;text-wrap:balance;text-shadow:0 2px 34px rgba(14,13,22,.8),0 1px 6px rgba(14,13,22,.55)}
.hero-m h1 em{color:var(--lanternlt)}
.hero-m .lead{margin:26px auto 0;max-width:54ch;color:#E4DED2;text-shadow:0 1px 12px rgba(14,13,22,.92),0 0 3px rgba(14,13,22,.7)}
.hero-m .lead strong{color:#FBF8F1;font-weight:600}
.hero-m .btnrow{justify-content:center}
.hero-m .btn{border-color:#F2EDE1;color:#FBF8F1}
.hero-m .btn.solid{background:var(--lantern);border-color:var(--lantern);color:var(--deep)}
.hero-m .btn.solid:hover{background:var(--lanternlt)}
.hero-m .btn.ghost:hover{background:#FBF8F1;color:var(--ink)}
.hero-m .marks{margin-top:52px;display:flex;justify-content:center;gap:12px 32px;flex-wrap:wrap}
.hero-m .marks span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#C8C2B6;text-shadow:0 1px 10px rgba(14,13,22,.92),0 0 3px rgba(14,13,22,.8)}
.hero-m .marks b{color:#FBF8F1;font-weight:700}
@media(max-width:768px){
  .hero-m .veil{background:radial-gradient(ellipse 128% 60% at 50% 60%,rgba(14,13,22,.86) 0%,rgba(14,13,22,.74) 34%,rgba(14,13,22,.5) 62%,rgba(14,13,22,.14) 84%,rgba(14,13,22,0) 97%)}
  .wall{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
  .wall .t1{grid-area:1/1/2/2}.wall .t2{grid-area:1/2/2/3}.wall .t3{grid-area:2/1/3/2}
  .wall .t4{grid-area:2/2/3/3}.wall .t5{grid-area:3/1/4/2}.wall .t6{grid-area:3/2/4/3}
  .wall .t7{grid-area:4/1/5/3}
  .hero-m .inner{padding:118px 24px 44px}
  .hero-m .eyebrow{font-size:9.5px;letter-spacing:.1em;margin-bottom:16px}
  .hero-m .eyebrow span{margin:0 4px}
  .hero-m .marks{margin-top:34px;gap:8px 20px}
}

/* band helpers */
.b-noon{background:linear-gradient(180deg,var(--day) 0,var(--noon) 220px)}
.b-mid{background:linear-gradient(180deg,var(--noon) 0,var(--gold) 260px)}
.b-dusk{background:linear-gradient(180deg,var(--dusk) 0,var(--dusk2) 100%);color:var(--cream)}
.b-dusk2{background:linear-gradient(180deg,var(--dusk2) 0,var(--dusk3) 100%);color:var(--cream)}
.b-night{background:linear-gradient(180deg,var(--dusk3) 0,var(--night) 300px);color:var(--cream)}
.b-deep{background:linear-gradient(180deg,var(--night) 0,var(--deep) 260px);color:var(--cream)}
.b-dusk .lead,.b-dusk2 .lead,.b-night .lead,.b-deep .lead{color:var(--creammute)}
.b-dusk .tk i,.b-dusk2 .tk i,.b-night .tk i,.b-deep .tk i{color:var(--creammute)}
.b-dusk .tk b,.b-dusk2 .tk b,.b-night .tk b,.b-deep .tk b{color:var(--lanternlt)}
.b-dusk h2,.b-dusk2 h2,.b-night h2,.b-deep h2{color:#FBF8F1}
.b-dusk h1,.b-dusk2 h1,.b-night h1,.b-deep h1{color:#FBF8F1}

/* prod: inner-page opening section */
.page-head{padding:172px 0 64px}
.page-head h1{font-size:clamp(38px,5.2vw,68px);margin:14px 0 18px;text-wrap:balance}
.page-head .lead{margin-top:4px}
@media(max-width:768px){.page-head{padding:130px 0 44px}}

/* prod: inline note strip (payment terms, fine print with a lantern edge) */
.notebar{margin-top:26px;border:1px solid rgba(43,39,53,.25);border-left:3px solid var(--lantern);border-radius:10px;padding:14px 18px;font-size:15px;background:rgba(255,255,255,.5);max-width:640px}

/* trail: morning */
.legs{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px}
.legs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.legs h3{font-size:25px;margin-bottom:10px}
.legs .row+.row{margin-top:34px}
.legs .row p{color:var(--inkmute);max-width:48ch}
@media(max-width:900px){.legs{grid-template-columns:1fr;gap:36px}}

/* rides: the timetable */
.ttable{margin-top:44px;border-top:1px solid rgba(43,39,53,.25)}
.trow{display:grid;grid-template-columns:150px 1.4fr 1fr 120px;gap:26px;align-items:baseline;padding:26px 4px;border-bottom:1px solid rgba(43,39,53,.16)}
.trow .t{font-family:var(--serif);font-size:30px;font-weight:450}
.trow .t small{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--inkmute);margin-top:2px}
.trow h3{font-size:20px;font-family:var(--sans);font-weight:700}
.trow .d{font-size:15px;color:var(--inkmute)}
.trow .meta{font-size:14px;color:var(--inkmute)}
.trow .pr{font-family:var(--serif);font-size:26px;text-align:right}
.trow .pr small{display:block;font-family:var(--sans);font-size:12px;color:var(--inkmute)}
.poppill{display:inline-block;background:var(--ink);color:var(--gold);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:4px 11px;margin-left:10px;vertical-align:middle}
.morecards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.morecards.three{grid-template-columns:repeat(3,1fr)}
.morecards.one{grid-template-columns:1fr}
/* by-ride timetable (Patrick, 10-09): one row per ride, its departures listed together */
.ttable.byride .trow{grid-template-columns:1.25fr 1.35fr .75fr 120px}
.trow .times{display:flex;flex-wrap:wrap;gap:6px 18px}
.trow .times .offs{flex-basis:100%;font-size:13px;font-style:normal;color:var(--inkmute)}
.trow .times span{font-family:var(--serif);font-size:24px;font-weight:450;white-space:nowrap}
.trow .times small{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--inkmute);margin-left:4px}
.mcard{border:1px solid rgba(43,39,53,.28);border-radius:14px;padding:30px 30px;background:rgba(255,255,255,.5)}
.mcard h3{font-size:23px;margin-bottom:10px}
.mcard p{font-size:15.5px;color:var(--inkmute)}
.mcard .pr{font-family:var(--serif);font-size:25px;margin-top:16px}
.mcard .pr small{font-family:var(--sans);font-size:12.5px;color:var(--inkmute)}
.mcard a.more{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mcard a.more:hover{color:var(--golddeep)}
.gratuity{margin-top:24px;font-size:14px;color:var(--inkmute)}
@media(max-width:900px){
  .trow{grid-template-columns:96px 1fr;gap:8px 18px}
  .trow .meta{grid-column:2}
  .trow .pr{grid-column:2;text-align:left;margin-top:4px}
  .ttable.byride .trow{grid-template-columns:1fr}
  .ttable.byride .trow .meta,.ttable.byride .trow .pr{grid-column:1}
  .trow .times span{font-size:21px}
  .morecards,.morecards.three{grid-template-columns:1fr}
}

/* stable: midday gold */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.split img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.chips span{border:1px solid rgba(43,39,53,.35);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

/* golden hour band */
.golden{position:relative;padding:0;overflow:hidden}
.golden img{width:100%;height:70vh;min-height:440px;object-fit:cover;display:block}
/* the veil begins at the midday band's solid gold and ends at the dusk band's
   solid blue, so both seams read as the photograph emerging, never as an edge */
.golden .veil{position:absolute;inset:0;background:linear-gradient(180deg,#F0D9A6 0,rgba(240,217,166,0) 16%,rgba(63,44,38,.12) 40%,rgba(59,62,90,.68) 78%,#3B3E5A 100%)}
.golden .inner{position:absolute;left:0;right:0;bottom:0;padding:0 0 64px}
.golden .tk b{color:#FFE8BC}
.golden .tk i{color:#F6E9CF}
.golden h2{color:#FFFDF7;max-width:18ch;text-shadow:0 2px 26px rgba(38,30,20,.45)}
.golden p.gl{color:#F6E9CF;max-width:52ch;font-size:18px;text-shadow:0 1px 14px rgba(38,30,20,.5)}
.golden .inner.gcen{top:0;padding:0;display:flex;align-items:center;text-align:center}
.gcen h2,.gcen .gl{margin-left:auto;margin-right:auto}
/* prod: opt-in center scrim for gcen bands whose photos carry a pale sky where
   the text lands (the homepage's dark sunset photo never needed one) */
.golden .inner.scrim::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 95% 85% at 50% 52%,rgba(28,24,36,.5) 0%,rgba(28,24,36,.32) 38%,rgba(28,24,36,.14) 62%,rgba(28,24,36,0) 92%)}
.golden .inner.scrim .wrap{position:relative}

/* groups: dusk3 */
.gsplit{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.gsplit img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.glist{margin-top:28px}
.glist div{padding:16px 0;border-bottom:1px solid rgba(239,233,220,.18)}
.glist b{display:block;font-size:17px;color:#F4F0E7}
.glist span{font-size:14.5px;color:var(--creammute)}
.b-dusk2 .btn,.b-night .btn,.b-deep .btn,.b-dusk .btn{border-color:rgba(239,233,220,.5);color:#F4F0E7}
.b-dusk2 .btn.solid,.b-night .btn.solid,.b-deep .btn.solid{background:var(--lantern);border-color:var(--lantern);color:var(--deep)}
.b-dusk2 .btn.solid:hover,.b-night .btn.solid:hover,.b-deep .btn.solid:hover{background:var(--lanternlt)}
@media(max-width:900px){.gsplit{grid-template-columns:1fr;gap:36px}}

/* stay: night, lantern-lit */
.staygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:46px}
.scard{border:1px solid rgba(232,168,76,.4);border-radius:16px;overflow:hidden;background:#201E2E;box-shadow:0 0 70px rgba(232,168,76,.13)}
.scard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.scard .pad{padding:24px 26px 28px}
.scard h3{font-size:22px;color:#FBF4E6}
.scard p{font-size:15px;color:var(--creammute);margin-top:8px}
.scard a{color:#F4F0E7}
.stayfacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.stayfacts span{border:1px solid rgba(239,233,220,.25);border-radius:999px;padding:9px 18px;font-size:14px;color:#EFE9DC}
@media(max-width:900px){.staygrid{grid-template-columns:1fr}}

/* stable: the year, writ large */
.ysplit{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;margin-top:8px}
.ysplit>img,.ysplit>.vcap img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.ysplit>.vcap{margin:0}
.ysplit>.vcap figcaption{font-size:13px;color:var(--creammute);padding:8px 2px 0}
.ynum{font-family:var(--serif);font-size:clamp(80px,11vw,150px);line-height:1;color:rgba(43,39,53,.14);font-weight:500;letter-spacing:-.02em}
.yrows{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:28px}
.yrows div{padding:13px 0;border-top:1px solid rgba(43,39,53,.25);font-weight:600;font-size:15px}

/* reviews: the quote ledger and the tally */
.stars{color:var(--lantern);letter-spacing:.2em;font-size:14px}
.qledger{display:grid;grid-template-columns:1.5fr .9fr;gap:40px;margin-top:44px;align-items:start}
.qrow2{padding:22px 0;border-bottom:1px solid rgba(239,233,220,.18)}
.qrow2:first-child{padding-top:0}
.qrow2 blockquote{font-family:var(--serif);font-size:20px;line-height:1.5;margin:10px 0 10px;color:#F4F0E7}
.qrow2 cite{font-style:normal;font-size:13px;color:var(--creammute)}
.aggpanel{border:1px solid rgba(232,168,76,.4);border-radius:16px;padding:30px 28px;background:rgba(239,233,220,.04);box-shadow:0 0 70px rgba(232,168,76,.1)}
.aggpanel strong{font-family:var(--serif);font-size:56px;line-height:1;color:var(--lanternlt)}
.aggpanel p{margin-top:12px;font-size:14.5px;color:var(--creammute)}
.aggpanel a{color:#F4F0E7;font-size:14px}

/* expect: every question answered on the page */
.ph{font-style:italic}
.qagrid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:42px}
.qa2{padding:18px 0;border-top:1px solid rgba(239,233,220,.2)}
.qa2 h3{font-size:17px;color:#F4F0E7;margin-bottom:6px}
.qa2 p{font-size:15px;color:var(--creammute);max-width:60ch}

/* plan: last call */
.pnum{display:inline-block;font-family:var(--serif);font-size:clamp(38px,5.6vw,68px);color:#FBF4E6;text-decoration:none;margin:8px 0 14px;border-bottom:2px solid var(--lantern)}
.pcols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:44px}
.pcols h3{font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lanternlt);margin-bottom:10px}
.pcols p{font-size:15.5px;color:var(--creammute)}
.pcols a{color:#F4F0E7}
.formcard{background:rgba(232,168,76,.06);border:1px solid rgba(232,168,76,.45);border-radius:16px;padding:34px 36px;margin-top:48px;box-shadow:0 0 80px rgba(232,168,76,.12)}
.formcard h3{font-family:var(--sans);font-size:19px;font-weight:700;color:#FBF4E6;margin-bottom:20px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.form-grid label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--creammute);margin-bottom:7px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:11px 12px;background:rgba(239,233,220,.07);border:1px solid rgba(239,233,220,.3);border-radius:8px;color:#fff;font-family:var(--sans);font-size:15px;color-scheme:dark}
/* prod 2026-10-15: the fields are dark, so color-scheme:dark has the browser draw their open lists,
   the native date picker and its calendar icon dark too (the lists opened white text on white).
   The option colours are the fallback for a browser that ignores color-scheme on a list. */
.form-grid option{background:var(--deep);color:#fff}
/* The desktop date field once site.js has made it a typed field with a calendar (flatpickr). */
.form-grid input.cbb-date{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23EFE9DC' stroke-width='1.4'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px 16px}
.flatpickr-calendar{font-family:var(--sans)}
.flatpickr-calendar .flatpickr-day.selected,.flatpickr-calendar .flatpickr-day.selected:hover,.flatpickr-calendar .flatpickr-day.selected:focus{background:var(--lantern);border-color:var(--lantern);color:var(--deep)}
.flatpickr-calendar .flatpickr-day.today{border-color:var(--lantern)}
.form-grid>div{display:flex;flex-direction:column;justify-content:flex-end}
.form-grid .full{grid-column:1/-1}
.form-grid textarea{min-height:92px;line-height:1.5;resize:vertical}
.form-grid label .opt{font-weight:500;letter-spacing:.02em;text-transform:none}
.form-actions{display:flex;align-items:center;gap:18px;margin-top:22px;flex-wrap:wrap}
.form-actions .call-btn{background:var(--lantern);color:var(--deep);font-weight:800}
.form-actions button.call-btn{cursor:pointer}
.form-note{font-size:13px;color:var(--creammute)}
@media(max-width:900px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .wide{grid-column:1/-1}.pcols{grid-template-columns:1fr}}

/* prod: every inner page ends at nightfall - the booking band */
.bookband{padding:190px 0 120px;background:linear-gradient(180deg,var(--day) 0,var(--gold) 6%,#C98F5C 13%,var(--dusk) 26%,var(--night) 52%,var(--deep) 100%)}
.bookband.fromdark{background:linear-gradient(180deg,var(--night) 0,var(--deep) 100%);padding:120px 0 110px}
@media(max-width:768px){.bookband{padding:110px 0 90px}}

/* footer */
footer{background:var(--pit);color:var(--creammute);padding:70px 0 40px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr;gap:36px}
footer .logo{width:100%;max-width:226px;height:auto;margin-bottom:16px}
footer .blurb{font-size:14.5px;max-width:30ch}
footer h4{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lanternlt);margin-bottom:12px}
footer h4+h4,footer ul+h4{margin-top:22px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:#E4DFD2;text-decoration:none;font-size:14.5px}
footer a:hover{color:#fff}
.frule{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(239,233,220,.16);margin-top:52px;padding-top:22px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.frule a{font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.preview-tag{margin-top:26px;font-size:12px;color:#736D80}
.fcall{display:inline-block;margin-top:18px;padding:12px 22px;border-radius:6px;background:var(--lantern);color:var(--deep)!important;font-weight:800;font-size:15px;text-decoration:none;transition:background .25s ease}
.fcall:hover{background:var(--lanternlt);color:var(--deep)!important}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}

@media(max-width:900px){
  .ysplit,.yrows,.qledger,.qagrid{grid-template-columns:1fr}
  .ysplit{gap:36px}
}
@media(max-width:768px){
  section{padding:76px 0}
  .golden img{height:58vh}
}

/* prod: quiet utility pages (privacy, 404) */
.prose{max-width:70ch}
.prose h2{font-size:24px;margin:36px 0 10px}
.prose p,.prose li{font-size:15.5px;color:var(--creammute);margin-bottom:12px}
.prose ul{padding-left:22px}

/* prod: the bookband variant for pages that pass through the golden band -
   starts at the exact dusk the golden veil ends on (seams rule) */
.bookband.fromdusk{background:linear-gradient(180deg,var(--dusk) 0,var(--dusk2) 16%,var(--dusk3) 32%,var(--night) 58%,var(--deep) 100%)}

/* prod: dark-band variants of components born on light bands */
.b-dusk .ynum,.b-dusk2 .ynum,.b-night .ynum,.b-deep .ynum{color:rgba(239,233,220,.13)}
.b-dusk .yrows div,.b-dusk2 .yrows div,.b-night .yrows div,.b-deep .yrows div{border-top-color:rgba(239,233,220,.28);color:#F4F0E7}
.b-dusk .notebar,.b-dusk2 .notebar,.b-night .notebar,.b-deep .notebar{background:rgba(239,233,220,.05);border-color:rgba(239,233,220,.22);border-left-color:var(--lantern);color:var(--creammute)}
.b-dusk .ttable,.b-dusk2 .ttable,.b-night .ttable{border-top-color:rgba(239,233,220,.3)}
.b-dusk .trow,.b-dusk2 .trow,.b-night .trow{border-bottom-color:rgba(239,233,220,.16)}
.b-dusk .trow h3,.b-dusk2 .trow h3,.b-night .trow h3{color:#F4F0E7}
.b-dusk .trow .times span,.b-dusk2 .trow .times span,.b-night .trow .times span,.b-dusk .trow .t,.b-dusk2 .trow .t,.b-night .trow .t,.b-dusk .trow .pr,.b-dusk2 .trow .pr,.b-night .trow .pr{color:#FBF4E6}
.b-dusk .trow .d,.b-dusk2 .trow .d,.b-night .trow .d,.b-dusk .trow .meta,.b-dusk2 .trow .meta,.b-night .trow .meta,
.b-dusk .trow .t small,.b-dusk2 .trow .t small,.b-night .trow .t small,.b-dusk .trow .pr small,.b-dusk2 .trow .pr small,.b-night .trow .pr small{color:var(--creammute)}
.b-dusk .gratuity,.b-dusk2 .gratuity,.b-night .gratuity{color:var(--creammute)}
.b-dusk .chips span,.b-dusk2 .chips span,.b-night .chips span,.b-deep .chips span{border-color:rgba(239,233,220,.35);color:var(--cream)}

/* prod: numbered trail log */
.tlog{margin-top:44px}
.tlog .leg{display:grid;grid-template-columns:104px 1fr;gap:26px;padding:28px 0;border-top:1px solid rgba(43,39,53,.22)}
.tlog .leg .n{font-family:var(--serif);font-size:46px;line-height:1;color:rgba(43,39,53,.3)}
.tlog .leg .n small{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--inkmute);margin-top:6px}
.tlog .leg h3{font-size:20px;font-family:var(--sans);font-weight:700;margin-bottom:6px}
.tlog .leg p{font-size:15.5px;color:var(--inkmute);max-width:62ch}
.b-dusk .tlog .leg,.b-dusk2 .tlog .leg,.b-night .tlog .leg{border-top-color:rgba(239,233,220,.22)}
.b-dusk .tlog .n,.b-dusk2 .tlog .n,.b-night .tlog .n{color:rgba(239,233,220,.3)}
.b-dusk .tlog h3,.b-dusk2 .tlog h3,.b-night .tlog h3{color:#F4F0E7}
.b-dusk .tlog p,.b-dusk2 .tlog p,.b-night .tlog p,.b-dusk .tlog .n small,.b-dusk2 .tlog .n small,.b-night .tlog .n small{color:var(--creammute)}
@media(max-width:768px){.tlog .leg{grid-template-columns:64px 1fr;gap:16px}.tlog .leg .n{font-size:34px}}
.tlog.withimg .leg{grid-template-columns:96px 280px 1fr;align-items:start}
.tlog.withimg .leg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
@media(max-width:900px){
  .tlog.withimg .leg{grid-template-columns:64px 1fr}
  .tlog.withimg .leg img,.tlog.withimg .leg .leg-tx{grid-column:2}
  .tlog.withimg .leg img{margin-bottom:12px}
}

/* prod: captioned photo grid */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;margin-top:44px}
.pgrid figure{margin:0}
.pgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.pgrid figcaption{font-size:13px;color:var(--inkmute);padding:8px 2px 0}
.pgrid.two{grid-template-columns:repeat(2,1fr)}
.pgrid.two img{aspect-ratio:16/10}
@media(max-width:900px){.pgrid,.pgrid.two{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pgrid,.pgrid.two{grid-template-columns:1fr}}

/* prod: departure pill strip */
.depstrip{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.depstrip span{border:1px solid rgba(43,39,53,.3);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:600;background:rgba(255,255,255,.45)}
.depstrip span b{font-family:var(--serif);font-weight:450;font-size:17.5px;margin-right:7px}

/* prod: light-band ledger (the glist, in ink) */
.llist{margin-top:28px}
.llist div{padding:16px 0;border-bottom:1px solid rgba(43,39,53,.18)}
.llist b{display:block;font-size:17px;color:var(--ink)}
.llist span{font-size:14.5px;color:var(--inkmute)}
.b-dusk .llist div,.b-dusk2 .llist div,.b-night .llist div,.b-deep .llist div{border-bottom-color:rgba(239,233,220,.18)}
.b-dusk .llist b,.b-dusk2 .llist b,.b-night .llist b,.b-deep .llist b{color:#F4F0E7}
.b-dusk .llist span,.b-dusk2 .llist span,.b-night .llist span,.b-deep .llist span{color:var(--creammute)}

/* prod: FAQ ledger layout (grouped column + quick-facts panel) */
.qledger.wide{grid-template-columns:1.35fr .75fr}
/* declared after the 900px collapse above, so it needs its own: one column on phones and tablets */
@media(max-width:900px){.qledger.wide{grid-template-columns:1fr}}
.qledger .grp-tk{margin-top:34px}
.qledger .grp-tk:first-child{margin-top:0}
/* FAQ page (Leon, 2026-09-01): AM on the big 7:30, question headings a step up from the homepage's 17px */
.aggpanel strong small{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--creammute);margin-left:8px;vertical-align:baseline}
.qledger .qa2 h3{font-size:20px}

/* prod: review stat grid (aggpanels side by side) */
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.statgrid .aggpanel strong{font-size:44px}
@media(max-width:900px){.statgrid{grid-template-columns:1fr}}

/* prod: gift certificate centerpiece */
.certcard{max-width:560px;margin:52px auto 0;text-align:center;border:1px solid rgba(232,168,76,.55);border-radius:18px;padding:54px 42px 46px;background:#201E2E;box-shadow:0 0 90px rgba(232,168,76,.16)}
.certcard .ceye{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--lanternlt)}
.certcard h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);font-weight:450;color:#FBF4E6;margin:14px 0 0}
.certcard .crule{width:64px;height:2px;background:var(--lantern);margin:20px auto}
.certcard p{color:var(--creammute);font-size:15px}
@media(max-width:560px){.certcard{padding:38px 24px 34px}}

/* prod: the map room (directions) */
.maproom{margin-top:44px;border-radius:16px;overflow:hidden;border:1px solid rgba(43,39,53,.25)}
.maproom iframe{display:block;width:100%;height:440px;border:0}
@media(max-width:768px){.maproom iframe{height:340px}}

/* prod: A/B review switcher - emitted on the LOCAL build only (Leon, 2026-09-01:
   staging and production show his picks, never the A/B machinery) */
.abswitch{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:2px;background:rgba(20,19,32,.94);border:1px solid rgba(232,168,76,.5);border-radius:999px;padding:6px 7px 6px 13px;box-shadow:0 8px 30px rgba(16,15,25,.45)}
.abswitch span{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--creammute);margin-right:7px}
.abswitch a{display:inline-block;min-width:34px;text-align:center;padding:7px 10px;border-radius:999px;font-weight:800;font-size:13px;text-decoration:none;color:var(--cream)}
.abswitch a.on{background:var(--lantern);color:var(--deep)}
.abswitch a:not(.on):hover{background:rgba(232,168,76,.18)}

/* prod: in-page ride anchors on the merged Rides & Rates page (Leon, 2026-09-01 -
   the 1.5-hour, half-day and private pages became sections here). The header is
   fixed, so an anchor target needs its own clearance or the heading lands under it */
#the-1-5-hour-ride,#the-half-day-ride,#private-rides{scroll-margin-top:88px}

/* the jump strip: same cards as the old "each one, in detail" block, now pointing
   at the sections below instead of three separate pages */
.jumpstrip{margin-top:46px;padding-top:34px;border-top:1px solid rgba(43,39,53,.14)}

/* the riding release download (the stables' own PDF, served from /files/) */
.dlbtn{display:inline-block;margin-top:12px;padding:9px 16px;border:1.5px solid var(--lantern);border-radius:999px;font-weight:700;font-size:14px;line-height:1.3;text-decoration:none;color:var(--ink);transition:background .25s ease,color .25s ease}
.dlbtn:hover{background:var(--lantern);color:var(--deep)}
.b-dusk .dlbtn,.b-dusk2 .dlbtn,.b-night .dlbtn,.b-deep .dlbtn{color:#F4F0E7}
.b-dusk .dlbtn:hover,.b-dusk2 .dlbtn:hover,.b-night .dlbtn:hover,.b-deep .dlbtn:hover{color:var(--deep)}
.notebar .dlbtn{display:table;margin-top:10px}