/* Soulparking — flat-file site styles. Token values mirror the design system (tokens/*.css). */
:root{
--ink-900:#101119;--ink-800:#191b24;--ink-700:#24262f;
--red-700:#8e2415;--red-600:#b7301d;--red-500:#ce4a33;
--board-100:#f0eee0;--board-200:#e4e1d1;--board-300:#cfcbb8;--bone:#fbfaf5;
--slate-600:#5a5648;--slate-500:#7a7566;
--text-body:#1c1d24;--on-dark:#edeadd;--on-dark-muted:#a7a294;
--font-display:"Big Shoulders Display","Arial Narrow",sans-serif;
--font-serif:Spectral,Georgia,serif;
--font-sans:"Work Sans",system-ui,sans-serif;
--gutter:clamp(20px,5vw,64px);
--measure:34rem;--wide:70rem;
--scrim:linear-gradient(180deg,rgba(16,17,25,.15) 0%,rgba(16,17,25,.55) 55%,rgba(16,17,25,.88) 100%);
--ease:cubic-bezier(.2,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--board-100);color:var(--text-body);font-family:var(--font-serif);font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red-600);text-decoration-thickness:1px;text-underline-offset:3px;transition:color 120ms var(--ease)}
a:hover{color:var(--red-700)}
.container{max-width:var(--wide);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.display{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:.01em;color:var(--ink-900);margin:0}
.eyebrow,.meta{font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--slate-600)}
.btn{font-family:var(--font-sans);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:background-color 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--red-600);color:var(--bone)}
.btn-primary:hover{background:var(--red-700);color:var(--bone)}
.btn-inverse{background:var(--bone);color:var(--ink-900)}
.btn-inverse:hover{background:var(--board-200);color:var(--ink-900)}
.btn-outline{border-color:var(--ink-900);color:var(--ink-900)}
.btn-outline:hover{background:var(--ink-900);color:var(--on-dark)}
.btn-ghost{padding:0 0 4px;border-bottom:2px solid var(--board-300);color:var(--red-600)}
.btn-ghost:hover{border-color:var(--red-700)}

/* header */
.site-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px;border-bottom:2px solid var(--ink-900)}
.site-header.on-dark{position:absolute;top:0;left:0;right:0;z-index:3;border-bottom:1px solid rgba(237,234,221,.22);max-width:none;background:linear-gradient(180deg,rgba(16,17,25,.8) 0%,rgba(16,17,25,.35) 60%,rgba(16,17,25,0) 100%);padding-bottom:32px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:34px;line-height:1;color:var(--red-600);text-decoration:none}
.logo img{width:40px;height:40px;object-fit:cover}
.on-dark .logo{color:var(--on-dark)}
.site-nav{display:flex;gap:24px;flex-wrap:wrap}
.site-nav a{font-family:var(--font-sans);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--ink-900);padding-bottom:3px;border-bottom:2px solid transparent}
.on-dark .site-nav a{color:var(--on-dark)}
.site-nav a:hover,.site-nav a.active{color:var(--red-600);border-color:var(--red-600)}
.on-dark .site-nav a:hover{color:var(--red-500);border-color:var(--red-500)}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.social-row{display:flex;gap:16px;flex-wrap:wrap}
.social-link{font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;color:var(--slate-600)}
.on-dark .social-link{color:var(--on-dark-muted)}
.social-link:hover{color:var(--red-600)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--ink-900);margin:4px 0}
.on-dark .menu-toggle span{background:var(--on-dark)}

/* hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-900)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.05)}
.hero .scrim{position:absolute;inset:0;background:var(--scrim)}
.hero-inner{position:relative;width:100%;padding:180px var(--gutter) 72px;max-width:var(--wide);margin:0 auto}
.hero h1{font-size:clamp(44px,7vw,104px);color:var(--on-dark);max-width:17ch}
.hero p{font-family:var(--font-serif);font-size:20px;color:var(--on-dark-muted);max-width:46ch;margin:24px 0 32px}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap}

/* generic sections */
section{padding:96px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.section-head h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;font-size:34px;color:var(--ink-900);margin:0}
.rule{height:1px;background:var(--board-300)}
.rule-strong{height:2px;background:var(--ink-900)}
.prose{max-width:var(--measure);font-size:21px}
.prose p{margin:0 0 24px}
.break{text-align:center;color:var(--red-600);font-size:22px;letter-spacing:.3em;margin:48px 0}

/* latest + kind cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.card-thumb{display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;background:var(--ink-800);margin:-24px -24px 20px;width:calc(100% + 48px);max-width:calc(100% + 48px);filter:saturate(.9)}
.card:hover .card-thumb{filter:saturate(1)}
.piece-row .thumb{width:100%;aspect-ratio:16 / 10;object-fit:cover;background:var(--ink-800);filter:saturate(.9);transition:filter 200ms var(--ease)}
.piece-row:hover .thumb{filter:saturate(1)}
.piece-row.has-thumb{grid-template-columns:200px 1fr auto}
.chapter-list a.has-thumb{grid-template-columns:120px 56px 1fr}
.chapter-list .thumb{width:100%;aspect-ratio:16 / 10;object-fit:cover;background:var(--ink-800)}
.reader-lead{margin:32px 0 0;background:var(--ink-900)}
.reader-lead img{width:100%;max-height:62vh;object-fit:cover;aspect-ratio:21 / 9}
@media (max-width:700px){.reader-lead img{aspect-ratio:4 / 3;max-height:none}}
.card{display:block;background:var(--bone);border:1px solid var(--board-300);box-shadow:0 1px 2px rgba(16,17,25,.07);padding:24px;text-decoration:none;transition:box-shadow 200ms var(--ease)}
.card:hover{box-shadow:0 10px 30px -14px rgba(16,17,25,.38)}
.card .kind{color:var(--red-600);margin-bottom:12px}
.card h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;font-size:24px;margin:0;color:var(--ink-900);transition:color 120ms var(--ease)}
.card:hover h3{color:var(--red-600)}
.card p{font-size:16px;color:var(--slate-600);margin:12px 0 0;line-height:1.6}
.card .meta{margin-top:16px;display:block}
.kind-card{display:flex;flex-direction:column;justify-content:space-between;min-height:200px;background:var(--ink-900);border:0;padding:24px;text-decoration:none}
.kind-card h3{color:var(--on-dark)}
.kind-card:hover h3{color:var(--red-500)}
.kind-card p{color:var(--on-dark-muted)}
.kind-card .count{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-500)}

/* video gallery */
.videos-section{background:var(--ink-900)}
.videos-section .eyebrow{color:var(--on-dark-muted)}
.videos-section .section-head h2{color:var(--on-dark)}
.video-card{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;background:var(--ink-900);border:0;padding:0;cursor:pointer}
.video-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85);transition:transform 200ms var(--ease),filter 200ms var(--ease)}
.video-card:hover img{transform:scale(1.04);filter:saturate(1)}
.video-card .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(16,17,25,.55);display:flex;align-items:center;justify-content:center;transition:background-color 150ms var(--ease),transform 150ms var(--ease)}
.video-card .play-btn::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--bone);margin-left:4px}
.video-card:hover .play-btn{background:var(--red-600);transform:translate(-50%,-50%) scale(1.08)}
.video-lightbox{position:fixed;inset:0;background:rgba(16,17,25,.94);z-index:80;display:flex;align-items:center;justify-content:center;padding:6vw}
.video-lightbox[hidden]{display:none}
.video-frame{position:relative;width:100%;max-width:1100px;aspect-ratio:16 / 9;background:#000}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox-close{position:fixed;top:24px;right:24px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(251,250,245,.12);color:var(--bone);font-size:18px;line-height:1;cursor:pointer;z-index:81;transition:background-color 150ms var(--ease)}
.lightbox-close:hover{background:var(--red-600)}

/* library */
.library{display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start;padding-top:64px;padding-bottom:96px}
.library-menu{position:sticky;top:32px}
.library-menu a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-family:var(--font-sans);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--ink-900);padding:12px 0;border-bottom:1px solid var(--board-300)}
.library-menu a:hover,.library-menu a.active{color:var(--red-600)}
.library-menu a span{font-size:12px;letter-spacing:.14em;color:var(--slate-500)}
.kind-block{margin-bottom:96px}
.kind-block h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;font-size:44px;margin:0 0 8px;color:var(--ink-900)}
.kind-block .kind-note{font-size:17px;color:var(--slate-600);max-width:48ch;margin:0 0 32px}
.piece-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding:24px 0;border-top:1px solid var(--board-300);text-decoration:none}
.piece-row:last-child{border-bottom:1px solid var(--board-300)}
.piece-row h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;font-size:26px;margin:0;color:var(--ink-900);transition:color 120ms var(--ease)}
.piece-row:hover h3{color:var(--red-600)}
.piece-row p{margin:8px 0 0;font-size:16px;color:var(--slate-600);line-height:1.6;max-width:60ch}
.piece-row .go{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-600);white-space:nowrap}

