:root {
  --ink: #111827;
  --ink-soft: #4a4640;
  --ink-faint: #8c8c8c;
  --line: #e5e7eb;
  --bg: #fbfaf7;
  --surface: #efece6;
  --pill-border: #c2c2c2;
  --pill-bg: transparent;
  --pill-active-bg: transparent;
  --radius: 4px;
  --wrap: 1280px;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Minor-third scale: compact enough for UI, with clear editorial hierarchy. */
  --fs-2xs: 0.694rem; /* 11px */
  --fs-xs:  0.833rem; /* 13px */
  --fs-sm:  1rem;     /* 16px */
  --fs-base: 1rem;    /* 16px */
  --fs-md:  1.2rem;   /* 19px */
  --fs-lg:  1.44rem;  /* 23px */
  --fs-xl:  1.728rem; /* 28px */
  --fs-2xl: 2.074rem; /* 33px */
  --fs-3xl: 2.488rem; /* 40px */
  --fs-4xl: 2.986rem; /* 48px */
}

* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6, .logo {
  font-family: var(--font-sans);
  font-weight: 500;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #f7f7f5;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fcfdff;
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 40px;
  padding-bottom: 20px;
}

.logo {
  font-size: 2.25rem;
  letter-spacing: -0.05rem;
  line-height: 2.5rem;
  color: #3c465e;
  text-decoration: none;
  font-weight: 500;
}

.about-link {
  font-size: 0.6875rem;
  line-height: 1rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.about-link:hover { color: var(--ink); }

/* Intro */
.intro {
  padding-top: 80px;
  padding-bottom: 64px;
}

.intro p {
  max-width: 640px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.625rem;
  letter-spacing: 0.003125rem;
  color: var(--ink-soft);
}

/* Filters */
.filters {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 24px;
  row-gap: 0;
  padding-bottom: 48px;
  flex-wrap: wrap;
}

.filter-groups {
  flex: 1 1 0;
  min-width: 0;
  order: 1;
}

.category-row,
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-nav {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  order: 3;
  margin-top: 10px;
  padding-top: 0;
}

.tag-nav[hidden] { display: none; }

.tag-nav .pill { text-transform: capitalize; }

.tag-nav.revealing {
  animation: tag-nav-in 0.28s ease-out both;
}

.tag-nav.revealing .pill:not([hidden]) {
  animation: tag-pill-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--tag-index, 0) * 24ms);
}

