/* lookpack.css: "Clone yourself" look-pack board on Voices & people (RULING 27). Classes prefixed lp-. */
.lp-defs{position:absolute;width:0;height:0;overflow:hidden}
.lp{--mint:var(--ok,#7DDCAB)}
.lp .sec-head{margin-bottom:48px}

.lp-stage{display:grid;grid-template-columns:minmax(0,300px) 56px minmax(0,1fr);align-items:center;gap:20px;max-width:1160px;margin:0 auto}

/* left: what you add */
.lp-in{padding:20px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--s2),var(--s1))}
.lp-lbl{margin:0 0 14px;font-size:12px;color:var(--tx3)}
.lp-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp-photos li{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--s3);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.lp-photos img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.lp-photos img.lp-wide{object-position:46% 40%}
.lp-vid{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:8px 12px 8px 8px;border-radius:12px;border:1px dashed var(--line-2);background:var(--s1)}
.lp-vthumb{position:relative;flex:none;width:64px;height:40px;border-radius:7px;overflow:hidden;background:var(--s3)}
.lp-vthumb img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.8)}
.lp-vthumb .i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -6px;fill:#fff;stroke:none}
.lp-vid>span:last-child{display:flex;flex-direction:column;font-size:13px;line-height:1.35;color:var(--tx3)}
.lp-vid b{font:500 13px var(--mono);color:var(--tx)}
.lp-who{margin:14px 2px 0;display:flex;flex-wrap:wrap;gap:0 .45em;font-size:13px;color:var(--tx3)}
.lp-who b{font-weight:600;color:var(--tx)}

/* arrow */
.lp-arrow{display:grid;place-items:center;color:var(--coral)}
.lp-arrow svg{width:56px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lp-ar-l{stroke-dasharray:48;stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease)}
.lp-ar-h{opacity:1;transition:opacity .2s .35s}
.lp-pre .lp-ar-l{stroke-dashoffset:48}
.lp-pre .lp-ar-h{opacity:0}
.lp-stage.lp-arr .lp-ar-l{stroke-dashoffset:0}
.lp-stage.lp-arr .lp-ar-h{opacity:1}

