/*
Theme Name: Libretto MR
Theme URI: https://memoriterogue.dannycarlton.net/
Description: Child theme of Libretto, colour-matched to the Memorite Rogue cover — deep navy ground with copper accents. Includes styling for the FICTBASE serialised-fiction reader.
Author: Danny Carlton
Version: 1.0.0
Template: libretto
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: libretto-mr
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
0.1 Palette
1.0 Page ground
2.0 Typography remap
3.0 Links
4.0 Header / masthead
5.0 Footer and widgets
6.0 Elements, forms, comments
7.0 FICTBASE reader
--------------------------------------------------------------*/

/*--------------------------------------------------------------
0.1 Palette

Mapped from the Memorite Rogue cover. Parent theme originals shown
alongside so the substitutions are traceable.

  --mr-deep         #05050F   was off-white   #faf9f5
  --mr-navy         #0B0B4A   was cream       #eae9e6
  --mr-navy-soft    #16165C   was light grey  #d9d6d0
  --mr-copper       #A97B5C   was darker grey #787065
  --mr-copper-light #D6B098   was medium grey #a09a92
  --mr-text         #F2F0EC   was charcoal    #363431
--------------------------------------------------------------*/

:root {
  --mr-deep:         #05050F;
  --mr-ground-top:   #08083A;
  --mr-ground-mid:   #0B0B4A;
  --mr-ground-low:   #15157A;
  --mr-navy:         #0B0B4A;
  --mr-navy-soft:    #16165C;
  --mr-copper:       #A97B5C;
  --mr-copper-light: #D6B098;
  --mr-text:         #F2F0EC;
  --mr-rule:         rgba(214, 176, 152, 0.28);
  --mr-display:      "Instrument Serif", "Playfair Display", Didot, Georgia, serif;
}

/*--------------------------------------------------------------
1.0 Page ground

Flat navy behind the reading column on purpose. The cover's copper
wedge lives in the masthead image, not under the body text, so
contrast stays constant for the length of a novel.
--------------------------------------------------------------*/

/* Specificity note: FICTBASE emits `body{background:#111113}` as an inline
   style during shortcode rendering, which happens after wp_head has printed —
   so it lands later in the cascade than this file. `html body` (0,0,2) wins
   over `body` (0,0,1) no matter what order they load in. */
html body {
  background: var(--mr-ground-mid);
  background: linear-gradient(165deg, var(--mr-ground-top) 0%, var(--mr-ground-mid) 45%, var(--mr-ground-low) 100%);
  background-attachment: fixed;
  color: var(--mr-text);
}

/* Libretto sets backgrounds on #masthead, #primary and #content by ID
   (specificity 0,1,0), which outranks class selectors. Match with IDs or the
   parent's cream shows through on every non-front page. */
#page,
#masthead,
#primary,
#content,
.site,
.site-content,
.content-area,
.hentry,
.entry-content,
.page-content {
  background: transparent;
}

.site-header,
.title-block {
  background: transparent;
}

/*--------------------------------------------------------------
2.0 Typography remap

Selectors mirror the parent's section 2.0 so these override cleanly.
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
  color: var(--mr-text);
}

h1,
h3,
h5 {
  color: var(--mr-copper-light);
}

h2,
h4,
h6 {
  color: var(--mr-copper);
}

h2 {
  border-bottom-color: var(--mr-rule);
}

.entry-title,
.entry-title a {
  color: var(--mr-text);
}

.entry-meta,
.entry-footer,
.posted-on,
.byline,
.comment-metadata {
  color: var(--mr-copper-light);
}

blockquote {
  border-color: var(--mr-copper);
  color: var(--mr-copper-light);
}

/*--------------------------------------------------------------
3.0 Links

Parent used dark red #712012 / #932817. Copper replaces both.
--------------------------------------------------------------*/

a {
  color: var(--mr-copper-light);
}

a:visited {
  color: var(--mr-copper-light);
}

a:hover,
a:focus,
a:active {
  color: #FFFFFF;
}

.entry-content a {
  border-bottom-color: var(--mr-rule);
}

/*--------------------------------------------------------------
4.0 Header / masthead

Libretto overlays the post title on the featured image. Front cover
art is dark on the left and light on the right, so a scrim keeps the
overlaid title legible wherever it falls.
--------------------------------------------------------------*/

.site-header,
.site-branding {
  background: transparent;
}

