/* Scene 3 — Studio Matisse. Warm clay tones against the dark stage; every
   selector below is namespaced under .ac so this never leaks into other
   scenes. Vertical rhythm is tuned with vh-based clamps to hold 1280x720. */

.ac .scene-bg { opacity: .22; }

.ac-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: clamp(10px, 1.8vh, 22px);
}

/* ------------------------------------------------------------------- head */
.ac-head { display: grid; gap: clamp(4px, .8vh, 10px); }
.ac-title { max-width: 22ch; }
.ac-title span {
  background: linear-gradient(100deg, #FFFFFF 0%, #F2E4C0 55%, #D9B45A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(22px, 2.7vw, 46px);
}
.ac-head .subhead { max-width: 52ch; }

/* ------------------------------------------------------------------- grid */
.ac-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 3.4vw, 64px);
  /* stretch, not start: the right column then fills the left column's height
     and the photography grows into space that was previously wasted */
  align-items: stretch;
}

.ac-left { max-width: 46ch; gap: clamp(8px, 1.4vh, 16px) !important; }

/* -------------------------------------------------------------- info rows */
.ac-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  padding: clamp(8px, .9vw, 14px);
  border-radius: var(--r);
}
.ac-thumb {
  flex: none;
  width: clamp(84px, 6.6vw, 116px);
  height: clamp(63px, 5vw, 87px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.ac-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.ac-thumb-station { object-position: 100% 38%; } /* right third — facilitator teaching */

.ac-row-title { font-size: clamp(13px, 1vw, 17px); font-weight: 700; }
.ac-row-sub { font-size: clamp(13px, .8vw, 14px); color: var(--paper-faint); max-width: 30ch; }

/* ---------------------------------------------------------------- scanner */
.ac-scan-row {
  display: flex;
  justify-content: flex-start;
  padding-bottom: clamp(14px, 1.6vh, 22px); /* room for the absolutely-positioned label */
}
.ac .ac-scan-row .scanner {
  width: clamp(64px, 6.2vw, 108px);
  height: clamp(64px, 6.2vw, 108px);
}

/* -------------------------------------------------------- registration card */
.ac-reg { padding: clamp(10px, 1.1vw, 20px) !important; }
.ac-reg-title { margin-bottom: .5em !important; }
.ac-reg-row {
  display: flex;
  justify-content: space-between;
  gap: 1.2em;
  padding: .28em 0;
  border-bottom: 1px dashed var(--line);
  font-size: clamp(13px, .92vw, 16px);
}
.ac-reg-row:last-child { border-bottom: 0; }
.ac-reg-k { color: var(--paper-faint); }
.ac-reg-v { font-weight: 700; color: var(--paper); }

/* --------------------------------------------------------------- team chip */
/* team + completion share one row instead of stacking two short bars */
.ac-status-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, .8vw, 14px);
  flex-wrap: wrap;
}
.ac-team-chip { box-shadow: 0 0 22px rgba(228, 193, 105, .22); }

/* --------------------------------------------------------------- complete */
/* the scanner is a supporting beat here, not the hero — keep it compact */
.ac-scan-row .scanner {
  width: clamp(96px, 8vw, 132px);
  height: clamp(96px, 8vw, 132px);
}

/* ------------------------------------------------------------------ right */
.ac-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 16px);
  min-height: 0;
}

/* ------------------------------------------------------------- clay stage */
.ac-clay-stage {
  position: relative;
  width: clamp(130px, 11vw, 185px);
  aspect-ratio: 1;
}
.ac-clay-stage::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 193, 105, .26), transparent 72%);
  opacity: 0;
  transition: opacity 1s var(--t) .25s;
  z-index: 0;
}
.ac-clay-stage.merged::before { opacity: 1; }

.ac-piece {
  position: absolute;
  z-index: 1;
  width: clamp(46px, 5vw, 78px);
  aspect-ratio: 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: top 1.15s var(--t), left 1.15s var(--t), transform 1.15s var(--t);
}

