/* subpage-toy.css — the homepage's look on the other pages: the header diorama, the gradient
 * second line of titles, toy-like panels that stand on a solid edge, and class pictures.
 * Loaded after skin.css on every page but the homepage (subpage-toy.js adds the pieces). */
:root { --toy-grad: linear-gradient(100deg, var(--track-1), oklch(70% 0.16 290) 50%, var(--track-2)); --toy-edge: rgb(0 0 0 / 26%); }
html[data-theme="light"] { --toy-edge: rgb(14 20 32 / 12%); }
/* the header backdrop grows a little as the page scrolls on (skin.css) and the aurora reaches past the
 * edge; keep them from making the page scroll sideways. On body alone the value is handed up to the
 * viewport, where it does not clip, so the root clips too. */
html, body.v2-content { overflow-x: clip; }

/* ---- header: the statement on the left, the diorama on the right ---- */
.page-hero.has-toy .toy-hero { position: absolute; z-index: 1; right: max(-4vw, -56px); top: 50%; translate: 0 -50%;
  width: min(50%, 660px); aspect-ratio: 1.08; pointer-events: none; }
.toy-hero canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-standard, ease);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 74%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 74%, transparent 100%); }
.toy-hero canvas[data-ready] { opacity: 1; }
@media (min-width: 1100px) {
  .page-hero.has-toy > .kicker, .page-hero.has-toy > h1, .page-hero.has-toy > .lead, .page-hero.has-toy > .page-meta, .page-hero.has-toy > .board-nav,
  .page-hero.has-toy > .professional-hero-copy, .page-hero.has-toy > div:not(.toy-hero):not(.v2-backdrop) { max-width: min(780px, 54%); }
  .page-hero.has-toy .v2-veil { background: linear-gradient(90deg, var(--paper) 0%, color-mix(in oklab, var(--paper) 80%, transparent) 34%, transparent 62%), linear-gradient(180deg, transparent 72%, var(--paper)); }
}
@media (max-width: 1099px) {
  .page-hero.has-toy { padding-top: 24px; }
  .page-hero.has-toy .toy-hero { position: relative; right: auto; top: auto; translate: none; order: -1; width: min(100%, 520px); aspect-ratio: 1.25; margin: 0 auto 8px; }
}
.toy-hero.is-inline { position: relative; width: calc(100% + 24px); aspect-ratio: 1.45; margin: -18px -12px 4px; pointer-events: none; }
@media print { .toy-hero { display: none; } }

