:root { --ink:#18211d; --paper:#f6f1e7; --mist:#dfe8df; --lime:#c8f05d; --red:#e45c42; --line:rgba(24,33,29,.18); --serif: Georgia, 'Times New Roman', serif; --sans: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); }
body { margin:0; font-family:var(--sans); line-height:1.55; }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.wrap { width:min(1120px, calc(100% - 40px)); margin:auto; }
.site-header { border-bottom:1px solid var(--line); padding:18px 0; background:var(--paper); }
.site-header .wrap, .site-footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { font-weight:800; text-decoration:none; letter-spacing:-.03em; }
.brand span { color:var(--red); }
.archive { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; }
.hero { padding:76px 0 52px; display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:end; }
.eyebrow { color:#526259; text-transform:uppercase; font-size:.75rem; letter-spacing:.14em; font-weight:800; }
h1,h2,h3 { letter-spacing:-.045em; line-height:1.02; margin:0; }
h1 { font:clamp(3rem,8vw,7rem)/.9 var(--serif); font-weight:400; }
h2 { font:clamp(2rem,5vw,3.6rem)/.98 var(--serif); font-weight:400; }
h3 { font-size:1.25rem; }
.lede { font:1.25rem/1.45 var(--serif); max-width:38rem; margin:25px 0 0; }
.hero-card { background:var(--ink); color:var(--paper); padding:28px; position:relative; min-height:260px; overflow:hidden; }
.hero-card:after { content:''; width:220px; height:220px; border:1px solid var(--lime); border-radius:50%; position:absolute; right:-85px; top:-70px; }
.series-list { list-style:none; padding:0; margin:27px 0 0; border-top:1px solid var(--line); }
.series-list li { border-bottom:1px solid var(--line); }
.series-list a { display:grid; grid-template-columns:64px 1fr auto; padding:20px 0; text-decoration:none; gap:12px; align-items:center; }
.series-list a:hover .episode-title { text-decoration:underline; }
.episode-no { color:var(--red); font:1.6rem var(--serif); }
.muted { color:#58655e; }
.intro-band { background:var(--mist); padding:48px 0; margin-top:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-3 p { margin:10px 0 0; }
.page-hero { padding:46px 0 30px; border-bottom:1px solid var(--line); }
.page-hero h1 { font-size:clamp(3rem,7vw,6rem); max-width:900px; }
.meta { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0; color:#526259; font-size:.9rem; }
.content { width:min(690px, calc(100% - 40px)); margin:0 auto; padding:50px 0 72px; }
.content p { font:1.18rem/1.65 var(--serif); margin:0 0 22px; }
.watch-box { padding:24px; margin:32px 0; border:1px solid var(--ink); background:var(--lime); }
.series-bridge { border-left:4px solid var(--lime); padding:12px 16px; background:#f1f5d7; font-weight:700; }
.button { display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:13px 18px; background:var(--ink); color:var(--paper); font-weight:800; text-decoration:none; border:0; cursor:pointer; }
.button:hover { background:#34453b; }
.watch-note { font-size:.85rem!important; margin:14px 0 0!important; }
details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin:34px 0; }
summary { cursor:pointer; font-weight:800; }
details[open] summary { margin-bottom:20px; }
.visual { margin:36px 0; padding:24px; border:1px solid var(--line); background:white; }
.court { height:190px; border:2px solid var(--ink); position:relative; overflow:hidden; background:linear-gradient(90deg,#f6f1e7 49.6%,var(--ink) 49.6%,var(--ink) 50.4%,#f6f1e7 50.4%); }
.court:before,.court:after { content:''; position:absolute; top:50%; width:74px; height:74px; border:2px solid var(--ink); border-radius:50%; transform:translateY(-50%); }
.court:before { left:-38px; }.court:after{right:-38px;}
.dot { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--red); display:grid; place-items:center; color:white; font-size:.65rem; font-weight:800; }
.dot.a{left:28%;top:39%;}.dot.b{left:50%;top:58%;}.dot.c{right:22%;top:30%;background:var(--ink);}
.caption { font-size:.83rem!important; color:#58655e; margin:12px 0 0!important; }
.feedback { margin:50px 0 0; padding:24px; background:var(--mist); }
.feedback h2 { font:1.7rem/1 var(--serif); }
.feedback p { font:1rem/1.5 var(--sans); margin:10px 0 16px; }
.choice-row { display:flex; flex-wrap:wrap; gap:9px; }
.choice { padding:9px 13px; border:1px solid var(--ink); background:transparent; cursor:pointer; font:inherit; }
.choice[aria-pressed="true"] { background:var(--ink); color:white; }
.next { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; align-items:center; }
.site-footer { padding:30px 0 48px; border-top:1px solid var(--line); font-size:.83rem; color:#526259; }
.privacy { text-align:left; border:0; padding:0; background:transparent; color:inherit; text-decoration:underline; cursor:pointer; }
.privacy-panel { display:none; padding:14px; border:1px solid var(--line); margin-top:15px; color:var(--ink); background:white; }.privacy-panel.show{display:block;}
@media(max-width:720px){ .wrap{width:min(100% - 28px,1120px)}.hero{grid-template-columns:1fr;padding:44px 0 30px;gap:28px}.grid-3{grid-template-columns:1fr}.hero-card{min-height:210px}.series-list a{grid-template-columns:44px 1fr auto}.content{width:min(100% - 28px,690px);padding-top:34px}.next{align-items:flex-start;flex-direction:column}.site-header .archive{display:none} }