/* ChuckPoole redesign — shared design system */
:root{
  --black:#0a0908;
  --black-2:#13110f;
  --bone:#f5f1e8;
  --bone-dim:#d9d2c3;
  --coral:#ff5e3a;
  --gold:#c9a84c;
  --muted:#8a8275;
  --hairline:rgba(245,241,232,0.12);
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  font-variation-settings:"opsz" 14,"wght" 380;
  background:var(--black);
  color:var(--bone);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:880px){body{cursor:auto}}

/* Film grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.08;mix-blend-mode:overlay;
}
/* Vignette */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.5) 100%);
}

/* Custom cursor */
.cursor{
  position:fixed;width:14px;height:14px;border:1px solid var(--bone);
  border-radius:50%;pointer-events:none;z-index:10000;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .25s,height .25s,background .25s;
}
.cursor.hover{width:48px;height:48px;background:var(--bone);}
@media (max-width:880px){.cursor{display:none}}

/* Nav */
nav.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 2.5rem;
  mix-blend-mode:difference;
}
.nav-mark{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144,"wght" 500;
  font-size:1.5rem;color:var(--bone);text-decoration:none;letter-spacing:-0.02em;
}
.nav-mark em{color:var(--coral);font-style:normal}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone);text-decoration:none;
  position:relative;padding:.25rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--coral);transition:width .35s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
@media (max-width:880px){
  nav.site-nav{padding:1rem 1.25rem}
  .nav-links{gap:1rem}
  .nav-links a{font-size:.6rem}
}

/* Marginalia */
.marginalia{
  position:fixed;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
  writing-mode:vertical-rl;transform:rotate(180deg);z-index:50;
  pointer-events:none;
}
.marginalia.left{left:1.5rem;top:50%;transform:translateY(-50%) rotate(180deg)}
.marginalia.right{right:1.5rem;top:50%;transform:translateY(-50%) rotate(180deg)}
@media (max-width:880px){.marginalia{display:none}}

/* Page chrome */
.page-num{position:fixed;bottom:1.5rem;left:1.5rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;color:var(--muted);z-index:50}
.page-clock{position:fixed;bottom:1.5rem;right:1.5rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;color:var(--muted);z-index:50}

/* Type scale */
.display{
  font-family:var(--serif);
  font-variation-settings:"opsz" 144,"wght" 400;
  font-size:clamp(2.5rem,7vw,6rem);
  line-height:.95;letter-spacing:-0.03em;
}
.display em{color:var(--coral);font-style:italic;font-variation-settings:"opsz" 144,"wght" 300}
h1,h2,h3{font-family:var(--serif);font-variation-settings:"opsz" 144,"wght" 400;letter-spacing:-0.02em;line-height:1.05}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--coral);margin-bottom:1rem;display:inline-block}
.lede{font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--bone-dim);max-width:60ch}
.body-prose{font-size:1.1rem;line-height:1.75;color:var(--bone-dim);max-width:65ch}
.body-prose p{margin-bottom:1.4rem}
.body-prose p:first-child::first-letter{
  font-family:var(--serif);font-variation-settings:"opsz" 144,"wght" 400;
  float:left;font-size:5.5rem;line-height:.85;padding:.4rem .6rem 0 0;color:var(--coral);
}
.pull-quote{
  font-family:var(--serif);font-style:italic;
  font-variation-settings:"opsz" 144,"wght" 350;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25;
  color:var(--coral);border-left:2px solid var(--coral);
  padding-left:1.5rem;margin:2.5rem 0;max-width:55ch;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;border:1px solid var(--bone);
  padding:1rem 1.75rem;background:transparent;cursor:none;
  transition:background .35s,color .35s;
}
.btn:hover{background:var(--bone);color:var(--black)}
.btn.coral{border-color:var(--coral);color:var(--coral)}
.btn.coral:hover{background:var(--coral);color:var(--black)}

/* Footer */
footer.site-foot{
  border-top:1px solid var(--hairline);
  padding:4rem 2.5rem 2rem;margin-top:8rem;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;
}
.foot-brand .nav-mark{font-size:2.5rem}
.foot-brand p{color:var(--muted);max-width:35ch;margin-top:1rem;font-size:.95rem}
.foot-col h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.foot-col a{display:block;color:var(--bone);text-decoration:none;padding:.35rem 0;font-size:.95rem}
.foot-col a:hover{color:var(--coral)}
.foot-bottom{grid-column:1/-1;padding-top:2rem;margin-top:2rem;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--muted);display:flex;justify-content:space-between}
@media (max-width:880px){footer.site-foot{grid-template-columns:1fr;padding:3rem 1.25rem 1.5rem;gap:2rem}}

/* Container */
.container{max-width:1280px;margin:0 auto;padding:0 2.5rem}
@media (max-width:880px){.container{padding:0 1.25rem}}

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* Hairlines */
.rule{height:1px;background:var(--hairline);margin:4rem 0}