/* =========================================================================
   RATO AO SOL - Global CSS (Cargo 2)
   -------------------------------------------------------------------------
   0. Cargo defaults      (keep the !main_margin-style markers: the Design panel uses them)
   1. Tokens
   2. Links
   3. Footer navbar       (desktop -> mobile)
   4. Side panels         (Platform / Studio / Curation)
   5. Front page 37942443 (Portada)
   6. Interview hero
   7. Page padding + per-page exceptions
   ========================================================================= */


/* =========================================================================
   0. CARGO DEFAULTS
   ========================================================================= */

#toolset {
	display: none;
}

body {
	background-color: #fff;
	color: #000;
	margin: auto;
	padding: 0;
	overflow-x: hidden; /* stops 100vw elements causing sideways scroll */
}

.page a.active {
	color: #5dccff;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 2.5em;
}

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

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

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

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

.gallery_image_caption {
	margin-top: 1.0rem;
	margin-bottom: 0.5rem;
	margin-right: 4rem;
	font-size: 1.2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.2;
	text-align: left;
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.4rem;
	font-weight: normal;
	color: rgba(0, 0, 0, 0.75);
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0rem;
}

[data-predefined-style="true"] bodycopy a {
	color: #5dccff;
	text-decoration: none;
}

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: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 2.7rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
	letter-spacing: 0rem;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

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

[data-predefined-style="true"] h2 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.75);
	font-size: 2rem;
	line-height: 1.1;
	font-variation-settings: 'slnt' 0, 'SRFF' 1;
}

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

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1.2;
	font-family: "Monument Grotesk Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
	letter-spacing: 0;
	font-variation-settings: 'slnt' 0, 'MONO' 1;
}

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

/**
 * Breakpoints
 */

[data-css-preset] .page {
	background-color: initial /*!page_bgcolor*/;
}

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

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

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

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

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

/**
 * 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.75rem/*!thumbnails_padding*/;
}

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

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

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

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

.thumbnails .title {
	margin-top: 1.0rem;
	margin-bottom: 0.6rem;
	font-size: 1.2rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.2;
}

.thumbnails .tags {
	margin-top: .8rem;
	margin-bottom: 1.5rem;
	font-size: 1.1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.5);
	font-family: "Monument Grotesk Mono", Icons;
	font-style: normal;
	line-height: 1.2;
}

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

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

/**
 * Site Menu Button
 */

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

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

#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.85);
	background: transparent;
	font-size: 32px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	position: fixed;
	padding: 6px;
	top: 1rem /*!shop_button*/;
	left: 1.5rem /*!shop_button*/;
}

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

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

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

/*
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: Diatype, Icons;
	font-size: 1.2rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.75);
	display: block;
	margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .dropdown {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.2rem;
	display: inline-block;
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	background: white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
	margin-bottom: 1rem;
	line-height: 1.2;
	padding: 0.7rem 2.5rem 0.8rem 1rem;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.75);
}

.shop_product .button {
	font-family: Diatype, Icons;
	font-size: 1.3rem;
	background: rgba(0, 0, 0, 0.75);
	color: rgba(255,255,255,1);
	flex: 0 0 50%;
	text-align: left;
	display: inline-block;
	line-height: 1;
	padding: .9rem 1rem .9rem;
	font-style: normal;
	font-weight: 700;
}

/*
 * 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(255, 255, 255, 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: 1.2rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
}

.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: 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: #fff;
	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: 36rem;
	height: 3.3rem;
	outline: 1px solid rgba(0,0,0,0.15);
	color: rgba(0, 0, 0, 0.6);
	background: #fff;
	font-size: 1.2rem;
	line-height: 1.2;
	font-family: Diatype, Icons;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	margin: 1px 1px 1em 1px;
}

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

/*
 * Nav Page Shadow (desktop / mobile)
 */

[local-style="35600322"],
[local-style="35600323"] {
	box-shadow: 0px 2px 15px rgb(0 0 0 / 30%);
}


/* =========================================================================
   1. TOKENS - change a value here and it updates everywhere
   ========================================================================= */

