/* guiderails.css — full drop-in replacement */

/* ============ Root variables ============ */
:root{
  /* layout */
  --maxW: 1400px;                 /* page width */
  --cardW: 1280px;                /* hero card width */
  --gap: 26px;
  --radius: 18px;

  /* type + color */
  --ink: #2a2117;

  /* surfaces */
  --paper: rgba(255,255,255,0.42);  /* outer card wash */
  --panel: rgba(255,255,255,0.90);  /* right panel (slightly more opaque for readability) */
  --shadow: 0 14px 40px rgba(0,0,0,0.28);

  /* frames */
  --frame-primary: #6b4a2f;       /* walnut */
  --frame-secondary: #c9ad7a;     /* aged parchment */
  --frame-accent: #8b6a3e;        /* antique brass */

  /* buttons */
  --btn-bg: rgba(255,255,255,0.95);
  --btn-border: rgba(0,0,0,0.14);
}

/* ============ Basic reset ============ */
* { box-sizing: border-box; }
body{
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background-image: url("../img/parchment-scroll-bg.png"); /* relative to assets/css/ */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.wrap{
  max-width: var(--maxW);
  margin: 0 auto;
  padding: 34px 20px 60px;
}

/* ============ Header ============ */
header{ text-align:center; margin: 8px 0 22px; }
header .house{
  letter-spacing: 0.08em; font-weight:700; text-transform:uppercase;
  font-size: 34px; margin: 0;
}
header .sub{
  margin: 10px auto 0; display:inline-block; padding:10px 16px;
  border-radius:999px; background: rgba(255,255,255,0.50);
  border: 1px solid rgba(0,0,0,0.10); font-size:14px; letter-spacing:.06em;
  text-transform: uppercase;
}
/* Tighten Guiderails header block */
.gpHeader {
  margin-bottom: 12px; /* was likely ~20–24px */
}

/* ============ Card wrapper ============ */
.card{
  max-width: var(--cardW);
  margin: 0 auto;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow);
}

/* ============ Hero layout ============ */
.hero{
  display: grid;
  grid-template-columns: minmax(360px, 480px) 520px;
  gap: var(--gap);
  align-items: stretch;
  margin: 0 auto;
  max-width: 1080px;   /* ← THIS is the missing piece */
}
/* Hub page: desk-forward layout (different from book pages) */
.hero--hub{
  grid-template-columns: 1fr 520px; /* big desk, same panel width */
  max-width: 1180px;               /* a little wider than book pages */
}


/* ============ Desk stage (left) ============ */
.desk-stage{
  position: relative;
  border-radius: var(--radius);
  overflow: visible; /* allow hover previews to overflow */
  background: transparent;
}
.desk-bg{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  outline: 1px solid rgba(0,0,0,0.10);
}

/* ============ Hotspots (click zones) ============ */
.desk-stage .hotspot{
  position: absolute;
  z-index: 20;
  display: block;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: default;  /* hover-only previews (not clickable) */
}

/* Prevent hover from shifting layout */
.desk-stage .hotspot:hover,
.desk-stage .hotspot:focus,
.desk-stage .hotspot:focus-visible{
  outline: none;
  box-shadow: none;
  transform: none;
}

/* Hotspot positions — percentages relative to the desk-stage block.
   Tweak these numbers to nudge the zone. */
.desk-stage .hs-1{ top: 11%; left: 27%; width: 15%; height: 27%; } /* Freight Train */
.desk-stage .hs-2{ top: 52%; left: 24%; width: 18%; height: 36%; } /* Switching Tracks (tweak these) */
.desk-stage .hs-3{ top: 22%; left: 52%; width: 17%; height: 37%; } /* Off the Rails */

/* ============ Hover preview images ============ */
/* Base preview appearance (no forced top/left here) */
.hotspot .preview{
  position: absolute;
  width: 260px;
  max-width: 260px;
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
  background: #fff;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 0.20s ease, transform 0.20s ease;
  z-index: 9999;
}

