/* Magnivé landing — shared chrome: header, footer, buttons, forms, signup modal.
   Loaded by every public page. Page-specific layout lives in each page. */

:root {
  --mg-emerald: #082E1F; /* Deep velvet emerald, sampled from the Magnivé logo background */
  --mg-emerald-shadow: #04271A;
  --mg-emerald-light: #0E3728;
  /* Velvet surface for dark sections: fine fabric grain, soft diagonal sheen, a light source at the top left, and the emerald base. */
  --mg-velvet:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .85 0 0 0 0 .65 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(112deg, rgba(0,0,0,0) 0%, rgba(96,170,128,.085) 14%, rgba(0,0,0,0) 27%, rgba(0,0,0,.18) 40%, rgba(96,170,128,.06) 52%, rgba(0,0,0,0) 66%, rgba(96,170,128,.05) 80%, rgba(0,0,0,.15) 100%),
    radial-gradient(ellipse 80% 70% at 12% 0%, rgba(34,110,78,.38), rgba(34,110,78,0) 65%),
    linear-gradient(135deg, #0E3728 0%, #082E1F 42%, #062A1C 72%, #04271A 100%);
  --mg-cream: #F5ECD7;
  --mg-ivory: #FBF7EC;
  --mg-gold: #C9A96E;
  --mg-bronze: #7A5C1E;
  --mg-cta: #D9BC82;
  --mg-white: #FFFFFF;
  /* Derived text tones (contrast checked in the PR) */
  --mg-ink-muted: #44582F;      /* secondary text on cream / ivory / white */
  --mg-gold-soft: #D9BC82;      /* small gold text on emerald (>= 4.5:1) */
  --mg-line-light: rgba(8, 46, 31, 0.16);
  --mg-line-dark: rgba(217, 188, 130, 0.28);
  --mg-error: #9B2C1F;
  --mg-error-on-dark: #FFD9CF;
  --mg-header-h: 76px;
  --mg-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mg-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-padding-top: calc(var(--mg-header-h) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.mg-skip {
  position: absolute; left: 12px; top: -64px; z-index: 1000;
  background: var(--mg-ivory); color: var(--mg-emerald); padding: 12px 18px;
  font: 500 14px/1 var(--mg-sans); text-decoration: none; border-radius: 2px;
}
.mg-skip:focus { top: 12px; }

/* Screen-reader-only text */
.mg-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Focus (visible on both light and dark surfaces) ---------- */
.mg-header :focus-visible, .mg-footer :focus-visible, .mg-modal :focus-visible,
.mg-btn:focus-visible, .mg-field input:focus-visible {
  outline: 2px solid var(--mg-emerald);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--mg-ivory), 0 0 0 5px var(--mg-emerald);
}
.mg-header[data-theme="dark"] :focus-visible, .mg-footer :focus-visible, .on-dark :focus-visible {
  outline-color: var(--mg-ivory);
  box-shadow: 0 0 0 2px var(--mg-emerald), 0 0 0 5px var(--mg-ivory);
}

/* ---------- Buttons ---------- */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mg-cta); color: var(--mg-emerald);
  border: 1px solid transparent; border-radius: 2px;
  padding: 15px 30px; min-height: 48px;
  font: 500 12.5px/1.2 var(--mg-sans); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.mg-btn:hover {
  background: linear-gradient(135deg, #082E1F, #7A5C1E);
  color: var(--mg-ivory);
}
.mg-btn[disabled], .mg-btn[aria-disabled="true"] { cursor: progress; opacity: .85; }
.mg-btn:not(.mg-btn-sm)::after { content: "\2192" / ""; margin-left: 0.8em; letter-spacing: 0; }
.mg-btn-sm { padding: 11px 20px; min-height: 40px; font-size: 11.5px; }
.mg-btn-block { width: 100%; }
/* On emerald surfaces the hover gradient would vanish into the background, so keep a thin gold edge. */
.on-dark .mg-btn:hover, .mg-header[data-theme="dark"] .mg-btn:hover, .mg-footer .mg-btn:hover {
  border-color: var(--mg-cta);
}

/* ---------- Header ---------- */
.mg-header {
  position: sticky; top: 0; z-index: 90;
  font-family: var(--mg-sans);
}
.mg-header[data-theme="dark"] { background: var(--mg-velvet), var(--mg-emerald); border-bottom: 1px solid var(--mg-line-dark); color: var(--mg-ivory); }
.mg-header[data-theme="light"] { background: var(--mg-ivory); border-bottom: 1px solid var(--mg-line-light); color: var(--mg-emerald); }
.mg-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  height: var(--mg-header-h);
  display: flex; align-items: center; gap: 32px;
}
.mg-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.mg-logo img { display: block; height: 50px; width: auto; }
.mg-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.mg-nav a {
  font: 400 13.5px/1 var(--mg-sans); letter-spacing: 0.04em; text-decoration: none; color: inherit;
  padding: 10px 2px; border-bottom: 1px solid transparent;
}
.mg-header[data-theme="dark"] .mg-nav a { color: var(--mg-ivory); }
.mg-nav a:hover, .mg-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.mg-header .mg-btn { flex-shrink: 0; }
.mg-burger {
  display: none; margin-left: auto; flex-shrink: 0;
  width: 44px; height: 44px; border: 1px solid var(--mg-line-dark); background: transparent; border-radius: 2px;
  color: inherit; cursor: pointer; align-items: center; justify-content: center;
}
.mg-header[data-theme="light"] .mg-burger { border-color: var(--mg-line-light); }
.mg-burger span, .mg-burger span::before, .mg-burger span::after {
  display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; content: "";
  transition: transform .25s ease, background-color .25s ease;
}
.mg-burger span::before { position: absolute; top: -6px; left: 0; }
.mg-burger span::after { position: absolute; top: 6px; left: 0; }
.mg-burger[aria-expanded="true"] span { background: transparent; }
.mg-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.mg-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mg-menu { display: none; }

@media (max-width: 900px) {
  :root { --mg-header-h: 68px; }
  .mg-header-inner { padding: 0 20px; gap: 12px; }
  .mg-logo img { height: 42px; }
  .mg-nav { display: none; }
  .mg-header .mg-btn { margin-left: auto; padding: 10px 14px; min-height: 40px; font-size: 10.5px; letter-spacing: 0.12em; }
  .mg-burger { display: inline-flex; margin-left: 0; }
  .mg-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; padding: 8px 20px 20px;
    border-bottom: 1px solid var(--mg-line-dark);
  }
  .mg-menu:not([hidden]) { display: flex; }
  .mg-header[data-theme="dark"] .mg-menu { background: var(--mg-velvet), var(--mg-emerald); }
  .mg-header[data-theme="light"] .mg-menu { background: var(--mg-ivory); border-bottom-color: var(--mg-line-light); }
  .mg-menu a {
    font: 400 16px/1 var(--mg-sans); color: inherit; text-decoration: none; padding: 17px 2px;
    border-bottom: 1px solid var(--mg-line-dark);
  }
  .mg-header[data-theme="light"] .mg-menu a { border-bottom-color: var(--mg-line-light); }
  .mg-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
}
@media (max-width: 380px) {
  .mg-header-inner { padding: 0 14px; gap: 8px; }
  .mg-logo img { height: 36px; }
  .mg-header .mg-btn { padding: 9px 10px; font-size: 10px; letter-spacing: 0.08em; }
}
@media (max-width: 340px) {
  .mg-header-inner { padding: 0 10px; gap: 6px; }
  .mg-logo img { height: 32px; }
  .mg-header .mg-btn { padding: 9px 8px; letter-spacing: 0.04em; }
}

/* ---------- Footer ---------- */
.mg-footer {
  display: block; background: var(--mg-velvet), var(--mg-emerald); color: var(--mg-ivory);
  font-family: var(--mg-sans); padding: 64px 40px 36px; text-align: left; margin: 0;
  border-top: 1px solid var(--mg-line-dark);
}
.mg-footer-inner { max-width: 1160px; margin: 0 auto; }
.mg-footer-top { display: flex; flex-wrap: wrap; gap: 48px 80px; justify-content: space-between; }
.mg-footer-brand { max-width: 380px; }
.mg-footer-brand img { display: block; height: 58px; width: auto; margin-bottom: 20px; }
.mg-tagline { font: italic 300 22px/1.4 var(--mg-serif); color: var(--mg-ivory); margin-bottom: 26px; }
.mg-footer-cols { display: flex; flex-wrap: wrap; gap: 40px 72px; }
.mg-footer-col-title { font: 500 11px/1 var(--mg-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mg-gold-soft); margin-bottom: 18px; }
.mg-footer-col { display: flex; flex-direction: column; gap: 13px; }
.mg-footer-col a { color: var(--mg-ivory); text-decoration: none; font: 400 14px/1.3 var(--mg-sans); }
.mg-footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mg-footer-legal {
  margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--mg-line-dark);
  font: 400 12.5px/1.8 var(--mg-sans); color: rgba(251, 247, 236, 0.82);
}
.mg-footer-legal a { color: inherit; }
@media (max-width: 700px) {
  /* The hero CTA remains visible on phones; avoid a duplicate in the header. */
  .mg-header-invitation { display: none; }
  .mg-footer { padding: 48px 20px 30px; }
  .mg-footer-cols { gap: 32px 48px; }
}

