/* =============================================================================
   Components — the reusable kit. Every piece here is documented live on
   /styleguide. Class prefix `aft-` keeps the system namespaced and greppable.
   Depends on tokens.css + base.css.
   ========================================================================== */

/* --- Artist profile ----------------------------------------------------- */
.aft-artist-profile { padding-block: var(--sp-6) var(--sp-9); }
.aft-artist-profile__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-6);
}
.aft-artist-profile__gallery,
.aft-artist-profile__details,
.aft-artist-profile__body { min-width: 0; }
.aft-artist-profile__gallery {
  position: sticky;
  top: var(--sticky-content-top);
}
.aft-artist-profile__details {
  display: grid;
  gap: var(--sp-6);
}
.aft-artist-profile__header { display: grid; gap: var(--sp-3); }
.aft-artist-profile__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.aft-artist-profile__host { font-size: var(--fs-md); }
.aft-artist-profile__location {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--text-muted);
}
.aft-artist-profile__section {
  border-top: var(--bw) solid var(--border);
  padding-top: var(--sp-5);
}
.aft-artist-profile__section + .aft-artist-profile__section { margin-top: var(--sp-6); }
.aft-artist-profile__section > .aft-eyebrow { margin-bottom: var(--sp-4); }
.aft-artist-profile__categories { display: grid; gap: var(--sp-4); }
.aft-artist-profile__categories dd { margin-top: var(--sp-2); }
.aft-artist-profile__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.aft-artist-profile__categories .aft-tag {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.aft-artist-profile__aside {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  min-width: 0;
}
.aft-artist-profile__aside :is(#artist-contact, .aft-artist-contact) { display: contents; }
.aft-artist-profile__aside .aft-artist-contact > form { grid-column: 1; grid-row: 1; }
.aft-artist-profile__aside .aft-save-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}
.aft-artist-profile__aside .aft-application-panel,
.aft-artist-contact__details { grid-column: 1 / -1; }
.aft-artist-contact__details {
  grid-row: 2;
  padding: var(--sp-5);
  background: var(--bg-alt);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
}
.aft-artist-profile__aside .aft-btn { min-height: var(--size-control); }
.aft-artist-profile__aside .aft-artist-save-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.aft-artist-profile__aside .aft-bookmark {
  width: auto;
  height: auto;
  padding: var(--sp-2) var(--sp-5);
  border: var(--bw) solid var(--c-ink);
  gap: var(--sp-2);
}
.aft-artist-profile__aside .aft-bookmark:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
}
.aft-artist-profile__aside .aft-bookmark:active { transform: none; }
.aft-artist-profile__aside .aft-bookmark__icon { width: var(--sp-5); height: var(--sp-5); }
@media (max-width: 63.999rem) {
  .aft-artist-profile__layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .aft-artist-profile__details { display: contents; }
  .aft-artist-profile__header { grid-row: 1; }
  .aft-artist-profile__gallery { grid-row: 2; position: static; }
}
@media (max-height: 48rem) {
  .aft-artist-profile__gallery { position: static; }
}

