/* Home: the hero simulation, conditions, selected work, research band. Ported from the approved prototype.
   Layout: intro text and the two glass cards on the left, momentum space on the right, and a strip of figure
   panels (caption, controls) along the foot of the hero. */

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); touch-action: pan-y; }
#fs { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; visibility: hidden; }   /* shown once fermi/index.js has sized it, so it never shifts */

.hero-main { position: relative; display: flex; align-items: center; min-height: clamp(640px, 86vh, 860px); cursor: grab; }
.hero.dragging .hero-main { cursor: grabbing; }
/* A fixed width rather than a cap, so the canvases inside the column cannot change its width. */
.hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; width: min(540px, 42%); padding-block: clamp(24px, 5vw, 64px); cursor: auto; }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.32rem); line-height: 1.45; max-width: 32ch; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.facts span + span::before { content: "·"; margin-inline: 10px; color: var(--rule); }
.facts b { color: var(--ink); font-weight: 500; }
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.2rem, 6vw, 5.8rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin-left: -0.04em;
}

.stage { position: absolute; right: 0; top: 0; bottom: 0; width: 56%; pointer-events: none; --fs-y: 0.5; --fs-h: 0.9; }
.stage-label { position: absolute; left: 6%; top: 4px; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-2); }

/* Glass cards: magnetoresistance (c) then real space (b). Desktop: under the intro text.
   860 px and narrower: an inline script moves them into the stage, over the foot of the surface. */
.insets { display: flex; gap: 14px; pointer-events: none; }
.hero-text .insets { margin-top: 12px; }
.stage .insets { position: absolute; left: 0; right: 0; bottom: 0; gap: 10px; }
.float {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 11px 10px;
  display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--ground-2) 32%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 4px;
  pointer-events: auto;
  cursor: auto;
  animation: hover-y 7s ease-in-out infinite alternate;
}
.float-b { animation-delay: -3.5s; }
.float-c { order: -1; }   /* magnetoresistance on the left, real space on the right */
@keyframes hover-y { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }
/* Phones and tablets: a live backdrop blur over an animated canvas is re-rendered every frame, so skip the blur. */
@media (pointer: coarse), (max-width: 860px) {
  .float { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--ground-2) 58%, transparent); }
}
.stage-label b, .plabel b { color: var(--accent); font-weight: 500; margin-right: 6px; }

/* ---------- Figure caption and controls along the foot of the hero ---------- */
.panels { margin: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-top: 1px solid var(--rule); position: relative; z-index: 1; }
.panel { padding: 16px 18px 24px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel:first-child { border-left: 0; padding-left: 0; }
.panel.cap { display: block; font-size: 0.82rem; line-height: 1.58; color: var(--ink-2); }
.cap b { color: var(--ink); font-weight: 600; }
.cap b.fig { font-family: var(--mono); font-weight: 500; font-size: 0.7rem; margin-right: 4px; }
.cap i { font-style: italic; }
.phead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-2); }
.float .phead, .float .pfoot { font-size: 0.62rem; }
.phead output, .pfoot output { color: var(--ink); font-variant-numeric: tabular-nums; }
.pfoot { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-2); }
#rs, #mrc { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; display: block; }
/* The real-space canvas fills the whole card, edge to edge, with the header and footer laid over it. The card
   takes its height from the magnetoresistance card beside it, so both footers sit on the same bottom edge.
   A soft mask dims the trail where it passes under the text. */
#rs { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 3px;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.3), #000 34px, #000 calc(100% - 34px), rgb(0 0 0 / 0.3));
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.3), #000 34px, #000 calc(100% - 34px), rgb(0 0 0 / 0.3)); }
.float-b .phead, .float-b .pfoot { position: relative; z-index: 1; }
.float-b .pfoot { margin-top: auto; }
.legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; }
.nw { white-space: nowrap; }
/* Legend numbers in the colours of their reference curves, mixed 15% towards --ink for text contrast */
.lg-10 { color: color-mix(in srgb, var(--cold) 85%, var(--ink)); }
.lg-30 { color: color-mix(in srgb, color-mix(in srgb, var(--hot) 32%, var(--cold)) 85%, var(--ink)); }
.lg-100 { color: color-mix(in srgb, color-mix(in srgb, var(--hot) 68%, var(--cold)) 85%, var(--ink)); }
.lg-300 { color: color-mix(in srgb, var(--hot) 85%, var(--ink)); }
.cdot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-right: 6px; vertical-align: 0.15em;
  background: color-mix(in srgb, var(--ink) 55%, transparent); }

