/* ==========================================================================
   Yuqi Meng — homepage
   Dark editorial identity. See docs/superpowers/specs/
   2026-07-15-homepage-visual-redesign-design.md for the design rationale and
   2026-07-15-homepage-static-rebuild-design.md for why this is plain CSS.
   ========================================================================== */

:root {
  --paper   : #2A2E3B;
  --panel   : #262A36;
  --ink     : #C8CAD4;
  --muted   : #9BA0B2; /* accessibility-adjusted, see static-rebuild spec §3 */
  --faint   : #6E7488;
  --accent  : #AEA2EA;
  --accent-2: #C2B8F0;
  --rule    : #3A3F4E;
  --serif   : "Newsreader", Georgia, serif;
  --mono    : "IBM Plex Mono", ui-monospace, "Consolas", monospace;
}

/* ---- reset / base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

::selection {
  background: var(--accent);
  color: var(--paper);
}

a, button, input, textarea, select, summary, [tabindex] {
  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- masthead ---- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
}

.masthead-id {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.masthead-id span {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

.masthead-nav {
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead-nav a {
  color: var(--muted);
  text-decoration: none;
}

.masthead-nav a:hover {
  color: var(--accent);
}

/* ---- noscript notice ---- */

.noscript-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  letter-spacing: 0.03em;
  padding: 10px 28px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

/* ---- mesh signature + two-column layout ---- */

.hero-wrap {
  position: relative;
}

.mesh {
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    linear-gradient(var(--accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(130% 90% at 22% -10%, #000 0%, transparent 68%);
          mask-image: radial-gradient(130% 90% at 22% -10%, #000 0%, transparent 68%);
}

.layout {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  /* min() lets the rail shrink fluidly instead of staying rigidly fixed --
     a hard 300px + the .pub grid's fixed image column left no room to give
     between this and the 768px stack breakpoint, so zooming in (which
     shrinks the effective viewport in CSS px) forced the content column to
     overflow rather than reflow. minmax(0, 1fr) lets the content column
     shrink below its own content's intrinsic width too, for the same reason. */
  grid-template-columns: min(300px, 25%) minmax(0, 1fr);
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .masthead-nav {
    display: none;
  }
}

/* ---- rail ---- */

.rail {
  padding: 40px 30px 40px 28px;
  border-right: 1px solid var(--rule);
  position: sticky;
  top: 96px;
  align-self: start;
}

@media (max-width: 768px) {
  .rail {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 32px;
  }
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  display: block;
}

.r-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--ink);
  margin-top: 18px;
  letter-spacing: -0.01em;
}

.r-alt {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  font-size: 1rem;
  margin-top: 0.25em;
}

.r-role {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-top: 1em;
}

.r-loc {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  letter-spacing: 0.02em;
  margin-top: 0.5em;
}

.r-links {
  list-style: none;
  margin: 1.4em 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.r-links li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.55em 0;
  border-top: 1px solid var(--rule);
}

.r-links li:last-child {
  border-bottom: 1px solid var(--rule);
}

.r-links .tk {
  color: var(--accent);
  font-size: 0.68rem;
  line-height: 1;
}

.r-links a {
  color: var(--ink);
  text-decoration: none;
}

.r-links a:hover {
  color: var(--accent);
}

/* ---- main content column ---- */

.content {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 1020px;
  padding: 40px 40px 56px 36px;
}

@media (max-width: 768px) {
  .content {
    padding: 32px 24px 48px;
    max-width: none;
  }
}

.content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

.content a:hover {
  color: var(--accent-2);
  text-decoration-color: var(--accent-2);
}

.about p {
  margin: 0 0 1.1em;
}

/* ---- section header pattern ---- */

.sec-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2.75em 0 1em;
}

.sec-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.sec-rule {
  height: 1px;
  background: var(--rule);
  flex: 1;
}

/* ---- news / education (mono date + serif text) ---- */

.item-date {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  min-width: 90px;
  padding-top: 0.15em;
}

.news-item {
  display: flex;
  gap: 14px;
  font-size: 0.98rem;
  margin-top: 11px;
}

#edu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#edu-list li {
  display: flex;
  gap: 14px;
  font-size: 0.95rem;
  margin-top: 8px;
}

/* ---- publications ---- */

.pub {
  display: grid;
  /* same fluid-sizing reasoning as .layout above -- 44% keeps the image at
     exactly 400px at the content column's full 1020px width (400/908 inner
     width ≈ 44%), and shrinks it smoothly instead of forcing overflow as
     the column narrows below that. */
  grid-template-columns: min(400px, 44%) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin-top: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

.pub:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .pub {
    grid-template-columns: 1fr;
  }
}

.pub-image img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: block;
}

.pub-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink);
}

.pub-authors {
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 6px;
}

.pub-authors strong {
  color: var(--ink);
  font-weight: 600;
}

.pub-venue {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 8px;
}

.pub-links {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  margin-top: 10px;
  display: flex;
  gap: 18px;
}

.pub-links a {
  color: var(--accent);
  text-decoration: none;
}

.pub-links a:hover {
  color: var(--accent-2);
}

/* ---- teaching ---- */

.teaching-role {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.8em;
}

.teaching-role:first-child {
  margin-top: 0;
}

#teaching-list ul {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 0;
}

#teaching-list li {
  font-size: 0.95rem;
  margin-top: 8px;
  line-height: 1.5;
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--rule);
  margin-top: 20px;
  padding: 22px 28px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--faint);
  text-align: center;
  letter-spacing: 0.04em;
}

footer a {
  color: var(--faint);
}

footer a:hover {
  color: var(--accent);
}