/* Two halves.

   Before: the text sat in the left third and the figures ended up parked in the
   bottom right sixth of the screen. Now the page divides down the middle. Text
   fills the left half properly, and the media panel is a full-height right half
   with the figure centred in it.

   The principles section opts out with class="wide" and runs full width, so the
   three cards get real room instead of being squeezed into half a page. */

/* ---------- left half: text ----------
   The left padding has to clear the contents rail completely. The rail runs to
   about 133px with its labels, so text starts past 160px and never sits under it. */
main section{
  max-width:none;
  padding-left:clamp(162px,12vw,220px);
  padding-right:clamp(24px,4vw,60px);
}
main section > *{max-width:min(46vw,660px)}
main section p{max-width:min(44vw,600px)}
main section .sub{max-width:min(44vw,600px)}
main section .serif{max-width:min(40vw,540px)}
main section h1{max-width:min(44vw,620px)}
main section h2{max-width:min(42vw,560px)}

footer{padding-left:clamp(162px,12vw,220px)}

@media (min-width:1180px){
  main section:not(.wide){padding-right:calc(50vw + 24px)}
}

/* ---------- principles: full width ----------
   The numbered-row styling itself lives in theme.css, because the inner
   pages use it too and they do not load this file. */
main section.wide{padding-right:clamp(24px,4vw,60px)}
main section.wide > *{max-width:1180px}

/* ---------- right half: media ---------- */
.media{
  position:fixed; right:0; top:0; width:50vw; height:100vh; z-index:6;
  display:flex; align-items:center; justify-content:center;
  padding:96px clamp(28px,3.4vw,56px) 72px clamp(12px,1.6vw,28px);
  pointer-events:none;
  transition:opacity .8s var(--ease);
}
.media.hide{opacity:0}
.fig{
  position:absolute; left:clamp(12px,1.6vw,28px); right:clamp(28px,3.4vw,56px);
  top:50%; translate:0 -50%;
  opacity:0; transform:translateY(16px) scale(.99);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.fig.on{opacity:1; transform:none}
.fig .frame{
  border:1px solid var(--plateline,rgba(19,25,22,.30));
  padding:12px; background:var(--platebg,rgba(228,231,223,.5));
}
.fig canvas{display:block;width:100%;height:auto;
  border:1px solid var(--plateline,rgba(19,25,22,.18))}
.fig .cap{
  display:flex;justify-content:space-between;gap:16px;margin-top:11px;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
.fig .cap b{color:var(--brass);font-weight:400}
.fig.pair .frame + .frame{margin-top:14px}

@media (max-width:1179px){
  .media{display:none}
  main section,main section.wide{padding-right:clamp(24px,4vw,60px)}
  main section > *,main section p,main section .sub,
  main section .serif,main section h1,main section h2{max-width:60ch}
}
@media (max-width:900px){
  main section,footer{padding-left:clamp(20px,4vw,32px)}
}