/* FONTS */

/* Heading & Content */
@font-face {
	font-family: 'CommonSans';
	src: url('fonts/CommonSans-Regular.woff');
}

@font-face {
	font-family: 'CommonSansAlt';
	src: url('fonts/CommonSansAlt-Regular.woff');
}

/* Custom headings */
@font-face {
	font-family: 'Ortica';
	src: url('fonts/Ortica-Light.woff');
}

/* STYLES */

:root {
	--radius: 56px;
	--radius-sm: 7px;
}

/* PAGE TRANSITIONS — native cross-document View Transitions. Browsers
   that support it (Chrome/Edge) cross-fade between full page loads
   instead of a hard cut; everywhere else this is silently ignored and
   navigation works exactly as before. */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.5s;
	animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* REDUCED MOTION — collapse the site's larger positional movement
   (drawer slide, caption shift, hamburger icon, page cross-fade, the
   wobble hover filter) to near-instant instead of fully removing it,
   so everything still functions, it just stops visibly moving. */
@media (prefers-reduced-motion: reduce) {
	.menu,
	.menu-icon,
	.menu-icon-expanded,
	.menu-icon-bar,
	.work-caption-block:not(.work-caption-overlay),
	.work-caption-overlay.pos-bottom-left,
	.work-caption-overlay.pos-top-left {
		transition-duration: 0.01ms !important;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.01ms !important;
	}

	.link-text:hover {
		filter: none;
	}

	.hero_content_play:before {
		animation: none;
		opacity: 0.6;
	}

	.carousel-arrow.hint::after {
		animation: none;
		opacity: 0;
	}
}

body, html {
	font-family: CommonSansAlt;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	color: #222222;
	scroll-behavior: smooth;

}

/* GRAIN — a very faint, static film-grain layer over the whole site.
   pointer-events:none so it never blocks clicks; blend-mode overlay so it
   reads as texture rather than visible speckles. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.09;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 2.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

p, span, ol {
	font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

a, button {
  cursor: default;
}

.mainpage-wrapper {
  background: url('../assets/images/main-cover-1.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  min-width: 1080px;
}

.mainpage-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* MAINPAGE LEFTMENU */

.sidenav-main a {
	text-decoration: none;
	color: #ffffff;
	padding: 8px 8px 8px 32px;
 	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.04em;
	display: block;
	transition: 0.3s;
}

.link-text {
	display: inline-block;
	font-size: inherit;
	letter-spacing: inherit;
}

@media (hover: hover) and (pointer: fine) {
	.link-text:hover {
		filter: url(#nav-wobble);
	}
}

.sidenav-main {
	color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	overflow-x: hidden;
	min-height: 100%;
	width: 100%;
	padding: 2em 0;
	box-sizing: border-box;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 100%);
}

#site-maintitle {
	text-transform: uppercase;
	font-weight: 300;
	margin-bottom: 5.5em;
}

.menu-portfolio-link {
	margin-bottom: 5em;
}

.menu-portfolio-link a {
	text-transform: uppercase;
}

.menu-bio-link {
	text-transform: uppercase;
	font-weight: 300;
}

.sidenav-main .menu-bio-link a {
	font-size: 14px;
	padding-top: 2px;
	padding-bottom: 2px;
}

/* SIDEMENU */

.wrapper {
  position: relative;
  overflow-x: hidden;
}
.menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 26%;
  height: 100vh;
  display: flex;
  padding-left: 1em;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: transform .5s ease-in-out;
  transform: translateX(-100%);
  border-radius: 0 var(--radius) var(--radius) 0;
  will-change: transform;
}
.menu_active {
  transform: translateX(0%);
}

.menu-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.75em;
  /* matches .sidenav-main's top padding so the site title lands at the
     same height on screen whether you're on the home page or looking
     at this menu open over a project */
  padding-top: 2em;
  flex-direction: column;
}

.menu-list a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #ffffff;
  transition: opacity 0.25s ease, transform 0.25s ease;
}


.menu-list a.menu-portfolio-link {
	margin-bottom: 3em;
}

.menu-list a.menu-page-link {
	text-transform: uppercase;
	font-size: 14px;
}

.menu-icon {
  color: #818181;
  position: absolute;
  right: -35px;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 24px;
  /* transform, not right/top: those trigger layout on every frame */
  transition: transform 0.5s ease-in-out;
}

.menu-icon-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

/* once open, sits over the menu's own dark backdrop panel — bright
   white reads clearly there regardless of what page is underneath */
