/* Solo CCM combined prototype — loads AFTER direction-c.css.
   Adds: equal-weight award medals (from A), the December 2025 record
   with its contact sheet (from B), and the full registration form. */

/* ─── Hero ─────────────────────────────────────────────
   The December 2025 Solo CCM frame: projected event title high in the
   frame, the soloist centre-right, dark stage below. Crop holds the
   singer and the title; the wash keeps the headline legible without
   flattening the one lit figure the whole page is about. */
.tc-hero__poster { object-position: 58% 40%; }

.tc-hero__scrim {
  background:
    linear-gradient(to bottom,
      rgba(10, 14, 13, 0.62) 0%,
      rgba(10, 14, 13, 0.3) 30%,
      rgba(10, 14, 13, 0.42) 58%,
      rgba(10, 14, 13, 0.88) 100%),
    linear-gradient(to right,
      rgba(10, 14, 13, 0.78) 0%,
      rgba(10, 14, 13, 0.44) 42%,
      rgba(10, 14, 13, 0.12) 72%,
      rgba(10, 14, 13, 0.3) 100%);
}

/* hero CTA — the page now has a real form to send people to */
.tc-hero__actions { margin: 2.25rem 0 0; }

/* ─── Awards: equal visual weight ─────────────────────────────
   Three medals, identical type size and identical column width.
   Only the top rule changes colour — the hierarchy is in the metal,
   not in the layout, because every participant is recognised. */
.tc-medals {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.tc-medal {
  border-top: 2px solid;
  padding-top: 1.1rem;
}

.tc-medal dt {
  font-family: "Futura", "Jost", sans-serif;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 600;
  color: var(--tc-ink);
  margin-bottom: 0.35rem;
}

.tc-medal dd {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tc-muted);
}

.tc-medal--gold { border-color: #e7b83d; }
.tc-medal--silver { border-color: #9aa7a6; }
.tc-medal--bronze { border-color: #b86e25; }
/* ─── VI. The record so far ────────────────────────────── */
.tc-record {
  background: var(--tc-white);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.tc-record__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tc-record__head .section-kicker { margin-bottom: 0.9rem; }

.tc-record__columns {
  columns: 3;
  column-gap: clamp(1.75rem, 4vw, 3.25rem);
  max-width: 68rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--tc-muted);
}

.tc-record__columns p { margin: 0 0 1.1rem; break-inside: avoid; }
.tc-record__columns strong { color: var(--tc-ink); font-weight: 600; }

/* contact sheet — three prints laid on the page, lightly tilted */
.tc-contact-sheet {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.tc-print {
  margin: 0;
  background: var(--tc-white);
  padding: 0.75rem 0.75rem 0;
  border: 1px solid rgba(28, 35, 33, 0.14);
  border-radius: 0.5rem;
  box-shadow: 0 10px 26px rgba(28, 35, 33, 0.07);
}

.tc-print img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0.25rem;
}

.tc-print figcaption {
  padding: 0.7rem 0.15rem 0.85rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--tc-muted);
}

.tc-print figcaption span {
  display: block;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  /* teal-deep alone is 3.45:1 at this size — below AA. Darken the
     existing token rather than introduce a new hex (frozen token rule). */
  color: color-mix(in srgb, var(--tc-teal-deep) 62%, black);
  margin-bottom: 0.2rem;
}

/* standalone `rotate`, not transform: the reveal animation writes
   transform, which would silently wipe a transform-based tilt */
.tc-print--tilt-l { rotate: -0.7deg; }
.tc-print--tilt-r { rotate: 0.7deg; }

.tc-figure-note {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(28, 35, 33, 0.12);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--tc-muted);
  max-width: 62ch;
}
/* ─── VII. Registration ───────────────────────────────── */
.tc-enrol {
  background: var(--tc-dark-accent);
  color: white;
  padding-block: clamp(5rem, 10vw, 9rem);
}

/* 12-column split, matching contact-us.html: 4 cols of copy left,
   8-col form panel right. The copy sticks while the form scrolls. */
.tc-enrol__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.tc-enrol__head {
  grid-column: span 4;
  position: sticky;
  top: clamp(5rem, 12vh, 8rem);
}

.tc-enrol__head .section-kicker { margin-bottom: 0.9rem; }

.tc-enrol__panel { grid-column: span 8; }

.tc-enrol__title {
  font-family: "Futura", "Jost", sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.tc-enrol__lede {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.75;
  color: color-mix(in srgb, white 78%, transparent);
}

/* the four steps, listed in the left column as a contents page */
.tc-enrol__steps {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  display: grid;
  gap: 0;
}

.tc-enrol__steps > div {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tc-enrol__steps > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

.tc-enrol__steps dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tc-teal-bright);
  flex: 0 0 auto;
}

.tc-enrol__steps dd {
  margin: 0;
  font-size: 0.88rem;
  color: color-mix(in srgb, white 72%, transparent);
}

.tc-enrol__aside {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  max-width: 32ch;
  font-size: 0.8rem;
  line-height: 1.7;
  color: color-mix(in srgb, white 58%, transparent);
}

.tc-enrol__aside a { color: var(--tc-teal-bright); text-decoration: underline; text-underline-offset: 2px; }

/* the form panel — a lifted surface on the dark section, mirroring
   the rounded-[2rem] card the rest of the site uses for forms */
.tc-enrol__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* the form itself */
.tc-form { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); max-width: none; }

.tc-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.75rem;
}

/* the panel edge already reads as a rule, so the first legend sits flush */
.tc-form fieldset:first-of-type { border-top: 0; padding-top: 0; }

.tc-form legend {
  padding: 0;
  font-family: "Futura", "Jost", sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: white;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.tc-legend__no {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tc-teal-bright);
}

