/* nexxahealth — the magazine on the web. One stylesheet for every article page. Generated from the design agreed 16 October 2026; edit here, and every article changes. */ *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:#FBFAF7;color:#12151C;font-family:'Source Serif 4',Georgia,serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{max-width:1200px;margin:0 auto;padding:0 40px} /* ===== nexxahealth unified site chrome (nav + footer) ===== */ .site-nav{position:sticky;top:0;z-index:80;background:rgba(251,250,247,.9); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #E4E1D8; font-family:'Space Grotesk',ui-sans-serif,sans-serif;} .site-nav .sn-in{max-width:1200px;margin:0 auto;padding:15px 40px;display:flex;align-items:center;gap:14px;} .site-nav .sn-brand{display:flex;align-items:center;gap:11px;text-decoration:none;} .site-nav .sn-st{width:30px;height:30px;border-radius:8px;background:#274BFF;color:#fff; font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;} .site-nav .sn-wm{font-weight:700;font-size:21px;letter-spacing:-.03em;color:#12151C;} .site-nav .sn-wm .h{color:#274BFF;} .site-nav .sn-links{margin-left:auto;display:flex;align-items:center;gap:28px;font-weight:500;font-size:14.5px;} .site-nav .sn-links a{color:#12151C;text-decoration:none;transition:color .15s;} .site-nav .sn-links a:hover{color:#274BFF;} .site-nav .sn-links a.on{color:#274BFF;} .site-nav .sn-links a.sn-sub{background:#12151C;color:#FBFAF7;padding:9px 18px;border-radius:22px;} .site-nav .sn-links a.sn-sub:hover{opacity:.88;color:#FBFAF7;} @media(max-width:760px){.site-nav .sn-in{padding:12px 20px}.site-nav .sn-links{gap:15px;font-size:13px}.site-nav .sn-wm{font-size:18px}} .site-foot{background:#12151C;color:#C9CDD6;font-family:'Space Grotesk',ui-sans-serif,sans-serif;margin-top:72px;padding:0;} .site-foot .sf-in{max-width:1200px;margin:0 auto;padding:52px 40px 22px;display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:40px;} .site-foot .sf-wm{font-weight:700;font-size:22px;color:#FBFAF7;letter-spacing:-.03em;} .site-foot .sf-wm .h{color:#8FA2FF;} .site-foot .sf-tag{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:15px;color:#AEB4C0;margin-top:9px;max-width:34ch;} .site-foot .sf-ct{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8A8F99;margin-bottom:12px;font-weight:600;} .site-foot .sf-col a{display:block;color:#C9CDD6;text-decoration:none;font-size:14px;margin-bottom:8px;} .site-foot .sf-col a:hover{color:#8FA2FF;} .site-foot .sf-col p{font-size:13.5px;line-height:1.6;color:#AEB4C0;margin:0 0 9px;} .site-foot .sf-sub{max-width:1200px;margin:0 auto;border-top:1px solid rgba(255,255,255,.14); padding:16px 40px 44px;display:flex;justify-content:space-between;gap:12px; font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8A8F99;} h1,h2,h3,h4{overflow-wrap:break-word} img{max-width:100%} @media(max-width:760px){ .site-nav .sn-in{flex-wrap:wrap;gap:8px 12px;padding:12px 20px} .site-nav .sn-links{margin-left:0;width:100%;gap:12px 16px;flex-wrap:wrap;font-size:13.5px} .site-foot .sf-in{grid-template-columns:1fr;gap:24px;padding:40px 20px 16px} .site-foot .sf-sub{flex-direction:column;gap:8px;padding:16px 20px 40px} .wrap{padding:0 20px} } /* ============================================================ MAGAZINE ARTICLE The printed page brought into the site's own language. ============================================================ */ .subbar{background:#12151C;color:#C9CDD6;font-family:'IBM Plex Mono',monospace; font-size:10.5px;letter-spacing:.16em;text-transform:uppercase} .subbar .sb-in{max-width:1200px;margin:0 auto;padding:10px 40px;display:flex;gap:14px;align-items:center} .subbar .dot{width:7px;height:7px;border-radius:50%;background:#8FA2FF} .subbar a{margin-left:auto;color:#8FA2FF} @media(max-width:760px){.subbar .sb-in{padding:9px 20px}} /* running head — the line the printed page carries at the top */ .runhead{max-width:1200px;margin:0 auto;padding:20px 40px 16px;display:flex;gap:12px; align-items:center;flex-wrap:wrap} .runhead .iss{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px; letter-spacing:.16em;text-transform:uppercase;color:#274BFF; border-bottom:1.5px solid rgba(39,75,255,.32);padding-bottom:2px;transition:border-color .15s} .runhead .iss:hover{border-color:#274BFF} .runhead .arw{color:#C9C4B6;font-size:12px;line-height:1} .runhead .sect{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11.5px; letter-spacing:.18em;text-transform:uppercase;color:#12151C} .runhead .kind{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:#FF5A3C} /* the opener: headline reversed out of the photograph, as page 16 sets it. Full-bleed on desktop, so the picture uses the whole page the way print does. */ .opener{max-width:none;margin:0;padding:0} .plate{position:relative;overflow:hidden;background:#232733; aspect-ratio:21/9;border:0;border-radius:0} .plate>img{width:100%;height:100%;object-fit:cover;object-position:50% 42%} .plate .veil{position:absolute;inset:0; background:linear-gradient(to top,rgba(10,12,18,.88) 0%,rgba(10,12,18,.58) 38%,rgba(10,12,18,.12) 68%,rgba(10,12,18,0) 100%)} .plate .lay{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%; max-width:1200px;padding:52px 40px 44px;color:#FBFAF7} .plate .lay>*{max-width:900px} .op-chip{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:#FFB4A3;margin-bottom:16px} .op-h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(32px,4.6vw,58px); line-height:1.01;letter-spacing:-.028em;text-wrap:balance} .op-h1 em{font-style:italic} .op-stand{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400; font-size:clamp(17px,1.6vw,22px);line-height:1.4;margin-top:18px;max-width:46ch;color:#E8E6DF} .op-credit{position:absolute;left:50%;transform:translateX(-50%);top:34px;width:100%;max-width:1200px;padding:0 40px;font-family:'IBM Plex Mono',monospace; font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,250,247,.72)} .byline{max-width:none;margin:0;padding:22px 24px 0;display:flex;gap:16px;flex-wrap:wrap; font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:#5A606B;align-items:baseline} .byline .sep{color:#C9C4B6} .byline .r{margin-left:auto;color:#8A8F99} /* body — the printed measure, one column */ .art{max-width:700px;margin:0 auto;padding:46px 24px 0;font-size:19px;line-height:1.66;color:#1B1F27} .art p{margin-bottom:22px} .art p.drop::first-letter{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:86px; line-height:.74;float:left;margin:9px 13px 0 0;letter-spacing:-.02em;color:#12151C} /* subheads: the small bold serif the magazine uses, not a web heading */ .art h2{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:19px; line-height:1.3;margin:34px 0 14px;letter-spacing:.005em} /* pull quote, set the way the printed page sets it: roman with the turn in italic */ .pull{max-width:900px;margin:40px auto;padding:0 24px;text-align:center} .pull q{quotes:none} .pull .q{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(26px,3.2vw,38px); line-height:1.16;letter-spacing:-.022em;display:block} .pull .q em{font-style:italic} .pull .w{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:#8A8F99;margin-top:18px} /* the soft ending */ .art-fade{position:relative;height:132px;margin-top:-132px;pointer-events:none; background:linear-gradient(180deg,rgba(251,250,247,0) 0%,rgba(251,250,247,.34) 24%,rgba(251,250,247,.62) 45%,rgba(251,250,247,.85) 68%,rgba(251,250,247,.97) 86%,#FBFAF7 100%)} /* gate — the site's card, the magazine's wording */ .gate{max-width:720px;margin:0 auto 10px;padding:36px 40px 40px;border:1px solid #E4E1D8; border-radius:16px;background:#fff;box-shadow:0 20px 45px -24px rgba(18,21,28,.25);text-align:center} .gate-lock{width:46px;height:46px;border-radius:50%;background:#EEF0FB;display:flex; align-items:center;justify-content:center;margin:0 auto 16px} .gate-k{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:#274BFF;margin-bottom:10px} .gate h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:28px;line-height:1.1; letter-spacing:-.015em;margin-bottom:12px} .gate h3 em{font-style:italic;color:#274BFF} .gate p{font-size:15.5px;line-height:1.5;color:#5A606B;max-width:48ch;margin:0 auto 22px} .gate-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .btn{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;padding:12px 26px; border-radius:28px;background:#274BFF;color:#fff;display:inline-block;transition:opacity .15s} .btn:hover{opacity:.88} .btn.ghost{background:transparent;color:#12151C;border:1px solid #C9C4B6} .btn.ghost:hover{border-color:#274BFF;color:#274BFF;opacity:1} .gate-note{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.04em; color:#8A8F99;margin-top:18px} /* keep reading — the magazine's own end-of-piece pointer */ .keep{max-width:700px;margin:56px auto 0;padding:0 24px} .keep-in{border-top:2px solid #12151C;padding-top:18px} .keep-k{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:#8A8F99;margin-bottom:12px} .keep h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:26px;line-height:1.12; letter-spacing:-.02em} .keep h4 em{font-style:italic} .keep .ks{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:17.5px;line-height:1.42; color:#4A4E57;margin-top:8px} .keep a:hover h4{color:#274BFF} /* ---- the margin rail ------------------------------------------------- On a wide screen the page runs 1200px, the prose stays at the printed measure, and the space to its left carries the furniture the magazine puts in its margins. Below 1100px the rail stacks away. */ .page{max-width:1200px;margin:0 auto;padding:0 40px;display:block} @media(min-width:1101px){ .page{display:grid;grid-template-columns:minmax(0,700px) 250px;gap:60px; justify-content:center;align-items:start} .flow{grid-column:1;min-width:0} /* The rail stays where the page puts it. It used to stick under the navigation, which looked wrong the moment the piece ran longer than the contents. */ .toc{grid-column:2;padding-top:50px} .art,.keep,.folio{max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0} /* the pull quote breaks out to the left, where the page is open */ .pull{max-width:none;margin-left:-120px;margin-right:-30px;padding:0} } /* ---- contents navigation ------------------------------------------- */ .toc-k{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:#8A8F99; border-bottom:2px solid #12151C;padding-bottom:10px;margin-bottom:4px} .toc-sec{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:#274BFF;margin:18px 0 6px} .toc-cov{display:block;margin:14px 0 4px} .toc-cov img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px; border:1px solid #E4E1D8;display:block} .toc-cov .ck{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px; letter-spacing:.18em;text-transform:uppercase;color:#FF5A3C;margin:12px 0 5px} .toc-cov .ct{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px; line-height:1.1;letter-spacing:-.018em;transition:color .15s} .toc-cov:hover .ct{color:#274BFF} /* --- the rail, option C: sections as lines, yours opens in place --- */ .toc-line{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:11px 0;border-top:1px solid #E4E1D8;text-decoration:none;color:#12151C} .toc-line .nm{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;line-height:1.25} .toc-line .c{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8A8F99;margin-left:auto} a.toc-line:hover .nm{color:#274BFF} .toc-line.here .nm{color:#274BFF} /* a section folds open in place */ .toc-s{border-top:1px solid #E4E1D8} .toc-s .toc-sum{cursor:pointer;border-top:0;list-style:none} .toc-s .toc-sum::-webkit-details-marker{display:none} .toc-s .toc-sum::marker{content:""} .toc-s .toc-sum .toc-line{border-top:0} .toc-s .chev{width:7px;height:7px;border-right:1.6px solid #A7A396;border-bottom:1.6px solid #A7A396; transform:rotate(-45deg);transition:transform .15s;margin-left:2px;flex:none} .toc-s[open] .chev{transform:rotate(45deg)} .toc-s .toc-sum:hover .chev{border-color:#274BFF} .toc-s[open]{background:#F7F5EF;border-radius:11px;border-top-color:transparent; padding:0 13px 10px;margin:5px 0} .toc-s[open] .toc-sum .nm{color:#12151C} .toc-s.mine[open]{box-shadow:inset 2px 0 0 #274BFF} .toc-s.mine[open] .toc-sum .c{color:#274BFF} .toc-p{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:start; padding:9px 0;border-top:1px solid #E7E3D9;text-decoration:none;color:#12151C} .toc-p .ph{width:52px;height:40px;border-radius:5px;overflow:hidden;background:#EAE7DE;display:block} .toc-p .ph img{width:100%;height:100%;object-fit:cover;display:block} .toc-p .ph.empty{background:linear-gradient(145deg,#E4E1D8,#F3F1EB)} .toc-p .t{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:14.5px;line-height:1.18; display:block} a.toc-p:hover .t{color:#274BFF} .toc-p.here .t{color:#274BFF} .toc-p.here::after{content:"You are reading this";grid-column:2;display:block;margin-top:3px; font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em; text-transform:uppercase;color:#7D8AC9} .toc-p.soon{cursor:default} .toc-p.soon .t{color:#A09C92} .toc-all{display:inline-block;margin-top:20px;font-family:'Space Grotesk',sans-serif; font-weight:600;font-size:13px;color:#274BFF} .toc-all:hover{text-decoration:underline} @media(max-width:1100px){ /* the rail stacks under the piece rather than disappearing, so every reader can see what else is in the issue */ .toc{display:block;max-width:700px;margin:40px auto 0;padding:26px 24px 0; border-top:2px solid #12151C} .toc-cov img{max-height:220px;object-fit:cover} } .endmark{display:inline-block;width:9px;height:9px;background:#12151C;margin-left:7px;transform:translateY(-1px)} /* ---- share row + follow block -------------------------------------- */ .share{margin:46px 0 0;border-top:1px solid #E4E1D8;padding-top:20px; display:flex;align-items:center;gap:12px;flex-wrap:wrap} .share .lab{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:#8A8F99;margin-right:4px} .sbtn{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif; font-weight:600;font-size:13.5px;border:1px solid #C9C4B6;border-radius:24px; padding:9px 16px;color:#12151C;background:none;cursor:pointer;transition:all .15s} .sbtn:hover{border-color:#274BFF;color:#274BFF} .sbtn svg{width:15px;height:15px;flex:0 0 auto} .sbtn.on{border-color:#274BFF;color:#274BFF} .follow{margin:40px 0 0;border:1px solid #E4E1D8;border-radius:16px;background:#fff; padding:26px 28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap; box-shadow:0 20px 45px -30px rgba(18,21,28,.22)} .follow .ft{flex:1 1 260px} .follow .fk{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:#274BFF;margin-bottom:8px} .follow h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:22px; line-height:1.14;letter-spacing:-.018em} .follow p{font-size:15.5px;line-height:1.5;color:#5A606B;margin-top:7px;max-width:46ch} .follow .btn{white-space:nowrap} .follow .fc{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5A606B;margin-top:10px} .follow .fc b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17px; letter-spacing:-.01em;color:#12151C} .follow .fc i{width:7px;height:7px;border-radius:50%;background:#274BFF;font-style:normal} @media(max-width:760px){.follow{padding:22px 20px;gap:16px}} /* a piece that exists in the issue but is not online yet */ .toc-cov{display:block;margin:14px 0 4px} /* ---- agenda in the rail -------------------------------------------- */ .ag-k{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:#8A8F99; border-bottom:2px solid #12151C;padding-bottom:10px;margin:34px 0 2px} .ag-i{display:block;padding:10px 0;border-top:1px solid #E4E1D8} .ag-i:first-of-type{border-top:0} .ag-i .d{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:#274BFF;margin-bottom:4px} .ag-i .e{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:14.5px; line-height:1.22;letter-spacing:-.008em} .ag-i .l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:#8A8F99;margin-top:4px} .ag-note{font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;line-height:1.45; color:#8A8F99;margin-top:14px} .ag-note a{color:#274BFF} .ag-more{font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;line-height:1.45; color:#5A606B;border-top:1px solid #E4E1D8;padding-top:10px;margin:0} /* ---- pictures inside the piece ------------------------------------- A figure breaks out to the left, like the pull quote, so a photograph is never trapped inside the reading measure. */ /* Photographs break out to the left of the reading measure, but stop short of the contents rail on the right, and carry the same corner as the rest of the site. */ .fig{margin:44px 0} .fig img{width:100%;display:block;border-radius:12px;border:0} .fig figcaption{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:#8A8F99;margin-top:12px;line-height:1.7;max-width:62ch} .fig figcaption b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px; letter-spacing:-.01em;color:#12151C;text-transform:none;letter-spacing:0} .fig.port img{max-width:400px} .fig.port figcaption{max-width:400px} .fig.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fig.pair figcaption{grid-column:1 / -1;margin-top:12px} @media(min-width:1101px){ /* out to the left, where the page is open; never into the contents rail */ .fig{margin-left:-110px;margin-right:0} .fig.wide{margin-left:-110px;margin-right:0} } @media(max-width:1100px){ .fig{margin-left:-24px;margin-right:-24px} .fig figcaption{padding:0 24px} } @media(max-width:600px){.fig.pair{grid-template-columns:1fr;gap:4px}} /* ---- the figures strip, as the magazine sets it under a heavy rule --- */ .nums{margin:40px 0} .nums .nk{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:#8A8F99;border-bottom:2px solid #12151C;padding-bottom:10px} .nums .row{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .nums .c{padding:18px 20px 16px;border-right:1px solid #E4E1D8} .nums .c:first-child{padding-left:0} .nums .c:last-child{border-right:0;padding-right:0} .nums .v{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:34px; letter-spacing:-.03em;line-height:1;color:#274BFF} .nums .l{font-size:14.5px;line-height:1.4;color:#5A606B;margin-top:9px} .nums .src{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:#A9A69C;border-top:1px solid #E4E1D8;padding-top:10px} @media(min-width:1101px){.nums{margin-left:-120px;margin-right:-30px}} @media(max-width:700px){ .nums .row{grid-template-columns:1fr} .nums .c{border-right:0;border-bottom:1px solid #E4E1D8;padding-left:0;padding-right:0} .nums .c:last-child{border-bottom:0} } /* folio */ .folio{max-width:700px;margin:40px auto 0;padding:14px 24px 0;border-top:1px solid #E4E1D8; display:flex;gap:14px;font-family:'IBM Plex Mono',monospace;font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:#8A8F99} .folio .r{margin-left:auto} @media(max-width:760px){ .runhead,.opener,.byline{padding-left:20px;padding-right:20px} .runhead{gap:7px 10px} .plate{aspect-ratio:4/5;border-radius:12px} .plate .lay{padding:26px 22px 24px} .plate .veil{background:linear-gradient(to top,rgba(10,12,18,.9) 0%,rgba(10,12,18,.62) 44%,rgba(10,12,18,.15) 74%,rgba(10,12,18,0) 100%)} .op-credit{left:22px;top:24px} .byline{flex-wrap:wrap;gap:4px 14px}.byline .r{margin-left:0;width:100%} .art{font-size:17.5px;padding-top:30px} .art p.drop::first-letter{font-size:64px;margin:7px 10px 0 0} .gate{padding:28px 22px 30px} .keep h4{font-size:21px} } /* ---- the side column, as the magazine sets it ----------------------- Set-aside styles, section 5. No fill and no border. The section colour lands once, on the heavy rule under the signature. Prose in Fraunces, closed with a fine line. */ .sidecol{margin:46px 0;padding:0;background:none;border:0} .sidecol .sk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:#274BFF;margin:0 0 11px} .sidecol h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(23px,2.5vw,28px); line-height:1.1;letter-spacing:-.02em;color:#12151C;margin:0 0 11px; border-top:3px solid #274BFF;padding-top:22px} .sidecol h4 em{font-style:italic} .sidecol .sst{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400; font-size:17px;line-height:1.42;color:#5A606B;margin:0 0 15px} .sidecol p{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:16.5px;line-height:1.62; color:#2B2F38;margin:0 0 14px} .sidecol p:last-child{margin-bottom:0;padding-bottom:18px;border-bottom:1px solid #12151C} .sidecol p em{font-style:italic} .sidecol strong{font-weight:600} @media(min-width:1101px){ .sidecol{margin-left:-110px;margin-right:0} } /* ---- who is named in a piece ---------------------------------------- */ .named{border-top:1px solid #E4E1D8;padding-top:18px;margin-top:6px} .named .lab{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:#8A8F99;margin-bottom:11px} .named .chips{display:flex;flex-wrap:wrap;gap:8px} .named .chip{text-decoration:none;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px; border-radius:20px;padding:6px 13px;border:1px solid #E4E1D8;color:#3C414B;background:#fff} .named .chip.person{border-color:#CBD3FF;color:#274BFF;background:#F4F6FF} .named .chip.org{border-color:#E4E1D8;color:#3C414B} .named .chip.topic{border-color:#D9D5CA;color:#5A606B;background:#F4F2EC;border-radius:7px; font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.1em; text-transform:uppercase;padding:7px 11px} .named .lab.second{margin-top:20px} .named .chips + .lab{margin-top:20px} /* the bar when it is the admin looking, not a subscriber */ .subbar.adminbar{background:#2A1C16} .subbar.adminbar .dot{background:#FF5A3C} .subbar.adminbar a{color:#FFB9A6} /* ---- what it costs, under the paywall ------------------------------- */ .offer{margin-top:22px;border-top:1px solid #E4E1D8;padding-top:20px} .offer .lab{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:#8A8F99;margin-bottom:14px} .offer .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .offer .t{border:1px solid #E4E1D8;border-radius:12px;background:#fff;padding:15px 16px 17px; text-decoration:none;color:#12151C;display:block} .offer .t.best{border-color:#274BFF;box-shadow:inset 0 0 0 1px #274BFF} .offer .t:hover{border-color:#274BFF} .offer .n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:#5A606B} .offer .t.best .n{color:#274BFF} .offer .p{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:27px;letter-spacing:-.02em; margin:5px 0 2px} .offer .u{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:#8A8F99} .offer .l{font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;line-height:1.45; color:#5A606B;margin-top:9px} .offer .fine{font-family:'Source Serif 4',Georgia,serif;font-size:13px;color:#8A8F99;margin-top:13px} .offer .fine a{color:#274BFF} @media(max-width:700px){.offer .row{grid-template-columns:1fr}} .named a.chip:hover{border-color:#274BFF;color:#274BFF} .named a.chip.topic:hover{border-color:#274BFF;color:#274BFF;background:#EEF0FB} /* ---- an opener set in type, for the editorial and the colophon ------ The printed issue opens these with words, not a photograph. The portrait still does its work in the contents and in a shared link. */ .opener.plain{background:#FBFAF7;border-bottom:1px solid #E4E1D8} .opener.plain .pl-in{max-width:1200px;margin:0 auto;padding:68px 40px 50px} .opener.plain .pl-h1{max-width:18ch} .pl-k{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:#FF5A3C;margin-bottom:16px} .pl-h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(32px,4.6vw,58px); line-height:1.01;letter-spacing:-.028em;color:#12151C;text-wrap:balance} .pl-h1 em{font-style:italic} .pl-stand{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400; font-size:clamp(17px,1.6vw,22px);line-height:1.4;margin-top:18px;max-width:46ch;color:#5A606B} @media(max-width:700px){ .opener.plain .pl-in{padding:46px 20px 36px} } /* ---- a portrait beside the headline, for a columnist ---------------- */ .opener.portrait{background:#FBFAF7;border-bottom:1px solid #E4E1D8} .opener.portrait .po-in{max-width:1060px;margin:0 auto;padding:64px 40px 48px; display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:54px;align-items:center} .opener.portrait .po-txt .pl-h1{max-width:16ch} .opener.portrait .po-pic{margin:0} .opener.portrait .po-pic img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block; border-radius:14px;box-shadow:0 26px 54px -32px rgba(18,21,28,.55)} .opener.portrait .po-pic figcaption{font-family:'IBM Plex Mono',monospace;font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:#8A8F99;padding-top:10px} @media(max-width:900px){ .opener.portrait .po-in{grid-template-columns:1fr;gap:28px;padding:44px 20px 34px} .opener.portrait .po-pic{max-width:240px} } /* the vocabulary on an article: a heading, a file and a place each read differently from a topic, so a reader can tell them apart at a glance */ .named .chip.head{border-color:#274BFF;color:#274BFF;background:#EEF0FB;border-radius:7px; font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11.5px; letter-spacing:.08em;text-transform:uppercase} .named .chip.file{border-color:#FFC9BC;color:#B23A20;background:#FFF4F1} .named .chip.place{border-color:#D9D5CA;color:#5A606B;background:#fff;border-radius:7px} .named a.chip.head:hover{background:#E4E8FA} .named a.chip.file:hover{border-color:#FF5A3C;color:#8c2f1c}