.menu_active .menu-icon {
  color: #ffffff;
}

.menu_active .menu-icon-bar:nth-child(1) {
  transform: translateX(-3px);
}

.menu_active .menu-icon-bar:nth-child(2) {
  transform: translateX(2.5px);
}

.menu_active .menu-icon-bar:nth-child(3) {
  transform: translateX(-2px);
}

/* desktop-only extra: a little preview wiggle on hover, before the
   menu is even open */
@media (hover: hover) and (pointer: fine) {
  /* darker, not white — white-on-hover disappeared entirely on the
     white CV/Bio pages; darker gains contrast there and still reads
     fine over photos */
  .menu-icon:hover {
    color: #333333;
  }

  .menu-icon:hover .menu-icon-bar:nth-child(1) {
    transform: translateX(-3px);
  }

  .menu-icon:hover .menu-icon-bar:nth-child(2) {
    transform: translateX(2.5px);
  }

  .menu-icon:hover .menu-icon-bar:nth-child(3) {
    transform: translateX(-2px);
  }
}

.menu-icon-expanded {
	/* translate replaces the old right/top position change, rotate is
	   the existing hamburger->X spin — combined so they animate as one
	   transform instead of fighting over which rule's transform wins */
	transform: translate(-71px, 12px) rotate(180deg);
	transition: transform .5s ease-in-out;
}

.site-copyright {
	position: fixed;
	bottom: 0.75em;
	right: 1em;
	font-size: 9px;
	letter-spacing: 0.03em;
	color: #fff;
	z-index: 50;
	pointer-events: none;
	white-space: nowrap;
}

.site-copyright span {
	font-size: inherit;
}

/* PASSWORD GATE (private/unlisted pages) */

.password-gate-content {
	display: none;
}

.password-gate {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.password-gate-box {
	max-width: 320px;
	width: 100%;
	padding: 2em;
	text-align: center;
	color: #fff;
}

.password-gate-box h1 {
	font-size: 22px;
	font-weight: 300;
	margin: 0 0 0.5em;
}

.password-gate-box p {
	font-size: 13px;
	opacity: 0.7;
	margin: 0 0 1.5em;
}

.password-gate-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.8em;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	font-size: 14px;
	margin-bottom: 1em;
	border-radius: var(--radius-sm);
}

.password-gate-submit {
	width: 100%;
	padding: 0.6em 0.8em;
	background: #fff;
	color: #000;
	border: none;
	cursor: pointer;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--radius-sm);
}

.password-gate-error {
	display: none;
	color: #f66;
	font-size: 12px;
	margin: 1em 0 0;
}

.password-gate-error.visible {
	display: block;
}

/* SECTION PAGES */

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background-color: #ffffff;
  transition: 0.5s;
  position: relative;
  margin: 0.7em 0;
  /*z-index: 0;*/
}

.section__first {
	margin-top: 0;

}





.hero,
.hero_content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hero {
  overflow: hidden;
  background-size: cover;
}

.hero_video,
.hero iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 9/16*100 = 56.25 */
  min-height: 100vh;
  object-fit: cover;
  min-width: 177.77vh; /* 16/9*100 = 177.77 */
}

.hero iframe {
  opacity: 0;
}

.hero iframe.loaded {
  opacity: 1;
}

.hero_content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero_content_title {
  color: #fff;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  line-height: 1.75rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.375em;
  font-weight: lighter;
  margin-bottom: 2.625rem;
}

.hero_content_play {
  display: block;
  position: relative;
  width: 4rem;
  height: 4rem;
  border: 2px solid transparent;
  border-radius: 50%;
  background: rgba(22, 22, 16, 0.75);
  text-indent: -9999px;
  transition: border-color 0.3s ease;
}

/* pulse ring lives on :before (GPU-only transform/opacity) instead of
   animating box-shadow directly, which repaints every frame */
.hero_content_play:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid hsla(24, 37%, 69%, 0.6);
  animation: pulse 3s infinite;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .hero_content_play:hover {
    border-color: #fff;
  }

  .hero_content_play:hover:before {
    animation: none;
    opacity: 0;
  }
}

.hero_content_play:after {
  content: "";
  display: block;
  position: absolute;
  top: 1rem;
  left: 1.425rem;
  width: 0;
  height: 0;
  border: 0;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 1rem 0 1rem 1.5rem;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}






/* HTRTA Page */

.section-title-htrta {
	font-size: 26px;
  -webkit-text-stroke: 0.4px #ffffff;
  -webkit-text-fill-color:transparent;
    position: absolute;
    left: 54%;
    width: 500px;
}

