/* ==========================================================================
   Tokens
   Greyscale: grey-1 (lightest) → grey-12 (darkest)
     1–2  page / surface backgrounds
     3–5  subtle fills, hover fills, borders
     6–8  strong borders, disabled text, placeholder art
     9–10 secondary text (AA on grey-1/2)
     11–12 primary text
   Brand: brand-1 (lightest) → brand-10 (darkest)
     1–2  tinted backgrounds
     3–5  borders, decorative
     6    accent (large text / non-text, 3:1)
     7–8  accent text, links (AA 4.5:1 on grey-1)
     9–10 pressed states, text on brand-1
   ========================================================================== */
:root {
  --grey-1: #fbfaf8;
  --grey-2: #f4f2ee;
  --grey-3: #ebe8e2;
  --grey-4: #e0dcd4;
  --grey-5: #d2cdc3;
  --grey-6: #bdb7ab;
  --grey-7: #a19a8d;
  --grey-8: #827b6f;
  --grey-9: #6b655a;
  --grey-10: #514c44;
  --grey-11: #2e2b27;
  --grey-12: #161513;

  --brand-1: #fdf1ed;
  --brand-2: #fbe0d6;
  --brand-3: #f6c3b1;
  --brand-4: #efa186;
  --brand-5: #e67d5a;
  --brand-6: #d85f38;
  --brand-7: #b8481f;
  --brand-8: #933817;
  --brand-9: #6e2a12;
  --brand-10: #4a1c0c;

  /* Semantic aliases */
  --bg: var(--grey-1);
  --surface: var(--grey-2);
  --fill-hover: var(--grey-3);
  --border: var(--grey-4);
  --border-strong: var(--grey-6);
  --text: var(--grey-12);
  --text-secondary: var(--grey-9);
  --text-disabled: var(--grey-7);
  --accent: var(--brand-7);
  --accent-pressed: var(--brand-9);
  --focus: var(--brand-6);

  /* Type */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter Tight", system-ui, -apple-system, sans-serif;

  /* Layout */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--grey-12);
    --surface: #1e1c1a;
    --fill-hover: #2a2825;
    --border: #34312d;
    --border-strong: var(--grey-9);
    --text: var(--grey-2);
    --text-secondary: var(--grey-6);
    --text-disabled: var(--grey-8);
    --accent: var(--brand-4);
    --accent-pressed: var(--brand-3);
  }
}
:root[data-theme="dark"] {
  --bg: var(--grey-12);
  --surface: #1e1c1a;
  --fill-hover: #2a2825;
  --border: #34312d;
  --border-strong: var(--grey-9);
  --text: var(--grey-2);
  --text-secondary: var(--grey-6);
  --text-disabled: var(--grey-8);
  --accent: var(--brand-4);
  --accent-pressed: var(--brand-3);
}

/* ==========================================================================
   Text styles (named by role)
   ========================================================================== */
.display-1   { font: 400 clamp(56px, 11vw, 168px)/0.92 var(--font-display); letter-spacing: -0.03em; }
.display-2   { font: 400 clamp(44px, 7vw, 96px)/1 var(--font-display); letter-spacing: -0.02em; }
.heading-1   { font: 400 clamp(32px, 4vw, 48px)/1.1 var(--font-display); letter-spacing: -0.01em; }
.heading-2   { font: 500 24px/1.25 var(--font-body); letter-spacing: -0.01em; }
.heading-3   { font: 500 18px/1.35 var(--font-body); letter-spacing: -0.005em; }
.subheading  { font: 400 clamp(20px, 2.2vw, 26px)/1.4 var(--font-body); letter-spacing: -0.01em; }
.body-large  { font: 400 18px/1.6 var(--font-body); letter-spacing: 0; }
.body-medium { font: 400 16px/1.6 var(--font-body); letter-spacing: 0; }
.body-small  { font: 400 14px/1.5 var(--font-body); letter-spacing: 0.005em; }
.callout     { font: italic 400 clamp(24px, 3vw, 36px)/1.3 var(--font-display); letter-spacing: -0.005em; }
.caption-large  { font: 500 14px/1.4 var(--font-body); letter-spacing: 0.02em; }
.caption-medium { font: 500 12px/1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.caption-small  { font: 500 11px/1.4 var(--font-body); letter-spacing: 0.06em; }

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--text-secondary); }

