/* Tech Tea Studio
   Porcelain page, steeped-tea boxes, brand magenta and teal from the logo.
   Display: Unbounded. Body: Onest. Numbers and handles: Martian Mono. */

:root {
    --porcelain: #F3F2F7;
    --paper: #FFFFFF;
    --ink: #17121C;
    --slate: #625B6C;
    --hairline: rgba(23, 18, 28, 0.09);
    --steep: #130A17;
    --magenta: #B4189C;
    --teal: #006C90;
    --amber: #F59E3D;

    --gold-1: #FFE7A8;
    --gold-2: #E9B949;
    --gold-3: #A8740F;
    --silver-1: #F7F9FC;
    --silver-2: #C3CAD4;
    --silver-3: #6F7986;
    --bronze-1: #F6C8A2;
    --bronze-2: #C47A45;
    --bronze-3: #7E4219;

    --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
    --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Martian Mono", ui-monospace, "Cascadia Mono", monospace;

    --radius-xl: 40px;
    --radius-l: 28px;
    --gutter: clamp(16px, 4vw, 40px);
    --maxw: 1240px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Focus moved by the keyboard stays clear of the fixed navigation, while a
   link to a section still brings the section's own edge to the top. */
html[data-page="studio"] { scroll-padding-top: 96px; }
html[data-page="studio"] main > section[id] { scroll-margin-top: -96px; }

/* The main page and its windows scroll without a visible scrollbar. */
html[data-page="studio"], html[data-page="studio"] .sheet { scrollbar-width: none; }
html[data-page="studio"]::-webkit-scrollbar, html[data-page="studio"] .sheet::-webkit-scrollbar { display: none; }

body {
    margin: 0;
    background: var(--porcelain);
    color: var(--ink);
    font: 400 17px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 6px; }
/* On dark surfaces the magenta ring would vanish into the tea, so it turns
   white between two dark bands, which shows over any color. */
[data-surface="dark"] :focus-visible,
.nav[data-tone="dark"] :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--steep); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: 16px; top: -60px; z-index: 100;
    padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff;
    transition: top .2s;
}
.skip-link:focus { top: 16px; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
    font: 500 12px/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--slate);
}

.section-title {
    font: 600 clamp(32px, 4.6vw, 62px)/1.04 var(--font-display);
    letter-spacing: -.035em;
    margin-top: 14px;
    text-wrap: balance;
}

.section-lead {
    margin-top: 18px;
    max-width: 620px;
    font-size: clamp(17px, 1.45vw, 20px);
    color: var(--slate);
    text-wrap: pretty;
}

.section-head { max-width: 780px; margin-bottom: 44px; }

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 600 16px/1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: transform .35s var(--spring), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-light { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); }
.btn-glass {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .18); }
.btn-dark { height: 44px; padding: 0 18px; font-size: 15px; background: var(--ink); color: #fff; }
.btn-dark svg { width: 16px; height: 16px; }

.round-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: transform .3s var(--spring), background-color .2s;
}
.round-button svg { width: 18px; height: 18px; }
.round-button:hover { transform: scale(1.06); }
.flip { transform: scaleX(-1); }

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .4);
    text-underline-offset: 3px;
    cursor: pointer;
}
.link-button:hover { text-decoration-color: #fff; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-weight: 600;
    color: var(--magenta);
}
.text-link svg { width: 16px; height: 16px; }

/* Reveal on scroll. Only hidden when the script is running. */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Navigation */

.nav {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: 0 12px;
    pointer-events: none;
}

.nav-pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    box-shadow: 0 10px 34px -12px rgba(30, 10, 40, .22);
    transition: background-color .45s, border-color .45s, color .45s, box-shadow .45s;
}

.nav[data-tone="dark"] .nav-pill {
    color: #fff;
    background: rgba(24, 12, 28, .34);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
    font: 600 15px/1 var(--font-display);
    letter-spacing: -.01em;
}
.brand-mark { width: 22px; height: 25px; color: var(--magenta); transition: color .45s, transform .6s var(--spring); }
.brand:hover .brand-mark { transform: rotate(-120deg); }
.nav[data-tone="dark"] .brand-mark { color: #fff; }

.nav-links { display: flex; gap: 2px; }
.nav-links a {
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    opacity: .72;
    transition: opacity .2s, background-color .2s;
}
.nav-links a:hover, .nav-links a.is-active { opacity: 1; background: rgba(23, 18, 28, .06); }
.nav[data-tone="dark"] .nav-links a:hover,
.nav[data-tone="dark"] .nav-links a.is-active { background: rgba(255, 255, 255, .12); }

.nav-cta {
    margin-left: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .45s, color .45s;
}
.nav[data-tone="dark"] .nav-cta { background: #fff; color: var(--ink); }

/* The language switch: the other language's code, small and quiet. */
.lang-switch {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    font: 600 12px var(--font-mono);
    letter-spacing: .06em;
    opacity: .72;
    transition: opacity .2s, background-color .2s;
}
.lang-switch:hover, .lang-switch:focus-visible { opacity: 1; background: rgba(23, 18, 28, .06); }
.nav[data-tone="dark"] .lang-switch:hover, .nav[data-tone="dark"] .lang-switch:focus-visible { background: rgba(255, 255, 255, .12); }
/* In the footer it is one more link, as legible as the others. */
.footer-links .lang-switch { height: auto; min-width: 0; padding: 0; font-size: 13px; opacity: 1; }

/* Hero: the big box of steeped tea */

.hero { padding: 0; }

/* Full bleed. The bottom 160px dissolve along the hexagon lattice into the
   next section, the same edge the team section uses: four rows of cells,
   the last ones loose and blurred, and room for them to be drawn whole. */
.hero-box {
    --fringe: 160px;
    /* The tiles of the edge picture are drawn at a fraction of a pixel, and
       their solid top row then shows through at the very bottom as a hairline:
       the last four pixels, where no cell reaches, are not painted. */
    clip-path: inset(0 0 4px 0);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: max(700px, 100svh);
    padding-bottom: var(--fringe);
    overflow: hidden;
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--fringe) + 2px) no-repeat,
        url("/static/studio/img/brand/hex-edge-bottom.svg") center bottom / 690px var(--fringe) repeat-x;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - var(--fringe) + 2px) no-repeat,
        url("/static/studio/img/brand/hex-edge-bottom.svg") center bottom / 690px var(--fringe) repeat-x;
    color: #fff;
    background:
        radial-gradient(60% 70% at 78% 30%, rgba(180, 24, 156, .75), transparent 70%),
        radial-gradient(50% 60% at 20% 80%, rgba(0, 108, 144, .55), transparent 70%),
        radial-gradient(35% 40% at 60% 75%, rgba(245, 158, 61, .45), transparent 70%),
        var(--steep);
}

.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .6s ease;
    touch-action: pan-y;
}
.hero-canvas.is-ready { opacity: 1; }

/* Once the simulation runs, its own shader darkens the text areas, so the
   CSS shade steps aside and the frame probe sees exactly what people see. */
.hero-canvas.is-ready ~ .hero-shade { opacity: 0; }

/* Adaptive hero text. When the first frame probe arrives, marked text is
   painted with a gradient sampled from the tea right behind it (see
   web/src/contrast.ts). Without WebGL the text simply stays white. */
.contrast-live [data-contrast="text"],
.contrast-live .cw {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.contrast-live [data-contrast="text"] * { color: transparent; -webkit-text-fill-color: transparent; }
.contrast-live .link-button { text-decoration-color: var(--ink-line, rgba(255, 255, 255, .4)); }
.btn-glass.is-on-light,
.stir.is-on-light {
    color: var(--ink);
    border-color: rgba(23, 18, 28, .3);
    background: rgba(255, 255, 255, .5);
}

/* Shown only when the browser cannot run the fluid simulation. */
.hero-logo { display: none; }
.no-webgl .hero-logo {
    display: block;
    position: absolute;
    top: 14%;
    right: 8%;
    z-index: -1;
    width: min(34vw, 440px);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}

.hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(19, 10, 23, .35) 0%, rgba(19, 10, 23, 0) 22%, rgba(19, 10, 23, 0) 52%, rgba(19, 10, 23, .62) 100%),
        radial-gradient(90% 70% at 0% 100%, rgba(19, 10, 23, .55), transparent 70%);
}

.hero-inner {
    align-self: end;
    width: 100%;
    max-width: 1240px;
    padding: 120px clamp(22px, 5vw, 72px) 34px;
}

/* Only as wide as its words, so the adaptive ink samples the tea behind them. */
.hero-eyebrow { width: fit-content; color: rgba(255, 255, 255, .72); }

.hero-title {
    margin-top: 18px;
    font: 600 clamp(44px, 8.6vw, 136px)/.95 var(--font-display);
    letter-spacing: -.045em;
}
/* "Сделано людьми," is far wider than "From People", so the Russian title
   is smaller: two lines at every width, and on a laptop the hero still ends
   with its stats and its hexagon edge above the fold. */
html[lang="ru"] .hero-title { font-size: clamp(22px, 7.5vw, 96px); }
.hero-title .line { display: block; overflow: hidden; padding: 0 .04em .07em 0; }
.hero-title .line > span { display: inline-block; }
.js .hero-title .line > span {
    transform: translateY(108%);
    animation: rise 1.15s var(--ease) forwards;
}
.js .hero-title .line:nth-child(2) > span { animation-delay: .12s; }

.hero-lead {
    max-width: 560px;
    margin-top: 26px;
    font-size: clamp(17px, 1.5vw, 20px);
    color: rgba(255, 255, 255, .8);
    text-wrap: pretty;
}

.js .hero-eyebrow, .js .hero-lead, .js .hero-actions, .js .hero-foot {
    opacity: 0;
    animation: fade-up 1s var(--ease) forwards;
}
.js .hero-eyebrow { animation-delay: .05s; }
.js .hero-lead { animation-delay: .35s; }
.js .hero-actions { animation-delay: .5s; }
.js .hero-foot { animation-delay: .8s; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero-foot {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px 32px;
    padding: 18px clamp(22px, 5vw, 72px) 22px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font: 500 12.5px/1.5 var(--font-mono);
    color: rgba(255, 255, 255, .7);
}

.brewing { display: flex; align-items: center; gap: 10px; min-width: 0; justify-self: start; }
.brewing .link-button { font-weight: 600; }
.pulse {
    position: relative;
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #4ADE80;
}
.pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid #4ADE80;
    animation: ping 2.2s var(--ease) infinite;
}

.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hero-facts b { color: #fff; font-weight: 600; }

/* The spoon stirs the tea again: a quiet round icon, brighter on hover. */
.stir {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
    opacity: .55;
    cursor: pointer;
    transition: opacity .25s, background-color .25s, color .25s, border-color .25s, transform .35s var(--spring);
}
.stir svg { width: 18px; height: 18px; }
.stir:hover, .stir:focus-visible { opacity: 1; border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .1); transform: rotate(-18deg); }
.stir.is-stirring svg { animation: stir-spin 1.2s linear infinite; }
.stir[hidden], .no-webgl [data-stir] { display: none; }

/* The spoon and the pause button sit together at the end of the foot. The
   pause button shows what a press does: pause while things move, play once
   they are still. */
.hero-tools { display: flex; align-items: center; gap: 4px; }
.motion-toggle:hover, .motion-toggle:focus-visible { transform: none; }
.motion-toggle .motion-play, .motion-off .motion-toggle .motion-pause { display: none; }
.motion-off .motion-toggle .motion-play { display: block; }

/* Hyperion story: scroll-driven on wide screens */

.story { position: relative; }

