/* ============================================================
   SLASH FICTION — Lane Stylesheet
   File: /slash/assets/slash.css

   Depends on: /assets/css/author-base.css
   Purpose: Slash lane visual identity (FMR palette + rules)

   Absolute rules enforced:
   - No pure white (#ffffff)
   - No pure black (#000000)
   - Gold never used for body text
   - Red never used decoratively (gate/emphasis only)
   ============================================================ */


/* ------------------------------------------------------------
   00) LANE TOKENS (FMR palette)
------------------------------------------------------------ */

:root{
  /* Backgrounds */
  --sf-parch-0:#1f1b16;     /* aged parchment */
  --sf-parch-1:#2a241d;     /* aged parchment gradient */
  --sf-umber:#2e2620;       /* warm stone umber (primary surface) */
  --sf-char:#181818;        /* smoked charcoal (secondary surface) */

  /* Text */
  --sf-ink:#e6e2da;         /* primary body text (warm off-white) */
  --sf-muted:#b8b2a6;       /* secondary text */

  /* Accents */
  --sf-gold-1:#d4b26a;      /* emphasis (inline only, NOT body) */
  --sf-gold-2:#c9a24f;      /* headings */
  --sf-link:#4b6fae;        /* mythic blue links */
  --sf-link-h:#6f8fc9;      /* hover blue */

  /* Warnings / gate only */
  --sf-warn:#7a2e2e;        /* blood stone warning */

  /* Lines / borders */
  --sf-line:rgba(212,178,106,0.14);   /* gold-derived line */
  --sf-line-2:rgba(230,226,218,0.08); /* subtle neutral line */

  /* Shadows */
  --sf-shadow: 0 0 24px rgba(24,24,24,0.45);
  --sf-shadow-soft: 0 0 18px rgba(24,24,24,0.28);
}


/* ------------------------------------------------------------
   01) PAGE BASE (Slash lane wrapper)
------------------------------------------------------------ */

.slash-page{
  margin:0;
  color:var(--sf-ink);
  background:
    linear-gradient(180deg, var(--sf-parch-0), var(--sf-parch-1));
  font-family:"IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;
  line-height:1.65;
}

/* Optional: tighten global page padding if needed */
.slash-wrap{
  max-width:1000px;
  margin:0 auto;
  padding:24px 18px 64px;
}

/*White Space Addition */
.short-content {
  white-space: pre-line;
}

/* ------------------------------------------------------------
   01) PAGE BASE Jurisdiction - Container Bakground
------------------------------------------------------------ */

/* Jurisdiction — underwater container environment */
.jurisdiction-page .slash-box{
  position: relative;
  overflow: hidden;
}

/* Background image layer */
.jurisdiction-page .slash-box::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    url('/slash/images/jurisdiction_underwater_image.webp')
    center / cover no-repeat;

  filter:
    blur(6px)
    brightness(0.55)
    saturate(0.9);

  transform: scale(1.05); /* prevents blur edge crop */
  z-index:0;
}

/* Overlay gradient for tone + readability */
.jurisdiction-page .slash-box::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(46,38,32,0.88),
      rgba(24,24,24,0.82)
    );

  z-index:1;
}

/* Make sure content stays above background */
.jurisdiction-page .slash-box > *{
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------
   01.5) HERO BANNER (full-width, no crop, tuned for desktop)
------------------------------------------------------------ */