.ac-piece.p1 { top: 4%;  left: 6%;  border-radius: 58% 42% 61% 39% / 45% 55% 42% 58%; background: linear-gradient(150deg, #F6F3EA, #E2D8C0); transform: rotate(-16deg); }
.ac-piece.p2 { top: 0%;  left: 58%; border-radius: 42% 58% 39% 61% / 55% 42% 60% 40%; background: linear-gradient(150deg, #F1E9D4, #D9CCA9); transform: rotate(11deg); }
.ac-piece.p3 { top: 34%; left: -2%; border-radius: 61% 39% 55% 45% / 40% 60% 38% 62%; background: linear-gradient(150deg, #EFE6CF, #D6C7A0); transform: rotate(6deg); }
.ac-piece.p4 { top: 38%; left: 68%; border-radius: 39% 61% 44% 56% / 58% 42% 55% 45%; background: linear-gradient(150deg, #F6F3EA, #DED2B2); transform: rotate(-9deg); }
.ac-piece.p5 { top: 68%; left: 14%; border-radius: 55% 45% 58% 42% / 42% 58% 40% 60%; background: linear-gradient(150deg, #F1E9D4, #DBCDA8); transform: rotate(14deg); }
.ac-piece.p6 { top: 66%; left: 60%; border-radius: 44% 56% 39% 61% / 60% 40% 58% 42%; background: linear-gradient(150deg, #F6F3EA, #E4D8BC); transform: rotate(-4deg); }

.ac-clay-stage.merged .p1 { top: 38%; left: 32%; transform: rotate(-4deg) scale(.86); }
.ac-clay-stage.merged .p2 { top: 32%; left: 50%; transform: rotate(5deg)  scale(.9); }
.ac-clay-stage.merged .p3 { top: 50%; left: 28%; transform: rotate(2deg)  scale(.82); }
.ac-clay-stage.merged .p4 { top: 46%; left: 56%; transform: rotate(-3deg) scale(.88); }
.ac-clay-stage.merged .p5 { top: 60%; left: 38%; transform: rotate(6deg)  scale(.8); }
.ac-clay-stage.merged .p6 { top: 58%; left: 54%; transform: rotate(-5deg) scale(.84); }

/* -------------------------------------------------------------- sculpture */
.ac-sculpture {
  display: flex;
  align-items: center;
  gap: clamp(8px, .9vw, 14px);
  padding: clamp(6px, .7vw, 12px);
  border-radius: var(--r);
}
.ac-merge-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
  width: 100%;
}
.ac-merge-row .ac-clay-stage { flex: 0 0 auto; }
.ac-merge-row .ac-words { flex: 1 1 auto; }

/* the real Studio Matisse workshop photography, at a size you can actually see */
.ac-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1vw, 18px);
  width: 100%;
  flex: 1 1 auto;      /* soak up whatever height the left column frees */
  min-height: clamp(200px, 30vh, 300px);
}
.ac-photo {
  margin: 0;
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
}
.ac-photo { min-height: 0; }
.ac-photo img {
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 30vh, 300px);
  object-fit: cover;
  display: block;
}
.ac-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(8px, .8vw, 14px);
  background: linear-gradient(180deg, transparent, rgba(11, 12, 10, .9));
  font-size: clamp(13px, .82vw, 16px);
  color: var(--paper-dim);
}

.ac-sculpture-img {
  width: clamp(48px, 4.2vw, 72px);
  height: clamp(36px, 3.2vw, 54px);
  object-fit: cover;
  object-position: 50% 45%; /* middle third — the finished white clay piece */
  border-radius: 8px;
  border: 1px solid var(--line-2);
}
.ac-sculpture-cap {
  font-size: clamp(13px, .9vw, 15px);
  color: var(--gold-hi);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------ words */
.ac-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 24px);
  text-align: center;
}
.ac-word {
  letter-spacing: -.02em;
  color: var(--paper-dim);
}
.ac-word.w1 { font-size: clamp(18px, 2vw, 32px); font-weight: 500; }
.ac-word.w2 { font-size: clamp(21px, 2.4vw, 40px); font-weight: 650; color: var(--paper); }
.ac-word.w3 {
  font-size: clamp(25px, 2.9vw, 50px);
  font-weight: 800;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ac-callout { text-align: center; max-width: 34ch; }

/* --------------------------------------------------------------- journey */
.ac-rail-slot .rail { justify-content: center; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1150px) {
  .ac-grid { grid-template-columns: 1fr; }
  .ac-right { order: -1; }
  .ac-left { max-width: none; }
}

@media (max-width: 720px) {
  .ac-row { flex-direction: column; align-items: flex-start; text-align: left; }
  .ac-thumb { width: 100%; height: clamp(60px, 20vw, 100px); }
  .ac-words { gap: clamp(8px, 3vw, 16px); }
}