/* Yu Lab homepage, dark scientific edition.
   The shared system owns navigation, footer and inner pages. */

body[data-page="home"]{
  --home-bg:rgb(var(--ground-rgb));
  --home-bg-raised:rgb(var(--ground-4-rgb));
  --home-bg-soft:color-mix(in srgb, rgb(var(--ground-rgb)) 88%, rgb(var(--ink-rgb)));
  --home-text:rgb(var(--ink-rgb));
  --home-muted:rgba(var(--ink-rgb),.66);
  --home-faint:rgba(var(--ink-rgb),.46);
  --home-line:rgba(240,238,233,.14);
  --home-line-strong:rgba(240,238,233,.25);
  --home-red:#94151a;
  --home-red-hot:#c73b3f;
  --home-display:"Avenir Next","Helvetica Neue",Arial,sans-serif;
  /* This was referenced nine times in this file and defined nowhere. Every one
     of those references sits inside a `font:` shorthand, and a shorthand whose
     var() cannot resolve is invalid at computed-value time — so all nine
     declarations were dropped whole: size, weight, family and leading fell back
     to whatever was inherited. The layer captions were rendering at 16.5px in
     the body face instead of 7.5px mono, which is why "Layer" read larger than
     the layer's own name above it. */
  --home-mono:var(--mono);
  /* One vertical rhythm. Every band used its own clamp before, so two
     neighbouring bands could stack ~330px of empty ground between the
     last line of one and the first line of the next. */
  --home-sec-y:clamp(92px,8.8vw,150px);
  --home-sec-y-tight:clamp(72px,6.6vw,112px);
  background:var(--home-bg);
  color:var(--home-text);
}

body[data-page="home"] main{
  /* `hidden` here silently made this a scroll container, which disables
     position:sticky for everything inside it — that is why the pinned molecule
     stayed with the hero instead of holding across both screens. `clip` does
     the same visual job without creating one, and leaving the block axis
     visible is what lets the sticky element see the page's own scrollport. */
  overflow-x:clip;
  overflow-y:visible;
  background:var(--home-bg);
}

.home-shell{
  width:min(100%,1540px);
  margin-inline:auto;
  padding-inline:clamp(22px,5.2vw,94px);
}

