/* The Gist: taking part. The player's controls, Guess first, the full-screen view, results, and the Ask page.
   Loaded on idle by interact.js (and linked directly on /ask/). Layout that must be right at first paint is in site.css. */

/* ---------- player ---------- */
.stage { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; border-radius: inherit; }
.stage .vid { cursor: pointer; transition: opacity .35s var(--ease-out); }
.player.on .vid { opacity: 1; }
.player .pic img { transition: opacity .4s var(--ease-out); }
.player.on .pic img { opacity: 0; transition-delay: .2s; }
.player.on .play { transform: none; }
.player .play b { min-width: 3.1em; text-align: left; }

.vc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 6px 4px; background: linear-gradient(transparent, rgb(18 19 17 / .72)); color: var(--cream); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out); pointer-events: none; }
.player.on .stage.awake .vc, .player.on .stage:has(:focus-visible) .vc, .immerse .stage.awake .vc, .immerse .stage:has(:focus-visible) .vc { opacity: 1; transform: none; pointer-events: auto; }
.vc-row { display: flex; align-items: center; gap: 2px; }
.vc-t { flex: 1; padding: 0 4px; font: 800 13px/1 var(--cond); font-stretch: 80%; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / .5); }
.vc-b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--cream); transition: background-color .2s, transform .16s var(--ease-out); }
.vc-b:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .vc-b:hover { background: rgb(254 248 234 / .16); } }
.vc-b svg { width: 22px; height: 22px; }
.vc-b .i-off, .vc-b[aria-pressed="true"] .i-on { display: none; }
.vc-b[aria-pressed="true"] .i-off { display: block; }
.vc :focus-visible, .immerse :focus-visible { outline-color: var(--cream); }

/* the seek rule: a printed line, orange where you have got to */
.vc-seek { -webkit-appearance: none; appearance: none; display: block; width: calc(100% - 16px); height: 24px; margin: 0 8px; background: transparent; cursor: pointer; --p: 0%; }
.vc-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--orange) var(--p), rgb(254 248 234 / .35) var(--p)); }
.vc-seek::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--orange) var(--p), rgb(254 248 234 / .35) var(--p)); }
.vc-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--cream); box-shadow: 0 1px 4px rgb(0 0 0 / .5); }
.vc-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--cream); }

.vc-flash { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: rgb(18 19 17 / .55); color: var(--cream); opacity: 0; pointer-events: none; }
.vc-flash svg { width: 28px; height: 28px; }
.vc-flash.go { animation: flash .6s var(--ease-out); }
@keyframes flash { 0% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }

/* views: a small printed label on the still */
.views { position: absolute; left: 8px; top: 8px; z-index: 4; padding: 5px 8px 4px; border-radius: 2px; background: var(--newsprint); color: var(--ink); font: 900 12px/1 var(--cond); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .5); opacity: 0; transform: translateY(-4px); transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; }
.views.in { opacity: 1; transform: none; }
.player.on .stage:not(.awake) ~ .views { opacity: 0; }
/* inside the speech bubble: clear of the curved corners */
.reel .thumb .views { left: 12.5%; top: 0; margin-top: 12.5%; }
.reel .thumb .vc { padding: 26px 8% 6%; }
/* the small inline bubble on phones: play and full screen only (time and sound are in the full-screen view) */
@media (max-width: 820px) { .reel .thumb .vc { padding-inline: 6%; } .reel .thumb .vc-row { justify-content: space-between; } .reel .thumb .vc-t, .reel .thumb .vc-mute { display: none; } }

