/**
 * Content
 */

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .4;
}

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 3em;
}

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

hr {
	background: rgba(136, 136, 136, 0.42);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: .5em;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: .8rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.07rem;
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.65);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.07rem;
}

[data-predefined-style="true"] bodycopy a {
	color: #f00;
	padding-bottom: 0.05em;
	border-bottom: 0 solid rgba(127, 127, 127, 0.2);
	text-decoration: none;
}

[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: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 8.7rem;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.85);
	}

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

[data-predefined-style="true"] h2 {
	font-family: "Times New Roman", "Times New Roman", Times, serif, "Times New Roman", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 4.2rem;
	line-height: 1.1;
	}

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

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1.3;
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.65);
	letter-spacing: 0.07rem;
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.65);
	border-bottom-width: 0;
}

/**
 * Breakpoints
 */


[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%;
	background-color: transparent /*!page_bgcolor*/;
}

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

[data-css-preset] body {
	background-color: #fff/*!body_bgcolor*/;
}

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

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


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

/**
 * Thumbnails
 */

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

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

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

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

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

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

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

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

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: 4.0rem;
    font-size: 2.0rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.64);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: "TeX Gyre Heros Condensed", Icons;
	font-style: normal;
	line-height: 1.2;
}

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

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

/**
 * Site Menu
 */

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

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

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

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	background: rgba(20, 20, 20, 0.95);
	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);
}

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

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	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.45);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1.5rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 1.5rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.45);
	font-style: normal;
    letter-spacing: 0.07rem;
}

#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: "TeX Gyre Heros Condensed", Icons;
	font-size: 3rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.65);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
    font-family: "TeX Gyre Heros Condensed", Icons;
    font-size: 1.5rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0,0,0,.75)
}

.shop_product .button {
    font-family: "TeX Gyre Heros Condensed", Icons;
	font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.65);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: .9;
    padding: .8rem 1rem .9rem;
	font-style: normal;
	font-weight: 400;
}

/*
 * 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.95) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    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: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

.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: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * 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: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * 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: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * 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: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.75);
    background: #fff;
    font-size: 1.5rem;
    line-height: 1.3;
    font-family: "TeX Gyre Heros Condensed", Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
    letter-spacing: 0.07rem;
}

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

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

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

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

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 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(0, 0, 0, 0.5);
}

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

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

/* Stack Present and Past in the mobile page flow. */
.mobile .pinned_bottom {
    height: auto !important;
}
.mobile .page_container[local-style="12154991"],
.mobile .page_container[local-style="12154992"] {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
}
.mobile [local-style="12154991"] .page,
.mobile [local-style="12154992"] .page {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
	background-color: initial /*!page_bgcolor*/;
	min-height: auto /*!page_height_default*/;
}

.mobile [local-style="12154991"] .content_padding,
.mobile [local-style="12154992"] .content_padding {
	padding-top: 2.1rem /*!main_margin*/;
	padding-bottom: 2.1rem /*!main_margin*/;
	padding-left: 2.1rem /*!main_margin*/;
	padding-right: 2.1rem /*!main_margin*/;
}
.mobile [local-style="12154991"] h1,
.mobile [local-style="12154992"] h1 {
    font-size: 11.5vmin !important;
    line-height: 1.3 !important;
}

/* Keep the mobile navigation on one line. */
.mobile [local-style="12154989"] [grid-row] {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline;
}
.mobile [local-style="12154989"] [grid-col] {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap;
}
.mobile [local-style="12154989"] [grid-col]:nth-child(3) {
    flex: 1 1 auto !important;
    min-width: 0;
}

/* Anchor mobile navigation directly to the visible top edge. */
.mobile .page_container[local-style="12154989"] {
    top: 0 !important;
    bottom: auto !important;
    height: auto !important;
}
.mobile [local-style="12154989"] .page {
    min-height: 0 !important;
    height: auto !important;
	background-color: initial /*!page_bgcolor*/;
}

/* Give the persistent mobile header breathing room. */
.mobile .page_container[local-style="12154989"] {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    z-index: 100 !important;
}
.mobile [local-style="12154989"] .page {
    background-color: #fff !important;
}
.mobile .page_container[local-style="12154991"] {
    margin-top: 60px;
}

/* Start inset, then stick flush to the top while scrolling. */
.mobile .page_container[local-style="12154989"] {
    position: sticky !important;
    top: 0 !important;
    margin-top: 12px;
}
.mobile .page_container[local-style="12154991"] {
    margin-top: 0;
}

.mobile .main_container {
    overflow: clip;
}

/* Balance the mobile gaps around Present. */
.mobile [local-style="12154991"] .page_content > br:first-child {
    display: none;
}
.mobile [local-style="12154991"] .content_padding {
    padding-top: 2.6rem !important;
}

/* Optically center Present between the divider and photo. */
.mobile [local-style="12154991"] h1 {
    position: relative;
    top: -0.9rem;
}

/* Align mobile navigation with the content edges. */
.mobile [local-style="12154989"] .content_padding {
    padding-left: 1rem /*!main_margin*/;
    padding-right: 1rem /*!main_margin*/;
	padding-top: 1rem /*!main_margin*/;
	padding-bottom: 1rem /*!main_margin*/;
}

