/* ============================================================
   REALITY — light re-theme of the Evergreen content
   Loaded AFTER each page's embedded stylesheet, so the page keeps
   its own component layout and this file only changes the canvas,
   the chrome (header / nav / footer accents) and the palette:
   white canvas, charcoal text, deep green doing the talking,
   lime held back to hover states and rules.
   Fonts per GPC brand guidelines: Manrope / Ovo / Palanquin.
   ============================================================ */

/* ---------- canvas ---------- */
:root{--moss:#98A85C}
body{background:#fff;color:#3F4A44}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.skip{background:var(--deep);color:#fff}

/* ---------- announcement band ---------- */
.band{background:#fff!important;color:var(--deep)!important;border-bottom:1px solid rgba(20,69,49,.14);font-family:var(--body);font-weight:600;font-size:17px}
.band .in{max-width:var(--max);margin:0 auto;padding:12px var(--gut);display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.band a{color:var(--deep)!important;font-weight:700;border-bottom:1px solid rgba(20,69,49,.35)}
.band a:hover{border-bottom-color:var(--deep)}
.band a::after{content:"\2192";display:inline-block;margin-left:7px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.band a:hover::after{transform:translateX(5px)}

/* ---------- page hero: white, quiet, Reality-style ---------- */
/* ---------- page banner: ONE uniform treatment site-wide ----------
   Every page had its own take on the tree watermark (percentage-sized,
   bottom-cropped), so it looked different everywhere. Now: identical
   padding, one heading scale, and a fixed-size tree that is always fully
   visible, vertically centered at the right edge.
   (z-index:1 also keeps the banner under the top bar's dropdowns — the old
   evergreen element rule `header{z-index:200}` hits this <header> too.) */
.page-hero{
  position:relative;z-index:1;background:#fff;overflow:hidden;
  border-bottom:1px solid rgba(20,69,49,.1);
  /* uniform banner height whether or not a page has a standfirst — the
     content centers vertically and the tree always fits uncropped */
  min-height:clamp(280px,24vw,340px);
  display:flex;align-items:center;
  padding:clamp(36px,4.5vw,56px) 0!important;
}
.page-hero>.wrap{width:100%}
/* tree sized/positioned to match the evergreen pages: bottom-anchored at
   the right edge with a slight right bleed — and because every banner is
   the same height, the crop is identical on every page */
.page-hero::after{
  content:"";position:absolute;right:-4%;bottom:0;
  width:min(46%,560px);aspect-ratio:900/1139;
  background:url("logo-mark.png") bottom/contain no-repeat;
  opacity:.09;pointer-events:none;
}
.page-hero h1{
  color:var(--deep);font-weight:700;
  font-size:clamp(36px,4.8vw,62px)!important;
  line-height:1.06!important;max-width:16ch;
}
.page-stand{color:#66756D!important;font-size:clamp(18px,1.8vw,23px)!important}
@media(max-width:760px){.page-hero::after{display:none}}
.crumb{color:#9AA5A0}
.crumb a{color:var(--mid)}
.crumb a:hover{color:var(--deep)}

/* ---------- page body: white with softly held cards ---------- */
.page-body{background:#fff}
.callout,.side,.gc{background:#FAFAF7}
.two-col{align-items:start}

/* primary button reads deep green on the light canvas */
.btn.b-lime{background:var(--deep);color:#fff}
.btn.b-lime:hover{background:var(--deeper);color:#fff}

/* ---------- accent calming: full-strength lime keeps one job per screen
   and otherwise lives on dark surfaces (footer, dark cards). On the white
   canvas, tick-marks use the quieter moss and button hovers deepen
   instead of flashing lime. ---------- */
.kick::before,.rule-h::before,.p-date::before{background:var(--moss)}
ul.list li::before{background:var(--moss)}
.hero .card{border-top-color:var(--moss)}
.two-col.updates .side{border-top-color:var(--moss)!important}
.ev .cal b{color:var(--deep)}
.row:hover em{color:var(--deep)}
.btn.b-deep:hover{background:var(--deeper);color:#fff}
.btn.b-line:hover{color:#fff}
.page-body .b-ghost,.page-hero .b-ghost{border-color:var(--deep);color:var(--deep)}
.page-body .b-ghost:hover,.page-hero .b-ghost:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.page-body .arrow:not(.dark){color:var(--mid)}

/* ============================================================
   HEADER — white bar, logo left, five dropdowns, Give at right
   ============================================================ */
.r-head{position:sticky;top:0;z-index:250;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(20,69,49,.12)}
.r-bar{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:76px;display:flex;align-items:center;gap:clamp(18px,3vw,44px)}
/* brand lockup — the full GraceLogo_1 artwork, name embedded, nothing typed beside it */
.r-logo{display:flex;align-items:center;margin-right:auto}
.r-logo img{height:58px;width:auto;display:block}

.r-nav{display:flex;align-items:center;gap:clamp(4px,1vw,10px)}
.r-item{position:relative}
.r-item>a,.r-item>button{
  display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--title);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#2D2D2D;padding:12px 13px;transition:color .2s var(--ease);
}
.r-item>a:hover,.r-item>button:hover{color:var(--deep)}
.r-item>button::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease);flex:0 0 auto}
.r-item.open>button::after{transform:rotate(225deg) translateY(-2px)}
.r-item.open>button{color:var(--deep)}

.r-drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:250px;
  background:#fff;border:1px solid rgba(20,69,49,.14);border-top:3px solid var(--moss);
  box-shadow:0 24px 54px rgba(17,34,26,.14);
  opacity:0;visibility:hidden;transition:.25s var(--ease);padding:12px 0;
}
.r-item.open .r-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.r-drop a{display:block;padding:10px 26px;font-family:var(--body);font-weight:500;font-size:15.5px;color:#404B45;line-height:1.4;white-space:nowrap}
.r-drop a:hover{color:var(--deep);background:#F3F6F1}
.r-drop .grp{display:block;padding:14px 26px 4px;font-family:var(--body);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);border-top:1px solid rgba(20,69,49,.1);margin-top:8px}

.r-give{
  background:var(--deep);color:#fff;font-family:var(--title);font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:13px 28px;transition:.25s var(--ease);
}
.r-give:hover{background:var(--deeper)}

/* burger — mobile only */
.r-burger{display:none;background:none;border:1px solid rgba(20,69,49,.3);cursor:pointer;padding:11px 14px;color:var(--deep)}
.r-burger s{display:block;width:19px;text-decoration:none}
.r-burger s i{display:block;height:2px;background:currentColor;margin:4px 0}

@media(max-width:1060px){
  .r-nav,.r-give.desk{display:none}
  .r-burger{display:block}
  .r-bar{height:66px}
  .r-logo img{height:48px}
}

/* ---------- mobile drawer: white, accordion sections ---------- */
.r-scrim{position:fixed;inset:0;background:rgba(17,34,26,.5);opacity:0;visibility:hidden;transition:.35s var(--ease);z-index:300}
.r-scrim.on{opacity:1;visibility:visible}
.r-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);background:#fff;color:#2D2D2D;z-index:310;
  transform:translateX(100%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;padding:22px clamp(22px,4vw,36px) 36px;overflow-y:auto;
  border-left:3px solid var(--moss);box-shadow:-30px 0 60px rgba(0,0,0,.22);
}
.r-drawer.on{transform:none}
.rd-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.rd-close{background:none;border:1px solid rgba(20,69,49,.3);color:var(--deep);font-family:var(--title);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:10px 18px}
.rd-close:hover{background:var(--deep);color:#fff}
.rd-give{display:block;background:var(--deep);color:#fff;text-align:center;font-family:var(--title);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:15px 20px;margin:0 0 22px}
.rd-give:hover{background:var(--deeper)}
.r-acc{border-bottom:1px solid rgba(20,69,49,.14)}
.r-acc:first-of-type{border-top:1px solid rgba(20,69,49,.14)}
.r-acc>button{width:100%;background:none;border:0;color:var(--deep);cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:var(--title);font-weight:600;font-size:19px;letter-spacing:-.02em;text-align:left}
.r-acc>button em{font-style:normal;color:var(--mid);transition:transform .3s var(--ease)}
.r-acc.open>button em{transform:rotate(45deg)}
.r-acc .in{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.r-acc.open .in{max-height:720px}
.r-acc .in ul{list-style:none;margin:0;padding:0 0 14px}
.r-acc .in a{display:block;padding:7px 0;color:#5A6A62;font-size:15.5px}
.r-acc .in a:hover{color:var(--deep)}
.r-acc .in li.grp{font-family:var(--body);font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);padding:14px 0 4px;margin-top:6px;border-top:1px solid rgba(20,69,49,.14)}
.rd-foot{margin-top:auto;padding-top:24px;border-top:1px solid rgba(20,69,49,.14);font-size:14px;color:#66756D;line-height:1.75}
.rd-foot strong{color:var(--deep)}
.rd-foot a{color:var(--deep);font-weight:600}

/* ---------- footer stays deep green: the brand anchor ---------- */

/* ---------- motion: one gentle reveal per element, honoring reduced-motion.
   .rv is only ever added by reveal.js, so content stays visible without JS. */
.rv{opacity:0;transform:translateY(14px)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none}}

/* ---------- compare-bar ---------- */
.optbar{background:#fff!important;color:var(--deep)!important;border-top:1px solid rgba(20,69,49,.16);border-right:1px solid rgba(20,69,49,.16)}

/* ---------- footer: social links (written out, realitysf-style) ---------- */
.fsoc{display:flex;flex-direction:column;align-items:flex-start;margin-top:2px}
.fsoc a{padding:5px 0;color:var(--dim)}
.fsoc a:hover{color:var(--lime)}