/* Shared sketchbook look for the gallery and the studio.
   Layout: an open sketchbook. Pixel studies sit on toothy paper inside wobbly pencil frames;
   finished ones are in colour, unfinished ones are graphite silhouettes. Dark theme is a black
   sketchbook with chalk and gel pen. Pages using .study frames include the #rough-a/b/c SVG filters. */
:root {
  --paper: #f1efe9;
  --sheet: #fdfcf9;
  --ink: #2f2e2c;
  --graphite: #6c6a65;
  --line: rgba(47, 46, 44, .34);
  --marker: #0287c4;
  --marker-a: .45;
  --marker-blend: multiply;
  --tape: rgba(222, 205, 160, .7);
  --shadow: rgba(47, 46, 44, .16);
  --danger: #b4372b;
  --silhouette: brightness(0) opacity(.4);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: "Delicious Handrawn", "Bradley Hand", "Segoe Print", cursive;
  --font-hand: "Kalam", "Bradley Hand", "Segoe Print", cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1d1c1a; --sheet: #f4f1ea; --ink: #ebe6db; --graphite: #a29d93; --line: rgba(235, 230, 219, .3);
    --marker: #0287c4; --marker-a: .6; --marker-blend: normal; --tape: rgba(214, 196, 150, .55);
    --shadow: rgba(0, 0, 0, .45); --danger: #f08a7e; --silhouette: brightness(0) invert(1) opacity(.32);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1d1c1a; --sheet: #f4f1ea; --ink: #ebe6db; --graphite: #a29d93; --line: rgba(235, 230, 219, .3);
  --marker: #0287c4; --marker-a: .6; --marker-blend: normal; --tape: rgba(214, 196, 150, .55);
  --shadow: rgba(0, 0, 0, .45); --danger: #f08a7e; --silhouette: brightness(0) invert(1) opacity(.32);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grain), var(--paper);
  color: var(--ink);
  font: 300 17px/1.5 var(--font-hand);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; border-radius: 4px; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Highlighter swipe */
.hl { position: relative; isolation: isolate; }
.hl::before {
  content: ""; position: absolute; z-index: -1; left: -6px; right: -8px; top: 38%; bottom: 4%;
  background: var(--marker); opacity: var(--marker-a); mix-blend-mode: var(--marker-blend);
  border-radius: 3px 10px 4px 8px; transform: rotate(-1.6deg) skewX(-8deg);
}

/* ---------- Generations ---------- */
.gens { overflow-x: auto; scrollbar-width: none; margin-top: 28px; }
.gens ol { list-style: none; margin: 0; padding: 6px 2px 10px; display: flex; gap: 6px 30px; }
.gen { white-space: nowrap; font: 400 28px/1 var(--font-display); }
.gen small { font: 300 15px/1 var(--font-hand); color: var(--graphite); margin-left: 4px; }
.gen:disabled { cursor: default; color: var(--graphite); opacity: .55; }
.gen:not(:disabled):not([aria-selected="true"]):hover { transform: rotate(-2deg); }

/* ---------- Page heading ---------- */
.heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding-block: 28px 18px; }
.heading h2 { font: 400 40px/1 var(--font-display); margin: 0; }
.heading p { margin: 0; color: var(--graphite); font-size: 16px; }

/* ---------- Studies ---------- */
.studies { list-style: none; margin: 0; padding: 12px 0 72px; display: grid; gap: 30px 22px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.study { width: 100%; display: grid; justify-items: center; gap: 2px; padding: 10px 8px 12px; position: relative; text-align: center; transition: transform .2s ease; }
.study::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1.6px solid var(--line); border-radius: 5px 12px 6px 14px / 12px 5px 14px 6px;
  filter: url(#rough-a); transition: border-color .2s;
}
.studies li:nth-child(3n+2) .study::before { filter: url(#rough-b); border-radius: 12px 4px 10px 6px / 5px 12px 6px 10px; }
.studies li:nth-child(3n) .study::before { filter: url(#rough-c); border-radius: 7px 10px 14px 4px / 10px 14px 4px 9px; }
.studies li:nth-child(5n+1) .study { transform: rotate(-.8deg); }
.studies li:nth-child(5n+3) .study { transform: rotate(.9deg); }
.study:hover { transform: rotate(-1.5deg) translateY(-3px); }
.study:hover::before { border-color: var(--ink); }
.study .sprite { width: 100%; aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; position: relative; }
.study .sprite img { position: relative; z-index: 1; }

/* Shiny easter egg: 1 in 4096, like the games */
.study.shiny img { filter: none; }
.sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sparkles i {
  position: absolute; width: 14px; height: 14px; background: #ffd84a;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: twinkle 1.8s ease-in-out infinite;
}
.sparkles i:nth-child(1) { top: 10%; right: 14%; }
.sparkles i:nth-child(2) { top: 52%; left: 8%; width: 10px; height: 10px; animation-delay: .6s; }
.sparkles i:nth-child(3) { bottom: 8%; right: 26%; width: 11px; height: 11px; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.study img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: var(--silhouette); transition: filter .4s ease; }
.study.done img { filter: none; }
.study .no { font: 300 14px/1 var(--font-hand); color: var(--graphite); }
.study .name { font: 400 22px/1.05 var(--font-display); overflow-wrap: anywhere; }
.study:not(.done) .name { color: var(--graphite); }

/* ---------- Footer: one slim row under a hand-drawn rule ---------- */
.sitefoot {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; padding-block: 20px 36px; color: var(--graphite); font-size: 14px;
}
.sitefoot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none;
  border-top: 1.6px solid var(--line); filter: url(#rough-a);
}
.sitefoot p { margin: 0; min-width: 0; }
.foot-links { display: flex; gap: 18px; align-items: center; }
.foot-links a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ink); border-radius: 50%; }
.foot-links a:hover { transform: rotate(-8deg) scale(1.08); }
.foot-links svg { width: 22px; height: 22px; }

/* ---------- Site nav (top right) ---------- */
.sitenav { display: flex; justify-content: flex-end; align-items: center; gap: 22px; padding-top: 20px; }
.sitenav a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font: 400 22px/1 var(--font-display); }
.sitenav a:hover { transform: rotate(-2deg); }
.sitenav a[aria-current="page"] { position: relative; isolation: isolate; }
.sitenav a[aria-current="page"]::before {
  content: ""; position: absolute; z-index: -1; left: -5px; right: -6px; top: 40%; bottom: 0;
  background: var(--marker); opacity: var(--marker-a); mix-blend-mode: var(--marker-blend);
  border-radius: 3px 10px 4px 8px; transform: rotate(-1.6deg) skewX(-8deg);
}
.ig { width: 20px; height: 20px; flex: none; }

@media (max-width: 700px) {
  .studies { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 22px 12px; }
  .study .name { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The hand-lettering face sets tight word gaps; open them up wherever it's used. */
h1, h2, h3, .sitenav a, .gen, .study .name, .back, .follow a, .turn, .close, .btn, .drop strong, .lost a, .note h3 { word-spacing: .14em; }

/* ---------- Generation switch: cards unfold into place ---------- */
.unfold .heading > * { animation: heading-in .3s ease-out both; }
.unfold .studies li {
  animation: unfold .4s cubic-bezier(.2, .75, .25, 1) both;
  animation-delay: calc(min(var(--i, 0), 42) * 10ms);
  transform-origin: 50% 0;
}
@keyframes unfold {
  0%   { opacity: 0; transform: perspective(800px) rotateX(-80deg) translateY(-12px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes heading-in {
  from { opacity: 0; transform: translateY(8px); }
}