.story-stage {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) 7fr;
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.story-steps { position: relative; list-style: none; padding: 0; margin-top: 30px; }
.story-step h3 { font: 600 clamp(20px, 1.9vw, 26px)/1.2 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.story-step p { margin-top: 12px; color: var(--slate); font-size: 17.5px; }

/* Where the reader is in the story: numbered steps that jump on click, and a
   bar that fills as the page scrolls. */
.story-progress { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.story-nav { display: flex; gap: 2px; padding: 0; list-style: none; }
.story-nav-item {
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: 600 12px var(--font-mono);
    letter-spacing: .06em;
    color: var(--slate);
    cursor: pointer;
    transition: color .3s, background-color .3s;
}
.story-nav-item:hover { background: rgba(23, 18, 28, .06); color: var(--ink); }
.story-nav-item[aria-current="step"] {
    color: var(--magenta);
    background: color-mix(in srgb, var(--magenta) 10%, transparent);
    text-decoration: underline 2px;
    text-underline-offset: 4px;
}
.story-bar { position: relative; flex: 1; max-width: 220px; height: 4px; border-radius: 4px; background: var(--hairline); overflow: hidden; }
.story-bar span { position: absolute; inset: 0; border-radius: inherit; background: var(--magenta); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* Tells the reader that scrolling moves the story on, and what comes next. */
.story-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 2 * var(--gutter));
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px -18px rgba(40, 10, 50, .4);
    font: 500 12.5px/1.3 var(--font-mono);
    color: var(--slate);
    transform: translateX(-50%);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.story-hint-arrow { position: relative; width: 14px; height: 16px; flex: none; color: var(--magenta); }
.story-hint-arrow::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 2px;
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(5px) rotate(45deg); }
}
.story.is-last .story-hint { opacity: 0; transform: translate(-50%, 10px); pointer-events: none; }

/* The examples: a row of buttons under the title picks whose story is
   told. Without the script only the first example is there, so the buttons
   stay away. */
.story-scenes { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.js .story-scenes { display: flex; }
.story-scenes-label { margin-right: 4px; font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--slate); }
.story-step p + p { margin-top: 8px; }

.story-visual { position: relative; height: 480px; }
.story-scene { position: absolute; inset: 0; }
.story-scene:not([hidden]) { animation: scene-in .6s var(--ease); }
.story-scene-name, .app--grand { display: none; }
@keyframes scene-in { from { opacity: 0; transform: translateY(14px); } }

.app {
    position: absolute;
    width: 46%;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--hairline);
    box-shadow: 0 30px 60px -30px rgba(40, 10, 50, .35);
    overflow: hidden;
    transition: transform 1s var(--ease), opacity .8s var(--ease), filter .8s;
}
.app-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hairline);
    font: 500 11.5px var(--font-mono);
    color: var(--slate);
}
.app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E5E1EA; }
.app-bar span { margin-left: 8px; }
.app-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }

.plug {
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: var(--porcelain);
    font: 500 12.5px var(--font-mono);
    transition: background-color .6s, color .6s, border-color .6s, opacity .6s, box-shadow .6s;
}

.app--1 { left: 0; top: 30px; transform: rotate(-5deg); }
.app--2 { left: 22%; top: 230px; transform: rotate(2deg); z-index: 2; }
.app--3 { right: 0; top: 0; transform: rotate(5deg); }

.app--merged {
    left: 12%;
    top: 40px;
    width: 76%;
    z-index: 3;
    background: var(--steep);
    border-color: rgba(255, 255, 255, .08);
    color: #fff;
    opacity: 0;
    transform: scale(.86) translateY(30px);
}
.app--merged .app-bar { border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
.app--merged .app-bar i { background: rgba(255, 255, 255, .18); }
.app--merged .app-body { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: center; padding: 26px; }
.app-mark { width: 110px; height: 124px; color: var(--magenta); }
.plug-rail { display: flex; flex-wrap: wrap; gap: 8px; }
.app--merged .plug { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }

/* Plugins used by more than one business light up, one brand color each. */
.story[data-step="1"] .app .plug { opacity: .38; }
.story[data-step="1"] .app .plug--shared { opacity: 1; color: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.story[data-step="1"] .plug--s0, .story[data-step="2"] .app--merged .plug--s0 { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.story[data-step="1"] .plug--s1, .story[data-step="2"] .app--merged .plug--s1 { background: var(--teal); border-color: var(--teal); color: #fff; }
.story[data-step="1"] .plug--s2, .story[data-step="2"] .app--merged .plug--s2 { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.story[data-step="1"] .plug--s3, .story[data-step="2"] .app--merged .plug--s3,
.story[data-step="1"] .plug--s4, .story[data-step="2"] .app--merged .plug--s4 { background: #6E4BE0; border-color: #6E4BE0; color: #fff; }
.story[data-step="1"] .app--1 { transform: rotate(-2deg) translateX(10px); }
.story[data-step="1"] .app--3 { transform: rotate(2deg) translateX(-10px); }

.story[data-step="2"] .app--1,
.story[data-step="2"] .app--2,
.story[data-step="2"] .app--3 { opacity: 0; filter: blur(6px); }
.story[data-step="2"] .app--1 { transform: translate(45%, 30px) scale(.7) rotate(0); }
.story[data-step="2"] .app--2 { transform: translate(0, -40px) scale(.7); }
.story[data-step="2"] .app--3 { transform: translate(-45%, 60px) scale(.7) rotate(0); }
.story[data-step="2"] .app--merged { opacity: 1; transform: none; transition-delay: .2s; }

/* A short window (a laptop with the browser's bars) cannot hold the whole
   column under the navigation: the line above the title and the scroll hint
   go, and the title and the gaps shrink. */
@media (min-width: 960px) and (max-height: 700px) {
    .story-stage { padding-top: 76px; }
    .story .story-copy > .eyebrow, .story-hint { display: none; }
    .story .section-title { margin-top: 0; font-size: clamp(26px, 3vw, 38px); }
    .story-scenes { margin-top: 12px; }
    .story-steps { margin-top: 16px; }
    .story-progress { margin-top: 16px; }
}

/* Very wide screens show all the examples at once, each group of three
   under its name. The picked one is clear, the others step back; then they
   all merge into one window that holds every plugin, and at the end come
   apart again, in rows and in one look: one standard, not one monolith. */
@media (min-width: 2560px) {
    .story-stage { max-width: 2360px; grid-template-columns: minmax(440px, 3fr) 10fr; }
    .story-visual { height: min(800px, 74svh); margin-top: 30px; }
    .story-scene, .story-scene:not([hidden]), .story-scene[hidden] { display: block; inset: 0 auto 0 auto; width: 30%; animation: none; }
    .story-scene[data-scene="0"] { left: 0; }
    .story-scene[data-scene="1"] { left: 35%; }
    .story-scene[data-scene="2"] { left: 70%; }
    /* Only the windows step back: the name over them stays readable. */
    .story:not([data-step="2"]) .story-scene[hidden] .app { opacity: .5; filter: saturate(.4); }
    .story-scene-name { display: block; position: absolute; left: 0; top: -40px; font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--slate); transition: opacity .5s; }
    .story[data-step="2"]:not([data-split]) .story-scene-name { opacity: 0; }
    .story-scene .app { width: 70%; }
    .story-scene .app-bar { padding: 14px 16px; font-size: 13px; }
    .story-scene .plug { padding: 9px 13px; font-size: 14px; }
    .story-scene .app--1 { left: 0; top: 2%; }
    .story-scene .app--2 { left: auto; right: 0; top: 34%; }
    .story-scene .app--3 { left: 6%; right: auto; top: 66%; }
    .story-scene .app--merged { display: none; }
    .app--grand {
        display: block;
        left: 16%;
        top: 14%;
        width: 68%;
        z-index: 4;
        background: var(--steep);
        border-color: rgba(255, 255, 255, .08);
        color: #fff;
        opacity: 0;
        transform: scale(.86) translateY(30px);
    }
    .app--grand .app-bar { border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
    .app--grand .app-bar i { background: rgba(255, 255, 255, .18); }
    .app--grand .app-body { display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: center; padding: 40px; }
    .app--grand .app-mark { width: 150px; height: 169px; }
    .app--grand .plug { padding: 10px 14px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); font-size: 14px; }
    .story[data-step="2"] .app--grand { opacity: 1; transform: none; transition-delay: .2s; }
    /* The end of the scroll: the big window lets go, and every business has
       its own window back, now in rows and in the look of the platform. */
    .story[data-split] .app--grand { opacity: 0; transform: scale(1.05); transition-delay: 0s; }
    .story[data-split] .story-scene .app--1,
    .story[data-split] .story-scene .app--2,
    .story[data-split] .story-scene .app--3 {
        left: 0;
        right: auto;
        width: 100%;
        opacity: 1;
        filter: none;
        transform: none;
        transition-delay: .25s;
    }
    .story[data-split] .story-scene .app--1 { top: 0; }
    .story[data-split] .story-scene .app--2 { top: 34%; }
    .story[data-split] .story-scene .app--3 { top: 68%; }
    /* The windows take the look of the platform for the whole last step,
       while they are out of sight behind the big one, so they neither come
       back in the old look nor lose the new one in view. */
    .story[data-step="2"] .story-scene .app--1,
    .story[data-step="2"] .story-scene .app--2,
    .story[data-step="2"] .story-scene .app--3 { background: var(--steep); border-color: rgba(255, 255, 255, .08); color: #fff; }
    .story[data-step="2"] .story-scene .app-bar { border-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
    .story[data-step="2"] .story-scene .app-bar i { background: rgba(255, 255, 255, .18); }
    .story[data-step="2"] .story-scene .plug { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }
}

@media (min-width: 960px) {
    .story { height: 320vh; }
    .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
    /* The steps lie in one cell, so their box is as tall as the longest of
       them at any width, and what follows never runs into the text. */
    .story-steps { display: grid; }
    .story-step { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
    .story-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
}

@media (max-width: 959px) {
    .story { padding: 110px 0 20px; }
    .story-stage { grid-template-columns: 1fr; }
    .story-steps { display: grid; gap: 28px; }
    .story-progress, .story-hint { display: none; }
    .story-visual { height: auto; }
    /* The picture comes right after the buttons that change it, before the
       three steps: the column's own children take their places in the page. */
    .story-stage { gap: 0; }
    .story-copy { display: contents; }
    .story-visual { order: 1; margin: 26px 0 4px; }
    .story-steps, .story-progress, .story-hint, .story-stage > .sr-only { order: 2; }
    .story-scene { position: static; }
    .app--1, .app--2, .app--3 { display: none; }
    .app--merged { position: relative; left: 0; top: 0; width: 100%; opacity: 1; transform: none; }
}

/* Work */

.work { padding: clamp(110px, 12vw, 170px) 0 clamp(80px, 9vw, 130px); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--spring);
}
.chip span { font: 500 11.5px var(--font-mono); color: var(--slate); transition: color .25s; }
.chip:hover { transform: translateY(-1px); border-color: rgba(23, 18, 28, .2); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.is-active span { color: rgba(255, 255, 255, .6); }

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 20px;
}

.tile {
    position: relative;
    isolation: isolate;
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-l);
    border: 1px solid var(--hairline);
    background: #fff;
    overflow: hidden;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.tile[hidden] { display: none; }

/* "And much more" closes the main grid and opens the libraries. */
.tile--more {
    grid-column: span 4;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    min-height: 240px;
    padding: 26px 26px 24px;
    border: 1.5px dashed rgba(23, 18, 28, .2);
    background: linear-gradient(160deg, #fff, var(--porcelain));
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.tile--more:hover { border-color: var(--magenta); }
.tile--more:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.more-stack { display: flex; margin-bottom: auto; }
.more-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 3px solid #fff;
    background: #fff;
    box-shadow: 0 8px 20px -10px rgba(40, 10, 50, .35);
    overflow: hidden;
    font: 700 15px var(--font-display);
    color: var(--magenta);
    transform: rotate(calc(var(--i) * 5deg - 6deg));
    transition: transform .45s var(--spring);
}
.more-icon + .more-icon { margin-left: -14px; }
.more-icon img { width: 100%; height: 100%; object-fit: cover; }
.tile--more:hover .more-icon { transform: rotate(0) translateY(-4px); }
.more-title { font: 600 26px/1.1 var(--font-display); letter-spacing: -.03em; }
.more-count { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--slate); }
/* Room for the arrow in the corner, so a long title wraps before it. */
.more-title, .more-count { padding-right: 50px; }
.more-arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    transition: transform .45s var(--spring), background-color .25s;
}
.more-arrow svg { width: 18px; height: 18px; }
.tile--more:hover .more-arrow { transform: translateX(4px); background: var(--magenta); }

.work-panel[hidden] { display: none; }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: 500 14px var(--font-body);
    cursor: pointer;
    transition: border-color .2s, transform .35s var(--spring);
}
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { border-color: rgba(23, 18, 28, .3); transform: translateX(-2px); }
.section-title:focus { outline: none; }
.tile--hero { grid-column: span 6; }
.tile--wide { grid-column: span 8; }
.tile--compact { grid-column: span 3; }

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .22), transparent 60%);
    opacity: 0;
    transition: opacity .4s;
}
.tile:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(40, 10, 50, .34); }
.tile:hover::after { opacity: 1; }

.tile-cover, .sheet-art {
    position: relative;
    height: 232px;
    overflow: hidden;
    background: var(--accent);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--accent) 72%, #fff) 0%,
        var(--accent) 48%,
        color-mix(in srgb, var(--accent) 62%, #000) 100%);
}
.tile-cover::before, .sheet-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/static/studio/img/brand/hex-grid.svg") center / 40px auto;
    opacity: .12;
    -webkit-mask-image: radial-gradient(90% 90% at 30% 20%, #000, transparent 75%);
    mask-image: radial-gradient(90% 90% at 30% 20%, #000, transparent 75%);
}
.tile--hero .tile-cover { height: 380px; }

.tile-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.tile-kind { font: 500 11.5px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.tile-name { font: 600 22px/1.16 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.tile--hero .tile-name { font-size: clamp(28px, 2.6vw, 38px); }
.tile-pitch { color: var(--slate); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.tile--hero .tile-pitch { font-size: 18px; max-width: 46ch; }
.tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: auto;
    padding-top: 12px;
    font: 500 11.5px/1.5 var(--font-mono);
    color: var(--slate);
}
.tile-meta:empty { display: none; }

.tile--compact .tile-top { padding: 22px 22px 0; }
.tile-icon {
    width: 64px;
    height: 64px;
    padding: 8px;
    border-radius: 18px;
    object-fit: contain;
    background: color-mix(in srgb, var(--accent) 12%, #fff);
}
.tile-icon--mono { display: grid; place-items: center; font: 700 20px var(--font-display); color: var(--accent); }
.tile--compact .tile-body { padding: 16px 22px 22px; }
.tile--compact .tile-name { font-size: 16.5px; line-height: 1.25; }
.tile--compact .tile-pitch {
    font-size: 14.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The libraries have the view to themselves, and the Russian pitches run
   longer, up to five lines on a four-column desktop: no clamp here, so they
   are read to the end. */
.grid--libraries .tile--compact .tile-pitch { -webkit-line-clamp: none; }

.tile-open {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}
.tile-open:focus-visible { outline-offset: -3px; border-radius: var(--radius-l); }

/* Cover art */

.art { position: absolute; inset: 0; display: grid; place-items: center; }

.art--icon img {
    width: 40%;
    max-width: 150px;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .28));
    transition: transform .7s var(--spring);
}
.tile:hover .art--icon img, .tile:hover .art--motif .motif { transform: translateY(-6px) scale(1.04); }

.art--motif .motif {
    width: 56%;
    max-width: 230px;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .22));
    transition: transform .7s var(--spring);
}
.tile--wide .art--motif .motif { width: 34%; }

.art--mono span { font: 700 72px var(--font-display); color: rgba(255, 255, 255, .92); }

.art--window .window {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -8%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 50px -10px rgba(0, 0, 0, .45);
    transition: transform .7s var(--ease);
}
.tile:hover .art--window .window { transform: translateY(-8px); }

.art--phone .phone {
    position: absolute;
    left: 50%;
    top: 26px;
    width: 124px;
    padding: 5px;
    border-radius: 24px;
    background: #0B0D14;
    box-shadow: 0 30px 50px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12);
    transform: translateX(-50%) rotate(-6deg);
    transition: transform .7s var(--ease);
}
.art--phone .phone img { border-radius: 19px; }
.tile:hover .art--phone .phone { transform: translateX(-50%) rotate(-3deg) translateY(-8px); }
.art--phone .art-badge {
    position: absolute;
    right: 14%;
    top: 22%;
    width: 64px;
    border-radius: 16px;
    box-shadow: 0 16px 30px -8px rgba(0, 0, 0, .5);
    transform: rotate(8deg);
}

.art--hyperion::before {
    content: "";
    position: absolute;
    inset: 15% 25%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(120, 190, 255, .35), transparent);
    filter: blur(10px);
}
/* The logo stands exactly as in the Hyperion README; hovering only lifts it. */
.art--hyperion .art-logo {
    width: 34%;
    max-width: 170px;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)) brightness(1.08);
    transition: transform 1s var(--spring);
}
.tile:hover .art--hyperion .art-logo { transform: translateY(-6px) scale(1.04); }

