:root{--night:#21191b;--wine:#6d2229;--red:#a63c35;--cream:#f5efe6;--paper:#fffbf4;--ink:#302523;--muted:#6d615d;--line:#dfd2c3;--gold:#dfb77b;--serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.7 var(--sans)}
a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.skip-link{position:absolute;z-index:30;top:-70px;left:18px;background:#fff;padding:8px 15px}.skip-link:focus{top:15px}
.shell{max-width:1180px;margin:auto;padding-left:34px;padding-right:34px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--night);color:#fff;padding:19px max(34px,calc((100vw - 1112px)/2))}
.brand{display:inline-flex;flex-direction:column;line-height:1.12;white-space:nowrap;text-decoration:none}.brand span{font:700 29px/1 var(--serif);letter-spacing:.14em}.brand b{font-size:9px;letter-spacing:.31em;font-weight:600;margin-top:7px}
.site-header nav{display:flex;gap:30px}.site-header nav a{font-size:11px;text-decoration:none;text-transform:uppercase;letter-spacing:.12em}.site-header nav a:hover,.site-footer>a:last-child:hover{text-decoration:underline}
.hero{min-height:630px;display:grid;grid-template-columns:44% 56%;background:var(--night);color:#fff;position:relative;overflow:hidden}.hero-photo{min-height:630px;background:linear-gradient(0deg,#21191b33,#21191b22),url('/le-rouge-et-le-noir/images/stendhal.jpg') center 25%/cover no-repeat;filter:sepia(.15) contrast(1.03)}.hero-copy{align-self:center;z-index:1;padding:80px min(7vw,100px) 90px}.eyebrow,.section-no,.place{font:700 11px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase}.eyebrow{color:var(--gold)}.hero h1{font:600 clamp(76px,8.2vw,135px)/.82 var(--serif);letter-spacing:-.045em;margin:33px 0 31px}.hero h1 span{display:block;color:#e6bcaa;font-style:italic;font-weight:500}.hero-lead{font:500 clamp(25px,2.6vw,34px)/1.15 var(--serif);max-width:550px}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin-top:35px}.hero-actions>span{font-size:11px;color:#e8d8cf;letter-spacing:.05em}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:14px 19px;text-decoration:none;text-transform:uppercase;font:700 11px/1.3 var(--sans);letter-spacing:.12em;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--red);color:#fff}.primary:hover{background:#c14d44}.hero-credit{position:absolute;bottom:12px;left:17px;max-width:42%;margin:0;padding:4px 8px;background:#21191bc9;font-size:10px;line-height:1.4}
.opening,.sources{display:grid;grid-template-columns:190px minmax(0,1fr);gap:70px;padding-top:90px;padding-bottom:90px}.section-no{color:var(--red);margin:0;padding-top:10px}.opening h2,.overview h2,.afterword h2,.sources h2{font:600 clamp(43px,5vw,69px)/.96 var(--serif);margin:0 0 25px}.opening h2 em,.overview h2 em,.afterword h2 em{color:var(--red);font-weight:500}.opening>div{max-width:800px}.opening>div p{margin:0 0 18px}
.overview{padding-top:66px;padding-bottom:85px;border-top:1px solid var(--line);scroll-margin-top:20px}.overview-head{display:grid;grid-template-columns:1fr minmax(250px,.55fr);gap:14px 45px;align-items:end;margin-bottom:28px}.overview-head .section-no{grid-column:1/-1;padding:0}.overview h2{margin:0}.overview-head>p:last-child{margin:0 0 4px;font-size:14px}.overview-body{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(0,1.2fr);gap:16px}.overview-map{background:#e7dfd1;border:1px solid #d8caba;display:flex;flex-direction:column;justify-content:center;padding:14px;min-width:0}.overview-map svg{display:block;width:100%;height:auto}.overview-map>span{font-size:10px;letter-spacing:.08em;color:#6e5c59;text-transform:uppercase;margin-left:10px}.map-river{fill:none;stroke:#c2c8c7;stroke-width:35}.map-street{fill:none;stroke:#fbf7ec;stroke-width:16}.map-caption{fill:var(--wine);font:700 12px var(--sans);letter-spacing:1.6px}.map-water{fill:#6f7f7e;font:600 10px var(--sans);letter-spacing:1.5px}.map-pin circle{fill:var(--red);stroke:#fff7ed;stroke-width:3}.map-pin text{fill:#fff;font:700 15px var(--sans);text-anchor:middle}.overview-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.overview-list li:first-child{grid-column:1/-1}.overview-list a{min-height:92px;display:flex;align-items:center;gap:14px;padding:13px 15px;text-decoration:none;border:1px solid var(--line);background:var(--paper);transition:background .2s,border-color .2s}.overview-list a:hover,.overview-list a:focus-visible{background:#f3e6df;border-color:var(--red)}.overview-num{align-self:flex-start;color:var(--red);font:600 28px/1 var(--serif)}.overview-list a>span:nth-child(2){min-width:0}.overview-list strong{display:block;font:600 22px/1.04 var(--serif)}.overview-list small{display:block;margin-top:7px;color:var(--muted);font:500 10px/1.4 var(--sans)}.overview-list a>span:last-child{margin-left:auto;color:var(--red)}
.reading{padding-bottom:85px}.reading-intro{display:grid;grid-template-columns:1fr 1fr 220px;gap:22px;align-items:end;border-top:1px solid var(--line);padding:51px 0 34px}.reading-intro>p:nth-child(2){font:500 34px/1.1 var(--serif);margin:0}.progress{background:var(--night);color:#fff;padding:17px 19px;display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px}.progress strong{font:600 28px/1 var(--serif);color:var(--gold)}.progress>span{font-size:11px}.progress-track{flex-basis:100%;height:4px;background:#ffffff38;margin:11px 0 4px}.progress-track span{display:block;background:var(--gold);height:100%;width:0;transition:width .25s}.progress button{background:none;border:0;color:var(--gold);padding:4px 0 0;text-decoration:underline;cursor:pointer;font-size:11px}
.step{display:grid;grid-template-columns:46% 54%;background:var(--paper);border:1px solid var(--line);margin-bottom:28px;scroll-margin-top:20px;box-shadow:0 10px 30px #4c28220b}.step:nth-of-type(even) .step-image{order:2}.step-image{margin:0;position:relative;min-height:620px;overflow:hidden;background:#d6c5b7}.step-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.14) saturate(.8)}.step-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#21191b66,transparent 32%);pointer-events:none}.step-image figcaption{position:absolute;z-index:1;left:23px;bottom:18px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.17em}.step-content{padding:48px clamp(27px,5vw,70px) 35px}.place{color:var(--red);margin:0 0 16px}.step h2{font:600 clamp(45px,4.5vw,68px)/.9 var(--serif);margin:0 0 25px}.step p{margin:0 0 16px}.step .intro{font:500 25px/1.18 var(--serif)}.trace{border-left:3px solid var(--red);padding:5px 0 3px 18px;margin:23px 0;background:linear-gradient(90deg,#f5e8e0,transparent)}.trace strong{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wine)}.trace p{font-size:13px;margin:4px 0}.reading-note{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 0}.reading-note summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 0;color:var(--wine);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.reading-note summary::-webkit-details-marker{display:none}.reading-note summary span{font-size:22px;font-weight:400;line-height:1}.reading-note[open] summary span{transform:rotate(45deg)}.reading-note>p{padding:0 0 14px;margin:0;font-size:14px}.step-links{display:flex;gap:17px;flex-wrap:wrap;margin:21px 0}.step-links a{color:var(--wine);font-size:12px;font-weight:700;text-decoration-thickness:1px;text-underline-offset:4px}.credit{color:var(--muted);font-size:10px;line-height:1.5;margin-top:20px!important}
.afterword{background:var(--night);color:#fff;padding:85px 0}.after-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:70px}.afterword h2{max-width:750px}.afterword h2 em{color:var(--gold)}.afterword p:not(.section-no){max-width:760px}.secondary{background:var(--gold);color:var(--night);margin-top:20px}.sources h2{font-size:51px}.sources>div{max-width:860px}.sources ul{padding-left:18px;font-size:13px}.sources li{margin-bottom:8px}.sources a{color:var(--wine);font-weight:700}.site-footer{background:#171114;color:#fff;padding:32px max(34px,calc((100vw - 1112px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.site-footer .brand span{font-size:25px}.site-footer>a:last-child{color:var(--gold);text-decoration:none}
@media(max-width:900px){.hero{grid-template-columns:42% 58%}.hero-copy{padding:55px 7vw}.hero h1{font-size:clamp(69px,9vw,105px)}.opening,.sources,.after-grid{grid-template-columns:130px 1fr;gap:35px}.overview-body{grid-template-columns:1fr}.overview-map{max-width:570px}.step-content{padding:37px 31px}.step-image{min-height:650px}}
@media(max-width:720px){.shell{padding-left:20px;padding-right:20px}.site-header{padding:17px 20px}.brand span{font-size:24px}.site-header nav{gap:15px}.site-header nav a{font-size:10px}.hero{display:flex;flex-direction:column}.hero-photo{min-height:310px;background-position:center 31%}.hero-copy{padding:45px 20px 65px}.hero h1{font-size:clamp(72px,15vw,118px);margin:24px 0}.hero-credit{top:273px;bottom:auto;max-width:none;left:9px;right:9px;font-size:9px}.opening,.sources,.after-grid{display:block}.opening,.sources{padding-top:60px;padding-bottom:62px}.opening .section-no,.sources .section-no,.after-grid .section-no{margin-bottom:20px}.overview{padding-top:54px;padding-bottom:60px}.overview-head{display:block}.overview h2{margin:12px 0 20px}.overview-list{grid-template-columns:1fr}.overview-list li:first-child{grid-column:auto}.overview-list a{min-height:75px}.reading-intro{grid-template-columns:1fr;gap:8px}.progress{max-width:260px;margin:12px 0 0}.step{display:flex;flex-direction:column}.step:nth-of-type(even) .step-image{order:0}.step-image{min-height:340px;aspect-ratio:4/3}.step-content{padding:32px 24px}.step h2{font-size:51px}.afterword{padding:65px 0}.site-footer{padding:33px 20px;flex-wrap:wrap}.site-footer p{width:100%;order:2}}
@media(max-width:390px){.site-header nav a:last-child{display:none}.hero h1{font-size:67px}.opening h2,.overview h2,.afterword h2{font-size:46px}.step h2{font-size:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.overview-list a,.progress-track span{transition:none}}