@font-face { font-family: "Geist"; src: url(fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #f4f1ea;
  --fg: #1a1915;
  --muted: #ebe7dd;
  --muted-fg: #5c5a52;
  --border: #cfc9ba;
  --accent: #1f5f4a;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --page: 72rem;
  --label-col: 12rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; }
address { font-style: normal; }
h1, h2 { font-weight: 600; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.25rem; }
.label {
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.muted { color: var(--muted-fg); }
.link { color: var(--accent); text-underline-offset: 4px; }
.link:hover { text-decoration: underline; }
.skip { position: absolute; left: -9999px; background: var(--fg); color: var(--bg); padding: .5rem 1rem; }
.skip:focus { left: 0; top: 0; }

/* Header */
.site-header { border-bottom: 1px solid var(--fg); }
.site-header .wrap { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; font-size: .875rem; color: var(--muted-fg); }
.site-header nav a:hover, .site-footer nav a:hover, .crumbs a:hover { color: var(--fg); }

/* Home hero */
.hero { padding-block: 4rem; }
.hero h1 { margin-top: 1.5rem; max-width: 56rem; font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.05; letter-spacing: -.03em; }
.lead { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--muted-fg); }
.button { display: inline-flex; align-items: center; margin-top: 2rem; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 500; background: var(--accent); color: var(--bg); }
.button:hover { background: color-mix(in srgb, var(--accent) 90%, transparent); }

/* Sections */
.section { padding-block: 3rem; }
.section.ruled { border-top: 1px solid var(--fg); }
.section.tinted { background: var(--muted); }
.split { display: grid; gap: 1rem; }
.section h2, .prose h2 { margin-bottom: 1rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: -.025em; }
.split > div p { margin-bottom: 1rem; max-width: 42rem; line-height: 1.75rem; }

/* Company record */
.record { margin-top: 1.5rem; border-top: 1px solid var(--fg); }
.record > div { display: grid; gap: .25rem; padding-block: 1rem; border-bottom: 1px solid var(--border); }
.record dd { font-size: 1.125rem; line-height: 1.75rem; }

/* Invoice note */
.note { max-width: 48rem; padding: 1.5rem; border: 1px solid var(--fg); background: var(--bg); }
.note h2 { margin: 0; font-size: 1.25rem; line-height: 1.75rem; }
.note p { margin-top: .75rem; line-height: 1.75rem; }
.note p:last-child { margin-top: 1rem; font-weight: 500; }

/* Inner pages */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; padding-top: 1.5rem; font-size: .875rem; color: var(--muted-fg); }
.crumbs li + li::before { content: "/"; margin-inline: .5rem; }
.page-head { padding-top: 2rem; padding-bottom: 1rem; }
.page-head h1 { max-width: 48rem; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -.025em; }
.page-head .lead { margin-top: 1rem; }

.cells { display: grid; border-top: 1px solid var(--fg); }
.cells > div { padding-block: 1.5rem; border-bottom: 1px solid var(--border); }
.cells .big { margin-top: .75rem; font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -.025em; }
.cells address { margin-top: .75rem; font-size: 1.125rem; line-height: 1.75rem; }
.cells .muted { margin-top: .75rem; max-width: 28rem; }

.prose .updated { font-size: .875rem; color: var(--muted-fg); }
.prose section, .prose > p:last-child { margin-top: 2.5rem; max-width: 42rem; }
.prose p { line-height: 1.75rem; }

/* Footer */
.site-footer { margin-top: auto; border-top: 1px solid var(--fg); font-size: .875rem; line-height: 1.25rem; }
.site-footer .cols { display: grid; gap: 2rem; padding-block: 2.5rem; }
.site-footer .name { font-weight: 600; }
.site-footer .name + p { margin-top: .5rem; }
.site-footer .label { margin-top: 1rem; }
.site-footer address { margin-top: .25rem; }
.site-footer ul { display: flex; flex-direction: column; gap: .5rem; }
.site-footer .legal { padding-block: 1.5rem; border-top: 1px solid var(--border); }

@media (min-width: 40rem) {
  .wrap { padding-inline: 2rem; }
  .hero { padding-block: 6rem; }
  .section { padding-block: 4rem; }
  .split { grid-template-columns: var(--label-col) 1fr; gap: 1.5rem; }
  .split > .label { padding-top: .5rem; }
  .section h2, .prose h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .record > div { grid-template-columns: var(--label-col) 1fr; gap: 1.5rem; }
  .record dt { padding-top: .25rem; }
  .note { padding: 2rem; }
  .note h2 { font-size: 1.25rem; line-height: 1.75rem; }
  .page-head h1 { font-size: 3rem; line-height: 1; }
  .cells { grid-template-columns: 1fr 1fr; }
  .cells > div:first-child { padding-right: 2rem; border-right: 1px solid var(--border); }
  .cells > div:last-child { padding-left: 2rem; }
  .site-footer .cols { grid-template-columns: 2fr 1fr; }
}