/* Evergreen Industries: shared components.
   Loaded after each page's own <style> (and before type.css), so these rules
   refine the per-page defaults: official logo lockups, the age gate, the
   phone menu, page transitions, button feel and small form details. */

:root{--eg-ease:cubic-bezier(.2,.7,.2,1);--eg-ease-io:cubic-bezier(.7,0,.2,1);
  --eg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Official logo lockups ---------- */
.brand{gap:0;flex-shrink:0}
.brand .brand-logo{height:54px;width:auto;display:block;transition:height .35s var(--eg-ease)}
.nav.scrolled .brand .brand-logo{height:46px}
.foot-logo{display:inline-block;margin-bottom:24px}
.foot-logo img{height:72px;width:auto;display:block}
@media (max-width:520px){.lic .sep{display:none}.lic .loc{display:block;margin-top:6px}}
@media (max-width:900px){
  .brand .brand-logo{height:46px}
  .nav.scrolled .brand .brand-logo{height:42px}
}

/* Large faded brand mark behind some page heroes (was an upscaled PNG). */
img.leaf-bg{image-rendering:auto}

/* ---------- Age gate ---------- */
.agegate{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 36%,rgba(14,42,37,.82) 0%,rgba(8,26,22,.94) 60%,rgba(5,16,13,.98) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);
  transition:opacity .75s var(--eg-ease) .1s,visibility 0s linear .85s
}
.agegate:focus{outline:none}
@media (max-width:700px){.agegate{-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}}
/* Freeze the page's own loops behind the gate so the blurred backdrop stays still. */
html.gated .stage *,html.gated .float,html.gated .float img,html.gated .marquee-track,html.gated .hero *{animation-play-state:paused!important}
.agegate::before{
  content:"";position:absolute;left:50%;top:38%;width:min(92vw,780px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(56,173,14,.24) 0%,rgba(56,173,14,.08) 38%,rgba(56,173,14,0) 64%);
  animation:ag-breathe 7s ease-in-out infinite
}
.agegate::after{
  content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:var(--eg-grain)
}
.agegate .box{position:relative;z-index:1;max-width:560px;width:100%;transition:opacity .55s var(--eg-ease),transform .7s var(--eg-ease),filter .55s ease}
.agegate .ag-ring{position:absolute;left:50%;top:0;width:min(420px,84vw);aspect-ratio:1;transform:translate(-50%,-18%);border-radius:50%;
  border:1px dashed rgba(143,181,137,.22);pointer-events:none;animation:ag-spin 60s linear infinite}
.agegate .ag-logo{position:relative;width:min(330px,66vw);margin:0 auto 30px}
.agegate .ag-logo img,.agegate .ag-logo svg{display:block;width:100%;height:auto;margin:0;overflow:visible}
/* While the animated logo is being prepared the static image stays hidden;
   if the script never takes over it fades in on its own. */
html.gated .agegate .ag-logo:not(.ag-live) img{opacity:0;animation:ag-show .6s ease 1.2s forwards}
.agegate .eg{display:none}
.agegate h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(34px,5vw,50px);line-height:1.08;color:#fff;margin:0 0 16px}
.agegate p{color:var(--mist);font-size:15px;line-height:1.7;max-width:400px;margin:0 auto 30px}
.agegate .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.agegate .ag-legal{margin:26px auto 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);opacity:.8}

/* The logo grows in: each leaf outline draws, then fills; the wordmark rises letter by letter. */
.ag-live .m{fill-opacity:0;stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:ag-draw 1.25s var(--eg-ease) forwards,ag-fill .8s ease forwards;
  animation-delay:calc(.12s + var(--i) * .11s),calc(.85s + var(--i) * .08s)}
.ag-live .ag-mark{transform-box:fill-box;transform-origin:50% 100%;animation:ag-rise 1.6s var(--eg-ease) both}
.ag-live .w{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:ag-letter .9s var(--eg-ease) forwards;animation-delay:calc(.95s + var(--i) * .035s)}
/* Copy fades up on its own after 1.4s; once the animated logo is live
   (.ag-ready) it restarts in step with the logo instead. */
.agegate .ag-in{opacity:0;animation:ag-up .9s var(--eg-ease) 1.4s forwards}
.agegate.ag-ready .ag-in{animation-name:ag-up-b}
.agegate.ag-ready h2.ag-in{animation-delay:.95s}
.agegate.ag-ready p.ag-in{animation-delay:1.05s}
.agegate.ag-ready .row.ag-in{animation-delay:1.15s}
.agegate.ag-ready .ag-legal.ag-in{animation-delay:1.3s}
.agegate .ag-legal .sep{opacity:.6}
@media (max-width:520px){.agegate .ag-legal .sep{display:none}.agegate .ag-legal span{display:block}}

