/* Magazine: post template and post list. Uses the tokens of site.css. */
.tpi-art{background:var(--noir);padding:54px 0 120px}
.tpi-art__head{max-width:1000px;margin:0 auto}
.tpi-art__k{margin:0 0 18px;font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:23px;line-height:1.2}
.tpi-art__k a{color:var(--or);text-decoration:none}
.tpi-art h1{font-family:var(--f-display);font-weight:700;font-size:68px;line-height:1.02;text-transform:uppercase;color:var(--ivoire);margin:0 0 26px;letter-spacing:0;text-wrap:balance}
.tpi-art__meta{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brume);margin:0}
.tpi-art__meta span{color:var(--ivoire)}
.tpi-art__meta i{font-style:normal;color:var(--or);margin:0 8px}
.tpi-art__hero{max-width:1304px;margin:52px auto 0;position:relative}
.tpi-art__hero img{display:block;width:100%;height:auto;aspect-ratio:2.2/1;object-fit:cover}
.tpi-art__hero::after{content:"";position:absolute;inset:14px 46px;border:1px solid rgba(200,169,107,.55);pointer-events:none}
.tpi-art__grid{display:grid;grid-template-columns:280px minmax(0,740px);gap:84px;justify-content:center;margin-top:72px;max-width:1304px}
.tpi-toc{position:sticky;top:112px;align-self:start;max-height:calc(100vh - 140px);overflow:auto}
.tpi-toc__h{font-family:var(--f-serif);font-style:italic;font-size:22px;color:var(--or);margin:0 0 14px}
.tpi-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.tpi-toc li{counter-increment:t;box-shadow:inset 0 1px 0 var(--filet);padding:11px 0 11px 34px;position:relative;font-size:14px;line-height:1.45}
.tpi-toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:11px;font-family:var(--f-display);font-weight:600;color:var(--or);font-size:14px;letter-spacing:.04em}
.tpi-toc a{color:var(--brume);text-decoration:none;transition:color .2s}
.tpi-toc a:hover{color:var(--ivoire)}

.tpi-prose{color:#C9C1B0;font-size:18px;line-height:1.78;min-width:0;overflow-wrap:anywhere}
.tpi-prose p{margin:0 0 1.25em}
.tpi-prose .tldr{box-shadow:inset 2px 0 0 var(--or);padding:6px 0 6px 26px;color:var(--ivoire);font-size:20px;line-height:1.6;margin-bottom:1.6em}
.tpi-prose .tldr strong{font-family:var(--f-serif);font-style:italic;font-weight:500;color:var(--or);font-size:23px;margin-right:6px}
.tpi-prose h2{font-family:var(--f-display);font-weight:700;font-size:42px;line-height:1.06;text-transform:uppercase;color:var(--ivoire);margin:2em 0 .65em;padding-top:.9em;box-shadow:inset 0 1px 0 var(--filet);text-wrap:balance;scroll-margin-top:96px}
.tpi-prose h3{font-family:var(--f-display);font-weight:600;font-size:25px;line-height:1.2;text-transform:uppercase;letter-spacing:.01em;color:var(--ivoire);margin:1.7em 0 .5em}
.tpi-prose a{color:var(--or);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s}
.tpi-prose a:hover{color:var(--orclair)}
.tpi-prose strong{color:var(--ivoire);font-weight:600}
.tpi-prose ul,.tpi-prose ol{margin:0 0 1.4em;padding:0;list-style:none;counter-reset:l}
.tpi-prose li{position:relative;padding:10px 0 10px 40px;box-shadow:inset 0 -1px 0 var(--filet)}
.tpi-prose ul li::before{content:"";position:absolute;left:4px;top:1.45em;width:18px;height:1px;background:var(--or)}
.tpi-prose ol li{counter-increment:l}
.tpi-prose ol li::before{content:counter(l,decimal-leading-zero);position:absolute;left:0;top:10px;font-family:var(--f-display);font-weight:600;color:var(--or);font-size:17px}
.tpi-prose code{font-family:ui-monospace,Consolas,monospace;font-size:.86em;background:var(--ecrin);color:var(--orclair);padding:2px 7px;word-break:break-all}
.tpi-prose .tpi-tw{overflow-x:auto;margin:0 0 1.6em}
.tpi-prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;border:0;margin:0}
.tpi-prose th,.tpi-prose td{border:0;padding:15px 18px 15px 0;text-align:left;vertical-align:top;background:transparent!important;box-shadow:inset 0 -1px 0 var(--filet)}
.tpi-prose thead th{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or);box-shadow:inset 0 -1px 0 var(--or)}
.tpi-prose tbody th,.tpi-prose tbody td:first-child{color:var(--ivoire);font-weight:600}
.tpi-fig{margin:2.4em 0;position:relative}
.tpi-fig img{display:block;width:100%;height:auto}
.tpi-fig::after{content:"";position:absolute;inset:12px;border:1px solid rgba(200,169,107,.5);pointer-events:none}
/* "À lire ensuite" = last h2 + list */
.tpi-prose h2#a-lire-ensuite{font-family:var(--f-serif);font-style:italic;font-weight:500;text-transform:none;color:var(--or);font-size:34px}
.tpi-prose h2#a-lire-ensuite+ul li{padding-left:0}
.tpi-prose h2#a-lire-ensuite+ul li::before{display:none}
.tpi-prose h2#a-lire-ensuite+ul a{font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:21px;letter-spacing:.01em;text-decoration:none;color:var(--ivoire)}
.tpi-prose h2#a-lire-ensuite+ul a:hover{color:var(--or)}
@media(max-width:1100px){.tpi-art__grid{grid-template-columns:minmax(0,740px);gap:40px}.tpi-toc{position:static;max-height:none}.tpi-art h1{font-size:54px}}
@media(max-width:767px){.tpi-art{padding:30px 0 76px}.tpi-art h1{font-size:38px}.tpi-art__hero{margin-top:34px;padding:0}.tpi-art__hero img{aspect-ratio:16/10}.tpi-art__hero::after{inset:10px}
  .tpi-art__grid{margin-top:44px}.tpi-prose{font-size:17px}.tpi-prose h2{font-size:31px}.tpi-prose h3{font-size:22px}.tpi-prose .tldr{font-size:18px;padding-left:18px}
  .tpi-prose table{font-size:14.5px}.tpi-prose th,.tpi-prose td{padding:12px 12px 12px 0}}

