/* ZeroByte. The look of michalik.cloud: big type, hairlines instead of boxes, Titillium Web
   headings over Inter text, a violet-to-orange gradient, a floating island for navigation.
   Light --accent-ink is the gradient's orange darkened to 4.5:1 on white (WCAG AA). */

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* Headings only. Static cuts (no variable font), Latin subset. */
@font-face {
    font-family: "Titillium Web";
    src: url("/assets/fonts/titillium-web-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Titillium Web";
    src: url("/assets/fonts/titillium-web-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --display: "Titillium Web", var(--sans);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --pad: clamp(20px, 5vw, 40px);

    /* Dark (default) */
    --bg: #0a0a0b;
    --ink: #f5f5f7;
    --dim: #a1a1a6;
    --faint: #6e6e73;
    --line: rgba(255, 255, 255, 0.12);
    --hover: rgba(255, 255, 255, 0.05);
    --hover-strong: rgba(255, 255, 255, 0.1);
    --accent: #fa9842;
    --accent-ink: #fa9842;
    --on-accent: #0a0a0b;
    --g1: #9f74fb;
    --g2: #dc5af6;
    --g3: #fa9842;
    --grad: linear-gradient(100deg, var(--g1) 0%, var(--g2) 48%, var(--g3) 100%);
    color-scheme: dark;
}
:root[data-theme="light"] {
    --bg: #ffffff;
    --ink: #1d1d1f;
    --dim: #6e6e73;
    --faint: #86868b;
    --line: rgba(0, 0, 0, 0.12);
    --hover: rgba(0, 0, 0, 0.04);
    --hover-strong: rgba(0, 0, 0, 0.07);
    --accent: #e86b0c;
    --accent-ink: #c0580a;
    --on-accent: #1d1d1f;
    --g1: #531dc9;
    --g2: #9919b3;
    --g3: #e86b0c;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #ffffff;
        --ink: #1d1d1f;
        --dim: #6e6e73;
        --faint: #86868b;
        --line: rgba(0, 0, 0, 0.12);
        --hover: rgba(0, 0, 0, 0.04);
        --hover-strong: rgba(0, 0, 0, 0.07);
        --accent: #e86b0c;
        --accent-ink: #c0580a;
        --on-accent: #1d1d1f;
        --g1: #531dc9;
        --g2: #9919b3;
        --g3: #e86b0c;
        color-scheme: light;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}
body {
    margin: 0;
    overflow-x: clip;
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.55 var(--sans);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img,
svg {
    display: block;
    max-width: 100%;
}
h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
}
ul,
ol {
    padding: 0;
    list-style: none;
}
a {
    color: inherit;
}
a:focus-visible,
button:focus-visible,
.step:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 3px;
    border-radius: 6px;
}
::selection {
    background: var(--accent);
    color: var(--on-accent);
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skip:focus {
    left: 16px;
    top: 16px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    text-decoration: none;
}
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--pad);
}
.sprite {
    display: none;
}
.grad {
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.stop--1 {
    stop-color: var(--g1);
}
.stop--2 {
    stop-color: var(--g2);
}
.stop--3 {
    stop-color: var(--g3);
}

/* The island: a floating pill with the mark, the sections and the appearance switch. The ring
   around the mark fills as the page is read; the name folds away once the hero is behind. */
.island {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    z-index: 50;
    transform: translateX(-50%);
    animation: drop 0.8s 0.2s var(--ease) both;
}
.island__in {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.island__home {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
    border-radius: 999px;
    text-decoration: none;
    transition:
        gap 0.5s var(--ease),
        padding 0.5s var(--ease);
}
.island__face {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
}
.island__face img {
    position: absolute;
    inset: 6px;
    width: 24px;
    height: 24px;
}
.island__ring {
    position: absolute;
    inset: 0;
    width: 36px;
    height: 36px;
    transform: rotate(-90deg);
}
.island__track,
.island__progress {
    fill: none;
    stroke-width: 2;
}
.island__track {
    stroke: var(--line);
}
.island__progress {
    stroke: url(#island-grad);
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.island__name {
    max-width: 140px;
    overflow: hidden;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition:
        max-width 0.5s var(--ease),
        opacity 0.3s;
}
.island.is-compact .island__home {
    gap: 0;
    padding-right: 2px;
}
.island.is-compact .island__name {
    max-width: 0;
    opacity: 0;
}
.island__links {
    position: relative;
    display: flex;
}
.island__link {
    position: relative;
    z-index: 1;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--dim);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.island__link:hover,
.island__link[aria-current] {
    color: var(--ink);
}
.island__link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}
.island__link[aria-current]::after {
    transform: scaleX(1);
}
.island__short {
    display: none;
}
.island__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dim);
    cursor: pointer;
    transition:
        color 0.2s,
        background 0.2s;
}
.island__theme:hover {
    color: var(--ink);
    background: var(--hover-strong);
}
.theme-icon {
    display: none;
    width: 18px;
    height: 18px;
}
.island__theme:not([data-choice]) .theme-icon--auto,
.island__theme[data-choice="auto"] .theme-icon--auto,
.island__theme[data-choice="light"] .theme-icon--light,
.island__theme[data-choice="dark"] .theme-icon--dark {
    display: block;
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
    min-height: min(92svh, 900px);
    padding-top: clamp(104px, 12vw, 140px);
    padding-bottom: clamp(40px, 6vw, 72px);
}
.hero__text {
    animation: rise 0.9s var(--ease) both;
}
.hero__who {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
}
.hero__name {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.hero__what {
    color: var(--dim);
    font-size: 15px;
}
.hero__title {
    margin-top: clamp(20px, 3vw, 32px);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(42px, 5.6vw, 76px);
    line-height: 1;
    letter-spacing: -0.02em;
}
.hero__sub {
    margin-top: clamp(8px, 1vw, 14px);
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.01em;
}
.hero__lede {
    max-width: 52ch;
    margin-top: clamp(24px, 3vw, 36px);
    color: var(--dim);
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-top: clamp(28px, 4vw, 44px);
}

/* The mark sits in a slowly turning ring of the gradient, with its glow behind. */
.emblem {
    position: relative;
    justify-self: end;
    display: grid;
    place-items: center;
    width: min(100%, 400px);
    aspect-ratio: 1;
    animation: rise 0.9s 0.1s var(--ease) both;
}
.emblem::before,
.emblem::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--g1), var(--g2), var(--g3), transparent 62%, transparent 80%, var(--g1));
}
.emblem::before {
    inset: 0;
    animation: spin 14s linear infinite;
}
.emblem::after {
    inset: 8%;
    z-index: -1;
    filter: blur(70px);
    opacity: 0.4;
    animation: spin 14s linear infinite;
}
.emblem__disc {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--bg);
}
/* No display here: it would outrank .logo--light / .logo--dark. */
.emblem img {
    position: relative;
    width: 52%;
    height: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font: 500 16px/1 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.25s var(--ease),
        background 0.2s,
        color 0.2s;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.btn--ghost {
    border-color: var(--line);
    background: transparent;
    color: var(--ink);
}
.btn--ghost:hover {
    background: var(--hover);
}

/* Three facts, split by hairlines. */
.facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}
.fact {
    padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px) 0;
}
.fact:first-child {
    padding-left: 0;
}
.fact + .fact {
    border-left: 1px solid var(--line);
}
.fact h3 {
    margin-bottom: 8px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(22px, 2vw, 27px);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.fact p {
    max-width: 36ch;
    color: var(--dim);
    font-size: 16px;
}

/* Sections */
.sec {
    padding-top: clamp(72px, 10vw, 136px);
}
.kicker {
    margin-bottom: 14px;
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sec__title {
    max-width: 22ch;
    margin-bottom: clamp(28px, 4vw, 48px);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(35px, 4vw, 53px);
    line-height: 1.05;
    letter-spacing: -0.015em;
}
.sec__text {
    max-width: 60ch;
    color: var(--dim);
}
.sec__text + .sec__text {
    margin-top: 16px;
}
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--dim);
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}
.arrow-link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s var(--ease);
}
.arrow-link:hover {
    color: var(--accent-ink);
}
.arrow-link:hover svg {
    transform: translate(2px, -2px);
}
.links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 24px;
}