.slash-hero{
  background: var(--sf-parch-0);
  border-bottom: 1px solid var(--sf-line-2);
  position: relative;
  overflow: hidden;

  /* Base: good on laptops + phones */
  height: clamp(240px, 34vh, 440px);

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

.slash-hero__img{
  width: 100%;
  height: 100%;
  object-fit: contain;     /* no crop */
  object-position: center;
  display: block;

  /* Keep sane on normal screens */
  max-width: 1100px;

  filter: saturate(1.02) contrast(1.02);
}


/* ------------------------------------------------------------
   01.6) HERO BANNER - Jurisdiction (full-width, no crop, tuned for desktop)
------------------------------------------------------------ */

.jurisdiction-hero{
  background: var(--sf-parch-0);
  border-bottom: 1px solid var(--sf-line-2);
  position: relative;
  overflow: hidden;

  /* Base: good on laptops + phones */
  height: clamp(240px, 34vh, 440px);

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

.jurisdiction-hero__img{
  width: 50%;
  height: 50%;
  object-fit: contain;     /* no crop */
  object-position: center;
  display: block;

  /* Keep sane on normal screens */
  max-width: 1100px;

  filter: saturate(1.02) contrast(1.02);
}


/* ------------------------------------------------------------
   02) LANE SURFACES (containers / content boxes)
------------------------------------------------------------ */

.slash-box{
  background:
    linear-gradient(
      135deg,
      rgba(46,38,32,0.88),
      rgba(24,24,24,0.68)
    );
  border:1px solid var(--sf-line);
  border-radius:14px;
  box-shadow:var(--sf-shadow);
  overflow:hidden;
}

.slash-copy{
  padding:28px 22px;
  max-width:72ch;
  margin:0 auto;
}

@media (max-width:820px){
  .slash-wrap{ padding:18px 14px 52px; }
  .slash-copy{ padding:22px 16px; max-width:100%; }
}


/* ------------------------------------------------------------
   03) TYPOGRAPHY (headings / meta / body rhythm)
------------------------------------------------------------ */

.slash-copy h1,
.slash-copy h2,
.slash-copy h3{
  font-family:"Cinzel Decorative", serif;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--sf-gold-2);
  margin:.15rem 0 .55rem;
  text-shadow:0 0 10px rgba(24,24,24,0.35);
}

/* Subtitle / deck */
.slash-subtitle{
  margin:.15rem 0 .3rem;
  font-family:"IBM Plex Serif", serif;
  font-style:italic;
  color:var(--sf-muted);
}

/* Small metadata line (date / words) */
.slash-meta{
  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.08em;
  font-size:12px;
  text-transform:uppercase;
  color:var(--sf-muted);
  margin:.35rem 0 .75rem;
}

/* Body copy */
.slash-body{
  margin-top:.35rem;
  line-height:1.75;
}
.slash-body p{
  margin:.75rem 0;
}

/* Scene breaks */
.slash-body hr{
  border:0;
  height:1px;
  margin:1.45rem auto;
  width:75%;
  background:linear-gradient(90deg, transparent, var(--sf-line-2), transparent);
}

/* Chapter Titles Book-y Looking */
/* Novella chapter headings inside the reader */
.slash-body h2{
  text-align:center;
  margin:2.2rem 0 1.1rem;
  font-size:1.4rem;
}

/* The End */
.the-end {
  font-family: "Cinzel Decorative", serif;
  font-size: 4.0em;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}

.the-end2 {
  font-family: "Cinzel", serif;
  text-align: center;
  font-weight: 400;
  font-size: 1.75em;
}

.ending {
  text-align: center;
}

/* ------------------------------------------------------------
   03.5) INDEX OPENING COPY (FMR intro block)
------------------------------------------------------------ */

.page-slash .slash-title{
  text-align:center;
  margin-top: .35rem;
}

.page-slash .slash-lede{
  text-align:center;
  font-style: italic;
  color: var(--sf-gold-1);
  margin: .65rem auto 1.05rem;
  max-width: 68ch;
}

.page-slash .slash-deck{
  text-align:center;
  color: var(--sf-ink);
  margin: 0 auto 1.05rem;
  max-width: 70ch;
}

.page-slash .slash-intro{
  text-align:center;
  color: var(--sf-ink);
  margin: 0 auto 1.1rem;
  max-width: 78ch;
}

.page-slash .slash-question{
  text-align:center;
  color: var(--sf-muted);
  margin: 0 auto .25rem;
}

.page-slash .slash-question__line{
  text-align:center;
  font-family:"Cinzel Decorative", serif;
  color: var(--sf-gold-2);
  margin: 0 auto 1.25rem;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  letter-spacing: .03em;
}

/* ------------------------------------------------------------
   03.6) DESKTOP TYPOGRAPHY TUNING
------------------------------------------------------------ */

@media (min-width: 1024px){
  .page-slash .slash-lede{
    font-size: 1.05rem;
  }

  .page-slash .slash-deck{
    font-size: 1rem;
  }

  .page-slash .slash-intro{
    font-size: 1rem;
    line-height: 1.55;
  }

  .page-slash .slash-question__line{
    font-size: 1.2rem;
  }
}

/* ------------------------------------------------------------
   04) LINKS (mythic blue)
------------------------------------------------------------ */

.slash-copy a,
.slash-body a{
  color:var(--sf-link);
  text-decoration:none;
  border-bottom:1px solid rgba(75,111,174,0.35);
  transition:color .18s ease, border-color .18s ease, text-shadow .18s ease;
}
.slash-copy a:hover,
.slash-copy a:focus-visible,
.slash-body a:hover,
.slash-body a:focus-visible{
  color:var(--sf-link-h);
  border-bottom-color:rgba(111,143,201,0.7);
  text-shadow:0 0 8px rgba(111,143,201,0.18);
  outline:none;
}


/* ------------------------------------------------------------
   05) RULES / DIVIDERS
------------------------------------------------------------ */

.slash-rule{
  border:0;
  height:1px;
  margin:18px 0;
  background:linear-gradient(90deg, transparent, var(--sf-line-2), transparent);
}


/* ------------------------------------------------------------
   06) WARNING TAGS (AO3-ish but on-brand)
------------------------------------------------------------ */

.slash-warnings{
  margin:.35rem 0 .25rem;
  color:var(--sf-muted);
  font-size:.85rem;
}

.slash-warnings .tag{
  display:inline-block;
  margin:0 .25em .3em 0;
  padding:.08em .45em;
  border-radius:999px;
  background:rgba(122,46,46,0.14);          /* red used only as warning */
  border:1px solid rgba(122,46,46,0.55);
  color:var(--sf-ink);
  font-family:"Unica One", system-ui, sans-serif;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.09em;
}


/* ------------------------------------------------------------
   07) BUTTONS (PDF rules adapted)
------------------------------------------------------------ */

/* Base button shape */
.sf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;

  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;

  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Primary action button:
   Background #2e2620
   Text #e6e3da (we use --sf-ink)
   Border #1f1b16
   Hover BG #c9a24f
*/
.sf-btn.primary{
  background:var(--sf-umber);
  color:var(--sf-ink);
  border:1px solid var(--sf-parch-0);
  box-shadow:0 0 14px rgba(24,24,24,0.25);
}
.sf-btn.primary:hover,
.sf-btn.primary:focus-visible{
  background:var(--sf-gold-2);
  color:var(--sf-parch-0);
  transform:translateY(-1px);
  outline:none;
}

/* Secondary button:
   Transparent + gold text + soft border
   Hover BG becomes light parchment tone (not white)
*/
.sf-btn.secondary{
  background:transparent;
  color:var(--sf-gold-1);
  border:1px solid rgba(212,178,106,0.22);
}
.sf-btn.secondary:hover,
.sf-btn.secondary:focus-visible{
  background:rgba(230,226,218,0.10);
  border-color:rgba(212,178,106,0.45);
  color:var(--sf-ink);
  transform:translateY(-1px);
  outline:none;
}


/* ------------------------------------------------------------
   08) AGE GATE (server-side overlay)
   Red is allowed here (warning/gate emphasis)
------------------------------------------------------------ */

.slash-gate{
  position:fixed;
  inset:0;
  background:rgba(31,27,22,0.92); /* parchment dark */
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:1.5rem;
}

.slash-gate__modal{
  max-width:520px;
  width:100%;
  background:rgba(24,24,24,0.96);
  border-radius:14px;
  border:1px solid rgba(122,46,46,0.85); /* warning red only here */
  box-shadow:0 0 28px rgba(24,24,24,0.65);
  padding:1.8rem 1.6rem 1.5rem;
  text-align:center;
}

.slash-gate__title{
  font-family:"Unica One", system-ui, sans-serif;
  font-size:1.45rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--sf-gold-2);
  margin:0 0 .75rem;
}

