/* =========================================================================
   MAYIM OPS - BLOG
   -------------------------------------------------------------------------
   Tokens, type and chrome are lifted from index.html so the blog is the same
   site rather than a lookalike. Kept in one external file instead of inlined
   in eleven pages, because eleven copies is eleven places to edit.
   ========================================================================= */

:root{
  --navy: #10193B;
  --navy-soft: #1C2B57;
  --sky: #A9D3F5;
  --sky-soft: #EAF3FC;
  --sky-mid: #CFE4F8;
  --paper: #FBFCFE;
  --ink: #16203F;
  --slate: #55617A;
  --slate-light: #8593AB;
  --line: #DDE6F1;
  --amber: #C9873F;
  --wave: #9FC7EF;
  --radius: 2px;
  --measure: 700px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--navy);
}

.eyebrow{
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--slate);
}
.eyebrow .dot{ color:var(--amber); }

/* Focus is visible everywhere. A keyboard user should never have to guess. */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:var(--radius);
  font-family:'Inter', sans-serif; font-weight:600; font-size:14.5px;
  letter-spacing:0.01em; cursor:pointer; border:1px solid transparent;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,25,59,0.22); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:#fff; }
.btn-inverse{ background:#fff; color:var(--navy); }
.btn-inverse:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,0.16); }
.btn-text{ font-weight:600; font-size:14.5px; border-bottom:1px solid var(--navy); padding-bottom:2px; }
.btn-text.muted{ border-color:var(--slate-light); color:var(--slate); }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,252,254,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.logo-mark{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:38px; font-size:14.5px; font-weight:500; color:var(--navy-soft); }
.nav-links a{ opacity:0.82; transition:opacity .15s ease; }
.nav-links a:hover{ opacity:1; }
.nav-links a[aria-current="page"]{ opacity:1; color:var(--navy); border-bottom:1px solid var(--wave); padding-bottom:3px; }
.nav-right{ display:flex; align-items:center; gap:26px; }
@media (max-width:900px){ .nav-links{ display:none; } }

/* On a phone the full-height bar plus two wrapping labels was consuming a
   third of the viewport before a single word of the article appeared. Drop
   the secondary link and tighten the bar. */
@media (max-width:640px){
  nav.wrap{ height:62px; }
  .logo-mark{ height:24px; }
  .nav-right{ gap:16px; }
  .nav-right .btn{ padding:11px 16px; font-size:13.5px; }
  .nav-right .btn-text{ display:none; }
}

/* Reading progress. The wave from the wordmark, filling as you read: the one
   piece of decoration on the page, and it reports something true. */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--sky), var(--wave));
  z-index:60; transition:width .1s linear;
}

/* ---------- article ---------- */
.article-head{ padding:72px 0 0; }
.article-head .wrap{ max-width:var(--measure); }
.crumbs{ font-size:13px; color:var(--slate-light); margin-bottom:26px; }
.crumbs a{ border-bottom:1px solid var(--line); }
.crumbs a:hover{ color:var(--navy); border-color:var(--wave); }
.crumbs span{ margin:0 8px; color:var(--sky-mid); }

.article-head h1{
  font-size:44px; line-height:1.14; margin:16px 0 20px;
}
@media (max-width:640px){ .article-head h1{ font-size:31px; } }

.dek{ font-size:19px; line-height:1.62; color:var(--slate); }
.byline{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13px; color:var(--slate-light);
}
.byline strong{ color:var(--navy-soft); font-weight:600; }

/* The wave rule: a flattened version of the logo's curve, used to close the
   masthead and open each section. */
.wave-rule{ display:block; width:100%; height:14px; margin:38px 0 0; overflow:visible; }
.wave-rule path{ fill:none; stroke:var(--wave); stroke-width:2; }

article.post{ padding:10px 0 40px; }
article.post .wrap{ max-width:var(--measure); }

article.post p{ font-size:17.5px; line-height:1.75; color:var(--ink); margin:0 0 22px; }
article.post h2{ font-size:28px; line-height:1.25; margin:52px 0 18px; scroll-margin-top:104px; }
article.post h3{ font-size:20px; line-height:1.35; margin:34px 0 12px; }
article.post ul, article.post ol{ margin:0 0 24px; padding-left:22px; }
article.post li{ font-size:17.5px; line-height:1.7; margin-bottom:10px; }
article.post li::marker{ color:var(--wave); }
article.post strong{ font-weight:600; color:var(--navy); }
article.post a{ border-bottom:1px solid var(--sky); }
article.post a:hover{ border-color:var(--navy); }

/* Direct-answer block. Sits above the fold, states the answer in two or three
   sentences, and is the thing an answer engine should be able to lift whole. */
.answer{
  background:var(--sky-soft); border-left:3px solid var(--navy);
  padding:26px 30px; margin:34px 0 40px; border-radius:var(--radius);
}
.answer h2{ font-size:13px; font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
  margin:0 0 12px; }
.answer p{ font-size:18px; margin:0; color:var(--navy-soft); }

.takeaways{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; margin:0 0 44px; background:#fff;
}
.takeaways h2{ font-size:13px; font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate);
  margin:0 0 16px; }
.takeaways ul{ margin:0; padding-left:20px; }
.takeaways li{ font-size:16px; margin-bottom:10px; }
.takeaways li:last-child{ margin-bottom:0; }

.toc{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; margin:0 0 46px; }
.toc h2{ font-size:12.5px; font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-light);
  margin:0 0 14px; }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ font-size:15.5px; margin-bottom:8px; color:var(--navy-soft); }
.toc a{ border-bottom:1px solid transparent; }
.toc a:hover{ border-color:var(--wave); }

/* A term and its definition, marked up so it reads as a definition to a person
   and to a machine. */