.section-caption-htrta {
	width: 250px;
    position: absolute;
    left: 70%;
    top: 52%;
}

.section-container {
	display: flex;
	justify-content: flex-start;
	gap: 3em;
	flex:  1 1 100%;
	color: #ffffff;
	padding: 0 25px;
	margin-bottom: 3em;
}

.box {
	flex: 1 1 0;
	width: auto;
	height: auto;
	color:  #222 !important;
	text-align: justify;
	hyphens: auto;
	line-height: 1.6;
}

/* a lone column of text shouldn't stretch full-width (unreadably long
   lines) — cap it to a comfortable reading measure */
.box:only-child {
	flex: none;
	width: 100%;
	max-width: 700px;
}

.box p {
	text-indent: 1.2em;
}

/* desktop: long-form text blocks used to be forced to a full 100vh
   section and vertically centered, which leaves huge empty gaps
   above/below short text. Size to content instead, top-aligned.
   (mobile already handles this separately, untouched here) */
@media screen and (min-width: 901px) {
  .section-text-block {
    height: auto;
    align-items: flex-start;
    padding: 6em 2em;
  }
}

#box-title {
	font-size: 14px;
	font-family: 'Ortica';
	margin-bottom: 1.2em;
}

#copyright {
	margin-top: 2em;
}

.formula {
	text-align: left;
}

#f1 img {
	width: 60%;
}
#f2 img {
	width: 65%;
}
#f3 img {
	width: 45%;
}
#f4 img {
	width: 90%;
}

/* ARCHIVE PAGE */

.section-title-archive {
	font-size: 26px;
  -webkit-text-stroke: 0.4px #ffffff;
  -webkit-text-fill-color:transparent;
    position: absolute;
    left: 52%;
    top: 5%;

}

.section-caption-archive {
	width: 250px;
    position: absolute;
    left: 70%;
    top: 15%;
}

/* STATION YE5 */

.section-title-ye5 {
	font-size: 26px;
  	-webkit-text-stroke: 0.4px #ffffff;
  	-webkit-text-fill-color:transparent;
    position: absolute;
    left: 57%;
    top: 60%;
    width: 500px;
}

.section-caption-ye5 {
	width: 250px;
    position: absolute;
    left: 66%;
    top: 71%;
}

.section-2-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex: 1 1 100%;
	color: #000000;
}

.box2 {
	height: auto;
}

.box2-first {
	margin-right: 0.5em;
}

.box2 img {
	width: 100%;
}

.box3 {
	flex: 1 1 0;
	margin-right: 0.5em;
}

.box4 {
	flex: 3.12 1 0;
}

.box3 img, .box4 img {
	width: 100%;
	height: auto;
}


/* XENOPHORA GAME */

.section-title-xeno {
	font-size: 26px;
  -webkit-text-stroke: 0.4px #222222;
  -webkit-text-fill-color:transparent;
    position: absolute;
    left: 60%;
    top: 10%;
}

.section-caption-xeno {
	color:  #222222;
	width: 250px;
    position: absolute;
    right: 12%;
    top: 22%;
}

.section-xeno-container {
	column-count: 2;
	width: 100%;
}

.box-xeno {
	display: block;
}

.box-xeno:nth-child(2) {
	margin-top: 10px;
}



.box-xeno img {
	width:100%;
}


/* MELANCHOLY */

.section-title-mela {
	font-size: 26px;
  -webkit-text-stroke: 0.4px #222222;
  -webkit-text-fill-color:transparent;
    position: absolute;
    left: 18%;
    top: 10%;
}

.section-caption-mela {
	color:  #222222;
	width: 250px;
    position: absolute;
    left: 18%;
    top: 22%;
}

.box2-mela img {
	max-width: 100%;
}


/* PERFORMANCE */

.section-title-perf {
	font-size: 26px;
  -webkit-text-stroke: 0.4px #ffffff;
  -webkit-text-fill-color:transparent;
    position: absolute;
    top: 8%;
    left: 46%;
    width: 500px;
}

.section-caption-perf {
	width: 220px;
    position: absolute;
    left: 66%;
    top: 20%;
}

.section-caption-perf-2 {
	width: 220px;
    position: absolute;
    left: 84%;
    top: 20%;
}

/* DEFAULT (any new work without custom-tuned positioning) */

.section__first {
	flex-direction: column;
}

