/* Entropic Labs — mobile build.
   Shared by m/index.html and m/games.html. Phone-first: one column, tap
   targets at 48px and up, no fixed side padding smaller than a thumb, and
   nothing that depends on hover. The palette matches the full site. */

:root{
  --ink: #07050F;
  --panel: #130E22;
  --panel-raised: #1C1433;
  --ash: #9C93B8;
  --paper: #F1EEFB;
  --signal: #FF3FA0;
  --trace: #2FE0C7;
  --violet: #7C4DFF;
  --hairline: rgba(241,238,251,0.12);
  --hairline-strong: rgba(241,238,251,0.22);

  --font-display: "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --bar-h: 3.5rem;
  --pad: 1.15rem;
}

*{ box-sizing: border-box; }
html{
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection{ background: var(--signal); color: var(--ink); }

a{ color: inherit; -webkit-tap-highlight-color: rgba(47,224,199,0.18); }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--trace);
  outline-offset: 3px;
}

h1, h2, h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
}
img{ max-width: 100%; }

.wrap{ padding: 0 var(--pad); }
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trace);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

/* ---------- TOP BAR + MENU ---------- */
.bar{
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--pad);
  background: rgba(7,5,15,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.bar-brand{
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.bar-brand span{ color: var(--signal); }
.menu-btn{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  min-height: 2.5rem;
  padding: 0 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}
.menu-btn .bars{
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}
.menu-btn .bars i{
  display: block;
  width: 14px; height: 2px;
  background: var(--signal);
}

.menu{
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--ink);
  display: none;
  flex-direction: column;
  padding: 0 var(--pad) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[open]{ display: flex; }
body.menu-open{ overflow: hidden; }
.menu-top{
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
  flex: none;
}
.menu-title{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}
.menu-close{
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 1.6rem;
  line-height: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.menu ol{
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  counter-reset: nav;
}
.menu li{ counter-increment: nav; border-bottom: 1px solid var(--hairline); }
.menu li a{
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  min-height: 3.5rem;
  padding: 0.9rem 0;
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.35rem;
}
.menu li a::before{
  content: "0" counter(nav);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--ash);
  letter-spacing: 0.1em;
}
.menu li a[aria-current="page"]{ color: var(--signal); }
.menu-foot{
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ash);
}

/* ---------- HERO ---------- */
/* overrides the shared section padding so the banner meets the bar */
.hero{ padding: 0; border-bottom: 1px solid var(--hairline); }
/* Lighter than the desktop treatment — a fade in, a very slow push, and an
   aurora that breathes. No sheen sweep here: one fewer continuous layer to
   composite on a phone. */
.hero-media{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  animation: hero-fade 900ms ease-out both;
}
/* The scene carries the push so backdrop, canvas, figures and subtitle scale
   together and stay registered. */
.hero-scene{
  position: relative;
  transform-origin: 50% 42%;
  animation: hero-push 64s ease-in-out infinite alternate;
}
.hero-banner{
  display: block;
  width: 100%;
  height: auto;
}
.hero-fx{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Figures cut out of the artwork and screen-blended back on. No hover on a
   phone, so hero.js gives each one a turn. */
.hero-fig{
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  mix-blend-mode: screen;
  transition: transform 0.45s cubic-bezier(.3,.8,.4,1);
}
.hero-fig--bike{  left: 5.990%;  top: 64.484%; width: 8.906%;  height: 15.556%; background-image: url(../img/hero-fig-bike.png);  transform-origin: 50% 97%; }
.hero-fig--cycle{ left: 25.163%; top: 65.687%; width: 8.203%;  height: 14.352%; background-image: url(../img/hero-fig-cycle.png); transform-origin: 50% 96%; }
.hero-fig--skate{ left: 43.021%; top: 65.429%; width: 10.130%; height: 15.648%; background-image: url(../img/hero-fig-skate.png); transform-origin: 42% 96%; }
.hero-fig--board{ left: 61.608%; top: 64.664%; width: 10.599%; height: 17.685%; background-image: url(../img/hero-fig-board.png); transform-origin: 50% 88%; }
.hero-fig--truck{ left: 81.172%; top: 68.808%; width: 9.115%;  height: 11.759%; background-image: url(../img/hero-fig-truck.png); transform-origin: 50% 98%; }




/* Speed lines for the road bike, trailing off the back — it faces right. */
.hero-fig--cycle::before,
.hero-fig--cycle::after{
  content: "";
  position: absolute;
  height: 2.4%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,224,199,0), rgba(47,224,199,0.85));
  opacity: 0;
  pointer-events: none;
}
.hero-fig--cycle::before{ top: 44%; left: -17%; width: 32%; }
.hero-fig--cycle::after{  top: 63%; left: -11%; width: 24%; }

  .hero-fig--bike.is-playing{ animation: fig-bike 1.8s cubic-bezier(.33,.9,.36,1) infinite; }
