/* Risk HQ storyboard. The way of drawing comes from _template.html (PLAYBOOK step 2c); the colours, the face and the
   parts below come from the brief (docs/design/risk-hq-site.md): their navy, their amber, Montserrat, square corners,
   the slash. Inside a frame every size is written in real pixels of that screen: --s on a text, or N * var(--u). */
:root {
  --navy: #222b53; --navy-deep: #1a2142; --amber: #faba00; --white: #ffffff; --tint: #f1f2f6;
  --navy-line: #3a4470; --muted: #c9cde0; --muted-dark: #5b6286; --scrim: rgba(26, 33, 66, 0.82);
  --ground: var(--navy); --ink: var(--white); --accent: var(--amber);
  --pic: #cfd2dc; --pic-dark: #3a4064; --pic-ink: #2c2c2a; --pic-ink-dark: #f2f2ee; --page: #e9e9e6; --note: #2c2c2a;
  --line-light: #d5d8e4; --amber-wash: rgba(250, 186, 0, 0.16);
  --navy-clear: rgba(34, 43, 83, 0); --glass: rgba(255, 255, 255, 0.05); --glass-line: rgba(255, 255, 255, 0.14);
  --card-deep: rgba(26, 33, 66, 0.92); --shade: rgba(10, 13, 32, 0.55); --leader: rgba(255, 255, 255, 0.3);
  --navy-lift: rgba(64, 76, 128, 0.5);
  --display: 'Montserrat', system-ui, sans-serif; --text: 'Montserrat', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #1b1b1a; --note: #d8d8d4; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--note); font: 16px/1.5 system-ui, sans-serif; }
.wrap { max-width: 1500px; margin: 0 auto; padding: 32px 16px 80px; }
h1.doc { font-weight: 500; font-size: 40px; margin: 0 0 8px; }
.lede { max-width: 80ch; margin: 0 0 16px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.toc a { color: inherit; }
h2.page { font-weight: 500; font-size: 28px; margin: 64px 0 8px; border-top: 1px solid currentColor; padding-top: 16px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.24fr); gap: 24px; align-items: start; margin: 28px 0 8px; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; } .row .p { max-width: 320px; } }
.num { font: 500 14px/1 ui-monospace, monospace; margin: 0 0 6px; }
.moves { margin: 10px 0 0; max-width: 100ch; font-size: 15px; }
.moves b { font-weight: 600; }
.moves .play-btn { font: inherit; margin-left: 8px; padding: 2px 10px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; }

/* A frame: 1920x1080 or 390x844, scaled to the page. --u is one real pixel of that screen. */
.d, .p { position: relative; overflow: hidden; background: var(--ground); color: var(--ink); font-family: var(--text); container-type: inline-size; }
.d { aspect-ratio: 1920 / 1080; }
.p { aspect-ratio: 390 / 844; border-radius: 10px; }
.d *, .p * { --u: calc(1cqw / 19.2); }
.p * { --u: calc(1cqw / 3.9); }
.t { font-size: calc(var(--s) * var(--u)); line-height: 1.5; margin: 0; }
.abs { position: absolute; }
.disp, .h { font-family: var(--display); }
.h { font-weight: 500; text-transform: uppercase; line-height: 1.04; letter-spacing: -0.005em; }
.amber { color: var(--amber); }
.navy { color: var(--navy); }
.on-light { color: var(--navy); }
.dim { color: var(--muted); }
.dim-dark { color: var(--muted-dark); }
.b5 { font-weight: 500; } .b6 { font-weight: 600; }
.caps { text-transform: uppercase; letter-spacing: 0.12em; }
.fill { position: absolute; inset: 0; }
.bg-navy { background: var(--navy); } .bg-deep { background: var(--navy-deep); }
.bg-white { background: var(--white); } .bg-tint { background: var(--tint); } .bg-amber { background: var(--amber); }
.on-light .bg-navy, .on-light .bg-deep { color: var(--white); }

