/* pb_public/css/pages.css
   Page-specific layout. Load after components.css. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

body[data-page="piece"] {
  overflow-x: clip;
}

/* ══ Home hero ═══════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-sunken);
  animation: hero-fade var(--dur-slow) var(--ease-calm);
}
.home-hero__media img,
.home-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.home-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
  pointer-events: none;
}
@keyframes hero-fade { from { opacity: 0; } }

.home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding:
    calc(var(--safe-top) + var(--space-24))
    var(--content-inset)
    calc(var(--safe-bottom) + var(--space-24));
  animation: hero-fade var(--dur-slow) var(--ease-calm);
}
.home-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-hero);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--hero-text);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 40%, transparent);
}
.home-hero__prompt {
  position: absolute;
  left: var(--content-inset);
  bottom: calc(var(--safe-bottom) + var(--space-6));
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hero-text);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 40%, transparent);
  pointer-events: none;
}
.home-hero__media--none { background: var(--bg); }
.home-hero__media--none::after { display: none; }

/* ══ Home header: floating dock ══════════════════════════════════════════ */
body[data-page="home"] .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: none;
  pointer-events: none;
}
body[data-page="home"] .site-header__controls {
  position: fixed;
  top: auto;
  bottom: calc(var(--safe-bottom) + var(--space-6));
  right: var(--content-inset);
  left: auto;
  gap: var(--space-2);
  z-index: calc(var(--z-nav) + 1);
  pointer-events: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
body[data-page="home"][data-hero-state="scrolled"] .site-header {
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 60%, transparent 100%);
}
body[data-page="home"] .site-header .brand {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-calm);
}
body[data-page="home"][data-hero-state="scrolled"] .site-header .brand {
  opacity: 1;
  transition-delay: 80ms;
}

.site-header__controls [data-search-open] {
  box-sizing: border-box;
  overflow: hidden;
  transition:
    width        var(--dur-base) var(--ease-calm),
    opacity      var(--dur-base) var(--ease-calm),
    margin-right var(--dur-base) var(--ease-calm),
    transform    var(--dur-base) var(--ease-calm);
  will-change: width, opacity, transform;
}
body[data-page="home"][data-hero-state="landing"] .site-header__controls [data-search-open] {
  width: 0;
  padding: 0;
  border-width: 0;
  margin-right: calc(var(--space-2) * -1);
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
}
body[data-page="home"][data-hero-state="scrolled"] .site-header__controls [data-search-open] {
  transform: translateX(0);
  transition-delay: 120ms;
}

/* ══ Home sections shell ═════════════════════════════════════════════════ */
.home-section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-space);
}
.home-section--works   { padding-block-end:   var(--space-10); }
.home-section--updates { padding-block-start: var(--space-10); }

.home-section__header {
  text-align: center;
  margin-bottom: var(--space-5);
  max-width: 60ch;
  margin-inline: auto;
}
.home-section__header > * { max-width: none; }

.home-section__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.home-section__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-indent: 0.025em;
  color: var(--text);
}

.home-section__intro {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.home-section__cta {
  max-width: none;                  /* paragraphs are narrower by default; centre against the section */
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}
.home-section__cta .btn .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-calm); }
.home-section__cta .btn:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .home-section__cta .btn:hover .icon { transform: none; } }
.home-section__empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding-block: var(--space-8);
  font-style: italic;
}
@media (max-height: 520px) and (orientation: landscape) {
  .home-section { padding-block: var(--space-16); }
  .home-hero { min-height: 90dvh; }
}

/* ══ Selected Works carousel ═════════════════════════════════════════════
   Phones: edge-to-edge swipe carousel, cards snap to the left.
   ≥720px: a centred "gallery" carousel in the spirit of a product-reel — the active
   work sits in the middle at full strength, its neighbours peek in equally from both
   screen edges at full size but quieter, and only the active one wears the matte (as on the
   piece page). It advances by itself every few seconds (config: home.carouselAutoplay) and
   stands still on hover/focus. Clickable dots, clicking a neighbour and ← → keys also move it. The page itself never scrolls sideways: <main> clips
   the full-bleed track (see main.has-bleed). */
.selected-works {
  --card-w: min(80dvw, 320px);
  position: relative;                     /* card.offsetLeft is measured from here */
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: var(--space-2) var(--space-4);
  align-items: flex-start;
  overscroll-behavior-x: contain;
}
.selected-works::-webkit-scrollbar { display: none; }
.selected-works > .piece-card { flex: 0 0 var(--card-w); scroll-snap-align: start; }
.selected-works .piece-card__image { aspect-ratio: auto; }
.selected-works .piece-card__image img {
  width: 100%; height: auto;
  max-height: 60dvh;
  object-fit: cover;
}
.selected-works:has(> :only-child) { justify-content: center; overflow: visible; }
.selected-works:has(> :only-child) > .piece-card { flex: 0 0 var(--card-w); }

@media (min-width: 720px) {
  .selected-works {
    --card-w: clamp(340px, 40vw, 560px);          /* the matte; the artwork inside is ~86% of this */
    --pad: calc(var(--card-w) * 0.07);
    --edge: calc((100vw - var(--card-w)) / 2);    /* lets the first/last card reach the middle */
    width: 100vw;                                 /* bleed to both screen edges, centred on the column */
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--edge);
    scroll-padding-inline: var(--edge);
    padding-block: var(--space-6);
    gap: var(--space-4);
    align-items: center;
  }
  .selected-works > .piece-card {
    flex: 0 0 var(--card-w);
    box-sizing: border-box;
    scroll-snap-align: center;
    scroll-snap-stop: always;                     /* one work per step, never skipping */

    /* Every slide reserves the same matte so nothing ever reflows or shrinks; only the active
       one shows it (same mat, border and shadow as the piece page), the rest sit quietly. */
    padding: var(--pad);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
    opacity: 0.55;
    transition:
      opacity          var(--dur-slow) var(--ease-calm),
      color            var(--dur-slow) var(--ease-calm),
      background-color var(--dur-slow) var(--ease-calm),
      border-color     var(--dur-slow) var(--ease-calm),
      box-shadow       var(--dur-slow) var(--ease-calm);
  }
  .selected-works > .piece-card.is-active {
    opacity: 1;
    /* The mat is white in both themes, so the text on it must be its light-theme ink too: a
       light colour scheme on the card makes every token inside (title, year, heart) resolve to
       its light value, instead of the page's light-on-dark text landing on white paper. */
    color-scheme: light;
    color: var(--text);
    background: var(--mat);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
  }
  .selected-works > .piece-card:not(.is-active):hover { opacity: 0.85; }
  .selected-works .piece-card__image { aspect-ratio: 1 / 1; }
  .selected-works .piece-card__image img { height: 100%; max-height: none; }
  .selected-works:has(> :only-child) { padding-inline: 0; }
  .selected-works:has(> :only-child) > .piece-card {
    opacity: 1; color-scheme: light; color: var(--text);
    background: var(--mat); border-color: var(--border-strong);
    box-shadow: var(--shadow-2);
  }
}
@media (min-width: 720px) and (prefers-reduced-motion: reduce) {
  .selected-works > .piece-card { transition: none; }
}

@media (max-width: 719px) {
  .selected-works > .piece-card { transition: opacity var(--dur-slow) var(--ease-calm); }
  .selected-works > .piece-card:not(.is-active) { opacity: 0.9; }
}

/* controls:  ( • ▬ • • ) */
.selected-works__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.selected-works__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  width: fit-content;
}
.selected-works__dot {
  position: relative;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 25%, transparent);
  flex: none;
  transition: width var(--dur-base) var(--ease-calm), background-color var(--dur-base) var(--ease-calm);
}
.selected-works__dot::before { content: ''; position: absolute; inset: -9px -4px; }   /* bigger hit area */
.selected-works__dot.is-active { width: 22px; background: var(--accent); }

/* ══ Piece card ══════════════════════════════════════════════════════════ */
.piece-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.piece-card__image {
  aspect-ratio: 1 / 1;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.piece-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-calm);
}
.piece-card:hover .piece-card__image img { transform: scale(1.02); }

/* While a native dropdown is in use (see installPickGuard) nothing under it may take a tap. */
html.is-picking main a,
html.is-picking main .piece-card,
html.is-picking main .wishlist-heart { pointer-events: none; }

/* Stretched link: the title link's ::after covers the whole card, so the card is clickable
   everywhere, while the heart (a sibling of the link) sits above it and stays its own button. */
.piece-card, .update-card { position: relative; }
.piece-card__link, .update-card__link { color: inherit; text-decoration: none; }
.piece-card__link::after, .update-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.piece-card .wishlist-heart, .update-card .wishlist-heart { position: relative; z-index: 2; }
/* The focus ring belongs to the whole card, not to the title text. */
.piece-card__link:focus-visible, .update-card__link:focus-visible { outline: none; }
.piece-card:has(.piece-card__link:focus-visible),
.update-card:has(.update-card__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.piece-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: stretch;
  text-align: left;
}
.piece-card__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.piece-card__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.piece-card__meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--text-muted);
}

/* ══ Updates ════════════════════════════════════════════════════════════ */
.updates-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.updates-hero > * { height: 100%; }
@media (min-width: 720px) {
  .updates-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .updates-hero:has(> :only-child) {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
  }
}
.updates-rows {
  width: 100%;
  max-width: var(--column);
  margin-inline: auto;
  margin-top: var(--space-10);
  display: grid;
}

.journal-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--dur-base) var(--ease-calm),
              border-color     var(--dur-base) var(--ease-calm);
}
.journal-hero:hover {
  background: color-mix(in srgb, var(--surface-sunken), var(--text) 4%);
  border-color: var(--text-muted);
}

.journal-hero--feature {
  min-height: clamp(280px, 44vh, 460px);
  padding: var(--space-12) var(--space-8);
}
@media (min-width: 510px) {
  .journal-body > .journal-hero {
    width: 85dvw;
    max-width: 100%;
    justify-self: center;
    min-height: calc(clamp(180px, 32vh, 360px));
  }
}
@media (min-width: 920px) {
  .journal-body > .journal-hero {
    width: 75dvw;
    max-width: 100%;
    justify-self: center;
    min-height: calc(clamp(200px, 32vh, 320px));
  }
}

.journal-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--viewer-bg);
}
.journal-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.journal-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 72% at 50% 50%,
    rgb(15 17 17 / var(--scrim-core, 0.72)) 0%,
    rgb(15 17 17 / var(--scrim-core, 0.72)) 30%,
    rgb(15 17 17 / var(--scrim-edge, 0.32)) 100%
  );
}

.journal-hero__content {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  max-width: 60ch;
  margin-inline: auto;
}
.journal-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}
.journal-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.journal-hero__subtitle {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  max-width: 52ch;
  margin: 0;
}

.journal-hero--image,
.journal-hero--image:hover {
  background: var(--viewer-bg);
  border-color: transparent;
  color: var(--viewer-text);
}
.journal-hero--image .journal-hero__eyebrow {
  color: color-mix(in srgb, var(--viewer-text) 90%, transparent);
}
.journal-hero--image .journal-hero__subtitle {
  color: color-mix(in srgb, var(--viewer-text) 95%, transparent);
}
.journal-hero--image .journal-hero__eyebrow,
.journal-hero--image .journal-hero__title,
.journal-hero--image .journal-hero__subtitle {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}

.update-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  align-items: center;
  transition: border-color var(--dur-base) var(--ease-calm);
}
.update-card:hover { border-color: var(--text-muted); }
.update-card__image {
  aspect-ratio: 1 / 1;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 0;
}
.update-card__image img { width: 100%; height: 100%; object-fit: cover; }
.update-card__body {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  min-width: 0;
}
.update-card__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.update-card__title-row {
  display: flex;
  align-items: start;
  gap: var(--space-2);
}
.update-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
}
.update-card__meta { color: var(--text-muted); font-family: var(--font-body); }
.update-card__excerpt {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .update-card { grid-template-columns: 1fr; gap: var(--space-4); align-items: stretch; }
  .update-card__image { aspect-ratio: 4 / 3; }
  .update-card__body  { align-content: start; }
}

