/* SophiaZW manual overrides — small targeted tweaks kept separate from style.css */
.szw-home__storytitle { font-size: 3.8cqi; }
@media (max-width: 760px) {
	.szw-home__storytitle { font-size: 34px; }
}

/* Thoughts listing: show each post's title above its body text. */
.szw-thought__title {
	font: 400 24px/1.3 var(--display);
	color: var(--ink);
	margin: 0 0 10px;
}

/* BEGIN Book viewer clearance (2026-11-01). Desktop only: right-page text stays above the flowers
   and scrolls inside its box, the page number clears the flowers, and the controls sit below the
   illustration. Reverse by deleting everything from this BEGIN line to the END line. */
@media (min-width: 761px) {
	/* Keep the original 1122:745 artwork area; the controls take their own row beneath it. */
	.szw-bookhero { aspect-ratio: auto; }
	.szw-bookhero__bg { height: 66.39928699cqi; }
	.szw-bookhero__head { top: 1.59358289cqi; }
	.szw-bookhero .szw-logo--banner { top: 1.72643cqi; }
	.szw-book { position: relative; inset: auto; display: block; }
	.szw-book__stage { position: relative; inset: auto; flex: none; aspect-ratio: 1122 / 745; }
	.szw-bookhero .szw-book__bar { position: relative; inset: auto; margin-top: 16px; }
	.szw-bookpage .szw-circle { margin-top: 40px; }

	/* Right page ends at 73.4% of the artwork; the flowers begin at about 76%. */
	.szw-book__page.is-right {
		height: 31%;
		display: flex;
		flex-direction: column;
		padding-bottom: 3cqi;
	}
	.szw-book__page.is-right > :not(.szw-book__text) { flex-shrink: 0; }
	.szw-book__page.is-right > .szw-book__text {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overflow-wrap: anywhere;
		scrollbar-width: thin;
	}
	.szw-book__page.is-right > .szw-book__text:empty { flex: 0 0 auto; }
	.szw-book__page.is-right .szw-book__num { bottom: 0; }
}
/* END Book viewer clearance */

/* BEGIN Book Full Screen framing (2026-11-01). Applies only while the book is in Full Screen; the
   normal Book page is not affected. Desktop: the empty wall above the book (where the hidden title
   sat) is cropped away so the book fills the screen, and both pages sit clear of the control bar.
   Phone: the book fills the screen and scrolls, with the controls pinned at the bottom.
   Reverse by deleting everything from this BEGIN line to the END line. */
