/* ── Featured occasion ribbon (feature-occasion.js) ──
   Fixed ABOVE the nav on screens wider than 760px while an event carries
   "Feature this event" in the Studio. On phones the ribbon is hidden (a 9px
   truncated line was not worth 44px of screen) and its place is taken by a
   row at the top of the hamburger drawer (.fo-dr), rendered by the same code. Its own stylesheet, so it holds on the pages that keep inline
   chrome CSS (rectors) as well as the ones that load chrome.css. The bake stamps
   the <link> into every chrome page; site-settings.js adds it live when missing.
   While the ribbon is up the document and the fixed nav move down by its height
   (--fo-rb-h, 43px until measured) and the desktop sticky bars that sit under
   the nav move with it. Homepage strip, card, and story styles live in
   index.html. Names avoid the substrings typography.css clamps on phones. */
@media(min-width:761px){
html.fo-has-ribbon{--fo-rb-h:43px;padding-top:var(--fo-rb-h)}
html.fo-has-ribbon .nav{top:var(--fo-rb-h)}
/* Full-height heroes end at the fold, ribbon included, so the homepage chevron
   and the gallery and video heroes' last line stay in view. */
html.fo-has-ribbon .hero{height:calc(100vh - var(--fo-rb-h))}
html.fo-has-ribbon .gh{height:calc(100svh - var(--fo-rb-h))}
html.fo-has-ribbon .vh{min-height:calc(100vh - var(--fo-rb-h))}
}
@media(min-width:901px){html.fo-has-ribbon :is(.lit-sidebar,.lit-rail,.filter-bar,.switcher-bar,.rp-strip,.jump-bar,.chapter-bar){top:calc(60px + var(--fo-rb-h))}}
.fo-ribbon{position:fixed;top:0;left:0;right:0;z-index:210;display:flex;align-items:center;justify-content:center;background:rgba(246,241,232,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:var(--rule-faint);box-shadow:inset 0 2px 0 rgba(184,131,40,.55);color:var(--ink);line-height:1}
.fo-rb-link{display:flex;align-items:center;justify-content:center;gap:1.1rem;padding:.42rem 2.6rem .42rem 1rem;text-decoration:none;color:inherit;min-width:0}
.fo-rb-ic{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--gold);flex-shrink:0}
.fo-rb-row{display:inline-flex;align-items:baseline;gap:.9rem;min-width:0}
.fo-rb-tx{font-family:var(--f-ui);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);line-height:1}
.fo-rb-when{font-family:var(--f-body);font-variant-numeric:lining-nums;font-size:1.02rem;color:var(--ink);line-height:1;white-space:nowrap}
.fo-rb-sep{width:3px;height:3px;border-radius:50%;background:rgba(184,131,40,.85);flex-shrink:0;align-self:center}
.fo-rb-go{font-family:var(--f-body);font-variant-numeric:lining-nums;font-size:.9rem;font-weight:500;letter-spacing:.02em;line-height:1;color:#fff;background:var(--maroon);border-radius:999px;padding:.38rem .9rem .42rem;white-space:nowrap;transition:background .18s}
.fo-rb-link:hover .fo-rb-go{background:var(--maroon-deep)}
.fo-rb-x{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(122,102,72,.5);font-size:1.25rem;line-height:1;cursor:pointer;padding:.25rem}
.fo-rb-x:hover{color:var(--maroon)}
@media(max-width:760px){.fo-ribbon{display:none}}
/* The drawer row: the ribbon's phone form, first thing in the hamburger menu. */
.fo-dr{display:flex;align-items:center;gap:.9rem;margin:.5rem;padding:.8rem .9rem;background:rgba(246,241,232,.06);border:1px solid rgba(184,131,40,.4);text-decoration:none;color:#fff}
.fo-dr-ic{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--gold);flex-shrink:0}
.fo-dr-t{display:flex;flex-direction:column;min-width:0;gap:.15rem}
.fo-dr-top{font-family:var(--f-ui);font-size:.52rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt)}
.fo-dr-ttl{font-family:var(--f-display);font-size:1.05rem;line-height:1.2;color:#fff}
.fo-dr-when{font-family:var(--f-body);font-variant-numeric:lining-nums;font-size:.9rem;line-height:1.2;color:rgba(246,241,232,.75)}
.fo-dr svg{margin-left:auto;flex-shrink:0;color:var(--gold-lt)}