:root {
  --surface: #ecf3f6;
  --ink: #0a1c2b;
  --muted: #526574;
  --line: #c7d8df;
  --forest: #071827;
  --teal: #00d8dd;
  --coral: #37d9e6;
  --dark: #07111d;
  --content: 1240px;
}

html { scroll-padding-top: 76px; }
body { font-family: "Inter", "Noto Sans SC", "Microsoft YaHei UI", sans-serif; }
::selection { color: #061523; background: #62eced; }

.site-header {
  min-height: 76px;
  padding-inline: max(4vw, calc((100vw - 1440px) / 2));
  background: rgba(5, 17, 29, .64);
  border-bottom: 1px solid rgba(115, 218, 236, .22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.site-header.is-scrolled { color: #e8fbff; background: rgba(5, 17, 29, .94); border-color: rgba(115, 218, 236, .18); }
.wordmark { gap: .9rem; flex: 0 0 auto; font-size: 1.05rem; letter-spacing: .1em; line-height: 1.1; }
.wordmark small { display: block; margin-top: 5px; color: #75aab8; font: 600 .57rem/1 "Consolas", monospace; letter-spacing: .22em; }
.wordmark-mark { width: 27px; height: 27px; border: 1px solid #71f0ed; border-radius: 7px; background: radial-gradient(circle at 30% 30%, #d7ffff, #18cee2 38%, #0b466a 70%); box-shadow: 0 0 25px #05bbd799; transform: rotate(-18deg); }
.site-nav { gap: clamp(1rem, 2vw, 2rem); max-width: 72vw; font-size: .8rem; }
.site-nav a { color: #b8d1dd; transition: color .2s; }
.site-nav a:hover, .site-nav a.is-active { color: #75f4f0; }
.site-nav a::after { background: #54e3e9; }

.hero { min-height: min(94svh, 920px); background: #07111d; isolation: isolate; }
.hero-image { object-position: 76% center; opacity: .28; filter: saturate(.55) hue-rotate(145deg) contrast(1.25); }
.hero-shade { background: linear-gradient(90deg, #06111f 3%, #06111fe9 48%, #081726aa 100%), linear-gradient(0deg, #06111f 1%, transparent 45%); }
.hero::before, .project-index::before, .closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(#5dc4e10e 1px, transparent 1px), linear-gradient(90deg, #5dc4e10e 1px, transparent 1px);
  background-size: 64px 64px;
}
.hero::after { content: "枢迹  /  SHUJI  /  CASE ARCHIVE"; position: absolute; z-index: 2; top: 50%; right: -7.5rem; color: #65bdd03c; font: 700 .7rem "Consolas", monospace; letter-spacing: .42em; transform: rotate(90deg); pointer-events: none; }
.hero-content { width: min(920px, 88vw); padding: 10rem 4vw clamp(6rem, 13vh, 10rem); }
.hero .eyebrow { display: flex; align-items: center; gap: 12px; color: #7ce8e9; font: 700 .72rem "Consolas", monospace; letter-spacing: .21em; }
.signal-dot { width: 7px; height: 7px; border-radius: 50%; background: #64f7d8; box-shadow: 0 0 18px #64f7d8; }
.hero h1 { font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-size: clamp(3.2rem, 7.5vw, 7.6rem); font-weight: 750; line-height: 1.1; letter-spacing: -.05em; }
.hero h1 em { color: #95f1ef; font-style: normal; text-shadow: 0 0 60px #00c4e355; }
.hero-copy { max-width: 640px; color: #bad0da; font-size: clamp(1rem, 1.5vw, 1.22rem); }
.hero .primary-action { gap: 2rem; padding: .95rem 1.35rem; color: #041624; background: #8ff0eb; border: 1px solid #8ff0eb; border-radius: 3px; box-shadow: 0 12px 42px #00d8dd2b; transition: transform .2s, box-shadow .2s; }
.hero .primary-action:hover { transform: translateY(-3px); box-shadow: 0 18px 46px #00d8dd55; }
.hero-index { bottom: 4vw; gap: .5rem; color: #bce3eb; }
.hero-index span:first-child { font-family: "Consolas", monospace; font-size: 4.5rem; color: #91eee9; }
.hero-coordinate { position: absolute; z-index: 2; left: 4vw; bottom: 2.5rem; color: #6f99a9; font: 600 .62rem/1.8 "Consolas", monospace; letter-spacing: .18em; }
.hero-orbit { position: absolute; z-index: 1; width: min(52vw, 720px); aspect-ratio: 1; top: 14%; right: -7%; border: 1px solid #42d7eb37; border-radius: 50%; box-shadow: 0 0 0 80px #3dcde60a, 0 0 0 160px #3dcde609; pointer-events: none; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 13%; border: 1px dashed #55e9ed35; border-radius: 50%; }
.hero-orbit::after { inset: 33%; border-style: solid; box-shadow: 0 0 80px #19c8da3c; }
.hero-orbit span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #8ff4e9; box-shadow: 0 0 22px #8ff4e9; }
.hero-orbit span:nth-child(1) { top: 18%; left: 18%; }.hero-orbit span:nth-child(2) { right: 7%; top: 48%; }.hero-orbit span:nth-child(3) { bottom: 4%; left: 35%; }

.project-index { position: relative; background: #071827; overflow: hidden; }
.project-index .section-inner { position: relative; z-index: 1; }
.project-index .eyebrow { color: #6ce9e5; font: 700 .72rem "Consolas", monospace; letter-spacing: .2em; }
.project-index h2 { max-width: 900px; font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif; font-weight: 650; letter-spacing: -.035em; }
.index-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 2.5rem; border-top: 1px solid #66b7c941; }
.index-list a { grid-template-columns: 40px minmax(0,1fr); gap: .35rem 1rem; padding: 1.3rem .5rem; border-color: #66b7c941; transition: background .2s, padding-left .2s; }
.index-list a:hover { padding-left: 1.15rem; color: #8ff3ec; background: #42d7e510; }
.index-list span { grid-row: span 2; color: #6ee6e5; font: 700 .88rem "Consolas", monospace; }
.index-list strong { font-size: .99rem; font-weight: 600; }.index-list small { grid-column: 2; font-size: .77rem; }

.project { position: relative; overflow: hidden; }
.project::before { content: "SHUJI  /  CASE STUDY"; position: absolute; top: 3rem; right: 4vw; color: #7093a84a; font: 700 .63rem "Consolas", monospace; letter-spacing: .2em; pointer-events: none; }
.project-heading h2 { letter-spacing: -.035em; }
.project-number { color: #078d9f; font-family: "Consolas", monospace; letter-spacing: .16em; }
.project .image-button { position: relative; isolation: isolate; align-self: start; }
.project .image-button img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}
.image-button::after { content: ""; position: absolute; z-index: 3; inset: 0; background: url("./assets/watermark.svg") repeat; background-size: 460px 255px; opacity: .2; pointer-events: none; }
.image-button:hover::after { opacity: .28; }
.lightbox { position: relative; isolation: isolate; }
.lightbox::after { content: ""; position: absolute; inset: 0; z-index: 2; background: url("./assets/watermark.svg") repeat; background-size: 460px 255px; opacity: .26; pointer-events: none; }
.lightbox-close { z-index: 5; }
.lightbox-stamp { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; padding: .35rem .6rem; color: #e3ffff; background: #061827bb; font: 700 .67rem "Consolas", monospace; letter-spacing: .08em; pointer-events: none; }
.closing { position: relative; overflow: hidden; background: #061827; }
.closing .section-inner { position: relative; z-index: 1; }
footer { border-top: 1px solid #2c5c6a; font-size: .75rem; letter-spacing: .06em; }

@media (max-width: 900px) {
  .site-nav { max-width: 62vw; }
  .hero-orbit { width: 70vw; right: -25%; top: 23%; }
  .index-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { min-height: 68px; }
  .wordmark { gap: .5rem; font-size: .82rem; }.wordmark span:last-child { display: block; }.wordmark small { font-size: .43rem; }
  .wordmark-mark { width: 22px; height: 22px; }
  .site-nav { max-width: 48vw; font-size: .72rem; }
  .hero { min-height: 92svh; }.hero-content { padding: 9rem 5vw 8rem; width: 96vw; }
  .hero h1 { font-size: clamp(2.85rem, 12vw, 4.9rem); }.hero-copy { max-width: 95%; }
  .hero-orbit { width: 90vw; right: -45%; top: 19%; }
  .hero-index { bottom: 2rem; right: 5vw; }.hero-index span:first-child { font-size: 3rem; }
  .hero-coordinate { left: 5vw; bottom: 2rem; }
  .project::before { top: 1.5rem; right: 4vw; font-size: .5rem; }
  .lightbox-stamp { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .hero .primary-action { transition: none; } }
@media print { .image-button::after, .lightbox::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }