/* 1. Set full height and flex layout on body */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Ensures body spans full height of screen */

}

body {
  display: flex;
  flex-direction: column;
  /* Stacks content vertically */
  min-height: 100vh;
  /* Keeps container at least 100% of viewport height */
  font-size: 12pt;
  line-height: 1.2em;
  font-family: 'typewcond_regular', sans-serif;


  margin: 0;
  position: relative;

}

/* 2. Tell <main> to grow and absorb extra vertical space */
main {
  flex: 1;
  /* Pushes the footer down automatically */
  display: flex;
  flex-direction: column;
}

canvas {
  display: block;
}

@font-face {
  font-family: "dichtmy";
  src: url("/fonts/dichtmy.ttf");
}

@font-face {
  font-family: "typewcond_regular";
  src: url("/fonts/typewcond_regular.otf");
}

@font-face {
  font-family: "typewcond_bold";
  src: url("/fonts/typewcond_bold.otf");
}

@font-face {
  font-family: "typewcond_demi";
  src: url("/fonts/typewcond_demi.otf");
}

/* Layout container setup — expands vertically to fill <main> */
.container {
  display: flex;
  gap: 2rem;
  flex: 1;
  align-items: stretch;
}

.left-col {
  flex: 2;
}

/* 1. Grid forces a 2-column layout that grows downwards endlessly */
.left-col .image-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  /* Always 2 equal columns per row */
  gap: 5px;
  /* 10px spacing between all cells */
  width: 92%;
  /* Keeps the grid centered in left-col */
  margin: 0 auto;

}

/* 2. Individual Container Sizing */
.left-col .image-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: block;

  background-image: url('/images/index/header_bg.png');
  background-position: center;
  background-size: 120% 120%;
  background-repeat: no-repeat;
  padding: 20px;
}

/* 3. Force uniform square shapes for all grid items */
.left-col .image-container img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* 4. Text overlay with Glow Effect */
.left-col .overlay-text {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  color: #FFB5DD;
  box-sizing: border-box;
  padding: 20px;
  font-family: 'dichtmy';
  font-size: 22px;
  text-decoration: none;

  opacity: 0;
  transition: opacity 0.3s ease;
  background-image: url('/images/index/header_bg.png');
  background-position: center;
  background-size: 120% 120%;
  background-repeat: no-repeat;

  /* Glow Animation */
  animation: glow 1s ease-in-out infinite alternate;
}

.left-col .overlay-text span {
  padding: 20px;
  box-sizing: border-box;
  color: #FFB5C7;
  text-decoration: none;
}

/* Reveal overlay on container hover */
.left-col .image-container:hover .overlay-text {
  opacity: 1;
}

/* Glowing Keyframe Definition */
@keyframes glow {
  from {
    text-shadow: 0 0 10px #FFB5DD, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }

  to {
    text-shadow: 0 0 20px #FFB5DD, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

/* Right column takes full remaining vertical space */
.right-col {
  flex: 3;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

/* ==========================================
   DEFAULT / 2-MODEL PAGE STYLES (UNTOUCHED)
   ========================================== */
.one-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.models-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 1rem;
}

.model-slot {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.model-slot canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ==========================================
   SINGLE-MODEL PAGE OVERRIDES
   ========================================== */
.one-col.single-model-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 20vh; /* Keeps vertical centering space */
  flex: 1;
}

.single-model-layout .models-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%; /* Restricts container to 50% of the screen width */
  max-width: 50vw;
  margin: 0 auto; /* Keeps horizontal centering locked */
  height: 100%;
  min-height: 500px;
  gap: 0;
}

.single-model-layout .model-slot {
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
}

/* Reset grid positioning rules for single model layout */
.single-model-layout #model-container-top {
  grid-column: auto;
  grid-row: auto;
}

/* Top model spans both columns and centers */

#model-container-top {
  grid-column: 1 / span 2;
  grid-row: 1;
}

#model-container-bottom {
  grid-column: 1 / span 2;
  grid-row: 2;
}

#model-container-left {
  grid-column: 1;
  grid-row: 2;
}

#model-container-right {
  grid-column: 2;
  grid-row: 2;
}

.model-slot canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Three.js container fills the entire vertical height of right column */

#three-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}



/* Make the canvas render responsively inside #three-container */

#three-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}



.site-header {
  display: grid;
  /* 3 columns: Left empty space, Middle heading, Right nav links */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
}

/* Ensure the heading takes the exact middle column */
.site-header h1 {
  grid-column: 2;
  text-align: center;
  margin: 0;
}

