@charset "UTF-8";

/* ==========================================================================
   lafeangell.com

   A hand-written reproduction of the WildBook WordPress theme the site ran on
   until this migration. Every value here was read off the live site's computed
   styles rather than guessed, so the numbers look oddly specific on purpose:
   the theme's root is 14px, .entry-content steps up to 1.1875em (16.625px),
   and most component spacing is em-derived from that -- 33.25px is 2em,
   83.125px is 5em, 29.925px is 1.8em. Keep them; rounding them visibly shifts
   the layout away from the original.

   No JavaScript. The two behaviours the theme used jQuery for -- the mobile
   nav overlay and the sticky top nav -- are a checkbox toggle and
   `position: sticky` respectively.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts

   Self-hosted latin subsets, replacing the three fonts.googleapis.com requests
   the WordPress site made on every page load.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lora-400i.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lora-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lora-700i.woff2') format('woff2');
}

/* The original loaded Raleway 500 and 600 only, then asked for weight 400 on
   the buttons -- so the browser resolved 400 to the 500 file. Declaring 400
   here against those same two faces reproduces that exactly. */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/raleway-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/raleway-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-700.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --serif: 'Lora', Georgia, serif;
  --sans: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --script: 'Caveat', cursive;

  --ink: #292929;
  --ink-soft: #4a4a4a;
  --ink-nav: #222;
  --ink-block: #32373c;   /* Genesis Blocks' own dark, used in testimonials */
  --rule: #e5e5e5;
  --box: #f2f2f2;         /* CTA + testimonial panels */
  --box-alt: #f5f5f5;     /* book meta panel + hymn wrapper */

  --link: #bfa370;        /* body links at rest */
  --accent: #a9874a;      /* link + top-nav hover */
  --accent-light: #dbca9e;/* sidebar link hover / current */
  --accent-dot: #e5d1ad;  /* top-nav separator dot */
  --green: #22b573;       /* every call-to-action button */

  --sidebar-bg: #5f5f5f;
  --sidebar-ink: #ccc;

  --gutter: 75px;

  /* 2em and 5em of the 16.625px reading size, hard-coded because they are used
     outside .entry-content too. */
  --gap-2em: 33.25px;
  --gap-5em: 83.125px;
}

/* --------------------------------------------------------------------------
   3. Base

   Root font-size is 14px because the theme's whole scale is em-derived from
   it: the top nav is 0.875em (12.25px), the page title 2.875em (40.25px).
   -------------------------------------------------------------------------- */

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

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease-out;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  margin: 0 0 0.5em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard focus stays visible everywhere; the theme suppressed it. */
a:focus-visible,
.nav-open-btn:focus-visible,
.nav-close-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.nav-toggle:focus-visible + .sidebar .nav-open-btn {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Sidebar

   Desktop: a fixed full-height panel down the left quarter of the viewport,
   carrying the cover photo behind a 60% black scrim.
   Mobile: the same panel unpinned into a banner across the top.
   -------------------------------------------------------------------------- */

.sidebar {
  position: relative;
  width: 100%;
  background-color: var(--sidebar-bg);
  /* Plain url() first so browsers without image-set() still get the photo;
     the image-set() below overrides it wherever it is understood. */
  background-image: url('../img/lafe-reading-enough-800.jpg');
  background-image: image-set(
    url('../img/lafe-reading-enough-800.webp') type('image/webp'),
    url('../img/lafe-reading-enough-800.jpg') type('image/jpeg')
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--sidebar-ink);
}

/* The 60% black scrim. Sits under .sidebar-inner (z-index 5), over the photo. */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0.6;
  transition: opacity 0.4s ease-out;
}

.sidebar-inner {
  position: relative;
  z-index: 5;
  padding: 5% 7%;
}

.site-header {
  margin: 3em 0;
  text-align: center;
}