.work-caption-block {
	background: #fff;
	color: #222;
	padding: 3em 1.5em;
	text-align: left;
	margin: 1px 0;
	align-self: stretch;
	box-sizing: border-box;
}

.work-caption-block h1 {
	font-size: clamp(2.75rem, 8vw, 5.5rem);
	font-weight: 300;
	max-width: 900px;
	margin: 0 0 0.4em;
	color: transparent;
	-webkit-text-stroke: 0.6px #222;
	text-stroke: 0.6px #222;
	line-height: 1;
}

/* keep the project title + caption clear of the menu panel as one
   unit instead of letting the menu cover them (or the title racing
   ahead of its own caption text) */
.work-caption-block:not(.work-caption-overlay) {
	transition: transform 0.5s ease-in-out;
}

.section_active .work-caption-block:not(.work-caption-overlay) {
	transform: translateX(calc(26vw + 2em));
}

.work-caption-block p {
	width: 100%;
	max-width: 500px;
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	font-family: 'Ortica';
}

.work-caption-block p + p {
	margin-top: 1em;
}

.work-caption-meta {
	font-family: CommonSansAlt !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 11px !important;
	opacity: 0.6;
	margin-bottom: 0.8em !important;
}

/* desktop only: some works can opt into showing the hero title/caption
   overlaid directly on the photo (no dark scrim) instead of the default
   block below it. Mobile always keeps the below-photo treatment. */
@media screen and (min-width: 901px) {
  .work-caption-overlay {
    position: absolute;
    background: transparent;
    max-width: 460px;
    padding: 0;
    margin: 0;
    align-self: auto;
  }

  .work-caption-overlay h1 {
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    -webkit-text-stroke: 0.6px #fff;
    text-stroke: 0.6px #fff;
  }

  .work-caption-overlay p {
    color: #fff;
  }

  .work-caption-overlay.pos-bottom-left {
    left: 3em;
    bottom: 3em;
  }

  .work-caption-overlay.pos-bottom-right {
    right: 3em;
    bottom: 3em;
    text-align: right;
  }

  .work-caption-overlay.pos-top-left {
    left: 3em;
    top: 3em;
  }

  .work-caption-overlay.pos-top-right {
    right: 3em;
    top: 3em;
    text-align: right;
  }

  .work-caption-overlay.pos-bottom-center {
    left: 50%;
    bottom: 3em;
    transform: translateX(-50%);
    text-align: center;
  }

  /* left-positioned overlays sit right where the menu panel opens —
     keep them clear of it instead of letting the menu cover them */
  .work-caption-overlay.pos-bottom-left,
  .work-caption-overlay.pos-top-left {
    transition: transform 0.5s ease-in-out;
  }

  .section_active .work-caption-overlay.pos-bottom-left,
  .section_active .work-caption-overlay.pos-top-left {
    transform: translateX(calc(26vw + 2em));
  }
}

/* CAROUSEL (video-still slideshow) — a full-screen photo slot, same as
   any other gallery image, that you can page through */

.carousel-section {
  position: relative;
  height: 100vh;
  padding: 0;
  margin: 1px 0;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.9s ease;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-slide-img {
  display: none;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6));
  z-index: 2;
  transition: color 0.25s ease;
}

/* an SVG chevron, not a font glyph — its viewBox is symmetric by
   construction, so it lands dead center every time, unlike "‹"/"›"
   whose ink sits off center depending on the font's own side bearings */
.carousel-arrow-glyph {
  display: block;
  width: 26px;
  height: 26px;
}

/* a soft radial scrim, always present, so the glyph keeps contrast even
   against a pale or low-contrast photo — much quieter than a hard-edged
   circle since it has no visible edge of its own */
.carousel-arrow::before {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-arrow:hover {
    color: rgba(255, 255, 255, 0.9);
  }
}

/* a single thin ring that fades out around the chevron, replaying each
   time the carousel actually scrolls into view (see the JS
   IntersectionObserver) — a quiet reminder the photo set is swipeable */
.carousel-arrow.hint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) scale(0.85);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  pointer-events: none;
  opacity: 0;
  animation: carouselArrowHint 2.4s ease-out 1;
}

