/* ==========================================================================
   FONT COMPONENTS  -  CONNECTED TO YOUR DESIGN PANEL
   By default every line below FOLLOWS the fonts you pick in Design > Bodycopy,
   H1, H2 and Small. Change a font there (the main font picker) and the whole
   site follows, including the nav island, filter chips, footer and Archives.
     --cg-body  = your Bodycopy font      --cg-h1 = your H1 font
     --cg-h2    = your H2 font            --cg-small = your Small font
   (a small script in the HTML tab reads those four and fills them in)
   To force ONE part to a different font, replace that whole line with a font
   name, e.g.  --font-ui: "Space Mono", Icons, monospace;
   To undo, delete this block (and the "FONT SYNC" script in the HTML tab).
   ========================================================================== */
:root {
  --font-brand:          var(--cg-h1, "Neue Haas Grotesk", Icons, system-ui, sans-serif);     /* "Kelly Phan" + moon, top-left          -> H1 */
  --font-headline:       var(--cg-h2, "Neue Haas Grotesk", Icons, system-ui, sans-serif);     /* big intro text on Home                 -> H2 */
  --font-page-title:     var(--cg-h1, "Neue Haas Grotesk", Icons, system-ui, sans-serif);     /* "Archives", "Play", "About Me" titles  -> H1 */
  --font-title:          var(--cg-body, "Neue Haas Grotesk", Icons, system-ui, sans-serif);   /* bold project titles                    -> Bodycopy */
  --font-body:           var(--cg-body, "Neue Haas Grotesk", Icons, system-ui, sans-serif);   /* descriptions, About text, Index list   -> Bodycopy */
  --font-small:          var(--cg-small, "Neue Haas Grotesk", Icons, system-ui, sans-serif);  /* small captions ("Most recent work")    -> Small */
  --font-ui:             var(--cg-body, "Neue Haas Grotesk", Icons, system-ui, sans-serif);   /* Night pill, nav island, chips, #tags   -> Bodycopy */
  --font-footer-lines:   var(--cg-h2, "Neue Haas Grotesk", Icons, system-ui, sans-serif);     /* footer email / NOW lines               -> H2 */
  --font-footer-buttons: var(--cg-body, "Neue Haas Grotesk", Icons, system-ui, sans-serif);   /* footer buttons, back to top, (c)       -> Bodycopy */
  --font-footer-mark:    var(--cg-h1, "Neue Haas Grotesk", Icons, system-ui, sans-serif);     /* giant KELLY PHAN wordmark              -> H1 */
}

s
#info {
	
}

    
a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 1;
}

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 4.5rem;
}

ol > li {
    padding-left: 0.75rem;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(255, 42, 0, .3);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 0rem;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: 1.0em;
    margin-bottom: 0.5rem;
    font-size: 1vw;
	font-weight: 500;
	color: rgba(236, 0, 140, 0.98);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: left;
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.5rem;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-family: "Space Mono", Icons;
	font-style: normal;
	line-height: 1.3;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(0, 0, 0);
	padding-bottom: 0em;
	text-decoration: underline;
}

[data-predefined-style="true"] bodycopy a:hover {

}

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

[data-predefined-style="true"] h1 {
	font-family: "Favorit Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 1.2;
	color: #000;
}

[data-predefined-style="true"] h1 a {
	color: rgb(0, 17, 255);
}

[data-predefined-style="true"] h2 {
	font-family: "Favorit Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: #000;
	font-size: 4.3rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

[data-predefined-style="true"] h2 a {
	color: rgb(0, 17, 255);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.3;
	font-family: Sprat, Icons;
	font-style: normal;
	font-weight: 200;
	color: rgb(0, 17, 255);
}

[data-predefined-style="true"] small a {
	color: rgb(0, 17, 255);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */
[data-css-preset] #info{
	position:absolute;
}
[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
    font-size: 5rem;
	background-color: transparent /*!page_bgcolor*/;
    
}


[data-css-preset] .container {
	margin-left: auto /*!content_right*/;
	margin-right: 0 /*!content_right*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 75%/*!content_right*/;
}

[data-css-preset] .content_padding {
	padding-top: 2.7rem/*!main_margin*/;
	padding-bottom: 2.7rem/*!main_margin*/;
	padding-left: 2.7rem/*!main_margin*/;
	padding-right: 2.7rem/*!main_margin*/;
}

[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

[data-css-preset] .backdrop {
	width: 100% /*!background_cover*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgb(167, 103, 103)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.4rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -0.8rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.55rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1.1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: .8rem;
    margin-bottom: 0rem;
    font-size: 1.2rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
	color: rgba(0, 0, 0, 1);
	line-height: 1;
	font-size: 28px /*!site_menu_button*/;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	top: 1.0rem /*!site_menu_button*/;
	right: 1.2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 30px;
}

#site_menu_button.custom_icon {
	width: 40px;
	height: auto;
}

#site_menu_button.active {
	display: flex;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: "Sprat Extended";
	background: rgba(248, 248, 248, 1);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 00px;
	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, 0, 0, 0.75);
}

