/* ─────────────────────────────────────
   NYRB COVER LANDING  (index.html)
   Palette: "Divorcing" (Susan Taubes) title box
   ───────────────────────────────────── */

:root {
  --box-bg:    var(--claret);   /* pool-tile blue */
  --box-title: var(--paper);    /* warm cream title on the blue box */
  --box-gold:  var(--gold);     /* soft gold subtitle / date */
}

html, body { height: 100%; overflow: hidden; }

.cover {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;            /* box centred */
  justify-content: center;
  /* cover-water.jpg is the fallback; the WebGL ripple canvas renders it live on top */
  background: #b9b4a4 url('../assets/cover-water.jpg') center / cover no-repeat;
  transition: opacity var(--dur-slow) var(--ease);
}

/* Interactive water-ripple canvas, full-bleed under the title box */
.ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* Full-bleed cover photograph — eased out so the face stays clear */
.cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Soft vignette, like a printed cover */
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,26,16,0.10) 0%, transparent 22%, transparent 55%, rgba(20,26,16,0.34) 100%);
  pointer-events: none;
}

/* ── The NYRB title box — solid / opaque ── */
.cover-box {
  position: relative;
  z-index: 2;
  width: 33.333vw;                            /* one-third of the screen */
  min-width: 300px;
  max-width: 90vw;
  margin-bottom: 0;   /* centred in the viewport */
  background: var(--box-bg);
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.75rem, 3.5vw, 2.3rem);
  text-align: center;
  box-shadow: 0 22px 55px rgba(15, 20, 12, 0.45);
  /* salmon inset keyline frame — NYRB / LA Times box */
  outline: 1px solid rgba(233, 182, 186, 0.55);
  outline-offset: -9px;
  animation: box-in 0.9s var(--ease) both;
}

@keyframes box-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Row 1 — title (like "DIVORCING": blush, large) */
.cover-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 2.6rem);
  letter-spacing: 0.05em;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--box-title);
}

/* Row 2 — subtitle (like "SUSAN TAUBES": gold, nearly as big as title) */
.cover-sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.4rem, 4.2vw, 1.95rem);
  letter-spacing: 0.07em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--box-gold);
  margin-top: var(--sp-2);
}

/* Wrap keeps the rule exactly as wide as the subtitle text above it */
.cover-subwrap { display: inline-block; }

.cover-rule {
  width: 100%;
  height: 1px;
  background: var(--box-title);
  opacity: 0.55;
  margin: var(--sp-4) 0 0;
}

/* Disciplines — the bold "date" slot at the foot of the box */
.cover-disciplines {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--box-gold);
  line-height: 1.5;
  margin-top: var(--sp-4);
}

/* ── Password (the byline slot) ── */
.cover-form { position: relative; margin-top: var(--sp-4); }

.cover-field {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Row 3 — password (like "INTRODUCTION BY": blush, small) */
.cover-input {
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--box-title);
  width: 100%;
  max-width: 230px;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;   /* no second line by default */
  transition: border-color var(--dur-base);
}
.cover-input::placeholder { color: rgba(233, 182, 186, 0.6); letter-spacing: var(--tr-wider); }
.cover-input:hover  { border-bottom-color: rgba(233, 182, 186, 0.3); }
.cover-input:focus  { border-bottom-color: rgba(233, 182, 186, 0.75); }

.cover-field.error { animation: shake 0.4s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

.cover-hint {
  position: absolute;       /* lifted out of flow so box padding stays balanced */
  top: 100%;
  left: 0; right: 0;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--box-title);
  opacity: 0;
  transition: opacity var(--dur-base);
  margin-top: var(--sp-4);
}
.cover-hint.visible { opacity: 0.9; }

/* Colophon */
.cover-colophon {
  position: absolute;
  bottom: clamp(1rem, 3vh, 1.5rem);
  left: 0; right: 0;
  z-index: 2;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: rgba(244, 240, 230, 0.6);
}

/* ── Exit transition into the newspaper ── */
.cover.is-leaving { opacity: 0; }

@media (max-width: 560px) {
  .cover-photo { object-position: center 34%; }
}