.float-chip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font: 500 12px var(--font-mono);
    white-space: nowrap;
    animation: bob 6s ease-in-out infinite;
}
.float-chip:nth-of-type(2) { animation-delay: -1.5s; }
.float-chip:nth-of-type(3) { animation-delay: -3s; }
.float-chip:nth-of-type(4) { animation-delay: -4.5s; }

.art--chronos .art-shot {
    position: absolute;
    right: 6%;
    top: 12%;
    width: 58%;
    border-radius: 14px;
    box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .6);
    transform: rotate(4deg);
    transition: transform .8s var(--ease);
}
.art--chronos .art-logo {
    position: absolute;
    left: 8%;
    bottom: 6%;
    width: 38%;
    max-width: 200px;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .4));
    transition: transform .8s var(--spring);
}
.tile:hover .art--chronos .art-shot { transform: rotate(2deg) translateY(-8px); }
.tile:hover .art--chronos .art-logo { transform: rotate(-8deg) translateY(-6px); }

.motif--live .ring { transform-box: view-box; transform-origin: 80px 66px; animation: ring 2.6s var(--ease) infinite; }
.motif--live .ring--2 { animation-delay: 1.3s; }

/* Medals are orders. The shape says what kind of project it was for (star,
   Maltese cross, laurels, cross pattee), the metal says the place. The
   drawings live in the page's SVG sprite and read these colors. */

.metal-gold { --m1: #FFE7A8; --m2: #E9B949; --m3: #A8740F; }
.metal-silver { --m1: #F7F9FC; --m2: #C3CAD4; --m3: #6F7986; }
.metal-bronze { --m1: #F6C8A2; --m2: #C47A45; --m3: #7E4219; }
.order-star { --e1: #E04BB3; --e2: #9A1283; }
.order-cross { --e1: #2BA8CF; --e2: #00577A; }
.order-pattee { --e1: #5468B0; --e2: #18224A; }
.order-laurel { --e1: #FFFFFF; --e2: #FFFFFF; }

.order {
    position: relative;
    display: block;
    width: var(--disc, 32px);
    height: var(--disc, 32px);
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .5));
    transition: transform .3s var(--spring);
}
.order svg { width: 100%; height: 100%; overflow: visible; }
.order-core {
    position: absolute;
    inset: 33%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--m1);
}
.order-core img { width: 76%; height: 76%; object-fit: contain; }
.order-core > span { font: 700 7px var(--font-display); color: var(--m3); }

@keyframes breeze { from { transform: rotate(-1.4deg); } to { transform: rotate(1.6deg); } }

.hang {
    --disc: 78px;
    position: absolute;
    top: -2px;
    right: 22px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 50% 0;
    pointer-events: none;
    animation: breeze 3.6s ease-in-out infinite alternate;
}
.tile:nth-child(3n) .hang { animation-delay: -1.2s; }
.tile:nth-child(3n + 1) .hang { animation-delay: -2.4s; animation-duration: 4.2s; }
.tile:hover .hang { animation: swing 1.4s var(--ease); }
.hang-mount { position: relative; width: 32px; height: 42px; margin-bottom: -9px; }
.hang-mount::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--ribbon) 0 26%, rgba(255, 255, 255, .88) 26% 36%,
        var(--ribbon) 36% 64%, rgba(255, 255, 255, .88) 64% 74%,
        var(--ribbon) 74%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 50% 100%, 0 calc(100% - 9px));
}
/* German-style orders hang from a triangle-folded ribbon and a metal link */
.order-cross .hang-mount::before, .order-pattee .hang-mount::before { inset: 0 -3px auto; height: 24px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.order-cross .hang-mount::after, .order-pattee .hang-mount::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 0;
    left: calc(50% - 1.5px);
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(var(--m1), var(--m3));
}
/* The leader's face sits in the middle of the order, ringed in their color. */
.hang .order-core { inset: 31%; box-shadow: 0 0 0 2px var(--ribbon); }
.hang .order-core .avatar { width: 100%; height: 100%; border-radius: 0; }
.hang .order-core .avatar--mono { font-size: 13px; }
.tile--compact .hang { --disc: 62px; right: 16px; }
.tile--compact .hang-mount { width: 28px; height: 36px; }

.avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--porcelain);
}
.avatar--mono {
    display: grid;
    place-items: center;
    background: var(--accent, var(--ink));
    color: #fff;
    font: 700 11px var(--font-display);
}

.coin {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 50%;
    vertical-align: -1px;
}
.coin--gold { background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-2) 55%, var(--gold-3)); }
.coin--silver { background: radial-gradient(circle at 35% 30%, var(--silver-1), var(--silver-2) 55%, var(--silver-3)); }
.coin--bronze { background: radial-gradient(circle at 35% 30%, var(--bronze-1), var(--bronze-2) 55%, var(--bronze-3)); }

/* The team. On screens wider than Full HD the stage pins and the page walks
   through the people one at a time, like the Hyperion story, and the
   background takes the color of the card in view. Up to Full HD, and without
   the script, the people stand as a grid of small cards: see "The team up to
   Full HD" further down. */

.team { padding: 0; }

/* The top 140px and the bottom 160px of the section are cut along the
   hexagon pattern and dissolve into loose, blurred cells; the bottom edge is
   taller by the 20px its last row needs to be drawn whole. The page keeps
   the height a whole number of pattern rows plus those 20px (--snap), so the
   bottom cut lines up with the pattern as well. */
