/*
Theme Name: R.O. Miller
Theme URI: https://romillerofficial.com
Author: Built for R.O. Miller
Description: A custom theme for the author R.O. Miller. Literary gothic, historical horror and dark satire. Palette and structure follow the Bone Saw and Dicky Weed publishing packages. No page builder, no bloat, correct heading structure and schema by construction.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: romiller
*/

/* Palette from the Bone Saw publishing package, section 30:
   dirty cream, iron gray, black ebony, mahogany, tarnished brass,
   restrained dried red-brown. No generic black/red splatter. */
:root {
  --ebony:      #0C0B0A;
  --ebony-2:    #131110;
  --ebony-3:    #1B1816;
  --mahogany:   #33201C;
  --cream:      #DED5C1;
  --cream-dim:  #A0957F;
  --cream-low:  #6B6355;
  --iron:       #6E7276;
  --brass:      #A88A52;
  --brass-dim:  #7A6437;
  --oxide:      #8A3527;
  --oxide-lit:  #BC5844;
  --rule:       #262220;
  --rule-lit:   #39332E;

  --font-display: "Bodoni Moda", Didot, Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ebony);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--oxide); color: #fff; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ebony-2); color: var(--cream);
  padding: 12px 18px; font-family: var(--font-mono); font-size: 12px;
  text-decoration: none; border: 1px solid var(--brass);
}
.skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.shell { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.shell--narrow { max-width: 760px; }

.label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass); margin: 0;
}
.label--oxide { color: var(--oxide-lit); }
.label--dim   { color: var(--cream-low); }
.display { font-family: var(--font-display); font-weight: 400; text-wrap: balance; }

/* ---------- topbar ---------- */

.topbar { border-bottom: 1px solid var(--rule); }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 17px; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-display); font-size: 19px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--cream); white-space: nowrap;
}
.wordmark i { color: var(--oxide-lit); font-style: normal; }
.wordmark img { max-height: 44px; width: auto; }

.main-nav ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cream-dim); text-decoration: none;
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a { color: var(--cream); border-bottom-color: var(--oxide); }

/* ---------- author masthead ---------- */

.masthead { padding-block: clamp(40px,7vw,66px) clamp(32px,5vw,46px); }
.masthead h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px,10vw,84px); line-height: .96;
  letter-spacing: -.02em; margin: 0 0 16px;
}
.role {
  font-family: var(--font-mono); font-size: clamp(10.5px,1.7vw,12.5px);
  letter-spacing: .26em; text-transform: uppercase; color: var(--brass); margin: 0 0 22px;
}
.hairline {
  height: 1px; margin-bottom: 20px;
  background: linear-gradient(90deg, var(--oxide), var(--rule) 50%, transparent);
}
.genres { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.genres li {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream-dim);
}
.genres li:last-child { color: var(--oxide-lit); }

/* ---------- featured book ---------- */

.featured {
  border-block: 1px solid var(--rule);
  background:
    radial-gradient(90% 130% at 18% 0%, rgba(138,53,39,.17), transparent 58%),
    linear-gradient(180deg, var(--ebony-2), var(--ebony));
  padding-block: clamp(40px,7vw,72px);
}
.featured + .featured { border-top: 0; }
.featured-grid {
  display: grid; grid-template-columns: minmax(0,330px) minmax(0,1fr);
  gap: clamp(30px,5vw,62px); align-items: center;
}
.featured--alt {
  background:
    radial-gradient(90% 130% at 82% 0%, rgba(26,74,48,.22), transparent 58%),
    linear-gradient(180deg, var(--ebony-2), var(--ebony));
}
.featured--alt .featured-grid { grid-template-columns: minmax(0,1fr) minmax(0,330px); }
.featured--alt .cover-frame { order: 2; }
.featured--alt .featured-text { order: 1; }

.cover-frame {
  position: relative; border: 1px solid var(--rule-lit); background: var(--ebony-2);
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 2px 0 rgba(168,138,82,.10);
}
.cover-frame img { width: 100%; }

