/* Len Simon Animation. Tokens: animation paper, graphite, Col-Erase blue, red correction pencil. */
:root {
  --paper: #e6ebee;
  --sheet: #f8fafa;
  --graphite: #23272c;
  --pencil: #565c64;
  --blue: #1d5fa6;
  --blue-line: #b9cfe4;
  --red: #b93327;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --hand: "Shantell Sans", "Comic Sans MS", cursive;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--graphite); font: 400 1.0625rem/1.6 var(--display); }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-stretch: 118%; font-weight: 800; line-height: 1.02; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: 1.25rem; font-stretch: 108%; line-height: 1.2; }
p { margin: 0 0 1em; max-width: 68ch; }
.note { font-family: var(--hand); color: var(--blue); font-size: 1.05rem; line-height: 1.35; }

.preview-bar { background: var(--graphite); color: #dfe5ea; font-size: 0.875rem; padding: 8px var(--gutter); }
.site-head { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; justify-content: space-between; padding: 18px var(--gutter); background: var(--sheet); border-bottom: 1px solid var(--blue-line); position: sticky; top: 0; z-index: 5; }
.wordmark { font-stretch: 122%; font-weight: 900; font-size: 1.15rem; color: var(--graphite); text-decoration: none; }
.site-head nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-head nav a { color: var(--graphite); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 6px 0; }
.site-head nav a:hover { color: var(--blue); text-decoration: underline; }

/* Hero: Len's own caricature and sketch wall, fading into the paper on the left. */
.hero { position: relative; min-height: min(82vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--paper); }
.hero-art { position: absolute; inset: 0 0 0 auto; width: 74%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 27%, rgba(230,235,238,0.86) 40%, rgba(230,235,238,0) 60%); }
.hero-copy { position: relative; z-index: 2; padding: 48px var(--gutter) 64px; max-width: 760px; }
.hero h1 { font-size: clamp(3.4rem, 10.5vw, 9rem); font-weight: 900; font-stretch: 125%; line-height: 0.86; letter-spacing: -0.03em; }
.stroke { display: block; width: min(100%, 520px); height: 22px; margin: 10px 0 18px; overflow: visible; }
.stroke path { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 1.1s 0.3s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero .trade { font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 700; font-stretch: 105%; line-height: 1.2; margin: 0 0 12px; max-width: 22ch; }
.hero .offer { color: var(--pencil); max-width: 44ch; margin-bottom: 26px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.btn { display: inline-block; background: var(--graphite); color: #fff; font-weight: 700; text-decoration: none; padding: 14px 24px; border-radius: 3px; border: 2px solid var(--graphite); }
.btn:hover { background: var(--blue); border-color: var(--blue); }
.plain { font-weight: 700; color: var(--graphite); }

.band { padding: clamp(56px, 9vw, 120px) var(--gutter); }
.band.sheet { background: var(--sheet); border-block: 1px solid var(--blue-line); }
.band-head { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; }
.band-head p { margin: 0; color: var(--pencil); max-width: 46ch; }

/* Category tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabs button { font: 700 0.95rem var(--display); color: var(--graphite); background: transparent; border: 2px solid var(--graphite); border-radius: 3px; padding: 9px 16px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--graphite); color: #fff; }
.tabs button span { font-weight: 500; opacity: 0.75; margin-left: 6px; }

/* Project cards. The frame is a sheet of punched animation paper waiting for a drawing. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 30px 24px; list-style: none; margin: 0; padding: 0; }
.card a { display: block; color: inherit; text-decoration: none; }
.card h3 { margin: 14px 0 2px; }
.card a:hover h3 { color: var(--blue); text-decoration: underline; }
.card .meta { color: var(--pencil); font-size: 0.95rem; margin: 0; }
.frame { position: relative; aspect-ratio: 16 / 10; background: var(--sheet); border: 1px solid var(--blue-line); box-shadow: 3px 4px 0 rgba(35,39,44,0.08);
  background-image: linear-gradient(var(--blue-line), var(--blue-line)), linear-gradient(var(--blue-line), var(--blue-line));
  background-size: 1px 46%, 46% 1px; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; text-align: center; padding: 16px 16px 30px; }
.frame::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--paper); border: 1px solid var(--blue-line);
  box-shadow: -74px 0 0 -1px var(--paper), -74px 0 0 0 var(--blue-line), 74px 0 0 -1px var(--paper), 74px 0 0 0 var(--blue-line); }
.frame .note { background: var(--sheet); padding: 2px 8px; max-width: 24ch; }
.frame.wide { aspect-ratio: 16 / 8; }
.frame.small { aspect-ratio: 4 / 3; }

/* Credits, ruled like an exposure sheet. */
.xsheet { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--graphite); }
.xsheet caption { text-align: left; font-weight: 800; font-stretch: 112%; font-size: 1.35rem; padding: 34px 0 10px; }
.xsheet th, .xsheet td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--blue-line); border-right: 1px solid var(--blue-line); }
.xsheet thead th { font-size: 0.85rem; font-weight: 700; color: var(--pencil); border-bottom: 2px solid var(--graphite); background: #eef2f4; }
.xsheet th:nth-child(1) { width: 9.5em; } .xsheet th:nth-child(2) { width: 30%; } .xsheet th:nth-child(3) { width: 26%; } .xsheet th:nth-child(4) { width: 20%; }
.xsheet td:first-child { font-family: var(--hand); color: var(--blue); }
.xsheet td:nth-child(2) { font-weight: 700; }
.xsheet td.open { color: var(--pencil); font-style: italic; }
.xsheet a { color: var(--graphite); }
.xsheet a:hover { color: var(--blue); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.facets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 22px; list-style: none; margin: 30px 0 0; padding: 0; }
.facets h3 { margin: 12px 0 0; font-size: 1.05rem; }
.shoplist { columns: 2; column-gap: 40px; list-style: none; margin: 0 0 24px; padding: 0; max-width: 520px; font-weight: 600; }
.shoplist li { padding: 7px 0; border-bottom: 1px solid var(--blue-line); break-inside: avoid; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.door { display: block; background: var(--graphite); color: #fff; text-decoration: none; padding: 26px 26px 30px; border-radius: 3px; }
.door strong { display: block; font-size: 1.5rem; font-stretch: 118%; font-weight: 800; margin-bottom: 6px; }
.door span { color: #cfd7de; }
.door:hover { background: var(--blue); }
.contact a.big { font-size: clamp(1.3rem, 4.2vw, 2.6rem); font-weight: 800; font-stretch: 112%; color: var(--graphite); word-break: break-word; }
.site-foot { background: var(--graphite); color: #cfd7de; padding: 34px var(--gutter); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; }
.site-foot a { color: #fff; }

/* Project page */
.crumb { padding: 22px var(--gutter) 0; font-weight: 600; font-size: 0.95rem; }
.proj-head { padding: 26px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.proj-head h1 { font-size: clamp(2.6rem, 7.5vw, 6.5rem); font-weight: 900; font-stretch: 122%; line-height: 0.92; letter-spacing: -0.02em; }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0; border-top: 2px solid var(--graphite); }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--blue-line); }
.facts dt { color: var(--pencil); font-size: 0.9rem; padding-right: 22px; }
.facts dd { font-weight: 700; }
.proj-body { padding: 0 var(--gutter) 40px; }
.pager { display: flex; justify-content: space-between; gap: 20px; padding: 28px var(--gutter) 70px; font-weight: 700; }

@media (max-width: 800px) {
  .site-head { position: static; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .card h3 { font-size: 1.02rem; }
  .card .meta { font-size: 0.85rem; }
  .frame .note { font-size: 0.85rem; }
  .frame::after { box-shadow: -44px 0 0 -1px var(--paper), -44px 0 0 0 var(--blue-line), 44px 0 0 -1px var(--paper), 44px 0 0 0 var(--blue-line); }
  .hero { display: block; min-height: 0; }
  .hero-art { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .hero::before { display: none; }
  .hero-copy { padding: 28px var(--gutter) 48px; }
  .split, .proj-head { grid-template-columns: 1fr; }
  .xsheet thead { display: none; }
  .xsheet, .xsheet tbody, .xsheet tr, .xsheet td { display: block; width: auto; }
  .xsheet tr { padding: 12px 14px; border-bottom: 1px solid var(--graphite); }
  .xsheet td { border: 0; padding: 1px 0; }
  .xsheet td:first-child { width: auto; }
  .xsheet td[data-l]:not(:empty)::before { content: attr(data-l) ": "; color: var(--pencil); font-weight: 400; font-style: normal; }
  .xsheet caption { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stroke path { animation: none; stroke-dashoffset: 0; }
}

/* Cover art cropped from Len's credits graphic. */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.frame.art { aspect-ratio: 4 / 5; padding: 12px 12px 30px; background-image: none; }
.frame.art img { position: absolute; left: 12px; top: 12px; width: calc(100% - 24px); height: calc(100% - 42px); object-fit: contain; }
.card h3 { font-size: 1.08rem; }
.poster { width: 100%; max-width: 380px; background: var(--sheet); border: 1px solid var(--blue-line); padding: 12px; box-shadow: 3px 4px 0 rgba(35,39,44,0.08); }
.xsheet td.open { color: var(--pencil); font-style: italic; font-weight: 400; }
@media (max-width: 800px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Project page, after Len's layout sketch: side menu, poster and details, video and transcript, samples. */
.proj { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.proj-main { min-width: 0; }
.rail { position: sticky; top: 84px; align-self: start; padding: 26px 0 26px var(--gutter); }
.rail ul { list-style: none; margin: 0 0 18px; padding: 0; border-left: 2px solid var(--graphite); }
.rail button[data-go] { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: 700 0.95rem var(--display); color: var(--graphite); padding: 8px 14px; }
.rail .sub button { font-weight: 500; color: var(--pencil); padding-left: 30px; }
.rail button[data-go]:hover { color: var(--blue); text-decoration: underline; }
.rail p { margin: 0; font-weight: 700; font-size: 0.95rem; }
.rail-toggle { display: none; }
.burger { display: inline-block; width: 20px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.p-top { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; padding: 18px var(--gutter) 0; align-items: stretch; }
.p-top .poster { max-width: none; align-self: start; }
.p-bio { position: relative; overflow: hidden; background: var(--graphite); color: #fff; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 3vw, 34px); }
.p-bio::before { content: ""; position: absolute; inset: -40px; background: var(--bg, none) center / cover no-repeat; filter: blur(22px); }
.p-bio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,23,27,0.35), rgba(20,23,27,0.88)); }
.p-bio > * { position: relative; z-index: 1; }
.p-bio h1 { font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 900; font-stretch: 122%; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 20px; }
.p-bio .note { color: #d5e4f5; font-size: 0.92rem; margin: 0 0 auto; padding-bottom: 24px; max-width: 36ch; }
.p-bio .facts { border-top-color: #fff; }
.p-bio .facts dt { color: #cfd7de; }
.p-bio .facts dt, .p-bio .facts dd { border-bottom-color: rgba(255,255,255,0.28); }
.p-talk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; padding: 24px var(--gutter) 8px; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--graphite); display: grid; place-items: center; align-content: center; gap: 16px; text-align: center; padding: 18px; }
.video::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 22px 0 22px 36px; border-color: transparent transparent transparent #fff; }
.video .note { color: #d5e4f5; max-width: 30ch; }
.transcript { background: var(--sheet); border: 1px solid var(--blue-line); padding: 22px 24px; overflow-y: auto; max-height: 340px; }
.transcript h2 { font-size: 1.5rem; margin-bottom: 12px; }
.p-work { padding: 34px var(--gutter) 20px; }
.p-work > h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.disc { margin-top: 26px; }
.disc h3 { margin-bottom: 12px; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#p-about, #p-video, #p-work, .disc { scroll-margin-top: 90px; }
@media (max-width: 800px) {
  .proj { display: block; }
  .rail { top: 0; z-index: 4; background: var(--sheet); border-bottom: 1px solid var(--blue-line); padding: 8px var(--gutter); }
  .rail-toggle { display: flex; align-items: center; gap: 12px; background: none; border: 2px solid var(--graphite); border-radius: 3px; padding: 9px 12px; font: 700 0.95rem var(--display); color: var(--graphite); cursor: pointer; }
  .rail nav { display: none; padding: 12px 0 6px; }
  .rail.open nav { display: block; }
  .p-top, .p-talk { grid-template-columns: 1fr; }
  .p-top .poster { max-width: 240px; }
  .p-bio { min-height: 0; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #p-about, #p-video, #p-work, .disc { scroll-margin-top: 64px; }
}

/* Synopsis banner, staggered samples, discipline pages, social links. */
.p-syn { margin: 24px var(--gutter) 0; padding: clamp(20px, 3vw, 34px); background: var(--sheet); border: 1px solid var(--blue-line); border-left: 6px solid var(--red); scroll-margin-top: 90px; }
.p-syn h2 { font-size: 1.05rem; font-stretch: 108%; color: var(--pencil); margin-bottom: 8px; }
.p-syn p { font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.35; font-weight: 600; max-width: 46ch; margin: 0; }
.p-syn p.note { font-weight: 400; font-size: 1.1rem; }
.disc-head { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; margin-bottom: 16px; }
.disc-head h3 { margin: 0; font-size: 1.5rem; }
.disc-head a, .rail .sub a { font-size: 0.9rem; font-weight: 600; }
.rail .sub a { display: block; padding: 0 14px 8px 30px; }
.disc { margin-top: 44px; }
.mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; align-items: start; padding-bottom: 18px; }
.mosaic .frame { aspect-ratio: auto; }
.mosaic .s-wide { grid-column: span 7; aspect-ratio: 16 / 9; }
.mosaic .s-mid { grid-column: span 5; aspect-ratio: 4 / 3; }
.mosaic .s-tall { grid-column: span 4; aspect-ratio: 3 / 4; }
.mosaic .s-sq { grid-column: span 3; aspect-ratio: 1; }
.mosaic .drop { margin-top: 52px; }
.mosaic .lift { margin-top: -70px; }
.mosaic .s-wide.push { grid-column: 4 / span 7; }
.mosaic .tl { transform: rotate(-1.3deg); }
.mosaic .tr { transform: rotate(1.1deg); }
.by-disc { margin: 34px 0 0; max-width: none; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.by-disc a { font-weight: 700; }
a.tab { font: 700 0.95rem var(--display); color: var(--graphite); border: 2px solid var(--graphite); border-radius: 3px; padding: 9px 16px; text-decoration: none; }
a.tab[aria-selected="true"] { background: var(--graphite); color: #fff; }
a.tab span { font-weight: 500; opacity: 0.75; margin-left: 6px; }
.d-title { font-size: clamp(2.6rem, 7.5vw, 6rem); font-weight: 900; font-stretch: 122%; line-height: 0.95; }
.fine { color: var(--pencil); font-size: 0.9rem; margin-top: 30px; }
.social { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; max-width: none; }
.contact .social { font-weight: 700; font-size: 1.1rem; margin-top: 8px; }
.contact .social span { color: var(--pencil); font-weight: 500; }
@media (max-width: 800px) {
  .p-syn { scroll-margin-top: 64px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mosaic .s-wide { grid-column: span 2; }
  .mosaic .s-mid, .mosaic .s-tall, .mosaic .s-sq { grid-column: span 1; }
  .mosaic .s-wide.push { grid-column: span 2; }
  .mosaic .drop { margin-top: 26px; }
  .mosaic .lift { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .mosaic .tl, .mosaic .tr { transform: none; } }

/* Project page, third pass: details and synopsis on the still, role banner, two videos, translucent project backdrop. */
body.has-bg::before { content: ""; position: fixed; inset: -20px; z-index: -1; background: var(--pagebg) center / cover no-repeat; opacity: 0.38; filter: blur(3px) saturate(1.15); }
body.has-bg .rail nav, body.has-bg .rail-toggle { background: rgba(248,250,250,0.86); }
.rail nav { padding: 12px 10px 12px 0; }
.p-bio { justify-content: center; }
.p-bio h1 { margin-bottom: 14px; }
.p-bio .facts { border-top: 0; grid-template-columns: max-content max-content max-content max-content; column-gap: 0; margin-bottom: 20px; }
.p-bio .facts dt, .p-bio .facts dd { border-bottom: 0; padding: 0; }
.p-bio .facts dt { padding-right: 8px; align-self: center; }
.p-bio .facts dd { padding-right: 28px; }
.p-synopsis { color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.4; font-weight: 500; max-width: 44ch; margin: 0; }
.p-bio .note { margin: 0; padding: 0; font-size: 1.05rem; }
.p-role { margin: 24px var(--gutter) 0; padding: clamp(18px, 2.6vw, 30px); background: var(--sheet); border: 1px solid var(--blue-line); border-left: 6px solid var(--red); scroll-margin-top: 90px; }
.p-role h2 { font-size: 1.05rem; font-stretch: 108%; color: var(--pencil); margin-bottom: 6px; }
.p-role p { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 800; font-stretch: 112%; line-height: 1.1; margin: 0; max-width: none; }
.p-role p.note { font-weight: 400; font-size: 1.15rem; }
.p-talk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-talk figure { margin: 0; }
.p-talk figcaption { font-weight: 700; font-size: 0.95rem; margin-top: 8px; display: inline-block; background: rgba(248,250,250,0.86); padding: 2px 8px; }
.video { width: 100%; border: 0; }
button.video.yt { cursor: pointer; background-size: cover; background-position: center; display: grid; }
button.video.yt::before { border-left-color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7)); }
button.video.yt:hover::before { border-left-color: var(--red); }
iframe.video { display: block; padding: 0; }
details.transcript { grid-column: 1 / -1; max-height: none; padding: 14px 20px; }
details.transcript summary { cursor: pointer; font-weight: 700; }
details.transcript p { margin: 12px 0 4px; }
body.has-bg .p-work > h2, body.has-bg .disc-head, body.has-bg .crumb, body.has-bg .pager a { text-shadow: 0 0 12px var(--paper), 0 0 4px var(--paper); }
@media (max-width: 800px) {
  .p-talk { grid-template-columns: 1fr; }
  .p-bio .facts { grid-template-columns: max-content 1fr; row-gap: 4px; }
  .p-role { scroll-margin-top: 64px; }
  .rail nav { padding: 12px 0 6px; }
  body.has-bg .rail nav { background: none; }
}

/* Fourth pass: social icons, pencil hop, compact credits, books, phone layout. */
.social { align-items: center; }
.ico { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 44px; min-height: 44px; justify-content: center; }
a.ico:hover { color: var(--blue); }
.site-foot a.ico:hover { color: #fff; }
.ico.soon { opacity: 0.45; }
.head-social { gap: 0; margin-left: auto; color: var(--graphite); align-self: center; }
.site-head { align-items: center; padding-block: 8px; }
.site-foot { align-items: center; }
.site-foot .social { gap: 0; color: #cfd7de; }
.contact .social { gap: 6px 22px; }
.contact .social .ico { justify-content: flex-start; }
.contact .social .ico span { color: inherit; font-weight: 700; }

/* Books */
.books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; list-style: none; margin: 0 0 26px; padding: 0; }
.book img { width: 100%; height: auto; border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); background: var(--paper); }
.book:nth-child(odd) img { transform: rotate(-1.2deg); }
.book:nth-child(even) img { transform: rotate(1deg); }
.book h3 { margin: 14px 0 2px; font-size: 1.08rem; }
.book .meta { color: var(--pencil); font-size: 0.95rem; margin: 0; }
@media (prefers-reduced-motion: reduce) { .book img { transform: none !important; } }

@media (max-width: 800px) {
  .preview-bar { font-size: 0.78rem; padding-block: 6px; }
  .site-head { gap: 0 12px; padding-block: 6px 4px; }
  .site-head nav { width: 100%; gap: 0 4px; justify-content: space-between; }
  .site-head nav a { font-size: 0.875rem; padding: 12px 2px; }
  .band { padding-block: 48px; }
  .band-head { margin-bottom: 24px; }
  .hero h1 { font-size: clamp(3.4rem, 17vw, 6rem); }
  .xsheet thead { display: table-header-group; }
  .xsheet { display: table; width: 100%; font-size: 0.8rem; }
  .xsheet tbody { display: table-row-group; }
  .xsheet tr { display: table-row; padding: 0; border: 0; }
  .xsheet td, .xsheet th { display: table-cell; padding: 4px 6px; border-bottom: 1px solid var(--blue-line); border-right: 1px solid var(--blue-line); }
  .xsheet caption { display: table-caption; }
  .xsheet th:nth-child(4), .xsheet td:nth-child(4) { display: none; }
  .xsheet th:nth-child(1) { width: 4.6em; } .xsheet th:nth-child(2) { width: 46%; }
  .xsheet td:first-child { font-size: 0.74rem; width: auto; }
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .shoplist { column-gap: 24px; }
  .site-foot { padding-block: 24px; }
}
.xsheet th:nth-child(1) { width: 7.2em; }
@media (max-width: 800px) {
  .wordmark { font-size: 1rem; }
  .ico { min-width: 40px; }
  .xsheet th:nth-child(1) { width: 4.4em; }
  .xsheet td:first-child { white-space: normal; }
}

/* Fifth pass: Len's dancing pig on his name, no credits table, five books. */
.hero h1 { position: relative; display: inline-block; }
.pig { --w: 1.07em; position: absolute; left: 2.36em; bottom: 0.585em; width: var(--w); height: 1.63em; cursor: pointer; filter: drop-shadow(0 0 0.5px #23272c) drop-shadow(0 0 0.5px #23272c);
  background: url(https://static.wixstatic.com/media/26473d_f8089b165dc243e2954d5af2196e0629~mv2.png) 0 0 / calc(var(--w) * 24) 100% no-repeat; }
.pig.play { animation: pig-dance 5.45s step-end 2; }
@keyframes pig-dance {
  0.000% { background-position: calc(var(--w) * -0) 0; }
  5.556% { background-position: calc(var(--w) * -1) 0; }
  11.111% { background-position: calc(var(--w) * -2) 0; }
  16.667% { background-position: calc(var(--w) * -3) 0; }
  22.222% { background-position: calc(var(--w) * -4) 0; }
  27.778% { background-position: calc(var(--w) * -5) 0; }
  33.333% { background-position: calc(var(--w) * -6) 0; }
  34.722% { background-position: calc(var(--w) * -7) 0; }
  36.111% { background-position: calc(var(--w) * -8) 0; }
  37.500% { background-position: calc(var(--w) * -9) 0; }
  38.889% { background-position: calc(var(--w) * -10) 0; }
  44.444% { background-position: calc(var(--w) * -11) 0; }
  50.000% { background-position: calc(var(--w) * -12) 0; }
  55.556% { background-position: calc(var(--w) * -13) 0; }
  61.111% { background-position: calc(var(--w) * -14) 0; }
  66.667% { background-position: calc(var(--w) * -15) 0; }
  72.222% { background-position: calc(var(--w) * -16) 0; }
  77.778% { background-position: calc(var(--w) * -17) 0; }
  83.333% { background-position: calc(var(--w) * -18) 0; }
  88.889% { background-position: calc(var(--w) * -19) 0; }
  90.278% { background-position: calc(var(--w) * -20) 0; }
  91.667% { background-position: calc(var(--w) * -21) 0; }
  93.056% { background-position: calc(var(--w) * -22) 0; }
  94.444% { background-position: calc(var(--w) * -23) 0; }
  100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .pig.play { animation: none; } }
.books { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); align-items: end; }
.book .meta { max-width: 26ch; }
@media (max-width: 800px) { .books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sixth pass: the whole caricature on top, name and intro underneath, no red line. */
.hero { display: block; min-height: 0; }
.hero-art { position: static; width: 100%; height: auto; aspect-ratio: auto; }
.hero::before { display: none; }
.stroke { display: none; }
.hero-copy { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px clamp(32px, 6vw, 96px); align-items: end; padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(40px, 5vw, 72px); }
.hero-copy h1 { justify-self: start; }
.hero-copy .hero-info { max-width: 560px; padding-bottom: 6px; }
.hero .trade { max-width: none; }
@media (max-width: 800px) {
  .hero-copy { grid-template-columns: 1fr; padding: 28px var(--gutter) 44px; }
  .hero-copy h1 { margin-bottom: 14px; }
}

/* Seventh pass: illustrations and shop shelves, real work samples, project title fits its panel. */
.p-bio { container-type: inline-size; }
.p-bio h1 { font-size: clamp(1.9rem, 11cqw, 4.4rem); overflow-wrap: break-word; text-wrap: balance; }
.shelf-title { font-size: 1.2rem; margin: 0 0 18px; }
.books + .shelf-title { margin-top: 18px; }
.book.flip video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--graphite); border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); object-fit: cover; }
.book .frame.small { aspect-ratio: 5 / 4; }
.frame.sample { margin: 0; padding: 10px 10px 34px; background-image: none; display: block; }
.frame.sample img { width: 100%; height: 100%; object-fit: cover; }
.frame.sample figcaption { position: absolute; left: 10px; right: 10px; bottom: 7px; font-size: 0.82rem; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame.sample::after { display: none; }
@media (max-width: 800px) {
  .site-head nav a { font-size: 0.84rem; }
}

/* Phones: the pig stands in the open space beside "Simon" instead of on top of it. */
@media (max-width: 800px) {
  .pig { --w: 1.25em; height: 1.9em; left: 3.82em; bottom: 0.05em; }
}

/* A video clip as a work sample. */
.frame.sample.clip { padding-bottom: 52px; }
.frame.sample.clip .video { width: 100%; height: 100%; aspect-ratio: auto; padding: 0; }
.frame.sample.clip figcaption { white-space: normal; line-height: 1.25; bottom: 8px; }

/* Photos of Len beside his bio, pinned like prints. */
.about-photos { display: flex; flex-wrap: wrap; gap: 22px 18px; margin-top: 30px; align-items: flex-start; }
.about-photos img { width: auto; max-width: min(100%, 300px); height: auto; background: #fff; padding: 8px 8px 26px; border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); }
.about-photos img:nth-child(odd) { transform: rotate(-1.6deg); }
.about-photos img:nth-child(even) { transform: rotate(1.3deg); margin-top: 14px; }
@media (max-width: 800px) {
  .about-photos { flex-wrap: nowrap; gap: 12px; margin-top: 20px; }
  .about-photos img { flex: 1 1 0; min-width: 0; max-width: none; width: 50%; padding: 5px 5px 16px; aspect-ratio: 1; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) { .about-photos img { transform: none !important; } }

/* Shop shelf: the flip-through stays beside its sketchbook; the picture book comes after it. */
.books .rindin-the-puffer { order: 1; }

/* Eighth pass: gentle motion. Items rise into place as they scroll into view; the hero picture drifts. */
.hero-frame { overflow: hidden; }
.hero-art { will-change: translate; }
.rv { opacity: 0; translate: 0 16px; transition: opacity 0.38s ease-out, translate 0.38s ease-out; }
.rv.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; transition: none; } }

/* Ninth pass: work tabs spread across the page and take turns; frames get a real peg-bar punch (slot, round hole, slot). */
#work-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#work-tabs button { position: relative; overflow: hidden; padding: 13px 10px; text-align: center; }
#work-tabs.timing button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--red); transform-origin: 0 50%; animation: tab-turn 5s linear both; }
@keyframes tab-turn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.frame::after { box-shadow: none; }
.frame::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 26px; height: 8px; margin-left: -87px; border-radius: 4px; background: var(--paper); border: 1px solid var(--blue-line); box-shadow: 148px 0 0 -1px var(--paper), 148px 0 0 0 var(--blue-line); }
.frame.sample::before { display: none; }
@media (max-width: 800px) {
  #work-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .frame::after { box-shadow: none; }
  .frame::before { width: 20px; margin-left: -54px; box-shadow: 88px 0 0 -1px var(--paper), 88px 0 0 0 var(--blue-line); }
}

/* Sister-site doors with their own logos. */
.door.logo { background: #000; padding: 18px 22px 24px; text-align: center; border: 2px solid #000; }
.door.logo img { display: block; width: 100%; height: clamp(150px, 20vw, 250px); object-fit: contain; margin-bottom: 12px; }
.door.logo span { display: block; color: #dfe5ea; }
.door.logo em { display: inline-block; margin-top: 8px; font-style: normal; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.door.logo:hover { background: #000; border-color: var(--red); }

/* The hero fits the first screen on computers: picture on top, name and welcome in a compact band beneath it. */
@media (min-width: 801px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; height: calc(100svh - 98px); min-height: 500px; max-height: 1200px; }
  .hero-frame { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; }
  .hero-art { width: auto; height: 100%; max-width: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .hero-copy { flex: none; padding-block: 34px 22px; gap: 8px clamp(28px, 4vw, 64px); align-items: center; }
  .hero h1 { font-size: clamp(2.7rem, 4.9vw, 4.6rem); }
  .hero-copy .hero-info { max-width: none; padding-bottom: 0; }
  .hero .trade { font-size: clamp(1.1rem, 1.7vw, 1.45rem); margin-bottom: 6px; }
  .hero .offer { max-width: 62ch; margin-bottom: 14px; }
  .hero .btn { padding: 10px 20px; }
}
@media (min-width: 1180px) {
  .hero-copy .hero-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 64px); align-items: center; }
  .hero-info .trade, .hero-info .offer { grid-column: 1; }
  .hero-info .offer { margin-bottom: 0; }
  .hero-info .actions { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
}

/* Header logo (Len Simon Animation mark) in place of the text wordmark. */
.wordmark { display: block; line-height: 0; }
.wordmark img { display: block; height: 56px; width: auto; }
@media (max-width: 800px) { .wordmark img { height: 46px; } }
@media (min-width: 801px) { .hero { height: calc(100svh - 111px); } }

/* Tenth pass: illustrations row, Instagram posts, logo under the contact details. */
.illus { display: flex; gap: 22px; list-style: none; margin: 0 0 34px; padding: 0; align-items: flex-start; }
.illus li { flex: 1 1 0; min-width: 0; }
.illus a { display: block; }
.illus img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); }
.illus a:hover img, .illus a:focus-visible img { border-color: var(--blue); }
@media (max-width: 800px) { .illus { flex-direction: column; gap: 18px; } .illus li { flex: none; width: 100%; } }
figure.ig { margin: 30px 0 0; max-width: 400px; }
.p-talk figure.ig { margin-top: 0; justify-self: center; width: 100%; }
figure.ig .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
figure.ig blockquote.instagram-media { background: var(--sheet); border: 1px solid var(--blue-line); padding: 22px 18px; font-weight: 700; }
figure.ig figcaption { font-weight: 700; font-size: 0.95rem; margin-top: 8px; }
.contact-logo { display: block; width: min(100%, 300px); height: auto; margin-top: 34px; }

/* Eleventh pass: logo in the left column of Contact, copyright notice in the footer. */
@media (min-width: 801px) {
  .contact .split { grid-template-rows: auto 1fr; }
  .contact .split > div { grid-column: 2; grid-row: 1 / span 2; }
  .contact .split > .contact-logo { grid-column: 1; grid-row: 2; margin-top: 8px; }
}
.site-foot .legal { flex-basis: 100%; max-width: 110ch; font-size: 0.82rem; line-height: 1.5; color: #aeb8c1; }

/* Twelfth pass (launch): coming-soon labels, two illustration rows, hero height without the preview bar, resume page. */
.soon-tag { display: inline-block; vertical-align: middle; margin-left: 14px; padding: 6px 13px; border: 2px solid var(--blue); border-radius: 999px; color: var(--blue); font: 600 0.95rem/1 "Shantell Sans", cursive; letter-spacing: 0; transform: rotate(-3deg); white-space: nowrap; }
.illus:has(+ .illus) { margin-bottom: 22px; }
@media (max-width: 800px) { .illus:has(+ .illus) { margin-bottom: 18px; } }
@media (min-width: 801px) { .hero { height: calc(100svh - 73px); } }
.resume { max-width: 980px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter) 80px; }
.r-head { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; align-items: flex-end; padding-bottom: 22px; border-bottom: 3px solid var(--graphite); }
.r-head h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 900; }
.r-title { font-weight: 700; font-size: 1.15rem; margin: 10px 0 0; }
.r-contact { margin: 0; text-align: right; line-height: 1.7; }
.r-contact a { color: var(--graphite); font-weight: 700; }
.r-print { margin-top: 12px; cursor: pointer; font: inherit; font-weight: 700; padding: 9px 16px; }
.resume section { margin-top: 38px; }
.resume h2 { font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.08em; font-stretch: 105%; color: var(--blue); margin-bottom: 12px; }
.resume h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.r-job { margin: 0 0 16px; }
.r-job strong { display: inline-block; margin-right: 14px; }
.r-job span { color: var(--pencil); }
.r-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.r-table td, .r-table th { text-align: left; vertical-align: top; padding: 6px 14px 6px 0; border-top: 1px solid var(--blue-line); font-weight: 400; }
.r-table th { font-weight: 700; width: 32%; }
.r-table td:first-child { width: 96px; color: var(--pencil); white-space: nowrap; }
.r-table td:last-child { color: var(--pencil); width: 22%; padding-right: 0; }
.r-table a { color: inherit; text-decoration: none; }
.r-table a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 640px) { .r-contact { text-align: left; } .r-table td:last-child { display: none; } .r-table th { width: 40%; } .r-table td:first-child { width: 78px; } }
@media print { .site-head, .site-foot, .r-print { display: none !important; } body { background: #fff; } .resume { padding: 0; max-width: none; } .r-table { font-size: 9.5pt; } .resume section { margin-top: 16pt; } .r-table tr { break-inside: avoid; } }

/* Thirteenth pass: dark theme, following the visitor's system setting. Print always uses the light theme. */
:root { color-scheme: light dark; }
@media screen and (prefers-color-scheme: dark) {
  :root { --paper: #14171b; --sheet: #1d2127; --graphite: #e9edf0; --pencil: #a5aeb7; --blue: #82b7ef; --blue-line: #35424f; --red: #e56b5d; }
  .btn, .tabs button[aria-selected="true"], a.tab[aria-selected="true"] { color: #14171b; }
  .btn:hover { color: #14171b; }
  .site-foot, .p-bio, .video, .book.flip video, .door { background: #0c0e11; }
  .site-foot { border-top: 1px solid var(--blue-line); }
  .door.logo { background: #000; border-color: var(--blue-line); }
  body.has-bg::before { opacity: 0.22; }
  body.has-bg .rail nav, body.has-bg .rail-toggle, .p-talk figcaption { background: rgba(20,23,27,0.86); }
  .frame, .poster, .book img, .book.flip video, .about-photos img, .illus img { box-shadow: 4px 5px 0 rgba(0,0,0,0.45); }
  .wordmark img, .contact-logo { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }
  .pig { filter: invert(1) drop-shadow(0 0 0.5px #e9edf0); }
  .xsheet thead th { background: #232830; }
}

/* Clips shown without a caption keep an even border. */
.frame.sample.clip.nocap { padding-bottom: 10px; }

/* Len's own introduction video, hosted on the site, above the bio. */
.about-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0c0e11; border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); margin-bottom: 28px; }

/* Len's own upright drawing videos on project pages, hosted on the site. */
.p-talk figure.vert { width: 100%; max-width: 380px; justify-self: center; }
.p-talk figure.vert video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #0c0e11; border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); }

/* Captions box under site-hosted videos (off until the viewer turns it on). */
.cc { margin-top: 8px; }
.cc-btn { font: 700 0.85rem var(--display); color: var(--graphite); background: var(--sheet); border: 2px solid var(--graphite); border-radius: 3px; padding: 7px 12px; cursor: pointer; }
.cc-btn[aria-pressed="true"] { background: var(--graphite); color: var(--sheet); }
.cc-box { margin: 8px 0 0; max-width: none; min-height: 4.6em; padding: 10px 14px; background: #0c0e11; color: #fff; font-size: 1.05rem; line-height: 1.4; border: 1px solid var(--blue-line); border-radius: 3px; }
.about-video { margin-bottom: 0; }
.about-video + .cc { margin-bottom: 28px; }

/* Project pages without the side menu; videos pop out to the middle of the screen while they play. */
.proj { display: block; max-width: 1360px; margin: 0 auto; }
.pop { position: fixed !important; z-index: 60; left: 50%; top: calc(50% + 20px); transform: translate(-50%, -50%) !important; translate: none !important; rotate: none !important; opacity: 1 !important; margin: 0 !important; padding: 0 !important; width: min(94vw, calc((100vh - 240px) * var(--ar))) !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important; background: #0c0e11 !important; border: 0 !important; box-shadow: 0 0 0 100vmax rgba(8,10,12,0.88) !important; }
.pop video, .pop iframe.video, .pop .video { display: block; width: 100% !important; height: auto !important; aspect-ratio: var(--ar) !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
.pop figcaption, .pop h3, .pop .meta { display: none !important; }
.pop .cc { margin: 8px 0 0 !important; }
.pop-close { position: absolute; right: 0; top: -44px; font: 700 0.9rem var(--display); color: #fff; background: transparent; border: 2px solid #fff; border-radius: 3px; padding: 6px 14px; cursor: pointer; }
.pop-close:hover { background: #fff; color: #0c0e11; }
.pop-hold { visibility: hidden; }

/* The About video has its own captions, so it has no captions box under it. */
.about-video { margin-bottom: 28px; }

/* Shop: each book links to its own page. */
.book a { display: block; color: inherit; text-decoration: none; }
.book a:hover h3, .book a:focus-visible h3 { color: var(--blue); text-decoration: underline; }
.item-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.item .poster { max-width: none; height: auto; }
.item h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.item-meta { color: var(--pencil); font-size: 1.1rem; margin: 10px 0 18px; }
.item .soon-tag { margin-left: 0; }
.item-sub { font-size: 1.25rem; margin: 30px 0 12px; }
.item figure.vert { margin: 0; max-width: 300px; }
.item figure.vert video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #0c0e11; border: 1px solid var(--blue-line); box-shadow: 4px 5px 0 rgba(35,39,44,0.12); }
.item .pager { padding-inline: 0; padding-bottom: 0; }
@media (max-width: 800px) { .item-grid { grid-template-columns: 1fr; } .item .poster { max-width: 340px; } }

/* Header tabs: the current tab wears the logo yellow, the others on hover. */
:root { --yellow: #fcf468; }
.site-head nav a { padding: 6px 10px; border-radius: 6px; box-shadow: inset 0 -3px 0 transparent; transition: background-color .15s, color .15s, box-shadow .15s; }
.site-head nav { gap: 4px 6px; }
.site-head nav a:hover, .site-head nav a:focus-visible, .site-head nav a.on { background: var(--yellow); color: #14171b; text-decoration: none; }
@media (max-width: 800px) { .site-head nav a { padding: 10px 6px; } }
@media (max-width: 420px) { .site-head nav a { padding: 10px 3px; } }
@media screen and (prefers-color-scheme: dark) {
  .site-head nav a:hover, .site-head nav a:focus-visible, .site-head nav a.on { background: transparent; color: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow); border-radius: 0; }
}

/* While the pointer is on another tab, the yellow moves to it. */
.site-head nav:has(a:hover) a.on:not(:hover) { background: transparent; color: var(--graphite); box-shadow: inset 0 -3px 0 transparent; }

/* Sister-site tiles shown without a link until those sites are ready. */
.door.logo.off em { text-decoration: none; }
.door.logo.off:hover { border-color: #000; }
@media screen and (prefers-color-scheme: dark) { .door.logo.off:hover { border-color: var(--blue-line); } }