#site_menu .set-link > a {
	color: rgba(232, 193, 193, 1);
	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: 45vw;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 300vw;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/**
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1.;
    position: fixed;
	padding: 6px;
	bottom: 3rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.2rem;
    padding: 0;
	font-weight: 500;
	color: rgba(255, 42, 0, 1);
	font-style: normal;
    line-height: 1.3;
    letter-spacing: .07em;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/**
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	line-height: 1.1;
	color: rgba(255, 42, 0, 1);
}

.shop_product .dropdown {
    font-family: "Neue Haas Grotesk", Icons;
    font-size: 1.2rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(255, 42, 0, 0.2);
    border-radius: 10rem;
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .8rem 1rem;
	font-style: normal;
	font-weight: 500;
    color: rgba(255, 42, 0, 1);
}

.shop_product .button {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.2rem;
    background: rgba(255, 42, 0, 1);
    border-radius: 10rem;
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem;
	font-style: normal;
	font-weight: 500;
    text-decoration: none;
}

/**
 * Image Zoom
 */

.content img.image-zoom:active {
    opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.8) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "Neue Haas Grotesk", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1rem;
	font-style: normal;
	font-weight: 500;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}

/**
 * Quick View Navigation 
 */

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

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

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

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

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

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

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/**
 * Audio Player
 */

.audio-player {
    max-width: 26rem;
    height: 3.3rem;
    outline: 1px solid rgba(255, 42, 0, 0.25);
    color: rgba(255, 42, 0, 1);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.2;
    font-family: "Neue Haas Grotesk", Icons;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

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

.audio-player .separator {
    width: 1px;
    background-color: rgba(255, 42, 0, 0.31);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(255, 42, 0, 0.9);
}

.audio-player .icon {
    fill: rgba(255, 42, 0, 0.9);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(255, 42, 0, .1);
}

.audio-player .progress {
    background: rgba(255, 42, 0, 0.2);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(255, 42, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(255, 42, 0, 0.75);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}


/* ==========================================================
   KELLY PHAN · DESIGN REFRESH
   Paste at the very BOTTOM of the CSS Editor.
   (If you pasted cargo-additions.css earlier, delete that block
   first: everything from it is included here.)
   It overrides earlier rules, so nothing above needs deleting.
   To undo, remove this whole block.
   ========================================================== */

/* ---------- 1. Design tokens: one ink, one accent ---------- */
:root {
	--kp-ink: #111114;
	--kp-muted: #6E6E78;
	--kp-line: #E4E4EA;
	--kp-bg: #FFFFFF;
	--kp-accent: rgb(0, 17, 255);   /* your electric blue, now the only accent */
	--kp-radius: 10px;
	--kp-ease: cubic-bezier(.2, .7, .2, 1);
	--kp-sans: "Neue Haas Grotesk", Icons, system-ui, sans-serif;
	--kp-mono: "Space Mono", Icons, ui-monospace, monospace;
}

[data-css-preset] body {
	background-color: var(--kp-bg);
}

/* Room at the bottom so the island never covers content */
[data-css-preset] .content_padding {
	padding-bottom: 8rem;
}

/* ---------- 2. Type: Neue Haas for reading, Space Mono for labels ---------- */
[data-predefined-style="true"] bodycopy {
	font-family: var(--kp-sans);
	font-size: 1.15rem;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: var(--kp-ink);
}

[data-predefined-style="true"] h1 {
	font-family: var(--kp-sans);
	font-weight: 500;
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--kp-ink);
}

/* Bio / intro text: confident but not shouting (was 4.3rem) */
[data-predefined-style="true"] h2 {
	font-family: var(--kp-sans);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.8vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--kp-ink);
	max-width: 30ch;
}

[data-predefined-style="true"] h1 a,
[data-predefined-style="true"] h2 a {
	color: inherit;
}

/* Small text becomes a mono label */
[data-predefined-style="true"] small {
	font-family: var(--kp-mono);
	font-size: .78rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--kp-muted);
}
[data-predefined-style="true"] small a {
	color: inherit;
}

/* Links: quiet underline that lights up blue on hover */
[data-predefined-style="true"] bodycopy a {
	color: var(--kp-ink);
	text-decoration: underline;
	text-decoration-color: var(--kp-line);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color .2s ease, text-decoration-color .2s ease;
}
[data-predefined-style="true"] bodycopy a:hover {
	color: var(--kp-accent);
	text-decoration-color: var(--kp-accent);
}

hr {
	background: var(--kp-line);
}

.gallery_image_caption {
	font-family: var(--kp-sans);
	font-size: clamp(.85rem, 1vw, 1rem);
	font-weight: 400;
	color: var(--kp-muted);
	margin-top: .6rem;
}

.content img {
	border-radius: 6px;
}

/* ---------- 3. Thumbnails: clean cards ---------- */
[data-css-preset] .thumbnails {
	background-color: transparent;   /* was a dusty brown */
}
.thumbnails .thumb_image {
	border-radius: var(--kp-radius);
	overflow: hidden;
	outline: 0;
}
.thumbnails .thumb_image img {
	border-radius: 0;
	transition: scale .7s var(--kp-ease);
}
.thumbnails .thumbnail:hover .thumb_image img {
	scale: 1.045;
}
.thumbnails .title {
	font-family: var(--kp-sans);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--kp-ink);
	margin-top: .8rem;
}
.thumbnails .tags,
.thumbnails .tags a {
	font-family: var(--kp-mono);
	font-size: .72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--kp-muted);
}

/* ---------- 4. Cargo's own slide-out menu, matched to the new look ---------- */
#site_menu {
	font-family: var(--kp-sans);
	background: var(--kp-bg);
}
#site_menu .page-link a,
#site_menu .set-link > a {
	color: var(--kp-ink);
}
/* The island replaces Cargo's menu button. Delete this rule to bring it back. */
[data-css-preset] #site_menu_button {
	display: none;
}

