/* Fonts */
@font-face {
  font-family: "Univers";
  src:
    url("Fonts/Univers 65 Bold.woff2") format("woff2"),
    url("Fonts/Univers 65 Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  /* Preload in HTML + improved JavaScript font loading should prevent jitter in Safari */
  font-display: swap;
}

@font-face {
  font-family: "Univers Regular";
  src:
    url("Fonts/Univers 55 Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Fluid base size (~15–20px) */
html{ 
  font-size: clamp(15px, 1.2vw + 10px, 20px);
  text-align:left;
  vertical-align:top;
}

/* Spacing + true left-third column */
:root{
  --gutter: clamp(20px, 4vw, 72px);
  --top:    var(--gutter);
  --bottom: clamp(24px, 6vh, 64px);
  --col:    clamp(320px, 30vw, 600px);
  
  /* Grid system - 12 column grid for easy positioning */
  /* Use grid-column: X / Y to span from column X to Y (1-based indexing) */
  /* Example: grid-column: 1 / 5 spans columns 1-4 (4 columns wide) */
  --grid-columns: 12;
  --grid-gap: clamp(10px, 2vw, 24px);
}

/* Base */
:root{
  --text-color: #000;
}

html, body{
  margin:0; padding:0; 
  height:100%;
  line-height:1.5;
  background:#fff; 
  color: var(--text-color, #000);
  font-family:"Univers", sans-serif; font-weight:700;
  transition: background-color 1.5s ease, color 0.8s ease;
}
body{
  min-height:100vh;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: auto 1fr auto;
  gap: var(--grid-gap);
  padding: var(--top) var(--gutter) var(--bottom) var(--gutter);
}

/* Main column */
main{ 
  grid-column: 1 / 5; /* Spans columns 1-4 (4 columns, roughly 1/3 of 12) */
  grid-row: 2; /* Middle row */
  width:fit-content; /* Fit content instead of fixed width */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4-column grid inside main */
  gap: var(--grid-gap);
  align-content: start;
  height: auto; /* Auto height instead of fixed 250px */
  min-height: 0; /* Allow collapse when empty */
}

/* Headline + copy */
h1{
  grid-column: 1 / -1; /* Spans all columns of main */
  margin:0 0 1rem 0;
  text-transform:uppercase;
  letter-spacing: clamp(0.04em, 0.1vw, 0.08em);
  font-size:14px;
  display: flex;
  flex-wrap: wrap;
  position: static;
}
p{ margin:0 0 1.2rem 0; font-size:1rem; }

.content-stack{
  grid-column: 1 / 7; /* Span 6 columns in desktop view */
  grid-row: 2;
  width: 100%; /* Fill the grid columns */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
}

p.no-widow{
  width: 100%; /* Fill available width in content-stack */
  max-width: 100%; /* Don't exceed parent */
  font-family: "Univers Regular", sans-serif;
  font-weight: 400;
  font-size:14px;
  margin-top: 19px;
  margin-bottom:1.2rem;
  display: flex;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  position: relative;
  z-index: 10;
}

p.no-widow.has-content {
  opacity: 1;
}

nav{ display:flex; flex-direction:column; gap:0.4rem; position: relative; z-index: 10; }
nav a{
  color:inherit; text-decoration:none; text-transform:uppercase;
  transition:color 0.3s ease;
  font-size:14px;
  position: relative;
  z-index: 10;
  display: inline-block; /* Make links fit their content width */
  width: fit-content; /* Ensure width matches text content */
}
nav a:hover{ text-decoration:none; } /* hover handled in JS */

.primary-nav{
  width:fit-content; /* Make nav fit content instead of 100% width */
  margin-top: 0;
}

/* Copyright */
.copyright{
  grid-column: 1 / 5; /* Aligns with main column */
  grid-row: 1; /* First row */
  align-self: start;
  width:fit-content; /* Fit content instead of full width */
  font-size:14px;
  text-transform:uppercase;
  transition:color 0.08s linear;
  will-change: color;
  position: relative;
  z-index: 10;
}

/* Disable transitions during mode changes to prevent flickering */
body.mode-changing {
  transition: background-color 1.5s ease !important; /* Keep background transition, disable color */
}
body.mode-changing .copyright,
body.mode-changing nav a,
body.mode-changing .projects-link {
  transition: none !important;
}

/* Logo */
#logo{
  position:absolute;
  left: auto;
  top: auto;
  height:clamp(56px, 8vh, 96px);
  width:auto;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  z-index: 100;
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  contain: layout style paint;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text jittering during animation */
body {
  transform: translateZ(0);
  will-change: background-color, color;
}

main, p, nav, .copyright, .content-stack, .bottom-stack {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: color;
  contain: layout style paint;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Dark mode text */
body.dark{ color:#fff; }

/* Small screens */
/* Mobile view - fill all columns */
@media (max-width: 768px){
  .content-stack{
    grid-column: 1 / 13; /* Span all 12 columns in mobile view */
  }
}

@media (max-width:380px){
  :root{ --col:92vw; }
}