/* RentaSanta — VARIANT B (Chris 2026-09-29): the vertical crest hangs from the title bar, upper left.
   Loaded after site.css only in site-b/. Source: ~/rebuild/build/site-b.css (copied in by build.py). */

/* ---- title bar with the hanging crest ---- */
.site-head.b{position:relative}
html.js .site-head.b{position:sticky}
.site-head.b .wrap{position:relative;padding-left:0}
.site-head.b .hang{position:absolute;left:0;top:10px;z-index:70;display:block;width:250px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(244,163,64,.15));transition:opacity .25s ease,transform .25s ease}
.site-head.b .hang img{width:100%;height:auto}
.site-head.b.inner .hang{width:160px;top:8px}
.site-head.b .nav{margin-left:auto}
.site-head.b.home .wrap{padding-left:270px}
.site-head.b.inner .wrap{padding-left:180px}
/* compact lockup that takes over once the page scrolls (the crest would otherwise cover content) */
.site-head.b .brandmark.mini{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .25s ease}
html.js.scrolled .site-head.b.inner .hang{opacity:0;transform:translateY(-24px);pointer-events:none;visibility:hidden}
html.js.scrolled .site-head.b.inner .brandmark.mini{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.site-head.b .hang,.site-head.b .brandmark.mini{transition:none}}

/* ---- landing: crest | words | Doug ---- */
.hero-b{padding-block:2.5rem 4rem}
.hero-b .wrap{display:grid;grid-template-columns:250px minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;min-height:min(78vh,720px)}
.hero-b .hb-space{height:340px}
.hero-b h1{font-size:clamp(2.6rem,1.6rem + 3vw,4.4rem);margin-bottom:1.1rem}
.hero-b .lede{margin-bottom:1.8rem}
.hero-b .hb-photo{margin:0;position:relative}
.hero-b .hb-photo::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle,rgba(244,163,64,.3),transparent 62%);z-index:0}
.hero-b .hb-photo img{position:relative;z-index:1;width:100%;max-height:640px;object-fit:cover;border-radius:10px;border:3px solid var(--gold);box-shadow:0 30px 60px -22px rgba(0,0,0,.85)}
.hero-b .seal{margin-top:1.8rem}

/* interior page headers leave room for the smaller hanging crest */
@media (min-width:881px){.pagehead .wrap{padding-left:190px}}

/* ---- tablet / small laptop ---- */
@media (max-width:1300px){
  .site-head.b.home .wrap,.site-head.b.inner .wrap{padding-left:0}
  .site-head.b .navtoggle{margin-left:auto}
  .hero-b .wrap{grid-template-columns:210px minmax(0,1fr) minmax(0,.8fr)}
  .site-head.b.home .hang{width:210px}
}
@media (max-width:1100px){
  .hero-b .wrap{grid-template-columns:1fr 1fr}
  .hero-b .hb-space{grid-column:1/-1;height:260px}
}
/* ---- phones: crest hangs centred from the bar, then words, then Doug ---- */
@media (max-width:880px){
  .site-head.b .hang,.site-head.b.home .hang{left:50%;transform:translateX(-50%);width:170px;top:6px}
  .site-head.b.inner .hang{width:120px}
  html.js.scrolled .site-head.b.inner .hang{transform:translate(-50%,-24px)}
  .hero-b .wrap{grid-template-columns:1fr;min-height:0}
  .hero-b .hb-space{height:200px}
  .hero-b .hb-photo{max-width:420px}
  .pagehead{min-height:380px}
  .pagehead .wrap{padding-top:9rem}
}

/* ================= LANDING PAGE ONLY: crest rests in the hero's left column, morphs on scroll =================
   Chris 2026-09-29: first the crest hung lower and morphed on scroll; then (red-circle screenshot) it moved
   down into the empty column left of the headline, larger. site.js measures .hb-space (the crest's resting
   cell) and the inner-page end state below (--end-w/--end-top/--end-align), then sets --tx/--ty/--sc every
   frame, so CSS only ever applies a transform. --big-w is the resting size; the cell is sized to fit it.
   .crest-away (set by site.js) fades the crest into the compact lockup before it could cover hero content. */
