/* franzimpler.com — static rebuild of the LAY Theme look.
   Layout: fixed menu bar, grid of OS-style windows, auto-hide dock, a reel of project windows
   with click-to-load video, a sticker sheet. Single light theme by design.
   The values most worth fine-tuning are at the top of :root. */

@font-face { font-family: "Compagnon"; src: url("fonts/Compagnon-Roman.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 88.25%; descent-override: 31.75%; line-gap-override: 0%; }
@font-face { font-family: "Compagnon"; src: url("fonts/Compagnon-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 88.25%; descent-override: 31.75%; line-gap-override: 0%; }
@font-face { font-family: "Compagnon"; src: url("fonts/Compagnon-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; ascent-override: 88.25%; descent-override: 31.75%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* ── to fine-tune ── */
  --ground: #e3e2e8;          /* page colour (light grey). Link previews use it too: GROUND in build.py */
  --tint-delay: 1.5s;         /* how long the pointer rests on a project before the page takes on its colour */
  --tint-in: 1.4s;            /* how slowly that colour comes … */
  --tint-out: .7s;            /* … and goes back to grey. The colours: "color" in content/projects.json */
  --lift-x: 5px;              /* how far a card lifts towards you under the pointer: to the left … */
  --lift-y: 7px;              /* … and up. Its shadow stays where the card lay. At rest cards have no shadow. */
  --scroll-resistance: 100px; /* how much scrolling it takes until the next project window comes (about two notches of
                                 a mouse wheel or a short swipe on a trackpad); less only nudges the windows */
  /* palette (from the old custom CSS) */
  --win: #f4f3f7;             /* window body */
  --chrome: #ece6ef;          /* menu bar, dock, buttons */
  --ink: #302e4f;             /* dark grey: running text */
  --shade: var(--ink);        /* hard shadows of windows and buttons */
  --text: #49444a;            /* title bars, menu */
  --purple: #493dcc;          /* menu/dock shadow */
  --purple-2: #5b4dff;        /* compact menu shadow */
  --highlight: #8d2bf7;       /* info text, hovers */
  --link: #005dff;
  --muted: #545454;
  --border-3d: #635e99 #302e4f #302e4f #908bca;
  --screen: #1d1b2b;          /* behind posters and players */
  /* type */
  --font: "Compagnon", "Courier New", ui-monospace, monospace;
  /* layout */
  --gutter: max(16px, 3vw);
  --menu-top: calc(16px + env(safe-area-inset-top, 0px));
  --menu-h: 36px;
}

html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html.has-modal { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--tint-out) ease;
}
/* the pointer rests on a project: the page slowly takes on its colour (site.js sets --tint) */
body.is-tinted { background-color: var(--tint, var(--ground)); transition: background-color var(--tint-in) ease-in-out; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Menu bar ---------- */
.menubar {
  position: fixed; z-index: 40;
  top: var(--menu-top); left: 2%; width: 96%; height: var(--menu-h);
  box-sizing: border-box;
  display: flex; align-items: center; gap: 14px;
  padding: 0 12px;
  background: var(--chrome);
  border: 1px solid; border-color: var(--border-3d); border-radius: 2px;
  box-shadow: 5px 7px 0 var(--purple);
  transition: top .4s, left .4s, width .4s, height .4s, border-width .4s, box-shadow .4s, padding .4s;
}
.menubar.is-compact {
  top: 0; left: 0; width: 100%;
  height: calc(25px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  border-width: 0; border-radius: 0;
  box-shadow: 0 5px 0 var(--purple-2);
}
.menubar a {
  font-style: italic; font-size: 24px; line-height: 1; letter-spacing: .14em;
  color: var(--text); text-decoration: none; white-space: nowrap;
  transition: letter-spacing .5s, color .5s, font-size .4s;
}
.menubar a:hover { letter-spacing: .24em; color: var(--highlight); }
.menubar.is-compact a { font-size: 18px; }
.menubar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menubar__brand img { width: 18px; height: 18px; flex: none; }
.menubar__nav, .menubar__social { display: flex; gap: 1em; }
.menubar__nav { margin-inline: auto; }

/* GIF that clings to the pointer on hover (menu items, info links) */
.cling {
  position: fixed; z-index: 39; top: 60px; left: 0;
  height: 100px; width: auto;
  transform: translateX(-50%);
  pointer-events: none; opacity: 0;
}
.cling.is-on { opacity: 1; }
.cling--follow { height: 150px; transform: translate(16px, 16px); }

/* ---------- Page ---------- */
.page {
  max-width: 1480px; margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--menu-top) + var(--menu-h) + 56px) 72px;
  box-sizing: border-box;
}

/* ---------- Windows ---------- */
.win {
  position: relative; display: block;
  background: var(--win);
  border: 1px solid; border-color: var(--border-3d); border-radius: 4px;
  color: inherit; text-decoration: none;
}
/* cards lie flat on the page; under the pointer they lift towards you and their shadow stays where they lay.
   A click presses them back down. */
a.win { transition: transform .18s ease-out, box-shadow .18s ease-out; }
@media (hover: hover) {
  a.win:hover { transform: translate(calc(-1 * var(--lift-x)), calc(-1 * var(--lift-y))); box-shadow: var(--lift-x) var(--lift-y) 0 var(--shade); }
}
a.win:focus-visible { transform: translate(calc(-1 * var(--lift-x)), calc(-1 * var(--lift-y))); box-shadow: var(--lift-x) var(--lift-y) 0 var(--shade); }
a.win:active { transform: none; box-shadow: none; transition-duration: .06s; }
/* what floats above the page keeps a shadow: the sticker palette and the trash dialog */
.sheet, .alert__win { box-shadow: var(--lift-x) var(--lift-y) 0 var(--shade); }
.win__bar {
  display: flex; align-items: center; gap: 10px;
  min-height: 37px; box-sizing: border-box;
  padding: 7px 10px 7px 12px;
}
.win__title {
  flex: 1; min-width: 0; margin: 0;
  font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: .14em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win__media {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ar, 16 / 9); object-fit: cover;
  border-radius: 0 0 3px 3px;
  background: #e4dff0;
}

/* main projects: two columns, rows pair films of the same format */
/* cards keep their own height: films of different formats can share a row.
   Gaps as on the old site: about 3vw between rows, 2vw between columns (44 / 30 px at 1440 px) */
.works {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  gap: clamp(20px, 3.05vw, 46px) clamp(12px, 2.1vw, 32px);
}

.section-label {
  margin: 112px 0 34px; padding-left: 4px;
  font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--text);
}
.portraits {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start;
  gap: clamp(20px, 3.05vw, 46px) clamp(12px, 2.1vw, 32px);
}


/* ---------- Footer ---------- */
.foot {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 24px;
  margin-top: 96px;
  font-size: 16px; letter-spacing: 1.8px; color: var(--muted);
}
.foot a { color: var(--link); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.proto-badge {
  margin-right: auto;
  font-size: 12px; letter-spacing: .14em; color: var(--text);
}

/* ---------- Dock ---------- */
.dock {
  position: fixed; z-index: 45; left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: flex-end; gap: 2px;
  padding: 4px 6px 3px;
  background: var(--chrome);
  border: 1px solid; border-color: var(--border-3d); border-radius: 18px;
  box-shadow: 5px 7px 0 var(--purple);
  transform: translate(-50%, calc(100% + 40px));
  transition: transform .3s ease-in-out;
}
.dock.is-shown, .dock:focus-within { transform: translate(-50%, 0); }
.dock a, .dock button {
  display: block; padding: 0 1px; border: 0; background: none; cursor: pointer;
  transition: transform .3s ease-in-out;
}
.dock a:hover, .dock button:hover, .dock a:focus-visible, .dock button:focus-visible { transform: translateY(-12px); }
.dock img { display: block; height: 50px; width: auto; }

/* ---------- 3D buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 500; letter-spacing: .14em; line-height: 1.2;
  color: var(--text); background: var(--chrome);
  border: 1px solid; border-color: var(--border-3d); border-radius: 4px;
  box-shadow: 4px 6px 0 var(--shade);
  transform: translate(-4px, -6px);
  cursor: pointer; text-decoration: none;
  transition: transform .15s, box-shadow .15s, color .15s;
}
.btn:hover { transform: none; box-shadow: 1px 1px 0 var(--shade); color: var(--highlight); }
.btn:active { transform: none; box-shadow: none; }
.btn svg { width: 12px; height: 12px; flex: none; }

/* window controls, on the left as on macOS: just symbols, no buttons around them */
.win__controls { display: flex; gap: 2px; flex: none; margin-left: -5px; }
.wbtn {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 24px; padding: 0; box-sizing: border-box;
  color: var(--text); background: none; border: 0; border-radius: 4px;
  cursor: pointer; text-decoration: none;
  transition: color .15s;
}
.wbtn svg { width: 12px; height: 12px; }
.wbtn:hover { color: var(--highlight); }
.wbtn:active { color: var(--purple); }
.wbtn:disabled, .wbtn.is-disabled { opacity: .3; cursor: default; color: var(--text); }
.wbtn--close:hover { color: #e0457b; }             /* the old pink, only as a hint */
.win__nav { display: flex; gap: 2px; flex: none; margin-right: -5px; }

/* ---------- Project windows: stacked one above the other. The window in the middle is in front, the windows
   above and below peek in; scrolling, swiping, the arrow keys or the arrows in the title bar move along.
   A window shows only the film, with one dark line under it; everything else is on the project page. ---------- */
.modal { position: fixed; inset: 0; z-index: 60; }
/* an opened project goes dark around it, like a cinema */
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgb(14, 13, 22);
  opacity: 0; transition: opacity .25s;
}
.modal.is-open .modal__backdrop, .modal.is-opening .modal__backdrop { opacity: 1; }
.reel {
  --gap: 16px;
  --peek: 40px;                         /* how much of the windows above and below shows */
  --side: clamp(20px, 4vw, 64px);       /* room left and right of a window */
  --bar: 37px;                          /* title bar */
  --strip: 56px;                        /* the dark line under the film (room for two lines of text) */
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap);
  overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;         /* the page behind does not scroll along */
  scrollbar-width: none;
  container-type: size;
}
.reel::-webkit-scrollbar { display: none; }
.reel::before, .reel::after { content: ""; flex: 0 0 calc(50% - var(--gap)); }
.reel__slide {
  /* every window gets the same height, so the windows above and below always peek in the same way;
     it is as wide as the film can be at that height (--arn: the film's aspect ratio) */
  --h: calc(100cqh - 2 * (var(--peek) + var(--gap)));
  --w: min(2400px, calc(100cqw - 2 * var(--side)), calc((var(--h) - var(--bar) - var(--strip)) * var(--arn)));
  flex: none; display: flex; align-items: center; justify-content: center;
  height: var(--h);
  scroll-snap-align: center; scroll-snap-stop: always;
}
.reel.is-free { scroll-snap-type: none; }   /* while site.js moves the stack itself */
.reel__slide:not(.is-active) { cursor: pointer; }
.modal__win {
  width: var(--w);
  max-height: 100%;
  /* only the title bar and the film light up; the window itself is as dark as the room */
  background: none; border: 0; border-radius: 0; box-shadow: none;
  min-width: 0; min-height: 0; box-sizing: border-box;
  display: flex; flex-direction: column;
  opacity: 0; transform: scale(.985);
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.modal.is-open .modal__win { opacity: 1; transform: none; }
/* windows next door: a little smaller and in the dark */
.modal__win::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: rgba(14, 13, 22, .62);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.reel__slide:not(.is-active) .modal__win::after { opacity: 1; pointer-events: auto; }
.reel__slide:not(.is-active):hover .modal__win::after { opacity: .7; }
/* they shrink towards the window in front, so the edge that peeks in stays in place */
.modal.is-open .reel__slide:not(.is-active) .modal__win { transform: scale(.96); transform-origin: 50% 100%; }
.modal.is-open .reel__slide.is-active ~ .reel__slide .modal__win { transform-origin: 50% 0; }
.modal__bar {
  flex: none; background: var(--win);
  border: 1px solid; border-color: var(--border-3d); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.modal__bar .win__title { font-size: 15px; }
.modal__body {
  overflow: auto;                       /* only a window with several pictures (Yoodle) scrolls; at its end the stack moves on */
  color-scheme: dark;
}
/* the film runs edge to edge under the title bar, like the pictures in the grid */
.modal__body .stage { gap: 4px; }
.modal__body .media-row { gap: 4px; }
.modal__body .player { width: 100%; border: 0; border-radius: 0; }
.modal__body .media-img img { border-radius: 0; }
.modal__body .block-caption, .modal__body .media-img figcaption { padding: 6px 1px 0; color: #8b8698; }
.modal__body .gate__caption--preview { margin: 8px 0 0; }
/* the dark line under the film: what it is, the way to the project page, the note on Play */
.modal__strip {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 28px;
  padding: 9px 1px 4px;
  font-size: 12.5px; line-height: 1.5; letter-spacing: .06em; color: #cbc7d8;
}
.strip__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 22px; margin: 0; }
.strip__meta a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; transition: color .15s; }
.strip__meta a svg { width: 10px; height: 10px; flex: none; }
.strip__meta a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.modal__strip .gate__caption { contain: none; text-align: left; font-size: 12px; letter-spacing: .02em; color: #8b8698; }
.modal__strip .gate__caption a { color: inherit; }
.modal__win:has(.embed:hover) .modal__strip .gate__caption, .modal__strip .gate__caption:hover { color: #b3aec2; }
.modal__strip .gate__caption.is-spent { visibility: hidden; }   /* the line keeps its height, the window does not jump */

.stage { display: grid; gap: 14px; }
.player {
  position: relative; overflow: hidden;
  width: min(100%, calc((100dvh - 190px) * var(--arn)));
  aspect-ratio: var(--arn);
  margin-inline: auto;
  background: var(--screen);
  border: 1px solid; border-color: #302e4f #908bca #908bca #302e4f;
  border-radius: 2px;
}
.player:focus { outline: none; }
.player:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; }
.player > img, .player > iframe, .player > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover; display: block;
}
.player--contain > img { object-fit: contain; background: var(--win); }
.player--loop { border-color: var(--border-3d); background: var(--win); }
.loop-badge {
  position: absolute; left: 8px; top: 8px;
  padding: 2px 8px; font-size: 11px; letter-spacing: .14em; color: var(--text);
  background: var(--chrome); border: 1px solid; border-color: var(--border-3d); border-radius: 3px;
}
.embed { display: grid; gap: 10px; }
.media-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.media-img { margin: 0; min-width: 0; }
.media-img img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 2px; background: #e4dff0; }
.media-img figcaption { margin: 8px 0 0; }
.media-img figcaption, .block-caption { font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--muted); }
.block-caption { margin: 0; }
.stage--gallery .player { width: 100%; }
.player--blank { min-height: 120px; }

/* Play: one button in the middle of the poster; one short line under the video says what the click does */
.play {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px 11px 18px; margin: 0;
  font-size: 15px; font-weight: 500; letter-spacing: .14em; line-height: 1.2;
  color: var(--text); background: var(--chrome);
  border: 1px solid; border-color: var(--border-3d); border-radius: 4px;
  box-shadow: 4px 6px 0 var(--shade);
  transform: translate(calc(-50% - 2px), calc(-50% - 3px));
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, color .15s;
}
.play svg { width: 12px; height: 12px; flex: none; }
.play:hover { color: var(--highlight); transform: translate(calc(-50% + 1px), calc(-50% + 2px)); box-shadow: 1px 1px 0 var(--shade); }
.play:active { transform: translate(calc(-50% + 2px), calc(-50% + 3px)); box-shadow: none; }
.gate__caption {
  margin: 0; contain: inline-size; text-align: center;
  font-size: 12.5px; line-height: 1.5; letter-spacing: .02em; color: #6c6776;
  transition: color .15s;
}
.gate__caption a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.embed:hover .gate__caption, .embed:focus-within .gate__caption { color: var(--ink); }
.gate__caption--preview { display: block; padding: 10px 12px; text-align: left; color: var(--ink); background: #f8f0ff; border: 1px dashed var(--highlight); border-radius: 4px; }
.gate__caption--preview a { color: var(--link); }

/* info under the film */
.info {
  display: grid; gap: 16px; align-content: start;
  max-width: 68ch; padding: 22px 4px 4px;
  color: var(--ink); font-size: 15.5px; line-height: 1.55; letter-spacing: .01em;
}
.info p { margin: 0; }
.info__main, .info__side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.info__meta { font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--text); }
.info__h, .block-heading { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--highlight); }
.block-list ul { list-style: none; margin: 0; padding: 0; }
.block-list li::before { content: "⋅ "; color: var(--highlight); }
.info a, .extra a, .block-caption a, .media-img figcaption a { color: var(--link); text-decoration: none; }
.info a:hover, .extra a:hover, .block-caption a:hover, .media-img figcaption a:hover { text-decoration: underline; }
.info__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Project page: the window, maximized ---------- */
.win--max > .win__bar { min-height: 42px; padding: 9px 14px 9px 12px; }
.win--max > .win__bar .win__title { font-size: 15px; }
.project { padding: 0 22px 28px; }
.project .stage { gap: 18px; }
.project .player { width: min(100%, calc((100dvh - 210px) * var(--arn))); border: 0; border-radius: 0; }
/* on the page, too, the film touches the window edges: the window is as wide as the film can be
   while it still fits the screen height (--arn: the film's aspect ratio) */
@media (min-width: 601px) {
  .win--film { max-width: max(600px, calc((100dvh - 210px) * var(--arn))); margin-inline: auto; }
}
.project:not(.project--tall) > .stage { margin-inline: -22px; gap: 4px; }
.project:not(.project--tall) > .stage .media-row { gap: 4px; }
.project:not(.project--tall) > .stage .media-img img { border-radius: 0; }
.project:not(.project--tall) > .stage .gate__caption { padding: 4px 22px 0; }
.project .stage--gallery .player { width: 100%; }
.project .info { max-width: none; padding: 26px 4px 4px; }
.project .info__main { max-width: 64ch; }
.extra {
  display: grid; gap: 20px; margin-top: 40px; padding: 28px 4px 0;
  border-top: 1px dashed #c9c3d9;
  color: var(--ink); font-size: 15.5px; line-height: 1.55;
}
.extra .block-heading { margin-top: 8px; }
.block-text { max-width: 68ch; }
.block-text p { margin: 0 0 10px; }
.block-text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .project .info--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
  .project--tall { display: grid; grid-template-columns: auto minmax(260px, 400px); column-gap: 40px; align-items: start; justify-content: center; }
  .project--tall .player { width: auto; height: min(calc(100dvh - 190px), 820px); }
  .project--tall .info { padding-top: 4px; }
  .project--tall .extra { grid-column: 1 / -1; }
}

/* portrait films: the window is as narrow as the film; the line under it may need three lines of text */
.reel__slide--tall { --strip: 88px; }

/* ---------- Project page: previous / next ---------- */
.project-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px;
  margin-top: 44px; padding: 20px 4px 0; border-top: 1px dashed #c9c3d9;
}
.project-nav a { display: grid; gap: 3px; min-width: 0; color: var(--ink); text-decoration: none; }
.project-nav span { font-size: 12.5px; letter-spacing: .14em; color: var(--text); }
.project-nav strong { font-weight: 500; font-size: 15.5px; color: var(--link); }
.project-nav a:hover strong { text-decoration: underline; }
.project-nav__next { margin-left: auto; text-align: right; }
@media (min-width: 900px) { .project--tall .project-nav { grid-column: 1 / -1; } }

