/* Templates app page (landing/v2/templates), the <style> block of templates.html as is, then the inline styles of
   its markup as classes */

.hero-t{padding-top:32px}
/* On every other page the hero starts directly under the nav, so the hero's
   decorative wash (.hero::before, which begins 140px above the hero) shows
   through the glass header. Here the category bar sits in between and pushes
   the hero down by its own height, which left the header plain white while
   the rest of the site had colour behind it. Shift the wash up by that height
   — a constant 129px, since the bar scrolls sideways rather than wrapping —
   so the header lands on the same colours as everywhere else. */
.hero-t::before{inset:-269px 0 auto 0}
/* hero fan of template cards */
.fan{position:relative;max-width:1100px;margin:56px auto 0;height:300px;overflow:hidden}
.fan::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.fan .tcard{position:absolute;width:300px;bottom:-40px;left:50%;transform-origin:50% 100%}
.fan .tcard .thumb{background:#fff;box-shadow:var(--shadow),0 0 0 1px var(--border)}
.fan .f1{transform:translateX(-50%) rotate(0) translateY(0);z-index:5;width:340px}
.fan .f2{transform:translateX(-50%) translateX(-260px) rotate(-6deg) translateY(30px);z-index:4}
.fan .f3{transform:translateX(-50%) translateX(260px) rotate(6deg) translateY(30px);z-index:4}
.fan .f4{transform:translateX(-50%) translateX(-500px) rotate(-12deg) translateY(90px);z-index:3}
.fan .f5{transform:translateX(-50%) translateX(500px) rotate(12deg) translateY(90px);z-index:3}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cats .tile h4{overflow-wrap:break-word}
.human{border-radius:var(--r-lg);padding:64px 56px;color:#fff;background:radial-gradient(circle at 85% 15%,var(--sky) 0,transparent 45%),radial-gradient(circle at 5% 100%,var(--blue-dark) 0,transparent 45%),var(--blue)}
.human h2{color:#fff;font-size:40px}
.human .grid-3{margin-top:40px}
.human .feat{background:rgba(255,255,255,.12);border-radius:var(--r);padding:22px}
.human .feat h4{color:#fff;margin-bottom:12px;font-size:18px}
.human .feat .ph{min-height:130px;border-radius:var(--r-sm);background:rgba(255,255,255,.92)}
.howto .tool{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r);background:var(--bg-soft);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s}
.howto .tool:hover{transform:translateY(-2px);box-shadow:var(--lift);background:#fff}
.howto .tool h4{font-size:20px}
.lang{display:flex;gap:10px;flex-wrap:wrap}
.lang span{padding:6px 12px;border-radius:var(--pill);background:var(--bg-soft);font-size:12px;font-weight:600;color:var(--ink-2)}
.latest{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 16px}
@media (max-width:960px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}.latest{grid-template-columns:repeat(2,1fr)}.fan .f4,.fan .f5{display:none}.human{padding:36px 24px}.human h2{font-size:30px}}
@media (max-width:760px){.cats{grid-template-columns:1fr}.cats .tile{min-height:120px}.fan{height:220px}.fan .tcard{width:240px}.fan .f1{width:260px}.fan .f2{transform:translateX(-50%) translateX(-150px) rotate(-8deg) translateY(30px)}.fan .f3{transform:translateX(-50%) translateX(150px) rotate(8deg) translateY(30px)}}

/* Inline styles of templates.html, as classes */
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.copy-2{margin-top:56px;gap:40px}
.human .eyebrow{color:#fff;opacity:.9}
.human h2{margin-top:12px}
.howto .split{margin-bottom:48px}
.howto .split .btn-row{margin-top:24px}
.nowrap{white-space:nowrap}

/* Real covers where the static page drew placeholder slides and panels */
.tcard .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.human .feat .ph img,.release img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.release::after{display:none}
.release .ph-label{position:absolute;left:18px;bottom:18px}


/* Category belt: centred while it fits, the auto margins give way to scrolling from the first item once it does not */
.catbelt > a:first-child{margin-left:auto}
.catbelt > a:last-child{margin-right:auto}

/* The categories' own icons from the database, as the /library bar shows them. They colour and move themselves through
   their iconCss, so the design's line icon stroke, fill and draw-in stay off them */
.catbelt .cat-ic{display:block;width:34px;height:34px;transition:transform .3s var(--ease)}
.catbelt .cat-ic svg{display:block;width:34px;height:34px;stroke:none;fill:initial;transition:none;transform:none}
.catbelt a:hover .cat-ic svg{stroke:none;transform:none}
.catbelt .cat-ic svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.catbelt a:hover .cat-ic svg path{animation:none}
.catbelt a:hover .cat-ic{transform:scale(1.06)}

/* When the twelve don't fit the belt scrolls: by touch and trackpad natively, by dragging with the mouse, and with the
   arrows the /library bar has, shown only on the side that has more (javascripts/v2/templates.js). The edge fades on
   that side the same way */
.catbelt-wrap{position:relative;z-index:1}
.catbelt-wrap.more-l .catbelt{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px);mask-image:linear-gradient(90deg,transparent,#000 72px)}
.catbelt-wrap.more-r .catbelt{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.catbelt-wrap.more-l.more-r .catbelt{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.catbelt.dragging{cursor:grabbing;scroll-behavior:auto}
.catbelt.dragging a{pointer-events:none}
.catbelt-arrow{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-22px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px var(--border);display:grid;place-items:center;transition:background-color .2s var(--ease),transform .2s var(--ease)}
.catbelt-arrow::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);margin-left:-3px}
.catbelt-arrow.prev{left:calc(var(--gutter) - 8px)}
.catbelt-arrow.prev::before{transform:rotate(135deg);margin-left:3px}
.catbelt-arrow.next{right:calc(var(--gutter) - 8px)}
.catbelt-arrow:hover{background:var(--bg-soft)}
.catbelt-arrow:active{transform:scale(.94)}
.catbelt-arrow[hidden]{display:none}
/* touch screens swipe, as on /library */
@media (hover:none),(pointer:coarse){.catbelt-arrow{display:none}}