@font-face{font-family:Display;src:url('assets/display.ttf') format('truetype');font-display:swap;font-weight:100 900}
@font-face{font-family:Hand;src:url('assets/hand.ttf') format('truetype');font-display:swap;font-weight:400 700}
:root{--red:#f6382b;--yellow:#ffd83d;--blue:#168adb;--ink:#111;--muted:#5b5c60;--rule:#191919;--paper:#fff;--font:Display,'Arial Black',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.5 Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%}button{color:inherit}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-family:var(--font);font-weight:850;line-height:1.03;letter-spacing:-.04em}h2{font-size:clamp(30px,3.3vw,46px)}[hidden]{display:none!important}.wrap{max-width:1320px;width:calc(100% - 88px);margin:auto}.eyebrow{font:700 11px/1.5 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}.tiny-dot{width:7px;height:7px;display:inline-block;background:var(--red);border-radius:50%;margin-right:7px}.skip{position:fixed;top:-100px;left:12px;background:#111;color:white;padding:12px;z-index:100}.skip:focus{top:12px}:focus-visible{outline:3px solid #1984e1;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:116px;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:14px;white-space:nowrap}.brand img{width:103px;height:auto}.brand span{font:850 35px/1 var(--font);letter-spacing:-1.7px}.header nav{display:flex;gap:32px;align-items:center}.header nav a{font:650 16px/1.4 var(--font);position:relative;padding:12px 0}.header nav a:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:3px;background:var(--red);transform:rotate(-5deg) scaleX(0);transition:transform .15s}.header nav a.active:after,.header nav a:hover:after{transform:rotate(-5deg) scaleX(1)}.menu-toggle{display:none}
.hero{position:relative;min-height:605px;isolation:isolate;padding-top:53px;padding-bottom:165px}.hero-copy{position:relative;z-index:2;max-width:720px}.hero h1{font-size:clamp(52px,5.3vw,76px);letter-spacing:-.015em;line-height:1.04;margin-top:20px;font-weight:900;max-width:780px}.hero h1 span{color:var(--red);display:inline-block;position:relative}.hero h1 span:after{content:'';position:absolute;left:-1%;right:-1%;bottom:-10px;height:8px;background:var(--yellow);transform:rotate(-1.5deg);z-index:-1;border-radius:50%}.hero-intro{font:500 25px/1.35 Hand,'Comic Sans MS',cursive;max-width:445px;margin-top:30px}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:32px}.button{display:inline-flex;align-items:center;gap:26px;border:0;padding:17px 23px;font:700 16px var(--font);border-radius:3px;transition:transform .18s,background .18s}.primary{background:var(--red);color:#fff}.primary:hover{background:#d82c22;transform:translateY(-3px)}.player-count{border-left:1px solid #888;padding-left:22px;display:flex;flex-direction:column;line-height:1.2}.player-count strong{font:900 35px/1 var(--font);letter-spacing:-1px}.player-count span{font:500 16px Hand,'Comic Sans MS',cursive;margin-top:3px}.hero-art{position:absolute;right:-30px;top:0;width:77%;height:600px;z-index:-1;pointer-events:none}.hero-art>img{width:100%;height:100%;object-fit:cover;object-position:65% 50%;mask-image:linear-gradient(90deg,transparent 0%,#000 25%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%)}.art-note{font:600 17px/1.12 Hand,'Comic Sans MS',cursive;position:absolute;text-align:center;max-width:230px;transform:rotate(-8deg)}.art-note b{display:block;font:normal 43px/1 Hand,cursive}.balloon-note{top:18px;right:200px}.kite-note{top:178px;right:5px;transform:rotate(8deg)}.card-note{bottom:46px;left:36%;transform:rotate(-6deg);font-size:16px}
.featured{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:14px 0 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feature-card{overflow:hidden;border-radius:5px;position:relative;background:#faf3e7;min-height:505px}.feature-link{display:block;height:100%;position:relative;isolation:isolate}.feature-copy{padding:17px 20px;position:relative;z-index:1;min-height:250px;background:linear-gradient(180deg,#fffffffa 0%,#ffffffdf 65%,#fff0 100%);padding-bottom:75px}.feature-copy .number{font:900 26px/1 var(--font);color:var(--red)}.feature-copy h2{font-size:clamp(27px,2.65vw,38px);margin:7px 0 12px;letter-spacing:-.055em}.feature-copy p{max-width:275px;font-size:15px;line-height:1.45}.text-link{display:inline-block;color:#d62d21;font:600 17px/1.3 Hand,'Comic Sans MS',cursive;margin-top:14px;text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:2px}.feature-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .35s}.feature-card:hover img{transform:scale(1.035)}.harbor .number{color:var(--blue)}.kite .number{color:#aa7800}.kite .feature-copy{min-height:240px}.kite img{object-position:47% 60%}
.games-section{padding-top:54px}.section-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.section-intro h2{margin-top:9px}.handwritten{font:500 24px/1.4 Hand,'Comic Sans MS',cursive;margin-top:10px}.section-doodle{font:normal 100px/1 Hand,cursive;transform:rotate(10deg);color:var(--red);margin-right:30px}.catalog-tools{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:18px 0}.filter-buttons{display:flex;gap:8px;flex-wrap:wrap}.filter-buttons button{border:1px solid #ddd;background:#fff;border-radius:30px;padding:9px 16px;font-size:13px;font-weight:700}.filter-buttons button:hover{border-color:#222}.filter-buttons button.selected{background:#111;color:#fff;border-color:#111}.filter-buttons button span{display:inline-block;margin-left:5px;opacity:.65;font-size:11px}.search{display:flex;align-items:center;border-bottom:1px solid #777;gap:9px;padding:3px 0}.search>span{font-size:26px;line-height:1}.search input{background:none;border:0;width:172px;font-size:14px;padding:6px 0;color:#111;min-width:0}.search-status{font-size:13px;margin-top:8px;min-height:10px}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:25px 0 20px}.catalog-heading h3{font-size:27px}.catalog-heading>a{font-size:12px;font-weight:700;white-space:nowrap}.catalog-heading>a:hover{text-decoration:underline}.count{font:normal 11px Arial,sans-serif;letter-spacing:0;color:#666;display:inline-block;margin-left:15px;border:1px solid #ddd;border-radius:20px;padding:5px 8px;vertical-align:middle}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}.game-card{min-width:0}.game-card>a{display:block;height:100%}.game-image{aspect-ratio:1.75;overflow:hidden;border-radius:5px;background:#f5f5f5;position:relative}.game-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.game-card:hover img{transform:scale(1.05)}.play-bubble{position:absolute;bottom:12px;right:12px;background:#fff;color:#111;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:21px;transition:background .2s}.game-card:hover .play-bubble{background:var(--yellow)}.game-copy{padding:13px 1px 0}.game-copy h4{font-size:22px;letter-spacing:-.035em;line-height:1.1}.game-copy p{color:#555;font-size:13px;line-height:1.5;margin:7px 0 9px;max-width:95%}.game-source{font-size:10px;letter-spacing:.045em;color:#6c6c6c}.game-source b{color:var(--red);font-size:15px;line-height:0;margin-left:6px}.pixie-block{margin-top:52px}.pixie-banner{border-radius:7px;position:relative;isolation:isolate;overflow:hidden;background:#e7f5fb;min-height:218px;display:flex;align-items:center}.pixie-banner>div{padding:28px 30px;position:relative;z-index:1}.pixie-banner h3{font-size:43px;letter-spacing:-.05em;margin:6px 0}.pixie-banner p:not(.eyebrow){font:500 21px Hand,cursive}.pixie-banner img{position:absolute;right:0;width:65%;height:100%;object-fit:cover;z-index:-1;mask-image:linear-gradient(90deg,transparent,#000 50%)}.pixie-banner .text-link{font-size:16px;margin-top:8px}.pixie-block .catalog-heading h4{font-size:24px}.pixie-block .catalog-heading>span{font-size:12px;color:#666}.pixie-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:27px 17px}.pixie-grid .game-image{aspect-ratio:1.2}.pixie-grid h4{font-size:19px;line-height:1.13}.pixie-grid .game-copy p{font-size:12px}.pixie-grid .game-copy{padding-top:11px}.no-results{text-align:center;padding:45px;font-size:16px}.no-results button{border:0;background:none;text-decoration:underline;color:#c3291f}
.about{margin-top:70px;border-top:2px solid #111;border-bottom:2px solid #111;padding:47px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:70px}.about h2{margin-top:12px}.about-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;max-width:510px;margin-top:17px;color:#444}.maker-line{font:600 17px/1.7 Hand,cursive;display:inline-block;margin-top:20px}.maker-line i{font-style:normal;margin:0 7px;color:var(--red)}.tools{padding:25px 20px 12px 40px;border-left:1px solid #bbb;position:relative}.tools h3{font-size:30px;display:inline-block;position:relative}.tools h3:after{content:'';position:absolute;left:-2%;right:0;height:6px;background:var(--yellow);bottom:-7px;transform:rotate(-2deg);z-index:-1}.tools>p{color:#666;font-size:13px;margin-top:20px}.tools ul{list-style:none;padding:0;margin:23px 0 0;display:flex;flex-wrap:wrap;gap:10px}.tools li{font:500 20px/1.2 Hand,cursive;padding:7px 12px;background:#f6f6f4;border-radius:4px}.tools-doodle{position:absolute;right:5px;top:1px;font:normal 60px Hand,cursive;transform:rotate(12deg);color:var(--red)}
.archive{padding-top:54px}.archive-intro{display:flex;align-items:center;justify-content:space-between;gap:20px}.archive-intro h2{margin:10px 0}.archive-intro p:not(.eyebrow){font-size:15px;color:#555}.archive-label{display:inline-block;font-size:11px;line-height:1.3;background:#fff4ce;border:1px solid #ead99a;padding:10px 13px;border-radius:3px;white-space:nowrap}.archive-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:24px;padding:12px 0;border-bottom:1px solid #ddd;font-size:12px;color:#666}.archive-toolbar label{display:flex;gap:10px;align-items:center}.archive-toolbar select{font-size:12px;padding:7px 24px 7px 8px;background:white;border:1px solid #ccc;border-radius:3px;color:#222}.legacy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px 25px;padding-top:28px}.legacy-card{display:flex;align-items:center;gap:14px;min-width:0}.legacy-photo{width:98px;flex-shrink:0;padding:5px 5px 14px;background:#f5f0e4;box-shadow:0 2px 4px #00000012;transform:rotate(-2deg);position:relative}.legacy-card:nth-child(3n) .legacy-photo{transform:rotate(2deg)}.legacy-photo:before{content:'';position:absolute;width:30px;height:10px;background:#efcb77b3;top:-4px;left:34px;transform:rotate(-4deg)}.legacy-card:nth-child(3n+1) .legacy-photo:before{background:#65bab0b3}.legacy-card:nth-child(3n+2) .legacy-photo:before{background:#b19ad8b3}.legacy-photo img{width:88px;height:88px;object-fit:cover}.legacy-card h3{font-size:15px;letter-spacing:-.02em;line-height:1.2}.legacy-card p{font-size:10px;color:#74716b;margin-top:5px}
.contact{margin-top:65px;border-top:2px solid #111;border-bottom:2px solid #111;padding:43px 0;display:flex;align-items:center;justify-content:space-between;gap:35px}.contact h2{font-size:clamp(40px,4.3vw,61px);margin-top:13px}.contact h2 span{position:relative}.contact h2 span:after{content:'';height:6px;position:absolute;bottom:-3px;background:var(--yellow);left:-2%;right:-3%;transform:rotate(-3deg);z-index:-1}.contact-actions{display:flex;align-items:flex-start;flex-direction:column;gap:13px}.email-link{font:750 clamp(18px,2.4vw,30px)/1.3 var(--font);letter-spacing:-.025em}.email-link span{color:var(--red);margin-left:6px}.email-link:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:7px}#copy-email{background:none;border:0;border-bottom:1px solid #aaa;font-size:12px;padding:0 0 5px}#copy-email span{margin-left:9px}#copy-status{font-size:12px;color:#555;min-height:18px}.footer{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:92px;font-size:10px;color:#666}.footer-brand{font:800 17px var(--font);letter-spacing:-.04em;color:#111}.footer-brand span{color:var(--red);margin-left:9px}.footer>a:last-child:hover{text-decoration:underline}
@media(min-width:1600px){.hero h1{font-size:79px}.hero-art{right:-45px}}
@media(max-width:1150px){.wrap{width:calc(100% - 56px)}.hero{min-height:570px}.hero-art{width:80%;height:560px}.hero h1{font-size:62px}.hero-intro{font-size:23px;max-width:360px}.balloon-note{right:140px}.kite-note{right:-5px;top:170px;font-size:14px}.card-note{left:33%;font-size:14px}.feature-copy{padding:16px;min-height:270px}.feature-copy h2{font-size:30px}.feature-copy p{font-size:14px}.feature-card{min-height:480px}.pixie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pixie-grid .game-image{aspect-ratio:1.6}.legacy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.brand span{font-size:30px}.brand img{width:90px}.header nav{gap:25px}.about{gap:35px}.tools{padding-left:25px}.hero-copy .eyebrow{max-width:330px;font-size:10px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.header{min-height:92px}.brand span{font-size:26px}.brand img{width:72px}.brand{gap:10px}.header nav{gap:18px}.header nav a{font-size:14px}.hero{padding-top:30px;padding-bottom:35px;min-height:850px}.hero h1{font-size:clamp(45px,7.2vw,62px)}.hero-copy{max-width:100%}.hero-intro{max-width:430px}.hero-art{top:320px;right:-15px;width:105%;height:490px}.hero-art>img{object-fit:contain;mask-image:none;-webkit-mask-image:none}.art-note{font-size:13px}.balloon-note{top:35px;right:180px}.kite-note{top:120px;right:3px}.card-note{bottom:25px;left:18px;font-size:14px}.featured{gap:12px}.feature-card{min-height:440px}.feature-copy{padding:13px;min-height:280px}.feature-copy h2{font-size:25px}.feature-copy p{font-size:13px}.feature-copy .text-link{font-size:15px}.game-grid{gap:23px 16px}.game-copy h4{font-size:20px}.catalog-tools{flex-wrap:wrap}.search{flex:1;max-width:240px}.search input{width:100%}.about{grid-template-columns:1fr;gap:30px}.tools{border-left:0;border-top:1px solid #ddd;padding:30px 0 0}.tools-doodle{top:20px}.about-copy>p:not(.eyebrow){max-width:100%}.archive-intro{align-items:flex-start;flex-direction:column;gap:14px}.legacy-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}.legacy-card{flex-direction:column;align-items:flex-start;gap:10px}.contact{gap:28px}.footer{flex-wrap:wrap;justify-content:space-between;padding:22px 0}.footer p{order:3;width:100%;text-align:center}.pixie-banner h3{font-size:37px}.section-doodle{font-size:75px}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.header{min-height:85px}.brand img{width:65px}.brand span{font-size:25px}.menu-toggle{display:flex;align-items:center;gap:8px;border:0;background:#f4f4f1;border-radius:3px;font-size:12px;padding:9px 11px}.header nav{display:none;position:absolute;right:0;top:73px;flex-direction:column;align-items:stretch;gap:1px;background:#fff;min-width:160px;padding:10px 20px;border:1px solid #ddd;border-radius:5px;box-shadow:0 6px 20px #0001}.header nav.open{display:flex}.hero{min-height:775px;padding-top:22px;padding-bottom:40px}.hero .eyebrow{font-size:9px}.hero h1{font-size:clamp(39px,10.6vw,58px);margin-top:20px;letter-spacing:-.015em}.hero-intro{font-size:22px;max-width:330px;margin-top:25px}.hero-actions{gap:16px;margin-top:24px}.button{padding:15px 16px;font-size:13px;gap:16px}.player-count{padding-left:15px}.player-count strong{font-size:29px}.player-count span{font-size:14px}.hero-art{top:350px;right:-16px;width:calc(100% + 32px);height:350px}.balloon-note{top:-5px;right:110px;font-size:12px;max-width:150px}.kite-note{right:7px;top:98px;font-size:11px;max-width:110px}.art-note b{font-size:29px}.card-note{bottom:24px;left:12px;font-size:13px;max-width:210px}.featured{grid-template-columns:1fr;padding-top:14px;gap:15px}.feature-card{min-height:390px}.feature-copy{min-height:240px;width:73%;padding:18px;background:linear-gradient(115deg,#fffffffa,#ffffffc9 70%,#fff0)}.feature-copy h2{font-size:33px}.feature-copy p{font-size:14px}.feature-card img{object-position:center}.kite img{object-position:65% center}.kite .feature-copy{width:67%;min-height:280px}.feature-copy .number{font-size:25px}.feature-copy .text-link{font-size:17px}.games-section{padding-top:38px}.section-intro .eyebrow{font-size:9px}.section-intro h2{font-size:35px}.handwritten{font-size:21px;max-width:285px}.section-doodle{margin-right:2px;font-size:65px}.filter-buttons{gap:6px}.filter-buttons button{padding:9px 11px;font-size:11px}.catalog-tools{gap:14px}.search{max-width:none;width:100%;flex-basis:100%}.game-grid,.pixie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 13px}.game-image,.pixie-grid .game-image{aspect-ratio:1.35}.game-copy h4,.pixie-grid h4{font-size:19px}.game-copy p,.pixie-grid .game-copy p{font-size:12px}.game-source{font-size:9px}.catalog-heading{align-items:flex-start}.catalog-heading h3{font-size:24px}.catalog-heading>a{font-size:10px}.count{display:block;width:max-content;margin:8px 0 0}.pixie-block{margin-top:36px}.pixie-banner{min-height:200px}.pixie-banner>div{padding:22px}.pixie-banner h3{font-size:32px}.pixie-banner img{width:100%;opacity:.55;mask-image:linear-gradient(90deg,transparent,#000);object-position:65%}.pixie-block .catalog-heading{flex-direction:column;gap:7px}.pixie-block .catalog-heading h4{font-size:24px}.about{margin-top:45px;padding:35px 0}.about h2{font-size:37px}.about-copy>p:not(.eyebrow){font-size:14px}.tools h3{font-size:29px}.tools li{font-size:18px;padding:7px 10px}.archive{padding-top:38px}.archive h2{font-size:34px}.archive-intro p:not(.eyebrow){font-size:14px}.archive-toolbar{font-size:10px;gap:12px}.archive-toolbar p{max-width:160px}.archive-toolbar label{gap:5px}.legacy-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 10px}.legacy-card h3{font-size:13px;max-width:110px}.legacy-card p{font-size:9px}.legacy-photo{width:96px}.legacy-photo img{width:86px;height:86px}.contact{margin-top:45px;padding:32px 0;flex-direction:column;align-items:flex-start}.contact h2{font-size:49px}.email-link{font-size:23px}.footer{gap:16px}.footer p{font-size:9px}}
/* Keep illustrations clear of the headline and keep the full kite in view. */
@media(min-width:801px){
  .hero-art{right:0;width:83%;top:18px}
  .hero-art>img{object-fit:contain;object-position:right bottom;mask-image:linear-gradient(90deg,transparent 0%,transparent 23%,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 23%,#000 70%)}
  .hero-copy{max-width:720px;background:linear-gradient(90deg,#fff 0%,#ffffffed 44%,#ffffff00 82%)}
  .balloon-note{top:auto;bottom:330px;right:24%;font-size:15px}
  .kite-note{top:auto;bottom:275px;right:0;font-size:14px}
}
@media(min-width:801px) and (max-width:1150px){
  .hero-art{top:32px}
  .hero-copy{max-width:610px;background:linear-gradient(90deg,#fff 0%,#fffffff5 43%,#ffffff00 86%)}
  .hero h1{font-size:58px}
  .balloon-note{top:auto;bottom:305px;right:22%;font-size:13px}
  .kite-note{top:auto;bottom:260px;right:0;font-size:12px;max-width:120px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* Give the header wordmark breathing room and a smaller domain suffix. */
.header .brand > span{letter-spacing:-.015em}
.header .brand .brand-domain{font-size:.48em;letter-spacing:0;margin-left:.1em;font-weight:700}
@media(max-width:380px){.header .brand{gap:8px}.header .brand > span{font-size:22px}.header .brand img{width:55px}}

/* Bring the hero introduction closer to the header. */
.hero{padding-top:8px}
@media(max-width:800px){.hero{padding-top:6px}}

/* Keep PixieGlade copy readable over the scenic banner. */
.pixie-banner>div{width:60%;max-width:670px}
.pixie-banner p:not(.eyebrow){max-width:470px}
.pixie-banner img{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 30%,#000 88%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 30%,#000 88%)}
@media(max-width:800px){.pixie-banner>div{width:70%}.pixie-banner p:not(.eyebrow){font-size:20px}}
@media(max-width:560px){.pixie-banner>div{width:100%;max-width:none;background:linear-gradient(90deg,#e7f5fb 0%,#e7f5fbeb 65%,#e7f5fb80 100%)}.pixie-banner p:not(.eyebrow){max-width:330px}.pixie-banner img{opacity:.35}}

/* Annotations share the image's intrinsic coordinate space at every width. */
.illustration-stage{position:absolute;bottom:0;right:0;width:100%;aspect-ratio:1774 / 887;container-type:inline-size}
.illustration-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.annotation-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:#171717;pointer-events:none}
.annotation-arrows>path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;marker-end:url(#note-arrow)}
.hero .illustration-stage .art-note{position:absolute;margin:0;bottom:auto;max-width:none;font-size:clamp(10px,1.8cqw,17px);line-height:1.15;text-align:center;transform:rotate(-6deg)}
.hero .illustration-stage .balloon-note{top:-18%;left:51%;right:auto;width:24%}
.hero .illustration-stage .kite-note{top:39%;right:0;left:auto;width:23%;transform:rotate(6deg);background:#ffffffbd;border-radius:5px;padding:3px}
.hero .illustration-stage .card-note{top:113%;left:6%;right:auto;width:39%;transform:rotate(-4deg)}
@media(min-width:801px){.illustration-stage>img{mask-image:linear-gradient(90deg,transparent 0%,transparent 23%,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 23%,#000 70%)}.hero-art{bottom:100px;top:auto;height:440px}.hero{min-height:660px}}
@media(max-width:800px){.hero-art{height:auto;aspect-ratio:1774 / 887;top:400px}.hero{min-height:900px}}
@media(max-width:560px){.hero-art{top:430px}.hero{min-height:810px}.hero .illustration-stage .art-note{font-size:clamp(10px,2.3cqw,13px)}}

/* Keep all hero annotations inside the image, including wide desktop layouts. */
.hero .illustration-stage .balloon-note{top:4%;left:40%;width:24%}
.hero .illustration-stage .card-note{top:91%;left:7%;width:37%}
@media(min-width:801px){.illustration-stage>img{mask-image:none;-webkit-mask-image:none}}

.hero .illustration-stage .balloon-note,.hero .illustration-stage .card-note{background:#fffffff0;border-radius:4px;padding:4px 6px}

/* Feather the featured-card readability layer on both its lower and right edges. */
.feature-copy{background:none!important;isolation:isolate}
.feature-copy:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 35%,rgba(255,255,255,.65) 62%,rgba(255,255,255,.22) 83%,rgba(255,255,255,0) 100%);mask-image:linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.8) 70%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%,rgba(0,0,0,.8) 70%,transparent 100%)}

/* Let the small-screen hero flow with its content instead of reserving a fixed height. */
@media(max-width:800px){
  .hero{min-height:0;padding-bottom:24px}
  .hero-art{position:relative;top:auto;right:auto;bottom:auto;width:calc(100% + 32px);height:auto;aspect-ratio:1774 / 887;margin:24px -16px 0}
  .illustration-stage{position:relative;inset:auto;width:100%;aspect-ratio:1774 / 887}
}
@media(max-width:560px){
  .hero{min-height:0;padding-bottom:20px}
  .hero-art{top:auto;margin-top:20px}
}

/* Keep decorative illustration edges from creating horizontal page scrolling. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media(max-width:800px){
  .hero-art{width:100%;margin-left:0;margin-right:0}
  .hero .illustration-stage .art-note{box-sizing:border-box}
}
@media(max-width:560px){
  .header{gap:12px}
  .brand{min-width:0}
  .legacy-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .legacy-photo{max-width:100%}
  .legacy-photo img{max-width:100%}
  .email-link{overflow-wrap:anywhere}
}

.hero-welcome{font:400 18px/1.5 Hand,"Comic Sans MS",cursive;max-width:445px;margin-top:14px}
@media(max-width:560px){.hero-welcome{font-size:17px;max-width:330px}}

/* Match both introductory paragraphs at every breakpoint. */
.hero-welcome{font:500 25px/1.35 Hand,'Comic Sans MS',cursive;max-width:445px}
@media(max-width:1150px){.hero-welcome{font-size:23px;max-width:360px}}
@media(max-width:800px){.hero-welcome{max-width:430px}}
@media(max-width:560px){.hero-welcome{font-size:22px;max-width:330px}}

/* Feather the hero copy's backing rather than ending it at the button row. */
@media(min-width:801px){
  .hero-copy{background:none!important;isolation:isolate}
  .hero-copy:before{content:'';position:absolute;inset:-10px -15px -45px -12px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#fff 0%,#fffffff0 44%,#ffffff00 86%);mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.8) 82%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.8) 82%,transparent 100%)}
}

/* Keep the logo and navigation visible while the page scrolls. */
.header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax -1px)}
html{scroll-padding-top:132px}
@media(max-width:800px){html{scroll-padding-top:108px}}
@media(max-width:560px){html{scroll-padding-top:101px}.header{clip-path:inset(0 -100vmax -260px)}}

.header{box-shadow:none;clip-path:none;isolation:isolate}
.header:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#fff;z-index:-1;pointer-events:none}

/* Blend the artwork's left boundary into the white desktop background. */
@media(min-width:801px){
  .illustration-stage>img{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 3%,rgba(0,0,0,.6) 8%,#000 15%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 3%,rgba(0,0,0,.6) 8%,#000 15%,#000 100%)}
}

/* A handwritten invitation to play, with the attribution as its second line. */
.play-quote{justify-content:flex-start;gap:18px;align-items:flex-start;padding:12px 0 28px;margin-bottom:10px}
.play-quote .quote-mark{font:900 100px/.85 var(--font);color:var(--red);flex-shrink:0;transform:rotate(-8deg);margin-top:5px}
.play-quote h2{font:700 clamp(25px,3.1vw,41px)/1.35 Hand,'Comic Sans MS',cursive;letter-spacing:-.025em;margin:0}
.play-quote h2 span{position:relative;white-space:nowrap;isolation:isolate}
.play-quote h2 span:after{content:'';position:absolute;left:-4%;right:-4%;height:7px;bottom:2px;background:var(--yellow);border-radius:50%;transform:rotate(-3deg);z-index:-1}
.quote-credit{font:600 11px/1.5 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-top:12px;color:#595959}
@media(max-width:560px){.play-quote{gap:10px;padding:6px 0 22px}.play-quote .quote-mark{font-size:68px}.play-quote h2{font-size:27px}.quote-credit{font-size:10px;letter-spacing:.1em}}

/* Center the quote with understated opening and closing quotation marks. */
.section-intro.play-quote{justify-content:center;text-align:center;gap:0}
.play-quote>div{width:100%}
.play-quote h2{color:var(--ink)}
.quote-credit{text-align:center}

/* Reduce the whitespace framing the centered quote. */
.games-section{padding-top:24px}
.section-intro.play-quote{padding:4px 0 12px;margin-bottom:0}
@media(max-width:560px){.games-section{padding-top:20px}.section-intro.play-quote{padding:2px 0 12px}}

.hero h1 .headline-punctuation{color:var(--ink);font-weight:inherit}