/* v18 — desktop Codex workspace uses the available viewport rather than
   centring the three components in a narrow island. Content and assets unchanged. */
@media(min-width:1201px){
  html[data-theme="stone"] .codex{
    width:100%;
    max-width:none;
    margin:0;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:clamp(252px,18vw,315px) minmax(0,1.7fr) minmax(0,1.18fr);
    grid-template-areas:"index reader art";
    column-gap:clamp(18px,1.8vw,34px);
    align-items:start;
    padding:clamp(25px,3.7vh,45px) clamp(26px,2.4vw,46px) 30px;
  }
  html[data-theme="stone"] .catalog{
    grid-area:index;
    width:100%;
    min-width:0;
    min-height:0;
    max-height:calc(100dvh - var(--header) - 85px);
    margin:0;
  }
  html[data-theme="stone"] .reader{
    grid-area:reader;
    width:100%;
    min-width:0;
    height:clamp(600px,calc(100dvh - var(--header) - 94px),890px);
    align-self:start;
    margin:0;
  }
  html[data-theme="stone"] .book-stage{
    grid-area:art;
    min-width:0;
    width:100%;
    max-width:none;
    align-self:center;
    justify-self:center;
    margin:0;
  }
  html[data-theme="stone"] .book-button{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
  }
}
@media(min-width:701px) and (max-width:1200px){
  html[data-theme="stone"] .codex{
    max-width:none;
    width:100%;
    display:grid;
    grid-template-columns:clamp(235px,25vw,290px) minmax(0,1fr);
    grid-template-areas:"index reader" "index art";
    gap:22px;
    align-items:start;
    padding:30px clamp(20px,2.5vw,36px);
  }
  html[data-theme="stone"] .catalog{grid-area:index;width:100%;min-height:0;align-self:start}
  html[data-theme="stone"] .reader{grid-area:reader;width:100%;min-width:0;height:clamp(520px,67vh,720px)}
  html[data-theme="stone"] .book-stage{grid-area:art;justify-self:center;max-width:620px;width:100%;padding:0}
  html[data-theme="stone"] .book-button{width:100%;margin:0}
}
@media(max-width:700px){
  html[data-theme="stone"] .codex{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"index" "reader" "art";
    gap:24px;
    padding:24px 17px 32px;
  }
  html[data-theme="stone"] .catalog{grid-area:index;width:100%;min-height:0;max-height:none}
  html[data-theme="stone"] .reader{grid-area:reader;width:100%;height:auto;min-height:460px;max-height:none}
  html[data-theme="stone"] .reader-scroll{height:auto;max-height:65vh;min-height:440px;overflow-y:auto}
  html[data-theme="stone"] .book-stage{grid-area:art;width:100%;justify-self:center;max-width:590px}
  html[data-theme="stone"] .book-button{width:100%;margin:0}
}