.journal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-2);
  align-items: baseline;
  padding-block: var(--space-5);
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.journal-row:last-child { border-bottom: 1px solid var(--hairline); }
.journal-row:hover .journal-row__title { text-decoration: underline; text-underline-offset: 0.2em; }
.journal-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text);
  min-width: 0;
}
.journal-row__meta {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.journal-row__excerpt {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ Sound prompt ════════════════════════════════════════════════════════ */
.sound-prompt {
  position: fixed;
  top: var(--prompt-top);
  right: var(--prompt-right);
  z-index: calc(var(--z-nav) + 2);
  padding: var(--space-2) var(--space-3);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.2;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  animation: toast-in var(--dur-base) var(--ease-calm);
}
.sound-prompt::after {
  content: "";
  position: absolute;
  bottom: -6px; right: var(--prompt-arrow, 18px);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text);
}
/* No room above the button (the header sits at the top of the page): the prompt goes below it. */
.sound-prompt--below::after {
  bottom: auto; top: -6px;
  border-top: 0;
  border-bottom: 6px solid var(--text);
}

/* ══ Archive ═════════════════════════════════════════════════════════════ */
.archive-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-1) var(--section-space);
}
.archive-search { margin-bottom: var(--space-6); }
.search-bar { display: grid; gap: var(--space-3); }
.search-bar__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-calm);
}
.search-bar__form:focus-within { border-color: var(--text-muted); }
.search-bar__input {
  flex: 1; min-width: 0;
  border: 0;
  background: none;
  font: 400 var(--text-md) var(--font-body);
  color: var(--text);
  outline: 0;
  padding-block: var(--space-3);
}
.search-bar__input::placeholder { color: var(--text-muted); }
.search-bar__input::-webkit-search-cancel-button { display: none; }
.search-bar__action {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  color: var(--text-muted);
  flex: none;
  transition: color var(--dur-fast) var(--ease-calm);
}
.search-bar__action:hover { color: var(--text); }
.search-bar__action .icon { width: 16px; height: 16px; }
.search-bar__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.search-suggestion {
  padding: var(--space-1) var(--space-3);
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 400 var(--text-sm) var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm);
}
.search-suggestion:hover {
  border-color: var(--text-muted);
  background: color-mix(in srgb, var(--surface), var(--text) 4%);
}

.archive-tabs {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-3);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.archive-tabs::-webkit-scrollbar { display: none; }

.archive-tab {
  flex: none;
  white-space: nowrap;
  scroll-snap-align: start;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}
.archive-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.archive-tab:hover { color: var(--text); }

.archive-heading {
  position: relative;
  /* Above the cards' stretched links (z-index 1-2) so the layout menu, which opens over the
     first row of cards, is never underneath one. Still well below the nav dock and sheets. */
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.archive-heading__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.archive-heading__count {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.archive-heading__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: 2px;
}

/* ── Sort control ─────────────────────────────────────────────────────── */
.sort-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sort-control__icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: var(--space-2) 34px var(--space-2) var(--space-3);
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 400 var(--text-sm) var(--font-body);
}
.sort-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Layout control ───────────────────────────────────────────────────── */
.layout-control { display: inline-flex; align-items: center; }
.layout-picker { display: none; position: relative; overflow: visible; }

.layout-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.layout-toggle__btn {
  display: grid; place-items: center;
  width: 34px; height: 32px;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease-calm), color var(--dur-fast) var(--ease-calm);
}
.layout-toggle__btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.layout-toggle__btn + .layout-toggle__btn { border-left: 1px solid var(--border-strong); }
.layout-toggle__btn .icon { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .archive-heading {
    gap: var(--space-3);
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .archive-heading__controls { padding-top: 0; }

  .layout-toggle { display: none; }
  .layout-picker { display: block; }

  .layout-picker__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background:
      linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 14px) center / 5px 5px no-repeat,
      linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px) center / 5px 5px no-repeat,
      var(--surface);
    color: var(--text);
    cursor: pointer;
    list-style: none;
  }
  .layout-picker__trigger::-webkit-details-marker { display: none; }
  .layout-picker__trigger .icon { width: 14px; height: 14px; }

  .layout-picker__menu {
    position: absolute;
    top: calc(100% + 4px);
    /* The trigger sits at the left of the controls row, so open to the right of its left edge;
       anchoring to the right edge pushed the menu off-screen on narrow phones. */
    left: 0;
    min-width: 150px;
    max-width: calc(100vw - 2 * var(--gutter, 16px));
    padding: var(--space-1);
    display: grid;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    z-index: 100;
  }
  .layout-picker__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: 400 var(--text-sm) var(--font-body);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
  }
  .layout-picker__item .icon { width: 14px; height: 14px; color: var(--text-muted); }
  .layout-picker__item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .layout-picker__item.is-active { background: color-mix(in srgb, var(--text) 10%, transparent); }
  .layout-picker__item.is-active .icon { color: var(--text); }
}

.archive-list { display: grid; }

.archive-grid[data-layout="masonry"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
  grid-auto-rows: 1px;
  align-items: start;
}
.archive-grid[data-layout="masonry"] .piece-card__image { aspect-ratio: auto; }

