/* Portfolio Twenty One Group: site styles.
   Part 1 is the design's own stylesheet (V7), scoped to .site instead of .v7.
   Part 2 holds the values that were inline in the design, as classes.
   Part 3 adds production pieces: legal pages, form additions, accessibility.
   Part 4 adds the CMS pieces; Part 5 the modern browser features (2.0);
   Part 6 the article banner and author pages (2.2). */

/* Fonts (self hosted, latin subset, variable) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:200 500;font-display:swap;src:url(../fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 400;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 400;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Part 1: design stylesheet ---------- */
body{margin:0;background:#F7F7F5}
a{color:inherit}a:hover{color:inherit}
.site{--bg:#F7F7F5;--fg:#111111;--mid:#66665F;--line:rgba(17,17,17,.14);--line-inv:rgba(247,247,245,.18);--shadow:rgba(0,0,0,.3)}
.site.dark{--bg:#111111;--fg:#F7F7F5;--mid:#9C9C97;--line:rgba(247,247,245,.16);--line-inv:rgba(17,17,17,.16);--shadow:rgba(0,0,0,.6)}
.site{position:relative;min-height:100vh;background:var(--bg);color:var(--fg);font-family:'Newsreader',Georgia,serif;font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .5s,color .5s}
.site .split{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}
@media (min-width:1100px){.site .split{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px}}
.site .hsp{grid-column:1/-1}
@media (min-width:1000px){.site .hsp{grid-column:span 2}}
.site .rail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:55;display:none;flex-direction:column;align-items:flex-end;gap:12px;transition:color .3s}
@media (min-width:900px){.site .rail{display:flex}}
.site .rail-item{display:inline-flex;align-items:center;gap:12px;border:0;background:transparent;color:inherit;opacity:.38;cursor:pointer;padding:4px 0;font-family:'Montserrat',sans-serif;font-weight:500;font-size:9px;letter-spacing:.26em;transition:opacity .25s}
.site .rail-item .ln{display:inline-block;width:14px;height:1px;background:currentColor;transition:width .3s}
.site .rail-item:hover{opacity:.8}.site .rail-item.on{opacity:1}.site .rail-item.on .ln{width:32px}
.site .dockwrap{position:fixed;left:0;right:0;bottom:24px;z-index:70;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.site .menu{pointer-events:auto;width:min(400px,calc(100vw - 32px));background:var(--fg);color:var(--bg);border:1px solid var(--line-inv);box-shadow:0 24px 60px var(--shadow);padding:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.site .mitem{display:block;width:100%;border:0;background:transparent;color:inherit;padding:16px 20px;cursor:pointer;text-align:center;font-family:'Montserrat',sans-serif;font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;transition:background .25s,color .25s}
.site .mitem:hover{background:var(--line-inv)}
.site .mitem.hi{background:var(--bg);color:var(--fg);font-weight:500}.site .mitem.hi:hover{opacity:.9}
.site *{box-sizing:border-box}
.site input,.site textarea,.site button{font-family:inherit}
.site input:focus-visible,.site textarea:focus-visible,.site button:focus-visible,.site a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site .cap{font-family:'Montserrat',sans-serif;font-weight:500;font-size:10px;letter-spacing:.38em;text-transform:uppercase}
.site .mont{font-family:'Montserrat',sans-serif;font-weight:200;letter-spacing:-.01em}
.site .wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.site .stack{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,12vh,160px) 0}
.site .ink{background:var(--fg);color:var(--bg)}
.site .paper{background:var(--bg);color:var(--fg)}
.site .line{border-top:1px solid var(--line)}
.site .line-inv{border-top:1px solid var(--line-inv)}
.site .btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:0 32px;font-family:'Montserrat',sans-serif;font-weight:500;font-size:10px;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s;color:inherit}
.site .btn-solid{background:currentColor;border:1px solid currentColor}.site .btn-solid span{color:var(--bg)}.site .ink .btn-solid span{color:var(--fg)}
.site .btn-solid:hover{opacity:.85}
.site .btn-line{background:transparent;border:1px solid currentColor;color:inherit}.site .btn-line:hover{background:currentColor}.site .btn-line:hover span{color:var(--bg)}.site .ink .btn-line:hover span{color:var(--fg)}
.site .desk{display:flex}
.site .hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,4vw,40px);pointer-events:none;transition:color .3s}
.site .on-paper{color:#111111}.site .on-ink{color:#F7F7F5}
.site .lg-dark{display:none}.site .on-ink .lg-dark{display:inline-block}.site .on-ink .lg-light{display:none}
.site .hdr a,.site .hdr button{pointer-events:auto;color:inherit}
.site .hlink{border:0;background:transparent;cursor:pointer;padding:8px 0;position:relative}
.site .hlink::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.site .hlink:hover::after,.site .hlink.on::after{transform:scaleX(1)}
.site .dock{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:8px;background:var(--fg);color:var(--bg);box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid var(--line-inv)}
.site .dbtn{width:44px;height:44px;border:0;background:transparent;color:inherit;opacity:.6;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .25s,background .25s}
.site .dbtn:hover{opacity:1;background:var(--line-inv)}
.site .dsep{width:1px;height:28px;background:var(--line-inv);margin:0 4px}
.site .modal-bg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.site .modal{position:relative;width:min(840px,100%);max-height:88vh;overflow:auto;background:var(--bg);color:var(--fg);border:1px solid var(--line);box-shadow:0 40px 100px rgba(0,0,0,.5);display:flex;flex-direction:column}
.site .mhead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px clamp(24px,4vw,48px);background:var(--bg);border-bottom:1px solid var(--line)}
.site .mbody{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:40px}
.site .xbtn{width:44px;height:44px;border:1px solid var(--line);background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,color .25s}
.site .xbtn:hover{background:var(--fg);color:var(--bg)}
.site .mli{display:flex;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:16px;color:var(--mid)}
.site .mli .n{font-family:'Montserrat',sans-serif;font-weight:500;font-size:10px;letter-spacing:.2em;min-width:26px;padding-top:5px;color:var(--fg)}
.site .legal p{font-size:15px;color:var(--mid);line-height:1.65;margin:0}
.site .legal section h2,.site .legal section h3{margin:0 0 8px;font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;letter-spacing:.04em;color:var(--fg)}
.site .legal section{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid var(--line)}
.site .car{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.site .car::-webkit-scrollbar{display:none}
.site .card{flex:0 0 min(380px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:340px;padding:32px;border:1px solid var(--line-inv)}
.site .pth{display:flex;flex-direction:column;gap:28px;padding:clamp(40px,4vw,64px) clamp(28px,3vw,48px);border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;text-align:left;width:100%;transition:background .35s,color .35s}
.site .pth:hover{background:var(--fg);color:var(--bg)}
.site .hold{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 40px;gap:24px;align-items:center;padding:32px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:padding-left .3s}
.site a.hold:hover{padding-left:16px}
.site .fld{display:flex;flex-direction:column;gap:12px}
.site .fld label{font-family:'Montserrat',sans-serif;font-weight:500;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--bg);opacity:.6}
.site .fld input,.site .fld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-inv);color:var(--bg);padding:12px 0;font-family:'Newsreader',serif;font-size:19px;border-radius:0}
.site .fld input:focus,.site .fld textarea:focus{outline:0;border-bottom-color:var(--bg)}
.site .fld input::placeholder,.site .fld textarea::placeholder{color:var(--bg);opacity:.35}
.site .flink{text-decoration:none;font-size:15px;border:0;background:transparent;padding:0;cursor:pointer;font-family:'Newsreader',serif;text-align:left;color:var(--mid)}.site .flink:hover{color:var(--fg)}
.site .tlink{border:0;background:transparent;padding:0;color:inherit;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:4px}
.site.nostack .stack{position:relative;min-height:0;z-index:auto}
@media (max-width:860px){.site .desk{display:none}}
@media (max-width:700px){
  .site .stack{padding:80px 0}
  .site .hold{grid-template-columns:minmax(0,1fr) 40px;gap:12px 16px;padding:24px 0}
  .site .hold > :nth-child(2){grid-column:1/-1}
  .site .flink{padding:8px 0;font-size:16px}
  .site .card{flex-basis:min(320px,84vw);min-height:300px}
  .site .modal{max-height:94vh}
  .site .mbody{gap:28px}
  .site .dock{gap:2px}
  .site .cap{letter-spacing:.28em}
}
@media (prefers-reduced-motion:reduce){.site *{transition:none!important}}