/* Compact the About introduction on mobile. */
.mobile [local-style="12154994"] h1 {
    font-size: 12vmin !important;
    line-height: 1.05 !important;
    margin: 0 !important;
}
.mobile [local-style="12154994"] [grid-col]:first-child {
    font-size: 0;
    padding-bottom: 1.6rem !important;
}
.mobile [local-style="12154994"] [grid-col]:first-child > br {
    display: none;
}
.mobile [local-style="12154994"] [grid-col]:first-child > img {
    display: block;
    margin: 2rem auto 0 !important;
}
.mobile [local-style="12154994"] [grid-col]:nth-child(2) > br + br + br {
    display: none;
}

/* Give the About photo a moderate amount of breathing room. */
.mobile [local-style="12154994"] [grid-col]:first-child > img {
    margin-top: 4rem !important;
}
.mobile [local-style="12154994"] [grid-col]:first-child {
    padding-bottom: 3rem !important;
}

/* Restore a larger, three-line About heading on mobile. */
.mobile [local-style="12154994"] h1 {
    font-size: 16vmin !important;
    line-height: 1.12 !important;
}

.mobile .pinned_top {
    display: contents;
}

/* Keep About in the mobile flow beneath the shared header. */
.mobile .page_container[local-style="12154994"] {
 position: relative !important;
 top: auto !important;
 bottom: auto !important;
 height: auto !important;
}
.mobile [local-style="12154994"] .page {
 position: relative !important;
 height: auto !important;
 max-height: none !important;
 overflow: visible !important;
	background-color: initial /*!page_bgcolor*/;
}

body.mobile [local-style="12154989"] bodycopy.content_padding {
 padding-left: 1.6rem !important;
 padding-right: 1.6rem !important;
}

/* Enlarge the animated eyes by five percent on mobile. */
.mobile [local-style="12154989"] svg {
 width: 1.575em !important;
 height: 1.26em !important;
}

/* Keep desktop navigation above both independent columns. */
body:not(.mobile) .page_container[local-style="12154989"] {
 position: fixed !important;
 top: 0 !important;
 bottom: auto !important;
 height: auto !important;
 width: 100% !important;
 z-index: 100 !important;
}
body:not(.mobile) [local-style="12154989"] .page {
 height: auto !important;
 min-height: 0 !important;
}

body:not(.mobile) [local-style="12154989"] .page {
 background-color: #fff !important;
}

/* Transparent desktop header with lighter gray navigation. */
body:not(.mobile) [local-style="12154989"] .page {
 background-color: transparent !important;
}
body:not(.mobile) [local-style="12154989"] small,
body:not(.mobile) [local-style="12154989"] small a {
 color: #999 !important;
}

