:root{
  --sage:#4a5e52;
  --sage-light:#8aab97;
  --sage-pale:#e8ede9;
  --cream:#f7f4ef;
  --paper-raised:#ffffff;
  --ink:#1c1f1d;
  --ink-soft:#3a423d;
  --gold:#b59a6a;
  --gold-light:#d4bc96;
  --muted:#5a5f5b;
  --line: rgba(74,94,82,0.16);
  --max: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'DM Sans', sans-serif;
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-light); color:var(--ink);}
a{color:inherit;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
h1,h2,h3{font-family:'Cormorant Garamond',serif; font-weight:400; margin:0; letter-spacing:-0.01em;}
em{font-style:italic; color:var(--sage);}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sage);
  font-weight:500;
}

/* ===== NAV ===== */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,239,0.9);
  backdrop-filter:blur(10px);
  border-bottom:0.5px solid var(--line);
}
nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.logo{font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; letter-spacing:0.02em; text-decoration:none; color:var(--ink);}
.logo span{color:var(--gold);}
.navlinks{display:flex; gap:34px; font-size:12px;}
.navlinks a{
  text-decoration:none; color:var(--muted); transition:color .2s;
  letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
}
.navlinks a:hover, .navlinks a.active{color:var(--sage);}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);}
@media (max-width:720px){
  .navlinks{
    display:none;
    position:absolute; top:68px; left:0; right:0;
    background:var(--cream); border-bottom:0.5px solid var(--line);
    flex-direction:column; gap:0; padding:8px 0;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 32px; border-bottom:0.5px solid var(--line);}
  .nav-toggle{display:block;}
}

/* ===== HERO ===== */
.hero{ position:relative; padding-top:64px; }
.hero .wrap{
  min-height:calc(100vh - 68px);
  display:grid; grid-template-columns:1.15fr 0.85fr;
  align-items:center; gap:4rem;
  padding-top:3rem; padding-bottom:4rem;
}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr; min-height:auto; padding-top:2rem;} }
.hero-eyebrow{margin-bottom:22px;}
.hero h1{ font-size:clamp(38px, 5.4vw, 66px); line-height:1.08; font-weight:300; }
.hero p.lede{ max-width:440px; margin:26px 0 0; font-size:17px; color:var(--ink-soft); line-height:1.8; }
.hero-actions{display:flex; gap:22px; margin-top:38px; align-items:center; flex-wrap:wrap;}
.hero-right{display:flex; flex-direction:column; align-items:flex-end; gap:1.4rem;}
@media (max-width:860px){ .hero-right{align-items:flex-start; margin-top:1rem;} }
.stat-block{text-align:right; padding:0.75rem 1.5rem; border-right:2px solid var(--gold);}
@media (max-width:860px){ .stat-block{text-align:left; border-right:none; border-left:2px solid var(--gold); padding:0.5rem 0 0.5rem 1.5rem;} }
.stat-block b{font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:300; display:block; line-height:1;}
.stat-block span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);}
.hero-divider{width:1px; height:44px; background:var(--line); align-self:flex-end;}
@media (max-width:860px){ .hero-divider{align-self:flex-start;} }

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
  padding:14px 30px;
  background:var(--sage);
  color:#fff;
  text-decoration:none;
  border:none;
  transition:background .2s, transform .15s;
}
.btn:hover{background:#3a4e42; transform:translateY(-1px);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-light); color:var(--ink);}
.btn-ghost{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
  color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
}
.btn-ghost:hover{color:var(--gold); border-color:var(--gold);}

/* ===== SECTION HEADER (numbered) ===== */
section{padding:6.5rem 0;}
.section-header{display:flex; align-items:baseline; gap:1.3rem; margin-bottom:3.5rem;}
.section-number{font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--gold); font-style:italic;}
.section-title{font-size:clamp(1.9rem, 3vw, 2.5rem); font-weight:300; letter-spacing:-0.01em;}
.section-line{flex:1; height:0.5px; background:var(--line);}
.section-head p{color:var(--muted); margin-top:14px; font-size:16.5px; max-width:640px; line-height:1.8;}

