/* KEV FREENEY — CARGO v3 · 2026-03-28 */

:root {
    --bg-color: rgb(238, 238, 238);
    --bg-surface: rgba(0, 0, 0, 0.03);
    --text-color: rgba(0, 0, 0, 0.75);
    --text-muted: rgba(0, 0, 0, 0.6);
    --text-subtle: rgba(0, 0, 0, 0.4);
    --accent-color: rgba(0, 0, 0, 0.85);
    --hr-color: rgba(0, 0, 0, 0.6);
    --border-color: rgba(0, 0, 0, 0.12);
    --selection-bg: rgba(0, 0, 0, 0.15);
    --selection-color: inherit;
    --focus-color: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --hover-opacity: 0.6;
    --image-zoom: 1.02;
    --transition-fast: 150ms;
    --transition-medium: 300ms;
    --transition-slow: 500ms;
    --container-width: 62%;
    --content-max-width: 42rem;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --bg-color: rgb(18, 18, 18);
        --bg-surface: rgba(255, 255, 255, 0.04);
        --text-color: rgba(255, 255, 255, 0.85);
        --text-muted: rgba(255, 255, 255, 0.6);
        --text-subtle: rgba(255, 255, 255, 0.4);
        --accent-color: rgba(255, 255, 255, 0.95);
        --hr-color: rgba(255, 255, 255, 0.3);
        --border-color: rgba(255, 255, 255, 0.12);
        --selection-bg: rgba(255, 255, 255, 0.2);
        --focus-color: rgba(255, 255, 255, 0.6);
        --overlay-bg: rgba(0, 0, 0, 0.6);
    }
}

html.dark-mode {
    --bg-color: rgb(18, 18, 18);
    --bg-surface: rgba(255, 255, 255, 0.04);
    --text-color: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-subtle: rgba(255, 255, 255, 0.4);
    --accent-color: rgba(255, 255, 255, 0.95);
    --hr-color: rgba(255, 255, 255, 0.3);
    --border-color: rgba(255, 255, 255, 0.12);
    --selection-bg: rgba(255, 255, 255, 0.2);
    --focus-color: rgba(255, 255, 255, 0.6);
    --overlay-bg: rgba(0, 0, 0, 0.6);
}

html.light-mode {
    --bg-color: rgb(238, 238, 238);
    --bg-surface: rgba(0, 0, 0, 0.03);
    --text-color: rgba(0, 0, 0, 0.75);
    --text-muted: rgba(0, 0, 0, 0.6);
    --text-subtle: rgba(0, 0, 0, 0.4);
    --accent-color: rgba(0, 0, 0, 0.85);
    --hr-color: rgba(0, 0, 0, 0.6);
    --border-color: rgba(0, 0, 0, 0.12);
    --selection-bg: rgba(0, 0, 0, 0.15);
    --focus-color: rgba(0, 0, 0, 0.5);
    --overlay-bg: rgba(0, 0, 0, 0.4);
}

#toolset { display: none; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-medium) ease, color var(--transition-medium) ease;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-subtle); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--text-subtle) transparent; }

::selection { background: var(--selection-bg); color: var(--selection-color); }

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }

a:active { opacity: 0.7; }
.page a.active { color: #f00; }

i, em { font-style: italic; }
b, strong { font-weight: bolder; }
sub, sup { position: relative; vertical-align: baseline; }
sub { top: 0.3em; }
sup { top: -0.4em; }
s { text-decoration: line-through; }
img { border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0 0 0 2.5em; }

blockquote {
    margin: 1.5rem 0;
    padding: 0.8rem 0 0.8rem 1.2rem;
    border-left: 2px solid var(--hr-color);
    color: var(--text-muted);
    font-style: italic;
}

hr {
    background: var(--hr-color);
    border: 0;
    height: 2px;
    display: block;
    margin: 1.0rem 0;
    transition: background var(--transition-medium) ease;
}

img, video, iframe { position: relative; z-index: 1; }

.content img {
    float: none;
    margin-bottom: 0;
    vertical-align: bottom;
    transition: transform var(--transition-medium) ease, opacity var(--transition-fast) ease;
}

.content img:hover { transform: scale(var(--image-zoom)); }
.content img.image-zoom:active { opacity: .7; }

.js-loaded .content img,
.js-loaded .thumbnails .thumb_image {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-loaded .content img.in-view,
.js-loaded .thumbnails .thumb_image.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.js-loaded [thumbnails-pad]:nth-child(2) .thumb_image { transition-delay: 60ms; }
.js-loaded [thumbnails-pad]:nth-child(3) .thumb_image { transition-delay: 120ms; }
.js-loaded [thumbnails-pad]:nth-child(4) .thumb_image { transition-delay: 180ms; }
.js-loaded [thumbnails-pad]:nth-child(5) .thumb_image { transition-delay: 240ms; }
.js-loaded [thumbnails-pad]:nth-child(6) .thumb_image { transition-delay: 300ms; }

[image-gallery="slideshow"] { margin-bottom: 2rem; }

.gallery_image_caption {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-subtle);
    font-family: "Diatype Variable", Diatype, Icons;
    font-style: normal;
    line-height: 1.2;
    transition: color var(--transition-medium) ease;
}

.loading[data-loading] { position: fixed; bottom: 8px; left: 48px; }

[data-predefined-style="true"] bodycopy {
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
    font-weight: 400;
    color: var(--text-color);
    font-family: "Diatype Variable", Diatype, Icons;
    font-style: normal;
    line-height: 1.35;
    font-variation-settings: 'slnt' 0, 'MONO' 0;
    transition: color var(--transition-medium) ease;
}

[data-predefined-style="true"] bodycopy p,
[data-predefined-style="true"] bodycopy ul,
[data-predefined-style="true"] bodycopy ol,
[data-predefined-style="true"] bodycopy blockquote {
    max-width: var(--content-max-width);
}

[data-predefined-style="true"] bodycopy a {
    color: var(--text-color);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

[data-predefined-style="true"] bodycopy a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--transition-medium) ease;
}

[data-predefined-style="true"] bodycopy a:hover::after { width: 100%; }
[data-predefined-style="true"] bodycopy a:hover { opacity: var(--hover-opacity); }

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover { border-bottom: 0; padding-bottom: 0; }

bodycopy a.image-link::after,
bodycopy a.icon-link::after { display: none; }

[data-predefined-style="true"] h1 {
    font-family: "Diatype Variable", Diatype, Icons;
    font-style: normal;
    font-weight: 400;
    padding: 0; margin: 0;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    line-height: 1;
    color: var(--text-color);
    font-variation-settings: 'slnt' 0, 'MONO' 0;
    transition: color var(--transition-medium) ease;
}