@media (min-width: 720px) {
  .archive-grid[data-layout="masonry"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}
@media (min-width: 960px) {
  .archive-grid[data-layout="masonry"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
}

.archive-grid[data-layout="card"] {
  display: grid;
  gap: var(--space-12);
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .archive-grid[data-layout="card"] {
    width: 60dvw;
    max-width: 100%;      /* never overflow the page padding */
  }
}
.archive-grid[data-layout="card"] .piece-card__image { aspect-ratio: auto; }

.archive-grid[data-layout="index"] { display: grid; margin-top: var(--space-4); }
.archive-index-row {
  display: grid;
  grid-template-columns: 60px 1fr 72px;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-calm);
}
.archive-index-row:last-child { border-bottom: 1px solid var(--hairline); }
.archive-index-row:hover { background: color-mix(in srgb, var(--bg), var(--text) 2%); }
.archive-index-row__year {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.archive-index-row__main { display: grid; min-width: 0; }
.archive-index-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.2;
}
.archive-index-row__sub {
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.archive-index-row__thumb {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  justify-self: end;
  position: relative;
}
.archive-index-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.archive-index-row--series .archive-index-row__title { font-style: italic; }

.archive-group {
  margin-block: var(--space-6) 0;
  border-top: 1px solid var(--border);
}
.archive-group:first-of-type { margin-top: var(--space-8); }

.archive-group__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.archive-group__summary::-webkit-details-marker { display: none; }

.archive-group__title {
  flex: 1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  min-width: 0;
}
.archive-group__title--link { text-decoration: none; }
.archive-group__title--link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.archive-group__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

.archive-group__chevron {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-calm);
  flex: none;
}
.archive-group__chevron .icon { width: 16px; height: 16px; }
.archive-group[open] .archive-group__chevron { transform: rotate(180deg); }

.archive-group > .archive-grid { padding-bottom: var(--space-6); }

.empty-state {
  padding: var(--space-12) 0;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  text-align: left;
  color: var(--text-muted);
}
.empty-state__message {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  max-width: none;
  overflow-wrap: anywhere;
  text-wrap: balance;
  margin: 0;
}
.empty-state__cta {
  min-width: 0;
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  white-space: nowrap;
  line-height: 1;
}

.series-marker {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: var(--text);
  pointer-events: none;
}
.series-marker .icon { width: 15px; height: 15px; }
.archive-index-row__thumb .series-marker { right: 3px; bottom: 3px; width: 20px; height: 20px; }
.archive-index-row__thumb .series-marker .icon { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   PIECE PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.piece-page {
  max-width: var(--page-max);
  margin-inline: auto;
}
.piece-page__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 0 var(--space-16);
}
.piece-page__inner > * { margin-top: var(--space-10); }
.piece-page__inner > *:first-child { margin-top: 0; }

.piece-page__inner > .piece-section:has(> .piece-disclosure)
+ .piece-section:has(> .piece-disclosure) {
  margin-top: 0;
}

.piece-page__top {
  display: grid;
  gap: var(--space-4);
  container-type: inline-size;       /* lets the frame size itself to THIS column (cqw) */
}
.piece-page__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* column = container width, never the frame's width */
  gap: var(--space-2);
  justify-items: center;
}

/* The peeks deliberately run past the frame towards the screen edge. Clip them at the
   full-width <main> so they stop at the viewport and the document never becomes wider
   than the screen (no sideways scroll, no phone "shrink to fit", image stays centred). */
main.has-bleed { overflow-x: clip; }

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.crumbs__link { text-decoration: none; }
.crumbs__link:hover { color: var(--text); }
.crumbs__sep { opacity: 0.5; }
.crumbs__current { color: var(--text-muted); }

.crumbs__back {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-calm),
              background-color var(--dur-fast) var(--ease-calm);
}
.crumbs__back:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.crumbs__back .icon { width: 16px; height: 16px; }

.piece-page__series-indicator {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}
.piece-page__series-indicator .piece-page__from { font-style: italic; }
.piece-page__series-indicator .piece-page__series-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.piece-page__series-indicator .piece-page__series-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.piece-page__gallery-frame {
  --matte-w: min(75dvw, 100cqw);
  --matte-h: var(--matte-w);
  --matte-pad: calc(var(--matte-w) * 0.10);
  --peek-w: calc(var(--matte-w) * 0.4);
  --peek-h: calc((var(--matte-h) - 2 * var(--matte-pad)) * 0.92);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--matte-w);
  justify-self: center;
  margin-inline: auto;
}

.piece-page__peek {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--peek-w);
  height: var(--peek-h);
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-calm);
  text-decoration: none;
}
.piece-page__peek:hover { opacity: 1; }
.piece-page__peek img { width: 100%; height: 100%; object-fit: cover; }
.piece-page__peek--prev { right: calc(100% + var(--space-3)); }
.piece-page__peek--next { left:  calc(100% + var(--space-3)); }
.piece-page__peek:empty { display: none; }

.piece-page__matte {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  width: var(--matte-w);
  height: var(--matte-h);
  padding: var(--matte-pad);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--mat);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  cursor: zoom-in;
  transition: box-shadow var(--dur-base) var(--ease-calm);
}
.piece-page__matte:hover { box-shadow: 0 12px 32px rgb(15 17 17 / 0.18); }

/* Video hero (video_url). The play button sits over the matte in the same grid cell. */
.piece-page__gallery-frame > .piece-page__matte,
.piece-page__gallery-frame > .piece-page__play,
.piece-page__gallery-frame > .video-player { grid-area: 1 / 1; }
.piece-page__matte[hidden],
.piece-page__play[hidden] { display: none; }