/* --- Opportunity brief and application panel ---------------------------- */
.aft-opportunity-detail {
  padding-block: var(--sp-6) var(--sp-9);
}
.aft-opportunity-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--application-panel-width);
  gap: var(--sp-7) var(--sp-8);
  margin-top: var(--sp-7);
  align-items: start;
}
.aft-opportunity-detail__header {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
}
.aft-opportunity-detail__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.aft-opportunity-detail__host {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.aft-opportunity-detail__location {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.aft-opportunity-detail__aside {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: var(--sticky-content-top);
  min-width: 0;
}
.aft-opportunity-detail__body { min-width: 0; }
.aft-opportunity-detail__section {
  border-top: var(--bw) solid var(--border);
  padding-top: var(--sp-6);
}
.aft-opportunity-detail__section + .aft-opportunity-detail__section {
  margin-top: var(--sp-7);
}
.aft-opportunity-detail__section > :is(h2, h3, h4) {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-4);
  letter-spacing: var(--tracking-snug);
}
.aft-opportunity-detail__categories { display: grid; gap: var(--sp-5); }
.aft-opportunity-detail__categories dd { margin-top: var(--sp-2); }
.aft-opportunity-detail__categories .aft-tag {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.aft-prose { line-height: var(--lh-relaxed); overflow-wrap: anywhere; }
.aft-prose > * + * { margin-top: var(--sp-5); }
.aft-prose a { text-decoration: underline; text-underline-offset: var(--sp-1); }
.aft-prose a:hover { color: var(--accent-text); }
.aft-prose ul, .aft-prose ol { padding-left: var(--sp-5); }
.aft-prose ul { list-style: disc; }
.aft-prose ol { list-style: decimal; }

.aft-application-panel {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  color: var(--c-on-ink);
  background: var(--c-ink);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-magenta);
  overflow-wrap: anywhere;
}
.aft-application-panel__heading {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--c-lime);
}
.aft-application-panel__facts > div {
  padding-block: var(--sp-4);
  border-top: var(--bw) solid var(--c-on-ink-line);
}
.aft-application-panel__facts > div:last-child { padding-bottom: 0; }
.aft-application-panel__facts dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-on-ink-muted);
  margin-bottom: var(--sp-2);
}
.aft-application-panel__facts dd { font-size: var(--fs-sm); }
.aft-application-panel__facts .aft-application-panel__deadline {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.aft-application-panel__amount {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}
.aft-application-panel__note {
  color: var(--c-on-ink-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}
.aft-application-panel__actions .aft-btn--secondary {
  color: var(--c-on-ink);
  border-color: var(--c-on-ink);
}
@media (max-width: 56rem) {
  .aft-opportunity-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--sp-6);
    gap: var(--sp-6);
  }
  .aft-opportunity-detail__header { gap: var(--sp-4); }
  .aft-opportunity-detail__aside { grid-column: auto; grid-row: auto; position: static; }
  .aft-application-panel { padding: var(--sp-5); }
}
@media (max-height: 48rem) {
  .aft-opportunity-detail__aside { position: static; }
}

/* --- Eyebrow / kicker label (Space Mono) --------------------------------- */
.aft-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.aft-eyebrow--magenta { color: var(--accent-text); }
.aft-eyebrow--lime { color: var(--c-lime); }
.aft-eyebrow::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
.aft-eyebrow--bare::before { display: none; }

/* Expressive marketing kicker. Size remains a separate decision. */
.aft-eyebrow--expressive {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-snug);
  word-spacing: 0.3em;
}
/* Size modifier only: it does not silently change the label's type role. */
.aft-eyebrow--lg {
  font-size: var(--fs-eyebrow-lg);
}
/* At this size + weight, bright magenta clears WCAG's 3:1 large-text
   threshold (~3.6:1 on white) — the darker --accent-text ink variant is
   only needed for small eyebrow text. */
.aft-eyebrow--lg.aft-eyebrow--magenta { color: var(--c-magenta); }

/* --- Buttons and text actions ------------------------------------------- */
.aft-btn {
  --_action-accent: var(--c-magenta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.5em;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  word-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 calc(var(--action-edge) * -1) 0 var(--_action-accent);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-align: center;
}
.aft-btn:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--lift) var(--lift) 0 var(--_action-accent),
              inset 0 calc(var(--action-edge) * -1) 0 var(--_action-accent);
}
.aft-btn:active {
  transform: none;
  box-shadow: inset 0 calc(var(--action-edge) * -1) 0 var(--_action-accent);
}
.aft-btn:disabled,
.aft-btn[aria-disabled="true"] {
  color: var(--text-faint);
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: inset 0 calc(var(--action-edge) * -1) 0 var(--c-line);
}
.aft-btn--primary { background: var(--c-white); }
.aft-btn--primary-ink {
  color: var(--c-white);
  background: var(--c-ink);
}
.aft-btn--secondary {
  background: transparent;
  box-shadow: none;
}
.aft-btn--secondary:hover { box-shadow: var(--lift) var(--lift) 0 var(--_action-accent); }
.aft-btn--secondary:active { box-shadow: none; }
.aft-btn--inverse {
  --_action-accent: var(--c-lime);
  color: var(--c-ink);
  background: var(--c-white);
}

