:root{
  --base:#19120a;
  --surface:#221a10;
  --surface-2:#2c2114;
  --line:#3a2d1c;
  --bone:#ece4d2;
  --mute:#b3a78e;
  --faint:#867a61;
  --brass:#cda356;
  --brass-soft:#e3c684;
  --paper:#f1ead9;
  --paper-ink:#211b10;
  --paper-mute:#615a48;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --maxw:1140px;
  --pad:clamp(1.25rem, 5vw, 3.5rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--base); color:var(--bone);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;}
::selection{background:var(--brass);color:var(--base);}
[v-cloak]{display:none;}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:2; }
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--brass); font-weight:700;
}

header.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(25,18,10,.78); border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);
}
.brand{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; }
.brand .num{ font-family:var(--serif); font-size:1.7rem; line-height:1; color:var(--brass); }
.brand .word{ font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--bone); }
nav.links{ display:flex; gap:2rem; }
nav.links a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--mute); transition:color .2s;
}
nav.links a:hover{ color:var(--brass); }
@media(max-width:680px){ nav.links{ gap:1.1rem; } }

.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero .wrap{ padding-block:clamp(3rem,8vw,6rem); }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media(max-width:820px){
  .hero-grid{ grid-template-columns:1fr; gap:clamp(2.2rem,8vw,3rem); }
  .medallion{ order:-1; }
}

.creed{ max-width:44ch; }
.creed p{
  font-family:var(--serif); font-weight:400; letter-spacing:0;
  font-size:clamp(1.25rem,1.8vw,1.62rem); line-height:1.5; color:var(--bone);
  margin:0 0 .6em; text-wrap:balance;
}
.creed p:last-child{ margin-bottom:0; }
.creed .hl{ color:var(--brass); white-space:nowrap; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }

.medallion{
  position:relative; justify-self:center;
  width:min(78vw,360px); aspect-ratio:1; display:grid; place-items:center;
}
.medallion svg{ position:absolute; inset:0; width:100%; height:100%; }
.medallion circle{ fill:none; stroke:var(--line); stroke-width:1; }
.medallion .ring-brass{ stroke:rgba(205,163,86,.4); }
.medallion .spin{
  stroke:var(--brass); stroke-width:1.5; stroke-dasharray:3 12;
  transform-origin:center; animation:spin 24s linear infinite;
}
.medallion .spin-rev{
  stroke:rgba(205,163,86,.55); stroke-width:1; stroke-dasharray:1 18;
  transform-origin:center; animation:spin 38s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.forty-two{
  position:relative; z-index:1; font-family:var(--serif);
  font-size:clamp(4.5rem,13vw,7rem); line-height:1; color:var(--brass);
  text-shadow:0 0 50px rgba(205,163,86,.3); font-variant-numeric:tabular-nums;
}
.btn{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.85rem 1.4rem; border-radius:2px; text-decoration:none; transition:.2s;
  display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer;
}
.btn-solid{ background:var(--brass); color:var(--base); font-weight:700; }
.btn-solid:hover{ background:var(--brass-soft); }
.btn-ghost{ border:1px solid var(--line); color:var(--bone); background:transparent; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
.btn:disabled{ opacity:.55; cursor:wait; }

section{ padding-block:clamp(3.5rem,8vw,6rem); position:relative; z-index:2; }
.sec-head{ margin-bottom:3rem; }
.sec-head h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.5vw,3rem);
  line-height:1.05; margin:.6rem 0 0; letter-spacing:-.01em;
}
.sec-head p{ color:var(--mute); max-width:54ch; margin:.9rem 0 0; }
.sec-head p.lead-in{ color:var(--bone); }
.sec-head p.statement{
  font-family:var(--serif); font-style:italic; color:var(--brass);
  font-size:clamp(1.3rem,2.5vw,1.7rem); line-height:1.2; margin-top:1.3rem;
}

.companies{ border-top:1px solid var(--line); }
.company{
  display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.5rem,5vw,3.5rem); align-items:center; border-bottom:1px solid var(--line);
}
.company:last-of-type{ border-bottom:none; }
.company .q{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,2.8vw,2.1rem);
  line-height:1.18; color:var(--bone);
}
.company .body .name{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap; }
.company .body .name b{ font-family:var(--serif); font-weight:400; font-size:2rem; color:var(--brass); }
.company .tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--line); padding:.25rem .55rem; border-radius:2px;
}
.company .body p{ color:var(--mute); margin:0 0 1.3rem; }
.company .body .link{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass); text-decoration:none; border-bottom:1px solid transparent; transition:.2s;
}
.company .body .link:hover{ border-color:var(--brass); }
@media(max-width:760px){ .company{ grid-template-columns:1fr; gap:1.2rem; } }

