/* Peptigram — journal: blog index, article and the homepage teaser. */

.pt-j{--pt-line:rgba(0,0,0,.12)}

/* Five cover palettes, picked per article from its id. */
.pt-tone-0{--tone-bg:var(--pt-sage);--tone-deep:var(--pt-sage-d);--tone-fg:#fff}
.pt-tone-1{--tone-bg:var(--pt-clay);--tone-deep:var(--pt-clay-d);--tone-fg:#fff}
.pt-tone-2{--tone-bg:var(--pt-dusk);--tone-deep:var(--pt-dusk-d);--tone-fg:#fff}
.pt-tone-3{--tone-bg:#1c2433;--tone-deep:#3a4a68;--tone-fg:#fff}
.pt-tone-4{--tone-bg:var(--pt-accent);--tone-deep:#e8e84a;--tone-fg:#000}

/* ---------- Generated cover ---------- */
.pt-cover{position:relative;isolation:isolate;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 90% at 85% 15%,var(--tone-deep) 0%,var(--tone-bg) 62%);color:var(--tone-fg);border-radius:var(--pt-r-tile)}
.pt-cover .pt-chain{position:absolute;top:-10%;right:-20%;z-index:-1;width:95%;opacity:.28;transform:rotate(-12deg)}
.pt-cover__kicker{position:absolute;left:7%;top:8%;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;opacity:.8}
.pt-cover__label{position:absolute;left:7%;right:54%;bottom:9%;font-size:clamp(22px,2.6vw,40px);font-weight:500;letter-spacing:-1.5px;line-height:1}
.pt-cover--bare .pt-cover__label{right:7%}
.pt-cover--sm .pt-cover__label{font-size:clamp(19px,1.7vw,26px)}
.pt-cover__img{position:absolute;right:7%;bottom:9%;width:42%;aspect-ratio:1/1;object-fit:contain;padding:3%;background:#fff;border-radius:18px;box-shadow:0 24px 40px rgba(0,0,0,.28);transform:rotate(5deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pt-cover__img--cut{right:3%;bottom:4%;width:56%;padding:0;background:none;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 22px rgba(0,0,0,.3));transform:rotate(4deg)}
a:hover .pt-cover__img{transform:translateY(-8px) rotate(-2deg)}

.pt-tag{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:600;background:var(--pt-accent);color:#000;border-radius:var(--pt-r-pill)}
.pt-tag--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}

/* ---------- Article ---------- */
.pt-progress{position:fixed;left:0;top:0;z-index:100;width:100%;height:4px;background:var(--pt-accent);transform:scaleX(0);transform-origin:0 50%}
.pt-art-hero{position:relative;overflow:hidden;padding:40px 0 72px;background:radial-gradient(1200px 700px at 85% 0%,var(--tone-deep) 0%,var(--tone-bg) 65%);color:var(--tone-fg)}
.pt-art-hero>.pt-chain{position:absolute;right:-8%;top:-14%;width:58%;opacity:.16;pointer-events:none;transform:rotate(-14deg)}
.pt-art-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;font-size:13px;font-weight:500;opacity:.85}
.pt-art-crumbs a:hover{text-decoration:underline}
.pt-art-hero__grid{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:end}
.pt-art-hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pt-art-hero h1{max-width:15ch;margin-bottom:24px;font-size:clamp(40px,5.8vw,84px);letter-spacing:-3px;line-height:1.02}
.pt-art-hero__lead{max-width:52ch;margin-bottom:32px;font-size:19px;line-height:1.5;opacity:.9}
.pt-art-hero .pt-cover{aspect-ratio:1/1;border-radius:var(--pt-r-card);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.pt-art-hero .pt-cover__label{font-size:clamp(28px,3vw,46px)}
.pt-byline{display:flex;align-items:center;gap:14px;font-size:15px}
.pt-byline b{display:block;font-weight:600}
.pt-byline span{font-size:13px;opacity:.8}
.pt-face{display:grid;place-items:center;flex:none;width:52px;height:52px;overflow:hidden;border-radius:50%;background:var(--pt-accent);color:#000;font-size:17px;font-weight:600}
.pt-face img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.pt-art-hero__grid{grid-template-columns:1fr}.pt-art-hero .pt-cover{display:none}.pt-art-hero{padding-bottom:48px}}

.pt-art-main{padding:72px 0 24px}
.pt-art-main__grid{display:grid;grid-template-columns:260px minmax(0,740px);justify-content:center;gap:72px}
.pt-toc{position:sticky;top:110px;align-self:start;font-size:14px}
.pt-toc h2{margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--pt-muted)}
.pt-toc ol{display:grid;gap:2px;border-left:2px solid var(--pt-line)}
.pt-toc a{display:block;margin-left:-2px;padding:7px 0 7px 16px;border-left:2px solid transparent;line-height:1.35;color:var(--pt-muted);transition:color .2s,border-color .2s}
.pt-toc a:hover{color:#000}
.pt-toc a.is-on{border-left-color:#000;color:#000;font-weight:500}
.pt-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.pt-share a,.pt-share button{display:grid;margin:0;place-items:center;width:40px;height:40px;padding:0;background:#fff;color:#000;border:1.5px solid #000;border-radius:50%;font-size:12px;font-weight:600;line-height:1;cursor:pointer}
.pt-share a:hover,.pt-share button:hover{background:var(--pt-accent)}
@media(max-width:1000px){.pt-art-main__grid{grid-template-columns:minmax(0,1fr);gap:24px}.pt-toc{position:static;padding:22px;background:var(--pt-cream);border-radius:var(--pt-r-tile)}}

/* article body typography */
.pt-prose{font-size:19px;line-height:1.72;color:#1a1a1a;counter-reset:pt-h2}
.pt-prose>*+*{margin-top:22px}
.pt-prose>p:first-child{font-size:22px;line-height:1.55;color:#000}
.pt-prose h2{margin-top:72px;font-size:clamp(28px,3vw,40px);letter-spacing:-1.5px;line-height:1.12;color:#000;scroll-margin-top:110px;counter-increment:pt-h2}
.pt-prose h2::before{content:counter(pt-h2,decimal-leading-zero);display:block;width:max-content;margin-bottom:16px;padding:5px 11px;font-size:13px;font-weight:600;letter-spacing:1px;background:var(--pt-accent);border-radius:var(--pt-r-pill)}
.pt-prose h3{margin-top:40px;font-size:24px;letter-spacing:-.5px;line-height:1.25;color:#000}
.pt-prose a{background:linear-gradient(transparent 62%,var(--pt-accent) 62%);color:#000;font-weight:500}
.pt-prose a:hover{background:var(--pt-accent)}
.pt-prose strong{font-weight:600;color:#000}
.pt-prose ul,.pt-prose ol{display:grid;gap:10px;padding-left:0}
.pt-prose ul li{position:relative;padding-left:30px}
.pt-prose ul li::before{content:"";position:absolute;left:4px;top:.62em;width:11px;height:11px;border-radius:50%;background:var(--pt-accent);box-shadow:0 0 0 1.5px #000}
.pt-prose ol{counter-reset:pt-li}
.pt-prose ol li{position:relative;padding-left:46px;counter-increment:pt-li}
.pt-prose ol li::before{content:counter(pt-li);position:absolute;left:0;top:.1em;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#000;color:#fff;font-size:14px;font-weight:600}
.pt-prose table{display:block;width:100%;overflow-x:auto;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.45;background:var(--pt-cream);border-radius:var(--pt-r-tile)}
.pt-prose thead th{background:#000;color:#fff;font-weight:500;text-align:left}
.pt-prose th,.pt-prose td{min-width:140px;padding:14px 18px;vertical-align:top;border-bottom:1px solid var(--pt-line)}
.pt-prose tbody tr:last-child td{border-bottom:0}
.pt-prose tbody td:first-child{font-weight:600}
.pt-prose blockquote{padding:6px 0 6px 24px;border-left:4px solid var(--pt-accent);font-size:22px;letter-spacing:-.3px;line-height:1.5}
.pt-prose details{margin-top:0;padding:20px 0;border-top:1px solid #000}
.pt-prose details:last-of-type{border-bottom:1px solid #000}
.pt-prose summary{display:flex;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:21px;font-weight:500;letter-spacing:-.4px}
.pt-prose summary::-webkit-details-marker{display:none}
.pt-prose summary::after{content:"+";flex:none;font-size:26px;line-height:1}
.pt-prose details[open] summary::after{content:"\2013"}
.pt-prose details>*:not(summary){margin-top:12px;font-size:17px;color:var(--pt-muted)}
.pt-prose img{border-radius:var(--pt-r-tile)}
.pt-prose em{display:inline-block;font-size:15px;line-height:1.6;color:var(--pt-muted)}
.pt-prose p:last-of-type em{padding:20px 24px;font-style:normal;background:var(--pt-cream);border-radius:var(--pt-r-tile)}

/* author box */
.pt-author{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;margin-top:72px;padding:36px;background:var(--pt-cream);border-radius:var(--pt-r-card)}
.pt-author .pt-face{width:88px;height:88px;font-size:28px}
.pt-author__k{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--pt-muted)}
.pt-author h3{margin-bottom:2px;font-size:28px;letter-spacing:-1px}
.pt-author__role{margin-bottom:14px;font-size:14px;color:var(--pt-muted)}
.pt-author p{font-size:16px;line-height:1.6}
.pt-author__links{display:flex;gap:16px;margin-top:14px;font-size:14px;font-weight:500}
.pt-author__links a{text-decoration:underline}
@media(max-width:600px){.pt-author{grid-template-columns:1fr;padding:28px}}

/* related + disclaimer */
.pt-more{padding:96px 0}
.pt-more__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:36px}
.pt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pt-acard{display:flex;flex-direction:column;gap:14px}
.pt-acard h3{font-size:24px;letter-spacing:-.8px;line-height:1.2}
.pt-acard p{font-size:15px;line-height:1.5;color:var(--pt-muted)}
.pt-acard__meta{display:flex;gap:10px;font-size:13px;font-weight:500;color:var(--pt-muted)}
.pt-acard:hover h3{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.pt-cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pt-cards{grid-template-columns:1fr}}
.pt-ruo{padding:40px 0;background:#000;color:#fff}
.pt-ruo .pt-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.pt-ruo p{max-width:80ch;font-size:14px;line-height:1.6;opacity:.85}

/* ---------- Blog index ---------- */
.pt-blog-hero{padding:64px 0 48px}
.pt-blog-hero__k{margin-bottom:12px;font-size:14px;font-weight:500;color:var(--pt-muted)}
.pt-blog-hero__row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px}
.pt-blog-hero h1{font-size:clamp(56px,11vw,168px);font-weight:500;letter-spacing:-6px;line-height:.88}
.pt-blog-hero p{max-width:44ch;font-size:19px;line-height:1.5}
.pt-blogs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.pt-blogs a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;border-radius:var(--pt-r-pill);box-shadow:inset 0 0 0 1.5px currentColor}
.pt-blogs a span{font-size:12px;opacity:.6}
.pt-blogs a.is-on{background:var(--pt-accent);color:#000;box-shadow:none}
.pt-blogs a:hover{background:#000;color:#fff;box-shadow:none}
.pt-lead-story{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;margin-bottom:56px;padding:20px;background:var(--pt-cream);border-radius:var(--pt-r-card)}
.pt-lead-story .pt-cover{aspect-ratio:16/11;border-radius:calc(var(--pt-r-card) - 12px)}
.pt-lead-story .pt-cover__label{font-size:clamp(30px,3.6vw,56px)}
.pt-lead-story__text{padding:20px 28px 20px 0}
.pt-lead-story h2{margin:18px 0 14px;font-size:clamp(30px,3.4vw,48px);letter-spacing:-2px;line-height:1.08}
.pt-lead-story p{margin-bottom:24px;font-size:17px;line-height:1.55;color:var(--pt-muted)}
.pt-lead-story:hover h2{text-decoration:underline;text-underline-offset:6px}
@media(max-width:900px){.pt-lead-story{grid-template-columns:1fr}.pt-lead-story__text{padding:8px 12px 20px}}
.pt-blog-list{padding-bottom:96px}
.pt-blog-pager{display:flex;justify-content:center;gap:10px;margin-top:48px}

/* ---------- Homepage teaser ---------- */
.pt-teaser{overflow:hidden;padding:96px 0;background:#0d0d0d;color:#fff}
.pt-teaser__head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:48px}
.pt-teaser__k{margin-bottom:14px;font-size:14px;font-weight:500;color:var(--pt-accent)}
.pt-teaser__head p{max-width:52ch;margin-top:16px;font-size:17px;opacity:.75}
.pt-teaser .pt-acard p,.pt-teaser .pt-acard__meta{color:rgba(255,255,255,.65)}
.pt-teaser__rail{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
.pt-teaser__rail .pt-acard:first-child{grid-row:span 2}
.pt-teaser__rail .pt-acard:first-child .pt-cover{aspect-ratio:4/4.4}
.pt-teaser__rail .pt-acard:first-child h3{font-size:32px;letter-spacing:-1.2px}
.pt-teaser__rail .pt-acard:first-child .pt-cover__label{font-size:clamp(30px,3.4vw,52px)}
.pt-teaser__rail .pt-acard:not(:first-child) .pt-cover{aspect-ratio:16/10}
@media(max-width:1000px){
  .pt-teaser__head{grid-template-columns:1fr}
  .pt-teaser__head .pt-btn{justify-self:start}
  .pt-teaser__rail{display:flex;gap:16px;margin:0 -24px;padding:0 24px 8px;overflow-x:auto;scroll-snap-type:x mandatory}
  .pt-teaser__rail .pt-acard{flex:0 0 78%;scroll-snap-align:start}
  .pt-teaser__rail .pt-acard:first-child .pt-cover{aspect-ratio:16/10}
}

@media(max-width:600px){
  .pt-more__head{flex-direction:column}
}

/* ---------- The peptide chain drifts, gently (transforms only) ---------- */
@keyframes pt-drift{0%,100%{transform:rotate(-12deg) translate3d(0,0,0) scale(1)}33%{transform:rotate(-5deg) translate3d(-5%,3%,0) scale(1.04)}66%{transform:rotate(-16deg) translate3d(3%,-2%,0) scale(.98)}}
@keyframes pt-drift-wide{0%,100%{transform:rotate(-14deg) translate3d(0,0,0)}33%{transform:rotate(-9deg) translate3d(-4%,3%,0)}66%{transform:rotate(-18deg) translate3d(2%,-2%,0)}}
@keyframes pt-bead{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4px,-14px,0) scale(1.12)}}
.pt-cover .pt-chain{animation:pt-drift 12s ease-in-out infinite;will-change:transform}
.pt-art-hero>.pt-chain{animation:pt-drift-wide 16s ease-in-out infinite;will-change:transform}
.pt-chain circle{transform-box:fill-box;transform-origin:center;animation:pt-bead 5s ease-in-out infinite}
.pt-chain g circle:nth-child(2n){animation-duration:8.5s;animation-delay:-3s}
.pt-chain g circle:nth-child(3n){animation-duration:6s;animation-delay:-1.5s}
.pt-chain g circle:nth-child(4n){animation-delay:-4.5s}
.pt-acard:hover .pt-cover .pt-chain{animation-duration:9s}
@media(prefers-reduced-motion:reduce){.pt-chain,.pt-chain circle{animation:none!important}}