.piece-page__play {
  z-index: 1;
  place-self: center;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: #fff;
}
.piece-page__play-icon {
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  padding: 20px 16px 20px 24px;
  border-radius: 50%;
  fill: currentColor;
  background: rgb(15 17 17 / 0.6);
  backdrop-filter: blur(6px);
  transition: background-color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-calm);
}
.piece-page__play:hover .piece-page__play-icon { background: rgb(15 17 17 / 0.82); transform: scale(1.05); }
.piece-page__play-note {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgb(15 17 17 / 0.6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

/* Playing: no matte, no peeks. The hero is the video at its own shape, as wide as
   the column allows and never taller than the screen. */
.piece-page__gallery-frame.is-playing { width: 100%; }
.piece-page__gallery-frame.is-playing .piece-page__peek { display: none; }
.video-player {
  position: relative;
  justify-self: center;
  width: min(100cqw, calc(78dvh * var(--video-ratio-n, 1.7778)));
  aspect-ratio: var(--video-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #000;
  box-shadow: var(--shadow-2);
}
.video-player:focus { outline: none; }
.video-player__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-player__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  border-radius: 50%;
  color: #fff;
  background: rgb(15 17 17 / 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .video-player { animation: video-in var(--dur-base) var(--ease-calm); }
}
@keyframes video-in { from { opacity: 0; } }

.piece-page__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 960px) {
  .piece-page__gallery-frame {
    --matte-w: min(130dvh, 80dvw, 100cqw);
    --matte-h: 65dvh;
    --matte-pad: calc(var(--matte-h) * 0.09);
  }
}

.piece-page__specs {
  display: grid;
  gap: var(--space-2);
  max-width: 60ch;
}
.piece-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.piece-page__specs-line {
  display: grid;                   /* one spec per line, no dot separators */
  gap: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-md);
}
.piece-page__specs-line {
  /* Mobile-first: dot-separated on one wrapping line. The bullets come
     from the .meta utility on the same element. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-md);
  margin: 0;
}

@media (min-width: 960px) {
  /* Desktop: one spec per line, bullets suppressed. */
  .piece-page__specs-line {
    display: grid;
    gap: var(--space-1);
  }
  .piece-page__specs-line > * + *::before { content: none; }
}

.piece-section {
  display: grid;
  gap: var(--space-4);
  max-width: 60ch;
}
.series-page__pieces,
.project-page__pieces {
  max-width: none;
}
.piece-section__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.piece-page__statement,
.series-page__statement {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* CTAs: full-width stacked on mobile (Enquire top, Shop Print below),
   side by side on large screens (Enquire left, Shop right). */
.piece-page__ctas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: none;
}
.piece-page__cta { width: 100%; min-width: 0; }

@media (min-width: 720px) {
  .piece-page__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a lone Enquire button shouldn't stretch across both columns */
  .piece-page__ctas:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 50%;
  }
}

/* ── Piece body: title row, then 6:4 columns (stacked on mobile) ── */
.piece-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
}
.piece-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.piece-page__head .wishlist-heart {
  width: 42px;                     /* 1.5x the default 28px */
  height: 42px;
  margin-top: var(--space-2);
  margin-right: -6px;              /* icon sits flush with the right edge */
}
.piece-page__head .wishlist-heart .icon { width: 30px; height: 30px; }  /* 1.5x 20px */

.piece-page__main {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  min-width: 0;
}
.piece-page__aside {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
}
.piece-page__aside.is-empty { display: none; }
.piece-page__aside .piece-section { max-width: none; }
.piece-page__aside .piece-disclosure__summary { padding-block: var(--space-4); }

@media (min-width: 960px) {
  .piece-page__body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    column-gap: var(--space-12);
    row-gap: var(--space-8);
  }
  .piece-page__head { grid-column: 1 / -1; }
}

.piece-page__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}
.piece-page__gallery-item {
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: zoom-in;
  transition: border-color var(--dur-fast) var(--ease-calm);
}
.piece-page__gallery-item:hover { border-color: var(--text-muted); }
.piece-page__gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.piece-page__scale {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  transition: border-color var(--dur-fast) var(--ease-calm);
}
.piece-page__scale:hover { border-color: var(--text-muted); }
.piece-page__scale img { width: 100%; height: auto; display: block; }

.provenance {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  margin: 0;
}
.provenance__event {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  padding-left: var(--space-5);
  position: relative;
}
.provenance__event::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--text);
}
.provenance__event::after {
  content: "";
  position: absolute;
  left: 3.5px; top: 16px;
  width: 1px; bottom: -24px;
  background: var(--hairline);
}
.provenance__event:last-child::after { display: none; }
.provenance__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.provenance__body { display: grid; gap: var(--space-1); min-width: 0; }
.provenance__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.3;
  margin: 0;
}
.provenance__meta { color: var(--text-muted); font-family: var(--font-body); }
.provenance__desc {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  margin: 0;
}
.provenance__source {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  align-self: start;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.provenance__notes {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  margin: 0;
  max-width: 60ch;
}

.piece-page__suggestions {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 640px) {
  .piece-page__suggestions {
    margin-top: var(--space-10);
  }
}

.piece-page__suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}
@media (min-width: 640px) {
  .piece-page__suggestions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SERIES PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.series-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4) var(--section-space);
}
.series-page__inner {
  display: grid;
  gap: var(--space-8);
  max-width: 1200px;
  margin-inline: auto;
}
.series-page__top { display: grid; gap: var(--space-4); }

.series-page__hero {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  aspect-ratio: 16 / 9;
  margin-top: var(--space-2);
}
.series-page__hero-video,
.series-page__hero-image { width: 100%; height: 100%; object-fit: cover; }

.series-page__details {
  display: grid;
  gap: var(--space-3);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.series-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-align: center;
}
.series-page__meta {
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.series-page__status {
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.series-page__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.series-page__gallery-item {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}
.series-page__gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════════════════════════════════════════════════════
   PROJECT PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.project-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4) var(--section-space);
}
.project-page__inner {
  display: grid;
  gap: var(--space-8);
  max-width: 1200px;
  margin-inline: auto;
}
.project-page__top { display: grid; gap: var(--space-4); }

.project-page__details {
  display: grid;
  gap: var(--space-2);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.project-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-align: center;
}
.project-page__meta {
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.project-page__organiser {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}
.project-page__url {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin: 0;
  text-align: center;
}
.project-page__url a {
  color: var(--text-muted);
  text-decoration: none;
}
.project-page__url a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.project-page__description {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text);
  text-wrap: pretty;
  text-align: center;
}

.project-page__collaborators { gap: var(--space-2); }