.site-title {
  display: block;
  margin: 0 0 0.357142em;
  color: #fff;
  font-family: var(--script);
  font-size: 79px;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0;
}

.site-title:hover {
  color: var(--accent-light);
}

.tagline {
  margin: 0;
  color: var(--sidebar-ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 0.8;
}

/* --------------------------------------------------------------------------
   5. Mobile nav

   `#nav-toggle` is a hidden checkbox that lives immediately before .sidebar in
   the markup, so `:checked ~` can reach the overlay.
   -------------------------------------------------------------------------- */

.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.nav-open-btn {
  display: block;
  width: 22px;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}

.nav-open-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.nav-open-btn:hover {
  color: var(--accent-light);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  visibility: hidden;
  opacity: 0;
  background: var(--ink-nav);
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

.nav-toggle:checked ~ .sidebar .mobile-nav {
  visibility: visible;
  opacity: 1;
}

.mobile-nav .nav-container {
  margin: auto;
  text-align: center;
}

.mobile-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav li {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.3;
}

.mobile-nav li:last-child {
  margin-bottom: 0;
}

.mobile-nav a {
  color: #fff;
  font-family: var(--serif);
}

.mobile-nav a:hover,
.mobile-nav [aria-current='page'] {
  color: var(--accent-light);
}

.nav-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 20px;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}

.nav-close-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.nav-close-btn:hover {
  color: var(--sidebar-ink);
}

/* --------------------------------------------------------------------------
   6. Top nav (desktop only)
   -------------------------------------------------------------------------- */

.top-nav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 1.75rem 5rem;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  letter-spacing: 0.181818em;
  text-transform: uppercase;
}

.top-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav li {
  display: flex;
  align-items: center;
  position: relative;
}

/* The tan dot between items -- suppressed after the last one. */
.top-nav li::after {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: var(--accent-dot);
}

.top-nav li:last-child::after {
  display: none;
}

.top-nav a {
  display: inline-block;
  padding: 0.636363em 1.363636em;
  color: var(--ink-nav);
  font-family: var(--serif);
}

.top-nav a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   7. Content shell
   -------------------------------------------------------------------------- */

/* The gutter sits on .site-main, not .site-content, so the top nav's white
   band and bottom border still run the full width of the content area.

   The 65px is symmetric: it is the gap between the nav (or the mobile banner)
   and the page title, and the identical gap left under the last block. Every
   page came out exactly 65px short before the bottom half was added. */
.site-main {
  padding: 65px var(--gutter);
}

.content-container {
  max-width: 750px;
  margin: 0 auto;
}

.entry-header {
  margin: 0 0 30px;
}

.entry-title {
  margin: 0 0 0.35em;
  color: var(--ink);
  font-size: 2.875em;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.0263157em;
  text-align: center;
}

/* Everything below the h1 shifts to the theme's 16.625px reading size. The em
   units used by the components further down all resolve against this. */
.entry-content {
  font-size: 1.1875em;
}

/* WordPress drops the last block's bottom margin; without this the About page
   ends 25px lower than the original. */
.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content p {
  margin: 0 0 1.5em;
}

.entry-content a {
  color: var(--link);
}

.entry-content a:hover {
  color: var(--accent);
}

.entry-content h2 {
  margin: 1.5188em 0 0.5062em;
  color: var(--ink);
  font-size: 1.777em;
  font-weight: 700;
  line-height: 1.4166;
}

.entry-content h4 {
  margin: 2.4em 0 0.9em;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

.entry-content figure {
  margin: 0;
}

.text-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Components
   -------------------------------------------------------------------------- */

/* 8.1 Buttons ------------------------------------------------------------- */

/* Scoped to .entry-content as well so it outranks `.entry-content a`, which is
   (0,1,1) and would otherwise repaint the button label gold on green. */
.entry-content .btn,
.btn {
  display: inline-block;
  padding: 10px 1em;
  border-radius: 5px;
  background-color: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 29.0909px;
  letter-spacing: 0.178571em;
  text-align: center;
  text-transform: uppercase;
}

.entry-content .btn:hover,
.btn:hover {
  background-color: #1c9a61;
  color: #fff;
}

.btn-row {
  display: flex;
  justify-content: center;
  margin: 0 0 36px;
}

/* 8.2 Call-to-action panels ----------------------------------------------- */

.cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5em;
  margin: 2em 0;
  padding: 2% 1em 1em;
  text-align: center;
}