:root{--big-w:300px}
.site-head.b.home{--end-w:160px;--end-top:8px;--end-align:left}
.site-head.b.home .hang{top:0;left:0;width:var(--big-w);transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,120px)) scale(var(--sc,1));transition:opacity .3s ease;will-change:transform;opacity:0}
.site-head.b.home.placed .hang,html:not(.js) .site-head.b.home .hang{opacity:1}
html.js.crest-away .site-head.b.home .hang{opacity:0;pointer-events:none}
html.js.crest-away .site-head.b.home .brandmark.mini{opacity:1;visibility:visible}
.hero-b .wrap{grid-template-columns:var(--big-w) minmax(0,1.05fr) minmax(0,.85fr)}
.hero-b .hb-space{height:calc(var(--big-w) * 1.498)}
@media (max-width:1300px){:root{--big-w:270px}}
@media (max-width:1100px){
  :root{--big-w:230px}
  .hero-b .wrap{grid-template-columns:1fr 1fr}
  .hero-b .hb-space{grid-column:1/-1}
}
@media (max-width:880px){
  :root{--big-w:180px}
  .site-head.b.home{--end-w:120px;--end-top:6px;--end-align:center}
  .site-head.b.home .hang{left:0;top:0;transform:translate(var(--tx,0px),var(--ty,90px)) scale(var(--sc,1))}
  .hero-b .wrap{grid-template-columns:1fr}
  .site-head.b.home .brandmark.mini{left:0}
}
@media (prefers-reduced-motion:reduce){.site-head.b.home .hang{transition:none}}

/* ================= Chris 2026-09-29: balanced on ANY screen height + no background "bubbles" =================
   15.6" laptops show ~600-730px of page height. On desktop layouts (>1100px wide) the landing screen now fills
   exactly the space under the bar, content is centred vertically, and the crest, headline and spacing scale
   with the viewport height (svh) so nothing sits low or gets cut off. On short screens the small Hall of Fame
   badge is dropped from the opening screen (the full Hall of Fame section is right below). */
@media (min-width:1101px){
  :root{--big-w:clamp(170px, calc((100svh - 86px - 6svh) * .53), 300px)}
  .hero-b{padding-block:3svh}
  .hero-b .wrap{min-height:min(calc(100svh - 86px - 6svh), 860px);align-items:center}
  .hero-b h1{font-size:clamp(2.3rem, min(1.6rem + 3vw, 8svh), 4.4rem);margin-bottom:min(1.1rem, 2svh)}
  .hero-b .lede{font-size:clamp(1.05rem, 2.7svh, 1.35rem);margin-bottom:min(1.8rem, 3svh)}
  .hero-b .cta-row{margin-top:0;gap:min(1rem,2svh) 1.4rem}
  .hero-b .seal{margin-top:min(1.8rem, 3svh)}
  .hero-b .hb-photo img{max-height:calc(100svh - 86px - 10svh)}
}
@media (min-width:1101px) and (max-width:1300px){:root{--big-w:clamp(170px, calc((100svh - 86px - 6svh) * .53), 270px)}}
@media (min-width:1101px) and (max-height:780px){.hero-b .seal{display:none}}