.site-title,
.site-title a {
  color: var(--mr-text);
  font-family: "Playfair Display SC", "Playfair Display", Georgia, serif;
}

.site-description {
  color: var(--mr-copper-light);
}

.site-header.has-header-image:after,
.entry-header.has-post-thumbnail:after {
  background: linear-gradient(180deg, rgba(5,5,15,0.15) 0%, rgba(5,5,15,0.65) 100%);
}

/* Primary navigation */
.main-navigation,
.main-navigation ul ul {
  background: var(--mr-deep);
}

.main-navigation a {
  color: var(--mr-text);
}

.main-navigation a:hover {
  color: var(--mr-copper-light);
}

/*--------------------------------------------------------------
5.0 Footer and widgets
--------------------------------------------------------------*/

.site-footer,
.widget-area,
.widget {
  background: transparent;
  border-top-color: var(--mr-rule);
  color: var(--mr-text);
}

.widget-title {
  color: var(--mr-copper);
}

.site-info {
  color: var(--mr-copper-light);
}

/*--------------------------------------------------------------
6.0 Elements, forms, comments
--------------------------------------------------------------*/

hr {
  background-color: var(--mr-rule);
}

table,
th,
td {
  border-color: var(--mr-rule);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  background: var(--mr-navy-soft);
  border: 1px solid var(--mr-rule);
  color: var(--mr-text);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background: var(--mr-copper);
  border-color: var(--mr-copper);
  color: var(--mr-deep);
}

button:hover,
input[type="submit"]:hover {
  background: var(--mr-copper-light);
  border-color: var(--mr-copper-light);
  color: var(--mr-deep);
}

.comment-body,
.comments-area {
  border-color: var(--mr-rule);
  color: var(--mr-text);
}

.comment-author .fn,
.comment-reply-link {
  color: var(--mr-copper-light);
}

/*--------------------------------------------------------------
7.0 FICTBASE reader

Class names taken from the plugin's own markup in
public/views/chapter-single.php and public/css/reader.css.

Set FICTBASE > Settings > Theme to "Dark" so the plugin stops
emitting its charcoal #111113 body rule; these rules then carry
the navy through the reader.
--------------------------------------------------------------*/

.fb-reader,
.fb-reader-content {
  color: var(--mr-text);
}

.fb-reader-title {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--mr-text);
}

.fb-reader-meta,
.fb-reader-nav__chapter,
.fb-reader-nav__back {
  color: var(--mr-copper-light);
}

.fb-reader-nav {
  border-bottom: 1px solid var(--mr-rule);
}

#fb-progress-bar {
  background: var(--mr-copper);
}

.fb-btn {
  color: var(--mr-copper-light);
  border-color: var(--mr-rule);
}

.fb-btn--primary {
  background: var(--mr-copper);
  border-color: var(--mr-copper);
  color: var(--mr-deep);
}

.fb-btn--primary:hover {
  background: var(--mr-copper-light);
  border-color: var(--mr-copper-light);
  color: var(--mr-deep);
}

.fb-btn--outline {
  background: transparent;
  border-color: var(--mr-copper);
  color: var(--mr-copper-light);
}

.fb-chapnav__toc,
.fb-chapnav__end {
  color: var(--mr-copper-light);
}

.fb-reader-footer,
.fb-author-bio {
  border-top: 1px solid var(--mr-rule);
}

.fb-author-bio__name {
  color: var(--mr-copper);
}

.fb-premium-gate {
  background: var(--mr-navy-soft);
  border: 1px solid var(--mr-rule);
  color: var(--mr-text);
}

.fb-premium-teaser {
  color: var(--mr-text);
}

/*--------------------------------------------------------------
8.0 Chrome cleanup

Libretto's .nav-bar (header.php) and #colophon / #footer-sidebar
(footer.php, sidebar.php) all carry the parent's cream. Recoloured
to the navy ground; the header search form is removed since the
site is a single serialised novel, not a searchable archive.
--------------------------------------------------------------*/

.nav-bar {
  background: var(--mr-ground-top);
  border-bottom: 1px solid var(--mr-rule);
}

.nav-bar .site-title,
.nav-bar .site-title a,
.nav-bar .mobile-site-title {
  color: var(--mr-text);
}

.nav-bar .search-form,
.nav-bar .search-submit,
#search-icon {
  display: none;
}

