:root{
  --bg:#070706;--panel:#110e0c;--cream:#f0e2cf;--gold:#d6a24e;--gold-hi:#f1c979;
  --gold2:#8b5b25;--ember:#c75b2d;--line:#5d3b20
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:radial-gradient(circle at 72% 5%,#281108 0,transparent 27%),#070706;
  color:var(--cream);font-family:Georgia,"Times New Roman",serif
}
img{max-width:100%;display:block}
.site-header{
  height:66px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;background:#080706ee;border-bottom:1px solid #3a2518
}
.brand{color:#e8d6bd;text-decoration:none;font:700 11px Arial;letter-spacing:.15em}.brand b{color:var(--ember)}
nav{display:flex;gap:28px}nav a{color:#d9c8b6;text-decoration:none;text-transform:uppercase;font:700 10px Arial;letter-spacing:.1em}
.menu-button{display:none;background:none;border:0;color:white;font-size:24px}

.hero{min-height:590px;padding:62px 5vw;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:7vw}
.hero-copy{max-width:680px}.eyebrow{color:var(--gold);font:700 10px Arial;letter-spacing:.2em}
.hero h1{
  font-size:clamp(72px,8vw,126px);line-height:.8;margin:16px 0 28px;font-weight:500;letter-spacing:-.04em;
  background:linear-gradient(#fff2df,#d6a55e 70%,#8b5529);-webkit-background-clip:text;color:transparent
}
.hero h1 span{display:block;font-size:.7em;letter-spacing:.06em}
.lead{font-size:22px;line-height:1.55;max-width:610px}
.actions{display:flex;gap:12px;margin-top:24px}
.btn{
  display:inline-block;padding:13px 20px;background:linear-gradient(135deg,#a13c20,#d16a35);
  border:1px solid #dc8450;color:#fff;text-decoration:none;text-transform:uppercase;font:700 10px Arial;letter-spacing:.07em
}
.btn.ghost{background:transparent;border-color:#73503b}.full{width:100%;text-align:center}
.disabled{opacity:.38;pointer-events:none;background:#27211d;border-color:#3c312a}
.hero-logo{display:flex;justify-content:center}.hero-logo img{width:min(430px,75vw);border-radius:50%;box-shadow:0 0 50px #8e321c55}

.ornate-divider{padding:10px 4vw 2px;display:flex;justify-content:center;align-items:center}
.ornate-divider img{width:min(980px,94vw);height:auto;filter:drop-shadow(0 0 5px rgba(215,157,71,.28))}

.section{padding:52px 5vw 62px}
.section-title{text-align:center;margin-bottom:32px}
.category{
  margin:0 0 0;color:var(--gold-hi);font-family:"Romanesco",cursive;
  font-size:clamp(58px,6vw,86px);line-height:.8;font-weight:400;text-shadow:0 0 12px #9a541f3d
}
.section-title h2,.bio h2{margin:9px 0 0;font-size:clamp(40px,5vw,70px);line-height:1}
.saga{font-size:25px;color:#dfc9ae;font-style:italic;margin:17px 0 0}

.memoir-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1180px;margin:auto}
.memoir-card{display:grid;grid-template-columns:42% 58%;border:1px solid var(--line);background:#100e0c;overflow:hidden}
.memoir-card img{width:100%;height:100%;object-fit:cover}.memoir-card>div{padding:25px;display:flex;flex-direction:column}
.memoir-card h3{font-size:30px;margin:0 0 15px}.memoir-card p{line-height:1.5;color:#c9b6a4}.memoir-card .btn{margin-top:auto}

.series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.book{background:#100e0c;border:1px solid var(--line);overflow:hidden}
.book>img{width:100%;aspect-ratio:2/3;object-fit:cover}.book>div{padding:14px}
.book small,.book p{color:#d6a45a;font:700 9px Arial;letter-spacing:.08em}.book h3{font-size:24px;margin:5px 0}

.about{display:grid;grid-template-columns:.62fr 1.35fr .7fr;gap:34px;align-items:center}
.portrait-frame,.truth-box{
  position:relative;border:2px solid #b97a32;outline:1px solid #6b421e;outline-offset:-8px;
  box-shadow:inset 0 0 0 4px #8c5a261c,0 0 25px #000
}
.portrait-frame:before,.portrait-frame:after,.truth-box:before,.truth-box:after{
  position:absolute;color:var(--gold-hi);font-size:34px;z-index:2;text-shadow:0 0 8px #9b551f66
}
.portrait-frame:before,.truth-box:before{content:"❦";top:-19px;left:-7px}
.portrait-frame:after,.truth-box:after{content:"❦";bottom:-19px;right:-7px;transform:rotate(180deg)}
.portrait-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;object-position:48% 38%}
.bio .category{text-align:left;font-size:clamp(56px,5vw,78px)}
.bio p:not(.category){color:#ccb9a7;line-height:1.67;font-size:15px}
.truth-box{padding:35px 24px;background:linear-gradient(145deg,#15110e,#211008);text-align:center}
.truth-box p{color:#e2b66d;font-family:"Romanesco",cursive;font-size:34px;line-height:1.25;margin:0}

.support-wrap{padding:28px 5vw 48px}
.support-box{
  position:relative;border:2px solid #c18a3f;outline:1px solid #68411f;outline-offset:-9px;
  padding:22px 30px;background:linear-gradient(100deg,#17110d,#0e0c0a);
  display:grid;grid-template-columns:1.15fr .9fr .9fr;gap:22px;align-items:center;
  box-shadow:inset 0 0 20px rgba(170,95,34,.09)
}
.support-box:before,.support-box:after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:min(520px,55%);height:18px;background:url("assets/gold-divider.png") center/contain no-repeat
}
.support-box:before{top:-11px}.support-box:after{bottom:-11px;transform:translateX(-50%) rotate(180deg)}
.corner{position:absolute;color:var(--gold-hi);font-size:31px;text-shadow:0 0 7px #9a551f80}
.tl{left:-9px;top:-15px}.tr{right:-9px;top:-15px;transform:rotate(90deg)}
.bl{left:-9px;bottom:-15px;transform:rotate(-90deg)}.br{right:-9px;bottom:-15px;transform:rotate(180deg)}
.support-copy h2{
  font-family:"Romanesco",cursive;color:var(--gold-hi);font-size:42px;font-weight:400;line-height:.9;margin:0 0 10px
}
.support-copy p{margin:0;line-height:1.5}.support-buttons{display:flex;flex-direction:column;gap:10px}
.support{padding:14px;text-align:center;color:#fff;text-decoration:none;font:700 10px Arial;letter-spacing:.05em}
.cash{background:#138426}.paypal{background:#1d579d}
.social{text-align:center}.social h3{font-family:"Romanesco",cursive;color:#e7bb70;font-size:38px;font-weight:400;margin:0 0 8px}
.social div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.social a{color:#d9c6b4;text-decoration:none;border:1px solid #694728;padding:8px 10px;font:700 9px Arial;text-transform:uppercase}

footer{border-top:1px solid #352218;padding:22px 5vw;display:flex;justify-content:space-between;color:#9f8b78;font:10px Arial;letter-spacing:.08em}
footer b{color:var(--ember)}

@media(max-width:1000px){
  .series-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:.8fr 1.2fr}.truth-box{grid-column:1/-1}
  .support-box{grid-template-columns:1fr 1fr}.social{grid-column:1/-1}
}
@media(max-width:760px){
  .menu-button{display:block}.site-header nav{display:none;position:absolute;top:66px;left:0;right:0;background:#080706;padding:20px;flex-direction:column}
  .site-header nav.open{display:flex}.hero{grid-template-columns:1fr;text-align:center}.actions{justify-content:center}
  .memoir-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr}.portrait-frame{max-width:420px;margin:auto}
  .support-box{grid-template-columns:1fr;text-align:center}.series-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:70px}
}
@media(max-width:520px){
  .memoir-card{grid-template-columns:1fr}.series-grid{grid-template-columns:1fr}.book{max-width:390px;margin:auto}.support-box{padding:24px 18px}
  .category{font-size:58px}.saga{font-size:21px}
}

/* =========================
   V7 requested refinements
   ========================= */

/* 2. Author image: 50% smaller than V6. */
.about{
  grid-template-columns:minmax(150px,.31fr) 1.5fr .7fr;
}
.portrait-frame{
  width:50%;
  min-width:150px;
  justify-self:center;
}

/* 3. Sticky header branding/navigation: 50% larger text. */
.brand{
  font-size:16.5px;
}
nav a{
  font-size:15px;
}

/* 4. Quote: more breathing room between each sentence and a substantially
   more ornate framed-box treatment, with NO wolf image. */
.truth-box{
  padding:52px 34px;
  border:3px double #c18a3f;
  outline:1px solid #765027;
  outline-offset:-10px;
  background:
    linear-gradient(135deg,rgba(213,154,70,.10),transparent 20%),
    linear-gradient(315deg,rgba(213,154,70,.08),transparent 20%),
    linear-gradient(145deg,#15110e,#0b0908);
  box-shadow:
    inset 0 0 0 5px rgba(126,77,30,.18),
    inset 0 0 28px rgba(187,117,42,.10),
    0 0 25px #000;
}
.truth-box p{
  display:flex;
  flex-direction:column;
  gap:1.15em;
  line-height:1.35;
}
.truth-box p br{
  display:none;
}
.truth-box p::first-line{
  line-height:1.35;
}
/* Extra ornamental corner marks, kept purely decorative. */
.truth-box:before,
.truth-box:after{
  font-size:44px;
}
.truth-box .ornament{
  display:none;
}

/* Responsive corrections for the V7 sizing. */
@media(max-width:1000px){
  .series-grid{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:minmax(130px,.35fr) 1.4fr}
  .portrait-frame{width:50%;min-width:130px}
}
@media(max-width:760px){
  .brand{font-size:14px}
  .site-header nav a{font-size:13px}
  .series-grid{grid-template-columns:1fr}
  .book{grid-template-columns:42% 58%;max-width:590px}
  .about{grid-template-columns:1fr}
  .portrait-frame{width:50%;min-width:0;max-width:220px}
}
@media(max-width:520px){
  .book{grid-template-columns:1fr;max-width:390px}
  .book>img{aspect-ratio:2/3}
}




/* =========================
   V7.3 correction
   ========================= */

/* Keep the Fantasy Fiction Series cards four-across on desktop. */
.series-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  max-width:none;
  margin:0;
}

/* Keep existing card structure. */
.book{
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* Show the FULL cover image, reduced in overall size with no crop/distortion.
   The displayed dimensions are intentionally closer to the memoir cover images. */
.book>img{
  width:auto;
  max-width:58%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  margin:18px auto 8px;
}

/* Preserve the existing content presentation below each cover. */
.book>div{
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.book h3{
  font-size:24px;
  margin:5px 0;
}

.book .btn{
  margin-top:auto;
}

/* Responsive behavior preserves full-cover visibility. */
@media(max-width:1000px){
  .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book>img{max-width:46%}
}

@media(max-width:760px){
  .series-grid{grid-template-columns:1fr}
  .book{max-width:390px;margin:auto}
  .book>img{max-width:62%}
}


/* =========================================================
   VERSION 8 — requested final presentation refinements
   ========================================================= */

/* Header: brand on left, tagline centered, navigation on right. */
.site-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:22px;
  height:76px;
}
.site-header .brand{
  justify-self:start;
}
.site-header .header-tagline{
  justify-self:center;
  color:#d9a14a;
  font:700 15px/1.2 Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 0 8px rgba(190,103,36,.22);
}
.site-header nav{
  justify-self:end;
}
.site-header .menu-button{
  justify-self:end;
}

/* Quote box: ~20% larger than V7.3 and visibly more ornate. */
.truth-box{
  position:relative;
  overflow:visible;
  padding:64px 42px;
  border:2px solid #d0a04d;
  outline:1px solid #805224;
  outline-offset:-8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(190,122,43,.09), transparent 30%),
    linear-gradient(145deg,#15110e,#0b0908 72%);
  box-shadow:
    inset 0 0 0 4px rgba(214,162,78,.07),
    inset 0 0 28px rgba(170,99,35,.10),
    0 18px 30px rgba(0,0,0,.30);
}

/* Double-inner border effect */
.truth-box::selection{
  background:#7d4b21;
  color:#fff;
}

/* Replace the old minimal corners with larger ornate corner flourishes. */
.truth-box:before{
  content:"❦";
  position:absolute;
  top:-24px;
  left:-14px;
  color:#f0c66d;
  font-size:52px;
  line-height:1;
  text-shadow:0 0 9px rgba(180,99,30,.42);
  transform:rotate(-8deg);
}
.truth-box:after{
  content:"❦";
  position:absolute;
  bottom:-24px;
  right:-14px;
  color:#f0c66d;
  font-size:52px;
  line-height:1;
  text-shadow:0 0 9px rgba(180,99,30,.42);
  transform:rotate(172deg);
}

/* Additional ornate top and bottom filigree using the user's gold divider asset. */
.truth-box{
  background-image:
    url("assets/gold-divider.png"),
    url("assets/gold-divider.png"),
    radial-gradient(circle at 50% 0%, rgba(190,122,43,.09), transparent 30%),
    linear-gradient(145deg,#15110e,#0b0908 72%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-position:center 12px, center calc(100% - 12px), center top, center;
  background-size:58% auto,58% auto,auto,auto;
}

/* Quote text: about 20% larger than V7.3; sentences remain widely spaced. */
.truth-box p{
  font-family:"Romanesco",cursive;
  font-size:41px;
  line-height:1.25;
  gap:1.25em;
  color:#e8b968;
  text-align:center;
  margin:0;
  padding:34px 6px;
}
.truth-box p span{
  display:block;
}

/* Responsive header handling */
@media(max-width:1100px){
  .site-header{
    grid-template-columns:auto 1fr auto;
  }
  .site-header .header-tagline{
    font-size:12px;
    letter-spacing:.12em;
  }
}
@media(max-width:880px){
  .site-header{
    grid-template-columns:1fr auto;
  }
  .site-header .header-tagline{
    display:none;
  }
}


/* =========================================================
   VERSION 8.1 — exact header-gap centering + ornate quote frame
   ========================================================= */

.site-header{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:28px !important;
  height:76px !important;
}

.site-header .brand{
  grid-column:1;
  justify-self:start !important;
  white-space:nowrap;
}

.site-header .header-tagline{
  grid-column:2;
  justify-self:stretch !important;
  text-align:center !important;
  align-self:center !important;
  color:#d9a14a;
  font:700 15px/1.2 Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:0 18px;
}

.site-header nav{
  grid-column:3;
  justify-self:end !important;
  white-space:nowrap;
}

/* On smaller screens, hide tagline before it collides with nav. */
@media(max-width:1050px){
  .site-header .header-tagline{
    font-size:12px;
    letter-spacing:.11em;
    padding:0 10px;
  }
}
@media(max-width:880px){
  .site-header{
    grid-template-columns:1fr auto !important;
  }
  .site-header .header-tagline{
    display:none !important;
  }
}

/* ------------------------------------------------------------------
   QUOTE BOX: real ornate frame, not a simple bordered rectangle.
   ------------------------------------------------------------------ */

.truth-box{
  position:relative;
  overflow:visible;
  padding:70px 46px;
  border:1px solid #8e5b27 !important;
  outline:none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(211,154,69,.08), transparent 30%),
    linear-gradient(145deg,#15110e,#0b0908 72%) !important;
  box-shadow:
    inset 0 0 0 3px rgba(214,162,78,.08),
    inset 0 0 0 10px rgba(101,61,24,.10),
    inset 0 0 30px rgba(170,99,35,.10),
    0 18px 30px rgba(0,0,0,.30) !important;
}

/* inner gold rectangle */
.truth-box .frame-inner{
  position:absolute;
  inset:10px;
  border:1px solid #d5a348;
  pointer-events:none;
  z-index:2;
}

/* top and bottom ornate flourishes */
.truth-box .frame-top,
.truth-box .frame-bottom{
  position:absolute;
  left:50%;
  width:72%;
  height:46px;
  transform:translateX(-50%);
  background:url("assets/gold-divider.png") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(213,153,65,.30));
  pointer-events:none;
  z-index:3;
}
.truth-box .frame-top{ top:-23px; }
.truth-box .frame-bottom{
  bottom:-23px;
  transform:translateX(-50%) rotate(180deg);
}

/* side ornaments */
.truth-box .frame-left,
.truth-box .frame-right{
  position:absolute;
  top:50%;
  width:46px;
  height:54%;
  transform-origin:center;
  background:url("assets/gold-divider.png") center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(213,153,65,.25));
  pointer-events:none;
  z-index:3;
}
.truth-box .frame-left{
  left:-23px;
  transform:translateY(-50%) rotate(-90deg);
}
.truth-box .frame-right{
  right:-23px;
  transform:translateY(-50%) rotate(90deg);
}

/* large ornamental corners */
.truth-box .corner{
  position:absolute;
  width:58px;
  height:58px;
  color:#efc46d;
  font-size:54px;
  line-height:1;
  z-index:4;
  text-shadow:0 0 7px rgba(183,103,35,.45);
  pointer-events:none;
}
.truth-box .corner.tl{left:-17px;top:-20px;transform:rotate(-35deg)}
.truth-box .corner.tr{right:-17px;top:-20px;transform:rotate(55deg)}
.truth-box .corner.bl{left:-17px;bottom:-20px;transform:rotate(-125deg)}
.truth-box .corner.br{right:-17px;bottom:-20px;transform:rotate(145deg)}

/* disable the old pseudo-corner treatment */
.truth-box:before,
.truth-box:after{
  content:none !important;
}

/* quote text remains enlarged and widely spaced */
.truth-box p{
  position:relative;
  z-index:5;
  font-family:"Romanesco",cursive;
  font-size:41px !important;
  line-height:1.25;
  gap:1.25em;
  color:#e8b968;
  text-align:center;
  margin:0;
  padding:18px 8px;
}