/* ============================================================
   Both True — a MASM Creations publication
   Design system. Faithful to the newsletter engine's brand:
   charcoal #1E1F27, cyan #16BCD0, periwinkle #6B6BB5,
   Georgia editorial body, Arial utility labels.
   Signature: the "both true" duality rule (cyan -> periwinkle).
   ============================================================ */

:root{
  --ink:#1E1F27;          /* charcoal masthead + headlines */
  --paper:#F7F8FB;        /* page background */
  --card:#FFFFFF;
  --cyan:#16BCD0;         /* brand cyan (accents, rules, on dark) */
  --cyan-ink:#0A7B8A;     /* accessible cyan for link TEXT on white (AA) */
  --peri:#6B6BB5;         /* periwinkle — "why this matters", strain half */
  --peri-ink:#54549A;
  --body:#26272F;         /* body text */
  --muted:#6b7280;        /* metadata */
  --hair:#e6e8f0;         /* hairlines */
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif;
  --wrap:720px;
  --wrap-wide:960px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--serif);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--cyan-ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---- Skip link (a11y) ---- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:10px 16px;z-index:20;font-family:var(--sans);font-size:14px}
.skip:focus{left:8px;top:8px;border-radius:6px}

/* ---- MASM Creations site header (shared nav, matches masmcreations.com) ---- */
.masm-bar{position:sticky;top:0;z-index:60;background:rgba(14,11,26,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(237,233,245,.10);
  font-family:'Inter',var(--sans)}
.masm-wrap{max-width:1140px;margin:0 auto;padding:0 24px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.masm-brand{display:flex;align-items:center}
.masm-brand img{height:34px;width:auto;display:block}
.masm-nav{display:flex;align-items:center;gap:22px}
.masm-nav a{color:#A39DB8;font-size:.9rem;font-weight:500;text-decoration:none;
  white-space:nowrap;transition:color .2s}
.masm-nav a:hover{color:#EDE9F5}
.masm-nav a.here{color:#EDE9F5}
.masm-cta{font-family:'Space Grotesk',var(--sans);font-weight:700;font-size:.9rem;
  padding:9px 17px;border-radius:999px;color:#0B0E1A!important;
  background:linear-gradient(100deg,#2FD0E0,#7B5BF5);
  box-shadow:0 8px 26px -8px rgba(47,208,224,.5)}
.masm-cta:hover{color:#0B0E1A!important}
.masm-burger{display:none;background:none;border:0;color:#EDE9F5;font-size:1.4rem;cursor:pointer}
@media(max-width:820px){
  .masm-nav{gap:16px}
  .masm-nav a{font-size:.86rem}
}
@media(max-width:680px){
  .masm-burger{display:block;order:3}
  .masm-nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:16px;background:#0E0B1A;padding:20px 24px;
    border-bottom:1px solid rgba(237,233,245,.10)}
  .masm-nav.open{display:flex}
  .masm-cta{align-self:stretch;text-align:center}
}

/* ---- Masthead ---- */
.masthead{background:var(--ink);color:#F5F7FA}
.masthead-inner{max-width:var(--wrap-wide);margin:0 auto;padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;flex-direction:column;text-decoration:none}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--cyan);margin:0 0 4px}
.wordmark{font-family:var(--sans);font-weight:800;font-size:30px;letter-spacing:2px;line-height:1;margin:0}
.wordmark b{color:#F5F7FA;font-weight:800}
.wordmark span{color:var(--cyan);font-weight:800}
.tagline{font-family:var(--sans);font-style:italic;font-size:12.5px;color:#9a9ab0;margin:6px 0 0}
.mast-nav{font-family:var(--sans);font-size:13px}
.mast-nav a{color:#c9cbe0;text-decoration:none;letter-spacing:.3px}
.mast-nav a:hover{color:var(--cyan)}

/* ---- Duality rule: the signature element (saves -> strains) ---- */
.duo-rule{height:3px;border:0;margin:0;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 46%,var(--peri) 54%,var(--peri) 100%)}
.duo-rule.thin{height:2px}

/* ---- Hero ---- */
.hero{max-width:var(--wrap-wide);margin:0 auto;padding:26px 22px 0}
.hero img{border-radius:12px;box-shadow:0 4px 20px rgba(20,22,30,.10)}
.hero-cap{font-family:var(--sans);font-size:12px;color:var(--muted);margin:9px 2px 0}

/* ---- Section eyebrow ---- */
.kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--peri);margin:0 0 10px}

/* ============================================================
   HUB (index)
   ============================================================ */
.lede{max-width:var(--wrap);margin:34px auto 0;padding:0 22px}
.lede p{font-size:19px;color:var(--body);margin:0}

.featured{max-width:var(--wrap);margin:26px auto 0;padding:0 22px}
.card-latest{background:var(--card);border:1px solid var(--hair);border-radius:14px;
  padding:30px 30px 28px;box-shadow:0 2px 14px rgba(20,22,30,.05);position:relative;overflow:hidden}
.card-latest::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--cyan),var(--peri))}
.badge{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:#fff;background:var(--ink);
  padding:5px 11px;border-radius:20px;margin:0 0 14px}
.card-latest .ed-title{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.22;
  color:var(--ink);margin:0 0 10px}
.card-latest .ed-title a{color:var(--ink);text-decoration:none}
.card-latest .ed-title a:hover{color:var(--cyan-ink)}
.ed-meta{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin:0 0 14px;letter-spacing:.2px}
.ed-dek{font-size:17px;color:var(--body);margin:0 0 18px}
.readlink{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.3px;
  color:var(--cyan-ink);text-decoration:none;border-bottom:2px solid var(--cyan);padding-bottom:2px}
.readlink:hover{color:var(--ink)}

/* buckets */
.buckets{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.buckets li{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--peri-ink);background:#eef0fb;
  border:1px solid #e0e2f5;border-radius:5px;padding:4px 9px}

/* archive list */
.archive{max-width:var(--wrap);margin:46px auto 0;padding:0 22px}
.archive h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.arch-list{list-style:none;margin:18px 0 0;padding:0}
.arch-item{padding:20px 0;border-top:1px solid var(--hair)}
.arch-item:first-child{border-top:0}
.arch-date{font-family:var(--sans);font-size:12px;letter-spacing:.5px;color:var(--muted);margin:0 0 5px}
.arch-title{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.3;margin:0 0 5px}
.arch-title a{color:var(--ink);text-decoration:none}
.arch-title a:hover{color:var(--cyan-ink)}
.arch-dek{font-size:15.5px;color:#4b4d57;margin:0}
.empty{font-family:var(--sans);color:var(--muted);font-size:15px;
  background:#fff;border:1px dashed var(--hair);border-radius:10px;padding:22px}

/* ============================================================
   EDITION (article)
   ============================================================ */
.article{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.art-head{max-width:var(--wrap);margin:32px auto 0;padding:0 22px}
.art-title{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1.18;
  color:var(--ink);margin:6px 0 12px;letter-spacing:-.2px}
.art-meta{font-family:var(--sans);font-size:13px;color:var(--muted);margin:0}

.art-body{margin:22px auto 0}
.art-body p{margin:0 0 18px}
.intro p:first-of-type{font-size:20px;line-height:1.6;color:var(--ink)}

/* divider band */
.divider{max-width:var(--wrap);margin:40px auto 26px;padding:0 22px}
.divider img{border-radius:10px}
.divider .dcap{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:var(--peri);margin:10px 2px 0}

/* stories */
.story{margin:0 0 30px}
.story-h{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.3;
  color:var(--ink);margin:0 0 8px}
.story-h .num{color:var(--cyan);font-weight:800}
.story-snip{margin:0 0 6px}
.src{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--cyan-ink);
  text-decoration:none;white-space:nowrap}
.src:hover{color:var(--ink)}
.src.nolink{color:var(--muted);font-weight:400}

/* why-this-matters periwinkle bar */
.why{display:flex;gap:14px;margin:10px 0 0}
.why .bar{width:4px;flex:0 0 4px;background:var(--peri);border-radius:2px}
.why-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--peri);margin:0 0 3px}
.why-text{font-family:var(--sans);font-size:15px;line-height:1.6;color:#43454f;margin:0}

/* bigger picture / takeaways */
.section-label{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink);margin:30px 0 12px}
.takeaways{margin:6px 0 18px;padding-left:20px}
.takeaways li{margin:0 0 9px;line-height:1.6}
.takeaways li::marker{color:var(--cyan)}
.outro{font-style:italic;color:#3a3c45}

/* sources */
.sources{margin:34px 0 0;padding:20px 22px;background:#fff;border:1px solid var(--hair);border-radius:12px}
.sources h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.sources ol{margin:0;padding-left:20px}
.sources li{font-family:var(--sans);font-size:13.5px;line-height:1.5;margin:0 0 8px;color:#4b4d57}
.sources a{color:var(--cyan-ink);word-break:break-word}

/* edition footer nav */
.ed-nav{max-width:var(--wrap);margin:40px auto 0;padding:0 22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:14px}
.ed-nav a{color:var(--cyan-ink);text-decoration:none;font-weight:700}
.ed-nav a:hover{color:var(--ink)}
.ed-nav .alllink{margin:0 auto}

/* ---- Site footer ---- */
.site-foot{margin-top:64px;background:var(--ink);color:#9a9ab0}
.site-foot-inner{max-width:var(--wrap-wide);margin:0 auto;padding:30px 22px;
  font-family:var(--sans);font-size:13px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;align-items:center}
.site-foot a{color:var(--cyan);text-decoration:none}
.site-foot .thesis{font-style:italic;color:#c9cbe0}

/* ---- Responsive ---- */
@media(max-width:600px){
  body{font-size:17px}
  .wordmark{font-size:26px}
  .card-latest .ed-title{font-size:24px}
  .art-title{font-size:27px}
  .card-latest{padding:26px 22px 24px}
  .mast-nav{width:100%}
}

/* ---- A11y ---- */
a:focus-visible,.readlink:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}