.menu-wrapper,
.navigation-main,
.navigation-main ul {
  background: transparent;
}

#menu-icon span {
  background: var(--mr-copper-light);
}

#footer-sidebar,
#colophon,
.site-footer {
  background: transparent;
  border-top: 1px solid var(--mr-rule);
  color: var(--mr-text);
}

#footer-sidebar a,
#colophon a {
  color: var(--mr-copper-light);
}

/*--------------------------------------------------------------
9.0 Latest-chapter call to action

Output of the [mr_latest_chapter] shortcode registered in
functions.php.
--------------------------------------------------------------*/

.mr-latest {
  margin: 2.5em 0;
  text-align: center;
}

.mr-latest__link {
  background: var(--mr-copper);
  border: 1px solid var(--mr-copper);
  color: var(--mr-deep);
  display: inline-block;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  padding: 0.9em 2em;
  text-transform: uppercase;
}

.mr-latest__link:hover,
.mr-latest__link:focus {
  background: var(--mr-copper-light);
  border-color: var(--mr-copper-light);
  color: var(--mr-deep);
}

/*--------------------------------------------------------------
10.0 FICTBASE design tokens

reader.css defines its palette as custom properties on the plugin's
wrapper classes — --fb-accent (indigo #4f46e5), --fb-surface (white),
--fb-text (near-black) and so on. Remapping the tokens recolours the
whole component set at once, instead of chasing individual rules.

Selectors are prefixed with `body ` to outrank reader.css, which is
enqueued during shortcode rendering and therefore prints after this
file.
--------------------------------------------------------------*/

body .fictbase-story-page,
body .fictbase-stories,
body .fictbase-stories-page,
body .fictbase-login-widget,
body .fictbase-bookmarks-page {
  --fb-accent:    #8A5F42;
  --fb-accent-dk: #6E4A33;
  --fb-accent-bg: rgba(138, 95, 66, 0.10);
  --fb-text:      #26231E;
  --fb-text-2:    #3F3B35;
  --fb-muted:     #6B635A;
  --fb-light:     #8C8478;
  --fb-surface:   #FFFFFF;
  --fb-surface-2: #F1EEE6;
  --fb-border:    #DCD5CA;
  --fb-border-2:  #C9C0B2;
  --fb-shadow:    none;
  --fb-shadow-md: none;
  --fb-font-serif: "Libre Baskerville", Baskerville, Georgia, serif;
}

/* The story page is a sheet on the dark ground, same as the reader. */
body .fictbase-story-page,
body .fictbase-stories-page {
  background: #FAF8F2;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
  color: #26231E;
  padding: 3.5rem 4rem 4rem;
}

@media screen and (max-width: 700px) {
  body .fictbase-story-page,
  body .fictbase-stories-page {
    padding: 2.2rem 1.8rem 2.8rem;
  }
}

body .fictbase-story-page .fb-story-title,
body .fictbase-story-page .fb-chapter-section__heading {
  color: #26231E;
}