.jw-wave{display:inline-block;transform-origin:70% 90%;animation:jw-wave 5s ease-in-out infinite}
@keyframes jw-wave{0%{transform:rotate(0deg)}6%{transform:rotate(7deg)}12%{transform:rotate(-4deg)}18%{transform:rotate(5deg)}24%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.jw-wave{animation:none}}
@media (max-width: 767px){ .jw-wave{animation:none !important; transform:none !important} }
[local-style="12154989"] [grid-row] > [grid-col]:last-child{font-size:0 !important;line-height:0 !important}
[local-style="12154989"] [grid-row] > [grid-col]:last-child > div{font-size:2rem !important;line-height:1.3 !important}
@media (min-width: 768px) {
	
      [data-id="12154994"] {
          background-color:#000 !important }
      [data-id="12154994"] .content,
      [data-id="12154994"] .content div,
      [data-id="12154994"] .content p,
      [data-id="12154994"] .content h1,
      [data-id="12154994"] .content h2,
      [data-id="12154994"] .content span:not(.jw-wave) {
          color:#fff !important }
}
/* Logo pin: scroll away with the columns, desktop only */
@media (min-width: 768px) {
	body:not(.mobile) .page_container[local-style="12154990"] > .container {
		transform: translate3d(0, calc(-1 * var(--jw-logo-shift, 0px)), 0);
		will-change: transform;
	}
}

/* Logo pin: scroll away with the columns, desktop only */
@media (min-width: 768px) {
	body:not(.mobile) .page_container[local-style="12154990"] > .container {
		transform: translate3d(0, calc(-1 * var(--jw-logo-shift, 0px)), 0);
		will-change: transform;
	}
}

/* Logo pin: scroll away with the columns, desktop only */
@media (min-width: 768px) {
	body:not(.mobile) .page_container[local-style="12154990"] > .container {
		transform: translate3d(0, calc(-1 * var(--jw-logo-shift, 0px)), 0);
		will-change: transform;
	}
}

/* Logo pin: scroll away with the columns, desktop only */
@media (min-width: 768px) {
	body:not(.mobile) .page_container[local-style="12154990"] > .container {
		transform: translate3d(0, calc(-1 * var(--jw-logo-shift, 0px)), 0);
		will-change: transform;
	}
}


/* Desktop only: meet in the middle. Home-Set titles down, About headline up. */
@media (min-width: 768px) {
  body:not(.mobile) [local-style="12154991"] .page.allow-scroll {
    padding-top: calc(24px + 1.55vw) !important;
  }
  body:not(.mobile) [local-style="12154992"] .page.allow-scroll {
    padding-top: calc(22px + 1.55vw) !important;
  }
  body:not(.mobile) .page_container[data-id="12154994"] {
    padding-top: max(calc(22px + 3.7vw), 64px) !important;
  }
}

/* Mobile only: close up white space, even gaps around Present */
@media (max-width: 767px) {
  body.mobile .page_container[local-style="12154989"] { margin-top: 0 !important; }
  body.mobile [data-id="12154989"] .page_content > [grid-row] { margin-top: -33.72px !important; }
  body.mobile #jw-nav-divider { margin-top: -10px !important; }
  body.mobile #jw-present-content > br:first-child { display: none !important; }
  body.mobile [data-id="12154991"] > .bodycopy { padding-top: 14px !important; }
  body.mobile #jw-present-content > h1:first-of-type { margin-bottom: -12px !important; }
}
/* Mobile only: LOS ANGELES label scrolls away with the page */
@media (max-width: 767px) {
  body.mobile .pinned.pinned_bottom { position: static !important; }
  body.mobile .page_container[local-style="12154990"] {
    position: absolute !important; top: 0 !important; bottom: auto !important;
    left: 0 !important; right: 0 !important; height: 100vh !important;
  }
  body.mobile .page_container[local-style="12154990"] > .page { min-height: 100vh !important; }
}

/* Mobile red label: sticky with a release point (replaces the scroll-away-immediately version).
   APPEND this at the end of Custom CSS. It overrides the live block
     body.mobile .pinned.pinned_bottom { position: static !important; }
     body.mobile .page_container[local-style="12154990"] { position: absolute ...; height: 100vh ... }
     body.mobile .page_container[local-style="12154990"] > .page { min-height: 100vh ... }
   (or delete those three rules first; then this block still works as is).
   The shift (--jw-logo-shift-m) comes from the Logo page script. Desktop is untouched. */
@media (max-width: 767px) {
  body.mobile .pinned.pinned_bottom {
    position: relative !important;
  }
  body.mobile .page_container[local-style="12154990"] {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
  }
  body.mobile .page_container[local-style="12154990"] > .container {
    transform: translate3d(0, calc(-1 * var(--jw-logo-shift-m, 0px)), 0);
    will-change: transform;
  }
}


/* Phones landing on "/": the Top Nav script adds .jw-redirect to <html> right before it
   redirects to /work, so nothing of the About page (12154994) paints in the meantime. */
html.jw-redirect [data-id="12154994"] {
  visibility: hidden !important;
}

/* About (12154994), desktop only: the right-hand intro text builds down the page line by line.
  The block is only hidden once the script has flagged <html> (.jw-build-on); it is shown
  again as soon as the lines are ready, and a failsafe shows it after 2s no matter what. */
@keyframes jw-build-failsafe { to { opacity: 1; } }
@keyframes jw-line-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jw-line-rise { from { top: 10px; } to { top: 0; } }
@media (min-width: 768px) {
  html.jw-build-on body:not(.mobile) [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on body:not(.mobile) [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  body:not(.mobile) .jw-build-ready .jw-w {
    position: relative;
    animation:
      jw-line-fade 380ms cubic-bezier(.22, .61, .36, 1) var(--jw-d, 0ms) both,
      jw-line-rise 460ms cubic-bezier(.16, 1, .3, 1) var(--jw-d, 0ms) both;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on body:not(.mobile) [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 1 !important;
    animation: none !important;
  }
  body:not(.mobile) .jw-build-ready .jw-w {
    animation: none !important;
  }
}
/* About (12154994), desktop only: the right-hand intro text builds down the page line by line.
  The block is only hidden once the script has flagged <html> (.jw-build-on); it is shown
  again as soon as the lines are ready, and a failsafe shows it after 2s no matter what. */
@keyframes jw-build-failsafe { to { opacity: 1; } }
@keyframes jw-line-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jw-line-rise { from { top: 10px; } to { top: 0; } }
@media (min-width: 768px) {
  html.jw-build-on body:not(.mobile) [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on body:not(.mobile) [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  body:not(.mobile) .jw-build-ready .jw-w {
    position: relative;
    animation:
      jw-line-fade 380ms cubic-bezier(.22, .61, .36, 1) var(--jw-d, 0ms) both,
      jw-line-rise 460ms cubic-bezier(.16, 1, .3, 1) var(--jw-d, 0ms) both;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on body:not(.mobile) [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 1 !important;
    animation: none !important;
  }
  body:not(.mobile) .jw-build-ready .jw-w {
    animation: none !important;
  }
}
/* Desktop: apply the Present/Past top padding from the server render, not only after Cargo adds .allow-scroll */
@media (min-width: 768px) {
  body:not(.mobile) .page_container[local-style="12154991"] > .page {
    padding-top: calc(24px + 1.55vw) !important;
  }
  body:not(.mobile) .page_container[local-style="12154992"] > .page {
    padding-top: calc(22px + 1.55vw) !important;
  }
}
/* Phones use the same swapped nav as desktop (JOSH WEBMAN -> About, WORK -> /work) */
@media (max-width: 767px) {
  body [local-style="12154989"] small a.jw-nav-m { display: none !important; }
  body [local-style="12154989"] small a.jw-nav-d { display: inline !important; }
}
/* GREATEST section (Present column, page 12154991): phones only */
@media (max-width: 767px) {
  /* 1. The LAUREN HALSEY collage slide (1080x1440, 3:4) is fit by height
        into the slideshow's 4:5 frame (constrain_height) and centered in a
        flex card, leaving ~12px each side. Make every slide's image box
        full width and cover-fit it. The slide height stays the same, so
        the collage loses ~16px top and bottom. The 4:5 slides change by
        under 0.5px. */
  body.mobile [local-style="12154991"] .image-gallery[gid="3"] .gallery_card_image {
    width: 100%;
  }
  body.mobile [local-style="12154991"] .image-gallery[gid="3"] .gallery_card_image img {
    width: 100% !important;
    object-fit: cover;
  }
  /* 2. The <br> after the block-level slideshow makes an empty 24.3px
        line box. Hide it and use the same 0.5em bottom margin Cargo
        gives .content img (+0.3px for the img line box's baseline
        offset), so the gap matches the 9.36px image-to-image gaps. */
  body.mobile [local-style="12154991"] .image-gallery[gid="3"] + br {
    display: none;
  }
  body.mobile [local-style="12154991"] .image-gallery[gid="3"] {
    margin-bottom: calc(.5em + .3px);
  }
}
/* Present column (page 12154991): trim the extra white space under the last photo */
@media (max-width: 767px) {
  /* #jw-present-content's inline "margin:-2.7rem; padding:2.7rem" pushes its
     white background 2.7rem below the last photo, over the top of Past. */
  body.mobile [local-style="12154991"] .page_content > #jw-present-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body.mobile [local-style="12154991"] bodycopy.content_padding {
    padding-bottom: 0 !important;
  }
  /* Past's bodycopy padding-top (3rem) is 0.3rem (2.8px) more than
     #jw-past-content's -2.7rem pull-up, so a white strip showed above
     Past's black panel. Match it so the black starts where Present ends.
     This moves the black panel and its contents up together. */
  body.mobile [local-style="12154992"] bodycopy.content_padding {
    padding-top: 2.7rem !important;
  }
}
@media (min-width: 768px) {
  /* Same overhang, plus the bodycopy's 50.5px padding-bottom, at the end
     of the Present column's own scroll area. */
  body:not(.mobile) [local-style="12154991"] .page_content > #jw-present-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body:not(.mobile) [local-style="12154991"] bodycopy.content_padding {
    padding-bottom: 0 !important;
  }
}
	
/* jw-carousel-gaps: phones only, tighten gap under the gid 1 and gid 4 slideshows to match the image gaps */
@media (max-width: 767px) {
  body.mobile [local-style="12154991"] .image-gallery[gid="1"] + br,
  body.mobile [local-style="12154991"] .image-gallery[gid="4"] + br {
    display: none;
  }
  body.mobile [local-style="12154991"] .image-gallery[gid="1"],
  body.mobile [local-style="12154991"] .image-gallery[gid="4"] {
    margin-bottom: calc(.5em + .3px);
  }
}
/* jw-about-mobile */
/* About (page 12154994), phones only: black page like desktop, headline
   raised to match Present on /work, photo left-aligned. Desktop untouched. */
@media (max-width: 767px) {
  /* 1. Black background, white text, red links (copies the desktop rule
        [data-id="12154994"] {background:#000} / .content ... {color:#fff}). */
  body.mobile.homepage,
  body.mobile .page_container[local-style="12154994"],
  body.mobile [local-style="12154994"] .page,
  body.mobile [local-style="12154994"] bodycopy.content_padding {
    background-color: #000 !important;
					  }
  body.mobile [local-style="12154994"] .content,
  body.mobile [local-style="12154994"] .content div,
  body.mobile [local-style="12154994"] .content p,
  body.mobile [local-style="12154994"] .content h1,
  body.mobile [local-style="12154994"] .content h2,
  body.mobile [local-style="12154994"] .content span:not(.jw-wave) {
    color: #fff !important;
  }
  /* Top Nav over About: desktop shows it transparent over the black page,
     so paint the sticky mobile nav black on About only (body.homepage).
     Link colors and the gray divider are left as they are. */
  body.mobile.homepage [local-style="12154989"] .page {
    background-color: #000 !important;
  }

  /* 2. Headline top = Present's top on /work (71.4px at scroll 0).
        The page_container's 65.8px top padding repeats the sticky nav's
        height (the nav is already in the flow above it), and the bodycopy
        top padding is trimmed from 1.5rem to 0.6rem. */
  body.mobile .page_container[local-style="12154994"] {
    padding-top: 0 !important;
  }
  body.mobile [local-style="12154994"] bodycopy.content_padding {
    padding-top: 0.6rem !important;
  }

  /* 3. Photo flush left with the text (was margin: 4rem auto 0). */
  body.mobile [local-style="12154994"] [grid-col]:first-child > img {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}
/* jw-about-mobile */
/* About (page 12154994), phones only: black page like desktop, headline
   raised to match Present on /work, photo left-aligned. Desktop untouched. */
@media (max-width: 767px) {
  /* 1. Black background, white text, red links (copies the desktop rule
        [data-id="12154994"] {background:#000} / .content ... {color:#fff}). */
  body.mobile.homepage,
  body.mobile .page_container[local-style="12154994"],
  body.mobile [local-style="12154994"] .page,
  body.mobile [local-style="12154994"] bodycopy.content_padding {
    background-color: #000 !important;
  }
  body.mobile [local-style="12154994"] .content,
  body.mobile [local-style="12154994"] .content div,
  body.mobile [local-style="12154994"] .content p,
  body.mobile [local-style="12154994"] .content h1,
  body.mobile [local-style="12154994"] .content h2,
  body.mobile [local-style="12154994"] .content span:not(.jw-wave) {
    color: #fff !important;
  }
  /* Top Nav over About: desktop shows it transparent over the black page,
     so paint the sticky mobile nav black on About only (body.homepage).
     Link colors and the gray divider are left as they are. */
  body.mobile.homepage [local-style="12154989"] .page {
    background-color: #000 !important;
  }

  /* 2. Headline top = Present's top on /work (71.4px at scroll 0).
        The page_container's 65.8px top padding repeats the sticky nav's
        height (the nav is already in the flow above it), and the bodycopy
        top padding is trimmed from 1.5rem to 0.6rem. */
  body.mobile .page_container[local-style="12154994"] {
    padding-top: 0 !important;
  }
  body.mobile [local-style="12154994"] bodycopy.content_padding {
    padding-top: 0.6rem !important;
  }

  /* 3. Photo flush left with the text (was margin: 4rem auto 0). */
  body.mobile [local-style="12154994"] [grid-col]:first-child > img {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}
/* jw-intro-mobile: Present intro swap. Phones show .jw-intro-m, desktop keeps .jw-intro-d */
.jw-intro-m { display: none; }
@media (max-width: 767px) {
  body.mobile #jw-present-content .jw-intro-m { display: inline !important; }
  body.mobile #jw-present-content .jw-intro-d { display: none !important; }
}
/* end jw-intro-mobile */
/* jw-about-build-mobile */
/* About (12154994), phones (and narrow windows, which Cargo also lays out as mobile):
   the bio text builds in line by line, same timing as desktop. Hidden only once the
   script has flagged <html>; 2s failsafe; reduced motion shows it as is. Desktop untouched. */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  .jw-build-ready .jw-w {
    position: relative;
    animation:
      jw-line-fade 380ms cubic-bezier(.22, .61, .36, 1) var(--jw-d, 0ms) both,
      jw-line-rise 460ms cubic-bezier(.16, 1, .3, 1) var(--jw-d, 0ms) both;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 1 !important;
    animation: none !important;
  }
  .jw-build-ready .jw-w {
    animation: none !important;
  }
}
/* jw-about-build-mobile */
/* About (12154994), phones (and narrow windows, which Cargo also lays out as mobile):
   the bio text builds in line by line, same timing as desktop. Hidden only once the
   script has flagged <html>; 2s failsafe; reduced motion shows it as is. Desktop untouched. */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  .jw-build-ready .jw-w {
    position: relative;
    animation:
      jw-line-fade 380ms cubic-bezier(.22, .61, .36, 1) var(--jw-d, 0ms) both,
      jw-line-rise 460ms cubic-bezier(.16, 1, .3, 1) var(--jw-d, 0ms) both;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 1 !important;
    animation: none !important;
  }
  .jw-build-ready .jw-w {
    animation: none !important;
  }
}	
/* jw-about-build-mobile */
/* About (12154994), phones (and narrow windows, which Cargo also lays out as mobile):
   the bio text builds in line by line, same timing as desktop. Hidden only once the
   script has flagged <html>; 2s failsafe; reduced motion shows it as is. Desktop untouched. */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  .jw-build-ready .jw-w { position: relative; animation: jw-line-fade 380ms cubic-bezier(.22,.61,.36,1) var(--jw-d,0ms) both, jw-line-rise 460ms cubic-bezier(.16,1,.3,1) var(--jw-d,0ms) both; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) { opacity: 1 !important; animation: none !important; }
  .jw-build-ready .jw-w { animation: none !important; }
}	
/* jw-about-build-mobile */
/* About (12154994), phones (and narrow windows, which Cargo also lays out as mobile):
   the bio text builds in line by line, same timing as desktop. Hidden only once the
   script has flagged <html>; 2s failsafe; reduced motion shows it as is. Desktop untouched. */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  .jw-build-ready .jw-w {
    position: relative;
    animation:
      jw-line-fade 380ms cubic-bezier(.22, .61, .36, 1) var(--jw-d, 0ms) both,
      jw-line-rise 460ms cubic-bezier(.16, 1, .3, 1) var(--jw-d, 0ms) both;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 1 !important;
    animation: none !important;
  }
  .jw-build-ready .jw-w {
    animation: none !important;
  }
}	
/* jw-about-build-mobile */
/* About (12154994), phones (and narrow windows, which Cargo also lays out as mobile):
   the bio text builds in line by line, same timing as desktop. Hidden only once the
   script has flagged <html>; 2s failsafe; reduced motion shows it as is. Desktop untouched. */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 0;
    animation: jw-build-failsafe 0.2s linear 2s forwards;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready {
    opacity: 1;
    animation: none;
  }
  .jw-build-ready .jw-w {
    position: relative;
    animation:
      jw-line-fade 380ms cubic-bezier(.22, .61, .36, 1) var(--jw-d, 0ms) both,
      jw-line-rise 460ms cubic-bezier(.16, 1, .3, 1) var(--jw-d, 0ms) both;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2) {
    opacity: 1 !important;
    animation: none !important;
  }
  .jw-build-ready .jw-w {
    animation: none !important;
  }
}
/* jw-about-build-mobile-all */
/* About (12154994), phones only: the whole page builds in. Headline, then photo, then the
   bio lines, same keyframes and easing as the bio build, a little slower (~1.9s total).
   Only active once the script has flagged <html> (.jw-build-on); the headline and photo are
   hidden purely by the animation's fill, so they always end fully visible (no extra state).
   The bio still waits for .jw-build-ready, with the existing 2s failsafe. Desktop untouched. */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1,
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > img {
    position: relative;
    animation:
      jw-line-fade 650ms cubic-bezier(.22, .61, .36, 1) 0ms both,
      jw-line-rise 700ms cubic-bezier(.16, 1, .3, 1) 0ms both;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > img {
    animation-delay: 220ms, 220ms;
  }
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready .jw-w {
    animation:
      jw-line-fade 650ms cubic-bezier(.22, .61, .36, 1) calc(var(--jw-d, 0ms) * 1.7 + 500ms) both,
      jw-line-rise 700ms cubic-bezier(.16, 1, .3, 1) calc(var(--jw-d, 0ms) * 1.7 + 500ms) both;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1,
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > img,
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready .jw-w {
    animation: none !important;
  }
	
}	
/* jw-about-headline-slower */
@media (max-width: 767px) {
  html.jw-build-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1 {
    animation-duration: 2600ms, 2700ms;	
  }
}	
/* jw-mobile-header-flow */
@media (max-width: 767px) {
  body.mobile [local-style="12154989"] .page.container.container_width {
    background-color: transparent !important;
	width: 93% /*!variable_defaults*/;
  }
  body.mobile [local-style="12154989"] #jw-nav-divider {
    background-color: rgb(210, 210, 210) !important;
    box-shadow: 0 -1000px 0 1000px rgb(255, 255, 255) !important;
  }
  body.mobile.homepage [local-style="12154989"] #jw-nav-divider {
    background-color: rgb(62, 62, 62) !important;
    box-shadow: 0 -1000px 0 1000px rgb(0, 0, 0) !important;
  }
}
		/* jw-about-headline-mobile-size */
@media (max-width: 767px) {
  body.mobile [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1 {
    font-size: 11.5vmin !important;
    line-height: 1.3 !important;
  }
}
/* jw-mobile-emoji-motion */
/* Phones only: bring back the About 👋 wave (same 5s timing and keyframes as desktop).
   The existing phone rule ".jw-wave { animation: none !important; transform: none !important }"
   blocks it. An !important transform also overrides any keyframe transform, so this uses
   the separate "rotate" property (iOS Safari 14.1+), which that rule does not touch.
   The eyes 👀 next to WORK are an SVG <animateTransform> and already run on phones,
   so they need no change. */
@keyframes jw-wave-m {
  0% { rotate: 0deg; }
  6% { rotate: 7deg; }
  12% { rotate: -4deg; }
  18% { rotate: 5deg; }
  24% { rotate: 0deg; }
  100% { rotate: 0deg; }
}
@media (max-width: 767px) {
  html body .jw-wave {
    display: inline-block;
    transform-origin: 70% 90%;
    animation: jw-wave-m 5s ease-in-out 0s infinite normal none running !important;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html body .jw-wave {
    animation: none !important;
  }
}
	
/* jw-about-photo-spacing-mobile */
@media (max-width: 767px) {
  body.mobile [data-id="12154994"] [grid-row] > [grid-col]:first-child > img {
    margin-bottom: -4vmin !important;
  }
}	
/* jw-greatest-gaps-mobile */
/* GREATEST section (Present column, page 12154991): phones only.
   Make the gap under the GREATEST slideshow (Lauren Halsey collage) the same
   as the image-to-image gaps below it (laptop/phone gif, gray names gif).
   Cargo's gid attribute is a runtime counter that goes up every time /work is
   opened again inside the site (About -> Work -> About -> Work gives 6-10
   instead of 1-5), so the older gid="3" rule stops matching. This keys on the
   gallery_instance_id saved in the page content instead, which does not
   change. Both the decoded and the URL-encoded forms of data-gallery are
   covered. */
@media (max-width: 767px) {
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'] + br,
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] + br {
    display: none;
  }
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'],
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] {
    margin-bottom: calc(.5em + .3px);
  }
}	
/* jw-greatest-gaps-mobile */
/* GREATEST section (Present column, page 12154991): phones only.
   Make the gap under the GREATEST slideshow (Lauren Halsey collage) the same
   as the image-to-image gaps below it (laptop/phone gif, gray names gif).
   Cargo's gid attribute is a runtime counter that goes up every time /work is
   opened again inside the site (About -> Work -> About -> Work gives 6-10
   instead of 1-5), so the older gid="3" rule stops matching. This keys on the
   gallery_instance_id saved in the page content instead, which does not
   change. Both the decoded and the URL-encoded forms of data-gallery are
   covered. */
@media (max-width: 767px) {
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'] + br,
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] + br {
    display: none;
  }
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'],
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] {
    margin-bottom: calc(.5em + .3px);
  }
}	
/* jw-greatest-gaps-mobile */
/* GREATEST section (Present column, page 12154991): phones only.
   Make the gap under the GREATEST slideshow (Lauren Halsey collage) the same
   as the image-to-image gaps below it (laptop/phone gif, gray names gif).
   Cargo's gid attribute is a runtime counter that goes up every time /work is
   opened again inside the site (About -> Work -> About -> Work gives 6-10
   instead of 1-5), so the older gid="3" rule stops matching. This keys on the
   gallery_instance_id saved in the page content instead, which does not
   change. Both the decoded and the URL-encoded forms of data-gallery are
   covered. */