ul.project-page__collaborator-list {
  list-style: disc;
  padding-inline-start: var(--space-5);
  margin: 0;
}
.project-page__collaborator { color: var(--text); }
.project-page__collaborator::marker { color: var(--text-muted); }
.project-page__collaborator-name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--text);
}
.project-page__collaborator-links {
  display: inline-flex;
  gap: var(--space-3);
  margin-inline-start: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: baseline;
}
.project-page__collaborator-link {
  color: var(--text-muted);
  text-decoration: none;
}
.project-page__collaborator-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.project-page__pieces-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   JOURNAL INDEX
   ═══════════════════════════════════════════════════════════════════════ */

.journal-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-1) var(--section-space);
}
.journal-search { margin-bottom: var(--space-6); }

.journal-tabs {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-3);
  padding-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
}
.journal-tab {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}
.journal-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.journal-tab:hover { color: var(--text); }

.journal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.journal-heading__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.journal-heading__count {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.journal-body { display: grid; gap: var(--space-10); }
.journal-section { display: grid; gap: var(--space-6); }

.journal-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.journal-section__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
}
.journal-section__controls { display: flex; align-items: center; gap: var(--space-3); }

.journal-entry-list {
  display: grid;
  border-top: 1px solid var(--hairline);
}
.journal-entry-row {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
.journal-entry-row:hover .journal-entry-row__title { text-decoration: underline; text-underline-offset: 0.2em; }
.journal-entry-row__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.journal-entry-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
}
.journal-entry-row__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
  max-width: 68ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Journal filters disclosure ───────────────────────────────────────── */
.journal-filters {
  margin-block: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.journal-filters__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--text);
}
.journal-filters__summary::-webkit-details-marker { display: none; }
.journal-filters__summary::after {
  content: "＋";
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-muted);
}
.journal-filters[open] .journal-filters__summary::after { content: "−"; }

.journal-filters__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--warm-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

.journal-filters__body {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-2) var(--space-6);
}
.journal-filters__group { display: grid; gap: var(--space-2); }
.journal-filters__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.journal-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.journal-filter-pill {
  padding: var(--space-1) var(--space-3);
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 400 var(--text-sm) / 1 var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-calm),
              background-color var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm);
}
.journal-filter-pill:hover {
  border-color: var(--text-muted);
  background: color-mix(in srgb, var(--surface), var(--text) 4%);
}
.journal-filter-pill.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.journal-filters__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 320px;
  height: 36px;
  padding: var(--space-2) 34px var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 14px) center / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px) center / 5px 5px no-repeat,
    var(--surface);
  color: var(--text);
  font: 400 var(--text-sm) var(--font-body);
}
.journal-filters__select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   JOURNAL ENTRY
   ═══════════════════════════════════════════════════════════════════════ */

.journal-entry {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4) var(--section-space);
}
.journal-entry__inner {
  display: grid;
  gap: var(--space-8);
  max-width: 720px;
  margin-inline: auto;
}
.journal-entry__top { display: grid; gap: var(--space-4); }
.journal-entry__back {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-calm), background-color var(--dur-fast) var(--ease-calm);
  justify-self: start;
}
.journal-entry__back:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.journal-entry__back .icon { width: 18px; height: 18px; }

.journal-entry__header { display: grid; gap: var(--space-3); }
.journal-entry__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.journal-entry__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.journal-entry__media {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.journal-entry__media img,
.journal-entry__media video {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.journal-entry__media-hero {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: zoom-in;
  transition: border-color var(--dur-fast) var(--ease-calm);
}
.journal-entry__media-hero:hover { border-color: var(--text-muted); }
.journal-entry__media-hero img { width: 100%; display: block; }

.journal-entry__media-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--space-2);
}
.journal-entry__media-thumbs img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.journal-entry__gallery {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}
.journal-entry__thumb {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  transition: opacity var(--dur-fast) var(--ease-calm);
}
.journal-entry__thumb:hover { opacity: 0.85; }
.journal-entry__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.journal-entry__gallery .journal-entry__media-thumbs {
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

.journal-entry__body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--text);
}
.journal-entry__body > * + * { margin-top: 1.1em; }
.journal-entry__body p { max-width: 68ch; }
.journal-entry__body h2,
.journal-entry__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 1.6em;
}
.journal-entry__body a {
  color: var(--text);
  text-underline-offset: 0.2em;
}
.journal-entry__body img,
.journal-entry__body video {
  border-radius: var(--radius-sm);
  margin-block: 1.4em;
}
.journal-entry__body blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  color: var(--text-muted);
  font-style: italic;
}
.journal-entry__body ul,
.journal-entry__body ol {
  padding-inline-start: var(--space-5);
}
.journal-entry__body li + li { margin-top: 0.4em; }

.journal-entry__tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.journal-entry__tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: none;
}
a.journal-entry__tag:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: color-mix(in srgb, var(--surface), var(--text) 4%);
}

.journal-entry__related {
  display: grid;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.journal-entry__related-group { display: grid; gap: var(--space-3); }
.journal-entry__related-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.journal-entry__related-list {
  list-style: disc;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.journal-entry__related-list a {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--text);
}
.journal-entry__related-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.journal-entry__neighbours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.journal-entry__neighbour {
  display: grid;
  gap: var(--space-1);
  text-decoration: none;
  color: inherit;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-calm);
}
.journal-entry__neighbour:hover { border-color: var(--text-muted); }
.journal-entry__neighbour--next { text-align: right; }
.journal-entry__neighbour-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.journal-entry__neighbour-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT + CONTACT
   ═══════════════════════════════════════════════════════════════════════ */

.about-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-12) var(--section-space);
}
.about-page__inner {
  display: grid;
  gap: var(--space-16);
  max-width: 880px;
  margin-inline: auto;
}

.about-map { display: flex; justify-content: center; }
.about-map__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.about-map__link {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}
.about-map__link:hover { color: var(--text); border-color: var(--text-muted); }