.aft-text-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-ink);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--bw);
  text-underline-offset: var(--sp-1);
  transition: text-decoration-color var(--dur) var(--ease);
}
.aft-text-action:hover { text-decoration-color: var(--c-magenta); }
button.aft-text-action {
  background: none;
  border: 0;
  cursor: pointer;
}
.aft-text-action--brush::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: var(--action-edge);
  background: var(--c-magenta);
  clip-path: polygon(0 35%, 15% 5%, 38% 28%, 62% 0, 82% 30%, 100% 12%,
                     98% 85%, 74% 65%, 45% 100%, 20% 70%, 2% 92%);
}
.aft-text-action--lime::after { background: var(--c-lime); }

/* Sizes */
.aft-btn--lg { padding: 1.05em 2em; font-size: var(--fs-base); }
.aft-btn--sm { padding: 0.6em 1.1em; font-size: var(--fs-xs); }
.aft-btn--block { display: flex; width: 100%; }

/* --- Icon actions, bookmark and List picker ------------------------------ */
.aft-icon-button {
  /* A bare icon: the 44px box is the tap target, not a visible frame. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control);
  height: var(--size-control);
  padding: var(--sp-2);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-touch-callout: none;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.aft-icon-button:hover { color: var(--accent-text); transform: scale(1.08); }
.aft-icon-button:active { transform: scale(0.92); }
.aft-bookmark.is-saved { color: var(--accent-text); }
.aft-icon-button__icon,
.aft-bookmark__icon { width: 100%; height: 100%; }
.aft-bookmark__icon { fill: currentColor; }
/* On the ink At a glance panel, ink-on-ink made the icons vanish. */
.aft-application-panel__actions .aft-icon-button { color: var(--c-on-ink); }
.aft-application-panel__actions .aft-icon-button:hover,
.aft-application-panel__actions .aft-bookmark.is-saved { color: var(--c-lime); }

.aft-save-list-picker {
  width: min(var(--save-list-picker-width), calc(100vw - var(--sp-8)));
  max-height: calc(100dvh - var(--sp-8));
  padding: var(--sp-4);
  color: var(--c-ink);
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ink);
}
.aft-save-list-picker::backdrop {
  background: color-mix(in srgb, var(--c-ink) 55%, transparent);
}
@media (min-width: 40rem) {
  dialog.aft-save-list-picker {
    position: fixed;
    inset: auto;
    top: var(--save-list-picker-top, var(--sp-4));
    left: var(--save-list-picker-left, var(--sp-4));
    margin: 0;
  }
  dialog.aft-save-list-picker::backdrop {
    background: color-mix(in srgb, var(--c-ink) 8%, transparent);
  }
}
@media (max-width: 39.999rem) {
  dialog.aft-save-list-picker {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - var(--sp-5));
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 calc(var(--offset) * -1) 0 0 var(--c-magenta);
  }
  dialog.aft-save-list-picker[open] {
    animation: aft-save-list-picker-in var(--dur) var(--ease);
  }
}
@keyframes aft-save-list-picker-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.aft-save-list-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.aft-save-list-picker__header :is(h2, h3) { font-size: var(--fs-md); }
.aft-save-list-picker__close,
.aft-save-toast__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control);
  height: var(--size-control);
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-lg);
}
.aft-save-list-picker__options { display: grid; }
.aft-save-list-picker__options form,
.aft-save-list-picker__new { margin: 0; }
.aft-save-list-picker__option {
  width: 100%;
  padding: var(--sp-2);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.aft-save-list-picker__option:hover { background: var(--c-paper-2); }
.aft-save-list-picker__new {
  display: grid;
  /* minmax(0, …) rather than the implicit auto track: Firefox reports a text
     input's intrinsic width as its min-content, which otherwise widened the
     track (and the row) past the picker. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--bw) solid var(--c-line);
}
.aft-save-list-picker__new label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.aft-save-list-picker__new-row { display: flex; gap: var(--sp-2); }
.aft-save-list-picker__new-row input[type="text"] { flex: 1 1 0; width: 0; min-width: 0; }
.aft-save-list-picker__new-row input[type="submit"] { flex: none; }

.aft-save-toast-region {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: calc(var(--z-header) + 1);
  width: min(var(--save-toast-width), calc(100vw - var(--sp-8)));
}
.aft-save-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-on-ink);
  background: var(--c-ink);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-magenta);
}
.aft-save-toast__action {
  padding: 0;
  color: var(--c-lime);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: var(--sp-1);
}
.aft-save-toast__dismiss {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin-left: auto;
  color: var(--c-on-ink);
}

/* --- Brush stroke accent -------------------------------------------------- */
/* A thin, hand-drawn highlighter/paint swipe under one accent word. Wrap the
   word in <span class="aft-brush"> (magenta) or add --lime for use on dark
   backgrounds. */
.aft-brush {
  position: relative;
  display: inline-block;
}
.aft-brush::after {
  content: "";
  position: absolute;
  left: 4%; right: 8%; bottom: -0.16em;
  height: 0.135em;
  background: var(--c-magenta);
  clip-path: polygon(
    0% 30%, 10% 10%, 25% 0%, 45% 15%, 65% 25%, 85% 35%, 100% 45%,
    100% 55%, 85% 60%, 65% 68%, 45% 78%, 25% 88%, 10% 95%, 0% 70%
  );
  transform: rotate(0.5deg);
}
.aft-brush::before {
  content: "";
  position: absolute;
  right: -12%; bottom: -0.2em;
  width: 1.4em; height: 0.3em;
  background:
    radial-gradient(circle, var(--c-magenta) 45%, transparent 46%) 8% 35% / 0.08em 0.08em no-repeat,
    radial-gradient(circle, var(--c-magenta) 45%, transparent 46%) 42% 65% / 0.055em 0.055em no-repeat,
    radial-gradient(circle, var(--c-magenta) 45%, transparent 46%) 72% 15% / 0.04em 0.04em no-repeat,
    radial-gradient(circle, var(--c-magenta) 45%, transparent 46%) 95% 50% / 0.03em 0.03em no-repeat;
}
.aft-brush--lime::after,
.aft-brush--lime::before { background-color: var(--c-lime); }
.aft-brush--lime::before {
  background:
    radial-gradient(circle, var(--c-lime) 45%, transparent 46%) 8% 35% / 0.08em 0.08em no-repeat,
    radial-gradient(circle, var(--c-lime) 45%, transparent 46%) 42% 65% / 0.055em 0.055em no-repeat,
    radial-gradient(circle, var(--c-lime) 45%, transparent 46%) 72% 15% / 0.04em 0.04em no-repeat,
    radial-gradient(circle, var(--c-lime) 45%, transparent 46%) 95% 50% / 0.03em 0.03em no-repeat;
}

/* --- Tags / category chips (Space Mono) ---------------------------------- */
.aft-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.34em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-paper-2);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.aft-tag--magenta { background: var(--c-magenta); color: var(--c-ink); }
.aft-tag--lime    { background: var(--c-lime);    color: var(--c-ink); }
.aft-tag--ink     { background: var(--c-ink);     color: var(--c-white); }
.aft-tag--soft    { background: var(--c-magenta-soft); border-color: var(--c-magenta); color: var(--accent-text); }

/* Interactive filter chip (button/checkbox styled) */
.aft-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5em 1em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  background: var(--c-white);
  border: 2px solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aft-chip:hover { border-color: var(--c-ink); }
.aft-chip[aria-pressed="true"], .aft-chip.is-active {
  background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink);
}

