/* ==========================================================================
   Mike Kraus Books — static rebuild (v2, measured against the live site)
   Every box/typography value below was verified against a headless-Chrome
   measurement of https://mikekrausbooks.com/ at 1440x900 (live-measure.json).
   The live page is Divi; this reproduces its RENDERED geometry:
     - rows are width:80% of the padded section, with Divi's max-widths
     - Divi gutters3 column proportions (29.6667/64.8333, 47.25/47.25, 5.5% gaps)
     - the Divi cascade's inherited line-height (14px * 1.7 = 23.8px)
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------------- */
:root {
  --red:        #e00b00;   /* brand red — accents, CTA button                 */
  --red-hover:  #ff1a0e;   /* CTA hover                                       */
  --bg-0:       #0a0a0a;   /* darkest section bg (hero, about)                */
  --bg-1:       #111111;   /* secondary section bg (stats, contact)           */
  --cream:      #f4f1ec;   /* primary light text                              */
  --gray:       #a0a0a0;   /* secondary/body gray text                        */
  --gray-dim:   #6b6b6b;   /* labels, placeholders                            */
  --line:       #262626;   /* hairline borders/dividers                       */

  --font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-system:  'Open Sans', Arial, sans-serif;  /* Divi's inherited body font */
}

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

html { scroll-behavior: smooth; }

/* Mirrors the Divi body cascade: Open Sans 14px, weight 500, line-height 1.7
   (children that don't override line-height inherit the computed 23.8px). */
body {
  margin: 0;
  background: var(--bg-0);
  color: #666666;
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;       /* Divi sets this on the live site */
}

img { max-width: 100%; }

a { color: inherit; }

/* The live Divi page renders its content 1px high (a Divi section-gap hack),
   and the footer pulls up 1px more. Replicate both so every Y matches exactly. */
main { margin-top: -1px; }
#main-footer { margin-top: -1px; }

.mkb-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--red);
  letter-spacing: -0.01em;
}

/* Visible focus outlines for keyboard users (no effect on static rendering) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ---- Hero ------------------------------------------------------------------
   Live: section pad 80/40, flex-centered; inner row 100% w, max 1400.
   At 1440: row 1360 wide, content column heights: title 507 + 32 + sub 60 +
   40 + image 230 + 40 + CTA wrapper 86 = 995; section 1155 tall. */
.mkb-hero-section {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(224, 11, 0, 0.08), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(224, 11, 0, 0.04), transparent 55%),
    var(--bg-0);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
}
.mkb-hero-inner { width: 100%; max-width: 1400px; }
.mkb-hero { text-align: center; }

.mkb-hero-title {
  font-family: var(--font-display);
  font-size: clamp(68px, 12vw, 200px);      /* 172.8px @1440 */
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 auto 32px;
  max-width: 14ch;
  font-weight: 400;
  padding: 0;
}
.mkb-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 20px);      /* 20px @1440 */
  font-weight: 300;
  line-height: 1.5;
  color: var(--gray);
  max-width: 56ch;
  margin: 0 auto 40px;
  padding: 0;
}
.mkb-hero-sub em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cream);
  font-weight: 400;
}
.mkb-hero-books {
  max-width: 460px;
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 40px;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
}

/* CTA — live button box: 250x66 (pad 20/38, 15px/1.7), 20px top margin
   inside an inline-block wrapper. */
.mkb-cta-wrapper { display: inline-block; margin: 0 auto; }
.mkb-cta-wrapper .mkb-btn { margin-top: 20px; }

.mkb-btn {
  background: var(--red);
  color: #ffffff;
  padding: 20px 38px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  display: inline-block;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mkb-btn:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  color: #ffffff;
}

/* ---- Stats -----------------------------------------------------------------
   Live: section #111, 1px #262626 top/bottom borders, 48px vertical padding.
   Row = 80% wide (1152 @1440), 4 columns of 20.875% + 5.5% gutters,
   columns pad 20px 32px, 1px left borders between columns, text LEFT. */