/* ---------- I didn't know that ---------- */
.didnt:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .didnt:not([aria-pressed="true"]):hover { background: var(--ink); color: var(--newsprint); } .didnt:not([aria-pressed="true"]):hover .dk-n { background: var(--orange); color: var(--cream); } }
.didnt[aria-pressed="true"] { background: var(--blue); color: var(--cream); box-shadow: inset 0 0 0 2px var(--blue); cursor: default; }
.didnt[aria-pressed="true"] .dk-l .ok { transform: none; opacity: 1; }
.didnt[aria-pressed="true"] .dk-l .go { transform: translateY(-110%); opacity: 0; }
.didnt[aria-pressed="true"] .dk-n { background: var(--cream); color: var(--blue-ink); }
.dk-n.bump { animation: bump .5s var(--ease-pop); }
@keyframes bump { 0% { transform: translateY(40%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Guess first ---------- */
.gwrap { position: absolute; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; background: linear-gradient(rgb(18 19 17 / 0) 10%, rgb(18 19 17 / .6)); border-radius: 3px; }
.reel > .gwrap { left: 5.25%; top: 0; margin-top: 5.25%; width: 89.5%; aspect-ratio: 480 / 852; border-radius: 23% / 12.96%; padding: 8px 3% 10%; }
.gwrap.out { opacity: 0; transition: opacity .25s var(--ease-out); pointer-events: none; }
@media (max-width: 820px) { .reel > .gwrap { display: none; } }
.gcard { position: relative; max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: 14px 12px 6px; border-radius: 3px; background: var(--newsprint); color: var(--ink); box-shadow: 0 1px 1px rgb(0 0 0 / .12), 0 18px 30px -14px rgb(0 0 0 / .7); font-family: var(--sans); animation: slip .5s var(--ease-out) both; }
.gcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background-image: var(--fibre); background-size: 300px; mix-blend-mode: multiply; opacity: .15; }
@keyframes slip { from { transform: translateY(14px); opacity: 0; } }
.gnote { display: block; margin: -6px 0 8px; text-align: right; font: 400 24px/1 var(--hand); color: var(--blue); transform: rotate(-4deg); transform-origin: right; pointer-events: none; }
.gq { font: 900 18px/1.12 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.gopts { display: grid; gap: 6px; margin-top: 10px; }
.g-opt { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 4px; background: var(--cream); box-shadow: inset 0 0 0 2px var(--ink); text-align: left; font: 800 15px/1.2 var(--sans); letter-spacing: -.01em; transition: background-color .2s, color .2s, box-shadow .2s, opacity .3s, transform .16s var(--ease-out); }
.g-opt:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .gcard:not(.done) .g-opt:hover { background: var(--ink); color: var(--newsprint); } }
.g-opt svg { width: 18px; height: 18px; flex: none; margin-left: auto; }
.gcard.done .g-opt { cursor: default; }
.g-opt.right { background: var(--blue); color: var(--cream); box-shadow: inset 0 0 0 2px var(--blue); }
.g-opt.wrong { color: var(--orange-dark); box-shadow: inset 0 0 0 2px var(--orange-dark); text-decoration: line-through; text-decoration-thickness: 2px; }
.g-opt.gone { display: none; }
.gafter { margin-top: 10px; animation: slip .45s var(--ease-out) both; }
.greveal { font: 400 15px/1.4 var(--serif); }
.greveal b { font: 900 15px/1.2 var(--sans); letter-spacing: -.01em; }
.gstat { margin-top: 6px; font: 900 13px/1.2 var(--cond); font-stretch: 80%; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-deep); }
.gstat:empty { display: none; }
.gplay { width: 100%; justify-content: center; text-align: center; line-height: 1.2; padding: 8px 14px; margin-top: 10px; border: 0; cursor: pointer; font-size: 16px; }
.gplay svg { width: 16px; height: 16px; }
.gskip { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; font: 800 14px/1 var(--sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; color: var(--ink-soft); }
.gskip:hover { color: var(--ink); }
.gcard.done .gskip { display: none; }

/* ---------- full-screen vertical view ---------- */
html.immersed { overflow: hidden; }
.immerse { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--cream); overflow: hidden; }
.immerse::backdrop { background: var(--ink); }
.immerse::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; background-image: var(--speck); }
.im-in { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9)); translate: -50% -50%; touch-action: pan-x; }
@media (min-width: 821px) { .im-in { height: calc(100dvh - 40px); width: calc((100dvh - 40px) * 9 / 16); border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .8); } }
@media (max-width: 820px) { .im-in { width: 100vw; height: 100dvh; } }
.immerse .stage { border-radius: 0; background: #000 center / cover no-repeat; }
.immerse .stage .vid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; object-fit: cover; }
.immerse .stage.idle .vid { opacity: 0; }
.immerse .vc { padding-top: 28px; background: linear-gradient(rgb(18 19 17 / 0), rgb(18 19 17 / .4) 45%); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.im-close { position: absolute; z-index: 8; right: calc(10px + env(safe-area-inset-right)); top: calc(10px + env(safe-area-inset-top)); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(18 19 17 / .6); color: var(--cream); transition: transform .16s var(--ease-out), background-color .2s; }
.immerse .vc-x { display: none; }
.im-close:active { transform: scale(.92); }
.im-close svg { width: 20px; height: 20px; }
.im-info { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; justify-items: start; padding: 70px 14px calc(102px + env(safe-area-inset-bottom)); background: linear-gradient(rgb(18 19 17 / 0), rgb(18 19 17 / .5) 50%); pointer-events: none; transition: opacity .3s var(--ease-out); }
.im-info > * { pointer-events: auto; }
.im-title { font: 900 20px/1.05 var(--sans); letter-spacing: -.025em; text-shadow: 0 1px 12px rgb(0 0 0 / .6); max-width: 22ch; text-wrap: balance; }
.im-title span { display: block; margin-top: 4px; font: 600 14px/1.3 var(--sans); letter-spacing: 0; opacity: .85; }
.im-info .didnt { background: rgb(18 19 17 / .45); color: var(--cream); box-shadow: inset 0 0 0 2px var(--cream); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.im-info .didnt .dk-n { background: var(--cream); color: var(--ink); }
.im-info .didnt[aria-pressed="true"] { background: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.immerse.guessing .im-info { opacity: 0; visibility: hidden; }
.immerse .gwrap { z-index: 7; inset: 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); background: rgb(18 19 17 / .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); justify-content: center; align-items: center; }
.immerse .gcard { width: min(100%, 380px); padding: 18px 16px 8px; }
.immerse .gq { font-size: 22px; }
.immerse .g-opt { min-height: 50px; font-size: 16px; }
.immerse .greveal { font-size: 16px; }

/* ---------- Your take: results ---------- */
.take-opt { transition: box-shadow .3s, transform .16s var(--ease-out); }
.take:not(.done) .take-opt:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .take:not(.done) .take-opt:hover { box-shadow: inset 0 0 0 2px var(--ink), 0 8px 16px -10px rgb(40 15 0 / .6); } }
.take-bar { position: absolute; inset: 0; z-index: -1; background: rgb(30 108 173 / .16); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
.take.done .take-bar { transform: scaleX(var(--p, 0)); }
.take.done .take-opt { cursor: default; box-shadow: inset 0 0 0 1px rgb(18 19 17 / .35); }
.take.done .take-opt.mine { box-shadow: inset 0 0 0 2px var(--ink); }
.take-opt.mine .take-bar { background: var(--orange-wash); }
.take-p { font: 900 20px/1 var(--cond); font-stretch: 72%; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s var(--ease-out) .3s; }
.take.done .take-p { opacity: 1; }
.take.nocount .take-p { display: none; }
.take-opt .tick { width: 18px; height: 18px; flex: none; color: var(--orange-dark); }

/* ---------- Ask Huw ---------- */
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 900px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } }
/* Get in touch: the suggest form beside the work card, then a small most wanted list */
.git-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: stretch; }
@media (max-width: 900px) { .git-grid { grid-template-columns: minmax(0, 1fr); } }
.git-grid > * { min-width: 0; scroll-margin-top: 110px; }
.git-work { display: flex; flex-direction: column; padding: clamp(22px, 3.4vw, 40px); border-radius: 14px; }
.ask-board.small { border-radius: 14px; }   /* same padding as the form card beside it, so the two headings line up */
.git-work h2 { font: 900 clamp(28px, 3vw, 40px)/.96 var(--sans); letter-spacing: -.04em; text-wrap: balance; margin: 0; }
.git-work .git-lede { margin-top: 10px; color: var(--ink-soft); font: 500 16px/1.5 var(--sans); max-width: 46ch; }
.git-ways { display: grid; gap: 0; margin-top: 20px; border-top: 3px solid var(--ink); }
.git-ways > div { padding: 14px 0; border-bottom: 1px solid rgb(18 19 17 / .3); }
.git-ways h3 { margin: 0 0 4px; font: 900 19px/1.1 var(--sans); letter-spacing: -.02em; }
.git-ways p { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
.git-mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: auto; padding-top: 22px; }
.git-mail p { margin: 0; flex: 1 1 22ch; font: 500 15px/1.5 var(--sans); color: var(--ink-soft); }
.git-sec { padding-bottom: clamp(24px, 3vw, 40px); }
.git-board-sec { padding-top: 0; }
.git-board-sec .shell { scroll-margin-top: 110px; }
.ask-board.small { padding-block: clamp(16px, 2vw, 24px); }
.ask-board.small h2 { font-size: clamp(22px, 2vw, 28px); }
.ask-board.small > p { margin-top: 6px; font-size: 14px; }
.ask-board.small .board { min-height: 0; margin-top: 12px; border-top-width: 2px; }
@media (min-width: 760px) { .ask-board.small .board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); } }
.ask-board.small .board li { padding: 8px 0; }
.ask-board.small .board .ask-t { font-size: 15px; }
.ask-board.small .board-sk { height: 48px; }
.ask-card h2, .ask-board h2 { font: 900 clamp(28px, 3vw, 40px)/.96 var(--sans); letter-spacing: -.04em; text-wrap: balance; margin: 0; }
.ask-card > p, .ask-board > p { margin-top: 10px; color: var(--ink-soft); font: 500 16px/1.5 var(--sans); max-width: 46ch; }
.askf { position: relative; display: grid; gap: 16px; margin-top: 20px; }
.askf label, .askf .lbl { display: block; margin-bottom: 6px; font: 800 15px/1.3 var(--sans); }
.askf .opt { font-weight: 600; color: var(--ink-fade); }
.askf textarea, .askf input[type="text"], .askf input[type="email"] { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px rgb(18 19 17 / .16); font: 600 17px/1.4 var(--sans); color: var(--ink); transition: box-shadow .25s var(--ease-out); }
.askf textarea { resize: vertical; min-height: 96px; }
.askf textarea:focus, .askf input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgb(30 108 173 / .18); }
.askf ::placeholder { color: #77725f; }
.askf [aria-invalid="true"], .askf [aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--orange-dark), 0 0 0 4px rgb(158 44 16 / .14); }
.ask-count { display: block; margin-top: 6px; text-align: right; font: 800 13px/1 var(--cond); font-stretch: 80%; letter-spacing: .04em; color: var(--ink-fade); font-variant-numeric: tabular-nums; }
.ask-count.over { color: var(--orange-dark); }
.ask-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .ask-two { grid-template-columns: minmax(0, 1fr); } }
.tickbox { display: flex !important; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 4px; font: 600 15px/1.4 var(--sans) !important; cursor: pointer; }
.tickbox input { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.tickbox input::after { content: ""; width: 12px; height: 7px; border: solid var(--cream); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg) scale(.4); opacity: 0; transition: transform .25s var(--ease-pop), opacity .15s; }
.tickbox input:checked { background: var(--ink); }
.tickbox input:checked::after { transform: translateY(-2px) rotate(-45deg); opacity: 1; }
.tickbox input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.askf .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.askf .send { justify-self: start; display: inline-grid; overflow: hidden; border: 0; cursor: pointer; }
.askf .send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .4s var(--ease-out), opacity .25s; }
.askf .send .busy { transform: translateY(120%); opacity: 0; }
.askf.loading .send { cursor: progress; }
.askf.loading .send .t { transform: translateY(-120%); opacity: 0; }
.askf.loading .send .busy { transform: none; opacity: 1; }
.askf .msg { min-height: 1.4em; font: 700 15px/1.4 var(--sans); color: var(--orange-dark); }
.ask-done { display: grid; gap: 8px; margin-top: 20px; animation: slip .5s var(--ease-out) both; }
.ask-done[hidden] { display: none; }
.ask-done b { font: 900 26px/1.1 var(--sans); letter-spacing: -.03em; }
.ask-done svg { width: 34px; height: 34px; color: var(--blue); }
.ask-done p { color: var(--ink-soft); }
.ask-done button { justify-self: start; min-height: 44px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ask-card.sent .askf { display: none; }
/* without JavaScript: the form post comes back to /ask/?sent=1#ask-sent (or #ask-invalid, #ask-limited, #ask-error) */
.ask-card > .ask-flag { display: none; margin-top: 16px; scroll-margin-top: 140px; font: 700 15px/1.4 var(--sans); color: var(--orange-dark); }
.ask-card > .ask-flag.ok { font-weight: 500; color: var(--ink-soft); }
.ask-flag.ok b { display: block; margin-bottom: 4px; font: 900 26px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
html:not(.js) .ask-card > .ask-flag:target { display: block; outline: none; }
html:not(.js) .ask-card:has(#ask-sent:target) .askf { display: none; }
html:not(.js) .board-sk { display: none; }
html:not(.js) .board { min-height: 0; }

.board { list-style: none; margin-top: 18px; border-top: 3px solid var(--ink); min-height: 300px; }
.board li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgb(18 19 17 / .3); }
.board li.in { animation: slip .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.board .ask-t { flex: 1; min-width: 0; font: 800 17px/1.3 var(--sans); letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.ask-up { flex: none; display: grid; justify-items: center; align-content: center; gap: 2px; width: 56px; min-height: 56px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ink); font: 900 18px/1 var(--cond); font-stretch: 75%; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s, transform .16s var(--ease-out); }
.ask-up svg { width: 16px; height: 16px; transition: transform .35s var(--ease-pop); }
.ask-up:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .ask-up:not([aria-pressed="true"]):not([aria-disabled="true"]):hover { background: var(--ink); color: var(--newsprint); } .ask-up:not([aria-pressed="true"]):hover svg { transform: translateY(-2px); } }
.ask-up[aria-pressed="true"] { background: var(--orange); color: var(--cream); box-shadow: inset 0 0 0 2px var(--orange); }
.ask-up[aria-disabled="true"] { opacity: .55; box-shadow: inset 0 0 0 2px rgb(18 19 17 / .4); cursor: default; }
.ask-up b.bump { animation: bump .45s var(--ease-pop); }
.made { flex: none; padding: 6px 8px 5px; border: 2px solid var(--blue); border-radius: 3px; color: var(--blue); font: 900 13px/1 var(--cond); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-4deg); }
.board-empty { padding: 18px 0; color: var(--ink-soft); font-weight: 600; }
.board-sk { height: 64px; border-bottom: 1px solid rgb(18 19 17 / .15); background: linear-gradient(90deg, transparent 72px, rgb(18 19 17 / .07) 72px, rgb(18 19 17 / .07) 70%, transparent 70%) center / 100% 18px no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .gcard, .gafter, .ask-done, .board li.in, .dk-n.bump, .ask-up b.bump, .vc-flash.go { animation: none; }
  .take-bar { transition: none; }
  .dk-l > span, .vc, .views { transition: opacity .2s; transform: none !important; }
  .didnt[aria-pressed="true"] .dk-l .go { transform: none; }
}

/* A deliberate reveal, with the question below the image rather than over it. */
.guess-reveal { width:100%; min-height:44px; margin:12px 0; padding:12px 18px; border:1px solid var(--blue); border-radius:8px; background:var(--blue); color:var(--cream); font:800 16px/1.2 var(--sans); cursor:pointer; }
.reel > .gwrap { position:relative; left:auto; top:auto; width:100%; aspect-ratio:auto; margin:14px 0; padding:0; background:none; border-radius:10px; }
.reel > .gwrap .gcard { padding:20px 18px 10px; border:1px solid rgb(18 19 17 / .2); border-radius:10px; box-shadow:none; }
.reel > .gwrap .gnote { margin:0 0 12px; text-align:left; transform:none; font:800 12px/1.2 var(--sans); text-transform:uppercase; letter-spacing:.08em; }
.reel > .gwrap .g-opt { box-shadow:none; border:1px solid rgb(18 19 17 / .25); border-radius:6px; font-weight:600; padding:11px 12px; }
.reel.question-open .thumb .play { opacity:0; visibility:hidden; }
.guess-reveal:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }

/* Cinematic lightbox: the article remains visible behind the dimmed glass. */
.immerse { background:transparent; }
.immerse::after { display:none; }
.immerse::backdrop { background:rgb(9 14 21 / .82); backdrop-filter:blur(5px); animation:lights-down .5s ease both; }
.immerse.closing::backdrop { animation:lights-up .2s ease both; }
@keyframes lights-down { from {background:transparent;backdrop-filter:blur(0)} to {background:rgb(9 14 21 / .82);backdrop-filter:blur(5px)} }
@keyframes lights-up { to {background:transparent;backdrop-filter:blur(0)} }
.immerse .im-in { width:min(calc(100vw - 40px),calc((100dvh - 130px)*9/16)); height:min(calc(100dvh - 130px),calc((100vw - 40px)*16/9)); border:7px solid var(--blue); border-radius:28px; overflow:visible; box-shadow:0 0 75px rgb(30 108 173 / .35),0 30px 90px rgb(0 0 0 / .55); }
.immerse .im-slot, .immerse .stage { border-radius:20px; overflow:hidden; }
.immerse .stage .vid { object-fit:contain; }
.immerse .im-info { display:none; }
.immerse .im-close { top:10px; right:10px; }
.im-next { position:absolute; top:calc(100% + 22px); left:50%; translate:-50% 0; min-height:44px; white-space:nowrap; padding:10px 20px; border:1px solid rgb(254 248 234 / .3); border-radius:30px; background:rgb(18 19 17 / .5); color:var(--cream); font:700 15px/1.2 var(--sans); cursor:pointer; }
.im-next span { margin-left:16px; }
.im-next:hover { background:var(--blue); }
.im-next:focus-visible,.im-close:focus-visible { outline:3px solid var(--cream); outline-offset:4px; }
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:page-away .3s ease both; }
::view-transition-new(root) { animation:page-arrive .4s ease both; }
@keyframes page-away { to {opacity:0} }
@keyframes page-arrive { from {opacity:0} }
@media(prefers-reduced-motion:reduce) { .immerse::backdrop,.immerse.closing::backdrop,::view-transition-old(root),::view-transition-new(root) { animation:none; } }

