/* Gesso Club — Swiss/iOS modular image index.
   One 12-column source of truth, 8px baseline, photos on bare ground. */

/* Switzer matches the Framer "Other" template reference. */
@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("fonts/Switzer-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer Placeholder";
  src: local("Arial");
  ascent-override: 96.67%;
  descent-override: 24.66%;
  line-gap-override: 8.88%;
  size-adjust: 101.38%;
}

:root {
  /* layout scale */
  --cols: 12;
  --bl: 8px;
  --lh: 24px;
  --gutter: 16px;
  --margin: 40px;
  --other-edge: 30px;
  --page-gutter: var(--other-edge);
  --section-gap: 38px;
  --feed-grid-gap: var(--card-gap);
  --maxw: 1680px;
  --card-gap: 16px;

  /* primitive palette: intentionally small */
  --color-paper: #ffffff;
  --color-ink: #111315;
  --color-gray-dark: #5e5e5e;
  --color-gray-mid: #74777c;
  --color-gray-light: #9e9e9e;
  --color-accent: #FF5100; /* the grade wheel at 55deg, r=1: OKLCH L 0.72, C 0.29 */
  --color-placeholder: #f4f5f5;
  --color-placeholder-deep: #eceeee;

  /* semantic color roles */
  --bg: var(--color-paper);
  --ink: var(--color-ink);
  --mut: var(--color-gray-mid);
  --accent: var(--color-accent);
  --ph: var(--color-placeholder);
  --ph-deep: var(--color-placeholder-deep);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-gray-dark);
  --text-muted: var(--color-gray-light);
  /* the voiced text ramp is exactly ink / secondary / muted (+ white on
     dark grounds). --text-meta is deprecated: metadata reads as secondary
     when you read it, muted when it is passive chrome. --text-disabled
     survives as a STATE, one step fainter than muted idle text. */
  --text-meta: var(--text-secondary);
  --text-disabled: color-mix(in srgb, var(--ink) 34%, var(--bg));
  --text-label: var(--text-muted);
  --text-inverse: var(--color-paper);
  --text-on-image: var(--color-paper);

  /* surfaces and edges */
  --radius: 0px;
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  --surface-raised: color-mix(in srgb, var(--bg) 92%, transparent);
  --surface-page: var(--bg);
  --surface-popout: var(--bg);
  --surface-hover: color-mix(in srgb, var(--ink) 5%, var(--bg));
  --surface-active: color-mix(in srgb, var(--ink) 8%, var(--bg));
  --surface-quiet: color-mix(in srgb, var(--ink) 5%, var(--bg));
  --surface-text-entry: var(--bg);
  --surface-pill: var(--surface-quiet);
  --surface-pill-active: var(--surface-active);
  --surface-caption-wash: color-mix(in srgb, var(--bg) 86%, transparent);
  --accent-selection: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --overlay-scrim: color-mix(in srgb, var(--ink) 14%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--ink) 18%, transparent);
  --scrollbar-track-thumb: color-mix(in srgb, var(--ink) 22%, transparent);
  --text-placeholder: var(--text-muted);
  --text-caption-support: var(--text-secondary);
  --text-list-idle: color-mix(in srgb, var(--ink) 20%, var(--bg));
  --text-list-hover: color-mix(in srgb, var(--ink) 44%, var(--bg));
  --border-subtle: 1px solid var(--line);
  --border-text-entry: var(--border-subtle);
  --border-text-entry-focus: var(--line);
  --shadow-text-entry-focus: none;
  --focus-ring: 1px solid var(--text-primary);
  --focus-ring-strong: 2px solid var(--text-primary);
  --focus-offset: 3px;
  --hairline-popout-width: 0.5px;
  --hairline-popout-alpha: 0.05;
  --hairline-popout-alpha-start: 0.012;
  --hairline-popout-alpha-soft: 0.02;
  --hairline-popout-alpha-mid: 0.028;
  --hairline-popout-alpha-strong: 0.035;
  --hairline-popout-alpha-near: 0.043;
  --hairline-popout-color: rgb(0 0 0 / var(--hairline-popout-alpha));
  --hairline-popout-color-start: rgb(0 0 0 / var(--hairline-popout-alpha-start));
  --hairline-popout-color-soft: rgb(0 0 0 / var(--hairline-popout-alpha-soft));
  --hairline-popout-color-mid: rgb(0 0 0 / var(--hairline-popout-alpha-mid));
  --hairline-popout-color-strong: rgb(0 0 0 / var(--hairline-popout-alpha-strong));
  --hairline-popout-color-near: rgb(0 0 0 / var(--hairline-popout-alpha-near));
  --border-popout: var(--hairline-popout-width) solid var(--hairline-popout-color);
  --popout-stroke: var(--hairline-popout-width);
  --popout-edge: var(--hairline-popout-color);
  --popout-fill: var(--surface-popout);
  --border-popout-shell: var(--popout-stroke) solid transparent;
  --background-popout-shell:
    linear-gradient(var(--popout-fill), var(--popout-fill)) padding-box,
    linear-gradient(var(--popout-edge), var(--popout-edge)) border-box;
  --shadow-popout-alpha: 0.055;
  --shadow-popout:
    0 4px 16px rgb(0 0 0 / var(--shadow-popout-alpha)),
    0 8px 32px rgb(0 0 0 / var(--shadow-popout-alpha));

  /* radii */
  --control-h: 32px;
  --control-gap: 8px;
  --pill: 999px;
  --pill-gap: var(--bl);
  --pill-compact-x: 12px;
  --pill-compact-y: 5px;
  --pill-compact-h: calc(var(--type-small-line) + (var(--pill-compact-y) * 2));
  --pill-taxonomy-x: 14px;
  --pill-taxonomy-y: 0px;
  --pill-taxonomy-h: 34px;
  --pill-compound-y: 3px;
  --pill-nested-x: var(--bl);
  --pill-nested-h: calc(var(--pill-compact-h) - (var(--pill-compound-y) * 2));
  --pill-feature-x: 14px;
  --pill-feature-y: var(--bl);
  --pill-feature-h: calc(var(--type-small-line) + (var(--pill-feature-y) * 2));
  --pill-line: var(--type-small-line);
  --popout-radius: 28px;
  --preview-radius: 16px;

  /* icon and type roles */
  --icon-md: 14px;
  --fs-ui: 13.6px;
  --fs-copy: 15px;
  --fs-lead: 15px;
  --fs-head: 18px;
  --type-small-size: 13.6px;
  --type-small-line: 17.952px;
  --type-control-size: var(--type-small-size);
  --type-control-line: var(--type-small-line);
  --type-body-small-size: var(--type-small-size);
  --type-body-small-line: var(--type-small-line);
  --type-display-size: 128px;
  --type-display-line: 140.8px;
  --type-display-tracking: -3.072px;
  --type-title-size: 38px;
  --type-title-line: 45.6px;
  --type-title-tracking: -0.684px;
  --type-count-size: 16px;
  --type-count-line: 19.2px;
  --type-count-tracking: -0.288px;
  --fw-regular: 400;
  --fw-medium: 500;
  --chrome-h: calc(var(--lh) * 3);

  --font: "Switzer", "Switzer Placeholder", sans-serif;

  /* motion */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 160ms;
  --duration-ui: 180ms;
  --duration-panel: 220ms;
  --duration-overlay-out: 280ms;
  --duration-search-field: 300ms;
  --duration-expand: 360ms;
  --duration-expand-slow: 380ms;
  --duration-filter-in: 520ms;
  --duration-filter-out: 420ms;

  /* layering */
  --layer-focus: 1;
  --layer-scrim: 80;
  --layer-filter-menu: 90;
  --layer-chrome: 100;
  --layer-overlay: 200;
  --layer-overlay-ui: 210;
  --z-focus: var(--layer-focus);
  --z-scrim: var(--layer-scrim);
  --z-filter-menu: var(--layer-filter-menu);
  --z-chrome: var(--layer-chrome);
  --z-overlay: var(--layer-overlay);
  --z-overlay-ui: var(--layer-overlay-ui);
}

* { box-sizing: border-box; }

/* selected text carries the accent, quietly; the provenance highlight
   in the builder wears this exact wash */
::selection {
  background: var(--accent-selection);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  line-height: var(--lh);
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Fixed escape hatch for menu-like surfaces that must not be clipped by
   scrollable bentos. Children opt into pointer events individually. */
.popout-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-filter-menu);
  pointer-events: none;
}
.popout-layer > * {
  pointer-events: auto;
}

/* ---------- app shell -------------------------------------- */

.app {
  min-height: 100vh;
}

.main {
  min-width: 0;
}

/* ---------- fixed chrome ------------------------------------ */

.site-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-chrome);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: 56px;
  padding: 0 var(--other-edge);
  background: var(--bg);
  pointer-events: auto;
  transform: none;
}
.site-chrome::before {
  display: none;
}
.site-chrome::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--hairline-popout-width) * -1);
  left: 0;
  z-index: 1;
  height: var(--hairline-popout-width);
  background: var(--hairline-popout-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-instant) ease;
}
body.is-menu-open:not(.is-menu-closing) .site-chrome::after {
  opacity: 1;
}
.site-chrome > * { min-width: 0; }

.brand {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-width: 0;
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  letter-spacing: 0;
  pointer-events: auto;
}

