@font-face{font-family:NotebookHand;src:url(assets/hand.ttf);font-display:swap}
*{box-sizing:border-box}html{background:#151614}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 45%,#32322b 0,#1f201c 52%,#121311 100%);color:#d3c5a6;font-family:NotebookHand,'Comic Sans MS',cursive}.notebook-space{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:25px 20px 15px;gap:19px}.notebook{position:relative;width:min(700px,calc((100svh - 106px)*.75),calc(100vw - 48px));aspect-ratio:3/4;perspective:1900px;filter:drop-shadow(12px 18px 18px #0009);isolation:isolate}.page-stack{position:absolute;inset:5px -5px -7px 4px;border-radius:3px 8px 9px 2px;background:repeating-linear-gradient(0deg,#746b54 0,#d5c7a2 1px,#e9ddbe 2px,#afa080 3px);box-shadow:4px 4px 0 #13140f,0 0 0 2px #2c2a22;transform:rotate(.3deg)}.first-page{position:absolute;inset:0;background:#eee4c9 url(assets/paper.webp) center/cover;border-radius:2px 7px 8px 2px;box-shadow:inset 17px 0 20px -14px #33220d99,inset -2px 0 6px #b5a780;overflow:hidden;color:#252920}.first-page:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#513a292b,transparent 6%,transparent 98%,#fff5)}.first-page h1{font:400 clamp(30px,5.7vw,55px)/1.3 NotebookHand,'Comic Sans MS',cursive;position:relative;margin:15% 9% 0 12%;width:fit-content;transform:rotate(-4deg);letter-spacing:.015em}.first-page h1:after{content:'';position:absolute;left:0;right:6%;bottom:-9px;border-bottom:1px solid #252920a0;border-radius:50%;height:8px;transform:rotate(-1deg)}.first-page h1:focus{outline:none}.front-cover{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:3px 7px 8px 2px;background:#191915;cursor:pointer;transform-origin:left center;transform:rotateY(0deg);transition:transform 950ms cubic-bezier(.35,.02,.2,1),filter 950ms ease;backface-visibility:hidden;z-index:3;box-shadow:4px 3px 8px #0006;overflow:hidden}.front-cover img{display:block;width:100%;height:100%;object-fit:fill}.front-cover:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 7px 0 10px -7px #000,inset 0 0 2px #d5c09844}.front-cover:hover{transform:rotateY(-4deg)}.front-cover:focus-visible{outline:3px solid #e2cb8d;outline-offset:7px}.notebook.is-open .front-cover{transform:rotateY(-155deg);filter:brightness(.6);pointer-events:none}.notebook-controls{height:42px;display:flex;align-items:center;justify-content:center}.notebook-controls button{border:0;border-bottom:1px solid #ad9d7970;background:transparent;font:25px/1.3 NotebookHand,'Comic Sans MS',cursive;color:#d8cba9;padding:5px 10px;cursor:pointer}.notebook-controls button:hover{color:#fff0c6}.notebook-controls button:focus-visible{outline:2px solid #e2cb8d;outline-offset:4px}.notebook-controls button:disabled{cursor:default;opacity:.65}@media(max-width:500px){.notebook-space{padding:18px 18px 10px;gap:17px}.notebook{width:min(calc(100vw - 42px),calc((100svh - 90px)*.75))}.notebook-controls button{font-size:24px}}@media(prefers-reduced-motion:reduce){.front-cover{transition:none}.front-cover:hover{transform:none}.notebook.is-open .front-cover{visibility:hidden}}
body{overflow-x:clip}
/* Council artwork on the cover's plain paper label. */
.front-cover .borough-logo{position:absolute;left:28%;top:11.2%;width:49%;height:auto;object-fit:contain;pointer-events:none}
.front-cover .borough-logo{left:30%;top:9.4%;width:47%}
/* The first handwritten concept page. */
.first-page{padding:27px 5% 45px}
.first-page h1{font-size:clamp(39px,7.5vw,64px);line-height:1.2;text-align:center;margin:8px auto 36px;width:fit-content;max-width:100%;transform:rotate(-2deg);letter-spacing:0}
.first-page h1:after{left:5%;right:3%;bottom:-8px;border-bottom-width:2px}
.notebook.is-reading{width:min(760px,calc(100vw - 44px));aspect-ratio:auto}
.notebook.is-reading .front-cover{visibility:hidden}
.notebook.is-reading .first-page{position:relative;inset:auto;min-height:900px;overflow:visible;background-size:100% auto}
.brainstorm{position:relative;height:400px;margin:0 0 32px;isolation:isolate;color:#30362c}
.spider-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.85}
.brainstorm h2{position:absolute;left:50%;top:48.5%;transform:translate(-50%,-50%) rotate(-4deg);margin:0;padding:9px 22px 12px;font-size:40px;font-weight:400;line-height:1;border:2px solid #30362c;border-radius:47% 54% 43% 51%/48% 40% 55% 45%}
.brainstorm h2:after{content:'';position:absolute;inset:-5px 4px -3px -5px;border:1px solid #30362c94;border-radius:50% 44% 49% 42%;transform:rotate(5deg);pointer-events:none}
.ideas{margin:0;padding:0;list-style:none}.idea{position:absolute;width:29%;text-align:center;font-size:30px;line-height:1.05;transform:translate(-50%,-50%) rotate(var(--tilt));padding:2px 3px}
.idea-1{left:17%;top:14%;--tilt:-7deg}.idea-2{left:50%;top:11%;--tilt:3deg}.idea-3{left:83%;top:14%;--tilt:8deg;color:#793b2f}
.idea-4{left:13%;top:49%;--tilt:-10deg;color:#793b2f;font-size:37px}.idea-5{left:87%;top:48%;--tilt:6deg;font-size:37px}
.idea-6{left:17%;top:84%;--tilt:-5deg}.idea-7{left:50%;top:88%;--tilt:4deg}.idea-8{left:83%;top:84%;--tilt:-6deg}
.film-notes{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:start;padding:15px 15px 20px;margin:0 auto 0;max-width:635px}
.polaroid-slot{margin:0;min-width:0;transform:rotate(-5deg)}.polaroid-slot:nth-child(2){transform:rotate(5deg);margin-top:26px}
.polaroid{display:block;position:relative;padding:12px 12px 18px;background:#f4eddb;box-shadow:1px 2px 4px #51463130,5px 8px 12px #51463124;text-decoration:none;color:#302f25;transition:transform .2s,box-shadow .2s}
.polaroid[aria-disabled="true"]{cursor:default}.polaroid[href]:hover{transform:translateY(-5px);box-shadow:3px 8px 10px #51463140}.polaroid[href]:focus-visible{outline:3px solid #914c38;outline-offset:7px}
.masking-tape{position:absolute;left:calc(50% - 45px);top:-16px;width:90px;height:32px;background:#c3a56999 url(assets/paper.webp) center/300px;background-blend-mode:multiply;opacity:.78;transform:rotate(6deg);z-index:2;clip-path:polygon(0 7%,8% 0,17% 6%,26% 0,34% 6%,42% 0,53% 5%,63% 0,74% 6%,83% 0,92% 5%,100% 0,98% 35%,100% 61%,99% 96%,88% 100%,78% 95%,69% 100%,58% 95%,50% 100%,41% 96%,32% 100%,23% 94%,14% 100%,3% 95%,0 75%,2% 45%)}
.polaroid-slot:nth-child(2) .masking-tape{transform:rotate(-9deg)}
.photo-window{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1/1;width:100%;background:#353a34 url(assets/grain.svg);color:#ded5b7;border:1px solid #171e1544;box-shadow:inset 0 0 25px #10171055;text-align:center;overflow:hidden}
.documentary-window{background-color:#3e3c32}.film-lettering{font-size:38px;line-height:1.1;transform:rotate(-4deg)}.documentary-window .film-lettering{transform:rotate(3deg)}
.video-status{font-size:21px;line-height:1.2;margin-top:19px;color:#d0c19e}.photo-caption{display:block;font-size:27px;line-height:1.15;text-align:center;margin-top:14px}
@media(max-width:560px){.first-page{padding:23px 4% 40px}.notebook.is-reading{width:calc(100vw - 32px)}.notebook.is-reading .first-page{min-height:0}.first-page h1{font-size:46px;margin:3px auto 28px}.brainstorm{height:390px;margin-bottom:24px}.brainstorm h2{font-size:30px;padding:8px 14px 10px}.idea{font-size:24px;width:30%}.idea-4,.idea-5{font-size:29px}.idea-6,.idea-7,.idea-8{font-size:23px}.idea-1{left:16%}.idea-3{left:84%}.idea-4{left:13%}.idea-5{left:87%}.film-notes{gap:18px;padding:18px 7px 10px}.polaroid{padding:8px 8px 13px}.photo-caption{font-size:22px;margin-top:12px}.film-lettering{font-size:28px}.video-status{font-size:18px;margin-top:12px}.masking-tape{width:66px;height:26px;left:calc(50% - 33px);top:-13px}}
@media(max-width:360px){.first-page h1{font-size:40px}.brainstorm{height:405px}.idea{font-size:22px}.idea-4,.idea-5{font-size:26px}.idea-6,.idea-7,.idea-8{font-size:21px}.film-notes{grid-template-columns:1fr;max-width:235px;gap:32px}.polaroid-slot:nth-child(2){margin-top:0}.film-lettering{font-size:37px}.photo-caption{font-size:27px}}
/* Faded council ink: original artwork, with paper creases and rubbed-through ink. */
.front-cover .borough-logo{opacity:.79;filter:sepia(.32) saturate(.7);mix-blend-mode:multiply;transform:rotate(-1.1deg);-webkit-mask-image:url(assets/logo-wear.svg);mask-image:url(assets/logo-wear.svg);-webkit-mask-size:100% 100%;mask-size:100% 100%;clip-path:polygon(1% 3%,12% 0,23% 3%,37% 1%,49% 3%,63% 0,78% 2%,98% 0,100% 20%,98% 48%,100% 77%,98% 98%,76% 100%,58% 97%,38% 100%,20% 97%,0 100%,2% 71%,0 42%)}
@font-face{font-family:ScrapHand;src:url(assets/scrap-hand.ttf);font-display:swap}
.first-page{font-family:ScrapHand,NotebookHand,cursive}
.first-page h1{font-family:ScrapHand,NotebookHand,cursive;font-size:clamp(35px,6.4vw,58px);transform:rotate(-2.6deg);letter-spacing:-.045em;margin-bottom:42px}
.first-page h1:after{border-radius:38% 57% 46% 43%;transform:rotate(1.4deg);border-color:#34372ccc;box-shadow:0 3px 0 -2px #34372c80}
.brainstorm h2{font-size:36px;letter-spacing:-.05em;transform:translate(-50%,-50%) rotate(-6deg);border-width:1.5px 2px 1px 2px}
.idea{font-size:25px;line-height:1.2;letter-spacing:-.04em;text-align:left;width:28%;padding-left:7px}
.idea-2,.idea-7{text-align:center}.idea-3,.idea-5,.idea-8{text-align:right;padding-right:7px}
.idea-4,.idea-5{font-size:32px}.idea-6{font-size:24px}.idea-8{font-size:24px}
.pen-word{display:inline-block;transform:rotate(-1.5deg);position:relative}
.pen-word:nth-of-type(2n){transform:rotate(2deg) translateY(1.5px)}
.pen-word:nth-of-type(3n){transform:rotate(-2deg) translateY(-1px);letter-spacing:-.06em}
.idea-3 .pen-word:last-child,.idea-4 .pen-word,.idea-5 .pen-word{border-bottom:1px solid currentColor;border-radius:0 0 39% 23%;padding-bottom:2px}
.idea-4:after{content:'';position:absolute;left:9px;bottom:-3px;width:65%;height:4px;border-bottom:1px solid #793b2fa0;transform:rotate(-3deg)}
.spider-lines{opacity:.72}.spider-lines path:nth-child(3n){stroke-width:1.2}.spider-lines path:nth-child(2n){stroke-width:2}
.photo-caption{font-size:23px;letter-spacing:-.04em;transform:rotate(-1deg)}.film-lettering{font-size:33px}.video-status{font-size:18px}
@media(max-width:560px){.first-page h1{font-size:clamp(29px,8.5vw,46px);margin-bottom:35px}.brainstorm h2{font-size:27px;padding-left:12px;padding-right:12px}.idea{font-size:19px;width:30%;line-height:1.25;padding-left:3px}.idea-4,.idea-5{font-size:25px}.idea-6,.idea-7,.idea-8{font-size:18px}.photo-caption{font-size:18px}.film-lettering{font-size:25px}.video-status{font-size:15px}}
@media(max-width:360px){.idea{font-size:17px}.idea-4,.idea-5{font-size:23px}.idea-6,.idea-7,.idea-8{font-size:16px}.photo-caption{font-size:23px}}