/* How it works: the diagram above three steps split by hairlines. */
.how {
    border-top: 1px solid var(--line);
}
.flow {
    padding: clamp(28px, 4vw, 48px) 0 clamp(12px, 2vw, 24px);
}
.flow__art {
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}
.flow__wire {
    stroke: var(--line);
    stroke-width: 2;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
}
.flow__wire--lit {
    stroke: url(#flow-grad);
    stroke-dasharray: none;
    opacity: 0.55;
}
.flow__device rect,
.flow__device path {
    fill: none;
    stroke: var(--dim);
    stroke-width: 2;
}
.flow__device .flow__screen {
    stroke: var(--line);
    fill: var(--hover);
}
.flow__relay rect {
    fill: none;
    stroke: url(#flow-grad);
    stroke-width: 8;
}
.flow__label {
    fill: var(--ink);
    font: 500 15px var(--sans);
    text-anchor: middle;
}
.flow__note {
    fill: var(--faint);
    font: 400 13px var(--sans);
    text-anchor: middle;
}
.flow__packet rect {
    fill: var(--bg);
    stroke: var(--ink);
    stroke-width: 2;
}
.flow__packet path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
}
.flow__pair {
    fill: none;
    stroke: var(--line);
    stroke-width: 2;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
}
.flow__pair--lit {
    stroke: url(#flow-grad);
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0;
}
.flow__no {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    fill: var(--faint);
    transition: fill 0.4s var(--ease);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}
.step {
    position: relative;
    padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px) 0;
}
.step:first-child {
    padding-left: 0;
}
.step + .step {
    border-left: 1px solid var(--line);
}
.step::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}
.step__no {
    display: block;
    width: fit-content;
    margin-bottom: 14px;
    padding-bottom: 0.12em;
    margin-top: -0.12em;
    font: 700 30px/1 var(--display);
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--faint);
    transition: -webkit-text-fill-color 0.4s var(--ease);
}
.step h3 {
    margin-bottom: 8px;
    color: var(--dim);
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(24px, 2.2vw, 29px);
    line-height: 1.1;
    transition: color 0.4s var(--ease);
}
.step p {
    color: var(--dim);
    font-size: 16px;
}
.step.is-active::before {
    transform: scaleX(1);
}
.step.is-active .step__no {
    -webkit-text-fill-color: transparent;
}
.step.is-active h3,
.how:not([data-step]) .step h3 {
    color: var(--ink);
}

