/* A fixed reader frame, not a long web page. Only the paper scrolls.
   Keep this screen-only so the existing full-content print edition is intact. */
@media screen {
  html { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body {
    position: fixed; inset: var(--reader-top, 0px) 0 auto;
    width: 100%; height: 100vh; height: var(--reader-height, 100dvh);
    overflow: hidden; overscroll-behavior: none;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  body > header { width: 100%; padding: 12px 28px; gap: 12px; }
  body > main {
    width: 100%; min-width: 0; min-height: 0; margin: 0 auto;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
    padding: 0 28px;
  }
  .issue { padding: 10px 0; gap: 12px; }
  #count { white-space: nowrap; }
  .paperScene { min-height: 0; min-width: 0; }
  #stage { height: 100%; min-height: 0; }
  #stage > .page, .paperContent > .page {
    height: 100%; min-height: 0; max-height: none; aspect-ratio: auto;
    overflow: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; scroll-padding: 20px;
  }
  #stage > .page:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
  .sheet, .tk-page { padding: 28px 5%; }
  .sheet .pagefoot { position: static; margin-top: 30px; gap: 16px; }
  .visual { height: 48%; min-height: 170px; }
  .editorial { height: auto; min-height: 52%; padding: 22px 4%; }
  .article { flex: none; }
  .editorial .pagefoot { margin-top: 16px; gap: 16px; }
  .cover { background: #0d1715; }
  .cover .mast { position: relative; inset: auto; margin: 20px 6% 0; }
  .covercopy { position: relative; inset: auto; max-width: none; margin: 24px 7%; }
  .cover h1 { font-size: clamp(36px, 6.5vw, 76px); }
  .covercopy p { margin: 16px 0; }
  .cover .inset { position: relative; inset: auto; width: 23%; margin: 0 6% 20px auto; }
  .cover .folio { position: relative; inset: auto; display: block; text-align: right; padding: 0 6% 16px; }
  nav { min-width: 0; padding: 8px 0; gap: 12px; }
  #chapter { min-width: 0; }
  .controls { flex-shrink: 0; gap: 12px; }
  .controls > button { min-width: 44px; min-height: 44px; padding: 10px; }
  footer { padding: 6px 0 8px; gap: 16px; }
  dialog { max-height: calc(var(--reader-height, 100dvh) - 24px); overflow: auto; overscroll-behavior: contain; }
  .menuhead { position: sticky; top: -1px; background: var(--cream); z-index: 1; }
  @media (max-width: 900px) {
    #dots { display: none; }
  }
  @media (max-width: 700px) {
    body > header { padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
    .brand { gap: 8px; font-size: 10px; }
    .brand > div { max-width: none; }
    .brand small { display: inline; margin-left: 8px; font-size: 7px; }
    .official-logo { width: 40px; height: 30px; }
    .tools { max-width: none; justify-content: stretch; flex-wrap: nowrap; gap: 6px; }
    .tools button, #toolkit-start { flex: 1; min-height: 44px; padding: 8px 6px; font-size: 11px; }
    body > main { padding: 0 10px; }
    .issue { font-size: 8px; letter-spacing: 1px; padding: 7px 0; }
    .sheet, .tk-page { padding: 22px 20px; }
    .sheet h2, .tk-page h2 { font-size: 32px; margin: 16px 0; }
    .intro, .tk-intro { font-size: 17px; line-height: 1.55; }
    .signature { font-size: 20px; }
    .visual { height: 42%; min-height: 150px; }
    .editorial { min-height: 0; padding: 22px 20px; }
    .article h2 { font-size: 32px; margin: 18px 0; }
    .covercopy { margin: 20px 7%; }
    .cover h1 { font-size: clamp(34px, 10vw, 50px); letter-spacing: -1.5px; }
    .covercopy p { font-size: 17px; }
    .cover .inset { width: 32%; }
    #chapter { max-width: none; font-size: 8px; line-height: 1.4; }
    footer { font-size: 7px; line-height: 1.3; }
  }
  /* Phone landscape / software keyboard: keep controls visible and paper usable. */
  @media (max-height: 500px) and (min-width: 560px) {
    body > header { display: flex; padding: 6px 12px; }
    .official-logo { width: 40px; height: 30px; }
    .brand { font-size: 9px; letter-spacing: 1px; }
    .brand small { font-size: 7px; margin-top: 4px; }
    .tools { max-width: none; flex-wrap: nowrap; }
    .tools button { min-height: 44px; padding: 8px; }
    body > main { padding: 0 12px; }
    .issue { padding: 5px 0; }
    nav { padding: 4px 0; }
    footer { padding: 3px 0; font-size: 8px; }
  }
}

/* LOCAL RECONSTRUCTION of Scott's accepted 2026-10-31 page-20 header.
   Scoped to the connected-tools page; reader and other spreads are unchanged. */
@media screen {
  .tk-page .tk-purpose {
    margin: -28px -5.555556% 28px; padding: 24px 16px;
    background: rgba(0, 0, 0, .72); color: #f3efe3; text-align: center;
  }
  .tk-page .tk-purpose h2 {
    max-width: none; margin: 0;
    font: 700 clamp(14px, 4.6vw, 28px)/1.2 Arial, sans-serif;
    letter-spacing: 0; text-transform: uppercase;
  }
  .tk-page .tk-purpose p { margin: 10px 0 0; font: 16px/1.2 Georgia, serif; }
  @media (max-width: 700px) {
    .tk-page .tk-purpose { margin: -22px -20px 28px; padding: 22px 16px; }
  }
}