/* Leaving: the panel lifts and softens while the veil fades to reveal the page. */
.agegate.leaving{opacity:0;visibility:hidden;pointer-events:none}
.agegate.leaving .box{opacity:0;transform:translateY(-14px) scale(.97);filter:blur(8px)}

@keyframes ag-breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes ag-spin{to{rotate:360deg}}
@keyframes ag-show{to{opacity:1}}
@keyframes ag-draw{to{stroke-dashoffset:0}}
@keyframes ag-fill{to{fill-opacity:1;stroke-opacity:0}}
@keyframes ag-rise{from{transform:translateY(10px) scale(.94)}}
@keyframes ag-letter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ag-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ag-up-b{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* While the gate is up, hold the first-screen reveals so they play on entry. */
html.gated .reveal{opacity:0!important;transform:translateY(26px)!important}

/* ---------- Headline line reveals ----------
   Headlines marked .is-split carry their lines as .ln > .ln-i spans in the
   markup, so they are laid out from the first paint. With scripting on (the
   <head> script adds html.js before anything renders) each line waits below
   its mask and slides up when the headline, or the .reveal block around it,
   gets .in. */
.is-split .ln{display:block;overflow:hidden;padding:0 .14em .16em;margin:0 -.14em -.16em}
.is-split .ln-i{display:inline-block}
html .is-split.reveal,html.gated .is-split.reveal{opacity:1!important;transform:none!important}
.js .is-split .ln-i{transform:translateY(112%) rotate(2.5deg);transform-origin:0 100%;
  transition:transform 1.15s var(--eg-ease);transition-delay:calc(var(--d,0ms) + var(--li,0) * 110ms)}
.js .is-split.in .ln-i,.js .in .is-split .ln-i{transform:none}
html.gated .is-split .ln-i{transform:translateY(112%) rotate(2.5deg)!important}
/* Wait for the display face before sliding lines in, so they never land in the
   fallback font and then jump when Playfair arrives (capped at 1.5s). */
.js:not(.fonts-ready) .is-split .ln-i{transform:translateY(112%) rotate(2.5deg)!important}

/* Safety net: if motion.js never loads, show everything instead of leaving it hidden. */
.no-motion .reveal,.no-motion .is-split .ln-i{opacity:1!important;transform:none!important}
.no-motion .stage .bud,.no-motion .stage .orbit,.no-motion .stage .orbit-2,.no-motion .stage .tag,.no-motion .float{animation:none!important}

/* ---------- Touch: no grey/blue tap flash, no double-tap zoom delay ---------- */
a,button,label,summary,[role="button"],input[type="checkbox"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- Buttons: magnetic pull and a light that follows the pointer ---------- */
.btn-solid,.btn-pill,.btn-ghost{translate:var(--bx,0) var(--by,0);transition-property:background,border-color,color,box-shadow,transform,translate;transition-duration:.25s;transition-timing-function:var(--eg-ease)}
.btn-solid,.btn-pill{position:relative;overflow:hidden;isolation:isolate}
.btn-solid::before,.btn-pill::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(120px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),rgba(255,255,255,0) 60%)}
.btn-solid:hover::before,.btn-pill:hover::before{opacity:1}

/* ---------- Closing call-to-action: a soft light follows the pointer ---------- */
section.cta{position:relative;overflow:hidden}
section.cta.egx-glow::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(560px circle at var(--sx,50%) var(--sy,50%),rgba(56,173,14,.16),rgba(56,173,14,0) 62%)}
section.cta.egx-glow.is-lit::after{opacity:1}

/* Numbers that count up when they come into view */
[data-count]{font-variant-numeric:tabular-nums}

/* Reading progress on article pages */
#egx-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:1300;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent-deep,#006d00),var(--accent,#38ad0e) 70%,#7ff04a);box-shadow:0 0 12px rgba(56,173,14,.6);pointer-events:none}

