/* jill.moe — Standing Dossier of Jill Moroe
   Palette: Ocean-Deep with Earthy Vellum */

:root {
  --vellum:        #f0e9dc;
  --vellum-shadow: #e6dccb;
  --abyssal-ink:   #0a2438;
  --pelagic:       #1a3a52;
  --thermocline:   #3d6b85;
  --drift-grey:    #5a6d7a;
  --salt-bleached: #c9c1b4;
  --sodium-bloom:  #d18c3e;
  --cyan-phosphor: #7fc7d9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--vellum);
  color: var(--abyssal-ink);
  font-family: 'Manrope', sans-serif;
  margin: 0;
  line-height: 1.78;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ---- Column shell ---- */
.column {
  max-width: 640px;
  margin: 0 auto;
  padding: 12vh 24px 8vh;
  position: relative;
}

.left-rule {
  position: absolute;
  left: 88px; /* 24px padding + 64px in */
  top: 12vh;
  bottom: 8vh;
  width: 1px;
  background: var(--pelagic);
}

@media (min-width: 689px) {
  .left-rule { left: calc(50% - 320px + 64px); }
}

/* ---- Corner lens-flare seal ---- */
.corner-seal {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  z-index: 50;
  pointer-events: none;
  display: none;
}
@media (min-width: 920px) {
  .corner-seal { display: block; }
}

/* ---- Brief header ---- */
.brief-header {
  text-align: center;
  padding-bottom: 5rem;
  min-height: 38vh;
}

.lottie-crystals {
  width: 120px;
  height: 120px;
  margin: 0 auto 2.5rem;
  opacity: 0.92;
}

.title {
  font-family: 'Archivo', sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-size: clamp(2rem, 4.2vw, 3rem);
  text-transform: uppercase;
  color: var(--abyssal-ink);
  margin: 0;
  line-height: 1.15;
}
.title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
  animation: chReveal 0.5s ease forwards;
}
.title .ch.space { width: 0.45em; }
@keyframes chReveal {
  to { opacity: 1; transform: translateY(0); }
}

.designation {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--drift-grey);
  margin-top: 1.25rem;
  opacity: 0;
  animation: softIn 0.9s ease 1.1s forwards;
}

.head-rule {
  width: 100%;
  height: 1px;
  background: var(--salt-bleached);
  margin: 2.5rem 0 2rem;
  transform-origin: left center;
  transform: scaleX(0);
  animation: ruleDraw 1s ease 1.3s forwards;
}
@keyframes ruleDraw { to { transform: scaleX(1); } }

.abstract {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: var(--pelagic);
  max-width: 56ch;
  margin: 0 auto;
  opacity: 0;
  animation: softIn 1s ease 1.6s forwards;
}

@keyframes softIn { to { opacity: 1; } }

/* ---- Sections ---- */
.section {
  position: relative;
  padding: 3rem 0;
}

.section-num {
  position: absolute;
  left: -56px;
  top: 3rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--thermocline);
}
@media (max-width: 560px) {
  .section-num { left: -52px; }
}

.section-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--abyssal-ink);
  margin: 0 0 1.25rem;
}

.section p {
  color: var(--abyssal-ink);
  max-width: 60ch;
  margin: 0;
}
.section p + p { margin-top: 1.25rem; }

.section a.xref {
  color: var(--thermocline);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92em;
  letter-spacing: 0.02em;
  border-bottom: 1px dotted var(--salt-bleached);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.section a.xref:hover {
  color: var(--sodium-bloom);
  border-color: var(--sodium-bloom);
}

/* em-dash / callout color via thermocline accent on certain spans handled inline */

/* ---- Section break diamonds ---- */
.section-break {
  text-align: center;
  color: var(--salt-bleached);
  letter-spacing: 1.6em;
  font-size: 0.72rem;
  margin: 4rem 0 4rem 1.6em;
  clip-path: inset(0 100% 0 0);
}
.section-break.shown {
  animation: diamondDraw 1.1s ease forwards;
}
@keyframes diamondDraw { to { clip-path: inset(0 0 0 0); } }

/* ---- FIG. blocks ---- */
.fig {
  border: 1px solid var(--salt-bleached);
  padding: 24px;
  margin: 2rem 0;
  background: var(--vellum-shadow);
}

.fig-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--drift-grey);
  margin: 12px 0 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bathy { width: 100%; }
.bathy svg {
  display: block;
  width: 100%;
  height: 150px;
}
.bathy svg path {
  fill: none;
  stroke: var(--pelagic);
  stroke-width: 1;
  stroke-linecap: round;
}

.lottie-fig {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  opacity: 0.92;
}

/* ---- Depth table ---- */
.depth-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--pelagic);
}
.depth-table th {
  text-align: left;
  font-weight: 500;
  color: var(--drift-grey);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  border-bottom: 1px solid var(--salt-bleached);
  padding: 0 12px 8px 0;
}
.depth-table td {
  padding: 7px 12px 7px 0;
  border-bottom: 1px dotted var(--salt-bleached);
}
.depth-table tr:last-child td { border-bottom: none; }
.depth-table td:last-child, .depth-table th:last-child { color: var(--thermocline); }

/* ---- Marginalia timestamps ---- */
.margin-stamp {
  position: absolute;
  top: 3rem;
  right: -72px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--drift-grey);
  opacity: 0.72;
}
@media (max-width: 920px) {
  .margin-stamp { display: none; }
}

/* ---- Inline lens-flare bloom (§05) ---- */
.inline-flare {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  vertical-align: -0.18em;
}

/* ---- Reveal animation (IntersectionObserver) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Colophon ---- */
.colophon {
  text-align: center;
  margin-top: 6rem;
  padding: 8vh 0 4vh;
}
.colo-rule {
  width: 100%;
  height: 1px;
  background: var(--salt-bleached);
  margin-bottom: 3rem;
}
.colo-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--drift-grey);
  margin: 0.4rem 0;
  text-transform: uppercase;
}
.lottie-colophon {
  width: 48px;
  height: 48px;
  margin: 2.5rem auto 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .title .ch, .designation, .head-rule, .abstract { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .section-break { clip-path: inset(0 0 0 0); animation: none; }
}