@media (max-width: 767px) {
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'] + br,
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] + br {
    display: none;
  }
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'],
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] {
    margin-bottom: calc(.5em + .3px);
  }
}
/* jw-greatest-gaps-mobile */
/* GREATEST section (Present column, page 12154991): phones only.
   Make the gap under the GREATEST slideshow (Lauren Halsey collage) the same
   as the image-to-image gaps below it (laptop/phone gif, gray names gif).
   Cargo's gid attribute is a runtime counter that goes up every time /work is
   opened again inside the site (About -> Work -> About -> Work gives 6-10
   instead of 1-5), so the older gid="3" rule stops matching. This keys on the
   gallery_instance_id saved in the page content instead, which does not
   change. Both the decoded and the URL-encoded forms of data-gallery are
   covered. */
@media (max-width: 767px) {
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'] + br,
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] + br {
    display: none;
  }
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='"gallery_instance_id":3,'],
  body.mobile [local-style="12154991"] .image-gallery[data-gallery*='gallery_instance_id%22%3A3%2C'] {
    margin-bottom: calc(.5em + .3px);
  }
}
	


/* jw-about-desktop-slower: slower word fade-in on desktop About */
@media (min-width: 768px) {
  html body:not(.mobile) .jw-build-ready .jw-w {
	 animation-duration: 1500ms, 1725ms !important; animation-delay: calc(var(--jw-d, 0ms) * 3), calc(var(--jw-d, 0ms) * 3) !important; }
}
/* jw-desktop-divider-up: desktop header line 15px higher */
@media (min-width: 768px) {
  body:not(.mobile) #jw-nav-divider { position: relative; top: -15px; }
}


