:root {
  color-scheme: dark;
  --navy: #1b1e41;
  --navy-deep: #0f1330;
  --navy-card: #232a55;
  --navy-card-hover: #2f3768;
  --paper: #fcfbff;
  --gold: #f8c80e;
  --gold-hover: #ffd633;
  --muted: #a9adca;
  --border: rgba(255,255,255,.14);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  background: var(--navy);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; }
a { color: var(--gold-hover); text-decoration: none; }
a:hover { color: #ffe27a; }
a:focus-visible { outline: 3px solid #1fb6a6; outline-offset: 4px; border-radius: 4px; }
.site-shell { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; background: var(--navy); color: var(--paper); }
.background-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.container { position: relative; z-index: 1; width: min(100%,1120px); margin-inline: auto; padding-inline: 32px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); font: 800 32px/1 "Bricolage Grotesque",system-ui,sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.brand:hover { color: var(--paper); }
.brand img { display: block; width: 52px; height: 52px; object-fit: contain; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 32px; padding: 8px 16px; border-radius: 999px; background: var(--gold); color: var(--navy-deep); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; transition: background .15s ease, transform .15s ease; }
.button:hover { background: var(--gold-hover); color: var(--navy-deep); transform: translateY(-1px); }
.home-main, .portfolio-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 96px 64px; }
.eyebrow { margin: 0 0 24px; color: #ffe27a; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2 { font-family: "Bricolage Grotesque",system-ui,sans-serif; }
h1 { max-width: 900px; margin: 0; font-size: clamp(40px,6vw,88px); font-weight: 800; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.period { color: var(--gold); }
.intro-copy { display: flex; flex-direction: column; gap: 16px; max-width: 56ch; margin-top: 32px; }
.intro-copy p { margin: 0; color: var(--muted); font-size: 22px; line-height: 1.6; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 24px; margin-top: 48px; }
.work-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--border); border-radius: 18px; background: var(--navy-card); color: var(--paper); transition: transform .2s ease, background .2s ease; }
.work-card:hover { background: var(--navy-card-hover); color: var(--paper); transform: translateY(-2px); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-top img { display: block; width: 88px; height: 88px; border-radius: 20px; object-fit: cover; }
.external-arrow { align-self: flex-start; color: var(--gold); font-size: 26px; line-height: 1; }
.work-card h2 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.work-card p { flex: 1; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.card-domain { color: var(--gold-hover); font-size: 14px; font-weight: 600; }
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); background: var(--navy-deep); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: 48px; }
.footer-inner span { color: var(--muted); font-size: 12px; }
.footer-inner a { font-size: 14px; }
@media (max-width: 640px) {
  .container { padding-inline: 24px; }
  .site-header { padding-top: 24px; align-items: flex-start; }
  .brand { gap: 8px; font-size: 21px; }
  .brand img { width: 36px; height: 36px; }
  .button { max-width: 144px; padding: 8px 12px; font-size: 12px; }
  .home-main, .portfolio-main { padding-block: 80px 64px; }
  .intro-copy p { font-size: 18px; }
  .work-grid { margin-top: 40px; }
  .work-card { padding: 24px; }
  .footer-inner { padding-block: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .work-card { transition: none; }
}