/* =====================================================================
   GatherRound Design System · v1.0.1
   Source of truth: the GatherRound Brand Kit (Oct 2026).

   SAFETY CONTRACT
   - Every rule is scoped to a class that starts with "gr-" (or a token on :root).
   - No bare element selectors, no theme overrides, no Beaver Builder globals.
   - Does not touch existing .gr-vp / .gr-vs / .grm pages (different names).
   - Does not touch Beehiiv posts (.rendered-post) or Themer layouts.
   => Activating this plugin changes nothing until a page opts in by using a class.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* fields + text */
  --gr-paper:#f1f1ea;
  --gr-ink:#063f39;
  --gr-night:#042b27;          /* header + footer frame */
  /* light */
  --gr-ember:#d4a157;          /* gold = action: buttons, links on ink, focus */
  --gr-lake:#82b9c4;           /* numerals, eyebrows on ink, hairlines */
  /* links: slate = GatherRound, rust = The Campfire Method */
  --gr-slate:#4b737b;  --gr-lake-light:#9fd0d9;
  --gr-rust:#9e5a31;   --gr-rust-light:#e0a578;
  /* lines */
  --gr-line:rgba(6,63,57,.2);
  --gr-line-inv:rgba(241,241,234,.2);
  /* type */
  --gr-display:'Oswald',Impact,'Arial Narrow',sans-serif;
  --gr-text:'Lora',Georgia,'Times New Roman',serif;
  --gr-h1:clamp(2.6rem,1.6rem + 5vw,5rem);
  --gr-h2:clamp(1.85rem,1.3rem + 2.6vw,3rem);
  --gr-h3:clamp(1.35rem,1.1rem + 1.1vw,1.75rem);
  --gr-body:clamp(1.0625rem,.98rem + .42vw,1.1875rem);
  --gr-leading:1.72;
  /* layout */
  --gr-measure:34rem;  --gr-wide:60rem;
  --gr-pad-y:clamp(4rem,9vw,7.5rem);
  --gr-pad-x:clamp(1.25rem,5vw,2rem);
  --gr-radius:2px;     --gr-rule:6px;
  --gr-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. Sections (fields) ----------
   Use as:  <section class="gr-sec gr-sec--paper">…  (HTML module)
   or as a Beaver Builder ROW class:  gr-sec gr-sec--ink
   In Beaver Builder, leave the row's own background and padding empty. */