/* ---------- Phone menu: full-screen panel that opens from the menu button ---------- */
@media (max-width:900px){
  .nav .brand{position:relative;z-index:1250}
  .nav-links{
    inset:0!important;width:100%!important;height:100vh;height:100dvh;padding:118px 28px 36px!important;
    justify-content:flex-start!important;align-items:stretch!important;gap:0!important;box-shadow:none!important;
    background:radial-gradient(110% 60% at 100% 0%,rgba(56,173,14,.18),rgba(56,173,14,0) 62%),linear-gradient(180deg,#0b231e,var(--ink-deep));
    transform:none!important;visibility:hidden;will-change:clip-path;
    clip-path:circle(0 at var(--egx-ox,calc(100% - 44px)) var(--egx-oy,44px));
    transition:clip-path .45s cubic-bezier(.55,0,.8,.25),visibility 0s linear .45s!important;overflow-y:auto;overscroll-behavior:contain
  }
  .nav-links.open{visibility:visible;clip-path:circle(150% at var(--egx-ox,calc(100% - 44px)) var(--egx-oy,44px));transition:clip-path .6s cubic-bezier(.22,1,.36,1),visibility 0s!important}
  .nav-links.egx-instant,.nav-links.egx-instant *,.nav-links.egx-instant::after{transition:none!important}
  .nav-links a.link:active,.nav-links a.link.egx-going{color:var(--accent)}
  .nav-links a.link.egx-going::before{color:var(--accent)}
  .nav-links::after{content:"Holyoke, Massachusetts";display:block;margin-top:auto;padding-top:28px;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);opacity:0;transition:opacity .5s}
  .nav-links.open::after{opacity:.85;transition-delay:.35s}
  .nav-links a.link{font-family:var(--serif);font-weight:500;font-size:clamp(38px,11vw,54px);letter-spacing:-.01em;text-transform:none;
    color:#fff;line-height:1.1;padding:12px 0 14px;border-bottom:1px solid rgba(143,181,137,.14);
    display:flex;align-items:baseline;justify-content:space-between;opacity:0;translate:0 26px;transition:opacity .45s,translate .6s var(--eg-ease),color .2s}
  .nav-links a.link::before{content:attr(data-n);order:2;font-family:var(--sans,Archivo,sans-serif);font-size:11px;letter-spacing:.2em;color:var(--sage)}
  .nav-links a.link::after{display:none}
  .nav-links a.link[aria-current="page"]{color:var(--accent)}
  .nav-links .btn-pill{margin-top:30px;text-align:center;padding:18px 24px;font-size:13px;opacity:0;translate:0 26px;transition:opacity .45s,translate .6s var(--eg-ease)}
  .nav-links.open a.link,.nav-links.open .btn-pill{opacity:1;translate:0 0}
  .nav-links.open > :nth-child(1){transition-delay:.06s}
  .nav-links.open > :nth-child(2){transition-delay:.11s}
  .nav-links.open > :nth-child(3){transition-delay:.16s}
  .nav-links.open > :nth-child(4){transition-delay:.21s}
  .nav-links.open > :nth-child(5){transition-delay:.28s}
  /* While the menu is open, let it be part of the page snapshot so a page
     transition fades the whole menu out instead of revealing the page under it. */
  html.egx-menu-open .nav{view-transition-name:none}
  #egx-navscrim{display:none}
}
@media (min-width:901px){.nav-links a.link{text-transform:uppercase}}
.nav-links .btn-pill{text-transform:uppercase}

/* ---------- Form details: a branded checkbox (the default renders as a white square on dark) ---------- */
.check input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;border-radius:6px;cursor:pointer;
  border:1.5px solid rgba(143,181,137,.55);background:rgba(8,26,22,.6);display:inline-grid;place-content:center;
  transition:background .2s,border-color .2s,box-shadow .2s
}
.check input[type="checkbox"]::after{content:"";width:10px;height:6px;margin-top:-2px;border:2px solid var(--ink,#0d2521);border-top:0;border-right:0;
  transform:rotate(-45deg) scale(0);transition:transform .2s var(--eg-ease)}
.check input[type="checkbox"]:hover{border-color:var(--accent)}
.check input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.check input[type="checkbox"]:checked::after{transform:rotate(-45deg) scale(1)}

/* ---------- Cross-page transitions (Chrome, Edge and Safari 18.2+) ---------- */
@view-transition{navigation:auto}
.nav{view-transition-name:eg-nav}
::view-transition-old(root){animation:eg-vt-out .32s var(--eg-ease) both}
::view-transition-new(root){animation:eg-vt-in .55s var(--eg-ease) both}
::view-transition-group(eg-nav){animation-duration:.4s}
@keyframes eg-vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes eg-vt-in{from{opacity:0;transform:translateY(16px)}}

/* ---------- Film grain (replaces the old scanline texture) ---------- */
.eg-grain{background-image:var(--eg-grain)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .agegate::before,.agegate .ag-ring{animation:none}
  .ag-live .m,.ag-live .ag-mark,.ag-live .w,.agegate .ag-in{animation:none!important;opacity:1!important;fill-opacity:1!important;stroke-opacity:0!important;transform:none!important}
  html.gated .agegate .ag-logo:not(.ag-live) img{animation:none;opacity:1}
  .agegate,.agegate .box{transition-duration:.2s}
  .agegate.leaving .box{transform:none;filter:none}
  .is-split .ln-i,.js:not(.fonts-ready) .is-split .ln-i,html.gated .is-split .ln-i{transform:none!important;transition:none!important}
  .btn-solid,.btn-pill,.btn-ghost{translate:none}
  .nav-links,.nav-links.open{transition:none!important}
  .nav-links a.link,.nav-links .btn-pill{translate:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}