/* right: the board */
.lp-board{box-shadow:0 30px 80px -30px rgba(0,0,0,.85),0 0 90px -44px rgba(242,80,68,.4)}
.lp-board .win-bar{min-height:42px}
.lp-board .ws b{font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.lp-grid{list-style:none;margin:0;padding:16px 16px 6px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 10px;background:#0C0C0E}
.lp-s{min-width:0}
.lp-w2{grid-column:span 2}
.lp-t{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--s1);box-shadow:0 0 0 1px var(--line-2)}
.lp-w2 .lp-t{aspect-ratio:auto;height:100%}
.lp-w2{display:flex;flex-direction:column}
.lp-w2 .lp-t{flex:1;min-height:0}
.lp-ph{position:absolute;inset:0;overflow:hidden;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.lp-ph>img{position:absolute;display:block;max-width:none;height:auto}
.lp-front{width:122.7%;left:-11.4%;top:-6.4%}
.lp-neutral{width:127%;left:-13.5%;top:-4.4%}
.lp-smile{width:154%;left:-27%;top:-5.4%}
.lp-laugh{width:144%;left:-23.3%;top:-5%}
.lp-speak{width:100%;left:0;top:-14%}

/* feature sheet: 2 x 2 close-ups cut from one photo */
.lp-feat{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#0C0C0E}
.lp-feat span{position:relative;overflow:hidden}
.lp-feat img{position:absolute;display:block;max-width:none;height:auto}
.lp-feat .f1{width:842%;left:-340.4%;top:-82.2%}
.lp-feat .f2{width:600%;left:-228.1%;top:-11.7%}
.lp-feat .f3{width:436.4%;left:-150%;top:-98.9%}
.lp-feat .f4{width:800%;left:-400%;top:-237.5%}

/* generated angles drawn as outlines, not faked faces */
.lp-sil{background:radial-gradient(90% 70% at 70% 20%,rgba(242,84,91,.16),transparent 65%),linear-gradient(180deg,#1A1A1F,#121215);display:flex;align-items:flex-end;justify-content:center}
.lp-sil svg{width:92%;height:auto;fill:url(#lpSil);stroke:url(#lpRim);stroke-width:1.2;display:block}
.lp-flip svg{transform:scaleX(-1)}
.lp-turn,.lp-outfit{gap:6%;padding:0 6% 6%;align-items:flex-end}
.lp-turn svg,.lp-outfit svg{width:auto;height:84%;flex:none}
.lp-turn svg:nth-child(3){opacity:.75}
.lp-outfit svg:nth-child(2){fill:#3A3640}

.lp-n{margin:8px 0 0;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-src{margin:3px 0 0;font:400 11px/1.35 var(--mono);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-kd{display:flex;align-items:center;gap:8px;margin:4px 0 0;font:500 11px/1 var(--sans);white-space:nowrap}
.lp-kd .k{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;background:rgba(125,220,171,.13);color:var(--mint)}
.lp-kd .k .i{width:11px;height:11px;stroke-width:2.6}
.lp-kd .k1{display:none}
.lp-kd .d{color:var(--tx3)}

/* pre-play: empty ghost slots */
.lp-pre .lp-t{box-shadow:none;outline:1px dashed var(--line-2);outline-offset:-1px}
.lp-pre .lp-s:not(.on) .lp-ph{opacity:0;transform:scale(.97)}
.lp-pre .lp-s:not(.on) .lp-src{opacity:0}
.lp-pre .lp-s.on .lp-t{outline-color:transparent;box-shadow:0 0 0 1px var(--line-2)}
.lp-src{transition:opacity .3s}
.lp-pre .lp-gen:not(.kept) .lp-kd .k{background:rgba(237,237,240,.07);color:var(--tx2)}
.lp-pre .lp-gen:not(.kept) .lp-kd .k .i{display:none}
.lp-pre .lp-gen:not(.kept) .lp-kd .k1{display:inline}
.lp-pre .lp-gen:not(.kept) .lp-kd .k2{display:none}
.lp-pre .lp-gen:not(.on):not(.mk) .lp-kd{opacity:0}
.lp-kd{transition:opacity .25s}
.lp-kd .k{transition:background-color .25s,color .25s}
/* soft shimmer while a picture is being made; it runs once and stops */
.lp-t::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.10) 45%,rgba(242,84,91,.12) 55%,transparent 80%);background-size:250% 100%;background-position:120% 0}
.lp-s.mk .lp-t::after{opacity:1;animation:lp-sh .9s var(--ease) 1 forwards}
@keyframes lp-sh{from{background-position:120% 0}to{background-position:-60% 0}}

/* facts */
.lp-facts{list-style:none;margin:48px auto 0;padding:0;max-width:1160px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-facts li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--s1)}
.lp-facts .th-ic{flex:none;margin:0}
.lp-facts p{margin:0;font-size:15px;line-height:1.5;color:var(--tx2)}
.lp-facts .status{margin-left:2px;font-size:12px;vertical-align:1px}
.lp-facts .status .i{width:12px;height:12px}
.lp-link{margin:28px 0 0;text-align:center;font-size:15.5px;color:var(--tx3)}
.lp-link a{color:var(--tx);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px;text-decoration-thickness:1.5px}
.lp-link a:hover{color:var(--coral)}

@media (max-width:1100px){
  .lp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  .lp-stage{grid-template-columns:1fr;max-width:640px}
  .lp-arrow svg{transform:rotate(90deg)}
  .lp-photos{grid-template-columns:repeat(4,1fr)}
  .lp-facts{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:640px){
  .lp-in{padding:16px}
  .lp-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 12px 4px;gap:12px 8px}
  .lp-photos{gap:6px}
  .lp-board .win-foot span:last-child{display:none}
  .lp-n{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .lp-ph,.lp-ar-l,.lp-ar-h,.lp-kd,.lp-kd .k,.lp-src{transition:none}
  .lp-s.mk .lp-t::after{animation:none;opacity:0}
}
.lp-gtag{position:absolute;z-index:2;left:6px;top:6px;font:500 10px/1.4 var(--mono);padding:1px 6px;border-radius:5px;background:rgba(12,12,14,.8);border:1px solid rgba(242,84,91,.35);color:#F7A3A7;transition:opacity .3s}
.lp-pre .lp-s:not(.on) .lp-gtag{opacity:0}
.lp-laugh{top:-1%}
@media (prefers-reduced-motion:reduce){.lp-gtag{transition:none}}
.lp-photos img.lp-tight{transform:scale(1.45);transform-origin:50% 22%}
.lp-neutral{width:175%;left:-37.5%;top:-7%}