/**
 * Resets
 */

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

::-moz-selection { background-color: #09f; color: #fff; }
::selection { background-color: #09f; color: #fff; }
:focus { outline: 0; }

customhtml > * {
	position: relative;
	z-index: 10;
}

/**
 * Global
 */

body, html {
	min-height: 100vh;
	margin: 0px;
	padding: 0px;
}

html { position: relative; }

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

a:active { opacity: 0.7; }

/**
 * Backdrop / Container
 */

#backdrop {
	position: fixed;
	right: 0; top: 0; bottom: 0;
	max-width: 100%;
	z-index: 1;
}

main {
	background: #fff;
	clear: both;
	overflow: hidden;
	position: absolute;
	max-width: 100%;
	width: 100%;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main > div {
	flex: 1 0 auto;
	width: 100%;
}

.subpage_overlay {
	display: block;
	pointer-events: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
}

body.homepage .subpage_overlay { display: none; }

/**
 * Content basics
 */

i, em { font-style: italic; }
b, strong { font-weight: bold; }
ul, ol { margin: 0; padding: 0 0 0 1em; }
sup { top: -0.4em; vertical-align: baseline; position: relative; }
sub { top: 0.3em; vertical-align: baseline; position: relative; }

.slideshow-nav { margin-bottom: 0.5em; }

img { border: 0; padding: 0; }

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

hr {
	background: rgba(127, 127, 127, 0.2);
	border: 0;
	height: 0.08em;
	display: block;
}

.bodycopy { display: none; }
.container { min-height: 100%; }
.content img { float: none; margin-bottom: 1em; }
.clear:after { content: ""; display: table; clear: both; }

.loading[data-loading] {
	display: none;
	position: fixed;
	top: 8px; left: 8px;
	z-index: 100;
}

/**
 * Editor presets (Cargo-managed, do not remove)
 */

[data-css-presets="true"] main {
	background-color: rgba(255, 255, 255, 0.62);
	text-align: right;
	min-height: 100vh;
	align-items: flex-start;
	text-decoration: none;
	border: 0 none;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	right: 0;
}

[data-css-presets="true"] .content_padded { padding: 6.4rem; }
[data-css-presets="true"] .content_width { width: 92rem; }
[data-css-presets="true"] #backdrop { width: 100%; }
[data-css-presets="true"] .subpage_overlay { background-color: rgba(255, 255, 255, 0.58); }

[data-predefined-style="true"] main {
	font-size: 2rem;
	font-weight: 200;
	color: rgba(0, 0, 0, 1);
	font-family: "Nitti Grotesk", Social;
	font-style: normal;
	line-height: 1.4;
	border: 0 none;
}

[data-predefined-style="true"] main a {
	color: rgba(0, 0, 0, 1);
	border-bottom: 0.07em solid rgba(0, 0, 0, 1);
	text-decoration: none;
	border: none;
}

main a.image-link,
main a.icon-link,
main a.image-link:hover,
main a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
	text-decoration: none;
}

[data-predefined-style="true"] h1 {
	font-family: Oswald, Social !important;
	font-style: normal;
	font-weight: 700;
	padding: 0;
	margin: 0;
	font-size: 18rem;
	line-height: 1;
	color: rgb(0, 0, 0);
	text-rendering: optimizeLegibility;
	text-decoration: none;
	border: 0 none;
}

[data-predefined-style="true"] h1 a:hover {
	color: rgba(0, 32, 255, 1);
	text-decoration: none;
	border: 0 none;
}

[data-predefined-style="true"] h2 {
	font-family: Oswald, Social !important;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 1);
	font-size: 2.5rem;
	line-height: 1.3;
	text-rendering: optimizeLegibility;
	text-decoration: none;
	border: 0 none;
}