/* ---------- Stickers: a free area to place them on, and a small tool window floating at its corner ---------- */
.stickers { margin-top: 120px; }
.stickers + .foot { margin-top: 26px; }
.sticker-zone {
  display: grid; place-items: center;
  height: clamp(240px, 26vw, 360px);
  border: 2px dashed rgba(48, 46, 79, .2); border-radius: 14px;
}
.sticker-zone__hint {
  margin: 0 0 40px; padding: 0 18px; text-align: center;
  font-size: 14px; line-height: 1.6; letter-spacing: .06em; color: var(--muted);
  transition: opacity .3s;
}
.sticker-zone.is-used .sticker-zone__hint { opacity: 0; }
.hint-touch { display: none; }
@media (hover: none) { .hint-pointer { display: none; } .hint-touch { display: inline; } }
/* the sheet: slots like the colour palette of a paint program or a game inventory; empty slots wait for more */
.sheet { width: max-content; max-width: calc(100% - 28px); margin: -46px 0 0 clamp(14px, 4%, 64px); }
.sheet__grid {
  --cols: 10;
  list-style: none; margin: 2px 12px 12px; padding: 0;
  display: grid; grid-template-columns: repeat(var(--cols), 50px); grid-auto-rows: 50px; gap: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55'%3E%3Crect width='50' height='50' fill='%23f7f6fb'/%3E%3Cpath d='M.5 50V.5H50' fill='none' stroke='%23cfc9dc'/%3E%3Cpath d='M0 49.5h49.5V0' fill='none' stroke='%23fff'/%3E%3C/svg%3E") 0 0 / 55px 55px;
}
.sheet__item {
  display: grid; place-items: center; width: 50px; height: 50px; padding: 5px; box-sizing: border-box;
  background: #f7f6fb; border: 1px solid; border-color: #cfc9dc #fff #fff #cfc9dc; border-radius: 0;
  cursor: grab; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sheet__item:active { cursor: grabbing; }
.sheet__item img {
  max-width: 38px; max-height: 38px; width: auto; height: auto;
  pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  transition: scale .15s;
}
@media (hover: hover) {
  .sheet__item:hover { background: #efe8fb; }
  .sheet__item:hover img { scale: 1.15; }
}
.sheet.is-drop { outline: 2px dashed var(--highlight); outline-offset: 6px; }

/* the layer covers the whole page and clips stickers at its edges, so they never make the page wider */
body { position: relative; }
.sticker-layer { position: absolute; inset: 0; z-index: 30; overflow: hidden; overflow: clip; pointer-events: none; }
/* placed as they are: no tilt, no sticker edge; only while carried they lift a little */
.sticker {
  position: absolute; height: auto; pointer-events: auto;
  translate: -50% -50%;
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  transition: scale .15s, opacity .15s, filter .15s;
}
.sticker.is-dragging { scale: 1.06; cursor: grabbing; filter: drop-shadow(5px 8px 4px rgba(48, 46, 79, .22)); }
.sticker.is-leaving { opacity: .5; scale: .85; }
.sticker.is-peeling { pointer-events: none; }
.sticker.is-landing { animation: sticker-land .25s ease-out; }
.sticker.is-dropping { animation: sticker-drop .3s ease-out; }
.sticker.is-peeling-out { animation: sticker-off .22s ease-in forwards; }
@keyframes sticker-land { 0% { scale: 1.06; } 100% { scale: 1; } }
@keyframes sticker-drop { 0% { scale: .6; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes sticker-off { to { scale: .5; opacity: 0; } }
html.is-sticking, html.is-sticking * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.dock [data-trash].is-drop { transform: translateY(-14px) scale(1.15); }
.dock [data-trash].is-gulping { animation: trash-gulp .4s ease; }
@keyframes trash-gulp { 0%, 100% { transform: none; } 30% { transform: translateY(-8px) scale(1.12); } 65% { transform: scale(.94); } }

/* classic zoom rectangles when a window opens */
.zoomrect {
  position: fixed; z-index: 70; pointer-events: none;
  border: 1px dotted var(--ink); border-radius: 3px;
  box-sizing: border-box; opacity: 0;
}
html.has-modal .zoomrect { border-color: rgba(255, 255, 255, .7); }

/* ---------- Trash dialog ---------- */
.alert {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(48, 46, 79, .2);
}
.alert__win { width: min(440px, 100%); }
.alert__body { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 6px 18px 20px 16px; color: var(--ink); }
.alert__body img { width: 56px; height: auto; }
.alert__body p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.alert__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 18px; padding-top: 10px; }
.shake { animation: shake .5s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  8%, 41% { transform: translateX(-10px); }
  25%, 58% { transform: translateX(10px); }
  75% { transform: translateX(-5px); }
  92% { transform: translateX(5px); }
}
.is-empty .page > *:not(.foot) { opacity: 0; transform: scale(.97); pointer-events: none; }
.page > * { transition: opacity .35s, transform .35s; }

/* ---------- Info page ---------- */
.about { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 40px 6%; align-items: center; }
.about + .about { margin-top: 64px; }
.about__text {
  padding-left: 8px;
  font-size: 24px; line-height: 1.4; letter-spacing: .03em; color: var(--highlight);
}
.about__text p { margin: 0 0 12px; max-width: 46ch; }
.about__text p:last-child { margin-bottom: 0; }
.about__text a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.about__text a:hover { border-bottom-style: solid; }
.about__text [data-hover] { cursor: default; }
.about__gif { justify-self: center; width: min(100%, 300px); height: auto; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; align-items: start; margin-top: 110px; }
.facts .win__body { padding: 4px 16px 18px; color: var(--ink); font-size: 15px; line-height: 1.55; }
.facts ul { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 1px 0; }
.facts a { color: var(--link); text-decoration: none; }
.facts a:hover { text-decoration: underline; }
.facts dl { margin: 0; display: grid; gap: 6px; }
.facts dt { font-size: 12.5px; letter-spacing: .14em; color: var(--text); }
.facts dd { margin: 0; }
.facts .where { color: var(--muted); }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin-inline: auto; }
.legal .win__body { padding: 8px 22px 26px; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.legal h2 { margin: 26px 0 6px; font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--highlight); }
.legal h2:first-child { margin-top: 6px; }
.legal p { margin: 0 0 10px; }
.legal a { color: var(--link); }
.todo { padding: 12px 14px; border: 1px dashed var(--highlight); border-radius: 4px; background: #f8f0ff; }
.legal mark { background: #f3e4ff; color: var(--ink); outline: 1px dashed var(--highlight); outline-offset: 1px; border-radius: 2px; }
.legal .stand { margin-top: 26px; font-size: 13px; letter-spacing: .1em; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .menubar a { font-size: 20px; }
  .dock img { height: 36px; }
  .about__text { font-size: 22px; }
  .facts { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 700px) {
  .works { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
  .section-label { margin-top: 88px; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__gif { width: 180px; justify-self: start; }
}
@media (max-width: 600px) {
  :root { --menu-top: calc(10px + env(safe-area-inset-top, 0px)); --menu-h: 34px; }
  .menubar { left: 3%; width: 94%; gap: 10px; padding: 0 10px; }
  .menubar a { font-size: 17px; letter-spacing: .1em; }
  .menubar.is-compact a { font-size: 15px; }
  .menubar__social { display: none; }
  .menubar__nav { margin-inline: auto 0; }
  .page { padding-block: calc(var(--menu-top) + var(--menu-h) + 34px) 48px; }
  .dock { display: none; }
  .about__text { font-size: 20px; }
  .foot { font-size: 14px; letter-spacing: 1px; }
  .proto-badge { width: 100%; }

  /* project windows go full screen, one above the other */
  .reel { --gap: 0px; --peek: 0px; --side: 0px; }
  .reel__slide { --w: 100cqw; }
  .modal__win { width: 100cqw; height: 100%; max-height: none; border-width: 0; border-radius: 0; box-shadow: none; }
  /* full screen: the film sits in the middle of the dark below the title bar */
  .modal__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .modal__body > :first-child { margin-top: auto; }
  .modal__body > :last-child { margin-bottom: auto; }
  .modal.is-open .reel__slide:not(.is-active) .modal__win { transform: none; }
  .reel__slide:not(.is-active) .modal__win::after { opacity: 0; }
  .stickers { margin-top: 88px; }
  .sticker-zone { height: 240px; border-radius: 10px; }
  .sticker-zone__hint { margin-bottom: 30px; }
  .sheet { max-width: 100%; margin: -30px 0 0 8px; }
  .sheet__grid { --cols: 6; margin: 2px 10px 10px; }
  .modal__bar { padding-top: calc(6px + env(safe-area-inset-top, 0px)); background: var(--chrome); border-width: 0 0 1px; border-color: #c9c3d9; border-radius: 0; }
  .modal__bar .wbtn { width: 38px; height: 30px; }
  .modal__bar .wbtn svg, .win--max > .win__bar .wbtn svg { width: 13px; height: 13px; }
  .win--max > .win__bar .wbtn { width: 34px; height: 28px; }
  .project { padding: 0 12px 20px; }
  .project > .stage { margin-inline: -12px; gap: 4px; }
  .project > .stage .gate__caption { padding: 4px 12px 0; }
  .project .info { padding-top: 20px; }
  .modal__body { padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px)); }
  .modal__body .player { width: min(100%, calc((100dvh - 160px) * var(--arn))); }   /* portrait films fit the screen */
  .modal__strip { padding: 10px 14px 0; }
  .modal__body .block-caption, .modal__body .media-img figcaption { padding: 6px 14px 0; }
  .modal__body .gate__caption--preview { margin: 8px 14px 0; }
  .media-row { grid-template-columns: minmax(0, 1fr); }
  .player { width: min(100%, calc((100dvh - 150px) * var(--arn))); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}