.writing{ border-top:1px solid var(--line); }
.posts{ display:grid; gap:0; }
.post-row{
  display:grid; grid-template-columns:130px 1fr auto; gap:1.5rem; align-items:baseline;
  width:100%; text-align:left; background:none; border:none; color:inherit; cursor:pointer;
  padding:1.5rem 0; border-top:1px solid var(--line); font-family:inherit; transition:.2s;
  text-decoration:none;
}
.post-row:hover{ padding-inline:.4rem; }
.post-row:hover h3{ color:var(--brass); }
.post-row:hover .arrow{ color:var(--brass); }
.post-row .date{ font-family:var(--mono); font-size:.74rem; color:var(--faint); letter-spacing:.05em; }
.post-row h3{ font-family:var(--serif); font-weight:400; font-size:1.4rem; margin:0 0 .3rem; line-height:1.15; transition:color .2s; }
.post-row .dek{ color:var(--mute); font-size:.95rem; }
.post-row .arrow{ font-family:var(--mono); color:var(--faint); font-size:1rem; transition:color .2s; }
@media(max-width:680px){ .post-row{ grid-template-columns:1fr; gap:.4rem; } .post-row .arrow{ display:none; } }
.ph-pill{
  display:inline-block; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); border:1px dashed var(--line);
  padding:.15rem .5rem; border-radius:2px; margin-left:.7rem; vertical-align:middle;
}

.contact{ border-top:1px solid var(--line); }
form{ display:grid; gap:1.1rem; }
.field label{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute); margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--bone);
  font-family:var(--sans); font-size:1rem; padding:.8rem .9rem; border-radius:3px; transition:.2s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(205,163,86,.16);
}
.field select{ appearance:none; cursor:pointer; }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }
.form-msg{ font-family:var(--mono); font-size:.82rem; color:var(--brass); min-height:1.2em; }
.form-msg.error{ color:#e08a6a; }

footer{ border-top:1px solid var(--line); padding-block:3rem; position:relative; z-index:2; }
.foot-inner{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-end; }
.foot-cos{ display:flex; flex-direction:column; gap:.4rem; }
.foot-cos a{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; color:var(--mute); text-decoration:none; }
.foot-cos a:hover{ color:var(--brass); }
.foot-meta{ font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.06em; text-align:right; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.page-loading, .page-error{
  min-height:60vh; display:grid; place-items:center; font-family:var(--mono);
  color:var(--mute); letter-spacing:.08em; font-size:.85rem;
}
.page-error{ color:#e08a6a; }

/* Post page */
.nav-inner.post-nav{ max-width:900px; }
.back{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--mute); transition:color .2s;
}
.back:hover{ color:var(--brass); }
.article-wrap{ padding:clamp(1.5rem,5vw,4rem) 1rem; }
.article{
  max-width:680px; margin:0 auto; background:var(--paper); color:var(--paper-ink);
  border-radius:4px; padding:clamp(1.75rem,5vw,3.5rem);
}
.kicker{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-mute); border:1px dashed rgba(97,90,72,.5);
  padding:.2rem .55rem; border-radius:2px; display:inline-block;
}
.meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); margin-top:1rem; }
.article h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4vw,2.8rem);
  line-height:1.1; margin:.5rem 0 1.4rem;
}
.article .body p{ font-size:1.05rem; line-height:1.75; color:#37301f; margin:0 0 1.2rem; }
.article .body p:first-of-type::first-letter{
  font-family:var(--serif); font-size:3.4rem; float:left; line-height:.8;
  padding:.05em .12em 0 0; color:var(--paper-ink);
}
.post-foot{ border-top:1px solid var(--line); padding:2.5rem 1rem; }
.post-foot .inner{
  max-width:680px; margin:0 auto; font-family:var(--mono); font-size:.72rem;
  color:var(--faint); letter-spacing:.06em;
}
.post-foot a{ color:var(--mute); text-decoration:none; }
.post-foot a:hover{ color:var(--brass); }

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