.stage {
    --fringe: 140px;
    --fringe-bottom: 160px;
    /* As under the hero: no hairline at the very bottom of the edge. */
    clip-path: inset(0 0 4px 0);
    position: relative;
    overflow: hidden;
    overflow: clip;
    padding: calc(clamp(96px, 10vw, 150px) + var(--fringe)) 0 calc(clamp(64px, 8vw, 110px) + var(--fringe-bottom) + var(--snap, 0px));
    -webkit-mask:
        url("/static/studio/img/brand/hex-edge-top.svg") center top / 690px var(--fringe) repeat-x,
        linear-gradient(#000 0 0) left 0 top calc(var(--fringe) - 1px) / 100% calc(100% - var(--fringe) - var(--fringe-bottom) + 2px) no-repeat,
        url("/static/studio/img/brand/hex-edge-bottom.svg") center bottom / 690px var(--fringe-bottom) repeat-x;
    mask:
        url("/static/studio/img/brand/hex-edge-top.svg") center top / 690px var(--fringe) repeat-x,
        linear-gradient(#000 0 0) left 0 top calc(var(--fringe) - 1px) / 100% calc(100% - var(--fringe) - var(--fringe-bottom) + 2px) no-repeat,
        url("/static/studio/img/brand/hex-edge-bottom.svg") center bottom / 690px var(--fringe-bottom) repeat-x;
    color: #fff;
    background:
        radial-gradient(46% 40% at 36% 0%, rgba(233, 185, 73, .22), transparent 70%),
        radial-gradient(50% 50% at 10% 10%, rgba(180, 24, 156, .3), transparent 70%),
        radial-gradient(40% 40% at 90% 20%, rgba(0, 108, 144, .3), transparent 70%),
        var(--steep);
}
/* The pattern sits above the color glow and below the content. */
.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url("/static/studio/img/brand/hex-grid.svg") center top / 46px auto;
    opacity: .075;
    pointer-events: none;
}
.stage > .container { position: relative; z-index: 2; }
.stage .eyebrow { color: rgba(255, 255, 255, .72); }
.stage .section-lead { color: rgba(255, 255, 255, .78); }
/* The studio about itself, above the people: the first sentence stands out. */
.team-lead { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; max-width: 660px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .76); text-wrap: pretty; }
.team-lead svg { flex: none; width: 22px; height: 22px; margin-top: .22em; color: rgba(255, 255, 255, .6); }
.team-lead strong { font-weight: 600; color: #fff; }
/* The people shown are the core team; the line after them stands for the
   rest, who have no portrait here. */
.team-more { display: flex; align-items: center; gap: 16px; margin-top: 40px; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, .84); text-wrap: balance; }
.team-more-faces { display: inline-flex; flex: none; }
.team-more-faces i { width: 36px; height: 36px; margin-left: -11px; border: 1.5px dashed rgba(255, 255, 255, .7); border-radius: 50%; background: color-mix(in srgb, #fff 16%, var(--steep)); }
.team-more-faces i:first-child { margin-left: 0; }

.team-track {
    --tint: #B4189C;
    --glow-x: 28%;
    --per: 45svh;      /* the scroll each person holds while pinned */
    --chrome: 300px;   /* nav clearance, names row, card padding and medals */
    position: relative; /* no z-index: the glow has to stay under the hex pattern */
    margin-top: 12px;
}
.team-glow {
    position: absolute;
    inset: -8% calc(50% - 50vw);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(52% 44% at var(--glow-x) 50%, color-mix(in srgb, var(--tint) 72%, transparent), transparent 72%),
        radial-gradient(60% 40% at calc(100% - var(--glow-x)) 78%, color-mix(in srgb, var(--tint) 34%, transparent), transparent 75%),
        linear-gradient(color-mix(in srgb, var(--tint) 22%, transparent), color-mix(in srgb, var(--tint) 22%, transparent));
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.team-stage { position: relative; z-index: 2; }

.team-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1640px;
    margin: 0 auto 18px;
    padding: 0 clamp(16px, 3vw, 48px);
}
.team-nav ol { display: flex; gap: 4px; padding: 0; list-style: none; }
.team-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 500 12.5px var(--font-mono);
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    transition: color .3s, background-color .3s, border-color .3s;
}
.team-nav-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.team-nav-item[aria-current] {
    color: #fff;
    border-color: color-mix(in srgb, var(--accent) 60%, rgba(255, 255, 255, .2));
    background: color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, .06));
}
.team-nav-item .avatar { transition: box-shadow .3s; }
.team-nav-item[aria-current] .avatar { box-shadow: 0 0 0 2px var(--accent); }
.team-progress { position: relative; flex: 1; min-width: 32px; max-width: 220px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.team-progress span { position: absolute; inset: 0; border-radius: inherit; background: var(--tint); transform: scaleX(var(--p, 0)); transform-origin: left; }
.team-next {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font: 500 12.5px var(--font-mono);
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, transform .35s var(--spring);
}
.team-next[hidden] { display: none; }
.team-next svg { width: 16px; height: 16px; flex: none; }
.team-next:hover { background: rgba(255, 255, 255, .16); transform: translateX(3px); }

/* A scroller clips what spills out, so the cards get room above for their glow. */
.team-rail {
    display: flex;
    padding-top: 40px;
    margin-top: -40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.team-rail::-webkit-scrollbar { display: none; }
/* Block, not flex: with flex, the auto side margins of .member-body shrink
   the card to its content width. */
.member {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 clamp(16px, 3vw, 48px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.member:focus { outline: none; box-shadow: none; }

/* Pinned: the stage sticks and each person holds var(--per) of scroll. The
   glow is a sticky sibling of the stage, taller than the screen and stuck
   20vh above it, so its soft edges only show while the section scrolls in
   and out. */
.team-track.is-pinned { height: calc(100svh + var(--people) * var(--per)); }
.is-pinned .team-glow { position: sticky; inset: -20vh auto auto auto; width: 100vw; height: 140vh; margin: 0 0 -140vh calc(50% - 50vw); }
.is-pinned .team-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 84px 0 16px;
}
/* A scroller in a flex column may shrink below its content, which would
   hide a card that does not fit instead of showing that it does not. */
.is-pinned .team-bar, .is-pinned .team-rail { flex: none; }
.is-pinned .team-bar { width: 100%; }
.is-pinned .team-rail { overflow: hidden; }

/* --focus runs from 0 (off to the side) to 1 (in view). */
.js .member { --focus: 0; }
.member-body {
    max-width: 1544px;
    margin-inline: auto;
    opacity: calc(.2 + .8 * var(--focus, 1));
    transform: scale(calc(.9 + .1 * var(--focus, 1)));
    filter: blur(calc((1 - var(--focus, 1)) * 3.4px)) saturate(calc(.45 + .55 * var(--focus, 1)));
    will-change: transform, opacity, filter;
}
/* Keyboard focus inside a card off to the side shows it in full, and so
   does a system that asks for more contrast. */
.member:has(:focus-visible) .member-body { opacity: 1; transform: none; filter: none; }
@media (prefers-contrast: more) {
    .member-body { opacity: 1; transform: none; filter: none; }
}

/* The photo follows the screen height, so the card fits the pinned stage. */
.member-card {
    --photo-w: clamp(220px, calc((100svh - var(--chrome)) * .8), 41%);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: var(--photo-w) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 48px);
    padding: 20px;
    border-radius: 38px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-color: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, .15));
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, .06)), rgba(255, 255, 255, .03) 55%, rgba(19, 10, 23, .4));
    box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .85), 0 0 140px -60px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.member--right .member-card { grid-template-columns: minmax(0, 1fr) var(--photo-w); }
.member--right .member-photo { order: 2; }
.is-leader .member-card {
    border-color: rgba(233, 185, 73, .45);
    background: linear-gradient(160deg, rgba(233, 185, 73, .14), rgba(255, 255, 255, .03) 60%);
    box-shadow: 0 50px 110px -50px rgba(233, 185, 73, .5), inset 0 1px 0 rgba(255, 238, 190, .2);
}

/* A photo keeps its own proportions: the frame follows the picture instead
   of stretching to the height of the text next to it. */
.member-photo {
    position: relative;
    align-self: center;
    border-radius: 26px;
    overflow: hidden;
    background: var(--accent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent) 60%, color-mix(in srgb, var(--accent) 55%, #000));
}
.member-photo img {
    display: block;
    width: 100%;
    height: auto;
    /* Holds a portrait-shaped place until the picture has loaded. */
    aspect-ratio: auto 4 / 5;
    max-height: calc(100svh - var(--chrome));
    object-fit: cover;
    transition: transform 1s var(--ease);
}
.member:hover .member-photo img { transform: scale(1.04); }
.portrait-mono {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    font: 700 clamp(56px, 7vw, 96px) var(--font-display);
    color: rgba(255, 255, 255, .92);
}
.leader-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    border-radius: 999px;
    background: rgba(19, 10, 23, .62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--gold-1);
    font: 600 10.5px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.leader-badge svg { width: 14px; height: 14px; }

.member-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 20px 8px 0; }
.member--right .member-text { padding: 12px 0 8px 20px; }
.member-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    font: 500 11.5px/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .82);
}
.member-since { color: rgba(255, 255, 255, .72); }
.member-name {
    margin-top: 14px;
    font: 600 clamp(30px, 3.4vw, 52px)/1.02 var(--font-display);
    letter-spacing: -.035em;
    text-wrap: balance;
}
.member-aka { margin-top: 8px; font: 500 12.5px var(--font-mono); color: rgba(255, 255, 255, .8); }
.member-facts { display: grid; gap: 14px; margin-top: 22px; max-width: 62ch; }
.member-fact dt {
    font: 500 11px var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .8);
    color: color-mix(in srgb, var(--accent) 20%, #fff);
}
.member-fact dd { margin-top: 5px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.member-fact .hint {
    padding: 10px 12px;
    border: 1px dashed rgba(255, 255, 255, .32);
    border-radius: 12px;
    font: 500 12.5px/1.5 var(--font-mono);
    color: rgba(255, 255, 255, .5);
}
.member-links { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 22px; }
.social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 18px 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: 600 15px var(--font-body);
    transition: background-color .2s, border-color .2s, transform .35s var(--spring), box-shadow .3s;
}
a.social:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .42); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
.social-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.social-icon svg { width: 17px; height: 17px; }
.social--github .social-icon { background: #fff; color: #17121C; }
.social--instagram .social-icon { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 62%, #285AEB 92%); }
.social--telegram .social-icon { background: #229ED9; }
.social--tiktok .social-icon { background: #010101; box-shadow: -1.5px -1px 0 #25F4EE, 1.5px 1px 0 #FE2C55; }
.social--card { padding: 0 16px 0 20px; background: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, .08)); border-color: color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, .2)); }
.social--card svg { width: 16px; height: 16px; }
.social--empty { border-style: dashed; border-color: rgba(255, 255, 255, .32); background: transparent; color: rgba(255, 255, 255, .55); font: 500 12.5px var(--font-mono); }
.social--empty .social-icon { opacity: .6; }

.tally { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font-mono); letter-spacing: 0; color: rgba(255, 255, 255, .88); }
.tally .coin { margin-left: 6px; }
.tally .coin:first-child { margin-left: 0; }

/* Orders hanging from the bottom edge of each card. Every other one hangs
   lower, so a long row can overlap without the orders colliding. */

.medal-row {
    --disc: 34px;
    --ribbon: 18px;
    --zig: 26px;
    --pad: 34px;
    --step: min(42px, calc((100% - 2 * var(--pad) - var(--disc)) / max(1, calc(var(--n) - 1))));
    position: relative;
    z-index: 1;
    height: calc(var(--ribbon) + var(--zig) + var(--disc) + 14px);
    margin-top: -2px;
}

.medal {
    position: absolute;
    top: 0;
    left: calc(var(--pad) + var(--i) * var(--step));
    z-index: calc(2 - var(--odd));
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--disc);
    padding: 0;
    border: 0;
    background: none;
    transform-origin: 50% 0;
    rotate: var(--swing, 0deg);
    cursor: pointer;
    animation: breeze calc(3s + var(--odd) * .8s) ease-in-out calc(var(--i) * -.41s) infinite alternate;
}
.member--right .medal { left: auto; right: calc(var(--pad) + var(--i) * var(--step)); }
.medal:hover, .medal:focus-visible { z-index: 5; }
.medal:focus-visible { outline: none; box-shadow: none; }
.medal:focus-visible .order { outline: 2px solid #fff; outline-offset: 3px; border-radius: 50%; }
.medal:hover .order { transform: scale(1.22); }

/* Soviet-style orders hang from a pentagonal ribbon block */
.medal-mount { position: relative; width: 16px; height: calc(var(--ribbon) + var(--odd) * var(--zig)); margin-bottom: -5px; }
.medal-mount::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        var(--accent) 0 26%, rgba(255, 255, 255, .88) 26% 36%,
        var(--accent) 36% 64%, rgba(255, 255, 255, .88) 64% 74%,
        var(--accent) 74%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 50% 100%, 0 calc(100% - 6px));
}
/* German-style ones from a triangle-folded ribbon and a metal link */
.order-cross .medal-mount::before, .order-pattee .medal-mount::before { inset: 0 -2px auto; height: 15px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.order-cross .medal-mount::after, .order-pattee .medal-mount::after {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 0;
    left: calc(50% - 1px);
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(var(--m1), var(--m3));
}

.medal-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 8px 11px;
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: 500 12px/1.35 var(--font-body);
    text-align: left;
    box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translate(-50%, 4px);
    pointer-events: none;
    transition: opacity .2s, transform .25s var(--ease);
}
.medal-tip b { display: block; font-weight: 600; }
.medal:hover .medal-tip, .medal:focus-visible .medal-tip { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* The pointer can cross the gap from the medal to its tip and stay on the
   tip; Escape hides it (medals.ts). */
.medal-tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.medal.tip-off .medal-tip { opacity: 0 !important; pointer-events: none !important; }
/* A tip opens over the card, so the row comes up above it; the outermost
   medal's tip keeps to the card's edge, where the rail would cut it. */
.medal-row:hover, .medal-row:focus-within { z-index: 3; }
.medal:first-child .medal-tip { left: -8px; transform: translate(0, 4px); }
.member--right .medal:first-child .medal-tip { left: auto; right: -8px; }
.medal:first-child:hover .medal-tip, .medal:first-child:focus-visible .medal-tip { transform: none; }

.js .medal.is-dropping { animation: drop .8s var(--spring) both; animation-delay: calc(.45s + var(--i) * .04s); }

.order-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
    font: 500 12px var(--font-mono);
    color: rgba(255, 255, 255, .74);
}
.order-legend li { display: inline-flex; align-items: center; gap: 10px; }
.order-legend .order { --disc: 28px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.legend-metals .coin { margin-right: -4px; }
.legend-metals .coin:last-of-type { margin-right: 2px; }

/* Scoreboard */

.scoreboard { scroll-margin-top: 96px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; margin-top: 56px; }
/* Without the races (they are commit counts, shown only in -dev) the table stands alone. */
.scoreboard--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-inline: auto; }
.scoreboard--solo + .footnote { max-width: 860px; margin-inline: auto; }
.table-card, .races {
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
}
.card-title { margin-bottom: 14px; font: 600 16px var(--font-display); letter-spacing: -.01em; }