.brand-mark {
  display: block;
  width: 46px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.brand-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-line {
  display: block;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  line-height: var(--bl);
  letter-spacing: 0;
  white-space: nowrap;
}

.chrome-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  gap: calc(var(--bl) * 1.5);
  pointer-events: auto;
}
.chrome-link {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
  letter-spacing: 0;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-base) ease;
}
.chrome-link:hover,
.chrome-link:focus-visible,
.chrome-link.is-active {
  color: var(--text-primary);
}
.chrome-tools {
  grid-column: 4;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: var(--control-gap);
  min-width: 0;
  pointer-events: auto;
}
.chrome-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding: 0 var(--pill-taxonomy-x);
  border: 0;
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration-base) ease,
    color var(--duration-base) ease;
}
.chrome-pill:hover {
  background: var(--surface-pill-active);
}
.chrome-pill:focus-visible,
.chrome-pill.is-active,
.chrome-pill[aria-expanded="true"] {
  outline: 0;
  background: var(--surface-pill-active);
}
.chrome-pill-ink {
  background: var(--ink);
  color: var(--text-inverse);
}
.chrome-pill-ink:hover,
.chrome-pill-ink:focus-visible,
.chrome-pill-ink.is-active,
.chrome-pill-ink[aria-expanded="true"] {
  background: color-mix(in srgb, var(--ink) 86%, var(--bg));
  color: var(--text-inverse);
}

.side-cat:focus-visible,
.prompt-toggle:focus-visible,
.context-menu button:focus-visible,
.rec-item:focus-visible,
.panel-close:focus-visible,
.panel-links a:focus-visible {
  outline: 0;
  background: var(--surface-pill-active);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lucide {
  display: block;
  width: var(--icon-md);
  height: var(--icon-md);
  stroke: currentColor;
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
}

.filter-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  display: block;
  width: 100vw;
  height: 100vh;
  background: var(--overlay-scrim);
  backdrop-filter: none;
  opacity: 0;
  cursor: default;
}
.filter-scrim.is-visible {
  animation: filter-scrim-in var(--duration-filter-in) linear both;
}
.filter-scrim.is-closing {
  animation: filter-scrim-out var(--duration-overlay-out) linear both;
  pointer-events: none;
}
.filter-scrim[hidden] { display: none; }
.filter-scrim:focus { outline: 0; }
body.is-menu-open {
  overflow: hidden;
}
body.is-menu-open .site-footer {
  z-index: calc(var(--z-scrim) - 1);
  pointer-events: none;
}

@keyframes filter-bento-in {
  from {
    clip-path: inset(0 0 calc(100% - var(--filter-open-h)) calc(100% - var(--filter-open-w)) round var(--filter-radius));
    background-color: var(--hairline-popout-color-start);
    box-shadow:
      0 2px 8px rgb(0 0 0 / 0.02);
  }
  48% {
    clip-path: inset(0 0 calc(100% - var(--filter-open-h)) 0 round var(--filter-radius));
    background-color: var(--hairline-popout-color-strong);
    box-shadow:
      0 3px 12px rgb(0 0 0 / 0.042),
      0 6px 24px rgb(0 0 0 / 0.042);
  }
  to {
    clip-path: inset(0 0 0 0 round var(--filter-radius));
    background-color: var(--hairline-popout-color);
    box-shadow: var(--shadow-popout);
  }
}

@keyframes filter-bento-out {
  from {
    clip-path: inset(0 0 0 0 round var(--filter-radius));
    background-color: var(--hairline-popout-color);
    box-shadow: var(--shadow-popout);
    opacity: 1;
  }
  46% {
    clip-path: inset(0 0 calc(100% - var(--filter-open-h)) 0 round var(--filter-radius));
    background-color: var(--hairline-popout-color-strong);
    box-shadow:
      0 3px 12px rgb(0 0 0 / 0.04),
      0 6px 24px rgb(0 0 0 / 0.04);
    opacity: 0.92;
  }
  82% {
    clip-path: inset(0 0 calc(100% - var(--filter-open-h)) calc(100% - var(--filter-open-w)) round var(--filter-radius));
    background-color: var(--hairline-popout-color-soft);
    box-shadow:
      0 2px 8px rgb(0 0 0 / 0.024);
    opacity: 0.42;
  }
  to {
    clip-path: inset(0 0 calc(100% - var(--filter-open-h)) calc(100% - var(--filter-open-w)) round var(--filter-radius));
    background-color: rgb(0 0 0 / 0);
    box-shadow:
      0 0 0 0 rgb(0 0 0 / 0),
      0 0 0 rgb(0 0 0 / 0);
    opacity: 0;
  }
}

/* The fill clip mirrors the shell clip with a stroke-width inset so the
   translucent hairline stays outside the opaque white surface. */
@keyframes filter-bento-fill-in {
  from {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) calc(100% - var(--filter-open-h) + var(--filter-stroke)) calc(100% - var(--filter-open-w) + var(--filter-stroke)) round var(--filter-radius-fill));
  }
  48% {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) calc(100% - var(--filter-open-h) + var(--filter-stroke)) var(--filter-stroke) round var(--filter-radius-fill));
  }
  to {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) var(--filter-stroke) var(--filter-stroke) round var(--filter-radius-fill));
  }
}

@keyframes filter-bento-fill-out {
  from {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) var(--filter-stroke) var(--filter-stroke) round var(--filter-radius-fill));
  }
  46% {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) calc(100% - var(--filter-open-h) + var(--filter-stroke)) var(--filter-stroke) round var(--filter-radius-fill));
  }
  82% {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) calc(100% - var(--filter-open-h) + var(--filter-stroke)) calc(100% - var(--filter-open-w) + var(--filter-stroke)) round var(--filter-radius-fill));
  }
  to {
    clip-path: inset(var(--filter-stroke) var(--filter-stroke) calc(100% - var(--filter-open-h) + var(--filter-stroke)) calc(100% - var(--filter-open-w) + var(--filter-stroke)) round var(--filter-radius-fill));
  }
}

@keyframes more-label-return {
  from {
    transform: translate3d(var(--more-label-shift), var(--filter-y, 0px), 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes filter-title-slide {
  from {
    transform: translate3d(var(--more-slide-x, 0), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes filter-close-in {
  from {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes filter-close-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 5px, 0);
  }
}

@keyframes filter-content-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes filter-content-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes search-field-in {
  from {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
    clip-path: inset(0 0 0 36px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes search-close-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes search-close-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes search-field-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 0 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
    clip-path: inset(0 0 0 28px);
  }
}

@keyframes filter-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes filter-scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--bl);
}

.side-cat {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--bl) * 4) minmax(0, 1fr) auto var(--bl);
  align-items: center;
  gap: var(--bl);
  width: 100%;
  min-height: calc(var(--bl) * 6);
  text-align: left;
  padding: var(--bl);
  border-radius: var(--pill);
  color: var(--text-primary);
  font-size: var(--fs-ui);
  letter-spacing: 0;
  transition:
    background var(--duration-base) ease,
    color var(--duration-base) ease;
}
.side-cat:hover {
  background: var(--surface-pill);
}
.side-cat.is-active { background: var(--surface-pill-active); }

.filter-menu {
  position: relative;
  width: 316px;
  padding: 18px 20px;
  gap: 20px;
}
.filter-menu::before {
  content: "";
  position: absolute;
  inset: -18px -22px -28px -22px;
  z-index: -1;
  border-radius: 28px;
  background: var(--bg);
  animation: filter-bento-in var(--duration-filter-in) var(--ease-editorial) both;
}
.filter-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
}
.filter-menu-title {
  --more-slide-x: calc(50vw - var(--other-edge) - 112px);
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  animation: filter-title-slide var(--duration-filter-in) var(--ease-editorial) both;
  will-change: opacity, transform;
}
.filter-menu-close {
  min-height: 46px;
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  opacity: 0;
  filter: opacity(1);
  animation: filter-close-in 260ms ease-out 230ms both;
  transition: filter var(--duration-instant) ease-out;
  will-change: opacity, transform;
}
.filter-menu-close:active {
  filter: opacity(0.72);
}
.filter-menu-close:hover,
.filter-menu-close:focus-visible {
  outline: 0;
  color: var(--text-primary);
}
.filter-menu-section {
  display: grid;
  gap: 8px;
  opacity: 0;
  animation: filter-content-in var(--duration-panel) ease-out 290ms both;
  will-change: opacity, transform;
}
.filter-menu-label {
  margin: 0 0 2px;
  color: var(--text-label);
  font-family: var(--font);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
  letter-spacing: 0;
}
.filter-menu .side-cat {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: var(--pill-taxonomy-h);
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  overflow: hidden;
}
.filter-menu .side-cat:hover,
.filter-menu .side-cat.is-active {
  background: var(--surface-pill-active);
  color: var(--text-primary);
}
.filter-menu .side-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
}
/* ---------- Other-style editorial masthead ------------------- */

