/* ==========================================================================
   Standard page, post, archive, search and 404 designs.
   Loaded after base.css, which holds the tokens, bar, footer and the kit.
   ========================================================================== */

/* title block */
.pg-hero{position:relative; padding:calc(var(--bar-h) + clamp(56px,10svh,140px)) 0 clamp(44px,7svh,96px); overflow:hidden; background:var(--sky-1); --fs-h1:clamp(40px,min(5vw,9.5svh),116px)}
.pg-head{position:relative; display:grid; gap:clamp(14px,2.4svh,30px); justify-items:start}
.pg-head h1{max-width:17ch}
.pg-hero--post{--fs-h1:clamp(36px,min(4.2vw,8svh),96px)}
.pg-hero--post .pg-head h1{max-width:20ch}
.pg-lead{max-width:38em; font-size:clamp(18px,1.3vw,26px); color:var(--text-2); text-wrap:pretty}
.pg-meta{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.pg-head > *{animation:rise .85s var(--ease) both; animation-delay:calc(var(--n,0) * 110ms + .1s)}
.pg-head > :nth-child(2){--n:1}
.pg-head > :nth-child(3){--n:2}
.pg-head > :nth-child(4){--n:3}
.pg-head > :nth-child(5){--n:4}
.pg-head h1{animation:h1-in 1.15s var(--ease) .2s both}
.byline{display:flex; align-items:center; gap:14px}
.byline-face{width:52px; height:52px; border-radius:50%; object-fit:cover}
.byline p{display:grid; gap:2px; font-weight:500}
.byline a{text-decoration-color:var(--line-2); text-decoration-thickness:1px; text-underline-offset:.3em}
.byline-date{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}

/* the reading column */
.pg-body{--from:var(--sky-1); --to:var(--sky-8); padding-top:clamp(36px,5vh,72px)}
.single .pg-body{--to:var(--sky-3)}
.pg-cols{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,46em) minmax(0,.2fr); column-gap:clamp(40px,5vw,112px); align-items:start}
.pg-cols > .prose{grid-column:2}
.toc{position:sticky; top:calc(var(--bar-h) + 32px); display:grid; gap:14px; padding-top:6px}
.toc[hidden]{display:block; visibility:hidden}
.toc ol{display:grid; gap:2px; border-left:1px solid var(--line)}
.toc a{display:block; margin-left:-1px; padding:7px 0 7px 16px; border-left:1px solid transparent; font-size:16px; line-height:1.35; text-decoration:none; color:var(--text-2); transition:color .2s, border-color .2s}
.toc a:hover{color:var(--text)}
.toc a[aria-current]{border-left-color:var(--mint); color:var(--text)}
.prose{max-width:46em; font-size:clamp(18px,1.2vw,22px); line-height:1.7; color:#DDE5E0; overflow-wrap:break-word}
.prose > * + *{margin-top:1.15em}
.prose h2{max-width:none; margin-top:1.7em; font-size:clamp(30px,2.5vw,52px); line-height:1.06; color:var(--text)}
.prose h3{margin-top:1.6em; font-size:clamp(24px,1.8vw,36px); color:var(--text)}
.prose h4,.prose h5,.prose h6{margin:1.6em 0 0; font:500 1em/1.3 var(--f-body); color:var(--text)}
.prose > :first-child{margin-top:0}
.prose a{color:var(--mint); text-decoration-thickness:1px; text-underline-offset:.25em}
.prose a:hover{color:var(--mint-hi)}
.prose strong{font-weight:500; color:var(--text)}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--mint)}
.prose li > ul,.prose li > ol{margin-top:.4em}
.prose blockquote{padding-left:clamp(18px,1.6vw,32px); border-left:2px solid var(--mint); font:italic 400 1.25em/1.35 var(--f-display); letter-spacing:-.01em; color:var(--text)}
.prose blockquote cite{display:block; margin-top:.6em; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.prose figure{margin-inline:0}
.prose img,.prose video{max-width:100%; height:auto; border-radius:16px}
.prose figcaption,.prose .wp-caption-text{margin-top:10px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.06em; color:var(--text-2)}
.prose hr{height:1px; margin-block:2em; border:0; background:var(--line-2)}
.prose table{width:100%; border-collapse:collapse; font-size:.9em}
.prose th,.prose td,.prose .wp-block-table th,.prose .wp-block-table td{padding:12px 14px 12px 0; border:0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.prose th,.prose .wp-block-table th{font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.prose .wp-block-table thead,.prose .wp-block-table tfoot{border:0}
.prose thead th,.prose .wp-block-table thead th{border-bottom-color:var(--line-2)}
.prose .wp-block-table{overflow-x:auto}
.prose code,.prose kbd{padding:.15em .4em; border-radius:6px; background:#11281F; font:400 .88em/1.5 var(--f-mono)}
.prose pre{padding:clamp(16px,1.4vw,26px); overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#0C1D17; font:400 .85em/1.6 var(--f-mono)}
.prose pre code{padding:0; background:none; font-size:1em}
.prose iframe,.prose embed,.prose object{max-width:100%}
.prose .wp-block-embed__wrapper{position:relative}
.prose .wp-block-button__link,.prose .wp-element-button{display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border-radius:999px; background:var(--mint); color:var(--ink); font:500 16px/1 var(--f-body); text-decoration:none}
.prose .wp-block-buttons{display:flex; flex-wrap:wrap; gap:12px}
.prose .aligncenter{margin-inline:auto; text-align:center}
.prose .alignleft{float:left; max-width:50%; margin:.3em 1.4em 1em 0}
.prose .alignright{float:right; max-width:50%; margin:.3em 0 1em 1.4em}
.prose .has-text-align-center{text-align:center}
.prose .has-text-align-right{text-align:right}
.prose::after{content:""; display:block; clear:both}
.post-cover img{width:100%; border-radius:20px}
.page-links{display:flex; flex-wrap:wrap; gap:8px; font:400 var(--fs-mono)/1.5 var(--f-mono); letter-spacing:.08em}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:2.2em; padding:0; list-style:none}
.prose .tags{padding-left:0; list-style:none}
.prose .tags li + li{margin-top:0}
.tags a{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--line-2); border-radius:999px; font:500 15px/1 var(--f-body); color:var(--text); text-decoration:none; transition:border-color .2s}
.tags a:hover{border-color:var(--mint); color:var(--text)}

/* a post: the article with its author beside it */
.post-layout{display:grid; grid-template-columns:minmax(0,46em) minmax(260px,360px); justify-content:space-between; column-gap:clamp(40px,6vw,128px); align-items:start}
.post-side{position:sticky; top:calc(var(--bar-h) + 32px); display:grid; gap:clamp(14px,1.2vw,22px)}
.side-card{display:grid; gap:12px; justify-items:start; padding:clamp(20px,1.7vw,32px)}
.side-card > *{position:relative; z-index:1}
.side-name{font:500 clamp(24px,1.7vw,32px)/1.1 var(--f-display); letter-spacing:-.015em}
.side-copy{font-size:16px; color:var(--text-2)}
.post-nav{--from:var(--sky-3); --to:var(--sky-5); padding-block:0 clamp(64px,9vh,120px)}
.post-nav--last{--to:var(--sky-8)}
.post-nav-in{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px)}
.post-step{display:grid; gap:10px; padding:clamp(20px,1.8vw,36px); text-decoration:none}
.post-step > *{position:relative; z-index:1}
.post-step strong{font:500 clamp(20px,1.5vw,30px)/1.15 var(--f-display); letter-spacing:-.015em}
.post-step--next{grid-column:2; text-align:right}
.post-step:hover{border-color:rgba(70,222,159,.5)}
.pg-more{--from:var(--sky-5); --to:var(--sky-8)}
.pg-more .entries{margin-top:clamp(36px,5vh,72px)}

/* lists of posts: type only */
.pg-list{--from:var(--sky-1); --to:var(--sky-8); padding-top:clamp(28px,4vh,56px)}
.entries{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.2vw,22px)}
.entry{display:flex}
.entry-link{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; width:100%; padding:clamp(22px,2vw,40px); text-decoration:none}
.entry-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; font:400 var(--fs-mono)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.entry-cat{color:var(--mint)}
.entry-title{max-width:none; font-size:clamp(24px,1.9vw,38px); line-height:1.12; text-wrap:pretty}
.entry-copy{font-size:clamp(16px,1.05vw,19px); color:var(--text-2)}
.entry-more{display:inline-flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; font-weight:500}
.entry-more svg{width:14px; height:14px; transition:transform .25s var(--ease)}
.entry:hover .entry-more svg{transform:translateX(4px)}
.entry:hover{border-color:rgba(70,222,159,.5)}
.pagination{margin-top:clamp(32px,5vh,64px)}
.nav-links{display:flex; flex-wrap:wrap; gap:8px}
.page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:46px; padding:0 16px; border:1px solid var(--line-2); border-radius:999px; font:500 15px/1 var(--f-body); text-decoration:none; transition:border-color .2s}
a.page-numbers:hover{border-color:var(--mint)}
.page-numbers.current{background:var(--mint); border-color:var(--mint); color:var(--ink)}
.page-numbers.dots{border-color:transparent}
.empty{display:grid; gap:var(--s-3); justify-items:start; max-width:46em; padding:clamp(24px,2.4vw,48px)}
.empty > *{position:relative; z-index:1}