/* --- Cards --------------------------------------------------------------- */
.aft-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Lift-on-hover card — gains its neon shadow when you reach for it. */
.aft-card--lift { cursor: pointer; }
.aft-card--lift:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--shadow-magenta);
}
.aft-card--shadow    { box-shadow: var(--shadow-ink); }
.aft-card--shadow-magenta { box-shadow: var(--shadow-magenta); }
.aft-card--shadow-lime    { box-shadow: var(--shadow-lime); }
.aft-card--ink { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }

/* --- Concise carousel ---------------------------------------------------- */
.aft-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.aft-carousel__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--sp-1);
  scrollbar-width: none;
}
.aft-carousel__track::-webkit-scrollbar { display: none; }
.aft-carousel__slide {
  flex: 0 0 var(--carousel-card-width);
  scroll-snap-align: start;
}
.aft-carousel__slide .aft-carousel-card { height: 100%; }
.aft-carousel-card { position: relative; min-height: var(--carousel-card-min-height); }
.aft-carousel-card__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}
.aft-carousel-card__title-link { color: inherit; text-decoration: none; }
.aft-carousel-card__title-link:hover,
.aft-carousel-card__title-link:focus-visible { color: var(--accent-text); }
.aft-carousel-card__title-link::after { content: ""; position: absolute; inset: 0; }
.aft-carousel-card__foot { margin-top: auto; }
.aft-carousel-card__location { font-size: var(--fs-sm); color: var(--text-muted); }
.aft-carousel-card__deadline {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.aft-carousel-card__tag { margin-top: var(--sp-3); }
.aft-carousel__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--size-control);
  height: var(--size-control);
  font-size: var(--fs-lg);
  line-height: 1;
  background: var(--c-white);
  color: var(--c-ink);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.aft-carousel__arrow:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--lift) var(--lift) 0 var(--c-lime);
}