.about-section { display: grid; gap: var(--space-8); }
.about-section__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-portrait {
  margin-inline: auto;
  width: clamp(180px, 40vw, 320px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

.about-quote {
  max-width: 60ch;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.about-quote__text { margin: 0; }
.about-quote__source {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.about-statement {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 68ch;
}
.about-statement p + p { margin-top: 1.1em; }

.about-testimonial {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.about-testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: 1.4;
  margin: 0;
}
.about-testimonial__who {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.about-testimonial__name { color: var(--text); }

.about-resume__group { display: grid; gap: var(--space-3); }
.about-resume__group + .about-resume__group { margin-top: var(--space-8); }
.about-resume__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.about-resume__list {
  list-style: disc;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-list { display: grid; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item__summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--text);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary::after {
  content: "＋";
  float: right;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.4;
}
.faq-item[open] .faq-item__summary::after { content: "−"; }
.faq-item__answer {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  max-width: 68ch;
  white-space: pre-line;
}

/* ── Contact: header, form, card ───────────────────────────────────────── */
.about-contact__intro { display: grid; gap: var(--space-2); }
.about-contact__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: 0;
  max-width: 52ch;
}

.about-contact__form-block { display: grid; gap: var(--space-4); }

.about-contact__cards {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}

.contact-card {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.contact-card__location {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.contact-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin: 0;
}
.contact-card__place {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
.contact-card__ask {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  align-content: start;
}
.contact-card__ask p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: 0;
}
.contact-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-inline: calc(var(--space-3) * -1);
}
.contact-card__links .icon-btn {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-calm),
              background-color var(--dur-fast) var(--ease-calm);
}
.contact-card__links .icon-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
@media (min-width: 640px) {
  .contact-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .contact-card__ask {
    justify-items: end;
    text-align: right;
  }
  .contact-card__links {
    justify-content: flex-end;
    margin-inline: 0;
    margin-right: calc(var(--space-3) * -1);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT FORMS (floating label + bottom border)
   ═══════════════════════════════════════════════════════════════════════ */

.c-form { display: grid; gap: var(--space-5); }
.c-form__row { display: grid; gap: var(--space-5); }
@media (min-width: 720px) {
  .c-form__row--split { grid-template-columns: 1fr 1fr; }
}

.c-field {
  position: relative;
  display: block;
  padding-top: var(--space-5);
  cursor: text;
}
.c-field__input {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font: 400 var(--text-md) var(--font-body);
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-bottom-color var(--dur-fast) var(--ease-calm),
              border-bottom-width var(--dur-fast) var(--ease-calm);
}
.c-field__input--area { min-height: 96px; resize: vertical; }
.c-field__input--select {
  cursor: pointer;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 14px) center / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 10px) center / 5px 5px no-repeat,
    transparent;
  padding-right: var(--space-8);
}
.c-field__input:focus,
.c-field__input:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--accent);
}

.c-field__label {
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + var(--space-2));
  color: var(--text-muted);
  font: 400 var(--text-md) var(--font-body);
  pointer-events: none;
  transition: top var(--dur-fast) var(--ease-calm),
              font-size var(--dur-fast) var(--ease-calm),
              color var(--dur-fast) var(--ease-calm);
}
.c-field__input:focus + .c-field__label,
.c-field__input:not(:placeholder-shown) + .c-field__label {
  top: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-form__collab { display: grid; gap: var(--space-5); }

.c-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.c-form__done {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   FULLSCREEN VIEWER
   ═══════════════════════════════════════════════════════════════════════ */

html:has(dialog.viewer[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.viewer {
  position: fixed;
  inset: 0;
  margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none;
  height: 100dvh; max-height: none;
  background: var(--viewer-bg);
  color: var(--viewer-text);
  z-index: var(--z-toast);
  overflow: clip;
  overscroll-behavior: contain;
  touch-action: none;
}
.viewer[open] {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.viewer::backdrop { background: var(--viewer-bg); }

.viewer__stage {
  grid-area: 1 / 1;                /* full screen */
  position: relative;
  min-height: 0;
  overflow: clip;
}
.viewer__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* fits 100dvw on tall screens, 100dvh on wide ones */
  object-position: center;
  display: block;
}

.viewer__close {
  position: absolute;
  top: calc(var(--safe-top) + var(--space-3));
  right: var(--space-3);
  color: var(--viewer-text);
  background: color-mix(in srgb, var(--viewer-bg) 55%, transparent);
  z-index: 3;
}

.viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  color: var(--viewer-text);
  background: color-mix(in srgb, var(--viewer-bg) 55%, transparent);
  transition: background-color var(--dur-fast) var(--ease-calm);
  z-index: 2;
}
.viewer__nav:hover:not(:disabled) { background: color-mix(in srgb, var(--viewer-bg) 85%, transparent); }
.viewer__nav:disabled { display: none; }
.viewer__nav .icon { width: 22px; height: 22px; }
.viewer__nav--prev { left: var(--space-3); }
.viewer__nav--next { right: var(--space-3); }

.viewer__controls {
  position: absolute;
  inset: auto 0 0 0;               /* overlaid on the bottom of the image */
  display: grid;
  gap: var(--space-4);
  padding:
    48px                           /* room for the scrim to fade in */
    var(--content-inset)
    calc(var(--safe-bottom) + var(--space-4));
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
  pointer-events: none;
}
.viewer__controls > * { pointer-events: auto; }

.viewer__slider {
  position: relative;
  height: 56px;
}
.viewer__slider[hidden] { display: none; }

.viewer__slider-thumbs,
.viewer__slider-dots {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  transition: opacity 400ms var(--ease-calm);
}
.viewer__slider-thumbs {
  gap: var(--space-2);
  max-width: calc(100vw - 2 * var(--content-inset));
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.viewer__slider-thumbs::-webkit-scrollbar { display: none; }

.viewer__slider-dots {
  gap: 6px;
  opacity: 0;
  pointer-events: none;
}
.viewer__slider.is-idle .viewer__slider-dots { opacity: 1; pointer-events: auto; }
.viewer__slider.is-idle .viewer__slider-thumbs { opacity: 0; pointer-events: none; }

.viewer__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-calm),
              border-color var(--dur-fast) var(--ease-calm);
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer__thumb:hover { opacity: 0.85; }
.viewer__thumb.is-active { opacity: 1; border-color: var(--viewer-text); }

.viewer__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.35);
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-calm),
              background-color var(--dur-base) var(--ease-calm);
}
.viewer__dot.is-active {
  width: 22px;
  background: var(--viewer-text);
}

.viewer__meta {
  display: grid;
  gap: 2px;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.viewer__position {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--viewer-muted);
  margin: 0;
}
.viewer__position[hidden] { display: none; }
.viewer__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--viewer-text);
  margin: 0;
}
.viewer__specs {
  color: var(--viewer-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.viewer__specs[hidden] { display: none; }

@media (min-width: 720px) {
  .viewer__slider { height: 64px; }
  .viewer__thumb { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ERROR PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.error-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-space);
  min-height: 50dvh;
  display: grid;
  place-items: center;
}
.error-page__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  max-width: 52ch;
}
.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin: 0;
}
.error-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.error-page__message {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: 0;
  max-width: 44ch;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════
   DISCLOSURE (collapsible sections on piece + series pages)
   ═══════════════════════════════════════════════════════════════════════ */

.piece-disclosure { border-top: 1px solid var(--hairline); }
.piece-disclosure__summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.piece-disclosure__summary::-webkit-details-marker { display: none; }
.piece-disclosure__summary::after {
  /* + and − are drawn as bars in one fixed box so they line up exactly */
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.piece-disclosure[open] .piece-disclosure__summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}
.piece-disclosure__body { padding-block: var(--space-2) var(--space-6); }

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH VIEW (morphs from the header search button)
   ═══════════════════════════════════════════════════════════════════════
   Same top-of-main shape as Archive and Journal: bar, then heading, then
   results. No tabs, no layout picker, no sort. Results are sectioned into
   Works (cards), Series (cards) and Journal (rows, like Home).            */

.search-view {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-1) var(--section-space);
}