/* ---------- Part 2: values that were inline in the design ---------- */
/* Small utilities */
.site .m0{margin:0}
.site .w100{width:100%}
.site .col{display:flex;flex-direction:column}
.site .g-8{gap:8px}.site .g-12{gap:12px}.site .g-20{gap:20px}.site .g-24{gap:24px}.site .g-28{gap:28px}.site .g-32{gap:32px}.site .g-40{gap:40px}.site .g-48{gap:48px}
.site .c-mid{color:var(--mid)}
.site .c-fg{color:var(--fg)}
.site .o-60{opacity:.6}.site .o-70{opacity:.7}.site .o-75{opacity:.75}
.site .fs-14{font-size:14px}.site .fs-15{font-size:15px}.site .fs-16{font-size:16px}.site .fs-17{font-size:17px}.site .fs-18{font-size:18px}
.site .cap-sm{font-size:9px}
.site .mw-42{max-width:42ch}.site .mw-44{max-width:44ch}.site .mw-46{max-width:46ch}
.site .italic{font-style:italic}
.site .td-none{text-decoration:none}
.site .pt-20{padding-top:20px}
.site .as-start{align-self:flex-start}
.site .logo-swap{display:inline-flex}
.site .h-sec{margin:0;font-size:clamp(36px,4.6vw,72px);line-height:1.02}
.site .card-title{margin:0;font-size:11px}
.site .numeral{font-size:56px;line-height:1}
.site .btn-row{display:flex;flex-wrap:wrap;gap:12px}
.site .btn-sm{min-height:44px;padding:0 20px;font-size:9px}

/* Stacked sections: order over each other (kept when stacking is switched off, as in the design) */
.site .stack.z-2{z-index:2}.site .stack.z-3{z-index:3}.site .stack.z-4{z-index:4}.site .stack.z-5{z-index:5}.site .stack.z-6{z-index:6}.site .stack.z-7{z-index:7}.site .stack.z-8{z-index:8}

/* Header */
.site .hdr-home{display:inline-flex;align-items:center;text-decoration:none}
.site .hdr-logo{height:48px;width:auto}
.site .hdr-nav{align-items:center;gap:28px}
.site a.hlink{display:inline-block;text-decoration:none;line-height:normal}
.site .hlink-cta{border:1px solid currentColor;padding:12px 20px}

/* 01 Hero */
.site .hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.site .hero-inner{flex:1 1 auto;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(96px,14vh,120px);padding-bottom:48px}
.site .hero-brand{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.site .hero-logo{width:min(380px,72vw);height:auto}
.site .hero-eyebrow{margin:0 0 12px;color:var(--mid)}
.site .hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;padding-top:40px;align-items:end}
.site .hero-title{margin:0;font-size:clamp(44px,6.4vw,104px);line-height:.98;max-width:13ch}
.site .hero-aside{display:flex;flex-direction:column;gap:24px;max-width:420px}
.site .hero-lede{margin:0;font-size:19px;color:var(--mid)}
.site .facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;padding-top:24px}
.site .fact-val{margin:0;font-size:22px;font-weight:300;line-height:1.1}

/* 02 Group */
.site .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line-inv);border:1px solid var(--line-inv)}
.site .pillar{padding:40px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:300px}

