:root[data-theme="abyss"] {
  --ab-sec: clamp(72px, 9vw, 128px);
}

:root[data-theme="abyss"] .ab-creature {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%;
  pointer-events: none; touch-action: pan-y; display: block;
}
:root:not([data-theme="abyss"]) .ab-creature { display: none; }

:root[data-theme="abyss"] .ab-veil { position: relative; isolation: isolate; }
:root[data-theme="abyss"] .ab-veil::before {
  content: ""; position: absolute; z-index: -1; inset: -14% -8%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(3, 12, 20, 0.62) 0%, rgba(3, 12, 20, 0.46) 55%, rgba(3, 12, 20, 0) 100%);
}

:root[data-theme="abyss"] main > .page-head {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(560px, calc(var(--vh, 1svh) * 80));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(150px, calc(var(--vh, 1svh) * 22), 230px) 0 clamp(48px, calc(var(--vh, 1svh) * 7), 88px);
  background: none; border: 0; color: var(--ab-foam);
}
:root[data-theme="abyss"] main > .page-head > .wrap { position: relative; z-index: 1; width: 100%; }
:root[data-theme="abyss"] main > .page-head h1 {
  font-family: var(--font-ab-display); font-weight: 300; color: var(--ab-foam);
  font-size: clamp(2.8rem, 7.2vw, 6.2rem); line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 20px; max-width: 14ch; text-wrap: balance;
}
:root[data-theme="abyss"] main > .page-head .lede { color: var(--ab-foam-2); font-size: 1.25rem; line-height: 1.6; max-width: 40ch; }
:root[data-theme="abyss"] main > .page-head + :is(section, div):not(.bleed-shot) { padding-top: var(--ab-sec) !important; }

:root[data-theme="abyss"] main .sec { padding-block: var(--ab-sec); }
:root[data-theme="abyss"] main .sec.tight { padding-top: clamp(40px, 5vw, 72px); }
:root[data-theme="abyss"] main .sec h2:not(.big-quote):not(.w-huge) {
  font-family: var(--font-ab-display); font-weight: 300; color: var(--ab-foam);
  font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 0.45em;
}
:root[data-theme="abyss"] main .prose p { font-size: 1.125rem; line-height: 1.7; color: var(--ab-foam); max-width: 46ch; }
:root[data-theme="abyss"] main .prose p + p { margin-top: 1em; }

:root[data-theme="abyss"] main .v-index { border: 0; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
:root[data-theme="abyss"] main .v-index > li { border: 0; border-top: 1px solid var(--ab-hair); }
:root[data-theme="abyss"] main .v-index > li:last-child { border-bottom: 1px solid var(--ab-hair); }
:root[data-theme="abyss"] main .v-index .v-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto auto; align-items: center; gap: 8px 28px;
  padding: clamp(24px, 3.2vw, 40px) 0; color: var(--ab-foam); text-decoration: none; background: transparent; border: 0; min-height: 0;
  transition: color 300ms var(--ab-ease), padding-left 400ms var(--ab-ease);
}
:root[data-theme="abyss"] main .v-index .v-name { font-family: var(--font-ab-display); font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.6rem); letter-spacing: -0.02em; color: inherit; }
:root[data-theme="abyss"] main .v-index .v-what { font-size: 1.0625rem; line-height: 1.5; color: var(--ab-foam-2); }
:root[data-theme="abyss"] main .v-index .v-when { font-size: 0.9375rem; color: var(--ab-foam-2); white-space: nowrap; }
:root[data-theme="abyss"] main .v-index .v-arrow { width: 22px; height: 22px; color: var(--ab-foam); flex: none; }
@media (hover: hover) {
  :root[data-theme="abyss"] main .v-index .v-row:hover { color: var(--ab-pink); padding-left: 12px; }
  :root[data-theme="abyss"] main .v-index .v-row:hover .v-arrow { color: var(--ab-pink); }
}
:root[data-theme="abyss"] main .v-index .v-row:focus-visible { outline: 2px solid var(--ab-pink); outline-offset: 4px; }
@media (max-width: 759px) {
  :root[data-theme="abyss"] main .v-index .v-row { grid-template-columns: minmax(0, 1fr) auto; }
  :root[data-theme="abyss"] main .v-index .v-what { grid-column: 1 / -1; grid-row: 2; }
  :root[data-theme="abyss"] main .v-index .v-when { grid-column: 1; grid-row: 3; }
  :root[data-theme="abyss"] main .v-index .v-arrow { grid-column: 2; grid-row: 1; }
}

:root[data-theme="abyss"] main .spec { border: 0; margin: 0; }
:root[data-theme="abyss"] main .spec > div { border-top: 1px solid var(--ab-hair); padding: 22px 0; }
:root[data-theme="abyss"] main .spec > div:last-child { border-bottom: 1px solid var(--ab-hair); }
:root[data-theme="abyss"] main .spec dt { font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ab-foam-2); }
:root[data-theme="abyss"] main .spec dd { font-family: var(--font-ab-display); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ab-foam); margin: 4px 0 0; }

:root[data-theme="abyss"] main :is(.shot, .w-tall, .portrait, figure) img { border: 1px solid var(--ab-hair); border-radius: 18px; filter: none; opacity: 1; }
:root[data-theme="abyss"] main .bleed-shot img { border-radius: 0; border-width: 1px 0; filter: none; background: var(--ab-deep); }
:root[data-theme="abyss"] main .jgal .shot { border-radius: 18px; overflow: hidden; }
:root[data-theme="abyss"] main .jgal .shot img { border-radius: 18px; }

:root[data-theme="abyss"] main > #contact {
  min-height: 0; display: block; overflow: visible;
  padding-block: clamp(96px, 13vw, 190px) clamp(72px, 9vw, 130px) !important;
  border-top: 1px solid var(--ab-hair-2);
}
:root[data-theme="abyss"] main > #contact > .contact { padding-block: 0; }
:root[data-theme="abyss"] .contact h2 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.035em; }
:root[data-theme="abyss"] .contact > p:not(.contact-addr) { margin: 0 0 clamp(28px, 4vw, 44px); }
:root[data-theme="abyss"] .contact-pick { margin: 0 0 28px; }
:root[data-theme="abyss"] .contact-actions { margin-top: 0; }

:root[data-theme="abyss"] footer { background: transparent; }

@media (max-width: 759px) {
  :root[data-theme="abyss"] main > .page-head { min-height: max(520px, calc(var(--vh, 1svh) * 74)); padding-top: 128px; }
  :root[data-theme="abyss"] main > .page-head h1 { font-size: clamp(2.6rem, 12.5vw, 3.6rem); max-width: 12ch; }
  :root[data-theme="abyss"] main .sec h2:not(.big-quote):not(.w-huge) { font-size: clamp(2.1rem, 9.4vw, 2.8rem); }
  :root[data-theme="abyss"] main :is(.shot, .w-tall, .portrait, figure) img { border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="abyss"] main .v-index .v-row { transition: none; }
}