[data-predefined-style="true"] h1 a {
    color: var(--text-color);
    transition: color var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

[data-predefined-style="true"] h1 a:hover { opacity: var(--hover-opacity); }

[data-predefined-style="true"] h2 {
    font-family: "Diatype Variable", Diatype, Icons;
    font-style: normal;
    font-weight: 500;
    padding: 0; margin: 0;
    color: var(--text-color);
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    line-height: 1.2;
    font-variation-settings: 'slnt' 0, 'MONO' 0;
    transition: color var(--transition-medium) ease;
}

[data-predefined-style="true"] h2 a {
    color: var(--text-color);
    transition: color var(--transition-fast) ease;
}

[data-predefined-style="true"] small {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.4;
    font-family: "Monument Grotesk Mono Variable", "Monument Grotesk Mono", Icons;
    font-style: normal;
    font-weight: 400;
    color: var(--text-muted);
    font-variation-settings: 'slnt' 0, 'MONO' 1;
    transition: color var(--transition-medium) ease;
}

[data-predefined-style="true"] small a {
    color: var(--text-muted);
    border-bottom-width: 0em;
    position: relative;
    transition: color var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

[data-predefined-style="true"] small a:hover { opacity: var(--hover-opacity); }

.page_container bodycopy ol li {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 500ms ease forwards;
}

.page_container bodycopy ol li:nth-child(1)  { animation-delay: 0ms; }
.page_container bodycopy ol li:nth-child(2)  { animation-delay: 50ms; }
.page_container bodycopy ol li:nth-child(3)  { animation-delay: 100ms; }
.page_container bodycopy ol li:nth-child(4)  { animation-delay: 150ms; }
.page_container bodycopy ol li:nth-child(5)  { animation-delay: 200ms; }
.page_container bodycopy ol li:nth-child(6)  { animation-delay: 250ms; }
.page_container bodycopy ol li:nth-child(7)  { animation-delay: 300ms; }
.page_container bodycopy ol li:nth-child(8)  { animation-delay: 350ms; }
.page_container bodycopy ol li:nth-child(9)  { animation-delay: 400ms; }
.page_container bodycopy ol li:nth-child(10) { animation-delay: 450ms; }
.page_container bodycopy ol li:nth-child(11) { animation-delay: 500ms; }
.page_container bodycopy ol li:nth-child(12) { animation-delay: 550ms; }
.page_container bodycopy ol li:nth-child(13) { animation-delay: 600ms; }
.page_container bodycopy ol li:nth-child(14) { animation-delay: 650ms; }
.page_container bodycopy ol li:nth-child(15) { animation-delay: 700ms; }
.page_container bodycopy ol li:nth-child(16) { animation-delay: 750ms; }
.page_container bodycopy ol li:nth-child(17) { animation-delay: 800ms; }
.page_container bodycopy ol li:nth-child(18) { animation-delay: 850ms; }

@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.page_container bodycopy ol li a.keyboard-selected { color: var(--accent-color); font-weight: 500; }

.page_container bodycopy ol li a.keyboard-selected::before {
    content: '> ';
    position: absolute;
    left: -1.5em;
    opacity: 0.6;
}

.page_container bodycopy ol li a {
    transition: opacity var(--transition-fast) ease, color var(--transition-fast) ease;
}

.page_container bodycopy ol:hover li a { opacity: 0.35; }
.page_container bodycopy ol:hover li a:hover { opacity: 1; }

.page_container bodycopy ol li a[aria-current="page"] {
    color: #f00;
    opacity: 1 !important;
    font-weight: 500;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: var(--bg-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border: 2px solid var(--focus-color);
    font-family: "Monument Grotesk Mono Variable", "Monument Grotesk Mono", Icons;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top var(--transition-fast) ease;
}

.skip-link:focus { top: 1rem; outline: none; }

.page_container bodycopy ol li a:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px;
    border-radius: 2px;
}

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

[data-css-preset] .page { background-color: initial; }

.mobile .page,
[data-css-preset].mobile .page {
    position: relative;
    max-width: 100%;
    width: 100%;
    background-color: transparent;
}

[data-css-preset] .container { margin-left: auto; margin-right: 0; text-align: left; }
[data-css-preset] body { background-color: var(--bg-color); transition: background-color var(--transition-medium) ease; }
[data-css-preset] .container_width { width: var(--container-width); }

@media (max-width: 1024px) { :root { --container-width: 75%; } }
@media (max-width: 768px)  { :root { --container-width: 90%; } }
@media (max-width: 480px)  { :root { --container-width: 95%; } }

[data-css-preset] .content_padding { padding: 1.4rem; }

.page_container { animation: pageIn 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
    60% { filter: blur(0); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

div[thumbnails] { justify-content: flex-start; }
[data-css-preset] .thumbnails { background-color: transparent; }
[data-css-preset] .thumbnails_width { width: 60%; }

@media (max-width: 768px) { [data-css-preset] .thumbnails_width { width: 90%; } }

[data-css-preset] [thumbnails-pad] { padding: 0.75rem; }
[data-css-preset] [thumbnails-gutter] { margin: -1.5rem; }
[data-css-preset] [responsive-layout] [thumbnails-pad] { padding: 0.5rem; }
[data-css-preset] [responsive-layout] [thumbnails-gutter] { margin: -1rem; }

.thumbnails .thumb_image {
    outline: 0px solid var(--border-color);
    outline-offset: -1px;
    will-change: transform;
    transition: transform var(--transition-medium) cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow var(--transition-medium) ease, outline var(--transition-fast) ease;
}

.thumbnails .thumb_image:hover {
    transform: scale(1.03) translateY(-3px);
    outline-width: 1px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.thumbnails .title {
    margin-top: 1.0rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--accent-color);
    font-family: "Diatype Variable", Diatype, Icons;
    font-style: normal;
    line-height: 1.3;
    transition: color var(--transition-medium) ease, opacity 0.4s ease, transform 0.4s ease;
}

.js-loaded .thumbnails .title { opacity: 0; transform: translateY(6px); }
.js-loaded .thumbnails .title.in-view { opacity: 1; transform: translateY(0); }

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
    font-family: "Monument Grotesk Mono Variable", "Monument Grotesk Mono", Icons;
    font-style: normal;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(3px);
    transition: color var(--transition-medium) ease, opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}

[thumbnails-pad]:hover .tags { opacity: 1; transform: translateY(0); }

.thumbnails .tags a { border-bottom: 0; color: var(--text-muted); text-decoration: none; transition: opacity var(--transition-fast) ease; }
.thumbnails .tags a:hover { opacity: var(--hover-opacity); }
.thumbnails .has_title .tags { margin-top: -1.8rem; }

[data-css-preset] #site_menu_button {
    color: var(--text-color);
    line-height: 1;
    font-size: 30px;
    padding: 6px;
    background: transparent;
    position: fixed;
    right: 2rem;
    top: 2rem;
    transition: color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

[data-css-preset] #site_menu_button:hover { transform: scale(1.1); }
[data-css-preset] #site_menu_button:active { transform: scale(0.95); }
body.mobile #site_menu_button { margin: -10px; font-size: 32px; }
#site_menu_button.custom_icon { width: 40px; height: auto; }
#site_menu_button.active { display: none; }

#site_menu {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, Icons;
    background: rgba(20, 20, 20, 0.92);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    padding: 20px 30px 90px 30px;
    max-width: 400px;
    min-width: 300px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

body.mobile #site_menu { width: 100%; }

#site_menu .page-link a { color: rgba(255, 255, 255, 0.75); transition: opacity var(--transition-fast) ease; }
#site_menu .set-link > a { color: rgba(255, 255, 255, 0.75); font-weight: bold; }
#site_menu a:active { opacity: .7; }
#site_menu a.active { opacity: .4; }

#site_menu .close {
    display: none;
    color: rgba(255, 255, 255, 0.4);
    line-height: .85em;
    font-size: 45px;
    transition: color var(--transition-fast) ease;
}

#site_menu .close:hover { color: rgba(255, 255, 255, 0.8); }
body.mobile #site_menu .close { display: block; font-size: 50px; line-height: 1em; }
#site_menu .break { height: 28px; }
#site_menu .indent { margin-left: 28px; }

[data-css-preset] #shop_button {
    color: var(--accent-color);
    background: transparent;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    position: fixed;
    padding: 6px;
    top: 1rem;
    left: 1.5rem;
    transition: transform var(--transition-fast) ease;
}

[data-css-preset] #shop_button:hover { transform: scale(1.1); }

#shop_button.text {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-color);
    font-family: "Diatype Variable", Diatype, Icons;
    padding: 0;
    line-height: 1.3;
    font-style: normal;
}