.other-hero {
  position: relative;
  isolation: isolate;
  height: 361px;
  padding: 140px var(--other-edge) 0;
  overflow: hidden;
}
.other-hero h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  width: max-content;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--type-display-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-tracking);
}
.other-hero p {
  position: absolute;
  z-index: 2;
  top: 189px;
  left: max(calc(var(--other-edge) + 650px), calc(var(--other-edge) + ((100vw - (var(--other-edge) * 2)) / 2)));
  width: 298px;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
  letter-spacing: 0;
}
.other-social {
  position: absolute;
  z-index: 2;
  top: 189px;
  right: var(--other-edge);
  display: flex;
  align-items: center;
  gap: 20px;
}
.other-social a {
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
  text-decoration: none;
}
.other-social a:hover,
.other-social a:focus-visible {
  color: var(--text-primary);
}

.category-tabs {
  position: relative;
  max-width: none;
  height: 46px;
  margin: 0 var(--page-gutter) var(--section-gap);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.category-tabs::-webkit-scrollbar { display: none; }
.gesso-filter-tabs {
  --work-nav-gap: 20px;
  --work-nav-stack-gap: 18px;
  --work-nav-mobile-gap: clamp(8px, 3vw, 16px);
  --work-nav-popover-gap: 12px;
  --work-nav-popover-offset: 4px;
  overflow: visible;
}
.gesso-filter-tabs.is-explore-open {
  height: auto;
  align-items: start;
  row-gap: 30px;
}

.works-title {
  display: flex;
  align-items: flex-start;
  grid-column: 1 / 2;
  min-width: 0;
}
.works-title h2 {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.works-title span {
  display: inline-block;
  margin: 0 0 0 0;
  color: var(--text-primary);
  font-size: var(--type-count-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-count-line);
  letter-spacing: var(--type-count-tracking);
}
.works-title span[hidden] {
  display: none;
}
.work-modes {
  grid-column: 3 / 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  opacity: 1;
  transition: opacity var(--duration-ui) ease;
}
.gesso-filter-tabs .work-modes {
  justify-content: space-between;
  gap: 0;
}

.category-tab {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  overflow: hidden;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    color var(--duration-fast) ease,
    opacity var(--duration-ui) ease;
}
.category-tab:hover {
  color: var(--text-primary);
}
.category-tab.is-active {
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}
.category-tab[aria-expanded="true"] {
  color: var(--text-primary);
}
.category-tab:focus-visible {
  outline: 0;
  color: var(--text-primary);
}
.category-tab.is-active:focus-visible {
  background: transparent;
  color: var(--text-primary);
}
.gesso-filter-tabs .category-tab:hover,
.gesso-filter-tabs .category-tab:focus-visible,
.gesso-filter-tabs .category-tab.is-active {
  color: var(--text-primary);
}
.gesso-filter-tabs.is-search-open .work-modes {
  opacity: 1;
  pointer-events: auto;
}
.gesso-filter-tabs.is-search-open .work-modes [data-row-action] {
  opacity: 0;
  pointer-events: none;
}
.gesso-filter-tabs.is-search-open.is-search-closing .work-modes [data-row-action] {
  opacity: 1;
  transition:
    color 0ms linear,
    opacity var(--duration-panel) ease 40ms;
}
.gesso-filter-tabs.is-search-hover-return .work-modes [data-row-action="search"] {
  color: var(--text-primary);
  transition:
    color 0ms linear,
    opacity var(--duration-panel) ease 40ms;
}
.gesso-filter-tabs.is-search-restoring .category-tab {
  transition:
    color 0ms linear,
    opacity 0ms linear;
}
.gesso-filter-tabs.is-search-restoring .category-tab:hover,
.gesso-filter-tabs.is-search-restoring .category-tab:focus-visible,
.gesso-filter-tabs.is-search-restoring .category-tab.is-active {
  color: var(--text-primary);
}
.gesso-filter-tabs.is-more-open .work-modes .category-tab,
.gesso-filter-tabs.is-more-open .work-modes .category-tab:hover,
.gesso-filter-tabs.is-more-open .work-modes .category-tab:focus-visible,
.gesso-filter-tabs.is-more-open .work-modes .category-tab.is-active,
.gesso-filter-tabs.is-more-open .work-modes .category-tab[aria-expanded="true"] {
  color: var(--text-inverse);
}
.gesso-filter-tabs .work-modes [data-menu-button] {
  --more-label-shift: calc(-50vw + var(--other-edge) + 112px);
  position: relative;
  z-index: calc(var(--z-filter-menu) + 1);
  filter: opacity(1);
  transform: translate3d(0, 0, 0);
  transition:
    color var(--duration-fast) ease,
    filter var(--duration-instant) ease-out,
    transform var(--duration-filter-in) var(--ease-editorial);
  will-change: filter, transform;
}
.gesso-filter-tabs .work-modes [data-menu-button]:active {
  filter: opacity(0.72);
}
.gesso-filter-tabs .work-modes [data-menu-button].is-search-stabilized {
  color: var(--text-muted) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
}
.gesso-filter-tabs.is-more-open .work-modes [data-menu-button],
.gesso-filter-tabs.is-more-open .work-modes [data-menu-button]:hover,
.gesso-filter-tabs.is-more-open .work-modes [data-menu-button]:focus-visible,
.gesso-filter-tabs.is-more-open .work-modes [data-menu-button][aria-expanded="true"] {
  color: var(--text-primary);
  transform: translate3d(var(--more-label-shift), var(--filter-y, 0px), 0);
  transition:
    color 0ms linear,
    filter var(--duration-instant) ease-out,
    transform var(--duration-filter-in) var(--ease-editorial);
}
.gesso-filter-tabs.is-more-open.is-more-closing .work-modes [data-menu-button],
.gesso-filter-tabs.is-more-open.is-more-closing .work-modes [data-menu-button]:hover,
.gesso-filter-tabs.is-more-open.is-more-closing .work-modes [data-menu-button]:focus-visible {
  color: var(--text-primary);
  transform: translate3d(0, 0, 0);
  animation: more-label-return var(--duration-filter-out) var(--ease-editorial) both;
  transition:
    color 0ms linear,
    filter var(--duration-instant) ease-out;
}
.gesso-filter-tabs.is-search-open:not(.is-more-open) .work-modes [data-menu-button] {
  color: var(--text-muted);
  transform: translate3d(0, 0, 0);
  transition:
    color 0ms linear,
    transform 0ms linear;
}
.gesso-filter-tabs.is-search-open:not(.is-more-open) .work-modes [data-menu-button]:hover,
.gesso-filter-tabs.is-search-open:not(.is-more-open) .work-modes [data-menu-button]:focus-visible {
  color: var(--text-primary);
  transform: translate3d(0, 0, 0);
  transition:
    color 0ms linear,
    transform 0ms linear;
}
.work-search {
  grid-column: 3 / 5;
  grid-row: 1;
  z-index: var(--z-filter-menu);
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  height: 46px;
  padding-right: 112px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-ui) ease;
}
.work-search[hidden] {
  display: none;
}
.gesso-filter-tabs.is-search-open .work-search {
  opacity: 1;
  pointer-events: none;
}
.gesso-filter-tabs.is-search-open.is-more-open .work-search {
  z-index: calc(var(--z-scrim) - 1);
}
.filter-scrim.is-visible ~ .main .gesso-filter-tabs.is-search-open .work-search,
.filter-scrim.is-closing ~ .main .gesso-filter-tabs.is-search-open .work-search {
  z-index: calc(var(--z-scrim) - 1);
}
.gesso-filter-tabs.is-search-open .work-search-close {
  animation: search-close-in var(--duration-ui) ease-out both;
}
.gesso-filter-tabs.is-search-open .work-search-input {
  animation: search-field-in var(--duration-search-field) var(--ease-editorial) 40ms both;
}
.gesso-filter-tabs.is-search-open.is-search-closing .work-search-input {
  animation: search-field-out var(--duration-ui) ease-in both;
}
.gesso-filter-tabs.is-search-open.is-search-closing .work-search-close {
  animation: search-close-out var(--duration-base) ease-in both;
}
.work-search-input {
  min-width: 0;
  flex: 1;
  height: 46px;
  overflow: hidden;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  text-overflow: ellipsis;
  pointer-events: auto;
  transition: color var(--duration-fast) ease;
}
.work-search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.work-search-input::-webkit-search-decoration,
.work-search-input::-webkit-search-cancel-button {
  display: none;
}
.work-search-close {
  flex: none;
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  pointer-events: auto;
  transition: color var(--duration-fast) ease;
}
.work-search-close:hover,
.work-search-close:focus-visible {
  outline: 0;
  color: var(--text-primary);
}

.explore-surface {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 30px;
  column-gap: 0;
  min-width: 0;
  padding-top: 2px;
  opacity: 1;
  transition: opacity var(--duration-base) ease;
}
.explore-surface[hidden] {
  display: none;
}
.gesso-filter-tabs.is-more-open .explore-surface {
  pointer-events: none;
}
.explore-layer {
  min-width: 0;
}
.explore-categories {
  grid-column: 1 / -1;
  padding-right: 0;
  padding-top: 3px;
}
.explore-collections {
  grid-column: 1 / -1;
  padding-bottom: calc(var(--lh) * 8);
}
.explore-label {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
  letter-spacing: 0;
}
.explore-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
  align-items: start;
}
.explore-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: var(--pill-taxonomy-h);
  overflow: hidden;
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.explore-link:hover,
.explore-link:focus-visible,
.explore-link.is-active {
  outline: 0;
  background: var(--surface-pill-active);
  color: var(--text-primary);
}
.explore-collection-list {
  position: relative;
  display: grid;
  gap: 8px;
  overflow: visible;
  overflow-anchor: none;
}
.explore-collection {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 0;
  display: grid;
  align-content: start;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-align: left;
  transition: min-height var(--duration-expand-slow) var(--ease-editorial);
  will-change: min-height;
}
.explore-collection[hidden] {
  display: none;
}
.explore-collection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  min-width: 0;
  overflow: visible;
}
.explore-collection-main {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: min(680px, 42vw);
  overflow: visible;
  vertical-align: top;
}
.explore-collection-copy {
  --meta-optical-inset: 4px;
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.explore-collection-title {
  display: -webkit-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color var(--duration-fast) ease;
}
.explore-collection-meta {
  display: block;
  max-width: 100%;
  max-height: 18px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  margin-top: 2px;
  transform: translate3d(var(--meta-optical-inset), -4px, 0);
  transition:
    opacity var(--duration-ui) ease,
    transform 260ms var(--ease-editorial),
    color var(--duration-fast) ease;
}
.explore-collection.is-preview-active,
.explore-collection:focus-visible {
  z-index: 2;
  min-height: calc(var(--preview-stack-h, 192px) + 10px);
  outline: 0;
}
.explore-collection.is-preview-active .explore-collection-title,
.explore-collection:focus-visible .explore-collection-title,
.explore-collection.is-preview-active .explore-collection-meta,
.explore-collection:focus-visible .explore-collection-meta {
  color: var(--text-primary);
}
.explore-collection.is-preview-active .explore-collection-meta,
.explore-collection:focus-visible .explore-collection-meta {
  opacity: 1;
  transform: translate3d(var(--meta-optical-inset), 0, 0);
}
.explore-preview-stack {
  flex: none;
  display: block;
  position: absolute;
  top: 2px;
  left: calc(100% + 14px);
  width: var(--preview-rest-w, 112px);
  height: var(--preview-rest-h, 42px);
  margin-top: 0;
  overflow: visible;
  transition:
    width var(--duration-expand) var(--ease-editorial),
    height var(--duration-expand) var(--ease-editorial);
  will-change: width, height;
}
.explore-preview-pill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--preview-rest-w, 112px);
  height: var(--preview-rest-h, 42px);
  border-radius: var(--pill);
  background: var(--ph);
  overflow: hidden;
  transform: translate3d(var(--rest-x, 0px), 0, 0);
  transition:
    width var(--duration-expand) var(--ease-editorial),
    height var(--duration-expand) var(--ease-editorial),
    border-radius var(--duration-expand) var(--ease-editorial),
    transform var(--duration-expand) var(--ease-editorial),
    background var(--duration-base) ease;
  will-change: width, height, border-radius, transform;
}
.explore-preview-pill[hidden] {
  display: none;
}
.explore-preview-pill img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.24);
  transform-origin: center center;
  transition: transform var(--duration-expand) var(--ease-editorial);
  will-change: transform;
}
.explore-preview-pill:nth-child(1) {
  z-index: 4;
}
.explore-preview-pill:nth-child(2) {
  --rest-x: 18px;
  z-index: 3;
}
.explore-preview-pill:nth-child(3) {
  --rest-x: 36px;
  z-index: 2;
}
.explore-preview-pill:nth-child(4) {
  --rest-x: 54px;
  z-index: 1;
}
.explore-collection.is-preview-active .explore-preview-stack,
.explore-collection:focus-visible .explore-preview-stack {
  width: min(
    calc(var(--preview-stack-w, 500px) * var(--preview-scale, 1)),
    calc(100vw - var(--other-edge) - var(--other-edge) - 100% - 14px)
  );
  height: calc(var(--preview-stack-h, 192px) * var(--preview-scale, 1));
}
.explore-collection.is-preview-active .explore-preview-pill,
.explore-collection:focus-visible .explore-preview-pill {
  width: calc(var(--preview-w, 192px) * var(--preview-scale, 1));
  height: calc(var(--preview-h, 128px) * var(--preview-scale, 1));
  border-radius: var(--radius);
  transform: translate3d(calc(var(--preview-x, 0px) * var(--preview-scale, 1)), 0, 0);
}
.explore-collection.is-preview-active .explore-preview-pill img,
.explore-collection:focus-visible .explore-preview-pill img {
  transform: scale(1);
}
.gesso-filter-tabs .feed-popover {
  --filter-stroke: var(--popout-stroke);
  --filter-radius: var(--popout-radius);
  --filter-radius-fill: calc(var(--filter-radius) - var(--filter-stroke));
  --filter-width: 50%;
  --filter-edge-overhang: var(--filter-stroke);
  --filter-pad-x: calc((var(--bl) * 3) + 1px);
  --filter-pad-top: 13px;
  --filter-pad-bottom: 17px;
  --filter-column-gap: calc(var(--bl) * 3.5);
  --filter-row-gap: calc(var(--bl) * 3);
  --filter-label-gap: calc(var(--bl) * 1.5);
  --filter-label-inset: 0px;
  --filter-list-gap: calc(var(--bl) * 1.5);
  --filter-open-h: 78px;
  --filter-open-w: 146px;
  --filter-in-duration: var(--duration-filter-in);
  --filter-out-duration: var(--duration-filter-out);
  --filter-ease: var(--ease-editorial);
  --filter-y: 0px;
  --filter-max-h: calc(100vh - 104px);
  position: absolute;
  top: calc(-12px + var(--filter-y));
  left: 50%;
  right: auto;
  z-index: var(--z-filter-menu);
  display: grid;
  grid-template-columns:
    minmax(0, 1.38fr)
    minmax(0, 1.28fr)
    minmax(0, 1fr)
    minmax(0, 1.05fr);
  width: calc(var(--filter-width) + var(--filter-edge-overhang));
  max-height: var(--filter-max-h);
  padding: var(--filter-pad-top) var(--filter-pad-x) var(--filter-pad-bottom);
  border: 0;
  outline: 0;
  border-radius: var(--filter-radius);
  background: var(--popout-edge);
  column-gap: var(--filter-column-gap);
  row-gap: var(--filter-row-gap);
  overflow: hidden;
  clip-path: inset(0 0 0 0 round var(--filter-radius));
  box-shadow: var(--shadow-popout);
  isolation: isolate;
  transform-origin: top left;
  animation: filter-bento-in var(--filter-in-duration) var(--filter-ease) both;
  will-change: clip-path, opacity, box-shadow, background-color;
}
.gesso-filter-tabs .feed-popover .filter-menu-head {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
}
.gesso-filter-tabs .feed-popover.is-closing {
  animation: filter-bento-out var(--filter-out-duration) var(--filter-ease) both;
  pointer-events: none;
}
.gesso-filter-tabs .filter-menu-title {
  visibility: hidden;
  animation: none;
}
.gesso-filter-tabs .feed-popover.is-closing .filter-menu-title {
  animation: none;
}
.gesso-filter-tabs .feed-popover.is-closing .filter-menu-close {
  animation: filter-close-out var(--duration-panel) ease-in both;
}
.gesso-filter-tabs .feed-popover.is-closing .filter-menu-section {
  animation: filter-content-out var(--duration-fast) ease-in both;
}
.gesso-filter-tabs .feed-popover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: var(--filter-radius);
  background: var(--bg);
  clip-path: inset(var(--filter-stroke) var(--filter-stroke) var(--filter-stroke) var(--filter-stroke) round var(--filter-radius-fill));
  animation: filter-bento-fill-in var(--filter-in-duration) var(--filter-ease) both;
  pointer-events: none;
}
.gesso-filter-tabs .feed-popover.is-closing::before {
  animation: filter-bento-fill-out var(--filter-out-duration) var(--filter-ease) both;
}
.gesso-filter-tabs .feed-popover[hidden] {
  display: none;
}
.gesso-filter-tabs .filter-menu-section {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  align-self: start;
  align-content: start;
  gap: 0;
}
.gesso-filter-tabs .filter-menu-section[aria-labelledby="filter-model"] {
  --model-scroll-top-fade: 0;
  --model-scroll-bottom-fade: 0;
  --model-scroll-fade-overrun: 3px;
  position: relative;
  overflow: hidden;
}
.gesso-filter-tabs .filter-menu-scroll {
  display: grid;
  gap: var(--filter-list-gap);
  max-height: 248px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  margin-right: -8px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-track-thumb) transparent;
}
.gesso-filter-tabs .filter-menu-scroll::-webkit-scrollbar {
  width: 6px;
}
.gesso-filter-tabs .filter-menu-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--pill);
  background: var(--scrollbar-thumb);
}
.gesso-filter-tabs .filter-menu-section[aria-labelledby="filter-model"]::before,
.gesso-filter-tabs .filter-menu-section[aria-labelledby="filter-model"]::after {
  content: "";
  position: absolute;
  right: -8px;
  left: 0;
  z-index: 1;
  height: calc(var(--bl) * 8 + var(--model-scroll-fade-overrun));
  opacity: 0;
  pointer-events: none;
}
.gesso-filter-tabs .filter-menu-section[aria-labelledby="filter-model"]::before {
  top: calc(var(--bl) * 3 + 2px - var(--model-scroll-fade-overrun));
  opacity: var(--model-scroll-top-fade);
  transform: translateY(calc((1 - var(--model-scroll-top-fade)) * -6px));
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 26%,
    color-mix(in srgb, var(--bg) 48%, transparent) 58%,
    color-mix(in srgb, var(--bg) 18%, transparent) 84%,
    transparent 100%
  );
}
.gesso-filter-tabs .filter-menu-section[aria-labelledby="filter-model"]::after {
  bottom: calc(var(--model-scroll-fade-overrun) * -1);
  opacity: var(--model-scroll-bottom-fade);
  transform: translateY(calc((1 - var(--model-scroll-bottom-fade)) * 6px));
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 26%,
    color-mix(in srgb, var(--bg) 48%, transparent) 58%,
    color-mix(in srgb, var(--bg) 18%, transparent) 84%,
    transparent 100%
  );
}
.gesso-filter-tabs .filter-menu-label {
  color: var(--text-primary);
  margin: 0 0 var(--filter-label-gap) var(--filter-label-inset);
}
.gesso-filter-tabs .filter-menu .side-cat {
  max-width: min(100%, calc(var(--bl) * 23));
  min-height: var(--pill-taxonomy-h);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
}
.gesso-filter-tabs .filter-menu-section > .side-cat + .side-cat {
  margin-top: var(--filter-list-gap);
}

