:root {
  --bg: #0a0a0a;
  --cream: #e8e6e0;
  --muted: #969696;
  --muted-dim: #777;
  --line: rgba(232, 230, 224, 0.12);
  --amber: #e8b478;
  --steel: #8194ab;
  --display: 'Bebas Neue', sans-serif;
  --body: 'Space Grotesk', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- tweakable --- */
  --hero-max: 240px;
  --statement-max: 6rem;
  --pillar-max: 5rem;
  --contact-max: 8rem;
  --caption-opacity: 0.65;
  --label-opacity: 0.55;
  --label-tracking: 0.35em;
  --reveal-duration: 0.75s;
  --reveal-distance: 28px;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 16px;
  color: var(--bg);
  background: var(--cream);
  font: 500 13px/1.2 var(--body);
  text-decoration: none;
  transform: translateY(calc(-100% - 20px));
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--cream);
  color: var(--bg);
}

/* ---------- Brand scene canvas ----------
   height uses the large viewport unit so mobile URL-bar collapse never
   resizes the GL buffers (no reallocation hitch mid-scroll). */
#particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
}

/* Reduced-motion play/pause toggle (injected by render.js) */
.scene-toggle {
  position: fixed;
  left: clamp(28px, 6vw, 96px);
  bottom: 22px;
  z-index: 90;
  width: 44px;
  height: 44px;
  padding: 0;
  font: 12px/42px var(--body);
  text-align: center;
  color: var(--muted);
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.scene-toggle:hover,
.scene-toggle:focus-visible {
  color: var(--cream);
  border-color: rgba(232, 230, 224, 0.4);
}

/* ---------- Ambient layers over the canvas, under content ----------
   ::before  restrained cool glow behind the hero (the one accent).
   ::after   film grain — a static SVG-noise tile for "expensive" texture. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42vmax 42vmax at 50% 40%,
      rgba(96, 142, 194, 0.10), rgba(96, 142, 194, 0) 70%);
  mix-blend-mode: screen;
  will-change: transform;
  animation: glowDrift 26s ease-in-out infinite alternate;
}

/* very slow, desaturated drift — the glow breathes without drawing the eye */
@keyframes glowDrift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }

  to {
    transform: translate3d(2%, 1.6%, 0) scale(1.07);
  }
}

body::after {
  content: '';
  position: fixed;
  /* bleed just past the largest grainShift offset (~3.9vw) — a bigger layer
     only costs compositor memory (it is promoted by will-change) */
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grainShift 1.2s steps(1) infinite;
}

/* live film grain: discrete jump-cuts between offsets, compositor-only */
@keyframes grainShift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  12.5% {
    transform: translate(-2.4%, -3.1%);
  }

  25% {
    transform: translate(1.8%, -1.2%);
  }

  37.5% {
    transform: translate(-1.1%, 2.6%);
  }

  50% {
    transform: translate(2.9%, 1.4%);
  }

  62.5% {
    transform: translate(-2.2%, 0.8%);
  }

  75% {
    transform: translate(1.3%, -2.7%);
  }

  87.5% {
    transform: translate(-0.6%, 1.9%);
  }
}

/* ---------- Custom dot cursor ---------- */
.cursor-dot,
.cursor-ring {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor-ready .cursor-dot,
.cursor-ready .cursor-ring {
  display: block;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--cream);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(232, 230, 224, 0.4);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.cursor-ring.hover {
  width: 56px;
  height: 56px;
  border-color: rgba(232, 230, 224, 0.8);
}

@media (hover: hover) and (pointer: fine) {
  .cursor-ready body {
    cursor: none;
  }

  .cursor-ready a,
  .cursor-ready button {
    cursor: none;
  }
}

@media (hover: none),
(pointer: coarse) {

  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

/* ---------- Layout shell ---------- */
.wrap {
  position: relative;
  z-index: 2;
}

.section-pad {
  padding: 0 clamp(28px, 6vw, 96px);
}

/* ---------- Nav ---------- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px clamp(28px, 6vw, 96px);
  mix-blend-mode: difference;
  opacity: 1;
  transition: opacity 0.6s ease 0.15s;
}

/* first paint: nav eases in instead of popping (progressive) */
@starting-style {
  nav {
    opacity: 0;
  }
}

.brand {
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5em;
  color: var(--cream);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s var(--reveal-ease);
}

.nav-links {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  list-style: none;
}

.nav-links a {
  font-family: var(--body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s var(--reveal-ease);
  position: relative;
  display: inline-block;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--cream);
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--cream);
}

.nav-links a:hover::after {
  width: 100%;
}

/* ---------- Language switch ---------- */
.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.25em;
}