.medal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.medal-table th, .medal-table td { padding: 12px 8px; text-align: left; border-top: 1px solid rgba(255, 255, 255, .08); font-weight: 500; }
.medal-table thead th, .medal-table thead th.num { border-top: 0; padding-top: 0; font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .72); }
.medal-table .num { text-align: right; font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.medal-table .rank-cell { width: 28px; font: 600 13px var(--font-mono); color: rgba(255, 255, 255, .72); }
.medal-table .is-leader .rank-cell { color: var(--gold-1); }
.who { display: inline-flex; align-items: center; gap: 12px; }
/* Big enough to tell people apart, ringed in their own color. */
.who .avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--accent, transparent); }
.chase-col { width: 34%; padding-left: 18px !important; }
.chase { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.chase span { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold-2)); }
.chase-label { display: block; margin-top: 6px; font: 500 11px var(--font-mono); color: rgba(255, 255, 255, .72); white-space: nowrap; }
.chase-inline { display: none; margin-top: 2px; font: 500 10.5px var(--font-mono); color: rgba(255, 255, 255, .72); }

.race-list { list-style: none; padding: 0; }
.race { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.race:first-child { border-top: 0; padding-top: 2px; }
.race-project { padding: 0; border: 0; background: none; color: #fff; font: 600 15px var(--font-display); letter-spacing: -.01em; cursor: pointer; text-align: left; }
.race-project:hover { text-decoration: underline; text-underline-offset: 3px; }
.race-line { margin: 6px 0 12px; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.race-line strong { color: #fff; font-weight: 600; }
.race-bar { display: flex; gap: 3px; height: 28px; font: 600 11px var(--font-mono); }
.race-bar span { display: flex; align-items: center; min-width: max-content; padding: 0 10px; border-radius: 8px; white-space: nowrap; }
.race-a { flex: var(--a) 1 0; background: var(--accent); }
.race-b { flex: var(--b) 1 0; justify-content: flex-end; background: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, .08)); }

.footnote { margin-top: 26px; font: 500 11.5px var(--font-mono); color: rgba(255, 255, 255, .7); }

/* Blog (the section keeps its old id and class, news, so old links work) */

.news { padding: clamp(110px, 12vw, 160px) 0 clamp(70px, 8vw, 110px); }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.news-actions { display: flex; align-items: center; gap: 22px; }
.news-all { margin: 0; white-space: nowrap; }
.rail-nav { display: flex; gap: 10px; }
.rail-nav[hidden] { display: none; }
.rail-nav .round-button[aria-disabled="true"] { opacity: .35; cursor: default; transform: none; }

/* The blog carousel starts at the left edge of the heading (review F034)
   and shows about two and a third cards; the card the rail cuts off is
   blurred and dimmed, so it is clear there is more to scroll to. The rail
   reaches 12px past the container on both sides, so the shadows and the
   focus ring of a card are not clipped. */
.news-rail {
    display: flex;
    gap: 20px;
    margin: 0 -12px;
    padding: 8px 12px 34px;
    overflow-x: auto;
    scroll-padding-inline: 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.news-rail::-webkit-scrollbar { display: none; }
.news-rail:focus-visible { outline-offset: -3px; }
.news-slide {
    flex: 0 0 calc((100% - 40px) / 2.3);
    min-width: 0;
    scroll-snap-align: start;
    transition: filter .45s var(--ease), opacity .45s var(--ease);
}
.news-slide.is-peek { filter: blur(3px); opacity: .5; }
.news-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.news-rail.is-dragging .blog-card { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
    .news-rail { cursor: grab; }
}

/* A post as a card: a landscape 4:3 link, the cover on top (about 60
   percent, whatever the text below leaves), then the date, the reading time,
   the title and the teaser. The type follows the width of the card, so the
   same card reads well in the rail, in the blog grid and under a post. */
.blog-card {
    --accent: var(--magenta);
    position: relative;
    isolation: isolate;
    container: blog-card / inline-size;
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 3;
    padding: 10px;
    border-radius: var(--radius-l);
    border: 1px solid var(--hairline);
    background: #fff;
    overflow: hidden;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .3s;
}
/* The light under the pointer (covers.ts moves it), like the project tiles. */
.blog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .3), transparent 62%),
        radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .4s;
}
.blog-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--hairline));
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--accent) 40%, rgba(40, 10, 50, .5));
}
.blog-card:hover::after { opacity: 1; }
.blog-card:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: var(--radius-l); }