body .fictbase-story-page .fb-story-description {
  color: #3F3B35;
  font-family: "Libre Baskerville", Baskerville, Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.7;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

body .fictbase-story-page a {
  color: #8A5F42;
}

/*--------------------------------------------------------------
11.0 Display type

Cover face is a high-contrast Didone. Bodoni Moda (loaded in
functions.php) is the closest free match; Playfair Display is the
fallback, since Libretto loads it anyway.
--------------------------------------------------------------*/

.mr-book-title,
.nav-bar .site-title,
.nav-bar .site-title a,
.site-header .site-title,
.site-header .site-title a {
  font-family: var(--mr-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mr-book-title {
  color: #FFFFFF;
  font-size: 7.6rem;
  line-height: 1.02;
  margin: 0 0 0.15em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* Byline — the site tagline, printed under the front page title */
.site-header .site-description {
  color: #F0DCCB;
  font-family: var(--mr-display);
  font-size: 2.6rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
12.0 Remove duplicated titles

The front page was showing "Memorite Rogue" four times: nav bar,
masthead, FICTBASE breadcrumb, and the plugin's hero card. The nav
bar copy is suppressed in header.php; these drop the other two so
only the masthead remains.
--------------------------------------------------------------*/

.home .fb-breadcrumb,
.home .fb-story-title {
  display: none;
}

/* Without the hero title, the stats line needs the top margin back. */
.home .fb-story-stats {
  margin-top: 0;
}

/*--------------------------------------------------------------
13.0 The reading page as a page

Supersedes the reader colours in section 7.0.

Chapters are read on a cream sheet floating on the navy ground —
Libretto's "page on a background" idea, which is also the right call
for long-form: dark-on-light holds up over a novel in a way that
light-on-dark does not.

Set FICTBASE > Settings > Theme to "Light" so reader.css supplies
its light component styling underneath these rules.
--------------------------------------------------------------*/

body #fb-reader {
  --fb-accent:    #8A5F42;   /* darker copper — needs contrast on cream */
  --fb-accent-dk: #6E4A33;
  --fb-accent-bg: rgba(138, 95, 66, 0.10);
  --fb-text:      #26231E;
  --fb-text-2:    #3F3B35;
  --fb-muted:     #6B635A;
  --fb-light:     #8C8478;
  --fb-surface:   #FFFFFF;
  --fb-surface-2: #F1EEE6;
  --fb-border:    #DCD5CA;
  --fb-border-2:  #C9C0B2;

  background: #FAF8F2;
  color: #26231E;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
  margin: 3rem auto 6rem;
  padding: 4.5rem 5rem 5rem;
}

@media screen and (max-width: 700px) {
  body #fb-reader {
    margin: 1.5rem auto 3rem;
    padding: 2.5rem 1.8rem 3rem;
  }
}

body #fb-reader .fb-reader-content,
body #fb-reader .fb-premium-teaser {
  color: #26231E;
  font-family: "Libre Baskerville", Baskerville, "Book Antiqua", Georgia, serif;
}

body #fb-reader .fb-reader-title {
  color: #26231E;
  font-family: var(--mr-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

body #fb-reader .fb-reader-meta,
body #fb-reader .fb-reader-nav__chapter,
body #fb-reader .fb-reader-nav__back,
body #fb-reader .fb-chapnav__toc,
body #fb-reader .fb-chapnav__end,
body #fb-reader .fb-author-bio__name {
  color: #6B635A;
}

body #fb-reader .fb-reader-nav,
body #fb-reader .fb-reader-footer,
body #fb-reader .fb-author-bio {
  border-color: #DCD5CA;
}

body #fb-reader a {
  color: #8A5F42;
}

body #fb-reader a:hover {
  color: #6E4A33;
}

body #fb-reader .fb-btn--primary {
  background: #8A5F42;
  border-color: #8A5F42;
  color: #FAF8F2;
}

body #fb-reader .fb-btn--primary:hover {
  background: #6E4A33;
  border-color: #6E4A33;
  color: #FAF8F2;
}

body #fb-reader .fb-btn--outline {
  background: transparent;
  border-color: #8A5F42;
  color: #8A5F42;
}

/* Progress bar stays copper against the navy chrome above the sheet. */
body #fb-progress-bar {
  background: var(--mr-copper);
}

/*--------------------------------------------------------------
14.0 Chapter page adjustments

FICTBASE adds the body class .fictbase-reader-page on chapter URLs
(see the body_class filter in class-public.php), which gives a clean
handle for reader-only tweaks.
--------------------------------------------------------------*/

/* The masthead reserves height for a header image that isn't set,
   pushing the sheet far down the page. Collapse it while reading. */
.fictbase-reader-page #masthead {
  min-height: 0;
  padding: 2.5rem 0 1.5rem;
}

.fictbase-reader-page #masthead .site-title,
.fictbase-reader-page #masthead .site-title a {
  font-size: 2.8rem;
}

.fictbase-reader-page #masthead .site-description {
  font-size: 1.4rem;
}

/* One trail is enough: the reader's own "← Story / Chapter n" bar already
   does this job, so the plugin breadcrumb is dropped everywhere. */
.fb-breadcrumb {
  display: none;
}

/* The back link and chapter label were colliding with no space between. */
body #fb-reader .fb-reader-nav {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

/*--------------------------------------------------------------
15.0 Reading size and vertical rhythm

Libretto sets `html { font-size: 62.5% }` — the old 10px-root trick.
Every rem value in the plugin's reader.css therefore renders at 62.5%
of its intended size, which is why the chapter text came out tiny.
Sizes below are stated in rem against that 10px root, so 1.9rem = 19px.

The parent also uses very open vertical metrics (line-height 2 on body,
4em top margins on h2) that leave large empty bands once the reader is
sitting in its own sheet. Tightened here.
--------------------------------------------------------------*/

