/* clubcamelots.com, inner pages in the V4 look: /blog, categories, /post/*, /thanks (2026-10-06) */

body.page main{display:block}
.page .serif{font-family:var(--serif);font-weight:500}

/* page head */
.page .phero{padding:132px 0 clamp(40px,7vh,72px);border-bottom:1px solid var(--em)}
.page .phero .lbl{margin:0 0 16px;font:400 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}
.page .phero .lbl a{color:var(--em);text-decoration:none;border-bottom:1px solid currentColor}
.page .phero h1{font:500 clamp(40px,6.4vw,84px)/1.03 var(--serif);letter-spacing:-.02em;color:var(--em-d);margin:0 0 22px;max-width:22ch}
.page .phero .dek{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:56ch;margin:0}
.page .artmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:6px 0 0;font:400 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}
.page .cats{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.page .cats a{font:400 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em);text-decoration:none;border:1px solid var(--em);padding:9px 12px}
.page .cats a.on,.page .cats a:hover{background:var(--em);color:var(--paper)}

/* post list */
.page .band{padding:clamp(40px,7vh,80px) 0 clamp(72px,12vh,140px)}
.page .posts{border-top:1px solid var(--em)}
.page .posts .post{display:grid;grid-template-columns:200px 1fr;gap:6px 32px;padding:26px 0;border-bottom:1px solid var(--line)}
.page .posts .when{margin:6px 0 0;font:400 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}
.page .posts h2{font:500 clamp(22px,2.2vw,30px)/1.25 var(--serif);margin:0 0 8px;color:var(--em-d)}
.page .posts h2 a{color:inherit;text-decoration:none}
.page .posts h2 a:hover{text-decoration:underline;text-underline-offset:5px}
.page .posts p{margin:0 0 10px;font-size:16px;line-height:1.6;color:#2f3d33;max-width:62ch}
.page .posts .tag{margin:0;font:400 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}

/* article */
.page .article{padding:clamp(48px,8vh,88px) 0 clamp(72px,12vh,140px)}
.page .artgrid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,5vw,80px);align-items:start}
.page .prose,.page article.essay{max-width:68ch;font-size:18px;line-height:1.75;color:#1f2a23}
.page .prose p,.page article.essay p{margin:0 0 20px}
.page .prose h2,.page article.essay h2{font:500 clamp(26px,2.6vw,34px)/1.2 var(--serif);color:var(--em-d);margin:44px 0 16px;letter-spacing:-.01em}
.page .prose h3{font:500 22px/1.3 var(--serif);color:var(--em-d);margin:32px 0 12px}
.page .prose ul,.page .prose ol{margin:0 0 8px;padding-left:22px}
.page .prose ul + ul,.page .prose ol + ol{margin-top:-4px}
.page .prose li{margin:0 0 10px;padding-left:4px}
.page .prose li::marker{color:var(--em)}
.page .prose strong{color:var(--em-d)}
.page .prose a,.page article.essay a{color:var(--em);text-underline-offset:3px}
.page .prose blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--em);font:500 italic 22px/1.45 var(--serif);color:var(--em-d)}
.page .prose img{max-width:100%;height:auto;border:1px solid var(--line)}
.page .prose table{border-collapse:collapse;width:100%;margin:0 0 24px;font-size:16px}
.page .prose th,.page .prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.page .artcta{margin-top:48px;background:var(--em);color:var(--paper);padding:clamp(24px,3vw,40px)}
.page .artcta h3{font:500 clamp(24px,2.4vw,32px)/1.2 var(--serif);margin:0 0 12px;color:var(--paper)}
.page .artcta p{margin:0 0 22px;color:#E6DCC0;max-width:52ch}
.page .artcta .btn{background:var(--paper);color:var(--em-d);margin-top:0}
.page .artcta .btn:hover{background:var(--paper-2)}
.page .aside{position:sticky;top:96px;border-top:2px solid var(--em);padding-top:16px}
.page .aside h4{margin:0 0 14px;font:400 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}
.page .aside ul{list-style:none;margin:0;padding:0}
.page .aside li{padding:12px 0;border-bottom:1px solid var(--line)}
.page .aside li a{font:500 18px/1.35 var(--serif);color:var(--em-d);text-decoration:none}
.page .aside li a:hover{text-decoration:underline;text-underline-offset:4px}
.page .aside .btn{margin-top:0;background:transparent;color:var(--em);border:1px solid var(--em);padding:12px 16px;font-size:14px}
.page .aside .btn:hover{background:var(--em);color:var(--paper)}

/* simple pages: essay and thanks */
.page .pg-simple{padding-top:132px;padding-bottom:clamp(72px,12vh,140px);max-width:820px}
.page .pg-simple .k{margin:0 0 16px;font:400 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}
.page .pg-simple h1{font:500 clamp(38px,6vw,76px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--em-d);margin:0 0 22px}
.page .pg-simple .sub{font:500 italic clamp(20px,2vw,26px)/1.4 var(--serif);color:var(--em);margin:0 0 18px;max-width:40ch}
.page .pg-simple .by{margin:0 0 40px;padding-bottom:22px;border-bottom:1px solid var(--em);font:400 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em)}
.page .pg-simple .back{display:inline-block;margin-top:30px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--em);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.page.thanks .pg-simple .sub{font:400 clamp(17px,1.5vw,20px)/1.6 var(--sans);color:var(--em-d);max-width:52ch}

@media (max-width:900px){
  .page .artgrid{grid-template-columns:1fr}
  .page .aside{position:static}
}
@media (max-width:640px){
  .page .posts .post{grid-template-columns:1fr;gap:4px}
  .page .phero,.page .pg-simple{padding-top:104px}
  .page .prose,.page article.essay{font-size:17px}
}
.page .band .posts{border-top:0}
.page.thanks main{min-height:calc(100svh - 360px)}
.page .phero .wrap{max-width:1160px !important;margin:0 auto !important}
.page .phero h1{max-width:22ch !important}