:root{
  --paper:#f4efe3;
  --paper-2:#efe7d6;
  --ink:#26241d;
  --muted:#6c6653;
  --faint:#9a927c;
  --meadow:#4f6a3a;
  --meadow-bright:#6f9145;
  --amber:#c8892e;
  --hair:rgba(38,36,29,.14);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; min-height:100dvh; color:var(--ink); background:var(--paper);
  font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* the painted meadow, washed toward paper */
.art{
  position:fixed; inset:0; z-index:-3;
  background:
    linear-gradient(180deg, rgba(244,239,227,.55) 0%, rgba(244,239,227,.78) 45%, rgba(243,236,220,.95) 100%),
    url("hero.jpg") center 42% / cover no-repeat;
  filter:saturate(1.02) brightness(1.02);
}
#air{position:fixed; inset:0; z-index:-2; width:100%; height:100%; opacity:.55}
.paper{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 38%, rgba(255,252,244,.25) 0%, rgba(240,232,214,.35) 70%, rgba(233,224,203,.5) 100%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

.stage{
  position:relative; z-index:2; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(24px,6vw,72px) clamp(20px,6vw,48px) 120px; gap:clamp(10px,1.6vw,18px);
}

.kicker{margin:0; font-weight:500; letter-spacing:.42em; text-transform:uppercase; font-size:.72rem; color:var(--meadow)}
.wordmark{
  margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,11vw,6.6rem);
  line-height:.98; color:var(--ink); text-shadow:0 1px 24px rgba(255,255,255,.35);
}
.strap{margin:.1em 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,3.4vw,1.6rem); color:var(--meadow); opacity:.95}
.note{margin:.5em auto 0; max-width:44ch; font-size:clamp(.95rem,2.6vw,1.08rem); line-height:1.65; color:var(--muted)}
.badge{
  margin:1.1em 0 0; padding:.4em 1em; border:1px solid var(--hair); border-radius:999px;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--meadow);
  background:rgba(111,145,69,.08);
}

.strip{margin:1.6em 0 0; display:flex; gap:clamp(8px,1.6vw,16px); width:min(720px,92vw)}
.strip img{
  width:33.33%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border:1px solid rgba(38,36,29,.12); border-radius:6px;
  box-shadow:0 16px 40px rgba(60,50,30,.22);
  transition:transform .5s ease;
}
.strip img:hover{transform:translateY(-4px)}

.thread{
  margin-top:2.2em; text-decoration:none; font-size:1.15rem; color:var(--meadow); opacity:.6;
  transition:opacity .3s ease, transform .3s ease;
}
.thread:hover{opacity:1; transform:rotate(45deg)}

.foot{
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px clamp(16px,5vw,40px); font-size:.72rem; color:var(--faint);
}
.foot-hint{opacity:.85}

.reveal{opacity:0; transform:translateY(14px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
body.ready .reveal{opacity:1; transform:none}
.d0{transition-delay:.05s}.d1{transition-delay:.18s}.d2{transition-delay:.34s}
.d3{transition-delay:.5s}.d4{transition-delay:.66s}.d5{transition-delay:.82s}
.d6{transition-delay:1s}.d7{transition-delay:1.15s}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  #air{display:none}
  .strip img{transition:none}
}
@media (max-width:560px){
  .foot-hint{display:none}
  .strip img:nth-child(3){display:none}
  .strip img:nth-child(1),.strip img:nth-child(2){width:50%}
}