/* ============ HUB SKIN — 万象新语 ============ */
:root {
  --bg: #070708;
  --bg-2: #0e0e11;
  --ink: #f2efe7;
  --accent: #ff4d00;
  --accent-ink: #0a0a0b;
}
.accent { color: var(--accent); }

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.cosmos { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero .wrap, .hero__marquee { position: relative; z-index: 2; }
.hero__inner { padding-top: calc(var(--nav-h) + 6vh); padding-bottom: 10vh; display: flex; flex-direction: column; gap: clamp(24px, 4vh, 56px); }
.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(72px, 17vw, 300px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  background: linear-gradient(100deg, var(--ink) 30%, color-mix(in srgb, var(--accent) 80%, var(--ink)) 62%, var(--ink) 85%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-sheen 9s var(--e-in-out) infinite;
}
@keyframes hero-sheen { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.hero__latin { font-size: 11px; letter-spacing: 0.42em; color: var(--ink-faint); }
.hero__tag { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.9; color: var(--ink-dim); text-align: right; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; }
.hero__scroll { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.3em; color: var(--ink-dim); }
.hero__scroll .ic { animation: bob 2.2s var(--e-in-out) infinite; color: var(--accent); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hero__coords { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-faint); }
.hero__marquee { border-block: 1px solid var(--line); padding-block: 14px; font-size: 12px; letter-spacing: 0.3em; color: var(--ink-dim); }
.hero__marquee .ic { color: var(--accent); margin-inline: 8px; width: 12px; height: 12px; }

/* works index */
.works__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(48px, 7vw, 110px); flex-wrap: wrap; }
.index { border-top: 1px solid var(--line); position: relative; z-index: 2; }
.row {
  display: grid; grid-template-columns: 70px 1.35fr 0.8fr 1.2fr 60px;
  align-items: center; gap: 24px;
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding 0.5s var(--e-out);
}
.row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--row-bg, transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.5s var(--e-out);
}
.row:hover::before { transform: scaleY(1); }
.row:hover { padding-left: 24px; padding-right: 12px; }
.row__no { font-size: 12px; color: var(--ink-faint); transition: color 0.4s; }
.row__name {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(26px, 3.6vw, 58px); line-height: 1.05; letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  transition: color 0.4s, transform 0.5s var(--e-out);
}
.row:hover .row__name { transform: translateX(8px); }
.row__latin { font-size: 0.35em; letter-spacing: 0.3em; color: var(--ink-faint); font-weight: 500; }
.row__meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; line-height: 1.8; text-transform: uppercase; color: var(--ink-dim); }
.row__desc { font-size: 14.5px; color: var(--ink-dim); }
.row__go {
  width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; justify-self: end;
  transition: background 0.4s, border-color 0.4s, transform 0.5s var(--e-spring);
}
.row:hover .row__go { background: var(--row-accent); border-color: var(--row-accent); color: #0a0a0b; transform: rotate(45deg); }
@media (hover: hover) {
  .row:hover .row__no, .row:hover .row__desc { color: var(--ink); }
  .row:hover .row__name { color: var(--row-accent, var(--ink)); }
}
@media (max-width: 960px) {
  .row { grid-template-columns: 44px 1fr 44px; grid-template-areas: "no name go" ". meta go" ". desc go"; }
  .row__no { grid-area: no; } .row__name { grid-area: name; } .row__go { grid-area: go; width: 44px; height: 44px; }
  .row__meta { grid-area: meta; } .row__desc { grid-area: desc; }
}

/* floating preview */
.preview { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
@media (hover: hover) and (min-width: 960px) { .preview { display: block; } }
.preview__card {
  position: absolute; top: 0; left: 0;
  width: clamp(280px, 24vw, 420px); aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: var(--pv-accent, var(--accent));
  color: #0a0a0b; overflow: hidden;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.55s var(--e-in-out), background-color 0.4s;
  will-change: transform;
}
.preview.is-on .preview__card { clip-path: inset(0 0 0 0); }
.preview__icon .ic { width: 34px; height: 34px; }
.preview__word { font-size: clamp(64px, 7vw, 120px); line-height: 1; }
.preview__card::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0,0,0,0.06) 7px 8px);
}

/* studio */
.studio { background: var(--bg-2); border-block: 1px solid var(--line); }
.studio__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 120px); align-items: start; }
.studio__stats { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 44px); }
.stat { display: flex; align-items: baseline; gap: 28px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.stat__num { font-size: clamp(56px, 7vw, 120px); line-height: 0.9; }
.stat__label { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
.stat__label i { font-style: normal; font-size: 10px; letter-spacing: 0.24em; color: var(--ink-faint); }
.studio__text { display: flex; flex-direction: column; gap: 24px; padding-top: 12px; }
.infra { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 90px); }
.infra__item { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim); }
.infra__item .ic { color: var(--accent); width: 14px; height: 14px; }
@media (max-width: 960px) { .studio__grid { grid-template-columns: 1fr; } }

/* ethos */
.ethos__statement { font-size: clamp(34px, 6.5vw, 110px); font-weight: 600; line-height: 1.18; margin: 28px 0 clamp(48px, 6vw, 90px); max-width: 14em; }
.ethos__row { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 120px); align-items: start; }
.ethos__note { font-size: 15px; line-height: 2; color: var(--ink-dim); max-width: 30em; border-left: 2px solid var(--accent); padding-left: 24px; }
.ethos__list { display: flex; flex-direction: column; }
.ethos__item { display: flex; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); }
.ethos__item:last-child { border-bottom: 1px solid var(--line); }
.ethos__item .ic { width: 26px; height: 26px; color: var(--accent); margin-top: 4px; }
.ethos__item h3 { font-family: var(--f-serif); font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.ethos__item p { font-size: 14px; color: var(--ink-dim); max-width: 32em; }
@media (max-width: 960px) { .ethos__row { grid-template-columns: 1fr; } }

/* cta */
.cta { padding-block: clamp(100px, 14vw, 240px); text-align: center; background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 100%); }
.cta .display-1 { margin-bottom: 48px; }
.cta__row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* footer */
.footer__top { align-items: flex-start; }
.footer__v { font-size: 10px; letter-spacing: 0.5em; color: var(--ink-faint); }
.footer__about { font-size: 14px; color: var(--ink-dim); line-height: 1.9; }
.footer__sig { letter-spacing: 0.3em; }