.blog-cover {
    position: relative;
    flex: 1 1 auto;
    min-height: 36%;
    overflow: hidden;
    border-radius: calc(var(--radius-l) - 10px);
    background: radial-gradient(130% 120% at 50% 40%, #FBFAFD 0%, #EDEAF2 78%);
}
/* A faint hexagon lattice, as on the project covers. */
.blog-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("/static/studio/img/brand/hex-grid.svg") center / 40px auto;
    opacity: .14;
    -webkit-mask-image: radial-gradient(90% 100% at 50% 45%, #000, transparent 78%);
    mask-image: radial-gradient(90% 100% at 50% 45%, #000, transparent 78%);
}
/* An icon post: the icon centred on a soft backdrop of its own color. */
.blog-cover--icon {
    background: radial-gradient(75% 95% at 50% 50%,
        color-mix(in srgb, var(--accent) 34%, #fff) 0%,
        color-mix(in srgb, var(--accent) 12%, #fff) 100%);
}
.blog-cover--icon::before { opacity: .2; }
.blog-cover--icon img {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: auto;
    height: 55%;
    aspect-ratio: 1;
    object-fit: contain;
    translate: -50% -50%;
    filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--accent) 30%, rgba(23, 18, 28, .22)));
    transition: transform .6s var(--spring);
}
.blog-card:hover .blog-cover--icon img { transform: scale(1.04); }
/* A long-read: its poster until covers.ts draws the live diorama over it,
   then the poster fades away. Without the script the poster stays. The
   poster (1200x750, flat porcelain around the scene) is drawn from the same
   geometry as the diorama: the diorama's box is its middle 79.2 percent in
   height. So both are sized by the height of the cover and centred, and the
   live scene lands exactly on the painted one. --zoom crops the empty
   porcelain around the scene (and the far tips of its floor), so the scene
   fills the wide cover. A soft glow of the card's accent and of teal sits
   over both, multiplied, so the poster and the live scene take the same
   tint and the cover belongs with the colored icon backdrops. */
.blog-cover--diorama { --zoom: 1.4; background: var(--porcelain); }
.blog-cover--diorama::before { z-index: 3; opacity: .1; }
.blog-cover--diorama::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(65% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
        radial-gradient(60% 85% at 0% 100%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 72%);
    mix-blend-mode: multiply;
}
.blog-poster, .blog-cover--diorama .diorama {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    max-width: none;
    translate: -50% -50%;
    transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.blog-poster { height: calc(var(--zoom) * 100%); aspect-ratio: 1200 / 750; }
.blog-cover--diorama .diorama { z-index: 2; height: calc(var(--zoom) * 79.2%); opacity: 0; }
.blog-cover.is-live .diorama { opacity: 1; }
.blog-cover.is-live .blog-poster { opacity: 0; }
.blog-card:hover .blog-poster, .blog-card:hover .blog-cover--diorama .diorama { transform: scale(1.03); }

/* The text keeps room for two lines of title and --lines of teaser even
   when they are shorter, so the covers of a row line up; the spare room
   goes under the teaser, not between it and the title. A narrow card (a
   phone, the side of the blog grid) keeps both teaser lines and tighter
   spacing; its cover gives up the room (it keeps at least 36 percent).
   Only a tiny card (text under 270 px, a 320 px phone) drops to one
   teaser line, where two would push the cover below its 36 percent. */
.blog-text {
    --title: clamp(16px, 4cqi, 24px);
    --teaser: clamp(14px, 3.15cqi, 17px);
    --lines: 2;
    --pad: 15px;
    --pad-end: 6px;
    --gap: 7px;
    flex: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    align-content: start;
    gap: var(--gap) 0;
    min-height: calc(var(--pad) + var(--pad-end) + 16.1px + 2 * var(--gap) + 2.4 * var(--title) + var(--lines) * 1.45 * var(--teaser));
    padding: var(--pad) 10px var(--pad-end);
}
.blog-text time, .blog-minutes { font: 500 11.5px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--slate); white-space: nowrap; }
.blog-minutes::before { content: "·"; margin: 0 .7em; }
.blog-title, .blog-teaser {
    grid-column: 1 / -1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.blog-title { font: 600 var(--title)/1.2 var(--font-display); letter-spacing: -.02em; text-wrap: pretty; }
.blog-teaser { font-size: var(--teaser); line-height: 1.45; color: var(--slate); text-wrap: pretty; -webkit-line-clamp: var(--lines); line-clamp: var(--lines); }
@container blog-card (max-width: 440px) {
    .blog-text { --pad: 12px; --gap: 6px; }
}
@container blog-card (max-width: 340px) {
    .blog-text { --pad: 11px; --pad-end: 4px; --gap: 5px; }
}
@container blog-card (max-width: 270px) {
    .blog-text { --lines: 1; }
}

/* Opening a post: the page fades, and the cover of the card grows into the
   hero of the post, which carries the same view-transition-name. A card
   cover stays unnamed here even though its markup names it: on a page that
   arrives, a named card would be lifted out of its rail and drawn whole and
   sharp over the page for the length of the fade. covers.ts names the one
   cover being opened, at the same priority, when the page is left. Without
   motion there is no transition at all. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
}
.blog-card .blog-cover { view-transition-name: none !important; }
.blog-cover, .post-hero--article, .post-hero .post-cover { view-transition-class: post-cover; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); }
::view-transition-old(*.post-cover), ::view-transition-new(*.post-cover) { height: 100%; object-fit: cover; animation-timing-function: var(--ease); }
::view-transition-group(*.post-cover) { overflow: clip; border-radius: 18px; }
html.motion-off::view-transition-group(*),
html.motion-off::view-transition-old(*),
html.motion-off::view-transition-new(*) { animation: none !important; }

/* The blog: every post, newest first. On wide screens the newest is the
   large card and the next two stand beside it, all of them 4:3. */
.blog-page { background: var(--porcelain); }
/* On the blog and its posts every link of the bar and the footer is a
   44 px target for a finger, however small its text. */
:is(.blog-page, .post-page) :is(.policy-bar, .footer) .brand { min-width: 44px; min-height: 44px; }
:is(.blog-page, .post-page) .bar-links a { display: inline-flex; align-items: center; min-height: 44px; }
:is(.blog-page, .post-page) .bar-links .lang-switch { min-width: 44px; height: 44px; }
:is(.blog-page, .post-page) .footer-links { row-gap: 0; }
:is(.blog-page, .post-page) .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.blog-index { position: relative; isolation: isolate; padding: clamp(20px, 3vw, 40px) 0 clamp(80px, 10vw, 140px); }
.blog-index::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -90px 0 auto;
    height: 560px;
    pointer-events: none;
    background:
        radial-gradient(520px 320px at 88% 18%, rgba(180, 24, 156, .10), transparent 70%),
        radial-gradient(420px 300px at 70% 4%, rgba(0, 108, 144, .08), transparent 70%);
}
.blog-index::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -90px 0 auto;
    height: 520px;
    pointer-events: none;
    background: url("/static/studio/img/brand/hex-grid.svg") right top / 46px auto;
    opacity: .1;
    -webkit-mask-image: radial-gradient(60% 80% at 90% 10%, #000, transparent 72%);
    mask-image: radial-gradient(60% 80% at 90% 10%, #000, transparent 72%);
}
.blog-index .section-head { margin-bottom: clamp(30px, 4vw, 52px); }
.blog-index .section-title { font-size: clamp(38px, 6.2vw, 84px); }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1101px) {
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .blog-grid > .blog-card:first-child:not(:only-child) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
    .blog-grid > .blog-card:first-child:not(:only-child) .blog-text { --title: clamp(22px, 4.3cqi, 36px); --teaser: clamp(15px, 2.4cqi, 18px); --lines: 3; --pad: 20px; --pad-end: 10px; --gap: 10px; min-height: 0; padding-inline: 14px; }
    .blog-grid > .blog-card:first-child:not(:only-child) .blog-title { line-height: 1.12; letter-spacing: -.03em; }
    .blog-grid > .blog-card:first-child:not(:only-child) .blog-teaser { max-width: 62ch; }
    /* The two cards beside it stand one over the other, with no neighbour
       in their row to line up with: they keep no spare room, and the
       teaser takes two lines. */
    .blog-grid > .blog-card:first-child:not(:only-child) ~ .blog-card:nth-child(-n+3) .blog-text { --lines: 2; min-height: 0; }
}
/* One card to a row: nothing to line up with either. */
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .blog-grid .blog-text { min-height: 0; }
}
@media (max-width: 720px) {
    .news-actions { align-self: stretch; justify-content: space-between; }
}

/* The email request form, in the same white window as the project sheets,
   narrower. Two classes, so the width wins over .sheet further down. */
.sheet.sheet--request { width: min(640px, calc(100vw - 24px)); }
.request, .request-done { display: grid; gap: 16px; padding: 30px 30px 28px; }
.request[hidden], .request-done[hidden] { display: none; }
.request .sheet-title, .request-done .sheet-title { margin-top: 0; padding-right: 52px; }
/* The thanks take focus for screen readers; a heading needs no ring. */
.request-done .sheet-title:focus { outline: none; }
.request-lead { font-size: 16px; color: var(--slate); }
.field { display: grid; gap: 7px; }
.field > span { font: 500 11.5px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--slate); }
.field input, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(23, 18, 28, .5);
    border-radius: 14px;
    background: var(--porcelain);
    font: 400 16px/1.45 var(--font-body);
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field textarea::placeholder { color: var(--slate); opacity: 1; }
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--magenta);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 18%, transparent);
}
.field [aria-invalid="true"] { border-color: #C2410C; box-shadow: 0 0 0 4px rgba(194, 65, 12, .12); }
/* Hidden from people; a bot that fills it in is ignored. */
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--slate); cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--magenta); }
/* Links inside a sentence are told apart by more than their color. */
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent input[aria-invalid="true"] { outline: 2px solid #C2410C; outline-offset: 2px; }
/* Files: a dashed drop zone over the file input, the chosen files below. */
.field-hint { font-size: 13px; line-height: 1.45; color: var(--slate); }
.drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 16px;
    border: 1.5px dashed rgba(23, 18, 28, .5);
    border-radius: 14px;
    background: var(--porcelain);
    font-size: 15px;
    color: var(--slate);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.drop svg { width: 20px; height: 20px; flex: none; color: var(--magenta); }
.drop strong { font-weight: 600; color: var(--ink); }
.field .drop-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 6%, #fff); }
.drop:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--magenta) 18%, transparent); }
.drop:has([aria-invalid="true"]) { border-color: #C2410C; }
@media (hover: none) { .drop-or { display: none; } }
.field-error { font-size: 14px; line-height: 1.45; color: #B91C1C; }
/* An empty error takes no room but stays in the page: a live region hidden
   with display: none drops out of the accessibility tree, and its first
   message would go unheard. */
.field-error:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* The chosen files as cards, four to a row, three or two on narrow screens.
   A picture previews itself; any other file shows a tile in the colour of
   its kind. */
.files { container: files / inline-size; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.files[hidden] { display: none; }
.file {
    --kind: #5B5866;
    position: relative;
    flex: 0 0 calc((100% - 30px) / 4);
    min-width: 0;
    border: 1px solid rgba(23, 18, 28, .1);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    animation: file-in .22s ease-out;
    transition: border-color .2s, box-shadow .2s;
}
@container files (max-width: 460px) { .file { flex-basis: calc((100% - 20px) / 3); } }
@container files (max-width: 330px) { .file { flex-basis: calc((100% - 10px) / 2); } }
.file[data-kind="pdf"] { --kind: #C9372C; }
.file[data-kind="word"] { --kind: #2B579A; }
.file[data-kind="sheet"] { --kind: #1D6F42; }
.file[data-kind="slides"] { --kind: #C4501C; }
.file[data-kind="picture"] { --kind: var(--magenta); }
.file-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    aspect-ratio: 4 / 3;
    background: color-mix(in srgb, var(--kind) 9%, #fff);
    color: var(--kind);
}
.file[data-kind="picture"] .file-preview { background: var(--porcelain); }
.file-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.file-preview svg { width: 28px; height: 28px; }
.file-type { font: 700 12px var(--font-mono); letter-spacing: .06em; }
.file-info { display: grid; gap: 1px; padding: 8px 10px 9px; border-top: 1px solid rgba(23, 18, 28, .06); }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.35; color: var(--ink); }
.file-size { font: 500 11px var(--font-mono); color: var(--slate); }
.file-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(23, 18, 28, .22);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.file-remove:hover, .file-remove:focus-visible { background: #fff; color: #B91C1C; }
.file-remove svg { width: 13px; height: 13px; }
@media (pointer: coarse) { .file-remove { width: 32px; height: 32px; } }
/* The file the server refused. */
.file.is-refused { border-color: #C2410C; box-shadow: 0 0 0 3px rgba(194, 65, 12, .14); }
@keyframes file-in { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .file { animation: none; } }
.request-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.request-status { font-size: 14px; color: var(--slate); }
.request-status.is-error { color: #B91C1C; }
.request [data-contact-submit][disabled] { opacity: .6; cursor: progress; transform: none; }
.request-done .btn { justify-self: start; }

/* Contact */

.contact { padding: 12px; }
.contact-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: clamp(90px, 12vw, 170px) clamp(24px, 6vw, 96px);
    color: #fff;
    background: var(--steep);
}
.contact-box::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    background:
        radial-gradient(40% 50% at 20% 70%, rgba(245, 158, 61, .6), transparent 70%),
        radial-gradient(45% 55% at 80% 30%, rgba(0, 108, 144, .75), transparent 70%),
        radial-gradient(50% 50% at 55% 55%, rgba(180, 24, 156, .85), transparent 70%);
    animation: drift 18s ease-in-out infinite alternate;
}
.contact-box .eyebrow { color: rgba(255, 255, 255, .7); }
.contact-mark {
    position: absolute;
    right: -4%;
    bottom: -18%;
    z-index: -1;
    width: min(460px, 60vw);
    height: auto;
    aspect-ratio: 88.6 / 100;
    color: rgba(255, 255, 255, .08);
    transform: rotate(-12deg);
}
.contact-title {
    max-width: 15ch;
    margin: 16px 0 20px;
    font: 600 clamp(34px, 5.6vw, 80px)/1.02 var(--font-display);
    letter-spacing: -.04em;
    text-wrap: balance;
}
.contact-lead { max-width: 520px; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255, 255, 255, .8); }

/* Footer */

.footer { padding: 44px 0 56px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.brand--dark { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { font-size: 15px; color: var(--slate); transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.copyright { font: 500 12px var(--font-mono); color: var(--slate); }

/* Project sheet */

.sheet {
    width: min(1000px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: 32px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 50px 140px -30px rgba(20, 5, 30, .6);
    overflow: auto;
    overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(19, 10, 23, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sheet[open] { animation: sheet-in .55s var(--ease); }
.sheet[open]::backdrop { animation: fade .4s ease; }
.sheet-close { position: sticky; top: 16px; float: right; margin: 16px 16px -60px 0; z-index: 10; }

.sheet-head { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 28px 8px; }
.sheet-art { height: 230px; border-radius: 24px; }
.sheet-heading .eyebrow { color: var(--slate); }
.sheet-title { margin-top: 10px; font: 600 clamp(26px, 3.4vw, 40px)/1.08 var(--font-display); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
.sheet-pitch { margin-top: 12px; font-size: 18px; color: var(--slate); }

.sheet-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; padding: 24px 28px 32px; }
.sheet-main, .sheet-side { min-width: 0; }
.sheet-about { font-size: 17.5px; line-height: 1.6; text-wrap: pretty; }
.sheet-highlights { display: grid; gap: 10px; list-style: none; padding: 0; margin-top: 22px; }
.sheet-highlights li { position: relative; padding-left: 26px; }
.sheet-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42em;
    width: 13px;
    height: 15px;
    background: var(--accent, var(--magenta));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.install {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 8px 8px 8px 18px;
    border-radius: 16px;
    background: var(--steep);
    color: #F5E6F2;
}
/* A long command scrolls inside its box, never the window. */
.install code { flex: 1; min-width: 0; overflow-x: auto; font: 500 13px/1.5 var(--font-mono); white-space: nowrap; scrollbar-width: none; }
.install .round-button { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); color: #fff; }
.install .round-button.is-done { background: #16A34A; border-color: #16A34A; }
.sheet-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sheet-note { margin-top: 18px; font-size: 13.5px; color: var(--slate); }

.sheet-side { align-self: start; padding: 22px; border-radius: 24px; background: var(--porcelain); }
.sheet-subtitle { margin-bottom: 14px; font: 600 15px var(--font-display); letter-spacing: -.01em; }
.sheet-muted { color: var(--slate); font-size: 15px; }
/* Who built it: people with their medal on the project and what they did. */
.credits { display: grid; gap: 14px; list-style: none; padding: 0; }
.credit { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 6px 12px; }
.credit .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--accent, transparent); }
.credit-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.credit-name .coin { width: 14px; height: 14px; }
.credit-commits { font: 500 12px var(--font-mono); color: var(--slate); }
.roles { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.role {
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, #fff);
    color: color-mix(in srgb, var(--accent) 55%, #000);
    font: 500 11.5px/1.4 var(--font-mono);
}

/* Value: who uses the project and what it changed for them. */
.value { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.value-figures { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.figure { display: grid; gap: 4px; }
.figure b { font: 600 clamp(26px, 3vw, 34px)/1.05 var(--font-display); letter-spacing: -.025em; }
.figure span { font-size: 14px; color: var(--slate); }
.trend { font-style: normal; font-weight: 600; color: #15803D; }
.impact { margin-top: 18px; max-width: 60ch; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }

/* Health: what the clones show, the offline part of the OpenSSF Scorecard.
   A band across the whole window, so neither column runs on alone. */
.health { margin: 0 28px 32px; padding: 22px; border-radius: 24px; background: var(--porcelain); }
.health-head { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.health-head .sheet-subtitle { margin: 0; }
/* The small "i" by the title says what the checks are. */
.health-info summary { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--slate); cursor: pointer; list-style: none; transition: color .2s, background .2s; }
.health-info summary::-webkit-details-marker { display: none; }
.health-info summary:hover, .health-info[open] summary { color: var(--ink); background: rgba(23, 18, 28, .08); }
.health-info svg { width: 16px; height: 16px; }
.health-info p { position: absolute; left: 0; top: calc(100% + 6px); z-index: 2; max-width: min(400px, 100%); padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hairline); background: #fff; box-shadow: 0 14px 34px rgba(23, 18, 28, .14); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vital { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--hairline); background: #fff; }
.vital b { font: 600 clamp(20px, 2.2vw, 26px)/1.1 var(--font-display); letter-spacing: -.02em; }
.vital span { font-size: 13px; line-height: 1.4; color: var(--slate); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; padding: 0; list-style: none; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; }
.check-mark { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #15803D; }
.check-mark::after { content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 7.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Reminders in -dev mode about what is still to fill in. */
.sheet-hint { margin-top: 14px; padding: 9px 12px; border: 1px dashed rgba(23, 18, 28, .28); border-radius: 12px; font: 500 12px/1.5 var(--font-mono); color: var(--slate); }

.facts { margin-top: 20px; }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.facts dt { font-size: 13.5px; color: var(--slate); white-space: nowrap; }
.facts dd { font-size: 14px; font-weight: 500; text-align: right; }
.stack { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.stack span { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: #fff; font: 500 11px var(--font-mono); }

.copied {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 200;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font: 500 14px var(--font-body);
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .4s var(--spring);
}
.copied.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* 404 */

.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 12px; background: var(--porcelain); }
.lost-box {
    width: 100%;
    min-width: 0;
    min-height: calc(100svh - 24px);
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 18px;
    padding: clamp(32px, 8vw, 110px);
    border-radius: var(--radius-xl);
    background: radial-gradient(60% 60% at 80% 20%, rgba(180, 24, 156, .6), transparent 70%), radial-gradient(50% 50% at 10% 90%, rgba(0, 108, 144, .5), transparent 70%), var(--steep);
    color: #fff;
}
.lost-box .eyebrow { color: rgba(255, 255, 255, .6); }
.lost-mark { width: 72px; height: 81px; color: var(--magenta); }
/* Small enough on a 320px phone for the longest Russian word to fit. */
.lost-title { max-width: 14ch; font: 600 clamp(30px, 7vw, 96px)/1 var(--font-display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.lost-lead { max-width: 460px; font-size: 18px; color: rgba(255, 255, 255, .75); margin-bottom: 12px; }

/* Motion */

@keyframes rise { to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes swing { 0% { rotate: 0deg; } 18% { rotate: 10deg; } 42% { rotate: -7deg; } 66% { rotate: 3.5deg; } 84% { rotate: -1.5deg; } 100% { rotate: 0deg; } }
@keyframes drop { from { transform: translateY(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes stir-spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(24deg) scale(1.12); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px) scale(.98); } }

/* The team up to Full HD, and wherever the pinned stage does not fit: a
   grid of small cards, the phone card three across, so everyone is seen at
   once. The background is plain; the card under the pointer or the keyboard
   grows, lifts on a shadow and drags a glow of its own color behind it. The
   medals stay with the big cards. On screens wider than Full HD the script
   pins the stage (.is-pinned, and .has-pinned on the section), and these
   rules step aside. */
.team:not(.has-pinned) .stage { background: var(--steep); }
.team:not(.has-pinned) .order-legend { display: none; }
.team-track:not(.is-pinned) .team-bar { display: none; }
.team-track:not(.is-pinned) .team-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    overflow: visible;
    scroll-snap-type: none;
}
.team-track:not(.is-pinned) .member { z-index: 1; padding: 0; }
.team-track:not(.is-pinned) .member-body { height: 100%; max-width: none; margin: 0; opacity: 1; transform: none; filter: none; will-change: auto; }
.team-track:not(.is-pinned) .member-card,
.team-track:not(.is-pinned) .member--right .member-card,
.team-track:not(.is-pinned) .is-leader .member-card {
    height: 100%;
    grid-template-columns: clamp(84px, 28%, 116px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    padding: 18px;
    border-radius: 26px;
    border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, .14));
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, .06)), rgba(255, 255, 255, .03) 55%, rgba(19, 10, 23, .4));
    box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: transform .45s var(--spring), box-shadow .45s var(--ease), border-color .3s;
}
.team-track:not(.is-pinned) .member-text,
.team-track:not(.is-pinned) .member--right .member-text { display: contents; }
.team-track:not(.is-pinned) .member-photo,
.team-track:not(.is-pinned) .member--right .member-photo { order: 0; grid-column: 1; grid-row: 1 / 4; align-self: start; border-radius: 16px; }
.team-track:not(.is-pinned) .member-photo img { max-height: none; }
.team-track:not(.is-pinned) .member-meta { grid-column: 2; grid-row: 1; font-size: 10.5px; color: color-mix(in srgb, var(--accent) 38%, #fff); }
.team-track:not(.is-pinned) .member-since { color: rgba(255, 255, 255, .7); }
.team-track:not(.is-pinned) .member-name { grid-column: 2; grid-row: 2; margin-top: 8px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.08; }
.team-track:not(.is-pinned) .member-aka { grid-column: 2; grid-row: 3; margin-top: 6px; font-size: 11.5px; }
.team-track:not(.is-pinned) .member-facts { grid-column: 1 / -1; grid-row: 4; align-self: start; gap: 11px; margin-top: 18px; }
.team-track:not(.is-pinned) .member-fact dt { font-size: 10px; }
.team-track:not(.is-pinned) .member-fact dd { margin-top: 3px; font-size: 14.5px; line-height: 1.5; }
.team-track:not(.is-pinned) .member-links { grid-column: 1 / -1; grid-row: 5; gap: 8px; padding-top: 16px; }
.team-track:not(.is-pinned) .social { height: 38px; gap: 8px; padding: 0 14px 0 6px; font-size: 13.5px; }
.team-track:not(.is-pinned) .social-icon { width: 26px; height: 26px; }
.team-track:not(.is-pinned) .social-icon svg { width: 15px; height: 15px; }
.team-track:not(.is-pinned) .social--card { padding: 0 12px 0 16px; }
.team-track:not(.is-pinned) .tally,
.team-track:not(.is-pinned) .medal-row,
.team-track:not(.is-pinned) .leader-badge { display: none; }
.team-track:not(.is-pinned) .member:has(:focus-visible) { z-index: 3; }
.team-track:not(.is-pinned) .member:has(:focus-visible) .member-card {
    transform: scale(1.05);
    box-shadow: 0 46px 90px -32px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, .2)), 0 0 90px -34px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .14);
}
@media (hover: hover) and (pointer: fine) {
    .team-track:not(.is-pinned) .member:hover { z-index: 3; }
    .team-track:not(.is-pinned) .member:hover .member-card {
        transform: scale(1.05);
        box-shadow: 0 46px 90px -32px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--accent) 70%, rgba(255, 255, 255, .2)), 0 0 90px -34px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .14);
    }
}
/* The glow is one round patch of the card's color; the script moves it to
   the card in focus, and it fades away when the pointer leaves the people. */
.team-track:not(.is-pinned) .team-glow {
    inset: 0 auto auto 0;
    width: 680px;
    height: 680px;
    margin: -340px 0 0 -340px;
    background: var(--tint);
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
    mask-image: radial-gradient(closest-side, #000, transparent);
    opacity: 0;
    transform: translate(var(--gx, 50vw), var(--gy, 0px));
    transition: opacity .5s var(--ease), transform .7s var(--ease), background-color .6s;
}
.team-track.is-lit:not(.is-pinned) .team-glow { opacity: .6; }
/* While the script tries the pinned stage on for size, nothing animates. */
.team-track.is-measuring, .team-track.is-measuring * { transition: none !important; }

/* The empty card after the people: a blank portrait and the way to the jobs
   page. In the pinned stage it is not shown, and a link after the people
   takes its place. */
.vacancy { display: grid; place-content: center; justify-items: center; gap: 20px; min-height: 220px; padding: 24px; border: 1.5px dashed rgba(255, 255, 255, .26); border-radius: 26px; }
.vacancy-face { display: grid; place-items: center; width: 88px; height: 88px; border: 1.5px dashed rgba(255, 255, 255, .5); border-radius: 50%; color: rgba(255, 255, 255, .45); }
.vacancy-face svg { width: 34px; height: 34px; }
.vacancy .btn { height: 46px; padding: 0 20px; font-size: 15px; }
.is-pinned .vacancy { display: none; }
.team-track:not(.is-pinned) ~ .container .team-jobs { display: none; }

@media (max-width: 1100px) {
    .team-track:not(.is-pinned) .team-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* After an even number of people the empty card would stand alone in
       its row: there it lies flat across it. After an odd number it fills
       the place beside the last person. */
    .vacancy:nth-child(odd) { grid-column: 1 / -1; grid-auto-flow: column; min-height: 0; padding: 18px; }
    .vacancy:nth-child(odd) .vacancy-face { width: 56px; height: 56px; }
    .vacancy:nth-child(odd) .vacancy-face svg { width: 22px; height: 22px; }
}
@media (max-width: 740px) {
    .team-track:not(.is-pinned) .team-rail { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    /* In one column the empty card always lies flat. */
    .vacancy { grid-auto-flow: column; min-height: 0; padding: 18px; }
    .vacancy .vacancy-face { width: 56px; height: 56px; }
    .vacancy .vacancy-face svg { width: 22px; height: 22px; }
    /* Under a finger the links are taller. */
    .team-track:not(.is-pinned) .social { height: 44px; }
}
/* On a phone a long name does not fit beside the photo: the name and the
   alias take the full width under it. */
@media (max-width: 560px) {
    .team-track:not(.is-pinned) .member-photo,
    .team-track:not(.is-pinned) .member--right .member-photo { grid-row: 1; }
    .team-track:not(.is-pinned) .member-meta { align-self: center; }
    .team-track:not(.is-pinned) .member-name,
    .team-track:not(.is-pinned) .member-aka { grid-column: 1 / -1; }
    .team-track:not(.is-pinned) .member-name { margin-top: 16px; font-size: clamp(22px, 7vw, 28px); }
}
@media (prefers-reduced-motion: reduce) {
    .team-track:not(.is-pinned) .member:hover .member-card,
    .team-track:not(.is-pinned) .member:has(:focus-visible) .member-card { transform: none; }
}
.motion-off .team-track:not(.is-pinned) .member:hover .member-card,
.motion-off .team-track:not(.is-pinned) .member:has(:focus-visible) .member-card { transform: none; }

/* Layout breakpoints */

/* Laptop screens about 650px tall: the team card packs tighter, so the
   longest text still fits the pinned stage. */
@media (min-width: 960px) and (max-height: 760px) {
    .team-track { --chrome: 270px; }
    .is-pinned .team-stage { padding-top: 78px; }
    .team-bar { margin-bottom: 8px; }
    .member-card { padding: 14px; }
    .member-text { padding: 4px 16px 4px 0; }
    .member--right .member-text { padding: 4px 0 4px 16px; }
    .member-name { margin-top: 10px; font-size: clamp(28px, 2.8vw, 44px); }
    .member-aka { margin-top: 6px; }
    .member-facts { gap: 10px; margin-top: 14px; }
    .member-fact dd { margin-top: 3px; line-height: 1.45; }
    .member-links { padding-top: 14px; }
    .social { height: 42px; }
}

@media (max-width: 1100px) {
    .tile--compact { grid-column: span 4; }
    .tile--more { grid-column: span 6; }
    .tile--wide { grid-column: span 12; }
    .scoreboard { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    /* With the page for clients the bar has four links, and they do not
       all fit a narrow window. The news give way first (they stay in the
       footer), then the button, the studio's name and the wide paddings. */
    .nav-pill--four .nav-news { display: none; }
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
    .tile, .tile--hero, .tile--wide, .tile--more { grid-column: span 6; }
    .tile--compact { grid-column: span 3; }
    .tile--hero .tile-cover { height: 300px; }
    .news-slide { flex-basis: calc((100% - 20px) / 1.6); }
    .sheet-head, .sheet-grid { grid-template-columns: minmax(0, 1fr); }
    .sheet-head { padding-top: 64px; }
}

/* With the jobs page as well the bar has five links, and gives things up
   sooner: the news below 960px, the button below 861px, and the jobs link
   itself below 701px, where the bar is back to the four-link rules. */
@media (max-width: 959px) {
    .nav-pill--five .nav-news { display: none; }
}
@media (max-width: 860px) {
    .nav-pill--five .nav-cta { display: none; }
    .nav-pill--five { padding-right: 6px; }
}
@media (max-width: 700px) {
    .nav-pill--five .nav-jobs { display: none; }
}
@media (max-width: 780px) {
    .nav-pill--four .nav-cta { display: none; }
    .nav-pill--four { padding-right: 6px; }
}
@media (max-width: 620px) {
    .nav-pill--four .brand-name { display: none; }
}
@media (max-width: 430px) {
    .nav-pill--four { gap: 2px; padding-left: 12px; }
    .nav-pill--four .nav-links a { padding: 9px 6px; font-size: 14px; }
    .nav-pill.nav-pill--four .lang-switch { min-width: 30px; padding: 0 4px; }
}
@media (max-width: 340px) {
    .nav-pill--four .brand { margin-right: 4px; }
    .nav-pill--four .nav-links a { padding: 9px 4px; font-size: 13.5px; }
}

@media (max-width: 720px) {
    .nav-cta { display: none; }
    .nav-pill .lang-switch { min-width: 34px; padding: 0 6px; }
    .nav-pill { padding-right: 6px; }
    .hero-foot { grid-template-columns: 1fr; gap: 12px; }
    .hero-tools { justify-self: start; }
    .section-head--row { align-items: flex-start; flex-direction: column; }
    .medal-table .commits-col { display: none; }
    /* Four names and the "Next" pill do not fit in one row: the faces stay,
       the names are left to screen readers. */
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .brand-name { display: none; }
    .brand { margin-right: 4px; }
    .nav-links a { padding: 9px 12px; }
    .contact-box { border-radius: 30px; }
    .contact { padding: 8px; }
    .hero-inner { padding-top: 110px; }
    .btn { height: 48px; padding: 0 20px; font-size: 15px; }
    .grid { gap: 14px; }
    .tile--compact { grid-column: span 6; }
    .tile-cover { height: 210px; }
    .medal-table th:nth-child(6), .medal-table td:nth-child(6), .medal-table .chase-col { display: none; }
    .chase-inline { display: block; }
    .float-chip:nth-of-type(2) { display: none; }
    .table-card, .races { padding: 18px; }
    .sheet { width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
    .sheet-head { padding: 64px 18px 4px; }
    .sheet-grid { padding: 18px 18px 28px; }
    .health { margin: 0 18px 28px; padding: 18px; }
    .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vital:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .news-rail { gap: 14px; }
    .news-slide { flex-basis: calc((100% - 14px) / 1.1); }
}

/* On the narrowest phones a long name does not fit next to the thumbnail,
   so it moves under it at full width. */
@media (max-width: 380px) {
    /* The Russian section names only just fit next to the mark. */
    .nav { padding: 0 8px; }
    .nav-pill { gap: 2px; padding-left: 12px; }
    .brand { flex: none; }
    .nav-links a { padding: 9px 6px; font-size: 14px; }
    .nav-pill .lang-switch { min-width: 30px; padding: 0 4px; }
    /* A smaller mark keeps the merged Hyperion window inside the screen. */
    .story-stage > * { min-width: 0; }
    .app--merged .app-body { grid-template-columns: 72px 1fr; gap: 16px; padding: 20px; }
    .app-mark { width: 72px; height: 81px; }
}

/* The privacy policy: a quiet page of text in the studio's type. */
.policy-page { background: var(--porcelain); }
.policy-bar { padding: 18px 0; }
.policy-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.policy { padding: 24px 0 80px; }
.policy-inner { max-width: 820px; }
.policy-title { margin: 8px 0 10px; font: 600 clamp(34px, 5.4vw, 60px)/1.04 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.policy-date { font: 500 12.5px var(--font-mono); letter-spacing: .04em; color: var(--slate); }
.policy-body {
    margin-top: 36px;
    padding: clamp(22px, 4vw, 44px);
    border-radius: var(--radius-l);
    border: 1px solid var(--hairline);
    background: #fff;
    font-size: 16.5px;
    line-height: 1.65;
}
.policy-body h2 { margin: 40px 0 12px; font: 600 clamp(20px, 2.4vw, 25px)/1.2 var(--font-display); letter-spacing: -.02em; scroll-margin-top: 24px; }
.policy-body h3 { margin: 24px 0 8px; font: 600 17px/1.3 var(--font-body); }
.policy-body section:first-of-type h2 { margin-top: 8px; }
.policy-body p, .policy-body li { color: #3b3542; }
.policy-body p + p { margin-top: 10px; }
.policy-body ol, .policy-body ul { display: grid; gap: 6px; margin: 10px 0; padding-left: 22px; }
.policy-body a { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.policy-toc { margin-bottom: 8px; padding: 18px 22px; border-radius: 18px; background: var(--porcelain); }
.policy-toc ol { margin: 0; gap: 4px; }
.policy-toc a { color: var(--ink); text-decoration: none; }
.policy-toc a:hover { color: var(--magenta); }
.policy-body .hint { padding: 1px 6px; border: 1px dashed #C2410C; border-radius: 6px; color: #C2410C; font: 500 12px var(--font-mono); }
.policy .back-link { text-decoration: none; }

/* The page for clients: a tea box on top and at the end, plain cards on
   porcelain in between. */
.clients-page .policy-bar { padding: 14px 0; }
.bar-links { display: flex; align-items: center; gap: 2px; }
.bar-links a:not(.lang-switch) { padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; opacity: .72; transition: opacity .2s, background-color .2s; }
.bar-links a:not(.lang-switch):hover { opacity: 1; background: rgba(23, 18, 28, .06); }
.clients-intro { padding: 0 12px; }
.clients-box { padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 96px); }
/* The home page has a button that stops its moving gradient; this page has
   no such button, so its boxes keep still. */
.clients-box::before { animation: none; }
.clients-title { max-width: 16ch; margin: 16px 0 20px; font: 600 clamp(34px, 5.6vw, 76px)/1.02 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.clients-section { padding-top: clamp(56px, 7vw, 96px); }
.clients-h2 { font: 600 clamp(26px, 3.2vw, 40px)/1.08 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.clients-lead { margin-top: 14px; max-width: 620px; font-size: clamp(17px, 1.45vw, 20px); color: var(--slate); text-wrap: pretty; }
.more-link { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: -6px 0; padding: 10px 0; font-weight: 600; font-size: 15px; color: var(--magenta); }
.more-link svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--spring); }
.more-link:hover svg { transform: translateX(4px); }
.more-link--light { margin-top: 18px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 5px; }

.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; padding: 0; list-style: none; }
.kind { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: var(--radius-l); border: 1px solid var(--hairline); background: #fff; }
.kind .order { --disc: 48px; margin-bottom: 6px; filter: drop-shadow(0 4px 6px rgba(23, 18, 28, .22)); }
.kind h3 { font: 600 21px/1.2 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.kind p { color: #3b3542; text-wrap: pretty; }
.kind .kind-examples { font-size: 14.5px; color: var(--slate); }
.kind .more-link { margin-top: -2px; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 32px; padding: 0; list-style: none; counter-reset: step; }
.step { padding: 24px; border-radius: var(--radius-l); border: 1px solid var(--hairline); background: #fff; counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 18px; font: 500 12px var(--font-mono); letter-spacing: .09em; color: var(--magenta); }
.step h3 { font: 600 17px/1.25 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.step p { margin-top: 10px; font-size: 15.5px; color: #3b3542; text-wrap: pretty; }

.clients-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: clamp(56px, 7vw, 96px); }
.clients-pair > .panel:only-child { grid-column: 1 / -1; }
.panel { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-l); border: 1px solid var(--hairline); background: #fff; }
.panel .clients-h2 { font-size: clamp(22px, 2.4vw, 30px); }
.panel-lead { margin-top: 12px; color: var(--slate); }
.panel-list { display: grid; gap: 12px; margin-top: 20px; padding: 0; list-style: none; }
.panel-list li { display: flex; align-items: flex-start; gap: 12px; }
.panel-list .check-mark { margin-top: 5px; }
.dot { flex: none; width: 6px; height: 6px; margin: 10px 5px 0; border-radius: 50%; background: var(--teal); }
.panel-note { margin-top: auto; padding-top: 22px; font-size: 15.5px; color: #3b3542; text-wrap: pretty; }
.panel-list + .panel-note::before { content: ""; display: block; margin-bottom: 18px; border-top: 1px solid var(--hairline); }
.panel-note a { font-weight: 600; color: var(--magenta); white-space: nowrap; }
.panel-note--ask { font-weight: 600; color: var(--ink); }

/* A closing note under a block, for the blocks that have one. */
.clients-note { margin-top: 24px; max-width: 620px; color: #3b3542; text-wrap: pretty; }
.brief-note { margin-top: 20px; max-width: 580px; color: rgba(255, 255, 255, .82); text-wrap: pretty; }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 32px; }
.faq dt { font: 600 18px/1.3 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.faq dd { margin-top: 10px; color: #3b3542; text-wrap: pretty; }

/* The jobs page with no open positions: a sad face, a few words and the
   way to write anyway. */
.jobs-empty { display: grid; justify-items: center; gap: 20px; margin-top: 28px; padding: clamp(36px, 6vw, 64px) 24px; border: 1px solid var(--hairline); border-radius: var(--radius-l); background: #fff; text-align: center; }
.jobs-empty-face { width: 56px; height: 56px; color: var(--slate); }
.jobs-empty p { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: #3b3542; text-wrap: pretty; }
.jobs-empty em { font-style: italic; font-weight: 600; color: var(--ink); }
.jobs-write { margin-top: 28px; }
.clients-brief { padding: clamp(56px, 7vw, 96px) 12px 12px; }
.clients-brief .contact-lead { margin-top: 14px; }
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 44px; max-width: 980px; margin-top: 24px; padding: 0; list-style: none; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255, 255, 255, .88); }
.brief li { display: flex; gap: 14px; }
.brief li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: #fff; }

@media (max-width: 960px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .kinds, .clients-pair, .faq, .brief { grid-template-columns: 1fr; }
    .kind { padding: 22px; }
}
@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
    .bar-links a:not(.lang-switch) { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
    .js .hero-title .line > span { transform: none; }
}

/* The same when the visitor pauses the animations with the button in the
   hero. The title never waits hidden for an animation that will not run. */
html.motion-off { scroll-behavior: auto; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
.js.motion-off [data-reveal] { opacity: 1; transform: none; }
.js.motion-off .hero-title .line > span { transform: none; }

/* Windows High Contrast drops the gradients the hero text is painted with,
   so the text takes the system color; marks that mean something by their
   color keep it. */
@media (forced-colors: active) {
    .contrast-live [data-contrast="text"],
    .contrast-live [data-contrast="text"] *,
    .contrast-live .cw { color: CanvasText; -webkit-text-fill-color: CanvasText; background-image: none !important; }
    .chip.is-active, .story-nav-item[aria-current="step"] { outline: 2px solid Highlight; }
    .check-mark, .coin { forced-color-adjust: none; }
}

/* The gradient fill ends with the span box, so the box reaches below the
   line far enough for descenders (p, the comma, the legs of Д). */
.contrast-live .hero-title .line > span { padding-bottom: .12em; margin-bottom: -.12em; }