.mkb-stats-section {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 48px 0;
}
.mkb-stats-grid {
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
}
.mkb-stat {
  width: 20.875%;
  margin-right: 5.5%;
  border-left: 1px solid var(--line);
  padding: 20px 32px;
  text-align: left;
}
.mkb-stat:first-child { border-left: none; }
.mkb-stat:last-child { margin-right: 0; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);        /* 64px @1440 */
  font-weight: 500;                          /* inherited weight on live */
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: 10px;
}
.stat-num .plus { color: var(--red); }
.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 23.8px;                       /* inherited 1.7em (of 14px) on live */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray);
}

/* ---- About -----------------------------------------------------------------
   Live: section pad 120px 40px; row 80% (1088 @1440) max 1200, pad 2% 0 (27px);
   columns 29.6667% + 64.8333% with a 5.5% gutter (Divi 1/3 + 2/3). */
.mkb-about-section {
  background: var(--bg-0);
  padding: 120px 40px;
}
.mkb-about-inner {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2% 0;
  display: grid;
  grid-template-columns: 29.6667% 64.8333%;
  column-gap: 5.5%;
  align-items: start;
}
.mkb-about-headline h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);        /* 86.4px @1440 */
  font-weight: 500;                          /* inherited weight on live */
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
  padding: 0 0 10px;                         /* Divi heading padding kept on live */
}
.mkb-about-headline h2 .mkb-italic { color: var(--gray); }
.mkb-about-body p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 24px;
  padding: 0 0 18px;                         /* Divi p padding-bottom 1em */
}
.mkb-about-body p:last-child { padding-bottom: 0; }
.mkb-about-body em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--red);
  font-weight: 400;
}

/* ---- Contact ---------------------------------------------------------------
   Live: section pad 120px 40px 100px; row 80% (1088) max 1200, pad 2% 0;
   two 47.25% columns, 5.5% gutter. */
.mkb-contact-section {
  background: var(--bg-1);
  padding: 120px 40px 100px;
}
.mkb-contact-inner {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2% 0;
  display: grid;
  grid-template-columns: 47.25% 47.25%;
  column-gap: 5.5%;
  align-items: start;
}
.contact-headline {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 120px);       /* 100.8px @1440 */
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 28px;
  padding: 0 0 10px;
}
.contact-intro {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--gray);
  line-height: 1.6;
  font-weight: 300;
  max-width: 42ch;
  margin: 0 0 56px;
}
.contact-meta {
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.meta-item { margin-bottom: 22px; }
.meta-item:last-child { margin-bottom: 0; }
.meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 23.8px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gray-dim);
  margin-bottom: 6px;
  display: block;
}
.meta-value {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--cream);
  font-size: 15px;
  line-height: 23.8px;
  display: block;
}
.meta-value a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.meta-value a:hover { border-bottom-color: var(--red); }

/* Contact form — mirrors the live Divi layout: the form extends 3% past the
   column's left edge; Name/Email are 50% halves that sit flush against each
   other (their underlines read as one line); Message full width; Submit
   bottom-right. Labels are in the DOM but hidden, exactly like Divi. */
.contact-form { margin-left: -3%; }
.contact-form::after { content: ""; display: table; clear: both; }
.cf-field {
  margin: 0 0 3%;
  padding: 0 0 20px;
}
.cf-half { width: 50%; float: left; }
.cf-msg { clear: both; width: 100%; }
.field-label { display: none; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--cream);
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  box-shadow: none;
  transition: border-color 0.2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--gray-dim); opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--red); outline: none; }
.contact-form textarea { min-height: 120px; resize: vertical; display: block; }

