@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap");

/* ---------- reset ---------- */
* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
html, body { height: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; outline: none; }
img, svg { display: block; -webkit-user-drag: none; user-select: none; }

/* ---------- theme tokens ---------- */
:root {
  --pad: 16px;        /* edge padding */
  --gap: 16px;        /* column gap */
  --cols: 6;          /* grid columns (mobile) */
  --ease: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  --color: #000;      /* dynamic — changed on hover in mono mode */
  --background: #ccc;
  --mono: #ccc;       /* mono resting background */
}

body {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  background: var(--background);
  color: var(--color);
  transition: color .4s var(--ease), background .4s var(--ease);
  overflow-x: hidden;
}
body.mono  { background: var(--background); color: var(--color); }
body.light { background: #fff; color: #000; }
body.init  { transition: none; }
body.init a.color { transition: none; }

/* one column width helper (content area = 100vw - 2*pad) */
/* col = (100vw - 2*pad - (cols-1)*gap) / cols */

h1, h2, h3, p, a, span, li {
  font-size: 14px; line-height: 22px; letter-spacing: -0.01em;
  font-weight: 500; -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
header {
  position: relative;
  margin: var(--pad) var(--pad) 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}
header > a.js-home { white-space: nowrap; }

header > ul.index {
  position: absolute;
  top: 40px;
  left: 0;
  display: none;            /* shown on projects pages */
}
header > ul.index > li { display: flex; gap: var(--gap); white-space: nowrap; }
header ul.index .sort-label { opacity: .45; }       /* non-interactive label */
/* each toggle shows only the *other* option */
header ul.index a { display: none; }

header > ul.nav { position: absolute; right: 28px; display: flex; gap: var(--gap); }

header > a.color {
  display: block; width: 18px; height: 18px;
  will-change: color;
  transition: color .5s var(--ease);
}
header > a.color svg { display: none; width: 100%; height: 100%; }
body.light header > a.color .icon-sun     { display: block; }
body.mono  header > a.color .icon-rainbow  { display: block; }

/* ---------- state visibility ---------- */
header ul.nav li:nth-of-type(2) { display: none; }       /* Close hidden by default */
/* Info link hidden for now — section, content and routing kept for future use.
   Delete this rule to bring it back. */
header ul.nav li:has(.js-info) { display: none; }

body.projects header ul.index { display: flex; gap: 28px; }
body.projects.by-category header ul.index > li:nth-of-type(1) a[data-group="category"] { display: block; }
body.projects.by-client   header ul.index > li:nth-of-type(1) a[data-group="client"]   { display: block; }
body.projects.grid header ul.index > li:nth-of-type(2) a[data-view="grid"] { display: block; }
body.projects.list header ul.index > li:nth-of-type(2) a[data-view="list"] { display: block; }

body.project header ul.index,
body.info    header ul.index { display: none; }
body.project header ul.nav li:nth-of-type(1),
body.info    header ul.nav li:nth-of-type(1) { display: none; }
body.project header ul.nav li:nth-of-type(2),
body.info    header ul.nav li:nth-of-type(2) { display: block; }

main { transition: opacity .25s var(--ease); }

/* ===================================================================
   PROJECTS — list (Index) view
   =================================================================== */
body.projects #projects {
  margin: calc(50vh - 48px) var(--pad) 50vh
          calc((100vw - 2*var(--pad) - 5*var(--gap)) / 6 + 32px);
}
#projects nav a {
  display: block;
}
#projects nav a > span span:nth-of-type(2) { opacity: .5; }   /* category dim */
#projects nav a > span span { display: inline; }

