/* ===== ABSOLUTE ENVIRONMENT NUKES ===== */
html, body, * {
  font-family: 'STIX Two Text', serif !important;
  font-style: normal !important;
  font-weight: normal !important;

  background: transparent !important;
  color: white !important;
}

/* Body: always black background */
/* html, body {
  background-color: black !important;
  color: white !important;
  margin: 0 !important;
  padding: 0 !important;
} */

/* Nuke ALL link states (no purple, no blue, no visited) */
a, a:visited, a:hover, a:active, a:focus {
  color: white !important;              /* pure white only */
  text-decoration: none !important;
  background: transparent !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ===== SINGLE POEM STYLE ===== */
/* Force STIX Two Text everywhere */
html, body, * {
  font-family: 'STIX Two Text', serif !important;
}

body {
  background-color: black;
  color: white;
  font-family: 'STIX Two Text', serif;
  margin: 0;
  padding: 2rem;
}
/* Make sure no parent kills the text */
.poem-container, .poem-body, .poem-subtitle, .poem-text {
  line-height: 1.6;
}

/* wrapper */
.poem-container {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* title + author container */
.poem-header {
  margin-bottom: 1.5rem;  /* space before poem body */
}


/* TODO: CONSOLIDATE */

/* poem title */
.poem-title {
  font-size: 3rem;                     /* largest */
  margin: 0 0 0.3rem 0;                /* small space below */
  font-weight: normal;
  text-align: left;
  font-family: 'STIX Two Text', serif;
}

/* poem author */
.poem-author {
  font-size: 1.4rem;                   /* slightly smaller */
  margin: 0;                           /* no extra margin */
  font-weight: normal;
  text-align: left;
  font-family: 'STIX Two Text', serif; /* match title font */
  color: rgba(255,255,255,0.85);       /* softer white for contrast */
}

/* dedication line under the title */
.poem-dedication {
  font-size: 1.2rem;                /* smaller than title */
  font-style: italic;               /* italics for distinction */
  margin: 0 0 1.5rem 0;             /* space below before body */
  text-align: left;                 /* align with title */
  font-family: 'STIX Two Text', serif;
  color: rgba(255,255,255,0.85);    /* slightly softer white */
}


/* poem body */
.poem-body {
  font-size: 1.2rem;
  white-space: pre-wrap;
  margin: 0 0 1rem 0;
}


/* ===== BANNER ===== */
.poem-banner {
  max-width: 900px;       /* match poem width */
  margin: 0 auto 2.25rem; /* center banner + bottom space */
  
  background: #20071e;    /* deep plum bg */
  color: #fff;            /* readable on dark */
  border: 3px solid rgba(239, 239, 234, 0.232);  /* faint white border */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);     /* soft drop shadow */

  display: flex;
  align-items: center;
  padding: 10px 20px;

  font-family: 'STIX Two Text', serif;
  font-size: 1rem;
  transition: transform 150ms ease;
}

.poem-banner:hover {
  transform: scale(1.01);
}

.poem-banner a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

.poem-banner a:hover {
  text-decoration: underline;
}

.poem-banner .spacer {
  flex: 0 0 50vw;   /* fixed half viewport width */
}


/* ===== GLOBAL NUKES ===== */


/* Force STIX Two Text absolutely everywhere */
/* === inline poem link === */
/* ===== GLOBAL POEM SAFETIES (late in CSS) ===== */
html, body {
  background: #000 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff; /* WebKit safety */
}

/* Make sure no parent kills the text */
.poem-container, .poem-body, .poem-title, .poem-subtitle, .poem-text {
  line-height: 1.6;
}

/* ===== BASIC LINK CLASS ===== */
.poem-link {
  display: inline;
  font-size: 1.2em;                         /* bigger text */
  font-weight: 700;                         /* bold for emphasis */
  color: var(--cold-1) !important;          /* pale icy text */
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  font-family: 'STIX Two Text', serif !important;

  /* static icy halo */
  text-shadow:
    0 0 0.15em rgba(227, 243, 242, 0.9),   /* cold-1 */
    0 0 0.45em rgba(218, 228, 231, 0.7),   /* cold-2 */
    0 0 0.85em rgba(146, 155, 162, 0.45);  /* cold-3 */
}

.poem-link:hover,
.poem-link:focus {
  color: var(--cold-2) !important;          /* brighter cold highlight */
  text-shadow:
    0 0 0.2em rgba(227, 243, 242, 1),      /* cold-1 strong */
    0 0 0.6em rgba(218, 228, 231, 0.9),    /* cold-2 heavier */
    0 0 1.2em rgba(146, 155, 162, 0.8);    /* cold-3 heavy glow */
}

.poem-link:visited {
  color: var(--cold-1) !important;          /* no purple */
}

.poem-link:active {
  color: #ffffff !important;
  text-shadow:
    0 0 0.25em rgba(227, 243, 242, 1),     /* cold-1 brightest */
    0 0 0.8em rgba(218, 228, 231, 0.95),   /* cold-2 pressed */
    0 0 1.5em rgba(146, 155, 162, 0.9);    /* cold-3 deepest */
}


/* ===== STATIC UNDERLINE LINK CLASS ===== */
.poem-link-static {
  display: inline;                         /* avoid overflow clipping */
  color: inherit !important;               /* stay white from parent */
  -webkit-text-fill-color: currentColor !important;
  text-decoration: underline !important;   /* always underlined */
  -webkit-tap-highlight-color: transparent;
  font-family: 'STIX Two Text', serif !important;

  /* subtle halo */
  text-shadow:
    0 0 0.02em rgba(255,255,255,0.28),
    0 0 0.35em rgba(255,255,255,0.10);

  /* kill purple visited */
  &:visited {
    color: inherit !important;
  }
}

/* ===== INVISIBLE BLUR LINK CLASS ===== */
.poem-link-invis {
  display: inline-block;
  min-width: 1.5em;                  /* takes up a little space */
  min-height: 1em;
  content: "";
  color: transparent !important;     /* hide accidental text */
  text-decoration: none !important;
  background: rgba(255,255,255,0.08); /* faint white mist */
  filter: blur(2px);                 
  border-radius: 0.25em;             /* soft corners */
  cursor: pointer;
  transition: all 0.25s ease;
}

/* kill purple visited */
.poem-link-invis:visited {
  color: transparent !important;
  background: rgba(255,255,255,0.08);
}

/* STRONG PULSING HOVER EFFECT */
.poem-link-invis:hover,
.poem-link-invis:focus {
  background: rgba(255,255,255,0.7);
  filter: blur(4px);
  box-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 16px rgba(255,255,255,0.7),
    0 0 24px rgba(255,255,255,0.5);
  animation: pulseGlow 1.2s infinite ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0
  }
}

