@font-face{font-family:Sketch;src:url('assets/handwritten.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{color-scheme:light;--paper:#eeeade;--ink:#24231f;--header:76px;--footer:44px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{display:flex;flex-direction:column;min-height:100svh;background:var(--paper) url('assets/paper.png') center top/cover fixed}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid #af3934;outline-offset:3px}
::selection{background:#d8bbb0}
header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header);padding:12px 3.5vw;background:transparent}
.location{font-family:Sketch,cursive;font-size:21px;font-weight:500;letter-spacing:.045em;margin:0;line-height:1.5;transform:rotate(-1deg)}
.brand{display:flex;align-items:center}
.brand img{display:block;width:66px;height:auto;mix-blend-mode:multiply}
main{flex:1;display:flex;align-items:center;justify-content:center;min-height:calc(100svh - var(--header) - var(--footer));padding:0 0 12px}
.artwork{position:relative;width:min(100%,calc((100svh - var(--header) - var(--footer) - 12px)*1.5));flex:none;aspect-ratio:3/2}
.illustration{display:block;width:100%;height:auto}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){:root{--header:72px}header{padding:10px 5vw;gap:14px}.location{font-size:17px;letter-spacing:.015em}.brand img{width:48px}main{align-items:flex-start;padding-top:8vh}.artwork{width:100%}}
@media(max-height:500px) and (min-width:701px){:root{--header:64px}.brand img{width:48px}.location{font-size:18px}}

.film-motion,.film-controls{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.film-frame{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.portrait{clip-path:polygon(4.9% 28%,25.4% 25%,26.5% 47.7%,5.8% 50%)}
.hockey{clip-path:polygon(27.4% 25%,47.5% 22.8%,48.8% 45.8%,28% 47.5%)}
.shoe{clip-path:polygon(49.4% 22.5%,69.8% 20.8%,71% 43.5%,50.3% 45.3%)}
.building{clip-path:polygon(71.5% 20.8%,93.4% 18.1%,94.5% 41%,72% 43%)}
.film-frame:focus-visible{outline:none;background:rgba(175,57,52,.12)}
@media(prefers-reduced-motion:reduce){.film-frame{cursor:default}}

.site-footer{flex:none;min-height:var(--footer);padding:12px 16px 16px;text-align:center;font-size:11px;line-height:16px;letter-spacing:.03em;color:#5b574f}
.site-footer span{margin:0 7px}
.site-footer a{white-space:nowrap}
.site-footer a:hover{text-decoration:underline;text-underline-offset:3px}

/* Independent static note placement for the mobile composition. */
.artwork{--note:polygon(10.8% 61%,37.3% 53.5%,40.6% 73%,13.5% 80.4%);animation:art-arrive .6s ease-out both}
.note-wrap,.raccoon-detail{position:absolute;inset:0;pointer-events:none}
.note-wrap{display:none}
.paper-note{position:absolute;inset:0;width:100%;height:100%;clip-path:var(--note)}
.paper-note img,.raccoon-detail img{display:block;width:100%;height:auto}
.mobile-raccoon{display:none!important}
.blink-layer{position:absolute;inset:0;opacity:0;clip-path:polygon(72% 57%,83% 55%,83% 62%,72% 63%)}
.blink-layer.is-blinking{animation:raccoon-blink .85s cubic-bezier(.45,0,.25,1) both}
@keyframes raccoon-blink{0%,100%{opacity:0}42%,48%{opacity:1}}
@keyframes art-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
  main{padding-top:0;align-items:center;overflow:hidden}
  .artwork{width:100%;aspect-ratio:5/7}
  .illustration{clip-path:polygon(0 0,100% 0,100% 41%,65% 43%,61% 60%,0 60%)}
  .film-motion,.film-controls{bottom:auto;height:auto;aspect-ratio:3/2}
  .raccoon-detail{inset:auto;left:-70%;top:-3.5%;width:170%;aspect-ratio:3/2;clip-path:polygon(65% 42%,85% 42%,100% 60%,100% 100%,46% 100%,48% 83%,58% 66%)}
  .mobile-raccoon{display:block!important}
  .note-wrap{display:block;inset:auto;left:-5%;top:42%;width:130%;aspect-ratio:3/2}
  .site-footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.artwork,.blink-layer.is-blinking{animation:none}}