/* site/demo/demo-base.css — Purpose: tokens, reset, typography, atoms + premium overlays/glass/motion */
:root{
  --cream:#f7f2e9; --cream2:#efe8da; --ink:#1c2516; --deep:#1a3013; --deep2:#0f1f0b;
  --matcha:#7a9b4e; --matcha-soft:#a8c186; --matcha-bright:#9ec46a; --gold:#c9a84e; --line:#dcd3c2;
  --display:"Fraunces",Georgia,serif;
  --body:"Schibsted Grotesk",-apple-system,sans-serif;
  --max:1180px;
  --sp:clamp(3.5rem,2.5rem + 5vw,8rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-lux:0 40px 90px -45px rgba(15,31,11,.7), 0 12px 30px -18px rgba(15,31,11,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);font:400 1.05rem/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* page-wide grain overlay (atmosphere/depth) */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3{font-family:var(--display);font-weight:560;letter-spacing:-.018em;text-wrap:balance;line-height:1.08}
em{font-style:italic;color:var(--matcha)}
a{color:var(--deep)}

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--matcha);margin-bottom:1.1rem}
.eyebrow.light{color:var(--matcha-bright)}
.sec-h{font-size:clamp(2rem,1.4rem + 2.8vw,3.4rem);margin-bottom:1rem}
.sec-sub{max-width:58ch;color:#5a6650;margin-bottom:2.6rem}
.logo{font-family:var(--display);font-size:1.3rem;font-weight:560;letter-spacing:-.01em}
.logo em{color:var(--matcha)}

.btn-solid{
  font:700 .95rem var(--body);color:var(--cream);
  background:linear-gradient(135deg,var(--deep),#2c4a1e);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:1.05rem 1.6rem;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;width:100%;
  box-shadow:0 14px 30px -16px rgba(26,48,19,.8);
}
.btn-solid:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 20px 40px -16px rgba(26,48,19,.9)}
.btn-solid:focus-visible,.btn-outline:focus-visible{outline:3px solid var(--matcha-bright);outline-offset:3px}
.btn-outline{
  display:inline-block;font:700 .95rem var(--body);color:var(--cream);text-decoration:none;
  border:1.5px solid rgba(247,242,233,.55);border-radius:999px;padding:1.05rem 1.9rem;
  transition:background .2s,color .2s,transform .25s var(--ease);white-space:nowrap;backdrop-filter:blur(4px);
}
.btn-outline:hover{background:var(--cream);color:var(--deep);transform:translateY(-2px)}

.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem;flex:1}
.field label{font-size:.76rem;font-weight:700;letter-spacing:.03em}
.opt{font-weight:400;color:#8b8576}
.field input,.field select,.field textarea{
  font:400 .95rem var(--body);color:var(--ink);background:rgba(255,253,248,.9);
  border:1px solid var(--line);border-radius:11px;padding:.72rem .85rem;width:100%;transition:border-color .18s,box-shadow .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--matcha);box-shadow:0 0 0 3px rgba(122,155,78,.18);
}
.field input.err,.field select.err{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.15)}
.row{display:flex;gap:.85rem}
@media (max-width:640px){.row{flex-direction:column;gap:0}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}