/* =========================================================
   Home page: scroll-craft build "gvrpj-home" (rhythmic cutlist).
   Loaded only on /. Engine: /assets/scrollcraft/ (untouched).
   Grounds hard-cut between night (dark) and Daylight (light) sections,
   so the accent carries two stops of one coral hue, per the taste floor.
   Shared theme (tokens, bar, signal, close) lives in night.css.
   ========================================================= */
/* ---------- 1. Hero: layered night freeway ---------- */
.hx {
  position: relative; min-height: calc(100svh - 68px); display: grid; align-items: end;
  background: linear-gradient(#0a090c, #1c181a 62%); color: var(--night-ink); overflow: clip;
}
.hx-plate { position: absolute; inset: 0; }
.hx-layer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 20% 50%; transform-origin: 50% 100%; }
/* Depth from motion, not cut-outs: the photo drifts and scales slightly while the word lifts away faster. */
.hx-sky { z-index: 0; transform: translate3d(0, calc(var(--hx-exit, 0) * 6%), 0) scale(calc(1.02 + var(--hx-exit, 0) * 0.05)); }
.hx-word {
  position: absolute; inset: auto auto 51% 4vw; z-index: 1; margin: 0; text-align: left;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 13vw; line-height: 0.8; letter-spacing: -0.045em;
  color: var(--sc-accent); text-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); transform: translate3d(0, calc(var(--hx-exit, 0) * -18%), 0);
}
.hx-fade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(rgba(10, 9, 12, 0.7) 0%, rgba(10, 9, 12, 0) 14%); pointer-events: none; }
.hx-scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(90% 75% at 100% 100%, rgba(8, 8, 11, 0.94) 0%, rgba(8, 8, 11, 0.78) 34%, rgba(8, 8, 11, 0) 70%);
}
.hx-copy { position: relative; z-index: 5; justify-self: end; width: min(34rem, 100% - 2 * var(--sc-gutter)); margin-right: calc(max(0px, (100vw - var(--sc-maxw)) / 2) + var(--sc-gutter)); padding: 0 0 clamp(2.5rem, 7vh, 5rem); }
.hx-title { font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: 1.02; margin: 0 0 0.45em; color: #fff; }
.hx-sub { color: #d3d9e0; font-size: 1.1rem; margin: 0; max-width: 34ch; }
.hx .btn-row { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .hx { min-height: calc(100svh - 68px); align-items: start; }
  .hx-plate { inset: auto 0 0 0; height: 56svh; }
  .hx-layer { object-position: 22% 50%; }
  .hx-word { font-size: 21vw; inset: auto 0 58% 0; text-align: center; }
  .hx-scrim { background: linear-gradient(#0a090c 38%, rgba(10, 9, 12, 0) 52%); }
  .hx-copy { justify-self: start; margin-inline: var(--sc-gutter); padding-top: clamp(1.5rem, 4svh, 2.5rem); }
  .hx-title { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ---------- 2. Belonging: live counts (Daylight ground) ---------- */
.cut-count { min-height: 88svh; display: grid; align-items: center; background: var(--bg); color: var(--text); }
.count-grid { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto auto; column-gap: clamp(24px, 5vw, 80px); align-items: end; padding-block: clamp(56px, 10svh, 120px); }
.count-title { grid-column: 1 / -1; font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--muted); margin: 0 0 1rem; }
.count-big { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(4.2rem, 14vw, 12.5rem); line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.count-mid { display: flex; align-items: center; gap: 0.35em; margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.count-mid .live-dot { width: 0.28em; height: 0.28em; }
.count-label { margin: 0.6rem 0 0; color: var(--muted); font-size: 1.05rem; }
.count-side { padding-bottom: 0.4rem; }
@media (max-width: 760px) { .count-grid { grid-template-columns: 1fr; row-gap: 2.5rem; } }

/* ---------- 3. Relief: coral ground, one line ---------- */
.cut-relief { min-height: 88svh; display: grid; align-items: end; background: var(--sc-accent); color: #1a0d08; }
.relief-wrap { padding-block: clamp(64px, 12svh, 140px); }
.relief-wipe { padding-bottom: 0.14em; }
.relief-title { margin: 0; max-width: 13ch; font-size: clamp(3rem, 8.4vw, 8rem); line-height: 1; letter-spacing: -0.04em; color: #1a0d08; }
.relief-sub { margin: 1.5rem 0 0; max-width: 40ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #3b170c; }

/* ---------- 4. Departments ---------- */
.cut-title { min-height: 46svh; display: grid; align-items: end; background: var(--night); color: var(--night-ink); padding-block: clamp(48px, 9svh, 96px); }
.dept-title { margin: 0; font-size: clamp(2.8rem, 7.5vw, 6.6rem); letter-spacing: -0.04em; color: #fff; }
.dept-lead { margin: 1rem 0 0; color: var(--night-soft); font-size: 1.15rem; }
.cut-dept { min-height: 86svh; background: var(--night); color: var(--night-ink); display: grid; align-items: end; }
.cut-media { position: absolute; inset: 0; margin: 0; }
.cut-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cut-scrim { position: absolute; inset: 0; pointer-events: none; }
.cut-dept--lead .cut-scrim { background: linear-gradient(90deg, rgba(11, 15, 20, 0.94) 0%, rgba(11, 15, 20, 0.8) 30%, rgba(11, 15, 20, 0) 62%); }
.cut-dept--trail .cut-scrim { background: linear-gradient(270deg, rgba(11, 15, 20, 0.94) 0%, rgba(11, 15, 20, 0.8) 30%, rgba(11, 15, 20, 0) 62%); }
.cut-copy { position: relative; z-index: 2; width: min(30rem, 100% - 2 * var(--sc-gutter)); margin-inline: calc(max(0px, (100vw - var(--sc-maxw)) / 2) + var(--sc-gutter)); padding: 0 0 clamp(2.5rem, 8svh, 5.5rem); }
.cut-dept--trail .cut-copy { justify-self: end; }
.cut-dept--lead .cut-copy { justify-self: start; }
.cut-badge { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; margin-bottom: 1.1rem; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7); }
.cut-name { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2rem, 3.8vw, 3.3rem); line-height: 1.02; letter-spacing: -0.03em; color: #fff; }
.cut-sum { margin: 0.9rem 0 0; color: #d3d9e0; font-size: 1.08rem; }
.cut-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 1.4rem 0 0; }
.cut-apply { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.7em 1.2em; border-radius: 999px; background: var(--sc-accent); color: #1a0d08; font-weight: 600; text-decoration: none; transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
.cut-apply:hover { background: #f27f60; }
.cut-apply:active { transform: scale(0.97); }
.cut-more { display: inline-flex; align-items: center; gap: 0.35em; color: #fff; font-weight: 500; text-decoration: none; }
.cut-more .icon { transition: transform 200ms var(--sc-ease-out); }
.cut-more:hover .icon { transform: translateX(3px); }
@media (max-width: 860px) {
  .cut-dept { min-height: 82svh; }
  .cut-dept--lead .cut-scrim, .cut-dept--trail .cut-scrim { background: linear-gradient(0deg, rgba(11, 15, 20, 0.96) 0%, rgba(11, 15, 20, 0.84) 34%, rgba(11, 15, 20, 0) 64%); }
  .cut-dept--trail .cut-copy { justify-self: start; }
  .cut-copy { margin-inline: var(--sc-gutter); }
}

/* ---------- 5. GVRPJ One ---------- */
.cut-one { min-height: 96svh; background: var(--night); color: var(--night-ink); display: grid; align-items: center; }
.one-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 20, 0.95) 0%, rgba(11, 15, 20, 0.86) 42%, rgba(11, 15, 20, 0.2) 78%); }
.one-wrap { position: relative; z-index: 2; padding-block: clamp(56px, 10svh, 110px); }
.one-title { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.04em; color: #fff; }
.one-sub { margin: 0.9rem 0 0; max-width: 38ch; color: var(--night-soft); font-size: 1.1rem; }
.one-tiers { list-style: none; margin: 2.2rem 0 0; padding: 0; max-width: 44rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.one-tiers li { display: grid; grid-template-columns: 12.5rem 7rem 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.one-name { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.35rem; color: color-mix(in oklab, var(--tier) 45%, #fff); }
.one-price { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem; color: #fff; font-variant-numeric: tabular-nums; }
.one-price small { font-family: var(--font); font-weight: 400; font-size: 0.8rem; color: var(--night-soft); margin-left: 2px; }
.one-perk { color: #d3d9e0; }
.one-more { margin: 1.6rem 0 0; }
.one-more a { display: inline-flex; align-items: center; gap: 0.35em; color: #fff; font-weight: 600; text-decoration: none; }
.one-more a:hover .icon { transform: translateX(3px); }
.one-more .icon { transition: transform 200ms var(--sc-ease-out); }
@media (max-width: 700px) {
  .one-scrim { background: rgba(11, 15, 20, 0.86); }
  .one-tiers li { grid-template-columns: 1fr auto; }
  .one-perk { grid-column: 1 / -1; }
}

/* ---------- 6. Held breath: authored silence ---------- */
.cut-breath { min-height: 78svh; display: grid; place-items: center; background: var(--night); }
.breath-line { margin: 0; padding-inline: var(--gutter); color: var(--night-soft); font-size: 1.05rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hx-sky, .hx-word { transform: none; }
}

/* Tier gems (the Discord role icons) */
.one-name { display: inline-flex; align-items: center; gap: 10px; }
.one-gem { flex: none; width: 22px; height: 22px; }