/* Monthly Letter — plugin front-end styles.
   Scoped under .ml-wrap so it never leaks into the rest of the theme.
   Colors match the client-provided mockups; override any --ml-* variable
   from your theme's CSS to re-skin without touching this file. */

.ml-wrap{
  --ml-navy:#0A192F;
  --ml-navy-deep:#061526;
  --ml-card:#111c35;
  --ml-line:#25324f;
  --ml-gold:#c5a059;
  --ml-gold-soft:#8a7143;
  --ml-ink:#eef2f8;
  --ml-ink-dim:#9fb0c9;
  --ml-ink-faint:#5f7089;
  --ml-serif:'Source Serif 4', Georgia, serif;
  --ml-sans:'Inter', -apple-system, sans-serif;

  background:var(--ml-navy);
  color:var(--ml-ink-dim);
  font-family:var(--ml-sans);
  line-height:1.5;
}
.ml-wrap *{ box-sizing:border-box; }
.ml-wrap a{text-decoration:none; }
.ml-shell{ max-width:1180px; margin:0 auto; padding:0 32px; }

.ml-btn{ display:inline-block; padding:14px 22px; font-size:13px; font-weight:600; letter-spacing:.01em; cursor:pointer; border:1px solid transparent; transition:all .15s ease; text-align:center; }
.ml-btn-gold{ background:var(--ml-gold); color:var(--ml-navy-deep); }
.ml-btn-gold:hover{ background:#d8b06c; }
.ml-btn-outline{ border-color:var(--ml-gold-soft); color:var(--ml-gold); }
.ml-btn-outline:hover{ border-color:var(--ml-gold); background:rgba(197,160,89,.06); }

/* ---------- Page header ---------- */
.ml-page-header{ padding:64px 0 0; }
.ml-ph-kicker{ font-size:12.5px; color:var(--ml-gold); letter-spacing:.03em; font-weight:500; margin-bottom:14px; }
.ml-page-header h1{ font-family:var(--ml-serif); font-weight:500; font-size:clamp(28px,4vw,42px); color:var(--ml-ink); letter-spacing:-.01em; }
.ml-page-intro{ max-width:640px; font-size:14.5px; line-height:1.7; color:var(--ml-ink-dim); margin-top:18px; padding-bottom:8px; }
.ml-page-intro p{ margin-bottom:12px; }

/* ---------- Hero (Section 1) ---------- */
.ml-issue-hero{ padding:56px 0 88px; border-bottom:1px solid var(--ml-line); }
.ml-issue-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:52px; align-items:start; }
.ml-issue-headline{ font-family:var(--ml-serif); font-weight:500; font-size:clamp(26px,3.4vw,36px); color:var(--ml-ink); line-height:1.25; margin-bottom:16px; max-width:520px; }
.ml-issue-date{ font-size:12.5px; color:var(--ml-ink-faint); margin-bottom:28px; }
.ml-exec-list{ list-style:none; margin:0 0 36px; padding:0; }
.ml-exec-list li{ position:relative; padding-left:22px; margin-bottom:14px; font-size:14.5px; line-height:1.65; color:var(--ml-ink-dim); }
.ml-exec-list li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--ml-gold); }
.ml-issue-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.ml-issue-side{ border:1px solid var(--ml-line); padding:24px; }
.ml-issue-thumb{ aspect-ratio:4/5; background:linear-gradient(160deg,#16233f,#0b1325 75%); border:1px solid var(--ml-line); display:flex; align-items:center; justify-content:center; color:var(--ml-ink-faint); font-family:var(--ml-serif); font-size:13px; margin-bottom:18px; text-align:center; padding:16px; overflow:hidden; }
.ml-issue-thumb img{ width:100%; height:100%; object-fit:cover; }
.ml-side-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--ml-line); font-size:12px; }
.ml-side-row:last-child{ border-bottom:none; }
.ml-side-row span:first-child{ color:var(--ml-ink-faint); }
.ml-side-row span:last-child{ color:var(--ml-ink-dim); text-align:right; }