:root {
	--ras-pink:        #ffadcc;
	--ras-sand:        #F2D7B6;   /* Platform + Studio panels */
	--ras-sand-dark:   #e0c8a4;   /* Curation panels */

	--ras-serif:       "Times New Roman", Times, serif;
	--ras-sans:        "Diatype Variable", Icons;
	--ras-ease:        cubic-bezier(0.45, 0, 0.25, 1);

	--ras-nav-h:       68px;      /* pink footer height (used by interview hero) */
	--ras-footer-gap:  78px;      /* page bottom padding so content clears the footer */
	--ras-footer-row:  2.2rem;    /* footer first row: logo + section labels */
	--ras-vh:          1vh;       /* 1% of the visible screen height; the footer script
	                                 updates it, because on phones 100vh is measured as if
	                                 the browser bars were hidden */
	--ras-bars:        0px;       /* height of the browser bars covering the page (iPhone:
	                                 Safari, Firefox, Brave). Measured by the footer script;
	                                 0 in Chrome and on desktop */

	--ras-m-text:      1.4rem;    /* mobile: expanded footer + panels, body text */
	--ras-m-heading:   1.2rem;    /* mobile: expanded footer + panels, headings */
	--ras-m-leading:   1.45;
}

@media (max-width: 768px) {
	:root {
		--ras-nav-h:      180px;
		--ras-footer-gap: 70px;       /* collapsed footer is ~65px with the 2.8rem logo */
		--ras-footer-row: 2.8rem;
	}
}


/* =========================================================================
   2. LINKS
   ========================================================================= */

a,
a:hover,
a:focus,
a:active,
a:visited {
	text-decoration: none !important;   /* no underlines anywhere, incl. headings */
}

a,
a:visited {
	color: #000;
}

a:hover,
a:focus,
a:active {
	color: #000;
	opacity: 0.7;
}


/* =========================================================================
   3. FOOTER NAVBAR
   ========================================================================= */

/* ---------- Desktop ---------- */

#bottom-layout {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	padding: 0.6rem 0 0.3rem;
	background: var(--ras-pink);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-family: var(--ras-sans);
	font-style: normal;
	font-weight: 400;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
	overflow: hidden;
}

#bottom-layout .navbar-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 0 2rem;
	box-sizing: border-box;
}

#bottom-layout .navbar-col {
	position: relative;
	flex: 1 1 22%;
	min-width: 180px;
	padding-bottom: 0.8rem;
}

/* Column headings (title + section labels) */
#bottom-layout .nav-title > a,
#bottom-layout .nav-section,
#bottom-layout .nav-section a {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #111;
}

/* First row: logo and section labels share one height, so the lines
   under all four columns sit at the same level */
#bottom-layout .nav-title,
#bottom-layout .nav-section {
	display: flex;
	align-items: center;
	height: var(--ras-footer-row);
	box-sizing: border-box;
}

#bottom-layout .nav-title > a {
	display: flex;
	align-items: center;
}

/* Horizontal logo. Sized by height only; !important guards against
   Cargo's image scaling, same as the header logo */
#bottom-layout .nav-logo {
	display: block;
	height: var(--ras-footer-row) !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	object-fit: contain;
}

#bottom-layout hr {
	width: 93%;
	margin: 0.1rem 0 0;
	border: none;
	border-top: 1.5px solid rgba(0, 0, 0, 0.8);
	opacity: 0.8;
}

/* Link lists: hidden, revealed on hover */
#bottom-layout .nav-links {
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-5px);
	transition:
		max-height 0.9s var(--ras-ease),
		opacity    0.9s ease,
		transform  0.9s ease,
		margin-top 0.9s ease;
}

#bottom-layout:hover .nav-links {
	max-height: 600px;
	margin-top: 0.6rem;
	opacity: 1;
	transform: translateY(0);
}

#bottom-layout .nav-links a {
	display: block;
	color: rgba(0, 0, 0, 0.85);
	font-weight: 400;
	line-height: 1.5;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

#bottom-layout .nav-links a:hover {
	opacity: 0.6;
	transform: translateX(3px);
}

#bottom-layout .nav-links strong a {
	font-weight: 800;
}

#bottom-layout:hover .navbar-col--brand .nav-links,
#bottom-layout.nav-open .navbar-col--brand .nav-links {
	margin-top: 0.3rem;            /* only when open, so the collapsed bar stays thin */
}

#bottom-layout .navbar-col--brand .nav-links p {
	margin: 0.3rem 0 0;
}

#bottom-layout .navbar-col--brand .nav-links a {
	display: inline;
}

