/* Hallmark · genre: modern-minimal (dark) · macrostructure: Feature Stack · theme: custom · nav: N10 · footer: Ft1
 * pre-emit critique: P4 H5 E4 S5 R4 V5
 * Shared shell: base, nav, buttons, footer, sub-pages. Tokens live in tokens.css.
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-muted);
  font: 400 var(--text-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* fine grain over everything — static, pointer-transparent */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.accent { color: var(--color-accent); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-neutral); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: fixed; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.grid-bg {
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 6rem 6rem;
  background-position: center top;
}

/* ---------- buttons ---------- */
.btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 3rem;
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font: 600 var(--text-sm)/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--sm { min-height: 2.5rem; padding: 0 var(--space-md); }
.btn:active { transform: translate(var(--mx), calc(var(--my) + 1px)); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[data-state="loading"] { cursor: progress; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--color-ink); }
  .btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
}
.btn .arrow { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.link {
  color: var(--color-ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-short) var(--ease-out);
  white-space: nowrap;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* ---------- nav (N10 scroll morph — floating-nav.md laws) ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky);
  padding-block: 0;
  background-color: var(--color-nav-clear);
  border-block-end: var(--rule-hair) solid transparent;
  backdrop-filter: blur(0);
  transition: padding var(--dur-nav) var(--ease-out), background-color var(--dur-nav) var(--ease-out), border-color var(--dur-nav) var(--ease-out), backdrop-filter var(--dur-nav) var(--ease-out);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--space-lg);
  max-width: var(--page-max); min-height: 4.5rem;
  margin-inline: auto;
  padding: var(--space-sm) var(--page-gutter);
  border-radius: 0;
  background-color: var(--color-pill-clear);
  backdrop-filter: blur(0);
  box-shadow: none;
  transform: translateY(0);
  transition: max-width var(--dur-nav) var(--ease-out), min-height var(--dur-nav) var(--ease-out), padding var(--dur-nav) var(--ease-out), border-radius var(--dur-nav) var(--ease-out), background-color var(--dur-nav) var(--ease-out), backdrop-filter var(--dur-nav) var(--ease-out), box-shadow var(--dur-nav) var(--ease-out), transform var(--dur-nav) var(--ease-out);
}
.nav.is-floating { padding-block: var(--space-2xs); }
.nav.is-floating .nav__inner {
  max-width: 62rem;
  min-height: 3.5rem; /* .nav is position:fixed, so the height change never shifts content */
  padding-block: var(--space-2xs);
  padding-inline: var(--space-md) var(--space-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-pill);
  backdrop-filter: saturate(1.3) blur(18px);
  box-shadow: var(--shadow-pill);
  transform: translateY(12px);
}
.nav__brand img { width: auto; height: 1.6rem; }
.nav__links { display: none; margin-inline-start: auto; gap: var(--space-lg); }
.nav__link {
  position: relative;
  color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: none; }
.nav__toggle {
  margin-inline-start: auto;
  min-height: 2.75rem; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink);
  font: 600 var(--text-sm)/1 var(--font-body);
  cursor: pointer;
}
.nav__toggle[aria-expanded="true"] { background: var(--color-ink); color: var(--color-paper); }
.nav-sheet {
  position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1);
  display: grid; align-content: center; gap: var(--space-xl);
  padding: 6rem var(--page-gutter) var(--space-2xl);
  background: var(--color-paper);
}
.nav-sheet[hidden] { display: none; }
.nav-sheet nav { display: grid; }
.nav-sheet__link {
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink); font: 300 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.03em; text-decoration: none;
}
body.sheet-open { overflow: hidden; }
@media (min-width: 64rem) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* ---------- footer (Ft1 mast-headed) ---------- */
.foot {
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
  display: grid; gap: var(--space-2xl);
  max-width: var(--page-max); margin-inline: auto;
}
.foot__mast { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.foot__line { color: var(--color-ink); font: 300 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.04em; max-width: 16ch; }
.foot__grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }
.foot__group { display: grid; align-content: start; gap: var(--space-xs); font-style: normal; font-size: var(--text-sm); }
.foot__h { font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral); margin-bottom: var(--space-xs); }
.foot__link { color: var(--color-muted); text-decoration: none; white-space: nowrap; justify-self: start; }
.foot__link:hover { color: var(--color-ink); }
.foot__contact span { max-width: 32ch; color: var(--color-neutral); }
.foot__base {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); color: var(--color-neutral);
}
.foot__mark { height: 1.1rem; width: auto; opacity: 0.8; }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-inline-start: auto; }