.tc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
}

.tc-fields__full { grid-column: 1 / -1; }
/* labels and inputs — underlined fields, not boxes, so the form reads
   as a printed entry sheet rather than a web app */
.tc-form label,
.tc-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 76%, transparent);
}

.tc-form label b,
.tc-label b { color: var(--tc-teal-bright); font-weight: 600; }

.tc-hint {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, white 52%, transparent);
}

/* A hint that explains a whole section must group with its legend, not
   sit halfway between the legend and the fields.
   The legend is taken out of flow and pinned to the fieldset's top edge,
   so the fieldset's padding-top pushes the *hint* down, not the legend.
   Shrink that padding for sections that open with a hint. */
.tc-form fieldset:has(legend + .tc-hint--block) { padding-top: 0.25rem; }
.tc-form legend:has(+ .tc-hint--block) { margin-bottom: 0.5rem; }
.tc-hint--block { margin: 0 0 1.6rem; max-width: 62ch; line-height: 1.7; }

.tc-form input[type="text"],
.tc-form input[type="email"],
.tc-form input[type="tel"],
.tc-form input[type="date"],
.tc-form input[type="number"],
.tc-form select {
  width: 100%;
  /* 0.35rem, not 0.6: the input box is 44px for touch, so its underline
     already sits well below the label. Extra margin detaches the two. */
  margin-top: 0.35rem;
  padding: 0.45rem 0.15rem 0.5rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  color: white;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color 0.25s ease;
}

/* a real chevron: the two-gradient triangle trick renders as a pair of
   thin diagonal slashes at this size, so use an inline SVG instead */
.tc-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-position: right 0.2rem center;
  background-size: 12px 8px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}

.tc-form select option { background: var(--tc-dark-accent); color: white; }

.tc-form input:hover,
.tc-form select:hover { border-bottom-color: rgba(255, 255, 255, 0.5); }

.tc-form input:focus-visible,
.tc-form select:focus-visible {
  outline: none;
  border-bottom-color: var(--tc-teal-bright);
}

.tc-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.5; cursor: pointer; }
/* radios and the consent checkbox.
   Scoped under .tc-form to outrank `.tc-form label`, which would
   otherwise force these sentences into uppercase field-label styling. */
.tc-form .tc-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: color-mix(in srgb, white 82%, transparent);
  cursor: pointer;
}

.tc-form .tc-radio input {
  margin: 0.28rem 0 0;
  accent-color: var(--tc-teal);
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.tc-form .tc-radio .tc-hint { display: inline; margin: 0; }
.tc-form .tc-radio--consent { margin-top: 0.5rem; max-width: 64ch; }

/* submit */
.tc-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.tc-submit .tc-cta { border: 0; cursor: pointer; font-family: inherit; }

.tc-submit__note {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: color-mix(in srgb, white 58%, transparent);
}

.tc-submit__note a { color: var(--tc-teal-bright); text-decoration: underline; text-underline-offset: 2px; }

/* no-JS fallback: without JS a submit would GET and silently drop the entry */
.tc-submit__note--warn {
  flex-basis: 100%;
  margin-top: 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--tc-teal-bright);
  color: color-mix(in srgb, white 74%, transparent);
}

/* post-submit confirmation (replaces .tc-submit) */
.tc-submitted {
  padding-top: 1.75rem;
  border-top: 2px solid var(--tc-teal-bright);
  max-width: 56rem;
}

.tc-submitted__title {
  font-family: "Futura", "Jost", sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 500;
  color: white;
  margin: 0 0 0.85rem;
}

.tc-submitted__note {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: color-mix(in srgb, white 72%, transparent);
}

.tc-submitted__note strong { color: var(--tc-teal-bright); font-weight: 600; }
.tc-submitted__note a { color: var(--tc-teal-bright); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 1023px) {
  .tc-record__columns { columns: 2; }
  .tc-contact-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
  .tc-print { padding: 0.5rem 0.5rem 0; }
  .tc-print figcaption { font-size: 0.68rem; padding: 0.5rem 0.1rem 0.6rem; }

  /* stack the split: copy above, form below, nothing sticky */
  .tc-enrol__grid { grid-template-columns: 1fr; }
  .tc-enrol__head { grid-column: 1 / -1; position: static; top: auto; }
  .tc-enrol__panel { grid-column: 1 / -1; }
  .tc-enrol__lede { max-width: 52ch; }
  .tc-enrol__aside { max-width: 52ch; }
  .tc-enrol__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .tc-enrol__steps > div:nth-child(2) { border-bottom: 0; }
  .tc-enrol__steps > div:last-child { border-bottom: 0; }
}

@media (max-width: 639px) {
  .tc-medals { grid-template-columns: 1fr; gap: 1.25rem; }
  .tc-record__columns { columns: 1; }
  .tc-contact-sheet { grid-template-columns: 1fr; gap: 1.25rem; }
  .tc-print img { aspect-ratio: 3 / 2; }
  .tc-print figcaption { font-size: 0.76rem; }
  .tc-fields { grid-template-columns: 1fr; }
  .tc-submit { flex-direction: column; align-items: stretch; }
  .tc-submit .tc-cta { justify-content: center; }
  .tc-enrol__panel { padding: 1.35rem 1.15rem; border-radius: 1.5rem; }
  /* restore the full 44px touch target on small screens */
  .tc-form input,
  .tc-form select { min-height: 44px; }
  .tc-enrol__steps { grid-template-columns: 1fr; }
  .tc-enrol__steps > div:nth-child(2) { border-bottom: 0; }
  .tc-enrol__steps > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (prefers-reduced-motion: reduce) {
  .tc-form input,
  .tc-form select { transition: none; }
}