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

:root {
  --bg:      #f5f0e8;
  --bg2:     #ede6d4;
  --bg3:     #e6ddc8;
  --ink:     #1a1208;
  --espresso:#2d1a08;
  --rust:    #d4501a;
  --yellow:  #f0c040;
  --green:   #2a4a28;
  --cream:   #faf6ee;
  --mid:     #7a6a50;
  --border:  rgba(26,18,8,0.1);
}

html { scroll-behavior: smooth; }
body { font-family: 'Syne', sans-serif; background: var(--bg); color: var(--ink); overflow-x: hidden; cursor: none; }

/* cursor */
.cur { position:fixed; z-index:99999; pointer-events:none; width:10px; height:10px; border-radius:50%; background:var(--rust); transform:translate(-50%,-50%); mix-blend-mode:multiply; transition:width .2s,height .2s; }
.cur-ring { position:fixed; z-index:99998; pointer-events:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--rust); transform:translate(-50%,-50%); mix-blend-mode:multiply; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 2.5rem;
  background:var(--bg); border-bottom:2px solid var(--ink);
}
.logo-wrap { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo-mark { position:relative; width:42px; height:42px; }
.logo-cup { animation:wobble 3s ease-in-out infinite; transform-origin:bottom center; }
@keyframes wobble { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.logo-steam { animation:steamUp 2s ease-in-out infinite; transform-origin:bottom center; }
.logo-steam:nth-child(2){animation-delay:.3s}
.logo-steam:nth-child(3){animation-delay:.6s}
@keyframes steamUp { 0%{transform:translateY(0) scaleX(1);opacity:0} 30%{opacity:1} 100%{transform:translateY(-8px) scaleX(1.4);opacity:0} }
.logo-text { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.logo-text span { color:var(--rust); }
.logo-sub { font-family:'Syne Mono',monospace; font-size:.48rem; letter-spacing:.1em; color:var(--mid); display:block; margin-top:1px; }
.nav-links { display:flex; gap:0; list-style:none; }
.nav-links a { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:.5rem 1.1rem; border:1.5px solid transparent; transition:all .15s; }
.nav-links a:hover, .nav-links a.active { border-color:var(--ink); background:var(--ink); color:var(--bg); }
.nav-sub { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--yellow); border:2px solid var(--ink); padding:.5rem 1.4rem; text-decoration:none; transition:background .15s; }
.nav-sub:hover { background:var(--rust); color:var(--cream); border-color:var(--rust); }

/* TICKER */
.ticker { background:var(--rust); padding:.8rem 0; overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.ticker-track { display:flex; animation:tickMove 22s linear infinite; white-space:nowrap; }
@keyframes tickMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item { font-family:'Crimson Pro',serif; font-size:.9rem; font-style:italic; font-weight:300; letter-spacing:.1em; color:rgba(250,246,238,.7); padding:0 2.5rem; flex-shrink:0; }
.ticker-sep { color:var(--yellow); font-style:normal; padding:0 .5rem; }

/* PAGE HERO (inner pages) */
.page-hero {
  padding:8rem 2.5rem 4rem;
  background:var(--espresso);
  border-bottom:2px solid var(--ink);
  position:relative; overflow:hidden;
}
.page-hero-bg { position:absolute; top:-10%; right:-5%; font-size:22vw; font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(245,240,232,.04); line-height:1; pointer-events:none; user-select:none; }
.page-hero-label { font-family:'Syne Mono',monospace; font-size:.65rem; letter-spacing:.2em; color:var(--yellow); margin-bottom:.75rem; }
.page-hero-label::before { content:'// '; }
.page-hero-title { font-size:clamp(3rem,8vw,7rem); font-weight:800; line-height:.9; letter-spacing:-.03em; color:var(--cream); position:relative; z-index:1; }
.page-hero-title em { font-family:'Crimson Pro',serif; font-style:italic; font-weight:300; color:var(--yellow); }
.page-hero-sub { font-size:.82rem; color:rgba(245,240,232,.5); line-height:1.8; max-width:500px; margin-top:1rem; position:relative; z-index:1; }

/* SECTIONS */
.sec-label { font-family:'Syne Mono',monospace; font-size:.65rem; letter-spacing:.2em; color:var(--rust); margin-bottom:.5rem; }
.sec-label::before { content:'// '; }
.sec-title { font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1; letter-spacing:-.02em; margin-bottom:3rem; }
.sec-title em { font-family:'Crimson Pro',serif; font-style:italic; font-weight:300; font-size:1.05em; }

/* BUTTONS */
.btn { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.9rem 2rem; text-decoration:none; border:2px solid; transition:all .15s; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.btn-filled { background:var(--yellow); color:var(--ink); border-color:var(--ink); }
.btn-filled:hover { background:var(--rust); border-color:var(--rust); color:var(--cream); }
.btn-dark { background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn-dark:hover { background:var(--rust); border-color:var(--rust); }
.btn-outline { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover { background:var(--ink); color:var(--bg); }

/* CARDS */
.card-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--ink); border:2px solid var(--ink); }
.card-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink); border:2px solid var(--ink); }
.card-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--ink); border:2px solid var(--ink); }

