*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:#09040d;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
}
.page{width:968px;margin:10px auto 24px}
.title-panel{
  height:75px;
  border-radius:38px;
  background:#3e3b41;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.title-panel img{width:496px;height:59px;display:block}
.editions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:19px}
.edition{text-align:center;min-width:0}
.cover-panel{
  height:271px;
  border-radius:11px;
  background:#3e3b41;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.edition:nth-child(1) img{width:162px;height:246px}
.edition:nth-child(2) img{width:153px;height:246px}
.edition:nth-child(3) img{width:153px;height:246px;object-fit:cover}
.cover-panel img{display:block;object-fit:cover}
.cover-label{height:20px;padding-top:3px;color:#fff;font-weight:bold;font-size:12px;line-height:16px}
.lower-grid{display:grid;grid-template-columns:309px 1fr;gap:20px;align-items:start}
.index-panel,.content-panel{background:#3e3b41;border-radius:11px;overflow:hidden}
.index-panel{min-height:430px;padding:17px 10px 18px}
.index-panel h2{
  margin:0 0 8px 64px;
  color:#fff;
  font:700 15px/18px Arial,Helvetica,sans-serif;
  font-variant:small-caps;
  letter-spacing:.2px;
}
#site-index{display:block}
#site-index a{
  display:block;
  min-height:25px;
  padding:5px 10px 4px;
  color:#9cff00;
  text-decoration:none;
  text-transform:uppercase;
  font-size:13px;
  line-height:16px;
  font-weight:700;
  font-variant:small-caps;
  letter-spacing:.15px;
}
#site-index a:hover,#site-index a:focus{
  color:#fff;
  background:#2a272c;
  outline:none;
}
#site-index a.active{
  color:#9cff00;
  background:#2a272c;
  text-align:right;
  padding-right:10px;
}
.content-panel{min-height:650px;padding:17px 20px 30px}
.content-panel>h1{
  margin:0 0 28px;
  color:#fff;
  font:700 15px/18px Arial,Helvetica,sans-serif;
  letter-spacing:.3px;
}
.preview-copy{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.42;color:#fff}
.preview-copy h3{margin:0 0 24px;text-align:center;font:italic 700 24px/28px Arial,Helvetica,sans-serif}
.preview-copy .byline{margin:0 0 10px;text-align:center;font:bold 15px/18px Arial,Helvetica,sans-serif}
.preview-copy .audio-line{font:14px/18px Arial,Helvetica,sans-serif;text-align:center;margin:0 0 24px}
.preview-copy .audio-line a,.read-more a{color:#9cff00}
.preview-copy h2{margin:0 0 3px;text-align:center;font:bold 22px/26px Arial,Helvetica,sans-serif}
.preview-copy .year{text-align:center;font-weight:bold;margin:0 0 20px}
.preview-copy p{margin:0 0 14px}
.preview-copy p:not(.byline):not(.audio-line):not(.year):not(.read-more)::first-letter{ }
.read-more{text-align:center!important;margin-top:24px!important;font-style:italic;font-weight:bold}
footer{text-align:center;color:#aaa;font-size:10px;padding:14px 0}
@media(max-width:1000px){
  .page{width:calc(100% - 24px)}
}
@media(max-width:720px){
  .title-panel{height:64px}.title-panel img{max-width:78%;height:auto}
  .editions{gap:8px}.cover-panel{height:190px}
  .edition:nth-child(n) img{width:auto;height:170px;max-width:92%}
  .cover-label{font-size:10px;height:30px}
  .lower-grid{grid-template-columns:1fr}
  .index-panel{min-height:0}
}

.content-panel{padding:17px 20px 30px;min-height:650px}
.page-copy{font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.42;color:#fff}
.page-copy h1{margin:0 0 24px;font:700 15px/18px Arial,Helvetica,sans-serif;letter-spacing:.3px}
.page-copy h2{margin:10px 0 12px}.page-copy h3{margin:8px 0 16px}.page-copy h4{margin:0 0 18px}
.page-copy p{margin:0 0 14px}.center{text-align:center}.italic{font-style:italic}.byline{font-weight:bold}.smallnote{font:14px/18px Arial,Helvetica,sans-serif}.more a,.page-copy a{color:#9cff00}
.dropcap:first-letter{float:left;font:72px/55px Georgia,serif;padding:4px 6px 0 0}.page-copy blockquote{margin:0 0 20px;padding:0}.page-copy cite{display:block;margin-top:5px;font-style:normal}.credit{text-align:right;font-style:italic}.poem{margin:20px 30px;font-style:italic}
.author-photo{float:left;width:145px;height:190px;margin:0 18px 10px 0;background:linear-gradient(#202329,#62666b);border:4px solid #29262b;display:flex;align-items:center;justify-content:center;text-align:center;font:30px/30px Georgia,serif;color:#ddd}
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}.store-grid img{height:165px;max-width:110px;object-fit:cover}.store-grid h3{font-family:Arial,sans-serif;font-size:15px}.store-grid p{font-size:15px;line-height:1.35}
.song-card{background:#302d32;border:1px solid #555;padding:12px;margin:14px 0}.song-card strong,.song-card span{display:block}.fake-play{margin-top:8px;background:#18151b;color:#9cff00;border:1px solid #666;padding:6px 10px;cursor:pointer}.track-note{display:none;margin-top:10px!important;font-size:15px}.song-card.open .track-note{display:block}
.book-entry{min-height:150px;border-bottom:1px solid #777;padding:0 0 18px;margin:0 0 18px}.book-entry img,.book-placeholder{float:left;width:90px;height:140px;margin:0 15px 8px 0;object-fit:cover}.book-placeholder{background:#242128;border:2px solid #666;display:flex;align-items:center;justify-content:center;text-align:center;font:bold 14px Arial;padding:5px}.book-entry h2{font:700 18px Arial;margin:0 0 5px;color:#9cff00}.book-entry:after{content:"";display:block;clear:both}
.madlib-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 15px;font:14px Arial}.madlib-form label{display:flex;flex-direction:column;gap:4px}.madlib-form input{padding:6px;background:#262329;border:1px solid #777;color:#fff}.madlib-form button{grid-column:1/-1;padding:8px;background:#262329;border:1px solid #777;color:#9cff00;font-weight:bold;cursor:pointer}.madlib-result{margin-top:20px;padding:15px;background:#2b282e;display:none}.madlib-result.show{display:block}
.map-wrap{position:relative;width:100%;height:510px;overflow:hidden;border:5px solid #2a272c;background:#b8aa84;cursor:crosshair}.map-art{position:absolute;inset:0;background:radial-gradient(ellipse at 72% 48%,#d2c9a7 0 22%,transparent 23%),linear-gradient(105deg,#83986a 0 42%,#b7a97e 43% 100%);filter:sepia(.25);font:bold 15px Georgia;color:#362f23}.map-art:before,.map-art:after{content:"";position:absolute;background:#625944;transform:rotate(-18deg)}.map-art:before{width:420px;height:7px;left:120px;top:260px}.map-art:after{width:340px;height:5px;left:210px;top:160px;transform:rotate(38deg)}.map-art span{position:absolute;text-shadow:0 1px #eee}.ocean{left:30px;top:210px;transform:rotate(-70deg);letter-spacing:3px}.town{left:330px;top:240px;font-size:24px}.gulls{right:25px;top:80px}.harbor{right:35px;bottom:80px}.road{left:235px;top:155px;transform:rotate(38deg)}.map-lens{display:none;position:absolute;width:170px;height:170px;border:4px solid #eee;border-radius:50%;box-shadow:0 0 0 3px #333,0 4px 15px #000;background:rgba(255,255,255,.14);pointer-events:none}.map-wrap:hover .map-lens{display:block}
.external-disabled{cursor:not-allowed}
@media(max-width:720px){.store-grid{grid-template-columns:1fr}.madlib-form{grid-template-columns:1fr}.map-wrap{height:350px}.page-copy{font-size:16px}}

/* Archival restoration refinements */
body{background-color:#09040d;background-image:linear-gradient(#120b14 0,#09040d 38px);background-repeat:repeat-x}
.page{width:965px}
.title-panel,.cover-panel,.index-panel,.content-panel{background:#403d43}
.title-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.index-panel h2{text-transform:none;font-variant:small-caps}
#site-index a{font-family:Arial,Helvetica,sans-serif}
#site-index a.active{background:#2c292f}
.content-panel{font-family:Arial,Helvetica,sans-serif}
.archive-media{margin:15px auto;padding:14px;background:#302d32;border:1px solid #555;text-align:center;font:12px Arial;color:#bbb}
.archive-media strong{display:block;color:#fff;margin-bottom:4px}
.map-note{text-align:center;font:italic 13px Arial;margin:0 0 8px}
.real-map-wrap{position:relative;width:590px;max-width:100%;margin:0 auto;overflow:hidden;cursor:crosshair}
.real-map-wrap>img{width:100%;display:block}
.map-magnifier{display:none;position:absolute;width:185px;height:185px;border:4px solid #eee;border-radius:50%;box-shadow:0 0 0 3px #27242a,0 4px 18px #000;background-image:url('delilah_map.png');background-repeat:no-repeat;pointer-events:none}
.real-map-wrap:hover .map-magnifier{display:block}
.author-photo-real{float:left;width:200px;height:auto;margin:0 18px 10px 0;border:0}
.social-archive{display:flex;flex-wrap:wrap;gap:6px;margin:18px 8px 12px;opacity:1;justify-content:flex-start}
.social-archive img{display:block;width:32px;height:32px;border:0}
.sidebar-music{margin:8px 8px 0;padding-top:8px;border-top:1px solid #57535a;text-align:center;font:11px Arial;color:#ddd}
.sidebar-music strong{display:block;font-size:12px;margin-bottom:5px}
@media(max-width:720px){.page{width:calc(100% - 20px)}.real-map-wrap{width:100%}.author-photo-real{width:145px}}

/* Restored original heading colors */
.page-copy h2,
.preview-copy h2,
.content-panel h2 {
  color:#2ca4d9;
}
.page-copy h3,
.preview-copy h3,
.content-panel h3 {
  color:#2ca4d9;
}


/* Original Siren typography restoration */
body,
.content-panel,
.page-copy,
.preview-copy {
  font-family: Arial, Helvetica, sans-serif;
}
.page-copy,
.preview-copy {
  font-size: 14px;
  line-height: 1.42;
}
.page-copy h1,
.preview-copy h1 {
  font-family: Arial, Helvetica, sans-serif;
}
.page-copy h2,
.preview-copy h2,
.content-panel h2 {
  color: #2ca4d9;
  font-family: Arial, Helvetica, sans-serif;
}
.page-copy h3,
.preview-copy h3,
.content-panel h3 {
  color: #2ca4d9;
  font-family: Arial, Helvetica, sans-serif;
}
.bonus-story-copy p { margin: 0 0 14px; }
.bonus-story-copy .story-title {
  text-align: center;
  margin: 12px 0 6px;
  font-size: 17px;
  line-height: 1.25;
}
.bonus-story-copy .story-byline { text-align:center; margin-bottom:22px; }
.bonus-story-copy .story-break { text-align:center; letter-spacing:4px; }
.bonus-story-copy .story-note { text-align:center; font-style:italic; }

/* Comprehensive archival typography pass: restored heading hierarchy */
.index-panel h2 {
  margin: 0 0 8px;
  text-align: center;
}

.content-panel h1,
.page-copy h1,
.preview-copy h1 {
  margin: 0 0 24px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}

.content-panel h2,
.page-copy h2,
.preview-copy h2,
.book-entry h2 {
  color: #2ca4d9;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}

.content-panel h3,
.page-copy h3,
.preview-copy h3,
.store-grid h3,
.bonus-story-copy .story-title {
  color: #2ca4d9;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

.page-copy h1 { margin-top: 0; }
.page-copy h2 { margin: 14px 0 12px; }
.page-copy h3 { margin: 10px 0 16px; }
.book-entry h2 { margin: 0 0 5px; }
.preview-copy h3 { margin: 0 0 24px; }

@media (max-width: 720px) {
  .content-panel h1,
  .page-copy h1,
  .preview-copy h1 { font-size: 22px; }
  .content-panel h2,
  .page-copy h2,
  .preview-copy h2,
  .book-entry h2 { font-size: 19px; }
  .content-panel h3,
  .page-copy h3,
  .preview-copy h3,
  .store-grid h3,
  .bonus-story-copy .story-title { font-size: 17px; }
}


/* Archive graphic placeholders */
.graphic-placeholder,
.archive-image-placeholder {
  box-sizing: border-box;
  width: min(100%, 420px);
  min-height: 150px;
  margin: 18px auto;
  padding: 28px 18px;
  border: 2px dashed #7f9baa;
  border-radius: 8px;
  background: rgba(125, 183, 232, 0.08);
  color: #9fc9e8;
  text-align: center;
  line-height: 1.5;
}
.graphic-placeholder strong {
  color: #8cc63f;
  letter-spacing: 0.08em;
}
.author-photo-real {
  float: right;
  width: 200px;
  max-width: 42%;
  height: auto;
  margin: 0 0 14px 18px;
}
@media (max-width: 640px) {
  .author-photo-real {
    float: none;
    display: block;
    width: 200px;
    max-width: 100%;
    margin: 0 auto 16px;
  }
}

.pirate-banner{margin:14px 1px 0;text-align:center}
.pirate-banner a{display:inline-block}
.pirate-banner img{display:block;width:287px;max-width:100%;height:auto;border:0}

/* Restored original Siren background treatment */
html {
  background: #08040b;
}

body {
  position: relative;
  isolation: isolate;
  background: #08040b;
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background-image: url("Siren-backgroundimage.jpg");
  background-repeat: no-repeat;
  background-position: center 112px;
  background-size: 1040px auto;
  opacity: 0.43;
  filter: brightness(0.82) contrast(1.04) saturate(0.92);
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(32, 91, 57, 0.12), transparent 54%),
    linear-gradient(to bottom, rgba(8, 4, 11, 0.08), rgba(8, 4, 11, 0.34));
}

.title-panel,
.cover-panel,
.index-panel,
.content-panel {
  background-color: rgba(64, 61, 67, 0.82);
  -webkit-backdrop-filter: blur(0.5px);
  backdrop-filter: blur(0.5px);
}

.title-panel {
  background-color: rgba(64, 61, 67, 0.90);
}

#site-index a:hover,
#site-index a:focus-visible {
  transform: scale(1.16);
  transform-origin: left center;
  position: relative;
  z-index: 2;
  color: #fff;
  background: rgba(42, 39, 44, 0.88);
  text-shadow: 0 0 6px rgba(156, 255, 0, 0.42);
}

#site-index a {
  transition:
    transform 0.18s cubic-bezier(.17,.67,.38,1.35),
    color 0.18s ease,
    background-color 0.18s ease,
    text-shadow 0.18s ease;
  transform-origin: left center;
}

@media (max-width: 720px) {
  body::before {
    background-position: center 92px;
    background-size: 820px auto;
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-index a {
    transition: none;
  }
  #site-index a:hover,
  #site-index a:focus-visible {
    transform: none;
  }
}

/* Refined background placement: brighter and clipped to the site width */
body::before,
body::after {
  content: none;
}

.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background-image: url("Siren-backgroundimage.jpg");
  background-repeat: no-repeat;
  background-position: center 94px;
  background-size: 100% auto;
  opacity: 0.82;
  filter: brightness(1.03) contrast(1.04) saturate(0.98);
}

.page::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8, 4, 11, 0.04) 0,
      rgba(8, 4, 11, 0.02) 52%,
      rgba(8, 4, 11, 0.24) 100%);
}

.title-panel,
.cover-panel,
.index-panel,
.content-panel {
  background-color: rgba(64, 61, 67, 0.70);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.title-panel {
  background-color: rgba(64, 61, 67, 0.78);
}

@media (max-width: 720px) {
  .page::before {
    background-position: center 80px;
    background-size: 118% auto;
    opacity: 0.72;
  }
}

/* Final original-site background and panel treatment */
.page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #050308;
  background-image: url("Siren-backgroundimage.jpg");
  background-repeat: no-repeat;
  background-position: center 92px;
  background-size: 100% auto;
}

/* Keep the exposed image between panels darker and higher contrast. */
.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(2, 2, 4, 0.34), rgba(2, 2, 4, 0.48)),
    radial-gradient(ellipse at 50% 37%, rgba(16, 46, 28, 0.02), rgba(0, 0, 0, 0.22) 72%);
}

.page::after {
  content: none;
}

/* The original gray modules were translucent, brighter than the gaps,
   and clipped the artwork cleanly at their rounded edges. */
.title-panel,
.cover-panel,
.index-panel,
.content-panel {
  position: relative;
  overflow: hidden;
  background: rgba(91, 91, 94, 0.63);
  border: 1px solid rgba(222, 222, 222, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: brightness(1.34) contrast(0.93) saturate(0.86);
  backdrop-filter: brightness(1.34) contrast(0.93) saturate(0.86);
}

.title-panel {
  border-radius: 38px !important;
  background: rgba(91, 91, 94, 0.69);
}

.cover-panel,
.index-panel,
.content-panel {
  border-radius: 11px !important;
}

/* A faint neutral veil makes the panels read as gray rather than green,
   while retaining more of the Siren detail than the prior version. */
.title-panel::after,
.cover-panel::after,
.index-panel::after,
.content-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(160, 160, 164, 0.055),
    rgba(55, 55, 59, 0.045)
  );
}

.title-panel > *,
.cover-panel > *,
.index-panel > *,
.content-panel > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .page {
    background-position: center 76px;
    background-size: 118% auto;
  }
}