/* jw-nav-work-hover: WORK turns red on hover like ABOUT and CONTACT */
[local-style="12154989"] small a[href="work"]:hover,
[local-style="12154989"] small a[href="work"]:hover * {color:#FF0000!important;-webkit-text-fill-color:#FF0000!important;transition:none!important;}
/* jw-psg-stairs: keep the stairs GIF in proportion when scaled to the column */
img[data-mid="252957726"] {
    height: auto !important; }

/* jw-nav-align-mobile: phones only, nav and divider span the page's text column */
@media (max-width: 767px) {
  body.mobile [local-style="12154989"] bodycopy.content_padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.mobile [local-style="12154989"] .page.container.container_width {
    width: auto !important;
    margin-left: 0.8rem !important;
    margin-right: 0.8rem !important;
  }
  body.mobile.homepage [local-style="12154989"] .page.container.container_width {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }
}

/* jw-nav-space-mobile: phones only, equal gaps between the three nav links, CONTACT flush with the right text margin */
@media (max-width: 767px) {
  body.mobile [local-style="12154989"] [grid-row] {
    justify-content: space-between !important;
  }
  body.mobile [local-style="12154989"] [grid-row] > [grid-col]:nth-child(3) {
    display: none !important;
  }
  body.mobile [local-style="12154989"] [grid-row] small {
    font-size: 0 !important;
  }
  body.mobile [local-style="12154989"] [grid-row] small a {
    font-size: 1.5rem !important;
  }
  body.mobile [local-style="12154989"] [grid-row] > [grid-col]:last-child small a {
    margin-right: -0.16em !important;
  }
  body.mobile [local-style="12154989"] [grid-row] > [grid-col]:nth-child(2) small a {
    position: relative;
    left: 0.11em;
  }
}

/* jw-nav-icon-dark-mobile: phones only, dark head icon next to CONTACT on white pages (not the black homepage) */
@media (max-width: 767px) {
  body.mobile:not(.homepage) [local-style="12154989"] a[href^="mailto"] span {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
  }
}

/* jw-load-in */
/* Page load animation, all pages, PHONES ONLY for now. Pairs with the jw-load-in script in the
   Top Nav page HTML, which adds .jw-load-on to <html> only on phones (max-width 767px plus a touch
   screen), so desktop is untouched. Nothing is hidden unless that flag is set, every hidden
   state has a CSS failsafe that shows it after 3s, and reduced motion shows everything as is.
   Timing and sequence live in the script; looks live here. */
@keyframes jw-li-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jw-li-fs { to { opacity: 1; } }
@keyframes jw-li-fs2 { to { opacity: 1; } }
@keyframes jw-li-fs-photo { to { opacity: 1; transform: none; } }
@keyframes jw-li-fs-intro { to { opacity: 1; top: 0; } }
@keyframes jw-li-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 1. Nav fades in first (first page view only; it stays put on in-site page changes). The whole
      nav block fades as one, so the phone divider's background shadow stays behind the links.
      The red LOS ANGELES label follows, also when it arrives with /work on an in-site change. */
html.jw-load-on.jw-load-first .page_container[local-style="12154989"] .page_content {
  animation: jw-li-fade 800ms cubic-bezier(.22, .61, .36, 1) 40ms both;
}
html.jw-load-on .page_container[local-style="12154990"] {
  animation: jw-li-fade 900ms cubic-bezier(.22, .61, .36, 1) 500ms both;
}

/* 2. Headlines (About, Present, Past) wait for the script to start typing them (.jw-li-go).
      The untyped rest of the line keeps its space at opacity 0, so nothing reflows. */
html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1:not(.jw-li-go),
html.jw-load-on #jw-present-content > h1:not(.jw-li-go),
html.jw-load-on #jw-past-content > h1:not(.jw-li-go) {
  opacity: 0;
  animation: jw-li-fs 0.3s linear 3s forwards;
}
html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1.jw-li-go {
  animation: none;   /* replaces the phone-only headline fade (jw-about-build-mobile-all) */
}
html.jw-load-on .jw-li-rest {
  opacity: 0;
  animation: jw-li-fs 0.3s linear 3s forwards;
}
html.jw-load-on .jw-li-caret {
  position: relative;
}
html.jw-load-on .jw-li-caret::after {
  content: "";
  position: absolute;
  left: 0.03em;
  top: 0.2em;
  height: 0.82em;
  width: max(2px, 0.035em);
  background: currentColor;
  pointer-events: none;
}
html.jw-load-on .jw-li-caret.jw-li-idle::after {
  animation: jw-li-blink 520ms linear 2 forwards;
}

