/* ============================================================
   ROCKAWAY BACKLINE — shared design system
   Dark + vintage/analog. Warm near-black, cream, gold.
   ============================================================ */

:root{
  color-scheme: dark;
  /* surfaces (warm, echoing the brand's own #291e16) */
  --ink:        #14100c;
  --ink-2:      #1b150f;
  --panel:      #221a12;
  --panel-2:    #2a2017;
  --panel-3:    #342819;
  --line:       rgba(238,214,168,.13);
  --line-2:     rgba(238,214,168,.22);

  /* type */
  --cream:      #f3e9d6;
  --cream-2:    #d8c8ac;
  --muted:      #a08f74;
  --faint:      #6f6450;

  /* accents */
  --gold:       #e8b84b;
  --gold-2:     #f3cf73;
  --gold-deep:  #b8851f;
  --oxblood:    #8a2f26;

  --accent:     var(--gold);
  --accent-ink: #1c1407;   /* text that sits on the accent */

  /* type families */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Archivo", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --radius: 4px;

  /* translucent surfaces for depth (~85% over the page gradient) */
  --glass-1: rgba(27,21,15,.85);   /* ink-2  */
  --glass-2: rgba(34,26,18,.85);   /* panel  */
  --glass-3: rgba(42,32,23,.85);   /* panel-2 */
  --elev: 0 16px 38px -26px rgba(0,0,0,.72);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:linear-gradient(168deg, #1d1710 0%, #14100c 52%, #100c07 100%) fixed;
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle film grain + warm vignette baked onto the page */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(232,184,75,.07), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(138,47,38,.10), transparent 55%);
}
body.no-glow::before{ display:none; }
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain-op,.05);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
#app, main, header, footer{ position:relative; z-index:2; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- type primitives ---------- */
.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em;
  margin:0;
}
.kicker::before{
  content:""; width:26px; height:1px; background:var(--accent); opacity:.6;
}
.kicker.no-rule::before{ display:none; }

h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:.92; margin:0;
  letter-spacing:.005em; text-transform:uppercase; }
h2.section-title{ font-size:clamp(40px, 6vw, 78px); }
.lead{ font-size:clamp(18px,2.1vw,22px); color:var(--cream-2); line-height:1.5; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:32px; padding-right:32px; }
section{ padding-top:clamp(36px,3.8vw,44px); padding-bottom:clamp(36px,3.8vw,44px); }

/* ---------- buttons ---------- */
.btn{
  --b:var(--accent);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--b); border-radius:var(--radius);
  cursor:pointer; background:transparent; color:var(--cream);
  transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--accent); color:var(--accent-ink); font-weight:700; }
.btn-solid:hover{ background:var(--gold-2); border-color:var(--gold-2); }
.btn-ghost:hover{ background:rgba(232,184,75,.10); }
.btn-block{ width:100%; justify-content:center; }

/* ---------- header / nav ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  transition:background .3s ease, padding .3s ease, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(16,12,8,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:12px 32px;
}
.site-head .logo{ height:38px; width:auto; transition:height .3s ease; }
.site-head.scrolled .logo{ height:32px; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream-2); transition:color .15s;
}
.nav-links a:hover{ color:var(--accent); }
.nav-cta{ border:1px solid var(--line-2); padding:10px 18px; border-radius:var(--radius); }
.nav-cta:hover{ border-color:var(--accent); color:var(--accent)!important; }
.nav-links a.nav-btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:10px 18px; border-radius:var(--radius);
  background-color:transparent; color:var(--cream-2); border:1px solid var(--cream-2);
  transition:background-color .15s, border-color .15s, color .15s, transform .15s;
}
.nav-links a.nav-btn:hover{ background-color:var(--cream); border-color:var(--cream); color:var(--ink); transform:translateY(-1px); }
.nav-toggle{ display:none; background:none; border:0; color:var(--cream); cursor:pointer; }

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid rgba(243,233,214,.40);
  padding:64px 0 40px;
  background:var(--ink-2);
}
.foot-grid{ display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between; align-items:flex-start; }
.site-foot .logo{ height:42px; margin-bottom:20px; }
.foot-meta{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted); line-height:2; }
.foot-meta a:hover{ color:var(--accent); }
.foot-col h4{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin:0 0 14px; }
.foot-col a{ display:block; color:var(--cream-2); font-size:14px; padding:5px 0; }
.foot-col a:hover{ color:var(--accent); }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--faint); }

/* ---------- misc shared ---------- */
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line-2); border-radius:999px; padding:4px 11px;
  display:inline-block;
}
.divider-rule{ height:1px; background:var(--line); border:0; margin:0; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; gap:0;
    background:rgba(13,10,6,.98); padding:90px 32px 32px; align-items:stretch;
    transform:translateY(-100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    border-bottom:1px solid var(--line); height:auto;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:18px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .nav-cta{ border:1px solid var(--accent); text-align:center; margin-top:16px; }
  .nav-links a.nav-btn{ text-align:center; padding:15px; border-bottom:0; margin-top:10px; }
  .nav-toggle{ display:block; z-index:50; }
}