@charset "UTF-8";
:root {
--blood:#8d1f1f;
--ash:#151414;
}
* {
    box-sizing: border-box
}
body {
    margin: 0;
    background: #050505;
    color: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    overflow: hidden
}
body {
    overflow: visible
}
.deck {
    width: 100vw;
    height: 100vh;
    position: relative
}



.bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(.86) contrast(1.08)
}
.shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.75) 36%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.70) 100%), radial-gradient(circle at 20% 20%, rgba(210,169,78,.22), transparent 34%)
}
.plain {
    background: radial-gradient(circle at 18% 15%, rgba(210,169,78,.18), transparent 35%), linear-gradient(135deg, #090909, #19130d 60%, #050505)
}
.content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 5.2vh 5.2vw;
    display: flex;
    flex-direction: column
}
.kicker {
    font-size: 1.05vw;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 900
}
.eyebrow {
    display: flex;
    gap: .7vw;
    align-items: center
}
.tag {
    border: 1px solid rgba(210,169,78,.72);
    border-radius: 999px;
    padding: .35vw .62vw;
    color: var(--gold);
    font-size: .76vw;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 900;
    background: rgba(0,0,0,.28)
}
h1, h2, h3, p {
    margin: 0
}
h1 {
    font-size: 6.2vw;
    line-height: .9;
    letter-spacing: -.075em;
    max-width: 12ch;
    font-weight: 950
}
h2 {
    font-size: 4.25vw;
    line-height: .92;
    letter-spacing: -.06em;
    max-width: 14ch;
    font-weight: 950
}
h3 {
    font-size: 1.45vw;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--gold);
    font-weight: 950
}
p {
    font-size: 1.26vw;
    line-height: 1.22;
    letter-spacing: -.018em
}
.subtitle {
    font-size: 1.72vw;
    line-height: 1.13;
    max-width: 49vw;
    color: #eee6d9;
    font-weight: 650;
    margin-top: 1.2vw
}
.case-layout {
    display: grid;
grid-template-columns:1fr .78fr;
    gap: 2vw;
    align-items: end;
    height: 100%
}
.case-copy {
    align-self: center
}
.panel {
    background: rgba(10,10,10,.72);
	color: var(--bg2);
    border: 1px solid var(--line);
    box-shadow: 0 22px 70px rgba(0,0,0,.35);
    padding: 1.35vw;
    backdrop-filter: blur(8px)
}
.panel.light {
    background: rgba(243,238,228,.93);
    color: #17120d;
    border: 0
}
.panel.blood {
    background: linear-gradient(145deg, rgba(141,31,31,.94), rgba(31,11,11,.91));
    border-color: rgba(255,255,255,.16)
}
.line {
    display: grid;
    grid-template-columns: 1.15vw 1fr;
    gap: .8vw;
    margin-top: .8vw;
    align-items: start
}
.dot {
    width: .86vw;
    height: .86vw;
    border-radius: 50%;
    margin-top: .27vw;
    background: var(--blood);
    box-shadow: 0 0 0 .24vw rgba(141,31,31,.22)
}
.bigline {
    font-size: 2vw;
    line-height: 1.05;
    letter-spacing: -.045em;
    font-weight: 950;
    margin-top: 1.15vw
}
.small {
    font-size: .92vw;
    line-height: 1.22;
    color: var(--muted)
}
.grid {
    display: grid;
    gap: 1.25vw
}
.four {
    grid-template-columns: repeat(4, 1fr)
}
.three {
    grid-template-columns: repeat(3, 1fr)
}
.two {
    grid-template-columns: 1fr 1fr
}
.card {
    border: 1px solid var(--line);
    background: rgba(255,255,255,.055);
    padding: 1.25vw
}
.card .num {
    font-size: 3.1vw;
    line-height: .88;
    letter-spacing: -.06em;
    font-weight: 950;
    color: var(--gold)
}
.quote {
    font-size: 2.4vw;
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 950;
    max-width: 34ch;
    margin-top: 1.4vw
}
.footer {
    position: absolute;
    left: 5.2vw;
    right: 5.2vw;
    bottom: 2.2vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .78vw;
    color: #a79d91;
    z-index: 4
}
.footer b {
    color: var(--gold)
}
.sources {
    font-size: .78vw;
    line-height: 1.25;
    color: #bcb1a2
}
.opening-slide .content {
    padding-top: 8.4vh;
    padding-bottom: 7.4vh;
}
.opening-slide h1 {
    max-width: 16ch;
    font-size: clamp(54px, 5.15vw, 78px);
    line-height: .98;
    letter-spacing: -.025em;
    margin-top: 2.2vh;
}
.opening-slide .subtitle {
    max-width: 58vw;
    font-size: clamp(22px, 1.55vw, 28px);
    line-height: 1.2;
}
.opening-slide .grid.four {
    gap: .9vw;
    margin-top: auto;
    margin-bottom: 5.8vh;
}
.opening-slide .card {
    min-height: 152px;
    padding: 1vw;
}
.opening-slide .card .num {
    font-size: clamp(30px, 2.55vw, 42px);
    letter-spacing: -.025em;
}
.opening-slide .card h3 {
    font-size: clamp(20px, 1.25vw, 26px);
    line-height: 1.08;
}
.opening-slide .card p {
    font-size: clamp(16px, 1vw, 20px);
    line-height: 1.22;
    letter-spacing: 0;
}
.nav {
    position: fixed;
    right: 1vw;
    bottom: 1vw;
    z-index: 99;
    display: flex;
    gap: .5vw
}
.nav {
    display: none
}
button {
    background: rgba(243,238,228,.12);
    color: var(--paper);
    border: 1px solid rgba(243,238,228,.28);
    padding: .55vw .8vw;
    border-radius: 999px;
    font-weight: 850;
    cursor: pointer
}
button:hover {
    background: rgba(210,169,78,.2)
}
.panel details {
    border-top: 1px solid rgba(210,169,78,.22);
    padding-top: .2vw
}
.panel summary.h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    padding: .2vw 0 .75vw;
}
.panel summary.h3::-webkit-details-marker {
    display: none
}
.panel summary.h3::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: 0 0 clamp(26px, 2.1vw, 34px);
    width: clamp(26px, 2.1vw, 34px);
    height: clamp(26px, 2.1vw, 34px);
    border-radius: 999px;
    border: 1px solid rgba(210,169,78,.72);
    color: var(--gold);
    background: rgba(210,169,78,.12);
    font: 950 clamp(16px, 1.1vw, 20px)/1 "SF Mono", Menlo, monospace;
}
.panel details[open] > summary.h3::after {
    content: "-"
}
.panel summary.h3:hover::after {
    background: rgba(210,169,78,.22)
}
.panel summary.h3:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 5px;
    border-radius: 6px
}
.panel.light summary.h3::after {
    border-color: rgba(141,31,31,.42);
    color: #8d1f1f;
    background: rgba(141,31,31,.08)
}
.panel.blood summary.h3::after {
    border-color: rgba(255,255,255,.36);
    color: #ffd24a;
    background: rgba(255,255,255,.1)
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-07 · mobile settings.
   The deck's type scale is viewport-width based, which collapses
   to unreadable sizes on phones (1.26vw of 390px = 5px). Below
   900px — the same breakpoint as the standalone chrome — type
   moves to fixed readable sizes, data grids stack to one column,
   and the footer returns to flow.
   ============================================================ */
@media(max-width:900px){
    .kicker{font-size:12px}
    .eyebrow{gap:8px;flex-wrap:wrap}
    .tag{font-size:10px;padding:4px 8px}
    h1{font-size:clamp(34px,9vw,54px);max-width:100%}
    h2{font-size:clamp(28px,8vw,44px);max-width:100%}
    h3{font-size:18px}
    p{font-size:16px;line-height:1.3}
    .subtitle{font-size:18px;max-width:100%;margin-top:10px}
    .bigline{font-size:22px;margin-top:12px}
    .small{font-size:13px}
    .quote{font-size:clamp(22px,6.5vw,30px);max-width:100%;margin-top:14px}
    .card{padding:14px}
    .card .num{font-size:30px}
    .panel{padding:16px}
    .line{grid-template-columns:16px 1fr;gap:8px;margin-top:10px}
    .dot{width:10px;height:10px;margin-top:5px;box-shadow:0 0 0 3px rgba(141,31,31,.22)}
    .grid{gap:12px}
    .two,.three,.four{grid-template-columns:1fr}
    .case-layout{grid-template-columns:1fr;gap:16px;height:auto}
    .footer{position:static;margin-top:20px;font-size:11px;flex-wrap:wrap;gap:8px}
    .sources{font-size:11px}
    .opening-slide .subtitle{max-width:100%}
    .opening-slide .grid.four{margin-bottom:0;gap:10px}
    .opening-slide .card{min-height:0;padding:14px}
    .panel summary.h3{gap:12px;padding:4px 0 10px}
}