/* --- Featured pair ------------------------------------------------------- */
.aft-featured-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}
.aft-featured-card {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--radius-xl);
}
.aft-featured-card--light {
  background: var(--c-white);
  box-shadow: var(--shadow-magenta);
}
.aft-featured-card--dark {
  background: var(--c-ink);
  color: var(--c-on-ink);
  box-shadow: var(--shadow-lime);
}
.aft-featured-card__media {
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
}
.aft-featured-card__media img { width: 100%; height: 100%; object-fit: cover; }
.aft-featured-card__meta { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.aft-featured-card--light .aft-featured-card__meta { color: var(--text-muted); }
.aft-featured-card--dark .aft-featured-card__meta { color: var(--c-on-ink-muted); }
.aft-featured-card__status { margin-top: var(--sp-4); }
@media (max-width: 56rem) { .aft-featured-pair { grid-template-columns: 1fr; } }
@media (max-width: 34rem) { .aft-featured-card { grid-template-columns: 1fr; } }

/* --- Ordered process steps ---------------------------------------------- */
.aft-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  text-align: center;
}
.aft-process-step__icon {
  display: grid;
  place-items: center;
  width: var(--size-process-icon);
  height: var(--size-process-icon);
  margin-inline: auto;
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: 50%;
}
.aft-process-step:nth-child(odd) .aft-process-step__icon { color: var(--c-magenta-ink); }
.aft-process-step:nth-child(even) .aft-process-step__icon { color: var(--c-lime-ink); }
.aft-process-step__icon svg { width: 1.75rem; height: 1.75rem; }
.aft-process-step h3 { margin-top: var(--sp-4); font-size: var(--fs-base); }
.aft-process-step p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 56rem) { .aft-process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .aft-process { grid-template-columns: 1fr; } }

/* --- Panels (the big 50/50 blocks) --------------------------------------- */
.aft-panel {
  position: relative;
  background: var(--c-white);
  border: var(--bw-thick) solid var(--c-ink);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  height: 100%;
}

/* --- Compact stats (semantic definition lists) --------------------------- */
.aft-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--bw) solid var(--border);
}
.aft-stats--summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aft-stats dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.aft-stats dd {
  margin-top: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

/* --- Field / form controls ----------------------------------------------- */
.aft-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.aft-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.aft-input,
.aft-textarea,
.aft-select {
  width: 100%;
  padding: 0.8em 1em;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: var(--c-white);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius);
  line-height: var(--lh-snug);
  transition: box-shadow var(--dur) var(--ease);
}
/* A native select renders shorter than a text input at the same padding;
   dropping its chrome lets the shared box model line the two up. */
