/* Self-hosted fonts (latin + latin-ext), so first paint does not wait on Google Fonts. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/geist-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*
    Editorial article typography for the Markdown pages.
    Colours mirror SitePalettes in Colors.kt; keep the two in sync.
 */

.silk-light {
    --paper: #F6F3EC;
    --paper-2: #EDE8DD;
    --ink: #1C1A17;
    --ink-2: #5E584E;
    --rule: #DDD5C7;
    --accent: #B24522;
}

.silk-dark {
    --paper: #151310;
    --paper-2: #1F1C18;
    --ink: #EEE8DC;
    --ink-2: #A79F90;
    --rule: #34302A;
    --accent: #E27C54;
}

.prose {
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    color: var(--ink);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.prose-body > * { margin-block: 0; }
.prose-body > * + * { margin-top: 1.25rem; }

.prose h1 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-bottom: 1.5rem;
}

.prose h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    text-wrap: balance;
    margin-top: 3.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
}

.prose h3 {
    font-weight: 600;
    font-size: 1.1875rem;
    line-height: 1.35;
    margin-top: 2.25rem;
}

.prose h2 + *, .prose h3 + * { margin-top: 0.75rem; }

.prose p, .prose li { text-wrap: pretty; }
.prose h1 + p { font-size: 1.1875rem; color: var(--ink-2); }

.prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 160ms ease;
}
.prose a:hover { color: var(--accent); }

.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.375rem; }
.prose li::marker { color: var(--ink-2); }

.prose strong { font-weight: 600; }

.prose blockquote {
    margin-inline: 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--accent);
    color: var(--ink-2);
}
.prose blockquote > * { margin: 0; }

.prose hr {
    border: 0;
    height: 1px;
    background: var(--rule);
    margin-block: 3rem;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    display: block;
    overflow-x: auto;
}
.prose th, .prose td {
    text-align: left;
    padding: 0.625rem 1rem 0.625rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
.prose th {
    font-family: "Geist Mono", ui-monospace, monospace;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--ink-2);
}

/* Inline code sits in the text as a quiet tint, not a pill. */
.prose :not(pre) > code {
    font-size: 0.875em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

/* Code blocks break slightly out of the text column on wide screens. */
.prose div.code-toolbar, .prose pre {
    font-size: 0.875rem;
}
@media (min-width: 64em) {
    .prose div.code-toolbar, .prose-body > pre {
        margin-inline: -1.5rem;
    }
}
.prose pre[class*="language-"] {
    border: 1px solid var(--rule);
    padding: 1.125rem 1.25rem;
}

/* A thematic break already draws a rule, so the heading after it doesn't draw a second one. */
.prose hr + h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.prose h2 code, .prose h3 code {
    font-size: 0.72em;
    padding: 0;
    background: none;
}

/* Section links: a quiet "#" after each heading that copies a deep link. */
.prose h2[id], .prose h3[id] { scroll-margin-top: 6rem; }
.prose .heading-anchor {
    margin-left: 0.4em;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 0.6em;
    color: var(--ink-2);
    text-decoration: none;
    opacity: 0;
    transition: opacity 160ms ease, color 160ms ease;
}
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .prose .heading-anchor:focus-visible { opacity: 1; }
.prose .heading-anchor:hover { color: var(--accent); }
.prose .heading-anchor.copied { opacity: 1; color: var(--accent); }
.prose .heading-anchor.copied::after { content: " ✓"; }
@media (hover: none) { .prose .heading-anchor { opacity: 0.5; } }

/* "Next note" closes every article. */
.next-note {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.prose a.next-note-link {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    text-decoration: none;
}
.next-note-title {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(1.625rem, 3vw, 2rem);
    line-height: 1.15;
    text-wrap: balance;
    transition: color 160ms ease;
}
.next-note-link:hover .next-note-title { color: var(--accent); }
.next-note-desc { color: var(--ink-2); }
.next-note-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    margin-top: 1rem;
}
.prose .next-note-meta a { text-decoration: none; }

/* Linked headings (the homepage Parrot title): an accent arrow that nudges right on hover. */
.heading-link-arrow { display: inline-block; margin-left: 0.3em; font-size: 0.7em; vertical-align: 0.12em; color: var(--accent); transition: transform 220ms var(--ease-out); }
a:hover .heading-link-arrow { transform: translateX(4px); }

/*
    Candy: small authored moments. Movement only runs when the visitor hasn't asked for
    reduced motion; the static state is always the finished state.
 */

/* Reading bar: scaled, not resized, so it never triggers layout. Scroll-driven where supported. */
.scroll-progress {
    transform: scaleX(0);
    transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: scroll-progress linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Home headline: rises from behind its own baseline, once. */
.mask-line {
    display: block;
    overflow: clip;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.mask-line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
    .mask-line > span {
        animation: mask-rise 900ms var(--ease-out) 130ms both;
    }
}
@keyframes mask-rise { from { transform: translateY(105%); } to { transform: none; } }

/* Parrot hero: the subtitle is "read along" once, a sentence at a time, like the app does. */
.read-along .ra-sentence {
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
    .read-along .ra-sentence { animation: ra-sentence var(--ra-duration) ease var(--ra-delay) both; }
}
@keyframes ra-sentence {
    0% { background-color: transparent; color: inherit; }
    8%, 90% { background-color: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
    100% { background-color: transparent; color: inherit; }
}

/* Screenshot rows settle into their staggered offsets as they scroll in (desktop, once per pass). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
        .phone-row-item {
            animation: phone-settle linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 90%;
        }
        .phone-row-item:nth-child(2n) { --settle: 3.5rem; }
        .phone-row-item:nth-child(3n) { --settle: 2.25rem; }
    }
}
/* Uses `translate`, not `transform`, so the screenshot links' hover lift still works. */
@keyframes phone-settle {
    from { translate: 0 var(--settle, 1.5rem); }
    to { translate: none; }
}

/* Theme switch: the new palette spreads out from the toggle as a circle of ink. */
html.theme-spill::view-transition-old(root),
html.theme-spill::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
html.theme-spill::view-transition-new(root) {
    animation: theme-spill 560ms var(--ease-out);
}
/* Colours land at once inside the circle instead of fading on top of it. */
html.theme-spill *, html.theme-spill *::before, html.theme-spill *::after { transition: none !important; }
@keyframes theme-spill {
    from { clip-path: circle(0 at var(--spill-x) var(--spill-y)); }
    to { clip-path: circle(var(--spill-r) at var(--spill-x) var(--spill-y)); }
}

/* Opening a note: the title glides in from the link (utils/ViewTransitions.kt), so the body rises without it. */
.prose-body.carrying-title { animation: none; }
.prose-body.carrying-title > :not(h1) { animation: rise 560ms var(--ease-out) 140ms both; }