/* Yanga v9 · the opening as a cover: folio on top, his line on the left, the looks in the
   middle, numbers + reports + seal on the right, the name typing itself along the bottom.
   Logo colours only (green, cognac, orange for marks, ink, bone). */

.stage { display: block; min-height: 100svh; padding: var(--bar-h) clamp(1.1rem, 4vw, 4rem) 0; overflow: clip; }
.cv { display: grid; width: 100%; max-width: 90rem; margin: 0 auto; height: calc(100svh - var(--bar-h)); min-height: 620px; max-height: 1000px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: clamp(1rem, 3vw, 3rem); }

/* the folio line */
.cv-folio { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .9rem 0 0; padding: .62em 0;
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--hair); font: 700 .72rem/1 var(--sc-font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.cv-folio i { margin: 0 .55em; font-style: normal; color: var(--orange); }
.cv-folio b { font-weight: 700; }

/* left: his line, the role, the buttons */
.cv-left { grid-column: 1; grid-row: 2; align-self: end; position: relative; z-index: 4; padding-bottom: 1.4rem; }
.cv-say { margin: 0; display: grid; font: 400 clamp(1.8rem, 1rem + 2.3vw, 3.15rem)/1.02 var(--sc-font-display); }
.cv-say em { font-style: italic; }
.cv-say__tr { margin: .55rem 0 0; font-size: .86rem; color: var(--ink-3); }
.cv-rule { display: block; width: 3rem; height: 3px; margin: 1.1rem 0 .9rem; background: var(--orange); }
.stage .stage__role { margin: 0; min-height: 1.3em; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); }
.stage .stage__sub { margin: .45rem 0 1.15rem; max-width: 34ch; font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); }

/* centre: the looks, standing on top of the name (feet just touch the letters, the name stays whole) */
.stage .stage__fig { grid-column: 2; grid-row: 2; position: relative; z-index: 3; height: auto; min-height: 0; order: 0; margin-bottom: calc(min(17vw, 24svh) * -.1); }
.stage .stage__img { bottom: 0; height: 100%; filter: drop-shadow(0 18px 22px rgb(40 25 10 / .2)); }
.stage .stage__slats { bottom: 0; }
.stage .stage__disc { top: 40%; width: min(96%, 54svh); }
.stage .stage__replay { bottom: 1rem; right: -.5rem; z-index: 4; }

