/* Red Deck — landscape A4 · 10 slides · house red / black / white */
@page { size: A4 landscape; margin: 0 }
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; background: #111 }
body { color: #0a0a0a; font-family: Inter, Arial, Helvetica, sans-serif; font-size: 12pt; line-height: 1.4 }
a { color: inherit; font-weight: 800; text-decoration: none }

.screen-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: #0a0a0a; color: #fff; font: 600 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase }
.screen-bar a, .screen-bar button { color: #fff; background: #c8102e; border: 0; padding: 8px 12px; font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-decoration: none }

.slide {
  width: 297mm; height: 210mm; max-height: 210mm;
  page-break-after: always; break-after: page;
  position: relative; overflow: hidden;
  background: #fff; display: flex;
}
.slide:last-of-type { page-break-after: auto; break-after: auto }
.red { background: #c8102e; color: #fff }
.blk { background: #0a0a0a; color: #fff }
.pane { padding: 16mm 18mm; display: flex; flex-direction: column }
.pane.w40 { width: 40% }
.pane.w50 { width: 50% }
.pane.w54 { width: 54% }
.pane.w60 { width: 60% }
.pane.full { width: 100% }
.photo {
  flex: 1;
  background: #0a0a0a center 12% / cover no-repeat;
}
.photo.work { background-position: center }
h1 { font-size: 40pt; line-height: .9; letter-spacing: -.03em; margin: 0 0 6mm; font-weight: 800; text-transform: uppercase }
h2 { font-size: 26pt; line-height: .94; margin: 0 0 5mm; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase }
.num { font-size: 64pt; font-weight: 800; line-height: .8; color: #c8102e; margin: 0 0 5mm }
.kicker { font-size: 9pt; letter-spacing: .28em; text-transform: uppercase; font-weight: 700; margin: 0 0 5mm; color: #c8102e }
.red .kicker, .blk .kicker { color: #fff }
p { margin: 0 0 3.5mm }
.role { color: #c8102e; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 8.5pt; margin: 0 0 4mm }
.blk .role { color: #c8102e }
.cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5mm; margin-top: auto }
.card { background: #0a0a0a; color: #fff; padding: 7mm 6mm }
.card.red { background: #c8102e }
.card h3 { margin: 0 0 3mm; font-size: 11pt; letter-spacing: .12em; text-transform: uppercase }
.card p { margin: 0; font-size: 10pt }
.grid12 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4mm }
.cell { background: #0a0a0a; color: #fff; padding: 4mm 5mm; min-height: 28mm }
.cell b { display: inline-block; width: 11mm; height: 11mm; line-height: 11mm; text-align: center; background: #c8102e; color: #fff; font-size: 8pt; margin-bottom: 3mm }
.logo { height: 20mm; width: auto }
.foot { margin-top: auto; font-size: 8pt; letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; margin-top: 6mm }
.facts div { background: #fff; color: #0a0a0a; padding: 4mm 5mm }
.blk .facts div { background: #161616; color: #fff }
.facts dt { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #c8102e; margin: 0 0 1mm }
.facts dd { margin: 0; font-weight: 800; font-size: 10pt }
.gates { list-style: none; margin: 0; padding: 0 }
.gates li { display: grid; grid-template-columns: 38mm 1fr; gap: 5mm; border-top: 1px solid #ddd; padding: 4mm 0 }
.gates b { color: #c8102e; letter-spacing: .06em; text-transform: uppercase; font-size: 10pt }
.work { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4mm; margin-top: 4mm }
.work article { background: #0a0a0a; color: #fff }
.wph { height: 52mm; background: #111 center / cover no-repeat }
.work h3 { margin: 4mm 5mm 1mm; font-size: 10pt; letter-spacing: .08em; text-transform: uppercase }
.work p { margin: 0 5mm 5mm; font-size: 9pt }
.ip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3mm; margin-top: 6mm }
.ip div { background: #161616; color: #fff; padding: 4mm }
.ip dt { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #c8102e; margin: 0 0 1mm }
.ip dd { margin: 0; font-weight: 800; font-size: 10pt }
.ring { width: 58mm; height: 58mm; border-radius: 50%; padding: 2.5mm; background: #0a0a0a; margin-top: 8mm }
.ring i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #111 center 12% / cover no-repeat }
.wa { display: inline-block; background: #0a0a0a; color: #fff; padding: 4mm 7mm; font-size: 13pt; margin: 2mm 0 6mm }
.red .wa { background: #0a0a0a }

@media print {
  .screen-bar { display: none !important }
  html, body { background: #fff !important }
  .slide { height: 210mm !important; max-height: 210mm !important; overflow: hidden !important }
}