/* Clay's Instructional Printed Interviews — matches the homepage (navy, red, cream, gold) */
#csi{--bg:#F7F5F1;--mist:#EFE8DC;--ink:#1B1A18;--ink2:#4A4640;--muted:#5F5A53;--line:#DED9D0;--navy:#153146;--navy-d:#0E2233;--navy-l:#2A4A66;--red:#8E2B26;--red-d:#6E1F1B;--gold:#D4AB65;--gold-l:#E6C88F;--cream:#F1E7D3;--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--r:12px;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
#csi *,#csi *::before,#csi *::after{box-sizing:border-box}
#csi h1,#csi h2,#csi h3,#csi p,#csi ul{margin:0;padding:0}
#csi h1,#csi h2{font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
#csi a{transition:color .2s,background-color .2s,border-color .2s,transform .3s,box-shadow .3s}
#csi :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#csi svg{flex:none}
#csi .csi-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
#csi .csi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hero */
#csi .csi-hero{background:var(--navy);padding:clamp(64px,8vw,112px) 0 clamp(48px,6vw,80px);position:relative;overflow:hidden}
#csi .csi-hero::after{content:"";position:absolute;width:760px;height:760px;right:-260px;top:-300px;border:1px dashed rgba(212,171,101,.3);border-radius:50%;animation:csi-spin 120s linear infinite}
@keyframes csi-spin{to{transform:rotate(360deg)}}
#csi .csi-h1{position:relative;z-index:1;font-family:var(--serif);font-size:clamp(46px,6.4vw,92px);line-height:1;color:#fff;max-width:900px}
#csi .csi-h1::after{content:"";display:block;width:64px;height:2px;margin-top:26px;background:var(--gold)}
#csi .csi-stats{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
#csi .csi-stats span+span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 28px 2px -14px;background:var(--gold);transform:rotate(45deg);vertical-align:middle}
/* featured slider */
#csi .csi-feat{background:var(--navy-d);border-top:3px solid var(--red);padding:clamp(48px,6vw,76px) 0;color:#fff}
#csi .csi-slides{display:grid;text-align:center}
#csi .csi-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease,visibility 0s linear .7s}
#csi .csi-slide.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s ease,visibility 0s}
#csi .csi-slide__name{font-family:var(--serif);font-size:clamp(44px,6vw,84px);line-height:1;color:#fff}
#csi .csi-slide__topic{max-width:760px;margin:18px auto 0;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--gold-l)}
#csi .csi-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:28px;padding:12px 26px;border-radius:6px;border:1px solid var(--gold);background:var(--red);color:#fff;font-size:16px;font-weight:600;text-decoration:none}
#csi .csi-btn:hover{background:#fff;color:var(--red);transform:translateY(-2px)}
#csi .csi-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px}
#csi .csi-dots{display:flex;flex-wrap:wrap;justify-content:center}
#csi .csi-dot{width:36px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
#csi .csi-dot span{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s,transform .3s}
#csi .csi-dot[aria-current="true"] span{background:var(--gold);transform:scale(1.35)}
#csi .csi-arrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
#csi .csi-arrow:hover{background:#fff;color:var(--navy)}
#csi .csi-arrow svg{width:18px;height:18px}
/* tools */
#csi .csi-library{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,104px)}
#csi .csi-tools{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px;margin:0 -16px;background:rgba(247,245,241,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
#csi .csi-search{position:relative;flex:1 1 300px;min-width:0;display:flex;align-items:center}
#csi .csi-search svg{position:absolute;left:16px;width:20px;height:20px;color:var(--muted);pointer-events:none}
#csi .csi-search input{width:100%;min-height:50px;padding:12px 16px 12px 48px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #CFC6B6;border-radius:999px;-webkit-appearance:none;appearance:none}
#csi .csi-search input:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(21,49,70,.15)}
#csi .csi-chips{display:flex;flex-wrap:wrap;gap:8px}
#csi .csi-chip{min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid #CFC6B6;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
#csi .csi-chip span{margin-left:4px;font-size:13px;color:var(--muted)}
#csi .csi-chip:hover{border-color:var(--navy)}
#csi .csi-chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
#csi .csi-chip.is-on span{color:var(--gold-l)}
#csi .csi-count{margin:24px 0 20px;font-size:14px;color:var(--muted)}
/* cards */
#csi .csi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
#csi .csi-card{background:#fff;border-radius:var(--r);border-top:3px solid var(--navy);padding:26px 26px 18px;box-shadow:0 1px 2px rgba(21,49,70,.05);transition:transform .3s,box-shadow .3s}
#csi .csi-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(21,49,70,.12)}
#csi .csi-card[data-pubs~="wd"]:not([data-pubs~="kn"]){border-top-color:var(--red)}
#csi .csi-card__head{display:flex;align-items:center;gap:16px}
#csi .csi-card__photo{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold)}
#csi .csi-initials{display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold-l);font-family:var(--serif);font-size:24px;line-height:1;letter-spacing:.02em}
#csi .csi-slide__photo{display:block;width:112px;height:112px;margin:0 auto 20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--navy-d),0 0 0 5px var(--gold)}
#csi .csi-slide__photo.csi-initials{display:flex;font-size:42px;background:var(--navy-l);color:var(--gold-l)}
#csi .csi-card__name{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--ink)}
#csi .csi-card__name--title{font-size:24px;line-height:1.2}
#csi .csi-card__n{margin-top:4px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#csi .csi-card ul{list-style:none;margin-top:14px}
#csi .csi-card li{border-top:1px solid var(--line)}
#csi .csi-card li a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 26px 14px 0;position:relative;color:var(--ink2);text-decoration:none}
#csi .csi-card li a svg{position:absolute;right:0;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--red);transition:transform .25s}
#csi .csi-card li a:hover{color:var(--navy)}
#csi .csi-card li a:hover svg{transform:translateX(4px)}
#csi .csi-topic{flex:1 1 100%;font-size:16px;line-height:1.45}
#csi .csi-tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1.4}
#csi .csi-tag--wd{background:#F6E4E2;color:var(--red-d)}
#csi .csi-tag--kn{background:#E1E8EF;color:var(--navy)}
#csi .csi-tag--ot{background:var(--mist);color:var(--ink2)}
#csi .csi-card li.is-hidden,#csi .csi-card.is-hidden,#csi .csi-row.is-hidden{display:none}
#csi .csi-empty{padding:48px 0;text-align:center;font-family:var(--serif);font-size:28px;color:var(--muted)}
/* general interviews */
#csi .csi-general{background:var(--mist);padding:clamp(64px,8vw,104px) 0}
#csi .csi-h2{font-family:var(--serif);font-size:clamp(36px,4.2vw,56px)}
#csi .csi-h2::after{content:"";display:block;width:56px;height:2px;margin-top:20px;background:var(--gold)}
#csi .csi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:40px;border-top:1px solid var(--navy)}
#csi .csi-row{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:6px 16px;align-items:center;padding:20px 0;border-bottom:1px solid #D6CCBB;color:var(--ink);text-decoration:none}
#csi .csi-row__outlet{grid-column:1;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
#csi .csi-row__title{grid-column:1;font-family:var(--serif);font-size:23px;line-height:1.25}
#csi .csi-row svg{grid-column:2;grid-row:1/span 2;width:20px;height:20px;color:var(--red);transition:transform .25s}
#csi .csi-row:hover .csi-row__title{color:var(--navy)}
#csi .csi-row:hover svg{transform:translateX(4px)}
/* motion */
#csi.csi-js .csi-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
#csi.csi-js .csi-reveal.is-in{opacity:1;transform:none}
/* responsive */
@media (max-width:980px){
#csi .csi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#csi .csi-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
#csi .csi-grid{grid-template-columns:minmax(0,1fr)}
#csi .csi-tools{position:static}
#csi .csi-stats span+span::before{display:none}
#csi .csi-dot{width:26px}
#csi .csi-controls{gap:8px}
}
@media (prefers-reduced-motion:reduce){
#csi *{animation:none!important;transition:none!important}
#csi.csi-js .csi-reveal{opacity:1;transform:none}
}