#shop_button.custom_icon { width: 40px; height: auto; }
body.mobile #shop_button:not(.text) { margin: -6px; font-size: 40px; }

.shop_product { width: 100%; max-width: 22rem; position: relative; display: block; }

.shop_product .price {
    font-family: "Diatype Variable", Diatype, Icons;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-color);
    display: block;
    margin-bottom: 1rem;
    font-style: normal;
    font-weight: 400;
    transition: color var(--transition-medium) ease;
}

.shop_product .dropdown {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, Icons;
    font-size: 1.3rem;
    display: inline-block;
    width: 100%;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);
    background-repeat: no-repeat;
    background-position: right;
    margin-bottom: 1rem;
    line-height: 1.4;
    padding: .7rem 2.5rem 0.6rem 1rem;
    font-style: normal;
    font-weight: 400;
    color: var(--text-color);
    transition: border-color var(--transition-fast) ease;
}

.shop_product .dropdown:focus { border-color: var(--focus-color); outline: none; }

.shop_product .button {
    font-family: "Diatype Variable", Diatype, Icons;
    font-size: 1.3rem;
    background: var(--text-color);
    color: var(--bg-color);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
    line-height: 1;
    padding: .8rem 1rem;
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.shop_product .button:hover { opacity: 0.8; }
.shop_product .button:active { transform: scale(0.98); }

[data-css-preset] .quick-view { padding: 2.5rem; height: 100%; width: 100%; }
body.mobile .quick-view { width: 100%; height: 100%; margin: 0; }

[data-css-preset] .quick-view-background {
    background: var(--bg-color);
    transition: background var(--transition-medium) ease;
}

.quick-view-caption {
    font-family: "Diatype Variable", Diatype, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: var(--overlay-bg);
    color: white;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.quick-view-navigation .left-arrow { left: 10px; }
.quick-view-navigation .right-arrow { right: 10px; }

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow { height: 36px; width: 36px; cursor: pointer; transition: transform var(--transition-fast) ease; }

.quick-view-navigation .left-arrow:hover,
.quick-view-navigation .right-arrow:hover { transform: scale(1.1); }

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color { stroke: #fff; stroke-width: 0px; }

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color { stroke: var(--accent-color); stroke-width: 2px; }

.quick-view-navigation .close-button { top: 10px; right: 10px; width: 36px; height: 36px; cursor: pointer; transition: transform var(--transition-fast) ease; }
.quick-view-navigation .close-button:hover { transform: scale(1.1); }
.quick-view-navigation .close-button .inner-color { stroke: #fff; stroke-width: 0px; }
.quick-view-navigation .close-button .outer-color { stroke: var(--accent-color); stroke-width: 2px; }

.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow { height: 36px; width: 36px; cursor: pointer; transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease; }

.image-gallery-navigation .left-arrow:hover,
.image-gallery-navigation .right-arrow:hover { transform: scale(1.15); opacity: 0.8; }

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color { stroke: #fff; stroke-width: 2px; }

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color { stroke: var(--text-muted); stroke-width: 3px; }

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow { width: 36px; height: 36px; cursor: pointer; transition: transform var(--transition-fast) ease; }

.wallpaper-navigation .left-arrow:hover,
.wallpaper-navigation .right-arrow:hover { transform: scale(1.1); }

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color { stroke: #fff; stroke-width: 2px; }

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color { stroke: var(--text-muted); stroke-width: 3px; }

.feed .content_container .page { border-top: 0px dashed var(--border-color); }
.feed .content_container .page_container:first-child .page { border-top: 0; }

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-color);
    font-size: 1.4rem;
    line-height: 1.3;
    font-family: "Diatype Variable", Diatype, Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
    transition: color var(--transition-medium) ease, background var(--transition-medium) ease;
}

body.mobile .audio-player { max-width: 100%; }

.audio-player .separator { width: 1px; background-color: var(--border-color); transition: background-color var(--transition-medium) ease; }
.audio-player .button { background: transparent; cursor: pointer; fill: var(--accent-color); transition: fill var(--transition-fast) ease, transform var(--transition-fast) ease; }
.audio-player .button:hover { transform: scale(1.1); }
.audio-player .icon { fill: var(--accent-color); padding: 30%; width: 100%; margin: auto; }
.audio-player .buffer { background: var(--bg-surface); }
.audio-player .progress { background: var(--bg-surface); }
.audio-player .progress-indicator { border: 1px solid var(--accent-color); width: 1px; height: 100%; right: 0; position: absolute; cursor: ew-resize; }
.audio-player .note-icon { height: 100%; width: 3.8rem; padding: 0.9rem; fill: var(--text-muted); transition: fill var(--transition-fast) ease; }
.audio-player .current-time { padding-left: 1rem; }
.audio-player .total-time { padding-right: 1rem; }

#grain { mix-blend-mode: multiply; }
html.dark-mode #grain { mix-blend-mode: screen; }
html.light-mode #grain { mix-blend-mode: multiply; }

@media (prefers-color-scheme: dark) {
    #grain { mix-blend-mode: screen; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .content img:hover { transform: none; }
    .page_container bodycopy ol li { opacity: 1; transform: none; animation: none; }
    .page_container { animation: none; }
    .js-loaded .content img,
    .js-loaded .thumbnails .thumb_image,
    .js-loaded .thumbnails .title { opacity: 1; transform: none; }
    #grain { display: none; }
}

@media (prefers-contrast: high) {
    :root { --text-color: #000; --bg-color: #fff; }
    [data-predefined-style="true"] bodycopy a::after { height: 2px; }
    *:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
}

@media print {
    * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
    #site_menu_button, #shop_button, #theme-toggle, #scroll-progress, #grain, .loading[data-loading] { display: none !important; }
    body { font-size: 12pt; }
    a { text-decoration: underline; }
}

/* ═══════════════════════════════════════════
   PRETEXT — Dynamic Typography Core
   ═══════════════════════════════════════════ */

.pretext-proximity { display: inline; cursor: default; }

.pretext-char {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s ease;
    will-change: transform, opacity;
}

.pretext-canvas-reveal { position: relative; z-index: 1; }
.pretext-flowing { border-radius: 2px; transition: opacity var(--transition-medium) ease; }

.pretext-magnetic {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

[data-pretext-balanced="true"] { text-wrap: balance; margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════
   PER-PAGE — Design Tokens
   ═══════════════════════════════════════════ */

body { --page-accent: var(--accent-color); --page-glow: transparent; --page-overlay: none; }

/* Around We Go — submersion / aquatic */
body.page-around-we-go {
    --page-accent: rgba(0, 180, 180, 0.85);
    --page-glow: rgba(0, 180, 180, 0.15);
}
body.page-around-we-go .page_container { position: relative; }
body.page-around-we-go [data-predefined-style="true"] bodycopy p {
    animation: textFloat 6s ease-in-out infinite;
}
body.page-around-we-go [data-predefined-style="true"] h1 {
    text-shadow: 0 0 40px var(--page-glow), 0 0 80px rgba(0, 180, 180, 0.06);
}
@keyframes textFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(0.15deg); }
    50% { transform: translateY(2px) rotate(-0.1deg); }
    75% { transform: translateY(-1px) rotate(0.05deg); }
}

/* Kerbstone15 — neolithic / carved stone */
body.page-kerbstone15-1 {
    --page-accent: rgba(204, 153, 51, 0.9);
    --page-glow: rgba(204, 153, 51, 0.12);
}
body.page-kerbstone15-1 [data-predefined-style="true"] h1 {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 300;
}
body.page-kerbstone15-1 [data-predefined-style="true"] bodycopy p {
    border-left: 2px solid var(--page-accent);
    padding-left: 1.2rem;
    transition: border-color 0.4s ease;
}

/* The Irish Party — Venice energy / celebration */
body.page-the-irish-party-venice-biennale-2024 {
    --page-accent: rgba(255, 30, 30, 0.85);
    --page-glow: rgba(255, 30, 30, 0.1);
}
body.page-the-irish-party-venice-biennale-2024 [data-predefined-style="true"] h1 {
    animation: partyPulse 2s ease-in-out infinite;
}
body.page-the-irish-party-venice-biennale-2024 [data-predefined-style="true"] bodycopy a {
    color: var(--page-accent) !important;
}
@keyframes partyPulse {
    0%, 100% { letter-spacing: 0; }
    50% { letter-spacing: 0.03em; }
}

/* Lovely Days Stage — festival / warm timber */
body.page-lovely-days-stage {
    --page-accent: rgba(218, 165, 32, 0.9);
    --page-glow: rgba(218, 165, 32, 0.15);
}
body.page-lovely-days-stage [data-predefined-style="true"] h1 {
    text-shadow: 0 0 30px var(--page-glow), 0 2px 4px rgba(0,0,0,0.1);
}
body.page-lovely-days-stage [data-predefined-style="true"] bodycopy {
    border-bottom: 1px solid rgba(218, 165, 32, 0.2);
    padding-bottom: 2rem;
}

/* Birthday / The Pain — grief / fractured */
body.page-birthday-the-pain {
    --page-accent: rgba(100, 130, 180, 0.85);
    --page-glow: rgba(100, 130, 180, 0.1);
}
body.page-birthday-the-pain [data-predefined-style="true"] h1 {
    animation: glitchShift 4s ease-in-out infinite;
}
body.page-birthday-the-pain [data-predefined-style="true"] bodycopy p {
    opacity: 0.75;
    transition: opacity 0.5s ease;
}
body.page-birthday-the-pain [data-predefined-style="true"] bodycopy p:hover { opacity: 1; }
@keyframes glitchShift {
    0%, 90%, 100% { transform: none; text-shadow: none; }
    92% { transform: translateX(-2px); text-shadow: 2px 0 rgba(255,0,0,0.3), -2px 0 rgba(0,255,255,0.3); }
    94% { transform: translateX(2px); text-shadow: -2px 0 rgba(255,0,0,0.3), 2px 0 rgba(0,255,255,0.3); }
    96% { transform: translateX(-1px); text-shadow: 1px 0 rgba(255,0,0,0.2); }
}

/* AVA London — electronic / terminal */
body.page-ava-london {
    --page-accent: rgba(0, 255, 65, 0.85);
    --page-glow: rgba(0, 255, 65, 0.08);
}
body.page-ava-london [data-predefined-style="true"] h1,
body.page-ava-london [data-predefined-style="true"] h2 {
    font-family: "Monument Grotesk Mono Variable", "Monument Grotesk Mono", monospace, Icons;
    text-shadow: 0 0 20px var(--page-glow);
}
body.page-ava-london [data-predefined-style="true"] bodycopy {
    font-variant-ligatures: none;
}

/* RISING — laser / river */
body.page-rising {
    --page-accent: rgba(255, 20, 20, 0.85);
    --page-glow: rgba(255, 20, 20, 0.12);
}
body.page-rising [data-predefined-style="true"] h1 {
    text-shadow: 0 0 8px var(--page-glow), 0 0 30px rgba(255, 20, 20, 0.06);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
body.page-rising .page_container::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 3px,
        rgba(255, 20, 20, 0.015) 3px, rgba(255, 20, 20, 0.015) 4px
    );
    pointer-events: none;
    z-index: 9997;
    animation: scanDrift 8s linear infinite;
}
@keyframes scanDrift {
    from { transform: translateY(0); }
    to { transform: translateY(4px); }
}

/* Rituals — tarot / mystical */
body.page-rituals {
    --page-accent: rgba(212, 175, 55, 0.9);
    --page-glow: rgba(212, 175, 55, 0.15);
}
body.page-rituals [data-predefined-style="true"] h1 {
    background: linear-gradient(135deg, var(--text-color), rgba(212, 175, 55, 0.8), var(--text-color));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerGold 4s ease-in-out infinite;
}
@keyframes shimmerGold {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Grayscale — heritage / monochrome */
body.page-grayscale-2017-2018 {
    --page-accent: rgba(128, 128, 128, 0.85);
}
body.page-grayscale-2017-2018 .content img { filter: grayscale(0.7); transition: filter 0.6s ease; }
body.page-grayscale-2017-2018 .content img:hover { filter: grayscale(0); }
body.page-grayscale-2017-2018 [data-predefined-style="true"] h1 {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* Alumina — cymatics / vibration */
body.page-alumina {
    --page-accent: rgba(200, 210, 220, 0.9);
    --page-glow: rgba(200, 210, 220, 0.12);
}
body.page-alumina [data-predefined-style="true"] h1 {
    animation: cymaticVibrate 0.15s linear infinite;
    animation-play-state: paused;
}
body.page-alumina [data-predefined-style="true"] h1:hover {
    animation-play-state: running;
}
@keyframes cymaticVibrate {
    0% { transform: translate(0, 0); }
    25% { transform: translate(0.5px, -0.5px); }
    50% { transform: translate(-0.5px, 0.5px); }
    75% { transform: translate(0.5px, 0.5px); }
    100% { transform: translate(-0.5px, -0.5px); }
}

/* Perpetua — lineage / layered */
body.page-perpetua {
    --page-accent: rgba(160, 130, 90, 0.85);
    --page-glow: rgba(160, 130, 90, 0.08);
}
body.page-perpetua [data-predefined-style="true"] h1 {
    text-shadow: 1px 1px 0 rgba(160, 130, 90, 0.15), 2px 2px 0 rgba(160, 130, 90, 0.08), 3px 3px 0 rgba(160, 130, 90, 0.04);
}
body.page-perpetua [data-predefined-style="true"] bodycopy p {
    position: relative;
    padding-left: 1rem;
}
body.page-perpetua [data-predefined-style="true"] bodycopy p::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--page-accent), transparent);
}

/* Lucid Link — mirror / dreams */
body.page-lucid-link {
    --page-accent: rgba(180, 200, 220, 0.9);
    --page-glow: rgba(180, 200, 220, 0.2);
}
body.page-lucid-link [data-predefined-style="true"] h1 {
    position: relative;
}
body.page-lucid-link [data-predefined-style="true"] h1::after {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 100%;
    transform: scaleY(-1);
    opacity: 0.08;
    filter: blur(2px);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
}

/* Dither II — glitch / halftone */
body.page-dither-ii {
    --page-accent: var(--text-color);
}
body.page-dither-ii [data-predefined-style="true"] h1 {
    font-weight: 700;
    mix-blend-mode: difference;
}
body.page-dither-ii .content img {
    transition: filter 0.4s ease;
}
body.page-dither-ii .content img:hover {
    filter: contrast(1.5) brightness(1.1);
}

/* Saint Sister — emotional / lyrical */
body.page-saint-sister {
    --page-accent: rgba(200, 160, 140, 0.85);
    --page-glow: rgba(200, 160, 140, 0.1);
}
body.page-saint-sister [data-predefined-style="true"] bodycopy p {
    animation: breathe 5s ease-in-out infinite;
}
body.page-saint-sister [data-predefined-style="true"] h1 {
    font-style: italic;
    font-variation-settings: 'slnt' -8;
}
@keyframes breathe {
    0%, 100% { opacity: 0.8; transform: none; }
    50% { opacity: 1; transform: translateY(-1px); }
}

/* r.kitt — adversarial / RGB split */
body.page-r-kitt {
    --page-accent: rgba(255, 255, 255, 0.85);
}
body.page-r-kitt [data-predefined-style="true"] h1 {
    position: relative;
}
body.page-r-kitt [data-predefined-style="true"] h1::before,
body.page-r-kitt [data-predefined-style="true"] h1::after {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
body.page-r-kitt [data-predefined-style="true"] h1:hover::before {
    color: rgba(255, 0, 0, 0.7);
    transform: translate(-2px, -1px);
    opacity: 1;
}
body.page-r-kitt [data-predefined-style="true"] h1:hover::after {
    color: rgba(0, 255, 255, 0.7);
    transform: translate(2px, 1px);
    opacity: 1;
}

/* PS5 Launch — futuristic / neon */
body.page-ps5-launch {
    --page-accent: rgba(0, 70, 200, 0.85);
    --page-glow: rgba(0, 70, 200, 0.15);
}
body.page-ps5-launch [data-predefined-style="true"] h1 {
    text-shadow: 0 0 20px var(--page-glow), 0 0 60px rgba(0, 70, 200, 0.06);
    position: relative;
    overflow: hidden;
}
body.page-ps5-launch [data-predefined-style="true"] h1::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(0, 70, 200, 0.08), transparent);
    animation: neonSweep 3s ease-in-out infinite;
}
@keyframes neonSweep {
    0% { left: -60%; }
    100% { left: 160%; }
}

/* Music Vids — rhythm / pulse */
body.page-music-vids {
    --page-accent: var(--text-color);
}
body.page-music-vids [data-predefined-style="true"] h1 {
    animation: rhythmPulse 1.2s ease-in-out infinite;
}
@keyframes rhythmPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.008); }
}