/* Mobile toggle: hidden on desktop */
#bottom-layout .nav-toggle {
	display: none;
	padding: 0;
	background: none;
	border: none;
	color: #000;
	cursor: pointer;
}


/* ---------- Mobile ---------- */

@media (max-width: 768px) {

	#bottom-layout {
		padding: 0.6rem 1rem;
	}

	#bottom-layout .navbar-row {
		flex-direction: column;
		align-items: flex-start;
	}

	#bottom-layout .navbar-col {
		width: 100%;
		padding-bottom: 0;
	}

	/* Brand row: title left, menu icon right, hr + text below */
	#bottom-layout .navbar-col--brand {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	#bottom-layout .navbar-col--brand .nav-title {
		flex: 1 1 auto;
	}

	#bottom-layout .navbar-col--brand hr,
	#bottom-layout .navbar-col--brand .nav-links {
		flex-basis: 100%;
	}

	#bottom-layout .nav-title > a {
		font-size: 1.4rem;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.95);
	}

	#bottom-layout .nav-section,
	#bottom-layout .nav-section a {
		font-size: 1rem;
	}

	/* Toggle icon */
	#bottom-layout .nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-left: 1rem;
		font-size: 1.5rem;
		line-height: 1;
	}

	#bottom-layout .nav-toggle::before            { content: "\2630";   /* menu icon */ }
	#bottom-layout.nav-open .nav-toggle::before   { content: "\00D7";   /* close cross */ }

	/* No hover-to-open on touch: it's click only */
	#bottom-layout:hover .nav-links {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		transform: translateY(-5px);
	}

	/* Collapsed: only the brand title + toggle */
	#bottom-layout:not(.nav-open) {
		padding-left: 0;
	}

	#bottom-layout:not(.nav-open) .navbar-col:not(.navbar-col--brand),
	#bottom-layout:not(.nav-open) .navbar-col--brand hr,
	#bottom-layout:not(.nav-open) .navbar-col--brand .nav-links {
		display: none;
	}

	/* Expanded: full screen */
	#bottom-layout.nav-open {
		top: 0;                        /* with bottom: 0 it fills the visible screen */
		padding: 1rem 0;
		overflow-y: auto;
	}

	#bottom-layout.nav-open .nav-links {
		max-height: 600px;
		margin-top: 0.6rem;
		opacity: 1;
		transform: translateY(0);
	}

	/* Expanded: bigger text */
	#bottom-layout.nav-open .nav-links,
	#bottom-layout.nav-open .nav-links p,
	#bottom-layout.nav-open .nav-links a {
		font-size: var(--ras-m-text);
		line-height: var(--ras-m-leading);
	}

	#bottom-layout.nav-open .nav-section,
	#bottom-layout.nav-open .nav-section a {
		font-size: var(--ras-m-heading);
	}

	/* Expanded: space between INTERVIEWS / CURATION / ABOUT */
	#bottom-layout .navbar-col:not(.navbar-col--brand) {
		margin-top: 1.4rem;
		padding-top: 0.6rem;
	}

	#bottom-layout .navbar-col--brand + .navbar-col {
		margin-top: 1rem;
	}
}


/* =========================================================================
   4. SIDE PANELS - Platform / Studio / Curation
   Targeted by ID so they always outweigh Cargo's h2/p/hr styles.
   ========================================================================= */

#platform-panel,
#studio-panel,
#curation-panel-1,
#curation-panel-2 {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;                       /* top + bottom 0 = full visible height */
	z-index: 99999;
	width: 50vw;
	background: var(--ras-sand);
	font-family: var(--ras-sans);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(100%);
	transition:
		transform  0.6s var(--ras-ease),
		opacity    0.6s ease,
		visibility 0s linear 0.6s;
}

#curation-panel-1,
#curation-panel-2 {
	background: var(--ras-sand-dark);
}

#platform-panel.is-open,
#studio-panel.is-open,
#curation-panel-1.is-open,
#curation-panel-2.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	transition:
		transform  0.6s var(--ras-ease),
		opacity    0.6s ease,
		visibility 0s;
}

#platform-panel .about-inner,
#studio-panel .about-inner,
#curation-panel-1 .about-inner,
#curation-panel-2 .about-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem 3rem;
	box-sizing: border-box;
}