.hero-fig--cycle.is-playing{ animation: fig-cycle 0.62s linear infinite; }
.hero-fig--skate.is-playing{ animation: fig-skate 1.9s cubic-bezier(.4,.75,.4,1) infinite; }
.hero-fig--board.is-playing{ animation: fig-board 2.6s cubic-bezier(.36,.7,.4,1) infinite; }
.hero-fig--truck.is-playing{ animation: fig-truck 2.4s cubic-bezier(.4,.85,.4,1) infinite; }
.hero-fig--cycle.is-playing::before{ animation: speed-line 0.62s linear infinite; }
.hero-fig--cycle.is-playing::after{ animation: speed-line 0.62s linear infinite 0.31s; }

/* Mountain biker — the fork soaks up a hit: wheel lifts, suspension packs
   down under load, rebounds past neutral, then a smaller second cycle. */
@keyframes fig-bike{
  0%,100%{ transform: translateY(0) scaleY(1) rotate(0deg); }
  8%{  transform: translateY(-2.4%) scaleY(1.015) rotate(-1.4deg); }
  18%{ transform: translateY(1.8%) scaleY(0.930) rotate(0.6deg); }
  30%{ transform: translateY(-1.2%) scaleY(1.030) rotate(-0.5deg); }
  42%{ transform: translateY(0.6%) scaleY(0.975) rotate(0.2deg); }
  55%{ transform: translateY(-0.3%) scaleY(1.008) rotate(0deg); }
  70%{ transform: translateY(0.2%) scaleY(0.995) rotate(0deg); }
}
/* Road cyclist — held low in the aero tuck, quick cadence, road speed shown
   by the lines streaming off the back rather than by moving the rider. */
@keyframes fig-cycle{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  25%{ transform: translateY(-0.7%) rotate(-0.35deg); }
  50%{ transform: translateY(0.2%) rotate(0deg); }
  75%{ transform: translateY(-0.5%) rotate(0.25deg); }
}
@keyframes speed-line{
  0%{ opacity: 0; transform: translateX(20%) scaleX(0.55); }
  30%{ opacity: 0.9; }
  100%{ opacity: 0; transform: translateX(-34%) scaleX(1.15); }
}
/* Skateboarder — a real ollie: crouch, snap the tail so the nose comes up,
   drag the front foot to level it out, float, then land and absorb. */
@keyframes fig-skate{
  0%,100%{ transform: translateY(0) rotate(0deg) scaleY(1); }
  14%{ transform: translateY(1.6%) rotate(0.5deg) scaleY(0.94); }
  26%{ transform: translateY(-3.5%) rotate(-13deg) scaleY(1.02); }
  38%{ transform: translateY(-8.5%) rotate(-4deg) scaleY(1); }
  50%{ transform: translateY(-7.5%) rotate(1.5deg) scaleY(1); }
  64%{ transform: translateY(-2%) rotate(2.5deg) scaleY(1); }
  74%{ transform: translateY(0) rotate(0deg) scaleY(0.92); }
  86%{ transform: translateY(0) rotate(0deg) scaleY(1.02); }
}
/* Snowboarder — load the board, pop, and carry a 300-degree spin round the
   vertical axis, unwinding it on the way down to land straight. */
@keyframes fig-board{
  0%,100%{ transform: perspective(700px) translateY(0) rotateY(0deg) scaleY(1); }
  10%{ transform: perspective(700px) translateY(2%) rotateY(0deg) scaleY(0.93); }
  24%{ transform: perspective(700px) translateY(-6.5%) rotateY(105deg) scaleY(1.04); }
  40%{ transform: perspective(700px) translateY(-10.5%) rotateY(230deg) scaleY(1); }
  52%{ transform: perspective(700px) translateY(-10.5%) rotateY(300deg) scaleY(1); }
  68%{ transform: perspective(700px) translateY(-7%) rotateY(215deg) scaleY(1); }
  82%{ transform: perspective(700px) translateY(-2%) rotateY(90deg) scaleY(1); }
  90%{ transform: perspective(700px) translateY(0) rotateY(0deg) scaleY(0.94); }
  96%{ transform: perspective(700px) translateY(0) rotateY(0deg) scaleY(1.02); }
}
/* Off-road truck — trail chatter under both axles, then a bigger hit: nose
   lifts, springs pack down, rebound, settle. */