@media (max-width: 1100px) {
  .gesso-filter-tabs .feed-popover {
    left: 8%;
    --filter-width: 92%;
    grid-template-columns:
      minmax(0, 1.38fr)
      minmax(0, 1.28fr)
      minmax(0, 1fr)
      minmax(0, 1.05fr);
  }
}

@media (max-width: 720px) {
  .gesso-filter-tabs .feed-popover {
    left: 0;
    --filter-width: 100%;
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

/* ---------- gallery: dense Swiss workflow field ------------- */
/* A four-column visual archive, with gutters and captions locked to
   the 8px baseline so density still feels ordered. */

.gallery {
  max-width: none;
  margin: 0;
  padding: 0 var(--page-gutter) calc(var(--lh) * 5);
}
.gallery[hidden] {
  display: none;
}
.masonry {
  --masonry-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--masonry-cols), minmax(0, 1fr));
  gap: var(--feed-grid-gap);
  align-items: start;
  contain: layout style;
  overflow: visible;
}
.masonry[hidden] { display: none; }

.masonry-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--feed-grid-gap);
  overflow: visible;
}

.item {
  position: relative;
  z-index: 0;
  width: 100%;
  margin: 0;
  cursor: pointer;
  overflow: visible;
}
.item:hover,
.item:focus-visible {
  z-index: var(--z-focus);
}