.cta h2 {
  margin: 48.6px 0 16.2px;
  color: var(--ink-soft);
  font-size: 32px;
  line-height: 1;
}

/* Home: a grey panel inset to three quarters of the column. */
.cta--boxed {
  width: 75%;
  color: var(--ink-soft);
  margin-left: auto;
  margin-right: auto;
  background: var(--box);
}

/* /a-letter-from-lafe/: full width, no panel, smaller black headings. */
.cta--sm {
  color: #000;
}

.cta--sm h2 {
  margin: 36.45px 0 12.15px;
  color: #000;
  font-size: 24px;
}

/* /enough/: full width, no panel, and no 5em floor under the content. */
.cta--flush {
  min-height: 16.625px;
  color: #000;
}

/* 8.3 Pull-quote (home page testimonials) --------------------------------- */

.pullquote {
  margin: 0 0 1.8em;
  padding: 0 0 0 1.25em;
  border-left: 6px solid var(--rule);
  font-style: italic;
}

.pullquote p {
  margin: 0 0 0.8em;
}

/* Literal em dash + space. The escaped form ("4\A0") is ambiguous to the
   CSS tokeniser -- it renders as stray glyphs -- so keep the real characters
   and the @charset above that guarantees they decode. */
.pullquote cite::before,
.hymn cite::before {
  content: '— ';
}

.pullquote cite {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.178571em;
  line-height: 21px;
  text-transform: uppercase;
}

/* 8.4 Testimonial card (/enough/) ----------------------------------------- */

.testimonial {
  margin: 0 0 1.2em;
  padding: 5%;
  background: var(--box);
  color: var(--ink-block);
}

.testimonial-text {
  margin: 0;
}

.testimonial-info {
  /* inline-block, not block: sitting on a line box in the 1.8-line-height
     parent is what adds the ~7px of leading under the attribution. And 1.4
     inside it, because the name/role pair is set tighter than the quote. */
  display: inline-block;
  margin: 15px 0 0;
  padding: 5px 0 0;
  line-height: 1.4;
}

.entry-content .testimonial-name,
.testimonial-name {
  margin: 0;
  color: var(--ink-block);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
}

.testimonial-title {
  color: var(--ink-block);
  font-size: 0.8em;
  line-height: 1.4;
}

/* 8.5 Dot separator ------------------------------------------------------- */

.dots {
  border: 0;
  height: 24.9375px;
  margin: 2em 0;
  line-height: 1;
  text-align: center;
}

.dots::before {
  content: '···';
  color: #888;
  font-family: serif;
  font-size: 1.5em;
  letter-spacing: 3em;
  /* letter-spacing adds a trailing gap after the last glyph; pad the run back
     so the three dots stay optically centred. */
  padding-left: 3em;
}

/* 8.6 Spacers ------------------------------------------------------------- */

.spacer-10 { height: 10px; }
.spacer-30 { height: 30px; }
.spacer-50 { height: 50px; }

/* 8.7 Two-column layouts --------------------------------------------------

   Two different grids, not one: the home hero is a 2:1 split with a 5em gutter
   and the image optically centred against the buttons, while /enough/ is a
   fluid cover column beside a fixed 30% meta panel with a 2em gutter. */

.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0 var(--gap-5em);
  margin: 0;
}

.hero-figure {
  align-self: center;
}

.hero-figure figure {
  margin: 0 0 30px;
}

