/* CMS collection templates (projects, tutorials, their index pages). Loaded after info.css / tutorial.css. */

/* index pages */
.coll{max-width:1240px;margin:0 auto;padding:clamp(36px,5vw,72px) 20px 0;color:#4f4940;font:16px/1.7 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif}
.coll-head{max-width:760px}
.coll-title{margin:0;font:700 clamp(30px,4.2vw,50px)/1.08 "Syne",sans-serif;text-transform:uppercase;letter-spacing:.015em;color:#5a534a}
.coll-intro{margin:10px 0 0;font:400 clamp(17px,1.6vw,20px)/1.4 "Archivo Expanded",sans-serif;font-stretch:125%;color:#857c70}

/* tutorial video: the no-JS fallback player sits over the thumbnail */
.tut-video{position:relative}
.tut-video noscript iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tut-video--still>img{width:100%;height:100%;object-fit:cover;display:block}

/* tutorial body fragments from the CMS */
.tut-lead p{margin:0 0 14px;font-size:18px;color:#5a534a}
.tut-lead{margin:0 0 28px}.tut-lead p:last-child{margin-bottom:0}
.tut-steps li>div>p{margin:2px 0 0;color:#6b645a}
.tut-outro p{margin:0}.tut-outro p+p{margin-top:8px}
.tut-body a:not(.cta){color:#2f2b26;text-underline-offset:3px}

/* CMS prose (tutorial fallback bodies, project overview and build steps) */
.cms-prose .content-prose{color:#4f4940}
.cms-prose .content-prose :is(h1,h2,h3,h4,h5,h6){font-family:"Archivo Expanded",sans-serif;font-stretch:125%;font-weight:500;color:#5a534a;line-height:1.3;margin:1.8em 0 .6em}
.cms-prose .content-prose :is(h1,h2){font-size:21px}.cms-prose .content-prose h3{font-size:18px}.cms-prose .content-prose :is(h4,h5,h6){font-size:16px}
.cms-prose .content-prose>:first-child{margin-top:0}
.cms-prose .content-prose p{margin:0 0 1em}
.cms-prose .content-prose :is(ul,ol){margin:0 0 1.2em;padding-left:1.3em}
.cms-prose .content-prose li{margin:.3em 0}
.cms-prose .content-prose a{color:#2f2b26;text-underline-offset:3px}
.cms-prose .content-prose img{border:1px solid rgba(47,43,38,.12);border-radius:12px;background:#fff;margin:8px auto}
.cms-prose .content-prose figure{margin:24px 0}
.cms-prose .content-prose :is(th,td){border:1px solid rgba(47,43,38,.15)}
.cms-prose .content-prose pre{background:#efebe3;border-radius:8px}

/* project detail */
.proj{max-width:1180px}
.proj-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(28px,5vw,72px);align-items:center}
.proj-summary{margin:14px 0 0;font:400 clamp(17px,1.6vw,20px)/1.45 "Archivo Expanded",sans-serif;font-stretch:125%;color:#857c70;max-width:34em}
.proj-actions{margin-top:28px;display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.proj-note{margin:0;font-size:14px;color:#7a7266}
.proj-figure{margin:0;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#F5F2EC}
.proj-figure img{width:100%;height:100%;object-fit:contain;display:block}
.proj-figure--photo{background:#ece7dd}.proj-figure--photo img{object-fit:cover}
.proj-model{margin-top:clamp(40px,5vw,64px);scroll-margin-top:24px}
.proj-grid{grid-template-columns:minmax(0,1fr) 240px}
.proj-body section,.proj-section{scroll-margin-top:24px}
.proj-section{margin-top:clamp(40px,5vw,56px);padding-top:clamp(28px,3.5vw,40px);border-top:1px solid rgba(47,43,38,.15)}
.proj-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:32px 0 0}
.proj-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:#ece7dd}
.proj-toc ul{max-height:none}
.proj-toc-h{margin-top:28px!important}
@media (max-width:860px){
  .proj-hero{grid-template-columns:1fr}
  .proj-figure{max-width:520px;width:100%}
  .proj-grid{grid-template-columns:1fr}
  .proj-toc{display:none}
}

/* Project "Copy this design": the sidebar's outline button with Craft Guy in ink */
.proj-copy.nav-cta--guy{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 20px 8px 12px;font-size:15px;background:transparent;color:#2f2b26}
.proj-copy .nav-cta-guy{display:block;width:30px;height:31px;color:#2f2b26}
.proj-copy .nav-cta-guy svg{width:100%;height:100%;display:block;overflow:visible}
a.proj-copy.nav-cta--guy{border:1px solid rgba(47,43,38,.45);border-radius:999px;text-decoration:none;font-weight:500;line-height:1;color:#2f2b26}
a.proj-copy.nav-cta--guy:hover{background:rgba(47,43,38,.06);border-color:#2f2b26;color:#2f2b26}
a.proj-copy.nav-cta--guy span{text-decoration:none}