.lang-switch a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.lang-switch a:hover,
.lang-switch a:focus-visible,
.lang-switch a.active {
  color: var(--cream);
}

.lang-switch .sep {
  color: var(--muted-dim);
  user-select: none;
}

.brand:focus-visible,
.nav-links a:focus-visible,
.lang-switch a:focus-visible,
.more-link:focus-visible,
.contact-mail:focus-visible,
.about-facts a:focus-visible,
.scene-toggle:focus-visible,
.proof-control:focus-visible,
.proof-summary:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.hero-title {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.82;
  font-size: clamp(64px, 15vw, var(--hero-max));
  letter-spacing: 0.01em;
  margin-left: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
  will-change: transform;
}

.hero-title span {
  display: inline-block;
  white-space: nowrap;
}

/* trim Bebas cap/baseline gaps so display type sits optically true (en only;
   CJK headings use Noto and keep normal boxes) */
html[lang="en"] .hero-title,
html[lang="en"] .contact-big,
html[lang="en"] .pillar-title {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.hero-title .l1,
.hero-title .l2 {
  color: var(--cream);
}

.hero-title .l3 {
  /* half-lit: readable but dimmer than l1/l2, keeps the fade-out layering */
  color: rgba(232, 230, 224, 0.7);
}

/* Masked line-by-line rise on load (text stays in the DOM for SEO). */
@keyframes lineRise {
  from {
    clip-path: inset(0 0 105% 0);
    transform: translateY(0.32em);
  }

  to {
    clip-path: inset(0 0 -8% 0);
    transform: none;
  }
}

.hero-title .l1 {
  animation: lineRise 0.95s var(--reveal-ease) 0.15s both;
}

.hero-title .l2 {
  animation: lineRise 0.95s var(--reveal-ease) 0.28s both;
}

.hero-title .l3 {
  animation: lineRise 0.95s var(--reveal-ease) 0.41s both;
}

.hero-sub {
  margin-top: clamp(40px, 6vh, 80px);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
  max-width: 30ch;
  animation: heroSubIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

@keyframes heroSubIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.scroll-cue {
  position: absolute;
  right: clamp(28px, 6vw, 96px);
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: cuePulse 2.4s ease-in-out infinite;
}

@keyframes cuePulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.7;
  }
}

.scroll-cue .bar {
  width: 56px;
  height: 1px;
  background: var(--muted);
  position: relative;
  overflow: hidden;
}

.scroll-cue .bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateX(-100%);
  animation: scrollbar 2.4s ease-in-out infinite;
}

@keyframes scrollbar {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

.scroll-cue span {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Section label ---------- */
.label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: rgba(255, 255, 255, var(--label-opacity));
  display: flex;
  align-items: center;
  gap: 14px;
}

.label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--muted-dim);
}

/* ---------- Statement ---------- */
.statement {
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(120px, 18vh, 220px);
  max-width: 1400px;
}

.statement-body {
  margin-top: 48px;
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, var(--statement-max));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: rgba(232, 230, 224, 0.7);
  max-width: 18ch;
  will-change: transform;
}

.statement-body .sg {
  opacity: 1;
  transition: opacity var(--reveal-duration) var(--reveal-ease);
}

.js .statement-body .sg {
  opacity: 0;
}

.js .statement-body .sg.in {
  opacity: 1;
}

.statement-body .em {
  font-style: normal;
  color: var(--cream);
}

