/* The archive: two ways in, chosen once; challenge cards with photographic covers for the
   original posts and pixel symbols for the Arcade; Puzzle 07's Trial I slides. */

/* modes */
body.theater .archive-page .page-heading .event-label { margin-bottom:22px; }
body.theater .mode-tabs { display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:42px; padding:4px; border:1px solid #333; }
body.theater .mode-tab { display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; color:var(--silver); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; transition:background .35s,color .35s; }
body.theater .mode-tab:hover { color:var(--ink); }
body.theater .mode-tab[aria-current="true"] { background:var(--ink); color:#000; }
body.theater .mode-tab:focus-visible { outline:1px solid #fff; outline-offset:3px; }
body.theater .mode-note { min-height:1.7em; margin:18px 0 40px; color:var(--silver); font-size:14px; line-height:1.7; }

/* challenge cards */
body.theater .challenges { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:40px 26px; margin:0; padding:0; list-style:none; }
body.theater .challenges.is-featured { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.theater .challenge-link { display:flex; flex-direction:column; color:inherit; text-decoration:none; }
body.theater .challenge-link:focus-visible { outline:1px solid #fff; outline-offset:8px; }
body.theater .challenge-cover { position:relative; display:block; aspect-ratio:1; overflow:hidden; border:1px solid #262626; background:#0b0b0b; }
body.theater .cover-photo { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.82) contrast(1.05); transform:scale(1.001); transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s; }
body.theater .challenge-cover.is-web .cover-photo { object-position:50% 38%; }
body.theater .cover-pixel { position:absolute; inset:0; display:none; place-items:center; background:radial-gradient(circle at 50% 46%,#1c1c1c,#090909 72%); }
body.theater .cover-pixel img { width:38%; height:auto; image-rendering:pixelated; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
body.theater .challenges[data-mode="arcade"] .cover-photo { display:none; }
body.theater .challenges[data-mode="arcade"] .cover-pixel { display:grid; }
body.theater .challenge-number { position:absolute; top:14px; left:14px; z-index:1; font-size:10px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 8px rgba(0,0,0,.8); }
body.theater .challenge-rank { position:absolute; right:12px; bottom:12px; z-index:1; display:inline-flex; align-items:center; gap:3px; padding:6px 8px; border-radius:3px; background:#f4f1ea; color:#0b0b0b; font:400 15px/1 var(--display); box-shadow:0 6px 16px rgba(0,0,0,.6); }
body.theater .challenge-rank svg { width:11px; height:12px; }
body.theater .challenge-title { display:flex; justify-content:space-between; gap:12px; margin-top:20px; font:400 22px/1.3 var(--display); letter-spacing:-.02em; }
body.theater .challenge-title::after { content:''; flex:none; width:11px; height:11px; margin-top:.55em; background:currentColor; -webkit-mask:var(--arrow-ne) center/contain no-repeat; mask:var(--arrow-ne) center/contain no-repeat; color:var(--silver); transition:transform .45s cubic-bezier(.2,.7,.2,1),color .35s; }
body.theater .challenge-format { margin-top:6px; color:var(--silver); font-size:13px; }
body.theater .challenge-mode { margin-top:12px; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
body.theater .challenge-mode::before { content:''; display:inline-block; width:6px; height:6px; margin:0 10px 1px 0; border:1px solid currentColor; vertical-align:middle; }
body.theater .challenges[data-mode="arcade"] .challenge-mode::before { background:currentColor; }
body.theater .challenge-link:hover .cover-photo { filter:grayscale(1) brightness(1) contrast(1.05); transform:scale(1.04); }
body.theater .challenge-link:hover .cover-pixel img { transform:scale(1.08); }
body.theater .challenge-link:hover .challenge-title::after { color:var(--ink); transform:translate(3px,-3px); }

/* Puzzle 07 */
body.theater .trial-one { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; align-items:center; padding:64px 0 70px; }
body.theater .trial-one h2,body.theater .trial-doors h2 { margin-top:16px; font:400 clamp(31px,3.6vw,46px)/1.2 var(--display); letter-spacing:-.04em; }
body.theater .trial-one-copy>p:not(.event-label),body.theater .trial-doors>p:not(.event-label) { max-width:46ch; margin-top:18px; color:var(--silver); font-size:15px; line-height:1.85; }
body.theater .trial-one-copy .trial-tip { font-size:13px; color:var(--muted); }
body.theater .slides { max-width:480px; justify-self:center; width:100%; }
body.theater .slide-track { display:flex; gap:16px; margin:0; padding:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; list-style:none; outline:none; }
body.theater .slide-track::-webkit-scrollbar { display:none; }
body.theater .slide-track:focus-visible { outline:1px solid #fff; outline-offset:6px; }
body.theater .slide { flex:0 0 100%; scroll-snap-align:start; }
body.theater .slide a { display:block; }
body.theater .slide img { display:block; width:100%; height:auto; border:1px solid #2a2a2a; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); }
body.theater .slide-controls { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:20px; }
body.theater .slide-step { display:inline-grid; place-items:center; width:48px; height:48px; border:1px solid #555; background:#000; color:var(--ink); font-size:18px; cursor:pointer; transition:border-color .35s,opacity .35s; }
body.theater .slide-step:hover:not(:disabled) { border-color:#fff; }
body.theater .slide-step:disabled { opacity:.3; cursor:default; }
body.theater .slide-count { min-width:52px; text-align:center; font:400 14px/1 var(--display); letter-spacing:.18em; color:var(--silver); font-variant-numeric:tabular-nums; }
body.theater .trial-doors { max-width:680px; padding:64px 0 30px; border-top:1px solid var(--line); }
body.theater .trial-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:30px; }
body.theater .trial-note { margin-top:26px !important; font-size:13px !important; color:var(--muted) !important; }
body.theater .trial-note a { color:var(--silver); }

@media(max-width:900px) {
  body.theater .trial-one { grid-template-columns:1fr; gap:36px; }
  body.theater .slides { justify-self:start; }
}
@media(max-width:700px) {
  body.theater .mode-tabs { display:flex; margin-top:32px; }
  body.theater .mode-tab { flex:1 1 auto; justify-content:center; padding:10px 12px; letter-spacing:.12em; }
  body.theater .challenges { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 14px; }
  body.theater .challenges.is-featured { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-right:-24px; padding-right:24px; }
  body.theater .challenges.is-featured::-webkit-scrollbar { display:none; }
  body.theater .challenges.is-featured>li { scroll-snap-align:start; }
  body.theater .challenge-title { margin-top:14px; font-size:17px; }
  body.theater .challenge-number { top:10px; left:10px; font-size:9px; letter-spacing:.18em; }
  body.theater .challenge-rank { right:8px; bottom:8px; padding:5px 6px; font-size:13px; }
  body.theater .challenge-mode { letter-spacing:.14em; }
  body.theater .trial-one { padding:44px 0 50px; }
  body.theater .trial-one h2,body.theater .trial-doors h2 { font-size:31px; }
}
@media(prefers-reduced-motion:reduce) {
  body.theater .cover-photo,body.theater .cover-pixel img,body.theater .challenge-title::after { transition:none; }
}