@keyframes fig-truck{
  0%,100%{ transform: translateY(0) rotate(0deg) scaleY(1); }
  9%{  transform: translateY(-0.8%) rotate(-1.2deg) scaleY(1.010); }
  17%{ transform: translateY(0.9%) rotate(-0.4deg) scaleY(0.965); }
  26%{ transform: translateY(-1.4%) rotate(1.4deg) scaleY(1.020); }
  36%{ transform: translateY(0.6%) rotate(0.5deg) scaleY(0.980); }
  46%{ transform: translateY(-0.4%) rotate(-0.3deg) scaleY(1.005); }
  58%{ transform: translateY(-2.4%) rotate(-2deg) scaleY(1.015); }
  68%{ transform: translateY(1.4%) rotate(-0.6deg) scaleY(0.945); }
  78%{ transform: translateY(-1%) rotate(1.2deg) scaleY(1.025); }
  88%{ transform: translateY(0.4%) rotate(0.3deg) scaleY(0.990); }
}

/* the strapline, re-set as live text so it can turn on its own axis */
.hero-subtitle{
  position: absolute;
  left: 30.729%; top: 43.889%;
  width: 38.542%; height: 2.870%;
  perspective: 600px;
  pointer-events: none;
}
.hero-subtitle svg{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: sub-turn 9s ease-in-out infinite;
}
.hero-subtitle text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: 20px;
  fill: #EAF6FF;
}
@keyframes sub-turn{
  0%,100%{ transform: rotateY(-11deg) rotateX(2deg); }
  50%{ transform: rotateY(11deg) rotateX(-2deg); }
}
.hero-aurora{
  position: absolute;
  inset: -12%;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(38% 44% at 33% 33%, rgba(124,77,255,0.28), transparent 70%),
    radial-gradient(30% 38% at 67% 27%, rgba(255,63,160,0.18), transparent 72%);
  animation: hero-aurora 30s ease-in-out infinite alternate;
}
@keyframes hero-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes hero-push{
  from{ transform: scale(1.004); }
  to{ transform: scale(1.04); }
}
@keyframes hero-aurora{
  from{ transform: translate3d(-1.5%,-1%,0) scale(1); opacity: 0.5; }
  to{ transform: translate3d(2%,1.5%,0) scale(1.08); opacity: 0.92; }
}
.hero-content > *{ animation: hero-rise 700ms cubic-bezier(.16,.84,.44,1) both; }
.hero-content .eyebrow{ animation-delay: 240ms; }
.hero-content .hero-sub{ animation-delay: 380ms; }
.hero-content .cta-stack{ animation-delay: 520ms; }
@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}
.hero-content{ padding: 1.6rem var(--pad) 2.2rem; }
.rec-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(255,63,160,0.18);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }
.hero h1{
  font-size: 2.1rem;
  margin: 1rem 0 0;
}
.hero h1 span{ color: var(--signal); }
.hero-sub{
  color: var(--ash);
  margin: 1rem 0 0;
  font-size: 1.02rem;
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  min-height: 3.25rem;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
}
.btn-solid{ background: var(--signal); color: var(--ink); font-weight: 700; }
.btn-line{ border-color: var(--hairline-strong); color: var(--paper); background: none; }
.btn:active{ transform: translateY(1px); }
.cta-stack{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.game-panel .cta-stack{ margin-top: 0; }

/* ---------- SECTIONS ---------- */
section{ padding: 2.8rem 0; border-bottom: 1px solid var(--hairline); }
section:last-of-type{ border-bottom: 0; }
.section-head{
  padding: 0 var(--pad);
  margin-bottom: 1.6rem;
}
.section-index{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--ash);
  display: block;
  margin-bottom: 0.5rem;
}
.section-head h2{ font-size: 1.75rem; }
.body-copy{ padding: 0 var(--pad); }
.body-copy p{
  color: #E4DFF2;
  font-size: 1.04rem;
  margin: 0 0 1.1rem;
}
.body-copy p:last-child{ margin-bottom: 0; }

/* ---------- FACT LISTS ---------- */
.fact-list{
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 var(--pad);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ash);
}
.fact-list li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px dashed var(--hairline);
}
.fact-list li span:last-child{ color: var(--paper); text-align: right; }

/* ---------- FIGURES ---------- */
figure{ margin: 0; }
.photo{
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
}
.photo img{ display: block; width: 100%; height: auto; }
/* the code in the photo's background, carried on live over the top of it */
.photo-rain{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.photo figcaption{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ash);
  padding: 0.85rem var(--pad);
  border-top: 1px solid var(--hairline);
}