/* search */
.sform{display:flex; flex-wrap:wrap; gap:10px; width:min(100%,560px)}
.sform .btn{background:none}
.sform input{flex:1 1 220px; min-height:48px; padding:0 20px; border:1px solid var(--line-2); border-radius:999px; background:rgba(5,7,6,.5); font:400 16px/1 var(--f-body)}
.sform input:focus{outline:none; border-color:var(--mint)}
.sform input::placeholder{color:var(--text-2)}

/* page not found */
.pg-lost{display:flex; align-items:center; min-height:100vh; min-height:100svh}
.lost{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); column-gap:var(--s-5); align-items:center}
.lost-bird{justify-self:center; width:min(100%,520px); transform:rotate(14deg)}

@media (max-width:1200px){
  .pg-cols{grid-template-columns:minmax(0,46em); justify-content:start}
  .pg-cols > .prose{grid-column:1}
  .toc{display:none}
  .entries{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .post-layout{grid-template-columns:minmax(0,1fr); row-gap:var(--s-5)}
  .post-side{position:static; grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .entries,.post-nav-in,.post-side{grid-template-columns:minmax(0,1fr)}
  .post-step--next{grid-column:1; text-align:left}
  .lost{grid-template-columns:minmax(0,1fr); row-gap:var(--s-4)}
  .lost-bird{order:-1; width:min(60%,260px); justify-self:start}
  .prose .alignleft,.prose .alignright{float:none; max-width:100%; margin:0}
}

/* Wide Page template: the reading styles across the full site width, starting under the fixed bar */
.pg-wide{padding:calc(var(--bar-h) + clamp(32px,5vh,72px)) 0 clamp(56px,8vh,120px)}
.prose--wide{max-width:none}
.prose--wide > *{max-width:none}