/* ===== POEM TITLE STYLES ===== */


/* Multi-line title helper so each line sits on its own row */
.title-lines .line { display: block; line-height: 1.15; }

/* Make title links use your poem link styling emphatically */
.title-lines a.poem-link { font-weight: 600; }
/* Strong, responsive title size */
.poem-title {
  font-size: clamp(2.6rem, 5.5vw, 6rem);
  line-height: 1.15;
}

/* Title links should look exactly like titles */
.poem-title a {
  font: inherit;
  color: inherit !important;
  text-decoration: none;
}

/* If you use .poem-link-static for a title, keep the underline but not the size */
.poem-title .poem-link-static {
  font-size: inherit;          /* stay the same size as the h1 */
  text-decoration: underline;  /* keep its static underline look */
}

/* Strong, responsive title size */
.poem-title {
  font-size: clamp(1.3rem, 2.8vw, 2.7rem);
  line-height: 1.15;
}

/* Title links should look exactly like titles */
.poem-title a {
  font: inherit;
  color: inherit !important;
  text-decoration: none;
}

/* If you use .poem-link-static for a title, keep the underline but not the size */
.poem-title .poem-link-static {
  font-size: inherit;          /* stay the same size as the h1 */
  text-decoration: underline;  /* keep its static underline look */
}


/* Add breathing room between title(s) and poem body */
.poem-title {
  margin-bottom: 2rem;   /* adjust this number until it feels right */
}

/* ===== BOOKPLATE (clean, refactor — no functional changes) ===== */

/* Base container (column-aligned by page-level max-width below) */
.bookplate-container {
  position: relative;
  margin: 1.5rem 0;

  /* default knobs */
  --img-width: 90%;   /* default width as % of poem column */
  --overlay-frac: 0.5;  /* overlay width fraction of image */
  --overlay-vfrac: 0.5; /* overlay height fraction of image */
  --band-opacity: 0.6;  /* legacy */
  --panel-opacity: 0.88; /* legacy */
  --fg-color: black;
  --panel-text: #111;

  /* unified overlay controls */
  --bg-opacity: 0.9;  /* 0–1 */
  --use-black: 0.3;   /* 1 = black bg, 0 = transparent */
}

/* Image picks up the variable width */
.bookplate-container .plate-img {
  display: block;
  width: var(--img-width);
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* centered by default */
}

/* Default overlay (absolute model used by most plates) */
.bookplate-container .bookplate-text {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--img-width) * var(--overlay-frac));
  height: calc(100% * var(--overlay-vfrac));
  transform: translate(-50%, -50%);
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 1rem;
  line-height: 1.4;
  font-family: 'STIX Two Text', serif;
  color: var(--fg-color);

  /* unified background */
  background: rgba(0,0,0, calc(var(--use-black) * var(--bg-opacity))) !important;

  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* overflow: auto;  // enable if long text clips */
}

