/* An editorial index, with one ink colour for the selected chapter. */
.live-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:850px;border-block:1px solid #788478;padding:0}
.live-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:108px;padding:12px 18px 17px;border:0;border-right:1px solid #4a554b;border-radius:0;background:none;color:#b9c4b9;text-align:left;font:400 16px/1.15 Inter;letter-spacing:-.5px;text-transform:none;transition:color .18s ease,background .18s ease}
.live-tabs button:last-child{border-right:0}
.live-tabs button span,.live-tabs button[aria-selected=true] span{display:block;font:italic 42px/.85 Garamond,Georgia;letter-spacing:-3px;color:inherit}
.live-tabs button::after{content:'↗';position:absolute;right:16px;top:12px;font:18px/1 Inter;color:#788478;transition:transform .18s ease}
.live-tabs button[aria-selected=true]{background:#b391d2;color:#131b15;text-decoration:none}
.live-tabs button[aria-selected=true]::after{content:'↓';color:inherit}
.live-tabs button:hover{background:#243027;color:#d6dfd3}
.live-tabs button[aria-selected=true]:hover{background:#c1a1dd;color:#131b15}
.live-tabs button:hover::after{transform:translate(2px,-2px)}
.live-tabs button:focus-visible{outline:2px solid #e5d1f3;outline-offset:-5px}
.live-panel{max-width:850px;min-height:122px;text-align:left;padding:22px 0 24px}
.live-panel h4{font:400 30px/1.05 Garamond,Georgia;text-transform:none;letter-spacing:-.7px;margin-bottom:7px}
.live-panel p{margin:0;font-size:13px;line-height:1.5;max-width:590px;color:#aebbae}
.live-example{padding:15px 0;border-block:1px solid #788478;gap:25px;align-items:center;font:400 29px/1.1 Garamond,Georgia;letter-spacing:-.7px;color:#d1d8cd}
.live-example>span{min-width:0}
.live-example small{font:9px/1.4 Plex;letter-spacing:.5px;color:#8a9a89;margin-top:8px}
.live-example b{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;background:#b391d2;color:#131b15;font:30px/1 Inter;font-weight:400;transition:background .18s ease,transform .18s ease}
.live-example:hover{background:transparent;color:#c3a0e1;text-decoration:none}
.live-example:hover small{color:#aebbae}
.live-example:hover b{background:#d2b8e7;transform:translateX(3px)}
.live-editorial>a:last-child:not(.live-example){display:flex;align-items:center;justify-content:flex-end;max-width:850px;width:100%;min-height:44px;margin:8px auto 0;font:12px/1.3 Inter;letter-spacing:0;color:#b9c4b9;text-decoration:underline;text-underline-offset:5px}
.live-example:focus-visible,.live-editorial>a:last-child:focus-visible{outline:2px solid #c3a0e1;outline-offset:5px}
@media(max-width:650px){
 .live-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .live-tabs button{min-height:94px;padding:12px 13px;gap:12px;font-size:14px}
 .live-tabs button:nth-child(2){border-right:0}
 .live-tabs button:nth-child(-n+2){border-bottom:1px solid #4a554b}
 .live-tabs button span,.live-tabs button[aria-selected=true] span{font-size:36px}
 .live-tabs button::after{right:13px}
 .live-panel{min-height:133px;padding:20px 0}
 .live-panel h4{font-size:27px}
 .live-panel p{font-size:12px}
 .live-example{font-size:25px;gap:16px;padding:15px 0}
 .live-example b{flex-basis:46px;width:46px;height:46px;font-size:26px}
 .live-example small{font-size:8px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){.live-tabs button,.live-tabs button::after,.live-example b{transition:none}}
