/* Same face. Any look. (index.html #lookbook, assets/cx-look.js)
   An editorial spread: a magazine cover of one look on the left (the creator's first name as the masthead, the place
   and headline as cover lines) and the issue's contents on the right, nine looks numbered 01-09. Picking a look wipes
   the cover to it. Phones (<=760px): the cover, then the looks as a swipeable strip. Follows the site theme; the serif
   is the system's own Didot or Bodoni where there is one (no font file), Georgia elsewhere. */

.cx-look{
  --cx-ig:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 52%,#962fbf 76%,#4f5bd5);
  --cx-ig-text:linear-gradient(120deg,light-dark(#e0531a,#ffb36b),light-dark(#c8236a,#ff5fa2) 50%,light-dark(#7a35c4,#b57bff));
  --cx-serif:"Didot","Bodoni 72","Bodoni MT","Libre Bodoni",Georgia,"Times New Roman",serif;
  --cx-page:light-dark(oklch(.966 .009 80),oklch(.135 .016 285));
  --cx-rule:var(--ink);
  position:relative;overflow:clip;isolation:isolate;background:var(--cx-page)}
.cx-look::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 50% at 18% 62%,light-dark(oklch(.86 .07 30/.35),oklch(.45 .14 350/.22)),transparent 70%)}

/* ---------- masthead of the section ---------- */
.cx-look-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end;gap:20px clamp(32px,6vw,96px)}
.cx-look h2{margin-top:16px;font-size:clamp(2.6rem,1.1rem + 4.8vw,5.8rem);line-height:.92;letter-spacing:-.048em}
.cx-look h2 em{font:italic 400 1.06em/1 var(--cx-serif);letter-spacing:-.025em;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:var(--cx-ig-text);padding-right:.06em}
.cx-look .lede{max-width:40ch}

.cx-look-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-top:clamp(28px,4vw,56px);
  padding:13px 0;border-top:2px solid var(--cx-rule);border-bottom:1px solid var(--line-strong)}
.cx-look-issue{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cx-look-who{color:var(--ink);transition:opacity .3s}
.cx-look-tabs{display:flex;flex-wrap:wrap;gap:6px clamp(16px,2.6vw,34px)}
.cx-look-tab{position:relative;padding:6px 0;font:600 .76rem/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.cx-look-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease)}
.cx-look-tab:hover,.cx-look-tab[aria-pressed="true"]{color:var(--ink)}
.cx-look-tab[aria-pressed="true"]::after{transform:scaleX(1);transform-origin:left}
.cx-look-tab:focus-visible,.cx-look-item:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}

/* ---------- the spread ---------- */
.cx-look-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,5vw,84px);align-items:start;margin-top:clamp(26px,3.4vw,46px)}

/* the cover */
.cx-look-cover{margin:0;position:sticky;top:calc(var(--hdr) + 56px)}
.cx-look-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--surface-3);container-type:inline-size;touch-action:pan-y;
  box-shadow:0 2px 2px oklch(0 0 0/.08),0 24px 50px -24px oklch(.2 .04 300/.55),0 60px 120px -50px oklch(.2 .04 300/.5)}
.cx-look-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cx-look-img.is-top{z-index:1}
.cx-look-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,oklch(.1 .02 300/.55),transparent 30%,transparent 50%,oklch(.08 .02 300/.78))}
.cx-look-edge{position:absolute;left:0;right:0;top:-1px;z-index:3;height:2px;background:var(--accent);box-shadow:0 0 16px 1px var(--accent);opacity:0;pointer-events:none}
.cx-look-mast{position:absolute;left:0;right:0;top:4.6cqw;z-index:4;text-align:center;color:#fff;pointer-events:none;
  font:400 21cqw/.8 var(--cx-serif);letter-spacing:-.005em;text-transform:uppercase;text-shadow:0 2px 40px oklch(0 0 0/.25);transition:opacity .45s,translate .6s var(--ease)}
.cx-look-dek{position:absolute;left:0;right:0;top:calc(4.6cqw + 19.5cqw);z-index:4;text-align:center;color:oklch(1 0 0/.86);pointer-events:none;
  font-size:max(.56rem,2.05cqw);letter-spacing:.26em;text-transform:uppercase}
.cx-look-dek b{color:#fff}
.cx-look-lines{position:absolute;left:5.6cqw;right:30cqw;bottom:5.6cqw;z-index:4;display:grid;gap:1.6cqw;color:#fff;pointer-events:none;
  transition:opacity .3s,translate .55s var(--ease)}
.cx-look-place{font:italic 400 max(1.6rem,8cqw)/.98 var(--cx-serif);letter-spacing:-.01em;text-wrap:balance}
.cx-look-hl{max-width:30ch;font:600 max(.84rem,3cqw)/1.3 var(--f-text);color:oklch(1 0 0/.88);text-wrap:balance}
.cx-look-me{position:absolute;right:5cqw;bottom:5.6cqw;z-index:4;display:grid;justify-items:center;gap:7px;color:#fff;pointer-events:none;transition:opacity .4s}
.cx-look-me img{width:max(44px,11.5cqw);aspect-ratio:1;border-radius:50%;padding:2.5px;background:var(--cx-ig);object-fit:cover;box-shadow:0 0 0 2px oklch(.1 .02 300/.6) inset}
.cx-look-me .mono{font-size:max(.56rem,1.9cqw);letter-spacing:.04em;color:oklch(1 0 0/.9)}
.cx-look-frame.is-flip .cx-look-lines{opacity:0;translate:0 12px}
.cx-look.is-swap .cx-look-mast{opacity:0;translate:0 -10px}
.cx-look.is-swap .cx-look-me,.cx-look.is-swap .cx-look-who{opacity:0}

/* the contents: nine looks */
.cx-look-kick{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line-strong);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cx-look-list{position:relative}
.cx-look-list li{transition:opacity .35s,translate .45s var(--ease)}
.cx-look-item{--th:clamp(40px,3.6vw,50px);position:relative;display:grid;grid-template-columns:clamp(3.2rem,5vw,4.9rem) var(--th) minmax(0,1fr) 20px;align-items:center;
  gap:clamp(12px,1.5vw,22px);width:100%;padding:clamp(8px,.85vw,12px) 6px clamp(8px,.85vw,12px) 2px;text-align:left;color:var(--ink);
  border-bottom:1px solid var(--line-strong);transition:background .3s}
.cx-look-item:hover{background:color-mix(in oklab,var(--ink) 4%,transparent)}
.cx-look-n{font:700 clamp(2.1rem,1.3rem + 2.1vw,3.5rem)/.86 var(--f-display);font-stretch:75%;letter-spacing:-.035em;font-variant-numeric:lining-nums;
  color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--ink) 55%,transparent);transition:-webkit-text-stroke-color .3s}