/* CLU — Tron / 80s sci-fi / CRT */
body.page-clu-2011-2017 {
    --page-accent: rgba(0, 232, 255, 0.85);
    --page-glow: rgba(0, 232, 255, 0.15);
}
body.page-clu-2011-2017 [data-predefined-style="true"] h1 {
    text-shadow: 0 0 10px var(--page-glow), 0 0 40px rgba(0, 232, 255, 0.08), 0 0 80px rgba(0, 232, 255, 0.04);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
body.page-clu-2011-2017 [data-predefined-style="true"] bodycopy {
    font-family: "Monument Grotesk Mono Variable", "Monument Grotesk Mono", monospace, Icons;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.6;
}
body.page-clu-2011-2017 .page_container::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 2px,
        rgba(0, 232, 255, 0.02) 2px, rgba(0, 232, 255, 0.02) 4px
    );
    pointer-events: none;
    z-index: 9997;
}

/* Information page — professional / clean */
body.page-information-1 [data-predefined-style="true"] bodycopy p {
    opacity: 0;
    transform: translateY(12px);
    animation: sectionReveal 0.6s ease forwards;
}
body.page-information-1 [data-predefined-style="true"] bodycopy p:nth-of-type(1) { animation-delay: 0ms; }
body.page-information-1 [data-predefined-style="true"] bodycopy p:nth-of-type(2) { animation-delay: 120ms; }
body.page-information-1 [data-predefined-style="true"] bodycopy p:nth-of-type(3) { animation-delay: 240ms; }
body.page-information-1 [data-predefined-style="true"] bodycopy p:nth-of-type(4) { animation-delay: 360ms; }
body.page-information-1 [data-predefined-style="true"] bodycopy p:nth-of-type(5) { animation-delay: 480ms; }
@keyframes sectionReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   PRETEXT — Reduced Motion Override
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .pretext-char { transition: none !important; }
    .pretext-magnetic { transition: none !important; }
    .pretext-canvas-reveal, .pretext-flowing, .pretext-rain-canvas { display: none !important; }
    [data-predefined-style="true"] bodycopy,
    [data-predefined-style="true"] h1,
    [data-predefined-style="true"] h2 {
        font-variation-settings: 'slnt' 0, 'MONO' 0 !important;
        letter-spacing: 0 !important;
        animation: none !important;
        transform: none !important;
        text-shadow: none !important;
    }
    [data-predefined-style="true"] bodycopy p {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    body.page-rising .page_container::after,
    body.page-clu-2011-2017 .page_container::after { display: none !important; }
    body.page-grayscale-2017-2018 .content img { filter: none !important; }
}