[data-predefined-style="true"] h2 a:hover {
	color: rgba(0, 32, 255, 1);
	text-decoration: none;
	border: 0 none;
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1.5;
	font-family: Oswald, Social;
	font-style: normal;
	font-weight: 300;
	color: rgb(0, 0, 0);
	text-decoration: none;
	border: 0 none;
}

[data-predefined-style="true"] small a:hover {
	color: rgba(0, 32, 255, 1);
	border-bottom-width: 0.1em;
	text-decoration: none;
	border: 0 none;
}

#backstage_icon { display: block; }

/**
 * Breakpoints (Cargo-managed, do not remove)
 */

[data-css-presets="true"].mobile #plugin,
[data-css-presets="true"].mobile #backdrop,
.mobile #backdrop,
.mobile #plugin {
	position: relative;
	height: 50vh;
	min-width: 100%;
	width: calc(100% - 80rem);
	top: 0;
	bottom: auto;
	left: 0;
}

.mobile main,
[data-css-presets="true"].mobile main {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
}

.mobile main.content_width,
[data-css-presets="true"].mobile main.content_width {
	max-width: 100%;
	width: 100%;
}

/* ===================================================
   DESIGN SYSTEM: shared across every page
   =================================================== */

/* Shared nav module — used identically on homepage (.home-nav)
   and every subpage (.site-nav) */

.site-nav,
.home-nav {
	margin-bottom: 3.5rem;
}

.site-nav h2,
.home-nav h2 {
	font-size: 2.2rem;
	font-weight: 400;
	margin: 0 0 0.5rem 0;
}

.site-nav h2 small,
.home-nav h2 small {
	font-size: 2.2rem;
	font-style: normal;
	opacity: 0.55;
	margin-left: 0.3em;
	transition: opacity 0.2s ease;
	display: inline;
}

.site-nav a,
.home-nav a {
	border-bottom: none !important;
}

.site-nav a:hover,
.home-nav a:hover {
	color: #1d2951 !important;
}

/* Homepage-specific */

body.homepage h1 {
	font-size: 14rem;
	margin-bottom: 0.4rem;
}

.home-quote {
	font-size: 1.8rem;
	opacity: 0.7;
	margin-bottom: 3.5rem;
}

.home-portrait {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 1.5rem;
	display: block;
}

.home-social {
	margin-top: 1rem;
}

/* Shared content section spacing — replaces manual <br> chains
   Wrap any block of subpage content in <div class="content-section"> */

.content-section {
	margin-bottom: 3.5rem;
	text-align: left;
}

.content-section h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.content-section h1 i {
	font-size: 1.6rem;
	opacity: 0.55;
	font-style: italic;
}

.content-section p,
.content-section small {
	font-size: 1.8rem;
	line-height: 1.6;
}

/* ===================================================
   PERSONALITY: signature accent color + serif pairing
   =================================================== */

[data-predefined-style="true"] main a:hover,
[data-predefined-style="true"] h1 a:hover,
[data-predefined-style="true"] h2 a:hover,
[data-predefined-style="true"] small a:hover {
	color: #1d2951 !important;
}

/* Serif treatment for quotes and poetry excerpts.
   Add class="quote" to any blockquote or line of quoted poetry/reviews
   e.g. <div class="quote">"..."</div> */

.quote,
.home-quote,
blockquote {
	font-family: Oswald, Social, sans-serif !important;
	font-style: italic;
	font-size: 2rem;
	line-height: 1.6;
	color: #1d2951;
}

/* Event dates: add class="event-date" to the h2 manually to get the accent color */

.content-section h2.event-date {
	color: #1d2951;
}

/* ===================================================
   PERSONALITY: hover-reveal Spanish translation
   Replaces the static secondary nav row entirely.
   =================================================== */

.hoverword {
	cursor: pointer;
}

#floating-translation {
	position: fixed;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 999;
	font-family: 'EB Garamond', Georgia, serif !important;
	font-style: italic;
	font-size: 2rem;
	color: #1d2951;
	white-space: nowrap;
}