.statement-fact {
  margin-top: 32px;
  font-family: var(--body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(232, 230, 224, 0.55);
  max-width: 58ch;
}

/* ---------- About page ---------- */
.about-head {
  padding-top: clamp(120px, 20vh, 240px);
  padding-bottom: clamp(36px, 5vh, 72px);
}

.about-title {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin-top: 24px;
}

.about-lead {
  margin-top: 28px;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(232, 230, 224, 0.85);
  max-width: 30ch;
}

.about {
  padding-top: clamp(36px, 5vh, 72px);
  padding-bottom: clamp(60px, 9vh, 120px);
  max-width: 1400px;
}

.about-body {
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: rgba(232, 230, 224, 0.62);
  max-width: 62ch;
}

.about-body + .about-body {
  margin-top: 28px;
}

.about-details {
  padding-top: clamp(36px, 5vh, 72px);
  padding-bottom: clamp(80px, 12vh, 160px);
}

.about-facts {
  margin-top: 40px;
  max-width: 620px;
}

.about-facts > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.about-facts > div:last-child {
  border-bottom: 1px solid var(--line);
}

.about-facts dt {
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-facts dd {
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.about-facts a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s;
}

.about-facts a:hover {
  border-color: var(--cream);
}

/* About: narrative (left) + facts (right) as two columns on wider screens */
.about-cols {
  max-width: 1400px;
  padding-top: clamp(36px, 5vh, 72px);
  padding-bottom: clamp(80px, 12vh, 160px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.about-cols > .about,
.about-cols > .about-details {
  padding: 0;
  max-width: none;
}

@media (min-width: 860px) {
  .about-cols {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

/* ---------- Technology page ---------- */
.tech-hero {
  padding-top: clamp(120px, 20vh, 240px);
  padding-bottom: clamp(40px, 6vh, 80px);
}

.tech-hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin-top: 24px;
  max-width: 18ch;
}

.tech-hero-sub {
  margin-top: 28px;
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: rgba(232, 230, 224, 0.72);
  max-width: 52ch;
}

.tech {
  padding-bottom: clamp(100px, 14vh, 180px);
  max-width: 1400px;
}

.tech-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px clamp(40px, 6vw, 96px);
  border-top: 1px solid var(--line);
  padding: clamp(32px, 5vw, 56px) 0;
}

.tech-item:last-child {
  border-bottom: 1px solid var(--line);
}

.tech-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.tech-desc {
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: rgba(232, 230, 224, 0.62);
  max-width: 60ch;
}

@media (min-width: 860px) {
  .tech-item {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
    align-items: baseline;
  }
}

/* ---------- Technology: proof section (A/B live sim) ---------- */
.proof {
  padding-top: clamp(100px, 14vh, 180px);
  padding-bottom: clamp(60px, 9vh, 110px);
  border-top: 1px solid var(--line);
  max-width: 1400px;
}

.proof-title {
  margin-top: 34px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--cream);
}

.proof-sub {
  margin-top: 22px;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: rgba(232, 230, 224, 0.62);
  max-width: 62ch;
}

.proof-same {
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.proof-same .sep {
  color: var(--muted-dim);
}

.proof-same .only {
  color: var(--amber);
}

.proof-stage {
  margin-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

#proof-canvas {
  display: block;
  width: 100%;
  height: min(56vh, 540px);
  cursor: crosshair;
  touch-action: pan-y;
  /* keep page scroll alive over the canvas on touch */
}

.proof-still-image {
  display: block;
  width: 100%;
  height: auto;
}

.proof-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
}

.proof-cap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
}

.proof-cap output {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

.proof-cap.linku output {
  color: var(--amber);
}

.proof-hint,
.proof-hint-touch {
  margin-top: clamp(20px, 3vh, 32px);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(232, 230, 224, 0.62);
}

/* desktop shows the cursor hint; touch shows the tap hint + disturb button */
.proof-hint-touch {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .proof-hint {
    display: none;
  }

  .proof-hint-touch {
    display: block;
  }
}

.proof-controls {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.js .proof-controls {
  display: flex;
}

.proof-control {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber);
  background: none;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  min-height: 44px;
  padding: 10px 18px;
  cursor: pointer;
  letter-spacing: 0.08em;
}

.proof-control:hover,
.proof-control:focus-visible,
.proof-control:active {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}

.proof-details {
  margin-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--line);
  max-width: 760px;
}

.proof-summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.3s ease;
}

.proof-summary::-webkit-details-marker {
  display: none;
}

.proof-summary::before {
  content: '▸';
  color: var(--amber);
  font-size: 10px;
  transition: transform 0.2s;
}

.proof-details[open] .proof-summary::before {
  transform: rotate(90deg);
}

.proof-summary:hover {
  color: var(--cream);
}

.proof-spec {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: rgba(232, 230, 224, 0.68);
  padding: 2px 0 18px;
}

.proof-spec b {
  font-weight: 400;
  color: rgba(232, 230, 224, 0.75);
}

.proof-spec .o {
  color: var(--amber);
}

.proof-note {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: rgba(232, 230, 224, 0.62);
  max-width: 76ch;
}

@media (max-width: 720px) {
  .proof {
    padding-top: clamp(72px, 10vh, 110px);
    padding-bottom: clamp(44px, 7vh, 72px);
  }

  .proof-title {
    margin-top: 24px;
  }

  .proof-sub {
    margin-top: 16px;
    line-height: 1.75;
  }

  .proof-same {
    margin-top: 18px;
  }

  .proof-stage {
    margin-top: 22px;
  }

  #proof-canvas {
    height: min(40vh, 330px);
  }

  .proof-cap {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
}

/* ---------- Section link (routes to a dedicated page) ---------- */
.more-link {
  display: inline-block;
  position: relative;
  margin-top: clamp(36px, 6vh, 72px);
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.more-link:hover {
  color: var(--cream);
}

/* one hover language sitewide: the nav's underline sweep */
.more-link::after,
.contact-mail::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--cream);
  transition: width 0.3s ease;
}