.ctrl { gap: 14px; }
.ctrl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.slider { display: flex; flex-direction: column; gap: 2px; }
.slider label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-2); }
.slider output { color: var(--ink); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--rule); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 0; margin-top: -7px; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--rule); border-radius: 2px; }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 0; }
.toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; align-self: flex-start; }
.toggle button { font: 500 0.66rem var(--mono); background: none; color: var(--ink-2); border: 0; padding: 7px 11px; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Conditions ---------- */
.conditions { border-bottom: 1px solid var(--rule); }
.conditions .wrap { padding-block: clamp(40px, 6vw, 64px); display: flex; flex-direction: column; gap: 28px; }
.cond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.cond { padding: 4px 28px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cond:first-child { border-left: 0; padding-left: 0; }
.cond dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.cond dd { margin: 0; }
.cond .readings { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; gap: 0 16px; }   /* readings share the column evenly */
.reading { display: flex; flex-direction: column; gap: 8px; }
.cond .num { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
.cond .detail { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--ink-2); }   /* normal case: ³He, not ³HE */
.cond .unit { font-family: var(--mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0; color: var(--accent); margin-left: 0.3em; vertical-align: 1em; }
.cond .note { font-size: 0.92rem; color: var(--ink-2); }

/* ---------- Selected work ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; gap: 14px; background: var(--ground-2); border-radius: 14px; padding: 22px; min-width: 0; }
.card .venue { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); }
.card h3 { font-family: var(--display); font-weight: 650; font-size: 1.32rem; line-height: 1.18; letter-spacing: -0.02em; }
.card p { font-size: 0.94rem; color: var(--ink-2); }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }
.card-foot a { font-weight: 600; font-size: 0.9rem; margin-left: auto; }

/* ---------- Research band ---------- */
.research { background: var(--ground-2); border-bottom: 1px solid var(--rule); }
.research .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: start; }
.research .intro { display: flex; flex-direction: column; gap: 16px; }
.research .intro p { font-size: 1.15rem; line-height: 1.55; max-width: 46ch; }
.research .eyebrow { margin: 0; }
.themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.themes li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; display: flex; gap: 12px; align-items: baseline; }
.themes li:nth-child(odd) { padding-right: 16px; }
.themes span { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; color: var(--ink-2); min-width: 1.6em; }
.themes a { text-decoration: none; }

@media (max-width: 860px) {
  .hero-main { display: block; min-height: 0; }
  .hero-text { width: auto; padding-block: 24px 28px; }
  .stage { position: relative; inset: auto; width: 100%; height: clamp(560px, 152vw, 720px); --fs-y: 0.42; --fs-h: 0.8; }
  .stage-label { left: 0; }
  .float { padding: 8px 9px 10px; }
  .panels { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .panels .panel { border-left: 0; padding-left: 0; padding-right: 0; }
  .panel.cap { border-bottom: 1px solid var(--rule); }
  .research .wrap { grid-template-columns: minmax(0, 1fr); }
  .cond-grid { grid-template-columns: minmax(0, 1fr); }
  .cond { border-left: 0; border-top: 1px solid var(--rule); padding: 18px 0 0; }
  .cond:first-child { border-top: 0; padding-top: 0; }
  .facts { gap: 4px 18px; }
  .facts span + span::before { content: none; }
}
@media (max-width: 420px) {
  .themes { grid-template-columns: minmax(0, 1fr); }
  .themes li:nth-child(odd) { padding-right: 0; }
}
@media (max-width: 640px) {
  .ctrl-grid { grid-template-columns: minmax(0, 1fr); }
}