/* ═══════════════════════════════════════════════════════════════════════════
   5MTBot blog + articles — skin (2026-09-12), the landing's warm system

   Pure presentation for blog.html and the five article-*.html pages, which all
   share one identical head <style> block. Linked right after that block.
   These pages run the Tailwind PLAY CDN, which injects its utility <style> at
   the END of <head> at runtime — after this file. So anything that has to beat
   a utility class is prefixed (body/main) or !important. Roll back by
   deleting the <link> in each page.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url(/fonts/ibm-plex-sans-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─── Tokens (same values as land-skin.css) ─── */
[data-theme="night"]{--b1:17% 0.013 58; --b2:14.5% 0.012 58; --b3:12.5% 0.011 58; --bc:91% 0.012 75}
:root{
  --ink:#0d0a07; --ink-2:#110d0a; --panel:#15100c; --panel-2:#1b1510;
  --hair:rgba(255,232,208,.075); --hair-2:rgba(255,232,208,.13);
  --t-hi:#f7f1ea; --t:#dacfc2; --t-mid:#a99b8d; --t-low:#7e7166;
  --amber:#ff8a2b; --amber-hi:#ffb36b; --green:#34d399;

  --f-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* reading face — mono, matching the site-wide typewriter rule below.
     Point at var(--f-sans) to swap the blog to a sans. */
  --f-body:var(--f-mono);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .84 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the pages' own "Typewriter font" block: same selectors + !important, later */
*, ::before, ::after, input, textarea, select, button{font-family:var(--f-body)!important}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background-color:var(--ink)!important;background-image:var(--grain);color:var(--t);letter-spacing:-.004em}
::selection{background:rgba(255,138,43,.34);color:#fff}
a:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px;border-radius:6px}

/* ─── Nav ─── */
body > .navbar{min-height:64px;padding:0 clamp(10px,2.4vw,28px);background:rgba(13,10,7,.82)!important;
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-bottom-color:var(--hair)!important}
body > .navbar .navbar-start > a{font-size:15.5px;letter-spacing:-.015em;gap:.6rem;padding-left:.35rem}
body > .navbar .navbar-start > a span{font-weight:600}

/* buttons: .neon-static is every CTA on these pages */
body .neon-static{height:40px;padding:0 16px 0 18px;gap:9px;border-radius:9px;white-space:nowrap;
  font-size:13.5px;font-weight:600;letter-spacing:-.005em;text-transform:none;
  color:var(--t);background:rgba(255,236,214,.03);border:1px solid var(--hair-2);box-shadow:none;transition:background .2s,border-color .2s,color .2s}
