@font-face{font-family:Barlow;src:url('/assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url('/assets/fonts/Barlow-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:light;--bg:#fff;--ink:#272521;--muted:#62594c;--accent:#953e39;--line:#b5aaa0;--red:#b6534d;--pink:#c98696;--blue:#a9c8cb;--mustard:#c7a247;--olive:#898267}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);font:20px/1.6 Barlow,Arial,sans-serif;background:repeating-linear-gradient(179.5deg,#fff 0px,#fff 39px,#c98696 39px,#c98696 60px,#fff 60px,#fff 106px,#a9c8cb 106px,#a9c8cb 120px,#fff 120px,#fff 166px,#b6534d 166px,#b6534d 194px,#fff 194px,#fff 238px,#c7a247 238px,#c7a247 257px,#fff 257px,#fff 305px,#898267 305px,#898267 315px,#fff 315px,#fff 367px,#c98696 367px,#c98696 385px,#fff 385px,#fff 438px,#34312d 438px,#34312d 450px,#fff 450px,#fff 506px)}
a{color:inherit;text-underline-offset:.22em}a:hover{color:var(--accent)}img{display:block;max-width:100%;height:auto}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}p{margin:0 0 1.2em}
.site-header,main,.site-footer{width:calc(100% - 64px);max-width:1128px;margin:0 auto;background:#fff;padding-left:32px;padding-right:32px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:24px;padding-bottom:24px;border-bottom:3px solid var(--red)}.wordmark{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-decoration:none;flex-shrink:0;width:350px;max-width:100%}.hkpg-logo{width:180px;height:auto}.company-name{font:20px/1.2 Barlow,Arial,sans-serif;max-width:350px}.site-header nav{display:flex;gap:28px;flex-wrap:wrap;align-items:center;font-size:20px;line-height:1.3}.site-header nav a{padding:10px 0;text-decoration:none}
h1,h2,h3{font-family:inherit;font-weight:700;line-height:1.15;letter-spacing:0}h1{font-size:44px;margin:20px 0 28px}h2{font-size:32px;margin:0 0 24px}h3{font-size:24px;margin:0 0 20px}.eyebrow{font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}.hero{padding:36px 0 28px}.intro,.reading,.performance-copy{font-size:20px;line-height:1.6;max-width:800px}.text-link{display:inline-block;margin:0;font-size:20px}.image-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:42px}.image-strip a{min-width:0;text-decoration:none}.image-strip img{width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center bottom}.image-strip span{display:block;font-size:20px;line-height:1.3;margin-top:12px}
.section{padding:42px 0;border-top:3px solid var(--line)}.current{border-top-color:var(--blue)}.current h2,.audition-block h3{color:var(--accent)}.audition-block{border-top:3px solid var(--mustard);padding:26px 0 0;margin-top:30px;max-width:800px}.about{border-top-color:var(--pink)}.archive{border-top-color:var(--olive)}.section-heading span{display:block;font-size:18px;margin:-12px 0 24px}.attribution{font-size:18px;color:var(--muted)}.work-list{list-style:none;margin:0;padding:0}.work-list li{border-top:1px solid var(--line)}.work-list li:last-child{border-bottom:1px solid var(--line)}.work-list a{display:grid;grid-template-columns:120px 1fr 100px;gap:18px;align-items:baseline;padding:22px 0;text-decoration:none}.work-title{font-size:24px;line-height:1.3}.work-year,.work-type{font-size:18px;color:var(--muted)}.work-type{text-align:right}.site-footer{border-top:3px solid var(--red);display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-top:28px;padding-bottom:28px;font-size:18px}.site-footer a{text-decoration:none}
.performance{padding-top:36px;padding-bottom:24px}.performance h1{max-width:900px}.back{display:inline-block;margin-bottom:16px;font-size:18px}.metadata{font-size:18px;color:var(--muted);margin-bottom:36px}.performance-copy,.performance-credits{max-width:800px;margin:40px auto}.performance-credits{border-top:3px solid var(--mustard);padding-top:24px}.performance-credits h2{font-size:24px}.photo-lead{display:block;width:fit-content;max-width:100%;margin:0 auto 36px;cursor:zoom-in}.photo-lead img{width:auto;max-width:min(100%,760px);max-height:750px;object-fit:contain}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin:40px auto}.gallery a{min-width:0;cursor:zoom-in}.gallery img{width:100%;height:auto}.small-gallery{max-width:760px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}.work-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:56px;font-size:18px}.work-nav-top{margin:0 0 30px;padding:16px 0;border-bottom:1px solid var(--line)}
dialog{background:#fff;color:var(--ink);border:1px solid var(--line);padding:16px;width:min(980px,94vw);max-height:94dvh}dialog::backdrop{background:rgba(25,23,20,.94)}.image-stage{display:flex;justify-content:center;align-items:center}dialog img{max-width:100%;max-height:calc(94dvh - 140px);width:auto;height:auto;object-fit:contain}.controls{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:18px}.controls button{background:#fff;color:var(--ink);border:1px solid var(--line);padding:10px 12px;min-height:44px;cursor:pointer}.skip{position:absolute;left:12px;top:-100px;background:#fff;padding:12px;z-index:5}.skip:focus{top:12px}
@media(max-width:900px){.site-header{flex-wrap:wrap}.site-header nav{width:100%}}
@media(max-width:700px){.site-header,main,.site-footer{width:calc(100% - 24px);padding-left:16px;padding-right:16px}.site-header{gap:20px}.wordmark{width:100%}.company-name{font-size:20px}.hkpg-logo{width:160px}.site-header nav{gap:20px;font-size:20px}.hero{padding:28px 0 24px}.image-strip{grid-template-columns:1fr;gap:24px}.section{padding:32px 0}h1{font-size:36px}h2{font-size:32px}.work-list a{grid-template-columns:88px 1fr;gap:12px}.work-type{display:none}.work-title{font-size:24px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.small-gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}.performance-copy{margin:30px auto}.site-footer{display:block}.site-footer a{display:block;margin:0 0 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:700px){.site-header nav{column-gap:24px;row-gap:0}.site-header nav a:first-child{width:100%}}

/* Four text roles. Color is reserved for artwork and rules. */
:root{--type-title:2.5rem;--type-section:2rem;--type-subhead:1.5rem;--type-body:1.25rem;--muted:var(--ink)}
body{font-size:var(--type-body)}
h1{font-size:var(--type-title);font-weight:700;line-height:1.15;margin-bottom:24px}
h2{font-size:var(--type-section);font-weight:700;line-height:1.2;margin-bottom:20px}
h3,.performance-credits h2,.work-title{font-size:var(--type-subhead);font-weight:700;line-height:1.3}
.reading,.intro,.performance-copy,.company-name,.text-link,.site-header nav,.image-strip span,.controls,.eyebrow,.metadata,.work-year,.work-type,.section-heading span,.attribution,.site-footer,.back,.work-nav{font-size:var(--type-body);color:var(--ink)}
.current h2,.audition-block h3,a:hover{color:var(--ink)}
.reading,.intro,.performance-copy{max-width:66ch;line-height:1.6}
.eyebrow{font-weight:400;text-transform:none;letter-spacing:0;line-height:1.6;margin-bottom:12px}
.section-heading span{margin:0 0 24px}
.section{padding:48px 0}
.audition-block{margin-top:40px;padding-top:32px}
@media(max-width:700px){h1{font-size:var(--type-title)}h2{font-size:var(--type-section)}h3,.performance-credits h2,.work-title{font-size:var(--type-subhead)}.section{padding:36px 0}.site-header nav{font-size:var(--type-body)}}

.testimonial{margin:32px 0 32px 32px;padding:0 0 0 24px;border-left:3px solid var(--ink)}.testimonial p{margin-bottom:20px}.testimonial .attribution{margin-bottom:0;font-style:normal}@media(max-width:700px){.testimonial{margin-left:16px;padding-left:20px}}

/* Animated logo palette: TV ident (frame 29), acid frosting (frame 10). */
:root{color-scheme:dark;--bg:#251f5b;--ink:#f4f1e8;--muted:var(--ink);--line:#665e9a;--accent:#a0c417;--red:#ed3c5b;--pink:#ed3c5b;--blue:#03ac96;--mustard:#c2ad3d;--olive:#a0c417}
body{background-color:#191430;background-image:repeating-linear-gradient(179.5deg,#191430 0px,#191430 39px,#ed3c5b 39px,#ed3c5b 60px,#191430 60px,#191430 106px,#03ac96 106px,#03ac96 120px,#191430 120px,#191430 166px,#a0c417 166px,#a0c417 194px,#191430 194px,#191430 238px,#c2ad3d 238px,#c2ad3d 257px,#191430 257px,#191430 305px,#03ac96 305px,#03ac96 315px,#191430 315px,#191430 367px,#ed3c5b 367px,#ed3c5b 385px,#191430 385px,#191430 438px,#a0c417 438px,#a0c417 450px,#191430 450px,#191430 506px)}
.site-header,main,.site-footer,dialog,.controls button,.skip{background:var(--bg)}
.site-header{gap:36px;padding-top:28px;padding-bottom:28px;border-bottom-color:var(--pink)}
.wordmark{width:256px;max-width:100%;gap:14px;color:var(--accent)}
.hkpg-logo.animated-logo{display:block;width:256px;max-width:100%;height:auto}
.company-lockup{display:block;width:100%;height:auto;overflow:visible}
.site-header nav{font-weight:700}
.current{border-top-color:var(--olive)}.about{border-top-color:var(--pink)}.archive{border-top-color:var(--blue)}.audition-block,.performance-credits{border-top-color:var(--mustard)}.site-footer{border-top-color:var(--blue)}
.current h2,.audition-block h3{color:var(--ink)}a:hover{color:var(--accent)}.wordmark:hover{color:var(--accent)}
@media(max-width:700px){.wordmark{width:256px;max-width:100%}.hkpg-logo.animated-logo{width:256px;max-width:100%}}

/* Close crops of Matthew’s birthday-cake photographs, repeated as wallpaper. */
body{background-image:url("/assets/birthday-cake-repeat.svg");background-size:720px 1080px;background-repeat:repeat;background-position:center top;padding-top:24px;padding-bottom:24px}

.site-header,main,.site-footer{width:calc(100% - 96px)}@media(max-width:700px){.site-header,main,.site-footer{width:calc(100% - 64px)}}