@import url("/fonts/fonts.css");
:root{--bg:#faf8f4;--bg2:#efeae0;--card:#fff;--ink:#191b1f;--muted:#5c6470;
--line:#d9d0bf;--accent:#b1583a;--accent-2:#85422c;--accent-ink:#fff;--maxw:680px;
--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--t1:12px;--t2:14px;--t3:16px;--t4:18px;--t5:21px;--t6:26px;--t7:34px;
--r1:8px;--r2:16px;--r3:999px;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;
font-family:var(--serif);
-webkit-font-smoothing:antialiased}
.kicker,.meta,.badge,.nav-verh,button,input,select,textarea{font-family:var(--sans)}
code,kbd,pre,samp{font-family:var(--mono)}
.topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent))}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
a{color:var(--accent-2)}
header.page{padding:54px 0 26px}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
font-weight:800;margin:0 0 14px;display:block;text-decoration:none}
h1{font-size:32px;line-height:1.2;margin:0 0 14px;font-weight:800;letter-spacing:-.015em}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);
margin:34px 0 16px;font-weight:800}
.lead{color:var(--muted);font-size:17px;margin:0 0 8px}
.meta{color:var(--muted);font-size:14px;margin:0 0 26px}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;
padding:2px 10px;font-size:12px;color:var(--muted);margin-left:8px}
article{font-size:18px}
article p{margin:0 0 18px;white-space:pre-wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:14px;margin:0 0 10px;padding:0;list-style:none}
.cards a{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
border-radius:16px;overflow:hidden;color:var(--ink);transition:border-color .15s,transform .15s}
.cards a:hover{border-color:var(--accent);transform:translateY(-1px)}
.cards .cv{position:relative;aspect-ratio:9/5;background:var(--bg2);overflow:hidden}
.cards .cv img{width:100%;height:100%;object-fit:cover;display:block}
.cards .cv::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,16,8,0) 45%,rgba(20,16,8,.35) 100%)}
.cards .cv-gen{display:flex;align-items:center;justify-content:center;
background:radial-gradient(120% 120% at 20% 0%,color-mix(in srgb,var(--accent) 18%,transparent),#efeae0 60%),
linear-gradient(135deg,#f3eee4,#e8e1d3)}
.cards .cvl{position:relative;z-index:1;font-weight:800;font-size:19px;letter-spacing:-.01em;
color:var(--accent-2);text-align:center;padding:0 18px;line-height:1.25}
.cards .cvb{position:absolute;right:10px;bottom:-14px;font-size:82px;font-weight:800;
color:color-mix(in srgb,var(--accent) 10%,transparent);line-height:1}
.cards .cb{padding:14px 16px 16px}
.cards .t{font-weight:700;font-size:17px}
.cards .n{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.1em;
text-transform:uppercase;margin-top:3px}
.cards .d{color:var(--muted);font-size:14px;margin-top:6px}
ol.toc{list-style:none;counter-reset:c;padding:0;margin:0}
ol.toc li{counter-increment:c;border-bottom:1px solid var(--line)}
ol.toc li:last-child{border-bottom:0}
ol.toc a{display:flex;gap:14px;align-items:baseline;padding:13px 2px;text-decoration:none;color:var(--ink)}
ol.toc a:hover{color:var(--accent-2)}
ol.toc a::before{content:counter(c);color:var(--accent);font-weight:800;font-size:13px;
min-width:26px;text-align:right;opacity:.85}
ol.toc .d{color:var(--muted);font-size:13px;margin-left:auto;padding-left:12px;white-space:nowrap}
ol.toc a{align-items:center}
.tmb{width:46px;height:46px;flex:0 0 46px;border-radius:10px;object-fit:cover;
border:1px solid var(--line);background:var(--card);display:block}
.tmb-empty{background:linear-gradient(135deg,var(--card),var(--bg2))}
.listen{margin:0 0 26px;background:var(--card);border:1px solid var(--line);
border-radius:16px;padding:16px 18px}
.listen .lh{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.listen .lt{font-weight:700;font-size:15px}
.listen .ld{color:var(--muted);font-size:13px}
.listen audio{width:100%;display:block}
.listen .dl{display:inline-block;margin-top:10px;font-size:13px;color:var(--muted)}
.snd{color:var(--accent);font-weight:800;font-size:12px;margin-left:8px}
.hero{margin:0 0 26px}
.hero img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line)}
@media(max-width:520px){.tmb{width:38px;height:38px;flex-basis:38px}}
.nav{display:flex;gap:10px;margin:34px 0 0;flex-wrap:wrap}
.nav a{flex:1 1 46%;background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:12px 14px;text-decoration:none;color:var(--ink);font-size:15px}
.nav a:hover{border-color:var(--accent)}
.nav .lbl{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.cta{margin:38px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent) 3%,transparent));
border:1px solid var(--accent);border-radius:16px;padding:20px}
.cta p{margin:0 0 14px;font-size:16px;color:var(--muted)}
.cta a{display:block;text-align:center;background:var(--accent);color:var(--accent-ink);
font-weight:800;text-decoration:none;border-radius:12px;padding:14px 16px}
footer{padding:34px 22px 48px;text-align:center;color:var(--muted);font-size:13px}
footer a{color:var(--muted)}
@media(max-width:520px){h1{font-size:26px}article,.cards .t{font-size:17px}}

