@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0f0d0b;
  --surface:#1a1713;
  --surface2:#221f1a;
  --surface3:#2a2520;
  --crimson:#9b1f2e;
  --crimson-light:#c4283b;
  --crimson-pale:#2d0d13;
  --gold:#c9a84c;
  --gold-light:#e4c87a;
  --gold-pale:rgba(201,168,76,0.1);
  --text:#f0ebe3;
  --text-muted:#9a9088;
  --text-dim:#6b6259;
  --border:#2e2a24;
  --border-light:#3d3830;
  --max-width:1100px;
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Source Serif 4',Georgia,serif;
  line-height:1.7;
  overflow-x:hidden;
  font-size:16px;
}

/* ── NAVIGATION ── */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(15,13,11,0.96);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.nav-logo{
  font-family:'Playfair Display',serif;
  font-size:1.35rem;font-weight:700;
  color:var(--text);letter-spacing:0.02em;
  text-decoration:none;
}
.nav-logo span{color:var(--crimson-light)}
.nav-links{display:flex;gap:2.5rem;align-items:center}
.nav-links a{
  font-size:0.82rem;color:var(--text-muted);
  text-decoration:none;letter-spacing:0.08em;
  text-transform:uppercase;transition:color 0.2s;
  font-family:'Source Serif 4',serif;
}
.nav-links a:hover{color:var(--gold)}
.nav-links a.active{color:var(--text)}
.nav-cta{
  background:var(--crimson)!important;
  color:var(--text)!important;
  padding:0.45rem 1.2rem;
  border-radius:2px;
  transition:background 0.2s!important;
}
.nav-cta:hover{background:var(--crimson-light)!important}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--text-muted)}
.mobile-menu{
  display:none;position:fixed;top:68px;left:0;right:0;
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:1.5rem 2rem;z-index:99;
  flex-direction:column;gap:1.25rem;
}
.mobile-menu a{
  font-size:0.9rem;color:var(--text-muted);text-decoration:none;
  letter-spacing:0.08em;text-transform:uppercase;
}
.mobile-menu.open{display:flex}

/* ── UTILITIES ── */
.container{max-width:var(--max-width);margin:0 auto;padding:0 2rem}
.section{padding:5rem 0}
.section-sm{padding:3rem 0}

.eyebrow{
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
  display:flex;align-items:center;gap:0.9rem;
}
.eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}

.section-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;color:var(--text);
  margin-bottom:0.75rem;line-height:1.15;
}
.section-sub{
  font-size:1rem;color:var(--text-muted);
  max-width:520px;font-weight:300;
  margin-bottom:3rem;
}

.divider{height:1px;background:var(--border)}

.btn-primary{
  display:inline-block;
  background:var(--crimson);color:var(--text);
  padding:0.85rem 2rem;border:none;cursor:pointer;
  font-family:'Source Serif 4',serif;font-size:0.95rem;
  letter-spacing:0.04em;border-radius:2px;
  transition:background 0.2s;text-decoration:none;
}
.btn-primary:hover{background:var(--crimson-light)}
.btn-ghost{
  display:inline-block;
  background:transparent;color:var(--text-muted);
  padding:0.85rem 2rem;
  border:1px solid var(--border-light);cursor:pointer;
  font-family:'Source Serif 4',serif;font-size:0.95rem;
  letter-spacing:0.04em;border-radius:2px;
  transition:all 0.2s;text-decoration:none;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ── CATEGORY PILLS ── */
.cat-pill{
  display:inline-block;
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-pale);
  padding:0.22rem 0.65rem;border-radius:2px;
  font-family:'Source Serif 4',serif;
}
.cat-pill.secrets{color:#e8a87c;background:rgba(232,168,124,0.1)}
.cat-pill.love{color:#e87c7c;background:rgba(232,124,124,0.1)}
.cat-pill.trust{color:#c4a0e8;background:rgba(196,160,232,0.1)}
.cat-pill.family{color:#7cbfe8;background:rgba(124,191,232,0.1)}
.cat-pill.identity{color:#7ce8a8;background:rgba(124,232,168,0.1)}
.cat-pill.friendship{color:#e8d07c;background:rgba(232,208,124,0.1)}
.cat-pill.work{color:#a0c8e8;background:rgba(160,200,232,0.1)}
.cat-pill.money{color:#e8c47c;background:rgba(232,196,124,0.1)}
.cat-pill.everyday{color:#b0e87c;background:rgba(176,232,124,0.1)}
.cat-pill.heart{color:#e87cb0;background:rgba(232,124,176,0.1)}

/* ── STORY ID ── */
.story-id{
  font-size:0.68rem;letter-spacing:0.15em;
  color:var(--text-dim);text-transform:uppercase;
  font-family:'Source Serif 4',serif;
}

/* ── FOOTER ── */
footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  margin-top:0;
}
.footer-inner{
  max-width:var(--max-width);margin:0 auto;
  padding:3.5rem 2rem 2rem;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem;
}
.footer-brand-name{
  font-family:'Playfair Display',serif;
  font-size:1.2rem;font-weight:700;
  color:var(--text);margin-bottom:0.75rem;
  display:block;text-decoration:none;
}
.footer-brand-name span{color:var(--crimson-light)}
.footer-brand p{font-size:0.82rem;color:var(--text-dim);line-height:1.8;font-weight:300;max-width:300px}
.footer-col h5{
  font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.footer-col a{
  display:block;font-size:0.82rem;color:var(--text-dim);
  text-decoration:none;margin-bottom:0.55rem;
  transition:color 0.2s;
}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  border-top:1px solid var(--border);
  max-width:var(--max-width);margin:0 auto;
  padding:1.25rem 2rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;
}
.footer-bottom p{font-size:0.75rem;color:var(--text-dim)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav{padding:0 1.25rem}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .container{padding:0 1.25rem}
  .section{padding:3.5rem 0}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}