.gr-sec{
  font-family:var(--gr-text);font-size:var(--gr-body);line-height:var(--gr-leading);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.gr-sec--paper{background-color:var(--gr-paper);color:var(--gr-ink)}
.gr-sec--ink{background-color:var(--gr-ink);color:var(--gr-paper)}
.gr-sec--night{background-color:var(--gr-night);color:var(--gr-paper)}
section.gr-sec,div.gr-sec:not(.fl-row){padding:var(--gr-pad-y) var(--gr-pad-x);display:flow-root}
/* Beaver Builder row: paint the content wrap, which is what BB pads */
.fl-row.gr-sec > .fl-row-content-wrap{padding:var(--gr-pad-y) var(--gr-pad-x)}
.fl-row.gr-sec.gr-sec--paper > .fl-row-content-wrap{background-color:var(--gr-paper)}
.fl-row.gr-sec.gr-sec--ink > .fl-row-content-wrap{background-color:var(--gr-ink)}
.fl-row.gr-sec.gr-sec--night > .fl-row-content-wrap{background-color:var(--gr-night)}
.gr-sec--flush-top.gr-sec,.fl-row.gr-sec--flush-top > .fl-row-content-wrap{padding-top:0}

/* reading column + wide column */
.gr-in{max-width:var(--gr-measure);margin-left:auto;margin-right:auto}
.gr-wide{max-width:var(--gr-wide);margin-left:auto;margin-right:auto}
.gr-in > * + *,.gr-sec .gr-in > * + *,.gr-hero .gr-in > * + *{margin-top:1.55em}  /* beats the heading/paragraph margin reset */

/* ---------- 3. Type inside a section ----------
   Plain elements inside .gr-sec (or a Rich Text module with class gr-prose) take the brand. */
.gr-sec :is(h1,h2,h3,h4),.gr-prose :is(h1,h2,h3,h4),.gr-display{
  font-family:var(--gr-display);text-transform:uppercase;font-weight:600;line-height:1.08;
  letter-spacing:.005em;color:inherit;text-wrap:balance;margin:0;
}
.gr-sec h1,.gr-prose h1,.gr-h1{font-size:var(--gr-h1)}
.gr-sec h2,.gr-prose h2,.gr-h2{font-size:var(--gr-h2)}
.gr-sec h3,.gr-prose h3,.gr-h3{font-size:var(--gr-h3);font-weight:500}
.gr-sec h4,.gr-prose h4{font-size:1.1rem;font-weight:500;letter-spacing:.06em}
.gr-sec :is(p,li,blockquote,figcaption),.gr-prose :is(p,li,blockquote,figcaption){color:inherit;font-family:inherit}
.gr-sec p,.gr-prose p{margin:0}
.gr-prose.gr-prose > * + *{margin-top:1.4em}
.gr-sec strong,.gr-prose strong{font-weight:600}

/* italic kicker that leads into a display title: <span class="gr-kick">Keep the</span> */
.gr-kick{display:block;font-family:var(--gr-text);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:.6em;line-height:1.02;margin-bottom:.06em}
.gr-eyebrow{display:block;font-family:var(--gr-display);font-weight:500;font-size:.75rem;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.4;color:var(--gr-slate)}
.gr-sec--ink .gr-eyebrow,.gr-sec--night .gr-eyebrow{color:var(--gr-lake)}
.gr-sub{display:block;font-family:var(--gr-display);font-weight:400;text-transform:uppercase;letter-spacing:.15em;
  font-size:clamp(.8rem,.72rem + .38vw,1rem);color:var(--gr-slate)}
.gr-sec--ink .gr-sub,.gr-sec--night .gr-sub{color:var(--gr-lake)}
.gr-lede{font-size:1.12em}
.gr-note{font-size:.88rem;font-style:italic;opacity:.75}
/* registered mark: first mention of The Campfire Method® on a page */
sup.gr-reg,.gr-reg{font-size:.55em;vertical-align:super;line-height:0;letter-spacing:0;margin-left:.04em}

/* links: slate = GatherRound (default), rust = The Campfire Method */
.gr-sec a:not([class*="gr-btn"]):not([class*="gr-arrow"]),.gr-prose a:not([class*="gr-btn"]):not([class*="gr-arrow"]){
  color:var(--gr-slate);font-weight:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;transition:opacity .15s ease}
.gr-sec a:not([class*="gr-btn"]):not([class*="gr-arrow"]):hover,.gr-prose a:not([class*="gr-btn"]):not([class*="gr-arrow"]):hover{opacity:.7;color:var(--gr-slate)}
.gr-sec--ink a:not([class*="gr-btn"]):not([class*="gr-arrow"]),.gr-sec--night a:not([class*="gr-btn"]):not([class*="gr-arrow"]),
.gr-sec--ink a:not([class*="gr-btn"]):not([class*="gr-arrow"]):hover,.gr-sec--night a:not([class*="gr-btn"]):not([class*="gr-arrow"]):hover{color:var(--gr-lake-light)}
.gr-sec a.gr-link--cm,.gr-sec a.gr-link--cm:hover,.gr-prose a.gr-link--cm{color:var(--gr-rust)}
.gr-sec--ink a.gr-link--cm,.gr-sec--night a.gr-link--cm,.gr-sec--ink a.gr-link--cm:hover{color:var(--gr-rust-light)}
.gr-sec :is(a,button):focus-visible,.gr-prose a:focus-visible,[class*="gr-btn"]:focus-visible,[class*="gr-arrow"]:focus-visible{
  outline:2px solid var(--gr-ember);outline-offset:3px;border-radius:var(--gr-radius)}

/* images inside our sections never distort */
.gr-sec img,.gr-prose img,.gr-header img,.gr-footer img{max-width:100%;height:auto}

/* ---------- 4. Numbered section header ----------
   Only when the sections really are a sequence.
   <div class="gr-numhead"><span class="gr-numhead__num" aria-hidden="true">3</span>
     <span class="gr-numhead__kick">the</span><h2 class="gr-numhead__title">Palette</h2></div> */
.gr-numhead{position:relative;margin-bottom:2.5rem}
.gr-numhead__num{position:absolute;left:-.05em;top:50%;transform:translateY(-53%);
  font-family:var(--gr-text);font-style:italic;font-weight:400;font-size:clamp(6.5rem,3.4rem + 11vw,11rem);
  line-height:.78;color:rgba(130,185,196,.55);z-index:0;pointer-events:none;user-select:none;-webkit-user-select:none}
.gr-sec--ink .gr-numhead__num,.gr-sec--night .gr-numhead__num{color:rgba(130,185,196,.24)}
.gr-numhead__kick{position:relative;z-index:1;display:block;margin-left:2.15rem;
  font-family:var(--gr-text);font-style:italic;font-weight:400;font-size:clamp(1.2rem,.95rem + 1.15vw,1.85rem);line-height:1.05}
.gr-numhead__title{position:relative;z-index:1;margin-left:2.15rem !important}
@media (max-width:34rem){.gr-numhead__num{font-size:5.5rem}}

/* ---------- 5. Dividers ---------- */
.gr-break{height:var(--gr-rule);background:var(--gr-ember)}          /* once per page, under the hero */
.gr-sbreak{width:4.5rem;height:1px;background:rgba(130,185,196,.7);margin:0 auto 3.2rem} /* between two paper sections */

/* ---------- 6. Hero ---------- */
.gr-hero{background-color:var(--gr-ink);color:var(--gr-paper);text-align:center;
  font-family:var(--gr-text);font-size:var(--gr-body);line-height:var(--gr-leading);
  padding:clamp(3.5rem,8vw,6rem) var(--gr-pad-x) clamp(3rem,6vw,4.5rem);display:flow-root}
.fl-row.gr-hero > .fl-row-content-wrap{background-color:var(--gr-ink);padding:clamp(3.5rem,8vw,6rem) var(--gr-pad-x) clamp(3rem,6vw,4.5rem)}
.fl-row.gr-hero{padding:0}
.gr-hero :is(h1,h2){font-family:var(--gr-display);text-transform:uppercase;font-weight:600;line-height:1.08;color:inherit;text-wrap:balance;margin:0}
.gr-hero h1{font-size:var(--gr-h1);margin-top:1rem}
.gr-hero .gr-eyebrow,.gr-hero .gr-sub{color:var(--gr-lake)}
.gr-hero__lede{max-width:33rem;margin:2rem auto 0;font-size:1.02rem;line-height:1.62;opacity:.84}
.gr-hero a:not([class*="gr-btn"]):not([class*="gr-arrow"]){color:var(--gr-lake-light)}

/* ---------- 7. Buttons (gold = action) ----------
   HTML: <a class="gr-btn" href="…">Get the guide</a>
   Beaver Builder Button module: set the MODULE class to  gr-btn  (or gr-btn gr-btn--ghost / gr-btn--line). */
a.gr-btn,button.gr-btn,
.fl-builder-content .fl-module.gr-btn a.fl-button,
.fl-builder-content .fl-module.gr-btn a.fl-button:visited{
  display:inline-flex;align-items:center;justify-content:center;min-height:3.1rem;
  font-family:var(--gr-display);text-transform:uppercase;letter-spacing:.12em;font-weight:600;line-height:1.2;
  font-size:clamp(.85rem,.8rem + .3vw,1rem);text-decoration:none;
  background:var(--gr-ember);color:var(--gr-ink);border:0;border-radius:var(--gr-radius);box-shadow:none;
  padding:.95rem 2.1rem;cursor:pointer;transition:transform .15s ease,filter .15s ease,background-color .15s ease}
.fl-builder-content .fl-module.gr-btn a.fl-button *{color:inherit}
a.gr-btn:hover,button.gr-btn:hover,.fl-builder-content .fl-module.gr-btn a.fl-button:hover{
  background:var(--gr-ember);color:var(--gr-ink);filter:brightness(1.07);transform:translateY(-1px);opacity:1}
/* ghost: second choice, on ink */
a.gr-btn.gr-btn--ghost,.fl-builder-content .fl-module.gr-btn.gr-btn--ghost a.fl-button{
  background:transparent;border:1px solid rgba(212,161,87,.65);color:var(--gr-ember);padding:.85rem 1.6rem}
a.gr-btn.gr-btn--ghost:hover,.fl-builder-content .fl-module.gr-btn.gr-btn--ghost a.fl-button:hover{
  background:rgba(212,161,87,.13);color:var(--gr-ember);filter:none}
/* line: utility action on paper (downloads). Never an icon. */
a.gr-btn.gr-btn--line,.fl-builder-content .fl-module.gr-btn.gr-btn--line a.fl-button{
  background:transparent;border:1px solid var(--gr-ink);color:var(--gr-ink);font-weight:500;font-size:.85rem;padding:.7rem 1.25rem;min-height:3rem}
a.gr-btn.gr-btn--line:hover,.fl-builder-content .fl-module.gr-btn.gr-btn--line a.fl-button:hover{
  background:var(--gr-ink);color:var(--gr-paper);filter:none}
@media (max-width:34rem){.gr-btn--block-sm,a.gr-btn.gr-btn--block-sm{width:100%}}

/* ---------- 8. Arrow link ----------
   <a class="gr-arrow" href="…">Explore team workshops →</a>
   slate on paper by default (GatherRound), add gr-arrow--cm for The Campfire Method (rust); ember on ink.
   Faint resting rule; on hover a solid rule draws in left to right. */
a.gr-arrow{display:inline-block;font-family:var(--gr-display);text-transform:uppercase;font-weight:500;
  letter-spacing:.12em;font-size:.85rem;line-height:1.3;text-decoration:none;padding:.45rem 0;
  color:var(--gr-slate);--gr-rest:rgba(75,115,123,.45);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--gr-rest),var(--gr-rest));
  background-repeat:no-repeat;background-position:0 100%,0 100%;background-size:0% 1px,100% 1px;
  transition:background-size .4s var(--gr-ease)}
