.page { position: relative; min-height: 100vh; overflow: hidden; }
html, body { height: 100%; }

.grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.16; mix-blend-mode: multiply;
  pointer-events: none; z-index: 0;
}

/* top-left body copy */
.lede {
  position: absolute; left: 2.4vw; top: 4.4vh; width: 57vw; max-width: 822px; z-index: 2;
}
.lede p {
  font-family: var(--font-body); color: var(--ink);
  /* the height term is load-bearing. sized on width alone, the lede kept its full height
     as the viewport got shorter while .demo (top: 44vh) walked up to meet it, so every
     desktop between 701px and ~848px tall printed the last lede line on top of the draw
     label. min() adds a height ceiling: on a tall screen 3.4vh exceeds 2.05vw and the
     original composition is untouched, on a short one the lede reflows instead of colliding. */
  font-size: clamp(15px, min(2.05vw, 3.4vh), 30px); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 1em;
}

/* giant bottom-anchored wordmark */
.wordmark {
  position: absolute; left: 2.2vw; bottom: 1.4vh; margin: 0; z-index: 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(110px, 23vw, 332px); line-height: 0.78;
  letter-spacing: -0.07em; color: var(--pale); white-space: nowrap;
}

/* right figures / install panel */
.panel {
  position: absolute; right: 0; top: 3.1vh; width: 38.2vw; max-width: 550px;
  height: 58vh; max-height: 593px; z-index: 3;
  background: var(--pale); border-radius: 12px; color: var(--ink);
  padding: clamp(14px, 1.5vw, 22px); overflow: hidden;
  display: flex; flex-direction: column;
}
.view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-title { font-family: var(--font-body); font-weight: 400; font-size: clamp(26px, 3.4vw, 52px); letter-spacing: -0.05em; margin: 0; line-height: 0.95; }
.panel-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); }

.figures { flex: 1; overflow-y: auto; margin-top: clamp(10px, 1.2vw, 16px); padding-right: 6px; }
.figures .fig { padding: 9px 0; border-top: 1px solid var(--hair); }
.figures .fig:first-child { border-top: none; }
.fig-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-soft); display: block; margin-bottom: 3px; }
.fig-v { font-family: var(--font-body); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.28; }
.fig-v b { font-weight: 400; background: rgba(235, 136, 83, 0.28); padding: 0 3px; border-radius: 2px; }
.fig-cmd { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); margin-top: 3px; display: block; word-break: break-word; }
.case-link { margin: clamp(8px, 1vw, 12px) 0 0; }
.case-link a { font-family: var(--font-body); font-size: clamp(14px, 1.2vw, 18px); border-bottom: 1px solid var(--ink); text-decoration: none; }

/* install -> -> -> big call to action, below the panel (links to the case study) */
.install-cta {
  position: absolute; right: 2vw; top: calc(3.1vh + 58vh + 1.4vh); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.12em;
  font-family: var(--font-body); font-size: clamp(40px, 8.9vw, 128px);
  letter-spacing: -0.1em; color: var(--ink); text-decoration: none; line-height: 0.8;
}
.install-cta .chev { transition: transform 240ms var(--ease-out); }
/* gated: on touch, :hover latches after a tap and the chevrons stay shoved right */
@media (hover: hover) {
  .install-cta:hover .chev:nth-child(2) { transform: translateX(0.06em); }
  .install-cta:hover .chev:nth-child(3) { transform: translateX(0.12em); }
  .install-cta:hover .chev:nth-child(4) { transform: translateX(0.18em); }
}
.install-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* the only motion: intentionally-digital ascii in two small cells */
.ascii { position: absolute; right: 2vw; bottom: 2.4vh; display: flex; gap: 14px; z-index: 2; }
.ascii-cell {
  margin: 0; width: 13.6vw; max-width: 205px; height: 9.4vh; max-height: 140px; overflow: hidden;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.05; letter-spacing: 0.04em;
  color: rgba(206, 217, 247, 0.74); white-space: pre; border: 1px solid var(--hair); border-radius: 4px;
  padding: 6px 8px; background: rgba(30, 30, 30, 0.05);
}

/* live draw, lower-left, near the wordmark. heights are reserved so a new draw never
   collapses the space: the old note stays (dimmed) while the next one loads. */
.demo { position: absolute; left: 2.4vw; top: 44vh; width: 40vw; max-width: 540px; z-index: 2; }
.demo-label { font-family: var(--font-body); font-size: clamp(15px, 1.5vw, 21px); color: var(--ink); margin: 0 0 7px; }
.draw-bar { height: 3px; max-width: 220px; border-radius: 2px; background: rgba(30, 30, 30, 0.1); overflow: hidden; margin: 0 0 9px; }
.draw-bar > span { display: block; height: 100%; width: 100%; background: var(--ink); opacity: 0.16; transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .draw-bar > span { animation: bar-breathe 2.8s ease-in-out infinite; }
  .draw-bar.is-loading > span { animation: bar-load 1.05s ease-in-out infinite; }
}
@keyframes bar-breathe { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.26; } }
@keyframes bar-load { 0% { transform: scaleX(0.12); opacity: 0.2; } 50% { transform: scaleX(1); opacity: 0.42; } 100% { transform: scaleX(0.12); opacity: 0.2; transform-origin: right center; } }
.draw-out { font-family: var(--font-mono); font-size: clamp(11px, 0.95vw, 13px); color: var(--ink); background: rgba(206, 217, 247, 0.32); border-radius: 6px; padding: 9px 11px; margin: 0 0 8px; white-space: pre-wrap; min-height: 3.4em; }
.draw-note { font-family: var(--font-body); font-size: clamp(12px, 1vw, 15px); color: var(--ink); line-height: 1.35; max-width: 40ch; min-height: 4.4em; transition: opacity 260ms ease; }
.draw-note.is-stale { opacity: 0.4; }
.draw-note b { font-weight: 400; border-bottom: 1px solid var(--ink); }
.seed-tag { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }

.readout { position: absolute; left: 2.4vw; top: 1.5vh; margin: 0; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--ink-soft); white-space: nowrap; }

/* reshuffle is a real control, not a keyboard hint. "press r" was the only way to
   re-deal the page, and it was announced inside an aria-hidden line, so touch and
   screen-reader users had no path to it at all. the r key still works. */
.reshuffle {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
  color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid var(--ink-soft);
  padding: 0; margin: 0; cursor: pointer; text-transform: lowercase;
}
.reshuffle:hover { color: var(--ink); border-bottom-color: var(--ink); }
.reshuffle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .install-cta .chev { transition: none; }
}

/* lowercase stacked flow on small / short screens */
@media (max-width: 1099px), (max-height: 700px) {
  html, body { overflow-x: hidden; }
  .grid { display: none; }
  .lede, .wordmark, .panel, .install-cta, .ascii, .demo, .readout { position: static; width: auto; max-width: none; height: auto; max-height: none; }
  .page { overflow: visible; display: flex; flex-direction: column; gap: 22px; padding: 22px 16px 40px; }
  /* stacked reading order. it used to open on the mono provenance line (whose only
     call to action was "press r", meaningless on a phone) and close with the live
     draw below the decorative ascii. the draw is the one thing that demonstrates the
     thesis, so it now sits right under the wordmark, and the provenance line moves
     to the end where a footnote belongs. */
  .lede { order: -3; }
  .wordmark { font-size: clamp(48px, 15vw, 150px); line-height: 0.82; white-space: normal; overflow-wrap: anywhere; letter-spacing: -0.05em; order: -2; }
  .fig-cmd, .case-link a { min-height: 44px; display: flex; align-items: center; }
  .demo { order: -1; width: 100%; }
  .panel { width: auto; order: 0; }
  .figures { overflow: visible; }
  .install-cta { font-size: clamp(44px, 13vw, 96px); order: 1; }
  .ascii { justify-content: flex-start; order: 2; }
  .ascii-cell { width: 46vw; height: 110px; }
  .readout { order: 3; white-space: normal; }
  .draw-note { max-width: none; }
}

/* The draw is still a compact cell; the reader owns its pace. */
.lede .author-credit { font: 12px/1.4 var(--font-mono); letter-spacing: 0; margin-top: 24px; }
.demo { top: 35vh; width: 49vw; max-width: 690px; max-height: 40vh; overflow-y: auto; padding-right: 12px; }
.draw-note { max-width: 66ch; min-height: 0; margin: 10px 0; }
.seed-tag { overflow-wrap: anywhere; font-size: 10px; }
.draw-controls { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.draw-controls button, #receipt-copy, .reshuffle { min-height: 32px; min-width: 32px; padding: 5px 0; font: 11px/1.2 var(--font-mono); color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); cursor: pointer; }
.draw-controls button:first-child { font-family: var(--font-body); font-size: 17px; }
button:disabled { opacity: .5; cursor: default; }
.draw-controls button:focus-visible, summary:focus-visible, #receipt-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.draw-status { font: 11px/1.4 var(--font-mono); min-height: 1.4em; margin: 10px 0; }
#receipt-details { font: 11px/1.5 var(--font-mono); padding-bottom: 12px; }
#receipt-details summary { min-height: 32px; cursor: pointer; display: list-item; padding: 6px 0; }
#receipt-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px; background: var(--pale); border-radius: 4px; text-transform: none; }
.readout { top: .5vh; }
@media (max-width: 1099px), (max-height: 700px) {
  .demo { max-height: none; overflow: visible; padding: 0; width: 100%; }
  .lede .author-credit { margin-top: 18px; }
  .draw-controls { gap: 4px 18px; }
  .draw-controls button, #receipt-copy { min-height: 44px; }
  .readout { top: auto; }
}
.seed-tag { text-transform: none; }
@media (max-width: 1099px), (max-height: 700px) {
  html, body { height: auto; min-height: 100%; overflow-x: clip; }
}
#replay-command { white-space: pre-wrap; overflow-wrap: anywhere; text-transform: none; background: var(--pale); padding: 12px; border-radius: 4px; }
@media (max-width: 1099px), (max-height: 700px) {
  .reshuffle, #receipt-details summary { min-height: 44px; }
}

/* Keep the desktop left column in reading flow. Its old absolute offsets let
   user text-spacing overrides print the intro across the draw controls. The
   minimum intro height retains the composition when the text fits; extra text
   now extends the document vertically, with the wordmark following the draw. */
@media (min-width: 1100px) and (min-height: 701px) {
  .page { display: flex; flex-direction: column; align-items: flex-start; overflow: visible; padding-bottom: 1.4vh; }
  .lede { position: relative; top: auto; min-height: 35vh; padding-top: 4.4vh; display: flow-root; }
  .demo { position: relative; top: auto; order: 1; }
  .wordmark { position: relative; bottom: auto; order: 2; margin-top: auto; max-width: calc(100% - 4.4vw); white-space: normal; overflow-wrap: anywhere; }
  .install-cta { max-width: 38.2vw; flex-wrap: wrap; justify-content: flex-end; }
}