/* ==========================================================================
   THE TRADER INSIDE THE TRADE — shared stylesheet
   Used by: blog/index.html, every blog article, 404.html
   (The approved landing page and Thank You page keep their own inline CSS
   and are intentionally untouched.)

   Design tokens below are identical to the approved landing page.
   ========================================================================== */
:root{
  --navy:#09283F; --navy-2:#0D344F; --ivory:#F7F2E8; --paper:#FFFDF9;
  --gold:#BD8A32; --gold-soft:#D8B46B; --gold-ink:#835A12;
  --ink:#173247; --muted:#5A6B78; --mist:#E8EFF3; --line:rgba(9,40,63,.14);
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1160px; --read:44rem; --nav-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;overflow-x:hidden;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.narrow{width:min(var(--read),100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--navy);letter-spacing:-.01em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:.8rem 1.7rem;border-radius:999px;font:600 1.0625rem/1.2 var(--sans);text-decoration:none;
  background:linear-gradient(180deg,#EDBC55 0%,#DCA32E 100%);color:var(--navy);border:1px solid #C48F25;box-shadow:0 8px 22px -10px rgba(9,40,63,.45),inset 0 1px 0 rgba(255,255,255,.45);transition:background .2s,transform .2s}
.btn:hover{background:linear-gradient(180deg,#F4C660 0%,#E3AB35 100%);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--navy);border-color:rgba(9,40,63,.4);box-shadow:none}
.btn.ghost:hover{background:rgba(9,40,63,.06)}
.btn.sm{min-height:2.55rem;padding:.5rem 1.15rem;font-size:.95rem;white-space:nowrap}
.btn.lg{min-height:3.6rem;padding:.9rem 2.2rem;font-size:1.15rem}
@media (max-width:480px){.btn.lg{padding:.9rem 1.2rem;font-size:1.05rem;white-space:nowrap}}

/* ---------- header / nav (same look as the landing page) ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;min-height:var(--nav-h)}
.brand{font:600 .72rem/1.15 var(--sans);letter-spacing:.12em;text-decoration:none;color:var(--navy);white-space:nowrap}
.brand span{display:block}
.links{display:none;gap:clamp(1rem,2vw,2rem)}
.links a{text-decoration:none;font-size:.97rem;font-weight:500;color:var(--ink);padding:.4rem 0;border-bottom:1px solid transparent;white-space:nowrap}
.links a:hover,.links a[aria-current="page"]{border-color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:.5rem}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:2.55rem;height:2.55rem;display:grid;place-items:center;border:1px solid rgba(9,40,63,.3);border-radius:50%;font-size:0;color:transparent}
.menu summary::-webkit-details-marker{display:none}
.menu summary::before{content:"";width:1.05rem;height:2px;background:var(--navy);box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy)}
.menu .panel{position:absolute;right:0;top:calc(100% + .6rem);min-width:15rem;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.5rem;box-shadow:0 20px 40px -18px rgba(9,40,63,.4)}
.menu .panel a{display:block;padding:.8rem 1rem;border-radius:10px;text-decoration:none;font-weight:500}
.menu .panel a:hover,.menu .panel a[aria-current="page"]{background:var(--mist)}
@media (max-width:520px){.nav .btn .long{display:none}.brand{font-size:.68rem}}
@media (max-width:360px){.brand{font-size:.58rem;letter-spacing:.06em}.nav .wrap{gap:.3rem}.nav-right{gap:.3rem}.menu summary{width:2.3rem;height:2.3rem}.nav .btn.sm{padding:.45rem .65rem;font-size:.82rem}}
@media (min-width:1040px){.links{display:flex}.menu{display:none}}

/* ---------- shared bits ---------- */
.eyebrow{display:flex;align-items:center;gap:.75rem;font-size:.95rem;font-weight:500;color:var(--gold-ink);margin-bottom:1rem}
.eyebrow::before{content:"";width:2rem;height:1px;background:var(--gold)}
.rule{height:1px;width:5.5rem;background:var(--gold);border:0;margin:1.6rem 0}

/* ---------- breadcrumb ---------- */
.crumbs{padding-top:1.6rem;font-size:.92rem;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--gold)}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- article header ---------- */
.a-head{padding-block:clamp(1.6rem,4vw,3rem) 1.4rem}
.a-head .cat{font-size:.95rem;font-weight:500;color:var(--gold-ink);display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.a-head .cat::before{content:"";width:2rem;height:1px;background:var(--gold)}
.a-head h1{font-size:clamp(2.1rem,6vw,3.5rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.deck{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.4;color:var(--ink);margin-top:1.2rem}
.meta{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.93rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem 1.5rem}

/* ---------- article body (editorial typography) ---------- */
.prose{padding-bottom:1rem}
.prose p,.prose li{font-family:var(--serif);font-size:clamp(1.14rem,2.2vw,1.24rem);line-height:1.75;color:var(--ink)}
.prose p{margin-top:1.15rem}
.prose h2{font-size:clamp(1.65rem,4vw,2.15rem);line-height:1.15;margin-top:2.8rem;text-wrap:balance}
.prose h3{font-size:clamp(1.3rem,3vw,1.55rem);line-height:1.2;margin-top:2rem}
.prose h2+p,.prose h3+p{margin-top:.9rem}
.prose ul{margin-top:1.1rem}
.prose li{position:relative;padding-left:1.6rem;margin-top:.75rem}
.prose li::before{content:"";position:absolute;left:0;top:.82em;width:.8rem;height:1px;background:var(--gold);box-shadow:0 0 0 .5px var(--gold)}
.prose strong{font-weight:600;color:var(--navy)}
.prose a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em;text-decoration-thickness:1.5px}
.prose a:hover{background:rgba(216,180,107,.25)}
.prose blockquote{margin:2rem 0 .4rem;padding:.2rem 0 .2rem 1.4rem;border-left:2px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,3.2vw,1.7rem);line-height:1.35;color:var(--navy)}

/* ---------- practical reflection ---------- */
.reflect{margin-top:3rem;padding:clamp(1.5rem,4vw,2.2rem);background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;box-shadow:0 22px 36px -28px rgba(9,40,63,.45)}
.reflect h2{font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.2}
.reflect p{margin-top:.8rem;font-size:1.02rem;line-height:1.6}
.reflect ul{margin-top:.9rem}
.reflect li{position:relative;padding-left:1.4rem;margin-top:.55rem;font-size:1.02rem;line-height:1.55}
.reflect li::before{content:"";position:absolute;left:0;top:.78em;width:.7rem;height:1px;background:var(--gold);box-shadow:0 0 0 .5px var(--gold)}
.reflect .src{margin-top:1.1rem;font-size:.88rem;color:var(--muted)}

/* ---------- book connection + CTA ---------- */
.go-deeper{margin-top:2.6rem;display:grid;gap:1.6rem;align-items:center;padding:clamp(1.6rem,4vw,2.4rem);background:var(--navy);color:#EAE3D2;border-radius:16px}
.go-deeper img{width:min(8.5rem,34vw);border-radius:2px 4px 4px 2px;box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
.go-deeper h2{font-size:clamp(1.6rem,4vw,2.1rem);color:var(--ivory);line-height:1.15}
.go-deeper p{margin-top:.8rem;color:#C9D4DB;font-size:1.02rem;line-height:1.6}
.go-deeper .small{font-size:.86rem;color:#93A4B0;margin-top:.9rem}
.go-deeper .btn{margin-top:1.3rem}
@media (min-width:640px){.go-deeper{grid-template-columns:auto 1fr;gap:2rem}}

/* ---------- blog navigation ---------- */
.pager{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:3rem}
.pager a{display:block;background:var(--paper);padding:1.2rem 1.4rem;text-decoration:none}
.pager a:hover{background:#fff}
.pager small{display:block;font-size:.85rem;color:var(--gold-ink);font-weight:500}
.pager span{display:block;font-family:var(--serif);font-size:1.18rem;line-height:1.3;color:var(--navy);margin-top:.2rem}
.pager .next{text-align:right}
@media (min-width:640px){.pager{grid-template-columns:1fr 1fr}}
.back{margin-top:1.6rem;text-align:center}
.back a{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.1rem}

.related{margin-top:3.2rem;padding-bottom:clamp(3rem,7vw,5rem)}
.related h2{font-size:1.5rem}
.related ul{margin-top:1rem;border-top:1px solid var(--line)}
.related li{border-bottom:1px solid var(--line)}
.related a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:1rem .2rem;text-decoration:none}
.related a:hover b{text-decoration:underline;text-decoration-color:var(--gold)}
.related b{font:500 1.2rem/1.3 var(--serif);color:var(--navy)}
.related em{font-style:normal;font-size:.88rem;color:var(--muted);white-space:nowrap}
@media (max-width:520px){.related a{flex-direction:column;gap:.2rem}}

/* ---------- blog index ---------- */
.b-hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem);background:radial-gradient(54rem 28rem at 90% 20%,rgba(216,180,107,.20),transparent 62%),var(--ivory)}
.b-hero h1{font-size:clamp(2.3rem,6.6vw,4.2rem);line-height:1.02;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.b-hero p.lede{margin-top:1.2rem;max-width:40rem;font-size:clamp(1.1rem,2.4vw,1.3rem);color:var(--muted)}
.b-list{padding-bottom:clamp(3rem,7vw,5rem)}
.cards{display:grid;gap:1.3rem}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;padding:1.6rem 1.5rem 1.5rem;box-shadow:0 22px 36px -30px rgba(9,40,63,.5)}
.post .cat{font-size:.88rem;font-weight:500;color:var(--gold-ink)}
.post h2{font-size:1.45rem;line-height:1.2;margin-top:.6rem}
.post h2 a{text-decoration:none}
.post h2 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.post p{margin-top:.8rem;color:var(--muted);font-size:1rem;line-height:1.55}
.post .foot{margin-top:auto;padding-top:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem;color:var(--muted)}
.post .foot a{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}
.band{background:var(--navy);color:#EAE3D2;padding-block:clamp(2.8rem,6vw,4.5rem)}
.band .wrap{display:grid;gap:2rem;align-items:center}
.band img{width:min(9.5rem,40vw);border-radius:2px 5px 5px 2px;box-shadow:0 22px 34px -14px rgba(0,0,0,.65)}
.band h2{color:var(--ivory);font-size:clamp(1.8rem,4.4vw,2.7rem);line-height:1.1}
.band p{margin-top:.9rem;color:#C9D4DB;max-width:36rem}
.band .btn{margin-top:1.4rem}
@media (min-width:700px){.band .wrap{grid-template-columns:auto 1fr;gap:3rem}}

/* ---------- 404 ---------- */
.lost{padding-block:clamp(3.5rem,10vw,7rem);text-align:center}
.lost .num{font:500 clamp(5rem,18vw,9rem)/1 var(--serif);color:var(--gold);letter-spacing:-.03em}
.lost h1{font-size:clamp(2rem,5.5vw,3.2rem);line-height:1.1;margin-top:.4rem}
.lost p{margin:1rem auto 0;max-width:30rem;color:var(--muted);font-size:1.15rem}
.lost .actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}

/* ---------- footer ---------- */
.site-footer{background:#06202F;color:#93A4B0;padding:clamp(2.4rem,5vw,3.4rem) 0 calc(2rem + env(safe-area-inset-bottom,0px));font-size:.92rem}
.site-footer .top{display:grid;gap:1.6rem}
.site-footer b{display:block;font:600 .8rem/1.3 var(--sans);letter-spacing:.14em;color:var(--ivory)}
.site-footer .tag{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:#B9C6CF;margin-top:.5rem;max-width:30rem}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.site-footer nav a{color:#D5DDE2;text-decoration:none;padding:.3rem 0;display:inline-block}
.site-footer a:hover{color:var(--gold-soft)}
.site-footer .legal{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid rgba(216,180,107,.22)}
.site-footer .legal p+p{margin-top:.5rem}
.site-footer .small{font-size:.85rem;max-width:44rem}
@media (min-width:800px){.site-footer .top{grid-template-columns:1.4fr 1fr;align-items:start}.site-footer nav ul{justify-content:flex-end}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}