#platform-panel .about-close,
#studio-panel .about-close,
#curation-panel-1 .about-close,
#curation-panel-2 .about-close {
	align-self: flex-end;
	padding: 0;
	background: transparent;
	border: none;
	font-size: 2rem;
	color: #000;
	cursor: pointer;
}

#platform-panel .about-content,
#studio-panel .about-content,
#curation-panel-1 .about-content,
#curation-panel-2 .about-content {
	margin-top: 1rem;
	overflow-y: auto;
}

#platform-panel h2,
#studio-panel h2,
#curation-panel-1 h2,
#curation-panel-2 h2,
#platform-panel h3,
#studio-panel h3,
#curation-panel-1 h3,
#curation-panel-2 h3 {
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#curation-panel-1 h3,
#curation-panel-2 h3 {
	margin-top: 1.5rem;
}

#platform-panel hr,
#studio-panel hr,
#curation-panel-1 hr,
#curation-panel-2 hr {
	margin: 0.5rem 0 1rem;
	border: none;
	border-top: 1.5px solid rgba(0, 0, 0, 0.8);
}

#platform-panel p,
#studio-panel p,
#curation-panel-1 p,
#curation-panel-2 p {
	max-width: 40rem;
	line-height: 1.5;
}

@media (max-width: 768px) {
	#platform-panel,
	#studio-panel,
	#curation-panel-1,
	#curation-panel-2 {
		width: 100vw;
	}

	#platform-panel .about-inner,
	#studio-panel .about-inner,
	#curation-panel-1 .about-inner,
	#curation-panel-2 .about-inner {
		padding: 1.5rem 1.5rem 2rem;
	}

	/* Same type as the expanded footer */
	#platform-panel h2,
	#studio-panel h2,
	#curation-panel-1 h2,
	#curation-panel-2 h2,
	#platform-panel h3,
	#studio-panel h3,
	#curation-panel-1 h3,
	#curation-panel-2 h3 {
		font-size: var(--ras-m-heading);
		line-height: 1.2;
		color: #111;
	}

	#platform-panel h2,
	#studio-panel h2,
	#curation-panel-1 h2,
	#curation-panel-2 h2 {
		margin-bottom: 0.6rem;
	}

	#platform-panel p,
	#studio-panel p,
	#curation-panel-1 p,
	#curation-panel-2 p,
	#platform-panel p a,
	#studio-panel p a,
	#curation-panel-1 p a,
	#curation-panel-2 p a {
		font-size: var(--ras-m-text);
		line-height: var(--ras-m-leading);
	}
}


/* =========================================================================
   5. FRONT PAGE - 37942443 (Portada)
   ========================================================================= */

/* Title in Times New Roman on desktop AND mobile.
   The first selector matches Cargo's page style for this page
   ([data-predefined-style] [local-style] h2) and adds "html body"
   so it wins regardless of load order. */
html body [data-predefined-style="true"] [local-style="37942443"] h2,
html body [data-predefined-style="true"] [local-style="37942443"] h2 a,
[pid="37942443"] h2,
[pid="37942443"] h2 a,
[data-style-pid="37942443"] h2,
[data-style-pid="37942443"] h2 a {
	font-family: var(--ras-serif);
	font-weight: 400;
	font-variation-settings: normal;   /* Times isn't a variable font */
}

