/* ========================================
   FULL-PAGE HOME BACKGROUND
======================================== */

body.experimental-home {
  position: relative;
  isolation: isolate;

  min-height: 100vh;
  min-height: 100dvh;

  overflow-x: clip;
}

.experimental-home .site-container {
  background: transparent;
}

.home-background {
  position: fixed;
  inset: 0;
  z-index: -1;

  overflow: hidden;
  background: #333333;
  pointer-events: none;
}

.home-background img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: var(--image-position, 50% 50%);
  transform: scale(1.12);

  filter: grayscale(1) contrast(1.2) brightness(0.85);
}

.home-background::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  background: rgb(0 0 0 / 25%);
  pointer-events: none;
}


/* ========================================
   GRAIN FALLBACK
======================================== */

.home-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");

  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.35;

  pointer-events: none;
}

.home-background.effect-photocopy img,
.home-background.effect-risograph img,
.home-background.effect-grain img,
.home-background.effect-halftone img {
  filter: grayscale(1) contrast(1.2) brightness(0.85);
}


/* ========================================
   DIRECT SVG GRAIN FILTERS
======================================== */

.experimental-home:has(#home-film-grain) .home-background img {
  filter: url("#home-film-grain") !important;
}

.experimental-home:has(#home-soft-grain)
  .home-background.is-soft-halftone img {
  filter: url("#home-soft-grain") !important;
}

.experimental-home:has(#home-film-grain)
  .home-background::after {
  display: none;
}


/* ========================================
   OPTIONAL SOFT HALFTONE
======================================== */

.halftone-screen {
  position: absolute;
  inset: -5px;
  z-index: 1;

  display: none;

  background-image:
    radial-gradient(
      circle,
      rgb(0 0 0 / 85%) 0 0.8px,
      transparent 1.5px
    );

  background-size: 5px 5px;
  mix-blend-mode: multiply;

  filter: blur(0.55px);
  opacity: 0.45;

  pointer-events: none;
}

.home-background.is-soft-halftone .halftone-screen {
  display: block;
}


/* ========================================
   HOME BIOGRAPHY — REDUCED BLACK PADDING
======================================== */

.experimental-home #tab-home {
  display: block;
  position: relative;
  width: 100%;
}

.experimental-home #tab-home > .about-text {
  position: relative;
  z-index: 20;

  width: 50% !important;
  max-width: 50% !important;
  min-width: 0;

  margin: 0;
  padding: clamp(8px, 0.75vw, 14px) !important;

  color: #ffffff !important;
  background: #000000 !important;

  box-sizing: border-box;
}

.experimental-home #tab-home > .about-text p {
  margin: 0;

  color: #ffffff !important;

  font-family: "NudistaMedium", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;

  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;

  overflow-wrap: break-word;
  hyphens: auto;
}


/* ========================================
   HOME HEADERS — NO BACKGROUND PANELS
======================================== */

.experimental-home .site-header,
.experimental-home .site-header.dimmed {
  background: transparent !important;
}

.experimental-home .site-header .site-title {
  padding: 0 !important;

  color: #ffffff !important;
  background: transparent !important;
}

.experimental-home .top-nav {
  position: relative;
  z-index: 20;
}

.experimental-home .top-nav .nav-tab,
.experimental-home .top-nav .nav-tab:hover {
  color: #ffffff;
  background: transparent;
  opacity: 1;
}

.experimental-home .top-nav .nav-tab.active,
.experimental-home .top-nav .nav-tab[aria-current="page"] {
  color: #ffffff;
  background: transparent;

  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}

.experimental-home .nav-tab:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.experimental-home,
.experimental-home * {
  text-shadow: none !important;
}


/* ========================================
   RANDOM SHAPE OVERLAY
======================================== */

.shape-layer {
  position: absolute;
  inset: 0;
  z-index: 10;

  overflow: hidden;
  pointer-events: none;
}

.geometric-mark {
  position: absolute;
  display: block;

  margin: 0;
  padding: 0;

  background: #ffffff;

  border: 0 !important;
  box-shadow: none !important;
  outline: none;

  opacity: 1;
  text-decoration: none;
  pointer-events: none;
}


/* ========================================
   SMALLER SCREENS
======================================== */

@media (max-width: 600px) {
  .experimental-home #tab-home > .about-text {
    padding: 7px !important;
  }

  .experimental-home #tab-home > .about-text p {
    line-height: 1.35;
  }
}