body #fb-reader {
  font-size: 1.9rem;
  margin: 2rem auto 4rem;
  padding: 3.5rem 4rem 4rem;
}

@media screen and (max-width: 700px) {
  body #fb-reader {
    margin: 1rem auto 2.5rem;
    padding: 2.2rem 1.8rem 2.8rem;
  }
}

body #fb-reader .fb-reader-content {
  font-size: 1.9rem;
  line-height: 1.7;
}

body #fb-reader .fb-reader-content p {
  margin-bottom: 1.1em;
}

/* Kill the parent's oversized heading margins inside the chapter text. */
body #fb-reader .fb-reader-content h1,
body #fb-reader .fb-reader-content h2,
body #fb-reader .fb-reader-content h3,
body #fb-reader .fb-reader-content h4,
body #fb-reader .fb-reader-content h5,
body #fb-reader .fb-reader-content h6 {
  border: 0;
  line-height: 1.3;
  margin: 1.4em 0 0.5em;
}

body #fb-reader .fb-reader-title {
  font-size: 3.8rem;
  line-height: 1.1;
  margin: 0 0 0.3em;
}

body #fb-reader .fb-reader-header {
  margin: 0 0 2.2rem;
}

body #fb-reader .fb-reader-meta {
  font-size: 1.35rem;
}

body #fb-reader .fb-reader-nav {
  font-size: 1.45rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
}

body #fb-reader .fb-reader-footer {
  margin-top: 3rem;
  padding-top: 2rem;
}

/* Masthead was reserving a lot of empty height on every page. */
#masthead {
  min-height: 0;
}

.title-block {
  padding: 3.5rem 0 2.5rem;
}

.fictbase-reader-page .title-block {
  padding: 2rem 0 1.2rem;
}

/*--------------------------------------------------------------
16.0 Closing the gap under the masthead

Libretto gives #primary / #content generous top margins intended for
a page with a full-bleed header image. With the masthead collapsed
that leaves a large empty band between the rule and the content.
ID selectors are required to outrank the parent.
--------------------------------------------------------------*/

#masthead {
  margin-bottom: 0;
  padding-bottom: 0;
}

#primary,
#content,
.content-area,
.site-content {
  margin-top: 0;
  padding-top: 0;
}

#primary {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Breathing room between masthead and the sheet, set deliberately
   rather than inherited from the parent's image-header metrics. */
body .fictbase-story-page,
body .fictbase-stories-page {
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}

.home .title-block {
  padding: 4rem 0 2rem;
}

/*--------------------------------------------------------------
17.0 One sheet, not nested cards

reader.css builds the story page out of raised cards — .fb-story-hero
and each .fb-chapter-ol__link carry their own surface, border, radius
and shadow. Stacked inside the paper sheet that reads as pages within
a page. Everything below flattens onto the single sheet; only hairline
rules remain to separate sections.
--------------------------------------------------------------*/

body .fictbase-story-page .fb-story-hero,
body .fictbase-story-page .fb-chapter-section,
body .fictbase-story-page .fb-follow-widget {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

body .fictbase-story-page .fb-story-hero {
  padding-top: 0;
}

/* Chapter rows: no card, just a ruled list. */
body .fictbase-story-page .fb-chapter-ol__item,
body .fictbase-story-page .fb-chapter-ol__link {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

body .fictbase-story-page .fb-chapter-ol__link {
  border: 0;
  border-bottom: 1px solid #E4DED2;
  padding-left: 0;
  padding-right: 0;
}

body .fictbase-story-page .fb-chapter-ol__item:last-child .fb-chapter-ol__link {
  border-bottom: 0;
}

/* The number sat in a filled circle; make it a plain figure. */
body .fictbase-story-page .fb-chapter-ol__num {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #8A5F42;
  font-family: var(--mr-display);
  font-size: 2rem;
}

/* Hidden entirely. The span shows chapter_label when set and falls back to
   chapter_number otherwise — and neither is wanted here. chapter_number is a
   sequential row counter that does not renumber when rows are deleted, so it
   drifts out of step with the book; and the label only repeats the title,
   which already reads "Chapter One, Scene 1". */
body .fictbase-story-page .fb-chapter-ol__num {
  display: none;
}

body .fictbase-story-page .fb-chapter-ol__title {
  color: #26231E;
  font-family: "Libre Baskerville", Baskerville, Georgia, serif;
}

body .fictbase-story-page .fb-chapter-ol__arrow {
  color: #8A5F42;
}

body .fictbase-story-page .fb-load-more {
  background: transparent;
  border: 1px solid #8A5F42;
  border-radius: 0;
  box-shadow: none;
  color: #8A5F42;
}

/* Section label above the chapter list. */
body .fictbase-story-page .fb-chapter-section__heading {
  border-bottom: 1px solid #E4DED2;
  letter-spacing: 0.18em;
  padding-bottom: 0.8rem;
}

/*--------------------------------------------------------------
18.0 Sheet edges

Supersedes the box-shadow declarations in sections 10.0 and 13.0.

A plain black shadow barely registers against the navy, so the lift
comes from four layers doing different jobs:

  1. a tight near-black contact shadow that grounds the bottom edge
  2. a wide ambient shadow — the ground is #0B0B4A, not black, so
     there is still headroom to darken it
  3. a faint warm halo, the light a cream page would bounce
  4. a hairline rim to keep the corners crisp where the radius cuts
--------------------------------------------------------------*/

body .fictbase-story-page,
body .fictbase-stories-page,
body #fb-reader {
  border-radius: 10px;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.45),
    0 20px 55px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(240, 220, 203, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.28);
}

