/* Fogo Capital — fogo-capital.com
   Palette taken from the tempering colours of heated steel: straw, bronze,
   oxide, and the blue a forge runs past. Deliberately not the salon's warmth.
   Instrument Serif for display, Inter Tight for reading, IBM Plex Mono for
   anything that behaves like a record. */

:root{
  --bone:#F2EDE6;
  --paper:#FAF7F3;
  --ink:#14110F;
  --iron:#3A3431;
  --straw:#E8C87A;
  --bronze:#B0724A;
  --oxide:#8E4A33;
  --rule:rgba(20,17,15,.14);

  --display:"Instrument Serif",Georgia,serif;
  --body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --gutter:clamp(1.25rem,5vw,3.5rem);
  --stack:clamp(4rem,9vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .28vw,1.1rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{width:min(1080px,100% - var(--gutter)*2);margin-inline:auto}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;background:var(--ink);color:var(--bone);padding:.7rem 1rem;z-index:99}
:where(a,button):focus-visible{outline:2px solid var(--oxide);outline-offset:3px}

/* ---------- bar ---------- */
.bar{border-bottom:1px solid var(--rule)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.8rem}
.mark{
  font-family:var(--display);
  font-size:1.35rem;letter-spacing:.01em;text-decoration:none;
}
.bar__mail{text-decoration:none;opacity:.65;transition:opacity .2s ease}
.bar__mail:hover{opacity:1}

/* ---------- hero ---------- */
.hero{padding:clamp(4rem,11vw,9rem) 0 clamp(3rem,7vw,5rem)}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;opacity:.55;margin:0 0 2.5rem}
.hero__h{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.5rem,1.6rem + 5.2vw,5.6rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
  max-width:16ch;
}
.hero__h em{font-style:italic;color:var(--oxide)}

/* signature: tempering scale */
.temper{display:flex;gap:0;margin-top:clamp(3rem,7vw,5rem);max-width:22rem}
.temper span{flex:1;height:.4rem;background:var(--c)}

/* ---------- bands ---------- */
.band{padding:var(--stack) 0;border-top:1px solid var(--rule)}
.grid2{display:grid;grid-template-columns:14rem 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.label{text-transform:uppercase;letter-spacing:.2em;opacity:.5;margin:.35rem 0 0}
.prose{max-width:56ch}
.prose p{margin:0 0 1.35rem;font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.55}
.prose p:last-child{margin-bottom:0}

/* ---------- ledger (signature) ---------- */
.band--ledger .label{margin-bottom:2rem}
.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.82rem}
.ledger th,.ledger td{text-align:left;padding:1rem .75rem;border-bottom:1px solid var(--rule)}
.ledger th{
  font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;
  opacity:.5;border-bottom-color:var(--ink);
}
.ledger__empty td{opacity:.5;font-style:normal;padding-block:1.75rem}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--bone);padding:var(--stack) 0}
.label--light{opacity:.45}
.contact__lead{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.1rem + 2vw,2.6rem);
  line-height:1.2;max-width:24ch;margin:1.75rem 0 2.5rem;
}
.contact__mail{
  font-family:var(--display);
  font-size:clamp(1.15rem,.9rem + 1.2vw,1.9rem);
  color:var(--straw);text-decoration:none;
  border-bottom:1px solid rgba(232,200,122,.35);
  transition:border-color .2s ease;
}
.contact__mail:hover{border-bottom-color:var(--straw)}
.contact__meta{margin:2.5rem 0 0;opacity:.45}

/* ---------- footer ---------- */
.foot{padding:1.75rem 0}
.foot__in{display:flex;justify-content:space-between;opacity:.45}

@media (max-width:720px){
  .grid2{grid-template-columns:1fr;gap:1rem}
  .bar__mail{display:none}
  .ledger th:nth-child(2),.ledger td:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}