.slash-gate__text{
  font-family:"IBM Plex Serif", Georgia, serif;
  font-size:1rem;
  line-height:1.7;
  color:var(--sf-ink);
  margin:0 0 1.25rem;
}

.slash-gate__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  margin:0 0 1rem;
}

/* Map gate buttons onto lane buttons */
.gate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;

  font-family:"Unica One", system-ui, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;

  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Gate Primary (matches PDF primary action) */
.gate-btn.primary{
  background:var(--sf-umber);
  color:var(--sf-ink);
  border:1px solid var(--sf-parch-0);
}
.gate-btn.primary:hover,
.gate-btn.primary:focus-visible{
  background:var(--sf-gold-2);
  color:var(--sf-parch-0);
  transform:translateY(-1px);
  outline:none;
}

/* Gate Secondary */
.gate-btn.secondary{
  background:transparent;
  color:var(--sf-gold-1);
  border:1px solid rgba(212,178,106,0.22);
}
.gate-btn.secondary:hover,
.gate-btn.secondary:focus-visible{
  background:rgba(230,226,218,0.10);
  border-color:rgba(212,178,106,0.45);
  color:var(--sf-ink);
  transform:translateY(-1px);
  outline:none;
}

.slash-gate__note{
  margin:0;
  font-size:.9rem;
  color:var(--sf-muted);
  font-style:italic;
}