.more{margin:36px 0 0;border-top:1px solid var(--line);padding-top:22px}
.more h2{margin-top:0}
.more ol.toc a{padding:11px 2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.chips a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;
border:1px solid var(--line);border-radius:999px;
padding:6px 13px;font-size:13px;text-decoration:none;color:var(--muted);background:var(--card)}
.chips a:hover{border-color:var(--accent);color:var(--accent-2)}
.chips .on{border-color:var(--accent);color:var(--accent-ink);background:var(--accent);font-weight:700}
.find{margin:0 0 26px}
.find input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:13px 15px;color:var(--ink);font-size:16px;font-family:inherit}
.find input:focus{outline:none;border-color:var(--accent)}
.find .hint{color:var(--muted);font-size:13px;margin:8px 2px 0}
.found{list-style:none;padding:0;margin:14px 0 0}
.found li{border-bottom:1px solid var(--line)}
.found a{display:block;padding:11px 2px;text-decoration:none;color:var(--ink)}
.found a:hover{color:var(--accent-2)}
.found .s{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.podcast{margin:30px 0 0;background:var(--card);border:1px solid var(--line);
border-radius:16px;padding:18px 20px}
.podcast p{margin:0 0 10px;color:var(--muted);font-size:15px}
.podcast a{font-weight:700}
.qa{margin:26px 0 0;border-top:1px solid var(--line);padding-top:20px}
.qa h2{margin:0 0 10px;font-size:21px;line-height:1.3}
.qa p{margin:0 0 12px}

ol.route{list-style:none;counter-reset:r;padding:0;margin:0}
ol.route li{counter-increment:r;border-bottom:1px solid var(--line);padding:15px 0}
ol.route li:last-child{border-bottom:0}
ol.route a{display:flex;gap:12px;align-items:center;min-height:44px;box-sizing:border-box;
text-decoration:none;color:var(--ink);font-weight:700}
ol.route a::before{content:counter(r);color:var(--accent);font-weight:800;font-size:13px;
min-width:26px;text-align:right;opacity:.85;flex:0 0 26px}
ol.route a:hover{color:var(--accent-2)}
ol.route .d{color:var(--muted);font-size:13px;font-weight:400;margin-left:auto;
padding-left:12px;white-space:nowrap}
ol.route .w{color:var(--muted);font-size:14px;margin:6px 0 0 38px}
ol.eps{list-style:none;padding:0;margin:0}
ol.eps li{border-bottom:1px solid var(--line);padding:16px 0}
ol.eps li:last-child{border-bottom:0}
ol.eps .et{display:flex;gap:10px;align-items:center}
ol.eps .num{color:var(--accent);font-weight:800;font-size:13px;min-width:26px;
text-align:right;opacity:.85;flex:0 0 26px}
ol.eps a{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;
font-weight:700;text-decoration:none;color:var(--ink)}
ol.eps a:hover{color:var(--accent-2)}
ol.eps .d{color:var(--muted);font-size:13px;margin-left:auto;padding-left:12px;white-space:nowrap}
ol.eps audio{width:100%;display:block;margin:10px 0 0 38px;max-width:calc(100% - 38px)}
@media(max-width:520px){ol.route .w{margin-left:0}ol.eps audio{margin-left:0;max-width:100%}}

@media(prefers-color-scheme:dark){
:root{--bg:#0e1014;--bg2:#151c28;--card:#1a212b;--ink:#eef2f7;--muted:#a7b0bd;
--line:#2a333f;--accent:#c96442;--accent-2:#db9982;--accent-ink:#fff}
.cards .cv::after{background:linear-gradient(180deg,rgba(14,16,20,0) 45%,rgba(14,16,20,.55) 100%)}
.cards .cv-gen{background:radial-gradient(120% 120% at 20% 0%,color-mix(in srgb,var(--accent) 22%,transparent),rgba(21,28,40,.9) 60%),
linear-gradient(135deg,#1b2330,#12161d)}
.cards .cvl{color:var(--accent-2)}
}

@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
html{scroll-behavior:smooth}
header.page>*{animation:rise .5s cubic-bezier(.2,.6,.2,1) both}
header.page .kicker{animation-delay:.02s}
header.page h1{animation-delay:.07s}
header.page .lead{animation-delay:.13s}
header.page .meta{animation-delay:.17s}
.hero{animation:rise .6s cubic-bezier(.2,.6,.2,1) .16s both}
.listen{animation:rise .6s cubic-bezier(.2,.6,.2,1) .22s both}
h2{animation:rise .5s cubic-bezier(.2,.6,.2,1) .2s both}
.hero img{transition:transform .4s cubic-bezier(.2,.6,.2,1)}
.hero:hover img{transform:scale(1.012)}
.cards a{transition:border-color .2s,transform .2s cubic-bezier(.2,.6,.2,1),background-color .2s}
.cards a:hover{background:var(--bg2)}
.cards a:active{transform:translateY(0)}
.cards .cv img{transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.cards a:hover .cv img{transform:scale(1.04)}
ol.toc a{transition:color .2s,padding-left .2s cubic-bezier(.2,.6,.2,1)}
ol.toc a:hover{padding-left:8px}
ol.toc .tmb{transition:transform .25s cubic-bezier(.2,.6,.2,1),border-color .2s}
ol.toc a:hover .tmb{transform:scale(1.06);border-color:var(--accent)}
.nav a,.cta a{transition:border-color .2s,transform .2s cubic-bezier(.2,.6,.2,1),filter .2s}
.nav a:hover{transform:translateY(-1px)}
.cta a:hover{filter:brightness(1.06);transform:translateY(-1px)}
a:focus-visible,audio:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.cards li:nth-child(1),ol.toc li:nth-child(1){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.335s both}
.cards li:nth-child(2),ol.toc li:nth-child(2){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.370s both}
.cards li:nth-child(3),ol.toc li:nth-child(3){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.405s both}
.cards li:nth-child(4),ol.toc li:nth-child(4){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.440s both}
.cards li:nth-child(5),ol.toc li:nth-child(5){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.475s both}
.cards li:nth-child(6),ol.toc li:nth-child(6){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.510s both}
.cards li:nth-child(7),ol.toc li:nth-child(7){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.545s both}
.cards li:nth-child(8),ol.toc li:nth-child(8){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.580s both}
.cards li:nth-child(9),ol.toc li:nth-child(9){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.615s both}
.cards li:nth-child(10),ol.toc li:nth-child(10){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.650s both}
.cards li:nth-child(11),ol.toc li:nth-child(11){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.685s both}
.cards li:nth-child(12),ol.toc li:nth-child(12){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.720s both}
.cards li:nth-child(13),ol.toc li:nth-child(13){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.755s both}
.cards li:nth-child(14),ol.toc li:nth-child(14){animation:rise .5s cubic-bezier(.2,.6,.2,1) 0.790s both}

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