.skip-link {
  position: absolute; left: 16px; top: -100px;
  padding: 12px 16px; background: var(--text); color: var(--bg);
  border-radius: 4px; z-index: 100; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Shared focus ring — distinct from hover */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Interactive: text links (rest / hover / pressed / focused / disabled)
   48px hit area via padding
   ========================================================================== */
.link {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 4px;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 calc(50% + 0.75em);
  transition: background-size .25s ease, color .15s ease;
}
.link:hover { background-size: 100% 1px; }
.link:active { color: var(--accent-pressed); }
.link[aria-current="true"] { color: var(--accent); background-size: 100% 1px; }
.link[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }

/* Button (rest / hover / pressed / focused / disabled) */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px;
  border: 1px solid var(--text); border-radius: 999px;
  background: var(--text); color: var(--bg);
  font: 500 16px/1 var(--font-body); text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.button:hover { background: transparent; color: var(--text); }
.button:active { transform: scale(0.98); background: var(--fill-hover); color: var(--text); }
.button:focus-visible { outline-offset: 4px; border-radius: 999px; }
.button:disabled, .button[aria-disabled="true"] {
  background: var(--surface); border-color: var(--border); color: var(--text-disabled);
  cursor: not-allowed; transform: none;
}
.button .arrow { transition: transform .2s ease; }
.button:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.wordmark { font: 400 24px/1 var(--font-display); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.nav { display: flex; gap: 8px; }
.nav .link { padding: 0 8px; }
@media (max-width: 560px) {
  .nav .link.hide-sm { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: clamp(64px, 12vw, 160px) 0 clamp(56px, 8vw, 112px); }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; color: var(--text-secondary); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3f9b5c;
  box-shadow: 0 0 0 0 rgba(63,155,92,.5); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,155,92,.45); }
  70% { box-shadow: 0 0 0 8px rgba(63,155,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,155,92,0); }
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-foot {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
}
.hero-foot .subheading { max-width: 34ch; color: var(--text-secondary); }
@media (max-width: 720px) { .hero-foot { grid-template-columns: 1fr; } }

/* ==========================================================================
   Sections
   ========================================================================== */
section[id] { scroll-margin-top: 72px; }
.section { padding: clamp(64px, 10vw, 128px) 0; border-top: 1px solid var(--border); }
.section-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.section-head .caption-medium { color: var(--text-secondary); }

/* ==========================================================================
   Work grid
   ========================================================================== */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(32px, 4vw, 56px) clamp(16px, 2.5vw, 32px); }
.project { grid-column: span 6; }
.project.wide { grid-column: span 12; }
.project.wide .project-media { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .project, .project.wide { grid-column: span 12; } .project.wide .project-media { aspect-ratio: 4 / 3; } }

.project-card { display: block; text-decoration: none; border-radius: 6px; }
.project-media {
  position: relative; overflow: hidden; border-radius: 6px;
  aspect-ratio: 4 / 3; background: var(--surface);
}
.project-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, center);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

a.project-card:hover img { transform: scale(1.03); }
a.project-card:active img { transform: scale(1.01); }
a.project-card:focus-visible { outline-offset: 6px; }

.project-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.project-meta .heading-3 { transition: color .15s ease; }
.project-meta .heading-3 .arrow { font-size: .7em; color: var(--text-secondary); }
a.project-card:hover .project-meta .heading-3 { color: var(--accent); }
.project-tags { color: var(--text-secondary); margin-top: 4px; }

/* ==========================================================================
   About + services
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.portrait {
  aspect-ratio: 4 / 5; border-radius: 6px; background: linear-gradient(170deg, var(--grey-3), var(--grey-5));
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.about-copy .callout { margin-bottom: 32px; }
.about-copy .body-large + .body-large { margin-top: 20px; }
.about-copy .body-large { color: var(--text-secondary); max-width: 60ch; }

.services { margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--border); }
.service {
  display: grid; grid-template-columns: 56px 1fr 1.4fr; gap: 16px 24px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--border);
}
.service .caption-small { color: var(--text-secondary); }
.service p { color: var(--text-secondary); }
@media (max-width: 640px) { .service { grid-template-columns: 40px 1fr; } .service p { grid-column: 2; } }

.clients { margin-top: clamp(48px, 6vw, 80px); }
.clients ul { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 20px; }
.clients li { font: 400 24px/1.2 var(--font-display); color: var(--text-secondary); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { padding: clamp(80px, 14vw, 180px) 0 clamp(48px, 6vw, 80px); border-top: 1px solid var(--border); }
.contact .caption-medium { color: var(--text-secondary); margin-bottom: 24px; display: block; }
.email-link {
  display: inline-block; text-decoration: none; word-break: break-word;
  padding: 8px 0;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s ease, color .2s ease;
}
.email-link:hover { background-size: 100% 3px; }
.email-link:active { color: var(--accent-pressed); }

.copy-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.copy-btn {
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  font: 500 14px/1 var(--font-body); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.copy-btn:hover { background: var(--fill-hover); }
.copy-btn:active { background: var(--border); }
.copy-btn:focus-visible { border-radius: 999px; }
.copy-btn:disabled { color: var(--text-disabled); cursor: not-allowed; }
.copy-status { color: var(--text-secondary); min-height: 1.5em; }

.footer {
  margin-top: clamp(64px, 10vw, 128px);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.footer .body-small { color: var(--text-secondary); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }