/* styles.css — Kito Architects section styles (namespaced .s-*)
   Tokens exclusively from system.css. Primitives untouched. */

/* ---------- chrome ---------- */
.s-chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
  padding: var(--space-16) var(--gutter);
}
.s-chrome__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.s-chrome__nav { display: flex; gap: var(--space-40); }
.s-chrome__nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
}
.s-chrome__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.s-chrome__nav a[aria-current] { color: var(--ink); }

/* staggered load (chrome move) */
.js .s-chrome { animation: chrome-settle 0.6s var(--ease) both; }
.js .s-chrome__nav a { animation: nav-rise 0.5s var(--ease) both; }
.js .s-chrome__nav a:nth-child(1) { animation-delay: 0.1s; }
.js .s-chrome__nav a:nth-child(2) { animation-delay: 0.18s; }
.js .s-chrome__nav a:nth-child(3) { animation-delay: 0.26s; }
.js .s-chrome__nav a:nth-child(4) { animation-delay: 0.34s; }
@keyframes chrome-settle { from { transform: translateY(-8px); } to { transform: translateY(0); } }
@keyframes nav-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.page { padding-top: 64px; }

/* ---------- hero: fixed-100vh-stage ---------- */
.s-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.s-hero__plate { flex: 1; min-height: 0; padding: var(--space-16) var(--gutter) 0; display: flex; }
.s-hero__plate .mat { flex: 1; display: flex; min-height: 0; }
.s-hero__plate img { flex: 1; min-width: 0; height: 100%; object-fit: cover; filter: saturate(0.82); }
.s-hero__band {
  padding: var(--space-24) var(--gutter) var(--space-40);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-24);
}
.s-hero__word { margin: 0; }
.s-hero__sub { margin-top: var(--space-16); max-width: 34ch; }
.s-hero__credits { text-align: right; }
.s-hero__cue {
  display: inline-block;
  margin-top: var(--space-16);
}
/* staggered-load-sequence (hero move) */
.js .s-hero__band > * { animation: hero-rise 0.7s var(--ease) both; }
.js .s-hero__band > *:nth-child(1) { animation-delay: 0.15s; }
.js .s-hero__band > *:nth-child(2) { animation-delay: 0.3s; }
.js .s-hero__plate { animation: hero-plate 0.9s var(--ease) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-plate { from { opacity: 0; } to { opacity: 1; } }

/* ---------- index: scale-tension-hierarchy ---------- */
.s-index { border-bottom: 1px solid var(--line); padding: var(--space-64) 0 var(--space-104); }
.s-index__head { padding: 0 var(--gutter); margin-bottom: var(--space-40); }
.s-index__rows { display: block; }
.s-index__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-24);
  padding: var(--space-16) var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.s-index__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.s-index__row:hover::before, .s-index__row:focus-visible::before { width: 100%; }
.s-index__num { font-family: var(--font-mono); font-size: var(--size-caption); letter-spacing: 0.08em; }
.s-index__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  transition: transform 0.4s var(--ease);
}
.s-index__row:hover .s-index__name { transform: translateX(24px); }
.s-index__meta { text-align: right; }
/* trail-spotlight-mask: preview plate follows cursor */
.s-index__preview {
  position: fixed;
  z-index: 40;
  width: 320px;
  pointer-events: none;
  opacity: 0;
  transform: translate(24px, -50%);
}
.s-index__preview.on { opacity: 1; }
.s-index__preview img { transition: opacity 0.25s linear; }

/* ---------- case study: sticky-viewport + scroll-driven caption beats ---------- */
.s-case { border-bottom: 1px solid var(--line); }
.s-case__track { height: 400vh; }
.s-case__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: 5fr 7fr;
  overflow: hidden;
  background: var(--canvas);
}
.s-case__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-64) var(--gutter) var(--space-40);
  border-right: 1px solid var(--line);
}
.s-case__statement {
  font-family: var(--font-display);
  font-size: var(--size-display-m);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.s-case__beats { display: grid; }
.s-case__beat { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s linear; }
.s-case__beat.active { opacity: 1; }
.s-case__beat p { max-width: 30ch; margin-top: var(--space-8); }
.s-case__progress {
  height: 2px;
  background: var(--line);
  position: relative;
  margin-top: var(--space-40);
}
.s-case__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
}
.s-case__media { position: relative; background: var(--canvas-raised); }
.s-case__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.s-case__media img { filter: saturate(0.82); }

/* ---------- philosophy: word-by-word-reveal ---------- */
.s-philosophy {
  border-bottom: 1px solid var(--line);
  padding: var(--section-pad) var(--gutter);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-40);
}
.s-philosophy__statement {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.js .s-philosophy__statement .w { opacity: 0.12; transition: opacity 0.5s var(--ease); }
.js .s-philosophy__statement.in .w { opacity: 1; }
.s-philosophy__principles { list-style: none; display: grid; gap: var(--space-40); align-content: center; }
.s-philosophy__principles h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: var(--space-8);
}
.s-philosophy__principles p { max-width: 42ch; color: var(--ink-muted); }

/* ---------- team: blur-rise-reveal ---------- */
.s-team { border-bottom: 1px solid var(--line); padding: var(--section-pad) var(--gutter); }
.s-team__head { margin-bottom: var(--space-40); }
.s-team__list { list-style: none; }
.s-team__list li {
  display: grid;
  grid-template-columns: 2fr 2fr 3fr;
  gap: var(--space-24);
  align-items: baseline;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--line);
}
.js .s-team__list li { opacity: 0; filter: blur(6px); transform: translateY(16px); transition: opacity 0.6s var(--ease), filter 0.6s var(--ease), transform 0.6s var(--ease); }
.js .s-team__list li.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.s-team__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.s-team__role { font-size: 0.875rem; }
.s-team__cred { text-align: right; }

/* ---------- contact + footer ---------- */
.s-contact { padding: var(--section-pad) var(--gutter) var(--space-40); }
.s-contact__cta { margin-top: var(--space-40); }
.s-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  margin-top: var(--space-104);
  align-items: start;
}
.s-contact__addr p { margin-bottom: var(--space-8); }
.s-contact__form { display: grid; gap: var(--space-16); }
.s-contact__foot {
  margin-top: var(--space-104);
  border-top: 1px solid var(--line);
  padding-top: var(--space-24);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-24);
}
.s-contact__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
}

/* ---------- reveal defaults (no-JS safe) ---------- */
.reveal { }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .s-case__stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .s-case__text { order: 2; border-right: 0; border-top: 1px solid var(--line); padding: var(--space-24) var(--gutter); }
  .s-philosophy { grid-template-columns: 1fr; }
  .s-contact__grid { grid-template-columns: 1fr; }
  .s-team__list li { grid-template-columns: 1fr; gap: var(--space-8); }
  .s-team__cred { text-align: left; }
  .s-index__preview { display: none; }
  .s-hero__band { grid-template-columns: 1fr; }
  .s-hero__credits { text-align: left; }
}

/* ---------- reduced motion: full static fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  .s-case__track { height: auto; }
  .s-case__stage { position: static; height: auto; grid-template-columns: 1fr; }
  .s-case__media { min-height: 60vh; }
  .s-case__media img { position: static; width: 100%; height: auto; display: block; }
  .s-case__beats { display: block; }
  .s-case__beat { opacity: 1; padding-top: var(--space-16); }
  .s-case__beat p { display: block; }
  .s-index__preview { display: none; }
  .s-index__row:hover .s-index__name { transform: none; }
}