/* Hallmark · genre: editorial · macrostructure: Portfolio Grid · tone: austere-professional · anchor hue: 258
 * theme: custom (light / grotesk-sans / cool) · nav: N9 · footer: Ft2 · F3 spec sheet knobs: columns=2, rules=every row, numbers=tabular
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
h1, h2, h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }

.skip {
  position: absolute; left: var(--space-sm); top: -4rem;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm); z-index: 10;
}
.skip:focus { top: var(--space-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- shell ---------- */
.top, main, .foot {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* N9 · edge-aligned minimal: name hard left, one link hard right */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}
.top__link {
  display: inline-flex; align-items: center; gap: 0.35em;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.top__link:hover, .top__link[aria-current] { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ---------- index: intro ---------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: var(--rule-w) solid var(--color-rule);
}
.intro__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.intro__lede { max-width: 60ch; color: var(--color-ink-2); }
.intro__lede p { margin: 0 0 var(--space-sm); }
.intro__lede p:last-child { margin-bottom: 0; }

.facts { margin: 0; align-self: start; }
.facts__row, .specs__row {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  border-top: var(--rule-w) solid var(--color-rule);
}
.facts__row:last-child, .specs__row:last-child { border-bottom: var(--rule-w) solid var(--color-rule); }
.facts dt, .specs dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.9;
  color: var(--color-muted);
}
.facts dd, .specs dd { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

@media (min-width: 60rem) {
  .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); }
  .intro__title { grid-column: 1 / 11; }
  .intro__lede { grid-column: 1 / 8; }
  .facts { grid-column: 9 / 13; }
}

/* ---------- index: filter + grid ---------- */
.work { padding-bottom: var(--space-3xl); }
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  border-bottom: var(--rule-w) solid var(--color-rule);
  margin-bottom: var(--space-xl);
}
.filter__btn {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-xs) 0;
  min-height: 44px;
  font: 500 var(--text-sm)/1.2 var(--font-body);
  color: var(--color-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.filter__btn:hover { color: var(--color-ink); }
.filter__btn[aria-pressed="true"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
.filter__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); margin-left: 0.2em; }

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.grid__empty { color: var(--color-muted); }
.card[hidden] { display: none; }
.card.is-in { animation: card-in var(--dur-med) var(--ease-out); }
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }

.card__link { display: flex; flex-direction: column; gap: var(--space-3xs); text-decoration: none; }
.card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--space-xs);
  background: var(--color-paper-2);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius);
  transition: border-color var(--dur-short) var(--ease-out);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--chart { background: var(--color-paper); }
.card__media--chart img { object-fit: contain; padding: var(--space-sm); }
.card__media--none {
  display: flex; align-items: flex-end;
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.card__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.card__sum { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .card__media { border-color: var(--color-accent); }
  .card__link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--color-accent); }
}

/* ---------- case study ---------- */
.case { padding-block: var(--space-md) var(--space-3xl); border-top: var(--rule-w) solid var(--color-rule); }
.back {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 44px;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.back:hover { color: var(--color-ink); }
.case__head { padding-block: var(--space-lg) var(--space-xl); }
.case__title {
  margin: 0 0 var(--space-sm);
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.case__lede { margin: 0; max-width: 58ch; font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); }

.case__cover { margin: 0 0 var(--space-2xl); }
.case__cover img { width: 100%; }

.case__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.specs { margin: 0; align-self: start; }
.specs__links { list-style: none; margin: 0; padding: 0; }
.specs__links a { white-space: nowrap; }
@media (min-width: 60rem) {
  .case__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-lg); }
  .specs { grid-column: 1 / 5; position: sticky; top: var(--space-lg); }
  .case__body .prose { grid-column: 6 / 13; }
}

/* ---------- prose ---------- */
.prose { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.prose h3 { margin: var(--space-lg) 0 var(--space-2xs); font-size: var(--text-base); font-weight: 600; }
.prose p, .prose ul { margin: 0 0 var(--space-sm); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-3xs); }
.prose li::marker { color: var(--color-muted); }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-paper-3); padding: 0.05em 0.3em; border-radius: var(--radius); }

.fig { margin: var(--space-lg) 0; }
.fig img, .fig video { width: 100%; border: var(--rule-w) solid var(--color-rule); border-radius: var(--radius); background: var(--color-paper-2); }
.fig--svg img { background: var(--color-paper); padding: var(--space-sm); }
.fig figcaption { margin-top: var(--space-2xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: var(--space-lg) 0; }
.gallery .fig { margin: 0; }
@media (min-width: 40rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.note {
  margin: var(--space-lg) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.note p { margin: 0; }

.todo {
  display: inline;
  padding: 0.05em 0.35em;
  border: 1px dashed var(--color-todo);
  border-radius: var(--radius);
  background: var(--color-todo-bg);
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-ink);
}
.todo::before { content: "To fill: "; color: var(--color-muted); }

/* ---------- pager ---------- */
.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  border-top: var(--rule-w) solid var(--color-ink);
}
.pager__link { display: flex; flex-direction: column; gap: var(--space-3xs); padding-top: var(--space-sm); text-decoration: none; }
.pager__link--next { grid-column: 2; text-align: right; }
.pager__dir { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.pager__title { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); line-height: 1.25; }
.pager__link:hover .pager__title { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; }

/* ---------- about ---------- */
.about { padding-block: var(--space-xl) var(--space-3xl); border-top: var(--rule-w) solid var(--color-rule); }
.about__title {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
}
.prose--about h2 { margin-top: var(--space-2xl); }

/* ---------- footer (Ft2 · inline single line) ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  padding-block: var(--space-lg) var(--space-xl);
  border-top: var(--rule-w) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.foot a { white-space: nowrap; }
.foot__sep { color: var(--color-rule-2); }
@media (max-width: 39.99rem) {
  .foot { flex-direction: column; align-items: flex-start; }
  .foot__sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}
@media print {
  .top__link, .filter, .pager, .back, .skip { display: none; }
  .specs { position: static; }
}