/* ==========================================================
   PLAY HERE: colours and fonts for the whole site
   Colours are written light-dark(LIGHT MODE, DARK MODE).
   ========================================================== */
:root {
  --bg:        light-dark(#ffffff, #0c1a3a);  /* page background: white / navy */
  --text:      light-dark(#14234b, #ffffff);  /* main text: dark blue / white */
  --muted:     light-dark(#5a6a8c, #a7b4d0);  /* years, captions, nav links */
  --rule:      light-dark(#dfe4ee, #22335c);  /* thin divider lines */
  --glitch-a:  #e0306b;                       /* glitch colour flashes */
  --glitch-b:  #1fb5d6;
  --viewer-bg: #081226;                       /* full-screen image viewer */

  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Quantico", "Open Sans", system-ui, sans-serif;
  --font-name: "Coral Pixels", "Quantico", monospace;  /* your name, top left */
  --font-size: 1rem;

  --measure: 46rem;      /* max width of text */
  --wide: 110rem;        /* max width of the page (about 1760px) */
  --gutter: clamp(1.25rem, 4vw, 4rem);  /* space at the sides of the page */

  color-scheme: light dark;   /* follow the visitor's device... */
}
:root[data-theme="light"] { color-scheme: light; }  /* ...unless they've */
:root[data-theme="dark"]  { color-scheme: dark; }   /* used the toggle   */

/* ========================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--gutter);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.6;
}

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }

img { display: block; max-width: 100%; height: auto; }

/* Header & footer */
.site-header,
.site-footer,
main {
  max-width: var(--wide);
  margin: 0 auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: 2rem 0 3rem;
}

.site-name {
  font-family: var(--font-name);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: pre; /* keep the space between names */
}

/* Glitch: every letter glitches now and then, each on its own timing
   (set per letter in _includes/base.njk), so only one or two move at once.
   g0 = jump out of line, g1 = colour flash, g2 = jump the other way. */
.site-name span { display: inline-block; animation: none var(--dur) steps(1) infinite var(--delay); }
.site-name .g0 { animation-name: glitch-jump; }
.site-name .g1 { animation-name: glitch-flash; }
.site-name .g2 { animation-name: glitch-jump; animation-direction: reverse; }

@keyframes glitch-jump {
  0%, 91%, 100% { transform: none; text-shadow: none; }
  92% { transform: translate(2px, -3px); text-shadow: -2px 0 var(--glitch-a), 2px 0 var(--glitch-b); }
  94% { transform: translate(-3px, 2px) skewX(-12deg); }
  96% { transform: translate(1px, 0); opacity: 0.4; }
  97% { transform: none; opacity: 1; }
}

@keyframes glitch-flash {
  0%, 86%, 100% { color: inherit; opacity: 1; text-shadow: none; }
  87% { color: var(--glitch-a); transform: translateY(2px); }
  88% { opacity: 0; }
  90% { color: var(--glitch-b); opacity: 1; text-shadow: 3px 0 var(--glitch-a); transform: translateX(-2px); }
  92% { color: inherit; text-shadow: none; transform: none; }
}

.site-name:hover span { animation-duration: 1.2s; } /* glitches faster on hover */

/* Coral Pixels draws in its own colours. In dark mode we swap in a
   brightened version of them so the name reads on navy. */
@font-palette-values --coral-bright {
  font-family: "Coral Pixels";
  base-palette: 0;
  override-colors:
    0 #fddfc126,
    1 #f9d9a43d,
    2 #bce3fe4f,
    3 #bfdffb24,
    4 #fdffc01c,
    5 #fec5b2ff,
    6 #bfe5feff,
    7 #fee0bfff,
    8 #f5baa826,
    9 #b5d2feff,
    10 #a7b9f24a,
    11 #c2f0feff,
    12 #ffebc2ff,
    13 #d6a7fdff,
    14 #c6febe4d,
    15 #c2fefe1f,
    16 #fbbba1ff,
    17 #a899fc59,
    18 #f4ffaeff,
    19 #c3fafe4f,
    20 #fef9c342,
    21 #fedfbf61,
    22 #fdb0ad69,
    23 #feefc2ff,
    24 #feceb2ff,
    25 #a5f5feff,
    26 #fff9c175,
    27 #b6d0ffff,
    28 #fedabcff,
    29 #b8fee7ff,
    30 #caa3feff,
    31 #c7c7c7ff;
}

:root[data-theme="dark"] .site-name { font-palette: --coral-bright; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-name { font-palette: --coral-bright; }
}

@media (prefers-reduced-motion: reduce) {
  .site-name span { animation: none !important; }
}

nav { display: flex; gap: 1.5rem; }
nav a { text-decoration: none; color: var(--muted); }
nav a:hover, nav a[aria-current] { color: var(--text); }

.theme-toggle {
  border: 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle::before { content: "☾"; }                       /* in light mode: offer dark */
:root[data-theme="dark"] .theme-toggle::before { content: "☀"; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle::before { content: "☀"; }
}

.site-footer .available { margin: 0 0 0.35rem; color: var(--text); }

.site-footer {
  margin-top: 5rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Home: works listed by year */
/* Home */
/* Home: intro on the left, list of works in a centred column */
:root {
  --thumb: 30rem;                  /* thumbnail size on the home page */
  --info: 22rem;                   /* width of the title/medium column */
  --space: 4rem;                   /* space either side of the image */
  --home-width: calc(6rem + var(--space) + var(--thumb) + var(--space) + var(--info));
}
.year { max-width: var(--home-width); margin-inline: auto; }   /* works: centred */
.intro { margin-bottom: 6rem; }                                  /* intro: left, under your name */
.intro p { max-width: 52rem; }
.intro p { margin: 0; }
.intro p + p { margin-top: 0.75rem; }
.intro p:first-child {             /* the one-line summary */
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

/* "Coming soon" box under the intro */
.coming-soon {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--muted);
}
.coming-soon h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glitch-a);
}
.coming-soon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.coming-soon li { font-family: var(--font-heading); }

/* Credits line under the intro: "A · B · C" */
.credits {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  color: var(--muted);
  font-size: 0.9375rem;
}
.credits li + li::before { content: "·"; margin: 0 0.6em; }
@media (max-width: 40rem) {        /* phones: one credit per line */
  .credits { display: block; }
  .credits li + li::before { content: none; }
  .credits li + li { margin-top: 0.2rem; }
}

.year {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem var(--space);
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.year h2 {
  margin: 0;
  font-size: inherit;
  font-weight: normal;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.works { list-style: none; margin: 0; padding: 0; }
.works li + li { margin-top: 1.75rem; }
.works a {
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, var(--info));
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0.15rem var(--space);
  text-decoration: none;
}

/* Thumbnails of each work's cover image */

.works a > picture,
.works a > .thumb { grid-row: span 2; }
.works .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;             /* landscape; try 4 / 3, 1 for square, or remove for natural shapes */
  object-fit: cover;
  background: var(--rule);         /* shown for works with no cover image */
  transition: opacity 0.2s;
}
.works a:hover .thumb { opacity: 0.85; }
.works .title { font-family: var(--font-heading); font-size: 1.125rem; }
.works .medium { color: var(--muted); }

@media (max-width: 55rem) {        /* tablets and phones: stack year, image, title */
  .year { grid-template-columns: 1fr; gap: 0.25rem; }
  .works a { grid-template-columns: 1fr; }            /* phones: image full width, text below */
  .works a > picture, .works a > .thumb { grid-row: auto; margin-bottom: 0.5rem; }
}

/* Draft markers (only ever seen in the local preview) */
.draft-label {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--glitch-a);
}
.draft-banner {
  max-width: var(--wide);
  margin: -1.5rem auto 2rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--glitch-a);
  color: var(--glitch-a);
  font-size: 0.9375rem;
}

/* Elsewhere: each link on its own line, description underneath,
   and a little glitching arrow to show it goes off-site */
.link-list ul { list-style: none; padding: 0; margin-top: 2.5rem; }
.link-list li { color: var(--muted); }
.page.link-list li + li { margin-top: 2rem; }
.link-list li a {
  display: table;                  /* own line, so the description sits underneath */
  margin-bottom: 0.2rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
}
.link-list li a::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
  color: var(--muted);
  animation: glitch-jump 7s steps(1) infinite;
}
/* each arrow glitches on its own timing */
.link-list li:nth-child(1) a::after { animation-duration: 7.3s; animation-delay: -1.1s; }
.link-list li:nth-child(2) a::after { animation-duration: 9.7s; animation-delay: -4.2s; }
.link-list li:nth-child(3) a::after { animation-duration: 6.1s; animation-delay: -2.9s; }
.link-list li:nth-child(4) a::after { animation-duration: 8.3s; animation-delay: -6.6s; }
.link-list li:nth-child(5) a::after { animation-duration: 10.9s; animation-delay: -3.3s; }
.link-list li:nth-child(6) a::after { animation-duration: 7.9s; animation-delay: -8.1s; }
.link-list li:nth-child(7) a::after { animation-duration: 6.7s; animation-delay: -5.4s; }
.link-list li:nth-child(8) a::after { animation-duration: 11.3s; animation-delay: -9.2s; }
.link-list li:nth-child(9) a::after { animation-duration: 8.9s; animation-delay: -0.4s; }
.link-list li:nth-child(10) a::after { animation-duration: 9.1s; animation-delay: -7.7s; }
.link-list li a:hover { color: var(--text); }
.link-list li a:hover::after {
  color: var(--glitch-a);
  animation: link-glitch 0.45s steps(1) infinite;
}
@keyframes link-glitch {
  0%   { transform: translate(2px, -2px); text-shadow: -2px 0 var(--glitch-b); }
  33%  { transform: translate(4px, -4px); text-shadow: 2px 0 var(--glitch-b), -1px 0 var(--glitch-a); }
  66%  { transform: translate(1px, -3px) skewX(-10deg); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .link-list li a::after, .link-list li a:hover::after { animation: none; }
}

/* Pages & works */
h1, h2 { font-family: var(--font-heading); }
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; margin: 0 0 1.5rem; }
h2 { font-size: 1.125rem; font-weight: 400; margin: 2.5rem 0 0.75rem; }

.page { max-width: var(--measure); }
.page ul { padding-left: 1.1rem; }
.page li + li { margin-top: 0.35rem; }

.work header { max-width: var(--measure); }
.work h1 { margin-bottom: 0.25rem; }
.work .meta { color: var(--muted); margin: 0 0 2rem; }
.work .cover { margin: 0 0 2rem; }
.work .cover img { max-height: 85vh; width: auto; margin-inline: auto; } /* tall portraits stay on screen */
.work .body { max-width: var(--measure); }
.work .body img { margin: 2rem 0; max-width: min(var(--wide), calc(100vw - 2 * var(--gutter))); }
.work .image-credits {
  max-width: var(--measure);
  margin-top: 3rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}
.work .image-credits span {
  margin-right: 0.5em;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.work .back { margin-top: 3rem; }
.work .back a { color: var(--muted); text-decoration: none; }

/* Big image, video and gallery grid */
.work button[data-open] {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.video { margin: 2rem 0; }
.video video { width: 100%; background: #000; }
.video .embed { position: relative; aspect-ratio: 16 / 9; }
.video .embed.audio { aspect-ratio: auto; height: 166px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

figcaption { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; }

.gallery {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1;       /* square thumbnails; try 4 / 5 or remove for natural shapes */
  object-fit: cover;
  transition: opacity 0.2s;
}
.gallery button:hover img { opacity: 0.85; }

@media (max-width: 30rem) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

/* Full-screen image viewer */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--viewer-bg);
  color: #eee;
}
.lightbox::backdrop { background: var(--viewer-bg); }
.lightbox:focus, .slides:focus { outline: none; }

.slides {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 3.5rem 1rem 2.5rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slide picture { display: contents; }
.slide img { max-height: 100%; min-height: 0; width: auto; object-fit: contain; }
.slide figcaption { color: #aaa; text-align: center; }

.lightbox button {
  position: fixed;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  opacity: 0.7;
}
.lightbox button:hover { opacity: 1; }
.lightbox .close { top: 0; right: 0; font-size: 2rem; line-height: 1; }
.lightbox .prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox .counter {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1rem 1.25rem;
  color: #aaa;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

@media (hover: none) {
  .lightbox .prev, .lightbox .next { display: none; } /* swipe instead on phones */
}