@font-face { font-family: "Gabarito"; src: url(fonts/gabarito-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

/* 1rem = 10 stage px. The stage is 1440 x 810 and scales as one piece, so every number in the markup is a stage px. */
:root { --ground: #060606; --white: #fff; --red: #ec4433; --t1: rgba(255, 255, 255, .74); --t2: rgba(255, 255, 255, .52); --t3: rgba(255, 255, 255, .16); --ease: cubic-bezier(.23, 1, .32, 1); }
html { font-size: min(calc(100vw / 144), calc(100vh / 81)); background: var(--ground); scrollbar-width: none; overscroll-behavior: none; }
html::-webkit-scrollbar { display: none; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--white); background: var(--ground); font: 400 2.6rem/1.36 "Hanken Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
::selection { background: var(--red); color: var(--white); }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: .3rem solid var(--red); outline-offset: .4rem; }
#spacer { width: 1px; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
#strip { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.slide { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.slide.on { display: flex; }
.notes { display: none; }
.stage { position: relative; flex: none; width: 144rem; height: 81rem; }

/* type: Gabarito carries every statement, Hanken every explanation */
.title, .h0, .h1, .h2, .h3, .huge, .lead, h3 { font-family: "Gabarito", system-ui, sans-serif; text-wrap: balance; }
.title { font-size: 12.4rem; font-weight: 800; line-height: .94; letter-spacing: -.035em; }
.huge { font-size: 16rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--red); white-space: nowrap; }
.h0 { font-size: 9.2rem; font-weight: 700; line-height: 1.02; letter-spacing: -.028em; }
.h0.sm { font-size: 8rem; }
.h1 { font-size: 6.2rem; font-weight: 700; line-height: 1.06; letter-spacing: -.022em; }
.h1.tight { font-size: 5.4rem; }
.h2 { font-size: 4.6rem; font-weight: 650; line-height: 1.1; letter-spacing: -.016em; }
.h3 { font-size: 3.4rem; font-weight: 650; line-height: 1.14; letter-spacing: -.01em; }
.lead { font-size: 4rem; font-weight: 500; line-height: 1.2; letter-spacing: -.008em; color: var(--t1); text-wrap: pretty; }
.p { font-size: 3.2rem; line-height: 1.3; text-wrap: pretty; }
.s { font-size: 2.7rem; line-height: 1.3; color: var(--t1); text-wrap: pretty; }
.src { position: absolute; left: 7.2rem; bottom: 1.4rem; max-width: 124rem; font-size: 1.6rem; line-height: 1.3; color: var(--t2); }
.red-t { color: var(--red); }
.nb { white-space: nowrap; }
.shade { text-shadow: 0 0 1.6rem var(--ground), 0 0 .6rem var(--ground); }

.at { position: absolute; left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem); width: calc(var(--w) * .1rem); }
.col { position: absolute; left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem); width: calc(var(--w) * .1rem); display: flex; flex-direction: column; gap: 2.4rem; }
.col .s { margin-top: .6rem; }
.obj { height: auto; }
.chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cap { color: var(--white); }

