/* GENERATED by scripts/gen-site-nav.ts from lib/site-menu.ts, components/retreats-nav.css
   and app/globals.css. Do not edit: change those and re-run. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Karla:wght@400;500;600;700&display=swap");

/* The tokens, scoped to the bar so they never touch the page's own. */
.rn, .rn-panel {
  --bg: #FCFBF8;
  --surface: #FFFFFF;
  --gold: #8A6F35;
  --gold-leaf: #C9A84C;
  --gold-lift: #6F5822;
  --gold-muted: #D6C193;
  --text: #0A0A0A;
  --text-read: #33302B;
  --text-soft: #55504A;
  --muted: #726C63;
  --muted-2: #8B857B;
  --copper: #96541F;
  --silver: #6E6E6E;
  --border: #E5DFD2;
  --border-strong: #D6CEBD;
  --bone: #F5F1E8;
  --on-gold: #FFFFFF;
  --img-bg: #F0EBE0;
  --img-filter: saturate(.96);
  --logo-filter: brightness(0);
  --hover-bg: #F8F5EE;
  --tint: rgba(10,10,10,.035);
  --tint-soft: rgba(10,10,10,.022);
  --nav-bg: rgba(252,251,248,.86);
  --veil: rgba(255,255,255,.74);
  --veil-strong: rgba(252,251,248,.94);
  --scrim-0: rgba(10,10,10,0);
  --scrim: rgba(10,10,10,.3);
  --shadow: rgba(58,50,34,.14);
  --card-shadow: 0 1px 2px rgba(58,50,34,.04);
  --mark-opacity: .13;
  --mark-ink: var(--text);
  --gold-wash: rgba(138,111,53,.07);
  --gold-wash-xs: rgba(138,111,53,.04);
  --gold-wash-lg: rgba(138,111,53,.1);
  --logo-opacity: .62;
  --ok: #3F7F53;
  --danger: #A8443C;
  --danger-line: rgba(168,68,60,.32);
  --danger-wash: rgba(168,68,60,.06);
  --ink-panel: #0A0A0A;
  --on-ink: #F5F0E8;
  --on-ink-soft: rgba(245,240,232,.64);
  --on-ink-line: rgba(245,240,232,.22);
  --gold-bright: #E2C677;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --utility: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --r-card: 10px;
  --r-photo: 8px;
  --r-btn: 6px;
  --r-tag: 5px;
  --green: #0F3638;
  --green-hover: #0A2A2B;
  --green-top: #123E3E;
  --green-bottom: #072221;
  --green-ground: linear-gradient(180deg, var(--green-top), var(--green-bottom));
  --on-green: #F5F0E8;
  --on-green-soft: #C9CFC9;
  font-family: var(--body); line-height: 1.5; text-align: left;
  -webkit-font-smoothing: antialiased;
}
.rn *, .rn-panel * { box-sizing: border-box; }
:where(.rn, .rn-panel) a { color: inherit; text-decoration: none; }
:where(.rn, .rn-panel) button, :where(.rn, .rn-panel) input { font: inherit; }
.rn img { display: block; }

/* On these pages the bar is sticky, in the flow, so nothing has to clear it,
   and anchor links stop short of it. */
.rn.rn-static { position: sticky; z-index: 90; }
.rn-panel.rn-panel { z-index: 1000; }
html { scroll-padding-top: 88px; }

/* The page's own button (See the full programme, Apply), in the bar's style,
   and on a phone beside the menu button. */
.rn .rn-page-cta-m { display: none; }
@media (max-width: 1080px) {
  .rn.rn-static { justify-content: flex-start; gap: 0; }
  .rn.rn-static .rn-logo { margin-right: auto; }
  .rn.rn-static .rn-cart-m { margin-left: 0; margin-right: 10px; }
  .rn .rn-page-cta-m { display: inline-flex; margin-right: 6px; padding: 10px 14px; font-size: 10.5px; letter-spacing: .14em; white-space: nowrap; }
}
/* Too long for a phone bar beside the logo; it is in the menu panel instead. */
@media (max-width: 560px) { .rn .rn-page-cta-m { display: none; } }