/* NEWSLETTER */
.nl-section { padding:5rem 2.5rem; background:var(--yellow); border-bottom:2px solid var(--ink); }
.nl-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.nl-title { font-size:clamp(2rem,5vw,4rem); font-weight:800; line-height:.95; letter-spacing:-.02em; margin-bottom:.75rem; }
.nl-title em { font-family:'Crimson Pro',serif; font-style:italic; font-weight:300; }
.nl-sub { font-size:.75rem; color:rgba(26,18,8,.6); letter-spacing:.03em; line-height:1.75; }
.nl-form { display:flex; gap:0; border:2px solid var(--ink); }
.nl-form input { flex:1; background:var(--cream); border:none; outline:none; font-family:'Syne',sans-serif; font-size:.72rem; padding:.9rem 1.25rem; color:var(--ink); }
.nl-form input::placeholder { color:var(--mid); }
.nl-form button { background:var(--ink); color:var(--cream); border:none; cursor:pointer; font-family:'Syne',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:.9rem 1.5rem; transition:background .15s; }
.nl-form button:hover { background:var(--rust); }
.nl-note { font-family:'Syne Mono',monospace; font-size:.58rem; color:rgba(26,18,8,.4); margin-top:.75rem; }

/* FOOTER */
footer { background:var(--ink); color:rgba(245,240,232,.4); padding:3.5rem 2.5rem 2rem; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; margin-bottom:2rem; border-bottom:1px solid rgba(245,240,232,.08); }
.footer-logo-text { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--cream); display:block; margin-bottom:.5rem; }
.footer-logo-text span { color:var(--rust); }
.footer-tagline { font-size:.68rem; color:rgba(245,240,232,.35); line-height:1.75; max-width:200px; }
.footer-col-h { font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,240,232,.25); margin-bottom:1rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-links a { font-size:.7rem; color:rgba(245,240,232,.4); text-decoration:none; transition:color .15s; }
.footer-links a:hover { color:var(--yellow); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.58rem; letter-spacing:.08em; }
.footer-socials { display:flex; gap:1.5rem; }
.footer-socials a { font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,240,232,.25); text-decoration:none; transition:color .15s; }
.footer-socials a:hover { color:var(--yellow); }

/* FILTER TABS */
.filter-bar { display:flex; gap:0; border-bottom:2px solid var(--ink); margin-bottom:2.5rem; }
.filter-btn { font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1.25rem; background:none; border:none; border-bottom:3px solid transparent; cursor:pointer; font-family:'Syne',sans-serif; color:var(--mid); transition:all .15s; margin-bottom:-2px; }
.filter-btn.active { color:var(--rust); border-bottom-color:var(--rust); }
.filter-btn:hover:not(.active) { color:var(--ink); }

/* BREADCRUMB */
.breadcrumb { padding:1rem 2.5rem; font-family:'Syne Mono',monospace; font-size:.6rem; letter-spacing:.1em; color:var(--mid); border-bottom:1px solid var(--border); background:var(--bg); }
.breadcrumb a { color:var(--mid); text-decoration:none; }
.breadcrumb a:hover { color:var(--rust); }
.breadcrumb span { margin:0 .5rem; opacity:.4; }

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade-in { animation:fadeUp .6s both; }
.fade-in-1 { animation:fadeUp .6s .1s both; }
.fade-in-2 { animation:fadeUp .6s .2s both; }
.fade-in-3 { animation:fadeUp .6s .3s both; }

/* RESPONSIVE */
@media(max-width:900px){
  nav { padding:1rem 1.25rem; }
  .nav-links { display:none; }
  .card-grid-2,.card-grid-3,.card-grid-4,.nl-inner { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
  section { padding-left:1.5rem !important; padding-right:1.5rem !important; }
  .page-hero { padding:7rem 1.5rem 3rem; }
  .breadcrumb { padding:1rem 1.5rem; }
}