/* ==========================================================================
   Upside Down Inside Out — a book fundraiser
   Design system copied from aikidooflondon.com (Divi 5 output).

   Values below are lifted directly from that site's compiled CSS:
   colours, font stacks, font sizes, line heights, letter spacing,
   section/row/module padding and margins, and Divi's content widths.
   ========================================================================== */

:root {
  /* ---- Colours ---------------------------------------------------------- */
  --heading-color: #000000;
  /* --gcid-heading-color */
  --body-color: rgba(0, 0, 0, 0.7);
  /* --gcid-body-color */
  --on-photo: #dfdad6;
  /* hero heading + hero button */
  --btn-ink: #333333;
  /* button text + border */
  --btn-bg: #ffffff;
  /* button background */
  --current: #cc3333;
  /* accent: kickers */

  /* ---- Fonts ------------------------------------------------------------ */
  /* The site requests only Lato + Prata from Google Fonts, so these are the
     two families that actually render. Inter, Baskervville, Playfair Display
     and Wix Madefor Display are declared in Divi's presets but never loaded. */
  --display: "Prata", Georgia, "Times New Roman", serif;
  --body-font: "Lato", Helvetica, Arial, Lucida, sans-serif;

  /* ---- Type ------------------------------------------------------------- */
  --fs-body: 16px;
  /* --et_global_body_font_size */
  --lh-body: 1.7em;
  /* --et_global_body_font_height */
  --fw-body: 400;
  /* --et_global_body_font_weight */
  --fw-heading: 400;
  /* Prata ships 400 only */

  /* Display type is fluid rather than stepped, so desktop and tablet are one
     continuous scale instead of jumping at the 980px breakpoint. Each tops out
     at the reference's desktop value at 1440. */
  --fs-hero: clamp(2.5rem, 6.4vw, 5.625rem);
  /* 90px @1440, 49px @768 */
  --fs-h2: clamp(1.25rem, 4.2vw, 3.25rem);
  /* 52px @1440, 32px @768 */
  --lh-h2: 1.2em;
  --fs-byline: clamp(1.25rem, 1.7vw, 1.5rem);
  /* 24px @1440, 20px @768 */
  --fs-quote: clamp(1.5rem, 2.4vw, 2rem);
  /* 32px @1440, 24px @768 */
  --fs-text-module: 17px;
  /* .et_pb_text_1 .et_pb_text_inner */
  --lh-text-module: 1.8em;

  --fs-btn: 14px;
  /* button preset */
  --fs-btn-card: 16px;
  /* .et_pb_button_0 / _1 */
  --ls-btn: 0.16em;
  --fw-btn: 600;
  --btn-pad: 16px 20px;
  /* button preset padding */
  --btn-pad-hero: 15px;
  /* et_pb_button_0_tb_header */

  /* ---- Layout ----------------------------------------------------------- */
  --content-width: 80%;
  /* --content-width */
  --content-max: 1080px;
  /* --content-max-width */
  --text-row-width: 80%;
  /* .et_pb_row_0 */
  --text-row-max: 900px;
  --wide-row-width: 95%;
  /* .et_pb_row_1 */
  --wide-row-max: 1450px;

  --section-padding: 28px;
  /* --section-padding (halved from 56px) */
  --module-gutter: 30px;
  /* --module-gutter */
  --row-gutter-v: 40px;
  /* --row-gutter-vertical */
  --section-offset: 30px;
  /* .et_pb_section_0 margin-top (halved from 60px) */
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--body-color);
  font-family: var(--body-font);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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

/* --------------------------------------------------------------------------
   Rows — Divi's content widths
   -------------------------------------------------------------------------- */

.row {
  width: var(--content-width);
  max-width: var(--content-max);
  margin: auto;
  padding-inline: 0;
}

.row--text {
  width: var(--text-row-width);
  max-width: var(--text-row-max);
}

.row--wide {
  width: var(--wide-row-width);
  max-width: var(--wide-row-max);
}

/* --------------------------------------------------------------------------
   Buttons — Divi button preset + per-instance overrides
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: var(--btn-pad);
  background-color: var(--btn-bg);
  border: 0;
  border-radius: 0;
  color: var(--btn-ink);
  font-family: var(--body-font);
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  line-height: 1;
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease;
}

/* Hero button: transparent, 1px #dfdad6 */
.btn--hero {
  padding: var(--btn-pad-hero);
  background-color: transparent;
  border: 1px solid var(--on-photo);
  color: var(--on-photo);
}

/* Content buttons: #333 text, 1px #333 border, 16px */
.btn--outline {
  font-size: var(--fs-btn-card);
  border: 1px solid var(--btn-ink);
}

.btn--hero:hover,
.btn--outline:hover {
  background-color: var(--btn-ink);
  border-color: var(--btn-ink);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Fills the screen at every width, so the title always starts just below the
     fold and there's no height jump between desktop and tablet. svh avoids the
     mobile browser chrome; the vh line is the fallback. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: #342107;
  /* the reference's veil colour, behind the photograph */
  isolation: isolate;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
  /* keeps both figures in frame as the crop tightens */
  z-index: 0;
}

/* The reference laid a flat brown veil over its hero to carry white type.
   This photograph is already sepia and no longer has type on it, so the veil
   is gone rather than crushing the print. */

/* A plain vertical fade, so the photograph bleeds into the page. */
.hero__wash {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 38%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

/* --------------------------------------------------------------------------
   Intro — the title block now sits below the photograph rather than on it, so
   it takes the page's ink colours instead of the on-photo #dfdad6
   -------------------------------------------------------------------------- */

.intro__title {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--display);
  font-weight: var(--fw-heading);
  font-size: var(--fs-hero);
  line-height: var(--lh-h2);
  text-align: center;
  text-wrap: balance;
}