/* The site menu (components/SiteNav.tsx), from the /retreats design boards.
   Tokens only, see the top of app/globals.css, except the dark bar further
   down, which matches the event posters' literal greens as the old bar did.

   Fixed at the 72px every other page was built to clear (var(--nav-h)), and
   the boards' sticky 80px bar on /retreats only (.rn-flow). */

.rn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h, 72px); box-sizing: border-box; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--nav-bg); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.rn.rn-flow { position: sticky; height: 80px; padding: 0 64px; }
body:has(section.reel) .rn { background: var(--bg); backdrop-filter: none; }
.rn-logo { display: flex; align-items: center; flex: none; }
.rn-logo .logo { height: 40px; width: auto; }

.rn-links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.rn-top, .rn-login { display: block; padding: 10px 0; color: var(--text); border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; }
.rn-top[aria-current="page"] { border-bottom-color: var(--gold); }
.rn-top:hover { color: var(--gold-lift); }
.rn-login { color: var(--text-soft); }
.rn-login:hover { color: var(--text); }
.rn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--on-gold); padding: 13px 26px; border-radius: var(--r-btn);
  font-family: var(--utility); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s ease;
}
.rn-cta:hover { background: var(--gold-lift); }

/* One card under each item, as built from the boards. Opens on hover and on
   focus-within, so it works for a keyboard; the parent stays a real link. The
   card hangs from the bar's bottom edge, and an invisible bridge above it keeps
   it open while the pointer travels down from the item. */
.rn-drop { position: relative; display: flex; align-items: center; align-self: stretch; }
.rn-links { align-self: stretch; }
.rn-menu {
  position: absolute; top: calc(100% - 14px); left: -30px; min-width: 260px; padding: 20px 30px 22px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: 0 18px 40px var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.rn-drop:hover .rn-menu, .rn-drop:focus-within .rn-menu { opacity: 1; visibility: visible; transform: none; }
.rn-menu a { padding: 9px 0; font-size: 16px; color: var(--text-read); white-space: nowrap; transition: color .3s ease; }
.rn-menu a:hover { color: var(--gold-lift); }
.rn-menu-right { left: auto; right: 0; min-width: 200px; }
.rn-group-wrap { display: flex; flex-direction: column; }
.rn-group {
  margin: 14px 0 2px; font-family: var(--utility); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
/* About and Corporate sit at the right of the bar; their cards open leftward
   so they never run off a laptop screen. */
.rn-drop:nth-child(5) .rn-menu, .rn-drop:nth-child(6) .rn-menu { left: auto; right: -30px; }
/* The second line under a retreat's name. The phone panel is a plain list. */
.rn-menu a:has(.rn-note) { padding: 7px 0; }
.rn-note { display: block; margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.rn-panel-list .rn-note { display: none; }

.rn-burger, .rn-close {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.rn-burger svg path, .rn-close svg path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; fill: none; }

/* The phone panel. */
.rn-panel {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
}
.rn-panel[hidden] { display: none; }
.rn-panel-head { height: 64px; flex: none; box-sizing: border-box; padding: 0 16px 0 24px; display: flex; align-items: center; justify-content: space-between; }
.rn-panel-head .logo { height: 34px; }
.rn-close { display: flex; }
.rn-panel-find { flex: none; padding: 4px 24px 8px; }
.rn-panel-find input {
  width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  padding: 12px 20px; color: var(--text); font-family: var(--body); font-size: 16px; outline: none; transition: border-color .3s;
}
.rn-panel-find input:focus { border-color: var(--gold-muted); }
.rn-panel-find input::placeholder { color: var(--muted); }
.rn-panel-body { flex: 1; overflow: auto; padding: 8px 24px; }
.rn-panel-body summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1.1;
  border-bottom: 1px solid var(--border);
}
.rn-panel-body summary::-webkit-details-marker { display: none; }
.rn-panel-body summary svg path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.rn-panel-body summary svg { transition: transform .3s ease; }
.rn-panel-body details[open] summary svg { transform: rotate(180deg); }
.rn-panel-list { display: flex; flex-direction: column; padding: 6px 0 14px; }
.rn-panel-list a { padding: 10px 0; font-size: 16px; color: var(--text-read); }
.rn-panel-list .rn-group { margin: 12px 0 0; }
.rn-panel-list .rn-group-wrap { display: flex; flex-direction: column; }
.rn-panel-foot { flex: none; padding: 16px 24px 28px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); }
.rn-panel-foot .rn-cta { height: 56px; padding: 0; font-size: 12px; }
.rn-panel-login { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-soft); }

