/* ============================================================
   oscarwallner.com / orch.build — site layer over Mainstay tokens
   Static, no build step. Every page: nav → main → footer.
   ============================================================ */
@import url('tokens.css');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: 'Instrument Serif', Georgia, serif; }
.mono  { font-family: 'Geist Mono', ui-monospace, monospace; }

/* ---- chrome ---- */
.nav {
  max-width: 1080px; margin: 0 auto; padding: 28px 24px 0;
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
}
.nav__name { font-family: 'Instrument Serif', serif; font-size: 22px; color: var(--forest-700); text-decoration: none; }
.nav__links { margin-left: auto; display: flex; gap: 22px; }
.nav__links a { color: var(--ink-500); text-decoration: none; font-size: 14.5px; letter-spacing: .01em; }
.nav__links a:hover, .nav__links a.on { color: var(--forest-700); border-bottom: 1px solid var(--clay-500); }

main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.footer {
  max-width: 1080px; margin: 72px auto 0; padding: 26px 24px 44px;
  border-top: 1px solid var(--paper-300);
  display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline;
  color: var(--ink-500); font-size: 14px;
}
.footer a { color: var(--forest-500); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .mono { font-size: 12.5px; color: var(--ink-300); margin-left: auto; }

/* ---- typography ---- */
.eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--clay-600);
}
h1 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(38px, 5.4vw, 62px); line-height: 1.08;
  color: var(--forest-900); text-wrap: balance; margin: 14px 0 22px;
}
h1 em { font-style: italic; color: var(--forest-500); }
h2 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(26px, 3.2vw, 34px); color: var(--forest-900);
  margin: 0 0 14px; text-wrap: balance;
}
h3 { font-size: 17px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.standfirst {
  font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--ink-700);
  max-width: 62ch; text-wrap: balance;
}
p { max-width: 66ch; color: var(--ink-700); }
p + p { margin-top: 14px; }
.muted { color: var(--ink-500); }
.small { font-size: 14.5px; }

section { margin-top: 72px; }
.hero { margin-top: 64px; }

/* ---- components ---- */
.signals {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--paper-300); border: 1px solid var(--paper-300);
  border-radius: 6px; overflow: hidden; margin-top: 40px;
}
.signal { background: var(--paper-100); padding: 18px 18px 15px; }
.signal .v { font-family: 'Geist Mono', monospace; font-size: 21px; font-weight: 600; color: var(--forest-700); }
.signal .l { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 3px; line-height: 1.4; }

.strip {
  margin-top: 26px; display: flex; gap: 10px 26px; flex-wrap: wrap;
  font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--ink-500);
}
.strip b { color: var(--forest-700); font-weight: 500; }

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 28px; }
.door {
  display: block; text-decoration: none; border: 1px solid var(--paper-300);
  border-radius: 6px; background: var(--paper-100); padding: 20px 20px 18px;
  transition: border-color .15s ease;
}
.door:hover { border-color: var(--clay-500); }
.door .eyebrow { font-size: 11px; }
.door h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 21px; color: var(--forest-900); margin: 6px 0 6px; }
.door p { font-size: 14.5px; color: var(--ink-500); }
.door .go { display: inline-block; margin-top: 10px; font-family: 'Geist Mono', monospace; font-size: 12.5px; color: var(--clay-600); }

.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 26px; }

/* work cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 26px; }
.card {
  border: 1px solid var(--paper-300); border-radius: 6px;
  background: var(--paper-100); padding: 22px 22px 18px;
}
.card .tag { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-600); }
.card h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; margin: 8px 0 8px; color: var(--forest-900); }
.card p { font-size: 15px; color: var(--ink-700); }
.card .facts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-500); }

/* arc / timeline */
.arc { border-left: 2px solid var(--paper-300); margin-top: 30px; }
.arc__item { position: relative; padding: 0 0 34px 30px; }
.arc__item::before {
  content: ''; position: absolute; left: -6px; top: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--clay-500); border: 2px solid var(--paper-50);
}
.arc__when { font-family: 'Geist Mono', monospace; font-size: 12.5px; color: var(--ink-300); letter-spacing: .06em; }
.arc__item h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 23px; color: var(--forest-900); margin: 4px 0 8px; }

/* writing list + article */
.post-list { margin-top: 26px; display: flex; flex-direction: column; }
.post {
  display: block; text-decoration: none; padding: 22px 4px;
  border-bottom: 1px solid var(--paper-300);
}
.post:first-child { border-top: 1px solid var(--paper-300); }
.post .arc__when { }
.post h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 24px; color: var(--forest-900); margin: 4px 0 6px; }
.post:hover h3 { color: var(--forest-500); }
.post p { font-size: 15px; color: var(--ink-500); }

article { max-width: 680px; margin-top: 56px; }
article h1 { font-size: clamp(32px, 4.4vw, 46px); }
article h2 { font-size: 24px; margin-top: 40px; }
article p { margin-top: 16px; font-size: 17px; }
article ul { margin: 16px 0 0 22px; color: var(--ink-700); }
article li { margin-top: 8px; max-width: 62ch; }
article .pull {
  font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1.4;
  color: var(--forest-700); border-left: 3px solid var(--clay-500);
  padding-left: 20px; margin: 32px 0;
}

/* cv */
.cv h3 { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.cv .arc__when { margin-left: auto; }
.cv ul { margin: 8px 0 0 20px; }
.cv li { margin-top: 5px; color: var(--ink-700); max-width: 70ch; }

@media (max-width: 640px) {
  .nav__links { margin-left: 0; }
  section { margin-top: 56px; }
}

/* ---- hand-drawn artifacts (Mainstay illustrations) ---- */
.illo { float: right; width: 120px; height: 120px; margin: 0 0 12px 28px; opacity: .85; }
.illo--lg { width: 150px; height: 150px; }
.flourish { display: block; width: 180px; margin-top: 10px; }
@media (max-width: 640px) { .illo { width: 88px; height: 88px; margin-left: 16px; } }