@keyframes tag-nav-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tag-pill-in {
  from { opacity: 0; transform: translateY(-7px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pill {
  appearance: none;
  border: 1px solid var(--pill-border);
  background: var(--pill-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.6875rem;
  line-height: normal;
  font-weight: 400;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

.pill:hover {
  border-color: #3c465e;
}

.pill.active {
  background: transparent;
  border-color: #3c465e;
  color: var(--ink);
}

.pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.show-all {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.94);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(43, 42, 40, 0.08);
  cursor: pointer;
  white-space: nowrap;
  padding: 10px 15px;
  margin-top: 14px;
  transition: color 0.2s ease, transform 0.2s ease;
  order: 4;
}

.show-all:hover { color: var(--ink); transform: translateY(-1px); }
.show-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.show-all.active { color: var(--ink-faint); pointer-events: none; }
.show-all[hidden] { display: none; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 72px;
  opacity: 1;
  transition: opacity 0.48s ease;
}

/* Keep the content below the gallery out of view while the image manifest
   is being parsed and the initial tiles have not been created yet. */
.grid:empty {
  min-height: 100vh;
}

body.modal-open .grid {
  opacity: 0;
  pointer-events: none;
}

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 2 / 3;
  cursor: pointer;
  background: var(--surface);
  border: none;
  padding: 0;
  display: block;
  width: 100%;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.tile:hover img { transform: scale(1.045); }

.tile.pre-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  pointer-events: none;
}

.tile.dimmed {
  opacity: 0.16;
  pointer-events: none;
}

/* About */
.about-section {
  scroll-margin-top: -26px;
  border-top: 1px solid var(--line);
  background: #fcfdff;
  padding: 88px 0 96px;
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: start;
}

.about-heading {
  position: sticky;
  top: 40px;
}

.about-kicker {
  display: block;
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0.1125rem;
  text-transform: uppercase;
}

.about-copy {
  max-width: 700px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
}

.about-copy p {
  margin: 0 0 1.35em;
  font-size: 0.9375rem;
  line-height: 1.625rem;
  letter-spacing: 0.003125rem;
  text-wrap: pretty;
}

.about-copy .about-lede {
  margin-bottom: 1.35em;
  font-size: 1.375rem;
  line-height: 2rem;
  letter-spacing: -0.01875rem;
}

.about-copy h3 {
  margin: 2.75em 0 0.75em;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.375rem;
  line-height: 2rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.about-copy em { font-family: var(--font-sans); }

.about-copy sup {
  margin-left: 0.12em;
  font-size: 0.65em;
}

.about-copy sup a {
  color: inherit;
  text-decoration-color: var(--pill-border);
  text-underline-offset: 2px;
}

.about-signoff {
  padding-top: 0.5em;
  font-style: italic;
}

.about-notes {
  margin: 48px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--fs-2xs);
  line-height: 1.65;
  list-style: none;
}

.about-notes li { display: flex; gap: 10px; }
.about-notes span { min-width: 1em; color: var(--ink-soft); }

/* Back to top */
.back-to-top {
  position: fixed;
  right: max(50px, calc((100vw - var(--wrap)) / 2 + 50px));
  bottom: 14px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(251, 250, 247, 0.94);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(43, 42, 40, 0.08);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .tile.pre-reveal {
    transform: none;
  }
  .back-to-top { transition: none; }
  .tag-nav.revealing,
  .tag-nav.revealing .pill:not([hidden]) { animation: none; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}

.site-footer p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #f7f7f5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(20px, 3vh, 32px) 32px 32px;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 100;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  --modal-content-inset: 40px;
  position: relative;
  background: #f7f7f5;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: none;
}

.modal-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.24s ease;
}

.modal-scroll.content-fading {
  opacity: 0;
}

/* Landscape images share one 3:2 frame. The script sizes that frame from the
   viewport only, so different source resolutions cannot change the modal size. */
.modal-image-wrap {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface);
}

.modal-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.modal-image-wrap.portrait { background: transparent; }

.modal-image-wrap.loading img {
  filter: blur(3px);
  opacity: 0.88;
}

/* Swipe drag: the outgoing image and the incoming neighbor ("ghost")
   are translated together in real time, then eased to their resting
   spots on release. touch-action lets vertical scrolling pass through
   until JS detects a horizontal drag and takes over. */
.modal-image-wrap {
  touch-action: pan-y;
}

.modal-image-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.modal-controls {
  opacity: 1;
  transition: opacity 0.45s ease;
}

.modal-overlay.controls-hidden .modal-controls {
  opacity: 0;
  pointer-events: none;
}

.modal-close,
.modal-nav {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(251, 250, 247, 0.94);
  color: var(--ink-soft);
  box-shadow: 0 6px 24px rgba(43, 42, 40, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  z-index: 2;
}

.modal-close:hover,
.modal-nav:hover {
  background: rgba(251, 250, 247, 0.94);
}

.modal-close:focus-visible,
.modal-nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.modal-close {
  position: fixed;
  top: 24px;
  right: 24px;
}

.modal-close:hover { transform: scale(1.05); }

.modal-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.modal-nav:hover { transform: translateY(-50%) scale(1.05); }

.modal-nav-prev { left: 24px; }
.modal-nav-next { right: 24px; }

.modal-body {
  padding: 36px 40px 40px;
}

.modal-body h2 {
  margin: 0 0 24px;
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01875rem;
  color: #2b2a28;
}

.modal-body > p {
  margin: 0 0 54px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.625rem;
  letter-spacing: 0.003125rem;
  color: var(--ink-soft);
  max-width: 620px;
}

.modal-tags {
  margin: 0 0 38px;
  color: #8f8a80;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 1rem;
  text-transform: uppercase;
}

.modal-tags[hidden] {
  display: none;
}

.modal-meta {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.meta-label {
  display: block;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.1125rem;
  text-transform: uppercase;
  color: #8f8a80;
  margin-bottom: 14px;
}

.modal-meta p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.125rem;
  letter-spacing: 0.00625rem;
  color: var(--ink-soft);
  max-width: 620px;
}

/* Figma 73:9 — desktop vertical-image composition. Portrait images use a
   dedicated side-by-side card rather than the horizontal modal's image box. */
@media (min-width: 721px) {
  .modal-overlay {
    padding-top: 34px;
  }

  .modal:not(.portrait-modal) .modal-image-wrap {
    aspect-ratio: 3 / 2;
  }

  .modal:not(.portrait-modal) .modal-body > p,
  .modal:not(.portrait-modal) .modal-tags {
    margin-bottom: 17px;
  }

  .modal:not(.portrait-modal) .modal-meta {
    padding-top: 24px;
  }

  .modal.portrait-modal {
    --portrait-image-width: 490px;
    --portrait-image-height: 735px;
    width: calc(var(--portrait-image-width) + 470px);
    max-width: none;
    height: calc(var(--portrait-image-height) + 41px);
    flex: 0 0 auto;
    overflow: hidden;
  }

  .portrait-modal .modal-scroll {
    position: relative;
    display: block;
    width: 100%;
    height: var(--portrait-image-height);
  }

  .portrait-modal .modal-image-wrap.portrait {
    width: var(--portrait-image-width);
    height: var(--portrait-image-height);
    max-height: none;
    aspect-ratio: 2 / 3;
  }

  .portrait-modal .modal-image-wrap.portrait img {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }

  .portrait-modal .modal-body {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 413px;
    padding: 40px 40px 0 0;
  }

  .portrait-modal .modal-body > p {
    margin-bottom: 17px;
    max-width: 373px;
  }

  .portrait-modal .modal-tags {
    margin-bottom: 17px;
    max-width: 373px;
    font-weight: 500;
  }

  .portrait-modal .modal-meta {
    width: 373px;
    padding-top: 24px;
  }

  .portrait-modal .meta-label { margin-bottom: 12px; }
  .portrait-modal .modal-meta p { max-width: 373px; }
}

/* Responsive */
@media (min-width: 1440px) {
  .back-to-top { right: 24px; }
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .wrap { padding-left: 28px; padding-right: 28px; }
  .back-to-top { right: 38px; }
}

@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .header-inner { padding-top: 28px; padding-bottom: 18px; gap: 10px; }
  .logo { font-size: 1.75rem; }
  .intro { padding-top: 36px; padding-bottom: 28px; }
  .filters { padding-bottom: 28px; flex-wrap: wrap; }
  .filter-groups { flex: 0 0 100%; }
  .tag-nav { order: 2; }
  .category-row,
  .pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    /* overflow-x: auto forces overflow-y to compute as auto too, which
       clips the focus outline against the row's own edge since the row's
       height otherwise matches the pills exactly. Pad the box for the
       outline to render into, then cancel the padding with a matching
       negative margin so surrounding spacing is unaffected. */
    padding-block: 4px;
    margin-block: -4px;
  }
  .category-row.can-scroll-right:not(.can-scroll-left),
  .pill-row.can-scroll-right:not(.can-scroll-left) {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .category-row.can-scroll-left.can-scroll-right,
  .pill-row.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  }
  .category-row.can-scroll-left:not(.can-scroll-right),
  .pill-row.can-scroll-left:not(.can-scroll-right) {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 100%);
  }
  .category-row::-webkit-scrollbar,
  .pill-row::-webkit-scrollbar { display: none; }
  .pill { flex: 0 0 auto; }
  .show-all {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 14px;
    order: 3;
  }
  .about-section { padding: 64px 0 68px; }
  .about-inner { display: block; }
  .about-heading { position: static; margin-bottom: 44px; }
  .back-to-top { bottom: 6px; }
  .modal-body { padding: 24px 22px 28px; }
  .modal-body > p { margin-bottom: 17px; }
  .modal-overlay { padding: 0; }
  .modal {
    --modal-content-inset: 22px;
    max-height: 100vh;
    border-radius: 0;
    max-width: 100%;
    height: 100%;
    padding: 0;
  }
  .modal-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .modal-image-wrap {
    border-radius: 0;
    flex: 0 0 auto;
  }
  .modal-image-wrap:not(.portrait) {
    aspect-ratio: 3 / 2;
    overflow: hidden;
  }
  .modal-image-wrap:not(.portrait) img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .modal-image-wrap.portrait {
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }
  .modal-image-wrap.portrait img {
    width: 100%;
    max-width: none;
    height: 100%;
    margin-left: 0;
    object-fit: cover;
    object-position: center;
  }
  .modal-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--line);
  }
  .modal-overlay.controls-hidden .modal-controls {
    opacity: 1;
    pointer-events: auto;
  }
  .modal-close,
  .modal-nav {
    position: static;
    transform: none;
  }
  .modal-close:hover,
  .modal-nav:hover { transform: none; }
}

/* Keep the desktop modal composition through tablet widths. The overlay
   scrolls when height is constrained, so its top breathing room and image
   are never clipped. The full-screen treatment starts at 720px below. */
@media (min-width: 721px) and (max-width: 920px) {
  .modal:not(.portrait-modal) {
    width: min(calc(100vw - 64px), max(420px, calc((100vh - 300px) * 1.5)));
    max-width: 680px;
  }

}

@media (max-width: 480px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .back-to-top { right: 30px; }
}