/* 3. About photo: soft fade and settle as the headline lands. (No blur: blur plus scale plus
      transition crashed WebKit in testing, so it is left out to keep iOS Safari safe.) */
html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > img:not(.jw-li-in) {
  opacity: 0;
  transform: scale(0.965);
  animation: jw-li-fs-photo 0.4s ease 3s forwards;
}
html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > img.jw-li-in {
  animation: none;   /* replaces the phone-only photo fade (jw-about-build-mobile-all) */
  transition:
    opacity 900ms cubic-bezier(.22, .61, .36, 1),
    transform 1200ms cubic-bezier(.16, 1, .3, 1);
}

/* 4. About bio: same word build, now started by the script's --jw-li-bio offset so it
      flows out of the headline instead of racing it */
@media (min-width: 768px) {
  html.jw-load-on body:not(.mobile) [data-id="12154994"] .jw-build-ready .jw-w {
    animation-delay:
      calc(var(--jw-d, 0ms) * 3 + var(--jw-li-bio, 1000ms)),
      calc(var(--jw-d, 0ms) * 3 + var(--jw-li-bio, 1000ms)) !important;
  }
}
@media (max-width: 767px) {
  html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:nth-child(2).jw-build-ready .jw-w {
    animation-delay:
      calc(var(--jw-d, 0ms) * 1.7 + var(--jw-li-bio, 1800ms)),
      calc(var(--jw-d, 0ms) * 1.7 + var(--jw-li-bio, 1800ms));
  }
}

