/* ============================================================
   Golden Coffee — shared design system
   Matches the landing artifact: Newsreader / Hanken Grotesk / JetBrains Mono,
   warm sand background, amber gradient accents.
   ============================================================ */
:root{
  --sand:#ece4d5;
  --sand-2:#f3ede0;
  --paper:#FFFDF8;
  --ink:#2a1a0d;
  --ink-strong:#1f140a;
  --muted:#6b5a44;
  --muted-2:#8a7458;
  --line:rgba(120,60,10,.16);
  --line-2:rgba(120,60,10,.28);
  --amber:#E8862A;
  --amber-soft:#FFC25E;
  --amber-grad:linear-gradient(150deg,#FFC25E,#E8862A);
  --amber-tint:rgba(232,134,42,.12);
  --shadow-sm:0 6px 16px rgba(120,60,10,.10);
  --shadow-md:0 16px 40px rgba(120,60,10,.16);
  --shadow-lg:0 34px 80px rgba(120,60,10,.20);
  --r-card:22px;
  --r-pill:999px;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:rgba(232,134,42,.28);color:#2a1607;}
a{color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;color:var(--ink);margin:0;}
p{margin:0;}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 28px;}
.section{position:relative;}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(236,228,213,.82);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease;}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(120,60,10,.06);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:0 auto;padding:18px 28px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand span{font-size:18px;font-weight:600;letter-spacing:-0.01em;color:var(--ink-strong);}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{font-size:14px;color:#5b4a38;text-decoration:none;transition:color .2s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);font-weight:600;}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:10px 18px;border-radius:var(--r-pill);background:var(--amber-grad);color:#2a1607;
  font-weight:600;font-size:13.5px;text-decoration:none;border:none;cursor:pointer;font-family:var(--sans);
  box-shadow:0 6px 16px rgba(232,134,42,.3);transition:transform .2s ease,box-shadow .2s ease;}
.btn-pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(232,134,42,.4);}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:11px 24px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:#7a3d0e;
  font-weight:600;font-size:14px;text-decoration:none;background:transparent;cursor:pointer;font-family:var(--sans);
  transition:background .2s ease,border-color .2s ease;}
.btn-ghost:hover{background:rgba(232,134,42,.08);border-color:var(--amber);}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:14px 28px;border-radius:14px;border:none;background:#2a1607;color:#FFF4E3;
  font-weight:700;font-size:15px;font-family:var(--sans);cursor:pointer;text-decoration:none;
  box-shadow:0 10px 30px rgba(30,16,4,.3);transition:transform .2s ease;}
.btn-dark:hover{transform:translateY(-1px);}

/* ---------- hero / page head ---------- */
.page-head{text-align:center;padding:74px 0 28px;}
.page-head h1{font-size:clamp(38px,5vw,60px);line-height:1.05;margin:14px 0 16px;}
.page-head p{font-size:16px;line-height:1.6;color:var(--muted);max-width:520px;margin:0 auto;}

/* ---------- cards ---------- */
.card{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-md);}

/* ---------- reveal ---------- */
[data-rv]{opacity:1;}
.rv-hidden{opacity:0;transform:translateY(30px);}

/* ---------- footer ---------- */
.footer{background:var(--sand);padding:48px 28px 44px;border-top:1px solid var(--line);margin-top:40px;}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.footer h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;}
.footer a{display:block;font-size:14px;color:#5b4a38;text-decoration:none;margin-bottom:10px;transition:color .2s ease;}
.footer a:hover{color:var(--amber);}
.footer-bottom{max-width:1280px;margin:30px auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:var(--muted-2);}

/* ---------- helpers ---------- */
.mono{font-family:var(--mono);}
.serif{font-family:var(--serif);}
.center{text-align:center;}
.muted{color:var(--muted);}
.pill-tag{display:inline-block;padding:6px 14px;border-radius:var(--r-pill);font:600 11.5px/1 var(--sans);letter-spacing:.06em;}

@media(max-width:820px){
  .nav-links a:not(.btn-pill){display:none;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .wrap,.wrap-narrow{padding:0 18px;}
  .footer-inner{grid-template-columns:1fr;}
}