/* ==========================================================================
   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;                          /* nav current-menu-item */
  --muted: #666666;
  --veil: rgba(52, 33, 7, 0.7);                /* hero photograph overlay */

  /* ---- 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 */

  --fs-hero: 90px;                             /* header h1 */
  --fs-h2: 52px;                               /* text-module h2 preset */
  --lh-h2: 1.2em;
  --fs-byline: 24px;                           /* heading module, .et_pb_heading_0 */
  --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) */
  --section-gutter: 60px;                      /* --section-gutter */
  --module-gutter: 30px;                       /* --module-gutter */
  --row-gutter-v: 40px;                        /* --row-gutter-vertical */
  --section-offset: 30px;                      /* .et_pb_section_0 margin-top (halved from 60px) */

  --hero-min-height: 950px;                    /* .et_pb_section_0_tb_header */
}

*,
*::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;
  min-height: var(--hero-min-height);
  overflow: hidden;
  background-color: #342107;   /* the veil's own colour, behind the photograph */
  isolation: isolate;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* The reference applies a flat brown veil over the photograph:
   linear-gradient(180deg, rgba(52,33,7,.7) 0%, rgba(52,33,7,.7) 100%) */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--veil);
}

/* The reference's "watercolor-divider-01.png", absolutely positioned across
   the bottom of the hero (row_0_tb_header) so the photograph bleeds into the
   page instead of ending on a hard edge. */
.hero__wash {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 480px;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   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;
}

/* 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__action {
  margin-top: var(--section-offset);
  margin-bottom: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   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;
}

.section__lede {
  margin: var(--module-gutter) auto 0;
  font-size: var(--fs-text-module);
  line-height: var(--lh-text-module);
  text-align: center;
}

.section__note {
  margin: var(--module-gutter) 0 0;
  color: var(--muted);
  font-size: var(--fs-btn);
  text-align: center;
}

/* .et_pb_button_0_wrapper { margin-bottom: 32px } */
.section__action {
  margin-top: var(--module-gutter);
  margin-bottom: var(--row-gutter-v);
  text-align: center;
}

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

@media (max-width: 980px) {
  :root {
    --fs-body: 15px;              /* --et_global_body_font_size */
    --fs-hero: 72px;
    --fs-h2: 32px;
    --fs-byline: 22px;
    --hero-min-height: 800px;
    --section-offset: 30px;
  }
}

/* --------------------------------------------------------------------------
   Phone — Divi's 767px breakpoint
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --fs-hero: 40px;
    --fs-h2: 20px;
    --section-offset: 10px;
    --hero-min-height: 600px;
    --section-gutter: 30px;
  }

  .btn--hero {
    padding: 12px;
    font-size: 12px;
  }

  .hero__wash {
    height: 300px;
  }
}

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

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