:root{
  --bg:#0b0b09;
  --panel:#14130f;
  --gold:#b39155;
  --cream:#eadfc6;
  --paper:#e6d6b8;
  --ink:#1a1711;
  --muted:#92856f;
  --max:1480px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
}

a{color:inherit}

.topbar{
  height:68px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#080806;
  border-bottom:1px solid rgba(179,145,85,.28);
}

.brand{
  text-decoration:none;
  color:var(--cream);
  font-size:18px;
  letter-spacing:.13em;
  font-weight:700;
}

.topbar nav{
  display:flex;
  gap:28px;
}

.topbar nav a{
  text-decoration:none;
  color:#d7c8a9;
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero{
  min-height:590px;
  position:relative;
  display:flex;
  align-items:center;
  padding:65px 4vw;
  background:
    linear-gradient(90deg,
      rgba(5,5,4,.97) 0%,
      rgba(5,5,4,.84) 28%,
      rgba(5,5,4,.43) 49%,
      rgba(5,5,4,.08) 72%,
      rgba(5,5,4,.18) 100%),
    url('/assets/hero-sleeper-awakes.png') center center/cover no-repeat;
}

.hero-inner{
  width:100%;
  max-width:var(--max);
  margin:auto;
  position:relative;
  z-index:1;
}

.eyebrow,.section-number{
  margin:0;
  color:var(--gold);
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.hero h1{
  margin:18px 0 24px;
  max-width:700px;
  color:#f0e4ca;
  font-size:clamp(70px,9vw,145px);
  line-height:.78;
  letter-spacing:-.055em;
  font-weight:400;
}

.hero-copy{
  margin:0;
  max-width:650px;
  color:#eadcc0;
  font-size:clamp(24px,2.7vw,39px);
  line-height:1.18;
  font-style:italic;
}

.hero-meta{
  margin-top:42px;
  display:flex;
  gap:38px;
  flex-wrap:wrap;
  color:#cfb783;
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-actions{
  margin-top:32px;
  display:flex;
  gap:12px;
}

.archive-button{
  padding:13px 17px;
  border:1px solid var(--gold);
  text-decoration:none;
  background:var(--gold);
  color:#11100d;
  font-family:Arial,sans-serif;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700;
}

.archive-button.ghost{
  background:rgba(8,8,6,.65);
  color:var(--cream);
}

.section{
  max-width:var(--max);
  margin:auto;
  padding:90px 4vw;
}

.section h2{
  margin:10px 0 32px;
  color:var(--cream);
  font-size:clamp(45px,6vw,75px);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.035em;
}

.copy{
  max-width:760px;
  color:#cfc3ab;
  font-size:19px;
  line-height:1.7;
}

blockquote{
  margin:55px 0 0;
  padding-left:24px;
  border-left:3px solid var(--gold);
  color:#dbc496;
  font-size:31px;
}

.split{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:70px;
}

.dark-panel{
  max-width:none;
  background:#12110e;
  border-top:1px solid rgba(179,145,85,.25);
  border-bottom:1px solid rgba(179,145,85,.25);
}

.dark-panel>*{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

.archive-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.archive-grid article{
  min-height:125px;
  padding:20px;
  border:1px solid rgba(179,145,85,.28);
  background:#0e0e0b;
}

.archive-grid strong,
.archive-grid span{
  display:block;
}

.archive-grid strong{
  color:var(--gold);
  font-family:Arial,sans-serif;
  font-size:10px;
  letter-spacing:.12em;
}

.archive-grid span{
  margin-top:12px;
  color:#e5d9bd;
  font-size:16px;
}

#cards{
  max-width:none;
  background:
    linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)),
    var(--paper);
  color:var(--ink);
}

#cards>.section-number,
#cards>h2,
#cards>.card-grid{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

#cards h2{color:var(--ink)}

.card-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.card-placeholder{
  min-height:280px;
  padding:16px;
  display:flex;
  flex-direction:column;
  border:1px solid #9c8762;
  background:#efe2c8;
  color:#221d15;
  box-shadow:0 7px 18px rgba(41,30,18,.12);
}

.card-placeholder>span{
  font-family:Arial,sans-serif;
  font-size:10px;
  letter-spacing:.1em;
}

.card-placeholder h3{
  margin-top:auto;
  margin-bottom:8px;
  font-size:20px;
  font-weight:400;
}

.card-placeholder p{
  margin:0;
  color:#6d604b;
  font-size:12px;
}

.character-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.character-grid article{
  padding-top:20px;
  border-top:1px solid rgba(179,145,85,.28);
}

.character-grid h3{
  margin:0 0 12px;
  color:#dec99e;
  font-size:25px;
}

.character-grid p{
  color:#a99d88;
  line-height:1.55;
}

.small{
  color:#8e8370;
  font-family:Arial,sans-serif;
  font-size:11px;
  line-height:1.6;
}

.email-placeholder{
  margin-top:25px;
  max-width:540px;
  padding:18px;
  border:1px solid rgba(179,145,85,.35);
  background:#100f0c;
  color:#9f927b;
  font-family:Arial,sans-serif;
  font-size:12px;
}

footer{
  padding:38px 4vw;
  background:#060605;
  color:#bbaa89;
  border-top:1px solid rgba(179,145,85,.27);
}

footer>*{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

/* Record page */
.record-body{background:#0a0907;color:#e7dbc0}
.record-topbar{padding:24px 4vw;border-bottom:1px solid rgba(179,145,85,.25)}
.record-shell{max-width:1380px;margin:auto;padding:60px 4vw}
.record-hero-art img{display:block;width:100%;height:auto}
.record-hero-art{margin:25px 0;background:#080806;border:1px solid rgba(179,145,85,.4);padding:7px}
.record-information{display:grid;grid-template-columns:1.5fr .75fr;gap:70px;padding:55px 0}
.record-story{font-size:19px;line-height:1.7;color:#cbbfa6}
.record-metadata div{padding:14px 0;border-bottom:1px solid rgba(179,145,85,.2)}
.record-metadata span{display:block;color:#8f754d;font:9px Arial,sans-serif;letter-spacing:.15em}
.record-metadata strong{display:block;margin-top:6px;font-weight:400}

@media(max-width:900px){
  .topbar nav{display:none}
  .split{grid-template-columns:1fr}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .character-grid{grid-template-columns:repeat(2,1fr)}
  .record-information{grid-template-columns:1fr}
}

@media(max-width:560px){
  .hero{min-height:680px;background-position:60% center}
  .hero h1{font-size:65px}
  .card-grid,
  .archive-grid,
  .character-grid{grid-template-columns:1fr}
}

/* =========================================================
   HOMEPAGE V6 — SPACING + TYPOGRAPHY FIX
   ========================================================= */

/* Archive heading */

.archive-story {
  padding-top: 90px;
  padding-bottom: 78px;
}

.archive-story-head {
  margin-bottom: 60px;
}

.archive-story-head h2 {
  margin-top: 14px;
}

.archive-story-head > p {
  padding-bottom: 5px;
}


/* ACT row */

.act-row {
  margin-top: 0;
  border-bottom: 1px solid rgba(179,145,85,.22);
}

.act-row div {
  min-height: 105px;
  padding: 23px 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.act-row span {
  margin: 0 0 17px;
  line-height: 1;
}

.act-row strong {
  display: block;
  line-height: 1.35;
  letter-spacing: .035em;
}


/* Records section */

.records-preview {
  padding-top: 95px;
  padding-bottom: 110px;
}

.records-header {
  margin-bottom: 48px;
}

.records-header .eyebrow {
  margin-bottom: 13px;
}

.records-header h2 {
  margin: 0;
  line-height: .95;
}

.records-header > a {
  padding-bottom: 8px;
}


/* Individual preview cards */

.records-grid {
  gap: 22px 18px;
}

.preview-card {
  min-height: 390px;
  padding: 12px 12px 17px;
}

.preview-image,
.sealed-art {
  height: 250px;
  margin-bottom: 18px;
}

.sealed-art {
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255,255,255,.15),
      transparent 45%
    ),
    linear-gradient(135deg,#b5a17c,#d4c39f);

  color: #77623e;
}

.sealed-art span {
  font-family: Arial,sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  opacity: .7;
}

.preview-card > span {
  display: block;
  margin: 0 0 14px;
  line-height: 1;
}

.preview-card strong {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 40px;
  line-height: 1.25;
}

.preview-card small {
  display: block;
  margin-top: 10px;
  line-height: 1.35;
}


/* Community */

.community-row > div {
  padding-top: 82px;
  padding-bottom: 82px;
}

.community-row .eyebrow {
  margin-bottom: 15px;
}

.community-row h2 {
  margin: 0 0 23px;
  line-height: 1;
}

.community-row p:not(.eyebrow) {
  margin-top: 0;
  margin-bottom: 27px;
}


/* Footer */

.sleeper-footer {
  padding-top: 62px;
  padding-bottom: 62px;
  align-items: start;
}

.sleeper-footer strong {
  display: block;
  margin-bottom: 15px;
}

.sleeper-footer p {
  line-height: 1.65;
}

.sleeper-footer blockquote {
  line-height: 1.45;
}

.sleeper-footer blockquote small {
  margin-top: 17px;
}


/* Better desktop width */

@media(min-width:1250px) {
  .records-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}


/* Tablet */

@media(max-width:1050px) {

  .archive-story-head {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .act-row {
    grid-template-columns: repeat(3,1fr);
  }

  .act-row div {
    border-bottom: 1px solid rgba(179,145,85,.18);
  }
}


/* Mobile */

@media(max-width:700px) {

  .archive-story {
    padding-top: 65px;
    padding-bottom: 55px;
  }

  .archive-story-head {
    margin-bottom: 42px;
  }

  .act-row {
    display: block;
  }

  .act-row div {
    min-height: 0;
    padding: 19px 4px;
    border-right: 0;
  }

  .act-row span {
    margin-bottom: 9px;
  }

  .records-preview {
    padding-top: 65px;
  }

  .records-header {
    display: block;
  }

  .records-header > a {
    display: inline-block;
    margin-top: 22px;
  }
}


/* =========================================================
   ARCHIVE CARD GRID V7 — HARD SIZE CONTROL
   ========================================================= */

.records-preview {
    display: block !important;
    width: 100% !important;
    padding: 55px 4vw 70px !important;
    margin: 0 !important;
    background: #dfcfaf !important;
    color: #17140f !important;
    overflow: hidden !important;
}

.records-header {
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto 32px !important;

    display: flex !important;
    justify-content: space-between !important;
    align-items: end !important;
    gap: 30px !important;
}

.records-header h2 {
    color: #17140f !important;
    margin: 5px 0 0 !important;
    font-size: clamp(30px,4vw,48px) !important;
    line-height: 1 !important;
}

.records-header a {
    color: #55401f !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.records-grid {
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 16px !important;

    align-items: stretch !important;
}

.preview-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 9px !important;

    background: #ebdfc6 !important;
    color: #17140f !important;

    border: 1px solid #907a56 !important;
    text-decoration: none !important;

    overflow: hidden !important;

    box-shadow: 0 5px 14px rgba(45,31,15,.13) !important;
}

/* HARD artwork dimensions */
.preview-image,
.sealed-art {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 5 / 6 !important;

    margin: 0 0 11px !important;

    overflow: hidden !important;

    border: 1px solid #9a8460 !important;
    background-color: #cbb994 !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Catch accidental IMG tags too */
.preview-card img,
.records-grid img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 245px !important;

    object-fit: cover !important;

    margin: 0 !important;
}

/* sealed cards */
.sealed-art {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
      radial-gradient(circle at center,
          rgba(255,255,255,.18),
          transparent 46%),
      #c9b78f !important;
}

.sealed-art span {
    color: #765f3b !important;
    font: 9px Arial,sans-serif !important;
    letter-spacing: .2em !important;
}

/* card text */
.preview-card > span {
    margin: 0 0 7px !important;

    color: #725b38 !important;

    font: 9px Arial,sans-serif !important;
    letter-spacing: .13em !important;
}

.preview-card strong {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #18140f !important;

    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
}

.preview-card small {
    display: block !important;

    margin-top: 7px !important;

    color: #645943 !important;

    font-size: 10px !important;
    line-height: 1.25 !important;
}


/* Tablet */

@media(max-width:1000px) {
    .records-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }
}


/* Phone */

@media(max-width:650px) {

    .records-header {
        display: block !important;
    }

    .records-header a {
        display: inline-block !important;
        margin-top: 18px !important;
    }

    .records-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}


/* Narrow phone */

@media(max-width:420px) {
    .records-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   ACT ROW V8 — FORCE ONE CLEAN DESKTOP ROW
   ========================================================= */

.act-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    border-top: 1px solid rgba(179,145,85,.25) !important;
    border-bottom: 1px solid rgba(179,145,85,.25) !important;
}

.act-row div {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 14px !important;
    margin: 0 !important;
    text-align: center !important;
    border-right: 1px solid rgba(179,145,85,.20) !important;
    border-bottom: 0 !important;
}

.act-row div:last-child {
    border-right: 0 !important;
}

.act-row span {
    display: block !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #a17e46 !important;
    font: 10px Arial,sans-serif !important;
    line-height: 1 !important;
    letter-spacing: .15em !important;
}

.act-row strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #dfcca3 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
}


/* Keep cards comfortably sized */
.records-preview {
    padding-top: 48px !important;
}


/* Mobile only */
@media(max-width:700px) {
    .act-row {
        grid-template-columns: 1fr !important;
    }

    .act-row div {
        text-align: left !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(179,145,85,.18) !important;
    }
}


/* ACT ROW V9 — prevent clipping */

.act-row {
    overflow: visible !important;
}

.act-row div {
    min-width: 0 !important;
    overflow: visible !important;
    padding: 20px 22px !important;
}

.act-row div:first-child {
    padding-left: 28px !important;
}

.act-row span,
.act-row strong {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.act-row strong {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* slightly more breathing room around the whole archive block */
.archive-story {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
}

@media(max-width:1100px) {
    .act-row strong {
        font-size: 12px !important;
    }

    .act-row div {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* CARD 001 — show entire wide artwork without cropping */
.preview-card:first-child .preview-image {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #090907 !important;
}