.contact-bottom {
  display: flex;
  float: right;                              /* Divi floats the button row right */
  margin-top: -1.5%;                         /* Divi pulls the button row up (-8px) */
  text-align: right;
}
.contact-submit {
  background: var(--cream);
  color: var(--bg-0);
  padding: 18px 34px;
  margin: 12px 0 0 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.contact-submit:hover { background: var(--red); color: #ffffff; }

/* ---- Footer (mirrors the stock Divi footer on the live site) ---------------
   #main-footer #222; #footer-bottom rgba(0,0,0,.32) strip, pad 15px 0 5px;
   container 80% max 1080; text Open Sans 14px/1.7 w500 #666, bold links. */
#main-footer { background: #222222; }
#footer-bottom {
  background: rgba(0, 0, 0, 0.32);
  padding: 15px 0 5px;
}
.footer-container {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}
.footer-container::after { content: ""; display: table; clear: both; }
#footer-info {
  float: left;                               /* Divi floats the info text */
  padding-bottom: 10px;
  color: #666666;
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}
#footer-info a {
  color: #666666;
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================================
   POPUP — faithful rebuild of Popup Maker popup #128 + MainEmailPopup.html
   ==========================================================================
   Overlay:   rgba(2,2,2,0.7), z-index 1999999999, fade 350ms, click-to-close.
   Container: 956px wide (920 content + 2x18 padding), #f9f9f9, 100px from
              the top, centered, shadow 1px 1px 3px rgba(2,2,2,0.23).
   Close:     gray #a8a8a8 "X", white 12px text, 4px padding, top-right corner,
              appears ~50ms after open (Popup Maker's close_button_delay).
   Inner:     the 920x380 panel formerly served as an iframe — dark "binding"
              texture (hotlinked), white Arial 18px, centered; values ported
              from the live emailpopup.css and verified by measurement. */
.mkb-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1999999999;
  background: rgba(2, 2, 2, 0.7);
  display: none;
  overflow: auto;
  cursor: pointer;                           /* pum-click-to-close */
}
.mkb-popup-overlay.is-open {
  display: block;
  animation: mkbPopupFade 350ms ease;
  overflow-y: scroll;                        /* PUM: .pum-overlay.pum-active */
  -webkit-overflow-scrolling: touch;
}
.mkb-popup-overlay.is-closing { opacity: 0; transition: opacity 350ms ease; }
@keyframes mkbPopupFade { from { opacity: 0; } to { opacity: 1; } }

.mkb-popup-overlay .pum-container {
  position: relative;
  cursor: default;
  width: 956px;
  margin: 100px auto 3em;
  padding: 18px;
  background: #f9f9f9;
  border-radius: 0;
  box-shadow: 1px 1px 3px 0 rgba(2, 2, 2, 0.23);
  /* Popup Maker resets the container cascade to medium/normal */
  font-family: var(--font-system);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
.mkb-popup-overlay .pum-content {
  position: relative;
  z-index: 1;
  color: #8c8c8c;
  outline: none;                             /* focus target on open, like live */
  /* On live, the 920x380 iframe sits inline in a <p>, whose line box adds a
     ~5px descender strip of #f9f9f9 below the dark panel. Reproduce it. */
  padding-bottom: 5px;
}

.mkb-popup-overlay .pum-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: auto;
  width: auto;
  min-width: 1em;
  padding: 4px;
  background: #a8a8a8;
  color: #ffffff;
  font-family: var(--font-system);
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
}
.mkb-popup-overlay.is-open .pum-close {
  opacity: 1;
  transition: opacity 0.01s linear 0.05s;    /* close_button_delay: 50ms */
}

/* The former iframe viewport: 920x380, UA body margin 8px reproduced as
   horizontal padding (overflow:hidden contains the child margins). */
