/* Diversification (finance) lesson. All rules scoped under .dvf-* */
.dvf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dvf-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }

/* Enron */
.dvf-photo { position: relative; margin: 0; width: 100%; max-width: 360px; }
.dvf-photo img { display: block; width: 100%; border-radius: 12px; transition: filter .8s; }
.dvf-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }
.dvf-photo.bust img { filter: grayscale(1) brightness(.55); }
.dvf-tag { position: absolute; left: 50%; top: 50%; translate: -50% -60%; min-width: 168px; padding: 10px 16px; border-radius: 16px; background: rgba(10,14,26,.88); border: 1px solid var(--line-strong); text-align: center; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.dvf-tag span { display: block; font: 600 12.5px var(--sans); color: var(--dim); }
.dvf-tag b { display: block; font: 800 32px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.dvf-tag em { display: block; font: 600 12.5px var(--sans); font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; }
.dvf-tag.down b { color: var(--red); }

/* the workers' savings */
.dvf-pot { width: 100%; max-width: 330px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dvf-pl { font: 700 13.5px var(--sans); color: var(--text); }
.dvf-coins { display: grid; grid-template-columns: repeat(5, 44px); gap: 10px; }
.dvf-c { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 18px var(--sans); font-style: normal; color: #fff; background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--gold) 55%, var(--gold-deep)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); transition: transform .5s cubic-bezier(.5,0,.8,.4), opacity .5s, filter .3s; }
.dvf-c.e { background: radial-gradient(circle at 35% 35%, #D6CCFF, var(--violet-bright) 45%, var(--violet-deep)); }
.dvf-c.gone { filter: grayscale(1) brightness(.6); transform: translateY(26px) rotate(25deg) scale(.6); opacity: .25; }
.dvf-key { display: flex; gap: 16px; font: 600 12.5px var(--sans); color: var(--dim); }
.dvf-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--gold); }
.dvf-key i.e { background: var(--violet-bright); }

/* the board of companies */
.dvf-board { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.dvf-total { display: flex; align-items: baseline; gap: 8px; padding: 6px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.dvf-total span { font: 600 13px var(--sans); color: var(--dim); }
.dvf-total b { font: 800 24px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.dvf-total.hit { border-color: var(--red); }
.dvf-grid { display: grid; gap: 6px; justify-content: center; transform-origin: 50% 100%; transition: transform 1.6s ease-in-out, filter 1.6s; }
.dvf-grid.shrink { transform: scale(.79); filter: saturate(.4) brightness(.8); }
.dvf-n1 { grid-template-columns: 150px; }
.dvf-n10 { grid-template-columns: repeat(5, 58px); }
.dvf-n100 { grid-template-columns: repeat(10, 22px); gap: 3px; }
.dvf-t { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0; min-width: 0; transition: transform .45s, filter .45s, opacity .45s; }
.dvf-t img { width: 100%; height: auto; filter: hue-rotate(var(--h)); }
.dvf-t b { font: 800 13px var(--sans); color: var(--text); margin-top: 2px; }
.dvf-n1 .dvf-t b { font-size: 18px; }
.dvf-n10 .dvf-t, .dvf-n1 .dvf-t { min-height: 44px; }
.dvf-n100 .dvf-t { height: 22px; }
.dvf-t.down { transform: rotate(-14deg) translateY(6px); }
.dvf-t.down img { filter: grayscale(1) brightness(.45); }
.dvf-t.down b { color: var(--red); }
.dvf-t.down::after { content: ''; position: absolute; left: 20%; right: 20%; top: 30%; height: 3px; background: var(--red); rotate: -30deg; border-radius: 2px; }
.dvf-n100 .dvf-t.down::after { height: 2px; left: 5%; right: 5%; }

/* 2008: two boards */
.dvf-pair { display: flex; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; }
.dvf-pair .dvf-board { width: auto; flex: 1; max-width: 190px; }
.dvf-pair .dvf-total { flex-direction: column; align-items: center; gap: 0; padding: 6px 10px; }
.dvf-pair .dvf-total span { font-size: 12px; }
.dvf-pair .dvf-n1 { grid-template-columns: 96px; }
.dvf-pair .dvf-n100 { grid-template-columns: repeat(10, 14px); gap: 2px; }
.dvf-pair .dvf-n100 .dvf-t { height: 14px; }
.dvf-pair .dvf-t b { display: none; }

/* the offer */
.dvf-offer { width: 100%; max-width: 300px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #1E2A3F, #161C2E); border: 1px solid var(--line-strong); }
.dvf-oh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 12.5px var(--sans); color: var(--dim); }
.dvf-oh i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.dvf-offer b { font: 800 19px/1.3 var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .dvf-sc { gap: 8px; }
  .dvf-photo { max-width: 320px; }
  .dvf-n1 { grid-template-columns: 120px; }
  .dvf-n10 { grid-template-columns: repeat(5, 50px); }
  .dvf-n100 { grid-template-columns: repeat(10, 17px); }
  .dvf-n100 .dvf-t { height: 17px; }
  .dvf-coins { grid-template-columns: repeat(5, 40px); }
  .dvf-c { width: 40px; height: 40px; }
}