/* ---------- GEAR: cards, not a scrolling table ---------- */
.gear-list{
  list-style: none;
  margin: 0;
  padding: 0 var(--pad);
}
.gear-list li{
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.gear-list li:first-child{ border-top: 1px solid var(--hairline); }
.gear-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}
.gear-unit{ font-weight: 600; }
.gear-type{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--trace);
  text-align: right;
  flex: none;
}
.gear-note{
  color: var(--ash);
  font-size: 0.92rem;
  margin: 0.35rem 0 0;
}
.gear-note a{ color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }

/* ---------- PROJECTS ---------- */
.sessions{
  list-style: none;
  margin: 0;
  padding: 0 var(--pad);
}
.sessions li{
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.sessions li:first-child{ border-top: 1px solid var(--hairline); }
.session-year{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ash);
  flex: none;
}
.session-title{ flex: 1; }
.session-title small{
  display: block;
  color: var(--ash);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
.session-tag{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trace);
  flex: none;
}

/* ---------- CARD (side room, contact CTA) ---------- */
.card{
  margin: 0 var(--pad);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--signal);
  padding: 1.25rem;
}
.card p{ margin: 0 0 1.2rem; color: #E4DFF2; }
.card p:last-child{ margin-bottom: 0; }
/* the observatory is the same kind of room, marked in the other colour */
.card.dark-room{ border-left-color: var(--trace); }
.card.warm-room{ border-left-color: #FFC46B; }

/* ---------- CONTACT ---------- */
.patchbay{
  list-style: none;
  margin: 0;
  padding: 0 var(--pad);
}
.patchbay li{
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.patchbay li:first-child{ border-top: 1px solid var(--hairline); }
.jack-label{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
  display: block;
  margin-bottom: 0.5rem;
}
.jack-value{ font-size: 1.02rem; word-break: break-word; }
.jack-value a{ color: var(--paper); }
.contact-note{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--ash);
  padding-left: 0.9rem;
  border-left: 2px solid var(--hairline-strong);
}

/* ---------- GAMES ----------
   Each game is a disclosure, so the catalog stays a short list on a phone and
   the write-up plus play button open on the one that gets tapped. */
.game{
  border-bottom: 1px solid var(--hairline);
}
.game:first-of-type{ border-top: 1px solid var(--hairline); }
.game > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1.15rem var(--pad);
  cursor: pointer;
  list-style: none;
}
.game > summary::-webkit-details-marker{ display: none; }
.summary-main{ display: flex; flex-direction: column; gap: 0.4rem; }
.game[open] > summary{ border-bottom: 1px solid var(--hairline); }
.game-panel{ padding: 1.4rem var(--pad) 1.8rem; }
.game-index{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ash);
  display: block;
}
.game h2{ font-size: 1.3rem; }
.game-meta{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--trace);
  margin: 0;
  line-height: 1.5;
  display: block;
}
.game-toggle{
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trace);
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  white-space: nowrap;
}
.game-toggle::after{ content: "View +"; }
.game[open] .game-toggle::after{ content: "Close –"; }
.game-flag{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ash);
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.85rem;
  border-left: 2px solid var(--hairline-strong);
  background: rgba(241,238,251,0.03);
  line-height: 1.55;
}
.game-body{ margin-top: 1.4rem; }
.game-body p{
  color: #E4DFF2;
  font-size: 1rem;
  margin: 0 0 1rem;
}
.game-body p:last-child{ margin-bottom: 0; }
.game-body code{
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--trace);
  background: rgba(241,238,251,0.06);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* ---------- FOOTER ---------- */
footer{
  border-top: 1px solid var(--hairline);
  padding: 1.8rem var(--pad) calc(2.2rem + env(safe-area-inset-bottom));
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ash);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.view-switch{
  color: var(--trace);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  align-self: flex-start;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

/* Small phones */
@media (max-width: 360px){
  :root{ --pad: 0.95rem; }
  .hero h1{ font-size: 1.85rem; }
  .gear-head{ flex-direction: column; gap: 0.2rem; }
  .gear-type{ text-align: left; }
}

/* Wider phones and tablets: keep the measure readable rather than stretching */
@media (min-width: 600px){
  :root{ --pad: 2rem; }
  .hero h1{ font-size: 2.6rem; }
  .btn{ width: auto; min-width: 16rem; }
  .cta-stack{ flex-direction: row; flex-wrap: wrap; }
  .body-copy, .fact-list, .gear-list, .sessions, .patchbay, .game-body{ max-width: 40rem; }
}

@media (prefers-reduced-motion: reduce){
  .rec-dot{ animation: none; }
  .hero-media, .hero-scene, .hero-aurora, .hero-content > *,
  .hero-fig, .hero-subtitle svg{ animation: none; }
  .hero-aurora{ opacity: 0.6; }
  .hero-subtitle svg{ transform: none; }
  *{ transition: none !important; }
}