@charset "UTF-8";

@font-face {
  font-family: "Barlow Condensed";
  src: url("../assets/fonts/barlow-condensed-black-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --space: light-dark(#eef0f2, #080b10);
  --paper: light-dark(#0e1012, #e6e9ec);
  --red: light-dark(#f06446, #f06446);
  /* Latin text uses the system UI face; Chinese falls through to PingFang or YaHei. */
  --ui-sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-family: var(--ui-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
/* Every color is written as light-dark(day, night); scripts/day-palette.mjs
   derives each day value from its night value. js/site-theme.js sets this. */
:root[data-theme="light"] { color-scheme: light; }
/* A theme change recolors everything at once, never through transitions. */
.is-theme-switching *, .is-theme-switching *::before, .is-theme-switching *::after { transition: none !important; }
/* Each theme shows its own logo artwork. */
.brand-logo.brand-logo-day, :root[data-theme="light"] .brand-logo:not(.brand-logo-day) { display: none; }
:root[data-theme="light"] .brand-logo.brand-logo-day { display: block; }
/* The day/night switch (js/theme-jets.js): the column's fine lines are drawn
   on a canvas whose own transition layer keeps it above both page images. */
.theme-jets { position: fixed; inset: 0; z-index: 2147483600; overflow: hidden; pointer-events: none; contain: strict; view-transition-name: theme-jets; }
.theme-jets > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
::view-transition-old(theme-jets) { display: none; }
::view-transition-group(theme-jets), ::view-transition-new(theme-jets) { animation: none; }
/* The column clips one page image, the day page, and the script ends the
   transition once the switch is done; the held group keeps it open until then. */
.is-theme-jets::view-transition-group(root) { animation: theme-jets-hold 60s linear; }
.is-theme-jets::view-transition-old(root), .is-theme-jets::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.is-theme-jets-opening::view-transition-new(root) { clip-path: polygon(0 0, 0 0, 0 0); }
.is-theme-jets-closing::view-transition-old(root) { z-index: 1; }
.is-theme-fade::view-transition-old(root), .is-theme-fade::view-transition-new(root) { animation-duration: 240ms; }
@keyframes theme-jets-hold { to { opacity: 1; } }

* { box-sizing: border-box; }
/* Hide the page scrollbar while retaining native scrolling. */
html { background: var(--space); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; color: var(--paper); background: var(--space); }
::selection { color: var(--space); background: var(--red); }

/* The loader is opt-in: without JavaScript the page stays directly accessible. */
.site-loader { display: none; }
.is-loading { overflow: hidden; }
.is-loading .site-loader {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: radial-gradient(ellipse 360px 280px at 50% 48%, light-dark(#fbb03b00, #fbb03b06), transparent 72%), var(--space);
  opacity: 1;
  transition: opacity 420ms ease;
}
.loader-content { width: min(240px, 80vw); text-align: center; transform: translateY(-10px); }
.loader-symbol { width: clamp(132px, 24vw, 160px); margin-inline: auto; animation: loader-arrive 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.loader-mark { display: block; width: 100%; height: auto; overflow: visible; }
.loader-ring { stroke: light-dark(#fbb03b, #fbb03b); }
.loader-ring-reveal { stroke-dasharray: 1; animation: loader-ring-trace 680ms cubic-bezier(0.42, 0, 0.28, 1) 140ms both; }
.loader-body { fill: light-dark(#040404, #fff); stroke: light-dark(#040404, #fff); stroke-width: 1; }
/* Skip the 22.2503-unit inward arc at the top; its edge appears with the fill. */
.loader-outline { fill: none; stroke: light-dark(#040404, #fff); stroke-width: 1; stroke-dasharray: 0 22.251 2000; }
/* Accelerate into the slash, then carry its momentum into the slowing arc.
   The 90ms overlap avoids a stopped handoff; matching fill curves follow 140ms later. */
.loader-slash-reveal { stroke-dasharray: 1; animation: loader-trace 280ms cubic-bezier(0.38, 0, 0.5, 1) 60ms both; }
.loader-circle-reveal { stroke-dasharray: 1; animation: loader-trace 540ms cubic-bezier(0.18, 0.58, 0.38, 1) 250ms both; }
.loader-fill-slash { animation-delay: 200ms; }
.loader-fill-circle { animation-delay: 390ms; }
.loader-caption { margin: 26px 0 0; color: light-dark(#494c4f, #979b9e); font-size: 10px; line-height: 1.8; letter-spacing: 0.3em; text-indent: 0.3em; animation: loader-caption-in 300ms ease 500ms both; }
.is-loading-exit .site-loader { opacity: 0; }
@keyframes loader-arrive {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  24% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes loader-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes loader-ring-trace { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }
@keyframes loader-caption-in { from { opacity: 0; } to { opacity: 1; } }

.hero {
  --hero-height: clamp(760px, 100svh, 1400px);
  min-height: 760px;
  height: 100svh;
  max-height: 1400px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 58%, light-dark(#c6d1da16, #14232e16), transparent 48%), var(--space);
}
/* The occasional ink treatment stays inside the hero; the rest of the blog is unchanged. */
html[data-black-hole-style="ink"] .hero {
  --paper: light-dark(#171309, #e8e2d4);
  --red: light-dark(#473b21, #b9ab8e);
  color: var(--paper);
  background: light-dark(#f4f4f4, #080808);
}
html[data-black-hole-style="ink"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .78 0 0 0 0 .74 0 0 0 0 .66 0 0 0 .10 0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
html[data-black-hole-style="ink"] .hero .space-grid { border-color: light-dark(#17130907, #e8e2d407); }
html[data-black-hole-style="ink"] .hero .live-clock { color: light-dark(#49443a, #a8a296); }
html[data-black-hole-style="ink"] .hero .clock-divider { background: light-dark(#858175, #676358); }
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.3; z-index: -1; }
.space-grid {
  position: absolute;
  inset: 48px 4.2%;
  z-index: -1;
  pointer-events: none;
  border: 1px solid light-dark(#0a151a06, #d7e6ee06);
}
[data-depth] { transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0); will-change: transform; }
.hero-composition { position: absolute; inset: 0; margin-inline: auto; }
.hero-heading { position: absolute; left: 7.5%; top: 17%; z-index: 3; width: max-content; }
h1 { position: relative; isolation: isolate; margin: 0; font-size: clamp(86px, 8.8vw, 176px); letter-spacing: -0.065em; font-weight: 900; line-height: 1.1; }
h1 > span { display: block; }
.title-first { position: relative; z-index: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.55em; line-height: 1; letter-spacing: 0.015em; text-transform: uppercase; opacity: 0.11; transform: translate3d(var(--pointer-x, 0px), calc(-0.065em + var(--pointer-y, 0px)), 0); }
.title-suffix { letter-spacing: 0; text-transform: none; }
.title-second { position: relative; z-index: 1; margin-top: -0.58em; font-size: 0.84em; letter-spacing: -0.03em; }
.title-first-content, .title-second-content { display: block; }
.title-period { display: inline-block; position: relative; top: 0.13em; color: var(--red); font-size: 0.85em; letter-spacing: 0; margin-left: 0.065em; transform-origin: 50% 85%; }

/* Entrance lives on the inner text, independent of the outer parallax layers. */
@keyframes title-first-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes title-second-enter {
  from { clip-path: inset(100% 0 0); transform: translateY(18px); }
  to { clip-path: inset(0); transform: translateY(0); }
}
@keyframes title-period-enter {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes title-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes hero-element-enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-nav-enter {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-scene-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-stars-enter { from { opacity: 0; } to { opacity: 0.3; } }
@media (prefers-reduced-motion: no-preference) {
  .title-period.is-cursor-blinking { animation: title-cursor-blink 1s steps(1, end) infinite; }
  .has-site-intro .black-hole { animation: hero-scene-enter 800ms ease-out both; }
  .has-site-intro .starfield { animation: hero-stars-enter 720ms ease-out both; }
  .has-site-intro .space-grid { animation: hero-scene-enter 620ms ease-out 160ms both; }
  .has-site-intro .title-first-content { animation: title-first-enter 720ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both; }
  .has-site-intro .title-second-content { animation: title-second-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both; }
  .has-site-intro .title-period { animation: title-period-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) 720ms both; }
  .has-site-intro .live-clock { animation: hero-element-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both; }
  .has-site-intro .site-header .site-brand { animation: hero-nav-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both; }
  .has-site-intro .site-header .menu-toggle { animation: hero-nav-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  .has-site-intro .site-header .site-nav a { animation: hero-nav-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) var(--nav-enter-delay, 240ms) both; }
  .site-header .site-nav a:nth-child(2) { --nav-enter-delay: 290ms; }
  .site-header .site-nav a:nth-child(3) { --nav-enter-delay: 340ms; }
  .site-header .site-nav a:nth-child(4) { --nav-enter-delay: 390ms; }
  /* Resume while the loader fades, so the page is already arriving underneath. */
  .is-loading:not(.is-loading-exit) :is(.black-hole, .starfield, .space-grid, .title-first-content, .title-second-content, .title-period, .live-clock, .site-header .site-brand, .site-header .menu-toggle, .site-header .site-nav a) { animation-play-state: paused; }
}
.live-clock {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 20px;
  margin: 32px 0 0 7px;
  color: light-dark(#3a4248, #a0a9b0);
  font: 14px "Consolas", "SFMono-Regular", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.7px;
  white-space: nowrap;
}
.clock-dot { width: 4px; height: 4px; background: var(--red); margin-right: 2px; }
.clock-divider { width: 25px; height: 1px; background: light-dark(#787b86, #656873); }
.black-hole { --hole-size: clamp(1020px, 114vw, 1760px); position: absolute; width: var(--hole-size); aspect-ratio: 3 / 2; left: 64%; top: 63%; transform: translate(-50%, -50%); margin: 0; z-index: 1; pointer-events: none; }
#black-hole-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 400ms ease; }
.black-hole-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 400ms ease; }
.black-hole.is-ready #black-hole-canvas { opacity: 1; }
.black-hole.is-ready .black-hole-fallback { opacity: 0; }
.black-hole-fallback[data-theme-ready="false"],
html[data-black-hole-style="ink"] .black-hole-fallback:not([data-black-hole-style="ink"]) { visibility: hidden; }
/* On the hero the black sphere switches day and night. The scene centres the
   hole in this figure; seen from distance r = 31.78 its shadow spans
   focal · tan(asin(2.6 / r · √(1 − 1/r))) of the figure's height, with focal
   4.05, or 3.7 for ink, whose hole sits slightly right and low (jetCamera in
   js/black-hole.js). */
.black-hole-switch { position: absolute; left: 50%; top: 50%; height: 32.7%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
html[data-black-hole-style="ink"] .black-hole-switch { left: 52%; top: 50.5%; height: 29.9%; }

@media (min-width: 1101px) {
  /* Keep the approved wide-screen disk/hero ratio in taller desktop windows,
     instead of switching to a smaller, lower disk at the 16:10 breakpoint. */
  html:not([data-black-hole-style="ink"]) .black-hole {
    --hole-size: calc(var(--hero-height) * 1.85);
    top: 57%;
    /* As the window narrows, leave room for the heading and the left disk tip. */
    left: clamp(64%, calc(19% + var(--hero-height) * 0.72), 74%);
  }
}
@media (min-aspect-ratio: 16/10) and (min-width: 1101px) {
  .hero { --hero-height: clamp(660px, 100svh, 1400px); min-height: 660px; }
  /* Cap the composition at 16:9 using the hero's actual, clamped height.
     Extra screen width becomes space around it, without clipping the disk. */
  .hero-composition { width: min(100%, calc(var(--hero-height) * 16 / 9)); }
  .black-hole { --hole-size: calc(var(--hero-height) * 1.85); top: 57%; }
  h1 { font-size: min(8.8vw, calc(var(--hero-height) * 0.148)); }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .hero-heading { left: 7.5%; top: 17%; }
  .black-hole { --hole-size: max(118vw, 1000px); top: 64%; }
}
@media (max-width: 700px) {
  .hero { min-height: 660px; height: 100svh; max-height: 1100px; }
  .space-grid { inset: 28px 7%; background: none; }
  .hero-heading { top: clamp(72px, 11svh, 112px); left: 9%; }
  h1 { font-size: clamp(66px, 19.2vw, 114px); }
  .title-first { font-size: 1.48em; }
  .live-clock { margin-top: 24px; font-size: 12px; letter-spacing: 1px; gap: 12px; }
  .clock-divider { width: 20px; }
  .black-hole { --hole-size: clamp(840px, 215vw, 1200px); left: 50%; top: 66%; }
}
@media (max-width: 380px) {
  .live-clock { gap: 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  [data-depth] { will-change: auto; }
  .loader-symbol, .loader-ring-reveal, .loader-slash-reveal, .loader-circle-reveal, .loader-caption { animation: none; }
}