@font-face {
  font-family: "Nimbus Sans L";
  src: url("/assets/fonts/NimbusSanL-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nimbus Sans L";
  src: url("/assets/fonts/NimbusSanL-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #15171a;
  --text: #f1f2f3;
  --body: #c8ced3;
  --muted: #a3afb9;
  --accent: #a6d9ee;
  --rule: #3b4249;
  --sans: "Nimbus Sans L", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  font-family: var(--sans);
  background: var(--background);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .23em; text-decoration-thickness: .06em; }
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }
::selection { color: var(--background); background: var(--accent); }
p { margin: 0; }

.page { width: min(100% - 7rem, 72rem); margin-inline: auto; }
.site-header { min-height: 8rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; border-bottom: 1px solid var(--rule); }
.wordmark { display: inline-flex; align-items: center; gap: 1rem; color: var(--text); font-size: .9375rem; font-weight: 500; text-decoration: none; line-height: 1.5; }
.mark { display: block; flex-shrink: 0; width: 2rem; height: 2rem; filter: brightness(0) invert(1); }
.header-contact { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
.skip-link { position: fixed; z-index: 5; top: 1rem; left: 1rem; padding: .9rem 1.2rem; background: var(--text); color: var(--background); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); color: var(--background); }
main:focus { outline: none; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 5rem; padding-block: 6rem 5rem; }
h1 { margin: 0; font-weight: 400; }
.eyebrow { display: block; color: var(--accent); font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; margin-bottom: 1.8rem; }
.company-name { display: block; font-family: var(--serif); font-size: clamp(2.9rem, 4.5vw, 4.3rem); font-weight: 400; line-height: 1.13; letter-spacing: -.035em; }
.company-copy { padding-top: .05rem; }
.company-copy p, .brand-copy { color: var(--body); font-size: 1.125rem; line-height: 1.75; text-wrap: pretty; }
.company-copy p + p { margin-top: 1.5rem; }
.company-copy .lede { color: var(--text); font-size: 1.5rem; line-height: 1.5; letter-spacing: -.015em; }
strong { color: var(--text); font-weight: 600; }
.audio-name { white-space: nowrap; }
.brand-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; padding-block: 3.5rem; border-top: 1px solid var(--rule); }
.brand-section h2 { margin: 0; color: var(--text); font-family: var(--serif); font-size: 2.25rem; font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
.project-list { margin: 1.5rem 0 0; padding-left: 1.15rem; }
.project-list li { padding-left: .3rem; }
.project-list li + li { margin-top: 1rem; }
.project-list li::marker { color: var(--accent); font-size: .8em; }
.development-note { margin: 0 0 3.5rem; padding: 1.1rem 1.5rem; border-left: 2px solid var(--accent); background: #1b2025; color: var(--text); font-size: 1.125rem; line-height: 1.65; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding-block: 2.75rem 3rem; border-top: 1px solid var(--rule); scroll-margin-top: 2rem; }
.contact h2 { margin: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.65; }
.contact p { color: var(--body); font-size: 1.125rem; line-height: 1.85; }
.email { display: inline-block; min-height: 44px; line-height: 2.4; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--rule); padding-block: 1.75rem 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }

.not-found { padding-block: 6rem; }
.not-found h1 { font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.2; margin-bottom: 2rem; }
.not-found p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.75; margin-top: 1rem; }

@media (max-width: 1050px) {
  .page { width: min(100% - 4rem, 72rem); }
  .about, .brand-section, .contact { column-gap: 3rem; }
  .company-name { font-size: clamp(2.65rem, 4.8vw, 3.6rem); }
}

@media (max-width: 760px) {
  .page { width: min(100% - 3rem, 36rem); }
  .site-header { min-height: 6.5rem; gap: 1.25rem; }
  .wordmark { font-size: .875rem; gap: .75rem; }
  .wordmark > span:last-child { max-width: 12rem; }
  .about { grid-template-columns: 1fr; row-gap: 2.75rem; padding-block: 3.5rem 3rem; }
  .eyebrow { margin-bottom: 1.25rem; }
  .company-name { font-size: clamp(2.65rem, 9.5vw, 3.9rem); }
  .company-copy .lede { font-size: 1.375rem; }
  .brand-section { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem; }
  .brand-section h2 { font-size: 2rem; }
  .development-note { margin-bottom: 2.5rem; padding: 1rem 1.25rem; }
  .contact { grid-template-columns: 1fr; gap: .75rem; padding-block: 2rem; }
  .site-footer { padding-block: 1.5rem 2rem; }
}

@media (max-width: 370px) {
  .page { width: calc(100% - 2.5rem); }
  .site-header { gap: 1rem; }
  .wordmark > span:last-child { max-width: 9rem; }
  .company-name { font-size: 2.4rem; }
}