/* ---------- 5. Floating navigation island ---------- */
.kp-island {
	position: fixed;
	z-index: 9999;
	left: 50%;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	display: flex;
	gap: .15rem;
	padding: .35rem;
	border-radius: 999px;
	background: rgba(17, 17, 20, .86);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	max-width: calc(100vw - 1.5rem);
	overflow-x: auto;
	scrollbar-width: none;
}
.kp-island::-webkit-scrollbar {
	display: none;
}
.kp-island a {
	font-family: var(--kp-sans);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
	padding: .65rem 1rem;
	border-radius: 999px;
}
.kp-island a:hover {
	background: rgba(255, 255, 255, .14);
}
.kp-island a.kp-active {
	background: var(--kp-accent);
}
.kp-island a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
@media (max-width: 520px) {
	.kp-island a {
		font-size: .88rem;
		padding: .6rem .75rem;
	}
}

/* ---------- 6. Micro-interactions ---------- */
.kp-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	pointer-events: none;
	font-family: var(--kp-sans);
	font-size: .85rem;
	font-weight: 500;
	padding: .45rem .85rem;
	border-radius: 999px;
	background: var(--kp-accent);
	color: #fff;
	scale: 0;
	opacity: 0;
}
.kp-cursor.kp-on {
	scale: 1;
	opacity: 1;
}

a:focus-visible {
	outline: 2px solid var(--kp-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	/* Island hides while scrolling down, returns on scroll up */
	.kp-island {
		transition: translate .4s var(--kp-ease);
	}
	.kp-island.kp-tucked {
		translate: 0 calc(100% + 2.5rem);
	}
	.kp-island a {
		transition: background-color .2s ease, scale .15s ease;
	}
	.kp-island a:active {
		scale: .93;
	}

	/* "View" bubble that trails the cursor over projects */
	.kp-cursor {
		transition: scale .22s cubic-bezier(.3, .8, .3, 1.4), opacity .2s ease;
	}

	/* Staggered fade-up as work scrolls into view */
	.kp-reveal {
		opacity: 0;
		translate: 0 24px;
		transition: opacity .7s ease, translate .7s var(--kp-ease);
		transition-delay: var(--kp-d, 0ms);
	}
	.kp-reveal.kp-in {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.thumbnails .thumb_image img {
		transition: none;
	}
	.thumbnails .thumbnail:hover .thumb_image img {
		scale: 1;
	}
}
s
#info {
	
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 1;
}

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 4.5rem;
}

ol > li {
    padding-left: 0.75rem;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(255, 42, 0, .3);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 0rem;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: 1.0em;
    margin-bottom: 0.5rem;
    font-size: 1vw;
	font-weight: 500;
	color: rgba(236, 0, 140, 0.98);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: left;
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.2rem;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-family: "Alte Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(0, 0, 0);
	padding-bottom: 0em;
	text-decoration: underline;
}

[data-predefined-style="true"] bodycopy a:hover {

}

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

[data-predefined-style="true"] h1 {
	font-family: "Favorit Variable", Icons;
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 1.2;
	color: #000;
	font-style: normal;
	font-weight: 500;
	font-variation-settings: 'slnt' 0;
}

[data-predefined-style="true"] h1 a {
	color: rgb(0, 17, 255);
}

[data-predefined-style="true"] h2 {
	font-family: "Favorit Variable", Icons;
	font-style: normal;
	font-weight: 300;
	padding: 0;
	margin: 0;
	color: #000;
	font-size: 4rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	font-variation-settings: 'slnt' 0;
}

[data-predefined-style="true"] h2 a {
	color: rgb(0, 17, 255);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.3;
	font-family: "Favorit Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 17, 255);
	font-variation-settings: 'slnt' 0;
}

[data-predefined-style="true"] small a {
	color: rgb(0, 17, 255);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */
[data-css-preset] #info{
	position:absolute;
}
[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
    font-size: 5rem;
	background-color: transparent /*!page_bgcolor*/;
    
}


[data-css-preset] .container {
	margin-left: auto /*!content_right*/;
	margin-right: 0 /*!content_right*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 75%/*!content_right*/;
}

[data-css-preset] .content_padding {
	padding-top: 2.7rem/*!main_margin*/;
	padding-bottom: 2.7rem/*!main_margin*/;
	padding-left: 2.7rem/*!main_margin*/;
	padding-right: 2.7rem/*!main_margin*/;
}

[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

[data-css-preset] .backdrop {
	width: 100% /*!background_cover*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: rgb(167, 103, 103)/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.4rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -0.8rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.55rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -1.1rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: .8rem;
    margin-bottom: 0rem;
    font-size: 1.2rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu
 */

[data-css-preset] #site_menu_button {
	color: rgba(0, 0, 0, 1);
	line-height: 1;
	font-size: 28px /*!site_menu_button*/;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	top: 1.0rem /*!site_menu_button*/;
	right: 1.2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 30px;
}

#site_menu_button.custom_icon {
	width: 40px;
	height: auto;
}

#site_menu_button.active {
	display: flex;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: "Sprat Extended";
	background: rgba(248, 248, 248, 1);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 00px;
	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, 0, 0, 0.75);
}