/* Pictures: their own photographs, or a grey box named by its subject. */
.pic { position: absolute; overflow: hidden; background: var(--pic); display: flex; align-items: flex-end; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pic.dark { background: var(--pic-dark); color: var(--pic-ink-dark); }
.pic i { position: relative; font-style: normal; font-family: ui-monospace, monospace; opacity: .85; padding: 0.6em 0.8em; font-size: calc(15 * var(--u)); color: var(--pic-ink); }
.pic.dark i { color: var(--pic-ink-dark); }
.p .pic i { font-size: calc(11 * var(--u)); }
.logo { position: absolute; display: block; }
.logo img { height: 100%; width: auto; display: block; }
svg.over { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The header: logo left and linked home, the links, the number and the one action at the right. */
.hdr { position: absolute; left: 0; top: 0; width: 100%; display: flex; align-items: center; background: var(--navy); color: var(--white); z-index: 5; }
.d .hdr { height: calc(96 * var(--u)); padding: 0 calc(96 * var(--u)); gap: calc(40 * var(--u)); }
.p .hdr { height: calc(64 * var(--u)); padding: 0 calc(20 * var(--u)); justify-content: space-between; }
.hdr.clear { background: transparent; }
.hdr .lg { display: block; }
.d .hdr .lg { height: calc(52 * var(--u)); } .p .hdr .lg { height: calc(34 * var(--u)); }
.hdr .lg img { height: 100%; width: auto; display: block; }
.hdr nav { display: flex; gap: calc(30 * var(--u)); margin-left: auto; font-size: calc(16 * var(--u)); font-weight: 500; }
.hdr nav .on { color: var(--amber); box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--amber); padding-bottom: calc(6 * var(--u)); }
.hdr .tel { font-size: calc(16 * var(--u)); font-weight: 500; white-space: nowrap; }
.menu-btn { width: calc(44 * var(--u)); height: calc(44 * var(--u)); display: grid; place-items: center; border: calc(1.5 * var(--u)) solid var(--white); }
.menu-btn span { display: block; width: calc(20 * var(--u)); height: calc(2 * var(--u)); background: var(--white); box-shadow: 0 calc(-6 * var(--u)) 0 var(--white), 0 calc(6 * var(--u)) 0 var(--white); }

/* Buttons: square, as theirs are. Amber is the one filled button. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); background: var(--amber); color: var(--navy); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.d .btn { font-size: calc(15 * var(--u)); height: calc(56 * var(--u)); padding: 0 calc(28 * var(--u)); }
.p .btn { font-size: calc(14 * var(--u)); height: calc(48 * var(--u)); padding: 0 calc(18 * var(--u)); }
.btn.line { background: transparent; color: var(--white); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--white); }
.btn.line.navy { color: var(--navy); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--navy); }
.btn.sm { height: calc(44 * var(--u)); font-size: calc(13 * var(--u)); }
.foot-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(64 * var(--u)); display: flex; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); background: var(--navy-deep); z-index: 6; }
.foot-bar .btn { flex: 1; height: 100%; }
.foot-bar .btn.line { flex: 0 0 34%; }

/* The slash: before a short label, as their site writes "/ Our partners", and as the line device. */
.lab { font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.lab::before { content: "/ "; color: var(--amber); }
.slash { position: absolute; background: var(--amber); transform-origin: center; transform: rotate(30deg); }
.sq { display: inline-block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--amber); margin-right: calc(12 * var(--u)); }

/* Choice tiles, fields and cards. */
.tile { position: absolute; display: flex; align-items: center; gap: calc(16 * var(--u)); padding: 0 calc(24 * var(--u)); border: calc(1.5 * var(--u)) solid var(--navy-line); background: var(--navy-deep); font-weight: 500; }
.tile.on { border-color: var(--amber); box-shadow: inset calc(6 * var(--u)) 0 0 var(--amber); }
.tile.light { background: var(--white); border-color: var(--line-light); color: var(--navy); }
.tile.light.on { border-color: var(--navy); }
.field { position: absolute; border-bottom: calc(1.5 * var(--u)) solid var(--muted-dark); }
.field.light { border-color: var(--navy-line); }
.field span { position: absolute; left: 0; top: 0; }
.field b { position: absolute; left: 0; bottom: calc(10 * var(--u)); font-weight: 400; }
.card { position: absolute; background: var(--white); color: var(--navy); }
.card.deep { background: var(--navy-deep); color: var(--white); }
.rule-amber { position: absolute; background: var(--amber); }
.chip { display: inline-flex; align-items: center; height: calc(40 * var(--u)); padding: 0 calc(18 * var(--u)); border: calc(1.5 * var(--u)) solid currentColor; margin: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0; font-weight: 500; }
.chip.on { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.d .tile { font-size: calc(20 * var(--u)); line-height: 1.3; }
.p .tile { font-size: calc(15 * var(--u)); line-height: 1.25; padding: 0 calc(14 * var(--u)); gap: calc(10 * var(--u)); }
.p .tile .sq { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-right: 0; }
.d .chip { font-size: calc(16 * var(--u)); }
.p .chip { font-size: calc(13 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)); margin: 0 calc(6 * var(--u)) calc(6 * var(--u)) 0; }
.list-on { color: var(--amber); }
.list-done { color: var(--white); }
.list-next { color: var(--muted); opacity: .7; }
.bar { position: absolute; transform-origin: left center; }
.ring { position: absolute; border-radius: 50%; border: calc(2 * var(--u)) solid var(--amber); }

/* Home frame 1, the opening: the small line in the logo's light spaced capitals, the heading in the weight of their
   banner, the booking's first step in a raised card, a venue in plan on a sheet beside it (risk-hq-hero.js), their
   counters split by the logo's slash. */
.kick { font-weight: 300; text-transform: uppercase; letter-spacing: 0.3em; }
.p .kick { letter-spacing: 0.2em; }
.spill { background: radial-gradient(ellipse 34% 52% at 30% 40%, var(--navy-lift), var(--navy-clear)); }
.h.big { font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.raised, .sheet { background: var(--card-deep); box-shadow: 0 calc(32 * var(--u)) calc(64 * var(--u)) var(--shade), inset 0 0 0 calc(1 * var(--u)) var(--glass-line); }
.ans { position: absolute; display: flex; align-items: center; gap: calc(16 * var(--u)); padding: 0 calc(24 * var(--u)); background: var(--glass); box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--glass-line); font-weight: 500; }
.ans .sq { flex: none; margin-right: 0; }
.ans::after { content: ""; flex: none; margin-left: auto; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-top: calc(2 * var(--u)) solid var(--amber); border-right: calc(2 * var(--u)) solid var(--amber); transform: rotate(45deg); }
.d .ans { font-size: calc(21 * var(--u)); line-height: 1.25; }
.p .ans { font-size: calc(15 * var(--u)); line-height: 1.25; padding: 0 calc(12 * var(--u)); gap: calc(10 * var(--u)); }
.p .ans .sq { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.p .ans::after { display: none; }
.prog { display: flex; gap: calc(6 * var(--u)); }
.prog i { display: block; flex: 1; background: var(--navy-line); }
.prog i.on { background: var(--amber); }
.cut { position: absolute; transform: rotate(33deg); background: linear-gradient(var(--amber) 0 22%, var(--white) 22% 76%, var(--amber) 76%); }
.num-lt { font-weight: 300; line-height: 1; letter-spacing: -0.01em; }
.call { display: flex; flex-direction: column; justify-content: flex-start; }
.call.up { justify-content: flex-end; }
.key .t { line-height: 1.5; white-space: nowrap; }
.key .kn { display: inline-block; width: calc(14 * var(--u)); }

/* The plans of a padel venue and a gym floor, drawn true to size (risk-hq-plans.js). */
.pl { fill: none; stroke: var(--muted); stroke-opacity: .55; }
.pl.lit { stroke: var(--amber); stroke-opacity: 1; }
.pl.done { stroke: var(--white); stroke-opacity: .85; }
.plf { fill: var(--navy-deep); }
.plf.lit { fill: var(--amber-wash); }
.pl-t { fill: var(--muted); font-family: var(--text); font-weight: 500; }
.pl-t.lit { fill: var(--amber); }
.dot { fill: var(--muted); fill-opacity: .55; }
.dot.done { fill: var(--white); fill-opacity: 1; }
.dot.lit { fill: var(--amber); fill-opacity: 1; }

/* Motion, played when a frame comes into view (and by its Play button); at rest each frame shows its in-view state.
   Nothing plays for a visitor who asks for less motion. */
.play [data-m] { animation-duration: .9s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); animation-fill-mode: both; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
.play [data-m="rise"] { animation-name: m-rise; }
.play [data-m="fade"] { animation-name: m-fade; }
.play [data-m="wipe"] { animation-name: m-wipe; animation-duration: 1.2s; }
.play [data-m="zoom"] { animation-name: m-zoom; animation-duration: 2.4s; }
.play [data-m="grow"] { animation-name: m-grow; animation-duration: 1.6s; }
.play [data-m="drop"] { animation-name: m-drop; }
.play [data-m="draw"] { animation-name: m-draw; animation-duration: 2s; }
.play [data-m="glow"] { animation-name: m-glow; animation-duration: 1.4s; animation-iteration-count: 3; animation-fill-mode: none; }
@keyframes m-rise { from { opacity: 0; transform: translateY(calc(40 * var(--u))); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-zoom { from { transform: scale(1.12); } }
@keyframes m-grow { from { transform: scaleX(0); } }
@keyframes m-drop { from { opacity: 0; transform: translateY(calc(-60 * var(--u))); } }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-glow { 50% { opacity: .35; } }
[data-m="draw"] { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .play [data-m] { animation: none !important; } }

/* Home frame 1's plan: drawn at rest with the first risk lit and every label readable. Playing, the plan draws itself,
   then one risk at a time lights for 3.5 s (5.8 s on the phone) and the padel club and the gym floor take turns over
   35 s. The answer under the pointer shows its plan at once. Less motion: none of it moves. */
.hp .pl { stroke: var(--muted); stroke-opacity: .6; }
.hp .pl-t { fill: var(--muted); }
.hp .plf { fill: var(--navy); }
svg.over:has(.hp) { pointer-events: none; }
.ld { stroke: var(--leader); stroke-width: 1.5; }
.pt { fill: var(--white); }
.pt-n { fill: var(--navy-deep); stroke: var(--white); stroke-width: 1.5; }
.pt-t { fill: var(--white); font-family: var(--text); font-weight: 600; }
.pt-t.on { fill: var(--navy); }
.lit-s { stroke: var(--amber); }
.lit-f { fill: var(--amber); }
.pulse { transform-box: fill-box; transform-origin: center; }
.lo, .lo3 { opacity: 0; }
.lo.first, .lo3.first { opacity: 1; }
.rk.first, .rk3.first b { color: var(--amber); }
.pv-b { opacity: 0; }
.play .pv-a { animation: m-fade .9s ease var(--e, .9s) both, plan-a 35s linear 2.6s infinite; }
.play .pv-b { animation: plan-b 35s linear 2.6s infinite; }
.play .lo, .play .lo.first { opacity: 0; animation: on 35s linear var(--d) infinite; }
.play .lo3, .play .lo3.first { opacity: 0; animation: on3 35s linear var(--d) infinite; }
.play .rk, .play .rk.first { color: var(--white); animation: on-c 35s linear var(--d) infinite; }
.play .rk3 b, .play .rk3.first b { color: var(--white); animation: on-c3 35s linear var(--d) infinite; }
.play .pulse { animation: ring 1.75s ease-out infinite; }
@keyframes on { 0% { opacity: 0; } 1.5%, 9% { opacity: 1; } 10.5%, 100% { opacity: 0; } }
@keyframes on3 { 0% { opacity: 0; } 1.5%, 15.2% { opacity: 1; } 16.7%, 100% { opacity: 0; } }
@keyframes on-c { 0%, 10.5%, 100% { color: var(--white); } 1.5%, 9% { color: var(--amber); } }
@keyframes on-c3 { 0%, 16.7%, 100% { color: var(--white); } 1.5%, 15.2% { color: var(--amber); } }
@keyframes plan-a { 0%, 48.5% { opacity: 1; } 50%, 98.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes plan-b { 0%, 48.5% { opacity: 0; } 50%, 98.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.d:has(.ans.v-gym:hover) .pv-a, .p:has(.ans.v-gym:hover) .pv-a, .d:has(.ans.v-padel:hover) .pv-b, .p:has(.ans.v-padel:hover) .pv-b { opacity: 0 !important; }
.d:has(.ans.v-gym:hover) .pv-b, .p:has(.ans.v-gym:hover) .pv-b, .d:has(.ans.v-padel:hover) .pv-a, .p:has(.ans.v-padel:hover) .pv-a { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .play .pv-a, .play .pv-b, .play .lo, .play .lo3, .play .rk, .play .rk3 b, .play .pulse { animation: none !important; }
  .play .pv-a, .play .lo.first, .play .lo3.first { opacity: 1; }
  .play .rk.first, .play .rk3.first b { color: var(--amber); }
}