/* template: "Off the template". A wall of identical template posts; one pixel won't stay in line, breaks out, and
   brings one post to life. */
[data-part="template"] { --qs: 1.75; --gap: clamp(10px, 1.1vw, 18px); }
[data-part="template"] .tm-head { display: grid; gap: clamp(18px, 2vw, 28px); }
[data-part="template"] .tm-h { max-width: 11em; }
[data-part="template"] .tm-lede { color: var(--ink-2); max-width: 31em; }

/* the wall: wider than the page, cut at both sides, so it reads as endless */
[data-part="template"] .tm-wall { position: relative; margin-top: clamp(56px, 6vw, 96px); overflow: hidden; padding-block: clamp(36px, 4vw, 64px); }
[data-part="template"] .tm-grid { list-style: none; margin: 0 0 0 -7%; padding: 0; width: 114%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--gap); }
html[dir="rtl"] [data-part="template"] .tm-grid { margin: 0 -7% 0 0; }
[data-part="template"] .tp { position: relative; min-width: 0; }
[data-part="template"] .tp-p { grid-row: 1; grid-column: 7; }
[data-part="template"] .tp-q { grid-row: 2; grid-column: 4; z-index: 2; }
[data-part="template"] .tm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* one template post: flat, crisp, the same as every other (default fonts on purpose) */
[data-part="template"] .tp-card { position: relative; aspect-ratio: 4 / 5; border-radius: clamp(7px, .85vw, 13px); background: var(--sand); color: var(--date); container-type: inline-size; transform-origin: 50% 50%; overflow: visible; }
[data-part="template"] .tp:not(.tp-q) .tp-card { cursor: pointer; }
[data-part="template"] .tp-logo { position: absolute; top: 10cqw; inset-inline-start: 8cqw; width: 19cqw; height: 19cqw; border-radius: 18.5%; background: var(--date); }
[data-part="template"] .tp-img { position: absolute; top: 36cqw; left: 8cqw; right: 8cqw; height: 39cqw; border-radius: 2cqw; background: #D6C3A2; overflow: hidden; }
[data-part="template"] .tp-img i { position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .45cqw), rgba(42, 30, 23, .2) 50%, transparent calc(50% + .45cqw)), linear-gradient(to bottom right, transparent calc(50% - .45cqw), rgba(42, 30, 23, .2) 50%, transparent calc(50% + .45cqw)); }
[data-part="template"] .tp-h { position: absolute; top: 79cqw; inset-inline: 8cqw; font: 700 8.6cqw/1.12 Arial, Helvetica, sans-serif; letter-spacing: 0; }
html[lang="ar"] [data-part="template"] .tp-h { font: 700 9.4cqw/1.3 Tahoma, Arial, sans-serif; }
[data-part="template"] .tp-btn { position: absolute; bottom: 7cqw; inset-inline-start: 8cqw; padding: 2.4cqw 4.6cqw; border-radius: 99px; background: var(--date); color: var(--sand); font: 700 5cqw/1 Arial, Helvetica, sans-serif; }
html[lang="ar"] [data-part="template"] .tp-btn { font-family: Tahoma, Arial, sans-serif; }