#site_menu .set-link > a {
	color: rgba(232, 193, 193, 1);
	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: 45vw;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 300vw;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/**
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1.;
    position: fixed;
	padding: 6px;
	bottom: 3rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.2rem;
    padding: 0;
	font-weight: 500;
	color: rgba(255, 42, 0, 1);
	font-style: normal;
    line-height: 1.3;
    letter-spacing: .07em;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/**
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	line-height: 1.1;
	color: rgba(255, 42, 0, 1);
}

.shop_product .dropdown {
    font-family: "Neue Haas Grotesk", Icons;
    font-size: 1.2rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(255, 42, 0, 0.2);
    border-radius: 10rem;
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .8rem 1rem;
	font-style: normal;
	font-weight: 500;
    color: rgba(255, 42, 0, 1);
}

.shop_product .button {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.2rem;
    background: rgba(255, 42, 0, 1);
    border-radius: 10rem;
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem;
	font-style: normal;
	font-weight: 500;
    text-decoration: none;
}

/**
 * Image Zoom
 */

.content img.image-zoom:active {
    opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
	background: rgba(0, 0, 0, 0.8) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: "Neue Haas Grotesk", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1rem;
	font-style: normal;
	font-weight: 500;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}

/**
 * Quick View Navigation 
 */

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

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

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

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

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   /* Change height/width together to scale */
   width: 36px;
   height: 36px;
}

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

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/**
 * Audio Player
 */

