:root {
  --paper: #f2f1ed;
  --ink: #111210;
  --muted: #73746e;
  --line: rgba(17, 18, 16, 0.22);
  --signal: #1737d1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-ui); }
body[data-kind="commercial"] { --paper: #0d0e0d; --ink: #f1f0eb; --muted: #9a9a93; --line: rgba(241, 240, 235, 0.26); --signal: #6e8fff; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.archive-hero {
  display: grid;
  min-height: var(--l1-hero-height);
  grid-template-columns: 1fr 3fr 1fr;
  align-content: start;
  padding: var(--l1-hero-padding);
}

.archive-eyebrow,
.archive-note,
.archive-meta {
  margin: 0;
  font-size: var(--ui-label-size);
  font-weight: 700;
  letter-spacing: var(--ui-label-spacing);
  text-transform: uppercase;
}

.archive-card p {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.archive-hero h1 {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--l1-title-size);
  font-weight: 400;
  letter-spacing: var(--l1-title-spacing);
  line-height: var(--l1-title-line);
}

.archive-note { color: var(--muted); text-align: right; line-height: var(--ui-label-line); }
.archive-meta { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }

.archive-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 4vh 2.2vw 18vh;
  gap: 10vh 2vw;
}

.archive-card img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: filter 240ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-card:hover img { filter: brightness(0.88); transform: scale(0.988); }
.archive-card-copy { display: grid; grid-template-columns: 42px 1fr auto; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); }
.archive-card h2 { margin: 0; font-size: 13px; font-weight: 400; }
.archive-card p { color: var(--muted); }

body[data-kind="place"] .archive-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-kind="place"] .archive-card img { aspect-ratio: 2 / 3; object-fit: cover; }

@media (max-width: 900px) {
  .archive-hero { display: block; min-height: var(--l1-hero-height); padding: var(--l1-hero-padding); }
  .archive-hero h1 { margin: 8vh 0 10vh; font-size: var(--l1-title-size); }
  .archive-note { text-align: left; }
  .archive-meta { margin-top: 8vh; }
  .archive-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3vh 16px 12vh; gap: 8vh 12px; }
  .archive-card-copy { display: block; }
  .archive-card h2 { margin: 4px 0; }
}

@media (max-width: 760px) {
  .archive-list { grid-template-columns: 1fr; }
  .archive-card img { aspect-ratio: 2 / 3; }
  body[data-kind="place"] .archive-list { grid-template-columns: 1fr; }
  body[data-kind="place"] .archive-card img { aspect-ratio: 2 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}