/* post list on /magazine/ */
.tpi-mag{max-width:1240px;margin:0 auto}
.tpi-silo{padding:70px 0 0}
.tpi-silo:first-child{padding-top:0}
.tpi-silo__h{display:grid;grid-template-columns:36% 1fr;gap:56px;align-items:end;margin-bottom:40px}
.tpi-silo__n{grid-column:1/-1;font-family:var(--f-serif);font-style:italic;font-size:23px;color:var(--or);margin:0 0 -34px}
.tpi-silo__h h2{font-family:var(--f-display);font-weight:700;font-size:62px;line-height:1.02;text-transform:uppercase;color:var(--ivoire);margin:0}
.tpi-silo__d{margin:0;color:var(--brume);font-size:17px;line-height:1.7;max-width:640px}
.tpi-posts{display:grid;grid-template-columns:repeat(3,1fr);box-shadow:inset 1px 0 0 var(--filet),inset 0 1px 0 var(--filet)}
.tpi-post{padding:26px 26px 32px;box-shadow:inset -1px 0 0 var(--filet),inset 0 -1px 0 var(--filet);transition:background .25s}
.tpi-post:hover{background:var(--ecrin)}
.tpi-post__img{display:block;margin-bottom:22px;overflow:hidden}
.tpi-post__img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.tpi-post:hover .tpi-post__img img{transform:scale(1.03)}
.tpi-post__k{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin:0 0 10px}
.tpi-post__t{font-family:var(--f-display);font-weight:600;font-size:25px;line-height:1.16;text-transform:uppercase;letter-spacing:.01em;margin:0 0 12px}
.tpi-post__t a{color:var(--ivoire);text-decoration:none;transition:color .2s}
.tpi-post:hover .tpi-post__t a{color:var(--or)}
.tpi-post__x{margin:0;font-size:14.5px;line-height:1.6;color:var(--brume)}
@media(max-width:1024px){.tpi-posts{grid-template-columns:repeat(2,1fr)}.tpi-silo__h{grid-template-columns:1fr;gap:16px}.tpi-silo__n{margin:0}.tpi-silo__h h2{font-size:46px}}
@media(max-width:620px){.tpi-posts{grid-template-columns:1fr}.tpi-silo__h h2{font-size:36px}.tpi-silo{padding-top:52px}}