.home-overline,
.home-kicker{
  margin:0;
  color:var(--accent-red);
  font-family:var(--mono);
  font-size:clamp(14.5px, .95vw, 16px);
  font-weight:620;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* `.reveal` is defined once, in system.css, so the home page and the
   inner pages share exactly one enter gesture. Nothing to add here. */

/* Both hero buttons are glass. The primary keeps its red identity but as a
   tinted pane rather than a flat fill, so it belongs to the same material as
   everything else on the page. No borders on either: the top lip and the
   shadow do that job. */
.home-button{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 26px;
  border:0;
  border-radius:var(--r-sm);
  font-size:clamp(14.5px, .95vw, 16px);
  font-weight:650;
  line-height:1;
  white-space:nowrap;
  -webkit-backdrop-filter:blur(var(--surface-blur)) saturate(1.15);
  backdrop-filter:blur(var(--surface-blur)) saturate(1.15);
  transition:background .3s var(--ease-out),color .3s var(--ease-out),
             box-shadow .3s var(--ease-out),transform .3s var(--ease-out);
}
.home-button:hover{transform:translateY(-2px)}
.home-button:active{transform:translateY(1px)}
.home-button[data-email-link]:hover,
.home-button[data-email-link]:active{transform:none}
.home-button-solid{
  background:color-mix(in srgb, var(--home-red) 82%, transparent);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 16px 38px -18px rgba(148,21,26,.75);
}
.home-button-solid:hover{
  background:color-mix(in srgb, #b4262c 90%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 22px 50px -18px rgba(180,38,44,.85);
}
.home-button-quiet{
  background:var(--surface-fill);
  color:var(--home-text);
  box-shadow:var(--surface-shadow);
}
.home-button-quiet:hover{
  background:var(--surface-fill-hover);
  color:var(--home-text);
  box-shadow:var(--surface-shadow-hover);
}
.home-button-outline{
  background:var(--surface-fill);
  color:var(--home-text);
  box-shadow:var(--surface-shadow);
}
.home-button-outline:hover{
  background:var(--surface-fill-hover);
  color:var(--home-text);
  box-shadow:var(--surface-shadow-hover);
}
.home-button-join{
  background:transparent;
  color:var(--home-red);
  border:1px solid currentColor;
  box-shadow:none;
}
.home-button-join:hover{
  background:var(--home-red);
  color:#fff;
  box-shadow:0 14px 30px -18px rgba(148,21,26,.8);
}

.home-text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--accent-red);
  font-size:12.5px;
  font-weight:650;
  transition:gap .3s,color .3s;
}
.home-text-link:hover{gap:16px;color:#f08082}

.home-section-head{
  max-width:860px;
  margin-bottom:clamp(44px,6vw,84px);
}
.home-section-head h2,
.home-platform-head h2,
.home-team-head h2,
.home-bridge-primary h2,
.home-join h2{
  margin:0;
  font-family:var(--home-display);
  font-size:clamp(2.55rem,5.3vw,5.7rem);
  font-weight:560;
  line-height:.98;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.home-section-head p{
  max-width:58ch;
  margin:24px 0 0;
  color:var(--home-muted);
  font-size:15px;
  line-height:1.7;
}

/* Hero */
.home-hero{
  position:relative;
  display:flex;
  min-height:100dvh;
  align-items:stretch;
  isolation:isolate;
  overflow:hidden;
  background:var(--home-bg);
  color:var(--home-text);
}

.home-hero-inner{
  display:flex;
  min-height:100dvh;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(var(--nav-h) + 24px);
  padding-bottom:34px;
}
.home-overline{margin-bottom:22px;color:#94070A}
.home-hero h1{
  max-width:760px;
  margin:0;
  font-family:var(--home-display);
  font-size:clamp(3.35rem,6.9vw,7.4rem);
  font-weight:560;
  line-height:.9;
  letter-spacing:-.068em;
  text-wrap:balance;
  color:var(--home-text);
}
.home-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
}

/* Manifesto */
.home-manifesto{
  padding:var(--home-sec-y) 0;
  border-bottom:1px solid var(--home-line);
  background:var(--home-bg);
}
/* Three bands, each one full-width, so no column is ever left holding
   nothing while its neighbour scrolls: a margin note beside the
   statement, then a rule, then a two-up foot. */
.home-manifesto-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px 22px;
  align-items:start;
}
.home-manifesto-intro{
  position:relative;
  grid-column:1/4;
  grid-row:1;
  margin:.42em 0 0;
  padding-bottom:26px;
  color:#d9686b;
  font-size:15px;
  font-weight:620;
  line-height:1.5;
}
/* The margin note is short and the statement beside it is tall. This
   rule carries the eye down the column so the space reads as margin
   rather than as a gap. */
.home-manifesto-intro::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:52px;
  height:1px;
  background:linear-gradient(90deg,#c73b3f,rgba(199,59,63,0));
}
.home-manifesto blockquote{
  grid-column:4/13;
  grid-row:1;
  margin:0;
}
.home-manifesto blockquote p{
  position:relative;
  margin:0;
  font-family:var(--home-display);
  font-size:clamp(2.35rem,5.3vw,5.9rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.054em;
  text-wrap:balance;
}
.home-typewriter-reserve{
  display:block;
  visibility:hidden;
}
.home-typewriter-live{
  position:absolute;
  inset:0;
  text-wrap:wrap;
}
.home-typewriter-caret{
  display:inline-block;
  width:.065em;
  height:.78em;
  margin-left:.08em;
  transform:translateY(.035em);
  background:#d9686b;
  box-shadow:0 0 16px rgba(199,59,63,.42);
  animation:home-typewriter-caret .86s steps(1,end) infinite;
}
.home-typewriter-live:not(.is-typing) .home-typewriter-caret{
  animation-iteration-count:4;
}
.home-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@keyframes home-typewriter-caret{
  0%,48%{opacity:1}
  49%,100%{opacity:0}
}
/* Foot band: signature on the left, supporting copy on the right,
   tied together by one rule that runs the full measure. */
.home-manifesto-note{
  grid-column:1/13;
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:22px clamp(28px,5vw,92px);
  align-items:start;
  margin-top:clamp(52px,5.4vw,88px);
  padding-top:clamp(26px,2.6vw,38px);
  border-top:1px solid var(--home-line);
}
.home-manifesto-note>p{
  grid-column:2;
  margin:0;
  max-width:62ch;
  color:var(--home-muted);
  font-size:15px;
  line-height:1.72;
}
.home-manifesto-note>a{
  position:relative;
  grid-column:1;
  grid-row:1;
  display:block;
  padding:0 42px 2px 0;
}
.home-manifesto-note>a::after{
  content:"";
  position:absolute;
  left:0;bottom:-10px;
  width:0;height:1px;
  background:#d7686b;
  transition:width .5s var(--ease-out);
}
.home-manifesto-note>a:hover::after{width:calc(100% - 34px)}
.home-manifesto-note>a span{display:block;font-size:15px;font-weight:680}
.home-manifesto-note>a span b{margin-left:7px;font-family:var(--cjk);font-weight:560;color:#d7686b}
.home-manifesto-note>a small{display:block;margin-top:4px;color:var(--home-faint);font-size:12.5px}
.home-manifesto-note>a i{position:absolute;right:4px;top:2px;font-style:normal;color:#d7686b;transition:transform .42s var(--ease-out)}
.home-manifesto-note>a:hover i{transform:translate3d(3px,-3px,0)}

/* Research */
.home-science{
  padding:var(--home-sec-y) 0;
  background:var(--home-bg-soft);
}
.home-science-feature{
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(320px,.62fr);
  gap:clamp(32px,5vw,84px);
  align-items:end;
}
.home-science-feature figure{
  min-height:620px;
  margin:0;
  overflow:hidden;
  border-radius:2px;
  background:rgb(var(--ground-2-rgb));
}
.home-science-feature img{
  width:100%;
  height:100%;
  min-height:620px;
  object-fit:cover;
  transition:transform 1s var(--ease-out),filter .8s;
  filter:saturate(.8) contrast(1.04);
}
.home-science-feature:hover img{transform:scale(1.025);filter:saturate(.94) contrast(1.02)}
.home-science-lead{padding-bottom:8px}
.home-science-lead h3{
  margin:0;
  font-family:var(--home-display);
  font-size:clamp(2rem,3.4vw,3.9rem);
  font-weight:560;
  line-height:1.04;
  letter-spacing:-.045em;
}
.home-science-lead p{
  margin:22px 0 26px;
  color:var(--home-muted);
  font-size:14px;
  line-height:1.72;
}
.home-research-paths{
  display:grid;
  grid-template-columns:1.12fr .9fr .92fr 1.06fr;
  margin-top:0;
  border-top:1px solid var(--home-line);
  border-bottom:1px solid var(--home-line);
}
.home-research-paths>a{
  position:relative;
  min-height:270px;
  padding:32px clamp(24px,3vw,44px) 32px 0;
  border-right:1px solid var(--home-line);
  transition:background .3s,padding-left .3s;
  /* The first two used to be bare page until the cursor arrived, sitting next
     to a solid red block — so the row read as one card and two gaps. A surface
     at rest makes all three read as the same kind of thing; the hover is now a
     change of state rather than the only state. */
  background:rgba(var(--ink-rgb),.035);
}
.home-research-paths>a+a{padding-left:clamp(24px,3vw,44px)}
.home-research-paths>a:last-child{border-right:0;padding-right:clamp(24px,3vw,44px)}
.home-research-paths>a:hover{background:rgba(var(--ink-rgb),.075)}
.home-research-paths h3{
  max-width:18ch;
  margin:0;
  font-family:var(--home-display);
  font-size:clamp(1.45rem,2.2vw,2.4rem);
  font-weight:570;
  line-height:1.08;
  letter-spacing:-.035em;
}
.home-research-paths p{
  max-width:40ch;
  margin:18px 0 0;
  color:var(--home-muted);
  font-size:12.5px;
  line-height:1.65;
}
.home-research-paths>a>span{
  position:absolute;
  right:30px;
  bottom:30px;
  color:#dc6467;
  opacity:.72;
  transition:transform .3s,opacity .3s;
}
.home-research-paths>a:hover>span{transform:translateX(6px);opacity:1}
/* MicrobeX */
.home-platform{
  position:relative;
  padding:var(--home-sec-y) 0;
  background:var(--home-bg);
}
.home-platform-head{max-width:930px;margin-bottom:clamp(44px,6vw,82px)}
.home-platform-head .home-kicker{margin-bottom:22px}
.home-platform-head h2{font-size:clamp(2.85rem,6vw,6.5rem)}
.home-platform-head>p:last-child{
  max-width:58ch;
  margin:26px 0 0;
  color:var(--home-muted);
  font-size:15px;
  line-height:1.7;
}
.home-mx-architecture{
  --home-mx-x:50%;
  --home-mx-y:30%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0 0 clamp(34px,4.5vw,64px);
  padding:clamp(22px,3vw,40px);
  border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:18px;
  background:
    radial-gradient(circle at 11% 0%,rgba(148,21,26,.22),transparent 31%),
    radial-gradient(circle at 93% 82%,rgba(199,59,63,.09),transparent 26%),
    linear-gradient(180deg,rgb(var(--ground-3-rgb)) 0%,rgb(var(--ground-2-rgb)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(var(--ink-rgb),.045),
    0 36px 100px rgba(var(--shadow-rgb),calc(.38 * var(--shadow-k)));
}
.home-mx-architecture::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(var(--ink-rgb),.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--ink-rgb),.022) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(var(--shadow-rgb),calc(.92 * var(--shadow-k))),transparent 96%);
  pointer-events:none;
}
.home-mx-architecture::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(440px circle at var(--home-mx-x) var(--home-mx-y),rgba(199,59,63,.13),transparent 65%);
  pointer-events:none;
}
.home-mx-titlebar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(24px,3vw,38px);
  padding-bottom:20px;
  border-bottom:1px solid rgba(var(--ink-rgb),.1);
}
.home-mx-titlebar figcaption{
  color:var(--home-text);
  font-size:clamp(1.2rem,2vw,1.9rem);
  font-weight:650;
  letter-spacing:-.035em;
}
.home-mx-titlebar figcaption span{
  margin-left:7px;
  color:rgba(var(--ink-rgb),.48);
  font-weight:470;
}
.home-mx-titlebar p{
  margin:0;
  color:rgba(var(--ink-rgb),.5);
  font:560 9px/1.3 var(--home-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.home-mx-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  gap:clamp(20px,2.8vw,42px);
  align-items:stretch;
}
.home-mx-layers{
  display:grid;
  gap:10px;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.home-mx-layer{
  position:relative;
  display:grid;
  grid-template-columns:142px minmax(0,1fr);
  gap:18px;
  min-width:0;
  min-height:86px;
  align-items:stretch;
  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    filter .4s ease;
}
.home-mx-layer::after{
  content:"";
  position:absolute;
  top:50%;
  right:-42px;
  width:42px;
  border-top:1px dashed rgba(214,73,77,.38);
}
.home-mx-layer-name,
.home-mx-nodes>span,
.home-mx-orchestration,
.home-mx-foundation-core,
.home-mx-virtual{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(199,59,63,.29);
  background:
    linear-gradient(150deg,rgba(77,28,31,.54),rgba(var(--ground-4-rgb),.58)),
    rgba(var(--ground-4-rgb),.62);
  box-shadow:
    inset 0 1px 0 rgba(var(--ink-rgb),.07),
    0 12px 30px rgba(var(--shadow-rgb),calc(.27 * var(--shadow-k)));
}
.home-mx-layer-name::after,
.home-mx-nodes>span::after,
.home-mx-orchestration::after,
.home-mx-foundation-core::after,
.home-mx-virtual::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  z-index:2;
  width:42%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--ink-rgb),.055),transparent);
  transform:translateX(-165%) skewX(-18deg);
}
.home-mx-architecture.is-live .home-mx-layer-name::after,
.home-mx-architecture.is-live .home-mx-nodes>span::after,
.home-mx-architecture.is-live .home-mx-orchestration::after,
.home-mx-architecture.is-live .home-mx-foundation-core::after,
.home-mx-architecture.is-live .home-mx-virtual::after{
  animation:home-mx-sheen 7.6s ease-in-out infinite;
  animation-delay:var(--home-mx-sheen-delay,0s);
}
.home-mx-layer-name{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:11px;
}
.home-mx-layer-name>span{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border:1px solid rgba(220,86,89,.56);
  border-radius:50%;
  color:var(--accent-red);
  background:rgba(148,21,26,.14);
  font:700 9px/1 var(--home-mono);
}
.home-mx-layer-name p,
.home-mx-layer-name b,
.home-mx-layer-name small{
  display:block;
  margin:0;
}
.home-mx-layer-name b{
  color:rgba(var(--ink-rgb),.9);
  font-size:12.5px;
  font-weight:620;
}
.home-mx-layer-name small{
  margin-top:4px;
  /* .4 measured 2.51 on the light plate — legible as a shape, not as words.
     The weight came down with it: at 520 the raised contrast made the word
     read heavier than the layer's own name above it, which is backwards. */
  color:rgba(var(--ink-rgb),.6);
  font:460 7.5px/1 var(--home-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
}
/* Chinese names the layer in one word — 应用层, not 应用 over 层 — so the
   second line goes away entirely rather than carrying a stranded character.
   The name itself is authored bilingually in the markup; without that the
   dictionary sweep translates the two elements separately, which is exactly
   how the character ended up on its own line. */
html[lang="zh"] .home-mx-layer-name p{justify-content:center}
.home-mx-nodes{
  display:grid;
  gap:clamp(8px,1vw,14px);
  min-width:0;
}
.home-mx-nodes-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-mx-nodes-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.home-mx-nodes>span{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:13px 8px;
  overflow:hidden;
  border-radius:10px;
  text-align:center;
  transition:
    border-color .35s ease,
    background .35s ease,
    transform .42s cubic-bezier(.16,1,.3,1);
}
.home-mx-nodes>span::before{
  content:"";
  position:absolute;
  top:0;
  right:18%;
  left:18%;
  height:1px;
  background:linear-gradient(90deg,transparent,#df6568,transparent);
}
.home-mx-nodes>span:hover{
  border-color:rgba(225,87,91,.66);
  background:linear-gradient(150deg,rgba(96,33,37,.66),rgba(var(--ground-4-rgb),.66));
}
.home-mx-nodes b,
.home-mx-nodes small{
  display:block;
  max-width:100%;
}
.home-mx-nodes b{
  overflow-wrap:anywhere;
  color:rgba(var(--ink-rgb),.88);
  font-size:max(12.5px,clamp(.62rem,.83vw,.76rem));
  font-weight:630;
  line-height:1.2;
}
.home-mx-nodes small{
  margin-top:5px;
  color:rgba(var(--ink-rgb),.37);
  font-size:12.5px;
  line-height:1.25;
}
.home-mx-automation{min-height:54px}
.home-mx-orchestration{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,3vw,40px);
  overflow:hidden;
  border-radius:8px;
  color:rgba(var(--ink-rgb),.79);
  background:
    linear-gradient(90deg,transparent,rgba(148,21,26,.13),transparent),
    rgba(var(--ground-rgb),.86);
}
.home-mx-orchestration b{
  font:590 10px/1 var(--home-mono);
  letter-spacing:.1em;
  text-align:center;
  text-transform:uppercase;
}
.home-mx-orchestration i{
  width:min(18%,120px);
  height:1px;
  overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(216,73,77,.75));
}
.home-mx-orchestration i:last-child{transform:scaleX(-1)}
.home-mx-foundation{min-height:72px}
.home-mx-foundation-core{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border-color:rgba(216,73,77,.42);
  border-radius:12px;
  background:
    linear-gradient(90deg,rgba(72,16,20,.68),rgba(25,12,14,.78),rgba(72,16,20,.68)),
    rgba(var(--ground-rgb),.74);
}
.home-mx-foundation-core span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:1px solid rgba(225,104,108,.72);
  border-radius:10px;
  color:#fff;
  background:rgba(100,17,22,.67);
  font:750 15px/1 var(--home-mono);
}
.home-mx-foundation-core b{
  color:var(--home-text);
  font-size:max(12.5px,clamp(.76rem,1.15vw,.98rem));
  font-weight:650;
}
.home-mx-virtual{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 9%,rgba(199,59,63,.24),transparent 31%),
    linear-gradient(180deg,rgba(74,23,27,.56),rgba(10,8,9,.68) 48%,rgba(var(--ground-2-rgb),.8));
  text-align:center;
  transition:
    border-color .35s ease,
    transform .52s cubic-bezier(.16,1,.3,1);
}
.home-mx-virtual:hover{
  border-color:rgba(225,87,91,.64);
}
.home-mx-virtual-mark{
  position:relative;
  display:grid;
  width:72px;
  height:72px;
  margin-bottom:24px;
  place-items:center;
  border:1px solid rgba(225,104,108,.6);
  border-radius:50%;
  box-shadow:
    0 0 20px rgba(199,59,63,.24),
    inset 0 0 15px rgba(199,59,63,.22);
}
.home-mx-virtual-mark i{
  position:absolute;
  inset:-7px;
  border:1px solid rgba(199,59,63,.3);
  border-radius:50%;
}
.home-mx-virtual-mark i:nth-child(2){inset:-14px;opacity:.45}
.home-mx-virtual-mark span{
  color:#f1d6d5;
  font:740 14px/1 var(--home-mono);
}
.home-mx-virtual p,
.home-mx-virtual b,
.home-mx-virtual small{
  display:block;
  margin:0;
}
.home-mx-virtual b{color:var(--home-text);font-size:15px;font-weight:660}
.home-mx-virtual small{
  margin-top:6px;
  color:rgba(var(--ink-rgb),.4);
  font:520 8px/1.2 var(--home-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-mx-virtual-route{
  display:flex;
  gap:7px;
  margin-top:50px;
}
.home-mx-virtual-route i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(225,104,108,.68);
  box-shadow:0 0 8px rgba(199,59,63,.7);
}
.home-mx-architecture.home-mx-motion-ready .home-mx-layer-name,
.home-mx-architecture.home-mx-motion-ready .home-mx-nodes>span,
.home-mx-architecture.home-mx-motion-ready .home-mx-orchestration,
.home-mx-architecture.home-mx-motion-ready .home-mx-foundation-core,
.home-mx-architecture.home-mx-motion-ready .home-mx-virtual{
  opacity:0;
  transform:translateY(18px) scale(.985);
}
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-layer-name,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-nodes>span,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-orchestration,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-foundation-core,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-virtual{
  opacity:1;
  transform:none;
  transition:
    opacity .58s cubic-bezier(.2,.7,.3,1) var(--home-mx-enter-delay,0ms),
    transform .58s cubic-bezier(.2,.7,.3,1) var(--home-mx-enter-delay,0ms),
    box-shadow .4s ease,
    filter .4s ease,
    border-color .35s ease;
}
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-layer-name:hover,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-nodes>span:hover,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-foundation-core:hover,
.home-mx-architecture.home-mx-motion-ready.is-live .home-mx-virtual:hover{
  z-index:4;
  filter:brightness(1.1);
  transform:translateY(-5px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(var(--ink-rgb),.1),
    0 17px 38px rgba(var(--shadow-rgb),calc(.45 * var(--shadow-k))),
    0 0 24px rgba(199,59,63,.16);
}

@media(prefers-reduced-motion:no-preference){
  .home-mx-architecture.is-live .home-mx-layer-name>span{
    animation:home-mx-icon-breathe 2.6s ease-in-out infinite;
    animation-delay:var(--home-mx-sheen-delay,0s);
  }
  .home-mx-architecture.is-live .home-mx-virtual-mark i{
    animation:home-mx-ring-pulse 3.2s ease-out infinite;
  }
  .home-mx-architecture.is-live .home-mx-virtual-mark i:nth-child(2){animation-delay:1.05s}
  .home-mx-architecture.is-live .home-mx-foundation-core>span{
    animation:home-mx-x-pulse 2.4s ease-in-out infinite;
  }
  .home-mx-architecture.is-live .home-mx-orchestration>i{
    animation:home-mx-bar-pulse 2.4s ease-in-out infinite alternate;
  }
  .home-mx-architecture.is-live .home-mx-virtual-route i{
    animation:home-mx-route-pulse 1.8s ease-in-out infinite;
  }
  .home-mx-architecture.is-live .home-mx-virtual-route i:nth-child(2){animation-delay:.28s}
  .home-mx-architecture.is-live .home-mx-virtual-route i:nth-child(3){animation-delay:.56s}
}

@keyframes home-mx-sheen{
  0%{transform:translateX(-165%) skewX(-18deg)}
  55%,100%{transform:translateX(185%) skewX(-18deg)}
}
@keyframes home-mx-icon-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes home-mx-ring-pulse{
  0%{transform:scale(.82);opacity:.46}
  100%{transform:scale(1.48);opacity:0}
}
@keyframes home-mx-x-pulse{
  0%,100%{box-shadow:0 0 7px rgba(199,59,63,.3)}
  50%{box-shadow:0 0 18px rgba(225,104,108,.58)}
}
@keyframes home-mx-bar-pulse{
  from{opacity:.22}
  to{opacity:.72}
}
@keyframes home-mx-route-pulse{
  0%,100%{opacity:.25;transform:scale(.8)}
  50%{opacity:.86;transform:scale(1.18)}
}
.home-platform-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:30px;
  padding-top:28px;
}
.home-platform-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.home-platform-results{
  margin-top:clamp(96px,11vw,170px);
  padding-top:clamp(76px,8vw,120px);
  border-top:1px solid var(--home-line);
}
.home-result-pair{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:18px;
}
.home-result{
  display:grid;
  grid-template-rows:minmax(320px,1fr) auto;
  color:var(--home-text);
  border:1px solid var(--home-line);
  background:var(--home-bg-soft);
  transition:transform .35s var(--ease-out),border-color .35s var(--ease-out);
}
.home-result:hover{
  color:var(--home-text);
  border-color:var(--home-line-strong);
  transform:translateY(-3px);
}
.home-result img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  filter:saturate(.72) contrast(1.06);
  transition:filter .5s var(--ease-out),transform .7s var(--ease-out);
}
.home-result:hover img{filter:saturate(.9) contrast(1.03);transform:scale(1.015)}
.home-result>span{
  display:block;
  padding:28px;
  overflow:hidden;
}
.home-result small{
  display:block;
  margin-bottom:14px;
  color:var(--home-red-hot);
  font:600 10px/1.3 var(--home-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.home-result h3{
  max-width:24ch;
  margin:0;
  font-size:clamp(1.35rem,2.2vw,2.45rem);
  line-height:1.04;
}
.home-result em{
  display:block;
  margin-top:25px;
  color:var(--home-red-hot);
  font:600 10px/1.2 var(--home-mono);
  letter-spacing:.07em;
  font-style:normal;
  text-transform:uppercase;
}

/* Team */
.home-team{
  padding:var(--home-sec-y-tight) 0;
  background:var(--home-bg);
}
.home-team-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:clamp(30px,4vw,54px);
}
.home-team-head h2{font-size:clamp(2.85rem,5.4vw,5.9rem)}
.home-team-head p{
  max-width:48ch;
  margin:20px 0 0;
  color:var(--home-muted);
  font-size:14px;
  line-height:1.65;
}
.home-team-head .home-text-link{flex:0 0 auto;margin-bottom:8px}
.home-team-layout{
  display:grid;
  grid-template-columns:minmax(210px,.42fr) minmax(0,1.58fr);
  gap:clamp(30px,5vw,76px);
  align-items:start;
  padding-top:clamp(20px,3vw,34px);
  border-top:1px solid var(--home-line);
}
.home-team-summary{
  display:block;
  color:var(--accent-red);
}
.home-team-summary strong{
  font-family:var(--home-display);
  font-size:clamp(4.8rem,8vw,8.2rem);
  font-weight:560;
  letter-spacing:-.075em;
  line-height:.82;
}
.home-team-summary > span{
  display:block;
  margin-top:12px;
  color:var(--home-muted);
  font-family:var(--home-mono);
  font-size:12.5px;
  letter-spacing:.1em;
}
.home-team-pi{
  margin-top:clamp(28px,3.5vw,48px);
  padding-top:17px;
  border-top:1px solid var(--home-line);
}
.home-team-pi .home-team-group{padding-top:0;border-top:0}
.home-team-pi .home-team-list{margin-top:12px}
.home-team-pi .home-team-person{margin-inline:-8px;padding:8px}
.home-team-pi .home-team-person b{font-size:16px}
.home-team-roster{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px) clamp(18px,3vw,48px);
}
.home-team-group{
  padding-top:17px;
  border-top:1px solid var(--home-line);
}
.home-team-group h3{
  margin:0;
  color:var(--home-faint);
  font-family:var(--home-mono);
  font-size:12.5px;
  font-weight:650;
  letter-spacing:.1em;
  line-height:1.4;
}
.home-team-list{display:grid;gap:2px;margin-top:14px}
.home-team-person{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-inline:-8px;
  padding:8px;
  border-radius:var(--r-xs);
  color:var(--home-text);
  transition:background .3s var(--ease-out),color .3s var(--ease-out),transform .3s var(--ease-out);
}
.home-team-person:hover{
  background:rgba(var(--ink-rgb),.055);
  color:var(--home-text);
  transform:translateX(4px);
}
.home-team-person:active{transform:translateX(2px)}
.home-team-person:focus-visible{outline:2px solid var(--accent-red);outline-offset:2px}
.home-team-person>span{display:grid;gap:5px;min-width:0}
.home-team-person b{font-size:14px;font-weight:620;line-height:1.25}
.home-team-person small{color:var(--home-faint);font-size:12.5px;line-height:1.4}
.home-team-person i{color:var(--accent-red);font-size:16px;font-style:normal;transition:transform .3s var(--ease-out)}
.home-team-person:hover i{transform:translateX(3px)}
.home-team-group-principal .home-team-person small{font-size:12.5px}

