:root {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color-scheme: light dark;
    font-size: 15px;
    line-height: 1.65;
    font-feature-settings: "cv05" 1, "zero" 1;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    --color-bg: #fff;
    --color-text: #4a4a4a;
    --color-heading: #111;
    --color-link: #111;
    --color-link-underline: #bbb;
    --color-muted: #737373;
    --color-border: #ddd;
    --color-code-bg: #f3f3f3;
    --color-highlight: rgba(240, 160, 32, .22);
    --border-radius: .35em;
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: "InterVariable", sans-serif; font-optical-sizing: auto;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #111;
        --color-text: #a3a3a3;
        --color-heading: #ededed;
        --color-link: #ededed;
        --color-link-underline: #555;
        --color-muted: #7a7a7a;
        --color-border: #333;
        --color-code-bg: #1e1e1e;
        --color-highlight: rgba(240, 160, 32, .28);
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

code,
pre {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: .889em;
    font-feature-settings: 
        "calt" 1, 
        "ss01" 1, 
        "ss02" 1, 
        "ss03" 1, 
        "ss19" 1, 
        "ss20" 1;
}

pre code {
    font-size: inherit;
    line-height: 1.5;
}

:not(pre) > code {
    background: var(--color-code-bg);
    color: var(--color-heading);
    padding: .1em .35em;
    border-radius: .25em;
}

pre,
pre code {
    white-space: pre;
}

pre.phiki code {
    background: unset;
    color: unset;
}

body {
    margin: 3rem auto;
    max-width: 38rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
.logo {
    color: var(--color-heading);
}

b,
strong {
    font-weight: 500;
}

p,
li,
blockquote {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font-weight: 600;
    line-height: 1.3;
    /* Inter's optical sizing already tightens large text */
    letter-spacing: normal;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.375rem;
}

h3 {
    font-size: 1.175rem;
}

h4 {
    font-size: 1.05rem;
}

h5,
h6 {
    font-size: 1rem;
}

h6 {
    color: var(--color-text);
}

* + h2,
* + h3 {
    margin-top: 2.25rem;
}

* + h4,
* + h5,
* + h6 {
    margin-top: 1.75rem;
}

h1 + *,
h2 + *,
h3 + *,
h4 + *,
h5 + *,
h6 + * {
    margin-top: .75rem;
}

header {
    margin-bottom: 3rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

nav a {
    margin-right: .5rem;
}

/* the page footer only, not <footer> inside content (e.g. quote citations) */
body > div > footer {
    margin-top: 3rem;
}

a,
a:focus {
    color: var(--color-link);
    border-bottom: 0;
    text-decoration: underline 1px var(--color-link-underline);
    text-underline-offset: .2em;
    text-decoration-skip-ink: auto;
    transition: text-decoration-color .15s;
}

a:hover,
a:focus {
    text-decoration-color: currentColor;
}

mark,
::selection {
    background: var(--color-highlight);
    color: var(--color-heading);
}

mark {
    padding: .05em .2em;
    border-radius: .2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* lists */
li + li {
    margin-top: .35rem;
}

li::marker {
    color: var(--color-muted);
}

blockquote {
    border-left: 2px solid var(--color-border);
    color: var(--color-muted);
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
}

/* quote block citation */
blockquote footer {
    margin-top: .5rem;
    font-size: .889rem;
    color: var(--color-text);
}

caption,
figcaption {
    text-align: center;
    font-size: .889rem;
}

img {
    max-width: 100%;
    height: auto;
}

/* video block: uploaded videos and YouTube/Vimeo embeds fill the column */
video,
figure iframe {
    display: block;
    width: 100%;
    border-radius: var(--border-radius);
}

video {
    height: auto;
}

figure iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

img, pre {
    border-radius: var(--border-radius);
}

/* gallery block */
.gallery ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    align-items: center;
    margin: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .gallery ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gallery li,
.gallery li + li {
    margin: 0;
}

.gallery a {
    display: block;
    text-decoration: none;
}

.gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/* image & gallery blocks: the frame takes the chosen ratio and the image
   is sized to its visible area (fitted when uncropped, filling it when
   cropped), so its rounded corners always sit on the picture itself */
.frame {
    display: block;
}

figure[data-ratio] .frame {
    position: relative;
    aspect-ratio: var(--ratio);
}

figure[data-ratio] .frame img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

figure[data-crop] .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery a:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

.logo {
    font-weight: bold;
    font-size: 1.125rem;
    text-decoration: none !important;
}

.languages {
    font-size: .889rem;
}

.title {
    margin-bottom: 2rem;
}

.explore {
    margin-bottom: 2rem;
}

.explore .tags {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.explore .tags .tag,
.explore .tags .tag:focus {
    border: 1px solid var(--color-border);
    padding: .35em .75em;
    border-radius: var(--border-radius);
    text-decoration: none;
}

.explore .tags span.tag {
    background: var(--color-heading);
    border-color: var(--color-heading);
    color: var(--color-bg);
}

.date,
.tags {
    font-size: .889rem;
}

.date,
.metadata {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.tags .tag,
.tags .tag:focus {
    font-size: inherit;
    border: none;
}

.metadata .tags .tag {
    color: var(--color-muted);
    text-decoration: none;
}

.metadata .tags .tag:hover,
.metadata .tags .tag:focus {
    color: var(--color-link);
}

.metadata .tags .tag:before {
    content: "#";
    color: var(--color-border);
}

.metadata .tags {
    display: flex;
    gap: .5rem;
}

.metadata {
    margin-top: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.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;
}

@media (prefers-color-scheme: dark) {
    .phiki,
    .phiki span {
        color: var(--phiki-dark-color) !important;
        background-color: var(--phiki-dark-background-color) !important;
        font-style: var(--phiki-dark-font-style) !important;
        font-weight: var(--phiki-dark-font-weight) !important;
        text-decoration: var(--phiki-dark-text-decoration) !important;
    }
}

/* lightbox (lightbox.js): full-screen, swipeable, no visible controls.
   Images are sized against the viewport minus an even margin (and any
   device safe areas), so they always fit without scrolling. */
.lightbox {
    --lightbox-gap: clamp(1rem, 5vmin, 3rem);
    --lightbox-top: max(var(--lightbox-gap), env(safe-area-inset-top));
    --lightbox-right: max(var(--lightbox-gap), env(safe-area-inset-right));
    --lightbox-bottom: max(var(--lightbox-gap), env(safe-area-inset-bottom));
    --lightbox-left: max(var(--lightbox-gap), env(safe-area-inset-left));

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
}

/* the page background (--color-bg), spelled out as older browsers don't
   pass custom properties on to ::backdrop */
.lightbox::backdrop {
    background: rgb(255 255 255 / .96);
}

@media (prefers-color-scheme: dark) {
    .lightbox::backdrop {
        background: rgb(17 17 17 / .96);
    }
}

.lightbox-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.lightbox-track::-webkit-scrollbar {
    display: none;
}

.lightbox figure {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--lightbox-top) var(--lightbox-right) var(--lightbox-bottom) var(--lightbox-left);
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100dvw - var(--lightbox-left) - var(--lightbox-right));
    max-height: calc(100dvh - var(--lightbox-top) - var(--lightbox-bottom));
}

/* fade (and gently scale) in on open (@starting-style) and out on close
   (.is-closing, set by lightbox.js before it closes the dialog, as not
   every browser can animate a dialog that is already closing) */
.lightbox,
.lightbox::backdrop {
    transition: opacity .2s ease-out;
}

.lightbox img {
    transition: transform .2s ease-out;
}

.lightbox.is-closing,
.lightbox.is-closing::backdrop {
    opacity: 0;
}

.lightbox.is-closing img {
    transform: scale(.97);
}

@starting-style {
    .lightbox[open],
    .lightbox[open]::backdrop {
        opacity: 0;
    }

    .lightbox[open] img {
        transform: scale(.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox::backdrop,
    .lightbox img {
        transition: none;
    }
}