.audio-player {
    max-width: 26rem;
    height: 3.3rem;
    outline: 1px solid rgba(255, 42, 0, 0.25);
    color: rgba(255, 42, 0, 1);
    background: transparent;
    font-size: 1.2rem;
    line-height: 1.2;
    font-family: "Neue Haas Grotesk", Icons;
    font-style: normal;
    font-weight: 500;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

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

.audio-player .separator {
    width: 1px;
    background-color: rgba(255, 42, 0, 0.31);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(255, 42, 0, 0.9);
}

.audio-player .icon {
    fill: rgba(255, 42, 0, 0.9);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(255, 42, 0, .1);
}

.audio-player .progress {
    background: rgba(255, 42, 0, 0.2);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(255, 42, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(255, 42, 0, 0.75);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

/* ==========================================================
   KP - TRIENDL-INSPIRED LAYER (dark mode, hero ripple, hover frames)
   Added after the Design Refresh block. Delete this whole block to undo.
   ========================================================== */

/* Dark mode: swaps the existing tokens, so the island, links and labels follow */
html[data-kp-theme="dark"] {
  --kp-ink: #ECECEC; --kp-muted: #9A9A9A; --kp-line: #2B2B2B; --kp-bg: #0F0F10;
  color-scheme: dark;
}
html[data-kp-theme="dark"],
html[data-kp-theme="dark"] body { background: var(--kp-bg) !important; }
html[data-kp-theme="dark"] .page_background { background-color: transparent !important; }
html[data-kp-theme="dark"] bodycopy,
html[data-kp-theme="dark"] bodycopy h1,
html[data-kp-theme="dark"] bodycopy h2,
html[data-kp-theme="dark"] bodycopy small,
html[data-kp-theme="dark"] bodycopy a { color: var(--kp-ink) !important; }
html[data-kp-theme="dark"] bodycopy a:hover { color: #8AA4FF !important; }

.kp-theme {
  position: fixed; z-index: 60; right: 1rem; bottom: 1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--kp-ink, #111114); color: var(--kp-bg, #ffffff);
  box-shadow: 0 8px 24px rgba(10, 12, 30, .22);
}
.kp-theme svg { width: 1.1rem; height: 1.1rem; }
.kp-theme:focus-visible { outline: 3px solid #3D7BFF; outline-offset: 3px; }
body.editor-overlay-active .kp-theme { display: none; }

/* Hero: letters ripple on hover (words stay whole so lines wrap normally) */
.kp-w { display: inline-block; white-space: nowrap; }
.kp-c { display: inline-block; }

/* Work images: framed, image zooms slowly inside the frame (frame class added by script) */
.kp-frame { overflow: hidden; border-radius: var(--kp-radius, 10px); }

@media (prefers-reduced-motion: no-preference) {
  html, body { transition: background-color .35s ease; }
  .kp-c { transition: translate .35s cubic-bezier(.3,.8,.3,1.5); transition-delay: calc(var(--i) * 14ms); }
  .kp-hero:hover .kp-c { translate: 0 -.06em; }
  .kp-frame img.image-zoom { transition: scale .6s cubic-bezier(.2,.7,.2,1); }
  .kp-frame:hover img.image-zoom { scale: 1.045; }
  .kp-theme { transition: scale .15s ease; }
  .kp-theme:active { scale: .93; }
  .kp-theme svg.kp-spin { animation: kp-spin .5s cubic-bezier(.3,.8,.3,1.2); }
}

@keyframes kp-spin {
  from { rotate: -120deg; scale: .4; opacity: 0; }
  to { rotate: 0deg; scale: 1; opacity: 1; }
}

/* ==========================================================
   KP - ARCHIVE VIEW + HEADER TIDY + INTRO WIDTH
   Delete this whole block to undo.
   ========================================================== */

:root { --kp-chip: rgba(17, 17, 20, .07); }
html[data-kp-theme="dark"] { --kp-chip: rgba(255, 255, 255, .12); }

/* Script-hidden items (old top nav, project rows that moved to Archives) */
.kp-hide { display: none !important; }

/* Intro paragraph: runs the full width, tighter lines */
.content_container .page_content h2 {
  max-width: none !important;
  width: 100% !important;
  line-height: 1.1 !important;
}

/* Archive: controls */
.kp-arch { margin: 0 0 4rem; }
.kp-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin: 1.25rem 0 2rem;
}
.kp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kp-arch button.kp-chip {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 999px;
  padding: .5rem 1.05rem; background: var(--kp-chip); color: var(--kp-ink, #111114);
  font: inherit; font-size: .95rem; line-height: 1.2; cursor: pointer;
}
.kp-arch button.kp-chip[aria-pressed="true"] { background: var(--kp-accent, #0011ff); color: #ffffff; }
.kp-seg { display: inline-flex; padding: .25rem; border-radius: 999px; background: var(--kp-chip); }
.kp-arch .kp-seg button {
  -webkit-appearance: none; appearance: none; border: 0; background: none;
  color: var(--kp-ink, #111114); font: inherit; font-size: .95rem; line-height: 1.2;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
}
.kp-arch .kp-seg button[aria-pressed="true"] { background: var(--kp-bg, #ffffff); box-shadow: 0 1px 6px rgba(0, 0, 0, .16); }
.kp-arch button:focus-visible { outline: 3px solid #3D7BFF; outline-offset: 2px; }

/* Archive: thumbnail grid + index list */
.kp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2.25rem 1rem; align-items: start;
}
.kp-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.25rem; }
@media (max-width: 700px) {
  .kp-index { grid-template-columns: 1fr; }
  .kp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .75rem; }
}
.kp-arch a.kp-item {
  display: block; color: inherit !important; text-decoration: none !important; border: 0 !important;
}
.kp-arch a.kp-item:hover { color: inherit !important; }
.kp-thumb { display: block; overflow: hidden; border-radius: var(--kp-radius, 10px); background: var(--kp-line, #e4e4ea); }
/* kp-img-fix: beat the theme image rules */
.kp-item { min-width: 0; }
.kp-arch .kp-item img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; }
.kp-name { display: block; margin-top: .6rem; font-weight: 600; }
.kp-item:hover .kp-name { text-decoration: underline; text-underline-offset: 3px; }
.kp-desc { display: block; margin-top: .15rem; }
.kp-tags { display: block; margin-top: .25rem; color: var(--kp-muted, #6e6e78); font-size: .85rem; }
.kp-empty { color: var(--kp-muted, #6e6e78); }

@media (prefers-reduced-motion: no-preference) {
  .kp-item img { transition: scale .6s cubic-bezier(.2,.7,.2,1); }
  .kp-item:hover img { scale: 1.045; }
  .kp-arch button.kp-chip, .kp-arch .kp-seg button { transition: background-color .2s ease, color .2s ease; }
}

/* ==========================================================
   KP - ROUND 3 (bigger island, bold titles, header slides away,
   moon button in header, list view, cursor). Delete block to undo.
   ========================================================== */

/* Floating island: bigger */
.kp-island { padding: 5px !important; }
.kp-island a { font-size: 14px !important; padding: 9px 16px !important; line-height: 1.1 !important; }

/* Project titles: bolder, no underline, underline returns on hover */
.content_container .page_content [grid-col] a,
.kp-name { font-weight: 700 !important; }
.kp-arch .kp-idx a { font-weight: 400 !important; }
.content_container .page_content [grid-col] a,
.kp-idx a { text-decoration: none !important; }
.content_container .page_content [grid-col] a:hover,
.kp-idx a:hover { text-decoration: underline !important; text-underline-offset: 4px; }

/* Header + moon button slide away while scrolling down */
.kp-theme { top: .6rem; bottom: auto; right: 1rem; width: 2.4rem; height: 2.4rem; }
@media (max-width: 768px) {
  .kp-theme { top: auto; bottom: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .kp-head { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
  .kp-theme { transition: transform .4s cubic-bezier(.2,.7,.2,1), scale .15s ease; }
}
html.kp-down .kp-head { transform: translateY(-150%); }
html.kp-down .kp-theme { transform: translateY(-300%); }

/* Archive: list view with headings (like the old Index) */
.kp-arch .kp-seg { margin-left: auto; }
.kp-idx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.5rem; }
@media (max-width: 1000px) { .kp-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kp-idx { grid-template-columns: 1fr; } }
.kp-arch .kp-idx h3 { margin: 0 0 1.1rem !important; font-size: 1em !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; }
.kp-idx .kp-li { margin: 0 0 .4rem; }
.kp-idx .kp-note { margin: 1.25rem 0 0; font-style: italic; }

/* Fun cursor: a little moon that follows the pointer */
html.kp-cur, html.kp-cur * { cursor: none !important; }
.kp-moon {
  position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  font-size: 26px; line-height: 30px; text-align: center; user-select: none;
  opacity: 0;
}
.kp-moon.kp-on { opacity: 1; }
.kp-moon span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .kp-moon { transition: opacity .2s ease; }
  .kp-moon span { transition: scale .25s cubic-bezier(.3,.8,.3,1.5); }
}
.kp-moon.kp-big span { scale: 1.6; }
.kp-moon.kp-press span { scale: .75; }

/* ==========================================================
   KP - ROUND 4 (day/night pill button, cursor arrow). Delete block to undo.
   ========================================================== */
.kp-theme {
  top: 10px; right: 18px; bottom: auto; width: auto; height: auto;
  border-radius: 999px; padding: 9px 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--kp-mono, "Space Mono", monospace); font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap;
}
.kp-theme svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
  .kp-theme { top: auto; bottom: 14px; right: 14px; }
}

/* Cursor: small arrow at the pointer, moon trails beside it */
.kp-arrow { position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none; opacity: 0; }
.kp-arrow.kp-on { opacity: 1; }
.kp-arrow svg { display: block; }

/* ==========================================================
   KP - ROUND 5: MOBILE (phones, modeled on Daniel Triendl's mobile layout)
   Delete this whole block to undo.
   ========================================================== */
@media (max-width: 768px) {
  /* Header: one tidy line, mono, like the desktop one */
  .kp-head .page_content > div:first-child {
    white-space: normal !important;
    font-family: var(--kp-mono, "Space Mono", monospace) !important;
    font-size: 16px !important; line-height: 1.2 !important; letter-spacing: 0 !important;
  }
  .kp-head .page_content > div:first-child span { font-size: inherit !important; font-family: inherit !important; }

  /* Light/night pill: top right of the header, compact */
  .kp-theme { top: 8px; right: 12px; bottom: auto; padding: 7px 12px; font-size: 12px; gap: 6px; }
  .kp-theme svg { width: 13px; height: 13px; }

  /* Floating nav: fits the screen */
  .kp-island { max-width: calc(100vw - 24px); }
  .kp-island a { font-size: 13px !important; padding: 8px 13px !important; }

  /* Intro text: phone-sized */
  .content_container .page_content h2 { font-size: 22px !important; line-height: 1.15 !important; }
  .homepage .content_container .page_content > div:nth-of-type(2) { font-size: 17px !important; line-height: 1.2 !important; }

  /* Archives: toggle on top, keyword chips scroll sideways, two columns */
  .kp-bar { flex-direction: column; align-items: stretch; gap: 12px; margin: 14px 0 20px; }
  .kp-arch .kp-seg { order: -1; align-self: flex-end; margin-left: 0; }
  .kp-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -12px; padding: 0 12px;
  }
  .kp-chips::-webkit-scrollbar { display: none; }
  .kp-arch button.kp-chip { flex: 0 0 auto; }
  .kp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .kp-idx { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 14px; }
  .kp-name { font-size: 12px; line-height: 1.25; }
  .kp-tags { font-size: 10px; }
}

/* KP - ROUND 5b: fonts + header clearance (phones). Delete to undo. */
.content_container .page_content a { font-family: inherit; }
.kp-arch { font-family: var(--kp-mono, "Space Mono", monospace); }
@media (max-width: 768px) {
  .content_container .page_content { padding-top: 48px !important; }
}


/* ===== ROUND 6: MOBILE NAV SCALING + TIGHTER HEADER PADDING (Delete this whole block to undo.) ===== */
@media (max-width: 768px) {
  .kp-island { padding: 4px !important; gap: 0 !important; overflow: visible !important; max-width: calc(100vw - 16px) !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  .kp-island a { font-size: clamp(10px, 3.2vw, 13px) !important; padding: clamp(6px, 2vw, 8px) clamp(8px, 3vw, 13px) !important; }
  .kp-head .page_container, .kp-head .page { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  .kp-head .page_content { padding: 8px 12px 0 12px !important; margin: 0 !important; min-height: 0 !important; }
  .kp-head .page_content > div:first-child { line-height: 1.1 !important; }
  .content_container .page_content { padding-top: 36px !important; }
}
@media (max-width: 380px) {
  .kp-island a { font-size: clamp(9px, 3vw, 11px) !important; padding: 6px clamp(6px, 2.4vw, 9px) !important; }
  .kp-theme { padding: 6px 10px !important; font-size: 11px !important; }
  .kp-head .page_content { padding: 6px 10px 0 10px !important; }
}

/* ROUND 6b: align header with page text (Delete to undo.) */
@media (max-width: 768px) {
  .kp-head .content_padding, .kp-head .bodycopy { padding-left: 0 !important; padding-right: 0 !important; }
}


/* ===== ROUND 7: QA POLISH (Delete this whole block to undo.) ===== */
.kp-arch button.kp-chip { min-height: 30px !important; padding: 6px 13px !important; font-size: 12px !important; line-height: 1.2 !important; }
.kp-arch .kp-seg button { min-height: 30px !important; padding: 6px 14px !important; font-size: 12px !important; }
.kp-tags { font-size: 11px !important; line-height: 1.4 !important; }
.kp-name { font-size: 14px !important; }
.kp-arch button:focus-visible, .kp-theme:focus-visible, .kp-item:focus-visible, .kp-idx a:focus-visible, .content_container .page_content a:focus-visible { outline: 2px solid var(--kp-accent, #2255ff) !important; outline-offset: 3px !important; border-radius: 6px; }
.content_container .page_content { padding-bottom: 120px !important; }
.content_container .page_content [grid-col] { font-family: var(--kp-mono, "Space Mono", monospace); font-size: 13px; line-height: 1.5; }
.content_container .page_content a[href^="mailto"] { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.kp-theme { min-height: 36px; }
@media (max-width: 768px) {
  .kp-arch button.kp-chip, .kp-arch .kp-seg button { min-height: 34px !important; }
  .kp-tags { font-size: 10.5px !important; }
  .kp-name { font-size: 12.5px !important; }
}


/* ===== NIGHT MODE TEXT FIX (Delete this whole block to undo.) ===== */
html[data-kp-theme="dark"] .content_container .page_content h1 span,
html[data-kp-theme="dark"] .content_container .page_content h2 span,
html[data-kp-theme="dark"] .content_container .page_content h3 span,
html[data-kp-theme="dark"] .content_container .page_content h1 b,
html[data-kp-theme="dark"] .content_container .page_content h2 b,
html[data-kp-theme="dark"] .content_container .page_content [grid-col] span,
html[data-kp-theme="dark"] .content_container .page_content [grid-col] b,
html[data-kp-theme="dark"] .content_container .page_content [grid-col] strong,
html[data-kp-theme="dark"] .content_container .page_content [grid-col] em { color: inherit !important; }


/* ===== IMAGE HOVER MASK (Delete this whole block to undo.) =====
   The hover zoom now happens inside a clipped frame, so it never covers the project title. */
.content_container .page_content a.image-link { display: block; overflow: hidden; border-radius: var(--kp-radius, 10px); }
.content_container .page_content a.image-link img { display: block; transform-origin: center center; }
@media (prefers-reduced-motion: no-preference) {
  .content_container .page_content a.image-link img { transition: scale .6s cubic-bezier(.2,.7,.2,1); }
  .content_container .page_content a.image-link:hover img { scale: 1.045; }
}
.content_container .page_content [grid-col] { position: relative; }
.content_container .page_content [grid-col] > div, .content_container .page_content [grid-col] > a:not(.image-link) { position: relative; z-index: 2; }


/* ===== ROUND 8: HOVER MASK ON EVERY THUMBNAIL + HEADER ALIGNED WITH THE MODE PILL (Delete this whole block to undo.) ===== */
.kp-mask { display: block; width: fit-content; max-width: 100%; overflow: hidden; border-radius: var(--kp-radius, 10px); }
.kp-mask img { display: block; transform-origin: center center; }
@media (prefers-reduced-motion: no-preference) {
  .kp-mask img { transition: scale .6s cubic-bezier(.2,.7,.2,1); }
  .kp-mask:hover img { scale: 1.045; }
  .kp-frame:hover .kp-mask:not(:hover) img { scale: 1 !important; }
}
.kp-head h1 { margin: -1px 0 0 !important; line-height: 36px !important; max-height: 36px; overflow: hidden; }
.kp-head .page_content { padding-top: 0 !important; }
.kp-head h1 a { display: inline-block; }
@media (max-width: 768px) {
  .kp-head .page_content { padding-top: 0 !important; }
  .kp-head h1 { margin-top: -2px !important; }
}


/* ===== ROUND 9: PLAY PAGE, FOOTER, FILTER MOTION, HOVER SLIDESHOWS (Delete this whole block to undo.) ===== */

/* Archive filter motion: old cards fade out, new cards rise in one after another */
@keyframes kp-rise { from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: no-preference) {
  .kp-list { transition: opacity .19s ease, transform .19s ease; }
  .kp-list.kp-leave { opacity: 0; transform: translateY(8px); }
  .kp-grid .kp-item, .kp-idx > section { animation: kp-rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .kp-grid .kp-item:nth-child(1), .kp-idx > section:nth-child(1) { animation-delay: 45ms; }
  .kp-grid .kp-item:nth-child(2), .kp-idx > section:nth-child(2) { animation-delay: 90ms; }
  .kp-grid .kp-item:nth-child(3), .kp-idx > section:nth-child(3) { animation-delay: 135ms; }
  .kp-grid .kp-item:nth-child(4), .kp-idx > section:nth-child(4) { animation-delay: 180ms; }
  .kp-grid .kp-item:nth-child(5), .kp-idx > section:nth-child(5) { animation-delay: 225ms; }
  .kp-grid .kp-item:nth-child(6), .kp-idx > section:nth-child(6) { animation-delay: 270ms; }
  .kp-grid .kp-item:nth-child(7), .kp-idx > section:nth-child(7) { animation-delay: 315ms; }
  .kp-grid .kp-item:nth-child(8), .kp-idx > section:nth-child(8) { animation-delay: 360ms; }
  .kp-grid .kp-item:nth-child(9), .kp-idx > section:nth-child(9) { animation-delay: 405ms; }
  .kp-grid .kp-item:nth-child(10), .kp-idx > section:nth-child(10) { animation-delay: 450ms; }
  .kp-grid .kp-item:nth-child(11), .kp-idx > section:nth-child(11) { animation-delay: 495ms; }
  .kp-grid .kp-item:nth-child(12), .kp-idx > section:nth-child(12) { animation-delay: 540ms; }
  .kp-grid .kp-item:nth-child(13), .kp-idx > section:nth-child(13) { animation-delay: 585ms; }
  .kp-grid .kp-item:nth-child(14), .kp-idx > section:nth-child(14) { animation-delay: 630ms; }
  .kp-grid .kp-item:nth-child(15), .kp-idx > section:nth-child(15) { animation-delay: 675ms; }
  .kp-grid .kp-item:nth-child(16), .kp-idx > section:nth-child(16) { animation-delay: 720ms; }
  .kp-grid .kp-item:nth-child(17), .kp-idx > section:nth-child(17) { animation-delay: 765ms; }
}

/* Photography + Posters cards: fixed frame so the picture can change while hovering */
.kp-arch .kp-item[data-frames] .kp-thumb { aspect-ratio: 3 / 2; }
.kp-arch .kp-item[data-frames] .kp-thumb img { height: 100% !important; object-fit: cover; }

/* Play page: same two-column card layout as Selected Work */
.kp-play { padding-bottom: 8px; }
.kp-ptitle { margin: 0 0 6px; }
.kp-psub { margin: 0 0 28px; font-family: var(--kp-mono, "Space Mono", monospace); font-size: 13px; line-height: 1.5; opacity: .7; }
.kp-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 17px; row-gap: 46px; }
.kp-pcard .kp-pimg { display: block; }
.kp-pcard .kp-mask { width: 100%; }
.kp-pcard img { display: block; width: 100%; height: auto; }
.kp-ptxt { font-family: var(--kp-mono, "Space Mono", monospace); font-size: 13px; line-height: 1.5; margin-top: 1.4em; }
.kp-ptxt p { margin: 1.2em 0 0; }
.kp-ptxt a { font-weight: 700; text-decoration: none; color: inherit !important; }
.kp-ptxt a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) { .kp-pgrid { grid-template-columns: 1fr; row-gap: 34px; } }

/* Playful footer */
html.kp-has-foot .content_container .page_content { padding-bottom: 40px !important; }
.kp-foot { margin: 40px 12px 12px; padding: 22px 22px 0; border-radius: 18px; background: #EEEEF0; color: var(--kp-ink, #111114); overflow: hidden; position: relative; z-index: 1; }
html[data-kp-theme="dark"] .kp-foot { background: #1B1B1F; color: #ECECEC; }
.kp-foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.kp-foot-line { display: block; font-family: var(--kp-sans, system-ui, sans-serif); font-size: clamp(18px, 2.4vw, 34px); line-height: 1.15; font-weight: 500; color: inherit !important; text-decoration: none !important; }
.kp-foot-line i { font-style: normal; display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
a.kp-foot-line:hover i { transform: translateX(8px); }
.kp-foot-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; margin-left: auto; }
.kp-foot-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kp-foot-btn { font-family: var(--kp-mono, "Space Mono", monospace); font-size: 12px; line-height: 1; text-transform: uppercase; background: #fff; color: #111114 !important; padding: 13px 18px; border-radius: 8px; text-decoration: none !important; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.kp-foot-btn:hover { transform: translateY(-3px) rotate(-1.5deg); }
html[data-kp-theme="dark"] .kp-foot-btn { background: #0F0F10; color: #ECECEC !important; }
.kp-foot-meta { display: flex; justify-content: space-between; gap: 24px; width: 100%; font-family: var(--kp-mono, "Space Mono", monospace); font-size: 12px; text-transform: uppercase; }
.kp-top { font: inherit; text-transform: uppercase; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.kp-top:hover { text-decoration: underline; text-underline-offset: 3px; }
.kp-mark { margin-top: 34px; padding-bottom: 92px; white-space: nowrap; line-height: .82; font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; font-family: var(--kp-sans, system-ui, sans-serif); }
.kp-mark-in { display: inline-block; white-space: nowrap; }
.kp-mark .kp-c { display: inline-block; }
.kp-gm { margin: 0 .14em; }
@media (prefers-reduced-motion: no-preference) { .kp-gm { animation: kp-spin 16s linear infinite; } }
@media (max-width: 768px) {
  .kp-foot { margin: 28px 8px 8px; padding: 16px 16px 0; border-radius: 14px; }
  .kp-foot-side { align-items: flex-start; margin-left: 0; width: 100%; }
  .kp-foot-links { justify-content: flex-start; }
  .kp-mark { padding-bottom: 84px; }
}


/* ROUND 9b: Play thumbnails keep their natural, uncropped shape (Delete to undo.) */
.kp-pcard .kp-mask { aspect-ratio: auto; width: fit-content; max-width: 100%; }
.kp-pcard .kp-mask img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 400px !important; object-fit: initial; }


/* FONT COMPONENTS: the editable font list is at the very TOP of this file. The rules below apply it. */

.kp-head h1, .kp-head h1 a, .kp-head .page_content > div:first-child, .kp-head .page_content > div:first-child span { font-family: var(--font-brand) !important; }
.content_container .page_content h2, .content_container .page_content h2 span, .content_container .page_content h2 b { font-family: var(--font-headline) !important; }
.content_container .page_content h1, .content_container .page_content h1 span { font-family: var(--font-page-title) !important; }
.content_container .page_content small { font-family: var(--font-small) !important; }
.content_container .page_content [grid-col], .kp-ptxt, .kp-psub, .kp-arch, .kp-idx, .kp-idx a, .kp-note { font-family: var(--font-body) !important; }
.content_container .page_content [grid-col] a, .kp-ptxt a, .kp-name, .kp-idx h3, .kp-arch .kp-idx h3 { font-family: var(--font-title) !important; }
.kp-theme, .kp-island a, .kp-arch button.kp-chip, .kp-arch .kp-seg button, .kp-tags { font-family: var(--font-ui) !important; }
.kp-foot-line { font-family: var(--font-footer-lines) !important; }
.kp-foot-btn, .kp-foot-meta, .kp-top { font-family: var(--font-footer-buttons) !important; }
.kp-mark { font-family: var(--font-footer-mark) !important; }


/* FALLBACK so text never drops to a serif font */
bodycopy, bodycopy div, bodycopy span, bodycopy a, bodycopy b { font-family: var(--font-body) !important; }