/* ---- titles: the second line in the homepage's gradient ---- */
.v2-content .page-hero h1 em, .v2-content .section h2 em, .v2-content .split-vis .w.em > span {
  background: var(--toy-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-content .split-vis .w.em > span { background-size: 400% 100%; }
.v2-content .split-vis .w.em:nth-of-type(2n) > span { background-position: 60% 0; }

/* ---- panels: rounder, standing on a solid edge like the 3D kit's blocks, lifting on hover ---- */
.v2-content :is(.track, .card-grid > *, .resource, .participate-panel, .team-card, .research-group, .contact-grid > *, .kv, .callout, .panel, .card, .contact-card, .harness-subtrack-card) {
  border-radius: 20px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 6px 0 var(--toy-edge), 0 24px 40px -26px rgb(0 0 0 / 70%);
  transition: translate .35s cubic-bezier(.34, 1.4, .5, 1), box-shadow .35s var(--ease-standard, ease); }
@media (hover: hover) and (pointer: fine) {
  .v2-content :is(.card-grid > *, .resource, .team-card, .contact-grid > *, .card, .contact-card, .harness-subtrack-card):hover {
    translate: 0 -4px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 10px 0 var(--toy-edge), 0 30px 48px -26px rgb(0 0 0 / 75%); }
}
.v2-content .track { box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 8px 0 color-mix(in oklab, var(--accent, var(--brand)) 26%, transparent), 0 30px 50px -30px rgb(0 0 0 / 75%); }
.page-footer-nav a { border-radius: 20px; box-shadow: 0 6px 0 var(--toy-edge); transition: translate .35s cubic-bezier(.34, 1.4, .5, 1); }
.page-footer-nav a:hover { translate: 0 -3px; }
/* section kickers carry a small coloured bead, as the homepage's chapter labels do */
.v2-content .section-heading .kicker::after { content: ""; width: 7px; height: 7px; margin-left: -4px; border-radius: 50%; background: var(--track-1); box-shadow: 10px 0 0 var(--track-2), 20px 0 0 oklch(70% 0.16 290); order: -1; flex: none; }

/* ---- chapter pictures: a toy spot over each chapter heading ---- */
.toy-spot { display: block; width: 132px; height: 99px; margin: 0 0 10px -14px; }
@media (max-width: 760px) { .toy-spot { width: 104px; height: 78px; margin-left: -10px; } }
.toy-spot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.toy-spot .bg { fill: color-mix(in oklab, var(--tc) 24%, #1a2338); }
.toy-spot .sh { fill: rgb(0 0 0 / 28%); }
html.js:not(.rm) .v2-in .toy-spot svg, html.js:not(.rm) .toy-spot.is-in svg { animation: toy-pop .7s cubic-bezier(.34, 1.4, .5, 1) both .1s; }
@keyframes toy-pop { from { opacity: 0; transform: translateY(12px) scale(.8); } }

/* ---- the class pictures beside the Challenge page's classes ---- */
.toy-badge { --tc: var(--accent, var(--brand)); display: block; width: 52px; height: 52px; align-self: center; border-radius: 14px;
  background: color-mix(in oklab, var(--tc) 12%, var(--surface)); box-shadow: 0 4px 0 var(--toy-edge); }
.toy-badge svg { display: block; width: 100%; height: 100%; }
.toy-badge .sh { display: none; }
.toy-badge .bg { fill: transparent; }
.v2-page-challenge .class-row.has-badge { grid-template-columns: 52px 150px minmax(0, 1fr) auto auto; }
.v2-page-challenge .class-row.has-badge .toy-badge { grid-row: span 2; }
.v2-page-challenge .class-item:has(.has-badge) .class-desc { padding-left: 70px; }
@media (max-width: 760px) {
  .v2-page-challenge .class-row.has-badge { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .v2-page-challenge .class-row.has-badge .toy-badge { width: 44px; height: 44px; grid-row: span 3; }
  .v2-page-challenge .class-row.has-badge .class-call { grid-column: 2 / -1; }
  .v2-page-challenge .class-item:has(.has-badge) .class-desc { padding-left: 58px; }
}
/* picture fills, as in the field books (metacase.css) */
.toy-badge .a, .toy-spot .a { fill: var(--tc); }
.toy-badge .v, .toy-spot .v { fill: oklch(70% 0.16 290); }
.toy-badge .bg2 { fill: color-mix(in oklab, var(--tc) 12%, var(--surface)); }
.toy-spot .bg2 { fill: var(--paper); }
.toy-badge .b, .toy-spot .b { fill: color-mix(in oklab, var(--tc) 45%, #fff); }
.toy-badge .w, .toy-spot .w { fill: #fffdf7; stroke: #eadcbd; stroke-width: 1.5; }
.toy-badge .k, .toy-spot .k { fill: #1d2638; }
.toy-badge .r, .toy-spot .r { fill: #f0727a; }
.toy-badge .g, .toy-spot .g { fill: #3fb27f; }
.toy-badge .y, .toy-spot .y { fill: #f2b545; }
.toy-badge .yl, .toy-spot .yl { fill: #ffd27a; }
.toy-badge .hl, .toy-spot .hl { fill: #fff; opacity: .32; }
.toy-badge .w + .hl, .toy-spot .w + .hl { opacity: 0; }
.toy-badge .ln, .toy-spot .ln { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.toy-badge .k.ln, .toy-spot .k.ln { stroke: #1d2638; }
.toy-badge .r.ln, .toy-spot .r.ln { stroke: #f0727a; }
.toy-badge .w.ln, .toy-spot .w.ln { stroke: #fff; fill: none; }
.toy-badge .y.ln, .toy-spot .y.ln { stroke: #f2b545; }
.toy-badge .b.ln, .toy-spot .b.ln { stroke: color-mix(in oklab, var(--tc) 45%, #fff); }
.toy-badge .sl, .toy-spot .sl { stroke-width: 3; }
.toy-badge .th, .toy-spot .th { stroke-width: 7; }
.toy-badge .tx, .toy-spot .tx { font: 700 15px/1 Inter, system-ui, sans-serif; fill: #fff; text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .toy-hero canvas { transition: none; } .v2-content :is(.card, .card-grid > *) { transition: none; } }

/* ---- the homepage's frame (metacase.css): the same column, hero eyebrow and chapter labels ---- */
/* the header bar keeps its own frame; everything below it takes the homepage's column */
.v2-content .container:not(.nav) { width: min(calc(var(--content-max) - 2 * var(--space-4)), calc(100% - 48px)); }
.v2-content .page-hero .kicker { gap: 14px; font: 400 12px/1.5 var(--font-mono); letter-spacing: .08em; color: var(--track-1); }
.v2-content .page-hero .kicker::before { width: 32px; background: currentColor; }
/* chapter labels read like the homepage's: the number in a small box, then the name, no rule or beads */
.v2-content .section-heading .kicker { gap: 10px; font: 400 12px/1.5 var(--font-mono); letter-spacing: .08em; color: var(--text-tertiary); }
.v2-content .section-heading .kicker::before, .v2-content .section-heading .kicker::after { content: none; }
.kicker-num { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--text-primary) 15%, transparent); color: var(--text-primary); font-size: 11px; }
/* the homepage has no page counter or scroll cue in its header */
.v2-content .v2-hero-index, .v2-content .v2-scroll-cue { display: none; }
/* hero calls to action, in the homepage's pill buttons (skin.css .button) */
.v2-content .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 14px; margin-top: 32px; }
@media (max-width: 520px) { .v2-content .hero-actions .button { width: 100%; justify-content: space-between; } }
/* the column is 48px narrower than before, so let the title keep its two lines */
@media (min-width: 1100px) { .v2-content .page-hero.has-toy > h1 { max-width: min(780px, 57%); } }
/* every chapter heading's second half takes the gradient, including the ones outside .section (the demo heading) */
.v2-content main h2 em { background: var(--toy-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }