/* ============================================================
   OPHELIA — visceral / wet / given-over · evening register
   The river that takes her, set in flowers.

   Hamlet IV.vii — "There is a willow grows aslant a brook."
   This stylesheet is the willow, the brook, and the long fall.

   Composition rules:
     · Single column, narrow measure (38ch default).
     · Long vertical fall — pages are taller than wide; thoughts
       sit alone with white-space (black-space) above and below.
     · Display Cormorant italic at colossal scale (180–320pt),
       used sparingly. One per movement.
     · Body Source Serif 4 at 17–20px, line-height 1.85, slightly
       wider tracking than usual. Optical reading; slow.
     · Rouge is the held note. One stroke per page, no more.
     · Petal-white for the line that should hold the eye.
     · Drop-cap on opening movements only.
     · Marginalia set sideways, vertically, in mono.

   Activate: data-register="ophelia"
   Components prefixed .op-*
   ============================================================ */

@import url('base.css');

[data-register="ophelia"] {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-feature-settings: "kern", "liga", "dlig", "swsh", "calt";
  /* a faint vignette — the lamp at the desk; the rest of the room is dark */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 30%,
      color-mix(in oklab, var(--inkwater-2) 100%, transparent) 0%,
      var(--inkwater) 60%);
  background-attachment: fixed;
}

::selection { background: var(--rouge-soft); color: var(--petal); }

/* ── The page itself — long vertical fall ─────────────── */
.op-stage {
  min-height: 100vh;
  padding: var(--space-9) 0 var(--space-11);
  position: relative;
}
.op-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-7);
  position: relative;
}
.op-page--narrow { max-width: 560px; }

/* ── Letterhead / opening cartouche ───────────────────── */
.op-cartouche {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-9);
}
.op-cartouche__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  color: var(--bone);
}
.op-cartouche__rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--rule) 0%,
    var(--rouge-deep) 50%,
    var(--rule) 100%
  );
}
.op-cartouche__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bone-3);
  text-align: right;
  line-height: 1.7;
}
.op-cartouche__meta b { color: var(--bone); font-weight: 400; }

/* ── Movement opener — display title ─────────────────── */
.op-movement {
  margin: var(--space-11) 0;
  position: relative;
}
.op-movement:first-of-type { margin-top: var(--space-9); }

.op-movement__num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--rouge-deep);
  margin-bottom: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.op-movement__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.op-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 14vw, 220px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--bone);
  text-wrap: balance;
  margin-bottom: var(--space-8);
}
.op-display b { font-style: normal; font-weight: 400; color: var(--rouge-deep); }
.op-display em { color: var(--petal); font-weight: 300; }

.op-display--small {
  font-size: clamp(56px, 9vw, 120px);
}

/* ── Body prose ───────────────────────────────────────── */
.op-body p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.85;
  color: var(--bone);
  letter-spacing: 0.005em;
  text-wrap: pretty;
  margin-bottom: var(--space-5);
  max-width: 38ch;
}
.op-body p + p { text-indent: 1.6em; margin-top: -8px; }
.op-body p em { font-style: italic; color: var(--petal); }
.op-body p strong { font-weight: 500; color: var(--bone); }

/* ── Drop cap — only on first movement, opt-in ──────── */
.op-body--open p:first-child::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 5.4em;
  line-height: 0.86;
  float: left;
  color: var(--rouge-deep);
  padding: 8px 14px 0 0;
  margin-top: 4px;
}

/* ── Pull / pillar — a line set alone, large ───────── */
.op-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  color: var(--petal);
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 22ch;
  margin: var(--space-9) 0;
  padding-left: var(--space-5);
  border-left: 1px solid var(--rouge-deep);
}
.op-pull em { color: var(--rouge-deep); font-weight: 400; }

/* ── Caesura — ornamental break between movements ──── */
.op-caesura {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-10) 0;
  color: var(--rouge-deep);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.6em;
  text-transform: uppercase;
}
.op-caesura::before, .op-caesura::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ── Marginalia — sidewise note in mono ────────────── */
.op-margin {
  position: absolute;
  left: -180px;
  top: 0;
  width: 160px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bone-3);
  line-height: 1.7;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
}
.op-margin b { color: var(--rouge-deep); font-weight: 400; }
@media (max-width: 1080px) { .op-margin { display: none; } }

/* ── Flowers — the strewn, decorative inline emphasis ── */
.op-flower {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--rouge-deep);
  margin: 0 6px 4px 6px;
  vertical-align: middle;
  transform: rotate(45deg);
}

/* ── Closing — signature, dateline ──────────────────── */
.op-close {
  margin-top: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: end;
}
.op-close__valediction {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  color: var(--bone);
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.op-close__sig {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bone-3);
  line-height: 1.9;
}
.op-close__sig b { color: var(--bone); font-weight: 400; }
.op-close__sig em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--rouge-deep);
}
@media (max-width: 720px) {
  .op-close { grid-template-columns: 1fr; }
  .op-close__sig { text-align: left; }
}

/* ── Colophon — the studio mark at the foot ─────────── */
.op-colophon {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-faint);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bone-3);
}

/* ── Slow entrance — type wicks in like ink in water ── */
@media (prefers-reduced-motion: no-preference) {
  .op-display, .op-pull, .op-body p {
    animation: op-bloom var(--dur-slow) var(--ease) both;
  }
  .op-movement .op-body p:nth-child(2) { animation-delay: 80ms; }
  .op-movement .op-body p:nth-child(3) { animation-delay: 160ms; }
  .op-movement .op-body p:nth-child(4) { animation-delay: 240ms; }
}
@keyframes op-bloom {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* ── Print — pull the page off the river so it can be read on paper ── */
@media print {
  [data-register="ophelia"] { background: var(--inkwater) !important; }
  .op-display, .op-pull, .op-body p { animation: none !important; }
}