/* tang.ninja home: an illustrated hero in depth layers, then the CV on one light sheet.
   Bauhaus shapes and primaries, laid out with Apple-like calm. */

:root {
  --black: #000;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --paper: #fbfbfd;
  --tile: #f2f2f5;
  --rule: #d9d9de;
  --red: #e2321f;
  --red-deep: #c92a17; /* red behind text, for contrast */
  --yellow: #f6be00;
  --blue: #1c4fb8;
  --link: #1c4fb8;
  --light: #f5f5f7;
  --display: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --text: "Geist", system-ui, -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  --page: 1180px;
  --gutter: max(20px, calc((100vw - var(--page)) / 2));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --settle: cubic-bezier(0.16, 0.84, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.hero :focus-visible, .impact :focus-visible, .contact :focus-visible { outline-color: var(--yellow); }
.wrap { max-width: calc(var(--page) + 40px); margin: 0 auto; padding: 0 20px; }

/* ---------- Navigation: hidden over the hero, slides in once the page covers it ---------- */

.nav {
  position: fixed;
  z-index: 100;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 var(--gutter);
  color: var(--ink);
  background: rgba(251, 251, 253, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.nav.is-shown { transform: none; visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand-mark { display: inline-flex; align-items: center; gap: 3px; }
.brand-mark i { display: block; width: 10px; height: 10px; }
.brand-mark i:nth-child(1) { background: var(--blue); border-radius: 50%; }
.brand-mark i:nth-child(2) { background: var(--red); }
.brand-mark i:nth-child(3) { background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.nav nav { display: flex; gap: 2px; }
.nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  text-decoration: none;
  opacity: 0.86;
}
.nav nav a:hover { opacity: 1; }

/* ---------- Hero: an illustrated scene, each layer moving at its own rate ---------- */

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--black);
  color: var(--light);
  container-type: size;
}

.stars {
  position: absolute;
  inset: 0;
  background-image: url(/hero/stars.svg);
  background-size: 480px 480px;
  animation: fade-in 2.4s ease both;
}
@keyframes fade-in { from { opacity: 0; } }

/* The scene keeps its 1600:720 shape. It fills the width, and on tall screens it is
   wider than the screen and cropped at the sides around --focus. On short, wide screens
   it slides down (cropping the water) so the title keeps the top quarter.
   The layers and their moving parts are drawn by tools/hero.py, which also writes the
   markup (home/hero/scene.html). */
.scene {
  --scene: 0.62;  /* preferred height, as a share of the hero */
  --focus: 0.5;   /* the point of the scene kept in the middle of the screen */
  --top: 0.24;    /* share of the hero kept clear for the title on short, wide screens */
  --sw: max(100vw, 100vh * var(--scene) * 2.2222);
  position: absolute;
  z-index: 1;
  left: calc(50vw - var(--focus) * var(--sw));
  bottom: min(0px, 100vh * (1 - var(--top)) - var(--sw) * 0.45);
  width: var(--sw);
  height: calc(var(--sw) * 0.45);
  transform-origin: 50% 70%;
  animation: push 3.4s var(--settle) both;
}
@supports (width: 1cqw) {
  .scene {
    --sw: max(100cqw, 100cqh * var(--scene) * 2.2222);
    left: calc(50cqw - var(--focus) * var(--sw));
    bottom: min(0px, 100cqh * (1 - var(--top)) - var(--sw) * 0.45);
  }
}
/* The night sky deepens toward the city; the moon's halo reaches up past the scene's top */
.scene::before {
  content: "";
  position: absolute;
  inset: -30% 0 0;
  background:
    radial-gradient(circle calc(var(--sw) * 0.27) at 63.6% 50.1%, rgba(246, 190, 0, 0.2), rgba(246, 190, 0, 0.07) 40%, rgba(246, 190, 0, 0) 100%),
    linear-gradient(180deg, rgba(10, 16, 38, 0) 23%, rgba(14, 22, 48, 0.45) 55%, #111a38 78%, #0c1430 100%);
}
@keyframes push { from { scale: 1.07; } }

/* Layers overhang the scene a little, so moving them never shows an edge. */
.layer {
  position: absolute;
  left: -2%;
  bottom: -3%;
  width: 104%;
  aspect-ratio: 1600 / 720;
  will-change: transform;
  animation: rise 1.7s var(--settle) var(--delay, 0s) both;
}
.layer img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.layer .art { inset: 0; width: 100%; height: 100%; }
.layer .fx { height: auto; }
@keyframes rise { from { opacity: 0; translate: 0 var(--rise, 0%); } }

/* One opening sequence: the city rises, its lights come on, the first punch lands and the
   monster sees stars, the detector locks on, the tanks open fire. After that everything small
   keeps moving on its own path, back and forth, each at its own pace, and the fist keeps landing. */
.lights { animation: fade-in 1s ease var(--on, 1.3s) both; }
.fx-punch { animation: punch 2.4s cubic-bezier(0.5, 0, 0.2, 1) 1s infinite; }
.fx-burst { animation: hit 2.4s ease-out 1.9s infinite; }
.fx-flash { animation: flash 2.4s ease-out 1.9s infinite; }
.fx-sparks { animation: sparks 2.4s ease-out 1.9s infinite; }
.fx-dizzy { transform-origin: 50% 50%; animation: pop 0.5s var(--settle) 2.3s both, spin 4s linear 2.3s infinite; }
.fx-glow { animation: glow 2.6s ease-in-out infinite alternate; }
.fx-light { animation: blink 2.4s ease-in-out infinite; }
.fx-rec { animation: blink 1.2s steps(1) infinite; }
.fx-ember { animation: blink 0.8s ease-in-out infinite; }
.fx-muzzle { opacity: 0; animation: fire 4.2s ease-out var(--fire, 3s) infinite; }
.fx-cloud, .fx-birds { animation: drift 70s ease-in-out infinite alternate; }
.fx-search { transform-origin: 50% 100%; rotate: var(--a0); animation: sweep var(--dur, 12s) ease-in-out infinite alternate; }
.fx-shimmer { transform-origin: 50% 0; animation: shimmer 2.8s ease-in-out infinite alternate; }
.fx-phone { opacity: 0; animation: snap 6s ease-out 3.4s infinite; }
.fx-wheel { transform-origin: 50% 50%; animation: spin 90s linear infinite; }
/* Water: the reflected lights wobble, two ripple sheets slide against each other, rings spread */
.fx-wobble { transform-origin: 50% 0; animation: wobble 5.5s ease-in-out infinite alternate; }
.fx-ripples { animation: ripples var(--dur, 9s) ease-in-out infinite alternate; }
.fx-ring { transform-origin: 50% 50%; animation: ring 3.4s ease-out infinite; }
@keyframes wobble { from { scale: 0.985 1; opacity: 0.85; } to { scale: 1.015 1; opacity: 1; } }
@keyframes ripples { from { translate: calc(var(--ax, 1%) * -1) 0; opacity: 0.7; } 50% { opacity: 1; } to { translate: var(--ax, 1%) 0; opacity: 0.7; } }
@keyframes ring { 0% { opacity: 0.8; scale: calc(var(--k, 1) * 0.35); } 100% { opacity: 0; scale: calc(var(--k, 1) * 1.6); } }
/* Movers: a group that travels as one. The script writes each one's path in its own units:
   --ax/--ay the half-span, --x0/--x1 the ends of a crossing, --th the swing, --dur the time one way. */
.mover { position: absolute; }
.mover > * { position: absolute; }
.fx-tofro { animation: to-fro var(--dur, 20s) ease-in-out infinite alternate both; }
.fx-bob { animation: bob var(--dur, 5s) ease-in-out infinite alternate both; }
.fx-cross { animation: cross var(--dur, 40s) linear infinite both; }
.fx-patrol { animation: patrol var(--dur, 20s) cubic-bezier(0.6, 0, 0.4, 1) infinite both; }
.fx-lift { animation: lift var(--dur, 7s) ease-in-out infinite alternate both; }
.fx-swing { animation: swing var(--dur, 10s) ease-in-out infinite alternate both, bob-y calc(var(--dur, 10s) * 0.37) ease-in-out infinite alternate both; }
.fx-dart { animation: dart var(--dur, 14s) ease-in-out infinite both; }
.fx-sink { animation: sink 19s ease-in-out infinite both; }
/* The satellite's pass: both run the same clock, the keyframes come with the scene markup */
.fx-orbit-sat { animation: orbit-sat 12.8s linear infinite; }
.fx-orbit-beam { animation: orbit-beam 12.8s linear infinite; }
/* Small lives: windows switching, the hook swaying, the camera panning, the monster blinking, the
   robot's visor sweeping; the clock's hands are set by home.js to the visitor's time */
.lights-a { animation: fade-in 1s ease var(--on, 1.3s) both, wink 9s steps(1) 2s infinite; }
.lights-b { animation: fade-in 1s ease var(--on, 1.3s) both, wink 13s steps(1) 5s infinite reverse; }
.lights-c { animation: fade-in 1s ease var(--on, 1.3s) both, wink 17s steps(1) 8s infinite; }
.fx-sway { animation: swing var(--dur, 6s) ease-in-out infinite alternate; }
.fx-pan { animation: swing var(--dur, 7s) ease-in-out infinite alternate; }
.fx-blink { opacity: 0; animation: blink-eye 5.7s steps(1) infinite; }
.fx-visor { animation: visor 1.6s ease-in-out infinite alternate; }
.fx-walk { animation: walk var(--dur, 9s) ease-in-out infinite both; }
@keyframes wink { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes blink-eye { 0%, 93% { opacity: 0; } 94%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes visor { from { translate: 0 0; } to { translate: 320% 0; } }
@keyframes walk {
  0%, 6% { translate: 0 0; }
  24%, 40% { translate: var(--span, 40%) 0; }
  58%, 70% { translate: calc(var(--span, 40%) * -0.7) 0; }
  88%, 100% { translate: 0 0; }
}
@keyframes to-fro { from { translate: calc(var(--ax, 0%) * -1) calc(var(--ay, 0%) * -1); } to { translate: var(--ax, 0%) var(--ay, 0%); } }
@keyframes bob {
  0% { translate: calc(var(--ax, 0%) * -1) 0; rotate: -5deg; }
  50% { translate: 0 var(--ay, 0%); rotate: 4deg; }
  100% { translate: var(--ax, 0%) calc(var(--ay, 0%) * -0.5); rotate: -3deg; }
}
@keyframes bob-y { from { translate: 0 calc(var(--ay, 0%) * -1); } to { translate: 0 var(--ay, 0%); } }
@keyframes cross {
  0% { translate: var(--x0) 0; }
  25% { translate: calc(var(--x0) + (var(--x1) - var(--x0)) * 0.25) calc(var(--ay, 0%) * -1); }
  50% { translate: calc(var(--x0) + (var(--x1) - var(--x0)) * 0.5) var(--ay, 0%); }
  75% { translate: calc(var(--x0) + (var(--x1) - var(--x0)) * 0.75) calc(var(--ay, 0%) * -0.6); }
  100% { translate: var(--x1) 0; }
}
@keyframes patrol {
  0%, 8% { translate: calc(var(--ax, 0%) * -1) 0; }
  40%, 56% { translate: var(--ax, 0%) 0; }
  88%, 100% { translate: calc(var(--ax, 0%) * -1) 0; }
}
@keyframes lift { from { translate: calc(var(--ax, 0%) * -0.5) calc(var(--ay, 0%) * -1); } to { translate: var(--ax, 0%) var(--ay, 0%); } }
@keyframes swing { from { rotate: calc(var(--th, 0deg) * -1); } to { rotate: var(--th, 0deg); } }
@keyframes dart {
  0%, 68% { translate: 0 0; }
  74%, 82% { translate: var(--ax, 0%) var(--ay, 0%); }
  90%, 100% { translate: 0 0; }
}
@keyframes sink {
  0%, 32% { translate: 0 0; }
  44%, 66% { translate: 0 110%; }
  78%, 100% { translate: 0 0; }
}
@keyframes punch {
  0%, 100% { translate: -2.4% 0.9%; rotate: -6deg; }
  36%, 52% { translate: 0 0; rotate: 0deg; }
}
@keyframes hit { 0% { opacity: 0; scale: 0.3; } 10% { opacity: 1; scale: 1.12; } 45% { opacity: 1; scale: 1; } 75%, 100% { opacity: 0; scale: 0.6; } }
@keyframes flash { 0% { opacity: 0; scale: 0.4; } 10% { opacity: 1; scale: 1.5; } 40% { opacity: 0.4; scale: 1; } 70%, 100% { opacity: 0; scale: 0.8; } }
@keyframes sparks { 0% { opacity: 0; scale: 0.2; } 9% { opacity: 1; scale: 1; } 50% { opacity: 0.5; scale: 1.1; } 70%, 100% { opacity: 0; scale: 1.2; } }
@keyframes pop { from { opacity: 0; scale: 0.2; } }
@keyframes glow { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes blink { 0%, 40% { opacity: 1; } 55%, 100% { opacity: 0.06; } }
@keyframes drift { from { translate: -3% 0; } to { translate: 3% 0; } }
@keyframes sweep { from { rotate: var(--a0); } to { rotate: var(--a1); } }
@keyframes shimmer { from { opacity: 0.55; scale: 0.94 1; } to { opacity: 1; scale: 1.06 1; } }
@keyframes snap { 0% { opacity: 1; scale: 1.3; } 8%, 100% { opacity: 0; scale: 0.5; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes fire { 0% { opacity: 1; scale: 1.2; } 12%, 100% { opacity: 0; scale: 0.4; } }

/* The satellite reads the monster one line at a time, across the spectrum */
.scan { position: absolute; overflow: hidden; }
.scan i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #7b6cff, #2f8bff, #22c38e, #f6be00, #ff7a1a, #e2321f) 0 0 / 100% 3px no-repeat;
  translate: 0 62%;
  animation: scan 5s ease-in-out 3s infinite;
}
@keyframes scan {
  0% { translate: 0 36%; opacity: 0; }
  12%, 82% { opacity: 1; }
  100% { translate: 0 96%; opacity: 0; }
}

/* Detection boxes: anchors sit on the objects, the boxes in the hud layer on top of everything */
.layer.hud { animation: none; }
.anchor { position: absolute; pointer-events: none; }
.det {
  --c: var(--yellow);
  position: absolute;
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 16px no-repeat;
  animation: lock 0.9s var(--settle) 2.5s both;
}
.det span {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 5px;
  padding: 2px 7px 3px;
  border-radius: 3px;
  background: var(--c);
  color: #000;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
@keyframes lock { 0% { opacity: 0; scale: 1.1; } 45% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
/* The small things get boxes too, but only the one under the pointer */
.det-more { left: 0; top: 0; opacity: 0; scale: 1.1; animation: none; transition: opacity 0.18s ease, scale 0.18s ease; }
.det-more.is-hit { opacity: 1; scale: 1; }
.det-s {
  background-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px, 8px 2px, 2px 8px;
}
.det-s span { padding: 1px 5px 2px; font-size: 10px; }
.det-below span { bottom: auto; top: 100%; margin: 5px 0 0; }

.hero.is-covered .scene, .hero.is-covered .hero-head { visibility: hidden; }
.hero.is-covered .fx, .hero.is-covered .scan i { animation-play-state: paused; }

/* Title at the top left, the section index at the top right */
.hero-head {
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 7vh, 72px) var(--gutter) 0;
  will-change: transform;
}
@supports (width: 1cqw) {
  .hero-head { padding: clamp(28px, 7cqh, 72px) max(20px, (100cqw - var(--page)) / 2) 0; }
}
.hero-title, .hero-index { animation: fade-up 1.1s var(--settle) both; }
.hero-index { animation-delay: 0.25s; }
@keyframes fade-up { from { opacity: 0; translate: 0 18px; } }
.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3.25rem, 9vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.lede {
  max-width: 30ch;
  margin: 22px 0 0;
  color: rgba(245, 245, 247, 0.92);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
}
.aff { max-width: 52ch; margin: 8px 0 0; color: rgba(245, 245, 247, 0.62); font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); }

/* Six sections, in two columns of three */
.hero-index { flex: 0 0 auto; padding-top: 6px; }
.hero-index ol {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-index a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
  min-width: 132px;
  padding: 8px 0;
  border-top: 1px solid rgba(245, 245, 247, 0.2);
  color: rgba(245, 245, 247, 0.8);
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s, padding 0.3s var(--ease);
}
.hero-index li:nth-child(3n) a { border-bottom: 1px solid rgba(245, 245, 247, 0.2); }
.hero-index a span { color: var(--yellow); font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-index a:hover { color: #fff; padding-left: 6px; }
/* Short, wide screens (laptops): a smaller title, and the scene starts lower */
@media (max-height: 860px) and (min-aspect-ratio: 3/2) {
  .scene { --top: 0.31; }
  .hero h1 { font-size: clamp(3.25rem, min(9vw, 15vh), 8rem); }
  .lede { margin-top: 16px; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); }
}

/* ---------- The page slides up over the hero as one rounded sheet ---------- */

.sheet {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45);
}
.block { padding-top: clamp(80px, 11vw, 136px); }
.block h2 {
  margin: 0 0 clamp(32px, 5vw, 56px);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.h-num {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.block h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }

/* 01 Research areas: one Bauhaus shape each */
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.area {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  padding: 36px;
  border-radius: 28px;
  background: var(--tile);
  text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.area:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.35); }
.area-shape { position: absolute; transition: transform 0.6s var(--ease); }
.area:hover .area-shape { transform: translate(-10px, 10px); }
.area-p .area-shape { top: -24px; right: -36px; width: 260px; height: 234px; background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.area-r .area-shape { top: 40px; right: 40px; width: 180px; height: 180px; background: var(--red); }
.area-h .area-shape { top: -90px; right: -90px; width: 290px; height: 290px; border-radius: 50%; background: var(--blue); }
.area h3 { position: relative; margin: 0 0 10px; font-size: 2.125rem; line-height: 1.05; }
.area p { position: relative; max-width: 30ch; margin: 0; color: var(--muted); }
.area-link { position: relative; margin-top: 22px; color: var(--link); font-weight: 600; }
.area:hover .area-link { text-decoration: underline; text-underline-offset: 4px; }

/* Research in numbers: one black panel */
.impact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "total bars" "stats stats";
  align-items: end;
  gap: 48px;
  margin-top: 20px;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 32px;
  background: var(--black);
  color: var(--light);
}
.impact-total { grid-area: total; }
.big-number {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(5.5rem, 12vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
}
.big-label { margin: 16px 0 0; color: rgba(245, 245, 247, 0.72); font-size: 1.3125rem; }
.bars {
  grid-area: bars;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 300px auto;
  gap: 0 16px;
  margin: 0;
}
.bar { display: flex; flex-direction: column; justify-content: flex-end; }
.bar-value { margin-bottom: 10px; font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1; }
.bar-fill {
  display: block;
  height: calc(var(--v) * 0.48px);
  min-height: 4px;
  border-radius: 8px 8px 0 0;
  background: var(--light);
  transition: height 1s var(--ease);
}
.bar-now .bar-fill { background: var(--yellow); }
.bars.is-waiting .bar-fill { height: 4px; }
.bar-year { padding-top: 12px; border-top: 1px solid rgba(245, 245, 247, 0.25); color: rgba(245, 245, 247, 0.6); font-size: 0.9375rem; }
.bars figcaption { grid-column: 1 / -1; margin-top: 20px; color: rgba(245, 245, 247, 0.5); font-size: 0.875rem; }
.stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  margin: 0;
  padding-top: 36px;
  border-top: 1px solid rgba(245, 245, 247, 0.2);
}
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; }
.stats dd {
  align-self: flex-start;
  margin: 0;
  padding-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.stats div:nth-child(1) dd { box-shadow: inset 0 -6px 0 var(--red); }
.stats div:nth-child(2) dd { box-shadow: inset 0 -6px 0 var(--yellow); }
.stats div:nth-child(3) dd { box-shadow: inset 0 -6px 0 var(--blue); }
.stats div:nth-child(4) dd { box-shadow: inset 0 -6px 0 var(--light); }
.stats dt { max-width: 24ch; color: rgba(245, 245, 247, 0.66); font-size: 0.9375rem; line-height: 1.4; }

/* 02 Honors: four poster-like tiles, then the full lists */
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.award {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 36px;
  border-radius: 28px;
  color: #fff;
}
.award > * { position: relative; }
.award .award-shape { position: absolute; }
.award-year { margin: 0 0 auto; font-family: var(--display); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.01em; }
.award-stat { display: flex; flex-direction: column; margin: 36px 0 0; }
.award-stat b { font-family: var(--display); font-weight: 600; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 0.95; letter-spacing: -0.03em; }
.award-stat span { margin-top: 6px; font-size: 0.9375rem; opacity: 0.8; }
.award .award-stat + h3 { margin-top: 18px; }
.ratio { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--tile); color: var(--ink); font-style: normal; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.award h3 { max-width: 19ch; margin: 28px 0 12px; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.05; }
.award p:not(.award-year) { max-width: 46ch; margin: 0; font-size: 1rem; line-height: 1.5; }
.award-y { background: var(--yellow); color: #000; }
.award-y .award-shape { top: -90px; right: -70px; width: 240px; height: 240px; border-radius: 50%; background: #000; }
.award-r { background: var(--red-deep); }
.award-r .award-shape { top: 36px; right: 36px; width: 120px; height: 120px; background: var(--yellow); transform: rotate(12deg); }
.award-b { background: var(--blue); }
.award-b .award-shape {
  top: 36px; right: 36px;
  width: 188px; height: 52px;
  background: radial-gradient(circle at 26px 26px, #fff 25px, transparent 26px) 0 0 / 68px 52px repeat-x;
}
.award-k { background: var(--black); }
.award-k .award-shape { top: 40px; right: 40px; display: flex; gap: 10px; }
.award-k .award-shape i { display: block; width: 40px; height: 40px; }
.award-k .award-shape i:nth-child(1) { background: var(--blue); border-radius: 50%; }
.award-k .award-shape i:nth-child(2) { background: var(--red); }
.award-k .award-shape i:nth-child(3) { background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.more-honors { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 56px; }
.more-honors { margin-top: clamp(48px, 6vw, 72px); }
.more-honors h3 { margin: 0 0 14px; font-size: 1.75rem; line-height: 1.1; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--rule); line-height: 1.45; }
.plain-list li > span:last-child { flex: 0 0 auto; color: var(--muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 03 Papers */
.papers-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(32px, 5vw, 48px); }
.papers-head h2 { margin: 0 !important; }
.filter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tile); }
.filter button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  cursor: pointer;
}
.filter button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); }
.filter button[data-filter]:not([data-filter="all"])::before { content: ""; width: 10px; height: 10px; }
.filter button[data-filter="p"]::before { background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.filter button[data-filter="r"]::before { background: var(--red); }
.filter button[data-filter="h"]::before { background: var(--blue); border-radius: 50%; }

.year-group {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.year-group[hidden], .pub[hidden] { display: none; }
.year { margin: 0; font-family: var(--display); font-weight: 500 !important; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; }
.pubs { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.pub { display: grid; grid-template-columns: 12px minmax(0, 1fr) 4ch; gap: 0 18px; align-items: start; }
.pub-shape { width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px #b7b7bd; }
.pub[data-area="p"] .pub-shape { border-radius: 0; box-shadow: none; background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pub[data-area="r"] .pub-shape { border-radius: 0; box-shadow: none; background: var(--red); }
.pub[data-area="h"] .pub-shape { box-shadow: none; background: var(--blue); }
.pub-title { font-weight: 600; font-size: 1.1875rem; line-height: 1.35; text-decoration: none; }
.pub-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.pub-authors, .pub-venue { margin: 4px 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.pub-authors b { color: var(--ink); font-weight: 600; }
.pub-cites { font-family: var(--display); font-weight: 500; font-size: 1.375rem; line-height: 1.3; text-align: right; font-variant-numeric: tabular-nums; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.badge { padding: 4px 11px; border-radius: 999px; background: var(--tile); color: var(--ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.badge-y { background: var(--yellow); color: #000; }
.badge-r { background: var(--red-deep); color: #fff; }
.badge-b { background: var(--blue); color: #fff; }
.papers-note { margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9375rem; }
.papers-note a { color: var(--link); font-weight: 600; text-underline-offset: 4px; }

/* 04 Education and experience: two timelines */
.cv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cv-col { padding: 40px; border-radius: 28px; background: var(--tile); }
.cv-col h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; font-size: 1.75rem; line-height: 1.1; }
.cv-mark { flex: 0 0 auto; width: 18px; height: 18px; }
.cv-mark-b { background: var(--blue); border-radius: 50%; }
.cv-mark-r { background: var(--red); }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 28px 30px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: -6px; width: 2px; background: var(--rule); }
.timeline li::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.cv-col:last-child .timeline li::after { border-radius: 0; background: var(--red); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline p { margin: 0; }
.t-when { color: var(--muted); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-what { margin-top: 4px !important; font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.t-where { margin-top: 2px !important; }
.t-note { margin-top: 4px !important; color: var(--muted); font-size: 0.9375rem; }

/* 05 Service */
/* 05 Service: the reviewing in numbers, then every venue as a bar sized by its impact factor */
.review-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 56px; align-items: end; margin-bottom: 28px; }
.review-head h3 { grid-column: 1 / -1; margin: 0; font-size: 1.75rem; line-height: 1.1; }
.review-stats { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 0; }
.review-stats div { display: flex; flex-direction: column; gap: 6px; }
.review-stats dd {
  margin: 0;
  padding-bottom: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.6vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.review-stats div:nth-child(1) dd { box-shadow: inset 0 -6px 0 var(--red); }
.review-stats div:nth-child(2) dd { box-shadow: inset 0 -6px 0 var(--yellow); }
.review-stats div:nth-child(3) dd { box-shadow: inset 0 -6px 0 var(--blue); }
.review-stats dt { color: var(--muted); font-size: 0.9375rem; }
.service-lede { max-width: 40ch; margin: 0; color: var(--muted); }
.venues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.venue {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name if" "pub if" "bar bar";
  gap: 2px 18px;
  padding: 20px 22px 18px;
  border-radius: 18px;
  background: var(--tile);
  overflow: hidden;
}
.venue-name { grid-area: name; font-weight: 600; line-height: 1.3; }
.venue-pub { grid-area: pub; color: var(--muted); font-size: 0.875rem; line-height: 1.35; }
.venue-if { grid-area: if; display: flex; flex-direction: column; align-items: flex-end; align-self: start; text-align: right; }
.venue-if b { font-family: var(--display); font-weight: 600; font-size: 1.875rem; line-height: 1; letter-spacing: -0.02em; }
.venue-if small { max-width: 14ch; margin-top: 4px; color: var(--muted); font-size: 0.75rem; line-height: 1.25; }
.venue-bar { grid-area: bar; display: block; height: 8px; margin-top: 12px; border-radius: 4px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.venue-bar i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.venue:nth-child(1) .venue-bar i { background: var(--red); }
.venue:nth-child(2) .venue-bar i { background: var(--yellow); }
.venue-conf { background: var(--black); color: var(--light); }
.venue-conf .venue-pub, .venue-conf .venue-if small { color: rgba(245, 245, 247, 0.62); }
.venue-conf .venue-if small { max-width: 20ch; }
.venues-note { max-width: 70ch; margin: 18px 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.members { max-width: 720px; margin-top: clamp(40px, 5vw, 64px); }
.members h3 { margin: 0 0 14px; font-size: 1.75rem; line-height: 1.1; }

/* 06 Contact */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 80px);
  border-radius: 32px;
  background: var(--black);
  color: var(--light);
}
.contact > * { position: relative; }
.contact::before {
  content: "";
  position: absolute;
  right: -110px; bottom: -110px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: var(--blue);
}
.contact::after {
  content: "";
  position: absolute;
  right: 190px; bottom: 150px;
  width: 64px; height: 64px;
  background: var(--yellow);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.contact h2 .h-num { color: rgba(245, 245, 247, 0.55); }
.contact-mail {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 6.4vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}
.contact-mail:hover { color: var(--yellow); }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 0; padding: 0; list-style: none; }
.contact-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.42);
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.2s, background 0.2s;
}
.contact-links a:hover { background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 1.5px var(--light); }

/* Footer */
.foot { padding-top: clamp(64px, 8vw, 104px); }
.foot::after {
  content: "";
  display: block;
  height: 10px;
  margin-top: 48px;
  background: linear-gradient(90deg, var(--red) 0 33.34%, var(--yellow) 0 66.67%, var(--blue) 0);
}
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 32px; }
.foot p { margin: 0; color: var(--muted); font-size: 0.875rem; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1000px) {
  .areas, .awards, .cv { grid-template-columns: minmax(0, 1fr); }
  .area { min-height: 0; padding-top: 196px; }
  .area-p .area-shape { top: -16px; right: -20px; width: 200px; height: 180px; }
  .area-r .area-shape { top: 32px; right: 32px; width: 128px; height: 128px; }
  .area-h .area-shape { top: -80px; right: -80px; width: 240px; height: 240px; }
  .impact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "total" "bars" "stats"; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-honors, .review-head { grid-template-columns: minmax(0, 1fr); }
  .award { min-height: 340px; }
  .hero-head { display: block; }
  .hero h1 { font-size: 11.5vw; }
  .hero-index { display: inline-block; margin-top: 30px; }
}
/* Portrait screens: the scene gets less of the height and is cropped at the sides */
@media (max-aspect-ratio: 1/1) {
  .scene { --scene: 0.6; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 1100px) {
  .layer.hud { display: none; }
}
@media (max-width: 640px) {
  .nav { padding: 0 12px; }
  .nav nav a { padding: 0 8px; font-size: 0.8125rem; }
  .nav .nav-opt, .brand-mark { display: none; }
  .scene { --scene: 0.48; --focus: 0.465; }
  .hero-head { display: block; padding-top: 28px; }
  .hero h1 { font-size: 23vw; line-height: 0.84; }
  .lede { margin-top: 18px; }
  .hero .hero-index, .layer.hud { display: none; }
  .layer { will-change: auto; }
  .year-group { grid-template-columns: minmax(0, 1fr); }
  .bars { grid-template-rows: 250px auto; gap: 0 10px; }
  .bar-fill { height: calc(var(--v) * 0.4px); }
  .bar-value { font-size: 1.375rem; }
  .stats { gap: 28px 16px; }
  .area { padding-left: 28px; padding-right: 28px; padding-bottom: 28px; }
  .award { min-height: 0; padding: 28px; padding-top: 150px; }
  .award-y .award-shape { width: 190px; height: 190px; top: -60px; right: -60px; }
  .award-r .award-shape { width: 84px; height: 84px; top: 28px; right: 28px; }
  .award-b .award-shape { top: 28px; right: 28px; transform: scale(0.8); transform-origin: right top; }
  .award-k .award-shape { top: 30px; right: 28px; }
  .award-k .award-shape i { width: 32px; height: 32px; }
  .award-year { position: absolute !important; top: 28px; left: 28px; }
  .award-stat { margin-top: 0; }
  .venues { grid-template-columns: minmax(0, 1fr); }
  .venue { padding: 16px 18px 14px; }
  .ratio { margin-left: 0; }
  .cv-col { padding: 28px; }
  .plain-list li { flex-wrap: wrap; }
  .contact::before { width: 170px; height: 170px; right: -80px; bottom: -80px; }
  .contact::after { width: 40px; height: 40px; top: 36px; right: 32px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stars, .scene, .layer, .fx, .lights, .det, .scan i, .mover, .hero-title, .hero-index { animation: none !important; }
  .area, .area-shape, .bar-fill, .hero-index a { transition: none; }
}