/* Web Art Technology — shared styles.
   Pages keep most layout as inline styles (ported 1:1 from the design);
   this file holds base rules, hover states, header/footer and shared animations. */

html{scroll-behavior:smooth}
body{margin:0;background:#f6f4ef;color:#16150f;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1f6b4f}a:hover{color:#16150f}
:focus-visible{outline:2px solid #1f6b4f;outline-offset:3px;border-radius:4px}
input::placeholder,textarea::placeholder{color:#7a766b}
.page{background:#f6f4ef;color:#16150f;overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#16150f;color:#f6f4ef;padding:10px 14px;border-radius:6px;font:500 14px/1 'Geist',system-ui,sans-serif;text-decoration:none}
.skip-link:focus{top:12px;color:#f6f4ef}

@keyframes watPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes watRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes watMenuIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Hover states (design used per-element `style-hover`; !important beats inline base styles) */
.hv-dark:hover{background:#1f6b4f!important;color:#f6f4ef!important}
.hv-dark-lift:hover{background:#1f6b4f!important;color:#f6f4ef!important;transform:translateY(-1px)!important}
.hv-mint-lift:hover{background:#5fb493!important;color:#16150f!important;transform:translateY(-1px)!important}
.hv-nav:hover{background:#ece9e1!important;color:#16150f!important}
.hv-mint:hover{color:#5fb493!important}
.hv-ink:hover{color:#16150f!important}
.hv-green:hover{color:#1f6b4f!important}
.hv-green-line:hover{color:#1f6b4f!important;border-color:#1f6b4f!important}
.hv-mint-line:hover{color:#5fb493!important;border-color:#5fb493!important}
.hv-border-ink:hover{border-color:#16150f!important}
.hv-border-green:hover{border-color:#1f6b4f!important}
.hv-card:hover{border-color:#16150f!important;background:#fbfaf7!important;color:#16150f!important}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,244,239,0);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(216,212,202,0);transition:background .5s,border-color .5s}
.site-header.is-scrolled{background:rgba(246,244,239,.82);border-bottom-color:#d8d4ca}
html.menu-open .site-header{background:#f6f4ef;border-bottom-color:#d8d4ca}
.site-header__inner{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,64px);height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.site-header.is-scrolled .site-header__inner{height:64px}
.brand{display:flex;align-items:center;gap:12px;font:500 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#16150f;text-decoration:none;white-space:nowrap}
.brand:hover{color:#16150f}
.brand__mark{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:14px;height:14px}
.brand__mark span{background:currentColor;border-radius:1px}
.brand__mark span:last-child{background:#1f6b4f}
.site-footer .brand__mark span:last-child{background:#5fb493}
.nav-desktop{display:flex;align-items:center;gap:24px}
.nav-desktop nav{display:flex;align-items:center;gap:2px}
.nav-link{font:500 14px/1 'Geist',system-ui,sans-serif;color:#5c5950;text-decoration:none;padding:10px 14px;border-radius:6px;transition:background .2s,color .2s;position:relative}
.nav-link:hover{background:#ece9e1;color:#16150f}
.nav-link[aria-current="page"]{color:#16150f}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:#1f6b4f}
.btn-dark{font:500 14px/1 'Geist',system-ui,sans-serif;color:#f6f4ef;background:#16150f;text-decoration:none;padding:12px 18px;border-radius:6px;transition:background .25s,transform .25s;white-space:nowrap}
.btn-dark:hover{background:#1f6b4f;color:#f6f4ef}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 14px;background:none;border:1px solid #d8d4ca;border-radius:6px;cursor:pointer;font:500 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#16150f}
.menu-btn__icon{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.menu-btn__icon span{display:block;width:16px;height:1.5px;background:#16150f;transition:transform .35s;transform-origin:center}
.menu-btn__icon span+span{margin-top:5px}
html.menu-open .menu-btn__icon span:first-child{transform:translateY(3.25px) rotate(45deg)}
html.menu-open .menu-btn__icon span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:899.98px){
  .nav-desktop{display:none}
  .menu-btn{display:flex}
}
html.menu-open{overflow:hidden}
.mobile-menu{position:fixed;inset:0;z-index:40;background:#f6f4ef;display:flex;flex-direction:column;justify-content:space-between;padding:calc(80px + clamp(24px,6vw,48px)) clamp(20px,5vw,64px) 32px;overflow:auto;animation:watMenuIn .5s cubic-bezier(.2,.7,.2,1) both}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu__link{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid #d8d4ca;text-decoration:none;color:#5c5950;animation:watMenuIn .6s cubic-bezier(.2,.7,.2,1) both}
.mobile-menu__link[aria-current="page"]{color:#16150f}
.mobile-menu__link:hover{color:#16150f}
.mobile-menu__num{font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.14em;color:#1f6b4f;min-width:24px}
.mobile-menu__label{font:400 clamp(36px,9vw,52px)/1 'Newsreader',Georgia,serif;letter-spacing:-.02em}
.mobile-menu__foot{display:flex;flex-direction:column;gap:20px;padding-top:32px}
.mobile-menu__cta{font:500 15px/1 'Geist',system-ui,sans-serif;color:#f6f4ef;background:#16150f;text-decoration:none;padding:18px 22px;border-radius:6px;text-align:center}
.mobile-menu__cta:hover{background:#1f6b4f;color:#f6f4ef}
.mobile-menu__meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font:400 12px/1.4 'Geist Mono',ui-monospace,monospace;color:#5c5950;letter-spacing:.04em}
.status-dot{width:6px;height:6px;border-radius:50%;background:#1f6b4f;display:inline-block;flex:none}

/* Footer */
.site-footer{background:#16150f;color:#f6f4ef;font-family:'Geist',system-ui,sans-serif}
.site-footer__inner{max-width:1280px;margin:0 auto;padding:clamp(64px,8vw,104px) clamp(20px,5vw,64px) 40px}
.site-footer__top{display:flex;flex-wrap:wrap;gap:48px 64px;justify-content:space-between}
.site-footer__intro{flex:1 1 320px;max-width:440px;display:flex;flex-direction:column;gap:20px}
.site-footer__intro .brand{color:#f6f4ef}
.site-footer__tagline{font:400 clamp(24px,2.6vw,32px)/1.2 'Newsreader',Georgia,serif;letter-spacing:-.015em;margin:0;color:#f6f4ef;text-wrap:pretty}
.site-footer__status{display:flex;align-items:center;gap:10px;font:400 12px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;color:#a9a496}
.site-footer__status .status-dot{background:#5fb493}
.site-footer__cols{display:flex;flex-wrap:wrap;gap:40px 56px;flex:1 1 420px;justify-content:flex-start}
.site-footer__col{flex:1 1 120px;display:flex;flex-direction:column;gap:14px}
.site-footer__col--wide{flex-basis:160px}
.site-footer__heading{font:500 11px/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#a9a496;margin:0 0 6px}
.site-footer__col a{color:#f6f4ef;text-decoration:none;font:400 15px/1.3 'Geist',system-ui,sans-serif;word-break:break-word}
.site-footer__col a:hover{color:#5fb493}
.site-footer__bottom{margin-top:clamp(56px,7vw,88px);padding-top:24px;border-top:1px solid #2e2c25;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font:400 12px/1.4 'Geist Mono',ui-monospace,monospace;letter-spacing:.04em;color:#a9a496}

/* Scroll reveal: hidden only once JS confirms it's running */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].is-revealed{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}