/* 03 Mandate and 06 Holdings section heads */
.site .sec-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:end}
.site .paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.site .pth-top{display:flex;justify-content:space-between;align-items:center}
.site .pth-title{display:block;margin:0;font-size:clamp(36px,3.8vw,60px);line-height:1}
.site .pth-copy{display:block;margin:0;font-size:17px;line-height:1.55;opacity:.75;max-width:52ch}
.site .pline{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:9px;opacity:.7}

/* 04 Criteria */
.site .crit-note{margin:8px 0 0;font-size:14px;line-height:1.5;opacity:.6;max-width:42ch}
.site .crit-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.site .crit-list{display:flex;flex-direction:column;border-bottom:1px solid var(--line-inv)}
.site .crit-label{padding-bottom:16px}
.site .crit-dl{margin:0;display:flex;flex-direction:column}
.site .crit-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding:16px 0;align-items:baseline}
.site .crit-key{padding-top:0}
.site .crit-val{margin:0;font-size:17px;font-weight:300;line-height:1.45}
@media (max-width:700px){.site .crit-row{grid-template-columns:minmax(0,1fr);gap:8px}}

/* 05 Founders carousel */
.site .car-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px}
.site .mw-720{max-width:720px}
.site .car-nav{display:flex;gap:8px}
.site .car-btn{width:52px;height:52px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}

/* 06 Holdings */
.site .hold-list{display:flex;flex-direction:column;border-bottom:1px solid var(--line-inv)}
.site .hold-inv{border-top-color:var(--line-inv)}
.site .hold-name{font-size:clamp(28px,3vw,44px);line-height:1.05}
.site .hold-main{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.site .hold-meta{line-height:1.5}

/* 07 Letter */
.site .portrait{width:200px;aspect-ratio:4/5;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.site .letter-body{display:flex;flex-direction:column;gap:28px;max-width:760px}
.site .quote{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.3;font-style:italic}
.site .letter-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;font-size:17px;color:var(--mid);font-weight:400}
.site .signoff{padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.site .sig-name{font-style:italic;font-size:30px;line-height:1}

/* 08 Contact */
.site .contact-lines{display:flex;flex-direction:column;gap:12px;padding-top:24px;font-size:16px}
.site .form{display:flex;flex-direction:column;gap:28px}
.site .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.site .form-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.site .received{border:1px solid var(--line-inv);padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:16px;min-height:340px;justify-content:center}
.site .received-title{margin:0;font-size:40px;line-height:1.05}
.site .received .btn{margin-top:12px}

/* Footer */
.site .site-footer{position:relative;z-index:9;border-top:1px solid var(--line)}
.site .cta-band{padding:56px 0}
.site .cta-band-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.site .cta-title{margin:0;font-size:clamp(26px,3.2vw,44px);line-height:1.05;max-width:22ch}
.site .footer-main{padding-top:64px;padding-bottom:160px;display:flex;flex-direction:column;gap:56px}
.site .footer-logo{width:220px;height:auto}
.site .footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px}
.site .footer-contact a{text-decoration:none;color:var(--fg)}
.site .legal-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-top:24px}
.site .legal-links{display:flex;flex-wrap:wrap;gap:24px}
.site .legal-link,.site .legal-line{font-size:13px;line-height:1.5;color:var(--mid)}
.site .legal-link{text-decoration:none}
.site .legal-link:hover{color:var(--fg)}

/* Dock */
.site .ring{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.site .ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.site .ring-bar{stroke-dasharray:192;stroke-dashoffset:192;transition:stroke-dashoffset .3s ease-out}
.site .dbtn-menu{position:relative;z-index:1;opacity:1;width:40px;height:40px}

/* Modals */
.site .modal-sm{width:min(640px,100%)}
.site .modal-title{margin:0;font-size:32px;line-height:1}
.site .modal-lede{margin:0;font-size:24px;line-height:1.3;font-style:italic}
.site .modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.site .modal-grid-tight{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 32px}
.site .media-email{font-size:26px;font-weight:300;text-decoration:none}
.site .mbody-tight{gap:20px}

/* ---------- Part 3: production additions ---------- */
.site [hidden]{display:none!important}
.no-js .site .dockwrap,.no-js .site .rail{display:none}
html.scroll-lock{overflow:hidden}
.site .home-main{display:contents}
.site [tabindex="-1"]:focus{outline:none}
.site .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site .car:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Skip link */
.site .skip{position:fixed;left:16px;top:16px;z-index:100;padding:16px 20px;background:var(--fg);color:var(--bg);text-decoration:none;transform:translateY(-200%);transition:transform .2s}
.site .skip:focus{transform:none}

/* Portrait slot: hidden when assets/md.jpg is missing */
.site .portrait img{display:block;width:100%;height:100%;object-fit:cover}
.site .portrait.is-missing{display:none}

/* Form additions */
.site .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.site .consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;cursor:pointer}
.site .consent input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--bg);cursor:pointer}
.site .consent span{opacity:.7}
.site .consent a{text-underline-offset:4px}
.site .form-error{margin:0;padding:16px 20px;border:1px solid var(--line-inv);font-size:15px;line-height:1.5}
.site .form-error a{text-underline-offset:4px}
.site button[disabled]{cursor:progress;opacity:.6}

/* Footer links that are anchors on the legal pages, matching the home page buttons */
.site a.flink-btn{font-weight:400;line-height:normal}