.aft-select {
  appearance: none;
  padding-right: 2.75em;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230b0b0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1.1em center / 0.75em no-repeat;
}
.aft-input::placeholder, .aft-textarea::placeholder { color: var(--text-faint); }
.aft-input:focus-visible,
.aft-textarea:focus-visible,
.aft-select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-magenta-sm);
}
.aft-textarea { min-height: 7rem; resize: vertical; }
.aft-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.aft-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
/* File inputs keep the native control (it announces the chosen files) but
   wear the secondary button. */
input[type="file"] {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
input[type="file"]::file-selector-button {
  margin-right: var(--sp-3);
  padding: 0.6em 1.1em;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease);
}
input[type="file"]:enabled::file-selector-button:hover {
  box-shadow: var(--lift) var(--lift) 0 var(--c-magenta);
}
input[type="file"]:disabled::file-selector-button {
  color: var(--text-faint);
  border-color: var(--c-line);
  cursor: not-allowed;
}

/* --- Grouped form choices ------------------------------------------------ */
.aft-social-fields,
.aft-contact-preference {
  padding: 0;
  border: 0;
}
.aft-social-fields legend,
.aft-contact-preference legend {
  font-weight: var(--fw-heavy);
  margin-bottom: var(--sp-2);
}
.aft-radio-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}
.aft-radio-row input { accent-color: var(--c-magenta); }

/* --- Facet choices -------------------------------------------------------
   Each option is a toggle chip: the checkbox is visually hidden and the
   label carries its state. A chip's width never changes between states (no
   weight change, a fixed-width indicator), so toggling one never reflows its
   neighbours. */