/* ===== PHILOSOPHY / RINGS ===== */
.philosophy{background:var(--ink); color:var(--cream);}
.philosophy .eyebrow{color:var(--gold-light);}
.philosophy .section-title{color:#fff;}
.philosophy .section-line{background:rgba(247,244,239,0.14);}
.philosophy .section-number{color:var(--gold-light);}
.philosophy .section-head p{color:rgba(247,244,239,0.62);}
.ring-grid{ display:grid; grid-template-columns: 420px 1fr; gap:4.5rem; align-items:start; }
@media (max-width:900px){ .ring-grid{grid-template-columns:1fr;} }
.ring-visual{ position:relative; width:100%; aspect-ratio:1/1; max-width:420px; margin:0 auto;}
.ring-visual svg{width:100%; height:100%;}
.ring-visual circle{ fill:none; stroke:var(--gold-light); stroke-opacity:0.35; stroke-width:1; transition:stroke-opacity .3s, stroke .3s; }
.ring-visual circle.active{stroke:var(--gold); stroke-opacity:1; stroke-width:1.5;}
.principles{list-style:none; margin:0; padding:0; border-top:0.5px solid rgba(247,244,239,0.14);}
.principle{ padding:1.6rem 0; border-bottom:0.5px solid rgba(247,244,239,0.14); display:grid; grid-template-columns:150px 1fr; gap:1.5rem; transition:opacity .2s; }
.principle .idx{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-light); padding-top:4px; letter-spacing:0.04em; }
.principle h3{font-size:1.35rem; color:#fff; font-weight:400;}
.principle p{margin:10px 0 0; color:rgba(247,244,239,0.62); font-size:15px; max-width:520px; line-height:1.75; font-weight:300;}
@media (max-width:560px){ .principle{grid-template-columns:1fr; gap:6px;} }

/* ===== ABOUT ===== */
#about{background:var(--paper-raised);}
.about-grid{display:grid; grid-template-columns:280px 1fr; gap:4.5rem;}
@media (max-width:800px){ .about-grid{grid-template-columns:1fr;} }
.portrait{ width:100%; aspect-ratio:3/5; background:var(--sage-pale); position:relative; overflow:hidden; }
.portrait::after{ content:""; position:absolute; bottom:-2px; right:-2px; width:60%; height:60%; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
.portrait-label{ position:absolute; bottom:18px; left:18px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--sage); letter-spacing:0.06em; }
.about-body p{font-size:16px; color:var(--ink-soft); max-width:600px; line-height:1.85; font-weight:300;}
.about-body p + p{margin-top:18px;}
.stat-row{display:flex; gap:2.5rem; margin-top:2.5rem; flex-wrap:wrap; padding-top:2rem; border-top:0.5px solid var(--line);}
.stat-row .stat b{font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; display:block;}
.stat-row .stat span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted);}
.booklist{margin-top:2.5rem; border-top:0.5px solid var(--line); padding-top:1.5rem;}
.booklist .eyebrow{margin-bottom:14px; display:block;}
.booklist ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.booklist li{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);
  border:0.5px solid var(--sage-light); padding:7px 14px; background:var(--sage-pale);
}

/* ===== APPROACH ===== */
#approach{background:var(--cream);}
.approach-block + .approach-block{margin-top:3.5rem;}
.approach-block h3{font-size:1.5rem; font-weight:400; max-width:640px;}
.approach-block p{color:var(--ink-soft); font-size:16px; max-width:640px; margin-top:14px; line-height:1.8; font-weight:300;}
.approach-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:1.5rem;}
.approach-card{background:#fff; padding:2.2rem 1.8rem; position:relative;}
.approach-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .3s; transform-origin:left;}
.approach-card:hover::before{transform:scaleX(1);}
@media (max-width:800px){ .approach-grid{grid-template-columns:1fr;} }
.approach-card .mark{font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:300; color:var(--sage-pale); line-height:1;}
.approach-card h3{font-size:1.15rem; margin-top:12px; font-weight:400;}
.approach-card p{color:var(--muted); font-size:14px; margin-top:10px; max-width:none; line-height:1.75;}
.expect-list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px; max-width:640px;}
.expect-list li{ display:flex; gap:14px; font-size:15.5px; color:var(--ink-soft); font-weight:300; }
.expect-list li::before{ content:"—"; color:var(--gold); flex-shrink:0; font-family:'IBM Plex Mono',monospace; }

/* ===== WRITINGS (teaser on home) ===== */
#writing{background:var(--paper-raised);}
.writing-list{border-top:0.5px solid var(--line);}
.writing-row{
  display:grid; grid-template-columns:110px 1fr 130px; gap:24px; padding:1.5rem 0;
  border-bottom:0.5px solid var(--line); text-decoration:none; color:inherit; align-items:baseline;
}
.writing-row:hover h3{color:var(--gold);}
.writing-row .date{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);}
.writing-row h3{font-size:1.15rem; font-weight:400; transition:color .2s;}
.writing-row .tag{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--sage); text-align:right; align-self:center; }
@media (max-width:640px){
  .writing-row{grid-template-columns:1fr; gap:6px;}
  .writing-row .tag{text-align:left;}
}

/* ===== CONTACT (dark) ===== */
#contact{background:var(--ink); color:var(--cream);}
#contact .section-title{color:#fff;}
#contact .section-line{background:rgba(247,244,239,0.12);}
#contact .section-number{color:var(--gold-light);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:4.5rem;}
@media (max-width:800px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info p{color:rgba(247,244,239,0.62); font-size:16px; margin-top:16px; max-width:460px; line-height:1.8; font-weight:300;}
.contact-detail{margin-top:2rem; display:grid; gap:1rem; padding-top:2rem; border-top:0.5px solid rgba(247,244,239,0.12);}
.contact-detail div{font-family:'IBM Plex Mono',monospace; font-size:13px; color:rgba(247,244,239,0.7);}
.contact-detail div b{color:var(--gold-light); font-family:'DM Sans',sans-serif; font-weight:500; display:block; margin-bottom:3px; font-size:11px; text-transform:uppercase; letter-spacing:.08em;}
.form-field{margin-bottom:1.25rem;}
.form-field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(247,244,239,0.45); margin-bottom:8px;}
.form-field input, .form-field textarea{
  width:100%; background:rgba(247,244,239,0.05); border:0.5px solid rgba(247,244,239,0.18); padding:12px 16px;
  font-family:'DM Sans',sans-serif; font-size:14px; color:#fff; outline:none; font-weight:300;
}
.form-field input::placeholder, .form-field textarea::placeholder{color:rgba(247,244,239,0.3);}
.form-field input:focus, .form-field textarea:focus{border-color:var(--gold-light);}
.form-field textarea{resize:vertical; min-height:110px;}

footer{background:#141613; padding:2.2rem 0;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .fine{font-size:12px; color:rgba(247,244,239,0.35); max-width:640px; line-height:1.7;}
footer .flinks{display:flex; gap:24px; font-size:13px;}
footer .flinks a{text-decoration:none; color:rgba(247,244,239,0.55); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;}
footer .flinks a:hover{color:var(--gold-light);}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none; opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}