:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  /* Source colour for mix-blend-difference chrome (bar, project list): white, so it
     inverts to white on the dark page and flips over light images. */
  --ink: #ffffff;

  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Fluid type — single size across the whole row, no hierarchy */
  --fs-body: clamp(15px, 1.9vw, 18px);
  --fs-brand: var(--fs-body);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none !important;  /* always the custom + — never pointer/text/others */
}

/* Custom cursor: a "+" that inverts against the page, rotating into an "×"
   over anything clickable. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor__inner {
  position: absolute;
  inset: 0;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cursor__inner::before,
.cursor__inner::after {
  content: "";
  position: absolute;
  background: #fff;
}
.cursor__inner::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.cursor__inner::after  { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
.cursor.is-x .cursor__inner { transform: rotate(45deg); }

html,
body {
  min-height: 100%;
}

/* Theme colour on the root too, so any safe-area / overscroll strip the body
   doesn't reach shows the page colour instead of a black band. */
html { background-color: var(--bg); }

body {
  position: relative;
  background-color: var(--bg);   /* pure black, no gradient */
  color: var(--fg);
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   Full-screen blurred background image (revealed on hover)
   ------------------------------------------------------------ */
.bg {
  position: fixed;
  inset: -15vmax;                 /* oversize so the blur has no hard edges */
  z-index: 0;
  pointer-events: none;
}

/* Each layer holds one image; cross-fading the two keeps the
   transition consistent — both from black and image-to-image. */
.bg__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(80px) saturate(1.15);    /* soft, even blur — a touch lighter than before */
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 0.45s ease;   /* fast, smooth swap between the blurred project photos */
}

.bg__layer.is-visible {
  opacity: 0.65;   /* lower opacity → darker image (black shows through) */
}

/* The GiuLLM cover is a wordmark, not a photo — blur it a lot less so "Ask GiuLLM"
   stays readable as a background (the heavy 100px blur would erase it). */
.bg__layer--soft { filter: blur(48px) saturate(1.15); }

/* Leaving for a project page: fade the text out and bring the (still
   blurred) image to full opacity, so it continues into the next page. */
body.is-leaving .bg__layer.is-visible {
  opacity: 1;
  transition: opacity 0.5s ease;
}

