/* ══════════════════════════════════════════════════════════════
   GREEN STORIES LLC — SHARED STYLESHEET
   ══════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── CUSTOM PROPERTIES ── */
:root{
  --green-primary:#3CB371;
  --green-dark:#2A7D50;
  --green-accent:#C5D93D;
  --green-lime:#8DC63F;
  --off-white:#F6F5F0;
  --warm-black:#1A1A18;
  --warm-gray:#8A8A85;
  --card-bg:rgba(246,245,240,0.04);
  --card-border:rgba(246,245,240,0.08);
  --ok:#8DC63F;
  --ng:#E74C3C;
  --warn:#E7A61A;
  --font-display:'Fraunces',serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

html{background:var(--warm-black);color:var(--off-white)}
body{background:var(--warm-black);min-height:100vh}
::selection{background:var(--green-accent);color:var(--warm-black)}

/* ── SKIP TO CONTENT ── */
.skip-to-content{
  position:absolute;top:-100px;left:16px;
  background:var(--green-accent);color:var(--warm-black);
  padding:12px 24px;border-radius:0 0 4px 4px;
  font-family:var(--font-body);font-size:14px;font-weight:600;
  text-decoration:none;z-index:200;
  transition:top 0.3s ease;
}
.skip-to-content:focus{top:0}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:28px 40px;
  background:linear-gradient(180deg,rgba(26,26,24,0.95) 0%,rgba(26,26,24,0.7) 60%,rgba(26,26,24,0) 100%);
}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--off-white)}
.nav-logo svg{width:38px;height:38px}
.nav-logo-text{font-family:var(--font-body);font-weight:500;font-size:14px;letter-spacing:0.15em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-links a{font-family:var(--font-body);font-weight:400;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--off-white);text-decoration:none;transition:opacity 0.3s ease}
.nav-links a:hover{opacity:0.6}
.nav-links a.active-page,.nav-links a[aria-current="page"]{color:var(--green-accent)}
.lang-toggle{font-family:var(--font-body);font-weight:300;font-size:12px;letter-spacing:0.1em;color:var(--off-white);opacity:0.6}
.lang-toggle .lang-btn{cursor:pointer;transition:opacity 0.3s ease}
.lang-toggle .lang-btn:hover{opacity:1}
.lang-toggle .lang-btn.active{opacity:1;font-weight:500}
.lang-sep{margin:0 4px;opacity:0.3}

/* ── MOBILE OVERLAY ── */
.mobile-overlay{
  position:fixed;inset:0;z-index:99;
  background:rgba(26,26,24,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity 0.4s ease;
}
.mobile-overlay.open{opacity:1;pointer-events:all}
.mobile-overlay a{
  font-family:var(--font-display);font-weight:300;font-size:36px;color:var(--off-white);
  text-decoration:none;padding:20px 0;letter-spacing:0.02em;
  opacity:0;transform:translateY(20px);transition:opacity 0.4s ease,transform 0.4s ease,color 0.3s ease;
}
.mobile-overlay.open a{opacity:1;transform:translateY(0)}
.mobile-overlay.open a:nth-child(1){transition-delay:0.1s}
.mobile-overlay.open a:nth-child(2){transition-delay:0.15s}
.mobile-overlay.open a:nth-child(3){transition-delay:0.2s}
.mobile-overlay.open a:nth-child(4){transition-delay:0.25s}
.mobile-overlay a:active{color:var(--green-accent)}
.mobile-overlay a.active-page,.mobile-overlay a[aria-current="page"]{color:var(--green-accent)}
.mobile-lang-toggle{
  display:flex;gap:24px;margin-top:48px;
  opacity:0;transform:translateY(20px);transition:opacity 0.4s ease 0.35s,transform 0.4s ease 0.35s;
}
.mobile-overlay.open .mobile-lang-toggle{opacity:1;transform:translateY(0)}
.mobile-lang-toggle .lang-btn{
  font-family:var(--font-body);font-weight:300;font-size:16px;letter-spacing:0.15em;
  color:var(--off-white);opacity:0.4;cursor:pointer;padding:12px 16px;
  border:1px solid rgba(246,245,240,0.15);border-radius:4px;transition:all 0.3s ease;background:none;
}
.mobile-lang-toggle .lang-btn.active{opacity:1;border-color:var(--green-accent);color:var(--green-accent)}

/* ── HAMBURGER ── */
.menu-btn{
  display:none;background:none;border:none;cursor:pointer;padding:12px;
  margin-right:-12px;z-index:101;-webkit-tap-highlight-color:transparent;
}
.menu-btn span{display:block;width:26px;height:2px;background:var(--off-white);margin:6px 0;transition:all 0.35s ease;transform-origin:center}
.menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ── FOOTER ── */
footer{max-width:900px;margin:0 auto;padding:64px 40px 48px 40px;border-top:1px solid rgba(246,245,240,0.06)}
.footer-links{display:flex;gap:8px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.footer-links a{font-family:var(--font-body);font-weight:300;font-size:12px;color:rgba(246,245,240,0.4);text-decoration:none;transition:color 0.3s}
.footer-links a:hover{color:var(--green-accent)}
.footer-sep{color:rgba(246,245,240,0.2);font-size:12px}
.footer-disclaimer{font-family:var(--font-body);font-weight:300;font-size:12px;line-height:1.7;color:rgba(246,245,240,0.35)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:32px;font-family:var(--font-body);font-weight:300;font-size:12px;color:rgba(246,245,240,0.25)}
.footer-contact{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.footer-contact a{font-family:var(--font-body);font-weight:300;font-size:12px;color:rgba(246,245,240,0.4);text-decoration:none;transition:color 0.3s}
.footer-contact a:hover{color:var(--green-accent)}

/* ── ACCENT LINE ── */
.accent-line{
  position:fixed;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green-accent) 0%,var(--green-lime) 40%,var(--green-primary) 100%);
  z-index:100;
}

/* ── COMMON PAGE LAYOUT ── */
.page{max-width:900px;margin:0 auto;padding:140px 40px 120px 40px}
.page-title{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,4vw,42px);color:var(--green-accent);margin-bottom:12px}
.page-subtitle{font-family:var(--font-body);font-weight:300;font-size:15px;color:var(--warm-gray);margin-bottom:48px;line-height:1.6}
.page-subtitle a{color:var(--green-accent);text-decoration:none}

/* ── ANIMATIONS ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  to{opacity:1}
}

/* ── SCROLL-TRIGGERED FADE UP ── */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── FOCUS STYLES ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green-accent);outline-offset:2px;
}

/* ── MOBILE BREAKPOINTS ── */
@media(max-width:768px){
  nav{padding:20px 24px}
  .nav-logo svg{width:32px;height:32px}
  .nav-logo-text{font-size:12px;letter-spacing:0.12em}
  .nav-links{display:none}
  .menu-btn{display:block}
  .page{padding:120px 24px 80px 24px}
  footer{padding:48px 24px 40px 24px}
}
@media(max-width:380px){
  nav{padding:16px 20px}
  .page{padding:110px 20px 60px 20px}
}
@media(max-height:500px) and (orientation:landscape){
  .mobile-overlay a{font-size:24px;padding:12px 0}
  .mobile-lang-toggle{margin-top:24px}
}

/* ── PREFERS REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .fade-up{opacity:1;transform:none;transition:none}
}