/* Generated file: edit the design source, not this copy. */
/* bench labels look like wooden inventory slots; the wood follows the theme */
  :root[data-theme="dark"] .topic-tile .n { box-shadow: inset 0 0 0 2px rgba(255, 184, 28, .45); }

  /* hero: a sticky stage inside a tall track; scrolling takes the headset apart */
  .track { position: relative; height: 230vh; background: var(--hero-bg, var(--bg)); color: var(--fg); }
  .stage { position: sticky; top: 66px; height: calc(100svh - 66px); min-height: 600px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-width: 1280px; margin: 0 auto; padding: 0 24px; }
  .intro { align-self: center; padding: 24px 0; position: relative; z-index: 3; }
  .intro h1 { margin: 0; font-size: clamp(2.8rem, 6.4vw, 5.6rem); font-weight: 900; line-height: .98; }
  .intro h1 .hl + br + .hl { margin-top: .06em; }
  .intro p.lede { margin-top: 22px; font-size: 1.1875rem; max-width: 40ch; color: var(--muted); }
  .figure { position: relative; }
  /* the canvas fades out at its edges so the scene melts into the page instead of sitting in a box */
  #gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 16%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent); mask-composite: intersect; }
  #gl:active { cursor: grabbing; }
  /* the still picture of the visor (rendered from this scene, the 3D start view) shows straight away as the canvas
     background; the 3D paints over it once three.js has loaded. The hero background matches the stills */
  .track { --hero-bg: #fff9f4; }
  [data-theme="dark"] .track { --hero-bg: #170c0b; }
  #gl { background: url(../stills/visor-light.webp) center / cover no-repeat; }
  [data-theme="dark"] #gl { background-image: url(../stills/visor-dark.webp); }
  .fig-cap { position: absolute; right: 0; top: 18px; max-width: 290px; padding-top: 8px; border-top: 2px solid var(--accent); font: 500 .875rem/1.45 var(--f-body); color: var(--muted); transition: opacity .3s; z-index: 2; }
  .fig-cap b { font: 400 .8125rem/1 var(--f-pixel); color: var(--accent); margin-right: 6px; }
  .stage.open .fig-cap { opacity: 0; }
  .leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
  .leaders path { fill: none; stroke: var(--fg); stroke-width: 1.5; }
  .leaders circle { fill: var(--surface); stroke: var(--fg); stroke-width: 2; }
  .leaders text { font: 400 10px/1 var(--f-pixel); fill: var(--fg); text-anchor: middle; dominant-baseline: central; }
  /* the hovered label's line and number light up in the label's own hover colours, so label, line and part read as one */
  .leaders path.hot { stroke: var(--coral); stroke-width: 2.5; }
  .leaders circle.hot { fill: var(--amber); stroke: var(--ink); }
  .leaders text.hot { fill: var(--ink); }

  /* the mages stand on either side of the headset; Chary is mirrored so both cast towards it */
  .mage { position: absolute; bottom: 2%; height: clamp(120px, 24vh, 210px); background-repeat: no-repeat; pointer-events: none; z-index: 1; }
  #cas { left: -2%; } #chary { right: -2%; }
  /* they stand on the same grid as the headset: a soft contact shadow under their feet, a coloured glow on the neon floor in dark mode */
  #cas::after, #chary::after { content: ""; position: absolute; left: 51%; bottom: 0; width: 34%; height: 9%; transform: translate(-50%, 40%); border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 18, 20, .3), rgba(26, 18, 20, 0)); }
  :root[data-theme="dark"] #cas::after { background: radial-gradient(closest-side, rgba(255, 79, 163, .4), rgba(255, 79, 163, 0)); }
  :root[data-theme="dark"] #chary::after { background: radial-gradient(closest-side, rgba(255, 158, 31, .4), rgba(255, 158, 31, 0)); }
  /* sitting takes up more floor, so the shadow widens with the pose */
  #cas[data-pose="sit"]::after, #chary[data-pose="sit"]::after { left: 48%; width: 46%; height: 11%; }
  /* a two-step pixel hop when they stand up or sit down, so the pose change reads as movement and not a jump cut */
  .mage.hop { animation: hop .3s steps(3) both; }
  @keyframes hop { 40% { translate: 0 -5%; } }
  /* spell sparks fly over the scene, under the labels */
  #fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; image-rendering: pixelated; }

  /* both button texts sit in the same spot and only one shows, so the button keeps its size when the text changes */
  #explode { display: inline-grid; place-items: center; }
  #explode > span { grid-area: 1 / 1; }
  #explode[aria-pressed="true"] .to-apart, #explode[aria-pressed="false"] .to-whole { visibility: hidden; }

  /* callout labels: one markup, styled per hero look */
  .parts { list-style: none; margin: 0; padding: 0; }
  .part { position: absolute; left: 0; top: 0; width: 210px; opacity: 0; transition: opacity .3s; will-change: transform; z-index: 3; }
  .stage.open .part { opacity: 1; }
  /* label chips: dashed outline, dark number slot with amber pixel digits, coral part name, topic, article count */
  .part a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; align-content: center; min-height: 5.8rem; padding: 10px 12px; text-decoration: none; color: var(--fg); background: var(--surface); border: 2px dashed var(--rule); transition: background .15s, border-color .15s; }
  .part a:hover, .part a:focus-visible, .part.lit a { background: var(--amber); color: var(--ink); border-style: solid; border-color: var(--ink); }
  .part .slot { grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; background: var(--ink); font: 400 .8125rem/1 var(--f-pixel); color: var(--amber); }
  .part small { font: 400 .625rem/1.2 var(--f-pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
  .part strong { font: 800 .9375rem/1.15 var(--f-title); }
  .part span { font-size: .75rem; color: var(--muted); }
  .part a:hover small, .part a:focus-visible small, .part a:hover span, .part a:focus-visible span, .part.lit small, .part.lit span { color: var(--ink); }
  /* stepped "pixel" corners for the topic number slots */
  .px { clip-path: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)); }

  @media (max-width: 900px) {
    .track { height: auto; }
    .stage { position: relative; top: 0; height: auto; grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
    .figure { padding-bottom: 8px; }
    #gl { position: relative; height: 52svh; min-height: 340px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
    /* same height as the canvas above (52svh, at least 340px), so the mages stand on its floor on small phones too */
    .figure .mage { top: calc(max(52svh, 340px) - 130px); bottom: auto; height: 120px; }
    #cas { left: 0; } #chary { right: 0; }
    .part { position: static; width: auto; opacity: 1; transform: none !important; }
    /* every label the same size (rows share the tallest height), text centred in it. A smaller number slot leaves room
       for the longest word ("exoskeletons"), so words wrap whole instead of breaking */
    .parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 24px; }
    .part { display: flex; }
    .part a { flex: 1; min-height: 0; gap: 2px 8px; padding: 8px; overflow-wrap: break-word; }
    .part .slot { width: 30px; height: 30px; }
    .part strong { font-size: .875rem; }
    .leaders, .fig-cap { display: none; }
  }
  /* the smallest phones: two columns leave the label text about 70 px, so one column keeps each label to one line */
  @media (max-width: 360px) { .parts { grid-template-columns: minmax(0, 1fr); } }
  /* narrow phones: a little smaller, so the two don't overlap */
  @media (max-width: 420px) { .figure .mage { top: calc(max(52svh, 340px) - 108px); height: 100px; } }
  @media (max-width: 900px) and (max-height: 600px) { .figure .mage { display: none; } }

  /* the flat version: browsers without 3D (WebGL), slow connections, and ?3d=off for testing. A still of the visor
     taken apart (light or dark), cropped tight so there's no empty space above it, its sides fading into the page
     like the 3D canvas; the topic labels are listed below it */
  .no-gl .track { height: auto; }
  .no-gl .stage { position: relative; top: 0; height: auto; min-height: 0; padding-top: 32px; padding-bottom: 48px; align-items: start; }
  /* the headline lines up with the top of the picture, not the middle of picture plus topic list */
  .no-gl .intro { align-self: start; padding-top: clamp(24px, 6vh, 64px); }
  .no-gl .figure::before { content: ""; display: block; width: 100%; aspect-ratio: 670 / 551; max-height: 56svh; background: url(../stills/exploded-light.webp) center / contain no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
  [data-theme="dark"].no-gl .figure::before { background-image: url(../stills/exploded-dark.webp); }
  .no-gl .part { position: static; width: auto; opacity: 1; transform: none !important; }
  .no-gl .parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 20px; }
  .no-gl .leaders, .no-gl .fig-cap, .no-gl #explode, .no-gl .mage, .no-gl #fx { display: none; }

  /* topics: big numbers in inventory slots, with a colour wipe */
  .sec-note { margin-top: 10px; color: var(--muted); }
  .topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

  .topic-tile .icon .c { stroke: var(--coral); }
  .topic-tile .icon .f { fill: var(--coral); stroke: none; }
  .topic-tile:hover .icon, .topic-tile:focus-visible .icon { color: var(--ink); }
  .topic-tile { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-content: start; padding: 22px 24px; text-decoration: none; background: var(--surface); border: 2px solid var(--rule); box-shadow: var(--sh-s) var(--sh-s) 0 var(--shade); isolation: isolate; overflow: hidden; transition: transform .15s, box-shadow .15s, color .3s; }
  .topic-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
  .topic-tile:hover, .topic-tile:focus-visible { color: var(--ink); transform: translate(-2px, -2px); box-shadow: calc(var(--sh-s) + 2px) calc(var(--sh-s) + 2px) 0 var(--shade); }
  .topic-tile:hover::after, .topic-tile:focus-visible::after { transform: scaleX(1); }
  .topic-tile .n { grid-row: span 3; width: 64px; height: 64px; display: grid; place-items: center; background: var(--ink); font: 400 1.5rem/1 var(--f-pixel); color: var(--amber); }
  .topic-tile strong { margin-top: 4px; font: 800 1.25rem/1.1 var(--f-title); }
  .topic-tile small { font: 400 .6875rem/1.3 var(--f-pixel); text-transform: uppercase; color: var(--accent); }
  .topic-tile span { margin-top: 4px; color: var(--muted); font-size: .9375rem; }
  .topic-tile:hover small, .topic-tile:focus-visible small, .topic-tile:hover span, .topic-tile:focus-visible span { color: var(--ink); }
  /* the tiles are narrower (four across): number slot and drawing on top, then the text underneath */
  .topics .topic-tile { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 20px 22px; }
  .topics .topic-tile .n { grid-column: 1; grid-row: 1; width: 52px; height: 52px; font-size: 1.25rem; }
  .topics .topic-tile .icon { grid-column: 2; grid-row: 1; width: 56px; height: 56px; color: var(--fg); }
  .topics .topic-tile strong { grid-column: 1 / -1; margin-top: 14px; }
  .topics .topic-tile small, .topics .topic-tile span { grid-column: 1 / -1; }
  @media (max-width: 1100px) { .topics { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .topics { grid-template-columns: 1fr; } }

  /* who we are, with the two mages as name tags */
  .about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
  .about p { margin-top: 18px; font-size: 1.1875rem; color: var(--muted); max-width: 50ch; }
  .duo { display: flex; gap: 8px; margin-top: 26px; }
  .duo figure { margin: 0; text-align: center; }
  .duo .mage-box { position: relative; width: 190px; height: 117px; overflow: hidden; }
  .duo .mage { position: absolute; left: 0; bottom: 0; height: 117px; }
  .duo figcaption { display: inline-block; margin-top: 6px; padding: 5px 9px; background: var(--ink); color: var(--paper); font: 400 .75rem/1 var(--f-pixel); }
  .duo figcaption i { font-style: normal; color: var(--amber); }
  /* photos (from the media kit) share one 4:3 frame; the wide selfie is cropped at the sides, around both faces */
  .photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--block-bg); border: 2px solid var(--rule); }
  .photo img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about .photo { max-width: 420px; } }
  @media (max-width: 420px) { .duo .mage-box { width: 150px; } }
  /* the smallest phones (320 px): narrower boxes, with each mage shifted so the crop only takes empty space off the sprite */
  @media (max-width: 360px) { .duo .mage-box { width: 128px; } .duo .mage { left: -12px; } }

  /* work with us: the facet panel itself is in shared/site.css (the contact page uses it too) */