@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;700&family=IBM+Plex+Mono:wght@400;500;700;800&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'EB Garamond', 'Times New Roman', serif;
  background: #05080A;
  color: #EAF2EF;
  font-size: 17px; line-height: 1.55;
}
header.mast {
  border-bottom: 4px double #EAF2EF;
  padding: 18px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
header.mast .name {
  font-family: 'EB Garamond', serif; font-weight: 700;
  font-size: 28px; letter-spacing: 0.04em;
  color: #34F5A4;
}
header.mast .nav { display: flex; gap: 22px; font-family: 'IBM Plex Mono', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: #858B8A; }
header.mast .nav a { color: #EAF2EF; text-decoration: none; }
header.mast .nav a:hover { color: #34F5A4; }

.dateline {
  border-bottom: 1px solid #2A353A;
  padding: 10px 32px;
  font-family: 'IBM Plex Mono', sans-serif; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #858B8A;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

.cover {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px;
  padding: 40px 32px 28px;
}
.cover h1 {
  font-family: 'EB Garamond', serif; font-weight: 700;
  font-size: clamp(48px, 6.4vw, 86px);
  line-height: 0.98; letter-spacing: -0.015em;
  margin: 0 0 18px; color: #EAF2EF;
}
.cover .lead { font-family: 'IBM Plex Mono', sans-serif; font-size: 18px; line-height: 1.5; color: #858B8A; max-width: 640px; }
.cover .right { font-family: 'IBM Plex Mono', sans-serif; font-size: 14px; }
.cover .right .label { text-transform: uppercase; letter-spacing: 0.16em; color: #34F5A4; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.cover .right .pull { font-family: 'EB Garamond', serif; font-style: italic; font-size: 22px; line-height: 1.4; padding: 18px 0; border-top: 2px solid #EAF2EF; border-bottom: 2px solid #EAF2EF; }
.cover .right .byline { margin-top: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: #858B8A; }

.body-cols {
  padding: 28px 32px 60px;
  border-top: 1px solid #2A353A;
  font-family: 'EB Garamond', serif;
  column-count: 3; column-gap: 32px; column-rule: 1px solid #2A353A;
  font-size: 16px; line-height: 1.65;
}
.body-cols h2 {
  font-family: 'IBM Plex Mono', sans-serif; font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: #34F5A4; margin: 0 0 6px;
  break-after: avoid;
}
.body-cols h3 {
  font-family: 'EB Garamond', serif; font-weight: 700; font-size: 22px;
  line-height: 1.2; margin: 0 0 8px; color: #EAF2EF; letter-spacing: -0.005em;
  break-after: avoid;
}
.body-cols .item { break-inside: avoid; margin: 0 0 22px; }
.body-cols .item p { margin: 0; }
.body-cols .item .num { font-family: 'IBM Plex Mono', sans-serif; font-weight: 800; color: #34F5A4; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }

.cta-row { padding: 28px 32px; border-top: 4px double #EAF2EF; border-bottom: 4px double #EAF2EF; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: 'IBM Plex Mono', sans-serif; }
.cta-row .btn { background: #EAF2EF; color: #05080A; padding: 14px 24px; font-weight: 700; text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; }
.cta-row .btn:hover { background: #34F5A4; }
.cta-row .meta { margin-left: auto; color: #858B8A; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }

footer { padding: 22px 32px; font-family: 'IBM Plex Mono', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: #858B8A; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
footer a { color: #EAF2EF; text-decoration: none; }

@media (max-width: 880px) {
  .cover { grid-template-columns: 1fr; }
  .body-cols { column-count: 1; }
}

/* Privacy / support */
.feature-page { max-width: 920px; margin: 0 auto; padding: 36px 32px 60px; font-family: 'EB Garamond', serif; }
.feature-page h1 { font-family: 'EB Garamond', serif; font-weight: 700; font-size: clamp(40px, 5vw, 64px); margin: 0 0 8px; line-height: 1; letter-spacing: -0.015em; color: #34F5A4; }
.feature-page .meta { font-family: 'IBM Plex Mono', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: #858B8A; padding-bottom: 18px; border-bottom: 4px double #EAF2EF; margin-bottom: 26px; }
.feature-page article { display: grid; grid-template-columns: 80px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid #2A353A; }
.feature-page article:first-of-type { border-top: 0; }
.feature-page article .num { font-family: 'IBM Plex Mono', sans-serif; font-weight: 800; color: #34F5A4; font-size: 13px; letter-spacing: 0.18em; }
.feature-page article h2 { font-family: 'EB Garamond', serif; font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.feature-page article p { margin: 0; font-size: 16px; line-height: 1.65; }

.faq-page-grp { margin-top: 36px; padding-top: 18px; border-top: 4px double #EAF2EF; }
.faq-page-grp h2 { font-family: 'IBM Plex Mono', sans-serif; font-size: 13px; letter-spacing: 0.18em; color: #34F5A4; text-transform: uppercase; font-weight: 800; }
.faq-page-grp .qa { margin: 16px 0; }
.faq-page-grp .qa h4 { font-family: 'EB Garamond', serif; font-weight: 700; font-size: 19px; margin: 0 0 4px; }
.faq-page-grp .qa p { font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.65; margin: 0; }

/* Magazine letter-to-the-editor form — serif inputs, columned layout */
.cf-mag { margin: 30px 0; padding: 28px 0 26px; border-top: 4px double #EAF2EF; border-bottom: 4px double #EAF2EF; }
.cf-mag .cf-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid #2A353A; margin-bottom: 22px; }
.cf-mag .cf-head h2 { font-family: 'EB Garamond',serif; font-weight: 700; font-size: 38px; line-height: 1; margin: 0; letter-spacing: -0.01em; color: #EAF2EF; }
.cf-mag .cf-intro { font-family: 'EB Garamond',serif; font-size: 16px; font-style: italic; color: #858B8A; margin: 0; }
.cf-mag .cf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.cf-mag .cf-label.cf-subject, .cf-mag .cf-label.cf-message { grid-column: span 2; }
.cf-mag .cf-label > span { display: block; font-family: 'IBM Plex Mono',sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #34F5A4; font-weight: 800; margin-bottom: 6px; }
.cf-mag input, .cf-mag textarea { width: 100%; font-family: 'EB Garamond',serif; font-size: 17px; padding: 8px 0; border: 0; border-bottom: 2px solid #EAF2EF; background: transparent; color: #EAF2EF; }
.cf-mag input:focus, .cf-mag textarea:focus { outline: none; border-bottom-color: #34F5A4; }
.cf-mag textarea { min-height: 130px; resize: vertical; padding: 10px 0; line-height: 1.55; }
.cf-mag .cf-hp { display: none; }
.cf-mag .cf-actions { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid #2A353A; }
.cf-mag .cf-submit { background: #EAF2EF; color: #05080A; font-family: 'IBM Plex Mono',sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 28px; border: 0; cursor: pointer; }
.cf-mag .cf-submit:hover { background: #34F5A4; }
.cf-mag .cf-direct { font-family: 'IBM Plex Mono',sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #858B8A; }
.cf-mag .cf-direct a { color: #EAF2EF; }
@media (max-width: 640px) { .cf-mag .cf-head { grid-template-columns: 1fr; } .cf-mag .cf-fields { grid-template-columns: 1fr; } .cf-mag .cf-label.cf-subject, .cf-mag .cf-label.cf-message { grid-column: span 1; } }