.more-link:hover::after,
.contact-mail:hover::after {
  width: 100%;
}

.more-link .arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform 0.3s var(--reveal-ease);
}

.more-link:hover .arrow {
  transform: translateX(5px);
}

/* ---------- Pillars (What We Do) ---------- */
.pillars {
  padding-top: clamp(100px, 14vh, 180px);
  padding-bottom: clamp(100px, 14vh, 180px);
  border-top: 1px solid var(--line);
}

.pillar-list {
  margin-top: clamp(48px, 8vh, 96px);
}

.pillar {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(20px, 5vw, 80px);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: clamp(36px, 5vw, 64px) 0;
}

.pillar:last-child {
  border-bottom: 1px solid var(--line);
}

/* pointer-following warm glow on list rows (fine pointers only) */
@media (hover: hover) and (pointer: fine) {

  .pillar,
  .tech-item {
    position: relative;
  }

  .pillar::after,
  .tech-item::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(240px 170px at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--amber) 5%, transparent), transparent 70%);
  }

  .pillar:hover::after,
  .tech-item:hover::after {
    opacity: 1;
  }
}

.pillar-num {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 1.1em;
}

.pillar-title {
  font-family: var(--display);
  font-size: clamp(3rem, 5vw, var(--pillar-max));
  line-height: 0.92;
  color: var(--cream);
}

.pillar-tag {
  margin-top: 14px;
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, var(--caption-opacity));
  text-transform: none;
  line-height: 1.7;
}

/* ---------- Contact ---------- */
.contact {
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(80px, 10vh, 120px);
  border-top: 1px solid var(--line);
}

.contact-big {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 0.84;
  color: var(--cream);
  margin-top: 40px;
}

.contact-note {
  margin-top: 28px;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.02em;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.62);
}

.contact-mail {
  display: inline-block;
  position: relative;
  margin-top: 36px;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s var(--reveal-ease);
}

.contact-mail:hover {
  color: #fff;
}

