/*
  Scaling: every size is in rem, and the root size follows the viewport. It's
  designed at 1440×900 (1rem = 16px) and scales by whichever of width or height
  is tighter, so a 21:9 or 32:9 screen grows with its height instead of leaving
  small text stranded at the edges. Qubit reads the same root size, so he
  scales in step (see qubit.js).
*/
html { font-size: clamp(13px, min(1.1111vw, 1.7778vh), 44px); }

:root {
  --fg: #0d0d0d;
  --text: #3d4148;
  --muted: #6b7076;
  --line: rgba(0, 0, 0, .1);
  --claude: #d97757;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  /* page side margin: at least 9rem, and the content never spreads wider than 110rem (ultrawides keep it centred) */
  --edge: max(9rem, calc((100vw - 110rem) / 2));
  --fade: 4.5rem;   /* scroll fade at the top and bottom of docs */
  /* Qubit's strip along the bottom: his size, the floor under him, and the room the page leaves him */
  --q-side: 3.5rem;
  --q-floor: 1.25rem;
  --q-room: calc(var(--q-floor) + var(--q-side) * 1.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* on phones: no panning, bounce or pull-to-refresh on the frame, and no text selection while
   dragging. The docs scroller opts back in below. */
body { touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body { background: #fff; color: var(--fg); font: 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }

/* Qubit: fixed to the bottom of the screen, over the page but never taking a click. He stands on a
   hairline floor; the space above it is open for his hops and flips. */
#qubit { position: fixed; z-index: 2; left: 0; right: 0; bottom: env(safe-area-inset-bottom); height: calc(var(--q-floor) + var(--q-side) * 3.4);
         pointer-events: none; }
#qubit::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--q-floor); height: 1px; background: #e8e8e8; }

/* ---------------------------------- frame ---------------------------------- */
/* dvh: the screen that's actually visible on phones, between the browser's toolbars */
.app { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 4.75rem 1fr 4rem;
       padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + var(--q-room)) env(safe-area-inset-left); }

.top, .bottom { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; text-decoration: none; transition: opacity .25s; }
body[data-page="home"] .brand { opacity: 0; pointer-events: none; } /* the hero carries the full mark */

.nav { display: flex; gap: 1.875rem; font-size: .875rem; }
.nav a { color: var(--muted); text-decoration: none; transition: color .15s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }

.bottom { font: .75rem/1 var(--mono); color: var(--muted); letter-spacing: .02em; }
.bottom a { text-decoration: none; transition: color .15s; }
.bottom a:hover { color: var(--fg); }

/* the X handle: a black pill with the X mark */
.handle { display: inline-flex; align-items: center; gap: .55rem; height: 2.25rem; padding: 0 1rem 0 .85rem; border-radius: 999px;
          background: #0d0d0d; border: 1px solid #0d0d0d; color: #fff; font: 500 .8125rem/1 var(--sans); letter-spacing: -.005em;
          transition: border-color .15s, background .15s; }
.bottom .handle:hover { color: #fff; background: #2b2b2b; border-color: #2b2b2b; }
.handle .logo-x { width: .85rem; height: .85rem; color: #fff; }

#view { min-height: 0; position: relative; transition: opacity .18s ease; }
#view.leaving { opacity: 0; }

/* ---------------------------------- home ----------------------------------- */
.home { height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; padding: 0 var(--edge); }

.wordmark { font-size: 9.25rem; font-weight: 700; line-height: .9; letter-spacing: -.055em; }

.lockup { display: flex; align-items: center; margin-top: 2rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.lockup .who { display: inline-flex; align-items: center; gap: .55rem; }
.lockup .bar { width: 1px; height: 1.6rem; margin: 0 1.25rem; background: rgba(0, 0, 0, .3); }
/* the brands' own marks, from Simple Icons, tinted with a mask so each can carry its colour */
.logo { width: 1.2em; height: 1.2em; flex: none; background: currentColor;
        -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.logo-x { --src: url("https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/x.svg"); width: .95em; height: .95em; color: var(--fg); }
.logo-claude { --src: url("https://cdn.jsdelivr.net/npm/simple-icons@13.21.0/icons/claude.svg"); color: var(--claude); }
.whatis { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; font-size: .875rem; font-weight: 500; color: var(--text); text-decoration: none; transition: color .15s; }
.whatis svg { width: .8rem; height: .8rem; }
.whatis:hover { color: var(--fg); }
.fine { margin-top: .9rem; font-size: .8125rem; color: var(--muted); }

.install { width: 20rem; }
.eyebrow { font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.install h2 { margin-top: .875rem; font-size: 1.75rem; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.download { display: flex; align-items: center; justify-content: center; gap: .625rem; height: 3.375rem; margin-top: 1.625rem; border-radius: 999px;
            background: #0d0d0d; color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; transition: transform .15s, background .15s; }
.download:hover { background: #2b2b2b; transform: translateY(-1px); }
.download svg { width: 1.125rem; height: 1.125rem; }
.meta { margin-top: .75rem; text-align: center; font: .75rem/1.4 var(--mono); color: var(--muted); text-wrap: balance; } /* never a lone word on its own line */
.stable { margin-top: .5rem; text-align: center; font-size: .8125rem; }
.stable a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: .2em; transition: color .15s, text-decoration-color .15s; }
.stable a:hover { color: var(--fg); text-decoration-color: var(--fg); }
.links { display: flex; justify-content: center; gap: 1.375rem; margin-top: 1.375rem; font-size: .875rem; }
.links a { color: var(--text); text-decoration: none; transition: color .15s; }
.links a:hover { color: var(--fg); }

/* ---------------------------------- about ---------------------------------- */
/* the video fills the view between header and footer, never taller than the space it has */
.about { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem var(--edge) 1.5rem;
         container-type: size; }
/* as large as fits: limited by the width, or by the height left after the caption, whichever is tighter */
.player { flex: none; width: min(100%, calc((100cqh - 4.5rem) * 1540 / 1080)); aspect-ratio: 1540 / 1080; border-radius: 1rem; overflow: hidden;
          border: 1px solid var(--line); background: #000; box-shadow: 0 2rem 5rem -2.5rem rgba(0, 0, 0, .35); }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.caption { font-size: .8125rem; color: var(--muted); text-align: center; }

/* --------------------------------- reader ---------------------------------- */
.reader { height: 100%; position: relative; }

/* the scroll area fills the whole view, so the wheel works anywhere; the text column sits centred inside it */
.scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; outline: none;
            touch-action: pan-y; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
            scrollbar-width: none;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
                    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%); }
.scroller::-webkit-scrollbar { display: none; }

.toc { position: absolute; z-index: 2; top: var(--fade); left: var(--edge); width: 12rem; display: flex; flex-direction: column; gap: .125rem; }
.toc a { padding: .3rem 0; font-size: .8125rem; color: var(--muted); text-decoration: none; line-height: 1.35; transition: color .15s; }
.toc a:hover, .toc a.on { color: var(--fg); }
@media (max-width: 1060px) { .toc { display: none; } } /* below the 13px floor the index no longer fits beside the column */

.doc { max-width: 45rem; margin: 0 auto; padding: var(--fade) 2rem calc(var(--fade) + 5rem); color: var(--text); }
.doc .status { color: var(--muted); }
.doc .status a { color: var(--fg); }

.doc h1 { color: var(--fg); font-size: 2.75rem; line-height: 1.05; letter-spacing: -.04em; margin-bottom: 1.75rem; }
.doc h2 { color: var(--fg); font-size: 1.625rem; line-height: 1.2; letter-spacing: -.03em; margin: 4rem 0 1.125rem; }
.doc h3 { color: var(--fg); font-size: 1.125rem; letter-spacing: -.015em; margin: 2.25rem 0 .75rem; }
.doc h1 + h2 { margin-top: 1.5rem; }
.doc p, .doc ul, .doc ol, .doc blockquote, .doc pre, .doc .table { margin-bottom: 1.125rem; }
.doc ul, .doc ol { padding-left: 1.375rem; }
.doc li { margin: .375rem 0; }
.doc li > ul { margin: .375rem 0 0; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc a { color: var(--fg); text-decoration-color: rgba(0, 0, 0, .3); text-underline-offset: .2em; }
.doc a:hover { text-decoration-color: var(--fg); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.doc blockquote { padding-left: 1rem; border-left: 2px solid var(--line); color: var(--muted); }
.doc code { font: .86em var(--mono); background: rgba(0, 0, 0, .055); padding: .125rem .375rem; border-radius: .3rem; color: var(--fg); }
.doc pre { padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: .75rem; background: #f6f6f7; overflow-x: auto; }
.doc pre code { background: none; padding: 0; font-size: .8125rem; line-height: 1.6; }
.doc img { max-width: 100%; height: auto; border-radius: .75rem; }
.doc .table { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.5; }
.doc th { text-align: left; color: var(--fg); font-weight: 600; padding: .625rem .875rem .625rem 0; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.doc td { vertical-align: top; padding: .75rem .875rem .75rem 0; border-bottom: 1px solid var(--line); min-width: 8.5em; }

/* narrow screens (phones, a slim window): stack the hero and tighten the frame */
@media (max-width: 760px) {
  :root { --edge: 1.25rem; }
  .app { grid-template-rows: 4.75rem 1fr 4.5rem; }
  .home { grid-template-columns: 1fr; align-content: center; gap: 2.5rem; }
  .wordmark { font-size: 5.5rem; }
  .install { width: 100%; max-width: 22rem; }
  .nav { gap: 1rem; font-size: .8125rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a[target="_blank"] { display: none; } /* GitHub is in the hero's install links */
  .player { border-radius: .6rem; }
  .doc { padding-left: var(--edge); padding-right: var(--edge); }
}

/* phones held sideways: short screens get a compact frame and hero */
@media (max-height: 560px) and (min-width: 561px) {
  .app { grid-template-rows: 3.25rem 1fr 3.25rem; }
  .home { gap: 2rem; }
  .wordmark { font-size: 4.5rem; }
  .lockup { margin-top: .9rem; font-size: 1.1rem; }
  .whatis { margin-top: .6rem; }
  .fine { margin-top: .5rem; }
  .install h2 { font-size: 1.35rem; margin-top: .5rem; }
  .download { height: 2.75rem; margin-top: 1rem; }
  .links { margin-top: .8rem; }
  .handle { height: 2rem; }
  .about { padding-top: .5rem; padding-bottom: .75rem; gap: .5rem; }
  .caption { display: none; }
  .player { width: min(100%, calc((100cqh - 1rem) * 1540 / 1080)); }
  :root { --fade: 2.5rem; --edge: 2.5rem; --q-side: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) { #view { transition: none; } }

/* ---------------------------------- robot ---------------------------------- */
/* #/robot, loaded on its own route (js/robot/). The page scrolls in .r-scroll, inside the view, the way the docs do.
   cqh is the view's height. Layers, bottom to top: the panel colour, the robot's canvas, the scroller, the pinned button.
   The panel and canvas share one inset so a dark or orange scene reads as a card between the header and footer. */
.robot { --body: #ec9a2a; --accent: #b45c4c; --panel: inset(0 .75rem .25rem round 1.25rem);
         position: absolute; inset: 0; overflow: hidden; container-type: size; color: var(--fg); }
.r-back, .r-stage, .r-veil { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-clip-path: var(--panel); clip-path: var(--panel); pointer-events: none; }
.r-back { background: #fff; }
.r-stage { opacity: 0; transition: opacity .7s; }
.robot.live .r-stage { opacity: 1; }
.r-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; outline: none;
            touch-action: pan-y; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; scrollbar-width: none; }
.r-scroll::-webkit-scrollbar { display: none; }

/* the coffee button: the same pill as the download button */
.robot .coffee { display: inline-flex; align-items: center; justify-content: center; height: 3.375rem; padding: 0 2.5rem; border-radius: 999px; background: #0d0d0d; color: #fff;
                 font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s, color .3s, opacity .25s; }
.robot .coffee:hover { background: #2b2b2b; transform: translateY(-1px); }
.robot .coffee.small { height: 2.25rem; padding: 0 1.05rem; font-weight: 500; font-size: .8125rem; }
.robot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.robot .r-pin { position: absolute; z-index: 3; right: var(--edge); top: 1rem; opacity: 0; pointer-events: none; }
.robot .r-pin.show { opacity: 1; pointer-events: auto; }
.robot .r-pin.on-dark { background: #fff; color: #0d0d0d; }
.robot .r-pin.on-dark:hover { background: #e8e8e8; }

/* their floating button stays hidden: ours open the panel */
#bmc-wbtn { display: none !important; }

.robot .copy { position: relative; z-index: 1; }
.robot .wordmark { margin-left: -.04em; }
.robot .lead { margin-top: 1.5rem; font-size: 2rem; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.robot .body { margin-top: 1rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.robot h2 { margin-top: .9rem; font-size: 2.75rem; font-weight: 600; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.robot .tag { margin-top: 1.4rem; font: 500 .75rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
.robot .poster { position: absolute; pointer-events: none; transition: opacity .7s; }
.robot.live .poster { opacity: 0; }

.r-hero { position: relative; min-height: 100cqh; display: flex; align-items: center; padding: 0 var(--edge); }
.r-hero .coffee { margin-top: 1.75rem; }
.r-hero .copy { max-width: 36rem; }
.r-hero .poster { right: calc(var(--edge) + 1rem); top: 1.5rem; height: calc(100% - 3rem); width: auto; }

.r-scrub { position: relative; height: 300cqh; }
.r-ar { height: 380cqh; color: #fff; }
.r-sticky { position: sticky; top: 0; height: 100cqh; display: flex; align-items: center; padding: 0 var(--edge); overflow: hidden; }
.r-sticky .copy { max-width: 30rem; }
.r-sticky .poster { display: none; }

.r-lines { margin-top: 1.25rem; list-style: none; }
.r-lines li { font-size: 1.0625rem; line-height: 1.65; color: #a6a9ae; transition: color .35s; }
.r-lines li.on { color: var(--fg); }
.robot .status { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .35rem .75rem .35rem .6rem; border-radius: 999px; background: #f4f4f5; font-size: .8125rem; font-weight: 500; color: #8a5a0c; }
.robot .status i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--body); }

/* the AR scene: the dots stay out from behind the words */
.r-veil { opacity: 0; background: linear-gradient(90deg, #0d0d0d 20%, rgba(13, 13, 13, .8) 34%, rgba(13, 13, 13, 0) 50%); }
.r-ar .eyebrow { color: #9a9ea4; }
.r-ar .body { color: #d1d4d9; }
.robot .tag.warn { color: var(--body); }

.r-money { position: relative; z-index: 3; min-height: 100cqh; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 6rem; align-items: center; padding: 3rem var(--edge); }
.r-money .tiers { margin-top: 1.5rem; list-style: none; }
.r-money .tiers li { font-size: .9375rem; line-height: 1.8; color: var(--text); }
.r-money .tiers b { display: inline-block; min-width: 6.5rem; font-weight: 600; color: var(--fg); }
.r-money .note { margin-top: 1.75rem; max-width: 27rem; font-size: .78rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.r-rows { list-style: none; }
.r-rows li { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 0 .85rem; font-size: .9375rem; font-weight: 500; }
.r-rows b { font: 500 .875rem/1 var(--mono); color: var(--text); }
.r-rows li::before, .r-rows li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; }
.r-rows li::before { right: 0; background: #f4f4f5; }
.r-rows li::after { width: 0; background: var(--body); transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }
.r-rows li.est::after { background: var(--accent); }
.r-rows.in li::after { width: var(--w); }
.r-rows li:nth-child(2)::after { transition-delay: .06s; }
.r-rows li:nth-child(3)::after { transition-delay: .12s; }
.r-rows li:nth-child(4)::after { transition-delay: .18s; }
.r-rows li:nth-child(5)::after { transition-delay: .24s; }
.r-rows li:nth-child(6)::after { transition-delay: .3s; }
.r-rows li:nth-child(7)::after { transition-delay: .36s; }

.r-last { position: relative; min-height: 100cqh; display: flex; align-items: center; padding: 2rem var(--edge); }
.robot h2.big { margin: 0; font-size: 5rem; font-weight: 700; line-height: .98; letter-spacing: -.045em; }
.r-last .copy { max-width: 34rem; }
.r-last .coffee { margin-top: 1.75rem; }
.to-orbit { display: block; margin-top: 2.5rem; max-width: 27rem; text-decoration: none; }
.to-orbit .mark { display: block; font-size: 2.25rem; font-weight: 700; line-height: .9; letter-spacing: -.055em; }
.to-orbit .line { display: block; margin-top: .6rem; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.to-orbit:hover .line { text-decoration: underline; text-underline-offset: .2em; }
.r-last .legal { margin-top: 1rem; font-size: .72rem; line-height: 1.5; color: rgba(13, 13, 13, .62); }
.r-last .poster { right: calc(var(--edge) + 1rem); top: 1.25rem; height: calc(100% - 2.5rem); width: auto; }

/* no live model: reduced motion, no WebGL, or the model failed. Posters stay and the sections stack. */
.robot.static .r-stage, .robot.static .r-back, .robot.static .r-veil { display: none; }
.robot.static .r-lines li { color: var(--fg); }
.robot.static .r-scrub { height: auto; }
.robot.static .r-sticky { position: relative; height: auto; min-height: 100cqh; border-radius: 1.25rem; }
.robot.static .r-sticky .poster { display: block; right: var(--edge); top: 1.5rem; height: calc(100% - 3rem); max-width: 50%; width: auto; object-fit: contain; }
.robot.static .r-ar .r-sticky { background: #0d0d0d; margin: 0 .75rem; padding: 0 calc(var(--edge) - .75rem); }
.robot.static .r-ar .poster { right: 1rem; }
.robot.static .r-last { background: var(--body); margin: 0 .75rem; padding-left: calc(var(--edge) - .75rem); border-radius: 1.25rem; }
.robot.static .r-rows li::after { transition: none; }

@media (max-width: 760px) {
  .robot { --panel: inset(0 .375rem .125rem round .9rem); }
  .robot .coffee { height: 48px; font-size: 15px; padding: 0 24px; }
  .robot .coffee.small { height: 30px; font-size: 12.5px; padding: 0 12px; }
  .robot .r-pin { right: 14px; top: 10px; }
  .r-hero { align-items: flex-end; padding: 0 20px 12px; }
  .r-hero .copy { max-width: none; width: 100%; }
  .robot .wordmark { font-size: 52px; }
  .robot .lead { margin-top: 6px; font-size: 19px; }
  .robot .body { margin-top: 5px; font-size: 13.5px; line-height: 1.42; }
  .r-hero .coffee, .r-last .coffee { display: flex; width: 100%; margin-top: 10px; }
  .robot .tag { margin-top: 8px; font-size: 9.5px; letter-spacing: .04em; }
  .r-hero .poster { left: 50%; right: auto; top: 6px; height: 44cqh; transform: translateX(-50%); }

  .r-scrub { height: 260cqh; }
  .r-ar { height: 320cqh; }
  .r-sticky { align-items: flex-end; padding: 0 20px 12px; }
  .r-sticky .copy { max-width: none; width: 100%; }
  .robot .eyebrow { font-size: 9.5px; }
  .robot h2 { margin-top: 5px; font-size: 22px; }
  .r-lines { margin-top: 5px; }
  .r-lines li { font-size: 12.5px; line-height: 1.5; }
  .r-robot .tag { display: none; }
  .robot .status { margin-top: 5px; font-size: 11px; padding: 3px 9px 3px 7px; }
  .robot .status i { width: 5px; height: 5px; }
  .r-veil { background: linear-gradient(0deg, #0d0d0d 36%, rgba(13, 13, 13, .85) 46%, rgba(13, 13, 13, 0) 60%); }

  .r-money { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 20px; }
  .r-money h2 { font-size: 30px; }
  .r-money .tiers li { font-size: 14px; }
  .r-money .tiers b { min-width: 86px; }
  .r-money .note { margin-top: 18px; font-size: 11.5px; }
  .r-rows li { padding: 10px 0 9px; font-size: 13.5px; }
  .r-rows b { font-size: 12.5px; }

  .r-last { align-items: flex-end; padding: 0 20px 14px; }
  .r-last .copy { max-width: none; width: 100%; }
  .robot h2.big { font-size: 38px; }
  .to-orbit { margin-top: 12px; }
  .to-orbit .mark { font-size: 22px; }
  .to-orbit .line { margin-top: 3px; font-size: 12.5px; line-height: 1.4; }
  .r-last .legal { margin-top: 6px; font-size: 9.5px; }

  .robot.static .r-sticky { flex-direction: column; align-items: stretch; justify-content: flex-end; min-height: 0; padding-top: 16px; margin: 0; }
  .robot.static .r-sticky .poster, .robot.static .r-last .poster, .robot.static .r-hero .poster { position: static; transform: none; width: auto; max-width: 100%; height: auto; max-height: 300px; margin: 0 auto 12px; order: -1; }
  .robot.static .r-hero, .robot.static .r-last { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-top: 16px; }
  .robot.static .r-ar .r-sticky { padding: 16px 20px; border-radius: 14px; margin: 0 6px; }
  .robot.static .r-last { padding: 16px 20px; border-radius: 14px; margin: 0 6px; }
}

@media (max-height: 560px) and (min-width: 561px) {
  .robot .wordmark { font-size: 4.25rem; }
  .robot .lead { font-size: 1.3rem; margin-top: .6rem; }
  .robot .body { margin-top: .5rem; font-size: .9rem; }
  .robot h2 { font-size: 1.7rem; }
  .robot h2.big { font-size: 3rem; }
  .r-lines li { font-size: .8rem; line-height: 1.45; }
  .robot .coffee { height: 2.5rem; }
  .r-hero .coffee, .r-last .coffee { margin-top: .75rem; }
  .robot .tag { margin-top: .5rem; }
  .to-orbit { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .r-rows li::after, .r-lines li, .robot .coffee, .r-stage, .robot .poster { transition: none; }
}