.aft-facet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  margin: 0;
  padding: var(--sp-5) 0 0;
  border: 0;
  border-top: var(--bw) solid var(--c-ink);
}
.aft-facet__legend {
  float: left; /* a floated legend is laid out as content, not on the border */
  width: 100%;
  padding: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-snug);
}
.aft-facet__hint {
  margin-top: calc(var(--sp-2) * -1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.aft-facet__tally {
  margin-left: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 1px solid currentColor;
}
.aft-facet.is-full .aft-facet__tally { color: var(--accent-text); }

/* --- Collapsible sections ------------------------------------------------
   A stack of native <details>, each closed to one row: its title, then what
   is already picked inside it, so a long form reads as a short checklist.
   The rule between rows is the one .aft-facet draws on its own, moved up to
   the row so it stays put whether the section is open or not. */
.aft-collapsible { border-top: var(--bw) solid var(--c-ink); }
.aft-collapsible__summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.aft-collapsible__summary::-webkit-details-marker { display: none; }
/* Points right while closed and turns down to the content when opened. */
.aft-collapsible__summary::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease);
}
.aft-collapsible[open] > .aft-collapsible__summary::before {
  transform: rotate(45deg) translateY(-25%);
}
.aft-collapsible__summary:focus-visible {
  outline: 2px solid var(--c-magenta);
  outline-offset: 2px;
}
.aft-collapsible__title {
  flex: none;
  font-size: var(--fs-md);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-snug);
}
.aft-collapsible__picks {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Open, the chips below already show the picks. */
.aft-collapsible[open] .aft-collapsible__picks { visibility: hidden; }
/* The gap below the content sits on the facet, not the body: the body is
   the grid item the slide shrinks to zero, and padding can't shrink. */
.aft-collapsible__body > .aft-facet {
  padding: 0 0 var(--sp-5);
  border-top: 0;
}
/* The hint's negative margin tucks it under a visible legend; here the
   summary is the heading, so it would only pull the hint under the clip. */
.aft-collapsible__body .aft-facet__hint { margin-top: 0; }
/* The section slides open and shut by growing a one-row grid from 0fr to
   1fr, which animates in every engine, unlike a height to `auto`. The
   discrete content-visibility transition keeps the closed content rendered
   until the slide finishes, and hides it (and its chips from the tab order)
   once it has. Its contents also fade in on open, which is all a browser
   without ::details-content gets. base.css's reduced-motion override never
   reaches ::details-content, so the slide opts in to motion here instead.
   The vertical-only clip keeps chip shadows and focus rings at the sides. */
@media (prefers-reduced-motion: no-preference) {
  .aft-collapsible[open] > .aft-collapsible__body {
    animation: aft-refinement-in var(--dur) var(--ease);
  }

  @supports selector(::details-content) {
    .aft-collapsible::details-content {
      display: grid;
      grid-template-rows: 0fr;
      overflow-x: visible;
      overflow-y: clip;
      transition:
        grid-template-rows var(--dur) var(--ease),
        content-visibility var(--dur) allow-discrete;
    }
    .aft-collapsible[open]::details-content { grid-template-rows: 1fr; }
    .aft-collapsible__body { min-height: 0; }
  }
}

.aft-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.aft-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.95em 0.5em 0.75em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  background: var(--c-white);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
/* Plus when off, check when on — same box either way. */
.aft-choice::before {
  content: "";
  flex: 0 0 auto;
  width: 0.8em;
  height: 0.8em;
  background: currentColor;
  opacity: 0.45;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.aft-choice:hover {
  border-color: var(--c-ink);
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--lift) var(--lift) 0 var(--c-ink);
}
.aft-choice:active { transform: none; box-shadow: none; }
.aft-choice:has(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.aft-choice:has(:checked) {
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
  box-shadow: var(--lift) var(--lift) 0 var(--c-magenta);
}
.aft-choice:has(:checked):hover {
  box-shadow: calc(var(--lift) * 2) calc(var(--lift) * 2) 0 var(--c-magenta);
}
.aft-choice:has(:checked)::before {
  opacity: 1;
  color: var(--c-lime);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* At a facet's cap the unchosen chips step back; hover stays still so they
   don't invite a click that can't land. */
.aft-choice:has(:disabled) {
  color: var(--text-faint);
  background: var(--bg-alt);
  border-color: var(--c-line);
  cursor: not-allowed;
}
.aft-choice:has(:disabled):hover { transform: none; box-shadow: none; }
.aft-choice:has(:disabled)::before { opacity: 0.25; }
/* Leaves read one step quieter than the Branches that disclose them. */
.aft-choice--leaf {
  padding-block: 0.38em;
  font-size: var(--fs-xs);
}
.aft-choice--leaf:has(:checked) {
  color: var(--accent-text);
  background: var(--c-magenta-soft);
  border-color: var(--c-magenta);
  box-shadow: none;
}
.aft-choice--leaf:has(:checked)::before { color: var(--accent-text); }
.aft-choice--opt-out { border-style: dashed; }

/* A radio set drawn as choice chips, nested inside a larger fieldset. */
.aft-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.aft-choice-group > legend { float: left; width: 100%; padding: 0; }

/* Refinement groups sit below all the Branch chips, in taxonomy order. */
.aft-refinements {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.aft-refinements:has(.aft-refinement:not([hidden])) { margin-top: var(--sp-2); }
.aft-refinement {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  margin: 0;
  padding: var(--sp-4);
  background: var(--bg-alt);
  border: 0;
  border-left: var(--bw-thick) solid var(--c-magenta);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: aft-refinement-in var(--dur) var(--ease);
}
.aft-refinement[hidden] { display: none; }
.aft-refinement__legend {
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  width: 100%;
  padding: 0;
  font-weight: var(--fw-heavy);
}
.aft-refinement__optional {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
@keyframes aft-refinement-in {
  from { opacity: 0; transform: translateY(calc(var(--sp-2) * -1)); }
}

/* --- Field errors (shared by the profile setup Sections) ---------------- */
.aft-field-error {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}

/* Search field with a pill shape, common on the directory */
.aft-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3em 0.4em 0.3em 1.1em;
  background: var(--c-white);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-pill);
}
.aft-search input { border: none; outline: none; flex: 1; background: none; padding: 0.5em 0; }

/* --- Artwork upload and editing ------------------------------------------ */
.aft-upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.aft-upload-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 2fr) minmax(6rem, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--c-paper-2);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--radius-sm);
}
.aft-upload-row__name,
.aft-upload-row__status {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.aft-upload-row__name {
  overflow-wrap: anywhere;
  font-weight: var(--fw-bold);
}
.aft-upload-row__progress {
  width: 100%;
  accent-color: var(--c-magenta);
}
.aft-upload-row.is-error {
  color: var(--accent-text);
  border-color: var(--c-magenta);
}
.aft-artwork-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.aft-artwork-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr);
  gap: var(--sp-5);
  padding: var(--sp-4);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-lg);
}
.aft-artwork-row__media {
  align-self: start;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--c-paper-2);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
}
.aft-artwork-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aft-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--c-paper-3);
}
.aft-artwork-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.aft-artwork-row__remove {
  margin-left: auto;
  color: var(--accent-text);
}
@media (max-width: 40rem) {
  .aft-upload-row,
  .aft-artwork-row { grid-template-columns: 1fr; }
  .aft-artwork-row__media { aspect-ratio: 4 / 3; }
}

