#toolset {
	display: none;
}

body {
    background-color: #000;
	color: #000;
    overscroll-behavior: none;
}

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;   
    border-radius: 0px;
}

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: #ed1875;
	border: 0;
	height: 1px;
	display: block;
}

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

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	font-family: Inter, Icons;
	font-style: normal;
	line-height: 1.4;
}

[data-predefined-style="true"] bodycopy a {
	color: #ed1875;
	padding-bottom: 0em;
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {
    text-decoration: underline;
}

[data-predefined-style="true"] h1 {
	font-family: Inter, Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 2rem;
	line-height: 1.3;
	color: rgba(255, 255, 255, 1);
}

[data-predefined-style="true"] h1 a {
	color: #ed1875;
}

[data-predefined-style="true"] h2 {
	font-family: Inter, Icons;
	padding: 0;
	margin: 0;
	color: rgba(255, 255, 255, 1);
	font-size: 1.3rem;
	line-height: 1.4;
	letter-spacing: 0;
	font-style: normal;
	font-weight: 400;
}

[data-predefined-style="true"] h2 a {
	color: #ed1875;
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1.2;
	font-family: "Times New Roman", "Times New Roman", Times, serif, "Times New Roman", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}

[data-predefined-style="true"] small a {
	color: #fff;
	border-bottom-width: 0em;
}

/**
 * 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_right*/;
	margin-right: 0 /*!content_right*/;
	text-align: left /*!text_left*/;
}

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

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

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

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

/**
 * Thumbnails
 */

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

[data-css-preset] .thumbnails {
   	background-color: transparent/*!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;
}

/**
 * Site Menu
 */

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

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

#site_menu_button.custom_icon {
	width: 30px;
	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.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: Diatype, Icons;
	font-size: 1.2rem;
    padding: 0;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	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;
}

/**
 * Image Zoom
 */

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

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 1.2rem /*!quick_view_padding*/;
    padding-bottom: 1.2rem /*!quick_view_padding*/;
    padding-left: 1.2rem /*!quick_view_padding*/;
    padding-right: 1.2rem /*!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(237, 24, 117, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: Diatype, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 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: 0px;
}

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

.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: 0px;
}

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

/** 
 * 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: 2px;
}

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


/* =============================================================================
   michaelryanwood.com: site rules (everything above is Cargo's template; the
   values it tags with "!" comments are read by Cargo's Design panel, so it stays as Cargo wrote it)
   ========================================================================== */

/* ---- Tokens ---------------------------------------------------------------- */
:root {
    --mrw-pink: #ed1875;
    --mrw-grey: #8b8b8b;          /* contact box text on the dark intro (5.2:1) */
    --mrw-grey-light: #767676;    /* the same over the white portfolio (4.54:1) */
    --mrw-panel: 1.2rem;          /* space-panel: the page frame and card padding */
    --mrw-radius: 14px;           /* radius-card */
    --mrw-shadow: -2px 2px 10px 0 rgba(255, 255, 255, 0.06) inset, -2px 4px 10px 2px rgba(0, 0, 0, 0.06);
    --mrw-spring: cubic-bezier(.45, 1.5, .2, 1);   /* fallback where linear() is unsupported */
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --mrw-spring: linear(0, .043, .152, .298, .457, .613, .754, .872, .966, 1.034, 1.079, 1.104, 1.113, 1.11, 1.099, 1.083, 1.065, 1.047, 1.031, 1.017, 1.006, .997, .992, .989, .987, .987, .989, 1);
    }
}

/* ---- Animations ---------------------------------------------------------- */
/* .floating bobs (memoji, intro arrows); .moving sways */
.floating,
.moving {
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.floating { animation-name: floating; }
.moving   { animation-name: moving; }
@keyframes floating {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(0, 8px); }
    100% { transform: translate(0, 0); }
}
@keyframes moving {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(8px, 0); }
    100% { transform: translate(0, 0); }
}
/* the fallback fade for the homepage grid and the collage (their scripts normally reveal them sooner) */
@keyframes mrw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Utilities ----------------------------------------------------------- */
.txt:hover { text-decoration: underline; }

/* ---- Homepage: intro grid and bio ----------------------------------------- */
/* down arrows pinned to the bottom of the first screen */
.page[data-id="26635733"] .floating {
    position: absolute;
    bottom: 1.7rem;
}
/* space between the photo grid and the paragraph matches the photo gap */
.page[data-id="26635733"] .image-gallery + h1 {
    padding-top: calc(1.25rem - 1px);
}
/* the grid starts hidden and fades in once its images have loaded (script); on its own after 3.5 s. Not with ?mrw=off */
html:not(.mrw-off) .page[data-id="26635733"] .image-gallery {
    opacity: 0;
    animation: mrw-fade-in 0.75s ease 3.5s forwards;
}
/* tiles still loading when the grid is shown wait invisibly, then fade in (classes set by the script) */
html:not(.mrw-off) .page[data-id="26635733"] .image-gallery img.mrw-wait,
html:not(.mrw-off) .page[data-id="26635733"] .image-gallery video.mrw-wait {
    opacity: 0 !important;
}
html:not(.mrw-off) .page[data-id="26635733"] .image-gallery img.mrw-fading,
html:not(.mrw-off) .page[data-id="26635733"] .image-gallery video.mrw-fading {
    transition: opacity 0.75s ease;
}
/* reserve the built grid's height while Cargo lays it out, so the bio doesn't jump (no layout shift).
   Desktop: 28.75vw + 35.2 px (exact from 900 px up). Phones: 16:9 tiles in four rows plus gaps and padding,
   and the grid's own -1.25rem offset from the start. */