/* On Home, the header is fixed (not sticky), so <main> sits behind it.
   Nudge the search view down so the bar clears the pills. */
body[data-page="home"] .search-view {
  padding-top: calc(var(--safe-top) + var(--space-16));
}

/* Back chevron lives inside .search-bar__form, before the input, so the
   whole control reads as one rounded box and nothing shifts when text is
   typed. A pill radius matches the input's own visual language; the form's
   existing 16px left padding gives it breathing room. */
.search-view__back {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  margin-left: calc(var(--space-3) * -1);
  border-radius: 999px;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-calm),
              background-color var(--dur-fast) var(--ease-calm);
}
.search-view__back:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.search-view__back .icon { width: 18px; height: 18px; }

.search-view__input { display: block; }

.search-view__heading {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.search-view__heading:empty { display: none; }
.search-view__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.search-view__results {
  display: grid;
  gap: var(--space-10);
  align-content: start;
}

.search-view__section { display: grid; gap: var(--space-4); }
.search-view__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.search-view__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 600px) {
  .search-view__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}
@media (min-width: 960px) {
  .search-view__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.search-view__journal { display: grid; }

.search-view__status,
.search-view__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  padding-block: var(--space-12);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH PAGES (login, signup, account)
   ═══════════════════════════════════════════════════════════════════════ */

.auth-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-16) var(--section-space);
  display: grid;
  justify-items: center;
}
.auth-page__inner {
  width: 100%;
  max-width: 480px;
}

.auth-form { display: grid; gap: var(--space-5); }
.auth-form__header {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.auth-form__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.auth-form__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: 0;
}
.auth-form__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}
.auth-form__actions .btn { min-width: 140px; }

.auth-form__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.auth-form__links a,
.auth-form__link {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.auth-form__links a:hover,
.auth-form__link:hover { text-decoration-thickness: 2px; }
.auth-form__link--muted { color: var(--text-muted); }

.auth-form__error {
  color: var(--error);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0;
  padding: var(--space-3) 0 0;
}
.auth-form__error[hidden] { display: none; }

/* ── Account page ──────────────────────────────────────────────────────── */
.account-page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-16) var(--section-space);
}
.account-page__inner {
  display: grid;
  gap: var(--space-10);
  max-width: 640px;
  margin-inline: auto;
}
.account-header { display: grid; gap: var(--space-2); }
.account-header__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.account-header__email {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  word-break: break-all;
}
.account-section {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}
.account-section__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.account-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.account-role {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   WISHLIST HEART
   ═══════════════════════════════════════════════════════════════════════ */

.wishlist-heart {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  flex: none;
  cursor: pointer;
  transition:
    color     var(--dur-fast) var(--ease-calm),
    transform var(--dur-fast) var(--ease-calm);
}
.wishlist-heart:hover { color: var(--accent); }
.wishlist-heart:active { transform: scale(0.94); }
.wishlist-heart .icon { width: 20px; height: 20px; }
.wishlist-heart.is-wishlisted { color: var(--accent); }
.wishlist-heart:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCOUNT: saved pieces grid
   ═══════════════════════════════════════════════════════════════════════ */

.account-wishlist { display: grid; gap: var(--space-4); }
.account-wishlist__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .account-wishlist__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* ══ First-load skeletons ═════════════════════════════════════════════════
   Shown only until the data arrives, in roughly the shape of what replaces them, so a page
   never opens as a blank area with the word "Loading". */
.archive-skeleton {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-top: var(--space-4);
}
.archive-skeleton__tile { aspect-ratio: 1 / 1; }
.archive-skeleton[data-layout="card"] { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.archive-skeleton[data-layout="index"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.archive-skeleton[data-layout="index"] .archive-skeleton__tile { aspect-ratio: auto; height: 44px; }

.journal-skeleton { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.journal-skeleton__hero { aspect-ratio: 16 / 9; max-height: 60dvh; width: 100%; }
.journal-skeleton__row { height: 64px; }

.piece-page__matte.is-skeleton {
  cursor: default;
  box-shadow: none;
  border-color: var(--border);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;          /* the .skeleton shimmer, which the matte's own background would otherwise cancel */
}