/*--------------------------------------------------------------
19.0 Masthead tightening

Supersedes the spacing in sections 15.0 and 16.0.
--------------------------------------------------------------*/

#masthead {
  padding-top: 0;
}

.title-block {
  margin-bottom: 0;
}

.home .title-block {
  padding: 2.2rem 0 1.2rem;
}

.mr-book-title {
  margin: 0 0 0.08em;
}

.site-header .site-description {
  margin: 0 0 0.4em;
}

body .fictbase-story-page,
body .fictbase-stories-page {
  margin-top: 1.5rem;
}

/*--------------------------------------------------------------
20.0 Jacket hook

The back cover leads with a three-line hook above the blurb. Wrapping
that line in <p class="mr-hook"> inside the story Description field
reproduces the hierarchy: display line first, body copy under it.
--------------------------------------------------------------*/

body .fictbase-story-page .mr-hook {
  border-bottom: 1px solid #E4DED2;
  color: #8A5F42;
  font-family: var(--mr-display);
  font-size: 2.9rem;
  font-style: italic;
  line-height: 1.25;
  margin: 0 0 1.6rem;
  padding-bottom: 1.4rem;
  text-align: center;
}

@media screen and (max-width: 700px) {
  body .fictbase-story-page .mr-hook {
    font-size: 2.2rem;
  }
}

/*--------------------------------------------------------------
21.0 Parent spacing, corrected

Selectors below were identified in the browser inspector. They are
the actual source of the vertical space — earlier sections adjusted
padding on .title-block while the gap was coming from its margin,
and from .libretto-long-form, a wrapper class that appears only in
the parent stylesheet.

Supersedes the .title-block rules in sections 15.0, 16.0 and 19.0.
--------------------------------------------------------------*/

body:not(.libretto-has-header-image) .title-block {
  margin: 0 auto;
  max-width: 680px;
}

.libretto-long-form {
  padding: 0 3em 1em;
}

@media screen and (max-width: 700px) {
  .libretto-long-form {
    padding: 0 1.2em 1em;
  }
}

/* Hero row: no gap while there is no cover image to sit beside. */
body .fictbase-story-page .fb-story-hero {
  align-items: flex-start;
  display: flex;
  gap: 0;
  margin-bottom: 0;
}

/* Restore the gap once a cover image is set on the story, so the
   image and the text are not flush against each other. */
body .fictbase-story-page .fb-story-hero:has(.fb-story-cover) {
  gap: 2.5rem;
}