.ph {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 1.5);
  background: var(--ph);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  transform: translateZ(0);
  transition:
    background var(--duration-base) ease,
    opacity var(--duration-base) ease;
  transform-origin: center center;
  will-change: opacity;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--ink) 34%, transparent) 0%,
      color-mix(in srgb, var(--ink) 31%, transparent) 7%,
      color-mix(in srgb, var(--ink) 24%, transparent) 13%,
      color-mix(in srgb, var(--ink) 16%, transparent) 20%,
      color-mix(in srgb, var(--ink) 8%, transparent) 28%,
      color-mix(in srgb, var(--ink) 2%, transparent) 38%,
      transparent 48%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--ink) 30%, transparent) 0%,
      color-mix(in srgb, var(--ink) 27%, transparent) 8%,
      color-mix(in srgb, var(--ink) 21%, transparent) 15%,
      color-mix(in srgb, var(--ink) 13%, transparent) 23%,
      color-mix(in srgb, var(--ink) 6%, transparent) 32%,
      color-mix(in srgb, var(--ink) 2%, transparent) 42%,
      transparent 54%
    );
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  pointer-events: none;
}
.item .ph img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: translateZ(0);
  transform-origin: center center;
  transition: opacity var(--duration-ui) ease;
  will-change: opacity;
  backface-visibility: hidden;
}
.detail-media .ph img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.ph-tag {
  grid-area: 1 / 1;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--fs-ui);
  line-height: var(--lh);
  letter-spacing: 0;
}

.item:hover .ph {
  background: var(--ph-deep);
}
.item:hover .ph::after,
.item:focus-visible .ph::after {
  opacity: 1;
}
.item:active .ph {
  opacity: 0.9;
}
.item:active .ph img {
  opacity: 0.92;
}
.item.is-motion-source .ph {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.item:focus-visible { outline: var(--focus-ring-strong); outline-offset: var(--focus-offset); }

.m-cap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bl);
  padding: calc(var(--bl) * 2);
  opacity: 0;
  pointer-events: none;
  line-height: var(--lh);
  transform: translate3d(0, 4px, 0);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-ui) var(--ease-editorial);
}
.item:hover .m-cap,
.item:focus-visible .m-cap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.m-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-inverse);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: var(--lh);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-by {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--pill-feature-h);
  overflow: hidden;
  padding: var(--pill-feature-y) var(--pill-feature-x);
  border-radius: var(--pill);
  background: var(--surface-caption-wash);
  color: var(--text-primary);
  font-size: var(--fs-ui);
  line-height: var(--pill-line);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-cred {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.m-cred.is-muted { color: var(--text-muted); }
a.m-cred:hover { text-decoration: underline; text-underline-offset: 2px; }

.wall-empty { padding: calc(var(--lh) * 2) 0; color: var(--text-muted); font-size: var(--fs-ui); letter-spacing: 0; }
.wall-empty[hidden] { display: none; }

/* ---------- bottom dock + panels ---------------------------- */

.panel-avatar {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 92%, var(--bg)) 0 38%, transparent 39%),
    linear-gradient(45deg, color-mix(in srgb, var(--mut) 72%, var(--bg)) 0 42%, transparent 43%),
    var(--ph-deep);
}

.panel[hidden] { display: none; }
/* About/Submit unfold from the chrome pills that open them: a popout
   anchored under the top-right corner, never a sheet at the page foot */
.panel {
  position: fixed;
  inset: 64px calc(var(--other-edge) - var(--popout-stroke)) auto auto;
  z-index: calc(var(--z-chrome) + 1);
  display: grid;
  place-items: start end;
  pointer-events: none;
}
.panel-card {
  position: relative;
  width: min(360px, calc(100vw - 40px));
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 20px 20px;
  border: var(--border-popout-shell);
  border-radius: var(--popout-radius);
  background: var(--background-popout-shell);
  box-shadow: var(--shadow-popout);
  color: var(--text-primary);
  isolation: isolate;
  pointer-events: auto;
  transform-origin: top right;
  animation: panel-in var(--duration-panel) var(--ease-editorial);
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
.panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: var(--control-h);
  height: var(--control-h);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-pill);
}
/* rests on the pill wash, so hover steps to pill-active (5% -> 8%) */
.panel-close:hover { background: var(--surface-pill-active); }
.panel-close .lucide {
  width: 15px;
  height: 15px;
}
.panel-avatar { margin-bottom: 16px; }
.panel-kicker {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
}
.panel h2 {
  margin: 0 42px 8px 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh);
  overflow-wrap: anywhere;
}
.panel p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: var(--fs-ui);
  line-height: calc(var(--bl) * 2);
  overflow-wrap: anywhere;
}
.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
}
.panel-links a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--pill-feature-h);
  overflow: hidden;
  padding: var(--pill-feature-y) var(--pill-feature-x);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-primary);
  font-size: var(--fs-ui);
  line-height: var(--pill-line);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* pill-resting links hover to pill-active, per the wash law */
.panel-links a:hover { background: var(--surface-pill-active); }

.submission-panel .panel-card {
  width: min(424px, calc(100vw - 40px));
}
.submission-form {
  display: grid;
  gap: calc(var(--bl) * 1.5);
  margin-top: calc(var(--lh) * 0.75);
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-ui);
  line-height: calc(var(--bl) * 2);
}
.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  border: var(--border-text-entry);
  border-radius: var(--pill);
  background: var(--surface-text-entry);
  color: var(--text-primary);
  font: inherit;
  line-height: var(--lh);
  outline: 0;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
.field input {
  min-height: var(--control-h);
  padding: 0 14px;
}
.file-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h);
  padding: 5px 14px 5px 5px;
  border: var(--border-text-entry);
  border-radius: var(--pill);
  background: var(--surface-text-entry);
  color: var(--text-muted);
  overflow: hidden;
}
.file-shell input[type="file"] {
  position: absolute;
  inset: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.file-button {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--type-control-line) + 6px);
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-primary);
  line-height: var(--type-control-line);
}
.file-shell:hover .file-button,
.file-shell:focus-within .file-button {
  background: var(--surface-pill-active);
}
.file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field textarea {
  min-height: calc(var(--lh) * 4);
  padding: 9px 14px;
  border-radius: calc(var(--bl) * 2);
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--border-text-entry-focus);
  box-shadow: var(--shadow-text-entry-focus);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}
.submission-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--bl) * 1.5);
  min-height: var(--control-h);
  margin-top: 4px;
}
.submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: var(--control-h);
  padding: 0 18px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--text-inverse);
}
/* an ink pill keeps its ink under focus: the lightened fill is the ring */
.submit-button:hover,
.submit-button:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--ink) 86%, var(--bg));
}
.submit-button:disabled {
  cursor: wait;
  opacity: 0.48;
}
.submission-status {
  flex: 1 1 160px;
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-ui);
  line-height: calc(var(--bl) * 2);
  overflow-wrap: anywhere;
}