/* Push navigation links to the far right of the 3rd column */
.nav-links {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 2.5rem;
  font-size: 12pt;
  font-family: 'dichtmy';
  margin-right: 2rem;
  color: #336DFF;
  margin-bottom: 0.5rem;
  background-image: url('/images/index/header_bg.png');
  background-position: center;
  background-size: 120% 100%;
  background-repeat: no-repeat;
  padding: 20px;
  padding-left: 60px;
  padding-right: 60px;
}

/* Style individual links */
.nav-links a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  text-transform: uppercase;
  transition: transform 0.2s ease, text-decoration 0.2s ease;
}

.nav-links a:hover {
  text-decoration: underline;
  transform: scale(1.15);
}

.writing-links {
  grid-column: 1;
  justify-self: center;
  display: flex;
  gap: 2.5rem;
  font-size: 12pt;
  font-family: 'dichtmy';
  margin-right: 2rem;
  color: #336DFF;
  margin-bottom: 0.5rem;
  background-image: url('/images/index/header_bg.png');
  background-position: center;
  background-size: 120% 100%;
  background-repeat: no-repeat;
  padding: 20px;
  padding-left: 60px;
  padding-right: 60px;
}

/* Style individual links */
.writing-links a {
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  text-transform: uppercase;
  transition: transform 0.2s ease, text-decoration 0.2s ease;
}

.writing-links a:hover {
  text-decoration: underline;
  transform: scale(1.15);
}

footer {
  margin-top: 1rem;
  margin-right: 2rem;
  font-size: 15pt;
  font-family: 'dichtmy', sans-serif;
  padding-bottom: 1rem;
}