@media (min-width: 769px) {
    html:not(.mrw-off) .page[data-id="26635733"] .image-gallery:not(.initialized) {
        min-height: calc(28.75vw + 35.2px);
    }
}
@media (max-width: 700px) {
    html:not(.mrw-off) .page[data-id="26635733"] .image-gallery.initialization-in-progress {
        margin-top: -1.25rem;
        min-height: calc(0.5625 * (100vw + 1px) + 2.73rem) !important;
    }
    /* contact links to the grid: completes the 3.6rem section break */
    .page[data-id="26635733"] {
        margin-top: 1.09rem;
    }
}

/* ---- Project section ------------------------------------------------------ */
/* name to memoji: 1.2rem, measured to the memoji's resting position (the docked copy follows) */
.page[data-id="36524965"] .floating {
    margin-top: -0.29rem;
}

/* ---- Wood Wide Web: the collage --------------------------------------------- */
/* a one-screen area; a Custom HTML script places the cards, drifts them and adds scroll gravity and dragging.
   The animations below are the fallback when that script doesn't run (DVD-screensaver drift). */
.page[data-id="36471127"] .image-gallery {
    height: 100vh !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    opacity: 0;
    animation: mrw-fade-in 0.75s ease 3s forwards;   /* revealed by the script; on its own after 3 s */
}
.page[data-id="36471127"] .image-gallery .thumbnail_sizer {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    padding: 0 !important;
}
.page[data-id="36471127"] .image-gallery .gallery_card {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    animation: www-dvd-x 40s linear infinite alternate, www-dvd-y 29s linear infinite alternate;
}
@keyframes www-dvd-x {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw - 100% - 40px)); }
}
@keyframes www-dvd-y {
    from { translate: 0 0; }
    to   { translate: 0 calc(100vh - 100%); }
}
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(1)  { animation-duration: 37s, 27s; animation-delay: -7.3s, -5.1s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(2)  { animation-duration: 50s, 21s; animation-delay: -14.6s, -10.2s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(3)  { animation-duration: 30s, 37s; animation-delay: -2.9s, -15.3s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(4)  { animation-duration: 43s, 30s; animation-delay: -2.2s, -1.4s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(5)  { animation-duration: 56s, 24s; animation-delay: -1.5s, -10.5s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(6)  { animation-duration: 34s, 40s; animation-delay: -1.8s, -5.6s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(7)  { animation-duration: 46s, 34s; animation-delay: -22.1s, -14.7s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(8)  { animation-duration: 40s, 22s; animation-delay: -8.4s, -12.8s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(9)  { animation-duration: 53s, 29s; animation-delay: -32.7s, -9.9s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(10) { animation-duration: 27s, 38s; animation-delay: -5.0s, -3.0s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(11) { animation-duration: 59s, 26s; animation-delay: -6.3s, -8.1s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(12) { animation-duration: 35s, 32s; animation-delay: -21.6s, -1.2s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(13) { animation-duration: 45s, 19s; animation-delay: -10.9s, -6.3s; }
.page[data-id="36471127"] .image-gallery .gallery_card:nth-child(14) { animation-duration: 42s, 35s; animation-delay: -24.2s, -5.4s; }
@media (prefers-reduced-motion: reduce) {
    .page[data-id="36471127"] .image-gallery .gallery_card { animation: none; }
}

/* ---- Contact box (desktop, bottom left): frosted glass, grey text, pink links ---- */
.page[data-id="36463170"] .page_content {
    width: fit-content;
    padding: var(--mrw-panel);
    color: var(--mrw-grey);
    border-radius: var(--mrw-radius);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: var(--mrw-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
/* Cargo writes the grey inline on its text spans; these follow the box's colour */
.page[data-id="36463170"] .page_content,
.page[data-id="36463170"] .page_content span[style*="8b8b8b"] {
    transition: color .25s linear;
}
.page[data-id="36463170"] .page_content span[style*="8b8b8b"] {
    color: var(--mrw-grey) !important;
}
.page[data-id="36463170"] .page_content a,
.page[data-id="36463170"] .page_content a * {
    color: var(--mrw-pink) !important;
}
/* over the white portfolio (html.mrw-light, set by the tab title and page colours script) */
html.mrw-light .page[data-id="36463170"] .page_content {
    color: var(--mrw-grey-light);
}
html.mrw-light .page[data-id="36463170"] .page_content span[style*="8b8b8b"] {
    color: var(--mrw-grey-light) !important;
}

/* ---- Keyboard focus: the same as hover (no ring, owner's choice) ----------------- */
a:focus-visible,
button:focus-visible {
    outline: none !important;
    text-decoration: underline !important;
}
#mrw-surprise.on:focus-visible,
#mrw-top.on:focus-visible,
#mrw-hi.on:focus-visible,
#mrw-note .copy:focus-visible {
    transform: translateY(-1px);
}