.cx-look-item:hover .cx-look-n{-webkit-text-stroke-color:var(--ink)}
.cx-look-item[aria-pressed="true"] .cx-look-n{-webkit-text-stroke-color:transparent;background-image:var(--cx-ig-text);-webkit-background-clip:text;background-clip:text}
.cx-look-th{width:var(--th);height:var(--th);padding:2px;border-radius:50%;background:var(--line-strong);transition:background .3s}
.cx-look-th img{width:100%;height:100%;border-radius:50%;border:2px solid var(--cx-page);object-fit:cover}
.cx-look-item[aria-pressed="true"] .cx-look-th{background:var(--cx-ig)}
.cx-look-t{display:grid;gap:5px;min-width:0;transition:translate .45s var(--ease)}
.cx-look-t b{font:600 clamp(1.02rem,.88rem + .5vw,1.36rem)/1.12 var(--f-display);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-look-pl{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-look-item:hover .cx-look-t,.cx-look-item[aria-pressed="true"] .cx-look-t{translate:6px 0}
.cx-look-go{width:20px;height:20px;background:currentColor;opacity:0;translate:-8px 0;transition:opacity .3s,translate .45s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
.cx-look-item:hover .cx-look-go,.cx-look-item[aria-pressed="true"] .cx-look-go{opacity:1;translate:0 0}
/* the clock: the picked look's rule fills, then the next look comes up */
.cx-look-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.cx-look-prog i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.cx-look.is-live .cx-look-item[aria-pressed="true"] .cx-look-prog i{animation:cx-look-run 5.4s linear both}
.cx-look.is-off .cx-look-prog i,.cx-look.is-held .cx-look-prog i{animation-play-state:paused}
@keyframes cx-look-run{to{transform:scaleX(1)}}

/* switching creators: the contents leave line by line and come back */
.cx-look.is-swap .cx-look-list li{opacity:0;translate:0 8px}
.cx-look-list li:nth-child(2){transition-delay:25ms}.cx-look-list li:nth-child(3){transition-delay:50ms}.cx-look-list li:nth-child(4){transition-delay:75ms}
.cx-look-list li:nth-child(5){transition-delay:100ms}.cx-look-list li:nth-child(6){transition-delay:125ms}.cx-look-list li:nth-child(7){transition-delay:150ms}
.cx-look-list li:nth-child(8){transition-delay:175ms}.cx-look-list li:nth-child(9){transition-delay:200ms}

.cx-look-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(28px,3.6vw,48px)}
.cx-look-foot .btn{margin:0}
.cx-look-cap{font-size:.72rem;color:var(--muted)}

@media (max-width:1023px){
  .cx-look-head{grid-template-columns:minmax(0,1fr)}
  .cx-look-spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cx-look-item{grid-template-columns:2.9rem var(--th) minmax(0,1fr);--th:38px}
  .cx-look-go{display:none}
  .cx-look-n{font-size:2.1rem}
}

/* ---------- phones: the cover, then the looks as a swipeable strip ---------- */
@media (max-width:760px){
  .cx-look-bar{flex-direction:column;align-items:flex-start}
  .cx-look-tabs{gap:6px 20px}
  .cx-look-spread{grid-template-columns:minmax(0,1fr);gap:18px}
  .cx-look-cover{position:static}
  .cx-look-kick{display:none}
  .cx-look-list{display:flex;gap:10px;margin-inline:calc(-1*var(--gutter));padding:2px var(--gutter) 8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .cx-look-list::-webkit-scrollbar{display:none}
  .cx-look-list li{flex:none;scroll-snap-align:start}
  .cx-look-item{--th:34px;width:148px;height:100%;grid-template-columns:auto var(--th);grid-template-areas:"n th" "t t";justify-content:space-between;align-items:start;
    gap:12px 8px;padding:12px;border:1px solid var(--line-strong);border-radius:14px;overflow:hidden}
  .cx-look-n{grid-area:n;font-size:2.2rem}
  .cx-look-th{grid-area:th}
  .cx-look-t{grid-area:t}
  .cx-look-t b{font-size:1rem}
  .cx-look-item:hover .cx-look-t,.cx-look-item[aria-pressed="true"] .cx-look-t{translate:none}
  .cx-look-item[aria-pressed="true"]{border-color:var(--ink)}
  .cx-look-prog{left:12px;right:12px;bottom:0}
  .cx-look-lines{right:24cqw}
  .cx-look-foot{flex-direction:column;align-items:stretch;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cx-look-prog{display:none}}