/* Chrome & Sunshine — blog shared styles (matches DamonNelson.com homepage) */
:root{--cream:#F7F0DC;--cream-hi:#FFFDF6;--sky:#57B8E8;--sky-deep:#3E9FD1;--vermillion:#E14B2E;--gold:#F7C948;--ink:#24202B;--shadow:8px 8px 0 var(--ink);--shadow-sm:5px 5px 0 var(--ink);--border:3px solid var(--ink);--anton:'Anton',sans-serif;--nunito:'Nunito',sans-serif;--mono:'Courier Prime',monospace}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--nunito);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--vermillion);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--anton);text-transform:uppercase;font-weight:400;letter-spacing:.01em}
.mono{font-family:var(--mono)}
.accent{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* ===== NAV ===== */
nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--cream);border-bottom:3px solid var(--ink)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto}
.logo{font-family:var(--anton);font-size:1.3rem;letter-spacing:.02em;color:var(--cream);display:flex;align-items:center;gap:8px}
.logo:hover{color:var(--cream)}
.logo .dot-swoosh{width:34px;height:16px}
.nav-links{display:flex;gap:26px;align-items:center;list-style:none}
.nav-links a{color:var(--cream);font-weight:800;font-size:.9rem;letter-spacing:.04em}
.nav-links a:hover{color:var(--gold)}
.nav-links a.active{color:var(--gold);text-decoration:underline;text-underline-offset:5px}
.nav-cta{background:var(--vermillion);color:var(--cream);border:2px solid var(--cream);padding:8px 18px;border-radius:999px;font-weight:800;font-size:.85rem}
.nav-cta:hover{background:var(--gold);color:var(--ink)}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:2px solid var(--cream);border-radius:9px;padding:9px 11px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2.5px;background:var(--cream);border-radius:2px}
.nav-drawer{position:fixed;inset:0;z-index:60;background:rgba(36,32,43,.55);display:none;opacity:0;transition:opacity .25s}
.nav-drawer.open{display:block;opacity:1}
.nav-panel{position:absolute;inset:0;background:var(--ink);padding:64px 32px 40px;display:flex;flex-direction:column;justify-content:center;transform:translateY(-100%);transition:transform .44s cubic-bezier(.3,.85,.3,1);overflow:hidden}
.nav-drawer.open .nav-panel{transform:none}
.nav-drawer-close{position:absolute;top:20px;right:22px;background:none;border:2px solid rgba(247,240,220,.5);color:var(--cream);width:44px;height:44px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1;z-index:2}
.nav-panel-links{display:flex;flex-direction:column;position:relative;z-index:1}
.nav-panel-links a{color:var(--cream);font-family:var(--anton);text-transform:uppercase;font-size:clamp(1.9rem,8vw,2.7rem);letter-spacing:.02em;padding:14px 0;border-bottom:2px dotted rgba(247,240,220,.24)}
.nav-panel-links a:hover{color:var(--gold)}
.nav-panel .drawer-cta{position:relative;z-index:1;margin-top:26px;border:3px solid var(--cream);background:var(--vermillion);color:var(--cream);border-radius:999px;text-align:center;font-family:var(--anton);text-transform:uppercase;font-size:1.2rem;padding:15px}
.nav-panel .drawer-cta:hover{background:var(--gold);color:var(--ink)}
.nav-burst{position:absolute;right:-42px;bottom:-42px;width:210px;height:210px;opacity:.42;z-index:0;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== SECTION CHROME ===== */
.sec-kicker{font-family:var(--mono);font-weight:700;letter-spacing:.16em;font-size:.75rem;text-transform:uppercase;color:var(--vermillion)}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.sec-head h1,.sec-head h2{font-size:clamp(1.9rem,4.5vw,3rem)}
.sec-head::after{content:"";flex:1;border-top:3px dotted var(--ink);opacity:.5}
.sec-intro{max-width:56ch;font-size:1.05rem;margin-bottom:10px}
.btn{font-family:var(--anton);text-transform:uppercase;letter-spacing:.05em;font-size:1rem;padding:14px 28px;border:var(--border);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;display:inline-block}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-red{background:var(--vermillion);color:var(--cream)}
.btn-red:hover{color:var(--cream)}
.sticker{position:absolute;top:-16px;left:-14px;z-index:3;background:var(--gold);border:3px solid var(--ink);font-family:var(--anton);font-size:.85rem;letter-spacing:.06em;padding:6px 14px;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--ink)}
/* ===== BLOG INDEX ===== */
.blog-head{padding:60px 0 6px}
.featured{display:grid;grid-template-columns:1.15fr 1fr;border:var(--border);background:var(--cream-hi);box-shadow:var(--shadow);margin:34px 0 56px;position:relative}
.featured .fimg{display:block;border-right:var(--border);background:var(--sky)}
.featured .fimg img{width:100%;height:100%;object-fit:cover;min-height:300px}
.featured-body{padding:30px 28px;display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:flex-start}
.featured-body h2{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.02}
.featured-body h2 a{color:var(--ink)}
.featured-body h2 a:hover{color:var(--vermillion)}
.post-date{font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep)}
.excerpt{font-size:1rem;line-height:1.55}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px;padding-bottom:86px}
.post-card{background:var(--cream-hi);border:var(--border);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.post-card>a{display:block;border-bottom:var(--border);background:var(--sky)}
.post-card>a img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card h3{font-size:1.25rem;line-height:1.05}
.post-card h3 a{color:var(--ink)}
.post-card h3 a:hover{color:var(--vermillion)}
.readmore{font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;color:var(--ink);margin-top:auto}
.readmore:hover{color:var(--vermillion)}
.blog-note{font-family:var(--mono);font-size:.85rem;padding:30px 0 80px;opacity:.75}
/* ===== SINGLE POST ===== */
.post-hero{margin:44px auto 0;max-width:1180px;padding:0 24px}
.post-hero .ph-frame{border:var(--border);box-shadow:var(--shadow);background:var(--cream-hi);overflow:hidden}
.post-hero img{width:100%;aspect-ratio:16/7;object-fit:cover}
.post-wrap{max-width:760px;margin:0 auto;padding:30px 24px 70px}
.post-title{font-size:clamp(2rem,5vw,3.1rem);line-height:1;margin:10px 0 26px}
.post-body{font-size:1.08rem;line-height:1.75}
.post-body p{margin:0 0 20px}
.post-body h2{font-size:1.7rem;margin:38px 0 14px}
.post-body h3{font-size:1.25rem;margin:30px 0 10px;color:var(--vermillion)}
.post-body blockquote{margin:28px 0;padding:18px 22px;background:var(--cream-hi);border:var(--border);border-left:10px solid var(--gold);font-weight:700;font-size:1.05rem}
.post-body figure{margin:30px 0}
.post-body figure img,.post-body>img{width:100%;border-radius:12px;border:var(--border)}
.post-body .book-cta{text-align:center;margin:36px 0}
.post-body .book-cta img{max-width:260px;width:100%;border-radius:12px;border:var(--border);display:inline-block}
.post-body .logo-cta{text-align:center;margin:40px 0 8px}
.post-body .logo-cta img{max-width:340px;width:100%;border:none;border-radius:0;display:inline-block}
.post-body .text-cta{text-align:center;margin:40px 0 8px}
.post-body .text-cta a{display:inline-block;padding:16px 34px;background:var(--ink);color:var(--cream);border:4px solid var(--ink);box-shadow:var(--shadow);font-family:var(--anton);text-transform:uppercase;letter-spacing:.02em;font-size:1.05rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.post-body .text-cta a:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--vermillion)}
.post-body figcaption{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:9px;text-align:center}
.post-body a{text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{margin:0 0 20px 26px}
.post-body li{margin-bottom:8px}
.author-box{display:flex;gap:20px;align-items:center;background:var(--cream-hi);border:var(--border);box-shadow:var(--shadow-sm);padding:20px 22px;margin:48px 0 28px;flex-wrap:wrap}
.author-box img{width:84px;height:84px;object-fit:cover;border:var(--border);border-radius:50%;flex:none}
.author-box h3{font-size:1.1rem;margin-bottom:4px}
.author-box p{font-size:.92rem;line-height:1.5;max-width:46ch}
.backlink{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
/* ===== FOOTER ===== */
footer{background:var(--ink);color:var(--cream);padding:56px 0 28px;border-top:var(--border)}
.foot-logo{font-family:var(--anton);font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;text-transform:uppercase;color:var(--cream)}
.foot-meta{margin-top:22px;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.72;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:840px){.featured{grid-template-columns:1fr}.featured .fimg{border-right:none;border-bottom:var(--border)}.featured .fimg img{min-height:0;aspect-ratio:16/9}}
@media(max-width:719px){.nav-links{display:none}.nav-burger{display:flex}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}