body .fictbase-story-page .fb-chapter-section {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
22.0 Reader page ground

reader.css is enqueued while the shortcode/template renders, so it
prints in the footer — after this stylesheet. Any rule here with the
same specificity loses on order alone. Everything below is raised a
level (`body ` prefix or html body) so order stops mattering.

Supersedes the .fb-breadcrumb rule in section 14.0.
--------------------------------------------------------------*/

html body.fictbase-reader-page {
  background: var(--mr-ground-mid);
  background: linear-gradient(165deg, var(--mr-ground-top) 0%, var(--mr-ground-mid) 45%, var(--mr-ground-low) 100%);
  background-attachment: fixed;
}

/* Any wrapper between <body> and the sheet must not paint over the
   ground. .libretto-long-form in particular is a parent class that
   carries the cream. */
body .libretto-long-form,
body #page,
body #masthead,
body #primary,
body #content,
body .site,
body .site-content,
body .content-area,
body .site-header,
body .title-block,
body .hentry,
body .entry-content {
  background: transparent;
}

/* Breadcrumb: the reader's own back bar already covers this. */
body .fb-breadcrumb {
  display: none;
}

/* Masthead title sits on navy, so keep it light and small while reading. */
body.fictbase-reader-page #masthead .site-title,
body.fictbase-reader-page #masthead .site-title a {
  color: var(--mr-text);
  font-size: 2.6rem;
}

body.fictbase-reader-page #masthead .site-description {
  color: var(--mr-copper-light);
  font-size: 1.4rem;
}

/*--------------------------------------------------------------
23.0 Book typography

Paragraphs are set the way a novel is: no blank line between them,
first line indented, indent suppressed after a break or a display
block. Paragraph spacing plus indentation is a belt-and-braces
mistake — one or the other, never both.

Supersedes the .fb-reader-content sizing in section 15.0.
--------------------------------------------------------------*/

html body #fb-reader .fb-reader-content {
  font-size: 1.7rem;
  line-height: 1.62;
}

html body #fb-reader .fb-reader-content p {
  /* !important is deliberate here. Two things can outrank a normal rule:
     reader.css printing after this file, and inline style attributes on the
     pasted paragraphs (wp_kses_post permits style="", and Word-derived HTML
     is full of margin declarations). An author !important beats both. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-indent: 1.4em;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* No indent on the opening paragraph, or on the first paragraph after
   any display element — scene break, chapter intro, blockquote. */
html body #fb-reader .fb-reader-content > p:first-child,
html body #fb-reader .fb-reader-content > *:not(p) + p {
  text-indent: 0;
}

/* Same reasoning for any wrapper the paragraphs may be nested inside. */
html body #fb-reader .fb-reader-content div > p,
html body #fb-reader .fb-reader-content br + br {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*--------------------------------------------------------------
24.0 Chapter intro block

Each chapter opens with an intro passage set in a different face from
the body — monospace in chapter one, other faces elsewhere. Wrapping
it in .mr-chapter-intro gives one place to control that; add
.mr-chapter-intro--mono for the transmission style specifically.
--------------------------------------------------------------*/

body #fb-reader .mr-chapter-intro {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 0 0 2.2rem;
}

/* The intro is distinguished by its face, not by a panel. Any background,
   border or padding coming from pasted markup is stripped — it stole width
   and forced the type down to an unreadable size. */
html body #fb-reader .mr-chapter-intro,
html body #fb-reader pre {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

body #fb-reader .mr-chapter-intro p {
  margin: 0 0 0.8em;
  text-indent: 0;
}

body #fb-reader .mr-chapter-intro p:last-child {
  margin-bottom: 0;
}

body #fb-reader .mr-chapter-intro--mono {
  font-family: "Droid Sans Mono", Consolas, "Courier New", monospace;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

/* Scene divider */
body #fb-reader .mr-scene-break {
  color: #8A5F42;
  letter-spacing: 0.6em;
  margin: 1.8rem 0;
  text-align: center;
  text-indent: 0;
}

/* Time stamp opening a scene */
body #fb-reader .mr-timestamp {
  font-weight: 700;
}

/*--------------------------------------------------------------
26.0 Reading key

The "Sync" link and bookmark button sit in .fb-reader-nav__tools on
every chapter page; the panel itself is the [mr_reading_key]
shortcode, normally on its own page.
--------------------------------------------------------------*/

body #fb-reader .fb-reader-nav__tools {
  align-items: center;
  display: flex;
  gap: 1.2rem;
}

body #fb-reader .mr-key-link {
  color: #8A5F42;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Story page: same link, pushed to the right of the badge row. */
body .fictbase-story-page .fb-story-genre-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

body .fictbase-story-page .mr-key-link--story {
  color: #8A5F42;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin-left: auto;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The panel */
.mr-key {
  margin: 0 0 1.5rem;
}

.mr-key__intro,
.mr-key__note {
  font-size: 1.4rem;
  line-height: 1.6;
}

.mr-key__note {
  color: #6B635A;
  font-size: 1.25rem;
}

.mr-key__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}