.slash-gate__noscript{
  margin-top:.75rem;
  padding:.65rem .75rem;
  background:rgba(122,46,46,0.18); /* warning red allowed here */
  border:1px solid rgba(122,46,46,0.42);
  border-radius:10px;
  color:var(--sf-ink);
  font-size:.9rem;
}



/* ------------------------------------------------------------
   09) INDEX LIST (Shorts-style expandable <details> cards)
------------------------------------------------------------ */

.page-slash .slash-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* The card is a <details> element */
.page-slash details.slash-card{
  padding:18px 16px 14px;
  border-radius:16px;
  background:rgba(24,24,24,0.28);
  border:1px solid var(--sf-line-2);
  position:relative;
  overflow:hidden;
  box-shadow:var(--sf-shadow-soft);
}

/* Gold accent bar (NOT red) */
.page-slash details.slash-card::before{
  content:"";
  position:absolute;
  inset:-1px auto -1px 0;
  width:3px;
  background:rgba(201,162,79,0.85);
  box-shadow:0 0 10px rgba(201,162,79,0.22);
}

/* Summary header row */
.page-slash details.slash-card > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.page-slash details.slash-card > summary::-webkit-details-marker{
  display:none;
}

/* Hint line like Shorts */
.page-slash details.slash-card > summary::after{
  content:"Click to expand";
  font-family:"Unica One", system-ui, sans-serif;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sf-muted);
  margin-top:6px;
}

/* Open state */
.page-slash details.slash-card[open]{
  border-color:rgba(201,162,79,0.70);
  box-shadow:0 0 18px rgba(201,162,79,0.12);
}

.page-slash details.slash-card[open] > summary::after{
  content:"Click to collapse";
  color:var(--sf-gold-1);
}

/* Title inside card */
.page-slash .slash-card-title{
  margin:0 0 .15rem;
  font-family:"Cinzel Decorative", serif;
  font-size:1.25rem;
  letter-spacing:.04em;
  color:var(--sf-ink);
}

