/* ===========================================================================
   MYB News — the design system. One file. Every page loads this and nothing
   else, so the site can never drift out of step with itself again.

   The rule: dark band at the top for the brand, paper underneath for reading.
   =========================================================================== */

:root{
  /* surface */
  --paper:#FBFAF8;
  --card:#FFFFFF;
  --sunk:#F4F2ED;

  /* ink */
  --ink:#14181D;
  --ink2:#3E4650;
  --muted:#6B747F;
  --faint:#99A2AC;

  /* lines */
  --rule:#E5E3DD;
  --rule2:#EFEDE8;

  /* brand */
  --blue:#1B4FD9;
  --blue-d:#1540B0;
  --blue-wash:rgba(27,79,217,.08);
  --red:#D2322A;
  --up:#1A8A4F;
  --down:#C4322A;

  /* WhatsApp's own colours, for the chat mock-up on the homepage. Literal
     because they depict another product's interface, not our palette. */
  --wa-paper:#EFEAE2;
  --wa-bubble:#D9FDD3;

  /* the dark band */
  --band:#0A1020;
  --band2:#060B16;
  --band-ink:rgba(255,255,255,.72);

  /* type */
  --display:"Bebas Neue",Impact,"Haettenschweiler",sans-serif;
  --sans:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;

  /* metrics */
  --wide:1120px;
  --read:720px;
  --gut:24px;
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --shadow:0 1px 2px rgba(20,24,29,.04),0 8px 24px -12px rgba(20,24,29,.10);
}

*{box-sizing:border-box}
[hidden]{display:none!important}          /* must beat any display: rule */