/* reader */
.reader{padding:64px 0 96px;max-width:var(--wide);margin:0 auto}
.reader h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;font-size:clamp(38px,5vw,68px);margin:0;color:var(--ink-900);max-width:24ch}
.reader .dateline{font-style:italic;color:var(--slate-600);margin:16px 0 0}
.reader .metaline{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.reader .metaline i{color:var(--red-600);font-style:normal}
.reader-body{margin-top:32px}
.reader-body p{margin:0 0 24px}
.chapter-list{margin-top:32px;max-width:var(--measure)}
.chapter-list a{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--board-300);text-decoration:none;align-items:baseline}
.chapter-list a:last-child{border-bottom:1px solid var(--board-300)}
.chapter-list .num{font-family:var(--font-display);font-weight:900;font-size:28px;color:var(--red-600);line-height:1}
.chapter-list h4{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:22px;margin:0;color:var(--ink-900)}
.chapter-list p{margin:6px 0 0;font-size:16px;color:var(--slate-600)}
.reader-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--board-300);margin-top:48px;padding-top:24px}

/* newsletter + footer */
.newsletter{background:var(--ink-900);padding:96px 0}
.newsletter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:64px;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.newsletter h2,.newsletter h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;line-height:.92;font-size:24px;color:var(--on-dark);margin:0}
.newsletter p{font-size:16px;color:var(--on-dark-muted);margin:16px 0 24px;max-width:40ch;line-height:1.6}
.subscribe{display:flex;gap:8px;flex-wrap:wrap;max-width:420px}
.subscribe input{flex:1 1 200px;min-width:0;font-family:var(--font-sans);font-size:15px;padding:12px 14px;background:rgba(251,250,245,.06);color:var(--on-dark);border:1px solid rgba(237,234,221,.22);outline:none}
.subscribe input:focus{border-color:var(--red-500);box-shadow:inset 0 0 0 1px var(--red-500)}
.site-footer{background:var(--ink-900);color:var(--on-dark-muted);padding:0 var(--gutter) 64px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.site-footer div{max-width:var(--wide);margin:0 auto;padding-top:64px}
.hidden{display:none !important}

@media (max-width:860px){
.library{grid-template-columns:1fr;gap:32px}
.library-menu{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.piece-row,.piece-row.has-thumb{grid-template-columns:1fr;gap:12px}
.chapter-list a.has-thumb{grid-template-columns:56px 1fr}
.chapter-list a.has-thumb .thumb{grid-column:1 / -1;max-width:280px}
.piece-row .go{display:none}
.menu-toggle{display:block}
.site-nav{display:none;width:100%;flex-direction:column;gap:12px}
.site-nav.open{display:flex}
.header-right{width:100%;justify-content:space-between}
}