/* no bubbles: drop the bokeh dots and the soft circular glows from the section backgrounds */
.bokeh::before{display:none}
.ever{background:linear-gradient(180deg,var(--ever) 0%,var(--ever2) 100%)}
.cran{background:linear-gradient(160deg,var(--cran2) 0%,var(--cran) 60%,#4E0E18 100%)}
.char{background:linear-gradient(180deg,var(--char2),var(--char))}

/* Chris 2026-09-29: new hero headline (big line + smaller continuation, one <h1>), no gift-tag graphics */
.hero-b h1 .h1-main{display:block}
.hero-b h1 .h1-sub{display:block;font-size:.44em;line-height:1.3;color:#F4EADA;margin-top:.55em;max-width:26em}
.hero-b h1{margin-bottom:min(1.6rem, 3svh)}
.btn.call svg{width:1.05em;height:1.05em;fill:currentColor}

/* ================= Chris 2026-09-29: "we like the upper right one" = the 1366x650 laptop frame =================
   That frame is now the master design for the opening screen on every desktop/laptop (>1100px wide).
   --u is 1px at exactly 1366x650 and scales with the window (width or height, whichever is tighter;
   capped at 1.6px), so every hero dimension below is the measured 1366x650 value times --u and the
   composition (crest | two-line headline + buttons | Doug) is identical on every screen.
   Measured values: work/qa/spec.js. The small Hall of Fame badge isn't in that frame, so it's hidden. */
@media (min-width:1101px){
  :root{--u:min(calc(100vw / 1366), calc((100svh - 86px) / 564), 1.6px);--big-w:calc(278 * var(--u))}
  .hero-b{padding-block:calc(19.5 * var(--u))}
  .hero-b .wrap{width:min(calc(1220 * var(--u)), 100% - 2.5rem);min-height:max(calc(525 * var(--u)), calc(100svh - 86px - 39 * var(--u)));grid-template-columns:var(--big-w) minmax(0,1.05fr) minmax(0,.85fr);column-gap:calc(41 * var(--u))}
  .hero-b h1{font-size:calc(52 * var(--u));margin-bottom:calc(19.5 * var(--u))}
  .hero-b .cta-row{gap:calc(13 * var(--u)) calc(22.4 * var(--u))}
  .hero-b .cta-row .btn{font-size:calc(17.28 * var(--u));padding:calc(15.2 * var(--u)) calc(25.6 * var(--u))}
  .hero-b .hb-photo img{max-height:calc(499 * var(--u))}
  .hero-b .seal{display:none}
}

/* ================= Chris 2026-09-29: no cameo+ribbon logo on scroll — the crest stays, compact, in the bar =================
   Every page: once scrolled, the crest shrinks (smoothly) to --compact-w and sits in the top-left of the bar,
   hanging a little below it. Landing page: when the morph would reach hero content (.crest-away), the crest goes
   to the same compact state instead of fading out. The old .brandmark.mini lockup is never shown on B. */
.site-head.b{--compact-w:92px;--compact-top:6px}
.site-head.b .brandmark.mini{display:none!important}
.site-head.b.inner .hang{transform-origin:0 0;transition:transform .35s ease}
html.js.scrolled .site-head.b.inner .hang{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(calc(var(--compact-top) - 8px)) scale(calc(92 / 160))}
html.js.crest-away .site-head.b.home .hang{opacity:1;pointer-events:auto;transform:translate(var(--cx,0px),var(--compact-top)) scale(var(--csc,.33));transition:transform .35s ease}
@media (max-width:880px){
  .site-head.b{--compact-w:62px;--compact-top:5px}
  .site-head.b.inner .hang{transform-origin:50% 0}
  html.js.scrolled .site-head.b.inner .hang{transform:translateX(-50%) translateY(calc(var(--compact-top) - 6px)) scale(calc(62 / 120))}
}
@media (prefers-reduced-motion:reduce){.site-head.b .hang{transition:none!important}}

/* Chris 2026-09-29: the red banner has 3 items now; show all of them on phones too (site.css hid items 3-4 there) */
@media (max-width:640px){.ribbon li:nth-child(3){display:flex}.ribbon li:nth-child(3)::before{display:none}.ribbon li:nth-child(3){flex-basis:100%;justify-content:center}}

/* Chris 2026-09-29: rates page — two rate cards */
.rates .rate-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.2rem}
.rates .rate-face{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid var(--gold);flex:none}
.rates h2{margin:0;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.6rem)}
.rates .eyebrow{margin-bottom:.3rem}
.rates .price{font-size:clamp(2.6rem,2rem + 2vw,3.6rem)}
.rates .ticks{margin-bottom:1.4rem}
.rates-note{text-align:center;margin:2rem 0 0;font-size:1.15rem;color:var(--dim)}

/* Chris 2026-09-29: menu items read as one run-on line — add gold diamond separators, a touch more size/space,
   and a hairline divider between the menu and the phone/Book group. Desktop bar only (the stacked mobile menu
   below 1300px is unchanged). */
@media (min-width:1301px){
  .site-head.b .nav ul{column-gap:0}
  .site-head.b .nav li{display:flex;align-items:center}
  .site-head.b .nav li+li::before{content:"";width:5px;height:5px;margin:0 var(--nav-sep,.85rem);background:var(--gold);transform:rotate(45deg);opacity:.85;flex:none}
  .site-head.b .nav a{font-size:1rem;letter-spacing:.015em;padding-block:.35rem}
  .site-head.b .head-cta{margin-left:1.1rem;padding-left:1.2rem;border-left:1px solid rgba(217,169,78,.45)}
}
@media (min-width:1500px){.site-head.b{--nav-sep:1.05rem}}
/* header fit: the bar may use more of the width, the home bar only reserves room for the compact crest,
   and between 1301 and 1499px the separators/spacing are a little tighter so everything stays on one line */
@media (min-width:1301px){
  .site-head.b .wrap{width:min(100% - 2rem, 1480px)}
  .site-head.b.home .wrap{padding-left:115px}
  .site-head.b.inner .wrap{padding-left:180px}
}
@media (min-width:1301px) and (max-width:1499px){
  .site-head.b{--nav-sep:.5rem}
  .site-head.b .nav a{font-size:.95rem;letter-spacing:.005em}
  .site-head.b .head-cta{margin-left:.8rem;padding-left:.8rem}
  .site-head.b .head-phone{font-size:1.02rem}
}

/* Chris 2026-09-29: the garland straddles the seam between two sections (half above, half below the line)
   instead of sitting inside the top of the lower section — a smoother transition. The section must not clip it,
   and it draws over the bottom padding of the section above. */
.garland{overflow:visible;z-index:2;padding-top:clamp(4.5rem,3.5rem + 4vw,7rem)}
.garland::after{top:0;transform:translateY(-50%)}

/* Chris 2026-09-29: four workshop photos lead the Photos & Videos page as one row (then the masonry gallery) */
.gallery-lead{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.gallery-lead a{display:block;border-radius:6px;overflow:hidden;box-shadow:0 14px 28px -14px rgba(0,0,0,.8)}
.gallery-lead img{width:100%;height:100%;aspect-ratio:2/3;object-fit:cover}
@media (max-width:760px){.gallery-lead{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}}