@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=DM+Mono:wght@300;400;500&family=Fraunces:ital,wght@0,300;0,600;1,300;1,600&display=swap');

:root {
  --cream: #F5F0E8;
  --ink: #1C1A14;
  --rust: #C4541A;
  --sage: #7A8C6E;
  --gold: #D4A847;
  --snow: #EEF2F5;
  --muted: #8A8070;
  --border: #D8CFC0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* HEADER */
header {
  border-bottom: 2px solid var(--ink);
  padding: 0 2rem;
  position: sticky;
  top: 0;
  background: var(--cream);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.masthead { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 900; text-decoration: none; color: var(--ink); }
.masthead span { color: var(--rust); }
.nav-tags { display: flex; gap: 1.5rem; list-style: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nav-tags a { color: var(--ink); text-decoration: none; position: relative; }
.nav-tags a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--rust); transition: width .25s ease; }
.nav-tags a:hover::after { width: 100%; }
.subscribe-btn { background: var(--ink); color: var(--cream); border: none; padding: .45rem 1.1rem; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s; text-decoration: none; display: inline-block; }
.subscribe-btn:hover { background: var(--rust); }

/* TICKER */
.ticker-bar { border-bottom: 2px solid var(--ink); height: 36px; overflow: hidden; display: flex; align-items: center; background: var(--rust); }
.ticker-label { background: var(--ink); color: var(--cream); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; padding: 0 1rem; height: 100%; display: flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.ticker-track { display: flex; animation: ticker 32s linear infinite; white-space: nowrap; }
.ticker-track span { font-size: 11px; letter-spacing: .08em; color: var(--cream); padding: 0 2.5rem; }
.ticker-track span::after { content: '✦'; margin-left: 2.5rem; opacity: .6; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* FOOTER */
footer { background: var(--ink); color: var(--cream); padding: 3rem 4rem; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; border-top: 2px solid var(--ink); }
.footer-brand h2 { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; margin-bottom: .5rem; }
.footer-brand p { font-size: 11px; color: #7A8A7A; max-width: 26ch; line-height: 1.8; }
.footer-col h4 { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #7A8A7A; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul a { font-size: 12px; color: var(--cream); text-decoration: none; opacity: .7; transition: opacity .2s; }
.footer-col ul a:hover { opacity: 1; }
.footer-bottom { background: var(--ink); border-top: 1px solid #2A2A22; padding: 1rem 4rem; display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .1em; color: #5A5A4A; }

/* PILLS */
.category-pill { display: inline-block; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; background: var(--sage); color: var(--cream); padding: .2rem .6rem; text-decoration: none; }
.pill-rust { background: var(--rust); }
.pill-gold { background: var(--gold); color: var(--ink); }
.pill-ink  { background: var(--ink); }

/* AD SLOT */
.ad-slot { border: 1px dashed #C8B89A; background: #FAF7F2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; gap: .3rem; }
.ad-slot .ad-size { font-size: 9px; opacity: .6; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .6s ease both; }

@media (max-width: 900px) {
  .nav-tags { display: none; }
  footer { grid-template-columns: 1fr; padding: 2rem; }
  .footer-bottom { padding: 1rem 2rem; flex-direction: column; gap: .5rem; text-align: center; }
}