/* ==========================================================================
   /work/vertex-boxing/

   The case is a thesis the data struck out, so the page opens on it, struck
   at display size. Then the report itself, running on GitHub on a cool slate
   stage, and the argument figure by figure: the report's own figure for the
   thesis cut by level, and the page's figures on neutral tiles or standing
   open on a hairline. Blue appears only on a result past its bar.

   Built from the site.css theme tokens. Pre-animation states are gated
   behind html.js, and prefers-reduced-motion shows every figure in its
   final state.
   ========================================================================== */

/* ------------------------------------------------------------ hero: the thesis, struck */
.bx-thesis { margin-top: clamp(26px, 3vw, 48px); }
.bx-thesis .thesis-k { font-size: var(--fs-small); margin-bottom: clamp(6px, 0.8vw, 12px); }
.bx-thesis-l { text-wrap: balance; }
.bx-thesis .thesis-s {
  font-size: clamp(2.5rem, 0.7rem + 5.6vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  margin-left: -0.03em;
  background-position: 0 57%;
  background-size: 100% max(2px, 0.035em);
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
html.js .bx-thesis { animation: sk-up 1000ms var(--eo) 260ms backwards; }
html.js .bx-thesis .thesis-s { transition: background-size 1500ms cubic-bezier(0.55, 0, 0.35, 1) 1250ms, color 900ms ease 2700ms; }
html.js .bx-thesis:not(.in) .thesis-s { background-size: 0 max(2px, 0.035em); color: var(--ink); }
.bx-hero .case-a { margin-top: clamp(30px, 3.4vw, 56px); }

/* ------------------------------------------------------------ the report, on its stage
   A cool slate under the window: the grey-blue of the report's own page,
   lit from above, so the light window reads as a sheet on a desk. */
.bx-media { margin-top: clamp(48px, 5vw, 80px); }
.bx-stage {
  padding: clamp(28px, 5.2vw, 84px) clamp(20px, 6.4vw, 120px);
  background:
    radial-gradient(90% 70% at 50% -12%, oklch(0.975 0.008 250 / 0.9), transparent 64%),
    radial-gradient(55% 75% at -4% 104%, oklch(0.79 0.042 240 / 0.9), transparent 70%),
    radial-gradient(55% 75% at 104% 104%, oklch(0.78 0.04 272 / 0.85), transparent 70%),
    linear-gradient(180deg, oklch(0.915 0.018 252), oklch(0.83 0.03 258));
}
.bx-win { max-width: 1080px; margin-inline: auto; box-shadow: 0 0 0 1px oklch(0.25 0.03 260 / 0.1), 0 2px 4px oklch(0.25 0.03 260 / 0.06), 0 40px 80px -36px oklch(0.3 0.05 262 / 0.5); }
.bx-win video { aspect-ratio: 2160 / 1350; background: #fff; }
.bx-media .stage-cap { max-width: none; text-wrap: pretty; }
.bx-media .stage-cap a { color: var(--ink-2); }

/* ------------------------------------------------------------ figures: shared */
.bx .plate { --halo: var(--tile); }
.bx-fig { padding: clamp(18px, 2.2vw, 32px) clamp(18px, 2.2vw, 32px) clamp(14px, 1.6vw, 24px); }
.bx-fig .fig-s a, .bx-wg-cap .fig-s a { white-space: nowrap; }
.bx-fig .fig-body + .fig-body { margin-top: clamp(26px, 2.6vw, 38px); padding-top: clamp(18px, 1.8vw, 26px); border-top: 1px solid var(--line-2); }
.bx-svg { overflow: visible; font-family: var(--f-sans); }
.bx-svg text { fill: var(--ink); paint-order: stroke; stroke: var(--halo, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }
.bx-k { font-size: 12px; font-weight: 500; fill: var(--ink-3) !important; }
.bx-k.is-b { font-weight: 600; fill: var(--ink) !important; }
.bx-g { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.bx-g.is-0 { stroke: var(--ink); stroke-width: 1.25; }
.bx-n { font-size: 12px; fill: var(--ink-3) !important; text-anchor: middle; }
.bx-n.is-b { font-weight: 600; fill: var(--ink) !important; }
.bx-lab { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.bx-lab.is-s { font-size: 14.5px; }
.bx-sub { font-size: 12px; font-weight: 400; letter-spacing: 0; fill: var(--ink-3) !important; }
.bx-v { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-anchor: end; }
.bx-v.is-neg { fill: var(--ink-3) !important; font-weight: 500; }
.bx-ann { font-size: 12.5px; font-weight: 600; }
.bx-dir { font-size: 12px; fill: var(--ink-3) !important; }
.bx-dir.is-r { text-anchor: end; }
.bx-svg .is-mid { text-anchor: middle; }
.bx-svg .is-first { text-anchor: start; }
.bx-svg .is-end { text-anchor: end; }
.bx-hl { stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1.2; }
.bx-row { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.bx-svg .sup { font-size: 10.5px; }

/* ------------------------------------------------------------ 1. the report's figure
   The report's figure from section 4.2, its geometry and numbers unchanged,
   redrawn in the site's ink and Mona Sans (embedded in the file, since an
   <img> cannot use the page's fonts) and set straight on the tile; the page
   adds only the realised return, under each of its columns. */
.bx-rf-t { background: var(--tile); border-radius: var(--r-tile); padding: clamp(16px, 2vw, 30px) clamp(16px, 2vw, 30px) clamp(10px, 1.2vw, 18px); }
.bx-rf-img { display: block; width: 100%; height: auto; }
.bx-rf-ret { position: relative; height: 56px; }
.bx-rf-ret ol { list-style: none; margin: 0; padding: 0; }
.bx-rf-k { position: absolute; left: 0; top: 22px; font-size: 12px; line-height: 20px; color: var(--ink-3); }
.bx-rf-ret li {
  position: absolute;
  top: 20px;
  left: var(--x);
  transform: translateX(-50%);
  font-size: 1.0625rem;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.bx-rf-ret li.is-neg { color: var(--ink-3); }
/* a hairline from each column of the figure down to its return */
.bx-rf-ret li::before { content: ""; position: absolute; left: 50%; top: -18px; width: 1px; height: 12px; background: var(--line-2); }
.bx-rf-n { display: none; --halo: var(--tile); }
.bx-rf-n .lv-svg text { stroke: var(--tile); }
.bx-rf-cn { display: none; }
.bx-rf .fig-cap { max-width: 76ch; color: var(--ink-3); text-wrap: balance; }
.bx-rf .fig-cap a { color: var(--ink-2); white-space: nowrap; }
html.js .bx-rf-img { opacity: 0; transform: translateY(22px) scale(0.985); transition: opacity 900ms var(--eo), transform 1300ms var(--eo); }
html.js .bx-rf.in .bx-rf-img { opacity: 1; transform: none; }
html.js .bx-rf-ret li, html.js .bx-rf-k { opacity: 0; translate: 0 8px; transition: opacity 600ms var(--eo), translate 800ms var(--eo); transition-delay: calc(650ms + var(--i, 0) * 110ms); }
html.js .bx-rf-ret li::before { transform: scaleY(0); transform-origin: top; transition: transform 500ms var(--eo) calc(550ms + var(--i, 0) * 110ms); }
html.js .bx-rf.in .bx-rf-ret li, html.js .bx-rf.in .bx-rf-k { opacity: 1; translate: none; }
html.js .bx-rf.in .bx-rf-ret li::before { transform: none; }

/* ------------------------------------------------------------ 2. the window the rule never saw */
.uw-bar { fill: var(--ink); rx: 3px; }
.uw-ci line { stroke: var(--ink-2); stroke-width: 1.25; }
.uw-gl { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; }
.uw-r { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25; rx: 2px; }
.ur-ci line { stroke: var(--ink-2); stroke-width: 1.25; }
.ur-dot { fill: var(--ink); }
.ur-ring { fill: none; stroke: var(--ink-3); stroke-width: 1.25; }
html.js .uw-bar { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 1000ms var(--eo) calc(var(--i) * 140ms); }
html.js .uw-ci, html.js .uw-v { opacity: 0; transition: opacity 450ms ease calc(700ms + var(--i) * 140ms); }
html.js .uw-gap { opacity: 0; transition: opacity 600ms ease 1150ms; }
html.js .uw-r1 { opacity: 0; transform: translateY(var(--dy)); transition: transform 800ms var(--eio) 1550ms, opacity 200ms ease 1450ms; }
html.js .uw-r2 { opacity: 0; transform: translateX(-100%); transform-box: fill-box; transition: transform 750ms var(--eio) 2400ms, opacity 1ms linear 2400ms; }
html.js .uw-rl { opacity: 0; transition: opacity 500ms ease 3050ms; }
html.js .uw-p.in .uw-bar, html.js .uw-p.in .uw-r1, html.js .uw-p.in .uw-r2 { transform: none; }
html.js .uw-p.in .uw-ci, html.js .uw-p.in .uw-v, html.js .uw-p.in .uw-gap, html.js .uw-p.in .uw-r1, html.js .uw-p.in .uw-r2, html.js .uw-p.in .uw-rl { opacity: 1; }
html.js .ur-dot, html.js .ur-v { opacity: 0; transition: opacity 400ms ease calc(150ms + var(--i) * 160ms); }
html.js .ur-ci { transform: scaleX(0); transform-box: fill-box; transform-origin: var(--o) 50%; transition: transform 1000ms var(--eo) 550ms; }
html.js .ur-z { opacity: 0; transition: opacity 500ms ease 1350ms; }
html.js .uw-p2.in .ur-dot, html.js .uw-p2.in .ur-v, html.js .uw-p2.in .ur-z { opacity: 1; }
html.js .uw-p2.in .ur-ci { transform: none; }

/* ------------------------------------------------------------ 3. what the model knows: two strips, open on a hairline */
.bx-strip { border-top: 1px solid var(--line-2); padding-top: 16px; }
.chapter-b > .bx-strip { margin-top: clamp(26px, 2.8vw, 40px); }
.kn-ci { stroke: var(--ink-2); stroke-width: 1.25; }
.kn-dot { fill: var(--ink); rx: 2px; }
.ko-base { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.ko-t { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.ko-run { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.ko-needle { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ko-v { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
html.js .kn-v { opacity: 0; transition: opacity 450ms ease calc(1000ms + var(--i) * 120ms); }
html.js .bx-kn.in .kn-v { opacity: 1; }
html.js .ko-run { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 1400ms var(--eo); }
html.js .bx-ko.in .ko-run { transform: none; }
html.js .ko-v { opacity: 0; transition: opacity 500ms ease 1100ms; }
html.js .bx-ko.in .ko-v { opacity: 1; }

/* ------------------------------------------------------------ 4. the four windows, on a tile of their own
   The legend starts where the gauge's scale starts, 27% in. */
.bx-sec { margin-top: 0; }
.bx-wg { margin-top: clamp(32px, 3.4vw, 56px); padding: clamp(22px, 2.8vw, 44px) clamp(18px, 2.8vw, 44px) clamp(18px, 2.2vw, 32px); }
.bx-wg .wg-svg text { stroke: var(--tile); }
.bx-wg .legend { padding-left: 27%; }
.bx-wg-cap .fig-s { max-width: 60ch; }
.bx-wg .legend { margin-top: 14px; }
.bx-reg-w { margin-top: clamp(34px, 3.4vw, 52px); }
.bx-reg { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.45; }
.bx-reg caption { text-align: left; padding: 0 0 12px calc(2 * var(--z)); font-size: var(--fs-fine); color: var(--ink-3); }
.bx-reg th, .bx-reg td { text-align: left; vertical-align: baseline; padding: 14px var(--gut) 15px 0; border-top: 1px solid var(--line); }
.bx-reg thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); border-top: 0; padding-top: 0; padding-bottom: 8px; }
.bx-reg tbody tr:first-child th, .bx-reg tbody tr:first-child td { border-top-color: var(--line-2); }
.bx-reg tbody th { width: calc(2 * var(--z)); font-weight: 600; font-size: 1.125rem; line-height: 1.15; letter-spacing: -0.02em; }
.bx-reg tbody th small { display: block; margin-top: 4px; font-weight: 400; font-size: var(--fs-fine); letter-spacing: 0; color: var(--ink-3); line-height: 1.35; }
.bx-reg td { color: var(--ink-2); }
.bx-reg td:nth-child(2) { width: calc(2 * var(--z)); }
.bx-reg td:last-child { padding-right: 0; }
.bx-reg td b { display: block; font-weight: 600; font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 3px; }
.bx-reg td b.is-hit { color: var(--signal-t); }
.bx-reg sup { font-size: 0.62em; }
.bx-reg td > sup { font-size: 0.75em; }
html.js .bx-reg tbody tr { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--eo), transform 900ms var(--eo); transition-delay: calc(var(--r) * 90ms); }
html.js .bx-reg.in tbody tr { opacity: 1; transform: none; }
.bx-after { margin-top: clamp(28px, 3vw, 44px); }
.bx-after .links { margin-top: 18px; }

/* ------------------------------------------------------------ 5. the leak */
.lk-box { fill: var(--bg); rx: 6px; }
.lk-g { display: none; }
.lk-fill { fill: var(--ink); rx: 6px; }
.lk-v { font-size: 26px; font-weight: 300; letter-spacing: -0.035em; stroke: none !important; }
.lk-t { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.lk-axis { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
html.js .lk-fill { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 1300ms var(--eo) calc(200ms + var(--i) * 220ms); }
html.js .lk-v { opacity: 0; transition: opacity 500ms ease calc(1100ms + var(--i) * 220ms); }
html.js .bx-lk.in .lk-fill { transform: none; }
html.js .bx-lk.in .lk-v { opacity: 1; }

/* ------------------------------------------------------------ 6. the checks, one log axis across a tile */
.bx-ck { margin-top: clamp(32px, 3.4vw, 56px); padding: clamp(26px, 3vw, 48px) clamp(18px, 2.8vw, 44px) clamp(18px, 2.2vw, 30px); }
.bx-ck .bx-svg text { stroke: var(--tile); }
.ck-row { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.ck-lab { font-size: 13px; fill: var(--ink-2) !important; }
.ck-bar { stroke: var(--ink); stroke-width: 2; }
.ck-dot { fill: var(--ink); stroke: var(--tile); stroke-width: 1.5; }
.ck-trail { stroke: var(--signal); stroke-width: 1.5; }
.ck-stop { fill: var(--signal); }
.ck-v { font-size: 13.5px; font-weight: 600; }
.ck-v.is-hit { font-size: 16px; letter-spacing: -0.01em; fill: var(--signal-t) !important; }
.ck-off-t { font-size: 12px; fill: var(--ink-3) !important; }
.ck-lim, .ck-lim-a { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.ck-axis { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.ck-tk { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.bx-ck-cap { margin-top: 16px; font-size: var(--fs-fine); color: var(--ink-3); max-width: 70ch; }
html.js .ck-v, html.js .ck-off-t, html.js .ck-under { opacity: 0; transition: opacity 500ms ease calc(1200ms + var(--i) * 120ms); }
html.js .bx-ck.in .ck-v, html.js .bx-ck.in .ck-off-t, html.js .bx-ck.in .ck-under { opacity: 1; }

.bx-fav { margin-top: clamp(64px, 6vw, 104px); align-items: start; }
.bx-fav-q { grid-column: 3 / 6; margin-top: 0; }
.bx-fav-q .thesis-s { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.75rem); background-size: 100% max(2px, 0.035em); }
html.js .bx-fav-q:not(.in) .thesis-s { background-size: 0 max(2px, 0.035em); }
.bx-fav-t { grid-column: 3 / 6; margin-top: 18px; max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------ 7. the random search: text beside a slope */
.bx-se-t { grid-column: 3 / 5; }
.bx-se-t > p { max-width: 50ch; color: var(--ink-2); text-wrap: pretty; }
.bx-se-t > p + p { margin-top: 0.9em; }
.bx-se-t .links { margin-top: 22px; }
.bx-se-f { --halo: var(--tile); grid-column: 5 / 6; padding: 20px 18px 14px; background: var(--tile); border-radius: var(--r-tile); }
.bx-se-f .fig-cap { margin-top: 10px; color: var(--ink-3); }
.se-ax { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.se-tk { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.se-zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.se-line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.se-dot { fill: var(--ink); }
html.js .se-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--eio) 450ms; }
html.js .bx-se-f.in .se-line { stroke-dashoffset: 0; }
html.js .se-b, html.js .se-vb { opacity: 0; transition: opacity 450ms ease 1450ms; }
html.js .bx-se-f.in .se-b, html.js .bx-se-f.in .se-vb { opacity: 1; }

/* ------------------------------------------------------------ 8. what it does not show */
.bx-not { border-top: 1px solid var(--line-2); }
.bx-not li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 6px 24px; flex-wrap: wrap; padding: 14px 0 15px; font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.25; letter-spacing: -0.02em; }
.bx-not-r { font-weight: 400; font-size: 0.78em; letter-spacing: -0.005em; color: var(--ink-3); white-space: nowrap; }
.bx-not li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
html.js .bx-not li { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--eo), transform 800ms var(--eo); transition-delay: calc(150ms + var(--i) * 110ms); }
html.js .bx-not li::after { transform: scaleX(0); transition: transform 900ms var(--eo) calc(var(--i) * 110ms); }
html.js .bx-not.in li { opacity: 1; transform: none; }
html.js .bx-not.in li::after { transform: none; }
.chapter-b > .bx-not-l { margin-top: clamp(26px, 2.8vw, 40px); font-size: var(--fs-lead); line-height: 1.38; letter-spacing: -0.018em; color: var(--ink); max-width: 40ch; }
.chapter-b > .bx-not-s { margin-top: 18px; font-size: var(--fs-small); color: var(--ink-3); max-width: 56ch; }
.bx-not-s a { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ 9. the live test */
.bx-lt { margin-top: clamp(32px, 3.4vw, 56px); padding: clamp(22px, 2.8vw, 44px) clamp(18px, 2.8vw, 44px) clamp(16px, 2vw, 28px); }
.bx-lt .fig-body { margin-top: clamp(22px, 2.4vw, 34px); }
.bx-lt .fig-s { max-width: 72ch; }
.bx-lt-go { margin-top: 20px; padding-left: calc(2 * var(--z)); }
.lt-ev { stroke: var(--ink); stroke-width: 1.5; }
.lt-ev.is-c { stroke-width: 2; }
.lt-evt { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.lt-evs { font-size: 12px; fill: var(--ink-3) !important; }
.lt-tk { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.lt-tk.is-y { stroke: var(--ink-2); stroke-width: 1.25; }
.lt-axis { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.lt-axis.is-b { stroke: var(--ink-3); }
.lt-open { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.lt-row { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.lt-band { stroke: var(--ink); stroke-width: 1.25; rx: 3px; }
.lt-say { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.lt-never { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 2 4; }
.lt-na path { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.lt-now { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.lt-nowt { font-size: 12.5px; font-weight: 600; fill: var(--ink-2) !important; }
html.js .lt-open { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 1800ms var(--eio) 250ms; }
html.js .lt-band { transform: scaleX(0); transform-box: fill-box; transform-origin: left; transition: transform 900ms var(--eo) calc(1500ms + var(--i) * 260ms); }
html.js .lt-never { opacity: 0; transition: opacity 700ms ease 2050ms; }
html.js .lt-na, html.js .lt-say { opacity: 0; transition: opacity 500ms ease calc(1900ms + var(--i) * 260ms); }
html.js .lt-today { opacity: 0; transition: opacity 600ms ease 2400ms; }
html.js .bx-lt.in .lt-open, html.js .bx-lt.in .lt-band { transform: none; }
html.js .bx-lt.in .lt-never, html.js .bx-lt.in .lt-na, html.js .bx-lt.in .lt-say, html.js .bx-lt.in .lt-today { opacity: 1; }

/* ==========================================================================
   Widths
   ========================================================================== */
/* under about 680px of column the report's figure would set its labels
   below 11px, so the page draws the same numbers itself */
@media (max-width: 1100px) {
  .bx .chapter-b .bx-fig .fl-wide, .bx .chapter-b .bx-strip .fl-wide { display: none; }
  .bx .chapter-b .bx-fig .fl-narrow, .bx .chapter-b .bx-strip .fl-narrow { display: block; }
  /* the live test's wide drawing needs about 900px of column for its labels */
  .bx-lt .fl-wide { display: none; }
  .bx-lt .fl-narrow { display: block; }
  .bx-rf-w, .bx-rf-cw { display: none; }
  .bx-rf-n { display: block; padding: 4px 0 6px; }
  .bx-rf-cn { display: inline; }
  .bx-rf-t { padding: 20px 20px 16px; }
}
/* beside the text the search figure gets one column, under 270px below
   about 1400px, too narrow for its two headings; so it goes under the text */
@media (max-width: 1400px) {
  .bx-se-t { grid-column: 3 / 6; }
  .bx-se-f { grid-column: 3 / 6; margin-top: 30px; max-width: 420px; }
}
@media (max-width: 760px) {
  .bx-thesis { margin-top: 22px; }
  .bx-thesis .thesis-s { font-size: clamp(2.25rem, 10.4vw, 3rem); line-height: 1.02; }
  .bx-hero .case-a { margin-top: 26px; }
  .bx-hero .case-line { margin-top: 22px; }
  .bx-media { margin-top: 40px; }
  .bx-stage { padding: 22px 14px; }
  .bx-win .win-bar { gap: 10px; padding: 0 10px; }
  .bx-win .win-dots + .win-url { margin-right: 0; padding-inline: 8px; font-size: 0.6875rem; }
  .bx-rf-t { padding: 16px 14px 12px; }
  .bx-wg { padding: 18px 14px 16px; }
  .bx-wg .legend { padding-left: 0; }
  .bx-reg caption { display: block; padding-left: 0; }
  .bx-not-r { flex-basis: 100%; }
  .bx-reg, .bx-reg tbody, .bx-reg tr, .bx-reg th, .bx-reg td { display: block; width: auto !important; }
  .bx-reg thead { display: none; }
  .bx-reg tbody tr { border-top: 1px solid var(--line); padding: 14px 0 16px; }
  .bx-reg tbody tr:first-child { border-top: 1px solid var(--line-2); }
  .bx-reg th, .bx-reg td { border: 0; padding: 0; }
  .bx-reg td { margin-top: 6px; }
  .bx-reg td:last-child { margin-top: 10px; }
  .bx-ck { padding: 20px 14px 16px; }
  .bx-fav { margin-top: 52px; }
  .bx-fav-q .thesis-s { font-size: 2rem; }
  .bx-se-f { margin-top: 28px; max-width: 440px; }
  .bx-lt { padding: 18px 14px 14px; }
  .bx-lt-go { padding-left: 0; }
}

/* ==========================================================================
   Motion off: every figure in its final state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .bx-thesis { animation: none; }
  html.js .bx-thesis .thesis-s, html.js .bx-fav-q .thesis-s { transition: none; }
  html.js .bx-thesis:not(.in) .thesis-s, html.js .bx-fav-q:not(.in) .thesis-s { background-size: 100% max(2px, 0.035em); color: var(--ink-3); }
  html.js .uw-bar, html.js .uw-r1, html.js .uw-r2, html.js .ur-ci, html.js .ko-run, html.js .lk-fill, html.js .lt-open, html.js .lt-band { transform: none; transition: none; }
  html.js .uw-ci, html.js .uw-v, html.js .uw-gap, html.js .uw-r1, html.js .uw-r2, html.js .uw-rl,
  html.js .ur-dot, html.js .ur-v, html.js .ur-z, html.js .kn-v, html.js .ko-v, html.js .lk-v,
  html.js .ck-v, html.js .ck-off-t, html.js .ck-under, html.js .se-b, html.js .se-vb,
  html.js .lt-never, html.js .lt-na, html.js .lt-say, html.js .lt-today { opacity: 1; transition: none; }
  html.js .se-line { stroke-dashoffset: 0; transition: none; }
  html.js .bx-reg tbody tr, html.js .bx-not li { opacity: 1; transform: none; transition: none; }
  html.js .bx-not li::after { transform: none; transition: none; }
  html.js .bx-rf-img { opacity: 1; transform: none; transition: none; }
  html.js .bx-rf-ret li, html.js .bx-rf-k { opacity: 1; translate: none; transition: none; }
  html.js .bx-rf-ret li::before { transform: none; transition: none; }
}

@media print {
  .bx-stage, .bx-rf-t, .bx-se-f { background: none !important; }
  .bx-win { box-shadow: 0 0 0 1px var(--line-2); }
  html.js .bx-rf-img, html.js .bx-rf-ret li, html.js .bx-rf-k { opacity: 1 !important; transform: none !important; translate: none !important; }
}