/* ---------- shared sub-page parts ---------- */
.page-hero { padding: calc(var(--space-4xl) + 2rem) 0 var(--space-3xl); }
.page-hero h1 { font-size: var(--text-display-s); max-width: 16ch; }
.page-hero h1 { margin-top: var(--space-lg); }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.section__note { margin-top: var(--space-xl); }
.row--link { text-decoration: none; color: inherit; }
.row--link:hover h3 { color: var(--color-accent); }
.page-hero p { margin-top: var(--space-lg); font-size: var(--text-md); color: var(--color-muted); max-width: 52ch; }
.section { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.section__h { font-size: var(--text-2xl); max-width: 18ch; margin-bottom: var(--space-2xl); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag {
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill);
  font: 400 var(--text-xs)/1.4 var(--font-mono); color: var(--color-muted); white-space: nowrap;
}

/* definition rows — service "what we build" */
.rows { display: grid; }
.row {
  display: grid; gap: var(--space-xs) var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.row:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.row h3 { font-size: var(--text-md); }
@media (min-width: 48rem) { .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* project cards — portfolio + service related work */
.work-list { display: grid; gap: var(--space-2xl) var(--space-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-card { display: grid; gap: var(--space-sm); color: inherit; text-decoration: none; }
.work-card__media {
  aspect-ratio: 1440 / 860; overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.work-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--dur-long) var(--ease-out); }
.work-card:hover .work-card__media img { transform: scale(1.025); }
.work-card__meta { display: flex; justify-content: space-between; gap: var(--space-md); }
.work-card h3 { font-size: var(--text-lg); font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; }
.work-card p { color: var(--color-neutral); font-size: var(--text-sm); }
.placeholder-shot {
  display: grid; place-items: center; height: 100%;
  color: var(--color-neutral); font: 400 var(--text-xs)/1.4 var(--font-mono); text-transform: uppercase;
}

/* ---------- forms (contact) ---------- */
.form { display: grid; gap: var(--space-lg); }
.form__row { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--space-xs); }
.field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.field .hint { color: var(--color-neutral); font-size: var(--text-xs); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm);
  background: var(--color-paper-2); color: var(--color-ink);
  font: 400 var(--text-base)/1.4 var(--font-body);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-neutral); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: transparent; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-error); }
.field input:disabled { opacity: 0.5; }
.notice { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); border: var(--rule-hair) solid; }
.notice--ok { border-color: var(--color-success); color: var(--color-ink); }
.notice--err { border-color: var(--color-error); color: var(--color-ink); }

/* contact */
.contact__grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.contact__side { display: grid; gap: var(--space-xl); align-content: start; }
.contact__block { display: grid; gap: var(--space-2xs); justify-items: start; font-size: var(--text-sm); }
.contact__block address { font-style: normal; color: var(--color-neutral); max-width: 32ch; }
.contact .notice { margin-bottom: var(--space-xl); }

/* ---------- reveal (site-wide, IO-driven, reveal-once) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { transform: none; }
  .btn { transform: none; }
}

/* services overview */
.services__name { font: 300 var(--text-xl)/1.05 var(--font-display); letter-spacing: -0.03em; }
.services__tags { margin-top: var(--space-md); }