/* evidence: paper on the desk, one line marked by hand */
.doc { background: var(--white); color: #000; padding: 2rem 2.4rem 2.2rem; border-radius: .3rem; transform: rotate(calc(var(--r, 0) * 1deg)); box-shadow: 0 2.4rem 4rem rgba(0, 0, 0, .7); }
.doc header { font-size: 1.6rem; line-height: 1.3; color: rgba(0, 0, 0, .66); margin-bottom: 1.2rem; }
.doc p { font: 600 3.3rem/1.3 "Hanken Grotesk", system-ui, sans-serif; margin: 1.1rem 0; }
.doc__l { display: grid; gap: .9rem; }
.doc__l i { display: block; height: .9rem; background: rgba(0, 0, 0, .1); }
.doc__l i:nth-child(2) { width: 92%; }
.doc__l i:last-child:not(:first-child) { width: 64%; }
.doc mark { color: inherit; background: linear-gradient(var(--red), var(--red)) no-repeat 0 60% / 0 92%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .3rem; margin: 0 -.3rem; border-radius: .2rem .7rem .3rem .8rem / .7rem .2rem .7rem .3rem; }

/* cards dealt on the desk */
.card.alt { background: none; color: var(--white); box-shadow: inset 0 0 0 .3rem var(--white); }
.card.alt h3 { font-size: 3.8rem; }
.card.alt p { font-size: 2.6rem; color: var(--t1); }
.card { background: var(--white); color: #000; padding: 2.2rem 2.4rem 2.4rem; min-height: 33rem; border-radius: 1rem; transform: rotate(calc(var(--r, 0) * 1deg)); box-shadow: 0 2rem 3.6rem rgba(0, 0, 0, .7); }
.card h3 { font-size: 4.2rem; font-weight: 750; line-height: 1.04; letter-spacing: -.02em; margin-bottom: 1.4rem; text-wrap: pretty; }
.card p { font-size: 2.6rem; line-height: 1.24; margin-top: .7rem; }
.card.word { min-height: 32rem; }
.card.word h3 { font-size: 5.4rem; color: var(--red); margin-bottom: 2rem; }
.card.word p { font-size: 2.8rem; line-height: 1.3; }

.flip { perspective: 420rem; height: calc(var(--h) * .1rem); }
.flip__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flip__b, .flip__f { position: absolute; inset: 0; border-radius: 1rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__b { background: repeating-linear-gradient(45deg, transparent 0 .9rem, rgba(255, 255, 255, .38) .9rem 1.05rem), repeating-linear-gradient(-45deg, transparent 0 .9rem, rgba(255, 255, 255, .38) .9rem 1.05rem), var(--red); box-shadow: inset 0 0 0 1rem var(--red), inset 0 0 0 1.15rem var(--white); }
.flip__f { background: var(--white); color: #000; padding: 2.2rem 2rem; transform: rotateY(180deg); display: flex; flex-direction: column; gap: 1.6rem; }
.flip__f.is-red { background: var(--red); color: var(--white); }
.flip__f h3 { font-size: 3.2rem; font-weight: 700; line-height: 1.08; letter-spacing: -.012em; text-wrap: pretty; }
.flip__f p { font-size: 2.4rem; line-height: 1.24; }
.day .flip__f h3 { font-size: 4rem; color: var(--red); }
.day .flip__f p { font-size: 2.7rem; }

/* charts */
.bars { display: grid; gap: 1.1rem; margin: 1.4rem 0; }
.bars__t { font-size: 2.3rem; line-height: 1.2; color: var(--t1); margin-bottom: .2rem; }
.bar { display: grid; grid-template-columns: calc(var(--lab) * .1rem) 1fr; align-items: center; gap: 1.4rem; font-size: 2.4rem; line-height: 1.14; min-height: 4.6rem; }
.bar__t { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.bar__t i { display: block; height: 3.4rem; flex: none; transform-origin: 0 50%; }
.bar__t b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars.tall .bar { min-height: 5.1rem; }
.bars.big .bar { min-height: 6.6rem; font-size: 2.6rem; }
.bars.big .bar__t i { height: 4.6rem; }
.bars.tall .bars__t { margin-bottom: .8rem; }
.ax { stroke: var(--t3); stroke-width: 1.5; fill: none; }
.tick { font: 400 22px "Hanken Grotesk", system-ui, sans-serif; fill: var(--t1); }
.lab { font: 650 26px "Gabarito", system-ui, sans-serif; fill: var(--white); }
.ink { fill: none; }
.chart path[data-draw], .chart .draw { stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* siete */
.feed { position: absolute; left: calc(50% - 50vw); width: 100vw; top: 21rem; overflow: hidden; padding: 1rem 0 3rem; }
.feed__rail { display: flex; gap: 2rem; width: max-content; list-style: none; animation: feed 200s linear both paused; }
.feed li { flex: none; width: 40rem; padding: .4rem 3.2rem .6rem 2.4rem; border-left: .2rem solid rgba(255, 255, 255, .22); color: var(--white); font: 500 2.6rem/1.24 "Hanken Grotesk", system-ui, sans-serif; }
.feed li span { display: block; margin-bottom: .6rem; font: 700 2.2rem/1 "Gabarito", system-ui, sans-serif; letter-spacing: .01em; color: var(--red); }
@keyframes feed { from { transform: translateX(calc(100vw - 100%)); } to { transform: translateX(0); } }
.count b { display: block; font: 800 8.8rem/1 "Gabarito", system-ui, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.count span { font-size: 2.3rem; color: var(--t1); }
.siete-err { font: 650 3.4rem/1.1 "Gabarito", system-ui, sans-serif; white-space: nowrap; }
.stop { font-size: 4.2rem; }
.loopcap { text-align: center; color: var(--t1); }

/* arnes */
.harness .ring-c { fill: var(--white); }
.harness .ring { fill: none; stroke: var(--white); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.harness__c { font: 750 3.2rem/1.12 "Gabarito", system-ui, sans-serif; color: #000; text-align: center; }
.harness__r, .harness__h { font: 650 2.6rem/1.1 "Gabarito", system-ui, sans-serif; text-align: center; }
.harness__h { color: var(--red); font-size: 3.2rem; }
.nums { display: flex; gap: 4.8rem; font: 800 8.4rem/1 "Gabarito", system-ui, sans-serif; letter-spacing: -.03em; }
.nums p { display: flex; flex-direction: column; gap: .8rem; }
.nums p > span { font: 600 2.4rem/1.1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0; color: var(--t1); }
.nums b { font: 800 8.4rem/1 "Gabarito", system-ui, sans-serif; letter-spacing: -.03em; }

/* map */
.map .m-land { fill: rgba(255, 255, 255, .045); stroke: rgba(236, 68, 51, .5); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map .m-eu { fill: rgba(255, 255, 255, .045); stroke: rgba(236, 68, 51, .5); stroke-width: .8; vector-effect: non-scaling-stroke; }
.map .m-usa { fill: rgba(255, 255, 255, .2); stroke: var(--white); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.map .m-china { fill: rgba(236, 68, 51, .42); stroke: var(--red); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.map .m-cr { fill: rgba(236, 68, 51, .9); stroke: var(--white); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.map .m-line { fill: none; stroke: var(--red); stroke-linecap: round; stroke-dasharray: 1 1; }
.map .m-stop { stroke: var(--white); stroke-width: 4; stroke-linecap: round; }
.pin circle { fill: var(--red); stroke: var(--ground); stroke-width: 2; }
.pin.us circle { fill: var(--white); }
.pin line { stroke: var(--t2); stroke-width: 1.5; }
.pin text { font: 700 34px "Gabarito", system-ui, sans-serif; fill: var(--white); paint-order: stroke; stroke: var(--ground); stroke-width: 6px; font-variant-numeric: tabular-nums; }

/* trono */
.throne { position: absolute; top: 15rem; left: 0; width: 46rem; height: 25rem; perspective: 160rem; }
.throne__in { position: relative; width: 100%; height: 100%; }
.throne__in p { position: absolute; inset: 0; display: none; background: var(--white); color: #000; border-radius: 1rem; box-shadow: 0 2rem 3.6rem rgba(0, 0, 0, .7); padding: 2.4rem 2.6rem; font-size: 3rem; line-height: 1.24; }
.throne__in b { display: block; font: 750 4rem/1.1 "Gabarito", system-ui, sans-serif; letter-spacing: -.02em; color: var(--red); margin-bottom: .8rem; }

/* pareto */
.caps { position: absolute; left: 7.2rem; right: 7.2rem; top: 2.4rem; height: 5rem; }
.caps p { position: absolute; inset: 0 auto auto 0; max-width: 112rem; font: 650 3.8rem/1.14 "Gabarito", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.quad { font: 700 4.4rem/1.04 "Gabarito", system-ui, sans-serif; letter-spacing: -.02em; }
.p-quad { fill: rgba(255, 255, 255, .085); stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; stroke-dasharray: 6 8; }
.p-line { fill: none; stroke: var(--white); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.p-lab { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.p-key { font: 650 24px "Gabarito", system-ui, sans-serif; fill: var(--white); }
.p-pt { fill: var(--white); }
.p-ring { fill: none; stroke: var(--red); stroke-width: 2.6; }
.p-tag { font: 700 26px "Gabarito", system-ui, sans-serif; fill: var(--white); paint-order: stroke; stroke: var(--ground); stroke-width: 7px; }

/* abiertos */
.door { stroke: var(--white); stroke-width: 4; fill: none; stroke-linecap: round; }
.door circle { fill: var(--white); stroke: none; }

/* ligas */
.league h3 { font-size: 4.4rem; font-weight: 750; letter-spacing: -.02em; color: var(--red); }
.league .price { margin: .6rem 0 2rem; font-size: 2.6rem; color: var(--t1); font-variant-numeric: tabular-nums; }
.league ul { list-style: none; display: grid; gap: 1rem; }
.league li { display: flex; justify-content: space-between; gap: 1.6rem; padding-top: 1rem; border-top: .1rem solid rgba(255, 255, 255, .18); font-size: 2.6rem; line-height: 1.2; }
.league li b { font: 750 3rem/1 "Gabarito", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.league li.opus { color: var(--red); font-weight: 700; }

.ev { position: absolute; left: calc(var(--x) * .1rem); top: 17.4rem; width: 62rem; }
.ev .bars { margin: 2rem 0 1.2rem; }
.ev .cap { margin-top: 1rem; font-size: 3rem; }
.ev .bars.big .bar { min-height: 5.2rem; }
.ev .doc p { font-size: 2.7rem; margin: .4rem 0 0; }
.ev .doc { padding: 1.4rem 2rem 1.6rem; min-height: 15.6rem; }

.corner h3 { font-size: 3.2rem; font-weight: 700; line-height: 1.1; }
.corner p { font-size: 2.3rem; line-height: 1.28; color: var(--t1); margin-top: .3rem; }
.answer h3 { margin-bottom: 1.4rem; font-size: 3.8rem; }

.pausa .h0 { font-size: 9rem; }

/* the real button: a white card, square-cornered, the end of the stream */
.btn { position: absolute; left: 44rem; top: 33.5rem; width: 56rem; height: 14rem; display: flex; align-items: center; justify-content: center; background: var(--white); color: #000; text-decoration: none; font: 750 4.6rem/1 "Gabarito", system-ui, sans-serif; letter-spacing: -.018em; border-radius: 1rem; pointer-events: auto; transition: background-color .18s, color .18s; }
.btn:hover { background: var(--red); color: var(--white); }

/* without cards the formations are drawn */
.fb { display: none; pointer-events: none; }
.fb__l { fill: none; stroke: var(--t1); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fb__l.red { stroke: var(--red); }
html.nocards .fb { display: block; }
html.nocards #gl { display: none; }

/* speaker view, only ever on N */
.hud { position: fixed; z-index: 5; right: 0; top: 0; bottom: 0; width: min(46rem, 100vw); padding: 2.2rem 2.4rem; overflow: auto; background: rgba(6, 6, 6, .94); border-left: 1px solid var(--t3); font-size: 2rem; line-height: 1.36; }
.hud[hidden] { display: none; }
.hud p { margin-bottom: 1.1rem; }
.hud dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1.4rem; margin: 0 0 1.6rem; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.hud dt { color: var(--t2); }
.hud dd { margin: 0; }
.hud .late { color: var(--red); font-weight: 700; }
.hud .puente { color: var(--t1); }
.clock { position: fixed; z-index: 4; right: 2rem; bottom: 1.4rem; font-size: 1.6rem; font-variant-numeric: tabular-nums; color: var(--t1); }
.clock[hidden] { display: none; }
.clock.late { color: var(--red); font-weight: 700; }

/* reduced motion: no flow, a short fade */
html.rm [data-b], html.rm .slide.on { transition: opacity .22s linear; }
html.rm .slide.on { animation: fadein .22s linear; }
html.rm .feed__rail { animation: none; flex-wrap: wrap; width: 142rem; margin: 0 auto; }
html.rm .feed { position: absolute; left: 0; width: 100%; }
html.rm .feed li { width: 34rem; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* phone: one column in order, one card at a time, type on its own scale */
@media (max-width: 760px) {
  html { font-size: 10px; }
  body { font-size: 1.9rem; line-height: 1.34; }
  .stage { width: 100vw; height: 100vh; height: 100svh; padding: 2.4rem 2rem 6.4rem; display: flex; flex-direction: column; gap: 1.6rem; overflow: hidden; }
  .at, .col, .ev { position: relative; left: auto; top: auto; width: auto; }
  .col { gap: 1.4rem; }
  .stage > .chart:not(.map):not(#metr):not(#pareto-chart):not(#trono-line) { position: relative; inset: auto; height: 30rem; flex: none; }
  .title { font-size: 5.4rem; white-space: normal; }
  .huge { font-size: 8.8rem; }
  .h0, .h0.sm, .pausa .h0 { font-size: 4rem; }
  .h1, .h1.tight { font-size: 3.1rem; }
  .h2, .stop { font-size: 2.6rem; }
  .h3 { font-size: 2.4rem; }
  .lead { font-size: 2.3rem; }
  .p, .s { font-size: 1.9rem; }
  .src { position: absolute; left: 2rem; right: 2rem; bottom: 1.2rem; font-size: 1.2rem; }
  .obj { width: min(62vw, 30vh); margin: 0 auto; }
  .wall, #escalera .obj { width: 24vh; }
  .one { position: relative; display: grid; flex: 1; min-height: 0; align-content: start; }
  .one > * { grid-area: 1 / 1; position: relative; left: auto; top: auto; width: auto; }
  .card, .card.word { min-height: 0; }
  .card h3 { font-size: 3.2rem; } .card p { font-size: 2rem; }
  .flip { height: 44rem; }
  .flip__f h3 { font-size: 3rem; } .flip__f p { font-size: 2.2rem; }
  .doc p { font-size: 2.3rem; }
  .ev { margin-top: 0; } .ev .cap { font-size: 1.9rem; } .ev .doc { min-height: 0; }
  .bar { grid-template-columns: 1fr; gap: .3rem; font-size: 1.8rem; min-height: 0; }
  .bars { margin: .6rem 0; gap: .7rem; }
  .bars__t { font-size: 1.7rem; }
  .bar__t i { height: 2.2rem; } .bars.tall .bar, .bars.big .bar { min-height: 0; font-size: 1.8rem; } .bars.big .bar__t i { height: 2.2rem; }
  .count b { font-size: 4.4rem; } .count span { font-size: 1.8rem; }
  .siete-err { white-space: normal; font-size: 2.4rem; }
  .feed { position: relative; left: -2rem; top: 0; }
  .feed li { width: 26rem; font-size: 1.9rem; }
  .nums { font-size: 6rem; }
  .harness__c, .harness__r, .harness__h { color: var(--white); font-size: 1.9rem; text-align: left; }
  .tick { font-size: 54px; } .lab { font-size: 54px; } .pin text { font-size: 44px; } .p-tag { display: none; }
  .p-pt, .p-ring { r: 13px; } .p-ring { stroke-width: 6; } .p-line { stroke-width: 9; } .ax { stroke-width: 3; }
  .caps { position: relative; left: 0; right: 0; top: 0; height: 12rem; flex: none; }
  .caps p { white-space: normal; font-size: 2.2rem; }
  .quad { position: absolute; left: 4.4rem; top: 16rem; width: 22rem; font-size: 2.2rem; z-index: 1; }
  #pareto-chart, #metr, #trono-line { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; flex: none; }
  #horizonte .cap { position: absolute; top: 56vh; left: 2rem; right: 2rem; width: auto; }
  #horizonte .doc { position: absolute; top: 54vh; left: 2rem; right: 2rem; width: auto; }
  #fronteras .at.shade { position: absolute; top: 2.4rem; left: 2rem; right: 2rem; width: auto; }
  #abiertos .door { display: none; }
  #abiertos .at[data-b] { position: absolute; top: 22rem; left: 2rem; right: 2rem; width: auto; }
  #triada .chart.fb { height: 15rem; }
  #arnes .harness { height: 11rem; }
  #arnes .col { gap: .9rem; }
  #arnes .h2 { font-size: 2.2rem; }
  #arnes .s { font-size: 1.7rem; }
  #arnes .nums { font-size: 4.4rem; gap: 2.4rem; }
  #arnes .nums b { font-size: 4rem; }
  #arnes .nums + .s, #arnes .src { display: none; }
  #ligas .stage { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; align-content: start; }
  #ligas .h1, #ligas .h2 { grid-column: 1 / -1; }
  .league h3 { font-size: 2.4rem; } .league .price { font-size: 1.5rem; margin: .2rem 0 .8rem; }
  .league ul { gap: .4rem; } .league li { font-size: 1.5rem; padding-top: .4rem; } .league li b { font-size: 1.7rem; }
  .corner h3 { font-size: 2.4rem; } .corner p { font-size: 1.8rem; }
  .map { position: absolute !important; inset: 0; }
  .btn { position: relative; left: auto; top: auto; width: 100%; height: 10rem; margin: auto 0; font-size: 3rem; }
  .throne { position: relative; top: 0; width: 100%; height: 22rem; flex: none; }
  .throne__in p { font-size: 2.2rem; padding: 1.8rem 2rem; } .throne__in b { font-size: 3.2rem; }
  .hud { font-size: 1.7rem; width: 100vw; }
  html.nocards .fb { display: none; }
  html.nocards svg.chart.fb, html.nocards .at.fb { display: block; }
  .at.fb { height: 12rem; flex: none; }
}