/* Optional inner panel */
.bookplate-container .bookplate-text .bookplate-panel {
  background: rgba(0,0,0, calc(var(--use-black) * (var(--bg-opacity) + 0.2))) !important;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Emphasis */
.bookplate-text em { font-style: italic; }
.bookplate-text .ex-libris { font-size: 1.6em; font-weight: 700; margin-top: 1rem; }

/* ===== Variants ===== */

/* Foot plate smaller (top plate remains at default) */
.bookplate-container.bookplate--foot { --img-width: 90%; }

/* Viewport-centered option */
.bookplate--screenish {
  --img-width: 50vw;
  width: var(--img-width);
  max-width: 70vw;
  margin-left: 20%;
  transform: translateX(-50%);
}
.bookplate--screenish .plate-img.foot-plate {
  width: 120% !important;
  max-width: none !important;
}

/* ===== Column alignment + title spacing ===== */
.poem-title { text-align: left; }

.poem-container .plate-img {
  margin: 1.5rem 0;
  display: block;
}

/* Constrain all bookplates to poem column width (update to match your column) */
.bookplate-container {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Shut Up bookplate (left-aligned grid overlay) ===== */
.bookplate-container.shutup_plate {
  /* left-align within the poem column */
  display: grid;
  justify-items: start;
  align-items: center;
  position: relative;
  isolation: isolate;

  /* current knobs for this plate */
  --img-width: 95%;
  --overlay-frac: 0.55;
  --overlay-vfrac: 0.9; /* kept for parity, not used in grid height */
  --bg-opacity: 0.5;
  --use-black: 0.6;
  --fg-color: #fff;
}

.bookplate-container.shutup_plate .plate-img {
  grid-area: 1 / 1;
  width: var(--img-width);
  max-width: 100%;
  height: auto;
  margin: 0;             /* no auto-center */
  justify-self: start;   /* left aligned image */
  z-index: 0;
}

.bookplate-container.shutup_plate .bookplate-text {
  grid-area: 1 / 1;
  /* neutralize absolute model from defaults */
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  justify-self: start;   /* panel left edge = image left edge */
  text-align: left;
  width: clamp(260px, calc(var(--img-width) * var(--overlay-frac)), 100%);
  height: auto;          /* content-sized */
  z-index: 1;

  display: flex;
  align-items: center;
  padding: 0.75rem 0.9rem;
  line-height: 1.4;
  white-space: normal;

  background: rgba(0,0,0, calc(var(--use-black) * var(--bg-opacity))) !important;
  color: var(--fg-color);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bookplate-container.shutup_plate .bookplate-text em { font-style: italic; }
.bookplate-container.shutup_plate .bookplate-text .ex-libris {
  font-size: 1.7em;
  font-weight: 700;
  margin-top: 1rem;
}

/* ===== Ex Libris footplate — smaller, left-aligned, longer lines ===== */
.bookplate-container.ex_lib_footplate {
  /* keep it in the poem column and align left */
  display: grid;
  justify-items: start;
  align-items: center;
  position: relative;
  isolation: isolate;

  /* knobs for this plate only */
  --img-width: 100% !important;   /* smaller image -> tweak 55–65% to taste */
  --overlay-frac: 0.6 !important; /* wider panel -> longer lines */
  --bg-opacity: 0.1;
  --use-black: 0.5;
  --fg-color: #fff;
}

/* image: left-aligned, not auto-centered */
.bookplate-container.ex_lib_footplate .plate-img {
  grid-area: 1 / 1;
  width: var(--img-width) !important;   /* wins over earlier foot-plate rules */
  max-width: 200% !important;
  height: auto;
  margin: 0;     
  font-size: 2.9em;
  font-weight: 700;                        /* no auto-centering */
  justify-self: start;                   /* align to column left */
  z-index: 0;
}

/* overlay: sits on same grid cell, left-aligned, wider lines */
.bookplate-container.ex_lib_footplate .bookplate-text {
  grid-area: 1 / 1;
  /* neutralize any absolute positioning declared earlier */
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  justify-self: start;                   /* panel left edge = image left edge */
  text-align: left;
  width: calc(var(--img-width) * var(--overlay-frac));
  height: auto;
  z-index: 1;

  display: flex;
  align-items: center;
  padding: 0.85rem 1rem;
  line-height: 1.45;
  white-space: normal;

  background: rgba(0,0,0, calc(var(--use-black) * var(--bg-opacity))) !important;
  color: var(--fg-color);
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== Foot plate only overrides ===== */
.bookplate-container.bookplate--foot {
  --img-width: 90%;
  --overlay-frac: 0.60;  /* wider panel for nicer centering */
}

.bookplate-container.bookplate--foot .plate-img {
  margin-left: 0;
  margin-right: auto;    /* image aligns with poem column left */
}

.bookplate-container.bookplate--foot .bookplate-text {
  left: calc(var(--img-width) / 2);
  top: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  font-size: 1.7em;     /* bigger text */
  padding: 1.1rem 1.25rem;
}


/* Mobile safety */
@media (max-width: 720px) {
  .bookplate-container.shutup_plate { --img-width: 100%; }
  .bookplate-container.shutup_plate .bookplate-text { width: 9%; }
}

/* ===== Dedication ===== */
.poem-dedication {
  font-size: 1.35rem;    /* larger than body, smaller than title */
  font-style: italic;    /* <-- real italics */
  margin: 0 0 1.5rem 0;  /* spacing before body */
  text-align: left;
}