/* --------------------
   FONTS
   -------------------- */
@font-face { font-family: 'Inconsolata-Regular'; src: url('Inconsolata-Regular.ttf'); }
@font-face { font-family: 'Inter_28pt-Medium'; src: url('Inter_28pt-Medium.ttf'); }

/* Hide scrollbars (optional) */
::-webkit-scrollbar { display: none; }

/* ============ BASE ============ */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0; /* Removed 10px to remove visible white border when scrolling */
  font-family: Inconsolata-Regular, sans-serif;
  font-size: 12px;
  color: black;
  line-height: 1.5;
  background: white;
  padding-left: 10px; 
  padding-right: 10px;

}

/* Paragraph styling */
p {
  margin: 0 0 10px 0;
  word-break: break-word;
  hyphens: auto;
  text-wrap: pretty;
   background:  #f6f6f6;
  border-radius: 10px;
  padding: 10px;
}



/* Headings */
h1, h2, h3 {
  font-family: Inter_28pt-Medium, sans-serif;
  font-weight: 500;
  margin: 0 0 10px 0;
}



/* Desktop: keep columns scrolling, not page */
@media (min-width: 769px) {
  body { overflow: hidden; }
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: none; /* removes blue border highlight on mobile Safari */
}


/* Hidden text blocks */
.more-text {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-5px);
  transition:
    opacity 0.6s ease,
    max-height 0.8s cubic-bezier(0.25, 1, 0.3, 1),
    transform 0.6s ease;
  margin-top: 6px;
  will-change: opacity, max-height, transform;
}

.expandable.open + .more-text {
  opacity: 1;
  max-height: 1600px;
  transform: translateY(0);
}


/* Expandable toggles */
.expandable {
  cursor: pointer;
  user-select: none;
}

@media (min-width: 769px) {
  .container {
    display: flex;
    gap: 20px;
    height: 100vh;
    width: 100%;

    overflow-x: hidden; /* prevents horizontal scroll */
    align-items: stretch;
    
  }

 /* 20% / 55% / 25% of (100% - total gaps) */
  .col-1 { flex: 0 0 calc((100% - 40px) * 0.20); max-width: calc((100% - 40px) * 0.20); }
  .col-2 { flex: 0 0 calc((100% - 40px) * 0.55); max-width: calc((100% - 40px) * 0.55); }
  .col-3 { flex: 0 0 calc((100% - 40px) * 0.25); max-width: calc((100% - 40px) * 0.25); }

  .column {
    padding-top: 15px;
    padding-bottom: 15px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
   
  }
}

.spacer { height: 10px; }

/* Images */
figure {
  margin: 0 0 14px 0;
}
figcaption {
  font-size: 10px;
  line-height: 1.4;
  opacity: 0.8;
  margin-top: 4px;
}

/* Images basic style */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* ============ GLOBAL IMAGE FADE-IN ============ */
img {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ TEXT REVEAL ============ */
p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

p.visible {
  opacity: 1;
  transform: translateY(0);
}


.split-text .left,
.split-text .right {
  display: inline-block;
}
.expandable {
  position: relative;
  cursor: default;
}

/* keep your existing split layout */
.split-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* hidden text */
.more-text {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 6px; /* small gap below the line */
}

/* visible when expanded */
.expandable.open .more-text {
  opacity: 1;
  max-height: 500px; /* or however tall your content might be */
}

/* the clickable + sign */
.toggle {
  cursor: pointer;
  font-weight: bold;

  user-select: none;
  transition: transform 0.3s ease;
}

/* rotate + to × when open */
.expandable.open .toggle {
  transform: rotate(45deg);
} 
/* ===== INVERT LENS CURSOR (only on desktop/hover devices) ===== */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
}

/* The lens */
#invert-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;

  border-radius: 50%;
  border: 0px solid #000;
  background: rgba(0,0,0,0);

  /* invert beneath the circle */
  backdrop-filter: invert(1) hue-rotate(180deg) saturate(115%);
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg) saturate(115%);

  opacity: 0;
  transition: opacity .15s ease, width .12s ease, height .12s ease;
}

/* Grow when over links/buttons (class toggled by JS) */
#invert-cursor.over {
  width: 28px;
  height: 28px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #invert-cursor { transition: none; }
}

/* Hide the lens entirely on touch devices to avoid fixed+filter jank */
@media (hover: none), (pointer: coarse) {
  #invert-cursor { display: none !important; }
}

/* On desktop, hide default cursor everywhere */
@media (hover: hover) and (pointer: fine) {
  *, a, button, input, textarea, select {
    cursor: none !important;
  }
}

/* Center hero */
.hero {
  min-height: 32vh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Small caps look for some labels */
.smallcaps { 
  font-variant: small-caps;
  letter-spacing: 0.02em;
}

/* Footer spacing */
footer {
  padding: 20px 0 60px;
  text-align: center;
  opacity: 0.8;
  font-size: 11px;
}

/* ====== MEDIA QUERIES ====== */

/* --- MOBILE SCROLL SAFETY --- */
@media (max-width: 768px) {
  html, body {
    height: auto !important;
    overflow: auto !important;          /* page scrolls */
  }
  .container {
    height: auto !important;            /* no 100vh lock on mobile */
    min-height: 100dvh;                 /* still fill screen */
  }
  .column {
    max-height: none !important;
    overflow: visible !important;       /* columns don't trap scroll */
  }
}

/* Stack columns on mobile */
@media (max-width: 768px) {
  .container {
    display: block;
    padding-top: 8px;
  }
  .column {
    
    padding-bottom: 10px;
  }
  .col-title {
    position: static;
    padding: 4px 0 8px 0;
  }
  .split-text {
    display: block;
  }
}

/* Larger screens */
@media (min-width: 1200px) {
  body { font-size: 13px; }
}

/* ===== OPT-INS ===== */

/* Slightly smoother text rendering */
body, p, .col-title { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}

/* Keep GPU hints focused to avoid layer explosion on mobile */
img, p { will-change: opacity, transform; }

/* Relax will-change on mobile to reduce layers */
@media (max-width: 768px) {
  img, p { will-change: auto; }
}
.split-text {
  display: flex;
  justify-content: space-between; /* pushes left and right apart */
  align-items: center;
  width: 100%;
}

.split-text .left,
.split-text .right {
  display: inline-block;
}

.expandable,
.expandable a {
  text-decoration: none;
}

.expandable:hover,
.expandable a:hover {
  text-decoration: none;
}

@keyframes tremble {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

/* Apply on hover */
p:hover {
  animation: tremble 0.20S ease-in-out;
  
}

img {
    pointer-events: none;
}


/* === Circle text-recolor on <mark> (grey base, white lens) === */
mark {
  display: inline-block;
  position: relative;
  background-color: #f6f6f6;
  color: #f6f6f6;
  border-radius: 10px;
  z-index: 0;
  contain: paint;                 /* isolates painting, reduces overdraw */
}

mark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  color: black;
  pointer-events: none;
  clip-path: circle(var(--mark-lens, 12px) at var(--mx, -999px) var(--my, -999px));
  -webkit-clip-path: circle(var(--mark-lens, 12px) at var(--mx, -999px) var(--my, -999px));
  white-space: pre-wrap;
  line-height: inherit;
  /* Remove the transition to avoid easing artifacts during scroll */
  /* transition: clip-path 40ms linear;  -- delete this line if you had it */
  will-change: clip-path;         /* hint to the compositor */
}