@media screen and (max-width: 800px) and (orientation: portrait) {
  :root {
    --mobile-nav: calc(58px + env(safe-area-inset-bottom, 0px));
    --mobile-gutter: clamp(20px, 5.4vw, 42px);
  }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
  }

  #viewport {
    position: fixed;
    inset: 0 0 var(--mobile-nav);
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    overflow: hidden auto;
    overscroll-behavior-y: contain;
  }

  #viewport .stage, #deck {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    transform: none;
    margin: 0;
  }

  #deck .slide {
    box-sizing: border-box;
    position: relative;
    inset: auto;
    display: none;
    width: 100%;
    height: auto;
    min-height: calc(100vh - var(--mobile-nav));
    min-height: calc(100dvh - var(--mobile-nav));
    padding: max(19px, env(safe-area-inset-top, 0px)) var(--mobile-gutter) 32px;
    overflow: visible;
  }

  #deck .slide.active { display: flex; flex-direction: column; gap: 0; }
  #deck .slide > *, #deck .slide :is(div, p, h3, figure, td, th) { min-width: 0; }
  #deck .slide .mast {
    position: relative;
    inset: auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 26px;
    margin: 0 0 25px;
    padding: 0 0 12px;
    font-size: 11px;
    line-height: 1.4;
  }
  #deck .mast .brand { flex: none; gap: 5px; font-size: 15px; letter-spacing: .02em; }
  #deck .mast .brand img { width: 23px; height: 23px; }
  #deck .mast > span { font-size: 11px; text-align: right; letter-spacing: .02em; }
  #deck .slide h2 {
    max-width: 100%;
    margin: 0 0 12px;
    font-size: clamp(28px, 7.2vw, 43px);
    line-height: 1.24;
    letter-spacing: -.03em;
    text-wrap: pretty;
  }
  #deck .slide h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.02em; }
  #deck .slide p { font-size: 15px; line-height: 1.72; }
  #deck .slide .dek { max-width: none; margin: 0 0 22px; font-size: 16px; line-height: 1.67; }
  #deck .over, #deck .eyebrow, #deck .example-flag { font-size: 11px; line-height: 1.5; letter-spacing: .08em; }
  #deck .ref-line, #deck .scope { font-size: 12px; line-height: 1.65; }
  #deck .takeaway { display: block; margin: 22px 0 0; padding: 14px 0 0; }
  #deck .takeaway b { display: block; margin: 0 0 5px; font-size: 14px; }
  #deck .takeaway p { margin: 0; font-size: 14px; line-height: 1.65; }

  #deck .cover-copy, #deck .atlas, #deck .cover-byline, #deck .example-flag {
    position: relative;
    inset: auto;
    transform: none;
  }
  #deck .cover-copy { width: 100%; margin: 6px 0 0; }
  #deck .cover h1 { margin: 13px 0; font-size: clamp(39px, 10.5vw, 66px); line-height: 1.14; letter-spacing: -.045em; }
  #deck .cover-copy p { margin: 0; font-size: 15px; }
  #deck .cover-copy p br { display: none; }
  #deck .atlas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 14px auto;
    padding: 0;
  }
  #deck .atlas img { position: relative; inset: auto; width: auto; max-width: 86%; height: clamp(160px, 26vh, 270px); object-fit: contain; }
  #deck .atlas figcaption { position: static; margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
  #deck .cover-byline { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: auto 0 0; padding-top: 14px; }
  #deck .cover-byline b { font-size: 15px; }
  #deck .cover-byline span { font-size: 12px; }

  #deck .ledger, #deck .reason-steps, #deck .paths-output, #deck .blind-body,
  #deck .score-layout, #deck .pub-layout, #deck .product-layout, #deck .cinema-layout,
  #deck .ethics-layout, #deck .pilot-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    flex: 0 0 auto;
    gap: 18px;
    margin: 8px 0 0;
    align-items: start;
  }
  #deck .ledger-source { padding: 16px 18px; }
  #deck .ledger-source .study-name { display: block; font-size: 38px; margin: 8px 0; }
  #deck .ledger-source p { margin: 0 0 9px; }
  #deck .ledger-rows > div, #deck .joint-table > div {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 5px 9px;
    height: auto;
    padding: 13px 0;
  }
  #deck .ledger-rows .index, #deck .joint-table .index { grid-column: 1; grid-row: 1; font-size: 12px; }
  #deck .ledger-rows h3, #deck .joint-table h3 { grid-column: 2; margin: 0; font-size: 18px; }
  #deck .ledger-rows small, #deck .joint-table small { display: block; margin: 2px 0; font-size: 11px; }
  #deck .ledger-rows p, #deck .joint-table p { grid-column: 2; margin: 0; }
  #deck .reason-steps, #deck .pilot-track { gap: 0; }
  #deck .reason-steps > div, #deck .pilot-track > div { min-height: auto; margin: 0; padding: 13px 0; border-right: 0; }
  #deck .reason-steps > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 9px; }
  #deck .reason-steps > div > span { grid-column: 1; grid-row: 1; margin: 2px 0 0; font-size: 12px; }
  #deck .reason-steps h3, #deck .reason-steps p { grid-column: 2; margin: 0; }
  #deck .paths-output { gap: 0; }
  #deck .paths-output > div { padding: 9px 0; border-right: 0; }
  #deck .paths-output b { font-size: 28px; }
  #deck .paths-output span { font-size: 13px; }
  #deck .paths-output strong { font-size: 15px; }

  #deck .blind-number, #deck .blind-chart, #deck .score-plot, #deck .score-effect { padding: 16px 0; }
  #deck .blind-chart { border-left: 0; border-top: 1px solid var(--rule); }
  #deck .score-plot { border-right: 0; }
  #deck .big-number { font-size: clamp(66px, 17vw, 96px); line-height: 1.05; }
  #deck .big-number span, #deck .big-number small { font-size: .4em; }
  #deck .chart-title { font-size: 17px; line-height: 1.5; }
  #deck .chart-title small { display: block; margin: 2px 0 0; font-size: 12px; }
  #deck .waffle { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: auto; width: 100%; gap: 4px; margin: 14px 0; }
  #deck .waffle span { width: 100%; height: auto; aspect-ratio: 1; }
  #deck .legend { flex-wrap: wrap; gap: 7px 15px; }
  #deck .legend :is(span,b), #deck .muted { font-size: 12px; }
  #deck .bar-row { grid-template-columns: 80px minmax(0, 1fr) 45px; gap: 7px; margin: 14px 0; }
  #deck .bar-row label, #deck .bar-row b { font-size: 13px; white-space: nowrap; }
  #deck .bar-row .track { height: 16px; }
  #deck .axis { margin: 0 52px 0 87px; font-size: 10px; }
  #deck .score-effect p { margin: 8px 0 0; }
  #deck .score-effect p span { font-size: 13px; }

  #deck .paper-preview { position: relative; width: min(100%, 300px); height: auto; max-height: none; margin: 0 auto; justify-self: center; }
  #deck .paper-preview img { display: block; width: 100%; height: auto; max-height: 38vh; object-fit: contain; object-position: center; }
  #deck .paper-preview span { font-size: 12px; }
  #deck .pub-text, #deck .ethics-text { padding: 0; }
  #deck .pub-row { padding: 14px 0; }
  #deck .pub-row + .pub-row { margin-top: 2px; }
  #deck .pub-row h3, #deck .ethics-text h3 { margin: 6px 0; }
  #deck .pub-row p, #deck .ethics-text p { margin: 7px 0; }
  #deck .inline-link, #deck .live-link { font-size: 13px; }
  #deck .ethics-paper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #deck .ethics-text hr { margin: 18px 0; }
  #deck .enroll { margin: 5px 0; }
  #deck .enroll strong { font-size: 54px; }
  #deck .enroll b { font-size: 16px; }

  #deck .product-copy { padding: 0; }
  #deck .product-copy h3, #deck .product-copy p { margin: 6px 0; }
  #deck .product-copy > p { min-height: 0; }
  #product-switch { display: flex; flex-flow: row wrap; gap: 5px; margin: 12px 0; }
  #product-switch button { width: auto; min-height: 34px; padding: 6px 8px; margin: 0; font-size: 12px; }
  #deck .device-wrap, #deck .laptop { width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
  #deck .laptop { padding: 0; }
  #deck .laptop .bezel { width: 94%; height: auto; padding: 9px 4px 2px; margin: 0 auto; border-radius: 8px 8px 2px 2px; }
  #deck .camera { width: 3px; height: 3px; top: 3px; }
  #deck .laptop .display { position: relative; width: 100%; height: auto; aspect-ratio: 16/9; }
  #deck .laptop-label { position: static; display: block; margin: 1px 0; text-align: center; font-size: 5px; line-height: 1; }
  #deck .laptop-base { width: 100%; height: 7px; margin-left: 0; }
  #deck .device-caption, #deck .film-credit { gap: 7px; flex-wrap: wrap; font-size: 11px; }
  #deck .device-caption :is(a,span), #deck .film-credit :is(a,span) { font-size: 11px; }

  #deck .cinema-copy { padding: 0; }
  #deck .cinema-copy h2 { margin: 10px 0; font-size: 48px; }
  #deck .film-time { font-size: 32px; line-height: 1.2; }
  #deck .cinema-copy p { margin: 12px 0 0; }
  #deck .film-frame { width: 100%; max-width: 100%; margin: 0; }
  #deck .film-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; }
  #deck .joint-table { margin: 0; }
  #deck .example-flag { align-self: flex-start; margin: 0 0 9px; }
  #deck .design-table { width: 100%; height: auto; table-layout: fixed; margin: 0; font-size: 15px; line-height: 1.6; }
  #deck .design-table :is(th,td) { width: auto; padding: 9px 10px; font-size: inherit; line-height: inherit; overflow-wrap: anywhere; }
  #deck .pilot-track h3 { margin: 6px 0; font-size: 22px; }
  #deck .pilot-track p { margin: 0; }
  #deck .meeting-ask { margin: 21px 0 0; padding: 14px 0 0; }
  #deck .meeting-ask p { margin: 4px 0; font-size: 17px; }
  #deck .meeting-ask p > span { padding: 0 3px; }

  #controls {
    box-sizing: border-box;
    position: fixed;
    z-index: 10;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    height: var(--mobile-nav);
    padding: 4px max(9px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(9px, env(safe-area-inset-left, 0px));
  }
  #controls .nav-ident { display: none; }
  #controls .nav-pager, #controls .nav-tools { display: flex; align-items: center; gap: 2px; }
  #controls button { min-width: 0; min-height: 40px; padding: 5px 7px; font-size: 13px; }
  #controls :is(#prev,#next) { width: 31px; padding: 0; font-size: 19px; }
  #controls #count { min-width: 49px; white-space: nowrap; text-align: center; font-size: 12px; }
  #panel { box-sizing: border-box; width: calc(100% - 20px); max-width: none; max-height: 88vh; max-height: 88dvh; padding: 0; }
  #panel > header { padding: 14px; gap: 10px; }
  #panel-title { font-size: 19px; line-height: 1.35; }
  #panel-close { flex: none; min-height: 36px; font-size: 13px; }
  #panel-body { padding: 13px 15px 20px; font-size: 15px; overflow-wrap: anywhere; }
  #panel-body :is(p, li, a) { font-size: 15px; line-height: 1.65; }
  #panel-body .toc-list { display: grid; grid-template-columns: 1fr; }
  #panel-body .toc-list button { width: 100%; min-height: 42px; font-size: 14px; text-align: left; }
  #panel[data-kind="zoom"] { width: calc(100% - 12px); max-width: none; }
  #panel[data-kind="zoom"] #panel-body { display: block; }
  #panel-body .zoom-image { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; }

  @media (max-width: 600px) {
    #deck .design-table, #deck .design-table :is(thead,tbody,tr,th,td) { display: block; box-sizing: border-box; width: 100%; }
    #deck .design-table thead tr th:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    #deck .design-table thead th { padding: 6px 10px; }
    #deck .design-table tbody tr { padding: 10px 0; }
    #deck .design-table tbody th { padding: 4px 0 6px; font-weight: 700; }
    #deck .design-table tbody td { display: grid; grid-template-columns: 21px minmax(0, 1fr); gap: 6px; padding: 6px 0; border-width: 0; }
    #deck .design-table tbody td::before { font-family: Georgia, serif; font-weight: 700; text-align: center; }
    #deck .design-table tbody td:nth-child(2)::before { content: 'A'; }
    #deck .design-table tbody td:nth-child(3)::before { content: 'B'; }
  }
}

