/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  overflow-x: clip;
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  font-family: 'Golos Text', sans-serif;
  background: #F6F3EE;
}

img { max-width: 100%; display: block; }
button { font: inherit; }

/* ===== Design tokens (shared frame) ===== */
:root {
  --font-display: 'Unbounded', sans-serif;
  --font-text: 'Golos Text', sans-serif;

  --container-pad: clamp(20px, 5.5vw, 72px);
  --content-pad-bottom: clamp(48px, 9vh, 108px);

  --dur-desktop: 0.6s;
  --dur-mobile: 0.3s;
  --ease-snap: cubic-bezier(.65, 0, .35, 1);

  /* light (quiet) register colors, used by global chrome by default */
  --chrome-ink: #2A241F;
  --chrome-shadow: 0 1px 14px rgba(255,255,255,.35);
}

html.theme-dark {
  --chrome-ink: #F4ECDD;
  --chrome-shadow: 0 1px 18px rgba(0,0,0,.55);
}

/* ===== Fixed frame: masthead + register nav (identical in both registers, only color changes) ===== */
.masthead {
  position: fixed;
  top: clamp(16px, 3vw, 28px);
  left: clamp(16px, 3vw, 28px);
  z-index: 60;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  letter-spacing: .01em;
  color: var(--chrome-ink);
  text-shadow: var(--chrome-shadow);
  pointer-events: none;
}
.masthead__dot { opacity: .55; margin: 0 .15em; }

.register-nav {
  position: fixed;
  top: 50%;
  right: clamp(14px, 3vw, 26px);
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.register-nav__item {
  writing-mode: vertical-rl;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--chrome-ink);
  text-shadow: var(--chrome-shadow);
  opacity: .42;
  padding: 8px 3px;
  transition: opacity .25s ease;
}
.register-nav__item:hover { opacity: .75; }
.register-nav__item.is-active { opacity: 1; }
.register-nav__item::before {
  content: '';
  display: block;
  width: 2px;
  height: 0;
  margin: 0 auto 10px;
  background: currentColor;
  transition: height .3s var(--ease-snap);
}
.register-nav__item.is-active::before { height: 22px; }

/* ===== Register base ===== */
.register {
  position: relative;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  overflow: clip;
}

#register-quiet {
  --bg: #F6F3EE;
  --ink: #2A241F;
  --ink-soft: #7A6E60;
  --accent: #9C8563;
  --scrim-rgb: 246, 243, 238;
  --particle-rgb: 255, 253, 247;
}

#register-deep {
  --bg: #1B1420;
  --ink: #F4ECDD;
  --ink-soft: #B6A8C6;
  --accent: #C9A24A;
  --scrim-rgb: 20, 15, 24;
  --particle-rgb: 255, 255, 255;
}

.register__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.register__media .register__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
#register-quiet .register__img { object-position: center 30%; }
#register-deep .register__wipe .register__img { object-position: center 42%; }

.register__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--scrim-rgb), .96) 0%,
    rgba(var(--scrim-rgb), .68) 26%,
    rgba(var(--scrim-rgb), .12) 56%,
    rgba(var(--scrim-rgb), 0) 72%
  );
  pointer-events: none;
}

/* soft edge vignette: settles crop imperfections into the frame,
   consistent across both registers, not a stylistic add-on */
.register__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 min(14vw, 180px) rgba(var(--scrim-rgb), .55);
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.register__content {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: var(--container-pad);
  padding-bottom: var(--content-pad-bottom);
}

.register__eyebrow {
  font-family: var(--font-text);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.phrase {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw + 1rem, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin: 0;
  color: var(--ink);
}

.story {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(1.05rem, .8vw + .9rem, 1.375rem);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0;
  color: var(--ink);
}

/* ===== Seam: macro "material slice" band at the top of the dark register ===== */
.register__seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36vh;
  min-height: 220px;
  overflow: hidden;
  z-index: 6;
}
.register__seam-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(1.05) contrast(1.03);
}
.register__seam::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20,15,24,0) 45%, rgba(20,15,24,.95) 100%);
}
.register__seam-label {
  position: absolute;
  bottom: 16px;
  left: var(--container-pad);
  z-index: 2;
  font-family: var(--font-text);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #F4ECDD;
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}

/* the wipe layer: clip-path is animated on THIS child, transforms (if any) belong on the parent */
.register__wipe {
  position: relative;
  min-height: 100dvh;
}

/* ===== Reduced motion: fully static, no wipe, no particles ===== */
@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .story { max-width: none; }
  .register__seam { height: 26vh; }
}

@media (min-width: 1400px) {
  .register__content { padding-bottom: clamp(64px, 10vh, 140px); }
}