/* Expanded body */
.page-slash .slash-card-body{
  margin-top:.75rem;
  padding-top:.65rem;
  border-top:1px solid rgba(230,226,218,0.07);
}

.page-slash .slash-summary{
  margin:.5rem 0 .75rem;
  color:var(--sf-ink);
  line-height:1.7;
}

/* Read row */
.page-slash .slash-read-row{
  margin:.35rem 0 0;
}

.page-slash a.slash-read{
  font-family:"Unica One", system-ui, sans-serif;
  font-size:13px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--sf-gold-1);
  text-decoration:none;
  border-bottom:0;
}

.page-slash a.slash-read:hover,
.page-slash a.slash-read:focus-visible{
  color:var(--sf-ink);
  text-shadow:0 0 10px rgba(212,178,106,0.18);
  outline:none;
}

/* Read Story button */
.slash-read {
  display: block;
  width: fit-content;
  margin: 26px auto 0;

  padding: 10px 26px;

  font-family: var(--sf-font-accent);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: var(--sf-gold);
  text-decoration: none;

  border: 1px solid var(--sf-gold);
  border-radius: 999px;
  background: rgba(0,0,0,0.45);

  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.slash-read {
  box-shadow: 0 0 0 1px rgba(224,184,74,0.35),
              0 6px 18px rgba(0,0,0,0.35);
}

.slash-read:hover {
  box-shadow: 0 0 0 1px rgba(224,184,74,0.85),
              0 10px 28px rgba(0,0,0,0.45);
}

/* Divider between cards (subtle) */
.slash-rule--card{
  opacity:.55;
}

/* Mobile tighten */
@media (max-width:820px){
  .page-slash details.slash-card{
    padding:14px 12px 12px;
  }
  .page-slash details.slash-card::before{
    width:2px;
  }
  .page-slash details.slash-card > summary::after{
    font-size:10px;
  }
}

/* ------------------------------------------------------------
   10) FOOTER INTEGRATION (light touch)
------------------------------------------------------------ */

/* Your footer is already styled by author-base.css; this just harmonizes */
.site-footer{
  border-top:1px solid var(--sf-line-2);
  background:
    linear-gradient(180deg, rgba(24,24,24,0.40), rgba(31,27,22,0.85));
}
.site-footer a{
  color:var(--sf-gold-1);
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color:var(--sf-ink);
  text-shadow:0 0 8px rgba(212,178,106,0.18);
  outline:none;
}

/* ------------------------------------------------------------
   11) Slash Card Body Backgrounds
------------------------------------------------------------ */

/* Card background hero (uses --card-bg if present) */
.slash-card-body{
  position: relative; /* needed for overlay */
}


/* If you set --card-bg on .slash-card-body instead, use this block and remove the .slash-card one above */
.slash-card-body{
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 14px; /* match your card rounding */
  overflow: hidden;    /* keeps overlay rounded */
  padding: 28px 40px;
}

/* Dark overlay so text stays readable */
.slash-card-body::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.70);
  pointer-events: none;
}

/* Make sure content sits above overlay */
.slash-card-body > *{
  position: relative;
  z-index: 1;
}

.slash-card-body{
  background-color: rgba(0,0,0,0.35);
  background-blend-mode: multiply;
}

/* ------------------------------------------------------------
   12) Scene Divider - Jurisdiction
------------------------------------------------------------ */

/* Scene / POV divider (trident) */
.scene-divider{
  display:flex;
  justify-content:center;
  margin: 1.6rem auto;
}

.scene-divider img{
  width: 30%;
  max-width: 320px;  /* optional: prevents it from getting huge on wide screens */
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(24,24,24,0.35));
}

@media (max-width: 820px){
  .scene-divider img{
    width: 60%;      /* still “smallish” on phones */
    max-width: none;
    opacity: 0.9;
  }
}