@media screen and (max-width: 800px) and (orientation: portrait) {
  #deck .brief-split, #deck .evidence-spread, #deck .deliberation { display: block; margin: 0; }
  .brief-choices > div { gap: 15px; padding: 15px 0; }
  .brief-choices em { font-size: 32px; }
  .brief-questions { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .brief-questions ol { margin: 10px 0 0; }
  .brief-questions li { font-size: 15px; line-height: 1.65; }
  .brief-questions li + li { margin-top: 8px; }
  #deck .study-fact { padding: 15px 18px; margin-bottom: 20px; }
  .study-rate { font-size: 64px; }
  .study-event { font-size: 16px; }
  #deck .study-fact p { margin: 8px 0; }
  .evidence-process li { grid-template-columns: 25px 1fr; gap: 7px; }
  .evidence-process li::before, .deliberation li::before { font-size: 16px; }
  #deck .evidence-process h3 { font-size: 18px; }
  .evidence-conclusion { flex-direction: column; margin: 10px 0 0; align-items: flex-start; gap: 13px; }
  .evidence-conclusion > div { display: block; }
  .evidence-conclusion b { display: block; font-size: 14px; margin-bottom: 4px; }
  #ceu-open { font-size: 15px; min-height: 44px; }
  .deliberation li { display: grid; grid-template-columns: 24px 1fr; gap: 1px 8px; padding: 11px 0; }
  #deck .deliberation h3 { margin: 0; font-size: 18px; }
  #deck .deliberation p { grid-column: 2; margin: 0; }
  .clinical-readout { grid-template-columns: 1fr; gap: 7px; padding: 14px 0 0; }
  .clinical-readout > span { font-size: 14px; }
  .clinical-readout > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
  .clinical-readout strong { font-size: 16px; }
  .clinical-readout small { font-size: 12px; margin: 0; }
}

@media screen and (max-width: 800px) and (orientation: portrait) {
  #deck .chapter-layout {
    display: block;
    margin: 15px 0 32px;
  }
  #deck .chapter-number {
    padding: 0;
    margin-bottom: 27px;
    font-size: 82px;
  }
  #deck .chapter-copy {
    padding-left: 19px;
  }
  #deck .chapter-label {
    font-size: 13px;
    margin-bottom: 17px;
  }
  #deck .chapter-copy h2 {
    font-size: clamp(29px, 7.7vw, 48px);
    line-height: 1.4;
    margin-bottom: 18px;
  }
  #deck .chapter-lead {
    margin: 0;
    font-size: 16px;
  }
  #deck .chapter-lead br { display: none; }
  #deck .chapter-preview {
    display: block;
    margin-top: auto;
    padding: 17px 0 0;
  }
  #deck .chapter-preview b {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
  }
  #deck .chapter-preview p {
    font-size: 15px;
  }
}
