/* ===========================================================
   TuGymPR — Blog · Editorial system (v2)
   Print/editorial: serif display, hairline rules, big type,
   restrained color. Designed to read like a publication,
   not a SaaS template.
   =========================================================== */

:root{
  --ink:#15110B;          /* warm near-black */
  --ink-2:#3a342b;
  --paper:#F4F1E8;        /* warm paper */
  --paper-2:#EBE7DA;
  --cream:#E9E6DF;
  --muted:#6E6A5F;
  --muted-d:#8A8576;
  --rule:rgba(21,17,11,0.16);
  --rule-2:rgba(21,17,11,0.09);
  --teal:#0C6E6E;
  --gold:#B5862B;
  --risk:#C4341F;
  --fd:'Fraunces',Georgia,'Times New Roman',serif;     /* display serif */
  --fb:'Familjen Grotesk',system-ui,sans-serif;        /* body sans */
  --fm:'JetBrains Mono',ui-monospace,monospace;        /* mono labels/data */
  --maxw:680px;
  --wide:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:20px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
::selection{background:#E7C66A;color:var(--ink)}
a{color:var(--ink);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- top bar (slim, editorial masthead strip) ---------- */
.topbar{border-bottom:1px solid var(--ink);background:var(--paper)}
.topbar .in{max-width:var(--wide);margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:0;font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:22px;letter-spacing:-0.03em;color:var(--ink)}
.brand img{height:30px;width:auto;display:block;margin-right:10px}
.brand .pr{color:#D8A93A}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.topbar nav a{font-family:var(--fm);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.topbar nav a:hover{color:var(--teal)}
.topbar .demo{border:1px solid var(--ink);padding:8px 15px;border-radius:0}
.topbar .demo:hover{background:var(--ink);color:var(--paper)}
@media(max-width:600px){.topbar nav a.cal{display:none}}

/* ---------- article head ---------- */
article{padding:0 0 30px}
.kicker{font-family:var(--fm);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--risk)}
.posthead{padding:48px 0 0}
h1{font-family:var(--fd);font-weight:900;font-size:clamp(38px,7vw,62px);line-height:1.02;letter-spacing:-.01em;margin:18px 0 0;font-optical-sizing:auto}
.dek{font-family:var(--fd);font-weight:400;font-style:italic;font-size:clamp(21px,3.4vw,26px);line-height:1.36;color:var(--ink-2);margin:20px 0 0;max-width:34ch}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 0;font-family:var(--fm);font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.meta .dot{opacity:.5}
.hr-strong{height:2px;background:var(--ink);margin:30px 0 0}

/* ---------- body typography ---------- */
article h2{font-family:var(--fd);font-weight:700;font-size:clamp(27px,4.6vw,36px);line-height:1.1;letter-spacing:-.005em;margin:58px 0 4px}
article h3{font-family:var(--fd);font-weight:600;font-size:23px;line-height:1.18;margin:36px 0 2px}
article p{margin:20px 0}
article > p:first-of-type, .lede{font-size:21px}
article strong{font-weight:600;background:linear-gradient(transparent 62%, rgba(181,134,43,.22) 0)}
article em{font-style:italic}
article a:not(.btn){border-bottom:1.5px solid var(--teal);color:var(--teal);font-weight:500}
article a:not(.btn):hover{background:var(--teal);color:var(--paper)}
article ul,article ol{margin:22px 0;padding:0;list-style:none}
article li{position:relative;padding-left:30px;margin:13px 0}
article ul li::before{content:"";position:absolute;left:2px;top:14px;width:13px;height:2px;background:var(--ink)}
article ol{counter-reset:li}
article ol li{counter-increment:li}
article ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--fm);font-weight:700;font-size:13px;color:var(--risk)}

/* ---------- ANSWER-FIRST (editorial callout, not a card) ---------- */
.answer{margin:34px 0;padding:26px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.answer .lbl{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--risk)}
.answer p{margin:12px 0 0;font-family:var(--fd);font-weight:500;font-size:23px;line-height:1.4;color:var(--ink)}
.answer p strong{background:none;font-weight:700}

/* ---------- Hormozi big statement ---------- */
.bigline{font-family:var(--fd);font-weight:900;font-size:clamp(30px,6vw,50px);line-height:1.02;letter-spacing:-.015em;margin:52px 0;color:var(--ink)}
.bigline .hl{color:var(--risk);font-style:italic}
.bigline .hlt{color:var(--teal);font-style:italic}

/* ---------- stat band (typographic, hairline-separated — no cards) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.stat{padding:24px 18px 22px;text-align:left;border-left:1px solid var(--rule)}
.stat:first-child{border-left:0;padding-left:0}
.stat .n{font-family:var(--fd);font-weight:900;font-size:clamp(38px,8vw,58px);line-height:.92;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat.bad .n{color:var(--risk)}
.stat.good .n{color:var(--teal)}
.stat .l{font-family:var(--fm);font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:12px;text-transform:uppercase;letter-spacing:.03em}
@media(max-width:600px){.stats{grid-template-columns:1fr;border:0}.stat{border-left:0;border-top:1px solid var(--rule);padding:18px 0;display:flex;align-items:baseline;gap:18px}.stat:first-child{border-top:0}.stat .n{flex:0 0 auto;min-width:2.4em}.stat .l{margin-top:0}}

/* ---------- math: stark ledger block ---------- */
.mathbox{background:var(--ink);color:var(--paper);padding:30px 30px 28px;margin:40px 0;font-family:var(--fm)}
.mathbox .lbl{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E7C66A;margin-bottom:18px}
.mathbox .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(244,241,232,.14);font-size:15px;line-height:1.4}
.mathbox .row span:last-child{font-weight:700;white-space:nowrap}
.mathbox .tot{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:18px;padding-top:16px;border-top:2px solid rgba(244,241,232,.3)}
.mathbox .tot .k{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;max-width:14ch}
.mathbox .tot .v{font-family:var(--fd);font-weight:900;font-size:clamp(30px,7vw,42px);color:#EF7C66;line-height:1}
.mathbox.win .tot .v{color:#4FCBB6}

/* ---------- pull quote ---------- */
.pull{font-family:var(--fd);font-weight:600;font-style:italic;font-size:clamp(26px,5vw,38px);line-height:1.16;letter-spacing:-.01em;color:var(--ink);margin:48px 0;text-indent:-.5em}
.pull::before{content:"“";color:var(--gold)}
.pull::after{content:"”";color:var(--gold)}

/* ---------- comparison bars ---------- */
.bars{margin:34px 0;display:flex;flex-direction:column;gap:22px}
.bar .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.bar .name{font-family:var(--fd);font-weight:600;font-size:18px}
.bar .val{font-family:var(--fm);font-weight:500;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bar .track{height:34px;background:var(--paper-2)}
.bar .fill{height:100%;display:flex;align-items:center;padding-left:13px;color:var(--paper);font-family:var(--fm);font-size:13px;font-weight:700}
.bar .fill.lo{background:var(--risk)}
.bar .fill.hi{background:var(--teal)}

/* ---------- benchmark scale ---------- */
.gauge{margin:34px 0}
.gauge .scale{display:flex;height:10px;margin-bottom:12px;border:1px solid var(--ink)}
.gauge .seg{flex:1;border-left:1px solid var(--ink)}
.gauge .seg:first-child{border-left:0}
.gauge .s1{background:var(--risk)}.gauge .s2{background:#D99A2E}.gauge .s3{background:#6FA844}.gauge .s4{background:var(--teal)}
.gauge .labels{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.gauge .labels span{flex:1;text-align:center;border-left:1px solid var(--rule-2)}
.gauge .labels span:first-child{text-align:left;border-left:0}
.gauge .labels span:last-child{text-align:right}
.gauge .labels b{display:block;font-family:var(--fd);color:var(--ink);font-size:15px;font-weight:700}

/* ---------- CTA (stark inverted block) ---------- */
.cta{background:var(--ink);color:var(--paper);padding:42px 34px;margin:54px 0;text-align:center}
.cta .k{font-family:var(--fm);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#E7C66A}
.cta h3{font-family:var(--fd);font-weight:700;font-size:clamp(26px,5vw,36px);line-height:1.08;margin:12px 0 0;color:var(--paper)}
.cta p{margin:14px auto 24px;max-width:430px;color:rgba(244,241,232,.78);font-size:17px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border:0}
.cta .btn{background:var(--paper);color:var(--ink);padding:15px 26px}
.cta .btn:hover{background:#E7C66A}

/* ---------- FAQ ---------- */
.faq{margin:56px 0 0;border-top:2px solid var(--ink)}
.faq h2{margin:30px 0 6px}
.fq{border-top:1px solid var(--rule);padding:26px 0}
.fq:first-of-type{border-top:0}
.fq h3{font-family:var(--fd);font-weight:600;font-size:21px;margin:0 0 9px}
.fq p{margin:0;color:var(--ink-2);font-size:18px}

/* ---------- references ---------- */
.refs{margin:52px 0 0;padding:26px 0 0;border-top:1px solid var(--ink)}
.refs .lbl{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.refs ol{counter-reset:r;padding:0;margin:0;list-style:none}
.refs li{position:relative;padding-left:28px;margin:9px 0;font-size:15px;line-height:1.5;color:var(--muted)}
.refs li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:0;font-family:var(--fm);font-weight:700;color:var(--risk)}
.refs a{border-bottom:1px solid var(--rule);color:var(--ink-2)}
.refs a:hover{border-color:var(--ink)}

/* ---------- sign-off ---------- */
.signoff{display:flex;gap:16px;align-items:flex-start;margin:46px 0 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.signoff .av{width:48px;height:48px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:900;font-size:18px;flex:0 0 auto}
.signoff .t{font-size:16px;line-height:1.5;color:var(--ink-2)}
.signoff .t b{font-family:var(--fd);font-weight:700;color:var(--ink)}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--ink);margin-top:60px}
.foot .in{max-width:var(--wide);margin:0 auto;padding:26px 24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-family:var(--fm);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.foot a{color:var(--muted)}.foot a:hover{color:var(--teal)}
.foot .sp{margin-left:auto;display:flex;gap:22px}

/* ===========================================================
   Blog index — editorial front / table of contents
   =========================================================== */
.masthead{max-width:var(--wide);margin:0 auto;padding:60px 24px 0}
.masthead .kicker{color:var(--risk)}
.masthead h1{font-family:var(--fd);font-weight:900;font-size:clamp(46px,9vw,92px);line-height:.94;letter-spacing:-.02em;margin:16px 0 0;max-width:14ch}
.masthead .dek{font-family:var(--fd);font-style:italic;font-weight:400;font-size:clamp(20px,3vw,25px);color:var(--ink-2);max-width:40ch;margin-top:22px}
.masthead .mhr{height:2px;background:var(--ink);margin:40px 0 0}

/* ===== Blog post list — Claude Design handoff style ===== */
.toc{max-width:1080px;margin:0 auto;padding:0 24px 130px}
.entry{display:grid;grid-template-columns:1fr 240px;gap:40px;align-items:flex-start;padding-top:48px;margin-top:48px;border-top:1px solid var(--rule);color:var(--ink)}
.entry:first-of-type{border-top:none;padding-top:6px;margin-top:0}
.entry .cover{width:240px;height:168px;border-radius:14px;background:#FBFAF6;box-shadow:inset 0 0 0 1px var(--rule);flex:none;overflow:hidden}
.entry .cover svg{width:100%;height:100%;display:block}
a.entry:hover .cover{box-shadow:inset 0 0 0 1px var(--rule),0 12px 26px -16px rgba(11,15,18,.32);transition:box-shadow .25s}
.entry .etag{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.entry h2{font-family:var(--fd);font-weight:900;font-size:clamp(26px,3.3vw,32px);line-height:1.12;letter-spacing:-.015em;margin:12px 0 0;max-width:22ch}
.entry p{margin:14px 0 0;color:#3A3833;font-size:17px;line-height:1.55;max-width:56ch}
.entry .go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--fm);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);border-bottom:1.5px solid var(--teal);padding-bottom:4px;text-decoration:none}
.entry .go svg{width:14px;height:14px;flex:none}
.entry .go:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:760px){
  .entry{grid-template-columns:1fr;gap:20px;padding-top:32px;margin-top:32px}
  .entry:first-of-type{padding-top:0}
  .entry .cover{width:100%;height:auto;aspect-ratio:240/168}
}

/* post prev / next navigation */
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:54px 0 0;padding-top:26px;border-top:2px solid var(--ink)}
.pn{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--rule);color:var(--ink);transition:border-color .15s}
.pn:hover{border-color:var(--ink)}
.pn.next{text-align:right;align-items:flex-end}
.pn .lbl{font-family:var(--fm);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.pn .t{font-family:var(--fd);font-weight:600;font-size:17px;line-height:1.16}
.pn.ghost{border:0;background:none}
@media(max-width:600px){.postnav{grid-template-columns:1fr}.pn.next{text-align:left;align-items:flex-start}.pn.ghost{display:none}}

.foot .foot-social{display:inline-flex;gap:14px;align-items:center}
.foot .foot-social svg{width:17px;height:17px;display:block}