/* The little drawing of a template: a page in its own layout and its own
   colour, in pure CSS — no image, no network, no iframe. The catalogue
   falls back to it when a template has no live demo, and the landing
   page's ten chips use it to show what each one is before it is chosen.

   Loaded on its own rather than from style.css, because only the pages
   that offer templates draw one and style.css is every public site page.
   Add a template here as `.tpl-<key> .tpl-body::before/::after`; a key
   with no rule still gets the frame and the bar, just an empty page. */
.tpl-pages { font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.tpl { --tpl-accent: var(--accent); --tpl-ink: #1c1c1a; --tpl-paper: #fff; --tpl-soft: #e9e9e4; position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--tpl-paper); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); transition: transform calc(var(--motion-time) * .4) ease; }
.starter:hover .tpl { transform: translateY(-2px); }
.tpl-dark { --tpl-paper: #17171a; --tpl-ink: #f2f2ee; --tpl-soft: #2b2b31; }
.tpl-bar { position: absolute; top: 0; left: 0; right: 0; height: 14%; display: flex; align-items: center; gap: 5%; padding: 0 6%; }
.tpl-bar i { width: 18%; height: 14%; background: var(--tpl-ink); border-radius: 2px; }
.tpl-bar b { margin-left: auto; width: 9%; height: 8%; background: var(--tpl-soft); border-radius: 2px; }
.tpl-bar b + b { margin-left: 0; }
.tpl-body { position: absolute; inset: 14% 6% 6%; }
.tpl-body::before, .tpl-body::after { content: ""; position: absolute; }
.tpl-business .tpl-body::before { left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(135deg, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 60%, #fff)); border-radius: 4px; }
.tpl-business .tpl-body::after { left: 0; right: 0; bottom: 0; height: 46%; background: repeating-linear-gradient(90deg, var(--tpl-soft) 0 30%, transparent 30% 35%); border-radius: 3px; }
.tpl-portfolio .tpl-body::before { inset: 0 0 auto 0; height: 26%; background: linear-gradient(90deg, var(--tpl-ink) 0 55%, transparent 55%); -webkit-mask: linear-gradient(#000 0 30%, transparent 30% 45%, #000 45% 60%, transparent 60%); mask: linear-gradient(#000 0 30%, transparent 30% 45%, #000 45% 60%, transparent 60%); opacity: .9; }
.tpl-portfolio .tpl-body::after { left: 0; right: 0; bottom: 0; height: 66%; background: linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 0 / 48% 48% no-repeat, linear-gradient(var(--tpl-accent), var(--tpl-accent)) 100% 0 / 48% 48% no-repeat, linear-gradient(var(--tpl-accent), var(--tpl-accent)) 0 100% / 48% 48% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 100% 100% / 48% 48% no-repeat; opacity: .85; }
.tpl-restaurant .tpl-body::before { left: 0; right: 0; top: 0; height: 44%; background: radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--tpl-accent) 55%, #fff), var(--tpl-accent)); border-radius: 50% 50% 4px 4px / 30% 30% 4px 4px; }
.tpl-restaurant .tpl-body::after { left: 12%; right: 12%; bottom: 4%; height: 40%; background: repeating-linear-gradient(180deg, var(--tpl-ink) 0 6%, transparent 6% 22%); opacity: .55; }
.tpl-blog .tpl-body::before { left: 0; right: 0; top: 4%; height: 18%; background: var(--tpl-ink); -webkit-mask: linear-gradient(90deg, #000 0 70%, transparent 70%); mask: linear-gradient(90deg, #000 0 70%, transparent 70%); border-radius: 3px; }
.tpl-blog .tpl-body::after { left: 0; right: 0; top: 30%; bottom: 0; background: repeating-linear-gradient(180deg, var(--tpl-soft) 0 26%, transparent 26% 34%); }
.tpl-event .tpl-body::before { left: 0; right: 0; top: 0; height: 52%; background: var(--tpl-accent); border-radius: 6px; }
.tpl-event .tpl-body::after { left: 20%; right: 20%; top: 12%; height: 28%; background: #fff; border-radius: 4px; opacity: .9; }
.tpl-personal .tpl-body::before { left: 50%; top: 6%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); background: var(--tpl-accent); border-radius: 50%; }
.tpl-personal .tpl-body::after { left: 22%; right: 22%; top: 48%; height: 38%; background: repeating-linear-gradient(180deg, var(--tpl-soft) 0 14%, transparent 14% 30%); }
.tpl-shop .tpl-body::before { left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(90deg, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 60%, #fff)); border-radius: 4px; }
.tpl-shop .tpl-body::after { left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 0 / 31% 70% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 50% 0 / 31% 70% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 100% 0 / 31% 70% no-repeat, linear-gradient(var(--tpl-accent), var(--tpl-accent)) 0 100% / 18% 12% no-repeat, linear-gradient(var(--tpl-accent), var(--tpl-accent)) 50% 100% / 18% 12% no-repeat, linear-gradient(var(--tpl-accent), var(--tpl-accent)) 100% 100% / 18% 12% no-repeat; border-radius: 3px; }

.tpl-salon .tpl-body::before, .tpl-clinic .tpl-body::before { left: 0; right: 0; top: 0; height: 42%; border-radius: 4px;
  background: linear-gradient(135deg, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 55%, #fff)); }
.tpl-salon .tpl-body::after, .tpl-clinic .tpl-body::after, .tpl-gym .tpl-body::after { left: 0; right: 0; bottom: 0; height: 46%;
  background: repeating-linear-gradient(90deg, var(--tpl-soft) 0 22%, transparent 22% 26%); border-radius: 3px; }
.tpl-gym .tpl-body::before { left: 0; right: 0; top: 0; height: 46%; background: var(--tpl-accent); clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
.tpl-realestate .tpl-body::before { left: 0; right: 0; top: 0; height: 34%; background: var(--tpl-accent); border-radius: 3px; }
.tpl-realestate .tpl-body::after { left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 0 / 31% 100% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 50% 0 / 31% 100% no-repeat,
    linear-gradient(var(--tpl-soft), var(--tpl-soft)) 100% 0 / 31% 100% no-repeat; }

/* An abaya boutique: one tall picture, then the rail of pieces under it. */
.tpl-abaya .tpl-body::before { left: 0; right: 0; top: 0; height: 52%; background: linear-gradient(160deg, color-mix(in srgb, var(--tpl-accent) 70%, #fff), var(--tpl-accent)); border-radius: 4px; }
.tpl-abaya .tpl-body::after { left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 0 / 30% 100% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 50% 0 / 30% 100% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 100% 0 / 30% 100% no-repeat; border-radius: 3px; }

/* Scarves: a wide picture, then the colours in a row. */
.tpl-hijab .tpl-body::before { left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(110deg, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 45%, #fff)); border-radius: 4px; }
.tpl-hijab .tpl-body::after { left: 0; right: 0; bottom: 0; height: 44%; background: repeating-linear-gradient(90deg, var(--tpl-soft) 0 18%, transparent 18% 22%); border-radius: 3px; }

/* Ramadan and Eid: a lantern over the collection. */
.tpl-ramadan .tpl-body::before { left: 50%; top: 2%; width: 30%; height: 44%; transform: translateX(-50%); background: var(--tpl-accent); border-radius: 50% 50% 8px 8px / 60% 60% 8px 8px; }
.tpl-ramadan .tpl-body::after { left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 0 / 23% 100% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 33% 0 / 23% 100% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 66% 0 / 23% 100% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 100% 0 / 23% 100% no-repeat; border-radius: 3px; }

/* Courses: a wide cover over the lessons, each a line and a lock. */
.tpl-courses .tpl-body::before { left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(130deg, var(--tpl-accent), color-mix(in srgb, var(--tpl-accent) 45%, #fff)); border-radius: 4px; }
.tpl-courses .tpl-body::after { left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 0 / 100% 26% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 37% / 100% 26% no-repeat, linear-gradient(var(--tpl-soft), var(--tpl-soft)) 0 74% / 100% 26% no-repeat; border-radius: 3px; }