/* Publications */
.home-output{
  padding:var(--home-sec-y) 0;
  border-top:1px solid var(--home-line);
  background:var(--home-bg-soft);
}
.home-publications{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.35vw,20px);
}
.home-publication-card{
  position:relative;
  display:flex;
  min-height:clamp(390px,34vw,500px);
  flex-direction:column;
  overflow:hidden;
  padding:clamp(20px,2vw,30px);
  border-radius:var(--r-sm);
  background:var(--surface-fill);
  color:var(--home-text);
  box-shadow:var(--surface-shadow);
  isolation:isolate;
  transition:transform .35s var(--ease-out),background .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
}
.home-publication-card:hover{
  background:var(--surface-fill-hover);
  color:var(--home-text);
  box-shadow:var(--surface-shadow-hover);
  transform:translateY(-5px);
}
.home-publication-card:focus-visible{
  outline:2px solid var(--accent-red);
  outline-offset:4px;
}
.home-publication-card-featured{
  background:
    radial-gradient(circle at 90% 8%,rgba(255,255,255,.16),transparent 29%),
    linear-gradient(145deg,#a61f24 0%,#7f0d12 72%,#65080c 100%);
  color:#fff7f5;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 28px 70px -34px rgba(148,21,26,.8);
}
.home-publication-card-featured:hover{
  background:
    radial-gradient(circle at 86% 12%,rgba(255,255,255,.21),transparent 32%),
    linear-gradient(145deg,#b0252a 0%,#8b1015 72%,#700b0f 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 34px 78px -32px rgba(148,21,26,.92);
}
.home-publication-meta{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--accent-red);
  font-family:var(--home-mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.3;
  text-transform:uppercase;
}
.home-publication-detail,
.home-publication-note{
  display:block;
  margin-top:12px;
  color:var(--home-faint);
  font-family:var(--home-mono);
  font-size:12.5px;
  line-height:1.45;
}
.home-publication-note{
  color:var(--accent-red);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.home-publication-meta span+span{
  padding-left:12px;
  border-left:1px solid var(--home-line-strong);
}
.home-publication-card-featured .home-publication-meta{color:rgba(255,236,233,.8)}
.home-publication-card-featured .home-publication-meta span+span{border-color:rgba(255,255,255,.27)}
.home-publication-body{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(28px,3vw,46px);
}
.home-publication-card h3{
  max-width:none;
  margin:0;
  font-family:var(--home-display);
  font-size:clamp(1.15rem,1.45vw,1.7rem);
  font-weight:570;
  letter-spacing:-.045em;
  line-height:1.08;
  text-wrap:balance;
}
.home-publication-summary{
  max-width:58ch;
  margin:clamp(24px,3vw,38px) 0 0;
  color:var(--home-muted);
  font-size:14px;
  line-height:1.72;
}
.home-publication-card-featured .home-publication-summary{
  max-width:62ch;
  color:rgba(255,240,237,.76);
  font-size:15px;
}
.home-publication-foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:end;
  gap:14px;
  padding-top:22px;
  border-top:1px solid var(--home-line);
}
.home-publication-card-featured .home-publication-foot{border-color:rgba(255,255,255,.22)}
.home-publication-authors{
  max-width:none;
  color:var(--home-faint);
  font-family:var(--home-mono);
  font-size:12.5px;
  line-height:1.55;
}
.home-publication-card-featured .home-publication-authors{color:rgba(255,238,235,.6)}
.home-publication-action{
  color:var(--accent-red);
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
.home-publication-foot i{
  color:var(--accent-red);
  font-size:17px;
  font-style:normal;
  line-height:1;
  transition:transform .3s var(--ease-out);
}
.home-publication-card:hover .home-publication-foot i{transform:translate(3px,-3px)}
.home-publication-card-featured .home-publication-action,
.home-publication-card-featured .home-publication-foot i{color:#ffd8d5}
.home-output>.home-shell>.home-text-link{margin-top:34px}

/* Program, code, students */
.home-bridge{
  padding:var(--home-sec-y-tight) 0;
  background:var(--home-bg);
}
.home-bridge-grid{
  display:grid;
  grid-template-columns:1.28fr .72fr;
  gap:1px;
  background:var(--home-line);
  border:1px solid var(--home-line);
}
.home-bridge-primary,
.home-bridge-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--home-bg-soft);
}
.home-bridge-primary{
  min-height:620px;
  padding:clamp(30px,5vw,72px);
  background:
    linear-gradient(150deg,rgba(148,21,26,.92),rgba(78,10,13,.78)),
    var(--home-red);
}
.home-bridge-primary>span{color:rgba(255,255,255,.65);font-size:12.5px}
.home-bridge-primary h2{
  max-width:14ch;
  margin-top:auto;
  font-size:clamp(2.45rem,4.5vw,5rem);
}
.home-bridge-primary p{max-width:48ch;margin:24px 0 0;color:rgba(255,255,255,.68);font-size:12.5px;line-height:1.65}
.home-bridge-primary i,
.home-bridge-card i{
  position:absolute;
  right:28px;
  top:27px;
  font-style:normal;
  transition:transform .3s;
}
.home-bridge-primary:hover i,
.home-bridge-card:hover i{transform:translateX(6px)}
.home-bridge-secondary{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--home-line)}
.home-bridge-card{min-height:0;justify-content:flex-end;padding:clamp(28px,4vw,52px)}
.home-bridge-card:first-child{background:rgb(var(--ground-4-rgb))}
.home-bridge-card:last-child{background:rgb(var(--ground-4-rgb))}
.home-bridge-card h3{
  max-width:13ch;
  margin:0 0 15px;
  font-family:var(--home-display);
  font-size:clamp(1.75rem,3vw,3.2rem);
  font-weight:570;
  line-height:1.04;
  letter-spacing:-.04em;
}
.home-bridge-card p{max-width:38ch;margin:0;color:var(--home-muted);font-size:12.5px;line-height:1.6}

/* Join */
.home-join{
  position:relative;
  display:flex;
  min-height:760px;
  align-items:center;
  overflow:hidden;
  background:var(--home-bg);
}
.home-join>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.82) contrast(1.03);
}
.home-join-wash{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,var(--home-bg) 0%,rgba(var(--ground-rgb),.96) 30%,rgba(var(--ground-rgb),.5) 58%,rgba(var(--ground-rgb),.08) 100%),
    linear-gradient(180deg,rgba(var(--ground-rgb),.35),rgba(var(--ground-rgb),.64));
}
.home-join-inner{position:relative;z-index:1;width:100%}
.home-join .home-kicker{margin-bottom:22px}
.home-join h2{max-width:11ch;font-size:clamp(3rem,6vw,6.5rem)}
.home-join-inner>p:not(.home-kicker){max-width:54ch;margin:28px 0;color:rgba(var(--ink-rgb),.65);font-size:14px;line-height:1.75}
.home-join-inner>div{display:flex;flex-wrap:wrap;gap:10px}

