:root{
  --bg:#FCFBF8;
  --ink:#2A2118;
  --ink-soft:#5C4C3C;
  --panel:#271416;
  --panel-ink:#F3E9D4;
  --panel-ink-soft:#D9BFAF;
  --rust:#8C3A2E;
  --gold:#E0A188;
  --rule: rgba(42,33,24,0.14);
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-serif);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rust);
}
.panel-ink .eyebrow{ color:var(--gold); }

h1,h2,h3{
  font-weight:500;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
}
p{ margin:0; }
.measure{ max-width:38rem; }

/* ---------- wordmark ---------- */
.wordmark{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:1.35rem;
  color:var(--panel-ink);
  line-height:1;
  letter-spacing:0.01em;
  text-decoration:none;
}
.wordmark .i-slot{ position:relative; display:inline-block; }
.wordmark .wave{
  position:absolute;
  top:-0.78em;
  left:50%;
  transform:translateX(-50%);
  width:1.5em;
  height:auto;
  overflow:visible;
}
.wordmark .wave path{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.6;
  stroke-linecap:round;
}

/* ---------- header ---------- */
.site-header{
  background:var(--panel);
  color:var(--panel-ink);
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-links{
  display:flex;
  gap:1.75rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.nav-links a{ text-decoration:none; opacity:0.85; }
.nav-links a:hover{ opacity:1; color:var(--gold); }
.nav-links a:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.nav-cta{
  opacity:1 !important;
  border:1px solid var(--gold);
  padding:0.4rem 0.9rem;
  border-radius:2px;
  transition:background 0.15s ease, color 0.15s ease;
}
.nav-cta:hover{
  background:var(--gold);
  color:var(--panel);
}

/* ---------- hero ---------- */
.hero{ padding:clamp(5rem,12vw,9rem) clamp(1.25rem,4vw,3rem) clamp(3.5rem,8vw,5.5rem); }
.hero-inner{ max-width:50rem; display:flex; flex-direction:column; gap:1.6rem; }
.hero h1{ font-size:clamp(3rem,7.5vw,6rem); letter-spacing:-0.01em; }
.hero .sub{ font-size:1.3rem; color:var(--ink-soft); max-width:34rem; line-height:1.6; }

/* ---------- wave divider ---------- */
.wave-divider{ display:flex; justify-content:center; padding:0.5rem 0 0.75rem; }
.wave-divider svg{ width:220px; height:56px; }
.wave-divider path{ fill:none; stroke:var(--rust); stroke-width:3; stroke-linecap:round; }

/* ---------- generic section ---------- */
.section{ padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3rem); border-top:1px solid var(--rule); }
.section-inner{ max-width:44rem; display:flex; flex-direction:column; gap:1.4rem; }
.section h2{ font-size:clamp(1.6rem,3vw,2.1rem); }
.section .lede{ font-size:1.2rem; line-height:1.7; color:var(--ink); max-width:36rem; }
.section-num{
  font-family:var(--font-serif);
  font-size:2.2rem;
  font-weight:500;
  color:var(--rust);
  line-height:1;
}
.panel-ink .section-num{ color:var(--gold); }

/* ---------- point of view ---------- */
.pov h2{ font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.3; }

/* ---------- situations list ---------- */
.situations{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.situations li{
  display:flex;
  gap:1rem;
  align-items:baseline;
  padding:1.25rem 0;
  border-top:1px solid var(--rule);
}
.situations li:last-child{ border-bottom:1px solid var(--rule); }
.situations .num{ font-family:var(--font-serif); font-style:italic; font-size:1rem; color:var(--rust); flex-shrink:0; }
.situations p{ font-size:1.15rem; line-height:1.6; }

/* ---------- context framework ---------- */
.framework-close{
  font-style:italic;
  font-size:1.25rem;
  color:var(--ink);
  line-height:1.6;
}

/* ---------- philosophy panel ---------- */
.philosophy{ background:var(--panel); color:var(--panel-ink); padding:clamp(3rem,7vw,5rem) clamp(1.25rem,4vw,3rem); }
.philosophy .section-inner{ max-width:36rem; gap:1.4rem; }
.philosophy p{ font-size:clamp(1.3rem,2.8vw,1.7rem); line-height:1.5; font-style:italic; }
.philosophy p.final{ color:var(--gold); font-style:normal; font-weight:500; }

/* ---------- about body ---------- */
.about-body{ display:flex; flex-direction:column; gap:1.4rem; }
.about-body p{ font-size:1.08rem; line-height:1.7; color:var(--ink); max-width:38rem; }
.back-link{
  display:inline-block;
  margin-top:0.5rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--rust);
  text-decoration:none;
}
.back-link:hover{ text-decoration:underline; }

/* ---------- footer ---------- */
.site-footer{
  background:var(--panel);
  color:var(--panel-ink-soft);
  padding:clamp(2.5rem,6vw,3.5rem) clamp(1.25rem,4vw,3rem);
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 3rem;
  justify-content:space-between;
  align-items:flex-end;
}
.site-footer .contact{ font-family:var(--font-mono); font-size:0.8rem; line-height:1.9; }
.site-footer .contact a{ text-decoration:none; }
.site-footer .contact a:hover{ color:var(--gold); }
.site-footer .city{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--panel-ink-soft);
}

@media (max-width:640px){
  .site-footer{ flex-direction:column; align-items:flex-start; }
}