@keyframes carouselArrowHint {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.carousel-arrow-prev {
  left: 8px;
}

.carousel-arrow-next {
  right: 8px;
}

.carousel-dots {
  position: absolute;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6em;
  z-index: 2;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.carousel-dot.active {
  background: #fff;
  transition: background-color 0.9s ease, transform 0.2s, opacity 0.2s;
}

/* sliding window: only a handful of dots around the active one show,
   the next ring shrinks, anything further is hidden entirely */
.carousel-dot.dot-edge {
  transform: scale(0.6);
  opacity: 0.5;
}

.carousel-dot.dot-far {
  display: none;
}

/* CV BIO  */

.section-cv {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 2em;
}

.box-cv {
	height: 300px;
	width: 40%;
	margin: 2em;
}

.box-cv ul, ol {
	padding-inline-start: 0;
}

.box-cv a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.box-bio {
	height: 300px;
	width: 25%;
	margin: 1em;
}

/* POPUP VIDEO FRAME */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}


.video-popup {
  width: 92vw;
  max-width: 1800px;
  margin: 0 auto;
}

.video-popup iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  display: block;
}


/* gallery photos (not the hero): a plain <img> at its natural aspect
   ratio instead of a cropped cover background, so nothing gets cut
   off — applies on both desktop and mobile. The hero photo keeps its
   full-bleed cover treatment on desktop (see below), only switching to
   this same uncropped treatment on mobile to avoid letterboxing. */
.bg-block-img {
  display: none;
}

.bg-block:not(.section__first) .bg-block-img {
  display: block;
  width: 100%;
  height: auto;
}

/* thin hairline separator between consecutive gallery/hero photos
   instead of the generic 0.7em section margin */
.bg-block,
.video-block,
.imagerow-block {
  margin: 1px 0;
}

/* full-bleed photo/video sections default to the page's white
   background until their (often large, sometimes externally-hosted —
   e.g. YouTube thumbnails) background-image finishes loading, which
   briefly looks like a blank gap rather than a page still loading.
   A dark placeholder reads as "loading" instead of "broken". */
.has-bg-image {
  /* !important because the inline `background: url(...)` shorthand
     each block sets resets background-color to transparent as part of
     the shorthand, which would otherwise cancel this out */
  background-color: #111 !important;
}

.section__first.bg-block {
  margin-top: 0;
}

.bg-block:not(.section__first) {
  background-image: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}

/* MOBILE CSS */

.section-htrta {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-attachment: scroll !important;
  background-size: cover !important;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

    .mainpage-wrapper {
      min-width: 100%;
      min-height: 100%;
      width: 100vw;
      height: 100vh;
    }

    .sidenav-main {
      width: 50%;
    }

    .sidenav-main a {
      font-size: 16px;
    }

    #site-maintitle {
      margin-bottom: 1em;
    }

    .section__htrta_mobile {
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      height: 32vh !important;
      width: 100%;
    }

}

/* ===================================================================
   RESPONSIVE REDESIGN — tablets & phones
   Viewport-width based (not device-width), so it applies consistently
   on real phones, resized desktop browsers and dev-tools emulation.
=================================================================== */