a.gr-arrow:hover,a.gr-arrow:focus-visible{background-size:100% 1px,100% 1px;color:var(--gr-slate);opacity:1}
a.gr-arrow.gr-arrow--cm,a.gr-arrow.gr-arrow--cm:hover{color:var(--gr-rust);--gr-rest:rgba(158,90,49,.45)}
.gr-sec--ink a.gr-arrow,.gr-sec--night a.gr-arrow,.gr-hero a.gr-arrow,.gr-footer a.gr-arrow,
.gr-sec--ink a.gr-arrow:hover,.gr-sec--night a.gr-arrow:hover,.gr-footer a.gr-arrow:hover{color:var(--gr-ember);--gr-rest:rgba(212,161,87,.4)}

/* ---------- 9. Offer trio (saved row) ----------
   <div class="gr-trio"><div class="gr-trio__item"><span class="gr-eyebrow">One leader</span><h3>…</h3><p>…</p><a class="gr-arrow">…</a></div>…</div>
   <div class="gr-guide"><p><b>Want to teach it?</b> …</p><a class="gr-arrow gr-arrow--cm">Become a Guide →</a></div> */
.gr-trio{display:grid;gap:0;margin-top:2.75rem}
.gr-trio__item{padding:1.75rem 0 2rem;border-top:1px solid var(--gr-line);display:flex;flex-direction:column}
.gr-sec--ink .gr-trio__item,.gr-sec--night .gr-trio__item{border-top-color:var(--gr-line-inv)}
.gr-trio__item h3{margin-top:.5rem !important;font-size:clamp(1.35rem,1.15rem + .8vw,1.65rem)}
.gr-trio__item p{margin-top:.6rem;font-size:.98rem;opacity:.88}
.gr-trio__item .gr-arrow{margin-top:1.1rem;align-self:flex-start}
@media (min-width:52rem){
  .gr-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
  .gr-trio__item .gr-arrow{margin-top:auto;padding-top:1.4rem}
}
.gr-guide{margin-top:1.75rem;padding:1.15rem 1.25rem;border:1px solid var(--gr-line);border-radius:var(--gr-radius);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between}
.gr-sec--ink .gr-guide,.gr-sec--night .gr-guide{border-color:var(--gr-line-inv)}
.gr-guide p{font-size:.97rem;flex:1 1 18rem;min-width:0}
.gr-guide p b{font-family:var(--gr-display);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;margin-right:.35rem}