/* Byline — lifted out of body copy so the author reads as a credit rather
   than a caption: display serif, full heading ink, at the reference's
   heading-module size (24px, 22px on tablet). */
.intro__byline {
  margin: var(--module-gutter) auto 0;
  color: var(--heading-color);
  font-family: var(--display);
  font-size: var(--fs-byline);
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Intro over the photograph — wide screens only

   The title and byline start over the hero, raised to the middle of the image
   and nudged right of centre, wearing the on-photo ink. As the page scrolls
   they come down into their flow position above the copy, swapping to the
   page's heading colour on the way.

   Pure CSS: `animation-timeline: scroll(root)` drives the progress from the
   scroll offset rather than from time. The whole thing sits behind @supports,
   so a browser without scroll timelines just gets the ordinary in-flow title
   instead of a title that animates once on load and sticks.
   -------------------------------------------------------------------------- */

/* Over the image the title scales to half size about its right edge, so it
   shrinks toward the right rather than toward its centre. The byline stays
   full size — halving it would leave it illegible.

   Both are shifted so their right edge lands on the same line, using
   `calc(47.5vw - 50%)`. The 50% resolves against each element's own width, so
   the title (1060px wide) and the byline (~165px) converge on the identical
   right edge regardless of viewport, instead of needing two hand-tuned values
   that drift apart as the type scale changes. */
@keyframes title-settle {
  from {
    transform: translate(calc(47.5vw - 50%), calc(-50svh - var(--section-offset) - var(--section-padding))) scale(0.5);
    color: var(--on-photo);
  }

  to {
    transform: none;
    color: var(--heading-color);
  }
}

@keyframes byline-settle {
  from {
    transform: translate(calc(47.5vw - 50%), calc(-50svh - var(--section-offset) - var(--section-padding)));
    color: var(--on-photo);
  }

  to {
    transform: none;
    color: var(--heading-color);
  }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 981px) {

    /* Both boxes hug their text, so shifting them right can't drag a
       full-width block past the viewport edge and open a horizontal
       scrollbar. */
    .intro__title,
    .intro__byline {
      width: max-content;
      margin-inline: auto;
    }

    .intro__title {
      transform-origin: 100% 70%;
      animation: title-settle ease-in-out both;
      animation-timeline: scroll(root);
      animation-range: 5vh 50vh;
      will-change: transform;
    }

    .intro__byline {
      animation: byline-settle ease-in-out both;
      animation-timeline: scroll(root);
      animation-range: 5vh 50vh;
      will-change: transform;
    }
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding: var(--section-padding) 0;
  /* .et_flex_section */
  margin-top: var(--section-offset);
  /* .et_pb_section_0 { margin-top: 60px } */
}

.section__kicker {
  margin: 0;
  color: var(--current);
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-align: center;
}

/* .preset--module--divi-text--ed748532… h2 { font-family:'Prata'…; 52px; 1.2em } */
.section__title {
  margin: var(--module-gutter) 0 0;
  color: var(--heading-color);
  font-family: var(--display);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

/* .et_pb_text_1 { margin-bottom: 40px; text-align: justify }
   .et_pb_text_1 .et_pb_text_inner { font-size: 17px }  (preset: line-height 1.8em) */
.prose {
  margin-top: var(--row-gutter-v);
  margin-bottom: var(--row-gutter-v);
  font-size: var(--fs-text-module);
  line-height: var(--lh-text-module);
  text-align: justify;
}

.prose p {
  margin: 0 0 var(--module-gutter);
}

.prose p:last-child {
  margin-bottom: 0;
}

/* When prose closes a section, its own bottom margin stacks on top of the
   section's padding and the next section's offset — doubling the gap. The
   chapter's prose is followed by the pull quote, so only the last child case
   needs neutralising. */
.prose:last-child {
  margin-bottom: 0;
}

/* The chapter's closing line, lifted out of the body copy and set in the
   display serif so it lands as the taster's hook. */
.pullquote {
  margin: var(--row-gutter-v) 0 0;
  padding: 0;
  color: var(--heading-color);
  font-family: var(--display);
  font-size: var(--fs-quote);
  font-weight: var(--fw-heading);
  line-height: 1.35;
  text-align: center;
}

.pullquote p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Sticky CTA
   Pure CSS: `position: sticky` with `bottom: 0` holds the button at the foot of
   the viewport while its containing block — .fundraiser, not <main> — is on
   screen, then releases it into its natural place at the end of the page.

   The containing block is the whole control: the button activates when that
   block's top passes the fold. Scoping it to .fundraiser, rather than <main>,
   is what keeps it from floating while the book is being read.
   -------------------------------------------------------------------------- */

.cta {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: var(--module-gutter) 0 var(--row-gutter-v);
  text-align: center;
  /* A soft white foot so the button stays legible over copy it floats across */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 45%);
  pointer-events: none;
}

.cta .btn {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Tablet — Divi's 980px breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  :root {
    --fs-body: 15px;
    /* --et_global_body_font_size */
  }
}

/* --------------------------------------------------------------------------
   Phone — Divi's 767px breakpoint
   Display sizes, the hero height and the wash now scale fluidly, so only the
   spacing needs a phone-specific value.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .btn--hero {
    padding: 12px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Narrow phones — below this width a full-height hero crops a 16:9 photograph
   down to a narrow vertical slice, so it becomes a 4:3 band instead. Anything
   wider keeps the full-height hero, which is why 600–767px must not be caught
   by this rule.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .hero {
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    max-height: 70svh;
  }

  .hero__wash {
    height: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  /* Skip the scroll-linked title move; it settles directly into place. */
  .intro__title,
  .intro__byline {
    animation: none !important;
    transform: none !important;
    color: var(--heading-color);
  }
}