@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --charcoal:#14181A;
  --charcoal-soft:#1E2521;
  --paper:#F3EFE6;
  --oak:#A6772E;
  --oak-bright:#C99742;
  --sage:#4C5D52;
  --rust:#6B3F2A;
  --cream:#EFE9DA;
  --line: rgba(239,233,218,0.14);
  --line-dark: rgba(20,24,26,0.12);
  --radius: 2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:'Public Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}

a{color:inherit;}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--oak);
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw;
  background:rgba(243,239,230,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dark);
}
.nav .mark{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
}
.nav .mark .ring{
  width:22px;height:22px;flex-shrink:0;
}
.nav-links{display:flex; gap:32px; font-size:0.92rem;}
.nav-links a{text-decoration:none; color:var(--charcoal); opacity:0.75; transition:opacity .2s;}
.nav-links a:hover, .nav-links a:focus-visible{opacity:1;}
.nav-cta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-decoration:none;
  color:var(--paper);
  background:var(--charcoal);
  padding:10px 18px;
  border-radius:var(--radius);
  transition:background .2s;
}
.nav-cta:hover, .nav-cta:focus-visible{background:var(--rust);}

/* Hero */
.hero{
  position:relative;
  background:var(--charcoal);
  color:var(--cream);
  padding:min(14vh,120px) 6vw 90px;
  overflow:hidden;
}
.hero-rings{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:min(56vw,640px); height:auto; opacity:0.9;
}
.hero-inner{position:relative; z-index:2; max-width:640px;}
.hero h1{
  font-size:clamp(2.4rem, 5.4vw, 4.1rem);
  line-height:1.04;
  color:var(--paper);
}
.hero h1 em{
  font-style:normal;
  color:var(--oak-bright);
}
.hero p.lede{
  margin-top:22px;
  font-size:1.15rem;
  max-width:480px;
  color:rgba(239,233,218,0.8);
}
.hero-actions{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn-primary{
  font-family:'JetBrains Mono', monospace;
  font-size:0.82rem;
  letter-spacing:0.03em;
  text-decoration:none;
  color:var(--charcoal);
  background:var(--oak-bright);
  padding:15px 26px;
  border-radius:var(--radius);
  transition:transform .2s, background .2s;
  display:inline-block;
}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--cream); transform:translateY(-1px);}
.hero-note{font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:rgba(239,233,218,0.55);}

/* Section shell */
section{padding:96px 6vw;}
.section-head{max-width:600px; margin-bottom:56px;}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem); margin-top:10px;}
.section-head p{margin-top:16px; color:var(--sage); font-size:1.05rem; max-width:520px;}

/* Rings process */
.rings-wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
}
.ring-diagram{width:100%; height:auto;}
.ring-steps{display:flex; flex-direction:column; gap:0;}
.ring-step{
  padding:24px 0;
  border-top:1px solid var(--line-dark);
  display:grid; grid-template-columns: 60px 1fr; gap:20px;
}
.ring-step:last-child{border-bottom:1px solid var(--line-dark);}
.ring-step .ring-index{
  font-family:'JetBrains Mono', monospace;
  color:var(--oak);
  font-size:0.85rem;
  padding-top:4px;
}
.ring-step h3{font-size:1.15rem; margin-bottom:6px;}
.ring-step p{margin:0; color:var(--sage); font-size:0.97rem;}

/* Why grid */
.why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.why-card{background:var(--paper); padding:34px 28px;}
.why-card h3{font-size:1.1rem; margin-bottom:10px;}
.why-card p{margin:0; color:var(--sage); font-size:0.95rem;}

/* Contact */
.optin{
  background:var(--charcoal-soft);
  color:var(--cream);
}
.optin .section-head p{color:rgba(239,233,218,0.65);}
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;}
.optin-copy h2{color:var(--paper);}
.optin-list{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.optin-list li{
  display:flex; gap:12px; align-items:baseline;
  font-size:0.98rem; color:rgba(239,233,218,0.85);
}
.optin-list li::before{
  content:"—"; color:var(--oak-bright); flex-shrink:0;
}
.contact-card{background:var(--paper); color:var(--charcoal); padding:42px; border-radius:var(--radius);}
.contact-link{display:block; width:fit-content; margin-top:18px; color:var(--charcoal); font-family:'Fraunces', serif; font-size:clamp(1.65rem,3vw,2.3rem); line-height:1.15; text-decoration:none; transition:color .2s;}
.contact-link:hover, .contact-link:focus-visible{color:var(--rust);}
.contact-link.contact-email{font-family:'JetBrains Mono', monospace; font-size:clamp(.82rem,1.5vw,1rem); color:var(--rust);}
.contact-card p{margin:28px 0 0; padding-top:24px; border-top:1px solid var(--line-dark); color:var(--sage);}

/* Footer */
footer{
  padding:50px 6vw 40px;
  border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; align-items:center;
}
.footer-links{display:flex; gap:26px; font-size:0.86rem; flex-wrap:wrap;}
.footer-links a{text-decoration:none; color:var(--sage);}
.footer-links a:hover{color:var(--rust);}
.footer-fine{font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--sage); max-width:560px;}

/* Legal pages */
.legal{
  max-width:760px; margin:0 auto; padding:70px 6vw 110px;
}
.legal .eyebrow{margin-bottom:14px; display:block;}
.legal h1{font-size:clamp(2rem,4vw,2.6rem); margin-bottom:6px;}
.legal .updated{font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--sage); margin-bottom:44px; display:block;}
.legal h2{font-size:1.3rem; margin-top:42px; margin-bottom:14px; font-family:'Fraunces', serif;}
.legal p, .legal li{color:#2c332e; font-size:0.98rem; line-height:1.75;}
.legal ul{padding-left:22px;}
.legal .callout{
  background:var(--paper); border:1px solid var(--line-dark);
  border-left:3px solid var(--oak);
  padding:18px 22px; margin:24px 0; font-size:0.92rem;
}
.legal .placeholder{
  background:#FFF4E5; border:1px dashed var(--oak); color:#6B3F2A;
  padding:2px 6px; border-radius:2px; font-family:'JetBrains Mono', monospace; font-size:0.85em;
}

@media (max-width: 860px){
  .rings-wrap, .contact-grid{grid-template-columns:1fr; gap:40px;}
  .why-grid{grid-template-columns:1fr;}
  .hero-rings{opacity:0.35; width:80vw;}
  .nav-links{display:none;}
}

@media (max-width: 480px){
  .nav{padding:16px 5vw;}
  .nav .mark{font-size:.9rem; gap:7px;}
  .nav .mark .ring{width:18px; height:18px;}
  .nav-cta{padding:9px 12px; font-size:.7rem;}
  .contact-card{padding:30px 24px;}
}