.avail {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cream-dim);
  border: 1px solid var(--rule-lit); padding: 6px 12px; margin: 0 0 22px;
}
.avail::before { content: ""; width: 6px; height: 6px; background: var(--brass); border-radius: 50%; }
.avail--live { color: var(--cream); border-color: var(--brass-dim); }
.avail--live::before { background: #6E9B62; }

.featured h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px,7.6vw,68px); line-height: .98;
  letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 10px;
}
.subtitle {
  font-style: italic; color: var(--cream-dim);
  font-size: clamp(15px,2.1vw,17px); margin: 0 0 26px; max-width: 46ch;
}
.promise {
  font-family: var(--font-mono); font-size: clamp(11px,1.9vw,13px);
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.7;
  color: var(--brass); margin: 0 0 22px; max-width: 30ch;
}
.hook { margin: 0 0 30px; max-width: 48ch; color: var(--cream); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: 14px 28px; border: 1px solid var(--oxide);
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--oxide); color: #F4EDE1; }
.btn--primary:hover { background: #A03E2E; border-color: #A03E2E; }
.btn--ghost { color: var(--cream); border-color: var(--rule-lit); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

/* ---------- pull quote ---------- */

.pullquote { padding-block: clamp(50px,8vw,86px); text-align: center; border-bottom: 1px solid var(--rule); }
.pullquote blockquote {
  margin: 0 auto; max-width: 18ch; font-family: var(--font-display);
  font-weight: 400; font-size: clamp(26px,5.4vw,48px); line-height: 1.22; text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: 22px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream-low); font-style: normal;
}

/* ---------- sections ---------- */

.section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px,4.6vw,38px); margin: 0; line-height: 1.1;
}
.section-head .hr { flex: 1; height: 1px; background: var(--rule-lit); min-width: 30px; }

.book-detail { padding-block: clamp(50px,8vw,84px); }
.detail-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,300px);
  gap: clamp(28px,5vw,56px); align-items: start;
}
.detail-body p { margin: 0 0 16px; max-width: 58ch; }
.detail-body .lede { font-size: 19px; color: var(--cream); }
.detail-body em { font-style: italic; color: var(--cream); }

.facts { border: 1px solid var(--rule); background: var(--ebony-2); }
.facts dl { margin: 0; }
.facts .row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--rule);
}
.facts .row:last-child { border-bottom: 0; }
.facts dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cream-low); margin: 0; white-space: nowrap;
}
.facts dd { margin: 0; font-size: 14px; text-align: right; color: var(--cream-dim); }

details.advisory { margin-top: 22px; border: 1px solid var(--rule); background: var(--ebony-2); }
details.advisory summary {
  cursor: pointer; padding: 13px 18px; list-style: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oxide-lit);
}
details.advisory summary::-webkit-details-marker { display: none; }
details.advisory summary::after { content: " +"; }
details.advisory[open] summary::after { content: " \2212"; }
details.advisory .advisory-body {
  padding: 0 18px 16px; font-size: 14.5px; line-height: 1.65;
  color: var(--cream-dim); max-width: 62ch;
}
details.advisory .advisory-body p { margin: 0; }

/* ---------- works grid / development ---------- */

.tile-section { padding-block: clamp(50px,8vw,84px); border-top: 1px solid var(--rule); background: var(--ebony-2); }
.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.tile {
  background: var(--ebony-2); padding: 28px 24px 30px;
  display: flex; flex-direction: column; gap: 10px; transition: background .2s;
}
.tile:hover { background: var(--ebony-3); }
.tile h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.16; margin: 0; }
.tile h3 a { text-decoration: none; }
.tile h3 a:hover { color: var(--brass); }
.tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cream-dim); }
.tile .status {
  margin-top: auto; padding-top: 14px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-low);
}

.works-list { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.work-row {
  background: var(--ebony); display: grid;
  grid-template-columns: minmax(0,140px) minmax(0,1fr); gap: 26px;
  padding: 26px; align-items: start;
}
.work-row h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 8px 0 10px; }
.work-row h3 a { text-decoration: none; }
.work-row h3 a:hover { color: var(--brass); }
.work-row p { margin: 0 0 14px; max-width: 54ch; color: var(--cream-dim); }

/* ---------- reader list ---------- */

.list-band {
  padding-block: clamp(52px,8vw,90px); border-top: 1px solid var(--rule);
  background: radial-gradient(90% 120% at 50% 0%, rgba(51,32,28,.6), transparent 62%), var(--ebony);
}
.list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: clamp(30px,5vw,58px); align-items: start; }
.list-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px,5vw,42px); line-height: 1.08; margin: 12px 0 16px; }
.list-band .intro { color: var(--cream-dim); margin: 0 0 22px; max-width: 46ch; }
.incentive {
  border-left: 2px solid var(--brass); padding: 4px 0 4px 16px;
  margin: 0 0 24px; font-style: italic; color: var(--cream); max-width: 44ch;
}
.receive { list-style: none; margin: 0; padding: 0; }
.receive li {
  padding: 9px 0 9px 20px; border-bottom: 1px solid var(--rule);
  position: relative; font-size: 15.5px; color: var(--cream-dim);
}
.receive li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 1px; background: var(--oxide); }

