@charset "UTF-8";
:root {
  color-scheme: dark;
  --bg: #080d0a;
  --ink: #bfd1b2;
  --muted: #829880;
  --accent: #bddfa5;
  --line: #293b2c;
  --mono: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 79% 26%, #182a193d, transparent 52%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
::selection { background: #afcb98; color: var(--bg); }
.skip-link { position: fixed; left: 16px; top: 12px; transform: translateY(-180%); z-index: 10; background: var(--ink); color: var(--bg); padding: 10px 14px; font-size: 12px; }
.skip-link:focus { transform: none; }
.site-shell { width: min(960px, calc(100% - 112px)); margin: 0 auto; padding-top: clamp(72px, 17vh, 174px); padding-bottom: 80px; }
.identity { position: relative; min-height: 228px; display: flex; align-items: center; }
h1 { position: relative; z-index: 1; margin: 0 0 28px -5px; font: 400 clamp(76px, 8.4vw, 112px)/1 Georgia, 'Times New Roman', serif; text-transform: lowercase; letter-spacing: -7px; }
.collection { position: relative; z-index: 1; }
.filters { display: flex; flex-wrap: wrap; align-items: center; column-gap: 30px; border-bottom: 1px solid var(--line); }
.filter { position: relative; border: 0; background: transparent; color: #91a38a; min-height: 44px; padding: 10px 0 17px; font-size: 12px; letter-spacing: -.2px; cursor: pointer; transition: color .15s; }
.filter.active { color: #d4e9c4; }
.filter.active::after { position: absolute; content: ''; height: 2px; background: #97be7e; bottom: -1px; left: 0; right: 0; }
.filter:hover { color: #e0f1d2; }
.empty-state { min-height: 178px; display: flex; align-items: center; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.work-list { padding: 0; margin: 0; list-style: none; }
.work-item { border-bottom: 1px solid var(--line); }
.work-link { display: grid; grid-template-columns: 88px 1fr 18px; align-items: start; gap: 20px; padding: 26px 0; }
.work-link:hover h2 { color: #e0f1d2; }
.work-kind { font-size: 10px; color: var(--muted); padding-top: 4px; }
.work-link h2 { font: 400 21px/1.25 Georgia, 'Times New Roman', serif; letter-spacing: -.4px; margin: 0 0 9px; }
.work-link p { margin: 0; font: 12px/1.8 var(--mono); color: var(--muted); }
.work-link time { display: block; font-size: 10px; color: var(--muted); margin-top: 12px; }
.work-arrow { color: var(--accent); }
@media (max-width: 800px) {
  .site-shell { width: calc(100% - 72px); padding-top: 95px; }
  .identity { min-height: 204px; }
  h1 { font-size: clamp(68px, 10.5vw, 90px); letter-spacing: -5px; }
}
@media (max-width: 560px) {
  .site-shell { width: calc(100% - 48px); padding-top: 83px; padding-bottom: 48px; }
  .identity { min-height: 180px; align-items: flex-end; padding-bottom: 23px; }
  h1 { font-size: clamp(55px, 13.3vw, 75px); letter-spacing: -4px; margin: 0 0 19px -2px; }
  .filters { column-gap: 24px; row-gap: 2px; }
  .filter { font-size: 11px; min-height: 44px; padding-bottom: 15px; }
  .empty-state { min-height: 145px; }
  .work-link { grid-template-columns: 1fr 18px; gap: 8px; }
  .work-kind { grid-column: 1 / -1; }
  .work-arrow { grid-row: 2; grid-column: 2; }
}
@media (max-width: 360px) {
  .filters { column-gap: 19px; }
  .filter { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .filter { transition: none; }
}