/* hover highlight sweep — a soft block of the project's colour wipes in behind the text */
body.list #projects nav a > span:not(.thumb) {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 6px;
}
body.list #projects nav a > span:not(.thumb)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 0;
  background: color-mix(in srgb, var(--c, #000) 16%, transparent);
  transition: width .35s var(--ease);
}
body.list #projects nav a:hover > span:not(.thumb)::before { width: 100%; }
/* in the rainbow (mono) theme the page floods to the project colour on hover,
   so the sweep uses a translucent light band to stay visible on top of it */
body.mono.list #projects nav a > span:not(.thumb)::before { background: rgba(255, 255, 255, 0.22); }

/* hidden inline media in list mode */
body.list #projects nav a img,
body.list #projects nav a svg { display: none; }

/* hover preview — floating fixed image (desktop) */
body.list #projects nav a:hover img,
body.list #projects nav a:hover svg {
  display: block;
  position: fixed;
  pointer-events: none;
  aspect-ratio: 1;
  object-fit: contain;
  width: calc(((100vw - 2*var(--pad) - 5*var(--gap)) / 6) * 4 + 3*var(--gap));
  bottom: 64px;
  left: calc((100vw - 2*var(--pad) - 5*var(--gap)) / 6 + 32px);
  z-index: 4;
}

/* index accordion — grouped by category / client */
#projects .group-head { cursor: pointer; display: inline-block; }
#projects .group-items { display: none; }
#projects .group.open > .group-items { display: block; }
body.list #projects .group-items a { padding-left: 16px; }   /* indent project rows */

/* ===================================================================
   PROJECTS — grid view (3 columns)
   =================================================================== */
body.projects.grid #projects {
  margin: 160px calc((100vw - 2*var(--pad) - 5*var(--gap)) / 6 + 32px) 160px
                 calc((100vw - 2*var(--pad) - 5*var(--gap)) / 6 + 32px);
}
body.grid #projects nav {
  display: flex; flex-wrap: wrap; gap: 48px;
}
body.grid #projects nav a { width: calc((100% - 96px) / 3); margin-bottom: 60px; }
/* square frame keeps the grid uniform; the image is contained at its true ratio
   inside, so the <img> element matches the painted image (hover only fires on it) */
#projects .thumb { display: contents; }
body.grid #projects .thumb {
  position: relative; display: block;          /* definite square, content can't stretch it */
  width: 100%; aspect-ratio: 1; margin-bottom: 1em;
}
body.grid #projects .thumb img,
body.grid #projects .thumb svg {
  position: absolute; inset: 0; margin: auto;  /* contained + centered in the square */
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
}
/* spotlight hover — dim all others */
body.grid #projects nav a { transition: opacity .3s var(--ease); }
body.grid #projects nav.faded a { opacity: .05; }
body.grid #projects nav.faded a.spot { opacity: 1; }

/* ===================================================================
   SINGLE PROJECT — full-screen horizontal slides
   =================================================================== */
body.project main { position: absolute; inset: 0; top: 0; }
#project { width: 100vw; height: 100vh; }

#project-slides {
  height: 100%; white-space: nowrap; font-size: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
#project-slides::-webkit-scrollbar { display: none; }
#project-slides.left  { cursor: w-resize; }
#project-slides.right { cursor: e-resize; }
#project-slides.disableSnapping { scroll-snap-type: none; }
#project-slides > div {
  scroll-snap-align: center;
  display: inline-flex; vertical-align: top;
  width: 100vw; height: 100%;
  justify-content: center; align-items: center;
}
#project-slides > div > div {
  display: flex; justify-content: center; align-items: center;
  width: calc((100vw - 2*var(--pad) - 5*var(--gap)) / 6 * 4 + 3*var(--gap));
  height: calc(100% - 240px);
}
#project-slides > div.bleed > div { width: 100%; height: 100%; }
#project-slides > div > div img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* project name, centered along the bottom */
#project-info {
  position: absolute; z-index: 2; bottom: 0; left: 0; right: 0;
  margin: var(--pad);
  text-align: center;
}
#project-info h2 span:nth-of-type(2) { opacity: .5; }

/* ===================================================================
   INFO
   =================================================================== */
