/* FASHION: the special section (Round 17). One variant, a: the quick fire
   interview. The guest answers four "which of them" questions by tapping a
   name; the photographer's camera flashes on every answer, the page turns, and
   the answers end as the cover lines of the guest's own issue. One screen at
   390x664; the answers travel with the RSVP. */
.fq{padding-block:30px 70px;overflow:hidden;background:radial-gradient(70% 46% at 50% 30%,color-mix(in srgb,var(--c3) 30%,transparent),transparent 70%),var(--bg)}
.fq .hx{font-size:min(calc(50px*var(--ds)),12vw)}
.fq-sub{margin:6px auto 0;font-weight:500;font-size:17px;line-height:1.45;max-width:24em;opacity:.85}
.fq-st{position:relative;max-width:360px;margin:16px auto 0;perspective:1200px}
.fq-card{position:relative;padding:16px 16px 18px;border-radius:6px;background:var(--card);color:var(--dk);rotate:-1.2deg;transform-origin:50% 50%;
  box-shadow:0 26px 40px -24px rgba(60,20,30,.55),0 2px 5px rgba(60,20,30,.12)}
html[data-palette="c"] .fq-card{color:var(--ink)}
.fq-card::before{content:"";position:absolute;top:-9px;left:50%;width:74px;height:20px;margin-left:-37px;background:color-mix(in srgb,var(--c2) 72%,transparent);rotate:3deg}
.fq-top{display:flex;align-items:center;justify-content:center;gap:10px;font-size:10.5px;line-height:1}
.fq-k{color:var(--accent)}
.fq-n{display:none}
.fq-q{display:flex;align-items:center;justify-content:center;min-height:2.3em;margin:12px 4px 0;font-family:var(--f-disp);font-weight:var(--dw);font-size:calc(29px*var(--ds));line-height:1.12;text-wrap:balance}
.fq-os{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.fq-o{position:relative;min-height:66px;padding:10px 8px;border:0;border-radius:18px;background:var(--accent);color:var(--on-acc);font-family:var(--f-disp);font-weight:var(--dw);font-size:calc(24px*var(--ds));line-height:1.05;cursor:pointer;
  box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 58%,#000);-webkit-tap-highlight-color:transparent;transition:transform .25s var(--e-out),box-shadow .25s var(--e-out)}
.fq-o+.fq-o{background:var(--c3);color:var(--dk);box-shadow:0 5px 0 color-mix(in srgb,var(--c3) 55%,#000)}
html[data-palette="c"] .fq-o+.fq-o{color:#3d0f2b}
.fq-o:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 58%,#000)}
.fq-o+.fq-o:active{box-shadow:0 1px 0 color-mix(in srgb,var(--c3) 55%,#000)}
.fq-o span{position:relative;z-index:1;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-o[disabled]{cursor:default}
/* the marker ring the guest's answer gets circled with */
.fq-o svg{position:absolute;left:-10px;top:-9px;width:calc(100% + 20px);height:calc(100% + 18px);overflow:visible;pointer-events:none;z-index:2}
.fq-o svg path{fill:none;stroke:var(--dk);stroke-width:3;stroke-linecap:round;opacity:0}
html[data-palette="c"] .fq-o svg path{stroke:#fff3e6}
.fq-cam{position:absolute;top:-30px;inset-inline-end:-14px;z-index:3;width:74px;rotate:12deg;pointer-events:none}
html[dir="rtl"] .fq-cam{rotate:-12deg}
.fq-cam img{display:block;width:100%;height:auto}
.fq-cam i{position:absolute;left:42%;top:44%;width:56px;height:56px;margin:-28px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,250,236,.75) 35%,transparent);opacity:0}
.fq-fl{position:absolute;inset:0;z-index:2;border-radius:6px;background:radial-gradient(80% 70% at 70% 20%,#fff,rgba(255,252,244,.6));opacity:0;pointer-events:none}
/* the four answers collect as small cover lines under the card */
.fq-tr{display:flex;justify-content:center;gap:8px;margin-top:16px;min-height:30px}
.fq-tr i{display:grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:99px;border:1.5px dashed color-mix(in srgb,var(--ink) 30%,transparent);font:700 14px/1 var(--f-body);font-style:normal;color:var(--dk)}
.fq-tr i.on{border:0;background:var(--c2);box-shadow:0 4px 8px -5px rgba(0,0,0,.4)}
html[data-palette="c"] .fq-tr i.on{color:#3d0f2b}
/* the result: the guest's issue, four cover lines */
.fq-res{display:none}
.fq.done .fq-play,.fq.done .fq-tr{display:none}
.fq.done .fq-res{display:block}
.fq-res h3{margin:6px 0 0;font-family:var(--f-it);font-style:italic;font-weight:800;font-size:28px;line-height:1.1;color:var(--accent)}
.fq-res ol{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fq-res li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 6px;border-radius:10px;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.fq-res li small{font-size:13px;font-weight:500;line-height:1.3;opacity:.82;text-wrap:balance}
.fq-res li b{font-family:var(--f-disp);font-weight:var(--dw);font-size:calc(22px*var(--ds));line-height:1.1}
.fq-note{margin:12px auto 0;text-wrap:balance;max-width:26em;font-size:15px;line-height:1.45;opacity:.8}
.fq-again{display:inline-block;margin-top:6px;padding:8px 6px;border:0;background:none;font:600 15px/1.2 var(--f-body);color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fq-again[hidden]{display:none}
@media (min-width:900px){.fq-st{max-width:400px}}
html:lang(ru) .fq-sub{font-size:16px}
html:lang(ru) .fq-res li small{font-size:12.5px}