/* ---------- 10. Figures (Eric's engravings) ---------- */
.gr-fig{margin:clamp(3rem,6vw,4.5rem) auto;max-width:420px;text-align:center}
.gr-fig img{display:block;width:100%;height:auto}
.gr-dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem 1.25rem;margin:3rem auto 0;max-width:54rem;text-align:center}
.gr-dims img{display:block;width:100%;max-width:9.5rem;height:6.5rem;object-fit:contain;margin:0 auto}
.gr-dims figcaption{margin-top:.9rem;font-family:var(--gr-display);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.88rem;line-height:1.3}
@media (min-width:46rem){.gr-dims{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gr-photo img{border-radius:var(--gr-radius);filter:grayscale(.12)}

/* ---------- 11. Header frame (Beaver Themer header layout) ----------
   Row class: gr-header. Two Photo modules: wordmark with class gr-hide-sm, icon with class gr-show-sm.
   The CTA Button module uses gr-btn (desktop) — on small screens add gr-btn--ghost via the gr-header__cta class. */
.gr-header,.fl-row.gr-header > .fl-row-content-wrap{background-color:var(--gr-night);color:var(--gr-paper);border-bottom:1px solid rgba(130,185,196,.35)}
.gr-header__nav a,.gr-header .fl-menu a,.gr-header .uabb-creative-menu a{
  font-family:var(--gr-display);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--gr-paper)}
.gr-header__nav a:hover,.gr-header .fl-menu a:hover,.gr-header .uabb-creative-menu a:hover{color:var(--gr-ember)}
.gr-header .current-menu-item > a,.gr-header .current-menu-ancestor > a{box-shadow:inset 0 -1px 0 var(--gr-ember)}
@media (max-width:37.5rem){
  .fl-builder-content .fl-module.gr-btn.gr-header__cta a.fl-button,a.gr-btn.gr-header__cta{
    background:transparent;border:1px solid rgba(212,161,87,.7);color:var(--gr-ember);font-size:.68rem;padding:.45rem .7rem;min-height:2.25rem;letter-spacing:.1em}
}

/* ---------- 12. Footer frame ---------- */
.gr-footer,.fl-row.gr-footer > .fl-row-content-wrap{background-color:var(--gr-night);color:var(--gr-paper);
  font-family:var(--gr-text);font-size:.95rem;line-height:1.6}
.gr-footer h4,.gr-footer .gr-footer__head{margin:0 0 .7rem;font-family:var(--gr-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;color:var(--gr-lake)}
.gr-footer ul.gr-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.gr-footer ul.gr-footer__links li{font-size:.92rem;line-height:1.3;margin:0}
.gr-footer a:not([class*="gr-btn"]):not([class*="gr-arrow"]){color:var(--gr-paper);text-decoration:none;font-weight:inherit;transition:color .15s ease}
.gr-footer a:not([class*="gr-btn"]):not([class*="gr-arrow"]):hover{color:var(--gr-ember)}
.gr-footer address{font-style:normal;font-size:.9rem;line-height:1.75;opacity:.9}
.gr-footer__legal{font-size:.78rem;opacity:.7;border-top:1px solid var(--gr-line-inv);padding-top:1rem}
.gr-footer__news{background-color:var(--gr-ink)}
/* social icons: bare, lake, gold on hover; 44px tap target */
.gr-social{display:flex;gap:.25rem;margin:.9rem 0 0;padding:0;list-style:none}
.gr-social a{display:inline-flex !important;align-items:center;justify-content:flex-start;width:2.75rem;height:2.75rem;color:var(--gr-lake) !important;transition:color .15s ease}
.gr-social a:hover{color:var(--gr-ember) !important}
.gr-social svg{width:1.5rem;height:1.5rem}

/* ---------- 14. Page wrapper (v1.0.1) ----------
   For pages built in one HTML module, like the reference page.
   Wrap everything in <div class="gr-page">. It runs edge to edge whatever the
   row's width settings, and removes Beaver Builder's default row/module gaps
   around it. Only rows that contain .gr-page are affected. */
.gr-page{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.fl-row:has(.gr-page) > .fl-row-content-wrap{padding:0 !important}
.fl-row:has(.gr-page) .fl-row-content{max-width:none !important}
.fl-module:has(> .fl-module-content > .gr-page),.fl-module-content:has(> .gr-page){margin:0 !important}

/* ---------- 15. Interim: the current floating header over a gr-hero (v1.0.1) ----------
   The site header floats over the top of the page. Until the header is rebuilt
   (task 3.3), a page that opens with .gr-page > .gr-hero gives the header room,
   keeps it above the hero, and recolors it for the dark field, the same way
   /virtual-presentations/ and /vistage-resources/ already do.
   Applies ONLY on pages that contain .gr-page .gr-hero. Delete this block when the new header ships. */
.gr-page{--gr-headroom:5rem}
.gr-page > .gr-hero:first-child{padding-top:calc(clamp(3.5rem,8vw,6rem) + var(--gr-headroom))}
@media (max-width:34rem){.gr-page > .gr-hero:first-child{padding-top:calc(1.5rem + var(--gr-headroom))}}
body:has(.gr-page .gr-hero) header.fl-builder-content{z-index:50}
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-photo-img{filter:brightness(0) invert(1);opacity:.93}
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-button,
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-button *{color:#f1f1ea !important}
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-button{border-color:rgba(241,241,234,.55) !important;background:transparent !important}
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-button:hover{background:rgba(241,241,234,.12) !important}
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-hamburger-box{background:transparent !important}
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-hamburger-inner,
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-hamburger-inner::before,
body:has(.gr-page .gr-hero) header.fl-builder-content .pp-hamburger-inner::after{background-color:#f1f1ea !important}

/* ---------- 13. Utilities ---------- */
@media (max-width:37.5rem){.gr-hide-sm{display:none !important}}
@media (min-width:37.5001rem){.gr-show-sm{display:none !important}}
.gr-center{text-align:center}
.gr-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  a.gr-btn:hover,.fl-builder-content .fl-module.gr-btn a.fl-button:hover{transform:none}
  a.gr-arrow{transition:none}
}