body.is-leaving .bar,
body.is-leaving .layout {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ------------------------------------------------------------
   Layout (mobile-first): projects only, simple 2-column flow
   ------------------------------------------------------------ */
.layout {
  position: relative;
  z-index: 1;
  /* Invert the text colour against whatever sits behind it
     (black background → white; blurred image → its inverse). */
  mix-blend-mode: difference;
  display: grid;
  /* Mobile: a single vertical list (its background image swaps in as you scroll
     — see script.js). */
  grid-template-columns: 1fr;
  column-gap: clamp(16px, 4vw, 28px);
  row-gap: clamp(12px, 3vw, 24px);
  align-content: start;
  /* font-size set so the `0.6em` centre offset scales with the body text (it
     otherwise defaulted to 16px and the first line missed the centre line). */
  font-size: var(--fs-body);
  padding: clamp(120px, 26vh, 220px) clamp(20px, 8vw, 40px) 55vh;
}

/* ------------------------------------------------------------
   Fixed bar — name (left) + nav (right), vertically centred.
   Shared 1:1 with the project page so logo + nav never shift
   position between pages.
   ------------------------------------------------------------ */
.bar {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(20px, 2.2vw, 36px);
  font-size: var(--fs-body);
  mix-blend-mode: difference;
  pointer-events: none;   /* clicks pass through the empty middle to the projects */
}

.logo,
.nav,
.nav__link {
  pointer-events: auto;   /* …but the links themselves stay clickable */
}

.logo {
  color: var(--ink);   /* inside the mix-blend-difference bar */
  text-decoration: none;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.nav {
  display: flex;
  gap: clamp(20px, 3vw, 48px);   /* must match project.css .nav exactly */
}

.nav__link {
  color: var(--ink);   /* inside the mix-blend-difference bar */
  text-decoration: none;
  font-weight: 400;
}

/* ------------------------------------------------------------
   Project entries
   ------------------------------------------------------------ */
.project {
  display: flex;
  flex-direction: column;
  color: var(--ink);   /* inside the mix-blend-difference layout */
  text-decoration: none;
  font-size: var(--fs-body);
  line-height: 1.15;
  font-weight: 400;
  /* Reveal: start hidden + nudged left, slide in (staggered by column) */
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.projects-in .project {
  opacity: 1;
  transform: translateX(0);
}

.project__year,
.project__title,
.project__cat {
  display: block;
}

/* ============================================================
   DESKTOP — projects as a centred 5-column block (≥ 1024px)
   The fixed bar flanks it: name at the left edge · nav at the right.
   Generous side padding keeps the projects clear of the bar.
   ============================================================ */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: repeat(5, 1fr);
    column-gap: clamp(26px, 2.7vw, 54px);
    row-gap: clamp(40px, 6vh, 80px);
    align-content: start;           /* first row aligns with the bar, flows down */
    min-height: 100vh;
    max-width: 1500px;
    margin-inline: auto;
    /* Top padding puts the first project row on the same line as the
       logo/nav (vertically centred at 50%), then rows flow downward. */
    padding: calc(50vh - 0.6em) clamp(170px, 18vw, 360px) clamp(40px, 8vh, 100px);
  }

  /* Projects fill the 5 columns; logo/nav are no longer in the grid */
  .lc2 { grid-column: 1; }
  .lc3 { grid-column: 2; }
  .lc4 { grid-column: 3; }
  .lc5 { grid-column: 4; }
  .lc6 { grid-column: 5; }
  .lr1 { grid-row: 1; }
  .lr2 { grid-row: 2; }
}

/* Wider screens → more columns (and a wider cap to match), so the projects spread to
   fill the extra room and the rows stay full and aligned instead of staying a fixed
   5-wide block boxed in the middle. */
@media (min-width: 1600px) {
  .layout {
    grid-template-columns: repeat(6, 1fr);
    max-width: 1760px;
  }
}
@media (min-width: 2000px) {
  .layout {
    grid-template-columns: repeat(7, 1fr);
    max-width: 2100px;
  }
}

/* ============================================================
   MOBILE / TABLET — bar collapses to a top row (≤ 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  /* Drop the bar's translateY(-50%) so its fixed children (logo, nav) anchor to the
     viewport, not the transformed bar — otherwise the logo gets trapped mid-screen. */
  .bar { transform: none; }

  /* On mobile only the nav bar animates — the project list just appears (no slide). */
  .project,
  body.projects-in .project { opacity: 1; transform: none; transition: none; }

  /* GiuliaRinaldo moves to the top-left corner; only the current "Index" link shows,
     pinned on the centre line where the logo used to sit (the projects align to it). */
  .logo {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + clamp(20px, 4vh, 34px));
    left: clamp(20px, 2.2vw, 36px);
    transform: none;
  }
  .nav {
    display: flex;
    position: fixed;
    /* Same vertical anchor as the project list's padding-top, so "Index" lines up
       exactly with the first project. (Uses `top`, not translateY(-50%) — bar-slide.js
       sets an inline translateX that would otherwise wipe out the translateY.) */
    top: calc(50vh - 0.6em);
    left: clamp(20px, 2.2vw, 36px);
  }
  .nav__link:not(.is-active) { display: none; }   /* show only "Index" */
  .layout {
    /* Right-aligned (logo stays pinned on the left), with the first project's line
       centred on GiuliaRinaldo's line — the bar is centred at 50vh, so a 0.6em lift
       puts the project's first line baseline exactly on the logo's. */
    justify-items: end;
    text-align: right;
    /* More breathing room (black space) between projects on mobile. */
    row-gap: clamp(30px, 8vw, 52px);
    /* Bottom padding ≈ half the screen so the LAST project (Assisi) comes to rest on
       the centre line when fully scrolled — it can't climb above it. The side inset
       MATCHES the logo / Menu inset so the projects' right edge lines up with "Menu". */
    padding: calc(50vh - 0.6em) clamp(20px, 2.2vw, 36px) calc(50vh - 0.6em);
  }
  .project { align-items: flex-end; }
}


::selection { background: var(--fg); color: var(--bg); }
::-moz-selection { background: var(--fg); color: var(--bg); }

@media (max-width: 760px) {
  :root { --fs-body: clamp(17px, 4.8vw, 20px); }
}

@media (max-width: 760px) {
  /* White page, black text. The whole chrome (logo, Index, projects, Menu) is
     mix-blend-difference, so a white background flips it all to black automatically —
     and we drop the blurred project photos entirely. */
  html, body { background: #fff; }
  .bg { display: none; }

  /* "Index" stays on the centre line (the first project aligns to it) but is now just a
     label — the top-right "Menu" handles navigation, so it no longer acts as a link. */
  .bar .nav__link.is-active { pointer-events: none; }
}

/* Mobile: the logo stays pinned to the left (base .bar space-between + hidden nav),
   matching every other page. */