/* ---------- expanded view ---------------------------------- */
/* Always shows the true, uncropped frame — never the clamped one. */

.detail[hidden] { display: none; }
.detail {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: block;
  background: var(--bg);
  padding: calc(var(--lh) + (var(--bl) * 2)) var(--margin) calc(var(--lh) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  --detail-primary-opacity: 1;
  --detail-primary-blur: 0px;
  --detail-primary-y: 0px;
}
.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  opacity: 1;
  pointer-events: auto;
}
.close {
  position: fixed;
  top: var(--lh);
  right: max(var(--margin), calc((100vw - var(--maxw)) / 2 + var(--margin)));
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bl) * 0.75);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
  z-index: var(--z-overlay-ui);
  padding: 0;
  opacity: 1;
  transition: color var(--duration-base) ease;
  will-change: opacity;
}
.close:hover { color: var(--text-primary); }
.close:focus-visible {
  outline: 0;
  color: var(--text-primary);
}
.close .lucide {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}
.detail-primary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: calc(var(--lh) * 2);
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: calc(100vh - (var(--lh) * 6));
  opacity: var(--detail-primary-opacity);
  filter: blur(var(--detail-primary-blur));
  transform: translate3d(0, var(--detail-primary-y), 0);
  transform-origin: center top;
  transition:
    opacity var(--duration-instant) linear,
    filter var(--duration-instant) linear,
    transform var(--duration-instant) linear;
  will-change: opacity, filter, transform;
}
.detail-media {
  position: relative;
  z-index: 1;
  grid-column: 1 / 9;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
}
/* multi-image works: quiet white controls floating on the image,
   the pill family's geometry, no motion beyond the wash */
.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 0.5px var(--line);
  color: var(--text-primary);
  transform: translateY(-50%);
  transition: background var(--duration-fast) ease;
}
.gallery-arrow svg { width: 16px; height: 16px; }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
.gallery-arrow:hover,
.gallery-arrow:focus-visible {
  outline: 0;
  background: rgb(255 255 255 / 1);
}
.gallery-count {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 2;
  padding: 3px 12px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 0.5px var(--line);
  color: var(--text-secondary);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}
/* the archive tile wears a count chip when the work is a series */
.item .ph-stack {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 0.5px var(--line);
  color: var(--text-secondary);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  font-variant-numeric: tabular-nums;
}
.detail-media .ph {
  aspect-ratio: var(--ar, 1.5);
  width: min(100%, calc((100vh - (var(--lh) * 10)) * var(--ar, 1.5)));
  max-height: calc(100vh - (var(--lh) * 10));
  height: auto;
  font-size: var(--fs-ui);
  will-change: transform, opacity, filter;
}
.detail-meta {
  position: relative;
  z-index: 1;
  grid-column: 9 / 12;
  align-self: start;
  font-size: var(--fs-ui);
  letter-spacing: 0;
  padding-top: 0;
  padding-bottom: var(--lh);
  will-change: opacity, transform;
}
.detail-caption {
  margin: 0 0 calc(var(--lh) + (var(--bl) * 1.5));
  max-width: 36em;
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  overflow-wrap: anywhere;
}
.detail-caption span,
.detail-caption a {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.detail-caption a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tag-group {
  margin: 0 0 calc(var(--lh) + (var(--bl) * 1.5));
}
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
  align-items: flex-start;
  max-width: 100%;
  margin: 0;
}
.detail-chips span {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 32ch);
  min-height: var(--pill-taxonomy-h);
  overflow: hidden;
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border: 0;
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* [hidden] must beat the display above: the "+N more" overflow collapse */
.detail-chips span[hidden] {
  display: none;
}
.detail-context {
  max-width: 42em;
  margin: var(--bl) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-body-small-line);
  overflow-wrap: anywhere;
}
.detail-context[hidden] {
  display: none;
}
.m-group { margin-bottom: calc(var(--lh) + (var(--bl) * 1.5)); }
.detail-meta .m-group h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.detail-meta .m-group:not(#detail-resources-section) h2 {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0 var(--bl);
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
}
.resource-kind {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 14ch;
  min-height: var(--pill-nested-h);
  overflow: hidden;
  padding: 0 var(--pill-nested-x);
  border-radius: var(--pill);
  background: var(--surface-pill-active);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--type-control-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-control-line);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-copy {
  margin: 0;
  max-width: 42em;
  color: var(--text-secondary);
  font-size: var(--type-body-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-body-small-line);
  overflow-wrap: anywhere;
}
.detail-copy.is-collapsed:not(.is-expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.prompt-toggle {
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-toggle:hover,
.prompt-toggle:focus-visible {
  color: var(--text-primary);
  background: transparent;
}
.resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
  align-items: flex-start;
  margin: 0;
  padding: 0;
  border-top: 0;
  list-style: none;
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
}
.resource-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--pill-gap);
  max-width: min(100%, 38ch);
  min-height: var(--pill-taxonomy-h);
  overflow: hidden;
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border: 0;
  border-radius: var(--pill);
  background: var(--surface-pill);
}
/* [hidden] must beat the display above: the "+N more" overflow collapse */
.resource-list li[hidden] {
  display: none;
}
.resource-main {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
}
.resource-name {
  min-width: 0;
  max-width: 100%;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
}
.resource-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
  align-items: flex-start;
  margin: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
}
.setting-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 38ch);
  min-height: var(--pill-taxonomy-h);
  overflow: hidden;
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border: 0;
  border-radius: var(--pill);
  background: var(--surface-pill);
}
.setting-chip dt,
.setting-chip dd {
  min-height: 0;
  margin: 0;
  border: 0;
}
.setting-chip dt {
  flex: none;
  max-width: 12ch;
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setting-chip dt::after {
  content: ":";
  margin-right: 6px;
}
.setting-chip dd {
  color: var(--text-primary);
  min-width: 0;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-control-size);
  font-weight: var(--fw-regular);
  line-height: var(--type-control-line);
}
.overflow-toggle,
.resource-list .overflow-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: var(--pill-taxonomy-h);
  overflow: hidden;
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-toggle:hover,
.overflow-toggle:focus-visible {
  outline: 0;
  background: var(--surface-pill-active);
  color: var(--text-primary);
}
.resource-list .overflow-control {
  padding: 0;
  background: transparent;
}
.context-menu {
  position: fixed;
  z-index: calc(var(--z-overlay-ui) + 10);
  --popout-fill: var(--surface-raised);
  min-width: 184px;
  padding: 6px;
  border: var(--border-popout-shell);
  border-radius: var(--pill);
  background: var(--background-popout-shell);
  box-shadow: var(--shadow-popout);
  backdrop-filter: blur(18px);
  isolation: isolate;
}
.context-menu[hidden] { display: none; }
.context-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: min(360px, calc(100vw - 32px));
  min-height: 36px;
  overflow: hidden;
  padding: 0 14px;
  border-radius: var(--pill);
  color: var(--text-primary);
  font-size: var(--fs-ui);
  line-height: var(--lh);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-menu button:hover,
.context-menu button:focus-visible {
  background: var(--surface-pill);
}
.detail-recommendations {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-bottom: calc(var(--lh) * 4);
}
.detail-recommendations[hidden] { display: none; }
.detail-recommendations h2 {
  margin: 0 0 var(--lh);
  color: var(--text-primary);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  line-height: var(--lh);
  letter-spacing: 0;
}
.recommendation-grid {
  --rec-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--rec-cols), minmax(0, 1fr));
  gap: var(--card-gap);
  align-items: start;
}
.rec-item {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
}
.rec-item .ph {
  aspect-ratio: 4 / 3;
}
.rec-item:hover .ph {
  background: var(--ph-deep);
}
.rec-item:hover .ph::after,
.rec-item:focus-visible .ph::after {
  opacity: 1;
}
.rec-item:active .ph {
  opacity: 0.9;
}
.rec-item:focus-visible {
  outline: var(--focus-ring-strong);
  outline-offset: var(--focus-offset);
}

@media (hover: none) {
  .item:hover .ph,
  .rec-item:hover .ph {
    background: var(--ph);
  }
  .item:hover .ph::after,
  .item:hover .m-cap,
  .rec-item:hover .ph::after {
    opacity: 0;
  }
  .item:hover .m-cap {
    transform: translate3d(0, 4px, 0);
  }
}

body.detail-open { overflow: hidden; }
body.detail-open .site-chrome { pointer-events: none; }