/* Keep the invitation and question inside the preview, with one playback action. */
.reel .thumb > .guess-reveal {position:absolute;z-index:6;left:10%;bottom:65px;width:80%;margin:0;min-height:38px;padding:9px 12px;background:var(--cream);color:var(--ink);font-size:14px;box-shadow:0 4px 20px #0002;}
.reel .thumb > .gwrap {position:absolute;z-index:7;inset:auto 7% 48px;width:86%;aspect-ratio:auto;padding:0;background:none;}
.reel .thumb .gcard {padding:14px;border-radius:12px;box-shadow:0 8px 30px #0003;max-height:calc(100% - 20px);}
.reel .thumb .gnote {font:800 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;transform:none;text-align:left;margin:0 0 8px;}
.reel .thumb .gq {font-size:17px;line-height:1.15;margin-bottom:10px;}
.reel .thumb .gopts {gap:6px;}
.reel .thumb .g-opt {padding:8px;font-size:13px;line-height:1.2;border-radius:5px;box-shadow:inset 0 0 0 1px #12131155;}
.reel .thumb .gskip {font-size:13px;margin-top:9px;padding:5px;}
.reel .thumb .greveal {font-size:13px;}
.reel .thumb .gstat {font-size:11px;}
.reel.question-open .thumb .play {visibility:hidden;opacity:0;}

/* The quiz becomes the bubble's interior, rather than a floating paper slip. */
.reel .thumb > .gwrap {
  inset:0 auto auto 0;
  width:100%;
  height:auto;
  aspect-ratio:111.7 / 189.2;
  padding:5.73%;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:26% / 15.3%;
}
.reel .thumb > .gwrap .gcard {
  width:100%; height:100%; max-height:none;
  box-sizing:border-box;
  border-radius:23% / 13%;
  padding:clamp(14px,2vw,24px);
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:none;
  overflow:auto;
}
.reel .thumb > .gwrap .gskip {margin-top:auto;padding-top:12px;}
.reel .thumb > .gwrap .gnote {margin-bottom:12px;}

.vc-b {flex:0 0 40px;width:40px;min-width:40px;height:40px;aspect-ratio:1;padding:0;}
.immerse .im-close {top:-22px;right:-22px;width:44px;height:44px;background:rgb(18 19 17 / .9);border:2px solid var(--cream);}
@media(max-width:480px) {.immerse .im-in {max-width:calc(100vw - 64px);}}

.reel .thumb > .guess-reveal {bottom:74px;width:64%;left:18%;border-radius:24px;}
.guess-nudge {position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;display:flex;gap:7px;align-items:center;color:var(--cream);font:italic 18px/1 var(--serif);text-shadow:0 1px 5px #000;pointer-events:none;}
.guess-nudge > span {display:inline-block;font:26px/1 var(--sans);animation:guess-point 1.8s ease-in-out infinite;}
@keyframes guess-point {0%,100% {transform:translateY(-3px)} 50% {transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce) {.guess-nudge > span {animation:none;}}
.reel .thumb.on > .guess-reveal {display:none;}

/* The alternative sits below the Watch pill, outside the video. */
@media(min-width:901px) {
 .article .lead figure.reel {padding-bottom:68px;}
 .reel .thumb > .guess-reveal {top:calc(100% + 24px);bottom:auto;left:auto;right:-24px;width:auto;min-width:132px;padding:10px 20px;}
 .guess-nudge {bottom:calc(100% + 6px);left:65%;color:var(--ink);text-shadow:none;}
 .guess-nudge > span {transform:rotate(-15deg);}
 .reel.question-open {padding-bottom:68px;}
}

.immerse .stage:has(video) {background-image:none !important;background-color:var(--ink);}
.immerse .im-in {width:min(calc(100vw - 64px),calc((100dvh - 144px)*480/852 + 14px));height:auto;aspect-ratio:480/852;}
.immerse.closing::backdrop {animation-duration:.52s;}
@media(max-width:900px) {
 .reel .thumb:has(> .guess-reveal) {margin-bottom:70px;}
 .reel .thumb > .guess-reveal {top:calc(100% + 24px);bottom:auto;left:auto;right:0;width:auto;min-width:120px;}
 .guess-nudge {color:var(--ink);text-shadow:none;}
}
.immerse .im-in {box-sizing:content-box;width:min(calc(100vw - 78px),calc((100dvh - 144px)*480/852));}

/* Answer feedback keeps only the correct option and the playback action. */
.gcard.done .gstat {display:none;}
.reel .thumb > .gwrap .gcard.done {justify-content:flex-start;padding-top:22px;padding-bottom:22px;}
.reel .thumb .gcard.done .gnote {display:none;}
.reel .thumb .gcard.done .gq {font-size:15px;line-height:1.2;margin-bottom:12px;}
.reel .thumb .gcard.done .gopts {flex-shrink:0;}
.reel .thumb .gcard.done .greveal {font-size:13px;line-height:1.35;margin:0 0 12px;}
.reel .thumb .gcard.done .gafter {margin-top:12px;}
.reel .thumb .gcard.done .gplay {min-height:40px;padding:10px 14px;font-size:14px;}
.gcard .g-opt.wrong {overflow:hidden;}

/* watching: the room dims slowly from the top left around a playing video, with a soft glow behind the player */
.watch-veil { position: fixed; inset: 0; z-index: 85; pointer-events: none; background: rgb(14 9 6 / .64); opacity: 0;
  -webkit-mask-image: linear-gradient(135deg, #000 0 40%, transparent 60%); mask-image: linear-gradient(135deg, #000 0 40%, transparent 60%);
  -webkit-mask-size: 260% 260%; mask-size: 260% 260%; -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  transition: -webkit-mask-position 24s cubic-bezier(.45, 0, .25, 1), mask-position 24s cubic-bezier(.45, 0, .25, 1), opacity 6s linear; }
.watch-glow { position: fixed; z-index: 86; pointer-events: none; opacity: 0;
  box-shadow: 0 0 46px 6px rgb(238 73 34 / .42), 0 0 120px 34px rgb(254 248 234 / .12); transition: opacity 14s 8s ease-in-out; }
.watching .watch-veil { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; }
.watching .watch-glow { opacity: 1; }
.watch-undo .watch-veil { transition: -webkit-mask-position 1.9s cubic-bezier(.4, 0, .2, 1), mask-position 1.9s cubic-bezier(.4, 0, .2, 1), opacity 1.2s .7s ease-in; }   /* back out to the top left, then gone */
.watch-undo .watch-glow { transition: opacity .7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .watch-veil { -webkit-mask-image: none; mask-image: none; transition: opacity 12s linear; }
  .watch-glow { transition: opacity 12s linear; }
}

/* work enquiry (Get in touch) */
.enqf { margin-top: 18px; }
.enqf[hidden] { display: none; }
.enq-select { position: relative; display: block; }
.enq-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; translate: 0 -70%; rotate: 45deg; pointer-events: none; }
.enqf select { display: block; width: 100%; min-height: 50px; padding: 12px 44px 12px 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px rgb(18 19 17 / .14); font: 600 16px var(--sans); color: var(--ink); appearance: none; cursor: pointer; }
.enqf select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgb(30 108 173 / .18); }
.enq-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.enq-foot p { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--ink-soft); }
.enq-done { display: grid; gap: 6px; margin-top: 20px; padding: 20px 22px; border-radius: 12px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--blue); }
.enq-done[hidden] { display: none; }
.enq-done b { font: 900 24px/1.1 var(--sans); letter-spacing: -.03em; }
.enq-done span { font-size: 16px; color: var(--ink-soft); }
.enq-done:focus { outline: none; }