/* Diagram parts follow the step: the rest dims. */
[data-steps] {
    transition: opacity 0.5s var(--ease);
}
.how[data-step] [data-steps] {
    opacity: 0.3;
}
.how[data-step="1"] [data-steps~="1"],
.how[data-step="2"] [data-steps~="2"],
.how[data-step="3"] [data-steps~="3"] {
    opacity: 1;
}
.how[data-step="1"] [data-steps~="1"] .flow__no,
.how[data-step="2"] [data-steps~="2"] .flow__no,
.how[data-step="3"] [data-steps~="3"] .flow__no {
    fill: var(--accent-ink);
}

/* 01 Pair: the pairing arc draws itself. */
.how[data-step="1"] .flow__pair--lit {
    opacity: 1;
    animation: pair 1.6s var(--ease) both;
}
@keyframes pair {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* The packet waits at the relay unless a step moves it. */
.flow__packet {
    transform: translate(360px, 0);
}
.flow__packet path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}
.how[data-step="1"] .flow__packet {
    transform: translate(101px, 0);
    opacity: 0;
}
/* 02 Seal: the envelope appears on the sending device and closes. */
.how[data-step="2"] .flow__packet {
    transform: translate(101px, 0);
    animation: appear 0.5s var(--ease) both;
}
.how[data-step="2"] .flow__packet path {
    animation: seal 0.9s 0.35s var(--ease) both;
}
@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes seal {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}
/* 03 Pass: through the relay, delivered, and gone. */
.how[data-step="3"] .flow__packet {
    animation: pass 4.2s var(--ease) both;
}
.how[data-step="3"] .flow__wire--lit {
    opacity: 1;
}
@keyframes pass {
    0% {
        transform: translate(101px, 0);
        opacity: 1;
    }
    34%,
    48% {
        transform: translate(360px, 0);
        opacity: 1;
    }
    82% {
        transform: translate(631px, 0);
        opacity: 1;
    }
    100% {
        transform: translate(631px, 0);
        opacity: 0;
    }
}