footer .footer-nav {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

footer a {
  text-decoration: none;
  color: #336DFF;
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 40pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: center;
  line-height: 1.1em;
  margin-top: 0.1em;
  background-position: center;
  background-size: 120% 100%;
  background-repeat: no-repeat;
  padding: 30px;
  padding-left: 60px;
  padding-right: 60px;
  color: white;

  animation: glow 1s ease-in-out infinite alternate;

}

h1 a {
  color: inherit;
  /* Keeps the #4A72FF text color from the h1 */
  text-decoration: none;
  display: inline-block;
  /* Required for transform: scale() to work on <a> */
  transition: transform 0.2s ease, text-decoration 0.2s ease;
}

/* Hover state targeting the <a> inside <h1> */
h1 a:hover {

  transform: scale(1.15);
  /* Scales the link text smoothly */
}

h1.clog {
  background: none !important;
  font-size: 36pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: center;
  padding-left: 60px;
  padding-right: 60px;
  color: white;
  margin-bottom: 0;
  line-height: 1;
  padding-top: 50;
  padding-bottom: 0;
  animation: none;
}


h2 {
  font-size: 25pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: center;
  line-height: 1.1em;
  margin-top: 0.5em;
  color: #4A72FF;
  margin-bottom: 2rem;
  background-image: url('/images/index/header_bg.png');
  background-position: center;
  background-size: 120% 100%;
  background-repeat: no-repeat;
  padding: 20px;
  padding-left: 60px;
  padding-right: 60px;
}

h2.slime {
  font-size: 25pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: center;
  line-height: 1.1em;
  margin-top: 0.5em;
  color: rgb(217, 250, 92);
  margin-bottom: 2rem;
  padding: 20px;
  padding-left: 60px;
  padding-right: 60px;
  background: none;
}

h2.writing {
  font-size: 25pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: center;
  line-height: 1.1em;
  margin-top: 0.5em;
  color: black;
  margin-bottom: 2rem;
  padding: 20px;
  padding-left: 60px;
  padding-right: 60px;
  background: none;
}

h2.video {
  font-size: 25pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: center;
  line-height: 1.1em;
  margin-top: 0.5em;
  color: white;
  margin-bottom: 2rem;
  padding: 20px;
  padding-left: 60px;
  padding-right: 60px;
  background: none;
}

h2.poem {
   font-size: 20pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: left;
  line-height: 1.1em;
  margin-top: 0.5em;
  color: black;
  margin-bottom: 0;
  padding: 20px;
  padding-left:4rem;
  padding-right: 60px;
  background: none;
}


h3 {
  font-size: 15pt;
  font-family: 'dichtmy';
  font-weight: normal;
  text-align: left;
  line-height: 1.1em;
  margin-top: 0em;
  margin-bottom: 0.6em;
  margin-left: 2em;
  margin-right: 2em;
  color: #4A72FF;
  line-height: 1;
}

h3.clog {
  font-size: 15pt;
  font-family: 'dichtmy';
  font-weight: normal;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2em;
  color: white;
}

h3.video {
  font-size: 15pt;
  font-family: 'dichtmy';
  font-weight: normal;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2em;
  color: white;
}

h4 {
  font-size: 12pt;
  font-family: 'dichtmy';
  font-weight: normal;
  text-align: left;
  margin-left: 2em;
  margin-right: 2em;
  color: black;
  margin-bottom: 0;
}

h4.poem {
  font-size: 12pt;
  font-family: 'typewcond_regular';
  font-weight: normal;
  text-align: left;
  margin-left:4rem;
  margin-right: 4cqi;
  color: black;
  margin-bottom: 0;
  margin-top: 0;
}

h4.video {
  font-size: 12pt;
  font-family: 'typewcond_regular';
  font-weight: normal;
  text-align: left;
  margin-left:4rem;
  margin-right: 4cqi;
  color: white;
  margin-bottom: 0;
  margin-top: 0;
}

h4.writing {
  font-size: 12pt;
  font-family: 'dichtmy';
  font-weight: bold;
  text-align: left;
  margin-left:10rem;
  margin-right: 4cqi;
  color: black;
  margin-bottom: 0;
  margin-top: 0;
}

p {
  font-size: 13pt;
  font-family: 'typewcond_regular';
  font-weight: normal;
  text-align: left;
  color: black;
  margin-right: 2em;
  margin-left: 2em;
  margin-top: 0;
}

p.clog{
  margin-left:5rem;
  margin-right:10rem;
  color:white;
}

a:visited {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  transform: scale(1.15);
  transition: transform 0.2s ease, text-decoration 0.2s ease;
}

.wobble-text span.char {
  display: inline-block;
  will-change: transform;
  cursor: default;
}

/* Wobble animation loop */
@keyframes continuous-wobble {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-2px) rotate(-4deg);
  }

  50% {
    transform: translateY(1px) rotate(3deg);
  }

  75% {
    transform: translateY(-1px) rotate(-2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Activated sticky wobble class */
.wobble-text span.char.wobbling {
  animation: continuous-wobble 0.4s ease-in-out infinite !important;
}

.video-container {
  position: relative;
  width: 40%;
  margin: 0 auto;
  /* Centers the container horizontally */
  padding-bottom: 30%;
  /* Maintains 16:9 ratio */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-container-wistia {
  width: 60%;
  margin: 0 auto;
}

#slime-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /* sits behind everything */
  pointer-events: none;
  /* lets clicks/links pass through to content above */
}

#slime-bg canvas {
  display: block;
}

.img-magnify-container {
  position: relative;
  display: inline-block;
}

.img-magnify-container img {
  display: block;
  width: 100%;
  height: auto;
}

.magnifier-glass {
  position: absolute;

  border-radius: 50%;
  cursor: none;
  width: 280px;
  height: 280px;
  display: none;
  pointer-events: none;
  background-repeat: no-repeat;
  z-index: 20;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.slime-col {
  flex: 4;
}

/* 1. Grid forces a 2-column layout that grows downwards endlessly */

.slime-col .image-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 92%;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: block;
  border-color: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.slime-col .image-row img {
  width: 100%;
  height: auto;
  display: block;
  border-color: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.slime-col .image-row img:nth-child(6) {
  grid-column: 4;
}

.thick-col {
  flex: 2;
}

/* Container for the 2-column layout */
.thick-col .image-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns inside the container */
  gap: 10px;
  width: calc(60% + 10px);               /* Two 30% columns + 10px gap */
  max-width: 100%;
  margin: 0 auto;                        /* Centers the grid container on the page */
  padding: 20px;
  box-sizing: border-box;
}

/* Images fill their respective grid columns completely */
.thick-col .image-row img {
  width: 100%;
  height: auto;
  display: block;
  border-color: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
}

.clog-col .image-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 92%;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: block;
}

.clog-col .image-row img {
  width: 100%;
  height: auto;
  display: block;
}

.clog {
  margin-left: 5rem;
  margin-right: 10rem;
  color: white;
  font-family: 'typewcond_regular', sans-serif;
  font-size: 12pt;
  line-height: 1.2em;
}

.eve {
   margin-left: 5rem;
  margin-right: 5rem;
  color: white;
  font-family: 'typewcond_regular', sans-serif;
  font-size: 12pt;
  line-height: 1.2em;
}

.centered-image-frame {
  width: 35%;
  margin: 0 auto;
  text-align: center;
}
.centered-image-frame img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   MOBILE OPTIMISATION
   Everything below only applies at 768px and narrower.
   No rule above this point has been changed — desktop layout
   is untouched.
   ========================================================== */

@media (max-width: 768px) {

   .centered-image-frame {
    width: 90%;
  }

  /* --- Stack the main left-col / right-col layout --- */
  .container {
    flex-direction: column;
  }

  .left-col,
  .right-col,
  .one-col {
    flex: 1 1 auto;
    width: 100%;
  }

  /* --- Collapse every image grid to a single column --- */
  .left-col .image-row,
  .slime-col .image-row,
  .thick-col .image-row,
  .clog-col .image-row {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  /* This image was pinned to column 4 for the desktop 4-col grid;
     reset it so it doesn't try to create extra columns on mobile */
  .slime-col .image-row img:nth-child(6) {
    grid-column: auto;
  }

  /* --- 3D model layout: let it use the full width on mobile
     instead of the 50vw desktop restriction --- */
  .single-model-layout .models-grid {
    width: 100%;
    max-width: 100%;
  }

  /* .right-col's height:100% has nothing to measure against once
     it's stacked below .left-col, so without this the model
     viewer(s) can collapse to almost no height on mobile */
  .models-grid {
    min-height: 320px;
  }

  .model-slot {
    min-height: 320px;
  }

  /* --- Header, nav, and footer: fit the screen width instead of
     using desktop's 3-column grid + large fixed paddings --- */
  .site-header {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  .site-header h1,
  .site-header .nav-links,
  .site-header .writing-links {
    grid-column: 1;
    justify-self: center;
  }

  .nav-links,
  .writing-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-right: 0;
    padding: 12px 16px;
    font-size: 9pt;
    box-sizing: border-box;
  }

  h1 {
    width: 100%;
    font-size: 22pt;
    padding: 15px 16px;
    box-sizing: border-box;
  }

  h1.clog {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  footer {
    width: 100%;
    margin-right: 0;
    padding: 0 1rem 1rem;
    box-sizing: border-box;
  }

  footer .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* --- Single images sitting in their own div (not a grid) go
     full width instead of shrinking to the image's native size --- */
  .img-magnify-container {
    display: block;
    width: 100%;
  }

  .img-magnify-container img {
    width: 100%;
    height: auto;
  }

  /* --- video.html: let embeds and captions use the full page
     width instead of desktop's narrow centred columns --- */
  .video-container-wistia {
    width: 100%;
  }

  .video-container {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 at full width */
  }

  h2.video,
  h3.video,
  h4.video {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* --- .clog page titles (THE-CLOG, thick-space-manifesto,
     transforming-thick-space): the generic .clog class carries a
     large asymmetric margin (5rem/10rem) meant for body text, which
     was bleeding through onto these headings, pushing them off-centre
     and causing horizontal scroll. Reset it here. --- */
  h1.clog,
  h3.clog,
  h4.clog {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* THE-CLOG.html has two captions with large hardcoded desktop
     left-padding (700px / 750px) meant to indent them beside a wide
     desktop image gallery; neutralise on mobile so they don't push
     the page into horizontal scroll */
  h3.clog[style*="padding-left:700px"],
  p[style*="padding-left:750px"] {
    padding-left: 1rem !important;
    box-sizing: border-box;
  }

  /* --- EVELUTION.html: .eve carries a fixed 5rem margin on both
     sides meant for desktop, squeezing the paragraph into a narrow
     column on mobile. Let it use the full width. --- */
  .eve {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  h2.slime {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  h3,
  h4 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* EVELUTION.html (and its poem page) contain <pre><code> "code
     poem" blocks; <pre> doesn't wrap by default, which was blowing
     the page width out. pre-wrap keeps the deliberate spacing but
     lets it wrap instead of forcing horizontal scroll. */
  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Safety net: this page's glitch-poem markup uses literal
     "<You>"-style pseudo-tags that browsers partially parse as real
     (unstyled) elements, which can throw off inline layout in ways
     that are impractical to hunt down individually. Clip any stray
     overflow so it can never create horizontal scroll on mobile.
     Scoped to <main> rather than html/body: the fixed background
     canvas (#slime-bg) is a sibling of <main>, not a descendant, so
     this can't affect it — overflow:hidden on html/body is a known
     way to break position:fixed on iOS Safari, which is what
     happened here the first time round. */
  main {
    overflow-x: clip;
    max-width: 100vw;
  }

  /* --- writing.html: centre the list of poem links on mobile
     (desktop keeps its left-heavy margin-left:10rem layout) --- */
  h4.writing {
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* --- writing/*.html poem pages: give the title and body equal
     padding on both sides on mobile instead of desktop's uneven
     left-heavy padding/margin (h2.poem: 4rem left vs 60px right;
     h4.poem: 4rem left vs ~0 right) --- */
  h2.poem {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
  }

  h4.poem {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}