body .neon-static:hover{color:var(--t-hi);background:rgba(255,236,214,.07);border-color:rgba(255,236,214,.26);box-shadow:none}
/* primary: the nav button and the first CTA of each pair */
body > .navbar .neon-static,main .justify-center > .neon-static:first-child{
  color:#1b0f05;border:0;background:linear-gradient(180deg,#ffa24f,#ff8428);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.16),0 10px 26px -12px rgba(255,132,40,.8)}
body > .navbar .neon-static:hover,main .justify-center > .neon-static:first-child:hover{
  color:#1b0f05;background:linear-gradient(180deg,#ffb268,#ff8f38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.14),0 14px 30px -12px rgba(255,132,40,.95)}
body > .navbar .neon-static::after,main .justify-center > .neon-static::after{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
main .justify-center > .neon-static{height:46px;padding:0 20px 0 22px;font-size:14.5px}

/* ─── Page header ─── */
main{padding-top:4.5rem!important;padding-bottom:5.5rem!important}
/* blog index kicker + article breadcrumb share one caption style */
main > .mb-10 > span:first-child,main > .mb-8 > .text-xs{display:flex;align-items:center;gap:.65rem;
  font-size:11.5px!important;font-weight:500!important;letter-spacing:.07em!important;text-transform:uppercase;color:var(--t-low)}
main > .mb-10 > span:first-child{color:var(--amber-hi)!important}
main > .mb-10 > span:first-child::before,main > .mb-8 > .text-xs::before{content:"";width:18px;height:1px;background:var(--amber-hi);opacity:.75;flex:none}
main > .mb-8 > .text-xs a{letter-spacing:.07em!important;font-weight:500!important;color:var(--amber-hi)!important}
main > .mb-8 > .text-xs span{color:var(--t-low)!important;text-transform:none;letter-spacing:0}

main h1.gradient-text{margin-top:1rem!important;background:none;-webkit-text-fill-color:currentColor;color:var(--t-hi);
  font-weight:600!important;letter-spacing:-.045em!important;line-height:1.05}
main > .mb-10 h1{font-size:clamp(2.1rem,4.4vw,3.4rem)!important}
main > .mb-8 h1{font-size:clamp(1.85rem,3.6vw,2.75rem)!important}
main > .mb-10 > p{margin-top:1.1rem!important;max-width:40rem;font-size:15.5px;line-height:1.65;color:var(--t-mid)!important}
main > .mb-10{margin-bottom:3rem!important}
main > .mb-8{margin-bottom:2.75rem!important}

/* ─── Blog index: one numbered table of contents ─── */
main > .flex.flex-col.gap-5{gap:1px!important;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;counter-reset:post}
main > .flex.flex-col.gap-5 > a.post{position:relative;counter-increment:post;display:block;
  padding:28px 30px 28px 92px;border:0!important;border-radius:0;background:var(--ink);transition:background .2s ease}
main > .flex.flex-col.gap-5 > a.post::before{content:counter(post,decimal-leading-zero);position:absolute;left:32px;top:31px;
  font-size:12px;letter-spacing:.06em;color:var(--t-low);transition:color .2s ease}
main > .flex.flex-col.gap-5 > a.post::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);opacity:0;transition:opacity .2s ease}
main > .flex.flex-col.gap-5 > a.post:hover{background:#130f0b}
main > .flex.flex-col.gap-5 > a.post:hover::before{color:var(--amber-hi)}
main > .flex.flex-col.gap-5 > a.post:hover::after{opacity:1}
main > .flex.flex-col.gap-5 > a.post h2{color:var(--t-hi)!important;font-size:19px;font-weight:600;letter-spacing:-.02em}
main > .flex.flex-col.gap-5 > a.post p{max-width:44rem;margin-top:.55rem;font-size:14.5px;line-height:1.7;color:var(--t-mid)}
main > .flex.flex-col.gap-5 > a.post > span{display:inline-flex;align-items:center;gap:.4rem;margin-top:.95rem;
  font-size:12px!important;font-weight:500!important;letter-spacing:.04em;color:var(--amber-hi)!important}
main > .flex.flex-col.gap-5 > a.post:hover > span{color:#ffc98c!important}
main > .mt-10{margin-top:3.5rem!important}

/* ─── Article: left nav ─── */
.nav-label{margin-bottom:.5rem!important;font-size:11px;font-weight:500;letter-spacing:.09em;color:var(--t-low)}
body .nav-card{gap:10px;padding:9px 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;
  font-size:13px;font-weight:500;letter-spacing:-.005em;line-height:1.35;color:var(--t-mid)}
body .nav-card:hover{background:rgba(255,236,214,.045);color:var(--t-hi);box-shadow:none}
body .nav-card .dot{width:6px;height:6px}
/* the current article is marked with an inline style — restyle that one */
body .nav-card[style*="background"]{background:rgba(255,138,43,.10)!important;color:var(--t-hi)!important;box-shadow:inset 2px 0 0 var(--amber)}
body .nav-card[href="/blog"]{margin-bottom:.35rem;color:var(--t-low)}
body .nav-card[href="/blog"] .dot{display:none}
main aside > div{gap:2px!important}

/* ─── Article: body ─── */
main section.post{padding:32px 34px 34px;border-radius:14px;border:1px solid var(--hair);border-left:2px solid var(--amber);
  background:linear-gradient(180deg,rgba(255,236,214,.02),rgba(255,236,214,0) 30%),var(--panel);scroll-margin-top:90px}
main section.post.a-rules{border-left-color:#ff9d5c}
main section.post.a-const{border-left-color:#ffb36b}
main section.post.a-emerald{border-left-color:var(--green)}
main section.post h2{margin-top:.9rem!important;color:var(--t-hi)!important;font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.25}
main section.post p{margin-top:1rem;font-size:15px;line-height:1.8;color:var(--t-mid)}
main section.post p:first-of-type{margin-top:.85rem}
main section.post b{font-weight:600;color:var(--t-hi)}
main section.post b.t-rules{color:#ff9d5c}
main section.post b.t-const{color:var(--amber-hi)}
main section.post b.t-simple{color:var(--green)}
main section.post ul{margin-top:1.1rem;color:var(--t-mid)}
main section.post li{position:relative;margin:0;padding:.55rem 0 .55rem 1.5rem;list-style:none;font-size:15px;line-height:1.75;border-top:1px solid var(--hair)}
main section.post li:first-child{border-top:0}
main section.post li::before{content:"";position:absolute;left:0;top:1.35rem;width:10px;height:1px;background:var(--amber-hi)}
main section.post p.text-xs{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--hair);font-size:12px;line-height:1.65;color:var(--t-low)!important}
body .chip{padding:3px 8px;border-radius:5px;font-size:10.5px;font-weight:500;letter-spacing:.07em}
body .c-date{background:rgba(255,236,214,.06);color:var(--t-mid)}

/* prev / next link row + closing CTA block */
main .justify-between > .neon-static{height:44px;font-size:13.5px}
main .flex-1 > .mt-4.text-center{margin-top:2.5rem!important;padding:30px 24px 32px;border:1px solid var(--hair);border-radius:14px;background:var(--panel)}
main .flex-1 > .mt-4.text-center > p{font-size:14.5px;color:var(--t-mid)!important}

/* ─── Announcement blocks (fee-update post): comparison table, date strip, note ─── */
main section.post .fee-table{margin-top:1.4rem;overflow-x:auto;border:1px solid var(--hair);border-radius:12px;background:var(--ink)}
main section.post .fee-table table{width:100%;min-width:440px;border-collapse:collapse}
main section.post .fee-table th{padding:12px 18px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--hair);
  font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--t-low)}
main section.post .fee-table td{padding:15px 18px;text-align:right;white-space:nowrap;border-top:1px solid var(--hair);
  font-size:15px;color:var(--t-mid);font-variant-numeric:tabular-nums}
main section.post .fee-table tr:first-child td{border-top:0}
main section.post .fee-table th:first-child,main section.post .fee-table td:first-child{text-align:left;white-space:normal}
main section.post .fee-table td:first-child{font-weight:600;color:var(--t-hi)}
main section.post .fee-table td:first-child span{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--t-low)}
main section.post .fee-table td b{font-size:18px;font-weight:600;color:var(--amber-hi)}
main section.post .fee-table td:nth-child(2){text-decoration:line-through;text-decoration-color:rgba(255,236,214,.28)}

main section.post .fee-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1rem;
  overflow:hidden;border:1px solid var(--hair);border-radius:12px;background:var(--hair)}
main section.post .fee-dates > div{padding:14px 16px;background:var(--ink);font-size:13px;color:var(--t-mid)}
main section.post .fee-dates span{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t-low)}
main section.post .fee-dates > .on{background:linear-gradient(180deg,rgba(255,138,43,.12),rgba(255,138,43,.04));color:var(--t-hi)}
main section.post .fee-dates > .on span{color:var(--amber-hi)}