/* What the relay sees: two columns split by a hairline. */
.ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}
.ledger__col {
    position: relative;
    padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 56px) 0 0;
}
.ledger__col + .ledger__col {
    padding-left: clamp(24px, 4vw, 56px);
    padding-right: 0;
    border-left: 1px solid var(--line);
}
.ledger__col--never::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
}
.ledger__col h3 {
    margin-bottom: 14px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(24px, 2.2vw, 29px);
    line-height: 1.1;
}
.ledger__col li {
    position: relative;
    padding: 12px 0 12px 24px;
    border-top: 1px solid var(--line);
    color: var(--dim);
}
.ledger__col li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border: 1.5px solid var(--faint);
    border-radius: 50%;
}
.ledger__col--never li::before {
    height: 1.5px;
    margin-top: -1px;
    border: 0;
    border-radius: 0;
    background: var(--faint);
}
.ledger__foot {
    max-width: 70ch;
    margin-top: clamp(24px, 3vw, 36px);
    color: var(--faint);
    font-size: 15px;
}

/* Protocol and Open source: text beside a list of hairline rows. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}
.split .sec__title {
    margin-bottom: 24px;
}
.split .hero__actions {
    margin-top: 32px;
}
.spec div {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
}
.spec div:last-child {
    border-bottom: 1px solid var(--line);
}
.spec dt {
    color: var(--faint);
}
.repos li {
    border-top: 1px solid var(--line);
}
.repos li:last-child {
    border-bottom: 1px solid var(--line);
}
.repo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    text-decoration: none;
}
.repo__name {
    display: block;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    transition: color 0.25s;
}
.repo__what {
    display: block;
    margin-top: 2px;
    color: var(--dim);
    font-size: 14px;
}
.repo__licence {
    color: var(--faint);
    font-size: 13px;
    white-space: nowrap;
}
.repo__go {
    width: 20px;
    height: 20px;
    color: var(--faint);
    transition:
        color 0.25s,
        transform 0.35s var(--ease);
}
.repo:hover .repo__name,
.repo:hover .repo__go {
    color: var(--accent-ink);
}
.repo:hover .repo__go {
    transform: translate(2px, -2px);
}

/* Contact: the channels are the links, set large. */
.where li {
    border-top: 1px solid var(--line);
}
.where li:last-child {
    border-bottom: 1px solid var(--line);
}
.where__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: clamp(14px, 2vw, 22px) 0;
    text-decoration: none;
}
.where__identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    min-width: 0;
}
.where__name {
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.035em;
    transition: color 0.25s;
}
.where__handle {
    color: var(--dim);
    font-size: 16px;
}
.where__go {
    width: clamp(24px, 3vw, 36px);
    height: clamp(24px, 3vw, 36px);
    color: var(--faint);
    transition:
        color 0.25s,
        transform 0.35s var(--ease);
}
.where__row:hover .where__name,
.where__row:hover .where__go {
    color: var(--accent-ink);
}
.where__row:hover .where__go {
    transform: translate(4px, -4px);
}

/* A plain page: privacy, not found. */
.page {
    max-width: 760px;
    padding-top: clamp(120px, 14vw, 168px);
    min-height: 70vh;
}
.page h1 {
    margin-bottom: 28px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(42px, 5.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
}
.page h2 {
    margin: 36px 0 10px;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(24px, 2.2vw, 29px);
    line-height: 1.1;
}
.page p {
    color: var(--dim);
}
.page p + p {
    margin-top: 14px;
}
.page p a {
    color: var(--ink);
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}
.page p a:hover {
    color: var(--accent-ink);
}
.page .hero__actions {
    margin-top: 32px;
}

/* Footer */
.closing-mark {
    display: flex;
    justify-content: center;
    margin-top: clamp(72px, 9vw, 120px);
}
/* No display here: it would outrank .logo--light / .logo--dark. */
.closing-mark img {
    width: clamp(160px, 18vw, 220px);
    height: auto;
}
.foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 24px;
    margin-top: clamp(24px, 4vw, 48px);
    padding-top: 28px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
}
.foot__small {
    color: var(--faint);
    font-size: 13px;
}
.foot__small a {
    color: var(--dim);
    text-decoration: none;
}
.foot__small a:hover {
    color: var(--accent-ink);
}
.foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 6px;
}
.foot__end {
    justify-self: end;
}

