:root {
  --bg: #0e0f11;
  --panel: #17191c;
  --line: #2a2d32;
  --text: #f2f1ee;
  --muted: #a3a29d;
  --accent: #e8b04a;
  --tally: #e5484d;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f5f1;
    --panel: #ffffff;
    --line: #e3dfd8;
    --text: #17181a;
    --muted: #5f5d58;
    --accent: #8a5e0f;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
main > .wrap { width: 100%; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
header { padding: 16px 0; border-bottom: 1px solid var(--line); }
header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; }
.brand {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  font-weight: 600; letter-spacing: 0.02em; color: var(--text); text-decoration: none;
}
.tally { width: 10px; height: 10px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tally) 22%, transparent); }
.nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.nav a {
  position: relative; padding: 11px 0 9px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
  border-bottom: 2px solid transparent; transition: color 150ms ease;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
/* Hover: a gold underline grows in from the left */
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 200ms ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { display: none; }
/* The current page's underline; named so it glides to the next page's link */
.nav-mark { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); view-transition-name: nav-mark; }
@media (max-width: 480px) {
  .nav { width: 100%; justify-content: space-between; gap: 0 4px; }
  .nav a { font-size: 13px; }
}
.hero { padding-top: 64px; padding-bottom: 64px; }
.page { padding-top: 56px; padding-bottom: 56px; }
.eyebrow { color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 18px; }
h1 {
  font-family: Fraunces, Georgia, serif; font-weight: 600;
  font-size: clamp(36px, 6vw, 60px); line-height: 1.08; letter-spacing: -0.01em;
  margin: 0 0 24px; max-width: 16ch;
}
.lede { color: var(--muted); font-size: 21px; max-width: 58ch; margin: 0; }
.lede a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.lede a:hover { color: var(--accent); }
section { padding: 56px 0; border-top: 1px solid var(--line); }
h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 28px; margin: 0 0 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.card h2 { font-family: inherit; font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.card p { color: var(--muted); margin: 0; font-size: 16.5px; }
.approach p { max-width: 62ch; margin: 0 0 16px; color: var(--muted); }
.approach p:first-of-type { color: var(--text); }
.contact a.mail {
  display: inline-block; margin-top: 4px; font-size: 22px; font-weight: 600;
  color: var(--text); text-decoration: none; border-bottom: 2px solid var(--accent);
  transition: color 150ms ease, box-shadow 150ms ease;
}
.contact a.mail:hover, .contact a.mail:focus-visible { color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.contact .also { color: var(--muted); margin-top: 14px; font-size: 16px; }
.contact .also a { color: var(--muted); }
/* Contact band: the page footer on every page but Contact. Same height on
   every page and, on desktop, pinned to the bottom of the window so it never
   moves; longer pages scroll behind it. */
.band { padding: 0; font-size: inherit; color: var(--text); background: var(--bg); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding-top: 22px; padding-bottom: 22px; }
.band h2 { margin: 0; }
.band .copy { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.band .also { margin: 6px 0 0; }
@media (min-width: 720px) {
  .band .wrap { box-sizing: border-box; height: 128px; }
}
@media (min-width: 720px) and (min-height: 600px) {
  .band { position: sticky; bottom: 0; z-index: 5; }
}
footer { padding: 24px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 10; padding: 10px 16px; border-radius: 8px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Page transitions: the header stays put, the page content slides in from the
   right (from the left when going back in the menu), and the gold underline
   glides to the new menu item. Only for visitors who haven't asked their
   device to reduce motion; for them pages simply switch. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
header { view-transition-name: site-header; }
main { view-transition-name: page; }
.band { view-transition-name: contact-band; }
footer { view-transition-name: site-footer; }
::view-transition-group(page) { animation: none; }
::view-transition-old(page) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both vt-out-left; }
::view-transition-new(page) { animation: 280ms cubic-bezier(0, 0, 0.2, 1) 60ms both vt-in-right; }
html[data-dir="back"]::view-transition-old(page) { animation-name: vt-out-right; }
html[data-dir="back"]::view-transition-new(page) { animation-name: vt-in-left; }
::view-transition-group(nav-mark) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-32px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(32px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-32px); } }

@media (prefers-reduced-motion: reduce) {
  .nav a, .nav a::after, .contact a.mail { transition: none; }
}