/* ------------------------------------------------------------
   13) Drop-Caps (Story book feel) - Jurisdiction
------------------------------------------------------------ */

/* Drop caps */
.dropcap::first-letter {
  font-family: "Uncial Antiqua", serif;
  float: left;
  font-size: 3em;
  line-height: 1;
  padding-right: 0.1em;
}

/* ------------------------------------------------------------
   14) Purchase Button - Jurisdiction
------------------------------------------------------------ */

/* Digital Collector's Edition Nudge Button */
.collector-nudge{
  display:inline-block;              /* keeps pill behavior */
  margin: 2rem auto 0;
  padding: 0.4rem 0.85rem;           /* smaller than nav buttons */

  font-family: 'Unica One', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background: #c9a24f;
  color: #1f1b16;
  border: 1px solid #1f1b16;
  border-radius: 999px;              /* full pill rounding */

  text-decoration: none;
  transition: all 0.25s ease;
}

/* Centering wrapper */
.collector-wrap{
  text-align:center;
  margin-top:2rem;
}

.collector-nudge:hover{
  background:#d4b26a;
  transform: translateY(-1px);
}

/* Epilogue — Darker Path CTA */
.collector-nudge--epilogue{
  display:inline-block;
  padding: 0.45rem 1rem;

  font-family: 'Unica One', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  background: #c9a24f;
  color: #1f1b16;
  border: 1px solid #1f1b16;
  border-radius: 999px;

  text-decoration:none;
  transition: all 0.25s ease;
}

.collector-nudge--epilogue:hover{
  background:#d4b26a;
  transform: translateY(-1px);
}

/* Centering wrapper */
.epilogue-cta{
  text-align:center;
  margin-top:2.5rem;
}

/* ------------------------------------------------------------
   STORY RETURN LINK
------------------------------------------------------------ */

.slash-back-row{
  margin: 0 0 1rem;
}

.slash-back{
  font-family:"Unica One", system-ui, sans-serif;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--sf-muted);
  text-decoration:none;
  border-bottom:0;
}

.slash-back:hover,
.slash-back:focus-visible{
  color:var(--sf-gold-1);
  text-shadow:0 0 8px rgba(212,178,106,0.18);
  outline:none;
}

/* ------------------------------------------------------------
   STORY NAVIGATION (Prev | Archive | Next)
------------------------------------------------------------ */

.slash-nav-row{
  margin: 0 0 1rem;
  font-family:"Unica One", system-ui, sans-serif;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--sf-muted);
}

.slash-nav-link{
  color:var(--sf-muted);
  text-decoration:none;
  border-bottom:0;
  transition:color .18s ease, text-shadow .18s ease;
}

.slash-nav-link:hover,
.slash-nav-link:focus-visible{
  color:var(--sf-gold-1);
  text-shadow:0 0 8px rgba(212,178,106,0.18);
  outline:none;
}

.slash-nav-divider{
  color:var(--sf-line-2);
  margin:0 .4em;
}

/* ------------------------------------------------------------
   STORY DIVIDERS
------------------------------------------------------------ */

/* Examiner Divider - Looney Tunes */
.divider-wrap-examiner {
  text-align: center;
  margin: 2.5rem 0;
}

.divider-wrap-examiner img {
  display: inline-block;
  width: min(420px, 60%);
  height: auto;
}

/* Draw Divider - Super Street Fighter II */
.divider-wrap-draw {
  text-align: center;
  margin: 2.5rem 0;
}

.divider-wrap-draw img {
  display: inline-block;
  width: min(420px, 60%);
  height: auto;
}

/* Retrieval Divider - Mario Brothers */
.divider-wrap-retrieval {
  text-align: center;
  margin: 2.5rem 0;
}

.divider-wrap-retrieval img {
  display: inline-block;
  width: max(420px, 60%);
  height: auto;
}