/* --- Progress ------------------------------------------------------------ */
.aft-progress {
  width: 100%;
  height: var(--sp-3);
  overflow: hidden;
  background: var(--c-paper-3);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius-pill);
}
.aft-progress__bar {
  display: block;
  width: var(--aft-progress-value);
  height: 100%;
  background: var(--c-magenta);
}

/* --- Badge (small status pip) -------------------------------------------- */
.aft-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.aft-badge::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: var(--c-lime);
  border: 1px solid var(--c-ink);
}

.aft-badge--to-do { color: var(--accent-text); }
.aft-badge--to-do::before { background: var(--c-white); border-color: var(--c-magenta); }

/* --- Divider with a mono caption ----------------------------------------- */
.aft-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--text-faint);
}
.aft-rule::before, .aft-rule::after {
  content: ""; flex: 1; height: 2px; background: var(--c-line);
}

/* --- Link with animated underline ---------------------------------------- */
.aft-link {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  background-image: linear-gradient(var(--c-magenta), var(--c-magenta));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
  padding-bottom: 2px;
}
.aft-link:hover, .aft-link:focus-visible { background-size: 100% 2px; }

/* --- Profile form details and combobox ---------------------------------- */
.aft-fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
}
.aft-fieldset > legend { padding: 0; }
.aft-location-fields {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 2fr);
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.aft-required {
  margin-left: var(--sp-2);
  color: var(--accent-text);
}
.aft-field-errors {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--accent-text);
}
.aft-character-count {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.aft-combobox { position: relative; }
.aft-combobox__list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 2;
  max-height: 15rem;
  overflow-y: auto;
  background: var(--c-white);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-ink);
}
.aft-combobox__option {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
}
.aft-combobox__option:hover,
.aft-combobox__option[aria-selected="true"] {
  background: var(--c-magenta-soft);
}
@media (max-width: 34rem) {
  .aft-location-fields { grid-template-columns: 1fr; }
}

.aft-artwork-gallery figure { margin: 0; }
.aft-artwork-gallery [hidden] { display: none; }
.aft-artwork-gallery__featured { position: relative; }
.aft-artwork-gallery__stage {
  background: var(--c-paper-2);
  border: var(--bw) solid var(--c-ink);
  margin-bottom: var(--sp-5);
}
.aft-artwork-gallery__featured img {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
}
.aft-artwork-gallery__expand {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  background: var(--c-paper);
}
.aft-artwork-gallery__thumbnails {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding: 0 var(--sp-3) var(--sp-3) 0;
}
.aft-artwork-gallery__thumbnail {
  flex: 0 0 5rem;
  min-height: 5rem;
  padding: 0;
  background: var(--c-paper);
  border: 0;
  cursor: pointer;
}
.aft-artwork-gallery__thumbnail[aria-pressed="true"] { box-shadow: var(--shadow-lime); }
.aft-artwork-gallery__thumbnail:focus-visible { outline-offset: calc(var(--bw-thick) * -1); }
.aft-artwork-gallery__thumbnail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.aft-artwork-gallery__fullscreen {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 1rem;
  background: var(--c-paper);
  color: var(--c-ink);
}
.aft-artwork-gallery__fullscreen::backdrop { background: var(--c-ink); }
.aft-artwork-gallery__fullscreen figure { margin: 1rem 0 0; }
.aft-artwork-gallery__fullscreen img {
  width: 100%;
  height: calc(100dvh - 10rem);
  object-fit: contain;
}