@media (min-width: 761px) {
	.szw-bookhero:fullscreen {
		width: min(calc(100vw - 32px), calc((100vh - 32px) * 1.838));
		height: min(calc(100vh - 32px), calc((100vw - 32px) / 1.838));
		aspect-ratio: auto;
		overflow: hidden;
	}
	.szw-bookhero:fullscreen::backdrop { background: #efe9df; }
	/* Shift the artwork and the page layer up together by 12cqi (the artwork is 66.4cqi tall). */
	.szw-bookhero:fullscreen .szw-bookhero__bg { top: -12cqi; height: 66.39928699cqi; }
	.szw-bookhero:fullscreen .szw-book { top: -12cqi; bottom: auto; height: 66.39928699cqi; }
	.szw-bookhero:fullscreen .szw-book__stage { height: 100%; aspect-ratio: auto; }
	/* Left page ends just above the 64px control bar so its page number is not covered. */
	.szw-bookhero:fullscreen .szw-book__page.is-left { height: auto; bottom: calc(64px + .8cqi); }
	.szw-bookhero:fullscreen .szw-book__bar { box-sizing: border-box; height: 64px; padding-top: 0; padding-bottom: 0; margin: 0; }
	/* Open the Chapters list upward so it stays on screen. */
	.szw-bookhero:fullscreen .szw-book__chapters { top: auto; bottom: 100%; }
}
@media (max-width: 760px) {
	.szw-bookhero:fullscreen {
		inset: 0; margin: 0; width: 100%; height: 100%; aspect-ratio: auto;
		padding-top: 16px; overflow-x: hidden; overflow-y: auto; background: #f9f6ed;
	}
	.szw-bookhero:fullscreen .szw-book__bar { position: sticky; top: auto; bottom: 0; z-index: 5; padding: 40px 20px 14px; }
	.szw-bookhero:fullscreen .szw-book__chapters { top: auto; bottom: 100%; right: 20px; }
}
/* END Book Full Screen framing */

/* BEGIN Sophia's Way logo (2026-11-01). The site logo is now the Sophia's Way image (set in
   functions.php szw_logo() and footer.php) instead of the "SophiaZW" text. The image carries its
   own red underline, so the old CSS underline is switched off. Sizes follow the old text sizes.
   The dark One-on-One page uses the light-lettered logo file (chosen in szw_logo()).
   Reverse by deleting everything from this BEGIN line to the END line and restoring the text
   wordmark in functions.php / footer.php / coming-soon.php (see the change record). */
.szw-logo a { display: block; width: max-content; padding-bottom: 0; }
.szw-logo a::after { display: none; }
.szw-logo__img { display: block; height: 1.15em; width: auto; max-width: none; }
.szw-foot__logo a { display: inline-block; }
.szw-foot__logoimg { display: block; height: 40px; width: auto; max-width: 100%; }
/* END Sophia's Way logo */

/* BEGIN Home banner 0105 — warm, image-free handwritten welcome.
   Append only; remove this whole block to reverse the visual change.
   Page 8 already contains Sophia's exact approved wording. */
body.home .szw-home__hero {
  aspect-ratio: auto;
  display: block;
  min-height: 58cqi;
  padding: 13cqi 24cqi 8cqi 14cqi;
  background: #faf7ef;
}
body.home .szw-home__heroimg,
body.home .szw-home__book,
body.home .szw-home__hero::after { display: none; }
body.home .szw-home__hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 48%;
  width: 5cqi;
  height: 22cqi;
  background: #d4af55;
  pointer-events: none;
}
body.home .szw-home__welcome {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  padding: 0;
  z-index: 2;
}
body.home .szw-home__welcome .szw-home__hello {
  font: 400 clamp(72px, 12cqi, 160px)/1.15 var(--brush);
  font-variation-settings: normal;
  letter-spacing: -.025em;
  color: #b31b26;
  margin: 0 0 3cqi;
  transform: rotate(-4deg);
  transform-origin: left center;
}
body.home .szw-home__welcome > p {
  font: 400 clamp(19px, 2.8cqi, 34px)/1.45 var(--serif);
  color: var(--ink);
  max-width: 28em;
  margin: 0 0 0 14cqi;
}
body.home .szw-home__welcome > .szw-home__signoff {
  font: italic 400 clamp(18px, 2.6cqi, 30px)/1.45 var(--serif);
  font-variation-settings: normal;
  color: var(--ink);
  margin-top: 4cqi;
}
@media (max-width: 760px) {
  body.home .szw-home__hero {
    min-height: 0;
    padding: 120px 28px 60px;
  }
  body.home .szw-home__hero .szw-logo--home {
    position: absolute;
    top: 24px;
    left: 20px;
    padding: 0;
  }
  body.home .szw-home__hero::before {
    top: 47%;
    width: 10px;
    height: 120px;
  }
  body.home .szw-home__welcome .szw-home__hello {
    font-size: clamp(64px, 17vw, 100px);
    margin-bottom: 30px;
  }
  body.home .szw-home__welcome > p {
    font-size: 21px;
    margin-left: 16px;
  }
  body.home .szw-home__welcome > .szw-home__signoff {
    font-size: 20px;
    margin-top: 28px;
  }
}
/* END Home banner 0105 */

/* BEGIN Book page phone logo (2026-11-01). On phones the Book page logo was hidden, leaving no way
   back to Home. Show it at the top-left of the hero, in the space the hero already reserves
   (70px of top padding). Not shown in Full Screen (style.css hides it there). Reverse by deleting
   everything from this BEGIN line to the END line. */
@media (max-width: 760px) {
	.szw-bookhero .szw-logo--banner { display: block; position: absolute; left: 20px; top: 22px; font-size: 28px; z-index: 4; }
}
/* END Book page phone logo */

/* BEGIN Early Readers Circle live-events fields (2026-11-03). Styles the optional "live events"
   checkbox and "City or region" field under the email row of the Book page form. The fields
   themselves are switched on in sophiazw-core/inc/forms.php (SZW_EVENTS_FIELDS_LIVE).
   Reverse by deleting everything from this BEGIN line to the END line. */
