/* Components: link, button, plate, label table, bolt line, index, quote, fields, submit, lightbox */

/* c-link — arrow text link */
.c-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.c-link::after { content: "→"; color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-small); }
.c-link--back::after { content: none; }
.c-link--back::before { content: "←"; color: var(--color-accent); font-family: var(--font-body); font-size: var(--fs-small); }
.c-link:hover { color: var(--color-accent); gap: var(--space-4); }
.c-link--bar {
  display: flex;
  justify-content: space-between;
  min-height: 3.5rem;
  padding-inline: var(--space-1);
  border-top: 1px solid var(--color-text-muted);
  color: var(--color-text);
}
.c-link--bar::after { font-size: var(--fs-h3); line-height: 1; }
.c-link--bar:hover { gap: var(--space-3); padding-inline: var(--space-3) var(--space-1); }

/* c-button — square, engraved */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-bg);
  background: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.c-button:hover, .c-button.is-hover { background: var(--color-light); border-color: var(--color-light); }
.c-button:active, .c-button.is-active { background: var(--color-accent); border-color: var(--color-accent); }
.c-button:disabled, .c-button.is-disabled { opacity: 0.4; cursor: not-allowed; }
.c-button--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.c-button--ghost:hover, .c-button--ghost.is-hover { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }

/* c-plate — a work, frameless on the sky */
.c-plate { position: relative; }
.c-plate__img {
  width: 100%;
  aspect-ratio: var(--plate-ratio);
  background: var(--color-surface);
}
.c-plate__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.c-plate__open .c-plate__img { transition: opacity var(--dur-base) var(--ease-out); }
.c-plate__open:hover .c-plate__img { opacity: 0.88; }
.c-plate__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: baseline;
  padding-top: var(--space-4);
}
.c-plate__cap .t-numeral { font-size: var(--fs-label); }
.c-plate__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.c-plate__meta { grid-column: 2; }
a.c-plate { display: block; text-decoration: none; }
a.c-plate:hover .c-plate__title { color: var(--color-accent); }

/* c-label — museum wall label / facts table */
.c-label { border-top: var(--rule); }
.c-label__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 2.2fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--rule);
}
.c-label dt {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-1);
}
.c-label dd { font-size: var(--fs-small); }
.c-label--wide .c-label__row { grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); padding-block: var(--space-4); }
.c-label--wide dd { font-size: var(--fs-body); }

/* c-bolt — the line of light joining sky and earth */
.c-bolt {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--bolt-width);
  background: linear-gradient(to bottom, transparent, var(--color-light) 4%, var(--color-accent) 50%, var(--color-light) 96%, transparent);
  box-shadow: var(--bolt-glow);
  transform-origin: top center;
  pointer-events: none;
}
.c-bolt--spine { left: 50%; }
.c-bolt--rail { left: var(--rail-x, var(--gutter)); }
@media (prefers-reduced-motion: no-preference) {
  .c-bolt { animation: bolt-draw var(--dur-slow) var(--ease-out) both; }
}
@keyframes bolt-draw {
  from { transform: scaleY(0); opacity: 0; }
  12% { opacity: 1; }
  to { transform: scaleY(1); opacity: 1; }
}
.c-bolt-node {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) 0;
  background: var(--color-bg);
  font-family: var(--font-display);
  color: var(--color-accent);
  letter-spacing: 0.08em;
  line-height: 1;
  z-index: 1;
}

/* c-index — numbered list of works */
.c-index { border-top: var(--rule); counter-reset: none; }
.c-index li { border-bottom: var(--rule); }
.c-index a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-out);
}
.c-index .t-numeral { font-size: var(--fs-label); }
.c-index__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.c-index__meta { color: var(--color-text-muted); font-size: var(--fs-small); font-style: italic; }
.c-index a:hover { color: var(--color-accent); padding-left: var(--space-3); }

/* c-quote */
.c-quote { max-width: 52rem; }
.c-quote p::before { content: "“"; }
.c-quote p::after { content: "”"; }
.c-quote footer { margin-top: var(--space-5); color: var(--color-text-muted); }

/* c-field */
.c-field { display: grid; gap: var(--space-2); align-content: start; }
.c-field label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.c-field__hint { font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; }
.c-field input, .c-field select, .c-field textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.c-field select { appearance: none; cursor: pointer; background: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%) right 0.6rem center / 0.4rem 0.4rem no-repeat, linear-gradient(-45deg, transparent 50%, var(--color-accent) 50%) right 0.35rem center / 0.4rem 0.4rem no-repeat; }
.c-field select option { background: var(--color-bg); color: var(--color-text); }
.c-field textarea { min-height: 8rem; resize: vertical; }
.c-field input:focus, .c-field select:focus, .c-field textarea:focus,
.c-field.is-focus input { outline: none; border-bottom-color: var(--color-accent); box-shadow: 0 1px 0 var(--color-accent); }
.c-field input:user-invalid, .c-field textarea:user-invalid,
.was-validated .c-field input:invalid, .was-validated .c-field textarea:invalid,
.c-field.is-invalid input { border-bottom-color: var(--color-accent-2); box-shadow: 0 1px 0 var(--color-accent-2); }
.c-field input:disabled, .c-field.is-disabled input { opacity: 0.45; cursor: not-allowed; }
.c-field__error { display: none; font-size: var(--fs-small); color: var(--color-accent-2); }
.c-field input:user-invalid ~ .c-field__error,
.was-validated .c-field input:invalid ~ .c-field__error,
.c-field.is-invalid .c-field__error { display: block; }

/* c-submit — states via data-state */
.c-submit { min-width: 15rem; }
.c-submit__label { display: none; }
.c-submit[data-state="idle"] .c-submit__label--idle,
.c-submit:not([data-state]) .c-submit__label--idle,
.c-submit[data-state="loading"] .c-submit__label--loading,
.c-submit[data-state="success"] .c-submit__label--success,
.c-submit[data-state="error"] .c-submit__label--error { display: inline; }
.c-submit[data-state="loading"] { cursor: progress; opacity: 0.75; }
.c-submit[data-state="success"] { background: var(--color-accent); border-color: var(--color-accent); }
.c-submit[data-state="error"] { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.form-status { min-height: 1.6em; font-style: italic; color: var(--color-accent); }

/* c-lightbox */
.c-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-5) var(--gutter);
  border: 0;
  background: var(--color-overlay);
  color: var(--color-text);
}
.c-lightbox::backdrop { background: var(--color-overlay); }
.c-lightbox[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: var(--space-7);
  align-items: center;
}
.c-lightbox__stage { display: flex; justify-content: center; height: 100%; min-height: 0; }
.c-lightbox__stage img {
  height: 100%;
  max-height: calc(100svh - 2 * var(--space-5));
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.c-lightbox__meta { display: grid; gap: var(--space-3); align-content: center; }
.c-lightbox__nav { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.c-lightbox__close { position: absolute; top: var(--space-4); right: var(--gutter); }

@media (max-width: 809px) {
  .c-index a { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .c-index__meta { grid-column: 2; }
  .c-label__row, .c-label--wide .c-label__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .c-lightbox[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-4); padding-top: var(--space-9); }
  .c-lightbox__stage img { max-height: 62svh; }
  .c-lightbox__nav { margin-top: var(--space-2); }
  .c-lightbox__nav .c-button { flex: 1; }
  .c-submit { width: 100%; }
}