.book-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2em);
  margin: 0 0 13.3px;
}

.book-cols-main {
  flex: 1 1 0;
  align-self: flex-start;
}

.book-cols-side {
  flex: 0 0 30%;
}

/* 8.8 Book meta panel (/enough/) ------------------------------------------ */

.entry-content .book-meta,
.book-meta {
  margin: 0;
  padding: 16.25px 30.875px;
  background: var(--box-alt);
  color: var(--ink);
  font-size: 13px;
  line-height: 23.4px;
}

/* 8.9 Floated figures ----------------------------------------------------- */

.entry-content .fig-right,
.fig-right {
  float: right;
  margin: 8.3125px 0 8.3125px 24.9375px;
}

/* Zero-height wrapper around a floated figure. Contributes only its bottom
   margin, which is what separates the float from the text block after it. */
.fig-block {
  margin: 0 0 29.925px;
}

.fig-right img {
  display: block;
}

/* 8.10 Hymn quote (/a-letter-from-lafe/) ---------------------------------

   The grey strip visible beneath this quote is not a mistake in this
   stylesheet -- it is in the original. The WordPress markup nests a
   white-background blockquote inside a light-grey flex group, and because the
   quote carries a 36px bottom margin the wrapper's grey shows through under
   it. Reproduced deliberately. */

.hymn-group {
  display: flex;
  flex-direction: column;
  gap: 8.3125px;
  margin: 0;
  padding: 0;
  background: var(--box-alt);
}

.hymn {
  margin: 0 0 36px;
  padding: 0 0 0 25px;
  border-left: 6px solid var(--rule);
  background: #fff;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: 33px;
  text-align: center;
}

.hymn p {
  margin: 0 0 16px;
  /* WordPress gives any .has-background element 1.25em 2.375em of padding, and
     this paragraph carries has-white-background-color. Half the quote's height
     is that padding. */
  padding: 1.25em 2.375em;
  font-size: 20px;
  line-height: 33px;
}

.hymn cite {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.178571em;
  line-height: 21px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Desktop layout

   992px is the theme's breakpoint: the sidebar pins to the left quarter, the
   banner turns back into a panel, and the top nav replaces the hamburger.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25%;
    background-image: url('../img/lafe-reading-enough-1400.jpg');
    background-image: image-set(
      url('../img/lafe-reading-enough-1400.webp') type('image/webp'),
      url('../img/lafe-reading-enough-1400.jpg') type('image/jpeg')
    );
  }

  .sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8% 9%;
  }

  /* sidebar-layout-3: identity sits against the bottom of the panel. The 1rem
     below it stands in for the theme's empty .site-info footer, which carried
     a 14px top margin and nothing else. */
  .site-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
    margin: 0 0 1rem;
  }

  .nav-open-btn,
  .mobile-nav {
    display: none;
  }

  .top-nav {
    display: block;
  }

  .site-content {
    margin-left: 25%;
  }

  .content-container {
    max-width: 570px;
  }

}

@media (min-width: 1200px) {
  .content-container { max-width: 670px; }
}

@media (min-width: 1600px) {
  .content-container { max-width: 750px; }
}

/* --------------------------------------------------------------------------
   10. Narrow screens

   Deliberately sparse. The original changes almost nothing below 992px: type
   sizes, button metrics, the 75%-wide CTA panel and the floated figures are
   all identical to desktop. Only the two column layouts stack and the page
   gutter tightens. Earlier drafts shrank headings and unfloated the figures
   here; both showed up immediately as drift against the live site.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* Stays a grid rather than becoming a block: a block container would let the
     h4's 47.88px top margin collapse out through the hero and lift the whole
     column. */
  .hero {
    grid-template-columns: 1fr;
  }

  .book-cols-main,
  .book-cols-side {
    flex: 0 0 100%;
  }
}

@media (max-width: 480px) {
  :root { --gutter: 42px; }
}