/* Appearance switch. It appears only once theme.js has run. */
.logo--light,
.theme-pick {
    display: none;
}
:root[data-theme="light"] .logo--dark {
    display: none;
}
:root[data-theme="light"] .logo--light {
    display: block;
}
:root[data-theme] .theme-pick {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.theme-pick button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--faint);
    cursor: pointer;
    transition:
        color 0.2s,
        background 0.2s;
}
.theme-pick button svg {
    width: 16px;
    height: 16px;
}
.theme-pick button:hover {
    color: var(--ink);
}
.theme-pick button[aria-pressed="true"] {
    background: var(--hover-strong);
    color: var(--ink);
}

/* Cookie settings next to the appearance switch; the banner (assets/consent.js). Both answers
   carry the same weight. */
.foot__end {
    display: flex;
    align-items: center;
    gap: 12px;
}
.consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    max-width: 680px;
    margin: 0 auto;
    padding: 16px 16px 16px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    color: var(--dim);
    font-size: 14px;
    line-height: 1.45;
    animation: rise 0.5s var(--ease) both;
}
.consent__text {
    flex: 1 1 300px;
}
.consent__actions {
    display: flex;
    gap: 8px;
}
.consent__button,
.foot__consent {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: 500 14px/1 var(--sans);
    cursor: pointer;
    transition: background 0.2s;
}
.foot__consent {
    color: var(--dim);
    font-size: 13px;
}
.consent__button:hover,
.foot__consent:hover {
    background: var(--hover);
}
.consent__button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--bg);
}

/* Motion */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}
@keyframes rise-x {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}
@keyframes drop {
    from {
        opacity: 0;
        transform: translate(-50%, -12px);
    }
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}
.reveal {
    transition:
        opacity 0.8s var(--ease),
        transform 0.8s var(--ease);
}
.reveal.is-pending {
    opacity: 0;
    transform: translateY(18px);
}

/* Layout */
@media (max-width: 860px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 36px;
    }
    .emblem {
        order: -1;
        justify-self: start;
        width: 132px;
    }
    .emblem::before {
        inset: -1px;
    }
    .emblem__disc {
        inset: 4px;
    }
    .facts,
    .steps,
    .ledger,
    .split {
        grid-template-columns: minmax(0, 1fr);
    }
    .fact,
    .fact:first-child,
    .step,
    .step:first-child,
    .ledger__col,
    .ledger__col + .ledger__col {
        padding: 24px 0 8px;
        border-left: 0;
    }
    .fact + .fact,
    .step + .step,
    .ledger__col + .ledger__col {
        margin-top: 16px;
        border-top: 1px solid var(--line);
    }
    .step::before {
        top: -1px;
    }
    .split {
        gap: 40px;
    }
    .foot {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .foot__end {
        justify-self: end;
    }
}
@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    html {
        scroll-padding-top: 24px;
    }
    .island {
        top: auto;
        bottom: max(14px, env(safe-area-inset-bottom));
        animation-name: rise-x;
    }
    .island__home {
        gap: 0;
        padding-right: 2px;
    }
    .island__name,
    .island__full,
    .island__link--wide {
        display: none;
    }
    .island__short {
        display: inline;
    }
    .island__link {
        padding: 8px 11px;
    }
    .island__link::after {
        left: 11px;
        right: 11px;
    }
    .hero {
        padding-top: 40px;
    }
    .page {
        padding-top: 56px;
    }
    .flow__label {
        font-size: 20px;
    }
    .flow__note {
        display: none;
    }
    .spec div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
    .repo {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .repo__licence {
        display: none;
    }
    .where__handle {
        flex-basis: 100%;
        font-size: 15px;
    }
    .foot {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }
    /* Above the island, which sits at the bottom here. */
    .consent {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    .reveal.is-pending {
        opacity: 1;
        transform: none;
    }
    .how[data-step="1"] .flow__pair--lit {
        stroke-dashoffset: 0;
    }
    .how[data-step="2"] .flow__packet {
        opacity: 1;
    }
    .how[data-step="3"] .flow__packet {
        transform: translate(360px, 0);
        opacity: 1;
    }
}