/* footer — fixed quiet bar for infinite scroll: © · links · social · credit */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  right: auto;
  z-index: var(--z-chrome);
  background: var(--bg);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  width: min(100%, var(--maxw));
  padding: var(--bl) var(--margin);
  font-size: var(--fs-ui);
  line-height: var(--lh);
  letter-spacing: 0;
  color: var(--text-muted);
  transform: translateX(-50%);
}
.site-footer::before {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  height: calc(var(--lh) + (var(--bl) * 2));
  background: var(--bg);
  transform: translateX(-50%);
  pointer-events: none;
}
.panel-fine {
  margin: calc(var(--bl) * 1.5) 0 0;
  color: var(--text-muted);
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
}
.about-panel .panel-fine {
  margin-top: calc(var(--bl) * 2.5);
  padding-bottom: calc(var(--bl) * 0.5);
  line-height: calc(var(--type-control-line) + 4px);
}
.panel-fine a {
  color: var(--text-secondary);
}
.foot-group { display: flex; gap: 20px; }
.foot-item { color: var(--text-muted); white-space: nowrap; }
.foot-link {
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-muted);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-base) ease;
}
.foot-link:hover { color: var(--text-primary); }
@media (max-width: 720px) {
  /* keep the fixed footer a single compact row; drop the credit/sponsor */
  .site-footer { gap: 8px 16px; padding: 8px var(--margin); font-size: var(--fs-ui); }
  .foot-by { display: none; }
  .admin-token {
    display: grid;
    align-items: stretch;
    max-width: none;
  }
  .submission-card {
    grid-template-columns: 1fr;
  }
}
body.detail-open .panel {
  opacity: 0;
  pointer-events: none;
}

/* ---------- admin submissions ------------------------------- */

.admin-page {
  min-height: 100vh;
  background: var(--bg);
}
.admin-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--lh) var(--margin) calc(var(--lh) * 4);
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--lh) * 3);
  margin-bottom: calc(var(--lh) * 2);
}
.admin-kicker,
.submission-date {
  color: var(--text-muted);
  font-size: var(--fs-ui);
  line-height: var(--lh);
}
.admin-token {
  display: flex;
  align-items: end;
  gap: calc(var(--bl) * 1.5);
  max-width: 460px;
  margin-bottom: var(--lh);
}
.admin-token[hidden] {
  display: none;
}
.admin-token .field {
  flex: 1;
}
.submission-list {
  display: grid;
  gap: var(--lh);
}
.submission-card {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
.submission-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ph);
  overflow: hidden;
}
.submission-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.submission-meta {
  min-width: 0;
}
.submission-date,
.submission-notes {
  margin: 0 0 var(--bl);
}
.submission-source {
  display: block;
  margin-bottom: var(--bl);
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--fs-copy);
  line-height: 1.5;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.submission-source:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* what the uploaded file testifies about its own generation */
.submission-embedded {
  margin-top: calc(var(--bl) * 1.5);
  padding: calc(var(--bl) * 1.5) var(--pill-taxonomy-x);
  border-radius: calc(var(--bl) * 2);
  background: var(--surface-quiet);
}
.submission-embedded-head {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  text-transform: uppercase;
}
.submission-embedded-line {
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--type-control-size);
  line-height: var(--type-control-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-notes {
  max-width: 52em;
  color: var(--text-primary);
  font-size: var(--fs-ui);
  line-height: var(--lh);
  overflow-wrap: anywhere;
}

/* ---------- blog -------------------------------------------- */

.blog-page {
  min-height: 100vh;
  background: var(--surface-page);
}
.blog-app {
  min-height: 100vh;
}
.blog-main {
  padding-bottom: calc(var(--lh) * 5);
}
.blog-index {
  padding: 0 var(--other-edge);
}
.blog-post-list {
  display: grid;
  gap: var(--gutter);
  margin-top: calc(var(--lh) * 1.75);
}
.blog-post-card {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  max-width: var(--maxw);
  min-width: 0;
}
.blog-post-media {
  grid-column: 1 / 5;
  aspect-ratio: 16 / 10;
  min-height: 160px;
  border-radius: 0;
  background: var(--surface-pill);
}
.blog-post-copy {
  grid-column: 7 / 10;
  min-width: 0;
}
.blog-post-meta {
  margin: 0 0 var(--bl);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
}
.blog-post-card h3 {
  margin: 0 0 var(--bl);
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
  overflow-wrap: anywhere;
}
.blog-post-card p {
  max-width: 42em;
  margin: 0 0 calc(var(--bl) * 2);
  color: var(--text-secondary);
  font-size: var(--type-body-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-body-small-line);
  overflow-wrap: anywhere;
}
.blog-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
  max-width: 100%;
}
.blog-post-tags span {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 32ch);
  min-height: var(--pill-taxonomy-h);
  overflow: hidden;
  padding: var(--pill-taxonomy-y) var(--pill-taxonomy-x);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a card that links somewhere reads as one object: quiet dim on the
   cover, never movement */
a.blog-post-card {
  text-decoration: none;
  color: inherit;
}
.blog-post-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--duration-base) ease;
}
a.blog-post-card:hover .blog-post-media img,
a.blog-post-card:focus-visible .blog-post-media img {
  opacity: 0.9;
}
a.blog-post-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- blog post pages ---------------------------------- */
/* One reading column, hairline rows for term lists. The field guide's
   catalog grammar, kept as the house style for every post. */

.post-main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 24px 120px;
}
.post-kicker {
  margin: 0 0 var(--bl);
  color: var(--text-muted);
  font-size: var(--type-control-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line);
}
.post-head h1 {
  margin: 0;
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--type-title-tracking);
  line-height: var(--type-title-line);
  color: var(--text-primary);
}
.post-stand {
  margin: 16px 0 0;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: var(--lh);
  text-wrap: pretty;
}
.post-prose {
  margin-top: 48px;
}
.post-prose p {
  margin: 0 0 calc(var(--bl) * 2);
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: var(--lh);
  text-wrap: pretty;
}
.post-prose h2 {
  margin: 56px 0 12px;
  font-size: var(--fs-head);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--text-primary);
}
.post-prose a,
.post-foot a {
  color: var(--text-primary);
}
.post-terms {
  margin-top: 24px;
}
.post-group {
  margin-top: 40px;
}
.post-group > h3 {
  margin: 0 0 4px;
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--text-muted);
  text-transform: uppercase;
}
dl.post-list {
  margin: 0;
}
.post-list > div {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.post-list > div:last-child {
  border-bottom: 0;
}
.post-list dt {
  color: var(--text-primary);
  font-size: var(--type-small-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-small-line);
}
.post-list dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  text-wrap: pretty;
}
@media (max-width: 560px) {
  .post-list > div {
    grid-template-columns: 1fr;
    padding: 12px 0;
  }
}
.post-foot {
  margin-top: 96px;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
}
.post-foot p {
  margin: 0 0 var(--bl);
  max-width: 62ch;
}
.post-colophon {
  color: var(--text-muted);
}

/* ---------- responsive ------------------------------------- */

@media (min-width: 1680px) {
  :root {
    --maxw: 1760px;
  }
}

@media (max-width: 1280px) {
  :root {
    --margin: 32px;
  }
  .site-chrome { padding-inline: var(--margin); }
  .brand-line { display: none; }
  .category-tabs { padding-inline: var(--margin); }
  .gallery { padding-inline: var(--margin); }
}

@media (max-width: 960px) {
  :root {
    --margin: 24px;
  }

  .site-chrome {
    grid-template-columns: minmax(92px, auto) minmax(220px, 1fr) auto;
    gap: var(--gutter);
    padding: calc(var(--bl) * 2) var(--margin);
  }
  .chrome-actions {
    grid-column: 2;
    justify-self: center;
  }
  .brand { font-size: var(--fs-lead); }
  .brand-line { display: none; }
  .category-tabs {
    padding: calc(var(--chrome-h) + var(--bl)) var(--margin) calc(var(--bl) * 2);
  }
  .gallery { padding: 0 var(--margin) calc(var(--lh) * 6); }
  .masonry { --masonry-cols: 3; }
}

@media (max-width: 720px) {
  :root {
    --margin: 16px;
    --chrome-h: calc(var(--lh) * 4);
  }

  .site-chrome {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: calc(var(--bl) * 2) var(--margin) var(--bl);
  }
  .brand { font-size: var(--fs-lead); }
  .brand-line { display: none; }
  .chrome-actions { display: none; }
  .category-tabs {
    padding: calc(var(--chrome-h) + var(--bl)) var(--margin) calc(var(--bl) * 2);
  }
  .category-tab {
    min-height: var(--lh);
    padding: 0;
    font-size: var(--fs-ui);
    line-height: var(--lh);
  }
  .gallery { padding: 0 var(--margin) calc(var(--lh) * 6); }
  .masonry { --masonry-cols: 2; }
}

@media (max-width: 480px) {
  :root { --margin: 16px; }

  .brand-line { display: none; }
  .masonry { --masonry-cols: 2; --card-gap: 12px; }
  .panel-card { width: calc(100vw - (var(--margin) * 2)); }
  .panel h2 { font-size: var(--fs-lead); }
}

@media (max-width: 340px) {
  .masonry { --masonry-cols: 1; }
}

@media (max-width: 760px) {
  .detail-primary {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--lh) var(--gutter);
    min-height: auto;
  }
  .detail-media {
    grid-column: 1 / -1;
    min-height: auto;
    align-items: flex-start;
  }
  .detail-media .ph {
    width: min(100%, calc(38vh * var(--ar, 1.5)));
    max-height: 38vh;
  }
  .detail-meta { grid-column: 1 / -1; align-self: start; }
  .recommendation-grid { --rec-cols: 2; }
}

@media (max-width: 1280px) {
  .other-demo .site-chrome {
    padding-inline: var(--other-edge);
  }
  .other-demo .category-tabs {
    padding-inline: 0;
  }
  .other-demo .gallery {
    padding-inline: var(--other-edge);
  }
}