@media (max-width: 768px) {

	/* No forced height on phones... */
	.content,
	.content_padding {
		min-height: auto !important;
	}

	.content {
		padding-bottom: 20px !important;
	}

	/* ...except the front page, which fills the visible screen above the
	   footer. Keep this rule after the reset above so it wins. */
	[pid="37942443"],
	[data-style-pid="37942443"],
	[local-style="37942443"] {
		position: relative;
		display: block;
		min-height: calc(var(--ras-vh) * 100 - var(--ras-footer-gap)) !important;
		padding-bottom: 1.5rem;
	}

	[pid="37942443"] [grid-col],
	[data-style-pid="37942443"] [grid-col],
	[local-style="37942443"] [grid-col] {
		width: 100% !important;
	}

	/* Shared: white, tight */
	[pid="37942443"] h2,
	[pid="37942443"] h2 a,
	[pid="37942443"] small,
	[pid="37942443"] small a,
	[data-style-pid="37942443"] h2,
	[data-style-pid="37942443"] h2 a,
	[data-style-pid="37942443"] small,
	[data-style-pid="37942443"] small a,
	[local-style="37942443"] h2,
	[local-style="37942443"] h2 a,
	[local-style="37942443"] small,
	[local-style="37942443"] small a {
		margin-bottom: 0 !important;
		line-height: 1 !important;
		color: #fff !important;
	}

	/* Title + credit: moved up by the height of the browser bars, so on iPhone
	   they sit above the footer like in Chrome and on desktop. Only h2 and
	   small (not their links), otherwise the text would move twice. */
	[pid="37942443"] h2,
	[pid="37942443"] small,
	[data-style-pid="37942443"] h2,
	[data-style-pid="37942443"] small,
	[local-style="37942443"] h2,
	[local-style="37942443"] small {
		position: relative;
		top: calc(var(--ras-bars) * -1);
	}

	/* Title: a bit bigger on phones (was 28px). Change the number to adjust.
	   !important so it beats the size in Cargo's own page style. */
	[pid="37942443"] h2,
	[pid="37942443"] h2 a,
	[data-style-pid="37942443"] h2,
	[data-style-pid="37942443"] h2 a,
	[local-style="37942443"] h2,
	[local-style="37942443"] h2 a {
		font-size: 34px !important;
	}

	/* Small text stays in light Diatype */
	[pid="37942443"] small,
	[pid="37942443"] small a,
	[data-style-pid="37942443"] small,
	[data-style-pid="37942443"] small a,
	[local-style="37942443"] small,
	[local-style="37942443"] small a {
		font-size: 28px;
		font-family: var(--ras-sans);
		font-style: normal;
		font-weight: 200;
	}
}


/* =========================================================================
   6. INTERVIEW HERO
   ========================================================================= */

.ras-hero {
	position: relative;
	width: 100vw;
	height: calc(var(--ras-vh) * 100);
	margin-left: calc(50% - 50vw);   /* escape Cargo's page padding */
	margin-top: -1rem;
	margin-bottom: 2rem;
	overflow: hidden;
}

.ras-hero-images {
	display: grid;
	grid-template-columns: 50% 50%;     /* two equal columns */
	height: 100%;
}

.ras-hero-images > * {
	height: 100%;
	overflow: hidden;
}

.ras-hero-images img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;            /* overrides .content img margin-bottom */
	object-fit: cover;
}

.ras-hero-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 45vh 2rem calc(var(--ras-nav-h) + 1.5rem);
	background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.25));
	color: #fff;
	font-family: var(--ras-serif);
	pointer-events: none;
}

.ras-hero-title {
	font-size: clamp(32px, 4.5vw, 80px);
	font-weight: 400;
	line-height: 1;
	text-align: justify;
	text-align-last: justify;
}

.ras-hero-credit {
	display: flex;
	justify-content: space-between;
	font-size: 40px;   /* was clamp(40px, 2.2vw, 36px): min > max, so it always rendered 40px */
	line-height: 1;
}

@media (max-width: 768px) {
	.ras-hero-text   { padding: 35vh 1rem calc(var(--ras-nav-h) + 1rem); }
	.ras-hero-title  { font-size: 12vw; }
	.ras-hero-credit { font-size: 7vw; }
}


/* =========================================================================
   7. PAGE PADDING + PER-PAGE EXCEPTIONS
   ========================================================================= */

/* Clear the fixed footer (78px desktop / 70px mobile, see tokens) */
.content_padding {
	padding-bottom: var(--ras-footer-gap) !important;
}

@media (max-width: 768px) {
	h1 {
		padding-top: 1rem !important;
	}
}

/* Page 37942489: minimal bottom padding */
[pid="37942489"] .content_padding,
[data-pid="37942489"] .content_padding,
[data-style-pid="37942489"] .content_padding,
[local-style="37942489"] .content_padding {
	padding-bottom: 1.2rem !important;
}

/* Page 37911190 (mobile): no top padding, 1rem sides */
@media (max-width: 768px) {
	[pid="37911190"] .content_padding,
	[data-pid="37911190"] .content_padding,
	[data-style-pid="37911190"] .content_padding,
	[local-style="37911190"] .content_padding {
		padding-top: 0rem /*!main_margin*/;
		padding-left: 0rem /*!main_margin*/;
		padding-right: 0rem /*!main_margin*/;
	padding-bottom: 0rem /*!main_margin*/;
	}
}