/* Legal pages, 404 and form response pages */
.site .page-main{padding:clamp(120px,16vh,160px) 0 96px;min-height:70vh}
.site .page-head{display:flex;flex-direction:column;gap:20px;padding-bottom:40px;max-width:760px}
.site .page-body{display:flex;flex-direction:column;gap:20px;max-width:760px}
.site .legal ul{margin:0;padding-left:1.1em;font-size:15px;color:var(--mid);line-height:1.65;display:flex;flex-direction:column;gap:8px}
.site .legal a{text-underline-offset:3px}
.site .legal-nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:20px;border-top:1px solid var(--line)}
.site .legal-nav a{font-size:9px;color:var(--mid);text-decoration:none}
.site .legal-nav a[aria-current="page"]{color:var(--fg)}
.site .page-lede{margin:0;font-size:19px;color:var(--mid);max-width:46ch}
.site .summary{margin:0;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.site .summary div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.site .summary dt{padding-top:4px}
.site .summary dd{margin:0;font-size:16px;color:var(--mid);white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:700px){.site .summary div{grid-template-columns:1fr;gap:8px}}

/* ---------- Part 4: CMS additions (articles, blocks, extra home section) ---------- */
.site .stack.z-9{z-index:9}.site .stack.z-10{z-index:10}
.site .site-footer{z-index:11}
.site a.mitem{text-decoration:none;line-height:normal}
.site .menu .mitem.hi:nth-child(odd):last-child{grid-column:1/-1}
.site button.hold{width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.site button.hold.hold-inv{border-top-color:var(--line-inv)}
.site button.hold:hover{padding-left:16px}
.site .holding-logo{max-width:240px}
.site .holding-logo img{display:block;width:100%;height:auto}

/* Article cards */
.site .acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.site .acard{display:flex;flex-direction:column;border:1px solid var(--line);text-decoration:none;color:inherit;transition:background .35s,color .35s}
.site .acard:hover{background:var(--fg);color:var(--bg)}
.site .acard:hover .acard-meta,.site .acard:hover .acard-excerpt{color:inherit;opacity:.7}
.site .acard-img{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.site .acard-img img{display:block;width:100%;height:100%;object-fit:cover}
.site .acard-body{display:flex;flex-direction:column;gap:16px;padding:28px;flex:1 1 auto}
.site .acard-meta{color:var(--mid)}
.site .acard-title{font-size:clamp(24px,2.2vw,30px);line-height:1.1}
.site .acard-excerpt{font-size:16px;color:var(--mid)}
.site .acard-more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px}
.site .acard-more svg{width:16px;height:16px}
.site .acard-compact .acard-body{padding:24px;gap:12px}
.site .acard-compact .acard-title{font-size:clamp(22px,1.9vw,26px)}
.site .acard-compact .acard-img{aspect-ratio:16/9}
.site .acard-feature{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.site .acard-feature:not(.acard-noimg){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.site .acard-feature .acard-img{aspect-ratio:auto;min-height:360px;border-bottom:0;border-right:1px solid var(--line)}}
.site .acard-feature .acard-body{padding:clamp(28px,4vw,56px);justify-content:center;gap:20px}
.site .acard-feature .acard-title{font-size:clamp(32px,3.6vw,56px);line-height:1.02}
.site .acard-feature .acard-excerpt{font-size:18px}
.site .acards-home{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:900px){.site .acards-home{grid-template-columns:repeat(3,minmax(0,1fr))}}
.site .acards-home .acard-img{aspect-ratio:2/1}
.site .acards-home .acard-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.site .acards-home .acard-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.site .home-articles-aside{align-items:flex-start}

/* Articles index */
.site .articles-main{padding-bottom:160px}
.site .articles-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px;align-items:end}
.site .article-cats{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:20px}
.site .article-cats a,.site .pager a{color:var(--mid);text-decoration:none;padding:8px 0;position:relative}
.site .article-cats a.on,.site .pager a.on{color:var(--fg)}
.site .article-cats a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.site .article-cats a:hover,.site .pager a:hover{color:var(--fg)}
.site .pager{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px}
.site .pager-nums{display:flex;gap:20px}

/* Article page */
.site .article-main{padding:clamp(120px,16vh,160px) 0 0}
.site .article{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.site .article-head{display:flex;flex-direction:column;gap:24px;max-width:1100px}
.site .article-eyebrow a{text-decoration:none;color:inherit}
.site .article-eyebrow a:hover{color:var(--fg)}
.site .article-title{margin:0;font-size:clamp(40px,5.6vw,88px);line-height:1;max-width:18ch}
.site .article-standfirst{margin:0;font-size:clamp(21px,2vw,26px);line-height:1.4;font-style:italic;color:var(--mid);max-width:44ch}
.site .article-cover{margin:0}
.site .article-cover img{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover}
.site .article-layout{padding-bottom:clamp(64px,8vw,120px)}
.site .article-aside{display:flex;flex-direction:column;gap:32px}
@media (min-width:1100px){.site .article-aside{position:sticky;top:120px}}
.site .article-facts{margin:0;display:flex;flex-direction:column;gap:20px}
.site .article-facts dd{margin:0;font-size:17px;display:flex;flex-direction:column}
.site .article-role{font-size:14px;color:var(--mid)}
.site .article-share-row{display:flex;flex-wrap:wrap;gap:8px 20px}
.site .article-share-row a,.site .article-share-row button{border:0;background:transparent;padding:4px 0;color:inherit;cursor:pointer;text-decoration:none;border-bottom:1px solid var(--line)}
.site .article-share-row a:hover,.site .article-share-row button:hover{border-bottom-color:currentColor}
.site .article-body{display:flex;flex-direction:column;gap:48px;max-width:760px;min-width:0}
.site .article-tags{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.site .article-tags li{padding:8px 12px;border:1px solid var(--line);color:var(--mid)}
.site .article-related{display:flex;flex-direction:column;gap:32px;padding-bottom:160px}
.site .related-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:24px}
.site .related-head a{text-decoration:none}

/* Prose and blocks */
.site .prose{display:flex;flex-direction:column;gap:24px;font-size:19px;line-height:1.7;font-weight:300}
.site .prose > *{margin:0}
.site .prose a{text-underline-offset:3px}
.site .prose .b-p.p-lg{font-size:23px;line-height:1.55}
.site .prose .b-p.p-sm{font-size:16px}
.site .prose .b-p.p-muted{color:var(--mid)}
.site .prose .p-dropcap::first-letter{float:left;font-family:'Montserrat',sans-serif;font-weight:200;font-size:4.2em;line-height:.82;margin:.06em .1em 0 0}
.site .prose .b-h{margin-top:24px;line-height:1.15}
.site .prose .b-h1{font-size:clamp(36px,4vw,56px);line-height:1.02}
.site .prose .b-h2{font-size:clamp(28px,3vw,40px);line-height:1.08}
.site .prose .b-h3{font-family:'Montserrat',sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em}
.site .prose .b-h4{font-family:'Montserrat',sans-serif;font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.site .prose .b-h5,.site .prose .b-h6{font-family:'Montserrat',sans-serif;font-weight:500;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mid)}
.site .prose .b-h + *{margin-top:-8px}
.site .b-standfirst{font-size:clamp(22px,2.2vw,28px);line-height:1.35;font-style:italic}
.site .b-list-title{margin:0 0 8px}
.site .plist{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.site .plist.cols-2{display:block;columns:2;column-gap:32px}
.site .plist.cols-2 li{break-inside:avoid;margin-bottom:8px}
.site .b-mlist .mli,.site .b-listgroup .mli{font-size:17px}
.site .b-quote{margin:0;padding-left:28px;border-left:1px solid var(--fg);display:flex;flex-direction:column;gap:16px}
.site .b-quote blockquote{margin:0}
.site .b-quote blockquote p{margin:0;font-size:22px;line-height:1.45;font-style:italic}
.site .b-quote figcaption{display:flex;flex-direction:column;gap:4px}
.site .b-quote-name{font-style:italic;font-size:20px}
.site .b-pullquote{margin:16px 0;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.site .b-pullquote blockquote{margin:0}
.site .b-pullquote p{margin:0;font-size:clamp(26px,2.8vw,36px);line-height:1.25;font-style:italic}
.site .b-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px;font-size:17px;color:var(--mid)}
.site .b-columns .cap{color:var(--fg)}
.site .b-table{margin:0;display:flex;flex-direction:column;gap:12px}
.site .b-table-scroll{overflow-x:auto}
.site .b-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.site .b-table th{font-family:'Montserrat',sans-serif;font-weight:500;font-size:9px;letter-spacing:.32em;text-transform:uppercase;text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--fg)}
.site .b-table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.site .b-faq{border-bottom:1px solid var(--line)}
.site .b-faq details{border-top:1px solid var(--line)}
.site .b-faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font-family:'Montserrat',sans-serif;font-weight:400;font-size:18px;line-height:1.3}
.site .b-faq summary::-webkit-details-marker{display:none}
.site .b-faq summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site .b-faq-icon{position:relative;flex:0 0 14px;height:14px}
.site .b-faq-icon::before,.site .b-faq-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .3s}
.site .b-faq-icon::after{transform:rotate(90deg)}
.site .b-faq details[open] .b-faq-icon::after{transform:rotate(0)}
.site .b-faq-a{padding:0 0 24px;color:var(--mid);font-size:17px}
.site .b-faq-a p{margin:0}
.site .b-timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.site .b-timeline li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:20px;padding:0 0 28px 28px}
.site .b-timeline li::before{content:"";position:absolute;left:-4px;top:9px;width:7px;height:7px;background:var(--fg)}
.site .b-timeline-date{padding-top:6px;color:var(--mid)}
.site .b-timeline-title{font-size:24px;line-height:1.2}
.site .b-timeline .m0{font-size:17px}
@media (max-width:700px){.site .b-timeline li{grid-template-columns:1fr;gap:8px}}
.site .b-toc{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.site .b-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:17px}
.site .b-toc .toc-l3{padding-left:20px;font-size:16px}
.site .b-toc a{text-decoration:none;color:var(--mid)}
.site .b-toc a:hover{color:var(--fg)}
.site .b-key{display:flex;flex-direction:column;gap:12px;padding:clamp(28px,3.5vw,48px)}
.site .b-key-title{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.site .b-key-text{margin:0;font-size:18px;line-height:1.6}
.site .b-key.key-ink{background:var(--fg);color:var(--bg)}
.site .b-key.key-ink .b-key-label{opacity:.6}
.site .b-key.key-ink .b-key-text{opacity:.8}
.site .b-key.key-outline{border:1px solid var(--fg)}
.site .b-key.key-bar{border-left:4px solid var(--fg);padding-top:8px;padding-bottom:8px}
.site .b-key.key-tint{background:var(--line)}
.site .b-key:not(.key-ink) .b-key-label{color:var(--mid)}
.site .b-key.key-tint .b-key-label{color:var(--fg)}
.site .b-keypoints{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.site .b-keypoints li{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:28px;border:1px solid var(--line);min-height:240px}
.site .b-keypoints.kp-ink li{border-color:var(--line-inv)}
.site .b-keypoints .numeral{font-size:48px}
.site .b-stats{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:24px;padding-top:24px}
.site .b-stats.st-ink{padding:32px;border-top:0}
.site .b-stats-label{color:var(--mid);order:2}
.site .b-stats.st-ink .b-stats-label{color:inherit;opacity:.6}
.site .b-stats-value{margin:0;font-size:clamp(32px,3.4vw,48px);font-weight:200;line-height:1;order:1}
.site .b-stats-note{margin:0;color:var(--mid);order:3}
.site .b-stats.st-ink .b-stats-note{color:inherit;opacity:.6}
.site .b-divider{margin:16px 0;border:0}
.site hr.div-line{border-top:1px solid var(--line)}
.site hr.div-thick{border-top:4px solid var(--fg);width:72px}
.site .div-bars{display:flex;gap:8px}
.site .div-bars span{display:block;width:28px;height:28px;background:var(--fg)}
.site .div-dots{display:flex;justify-content:center;gap:20px;font-size:28px;line-height:1;color:var(--mid)}
.site .b-spacer.sp-s{height:8px}.site .b-spacer.sp-m{height:32px}.site .b-spacer.sp-l{height:72px}.site .b-spacer.sp-xl{height:128px}
.site .b-cta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:clamp(32px,4vw,48px)}
.site .b-cta.cta-paper{border:1px solid var(--fg)}
.site .b-cta-title{margin:0;font-size:clamp(24px,2.6vw,34px);line-height:1.1;max-width:22ch}
.site .b-buttons{margin-top:8px}
.site .b-detail{font-size:17px}
.site .b-image,.site .b-gallery,.site .b-video{margin:8px 0;display:flex;flex-direction:column;gap:12px}
.site .b-image img,.site .b-gallery img{display:block;width:100%;height:auto}
.site .b-image.w-narrow{max-width:66%}
.site .b-caption{font-size:15px;color:var(--mid);line-height:1.5}
.site .b-credit{font-family:'Montserrat',sans-serif;font-weight:500;font-size:9px;letter-spacing:.3em;text-transform:uppercase}
.site .b-gallery-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.site .b-gallery-grid.gc-3{grid-template-columns:repeat(3,minmax(0,1fr))}.site .b-gallery-grid.gc-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.site .b-gallery-grid figure{margin:0;display:flex;flex-direction:column;gap:8px}
.site .b-gallery-grid img{aspect-ratio:1;object-fit:cover}
.site .b-mediatext{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:28px}
@media (min-width:700px){.site .b-mediatext{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.site .b-mediatext.mt-right .b-mt-img{order:2}}
.site .b-mediatext.mt-noimg{grid-template-columns:minmax(0,1fr)}
.site .b-mediatext.mt-ink{padding:clamp(24px,3vw,40px)}
.site .b-mediatext.mt-paper{padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.site .b-mt-img img{display:block;width:100%;height:auto}
.site .b-mt-title{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.12}
.site .b-mt-text .m0{font-size:17px;opacity:.8}
.site .b-video video{display:block;width:100%;height:auto;background:#000}
.site .b-file{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-top:20px}
.site .b-file-title{font-size:24px;line-height:1.15}
.site .b-person{display:flex;flex-wrap:wrap;gap:24px;padding-top:24px;align-items:flex-start}
.site .b-person-photo{flex:0 0 120px;width:120px;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.site .b-person-photo img{display:block;width:100%;height:100%;object-fit:cover}
.site .b-person > .col{flex:1 1 260px}
.site .b-person-name{font-style:italic;font-size:28px;line-height:1}
.site .b-holding{display:flex;flex-wrap:wrap;gap:28px;padding:clamp(28px,3.5vw,48px);align-items:flex-start}
.site .b-holding-logo{flex:0 0 120px;background:var(--bg);padding:12px}
.site .b-holding-logo img{display:block;width:100%;height:auto}
.site .b-holding > .col{flex:1 1 260px}
.site .b-holding-name{margin:0;font-size:clamp(26px,2.8vw,36px);line-height:1.05}
.site .b-signoff{margin-top:8px}
.site .b-linkcard{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px;border:1px solid var(--line);text-decoration:none;color:inherit;transition:background .35s,color .35s}
.site .b-linkcard:hover{background:var(--fg);color:var(--bg)}
.site .b-linkcard:hover .c-mid{color:inherit;opacity:.7}
.site .b-linkcard-title{font-size:24px;line-height:1.15}
.site .modal .prose{font-size:17px}
.site .legal-h{margin:0;font-family:'Montserrat',sans-serif;font-weight:400;font-size:15px;letter-spacing:.04em;color:var(--fg)}
.site .legal ol{margin:0;padding-left:1.2em;font-size:15px;color:var(--mid);line-height:1.65}
@media (max-width:700px){
  .site .prose{font-size:18px}
  .site .b-image.w-narrow{max-width:100%}
  .site .plist.cols-2{columns:1}
}
.site .preview-flag{position:fixed;left:16px;bottom:16px;z-index:200;padding:8px 12px;background:#b3261e;color:#fff;font-family:'Montserrat',sans-serif;font-weight:500;font-size:9px;letter-spacing:.3em;text-transform:uppercase;pointer-events:none}
.site .pv-focus{outline:2px dashed #b3261e;outline-offset:8px;transition:outline-color .6s}

/* ---------- Part 5: modern browser features (2.0) ----------
   Each feature is progressive: browsers without it get the Part 1 to 4 behaviour. */

/* Pop-ups are native <dialog> elements, shown in the top layer with the page made inert behind them. */
.site dialog.modal{position:fixed;inset:0;margin:auto;padding:0;width:min(840px,calc(100% - 40px));max-width:none;height:fit-content;max-height:88vh}
.site dialog.modal-sm{width:min(640px,calc(100% - 40px))}
.site dialog.modal:not([open]){display:none}
.site dialog.modal::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:700px){.site dialog.modal{max-height:94vh}}

/* The dock menu is a popover: Escape or a click elsewhere closes it. */
.site .menu[popover]{position:fixed;inset:auto 0 110px 0;margin:0 auto;height:fit-content;overflow:visible}
.site .menu[popover]:not(:popover-open){display:none}

@media (prefers-reduced-motion:no-preference){
  .site dialog.modal{transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1),overlay .35s allow-discrete,display .35s allow-discrete}
  .site dialog.modal:not([open]){opacity:0;transform:translateY(18px)}
  .site dialog.modal::backdrop{transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}
  .site dialog.modal:not([open])::backdrop{opacity:0}
  .site .menu[popover]{transition:opacity .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),overlay .25s allow-discrete,display .25s allow-discrete}
  .site .menu[popover]:not(:popover-open){opacity:0;transform:translateY(8px)}
}
@media (prefers-reduced-motion:no-preference){
  @starting-style{
    .site dialog.modal[open]{opacity:0;transform:translateY(18px)}
    .site dialog.modal[open]::backdrop{opacity:0}
    .site .menu[popover]:popover-open{opacity:0;transform:translateY(8px)}
  }
}

/* Page transitions: a short cross-fade (no movement, so text never shows mid-slide);
   the header and dock stay put. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site .hdr{view-transition-name:site-header}
  .site .dockwrap{view-transition-name:site-dock}
  ::view-transition-old(root){animation:p21-vt-out .16s ease-in both}
  ::view-transition-new(root){animation:p21-vt-in .24s ease-out .04s both}
  ::view-transition-group(article-cover),::view-transition-group(lightbox-image){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}
@keyframes p21-vt-out{to{opacity:0}}
@keyframes p21-vt-in{from{opacity:0}}

/* Scroll effects: content rises in as it enters the screen (no JavaScript involved).
   "backwards" means the effect switches off completely once the element is in place, so the
   text is drawn normally (and sharply) at rest. Not used while the desktop home page stacks
   its sections, which already move as a whole in the original design. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    :is(.site.nostack,.site:not(:has(.home-main))) :is(.pillar,.pth,.crit-row,.crit-row-stack,.hold,.acard,.letter-body,.prose > *,.b-keypoints li,.b-stats > div,.article-related .related-head){
      animation:p21-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%
    }
    :is(.site.nostack,.site:not(:has(.home-main))) :is(.pillar,.b-keypoints) .numeral{animation:p21-numeral linear backwards;animation-timeline:view();animation-range:entry 10% entry 70%}
  }
}
@keyframes p21-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes p21-numeral{from{opacity:0;transform:translateY(16px);letter-spacing:.08em}}

/* Headlines: balanced lines, and no single word left on the last line of paragraphs. */
.site .h-sec,.site .article-title,.site .acard-title,.site .modal-title,.site .prose .b-h,.site .cta-title,.site .b-cta-title,.site .b-key-title,.site .received-title,.site .b-mt-title,.site .b-linkcard-title{text-wrap:balance}
.site .prose p,.site .hero-lede,.site .page-lede,.site .article-standfirst,.site .acard-excerpt,.site .pth-copy,.site .letter-cols p{text-wrap:pretty}

/* Questions and answers open smoothly where supported. */
.site{interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){
  .site .b-faq details::details-content{height:0;overflow:clip;transition:height .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
  .site .b-faq details[open]::details-content{height:auto}
}

/* Reading progress along the top edge of article pages. */
.site .hdr-progress{position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline:scroll()){
  .site .hdr-progress{transform:none;animation:p21-progress linear both;animation-timeline:scroll(root)}
}
@keyframes p21-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Contents list beside articles, following the reader. */
.site .article-toc{border-top:1px solid var(--line);padding-top:20px}
.site .article-toc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.site .article-toc summary::-webkit-details-marker{display:none}
.site .article-toc summary::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .25s}
.site .article-toc[open] summary::after{transform:rotate(225deg);margin-bottom:0}
.site .article-toc ol{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.site .article-toc a{display:block;padding:8px 0 8px 16px;border-left:1px solid var(--line);color:var(--mid);text-decoration:none;font-size:15px;line-height:1.4;transition:color .2s,border-color .2s}
.site .article-toc .toc-l3 a{padding-left:28px;font-size:14px}
.site .article-toc a:hover{color:var(--fg)}
.site .article-toc a.on{color:var(--fg);border-left-color:var(--fg)}
@media (min-width:1100px){.site .article-aside{max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin;padding:4px 8px 4px 4px;margin:-4px -8px -4px -4px}}
.site .prose .b-h{scroll-margin-top:120px}

/* Copy-link on section headings. */
.site .b-h-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:.3em;vertical-align:middle;color:var(--mid);opacity:0;transition:opacity .2s,color .2s}
.site .b-h:hover .b-h-link,.site .b-h-link:focus-visible{opacity:1}
.site .b-h-link:hover{color:var(--fg)}
@media (hover:none){.site .b-h-link{opacity:.6}}

/* Small confirmation messages ("Link copied"). */
.site .toast{position:fixed;left:50%;bottom:122px;z-index:95;transform:translateX(-50%);padding:12px 20px;background:var(--fg);color:var(--bg);font-family:'Montserrat',sans-serif;font-weight:500;font-size:9px;letter-spacing:.3em;text-transform:uppercase;box-shadow:0 18px 40px var(--shadow);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .site .toast{transition:opacity .25s,transform .25s}
  @starting-style{.site .toast{opacity:0;transform:translate(-50%,8px)}}
}

/* Full-screen image viewer for article images and galleries. */
.site [data-zoom] img{cursor:zoom-in}
.site [data-zoom] img:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site dialog.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(12,12,12,.94);color:#F7F7F5;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}
.site dialog.lightbox:not([open]){display:none}
.site dialog.lightbox::backdrop{background:transparent}
.site .lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:80px 16px 32px}
.site .lb-stage{display:grid;place-items:center;touch-action:pan-y}
.site .lb-stage > *{grid-area:1/1}
.site .lb-stage img{display:block;width:min(calc(100vw - 32px),calc((100vh - 170px) * var(--ar,1.5)));height:auto;max-width:none;object-fit:contain}
@media (min-width:900px){.site .lb-stage img{width:min(calc(100vw - 180px),calc((100vh - 170px) * var(--ar,1.5)))}}
.site .lb-cap{font-size:15px;line-height:1.5;opacity:.75;text-align:center;max-width:70ch;margin:0}
.site .lb-btn{position:absolute;width:48px;height:48px;border:1px solid rgba(247,247,245,.28);background:rgba(17,17,17,.5);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s,color .25s}
.site .lb-btn:hover{background:#F7F7F5;color:#111111}
.site .lb-btn:focus-visible{outline:2px solid #F7F7F5;outline-offset:3px}
.site .lb-close{top:16px;right:16px}
.site .lb-prev,.site .lb-next{top:50%;transform:translateY(-50%)}
.site .lb-prev{left:16px}.site .lb-next{right:16px}
.site .lb-count{position:absolute;top:32px;left:20px;margin:0;opacity:.7}
@media (max-width:700px){.site .lb-prev,.site .lb-next{top:auto;bottom:16px;transform:none}}

/* Article search. */
.site .article-search{display:flex;flex-direction:column;gap:12px;max-width:640px}
.site .article-search-row{position:relative}
.site .article-search input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--fg);padding:12px 48px 12px 0;font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:22px;-webkit-appearance:none;appearance:none}
.site .article-search input:focus{outline:0;border-bottom-color:var(--fg)}
.site .article-search input::placeholder{color:var(--mid);opacity:.8}
.site .article-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.site .article-search-key{position:absolute;right:0;top:50%;transform:translateY(-50%);min-width:26px;padding:4px 8px;border:1px solid var(--line);color:var(--mid);text-align:center;letter-spacing:0}
.site .article-search input:focus + .article-search-key,.site .article-search input:not(:placeholder-shown) + .article-search-key{display:none}
.site .article-results mark,.site .acard mark{background:transparent;color:inherit;box-shadow:inset 0 -.38em 0 var(--line)}

/* ---------- Part 6: article banner and author pages (2.2) ---------- */
.site .article-main{padding-top:0}
.site .article{gap:0}
.site .article-frame{max-width:1152px;margin:0 auto}

/* Banner: the cover photo, in black and white, under a near-black veil (it inverts in dark mode
   like every ink panel). The title, summary, author, date, reading time and tags sit on it. */
.site .article-hero{position:relative;overflow:hidden;padding:clamp(120px,17vh,160px) 0 clamp(48px,5vw,80px)}
.site .article-hero-bg{position:absolute;inset:0;z-index:0}
.site .article-hero-bg picture,.site .article-hero-bg img{display:block;width:100%;height:100%}
.site .article-hero-bg img{object-fit:cover;filter:grayscale(1)}
.site .article-hero-bg::after{content:"";position:absolute;inset:0;background:var(--fg);opacity:.86}
.site .article-hero > .wrap{position:relative;z-index:1}
.site .article-hero-inner{display:flex;flex-direction:column;gap:24px}
.site .article-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.site .article-crumbs li+li::before{content:"/";margin:0 12px;opacity:.4}
.site .article-crumbs a,.site .article-crumbs span{color:inherit;text-decoration:none;opacity:.7}
.site .article-crumbs a:hover{opacity:1}
.site .article-hero .article-title{max-width:20ch}
.site .article-hero .article-standfirst{color:inherit;opacity:.75;max-width:52ch}
.site .article-hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:12px;padding-top:24px;border-top:1px solid var(--line-inv)}
.site .byline{display:inline-flex;align-items:center;gap:16px;color:inherit;text-decoration:none}
.site .byline-photo{flex:0 0 48px;width:48px;height:48px;overflow:hidden;border:1px solid var(--line-inv)}
.site .byline-photo picture,.site .author-photo picture,.site .author-hero-photo picture{display:block;width:100%;height:100%}
.site .byline-photo img,.site .author-photo img,.site .author-hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.site .is-initials{display:inline-flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:400;font-size:13px;letter-spacing:.12em;background:var(--line-inv)}
.site .byline-text{display:flex;flex-direction:column;gap:4px}
.site .byline-label{opacity:.6}
.site .byline-name{font-size:17px;line-height:1.3}
.site .person-cred{font-size:.82em;opacity:.7}
.site .byline-role{font-size:14px;opacity:.6}
.site a.byline:hover .byline-name{text-decoration:underline;text-underline-offset:4px}
.site .article-hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.site .article-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;opacity:.7}
.site .article-meta li+li::before{content:"·";margin:0 12px}
.site .article-hero .article-tags{list-style:none;margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.site .article-hero .article-tags li{padding:8px 12px;border:1px solid var(--line-inv);color:inherit;opacity:.8}
.site .article-hero-credit{position:absolute;right:clamp(20px,4vw,40px);bottom:16px;z-index:1;margin:0;font-size:12px;opacity:.6}
@media (max-width:860px){
  .site .article-hero-meta{align-items:flex-start}
  .site .article-hero .article-tags{justify-content:flex-start}
  .site .article-hero-credit{position:static;padding:16px clamp(20px,5vw,80px) 0;text-align:right}
}

/* Below the banner: the contents list on the left (sticky on wide screens), then the article. */
.site .article-layout{padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,120px)}
.site .article-layout.has-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1100px){.site .article-layout.has-toc{grid-template-columns:240px minmax(0,760px);gap:clamp(56px,8vw,160px)}}
.site .article-aside{align-self:start}
.site .article-layout .article-body{max-width:760px}
.site .article-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:24px}

/* About the author, at the end of the article. */
.site .article-author{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px;padding-top:32px}
.site .author-photo{flex:0 0 112px;width:112px;height:112px;overflow:hidden;border:1px solid var(--line)}
.site .author-photo.is-initials{font-size:22px;background:var(--line)}
.site .article-author > .col{flex:1 1 260px}
.site .author-name{font-style:italic;font-size:28px;line-height:1.1}

/* Author pages. */
.site .author-hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.site .author-hero-photo{flex:0 0 112px;width:112px;height:112px;overflow:hidden;border:1px solid var(--line-inv)}
.site .author-hero-photo.is-initials{font-size:24px}
.site .author-hero .article-title{font-size:clamp(36px,4.6vw,68px)}
.site .author-hero-role{opacity:.7}
.site .author-articles{padding-top:clamp(48px,6vw,96px);padding-bottom:160px}
.site .author-hero .person-cred{font-size:.4em;letter-spacing:0;vertical-align:.35em}