/* show on hover */
.hotspot:hover .preview{
  opacity: 1;
  transform: scale(1) translateY(-2px);
}

/* Per-hotspot placement tuning — edit these to nudge preview box */
.desk-stage .hs-1 .preview{ left: 32%; top: -90%; } /* Freight Train preview */
.desk-stage .hs-2 .preview{ left:-50%; top: -40%; } /* Switching Tracks preview — tweak these */
.desk-stage .hs-3 .preview{ left: 40%; top: -30%; } /* Off the Rails preview */

/* If you want the preview to overflow further to the left (when it hits edge),
   you can use negative left values or bigger top offsets. */

/* ============ Right panel ============ */
.panel{
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--frame-secondary);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* panel content */
.panel h1{ margin:0 0 10px; font-size:28px; letter-spacing:.02em; }
.panel p{ margin:0 0 11px; line-height:1.28; }

.toc{ margin:0 0 12px 18px; padding:0; }
footer{ text-align:center; margin-top:5px; opacity:0.85; font-size:13px; }


/* Buttons */
.ctaRow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px;
  background: var(--btn-bg); border: 1px solid var(--btn-border);
  color: var(--ink); text-decoration:none; font-weight:700;
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.14); }

/* ============ Responsive ============ */
@media (max-width: 980px){
  header .house{ font-size:28px; }
  .hero{ grid-template-columns: 1fr; }
  .desk-stage{ cursor:pointer; }
  /* disable hover previews on touch screens */
  .hotspot .preview{ display:none !important; }
}
.gpNav{
  margin-top: 0px;
}

/* ===== CANONICAL ART STAGE (reusable) ===== */
.art-stage{
  width: 100%;
  max-width: 980px;
  height: min(60vh, 520px);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  background: radial-gradient(ellipse at center, rgba(60,40,10,.85), rgba(0,0,0,.95));
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-stage img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px){
  .art-stage{ height: min(52vh, 380px); }
}
@media (max-width: 480px){
  .art-stage{ height: min(46vh, 300px); }
}
/* ===== ART PLACEHOLDERS ===== */
.art-placeholder{
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.05) 10px,
      rgba(0,0,0,.15) 10px,
      rgba(0,0,0,.15) 20px
    );
}

.art-placeholder-label{
  color: rgba(255,255,255,.6);
  font-size: 14px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
/* ===== UNIVERSAL CONTENT CARD (Lore / Under Construction / Excerpts) ===== */
.uc-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 18px 70px;
}

.uc-card{
  border-radius: 18px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  overflow: hidden;
  padding: 18px 22px 22px;   /* gives prose breathing room */
}

/* Optional: keep headings from hugging the edge */
.uc-card h1, .uc-card h2, .uc-card h3{
  margin-top: 0;
}

/* Nav buttons container (if you use it) */
.nav-buttons{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.uc-card p{
  max-width: 72ch;
}
/* Global paragraph rhythm inside panels */
.panel p {
  margin-bottom: 12px; /* instead of 16–18px */
}
/* Lede should feel intentional, not floaty */
.panel .lede {
  margin-bottom: 14px;
  line-height: 1.55; /* optional, subtle */
}
.book-list {
  margin-top: 10px;
  margin-bottom: 14px;
}
.footer-contact{
  font-size: 1rem;          /* overrides h2 size */
  font-weight: normal;
  margin: 1.2rem 0 0;
  color: #4a3b2a;           /* parchment ink tone */
}

.footer-contact a{
  color: #6b3f1d;
  text-decoration: none;
  border-bottom: 1px dotted rgba(107,63,29,.5);
}

.footer-contact a:hover{
  border-bottom-style: solid;
}
.site-footer{
  text-align: center;
  margin: 28px auto 36px;
  max-width: 900px;
  color: rgba(40, 28, 18, 0.75);
}
body{
  overflow:auto;
}

.page{
-  height:100%;
+  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.site-footer{
  max-width: 1200px;
  margin: 40px auto 30px auto;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
}