/* ---------- Subscribe box (Section 2) ---------- */
.ml-letter-sub{ padding:80px 0; border-bottom:1px solid var(--ml-line); }
.ml-sub-box{ border:1px solid var(--ml-line); padding:44px 48px; }
.ml-sub-box h2{ font-family:var(--ml-serif); font-weight:500; font-size:23px; color:var(--ml-ink); margin-bottom:8px; }
.ml-sub-box p{ font-size:13.5px; color:var(--ml-ink-faint); margin-bottom:28px; }
.ml-sub-form .wpcf7-form-control{ background:var(--ml-navy-deep); border:1px solid var(--ml-line); color:var(--ml-ink); padding:14px 16px; font-size:13.5px; font-family:var(--ml-sans); }
.ml-sub-form .wpcf7-form p{ margin-bottom:12px; }
.ml-sub-form input[type="submit"]{ background:var(--ml-gold); color:var(--ml-navy-deep); border:none; font-weight:600; cursor:pointer; }
.ml-sub-form input[type="submit"]:hover{ background:#d8b06c; }

/* ---------- Archive grid (Section 3) ---------- */
.ml-archives{ padding:88px 0; }
.ml-archive-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; flex-wrap:wrap; gap:18px; }
.ml-archive-head h2{ font-family:var(--ml-serif); font-weight:500; font-size:27px; color:var(--ml-ink); margin:0; }

.ml-year-filter{ display:flex; gap:8px; flex-wrap:wrap; }
.ml-year-pill{ padding:9px 18px; font-size:12.5px; border:1px solid var(--ml-line); color:var(--ml-ink-faint); cursor:pointer; transition:all .15s ease; display:inline-block; }
.ml-year-pill.active{ border-color:var(--ml-gold); color:var(--ml-gold); }
.ml-year-pill:hover{ border-color:var(--ml-gold-soft); color:var(--ml-ink-dim); }
.ml-year-more-wrap{ display:inline-flex; }
.ml-year-more{
	padding:9px 30px 9px 18px;
	font-size:12.5px;
	font-family:inherit;
	border:1px solid var(--ml-line);
	background-color:transparent;
	color:var(--ml-ink-faint);
	cursor:pointer;
	transition:all .15s ease;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%239aa5b1' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:10px 7px;
}
.ml-year-more:hover{ border-color:var(--ml-gold-soft); color:var(--ml-ink-dim); }
.ml-year-more.active{ border-color:var(--ml-gold); color:var(--ml-gold); }
.ml-year-more option{ color:#111; background:#fff; }

.ml-archive-grid{ display:grid; grid-template-columns:repeat(var(--ml-cols, 3), 1fr); gap:1px; background:var(--ml-line); border:1px solid var(--ml-line); }
.ml-arc-item{ background:var(--ml-navy); padding:26px; transition:background .15s ease; }
.ml-arc-item:hover{ background:var(--ml-card); }
.ml-arc-thumb{ aspect-ratio:4/3; background:linear-gradient(160deg,#16233f,#0b1325 75%); border:1px solid var(--ml-line); display:flex; align-items:center; justify-content:center; color:var(--ml-ink-faint); font-family:var(--ml-serif); font-size:12px; margin-bottom:18px; overflow:hidden; }
.ml-arc-thumb img{ width:100%; height:100%; object-fit:cover; }
.ml-arc-year{ font-size:11px; color:var(--ml-ink-faint); margin-bottom:8px; }
.ml-arc-title{ font-family:var(--ml-serif); font-weight:500; font-size:16px; color:var(--ml-ink); line-height:1.4; margin-bottom:16px; }
.ml-arc-links{ display:flex; gap:16px; font-size:12px; }
.ml-arc-links a{ color:var(--ml-gold); border-bottom:1px solid var(--ml-gold-soft); padding-bottom:2px; }
.ml-arc-links a.pdf{ color:var(--ml-ink-dim); border-color:var(--ml-line); }
.ml-pagination{ margin-top:32px; display:flex; gap:8px; }
.ml-pagination span, .ml-pagination a{ padding:8px 14px; border:1px solid var(--ml-line); color:var(--ml-ink-dim); font-size:12.5px; }
.ml-pagination a:hover{ border-color:var(--ml-gold-soft); color:var(--ml-gold); }
.ml-pagination .current, .ml-pagination .ml-page-link.active{ border-color:var(--ml-gold); color:var(--ml-gold); }
.ml-archive-grid-wrap{ transition:opacity .15s ease; }
.ml-archive-grid-wrap.is-loading{ opacity:.4; pointer-events:none; }
.ml-no-issues{ font-size:13.5px; color:var(--ml-ink-faint); }

/* ---------- Single issue page ---------- */
.ml-crumb{ padding:28px 0 0; font-size:12px; color:var(--ml-ink-faint); }
.ml-crumb a{ color:var(--ml-gold-soft); }
.ml-crumb a:hover{ color:var(--ml-gold); }

.ml-article-section{ padding:36px 0 96px; }
.ml-article-layout{ display:grid; grid-template-columns:1fr 280px; gap:60px; align-items:start; }

.ml-kicker{ font-size:12px; color:var(--ml-gold); letter-spacing:.03em; font-weight:500; margin-bottom:18px; }
.ml-article-title{ font-family:var(--ml-serif); font-weight:500; font-size:clamp(28px,4vw,40px); color:var(--ml-ink); line-height:1.22; margin-bottom:20px; max-width:640px; }
.ml-byline{ font-size:13px; color:var(--ml-ink-faint); padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--ml-line); }

.ml-article-body p{ font-family:var(--ml-serif); font-size:16.5px; line-height:1.9; color:var(--ml-ink-dim); max-width:600px; margin-bottom:24px; }
.ml-article-body h5{ font-family:var(--ml-sans); font-size:12.5px; letter-spacing:.04em; color:var(--ml-gold); font-weight:600; margin:38px 0 14px; }

.ml-sidebar-card{ border:1px solid var(--ml-line); padding:26px; margin-bottom:20px; }
.ml-sidebar-card h6{ font-size:11.5px; color:var(--ml-gold); letter-spacing:.03em; font-weight:600; margin-bottom:16px; }
.ml-sidebar-card .ml-btn{ display:block; width:100%; margin-bottom:10px; }
.ml-sidebar-card .ml-btn:last-child{ margin-bottom:0; }

.ml-meta-card{ border:1px solid var(--ml-line); padding:26px; }
.ml-meta-card h6{ font-size:11.5px; color:var(--ml-ink-faint); letter-spacing:.03em; font-weight:600; margin-bottom:14px; }
.ml-meta-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--ml-line); font-size:12px; }
.ml-meta-row:last-child{ border-bottom:none; }
.ml-meta-row span:first-child{ color:var(--ml-ink-faint); }
.ml-meta-row span:last-child{ color:var(--ml-ink-dim); text-align:right; }

/* ---------- Gated PDF popup modal ---------- 
.ml-modal{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; }
.ml-modal.is-open{ display:flex; }
.ml-modal-overlay{ position:absolute; inset:0; background:rgba(4,7,16,.72); }
.ml-modal-panel{ position:relative; background:#111c35; border:1px solid #8a7143; max-width:520px; width:100%; max-height:88vh; overflow:auto; padding:40px 36px; }
.ml-modal-panel h3{ font-family:var(--ml-serif); font-weight:500; font-size:20px; color:var(--ml-ink); margin-bottom:20px; padding-right:24px; }
.ml-modal-close{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--ml-ink-faint); font-size:26px; line-height:1; cursor:pointer; }
.ml-modal-close:hover{ color:var(--ml-gold); }
.ml-modal-form .wpcf7-form-control{ background:var(--ml-navy-deep); border:1px solid var(--ml-line); color:var(--ml-ink); padding:12px 14px; font-size:13.5px; font-family:var(--ml-sans); width:100%; }
.ml-modal-form .wpcf7-form p{ margin-bottom:14px; }
.ml-modal-form input[type="submit"]{ background:var(--ml-gold); color:var(--ml-navy-deep); border:none; font-weight:600; cursor:pointer; padding:12px 22px; }
.ml-modal-form input[type="submit"]:hover{ background:#d8b06c; }
.ml-modal-note{ font-size:11.5px; color:var(--ml-ink-faint); margin-top:14px; }*/



/* ==============================
   MODAL
   ============================== */

.ml-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.ml-modal.is-open {
  display: flex;
}


/* ==============================
   OVERLAY
   ============================== */

.ml-modal-overlay {
  position: absolute;
  inset: 0;

  background: rgba(4, 7, 16, 0.78);
}


/* ==============================
   MODAL PANEL
   ============================== */

.ml-modal-panel {
  position: relative;

  background: #111c35;

  border: 1px solid var(--ml-gold-soft);

  max-width: 520px;
  width: 100%;

  max-height: 88vh;
  overflow: auto;

  padding: 40px 36px;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(232, 215, 165, 0.04);
}


/* ==============================
   HEADING
   ============================== */

.ml-modal-panel h3 {
  font-family: var(--ml-serif);

  font-weight: 500;
  font-size: 20px;

  color: var(--ml-ink);

  margin: 0 0 20px;

  padding-right: 24px;

  letter-spacing: 0.2px;
}


/* ==============================
   CLOSE BUTTON
   ============================== */

