/* ============================================================
   Chorale case study
   Sits inside the shared project layout from styles.css
   (left rail + right column). Adds the live spiral, the clip
   player and a few content patterns, in the prototype's own
   palette: a soft grey field, black ink.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@300;400&family=IBM+Plex+Sans:ital,wght@1,300;1,400&display=swap');

.chorale{
  --ch-field: #E6E5E1;
  --ch-ink: #14130F;
  --font-cond: 'IBM Plex Sans Condensed', var(--font-display);
}

.chorale .project-figure{ width: 100%; }

.ch-cap,
.project-body .content p.ch-cap{
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 12px 0 0;
}

/* ---------------- Live spiral ---------------- */

.ch-stage-field{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.ch-stage canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}
.ch-stage-mark{
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  font-family: var(--font-cond);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------------- At a glance ---------------- */

.ch-glance{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--text);
  margin-bottom: 24px;
}
.ch-glance > div{ padding: 18px 20px 0 0; }
.ch-glance > div + div{ padding-left: 20px; border-left: 1px solid var(--line); }
.ch-glance h3,
.ch-roles h3{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.chorale .ch-glance p{ font-size: 14px; line-height: 1.5; margin: 0; }
/* sits under the first column and uses the column-label type, so it lines up with the grid */
.project-body .content p.ch-links{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ch-links a{ text-decoration: underline; text-underline-offset: 4px; }
.ch-links a:hover{ text-decoration-thickness: 2px; }

/* ---------------- Clip player ---------------- */

.ch-reel-stage{
  position: relative;
  aspect-ratio: 1600 / 1040;
  background: var(--ch-field);
  overflow: hidden;
}
.ch-reel-stage video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.ch-reel-stage video.is-on{ opacity: 1; }

.ch-mute{
  position: absolute;
  right: 12px; bottom: 12px;
  appearance: none;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ch-ink);
  background: rgba(250,249,246,.85);
  border: 1px solid rgba(20,19,15,.15);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.ch-mute:hover{ border-color: var(--ch-ink); }

.ch-reel-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.ch-reel-tabs button{
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 10px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.ch-reel-tabs button span{ margin-right: 8px; }
.ch-reel-tabs button:hover,
.ch-reel-tabs [aria-selected="true"]{ color: var(--text); }
/* each tab doubles as a progress bar for its clip */
.ch-reel-tabs i{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.ch-reel-tabs i b{
  display: block;
  height: 100%;
  background: var(--text);
  transform-origin: left;
  transform: scaleX(0);
}
.ch-reel-desc{ min-height: 3em; }

/* ---------------- Text patterns ---------------- */

.ch-lead{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 21px) !important;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.ch-question{
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--text);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
}
.ch-question span{
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.ch-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--text);
  margin: 24px 0 0;
}
.ch-stats > div{ padding: 18px 20px 0 0; }
.ch-stats > div + div{ padding-left: 20px; border-left: 1px solid var(--line); }
.ch-stats b{
  display: block;
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  margin-bottom: 12px;
}
.chorale .ch-stats p{ font-size: 14px; line-height: 1.5; margin: 0; color: #4A4944; }
.ch-stats--small{ margin: 0 0 28px; }
.ch-stats--small b{ font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 6px; }
.chorale .ch-stats--small p{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.chorale .content p.ch-lines{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.45vw, 19px);
  line-height: 1.45;
  margin-bottom: 20px;
}
.ch-lines em{ font-weight: 400; }

.ch-roles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.ch-roles > div{
  background: var(--ch-field);
  padding: 18px 18px 20px;
}
.ch-roles h3{ color: var(--text); }
.project-body .content .ch-roles p.ch-role-ev{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(20,19,15,.12);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  color: #6F6E68;
}
.chorale .ch-roles p{ font-size: 14px; line-height: 1.5; margin: 0; }

.ch-principles{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--text);
  counter-reset: p;
}
.ch-principles li{
  counter-increment: p;
  padding: 18px 20px 22px 0;
  border-bottom: 1px solid var(--line);
}
.ch-principles li:nth-child(2n){ padding-left: 20px; border-left: 1px solid var(--line); }
.ch-principles li::before{
  content: '0' counter(p);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 14px;
}
.ch-principles h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 6px;
}
.chorale .ch-principles p{ font-size: 14px; line-height: 1.55; margin: 0; color: #4A4944; }

.ch-pull{
  margin: 28px 0 0;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.45;
}

/* ---------------- Image groups ---------------- */

.ch-grid{ display: grid; gap: 16px; }
.ch-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-grid > .ch-cap{ grid-column: 1 / -1; margin-top: -4px; }
.ch-grid .ch-span{ grid-column: 1 / -1; }
.ch-grid--3 img{ aspect-ratio: 3 / 4; object-fit: cover; }
.ch-wires .ch-cap{ margin-top: 8px; font-size: 11px; }
.ch-wires img{ aspect-ratio: 1 / 1; object-fit: contain; background: #E3E3E3; }

.ch-duo{
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 16px;
  align-items: start;
}
.ch-duo .ch-mood{ aspect-ratio: 1 / 1.66; object-fit: cover; object-position: top; }
.ch-duo .ch-cap{ grid-column: 1 / -1; margin-top: -4px; }

/* ---------------- Closing ---------------- */

.ch-close{ text-align: center; }
.ch-close blockquote{
  margin: 0 auto;
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.35;
  text-wrap: balance;
}
.ch-close em{ font-family: var(--font-body); }

/* ---------------- Responsive ---------------- */

@media (max-width: 1100px){
  .ch-glance, .ch-stats:not(.ch-stats--small), .ch-roles{ grid-template-columns: 1fr; }
  .ch-glance > div + div,
  .ch-stats:not(.ch-stats--small) > div + div{ padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; }}

@media (max-width: 600px){
  .ch-principles{ grid-template-columns: 1fr; }
  .ch-principles li:nth-child(2n){ padding-left: 0; border-left: 0; }
  .ch-grid--2, .ch-duo{ grid-template-columns: 1fr; }
  .ch-duo .ch-mood{ aspect-ratio: 4 / 3; }
  .ch-grid--3{ grid-template-columns: 1fr 1fr; }
  .ch-grid--3 img:last-of-type{ grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .ch-wires img{ aspect-ratio: auto; }
  .ch-stage-field{ aspect-ratio: 1 / 1; }
}