/* =========================================================
   CHAOS VINEYARD. Shared design system
   Light, airy, natural base. Mencia wine red + Willamette
   Valley fern green accents, warm stone paper. Used across
   every page.
   ========================================================= */

:root{
  --bg:#f6f2ea;
  --bg-raise:#eee6d8;
  --ink:#2b241d;
  --ink-dim:#756a5c;
  --line:rgba(43,36,29,0.14);

  --wine:#7c2c3b;
  --wine-dim:#54141f;
  --wine-glow:rgba(124,44,59,0.14);

  --fern:#4b6b4f;
  --fern-dim:#31492f;
  --fern-glow:rgba(75,107,79,0.16);

  --gold:#b3873f;

  --serif:'Fraunces', Georgia, serif;
  --sans:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%; display:block;}

/* fine paper grain, fixed overlay */
body::before{
  content:"";
  position:fixed; inset:0; z-index:200; pointer-events:none;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.9s ease, transform 0.9s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(246,242,234,0.88);
  backdrop-filter:blur(10px);
  padding:14px 32px;
  border-bottom:1px solid var(--line);
}
.nav .wordmark{
  display:block; text-decoration:none;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.3rem; color:var(--ink); letter-spacing:0.01em;
}
.nav ul{list-style:none; display:flex; flex-wrap:nowrap; gap:20px; margin:0; padding:0;
  justify-content:flex-end; white-space:nowrap;
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;}
.nav ul li a{
  text-decoration:none; color:var(--ink-dim);
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
.nav ul li a:hover, .nav ul li a.active{color:var(--wine); border-color:var(--gold);}
.nav-toggle{display:none; background:none; border:none; color:var(--ink); font-size:1.5rem; cursor:pointer;}

@media (max-width:860px){
  .nav ul{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:99;
    background:rgba(246,242,234,0.98);
    flex-direction:column; align-items:center; justify-content:center; gap:26px;
    display:none; font-size:1rem;
  }
  .nav ul.open{display:flex;}
  .nav-toggle{display:block; z-index:101;}
}

/* ---------- shared page-header pattern (non-hero pages) ---------- */
.page-header{
  position:relative; overflow:hidden;
  padding:170px 24px 70px;
  text-align:center;
}
.page-header::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 550px at 26% 0%, var(--wine-glow), transparent 65%),
    radial-gradient(ellipse 900px 550px at 74% 0%, var(--fern-glow), transparent 65%);
}
.page-header > *{position:relative; z-index:1;}
.page-header .eyebrow{
  font-size:0.75rem; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.page-header h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 7vw, 5rem);
  letter-spacing:0.01em; margin:0 0 20px; line-height:1;
  color:var(--ink);
}
.page-header .sub{
  max-width:560px; margin:0 auto; font-size:1.02rem; color:var(--ink-dim); font-weight:300;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--serif); font-size:0.9rem; letter-spacing:0.08em;
  color:var(--ink); border:1px solid var(--line);
  padding:14px 32px; border-radius:2px;
  transition:border-color .25s, color .25s, background .25s;
}
.btn:hover{border-color:var(--wine); color:var(--wine);}
.btn.solid{
  background:var(--wine); border-color:var(--wine); color:#faf5ec;
}
.btn.solid:hover{background:var(--wine-dim); border-color:var(--wine-dim); color:#faf5ec;}

/* ---------- generic section rule/divider ---------- */
.rule{width:56px; height:1px; margin:34px auto 0; background:var(--gold); opacity:0.6;}

/* ---------- long-form story page (vineyard, sculpture detail) ---------- */
.story-media{max-width:1000px; margin:0 auto; padding:0 24px;}
.story-media img{
  width:100%; aspect-ratio:2.4/1; height:auto; object-fit:cover; border-radius:2px;
  filter:saturate(0.96) contrast(1.02);
}
.story-wrap{max-width:680px; margin:0 auto; padding:70px 24px 0;}
.story-wrap p{font-size:1.08rem; color:var(--ink-dim); margin:0 0 26px;}
.story-wrap p:first-of-type{font-size:1.18rem; color:var(--ink);}
.story-wrap .stat-row{
  display:flex; gap:40px; flex-wrap:wrap; justify-content:center;
  margin:50px 0; padding:36px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.story-wrap .stat{text-align:center;}
.story-wrap .stat .num{font-family:var(--serif); font-size:2.2rem; color:var(--wine);}
.story-wrap .stat .label{font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-dim); margin-top:6px;}

.detail-gallery{
  max-width:1000px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.detail-gallery img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px;
  filter:saturate(0.96) contrast(1.02);
}
@media (max-width:700px){
  .detail-gallery{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .detail-gallery{grid-template-columns:1fr;}
}

.further-reading{
  max-width:680px; margin:0 auto; padding:0 24px 40px;
  font-size:0.95rem; color:var(--ink-dim);
}
.further-reading .label{
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.further-reading a{color:var(--wine); border-bottom:1px solid var(--gold); text-decoration:none;}
.further-reading a:hover{color:var(--ink);}

.back-link{
  max-width:680px; margin:0 auto; padding:50px 24px 120px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
.back-link.single{justify-content:center;}
.back-link a{
  font-family:var(--serif); font-style:italic; font-size:0.95rem;
  color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px;
  transition:color .2s, border-color .2s;
}
.back-link a:hover{color:var(--wine); border-color:var(--gold);}

/* ---------- FOOTER ---------- */
footer{
  text-align:center; padding:90px 24px 60px;
  border-top:1px solid var(--line);
}
footer .wordmark{
  margin-bottom:22px;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.5rem; color:var(--ink);
}
footer p{max-width:480px; margin:0 auto 0.7em; font-size:0.85rem; font-style:italic; color:var(--ink-dim);}
footer .fine{margin-top:30px; font-size:0.7rem; letter-spacing:0.1em; color:#a89d8a; font-style:normal;}
footer .social{display:flex; justify-content:center; margin-top:30px;}
footer .social a.ig{
  display:inline-block; text-decoration:none;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--wine); letter-spacing:0.02em;
  border-bottom:1px solid var(--gold); padding-bottom:4px;
  transition:color .2s, border-color .2s, opacity .2s;
}
footer .social a.ig:hover{color:var(--ink); border-color:var(--ink); opacity:0.9;}