/* ---------- Signup forms (embedded + modal) ---------- */
.mg-form { font-family: var(--mg-sans); }
.mg-name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.mg-name-row .mg-field { min-width: 0; }
@media (max-width: 360px) { .mg-name-row { grid-template-columns: 1fr; } }
.mg-field { margin-bottom: 18px; text-align: left; }
.mg-field label { display: block; font: 500 13px/1.3 var(--mg-sans); letter-spacing: 0.03em; margin-bottom: 8px; }
.mg-field input {
  display: block; width: 100%; min-height: 50px; padding: 13px 16px;
  font: 400 16px/1.3 var(--mg-sans); color: var(--mg-emerald);
  background: var(--mg-white); border: 1px solid #6F8360; border-radius: 2px;
  -webkit-appearance: none; appearance: none;
}
.mg-field input::placeholder { color: #5C6B50; opacity: 1; }
.mg-field input[aria-invalid="true"] { border-color: var(--mg-error); border-width: 2px; padding: 12px 15px; }
.mg-error {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 8px;
  font: 500 13.5px/1.4 var(--mg-sans); color: var(--mg-error);
}
.mg-error::before {
  content: "!"; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid currentColor; font: 700 11px/15px var(--mg-sans); text-align: center;
}
.mg-error[hidden] { display: none; }
.on-dark .mg-error { color: var(--mg-error-on-dark); }
.mg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mg-form-alert { margin: 0 0 16px; }
.mg-fineprint { font: 400 13px/1.6 var(--mg-sans); margin-top: 16px; text-align: center; }

/* Result panels (success / existing subscriber / error) */
.mg-result { text-align: center; padding: 8px 0 4px; font-family: var(--mg-sans); }
.mg-result:focus { outline: none; }
.mg-result-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mg-emerald); color: var(--mg-ivory);
}
.mg-result-icon.is-error { background: var(--mg-error); }
.mg-result-icon svg { width: 22px; height: 22px; }
.mg-result h2, .mg-result h3 { font: 400 clamp(28px, 4vw, 36px)/1.2 var(--mg-serif); margin: 0 0 12px; }
.mg-result p { font: 400 15.5px/1.7 var(--mg-sans); margin: 0 auto 24px; max-width: 420px; }
.on-dark .mg-result-icon { background: var(--mg-cta); color: var(--mg-emerald); }

/* ---------- Signup modal (native <dialog>) ---------- */
html.mg-modal-open { overflow: hidden; }
.mg-modal {
  padding: 0; border: 0; background: transparent; color: var(--mg-emerald);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); max-height: calc(100vh - 32px);
  overflow: visible; margin: auto;
}
.mg-modal::backdrop { background: rgba(20, 36, 10, 0.62); }
.mg-modal-panel {
  position: relative; background: var(--mg-ivory); border: 1px solid var(--mg-line-light);
  border-radius: 2px; padding: 44px 44px 36px; max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.mg-modal-close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer; color: var(--mg-emerald); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.mg-modal-close svg { width: 20px; height: 20px; }
.mg-modal-emblem { display: block; height: 52px; width: 52px; margin: 0 auto 18px; }
.mg-eyebrow-sm { font: 500 11px/1 var(--mg-sans); letter-spacing: 0.26em; text-transform: uppercase; color: var(--mg-bronze); text-align: center; margin-bottom: 14px; }
.mg-modal h2 { font: 400 clamp(28px, 5vw, 34px)/1.2 var(--mg-serif); text-align: center; margin: 0 0 14px; }
.mg-modal-copy { font: 400 15.5px/1.65 var(--mg-sans); color: var(--mg-ink-muted); text-align: center; margin: 0 auto 26px; max-width: 400px; }
.mg-modal .mg-fineprint { color: var(--mg-ink-muted); }
@media (max-width: 520px) {
  .mg-modal-panel { padding: 40px 22px 28px; }
}

/* Legal / article text links: distinguish from body text without relying on color alone. */
.container a:not(.mg-btn), .article-wrap a:not(.cta-btn):not(.mg-btn) { color: var(--mg-bronze); text-decoration: underline; text-underline-offset: 3px; }

/* Shared by the homepage section and the article signup cards. */
[data-signup-scope].is-complete .mg-hide-on-complete { display: none; }

@media (max-width: 600px) {
  .mg-header .mg-btn { max-width: 150px; white-space: normal; text-align: center; }
}