footer {
  margin-top: clamp(80px, 12vh, 140px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Cross-document view transitions ----------
   Shared stylesheet = all pages opt in; unsupported browsers keep hard
   navigation (progressive enhancement). The brand mark is a shared element. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.brand {
  view-transition-name: brand;
}

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .js .reveal,
  .statement-body .sg,
  .js .statement-body .sg {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-cue,
  .hero-sub,
  .hero-title .l1,
  .hero-title .l2,
  .hero-title .l3 {
    animation: none;
  }

  .scroll-cue .bar::after {
    animation: none;
  }

  body::before,
  body::after {
    animation: none;
  }

  nav {
    transition: none;
  }
}

html.motion-paused body::before,
html.motion-paused body::after,
html.motion-paused .scroll-cue,
html.motion-paused .scroll-cue .bar::after {
  animation-play-state: paused !important;
}

html.motion-paused .hero-sub,
html.motion-paused .hero-title .l1,
html.motion-paused .hero-title .l2,
html.motion-paused .hero-title .l3 {
  animation: none;
}

/* Narrow or squarish viewports: small copy inevitably crosses the scene's
   glow — a dark halo keeps it readable without visibly changing it on the
   plain background. The aspect clause mirrors the scene's own portrait
   dimming (render.js pf ramp at aspect < 1.05), so the two contrast aids
   engage together instead of on unrelated triggers. */
@media (max-width: 700px), (max-aspect-ratio: 21/20) {

  .hero-sub,
  .statement-fact,
  .pillar-tag,
  .contact-note,
  .tech-desc,
  .tech-hero-sub,
  .about-lead,
  .about-body {
    text-shadow: 0 1px 10px rgba(10, 10, 10, 0.85), 0 0 26px rgba(10, 10, 10, 0.7);
  }
}

@media (max-width: 640px) {
  .nav-links {
    gap: 18px;
  }

  .nav-right {
    gap: 16px;
  }

  .lang-switch {
    gap: 7px;
    letter-spacing: 0.15em;
  }

  .pillar {
    grid-template-columns: 48px 1fr;
  }

  .hero-sub {
    margin-top: 32px;
  }
}

/* ---------- CJK locale overrides (zh-Hant / ja) ---------- */
/* Base pages are en; these rules only apply on the localized documents.
   Big display headings switch to Noto Sans (TC/JP) because Bebas Neue has
   no CJK glyphs; body copy widens because full-width CJK glyphs need more room. */
html[lang="zh-Hant"] {
  --cjk-display: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', var(--display);
  --cjk-body: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', var(--body);
}

html[lang="ja"] {
  --cjk-display: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', var(--display);
  --cjk-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', var(--body);
}

html[lang="zh-Hant"] .hero-title,
html[lang="ja"] .hero-title {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(42px, 11vw, 168px);
  line-height: 1.04;
  letter-spacing: 0.04em;
  margin-left: 0;
  word-break: normal;
}

html[lang="zh-Hant"] .pillar-title,
html[lang="ja"] .pillar-title {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: 0.04em;
}

html[lang="zh-Hant"] .contact-big,
html[lang="ja"] .contact-big {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: 0.04em;
}

html[lang="zh-Hant"] .statement-body,
html[lang="ja"] .statement-body {
  font-family: var(--cjk-body);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  max-width: 22ch;
}

html[lang="zh-Hant"] .hero-sub,
html[lang="ja"] .hero-sub {
  font-family: var(--cjk-body);
  letter-spacing: 0.06em;
  max-width: 42ch;
}

html[lang="zh-Hant"] .contact-note,
html[lang="ja"] .contact-note {
  font-family: var(--cjk-body);
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.9;
  max-width: 50ch;
}

html[lang="zh-Hant"] .statement-fact,
html[lang="ja"] .statement-fact {
  font-family: var(--cjk-body);
  letter-spacing: 0.04em;
  line-height: 1.9;
  max-width: 52ch;
}

html[lang="zh-Hant"] .about-title,
html[lang="ja"] .about-title {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.18;
  letter-spacing: 0.04em;
}

html[lang="zh-Hant"] .about-lead,
html[lang="ja"] .about-lead,
html[lang="zh-Hant"] .about-body,
html[lang="ja"] .about-body,
html[lang="zh-Hant"] .about-facts dd,
html[lang="ja"] .about-facts dd {
  font-family: var(--cjk-body);
  letter-spacing: 0.03em;
  line-height: 1.9;
}

html[lang="zh-Hant"] .tech-hero-title,
html[lang="ja"] .tech-hero-title {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.28;
  letter-spacing: 0.03em;
}

html[lang="zh-Hant"] .tech-title,
html[lang="ja"] .tech-title {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
}

html[lang="zh-Hant"] .tech-hero-sub,
html[lang="ja"] .tech-hero-sub,
html[lang="zh-Hant"] .tech-desc,
html[lang="ja"] .tech-desc {
  font-family: var(--cjk-body);
  letter-spacing: 0.03em;
  line-height: 1.95;
}

html[lang="zh-Hant"] .proof-title,
html[lang="ja"] .proof-title {
  font-family: var(--cjk-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.2;
  letter-spacing: 0.03em;
}

html[lang="zh-Hant"] .proof-sub,
html[lang="ja"] .proof-sub {
  font-family: var(--cjk-body);
  letter-spacing: 0.04em;
  line-height: 1.95;
}

html[lang="zh-Hant"] .proof-hint,
html[lang="ja"] .proof-hint,
html[lang="zh-Hant"] .proof-hint-touch,
html[lang="ja"] .proof-hint-touch {
  font-family: var(--cjk-body);
  font-size: 11px;
  letter-spacing: 0.12em;
}

html[lang="zh-Hant"] .proof-control,
html[lang="ja"] .proof-control {
  font-family: var(--cjk-body);
  letter-spacing: 0.16em;
}

html[lang="zh-Hant"] .skip-link,
html[lang="ja"] .skip-link,
html[lang="zh-Hant"] .proof-note,
html[lang="ja"] .proof-note {
  font-family: var(--cjk-body);
}

html[lang="zh-Hant"] .proof-same,
html[lang="ja"] .proof-same {
  font-family: var(--cjk-body);
  font-size: 12px;
  letter-spacing: 0.1em;
}

html[lang="zh-Hant"] .proof-cap,
html[lang="ja"] .proof-cap {
  font-family: var(--cjk-body);
  letter-spacing: 0.2em;
}

html[lang="zh-Hant"] .proof-summary,
html[lang="ja"] .proof-summary {
  font-family: var(--cjk-body);
  letter-spacing: 0.2em;
}

html[lang="zh-Hant"] .pillar-tag,
html[lang="ja"] .pillar-tag,
html[lang="zh-Hant"] .nav-links a,
html[lang="ja"] .nav-links a,
html[lang="zh-Hant"] .label,
html[lang="ja"] .label {
  font-family: var(--cjk-body);
}

html[lang="zh-Hant"] .more-link,
html[lang="ja"] .more-link {
  font-family: var(--cjk-body);
  text-transform: none;
  letter-spacing: 0.12em;
}

/* ---------- Narrow screens: keep page-switch links visible ----------
   Previously the anchor links were hidden here, leaving no way to change
   page on a phone. Instead: condense them to fit, drop the difference blend
   (which made them vanish against the scene), and scrim the text so brand,
   links and the language switch stay legible over any background. */
@media (max-width: 520px) {
  nav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    mix-blend-mode: normal;
    padding: 14px 20px 28px;
    /* top-down scrim: guarantees the brand/links/language switch always sit
       on a dark-enough backing, fading to transparent so there is no hard
       edge cutting across the deep-space scene below */
    background: linear-gradient(to bottom,
        rgba(10, 10, 10, 0.86) 0%,
        rgba(10, 10, 10, 0.58) 52%,
        rgba(10, 10, 10, 0) 100%);
  }

  .brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3em;
    text-shadow: 0 1px 9px rgba(10, 10, 10, 0.9);
  }

  .nav-right {
    display: contents;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-end;
    gap: 8px 16px;
  }

  .nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(232, 230, 224, 0.72);
    text-shadow: 0 1px 9px rgba(10, 10, 10, 0.9);
  }

  .nav-links a:hover {
    color: var(--cream);
  }

  .lang-switch a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 9px rgba(10, 10, 10, 0.9);
  }

  .lang-switch .sep {
    text-shadow: 0 1px 9px rgba(10, 10, 10, 0.9);
  }

  .lang-switch {
    grid-column: 2;
    grid-row: 1;
  }

  .proof-hint,
  .proof-hint-touch {
    margin-top: 16px;
  }

  .proof-controls {
    margin-top: 14px;
  }

  .proof-details {
    margin-top: 20px;
  }
}