/* The dark bar over the event posters and the founder page. */
.rn.on-dark { background: rgba(11,31,20,.9); border-bottom-color: rgba(239,231,214,.14); }
.rn.on-dark .rn-top, .rn.on-dark .rn-login { color: rgba(239,231,214,.78); }
.rn.on-dark .rn-top:hover, .rn.on-dark .rn-login:hover { color: #EFE7D6; }
.rn.on-dark .rn-menu { background: #0B1F14; border-color: rgba(239,231,214,.16); }
.rn.on-dark .rn-menu a { color: rgba(239,231,214,.78); }
.rn.on-dark .rn-menu a:hover { color: #C9A84C; }
.rn.on-dark .rn-group, .rn.on-dark .rn-note { color: rgba(239,231,214,.5); }
.rn.on-dark .rn-burger { color: #EFE7D6; }
.rn.on-dark .nav-find-btn { color: rgba(239,231,214,.78); border-color: rgba(239,231,214,.16); }
.rn.on-dark .nav-find-btn:hover, .rn.on-dark .nav-find-btn.is-open { color: #EFE7D6; border-color: rgba(201,168,76,.55); }
.rn.on-dark .nav-find-panel { background: #0B1F14; border-color: rgba(239,231,214,.16); }
.rn.on-dark .nav-find-panel input { background: rgba(11,31,20,.6); border-color: rgba(239,231,214,.16); color: #EFE7D6; }

/* Visible keyboard focus on every link in the bar. */
.rn a:focus-visible, .rn button:focus-visible, .rn-panel a:focus-visible, .rn-panel summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px;
}

@media (max-width: 1240px) { .rn, .rn.rn-flow { padding: 0 32px; } .rn-links { gap: 22px; font-size: 14px; } .rn-cta { padding: 12px 20px; } }
@media (max-width: 1080px) {
  .rn { padding: 0 16px 0 24px; }
  .rn.rn-flow { height: 64px; padding: 0 16px 0 24px; }
  .rn-logo .logo { height: 34px; }
  .rn-links { display: none; }
  .rn-burger { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .rn-menu, .rn-menu a, .rn-panel-body summary svg { transition: none; } }

/* The bar's contents held to the page column on desktop: the 940px column on
   /retreats (Karen, 14 Oct 2026), the site's 1180px column everywhere else.
   In those columns the menu must not wrap: tighter gaps, one line each. */
@media (min-width: 1081px) {
  .rn { padding: 0 max(32px, calc((100% - 1180px) / 2)); }
  .rn.rn-flow { padding: 0 max(32px, calc((100% - 940px) / 2)); }
  .rn-links { gap: 22px; font-size: 14px; }
  .rn-login, .rn-top, .rn-cta { white-space: nowrap; }
  .rn-cta { padding: 13px 20px; letter-spacing: .16em; }
}

/* the cart, beside Account, only when it holds something (19 Oct 2026) */
.rn-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); color: var(--text); flex: none; transition: border-color .25s; }
.rn-cart:hover { border-color: var(--gold); }
.rn-cart:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rn-cart-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold, #0A0A0A); font-family: var(--utility); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.rn.on-dark .rn-cart { color: #EFE7D6; border-color: rgba(239, 231, 214, .35); }
.rn-cart-m { display: none; }
@media (max-width: 1080px) { .rn-cart-m { display: inline-flex; margin-left: auto; margin-right: 14px; } }


/* Search (app/globals.css) */
.nav-find { position: relative; display: flex; align-items: center; }
.nav-find-btn { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: color .3s, border-color .3s; }
.nav-find-btn:hover, .nav-find-btn.is-open { color: var(--text); border-color: var(--gold-muted); }
.nav-find-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.nav-find-panel { position: absolute; top: calc(100% + 17px); right: -10px; width: min(340px, calc(100vw - 32px)); padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 18px 40px var(--shadow); z-index: 70; }
.nav-find-panel input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn); padding: 11px 20px; color: var(--text); font-family: var(--body); font-size: 14px; outline: none; transition: border-color .3s; }
.nav-find-panel input:focus { border-color: var(--gold-muted); }
.nav-find-panel input::placeholder { color: var(--muted); }