/* right: numbers, the reports teaser, the seal */
.cv-right { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; position: relative; z-index: 4; display: grid; justify-items: end; gap: 1.05rem; padding-bottom: 1.4rem; text-align: right; }
.cv-stat { margin: 0; display: grid; gap: .3rem; }
.cv-stat b { font: 400 clamp(1.8rem, 1.2rem + 1.5vw, 2.7rem)/1 var(--sc-font-display); color: var(--green); }
.cv-stat > span { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cv-plus { display: grid; justify-items: end; gap: .25rem; max-width: 17rem; padding-top: .9rem; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; }
.cv-plus__tag { padding: .28rem .5rem; background: var(--cognac); color: var(--bone); font: 800 .62rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; }
.cv-plus b { font: 400 1.3rem/1.1 var(--sc-font-display); color: var(--green); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.cv-plus span:last-child { font-size: .9rem; color: var(--ink-2); line-height: 1.35; }
.cv-plus:hover b { color: var(--cognac); }
.cv-seal { position: relative; display: grid; place-items: center; width: 116px; aspect-ratio: 1; border-radius: 50%; }
.cv-seal img { width: 60%; height: auto; transition: transform 400ms var(--sc-ease-out); }
.cv-seal:hover img { transform: rotate(-12deg) scale(1.06); }
.cv-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: sealSpin 26s linear infinite; }
.cv-seal__ring text { font: 700 9.3px var(--sc-font-text); letter-spacing: 1.6px; fill: var(--cognac); }
.cv-seal:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

/* bottom: the name types itself, big, behind his feet */
.cv-mast { grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 2; margin: 0; min-height: .8em; text-align: center; white-space: nowrap; user-select: none;
  font: 400 min(17vw, 24svh)/.8 var(--sc-font-display); letter-spacing: -.01em; color: var(--ink); }
.cv-mast span { display: inline-block; }
.cv-mast .sp { width: .26em; }
.cv-mast .caret { width: .045em; height: .64em; margin-left: .05em; background: var(--orange); vertical-align: .02em; animation: caret 1s steps(1) infinite; }
.cv-ribbon { grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border-top: 3px dotted var(--cognac); padding: .2rem 0 .5rem; }
.cv-ribbon .stage__pips { position: static; translate: none; }
.cv-ribbon__t { font: 700 .72rem/1 var(--sc-font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.cv-ribbon__t i { margin: 0 .55em; font-style: normal; color: var(--orange); }

@media (max-width: 1180px) and (min-width: 901px) {
  .cv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
  .cv-folio__mid { display: none; }
  .cv-seal { width: 96px; }
}
@media (max-width: 900px) {
  .stage { min-height: 0; padding-inline: 1rem; }
  .cv { height: auto; min-height: 0; max-height: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; }
  .cv-folio { grid-row: 1; margin-top: .5rem; font-size: .6rem; letter-spacing: .16em; }
  .cv-folio__mid { display: none; }
  .stage .stage__fig { grid-column: 1; grid-row: 2; height: 54svh; }
  .stage .stage__disc { width: min(86%, 44svh); }
  .cv-mast { grid-row: 3; font-size: 21vw; margin-top: -.12em; }
  .cv-ribbon { grid-row: 4; }
  .cv-ribbon { justify-content: center; }
  .cv-ribbon__t { display: none; }
  .cv-folio > span:last-child i, .cv-folio > span:last-child b { display: none; }
  .stage .stage__fig { margin-bottom: 0; }
  .cv-left { grid-column: 1; grid-row: 5; padding: 1.2rem 0 .4rem; }
  .cv-say { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .cv-right { grid-column: 1; grid-row: 6; justify-self: stretch; justify-items: start; text-align: left; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 0 1.6rem; border-top: 1px solid var(--hair); }
  .cv-plus { grid-column: 1 / -1; justify-items: start; max-width: none; }
  .cv-seal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-seal__ring, .cv-mast .caret { animation: none; }
}

/* ---------------------------------------- No. 04 The Minister, regrouped --
   Desktop: the number + heading run across the top; under it the video and its story sit
   side by side and start on the same line, so the picture and the words read as one. */
.min-head { grid-column: 1 / -1; display: grid; gap: 1rem; margin-bottom: clamp(1.4rem, 3vw, 2.6rem); }
.min-head .d-lg { margin: 0; max-width: 22ch; }
.min-copy { padding-top: 0; gap: 1.2rem; }
@media (min-width: 861px) {
  .min-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: 0; align-items: start; }
  .min-photo { position: sticky; top: calc(var(--bar-h) + 1.5rem); }
}

/* ------------------------------------------- reports file themselves -- */
.slip-stamp { position: absolute; right: 8%; top: 30%; z-index: 3; display: grid; justify-items: center; gap: .15rem; padding: .45rem .9rem .4rem;
  border: 3px solid var(--orange); border-radius: 6px; color: var(--orange); rotate: -14deg; pointer-events: none; opacity: 0; scale: 1; visibility: hidden;
  box-shadow: inset 0 0 0 2px #FBF7EF, inset 0 0 0 3.5px var(--orange); background: rgb(251 247 239 / .35); mix-blend-mode: multiply; }
.slip-stamp b { font: 800 1.35rem/1 var(--sc-font-text); letter-spacing: .2em; text-transform: uppercase; }
.slip-stamp i { font: 700 .56rem/1 var(--sc-font-text); font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.reports { overflow-x: clip; }
.pile .slip.is-stamped .slip-stamp { visibility: visible; animation: slipStamp 380ms cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes slipStamp { 0% { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .94; } 100% { opacity: .92; scale: 1; } }
.pile .slip.is-stamped { animation: slipJolt 380ms ease-out; }
@keyframes slipJolt { 40% { translate: 0 5px; } }
/* filed: the report folds down into the drawer instead of being thrown */
.pile .slip.is-filed { transform-origin: 50% 100%; transition: transform 380ms cubic-bezier(.5, 0, .75, 0), opacity 380ms ease-in !important;
  transform: translate3d(0, 46%, 0) perspective(900px) rotateX(78deg) scale(.86) !important; opacity: 0 !important; }
/* the next report rises, then its words arrive one by one */
.pile .slip.is-arriving { animation: slipRise 520ms cubic-bezier(.2, .9, .25, 1); }
@keyframes slipRise { from { translate: 0 22px; } }
.pile .slip blockquote { display: block; }
.pile .slip blockquote .w { display: inline-block; }
.pile .slip.is-arriving blockquote .w { animation: wordIn 420ms cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(180ms + var(--i) * 70ms); }
@keyframes wordIn { from { opacity: 0; translate: 0 .35em; } }
.pile .slip blockquote { flex: 0 0 auto; align-self: stretch; margin-block: auto !important; }
.rep-timer { display: block; justify-self: center; width: 9rem; height: 3px; border-radius: 2px; background: color-mix(in oklab, var(--cognac) 22%, transparent); overflow: hidden; }
.rep-timer::before { content: ""; display: block; height: 100%; width: 100%; background: var(--cognac); transform-origin: 0 50%; scale: 0 1; }
.rep-timer.is-run::before { animation: repTimer var(--t, 6.5s) linear forwards; }
@keyframes repTimer { to { scale: 1 1; } }