/* the post that comes alive: it breaks out of its cell, on its own ground, in the studio's own type */
[data-part="template"] .tp-q .tp-card { transform: scale(var(--qs)); }
[data-part="template"] .tq { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqw; border-radius: inherit; background: var(--date); color: var(--sand); }
[data-part="template"] .tq-top { display: flex; align-items: center; gap: 3.4cqw; direction: ltr; }
html[dir="rtl"] [data-part="template"] .tq-top { flex-direction: row-reverse; justify-content: flex-end; }
[data-part="template"] .tq-mark { --c: 10.9cqw; position: relative; display: grid; grid-template-columns: var(--c) var(--c); grid-auto-rows: var(--c); gap: .9cqw; flex: none; }
[data-part="template"] .tq-mark > i { border-radius: 18.5%; background: var(--sand); }
[data-part="template"] .tq-mark > .tq-slot { grid-area: 1 / 2; background: none; }
[data-part="template"] .tq-mark > i:nth-child(1) { grid-area: 1 / 1; }
[data-part="template"] .tq-mark > i:nth-child(2) { grid-area: 2 / 1; }
[data-part="template"] .tq-mark > i:nth-child(3) { grid-area: 2 / 2; }
[data-part="template"] .tq-mark > .tq-px { position: absolute; width: var(--c); height: var(--c); top: calc(var(--c) * -.45); left: calc(var(--c) * 1.45 + .9cqw); background: var(--wadi); }
[data-part="template"] .tq-brand { font: 700 6.8cqw/1 var(--f-en); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[lang="ar"] [data-part="template"] .tq-brand { font: 700 7cqw/1.3 var(--f-ar); }
[data-part="template"] .tq-big { margin-top: auto; font: 800 18.5cqw/.9 var(--f-en); letter-spacing: -.05em; }
[data-part="template"] .tq-big .w { display: inline-block; }
html[lang="ar"] [data-part="template"] .tq-big { font: 700 18cqw/1.25 var(--f-ar); letter-spacing: 0; }
[data-part="template"] .tq-sub { margin-top: 4.6cqw; font: 500 5.3cqw/1.25 var(--f-en); color: rgba(234, 220, 195, .74); }
html[lang="ar"] [data-part="template"] .tq-sub { font: 500 5.4cqw/1.6 var(--f-ar); }

/* alive variants: the same words as the template, designed (a tap wakes any post into one of them) */
[data-part="template"] .tv { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqw; border-radius: inherit; }
[data-part="template"] .tv > p:first-of-type { margin-top: auto; }
[data-part="template"] .tv-a { background: var(--dune); color: var(--date); }
[data-part="template"] .tv-a .tq-mark > i { background: var(--date); }
[data-part="template"] .tv-a .tv-t { font: 800 29cqw/.82 var(--f-en); letter-spacing: -.06em; }
[data-part="template"] .tv-a .tv-s { font: 700 8.4cqw/1.05 var(--f-en); letter-spacing: -.02em; margin-top: 3cqw; }
[data-part="template"] .tv-b { background: var(--night); color: var(--sand); box-shadow: inset 0 0 0 .6cqw rgba(234, 220, 195, .16); }
[data-part="template"] .tv-b .tv-t { font: 800 7cqw/.95 var(--f-en); letter-spacing: -.04em; }
[data-part="template"] .tv-b .tv-t > span, [data-part="template"] .tv-c .tv-t > span { display: grid; justify-items: start; }
[data-part="template"] .tv-b .tv-t .w:nth-child(2) { font-size: 12cqw; }
[data-part="template"] .tv-b .tv-t .w:nth-child(3), [data-part="template"] .tv-b .tv-t .ar .w:nth-child(2) { font-size: 17.4cqw; }
[data-part="template"] .tv-c { background: var(--sand); color: var(--date); box-shadow: inset 0 0 0 .7cqw var(--date); }
[data-part="template"] .tv-c .tq-mark > i { background: var(--date); }
[data-part="template"] .tv-c .tv-t { font: 800 12.4cqw/.92 var(--f-en); letter-spacing: -.045em; }
[data-part="template"] .tv-c .tv-t .w:nth-child(2) { margin-inline-start: 10cqw; }
[data-part="template"] .tv-c .tv-t .w:nth-child(3) { margin-inline-start: 20cqw; }
html[lang="ar"] [data-part="template"] .tv .tv-t, html[lang="ar"] [data-part="template"] .tv .tv-s { font-family: var(--f-ar); letter-spacing: 0; line-height: 1.2; }
[data-part="template"] .tv .w { display: inline-block; }

/* the hint, and the live states */
[data-part="template"] .tm-hint { margin-top: 18px; color: var(--ink-2); visibility: hidden; opacity: 0; transition: opacity .5s ease; }
[data-part="template"].tm-live.tm-free .tm-hint { visibility: visible; opacity: 1; }
[data-part="template"].tm-live .tp-q .tp-card { transform: none; }
[data-part="template"].tm-live .tq-px { visibility: hidden; }
[data-part="template"].tm-live .tp.is-home .tq-px { visibility: visible; }
/* the pixel has gone on down the page (PX.pixel): the post's mark keeps its empty spot */
[data-part="template"].tm-live.tm-gone .tp .tq-px, [data-part="template"].tm-live.tm-gone .tp .tv-px { visibility: hidden; }
/* the drawn layer: a screen-sized canvas that sticks while the part scrolls by */
[data-part="template"] .bk-fx { position: absolute; inset: -10vh 0 0; pointer-events: none; z-index: 4; }
[data-part="template"] .bk-fx canvas { position: sticky; top: 0; width: 100%; height: 100vh; display: block; }
/* the stubborn post's slot: empty while the pixel refuses it, healed (filled) once it's gone */
[data-part="template"].tm-live .tp-p:not(.is-healed) .tp-empty { background: none; }
[data-part="template"] .tp-empty { background: var(--date); }
[data-part="template"].tm-live .tp-p.is-healed .tp-empty { animation: tm-heal .38s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes tm-heal { 0% { transform: scale(.2); } 60% { transform: scale(1.14, .9); } 100% { transform: none; } }
/* the alive post's last line arrives after the hit */
[data-part="template"].tm-live .tq:not(.tm-sub-in) .tq-sub { opacity: 0; transform: translateY(1.2em); }
[data-part="template"] .tq-sub { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
[data-part="template"] .tq, [data-part="template"] .tv { overflow: hidden; }
[data-part="template"] .tv-px { position: absolute; width: 19cqw; height: 19cqw; top: 1.45cqw; left: 16.55cqw; border-radius: 18.5%; background: var(--wadi); }
html[dir="rtl"] [data-part="template"] .tv-px { left: auto; right: 16.55cqw; }

@media (max-width: 899px) {
  [data-part="template"] { --qs: 1.72; }
  [data-part="template"] .tm-grid { width: auto; margin: 0; padding-inline: max(var(--m), env(safe-area-inset-left)); grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html[dir="rtl"] [data-part="template"] .tm-grid { margin: 0; }
  [data-part="template"] .tp-p { grid-row: 1; grid-column: 4; }
  [data-part="template"] .tp-q { grid-row: 2; grid-column: 2; }
  [data-part="template"] .tp-t { display: none; }
}
@media (max-width: 599px) {
  [data-part="template"] .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-part="template"] .tp-p { grid-row: 1; grid-column: 3; }
  [data-part="template"] .tp-q { grid-row: 2; grid-column: 2; }
  [data-part="template"] .tp-m { display: none; }
  [data-part="template"] .tm-wall { padding-block: 48px; }
}
/* the post that broke out sits above the wall */
[data-part="template"] .tp-q .tp-card, [data-part="template"] .tp.is-alive .tp-card { box-shadow: 0 1.2vw 2.6vw -.6vw rgba(0, 0, 0, .55); }
[data-part="template"].tm-live:not(.tm-free) .tp-q .tp-card { box-shadow: none; }
[data-part="template"] .tm-hint { margin-top: -8px; }
@media (max-width: 599px) { [data-part="template"] .tm-hint { margin-top: -22px; } }