/* MailerLite embed lives inside .form-slot; these keep it on-brand */
.form-slot input[type="email"], .form-slot input[type="text"] {
  width: 100%; background: var(--ebony-2); border: 1px solid var(--rule-lit);
  color: var(--cream); font-family: var(--font-body); font-size: 15px; padding: 13px 14px;
}
.form-slot input::placeholder { color: var(--cream-low); }
.form-slot input:focus { border-color: var(--brass); outline: none; }
.form-slot button, .form-slot input[type="submit"] {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #F4EDE1; background: var(--oxide);
  border: 1px solid var(--oxide); padding: 13px 28px; cursor: pointer; transition: background .2s;
}
.form-slot button:hover, .form-slot input[type="submit"]:hover { background: #A03E2E; }
.fineprint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--cream-low); margin: 14px 0 0; }

/* ---------- journal ---------- */

.entry-list { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.entry-card { background: var(--ebony); padding: 30px 0; }
.entry-card .meta {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream-low); margin: 0 0 10px;
}
.entry-card h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(25px,4vw,34px); line-height: 1.12; margin: 0 0 12px; }
.entry-card h2 a { text-decoration: none; }
.entry-card h2 a:hover { color: var(--brass); }
.entry-card p { margin: 0 0 16px; max-width: 62ch; color: var(--cream-dim); }

.post-header { padding-block: clamp(40px,7vw,70px) 30px; border-bottom: 1px solid var(--rule); }
.post-header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px,6.4vw,58px); line-height: 1.04; margin: 14px 0 0; letter-spacing: -.01em; }

.post-body { padding-block: 38px clamp(50px,8vw,80px); }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote { max-width: 64ch; }
.post-body p { margin: 0 0 20px; }
.post-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px,4vw,32px); line-height: 1.16; margin: 44px 0 14px; }
.post-body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px,3.2vw,25px); margin: 34px 0 12px; }
.post-body a { color: var(--brass); text-underline-offset: 3px; }
.post-body blockquote {
  margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--oxide);
  font-style: italic; color: var(--cream-dim);
}
.post-body img, .post-body figure { margin: 28px 0; }
.post-body figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--cream-low); margin-top: 8px; letter-spacing: .06em; }
.post-body code { font-family: var(--font-mono); font-size: .9em; background: var(--ebony-2); border: 1px solid var(--rule); padding: 1px 5px; }
.post-body pre { background: var(--ebony-2); border: 1px solid var(--rule); padding: 16px; overflow-x: auto; }
.post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body th, .post-body td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; }

.pagination { display: flex; gap: 12px; flex-wrap: wrap; padding-block: 36px; }
.pagination .page-numbers {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; padding: 9px 15px; border: 1px solid var(--rule-lit);
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { border-color: var(--brass); color: var(--brass); }

/* ---------- generic page ---------- */

.page-header { padding-block: clamp(40px,7vw,70px) 26px; border-bottom: 1px solid var(--rule); }
.page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px,7vw,64px); line-height: 1.02; margin: 0; letter-spacing: -.015em; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--rule); padding-block: 44px 52px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 32px; }
.foot-grid h2 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px;
}
.foot-grid p, .foot-grid li { font-size: 14.5px; color: var(--cream-dim); margin: 0 0 6px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid a { text-decoration: none; border-bottom: 1px solid var(--rule-lit); padding-bottom: 1px; }
.foot-grid a:hover { border-bottom-color: var(--oxide); color: var(--cream); }
.colophon {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--cream-low); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- 404 ---------- */

.notfound { padding-block: clamp(60px,10vw,110px); text-align: center; }
.notfound h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px,8vw,72px); margin: 0 0 18px; line-height: 1.04; }
.notfound p { color: var(--cream-dim); max-width: 48ch; margin: 0 auto 28px; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .featured-grid, .featured--alt .featured-grid { grid-template-columns: 1fr; }
  .cover-frame { max-width: 270px; }
  /* mobile priority from the packages: cover, then headline and buy path */
  .featured--alt .cover-frame { order: 1; }
  .featured--alt .featured-text { order: 2; }
  .detail-grid { grid-template-columns: 1fr; }
  .work-row { grid-template-columns: 1fr; }
  .work-row .cover-frame { max-width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}