@media screen and (max-width: 900px) {

  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* -- generic section reset: stack content, never force a fixed
     desktop height that either clips or overlaps text -- */
  section {
    height: auto !important;
    min-height: 100vh !important;
    flex-direction: column !important;
    padding: 4em 1.25em !important;
    box-sizing: border-box;
    background-attachment: scroll !important;
  }

  .section__first {
    padding-top: 5em !important;
  }

  /* supersede the legacy device-width mobile query below: keep these
     strips a sensible height instead of a small image floating in a
     tall white box (background-size below matches .has-bg-image) */
  .section__htrta_mobile {
    height: 45vh !important;
    min-height: 45vh !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    padding: 0 !important;
  }

  /* -- full-bleed background photos: on narrow portrait phones
     'cover' crops way too aggressively (a landscape photo loses most
     of its frame). Show the whole photo instead, letterboxed. -- */
  .has-bg-image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #fff !important;
  }

  /* -- video blocks: match the plain gallery photos on mobile — shown
     at their natural 16:9 aspect ratio, uncropped, instead of forced
     to fill the full screen height (which crops the sides). -- */
  .video-block {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    padding: 0 !important;
    background-size: cover !important;
  }

  .video-block .hero_video,
  .video-block .hero iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* -- hero photo: cover-crop is fine full-bleed on desktop, but on
     narrow phones it crops way too aggressively. Switch to the same
     uncropped <img> treatment as the gallery, mobile only. -- */
  .section__first.bg-block {
    background-image: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
  }

  .section__first.bg-block .bg-block-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* -- carousel: on narrow phones, cover-cropping a screenshot loses too
     much of it. Show each slide at its natural size, same as the rest
     of the gallery, but still swipeable between slides. -- */
  .carousel-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* some slides have subtitles burned into the frame — keep the dots on
     the image, but pinned right at the very bottom edge so they sit
     below where the subtitle text usually sits */
  .carousel-dots {
    bottom: 0.5em;
  }

  .carousel-track {
    height: auto;
    align-items: flex-start;
  }

  .carousel-slide {
    height: auto;
    background-image: none !important;
  }

  .carousel-slide-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* -- hero titles/captions: every work has its own absolutely
     positioned title/caption tuned for wide desktop screens. Reset
     them all to stack in normal flow instead of overlapping. -- */
  .section-title-htrta,
  .section-title-archive,
  .section-title-ye5,
  .section-title-xeno,
  .section-title-mela,
  .section-title-perf,
  .section-caption-htrta,
  .section-caption-archive,
  .section-caption-ye5,
  .section-caption-xeno,
  .section-caption-mela,
  .section-caption-perf,
  .section-caption-perf-2 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 32em;
    margin: 0 auto 1em !important;
    padding: 0 0.5em;
    box-sizing: border-box;
    text-align: center;
  }

  .section-title-htrta h1,
  .section-title-archive h1,
  .section-title-ye5 h1,
  .section-title-xeno h1,
  .section-title-mela h1,
  .section-title-perf h1 {
    font-size: 7vw;
  }

  /* -- side navigation: 20% of a phone screen is unusable -- */
  .menu {
    width: 78% !important;
    max-width: 22em;
    padding-left: 1.5em !important;
  }

  .menu_active {
    height: 92vh !important;
    overflow-y: auto !important;
    padding-bottom: 2em;
  }

  .menu-list {
    width: 100%;
    /* matches .sidenav-main's 3em top padding on mobile (below) */
    padding-top: 3em;
  }

  .menu-list a {
    font-size: 17px !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    padding-right: 1.5em !important;
    box-sizing: border-box;
  }

  .menu-list a.menu-page-link {
    font-size: 14px !important;
  }

  /* -- home page side menu: avoid the fixed 1080px desktop canvas -- */
  .mainpage-wrapper {
    min-width: 100% !important;
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    background-attachment: scroll !important;
    background-position: center center !important;
  }

  .sidenav-main {
    position: static !important;
    width: 100% !important;
    min-height: 100vh !important;
    padding: 3em 1.5em;
    box-sizing: border-box;
  }

  .sidenav-main a {
    padding-left: 0 !important;
  }

  /* -- image rows (2-3 photos side by side on desktop) -- */
  .section-2-container,
  .section-xeno-container {
    flex-direction: column !important;
    column-count: 1 !important;
    width: 100% !important;
    height: auto !important;
  }

  .box2,
  .box3,
  .box4,
  .box2-mela,
  .box-xeno {
    width: 100% !important;
    flex: none !important;
    margin: 0 0 1em 0 !important;
  }

  .box2 img,
  .box3 img,
  .box4 img,
  .box2-mela img,
  .box-xeno img {
    width: 100% !important;
    height: auto !important;
  }

  /* -- single large image (e.g. HTRA_3) -- */
  .section-htrta > div > img {
    height: auto !important;
    max-height: 70vh !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* -- long-form text sections -- */
  .section-container {
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* short text (e.g. Antinomy's single merged column) shouldn't be
     forced to fill a full screen, leaving dead space below it -- */
  .section-text-block {
    min-height: 0 !important;
    height: auto !important;
  }

  .section-text-block .section-container {
    margin-bottom: 0 !important;
  }

  .box:last-child {
    margin-bottom: 0 !important;
  }

  .box {
    flex: none !important;
    width: 100% !important;
    margin-bottom: 2.5em !important;
  }

  #box-title {
    margin-bottom: 1.5em !important;
  }

  .box p,
  .box span,
  .box ol,
  .box-cv p,
  .box-cv ol,
  .box-bio p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* -- CV / Bio / Contacts -- */
  .section-cv {
    flex-direction: column !important;
    height: auto !important;
    padding: 5em 1.5em 3em !important;
  }

  .box-cv,
  .box-bio {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 2.5em 0 !important;
  }

  /* -- video popup -- */
  .video-popup {
    width: 92%;
  }
}

@media screen and (max-width: 480px) {
  .section-title-htrta h1,
  .section-title-archive h1,
  .section-title-ye5 h1,
  .section-title-xeno h1,
  .section-title-mela h1,
  .section-title-perf h1 {
    font-size: 8vw;
  }

  section {
    padding: 3em 1em !important;
  }
}