/* 5. /work intro paragraph: rises in right after "Present" */
html.jw-load-on #jw-present-content > .jw-intro-d:not(.jw-li-in),
html.jw-load-on #jw-present-content > .jw-intro-m:not(.jw-li-in) {
  position: relative;
  top: 8px;
  opacity: 0;
  animation: jw-li-fs-intro 0.3s linear 3s forwards;
}
html.jw-load-on #jw-present-content > .jw-intro-d.jw-li-in,
html.jw-load-on #jw-present-content > .jw-intro-m.jw-li-in {
  position: relative;
  top: 0;
  transition: opacity 800ms cubic-bezier(.22, .61, .36, 1), top 900ms cubic-bezier(.16, 1, .3, 1);
}

/* 6. /work images, GIFs and slideshows (whole slideshow, not single slides): fade in as they
      load and come into view. The script holds off screen ones (heartbeat); 3s failsafe. */
html.jw-load-on .jw-li-wait {
  opacity: 0;
  animation: jw-li-fs 0.3s linear 3s forwards;
}
html.jw-load-on .jw-li-wait.jw-li-hb {
  animation-name: jw-li-fs2;
}
html.jw-load-on .jw-li-wait.jw-li-in {
  opacity: 1;
  animation: none;
  transition: opacity 1000ms cubic-bezier(.25, .46, .45, .94);
}

/* 7. Reduced motion: everything as is (the script also stays off) */
@media (prefers-reduced-motion: reduce) {
  html.jw-load-on .page_container[local-style="12154989"] .page_content,
  html.jw-load-on .page_container[local-style="12154990"],
  html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > h1,
  html.jw-load-on #jw-present-content > h1,
  html.jw-load-on #jw-past-content > h1,
  html.jw-load-on .jw-li-rest,
  html.jw-load-on .jw-li-wait {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  html.jw-load-on [data-id="12154994"] [grid-row] > [grid-col]:first-child > img,
  html.jw-load-on #jw-present-content > .jw-intro-d,
  html.jw-load-on #jw-present-content > .jw-intro-m {
    opacity: 1 !important;
    transform: none !important;
    top: 0 !important;
    animation: none !important;
    transition: none !important;
  }
  html.jw-load-on .jw-li-caret {
    display: none !important;
  }
}
/* end jw-load-in */