.szw-readers__events { margin: 18px 0 4px; }
.szw-readers__event { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--ink); font-size: 17px; line-height: 1.4; }
.szw-readers__event input { flex: none; margin: 4px 0 0; width: 17px; height: 17px; accent-color: #b31b26; }
.szw-readers__events .szw-field { margin: 10px 0 0; }
.szw-readers__events .szw-field input { width: 100%; box-sizing: border-box; background: transparent; }
/* END Early Readers Circle live-events fields */

/* BEGIN Thoughts subtitle (2026-11-11). A paragraph with class szw-thought__sub at the top of a
   Thought's English (or Chinese) text shows as a subtitle under the title. Reverse by deleting
   everything from this BEGIN line to the END line; the line then reads as an ordinary first paragraph. */
.szw-thought__sub { margin: -2px 0 14px; font: italic 400 20px/1.35 var(--serif); color: #8a1c26; }
/* END Thoughts subtitle */

/* BEGIN Home menu matches the other pages (2026-11-12). The live Home used to shrink its card to fit the
   screen height and draw the Contact / Explore menu inside the card (86px wide, set in from the edge), so it
   sat in a different place than on every other page. Now the Home card is as wide as the page and the menu is
   the standard one printed by footer.php (72px wide, same distance from the right edge, same height).
   Desktop only (phones use the bottom bar). Reverse by deleting everything from this BEGIN line to the END
   line and restoring the szw_rail( 'szw-railtrack--home' ) call inside .szw-home__top in front-page.php
   (see the change record). */
@media (min-width: 761px) {
	.szw-home--live { max-width: none; }
}
/* END Home menu matches the other pages */

/* BEGIN Home "Get Updates" band, smaller (2026-11-12). With the wider Home card the band came out too big:
   a 1000px form, a 520px email line, 38px heading. Now a compact heading, a short email line (320px) and a
   smaller Subscribe, centred. Home only, desktop only (phone sizes unchanged). Reverse by deleting
   everything from this BEGIN line to the END line. */
@media (min-width: 761px) {
	.szw-home--live .szw-updates { padding: 26px 6% 22px; }
	.szw-home--live .szw-updates h2 { font-size: 26px; margin-bottom: 10px; }
	.szw-home--live .szw-updates .szw-form { max-width: 520px; }
	.szw-home--live .szw-updates .szw-form--subscribe .szw-form__row { grid-template-columns: minmax(0, 320px) auto; justify-content: center; column-gap: 22px; }
	.szw-home--live .szw-updates .szw-form--subscribe .szw-form__row .szw-field { grid-column: 1; }
	.szw-home--live .szw-updates .szw-form--subscribe .szw-form__row .szw-btn { grid-column: 2; font-size: 18px; }
	.szw-home--live .szw-updates input[type=email] { font-size: 16px; }
}
/* END Home "Get Updates" band, smaller */

/* BEGIN Conversation language switch (2026-11-12). A conversation with a Chinese version shows an
   "English · 中文" switch (single-szw_conversation.php); the small English meanings under Chinese verses are
   italic and a little quieter. The shaded speaker blocks are unchanged. Reverse by deleting everything from
   this BEGIN line to the END line. */
.szw-conv__lang[hidden] { display: none; }
.szw-conv__langnav { text-align: center; margin: 0 0 22px; font: 500 14px/1 var(--sans); letter-spacing: .08em; }
.szw-conv__langnav a { color: #6b655e; text-decoration: none; padding: 4px 3px; border-bottom: 2px solid transparent; }
.szw-conv__langnav a:hover { color: #b31b26; }
.szw-conv__langnav a[aria-current] { color: #b31b26; border-bottom-color: #b31b26; }
.szw-conv__thread em { font-style: italic; color: #4a453f; font-size: .94em; }
/* END Conversation language switch */

/* BEGIN Story reading comfort (2026-11-12). Personal Stories, both styles. (1) Less empty space under the
   title block so the story starts sooner; on bold-style stories (the Snake Story) the big red title is
   about half its old size and the picture is smaller. (2) Body text a touch larger with more space between
   lines. (3) A slightly narrower line length. (4) The scene breaks between sections show as three quiet
   red dots. Reverse by deleting everything from this BEGIN line to the END line. */
.szw-story__text { max-width: 690px; font-size: clamp(20px, .9vw + 9px, 22px); line-height: 1.82; }
.szw-story--bold .szw-story__head { margin-bottom: 8px; }
.szw-story--bold .szw-story__title { font-size: clamp(48px, min(6vw, 10vh), 84px); margin-bottom: 12px; }
.szw-story--bold .szw-story__snap { margin-top: 10px; }
.szw-story--bold .szw-story__snap img { max-height: 26vh; }
.szw-story--literary .szw-story__title { margin-bottom: 30px; }
.szw-story--literary .szw-story__sub { margin-bottom: 30px; }
.szw-story__text hr { border: 0; background: none; width: auto; height: auto; margin: .9em 0 1.5em; overflow: visible; text-align: center; }
.szw-story__text hr::before { content: "\2022\2022\2022"; display: block; font: 400 15px/1 var(--serif); letter-spacing: 1.1em; text-indent: 1.1em; color: #b31b26; }
/* END Story reading comfort */

/* BEGIN Story paper panel (2026-11-12). A soft cream paper panel behind the long text of a bold-style
   story (the Snake Story), with the bright yellow kept around it; approved by Sophia after a private
   preview. Reverse by deleting everything from this BEGIN line to the END line. */
.szw-story--bold .szw-story__text { box-sizing: border-box; max-width: 790px; background: #fffaf0; padding: 46px 50px 24px; border-radius: 6px; box-shadow: 0 1px 0 rgba(60, 45, 0, .06), 0 14px 34px rgba(90, 65, 0, .13); }
@media (max-width: 760px) {
	.szw-story--bold .szw-story__text { padding: 28px 20px 12px; }
}
/* END Story paper panel */

/* BEGIN Moments video fit (2026-11-12). A video in "Well, hello there." (the egret) is shown whole inside
   the frame, like the photos, instead of being cropped to the wide frame; the soft blurred picture of the
   poster shows on either side of a tall video. Reverse by deleting everything from this BEGIN line to the
   END line. */
.szw-moments__media video { position: relative; object-fit: contain; background: transparent; }
/* END Moments video fit */