/* Site-only reading layout. The canonical desktop deck.css remains unchanged.
   Layered important rules override its slide-specific presentation dimensions. */
.reader-nav { display: none; }
@layer reader {
  @media screen and (max-width: 900px) {
    html, body { height: auto !important; overflow: visible !important; }
    #deck { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; display: block !important; transform: none !important; }
    #nav, #hint, canvas.bg, canvas.ascii-bg, .vrule { display: none !important; }
    .reader-nav { display: flex !important; justify-content: space-between; gap: 16px; padding: 8px 20px !important; background: var(--paper); color: var(--ink); }
    .reader-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--accent); text-decoration: none; }
    .reader-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
    #deck .slide, #deck .canvas-card { width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
    #deck .slide { display: block !important; padding: 0 !important; border-bottom: 1px solid var(--grey-2); }
    #deck .canvas-card { padding: 28px 20px 40px !important; gap: 24px !important; }
    #deck .canvas-card :is(div, article, figure, ul) { min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; flex-basis: auto !important; overflow: visible !important; }
    #deck .canvas-card :is(div, article, figure) { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-auto-rows: auto !important; gap: 20px !important; }
    #deck .canvas-card > div:not(.chrome-min) { flex: none !important; }
    #deck .canvas-card * { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; white-space: normal !important; grid-column: auto !important; grid-row: auto !important; }
    #deck .chrome-min { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 12px !important; }
    #deck .chrome-min, #deck .chrome-min * { font-size: 10px !important; line-height: 1.5 !important; }
    #deck :is(h1, h2, [class*="ts-display"], [class*="ts-section-title"]) { font-size: clamp(30px, 7vw, 48px) !important; line-height: 1.16 !important; letter-spacing: -.025em !important; }
    #deck :is(p, li, a, figcaption, .lead, [class*="ts-standalone"], [class*="ts-inline-note"], [class*="ts-label-block"]) { font-size: 16px !important; line-height: 1.6 !important; overflow-wrap: anywhere !important; }
    #deck li > span { font-size: inherit !important; line-height: inherit !important; }
    #deck :is(h3, [class*="ts-card-title"]) { font-size: 22px !important; line-height: 1.3 !important; }
    #deck .t-meta { font-size: 12px !important; line-height: 1.5 !important; }
    #deck article { padding: 20px !important; }
    #deck figure { margin: 0 !important; }
    #deck :is(.visual-card-grid, .card-art, .reader-wide) { width: 100% !important; }
    #deck .card-art { padding: 12px !important; }
    #deck img { width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; }
    #deck .canvas-card [style*="position:absolute"] { position: static !important; }
    #deck [data-slide="contact"] figure { padding: 20px !important; }
    #deck [data-slide="contact"] figure img { max-width: 240px !important; }
  }
}