/* The 3D skill page and the templates gallery: their plates and fields sit on reading glass inside the world.
   Loaded after their own component styles and before glass.css. */
body { background: var(--color-ground); }
.plate.act, .field.act { min-height: auto; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.plate.act > .wrap, .field.act > .field__head, .field.act > .worlds {
  position: relative; background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--r-3);
  padding: clamp(24px, 2.6vw, 56px); background: var(--color-panel-smoke);
  box-shadow: inset 0 1px 0 var(--color-sheen), inset 1px 0 0 var(--color-edge-soft);
  width: min(100%, 96rem); margin-inline: 0;
}
.plate.act.act--right > .wrap { margin-left: auto; }
.field.act { flex-direction: column; align-items: stretch; gap: var(--s-4); }
.field.act > .field__head { width: min(100%, 60rem); }
.field.act.act--right > .field__head { margin-left: auto; }
.gh.act { min-height: 100svh; }
.gh.act > .wrap { position: relative; background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--r-3); padding: clamp(24px, 2.6vw, 56px); background: var(--color-panel-smoke); width: min(100%, 90rem); }
.plate .kicker, .field .kicker { font-family: var(--font-text); letter-spacing: 0.2em; }
.plate .h2, .plate h2, .field .h2 { font-family: var(--font-display); font-weight: 500; }
.plate .lede, .plate .body, .plate p, .plate li, .plate dt, .field p { color: var(--color-ink-soft); }
.plate .num, .plate dd, .plate b { color: var(--color-ink); }
.reveal { opacity: 1; }
html.js .arrive { animation: none; opacity: 1; transform: none; }
.aurora-text { background: none; -webkit-text-fill-color: currentColor; color: var(--color-sun); font-style: italic; }
.plate .cmd, .field .cmd { width: 100%; }
@media (max-width: 760px) { .plate.act, .field.act { padding: var(--s-7) 12px; } }

/* type follows the browser's zoom: the root stays 100% at every width (the old site.css stepped it up to 250%),
   and every size is rem first with a small vw part */
html:root { font-size: 100%; }
:root {
  --t-lede: clamp(1.1rem, 1rem + 0.18vw, 1.4rem);
  --t-h3: clamp(1.3rem, 1.1rem + 0.35vw, 1.9rem);
  --t-h2: clamp(2.25rem, 1.6rem + 1.5vw, 4.75rem);
  --t-display: clamp(3rem, 2rem + 2.6vw, 7rem);
}
.sum__eq b { font-size: clamp(1.25rem, 1rem + 1vw, var(--t-h2)); }
.gh__title { font-size: clamp(2.5rem, 1.8rem + 2.2vw, 6rem); }
.field__head .h2 { font-size: clamp(1.75rem, 1.4rem + 0.8vw, 2.75rem); }
.strip dd { font-size: clamp(1.75rem, 1.4rem + 0.6vw, 2.75rem); }