.define{
  border:1px solid var(--sky-mid); border-radius:var(--radius);
  background:#fff; padding:22px 26px; margin:0 0 30px;
}
.define dt{ font-family:'Fraunces',serif; font-size:18px; color:var(--navy); margin-bottom:6px; }
.define dd{ font-size:16.5px; line-height:1.65; color:var(--slate); margin:0; }

.stat{
  display:flex; gap:20px; align-items:flex-start;
  border-left:3px solid var(--amber); padding:6px 0 6px 22px; margin:0 0 30px;
}
.stat .num{ font-family:'Fraunces',serif; font-size:38px; line-height:1; color:var(--navy); flex-shrink:0; }
.stat p{ font-size:15.5px; color:var(--slate); margin:0; }

blockquote{
  font-family:'Fraunces',serif; font-size:22px; line-height:1.5;
  color:var(--navy); border-left:3px solid var(--sky); padding-left:24px; margin:34px 0;
}

.tbl{ width:100%; border-collapse:collapse; margin:0 0 30px; font-size:15.5px; }
.tbl th, .tbl td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-light); font-weight:700; }
.tbl td:first-child{ font-weight:600; color:var(--navy); white-space:nowrap; }
@media (max-width:640px){ .tbl td:first-child{ white-space:normal; } }

/* ---------- faq ---------- */
.faq{ margin:56px 0 0; padding-top:40px; border-top:1px solid var(--line); }
.faq h2{ margin-top:0; }
.faq h3{ font-size:18px; margin:28px 0 8px; }
.faq p{ font-size:16.5px; color:var(--slate); }

/* ---------- cta band ---------- */
.cta-band{ background:var(--navy); color:#fff; margin-top:70px; padding:64px 0; }
.cta-band .wrap{ max-width:var(--measure); }
.cta-band h2{ color:#fff; font-size:30px; margin:0 0 14px; }
.cta-band p{ color:rgba(255,255,255,0.74); font-size:17px; margin:0 0 28px; }
.cta-band .note{ font-size:13px; color:rgba(255,255,255,0.5); margin:18px 0 0; }

/* ---------- related ---------- */
.related{ padding:70px 0; }
.related .wrap{ max-width:var(--measure); }
.related h2{ font-size:13px; font-family:'Inter',sans-serif; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); margin:0 0 24px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:760px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{ border-top:2px solid var(--line); padding-top:16px; transition:border-color .18s ease; }
.related-card:hover{ border-color:var(--navy); }
.related-card .kicker{ font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-light); }
.related-card h3{ font-size:17.5px; line-height:1.35; margin:8px 0 0; }

/* ---------- blog index ---------- */
.index-head{ padding:86px 0 54px; border-bottom:1px solid var(--line); }
.index-head h1{ font-size:52px; line-height:1.1; margin:18px 0 20px; max-width:820px; }
@media (max-width:640px){ .index-head h1{ font-size:35px; } }
.index-head .dek{ max-width:640px; }

.post-list{ padding:20px 0 90px; }
.post-item{
  display:grid; grid-template-columns:150px 1fr; gap:40px;
  padding:40px 0; border-bottom:1px solid var(--line);
}
@media (max-width:760px){ .post-item{ grid-template-columns:1fr; gap:14px; } }
.post-item:hover h2{ color:var(--navy-soft); }
.post-meta{ font-size:12.5px; color:var(--slate-light); line-height:1.7; }
.post-meta .cat{ display:block; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); margin-bottom:6px; }
.post-item h2{ font-size:27px; line-height:1.24; margin:0 0 12px; }
@media (max-width:640px){ .post-item h2{ font-size:22px; } }
.post-item p{ font-size:16.5px; color:var(--slate); margin:0 0 14px; max-width:640px; }
.post-item .more{ font-size:14px; font-weight:600; color:var(--navy); border-bottom:1px solid var(--wave); padding-bottom:2px; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:64px 0 34px; background:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:40px; padding-bottom:56px; }
@media (max-width:760px){ .footer-top{ grid-template-columns:1fr 1fr; } }
.footer-brand .logo-mark{ margin-bottom:18px; }
.footer-brand p{ font-size:13.5px; color:var(--slate-light); max-width:260px; }
.footer-col h5{ font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-light); margin-bottom:18px; }
.footer-col a{ display:block; font-size:14.5px; color:var(--navy-soft); margin-bottom:12px; opacity:0.85; }
.footer-col a:hover{ opacity:1; }
.footer-col-note{ font-size:13px; color:var(--slate-light); line-height:1.6; margin:-2px 0 16px; max-width:230px; }
.socials{ display:flex; flex-wrap:wrap; gap:16px; }
.socials a{ display:inline-flex; align-items:center; justify-content:center; color:var(--navy); transition:opacity .15s ease, transform .15s ease; opacity:0.9; }
.socials a:hover{ opacity:1; transform:translateY(-1px); }
.socials svg{ width:19px; height:19px; fill:currentColor; display:block; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--slate-light); flex-wrap:wrap; gap:14px; }

@media (max-width:640px){
  .wrap{ padding:0 22px; }
  .article-head{ padding-top:44px; }
  /* Anchor offset has to track the shorter mobile header, or a jumped-to
     heading lands underneath it. */
  article.post h2{ scroll-margin-top:78px; font-size:24px; }
  article.post h3{ font-size:18.5px; }
  article.post p, article.post li{ font-size:16.5px; }
  .tbl{ font-size:14px; }
  .tbl th, .tbl td{ padding:10px 8px; }
  .stat{ gap:14px; }
  .stat .num{ font-size:30px; }
  blockquote{ font-size:19px; padding-left:18px; }
  .answer, .takeaways, .define{ padding:20px 20px; }
}