main section.post p.fee-note{margin-top:1.25rem;padding:14px 18px;border-radius:10px;border:1px solid var(--hair);
  border-left:2px solid var(--amber);background:rgba(255,236,214,.025);font-size:14px;color:var(--t-mid)}
@media (max-width:640px){
  main section.post .fee-dates{grid-template-columns:1fr}
  /* the new-price column must be visible without sideways scrolling */
  main section.post .fee-table{overflow-x:visible}
  main section.post .fee-table table{min-width:0;table-layout:fixed}
  main section.post .fee-table th,main section.post .fee-table td{padding:11px 10px;white-space:normal}
  main section.post .fee-table th{font-size:9.5px;letter-spacing:.04em;line-height:1.35}
  main section.post .fee-table th:first-child,main section.post .fee-table td:first-child{width:40%}
  main section.post .fee-table td{font-size:13.5px}
  main section.post .fee-table td:first-child{font-size:13px;line-height:1.3}
  main section.post .fee-table td:first-child span{display:none}
  main section.post .fee-table td b{font-size:15.5px}
}

/* ─── Footer ─── */
body > footer.footer{padding:44px 24px 48px!important;background:var(--ink-2)!important;border-top:1px solid var(--hair)!important}
body > footer.footer p{font-size:12.5px;line-height:1.7;color:var(--t-low)}

/* ─── Tablet + phone ─── */
@media (max-width:1023px){
  /* the article list becomes a swipeable row instead of six stacked buttons */
  main aside > div{flex-direction:row!important;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  main aside > div::-webkit-scrollbar{display:none}
  main aside .nav-label{display:none}
  body .nav-card{flex:none;white-space:nowrap;border:1px solid var(--hair)}
  body .nav-card[href="/blog"]{margin-bottom:0}
}
@media (max-width:640px){
  body > .navbar .neon-static{height:36px;padding:0 12px;font-size:13px}
  main{padding-top:3rem!important;padding-bottom:4rem!important}
  main > .flex.flex-col.gap-5 > a.post{padding:22px 20px 24px 56px}
  main > .flex.flex-col.gap-5 > a.post::before{left:18px;top:25px;font-size:11px}
  main > .flex.flex-col.gap-5 > a.post h2{font-size:17px}
  main section.post{padding:22px 20px 24px}
  main section.post p,main section.post li{font-size:14.5px}
  main .justify-center{flex-direction:column;align-items:stretch}
  main .justify-center > .neon-static,main .justify-between > .neon-static{justify-content:center;white-space:normal;text-align:center}
}