html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);overflow-x:hidden}
body{font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* ---------- masthead ---------------------------------------------------- */
.mast{background:var(--band);color:#fff;position:relative;z-index:20}
.mast-in{max-width:var(--wide);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:18px}
.mast-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:1.42rem;letter-spacing:.065em;line-height:1;color:#fff;flex:0 0 auto}
.mast-brand img{width:32px;height:auto}
.mast-nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:.84rem;
  font-weight:500;color:var(--band-ink)}
.mast-nav a{padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.mast-nav a:hover{color:#fff}
.mast-nav a.on{color:#fff;border-bottom-color:var(--red)}
.mast-cta{background:var(--red);color:#fff;border-radius:999px;padding:8px 15px;
  font-size:.79rem;font-weight:700;white-space:nowrap;line-height:1;border-bottom:0!important}
.mast-cta:hover{background:#B8251E;color:#fff}

/* ---------- page furniture ---------------------------------------------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gut)}
.wrap-read{max-width:var(--read);margin:0 auto;padding:0 var(--gut)}

.hero{background:linear-gradient(170deg,var(--band) 0%,var(--band2) 100%);color:#fff;
  border-bottom:3px solid var(--blue)}
.hero-in{max-width:var(--wide);margin:0 auto;padding:34px var(--gut) 38px}
.hero-in.read{max-width:var(--read)}
.hero h1{font-family:var(--display);font-weight:400;letter-spacing:.03em;line-height:1;
  font-size:clamp(2.2rem,5.6vw,3.4rem);margin:0 0 12px;color:#fff}
.hero p{color:rgba(255,255,255,.72);font-size:1.03rem;line-height:1.6;max-width:58ch;margin:0}
.crumb{font-size:.78rem;color:rgba(255,255,255,.46);margin:0 0 12px;letter-spacing:.01em}
.crumb a:hover{color:#fff}

h1,h2,h3,h4{margin:0;line-height:1.22;letter-spacing:-.008em}
.kick{font-family:var(--display);font-size:.88rem;letter-spacing:.13em;color:var(--blue);
  line-height:1;display:block}
.kick.grey{color:var(--faint)}
.sec-h{font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.06em;
  margin:0 0 14px;color:var(--ink)}
.sec-h.muted{color:var(--muted)}
.lede{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--muted);margin:0}

/* ---------- controls ---------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:.8rem;font-weight:500;padding:7px 15px;border-radius:999px;
  border:1px solid var(--rule);background:var(--card);color:var(--muted);
  transition:border-color .15s,color .15s,background .15s;cursor:pointer;line-height:1.3}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:11px 22px;font-size:.92rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  line-height:1}
.btn-pri{background:var(--blue);color:#fff}
.btn-pri:hover{background:var(--blue-d);color:#fff}
.btn-ghost{background:var(--card);border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--card)}
.btn-wa{background:#1FB855;color:#fff}
.btn-wa:hover{background:#189246;color:#fff}
.btn-sm{padding:8px 15px;font-size:.82rem}

/* ---------- cards & lists ----------------------------------------------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;transition:border-color .15s,box-shadow .18s,transform .18s}
.card:hover{border-color:#D6D3CB;box-shadow:var(--shadow);transform:translateY(-1px)}
.card-pic{display:block;width:100%;aspect-ratio:16/9;background:var(--sunk);overflow:hidden}
.card-pic img{width:100%;height:100%;object-fit:cover}
.card-body{padding:15px 17px 17px}
.card h3{font-size:1.06rem;font-weight:600;line-height:1.36;margin:6px 0 0}
.card:hover h3{color:var(--blue)}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid-2{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--rule2)}
.list li:first-child{border-top:0}

.byline{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--faint);
  margin-top:10px;flex-wrap:wrap}
.byline .mark{width:16px;height:auto;flex:0 0 auto}
.byline b{color:var(--muted);font-weight:600}
.dot{width:3px;height:3px;border-radius:50%;background:var(--rule);flex:0 0 auto}

.note{padding:17px 19px;background:var(--sunk);border:1px solid var(--rule);
  border-radius:var(--r);font-size:.88rem;line-height:1.62;color:var(--muted)}
.note b{color:var(--ink)}
.note a{color:var(--blue);font-weight:600}

.empty{padding:56px 0 64px;text-align:center;color:var(--muted)}
.empty h2{font-family:var(--display);font-weight:400;font-size:1.85rem;letter-spacing:.04em;
  margin:0 0 10px;color:var(--ink)}
.empty p{margin:0 auto;max-width:44ch}

/* ---------- article ----------------------------------------------------- */
.prose{font-family:var(--serif);font-size:1.18rem;line-height:1.72;color:var(--ink)}
.prose p{margin:0 0 1.1em}
.prose > p:first-child{font-size:1.25rem;color:var(--ink)}
.prose h2{font-family:var(--sans);font-size:1.3rem;font-weight:700;line-height:1.3;
  margin:1.95em 0 .62em}
.prose h3{font-family:var(--sans);font-size:1.08rem;font-weight:700;margin:1.6em 0 .5em}
.prose strong{font-weight:600}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.25em}
.prose li{margin:0 0 .45em}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--blue);
  color:var(--muted);font-style:italic}


/* ---------- the price ticker -------------------------------------------- */
/* Painted by /tape.js into #tapeA and #tapeB. This lived in nine separate
   inline blocks and had already drifted into three different backgrounds and
   two different value colours, which is the exact problem this file exists to
   prevent. One copy, here. */
.tape{overflow:hidden;background:var(--sunk);border-block:1px solid var(--rule);padding:10px 0}
.tape .track{display:flex;width:max-content;white-space:nowrap;font-family:var(--display);
  font-size:clamp(.98rem,1.5vw,1.2rem);letter-spacing:.05em;font-variant-numeric:tabular-nums;
  animation:runL 40s linear infinite}
.tape.rev .track{animation:runR 52s linear infinite}
.tape .cell{display:inline-flex;align-items:baseline;gap:9px;padding:0 clamp(15px,2.4vw,30px)}
.tape .sym{color:var(--faint)}
.tape .val{color:var(--ink)}
.tape .up{color:var(--up)}
.tape .dn{color:var(--down)}
@keyframes runL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes runR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.tape .track{animation:none}}

/* ---------- small gaps the system was missing --------------------------- */
/* Links inside body copy were unstyled, so each page invented its own rule and
   the article pages ended up different from /about/. */
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:hover{color:var(--blue-d)}
.grid,.grid-2{margin-bottom:28px}
/* A card that is not a link should not pretend to lift under the cursor. */
.card-static:hover{border-color:var(--rule);box-shadow:none;transform:none}
/* A plain row of buttons is not a row of filter pills. */
.btn-row{display:flex;flex-wrap:wrap;gap:11px;align-items:center}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--band2);color:rgba(255,255,255,.5);font-size:.85rem;margin-top:56px}
.foot-in{max-width:var(--wide);margin:0 auto;padding:36px var(--gut) 30px;
  display:grid;gap:26px;grid-template-columns:1.4fr 1fr 1fr}
.foot h4{font-family:var(--display);font-weight:400;font-size:1rem;letter-spacing:.1em;
  color:rgba(255,255,255,.82);margin:0 0 10px}
.foot a{color:rgba(255,255,255,.62);display:block;padding:3px 0}
.foot a:hover{color:#fff}
.foot-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:1.2rem;letter-spacing:.06em;color:#fff;margin-bottom:10px}
.foot-brand img{width:28px}
.foot-base{border-top:1px solid rgba(255,255,255,.1);margin-top:4px}
.foot-base-in{max-width:var(--wide);margin:0 auto;padding:16px var(--gut);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.79rem;
  color:rgba(255,255,255,.38)}

/* ---------- responsive -------------------------------------------------- */
@media (max-width:860px){
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .mast-cta{display:none}          /* the footer and the hero both carry this call anyway */
}
@media (max-width:620px){
  :root{--gut:18px}
  body{font-size:15.5px}
  .mast-nav{gap:14px;font-size:.79rem}
  .mast-brand{font-size:1.24rem}
  .mast-brand img{width:28px}
  .prose{font-size:1.1rem}
  .prose > p:first-child{font-size:1.16rem}
  .foot-in{grid-template-columns:1fr;gap:20px}
  .grid{gap:16px;grid-template-columns:1fr}
}
@media (max-width:420px){
  .mast-nav .hide-xs{display:none}
}