.mkb-popup-inner {
  width: 920px;
  height: 380px;
  overflow: hidden;
  background: url('https://mikekrausbooks.com/binding_dark.png');
  text-align: center;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  padding: 0 8px;
}
.mkb-popup-inner .emailContainer {
  margin: 50px auto 0;
  clear: both;
  height: 240px;
}
.mkb-popup-inner h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0 0 24.12px;
  padding: 0;
  line-height: normal;
}
.mkb-popup-inner p {
  width: 800px;
  margin: 0 auto 20px;
  padding: 0;
}
.mkb-popup-inner form {
  width: 600px;
  margin: 0 auto;
}
.mkb-popup-inner input { float: left; }
.mkb-popup-inner input[type="hidden"] { float: none; }
.mkb-popup-inner input[type="email"] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #000000;
  background: #ffffff;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
  border: 0;
  height: 80px;
  width: 355px;
}
.mkb-popup-inner input[type="submit"] {
  font-family: Arial, Helvetica, sans-serif;
  border: 0;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  height: 80px;
  background: #fe3113;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
}
.mkb-popup-inner input[type="submit"]:hover {
  background: #000000;
  color: #ffffff;
  cursor: pointer;
}
.mkb-popup-inner .clearFix { clear: both; height: 30px; }
.mkb-popup-inner .popup-privacy { font-size: 14px; }

/* Scroll lock while the popup is open — on <html>, exactly like Popup Maker
   (html.pum-open-overlay { overflow: hidden }), including PUM's scrollbar-jump
   compensation: 15px right padding on body children while the page scrollbar
   is hidden (the overlay itself is exempt via aria-modal). */
html.modal-open { overflow: hidden; }
html.modal-open body > :not([aria-modal="true"]) { padding-right: 15px; }

/* ==========================================================================
   Responsive — desktop 1440 is the 1:1 fidelity target; below 980px these
   mirror the live site's own mobile overrides (hero pads, stacked stats)
   plus the popup CSS's small-screen rules from emailpopup.css.
   ========================================================================== */
@media (max-width: 980px) {
  .mkb-hero-section { padding: 60px 24px; min-height: auto; }
  .mkb-hero-title { font-size: clamp(52px, 13vw, 88px); margin-bottom: 24px; }
  .mkb-hero-sub { margin-bottom: 28px; }
  .mkb-hero-books { max-width: 92%; margin-bottom: 28px; }

  .mkb-stats-grid { display: block; width: 80%; }
  .mkb-stat {
    width: 100%;
    margin-right: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 24px;
  }
  .mkb-stat:first-child { border-top: none; }

  .mkb-about-section { padding: 64px 24px; }
  .mkb-about-inner { grid-template-columns: 1fr; }
  .mkb-about-headline h2 { font-size: clamp(40px, 9vw, 64px); margin-bottom: 24px; }

  .mkb-contact-section { padding: 64px 24px; }
  .mkb-contact-inner { grid-template-columns: 1fr; row-gap: 40px; }
  .contact-headline { font-size: clamp(48px, 11vw, 80px); }
  .contact-intro { margin-bottom: 40px; }

  /* Popup: live serves a fixed 956px frame even on phones; we keep the same
     design but let it fit the screen (the iframe page's own <768px rules). */
  .mkb-popup-overlay .pum-container { width: auto; max-width: 956px; margin: 100px 10px 3em; }
  .mkb-popup-inner { width: 100%; height: auto; min-height: 380px; padding-bottom: 10px; }
  .mkb-popup-inner .emailContainer { height: auto; }
  .mkb-popup-inner p { width: auto; max-width: 800px; }
}

@media (max-width: 767px) {
  .cf-half { width: 100%; float: none; }

  .mkb-popup-inner p { max-width: 300px; font-size: 14px; }
  .mkb-popup-inner form { width: 320px; max-width: 100%; }
  .mkb-popup-inner input[type="email"] { width: 300px; max-width: 100%; border-radius: 5px; }
  .mkb-popup-inner input[type="submit"] {
    clear: both;
    border-radius: 5px;
    width: 320px;
    max-width: 100%;
    margin: 10px auto 0;
    float: left;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}