/* Homepage navigation stays inside the dark theme */
body[data-page="home"] .nav,
body[data-page="home"] .nav.solid,
body[data-page="home"] .nav.forced{
  border-bottom-color:rgba(242,239,232,.14);
  background:rgba(26,18,20,.96);
  color:#F2EFE8;
}
body[data-page="home"] .nav-item.active>a,
body[data-page="home"] .nav-item.active>button{color:#DF6668}
body[data-page="home"] .nav-item>a:hover,
body[data-page="home"] .nav-item>button:hover,
body[data-page="home"] .icon-btn:hover{background:rgba(148,21,26,.2)}
body[data-page="home"] .mega,
body[data-page="home"] .drawer{
  border:0;
  /* translucent so the blur has something to work with — an opaque panel
     cancels the glass no matter how much backdrop-filter it carries */
  background:color-mix(in srgb, rgb(var(--ground-4-rgb)) 88%, transparent);
  color:var(--home-text);
}
body[data-page="home"] .mega-col a .sub,
body[data-page="home"] .drawer-sub a,
body[data-page="home"] .mega-col h6{color:var(--home-muted)}
body[data-page="home"] .mega-foot,
body[data-page="home"] .drawer-item{border-color:var(--home-line)}

@media(max-width:1080px){
  .home-manifesto-intro{grid-column:1/13;grid-row:1}
  .home-manifesto blockquote{grid-column:1/13;grid-row:2;margin-top:30px}
  .home-manifesto-note{grid-column:1/13;grid-row:3;grid-template-columns:minmax(0,1fr)}
  .home-manifesto-note>p{grid-column:1;grid-row:2}
  .home-manifesto-note>a{grid-column:1;grid-row:1;margin-bottom:26px}
  .home-science-feature{grid-template-columns:1.25fr .75fr}
  .home-team-layout{grid-template-columns:minmax(180px,.36fr) minmax(0,1.64fr);gap:42px}
  .home-bridge-primary{min-height:560px}
  .home-research-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-research-paths>a:nth-child(2){border-right:0}
  .home-research-paths>a:nth-child(-n+2){border-bottom:1px solid var(--home-line)}
  .home-research-paths>a:nth-child(3){padding-left:0}
}

@media(max-width:820px){
  .home-shell{padding-inline:24px}
  .home-hero h1{max-width:650px;font-size:clamp(3.1rem,10.4vw,5.5rem)}
  .home-manifesto-layout{grid-template-columns:1fr}
  .home-manifesto-intro,
  .home-manifesto blockquote,
  .home-manifesto-note{grid-column:1;margin-top:0}
  .home-manifesto blockquote{margin-top:40px}
  .home-manifesto-note{max-width:52ch;margin-top:40px;padding-top:26px}
  .home-science-feature,
  .home-bridge-grid{grid-template-columns:1fr}
  .home-team-head{align-items:flex-start;flex-direction:column}
  .home-team-head .home-text-link{margin-bottom:0}
  .home-team-layout{grid-template-columns:1fr;gap:32px}
  .home-team-summary{display:block}
  .home-team-summary > span{margin-top:12px}
  .home-publications{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-publication-card{min-height:390px}
  .home-science-feature figure,
  .home-science-feature img{min-height:500px}
  .home-science-lead{max-width:620px}
  .home-research-paths{grid-template-columns:1fr}
  .home-research-paths>a,
  .home-research-paths>a+a,
  .home-research-paths>a:last-child{
    min-height:220px;
    padding:28px 56px 28px 0;
    border-right:0;
    border-bottom:1px solid var(--home-line);
  }
  .home-research-paths>a+a{padding-left:0}
  .home-research-paths>a:last-child{border-bottom:0}
  .home-mx-stage{grid-template-columns:1fr}
  .home-mx-layer::after{display:none}
  .home-mx-virtual{
    min-height:180px;
    flex-direction:row;
    justify-content:flex-start;
    padding:28px clamp(24px,6vw,44px);
    text-align:left;
  }
  .home-mx-virtual-mark{
    width:62px;
    height:62px;
    flex:0 0 62px;
    margin:0 28px 0 0;
  }
  .home-mx-virtual p,
  .home-mx-virtual b,
  .home-mx-virtual small{text-align:left}
  .home-mx-virtual-route{margin:0 0 0 auto}
  .home-result-pair{grid-template-columns:1fr}
  .home-bridge-primary{min-height:520px}
  .home-bridge-secondary{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .home-bridge-card{min-height:330px}
  .home-join{min-height:700px}
  .home-join>img{object-position:62% center}
}

@media(max-width:580px){
  .home-shell{padding-inline:20px}
  .home-hero-inner{justify-content:flex-end;padding-top:calc(var(--nav-h) + 20px);padding-bottom:34px}
  .home-hero h1{font-size:clamp(2.75rem,14vw,4.5rem);line-height:.94}
  .home-hero-actions{width:100%;margin-top:26px}
  .home-button{width:100%}
  .home-manifesto blockquote p{font-size:clamp(2.15rem,10.8vw,3.5rem)}
  .home-section-head h2,
  .home-platform-head h2,
  .home-team-head h2,
  .home-join h2{font-size:clamp(2.4rem,12vw,3.8rem)}
  .home-team-roster{grid-template-columns:1fr}
  .home-team-summary strong{font-size:clamp(4.8rem,25vw,7rem)}
  .home-publications{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .home-publication-card,
  .home-publication-card-featured{min-height:390px;padding:24px 20px}
  .home-publication-card h3{
    max-width:none;
    font-size:clamp(1.8rem,8.6vw,2.7rem);
    letter-spacing:-.04em;
    line-height:1.08;
  }
  .home-publication-summary,
  .home-publication-card-featured .home-publication-summary{font-size:13px;line-height:1.65}
  .home-publication-foot{grid-template-columns:minmax(0,1fr) auto}
  .home-publication-authors{grid-column:1/-1}
  .home-science-feature figure,
  .home-science-feature img{min-height:390px}
  .home-research-paths>a,
  .home-research-paths>a+a,
  .home-research-paths>a:last-child{padding-right:46px}
  .home-mx-architecture{padding:18px;border-radius:14px}
  .home-mx-titlebar{align-items:flex-start;flex-direction:column;gap:9px}
  .home-mx-titlebar figcaption span{display:block;margin:2px 0 0}
  .home-mx-layer{grid-template-columns:1fr;gap:8px}
  .home-mx-layer-name{min-height:58px;padding:12px 14px}
  .home-mx-nodes-four,
  .home-mx-nodes-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-mx-nodes-five>span:last-child{grid-column:1/-1}
  .home-mx-nodes>span{min-height:66px}
  .home-mx-orchestration{min-height:58px;padding:0 12px}
  .home-mx-orchestration i{display:none}
  .home-mx-foundation-core{min-height:70px;padding:12px}
  .home-mx-virtual{min-height:150px;padding:24px 20px}
  .home-mx-virtual-mark{
    width:52px;
    height:52px;
    flex-basis:52px;
    margin-right:22px;
  }
  .home-mx-virtual-route{display:none}
  .home-platform-foot{align-items:stretch;flex-direction:column}
  .home-platform-links{justify-content:flex-start}
  .home-result{grid-template-rows:260px auto}
  .home-result img{min-height:260px}
  .home-bridge-primary{min-height:460px}
  .home-bridge-secondary{grid-template-columns:1fr}
  .home-bridge-card{min-height:290px}
  .home-join{min-height:720px}
  .home-join-wash{
    background:
      linear-gradient(180deg,rgba(var(--ground-rgb),.28),rgba(var(--ground-rgb),.96)),
      linear-gradient(90deg,rgba(var(--ground-rgb),.82),rgba(var(--ground-rgb),.2));
  }
  .home-join-inner{align-self:flex-end;padding-bottom:46px}
}

@media(max-width:580px){
  .home-publications{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .home-publication-card{transition:none!important}
  .home-publication-card:hover{transform:none}
  .home-publication-card:hover .home-publication-foot i{transform:none}
  .home-team-person{transition:none!important}
  .home-team-person:hover,
  .home-team-person:active,
  .home-team-person:hover i{transform:none}
  .home-science-feature img,
  .home-result img,
  .home-mx-layer-name,
  .home-mx-orchestration,
  .home-mx-foundation-core,
  .home-mx-virtual,
  .home-mx-nodes>span{opacity:1!important;transform:none!important;transition:none!important}
  .home-mx-layer-name::after,
  .home-mx-nodes>span::after,
  .home-mx-orchestration::after,
  .home-mx-foundation-core::after,
  .home-mx-virtual::after,
  .home-mx-layer-name>span,
  .home-mx-virtual-mark i,
  .home-mx-foundation-core>span,
  .home-mx-orchestration>i,
  .home-mx-virtual-route i{animation:none!important}
  .home-typewriter-caret{display:none}
}

/* The homepage is intentionally a single-viewport landing screen. The
   deeper sections remain available on their dedicated pages, but are not
   rendered in this focused homepage composition. */
body.home-minimal .home-output,
body.home-minimal .home-science,
body.home-minimal .home-platform,
body.home-minimal .home-team,
body.home-minimal .home-join,
body.home-minimal #footer-root{
  display:none!important;
}
body.home-minimal .brand-txt span{display:none}

/* ---- Hero: animated microbial strain on the right ------------------------
   The alpha cutout keeps the microscopy texture while the culture-field
   ground is owned by theme variables. Motion is a slow drift and pulse that
   communicates a living community without competing with the headline.
   -------------------------------------------------------------------------- */
.home-hero-strain{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
  isolation:isolate;
  --strain-field:rgb(5,9,13);
  --strain-haze:rgba(35,78,111,.28);
  --strain-aura:rgba(199,59,63,.17);
  --strain-shadow:rgba(0,0,0,.34);
  --strain-image-filter:saturate(.88) contrast(1.08) brightness(1.06);
}
:root[data-theme="light"] .home-hero-strain{
  --strain-field:rgb(224,220,219);
  --strain-haze:rgba(100,119,136,.18);
  --strain-aura:rgba(148,21,26,.11);
  --strain-shadow:rgba(58,49,45,.16);
  --strain-image-filter:saturate(.72) sepia(.06) contrast(1.08) brightness(.87);
}
:root[data-theme="dark"] .home-hero-strain{
  --strain-field:rgb(5,9,13);
  --strain-haze:rgba(35,78,111,.28);
  --strain-aura:rgba(199,59,63,.17);
  --strain-shadow:rgba(0,0,0,.34);
  --strain-image-filter:saturate(.88) contrast(1.08) brightness(1.06);
}
.home-strain-backdrop{
  position:absolute;
  inset:clamp(68px,7vw,112px) -9vw clamp(24px,3vw,52px) 37%;
  border-radius:52% 0 0 46% / 42% 0 0 58%;
  background-color:var(--strain-field);
  background-image:
    radial-gradient(circle at 68% 28%,var(--strain-haze),transparent 36%),
    radial-gradient(circle at 44% 76%,var(--strain-aura),transparent 42%);
  box-shadow:0 34px 90px -40px var(--strain-shadow);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);
}
.home-strain-art,
.home-strain-art picture{
  position:absolute;
  inset:0;
  display:block;
}
.home-strain-art{transform-origin:76% 54%}
.home-strain-image{
  position:absolute;
  top:50%;
  right:-3.5vw;
  width:min(78vw,1220px);
  height:auto;
  max-width:none;
  transform:translateY(-50%);
  opacity:.94;
  filter:var(--strain-image-filter) drop-shadow(0 28px 42px var(--strain-shadow));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.08) 12%,#000 31%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.08) 12%,#000 31%,#000 100%);
}
.home-strain-aura{
  position:absolute;
  top:50%;
  right:-3.5vw;
  width:min(78vw,1220px);
  aspect-ratio:1457/1079;
  background:var(--strain-aura);
  opacity:.1;
  filter:blur(22px);
  transform:translateY(-50%) scale(1.01);
  -webkit-mask:url("../media/generated/hero-microbial-strain-single-v1.webp") center/contain no-repeat;
  mask:url("../media/generated/hero-microbial-strain-single-v1.webp") center/contain no-repeat;
}
@keyframes home-strain-drift{
  0%{transform:translate3d(0,-.7%,0) scale(1.005) rotate(-.18deg)}
  48%{transform:translate3d(-.65%,.45%,0) scale(1.022) rotate(.12deg)}
  100%{transform:translate3d(.35%,.9%,0) scale(1.012) rotate(-.08deg)}
}
@keyframes home-strain-pulse{
  0%,100%{opacity:.07;transform:translateY(-50%) scale(1.005)}
  50%{opacity:.16;transform:translateY(-50%) scale(1.026)}
}
@media(prefers-reduced-motion:no-preference){
  .home-strain-art{
    will-change:transform;
    animation:home-strain-drift 18s cubic-bezier(.45,.05,.2,1) infinite alternate;
  }
  .home-strain-aura{
    will-change:transform,opacity;
    animation:home-strain-pulse 8.5s ease-in-out infinite;
  }
}
@media(max-width:1024px){
  .home-strain-backdrop{inset:9% -22% 4% 34%}
  .home-strain-image,
  .home-strain-aura{right:-22vw;width:min(98vw,1040px)}
  .home-strain-image{opacity:.57}
}
@media(max-width:680px){
  .home-strain-backdrop{inset:10% -50% 5% 30%}
  .home-strain-image,
  .home-strain-aura{right:-60vw;width:148vw}
  .home-strain-image{opacity:.34}
}
@media(prefers-reduced-motion:reduce){
  .home-strain-art,
  .home-strain-aura{animation:none;will-change:auto}
}
/* --------------------------------------------------------------------------
   Chinese display typography (homepage)
   The inner pages got this treatment in system.css but the homepage never did,
   so every large heading here was still carrying tracking tuned for Avenir
   Next — between -.03em and -.068em. Negative tracking is right for Latin
   display text and wrong for CJK, where the glyphs are already on a fixed em
   body: it pulls them into each other. These reset the tracking, hand the
   headings the same CJK stack the rest of the site uses, and loosen the
   leading, which CJK needs more of than Latin at the same size.
   -------------------------------------------------------------------------- */
html[lang="zh"] body[data-page="home"]{
  --home-display:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei",sans-serif;
}
html[lang="zh"] .home-hero h1{
  letter-spacing:.005em;
  line-height:1.14;
  font-weight:600;
  /* the Latin measure was set by a 2-line English headline; CJK sets far more
     glyphs per line, so it needs a narrower column to break in the same place */
  max-width:15em;
}
html[lang="zh"] .home-section-head h2,
html[lang="zh"] .home-platform-head h2,
html[lang="zh"] .home-team-head h2,
html[lang="zh"] .home-bridge-primary h2,
html[lang="zh"] .home-join h2{
  letter-spacing:.008em;
  line-height:1.2;
  font-weight:600;
}
html[lang="zh"] .home-manifesto blockquote p{
  letter-spacing:.01em;
  line-height:1.3;
  font-weight:550;
}
html[lang="zh"] .home-section-head p{
  line-height:1.85;
  letter-spacing:.012em;
}
/* `text-wrap:balance` is tuned for word-based breaking; on CJK it can leave a
   single orphaned glyph on the last line. */
html[lang="zh"] .home-hero h1,
html[lang="zh"] .home-section-head h2,
html[lang="zh"] .home-manifesto blockquote p{
  text-wrap:normal;
}

/* ==========================================================================
   MICROBEX ARCHITECTURE — LIGHT THEME
   The diagram is built to glow: dark maroon card fills, two strong red
   radials, a white sheen sweeping across. All of that reads as light emerging
   from black. Inverted mechanically it becomes grey-brown smears on ivory,
   which is what it did.

   So the light theme gets its own construction rather than a flipped one.
   Same layout, same hierarchy, different physics: cards are paper lifted off
   the plate by a shadow instead of panes lit from within, the red retreats to
   an accent on the foundation bar and the layer marks, and the plate itself is
   barely tinted. What survives is the thing that matters — the five-layer
   stack reading top to bottom with the platform carrying it.
   ========================================================================== */
:root[data-theme="light"] .home-mx-architecture{
  border:1px solid rgba(20,16,15,.10);
  background:
    radial-gradient(circle at 12% 0%,rgba(148,21,26,.045),transparent 34%),
    linear-gradient(180deg,#FBFAFA 0%,#F1EDEC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 24px 64px -30px rgba(20,16,15,.22);
}
/* the moving red spotlight is a dark-ground effect; on paper it just muddies */
:root[data-theme="light"] .home-mx-architecture::after{
  background:radial-gradient(440px circle at var(--home-mx-x) var(--home-mx-y),rgba(148,21,26,.05),transparent 65%);
}
:root[data-theme="light"] .home-mx-architecture::before{
  background-image:
    linear-gradient(rgba(20,16,15,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,16,15,.030) 1px,transparent 1px);
}

/* Cards: paper on paper, separated by a hairline and a shadow, not by fill. */
:root[data-theme="light"] .home-mx-nodes>span,
:root[data-theme="light"] .home-mx-layer-name{
  border:1px solid rgba(20,16,15,.09);
  background:#FFFFFF;
  box-shadow:0 1px 2px rgba(20,16,15,.04), 0 6px 16px -10px rgba(20,16,15,.18);
}
:root[data-theme="light"] .home-mx-nodes>span:hover{
  border-color:rgba(148,21,26,.34);
  background:#FFFFFF;
  box-shadow:0 2px 4px rgba(20,16,15,.05), 0 14px 30px -12px rgba(148,21,26,.26);
}
/* the top hairline was a glow; here it is a tick of brand colour */
:root[data-theme="light"] .home-mx-nodes>span::before{
  background:linear-gradient(90deg,transparent,rgba(148,21,26,.45),transparent);
}
:root[data-theme="light"] .home-mx-nodes b{color:rgba(20,16,15,.9)}
:root[data-theme="light"] .home-mx-nodes small{color:rgba(20,16,15,.5)}
:root[data-theme="light"] .home-mx-layer-name>span{
  border-color:rgba(148,21,26,.3);
  background:rgba(148,21,26,.07);
  color:#94151A;
}

/* Orchestration rail: a quiet band, legible rather than luminous. */
:root[data-theme="light"] .home-mx-orchestration{
  border:1px solid rgba(148,21,26,.2);
  background:linear-gradient(90deg,#FFFFFF,#FAF8F8);
  box-shadow:0 1px 2px rgba(20,16,15,.04);
}
/* Virtual Lab: the same paper as the cards, with the brand edge that marks it
   as the column standing outside the stack. */
:root[data-theme="light"] .home-mx-virtual{
  border:1px solid rgba(148,21,26,.22);
  background:linear-gradient(180deg,#FFFFFF 0%,#F8F6F5 100%);
  box-shadow:0 1px 2px rgba(20,16,15,.04), 0 16px 40px -24px rgba(20,16,15,.22);
}
/* Foundation bar keeps the brand red: it is the one element that should carry
   weight, and it already sets light type on itself. */
:root[data-theme="light"] .home-mx-foundation-core{
  border:1px solid rgba(148,21,26,.5);
  background:linear-gradient(100deg,#8E1418 0%,#A82128 62%,#8E1418 100%);
  box-shadow:0 14px 34px -18px rgba(148,21,26,.5);
}
/* A white sheen over white is invisible; a dark one over paper is grime.
   The sweep simply stops on this theme. */
:root[data-theme="light"] .home-mx-layer-name::after,
:root[data-theme="light"] .home-mx-nodes>span::after,
:root[data-theme="light"] .home-mx-orchestration::after,
:root[data-theme="light"] .home-mx-virtual::after{display:none}
:root[data-theme="light"] .home-mx-foundation-core::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

/* ========================================================================== 
   MICROBIAL HERO STAGE
   The animated strain is contained within the opening viewport. The section
   that follows can begin immediately without inheriting the hero visual.
   ========================================================================== */
.home-microbe-stage{
  position:relative;
  background:rgb(var(--ground-rgb));
  min-height:100dvh;
  overflow:hidden;
  overflow:clip;
  isolation:isolate;
  contain:paint;
}
@media(max-width:900px){
  .home-microbe-stage{min-height:100dvh}
}
.home-microbe-stage .home-hero{background:transparent}
/* Copy sits above the clipped strain surface. */
.home-microbe-stage > .home-hero{
  position:relative;
  z-index:1;
}
.home-microbe-pin{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
/* The visual is absolute rather than sticky. The stage derives its height from
   the hero, and both clipping layers guarantee that no animated pixel can
   cross into the publication section below. */
.home-microbe-stage > .home-hero{margin-top:0}
/* The full-width host gives the right-hand organism enough room to drift while
   its alpha fade protects the headline on the left. */
.home-microbe-stage .home-hero-strain{
  position:absolute;
  inset:0;
  width:100%;
  pointer-events:none;
}

/* ==========================================================================
   POINTER PASS-THROUGH
   The hero copy sits above the visual, but its full-bleed box would otherwise
   swallow every pointer event before it reached
   the visual: `.home-hero-inner` is full-bleed, so the hit test never got
   past it and hover was dead. The containers stop taking events; the things
   you can actually click take them back.
   ========================================================================== */
.home-microbe-stage > .home-hero,
.home-microbe-stage .home-hero-inner{
  pointer-events:none;
}
.home-microbe-stage a,
.home-microbe-stage button,
.home-microbe-stage .home-hero-actions{
  pointer-events:auto;
}

/* ==========================================================================
   BILINGUAL HERO LOCKUP
   The title used to depend on automatic word wrapping inside a very wide
   measure. At desktop sizes the second English line entered the organism,
   while CJK had no word spaces and therefore stayed on one oversized line.
   The markup now supplies the intended two-line lockup in both languages;
   these measures keep each line inside the copy half of the composition.
   ========================================================================== */
body.home-minimal .home-hero h1{
  width:min(50vw,790px);
  max-width:none;
  font-size:clamp(3.6rem,5.4vw,5.4rem);
  line-height:.92;
  white-space:nowrap;
}

html[lang="zh"] body.home-minimal .home-hero h1{
  width:min(44vw,680px);
  max-width:none;
  font-size:clamp(3.2rem,4.7vw,5.3rem);
  line-height:1.08;
  letter-spacing:.005em;
  white-space:nowrap;
}

@media(max-width:1100px){
  body.home-minimal .home-hero h1{
    width:min(64vw,680px);
    font-size:clamp(3.25rem,6.6vw,4.9rem);
  }
  html[lang="zh"] body.home-minimal .home-hero h1{
    width:min(58vw,620px);
    font-size:clamp(3rem,6vw,4.55rem);
  }
}

@media(max-width:820px){
  body.home-minimal .home-hero h1{
    width:min(78vw,630px);
    font-size:clamp(2.85rem,8.5vw,4.3rem);
  }
  html[lang="zh"] body.home-minimal .home-hero h1{
    width:min(76vw,600px);
    font-size:clamp(2.7rem,8vw,4.1rem);
  }
}

@media(max-width:580px){
  body.home-minimal .home-hero h1,
  html[lang="zh"] body.home-minimal .home-hero h1{
    width:100%;
    font-size:clamp(1.85rem,9.5vw,3.4rem);
  }
}

/* ==========================================================================
   SCIENCE LEAD WITHOUT THE PHOTOGRAPH
   The band was a two-up: a 620px image on the left, the claim on the right in
   a narrow column. With the image gone that column has no reason to stay
   narrow. The copy keeps the full width previously reserved for its claim.
   ========================================================================== */
.home-science-feature-plain{
  /* Back to an explicit two-column grid. It was switched to flex to centre the
     copy, but that made the container width follow its content, so the model's
     percentage inset resolved against the wrong box and it landed on the text.
     A grid states where each side ends. */
  display:grid;
  /* The model was halved, which freed the right-hand side; the copy gets the
     width back. At 46/54 the claim broke over four lines and the paragraph over
     four more, and that line count — not the object — was what made this the
     tallest band on the page. */
  grid-template-columns:minmax(0,56%) minmax(0,44%);
  align-items:center;
  /* This floor was here to give the object a canvas of its own to live in. It
     no longer has one — the model moved onto the pinned full-viewport canvas
     above (.home-net is display:none), so nothing renders inside this band any
     more and the floor was only stranding the copy: 213px of text centred in
     536px left 161px of dead space above and below it.
     What is left is ordinary breathing room, sized to the copy. */
  min-height:min(34vh, 320px);
}
.home-science-feature-plain .home-science-lead{
  max-width:min(52ch, 100%);
  /* the claim is 44 characters — two lines, not four */
  text-wrap:balance;
}
.home-science-feature-plain .home-science-lead h3{
  font-size:clamp(2rem,3.6vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.04em;
}
@media(min-width:1025px){
  /* keeps the claim in the left half, where the copy on the two screens above
     it also sits, so the eye keeps one column as it comes down the page */
  .home-science-feature-plain .home-science-lead{max-width:min(46ch, 94%)}
}

/* `.home-manifesto` paints its own opaque ground — correct when it was just
   another band, but inside the stage it sits above the pinned canvas and hid
   the molecule outright. The stage supplies the ground for both screens now,
   so this one goes transparent. Its bottom rule goes too: the two screens are
   one continuous field, and a line across the middle of it read as a seam. */
.home-manifesto-staged{
  background:transparent !important;
  border-bottom:0;
}

/* ==========================================================================
   PHYSICAL NETWORK
   Occupies the right half of the band whose copy claims these communities are
   wired assemblies. Same placement logic as the helix: the copy keeps the left
   column, the object takes the space the photograph used to.
   ========================================================================== */
.home-science-feature-plain{position:relative}
.home-net{
  position:absolute;
  /* Pulled out past the band on three sides. This is the widest object on the
     page and the band around it is mostly air; boxing it into the right 54%
     was what made it look incidental. */
  /* Right half only, and no longer bleeding far past the band — the overflow
     was most of what made this section tall. */
  /* Reaches a screen and a half above its own band. Particles cannot cross
     between two WebGL canvases — each only ever paints inside its own box —
     so the only way for these to look like they are descending out of the
     statement above is for this canvas to actually extend up there. The
     scale is halved in the JS to compensate, so the object and its grain
     render exactly the same size despite the taller frame. */
  position:absolute;
  right:-4%;
  left:46%;
  top:-210%;
  bottom:-8%;
  z-index:0;
  opacity:0;
  pointer-events:auto;
  transition:opacity .8s var(--ease-out);
}
.home-net.is-live{opacity:1}
.home-net-canvas{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  display:block;
}
/* the copy sits above it and keeps its own hit area */
.home-science-feature-plain .home-science-lead{
  position:relative;
  z-index:1;
  grid-column:1;
  padding-right:clamp(20px,3vw,48px);
}
@media(max-width:900px){
  /* narrow: the object goes behind the copy and steps back, the same way the
     helix does on the screens above */
  .home-net{inset:-4% -6% -4% -6%}
  .home-net.is-live{opacity:.4}
}
@media(prefers-reduced-motion:reduce){
  .home-net{opacity:0!important}
}

/* ==========================================================================
   JOIN BAND — LIGHT THEME
   This one is a full-bleed photograph, not a figure, so the plate treatment
   used elsewhere does not apply: there is no edge to mount it on. Its wash was
   authored to sink a dark photograph into a dark page; on ivory the same wash
   turns the whole band into a grey smear with the photograph still black
   underneath it.

   The band keeps its dark ground on this theme instead. It is the closing
   call to action and the one place the page is allowed to go dark — which
   also means the photograph is doing its job rather than being apologised for.
   ========================================================================== */
:root[data-theme="light"] .home-join{
  background:#14100F;
  color:#F2EFE8;
}
:root[data-theme="light"] .home-join-wash{
  background:
    linear-gradient(90deg,#14100F 0%,rgba(20,16,15,.94) 32%,rgba(20,16,15,.55) 60%,rgba(20,16,15,.12) 100%),
    linear-gradient(180deg,rgba(20,16,15,.3),rgba(20,16,15,.6));
}
:root[data-theme="light"] .home-join h2,
:root[data-theme="light"] .home-join .home-kicker{color:#F5F1EA}
:root[data-theme="light"] .home-join p{color:rgba(242,239,232,.72)}
:root[data-theme="light"] .home-join .home-button-quiet,
:root[data-theme="light"] .home-join .home-button-outline{
  background:rgba(242,239,232,.1);
  color:#F5F1EA;
  box-shadow:inset 0 1px 0 rgba(242,239,232,.2), 0 16px 38px -18px rgba(0,0,0,.6);
}

/* The science band takes the theme like every other band. It was pinned dark
   while the network was a separate canvas that needed a dark field to read
   against; now that it is the same object as the helix, it inherits. */


/* ==========================================================================
   ONE OBJECT, THREE SCREENS
   The network used to be a second scene in a second canvas, and no amount of
   matching made it read as the helix's own matter: two particle systems cannot
   become one another, they can only be layered. It is now the same InstancedMesh
   holding a second set of positions, so the third band is inside the pinned
   stage and the object simply changes shape as you travel down it.

   Everything below is what that removes: the separate container, its scale and
   grain compensation, and the layering fixes that existed only to keep two
   canvases from fighting.
   ========================================================================== */
.home-net{display:none}

/* Transparent, like the two screens above it. An opaque background here sat
   on top of the pinned canvas and hid the object outright — the same mistake
   the statement screen made when it first joined the stage. The dark ground
   this band wants is supplied by the stage instead, behind the canvas. */
.home-microbe-stage > .home-science{
  position:relative;
  z-index:1;
  background:transparent;
}
/* the band keeps the left column for its copy; the object holds the right */
.home-microbe-stage .home-science-feature-plain{
  /* This used to restate both the floor and the column split, which quietly
     undid the base rule twice over: the copy column was widened to 56% there
     and pulled back to 46% here, and the floor was raised again after being
     cut. The object no longer renders inside this band at all — it is on the
     pinned canvas above — so there is nothing here that needs its own height,
     and the split belongs in one place. */
  min-height:min(34vh, 320px);
  grid-template-columns:minmax(0,56%) minmax(0,44%);
}