.ml-modal-close {
  position: absolute;

  top: 14px;
  right: 14px;

  background: none;
  border: none;

  color: var(--ml-ink-faint);

  font-size: 26px;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.ml-modal-close:hover {
  color: var(--ml-gold);

  transform: rotate(90deg);
}


/* ==============================
   FORM
   ============================== */

.ml-modal-form .wpcf7-form-control {
  box-sizing: border-box;

  display: block;

  width: 100%;

  background: var(--ml-navy-deep);

  border: 1px solid var(--ml-line);

  color: var(--ml-ink);

  padding: 12px 14px;

  font-size: 13.5px;

  font-family: var(--ml-sans);

  border-radius: 0;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}


/* ==============================
   INPUT FOCUS
   ============================== */

.ml-modal-form .wpcf7-form-control:focus {
  border-color: var(--ml-gold-soft);

  background: #08182b;

  box-shadow:
    0 0 0 2px rgba(232, 215, 165, 0.08);
}


/* ==============================
   PLACEHOLDER
   ============================== */

.ml-modal-form .wpcf7-form-control::placeholder {
  color: var(--ml-ink-faint);

  opacity: 1;
}


/* ==============================
   TEXTAREA
   ============================== */

.ml-modal-form textarea.wpcf7-form-control {
  min-height: 120px;

  resize: vertical;
}


/* ==============================
   SELECT
   ============================== */

.ml-modal-form select.wpcf7-form-control {
  color: var(--ml-ink);

  appearance: auto;
}


/* ==============================
   FORM PARAGRAPHS
   ============================== */

.ml-modal-form .wpcf7-form p {
  margin: 0 0 14px;
}


/* ==============================
   LABEL
   ============================== */

.ml-modal-form label {
  display: block;

  margin-bottom: 6px;

  color: var(--ml-ink-dim);

  font-family: var(--ml-sans);

  font-size: 12px;

  letter-spacing: 0.3px;
}


/* ==============================
   SUBMIT BUTTON
   ============================== */

.ml-modal-form input[type="submit"] {
  background: var(--ml-gold);

  color: var(--ml-navy-deep);

  border: none;

  font-weight: 600;

  cursor: pointer;

  padding: 12px 22px;

  font-family: var(--ml-sans);

  font-size: 13px;

  letter-spacing: 0.2px;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* ==============================
   SUBMIT HOVER
   ============================== */

.ml-modal-form input[type="submit"]:hover {
  background: #F0DEAA;

  transform: translateY(-1px);

  box-shadow:
    0 6px 18px rgba(232, 215, 165, 0.18);
}


/* ==============================
   SUBMIT ACTIVE
   ============================== */

.ml-modal-form input[type="submit"]:active {
  transform: translateY(0);
}


/* ==============================
   NOTE
   ============================== */

.ml-modal-note {
  font-size: 11.5px;

  color: var(--ml-ink-faint);

  margin-top: 14px;

  line-height: 1.6;
}


/* ==============================
   CF7 VALIDATION
   ============================== */

.ml-modal-form .wpcf7-not-valid-tip {
  color: #DDBB86;

  font-size: 11px;

  margin-top: 5px;
}


/* ==============================
   CF7 RESPONSE
   ============================== */

.ml-modal-form .wpcf7-response-output {
  margin: 16px 0 0;

  padding: 10px 12px;

  border: 1px solid var(--ml-gold-soft);

  color: var(--ml-ink-dim);

  font-size: 12px;
}


/* ==============================
   CHECKBOX / RADIO
   ============================== */

.ml-modal-form input[type="checkbox"],
.ml-modal-form input[type="radio"] {
  accent-color: var(--ml-gold);
}


/* ==============================
   LINKS
   ============================== */

.ml-modal-form a {
  color: var(--ml-gold);

  text-decoration: none;

  transition: color 0.2s ease;
}

.ml-modal-form a:hover {
  color: #F0DEAA;

  text-decoration: underline;
}


/* ==============================
   SCROLLBAR
   ============================== */

.ml-modal-panel::-webkit-scrollbar {
  width: 6px;
}

.ml-modal-panel::-webkit-scrollbar-track {
  background: var(--ml-navy-deep);
}

.ml-modal-panel::-webkit-scrollbar-thumb {
  background: var(--ml-gold-soft);
}

.ml-modal-panel::-webkit-scrollbar-thumb:hover {
  background: var(--ml-gold);
}


/* ==============================
   MOBILE
   ============================== */

@media (max-width: 600px) {

  .ml-modal {
    padding: 16px;
  }

  .ml-modal-panel {
    max-height: 90vh;

    padding: 32px 22px;
  }

  .ml-modal-panel h3 {
    font-size: 18px;

    margin-bottom: 18px;
  }

  .ml-modal-close {
    top: 10px;
    right: 10px;

    font-size: 24px;
  }

  .ml-modal-form .wpcf7-form-control {
    padding: 11px 12px;

    font-size: 13px;
  }

  .ml-modal-form input[type="submit"] {
    width: 100%;

    padding: 13px 20px;
  }
}


@media (max-width: 860px){
  .ml-issue-grid{ grid-template-columns:1fr; gap:32px; }
  .ml-archive-grid{ grid-template-columns:1fr; }
  .ml-article-layout{ grid-template-columns:1fr; }
}