@media (max-width: 960px) {
  .other-demo {
    --type-display-size: 104px;
    --type-display-line: 114.4px;
    --type-display-tracking: -2.5px;
    --type-title-size: 34px;
    --type-title-line: 40.8px;
  }
  .other-demo .site-chrome {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    min-height: 56px;
    padding: 0 var(--other-edge);
  }
  .other-demo .brand,
  .other-demo .chrome-link {
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
  }
  .other-demo .chrome-actions {
    grid-column: 3;
    display: flex;
    gap: calc(var(--bl) * 1.5);
  }
  .other-demo .chrome-tools {
    grid-column: 4;
  }
  .other-demo .other-hero {
    height: 330px;
    padding-top: 128px;
  }
  .other-demo .other-hero h1 {
    font-size: var(--type-display-size);
    line-height: var(--type-display-line);
    letter-spacing: var(--type-display-tracking);
  }
  .other-demo .other-hero p {
    top: 176px;
  }
  .other-demo .other-social {
    top: 236px;
  }
  .other-demo .category-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 46px;
    margin: 0 var(--other-edge) var(--section-gap);
    padding: 0;
  }
  .other-demo .category-tabs.is-explore-open {
    height: auto;
    row-gap: 28px;
  }
  .other-demo .works-title h2,
  .other-demo .category-tab,
  .other-demo .filter-menu-title,
  .other-demo .work-search-input,
  .other-demo .work-search-close,
  .other-demo .explore-collection-title {
    font-size: var(--type-title-size);
    line-height: var(--type-title-line);
  }
  .other-demo .masonry {
    --masonry-cols: 3;
  }
  .blog-post-copy {
    grid-column: 6 / 11;
  }
  .other-demo .explore-preview-stack {
    --preview-scale: 0.86;
  }
}

@media (max-width: 720px) {
  .other-demo {
    --other-edge: clamp(16px, 4.8vw, 24px);
    --page-gutter: var(--other-edge);
    --section-gap: clamp(24px, 7vw, 32px);
    --feed-grid-gap: clamp(12px, 3.8vw, 16px);
    --chrome-h: 56px;
    --type-display-size: clamp(58px, 18.5vw, 78px);
    --type-display-line: 0.98;
    --type-display-tracking: -2px;
    --type-title-size: clamp(24px, 6.75vw, 34px);
    --type-title-line: calc(var(--type-title-size) * 1.2);
  }
  .other-demo .site-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 4vw, 20px);
    min-height: var(--chrome-h);
    padding: 0 var(--page-gutter);
  }
  /* chrome items never shrink below their content — the wordmark does not
     truncate and links do not spill over it; what no longer fits leaves the
     chrome at the breakpoints below instead */
  .other-demo .brand {
    flex: 0 0 auto;
  }
  .other-demo .chrome-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    justify-self: auto;
    gap: clamp(12px, 4vw, 18px);
    margin-left: auto;
  }
  .other-demo .chrome-link { flex: 0 0 auto; }
  .other-demo .chrome-tools {
    grid-column: auto;
    flex: 0 0 auto;
    justify-self: auto;
    gap: 6px;
  }
  .other-demo .chrome-pill {
    padding: 0 var(--pill-compact-x);
  }
  .other-demo .other-hero {
    height: auto;
    min-height: 0;
    padding: clamp(96px, 28vw, 116px) var(--page-gutter) clamp(28px, 7vw, 36px);
  }
  .other-demo .other-hero h1 {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    font-size: var(--type-display-size);
    line-height: var(--type-display-line);
    letter-spacing: var(--type-display-tracking);
  }
  .other-demo .other-hero p {
    position: static;
    width: min(298px, 100%);
    margin-top: clamp(18px, 5vw, 24px);
  }
  .other-demo .other-social {
    display: none;
  }
  .other-demo .category-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    margin: 0 var(--page-gutter) var(--section-gap);
    overflow: visible;
  }
  .other-demo .works-title {
    order: 2;
    margin-top: var(--work-nav-stack-gap);
  }
  .other-demo .gesso-filter-tabs > .works-title {
    display: none;
  }
  .other-demo .works-title span {
    margin-left: calc(var(--bl) / 2);
  }
  .other-demo .work-modes {
    order: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: var(--work-nav-mobile-gap);
    min-width: 0;
    overflow: visible;
  }
  .other-demo .work-search,
  .other-demo .explore-surface {
    order: 3;
  }
  .other-demo .category-tab {
    flex: 0 0 auto;
    min-height: var(--type-title-line);
  }
  .other-demo .explore-surface {
    display: block;
    padding-top: var(--lh);
  }
  .other-demo .explore-surface[hidden] {
    display: none;
  }
  .other-demo .explore-categories,
  .other-demo .explore-collections {
    padding-right: 0;
  }
  .other-demo .explore-categories {
    margin-bottom: 22px;
  }
  .other-demo .explore-category-list {
    gap: var(--bl);
  }
  .blog-index {
    padding-inline: var(--other-edge);
  }
  .blog-post-card {
    display: block;
  }
  .blog-post-media {
    width: 100%;
    min-height: 180px;
    margin-bottom: var(--lh);
  }
  .blog-post-copy {
    max-width: 42em;
  }
  .other-demo .explore-collection-head {
    padding-right: 0;
  }
  .other-demo .explore-collection-main {
    display: block;
    width: 100%;
    max-width: 100%;
    gap: 8px 10px;
  }
  .other-demo .explore-preview-stack {
    --preview-rest-w: 72px;
    --preview-rest-h: 34px;
    --preview-scale: 0.56;
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: var(--preview-rest-w, 72px);
    height: var(--preview-rest-h, 34px);
    margin-top: 0;
  }
  .other-demo .explore-preview-pill:nth-child(2) {
    --rest-x: 12px;
  }
  .other-demo .explore-preview-pill:nth-child(3) {
    --rest-x: 24px;
  }
  .other-demo .explore-preview-pill:nth-child(4) {
    --rest-x: 36px;
  }
  .other-demo .explore-collection.is-preview-active .explore-preview-stack,
  .other-demo .explore-collection:focus-visible .explore-preview-stack {
    width: min(calc(var(--preview-stack-w, 500px) * var(--preview-scale, 0.56)), 100%);
    height: calc(var(--preview-stack-h, 192px) * var(--preview-scale, 0.56));
    margin-top: 10px;
  }
  .other-demo .works-title h2,
  .other-demo .category-tab,
  .other-demo .filter-menu-title,
  .other-demo .work-search-input,
  .other-demo .work-search-close,
  .other-demo .explore-collection-title {
    font-size: var(--type-title-size);
    line-height: var(--type-title-line);
  }
  .other-demo .gesso-filter-tabs .feed-popover {
    top: calc(100% + var(--work-nav-popover-gap) + var(--filter-y));
    left: 0;
    --filter-width: 100%;
  }
  .other-demo .gesso-filter-tabs .feed-popover .filter-menu-title {
    visibility: visible;
  }
  .other-demo .gesso-filter-tabs.is-more-open .work-modes [data-menu-button],
  .other-demo .gesso-filter-tabs.is-more-open.is-more-closing .work-modes [data-menu-button] {
    opacity: 0;
  }
  .other-demo .work-search {
    gap: var(--gutter);
  }
  .other-demo .masonry {
    --masonry-cols: 2;
  }
}

@media (max-width: 480px) {
  /* below ~460px the chrome cannot hold brand, three links, and two pills;
     contextual links (marked chrome-link-aside) yield first — the global
     Blog / Builder pair stays */
  .other-demo .chrome-link-aside {
    display: none;
  }
}

@media (max-width: 360px) {
  /* the quiet pill yields next; the ink CTA keeps its seat */
  .other-demo .chrome-pill:not(.chrome-pill-ink) {
    display: none;
  }
  .other-demo .work-modes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    column-gap: clamp(28px, 11vw, 42px);
    row-gap: calc(var(--bl) / 2);
  }
  .other-demo .masonry {
    --masonry-cols: 1;
  }
}

@media (min-width: 721px) and (max-width: 1120px) {
  .other-demo .other-hero {
    height: auto;
    padding: 128px var(--other-edge) 42px;
  }
  .other-demo .other-hero p,
  .other-demo .other-social {
    position: static;
    width: min(298px, 100%);
    margin-left: min(50%, calc(100% - 298px));
  }
  .other-demo .other-hero p {
    margin-top: 24px;
  }
  .other-demo .other-social {
    margin-top: 12px;
  }
  .other-demo .category-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    margin: 0 var(--other-edge) var(--section-gap);
  }
  .other-demo .works-title {
    order: 2;
    margin-top: var(--work-nav-stack-gap);
  }
  .other-demo .works-title span {
    margin-left: calc(var(--bl) / 2);
  }
  .other-demo .work-modes {
    order: 1;
    display: flex;
    justify-content: space-between;
    gap: var(--work-nav-gap);
  }
  .other-demo .work-search,
  .other-demo .explore-surface {
    order: 3;
  }
  .other-demo .category-tab {
    flex: 0 0 auto;
  }
  .other-demo .gesso-filter-tabs .feed-popover {
    top: calc(var(--type-title-line) + var(--work-nav-popover-offset) + var(--filter-y));
  }
  .other-demo .explore-preview-stack {
    --preview-scale: 0.72;
  }
}

@media (min-width: 1121px) and (max-width: 1439px) {
  .other-demo .other-social {
    top: 257px;
  }
}

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