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

:root{
  --ink: #101c17;
  --ink-2: #17251e;
  --paper: #f3efe2;
  --paper-dim: #e8e2cf;
  --gold: #d9a62e;
  --teal: #4f8271;
  --clay: #b5533c;
  --text-on-ink: #f3efe2;
  --text-on-ink-dim: #b9c3ba;
  --text-on-paper: #16231c;
  --text-on-paper-dim: #4c5750;
  --rule: rgba(243,239,226,0.16);
  --rule-dark: rgba(22,35,28,0.14);
  --max: 1040px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-on-ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* NAV */
nav{
  position:sticky; top:0; z-index:40;
  background:rgba(16,28,23,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-name{ font-family:'Fraunces', serif; font-size:19px; font-weight:500; text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:14px; text-decoration:none; color:var(--text-on-ink-dim); transition:color .2s ease; }
.nav-links a:hover, .nav-links a.active{ color:var(--text-on-ink); }
.nav-cta{
  background:var(--gold); color:#1a1408 !important; padding:9px 16px; border-radius:2px; font-weight:500;
}
.nav-cta:hover{ color:#1a1408 !important; }
@media (max-width:700px){ .nav-links{gap:14px;} .nav-links span.sep{display:none;} }
/* Nav has enough items to overflow narrow viewports — let it scroll rather than break the bar */
@media (max-width:860px){
  nav .wrap{ gap:16px; }
  .nav-links{
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:0 2px; margin:0 -2px;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links li{ flex:0 0 auto; }
  .nav-links a{ white-space:nowrap; }
}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:2px; font-size:14.5px;
  text-decoration:none; border:1px solid transparent;
  transition:transform .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--gold); color:#1a1408; }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-ghost{ border-color:var(--rule); color:var(--text-on-ink); }
.btn-ghost:hover{ border-color:var(--text-on-ink-dim); }
section.on-paper .btn-ghost{ border-color:var(--rule-dark); color:var(--text-on-paper); }

/* SECTIONS */
section{ padding:76px 0; }
section.on-paper{ background:var(--paper); color:var(--text-on-paper); }
.section-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  margin-bottom:40px; border-bottom:1px solid var(--rule); padding-bottom:20px;
}
section.on-paper .section-head{ border-color:var(--rule-dark); }
.section-head h2{ font-size:clamp(26px,3.4vw,34px); }
.section-head .count{ font-size:14px; color:var(--text-on-ink-dim); white-space:nowrap; }
section.on-paper .section-head .count{ color:var(--text-on-paper-dim); }
.kicker{ font-size:15px; color:var(--gold); margin-bottom:16px; }
section.on-paper .kicker{ color:var(--clay); }

/* PAGE HERO (sub-pages) */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--rule); }
.page-hero h1{ font-size:clamp(34px,5.2vw,52px); line-height:1.05; max-width:16ch; }
.page-hero p{ margin-top:18px; font-size:17px; color:var(--text-on-ink-dim); max-width:56ch; }

/* FOOTER */
footer{ padding:70px 0 48px; }
.contact-head{ font-size:clamp(28px,4.6vw,42px); max-width:15ch; margin-bottom:24px; }
.contact-links{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:48px; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--rule); padding-top:22px;
  font-size:13px; color:var(--text-on-ink-dim); flex-wrap:wrap; gap:10px;
}

/* PLACEHOLDER NOTE */
.placeholder-note{
  border:1px dashed var(--rule-dark); border-radius:2px; padding:14px 18px;
  font-size:13.5px; color:var(--text-on-paper-dim); margin-bottom:36px; max-width:64ch;
}
section:not(.on-paper) .placeholder-note{ border-color:var(--rule); color:var(--text-on-ink-dim); }