.mr-key__input {
  background: #FFFFFF;
  border: 1px solid #DCD5CA;
  border-radius: 4px;
  color: #26231E;
  flex: 1 1 22rem;
  font-family: "Libre Baskerville", Baskerville, Georgia, serif;
  font-size: 1.6rem;
  padding: 0.7em 0.9em;
}

.mr-key__status {
  color: #8A5F42;
  font-size: 1.35rem;
  min-height: 1.6em;
}

.mr-key__forget {
  background: none;
  border: 0;
  color: #8A5F42;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0;
  text-decoration: underline;
}

.mr-key__back {
  border-top: 1px solid #E4DED2;
  margin-top: 2rem;
  padding-top: 1.4rem;
}

.mr-key__back a {
  color: #8A5F42;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}

/* "Jump to where you left off" prompt above the scene text */
.mr-resume {
  margin: 0 0 1.8rem;
  text-align: center;
}

.mr-resume__btn {
  background: transparent;
  border: 1px solid #C9B79F;
  border-radius: 4px;
  color: #8A5F42;
  cursor: pointer;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  padding: 0.6em 1.2em;
}

.mr-resume__btn:hover {
  background: #F1EEE6;
}

/*--------------------------------------------------------------
25.0 Mobile

Tested against a 412px viewport. Parent hides #masthead below 640px
already, so the work here is the sheet: narrower gutters, smaller
display type, and stopping the monospace intro from breaking words
mid-syllable.
--------------------------------------------------------------*/

/* Slash-heavy transmission text was breaking inside words ("COUN CIL")
   because something upstream sets word-break. Restore normal breaking
   and let the block scroll rather than fracture. */
html body #fb-reader .mr-chapter-intro--mono,
html body #fb-reader pre {
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  overflow-x: auto;
}

@media screen and (max-width: 700px) {

  /* Libretto's mobile header bar: duplicates the masthead title and opens an
     empty menu, since no menu is assigned to the primary location. */
  .nav-bar {
    display: none;
  }

  /* Gutters */
  .libretto-long-form {
    padding: 0 0.15em 1em;
  }

  html body #fb-reader,
  html body .fictbase-story-page,
  html body .fictbase-stories-page {
    border-radius: 6px;
    margin: 0.8rem auto 2rem;
    padding: 1.6rem 1rem 2rem;
  }

  /* Display type */
  .mr-book-title {
    font-size: 4.2rem;
  }

  .site-header .site-description {
    font-size: 1.7rem;
    letter-spacing: 0.08em;
  }

  html body #fb-reader .fb-reader-title {
    font-size: 2.4rem;
    line-height: 1.15;
  }

  /* Body text */
  html body #fb-reader .fb-reader-content {
    font-size: 1.55rem;
    line-height: 1.6;
  }

  html body #fb-reader .fb-reader-content p {
    text-indent: 1.2em;
  }

  /* Chapter intro — no panel, so it can use the full column width */
  html body #fb-reader .mr-chapter-intro,
  html body #fb-reader pre {
    font-size: 1.35rem;
  }

  html body #fb-reader .mr-chapter-intro--mono,
  html body #fb-reader pre {
    font-size: 1.25rem;
  }

  html body #fb-reader .fb-reader-nav {
    font-size: 1.3rem;
  }
}
/*--------------------------------------------------------------
27.0 Colophon

footer.php restores #colophon for the copyright and fiction
disclaimer. Section 8.0 already makes it transparent with a
copper hairline above; this sets the type down out of the way.
--------------------------------------------------------------*/

.mr-copyright {
  color: var(--mr-copper-light);
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 60rem;
  padding: 2rem 1.5rem 3rem;
  text-align: center;
}

@media screen and (max-width: 700px) {
  .mr-copyright {
    font-size: 1.1rem;
    padding: 1.5rem 1.2rem 2.5rem;
  }
}

/* The parent floats .site-info left at 641px and up, so the copyright
   block was shrink-wrapping to its own 60rem width against the left edge.
   Libretto does that to sit it beside a right-floated #social menu; there
   is no social menu here, so the float has nothing to pair with.
   Same specificity as the parent rule (0,1,1) — this file loads second. */
#colophon .site-info {
  float: none;
  padding-top: 0;
  width: 100%;
}