body.info #info {
  padding: 120px calc((100vw - 2*var(--pad) - 5*var(--gap)) / 6 + 32px) 120px var(--pad);
  display: flex; flex-direction: column; gap: 120px;
}
body.info #info ul li.label { opacity: .5; }

/* loading dim */
body.loading main { opacity: .25; }

/* ===================================================================
   responsive  — 12-col system on desktop
   =================================================================== */
@media screen and (min-width: 760px) {
  h1,h2,h3,p,a,span,li { font-size: 18px; line-height: 28px; }
}
@media screen and (min-width: 1020px) {
  :root { --pad: 24px; --gap: 24px; }
  h1,h2,h3,p,a,span,li { font-size: 24px; line-height: 36px; }

  header { margin: 24px; }
  header > a.color { width: 22px; height: 22px; }
  header > ul.nav { right: 44px; }
  header > ul.index { top: 0; left: calc(((100vw - 2*24px - 11*24px) / 12) * 4 + 4*24px + 24px); }

  /* list */
  body.projects #projects {
    margin: 160px 24px 160px calc(((100vw - 2*24px - 11*24px) / 12) + 48px);
  }
  body.list #projects nav a:hover img,
  body.list #projects nav a:hover svg {
    width: calc(((100vw - 2*24px - 11*24px) / 12) * 4 + 3*24px);
    top: 212px; bottom: auto; left: auto;
    right: calc(((100vw - 2*24px - 11*24px) / 12) + 48px);
  }

  /* grid */
  body.projects.grid #projects {
    margin: 160px calc(((100vw - 2*24px - 11*24px) / 12) + 48px) 160px;
  }
  body.grid #projects nav { gap: calc((100vw - 312px) / 12 + 48px); }
  body.grid #projects nav a {
    width: calc((100% - (((100vw - 312px) / 12 + 48px)) * 2) / 3);
  }

  #project-info { margin: 24px; }

  body.info #info {
    padding: 160px calc(((100vw - 2*24px - 11*24px) / 12) * 5 + 4*24px + 48px)
             160px calc(((100vw - 2*24px - 11*24px) / 12) + 48px);
  }
}

/* ===================================================================
   responsive — mobile grid: full-bleed single column
   =================================================================== */
@media screen and (max-width: 759px) {
  /* drop the reserved-column side margins; start near the top */
  body.projects.grid #projects { margin: 40px 0 80px; }
  body.grid #projects nav { gap: 56px; }
  body.grid #projects nav a { width: 100%; margin-bottom: 0; }

  /* let each image fill the width at its true height (no square frame) */
  body.grid #projects .thumb { aspect-ratio: auto; margin-bottom: .75em; }
  body.grid #projects .thumb img,
  body.grid #projects .thumb svg {
    position: static;
    width: 100%; height: auto;
    max-width: none; max-height: none;
  }

  /* card title sits inside the edge-to-edge card, so pad it back in */
  body.grid #projects nav a > span:not(.thumb) { display: block; padding: 0 var(--pad); }

  /* list view: top-align (drop the desktop vertical-centering) and indent
     to the edge; larger, finger-friendly rows */
  body.projects.list #projects { margin: 40px var(--pad) 80px; }
  body.list #projects .group-head,
  body.list #projects nav a { font-size: 18px; line-height: 2.4; }

  /* no hover preview on touch — a tap fires :hover for a frame and flashes
     the floating image, so keep it hidden */
  body.list #projects nav a:hover img,
  body.list #projects nav a:hover svg { display: none; }

  /* single project: use the full width and most of the height (the desktop
     layout boxes the image to ~2/3 width, leaving big margins on a phone).
     contain still prevents any cropping. The reserved height keeps the
     (centered) image clear of the header above and the title below, even
     when the title wraps to 2–3 lines. */
  #project-slides > div > div { width: 100%; height: calc(100% - 168px); }
}