:root{color-scheme:light;--ink:#191919;--paper:#f7f6f4;--blue:#3d7995}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:'Hoefler Text','Baskerville','Palatino Linotype',Georgia,serif;font-style:italic}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:3px}
.site-header{position:fixed;z-index:20;top:0;left:0;width:100%;color:var(--ink);background:transparent;transition:background .25s ease,box-shadow .25s ease,color .25s ease}.header-inner{display:flex;align-items:center;min-height:6vw;padding:1.25vw 2vw;transition:min-height .25s ease,padding .25s ease}.logo-placeholder{display:block;width:clamp(24px,2.35vw,48px);aspect-ratio:1;border-radius:50%;background:#000;flex:none;margin-right:1.25vw}.brand{display:block;width:clamp(210px,13vw,290px);flex:none;line-height:0}.brand img{display:block;width:100%;height:auto}nav{display:flex;gap:3.1vw;margin-left:auto;align-items:center}nav a{font-size:clamp(17px,1.45vw,28px);text-decoration:none}nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}.menu-toggle{display:none}.site-header.is-scrolled{color:white;background:#343434 url('assets/desktop/header-texture.webp') center/cover;box-shadow:0 5px 13px rgba(0,0,0,.26)}.site-header.is-scrolled .header-inner{min-height:0;padding:.7vw 4.8vw}.site-header.is-scrolled .logo-placeholder{display:none}.site-header.is-scrolled .brand img{filter:brightness(0) invert(1)}
.hero{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--paper) url('assets/desktop/bg.jpg') center/100% 100% no-repeat}.scene,.scene-links{position:absolute;inset:0;pointer-events:none}.layer,.scene-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.foreground{z-index:2}.background-car{z-index:1;animation:bg-drive 35s linear infinite}.foreground-car{z-index:7;animation:fg-drive 34s linear infinite}.car-shadow{mix-blend-mode:multiply}.scene-mobile,.scene-links-mobile{display:none}
.hero-copy{position:relative;z-index:8;text-align:center;margin:0 auto;padding-top:7.8vw;width:min(79vw,1550px)}.hero-copy p{margin:0 auto;max-width:62vw;text-align:left;font-size:clamp(17px,1.65vw,34px);line-height:1.45}.dropcap{display:inline-block;font-size:2.3em;line-height:.65;position:relative;top:-.17em;left:.12em;vertical-align:-.18em;margin-right:-.07em}.hero-copy h1{margin:5.5vw auto 0;font-size:clamp(28px,3.65vw,78px);line-height:1.18;font-weight:400;letter-spacing:-.035em}.typed-wrap{color:var(--blue);white-space:nowrap;display:inline-block}.cursor{display:inline-block;height:.96em;border-left:.055em solid var(--blue);margin-left:.12em;vertical-align:-.13em;animation:blink 1s steps(1) infinite}
.scene-links{z-index:5}.scene-link{position:absolute;inset:auto;display:block;pointer-events:auto;--x:calc(-1 * var(--left));--y:calc(-1 * var(--top))}.scene-link img{width:100vw;height:56.25vw;max-width:none;max-height:none;left:var(--x);top:var(--y)}.scene-link .hover{opacity:0}.scene-link:hover .hover,.scene-link:focus-visible .hover{opacity:1}.scene-link:hover .normal,.scene-link:focus-visible .normal{opacity:0}.scene-link .shadow{mix-blend-mode:multiply;z-index:0}.scene-link .artwork{z-index:1}.scene-link:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.scene-links-desktop .character{left:47.2%;top:71.8%;width:4.6%;height:14%;--left:47.2vw;--top:40.39vw}.scene-links-desktop .book{left:44.4%;top:78.6%;width:3.2%;height:4%;--left:44.4vw;--top:44.21vw}.scene-links-desktop .mailbox{left:20.4%;top:69.4%;width:4.4%;height:16%;--left:20.4vw;--top:39.04vw}.scene-links-desktop .poster{left:77%;top:68.8%;width:8%;height:8%;--left:77vw;--top:38.7vw}
.content-section{padding:clamp(64px,9vw,150px) max(7%,calc((100vw - 1500px)/2));scroll-margin-top:100px}.section-heading{display:flex;align-items:baseline;gap:2rem}.eyebrow{font-size:1rem;letter-spacing:.08em}h2{font-size:clamp(2.3rem,4vw,4.8rem);line-height:1.15;font-weight:400;margin:.2em 0}.section-note{font-size:1.2rem}.comic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem}.comic-slot{aspect-ratio:1;background:#eae9e6;border:1px solid #c8c6c2;display:grid;place-items:center;color:#777;font-size:1.4rem}.about-section{background:#eae9e6;max-width:none}.about-section h2,.about-section>p:last-child{max-width:850px}.about-section>p:last-child{font-size:clamp(1.35rem,2.2vw,2.2rem);line-height:1.55}.small-section{padding-top:70px;padding-bottom:70px}.small-section p{font-size:1.2rem}footer{padding:3rem 7%;border-top:1px solid #bbb;font-size:1rem}
@keyframes blink{50%{opacity:0}}@keyframes fg-drive{0%,61%{transform:translateX(30%)}82%,100%{transform:translateX(-130%)}}@keyframes bg-drive{0%,23%{transform:translate(-48%,.55vw)}44%,100%{transform:translate(110%,-1.85vw)}}
@media(max-width:780px){.header-inner{min-height:0;padding:15px 5%;height:68px}.logo-placeholder{width:24px;margin-right:17px}.brand{width:clamp(140px,40vw,220px)}.menu-toggle{display:flex;margin-left:auto;border:0;padding:10px 0 10px 10px;background:none;color:inherit;flex-direction:column;gap:5px;cursor:pointer}.menu-toggle span{display:block;width:26px;height:3px;background:currentColor;transition:transform .2s ease,opacity .2s ease}.site-header.is-scrolled{background-image:url('assets/mobile/header-texture.webp')}.site-header.is-scrolled .header-inner{height:54px;padding:7px 5%}.site-header.is-scrolled .brand{width:clamp(140px,40vw,220px)}.site-header.is-scrolled .logo-placeholder{display:block}.site-header.is-scrolled .menu-toggle{color:#fff}nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:12px 5% 22px;background:#343434;color:white;box-shadow:0 6px 10px rgba(0,0,0,.23);flex-direction:column;align-items:flex-start;gap:9px}nav a{font-size:22px;padding:6px 0}.site-header.menu-open nav{display:flex}.site-header.menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}.site-header.menu-open .menu-toggle span:nth-child(2){opacity:0}.site-header.menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.hero{aspect-ratio:4/5;background-image:url('assets/mobile/bg.jpg');background-size:222.222% 100%;background-position:center center}.scene-desktop,.scene-links-desktop{display:none}.scene-mobile,.scene-links-mobile{display:block}.scene-mobile .layer{width:222.222vw;height:125vw;left:-61.111vw;top:0}.scene-mobile .background-car{animation-name:bg-drive-mobile}.scene-mobile .foreground-car{animation-name:fg-drive-mobile}.hero-copy{width:84%;padding-top:20%;}.hero-copy p{max-width:none;font-size:clamp(15px,2.3vw,21px);line-height:1.4}.hero-copy h1{font-size:clamp(24px,5.5vw,48px);line-height:1.17;margin:6vw auto 0}.scene-links-mobile .scene-link img{width:222.222vw;height:125vw;left:calc(-1 * var(--left) - 61.111vw);top:calc(-1 * var(--top))}.scene-links-mobile .character{left:44.2%;top:74.4%;width:9%;height:13%;--left:44.2vw;--top:93vw}.scene-links-mobile .book{left:38%;top:80.5%;width:5.5%;height:3.5%;--left:38vw;--top:100.625vw}.scene-links-mobile .mailbox{left:21%;top:70.9%;width:9%;height:15%;--left:21vw;--top:88.625vw}.scene-links-mobile .poster{left:68%;top:70.8%;width:17%;height:8%;--left:68vw;--top:88.5vw}.section-heading{display:block}.comic-grid{gap:12px}.comic-slot{font-size:1rem}.about-section>p:last-child{font-size:1.4rem}.content-section{padding:65px 6%}.typed-wrap{white-space:nowrap}
}
@media(max-width:480px){.hero-copy{padding-top:20%}.hero-copy h1{font-size:clamp(23px,5.3vw,30px);margin-top:6vw}.hero-copy p{font-size:15px}.comic-grid{grid-template-columns:1fr}.comic-slot{aspect-ratio:1.3}}
@keyframes fg-drive-mobile{0%,61%{transform:translateX(25%)}82%,100%{transform:translateX(-105%)}}@keyframes bg-drive-mobile{0%,23%{transform:translate(-55%,.35vw)}44%,100%{transform:translate(85%,-1.65vw)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.foreground-car,.background-car,.cursor{animation:none}.site-header,.header-inner,.brand img{transition:none}}

.archive-page{min-height:70vh;padding-top:clamp(120px,12vw,190px)}.archive-intro{max-width:760px;font-size:1.2rem;line-height:1.5}.comic-card{display:block;text-decoration:none}.comic-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#eae9e6}.comic-card h3{font-weight:400;font-size:1.4rem;margin:.8rem 0 .2rem}.comic-card time{font-size:1rem;color:#5b5b5b}.comic-card:hover h3{text-decoration:underline;text-underline-offset:.2em}.archive-empty{font-size:1.3rem;line-height:1.5;margin-top:3rem;max-width:40rem}

footer{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}.footer-social{display:flex;gap:1.4rem;align-items:center}.footer-social a{font-size:1rem;text-underline-offset:.2em}

/* About page: the copy sets the height, so artwork and signature never cover it. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.about-page{background:#fff url('assets/about/background.jpg') center top/100% auto no-repeat;min-height:100vh}
.about-page+footer{background:#eae9e6}
.about-composition{min-height:100vh;width:100%;padding:clamp(58px,4.7vw,94px) 3vw 16px}
.about-layout{width:min(1080px,calc(100vw - 48px));margin:0 auto;display:grid;grid-template-columns:minmax(0,36%) minmax(0,64%);grid-template-rows:auto auto auto;align-items:start;container-type:inline-size}
.about-title-art{grid-column:1/-1;display:block;width:55.56%;height:auto;justify-self:center;margin-bottom:2cqw}
.about-character-art{grid-column:1;grid-row:2;display:block;width:165%;height:auto;align-self:end;justify-self:start;transform:translate(9%,-3cqw)}
.about-character-art img,.about-signature-art img{display:block;width:100%;height:auto}
.about-mobile-art{display:none}
.about-prose{grid-column:2;grid-row:2;width:78%;padding-right:0;font-size:clamp(17px,1.95cqw,21px);line-height:1.22}
.about-prose p{margin:0 0 1.22em}.about-prose .about-opening{margin-bottom:1.05em}.about-prose .about-intro{margin-bottom:.35em}
.about-prose p:last-of-type{margin-bottom:0}
.about-prose .dropcap{font-size:2.3em;margin-right:.16em}
.about-love{position:relative;white-space:nowrap}.about-love::after{content:"";position:absolute;left:-6%;width:112%;height:.42em;bottom:-.36em;background:url('assets/about/underline-mark.webp') center/100% 100% no-repeat}
.about-handwritten{margin:.15em 0 .12em!important}.about-handwritten img{display:block;width:100%;height:auto;max-width:100%}
.about-signature-art{display:block;width:12cqw;height:auto;margin:-.8em 5% 0 auto}
@media(max-width:900px){
  .about-page{background-size:auto 850px;background-repeat:no-repeat}
  .about-composition{padding:92px 6% 65px;min-height:100vh}
  .about-layout{width:100%;display:flex;flex-direction:column;align-items:center}
  .about-title-art,.about-character-art{display:none}
  /* Keep the mobile title and character in their exported arrangement. */
  .about-mobile-art{display:block;position:relative;width:min(113.636%,700px);aspect-ratio:1847/756;margin:0 auto 8px}
  .about-mobile-art img{position:absolute;display:block;height:auto}
  .about-mobile-title{left:24.6%;top:0;width:29.65%}
  .about-mobile-character{left:38%;top:12.037%;width:31.93%}
  .about-character-art{width:min(68%,350px);align-self:center;margin:0 0 22px;transform:none}
  .about-prose{width:min(82%,630px);min-height:0;display:block;padding:0;font-size:clamp(19px,2.7vw,25px);line-height:1.38}
  .about-prose p{margin-bottom:1.25em}.about-prose .about-opening{width:52%;margin-top:-2rem;margin-bottom:1.5em}.about-prose .about-intro{margin-bottom:.35em}
  .about-handwritten{margin:.4em 0 .3em!important}
  .about-prose p:last-of-type{margin-bottom:0}
  .about-signature-art{width:100px;margin:.4em 14% 0 auto}
}
@media(max-width:480px){.about-composition{padding-top:83px}.about-title-art{width:90%}.about-character-art{width:66%;margin-bottom:18px}.about-prose{font-size:19px}.about-signature-art{width:85px}}

/* About Easter eggs: overlays keep the original layout dimensions. */
.about-character-art{position:relative}
.about-character-hover{position:absolute;inset:0;opacity:0;pointer-events:none}
.about-character-art:focus-visible .about-character-hover{opacity:1}
.about-character-art:focus-visible .about-character-normal{opacity:0}
.about-question{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;line-height:0;aspect-ratio:1460/140}
.about-question .question-normal,.about-question .question-hover{position:absolute;left:0;top:-17.857142857%;pointer-events:none}
.about-question .question-hover{opacity:0}
.about-question .question-invitation-art{position:absolute;left:70%;bottom:100%;width:35%;max-width:none;opacity:0;pointer-events:none}
.about-question.is-revealed .question-normal{opacity:0}
.about-question.is-revealed .question-hover,.about-question.is-revealed .question-invitation-art{opacity:1}
@media(hover:hover){
  .about-character-art:hover .about-character-hover{opacity:1}
  .about-character-art:hover .about-character-normal{opacity:0}
}
@media(max-width:900px){.about-question .question-invitation-art{left:80%;width:36%}}

/* Shared page headings: the same top inset and centered frame as About. */
.collection-page{background:#fff;min-height:100vh;padding:clamp(58px,4.7vw,94px) 3vw 65px}
.collection-page+footer{background:#eae9e6}
.page-layout{width:min(1080px,calc(100vw - 48px));margin:0 auto}
.page-title{display:flex;justify-content:center;align-items:flex-start;margin:0 0 32px;font-size:inherit;font-weight:400}
.page-title picture{display:block;line-height:0}
.page-title img{display:block;height:clamp(90px,9.375vw,120px);width:auto;max-width:100%;object-fit:contain}
.page-message{max-width:620px;margin:48px auto 0;text-align:center;font-size:clamp(20px,2vw,25px);line-height:1.5}
.page-message p{margin:0 0 1.2em}
.collection-page .archive-intro{margin:32px auto 0;text-align:center}
@media(max-width:900px){
 .collection-page{padding:92px 6% 65px}
 .page-layout{width:100%}
 .page-title img{height:clamp(83px,18vw,115px);max-width:82vw}
 .page-message{margin-top:36px;font-size:21px}
}
@media(max-width:480px){.collection-page{padding-top:83px}}

/* Optical centering for the Prints lettering and its asymmetric underline. */
#prints .page-title picture{transform:translateX(-8px)}

/* Footer navigation is separate from the fixed header's mobile menu. */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:1.5rem;background:#eae9e6;text-align:center}
.site-footer .footer-nav{display:flex;position:static;inset:auto;margin:0;padding:0;background:none;color:inherit;box-shadow:none;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem 2rem}
.site-footer .footer-nav a{font-size:18px;padding:0;text-decoration:none}
.site-footer .footer-nav a:hover{text-decoration:underline}
.footer-social-placeholders{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1.5rem;font-size:14px;color:#626262}
.footer-copyright{font-size:14px}

/* Full-width desktop underlines use the same artwork scale as About. */
@media(min-width:901px){
 .page-title img{width:100%;height:auto;max-width:none}
 #contact .page-title picture{width:58.0262%}
 #prints .page-title picture{width:51.9873%}
 #comics .page-title picture{width:54.5004%}
}

/* Paper archive and full comic viewer. */
body{font-weight:400;font-synthesis:none}
.collection-page{background:#fff url('assets/about/background.jpg') center top/100% auto no-repeat}
#comics .page-layout{width:min(1500px,calc(100vw - 48px))}
#comics .page-title{max-width:1080px;margin-left:auto;margin-right:auto}
.comic-intro{position:relative;border:0;background:none;padding:0;font:inherit;font-size:clamp(16px,1.55vw,28px);color:inherit;cursor:pointer;white-space:nowrap}
.comic-intro img{position:absolute;left:10.9%;width:87%;height:auto;top:-.8em;opacity:0;pointer-events:none}
.comic-intro:focus-visible img{opacity:1}
@media(max-width:900px){.comic-intro[aria-pressed="true"] img{opacity:1}}
#archive-comics{gap:36px clamp(24px,4vw,80px)}
.comic-paper{display:block;aspect-ratio:1;padding:6%;background:#fff;border-radius:12px 14px 11px 13px;box-shadow:4px 8px 15px #00000018;overflow:hidden;transition:transform .22s ease}
.comic-card .comic-paper img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:white}
.comic-card h3,.comic-card time{margin-left:7%}
.comic-card time{display:block;font-family:'Gill Sans','Gill Sans MT',Calibri,Arial,sans-serif;font-style:normal;font-weight:400}
.comics-thank-you{display:block;width:min(330px,65%);height:auto;margin:70px auto 0}
.comic-viewer{width:min(1100px,94vw);max-width:none;max-height:94dvh;padding:20px 56px;border:0;border-radius:8px;background:#faf9f7;color:var(--ink);overflow:auto}
.comic-viewer::backdrop{background:rgba(240,239,237,.86)}
.viewer-image{display:block;width:100%;height:auto;max-height:76dvh;object-fit:contain}
.viewer-caption{text-align:center;margin:12px 0 0;font-size:20px}
.viewer-close,.viewer-prev,.viewer-next{position:absolute;border:0;background:#fff;color:#191919;font:normal 28px Arial,sans-serif;cursor:pointer;border-radius:50%;width:42px;height:42px}
.viewer-close{right:8px;top:8px;z-index:1}
.viewer-prev{left:6px;top:45%}.viewer-next{right:6px;top:45%}
.viewer-prev[hidden],.viewer-next[hidden]{display:none}
body.comic-viewer-open{overflow:hidden}
@media(min-width:901px) and (hover:hover){.comic-intro:hover img{opacity:1}}
@media(hover:hover){.comic-card:hover .comic-paper{transform:scale(1.018)}}
@media(max-width:900px){.comic-intro:not([aria-pressed="true"]) img{opacity:0}}
@media(max-width:900px){.collection-page{background-size:auto 850px}#comics .page-layout{width:100%}.comic-intro{font-size:clamp(14px,3.3vw,22px)}#archive-comics{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media(max-width:480px){#archive-comics{grid-template-columns:1fr}.comic-viewer{padding:48px 34px 16px}.viewer-prev,.viewer-next{width:30px;height:38px}.viewer-caption{font-size:17px}}
@media(prefers-reduced-motion:reduce){.comic-paper{transition:none}.comic-card:hover .comic-paper{transform:none}}

/* Viewer controls and caption sit apart from the comic paper. */
.comic-viewer{background:transparent;padding:48px 56px 20px}
.comic-viewer::backdrop{background:rgba(35,35,35,.88)}
.viewer-image{background:#fff;border-radius:4px;max-height:72dvh}
.viewer-caption{color:#fff;margin:18px 0 0;text-shadow:0 1px 3px #0008}
.viewer-close,.viewer-prev,.viewer-next{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.viewer-prev,.viewer-next{font-size:0}
.viewer-prev::before,.viewer-next::before{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.viewer-prev::before{transform:translateX(2px) rotate(-135deg)}
.viewer-next::before{transform:translateX(-2px) rotate(45deg)}
@media(max-width:480px){.comic-viewer{padding:48px 34px 20px}.viewer-image{max-height:70dvh}}

/* Size the square paper by both viewport dimensions, leaving room for its caption. */
.comic-viewer{width:calc(min(72dvh,calc(94vw - 112px),988px) + 112px);max-height:96dvh;overflow:auto}
.viewer-image{width:100%;height:auto;aspect-ratio:1;max-height:none;object-fit:contain}
.viewer-caption{margin-top:30px;font-size:clamp(25px,2.3vw,36px);line-height:1.2}
.comic-card h3{margin-top:1.25rem}
@media(max-width:480px){
 .comic-viewer{width:calc(min(65dvh,calc(96vw - 68px)) + 68px)}
 .viewer-image{max-height:none}
 .viewer-caption{margin-top:25px;font-size:27px}
}

/* Give the viewer controls breathing room around the square. */
.comic-viewer{--viewer-square:min(72dvh,calc(94vw - 152px),988px);width:calc(var(--viewer-square) + 152px);padding:64px 76px 20px}
.viewer-prev,.viewer-next{top:calc(64px + var(--viewer-square)/2 - 21px)}
.viewer-prev{left:8px}.viewer-next{right:8px}
.viewer-close{top:0;right:24px}
.viewer-caption{margin-top:42px;font-size:clamp(23px,1.8vw,29px)}
.comics-section{padding-top:clamp(48px,5vw,85px)}
@media(max-width:480px){
 .comic-viewer{--viewer-square:min(65dvh,calc(96vw - 88px));width:calc(var(--viewer-square) + 88px);padding:58px 44px 20px}
 .viewer-prev,.viewer-next{top:calc(58px + var(--viewer-square)/2 - 19px)}
 .viewer-prev{left:4px}.viewer-next{right:4px}
 .viewer-close{right:8px}
 .viewer-caption{margin-top:34px;font-size:24px}
 .comics-section{padding-top:45px}
}

/* Supplied paper silhouette preserves the artist's textured edge. */
.comic-paper{background:transparent url('assets/comics/paper-tile.webp') center/100% 100% no-repeat;border-radius:0;box-shadow:none;overflow:visible;filter:drop-shadow(4px 8px 7px #00000018)}
.comics-thank-you{width:min(505px,70%)}
.comics-thank-you img{display:block;width:100%;height:auto}
@media(max-width:900px){.comics-thank-you{width:min(82%,460px)}}

/* Hero copy refinements and the logo's scrolled state. */
.comics-thank-you{margin-left:auto;margin-right:auto}
@media(min-width:901px){.comics-thank-you{width:min(417px,70%)}}
.site-header.is-scrolled .logo-placeholder{display:block}
.hero-copy p{padding-left:2px}
.hero-copy .dropcap{left:calc(.12em - 2px)}
.cursor{margin-left:.22em}
#recent-comics .comic-paper{background-image:url('assets/comics/paper-tile.webp')}
@media(max-width:780px){
 .hero-copy{width:70%;padding-top:24vw}
 .hero-copy p{font-size:clamp(15px,2.8vw,22px);line-height:1.45}
 .hero-copy h1{font-size:clamp(24px,6vw,48px);margin-top:7vw}
}

/* Desktop introduction: lower the paragraph and align its initial with line two. */
@media(min-width:781px){
 .hero-copy p{position:relative;top:1.65vw}
 .hero-copy .dropcap{left:calc(.12em - 2px)}
 .hero-copy p{padding-left:calc(2px + .2em)}
}

/* Contact illustration and form. The shared canvas keeps all hover layers aligned. */
#contact .page-layout{width:min(1400px,calc(100vw - 48px))}
#contact .page-title{max-width:1080px;margin-left:auto;margin-right:auto}
.contact-layout{overflow:clip;display:grid;grid-template-columns:42% 58%;margin-top:clamp(45px,5vw,100px);align-items:start}
.contact-character{border:0;background:none;padding:0;margin:65px 0 0;position:relative;text-align:left;cursor:pointer;width:100%;z-index:0}
.contact-art{display:block;position:relative;width:220%;pointer-events:none}
.contact-art img{display:block;width:100%;height:auto}
.contact-wave,.contact-hello{position:absolute;inset:0;opacity:0}
.contact-character:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:12px}
.contact-character:is(:focus-visible,[aria-pressed="true"]) .contact-rest{opacity:0}
.contact-character:is(:focus-visible,[aria-pressed="true"]) :is(.contact-wave,.contact-hello){opacity:1}
.contact-content{position:relative;z-index:1;padding-left:25px;font-size:clamp(17px,1.35vw,23px);line-height:1.4}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#contact-form label{display:block;margin-bottom:20px}
#contact-form input,#contact-form textarea{display:block;width:100%;margin-top:10px;border:1px solid #777;border-radius:12px;background:#ffffffa8;padding:12px 16px;font:400 18px Georgia,serif;color:#222;box-sizing:border-box}
#contact-form textarea{resize:vertical;min-height:180px}
#contact-form :is(input,textarea,button):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.contact-actions{text-align:right}
.contact-actions button{border:1px solid #555;border-radius:16px;background:#ffffffb0;padding:8px 25px;color:inherit;font:inherit;cursor:pointer}
.contact-status,.contact-preview-note{font-size:14px;line-height:1.4;color:#666}
.contact-email{margin:22px 0}.contact-email small{font-size:14px;color:#666}
.contact-filter-note{margin:22px 0 0}
@media(hover:hover){.contact-character:hover .contact-rest{opacity:0}.contact-character:hover :is(.contact-wave,.contact-hello){opacity:1}}
@media(max-width:900px){
 #contact .page-layout{width:100%}
 .contact-layout{grid-template-columns:1fr;margin-top:35px}
 .contact-character{width:min(48%,270px);margin:0 auto 25px;transform:translateX(-10%)}
 .contact-content{padding-left:0;width:min(100%,600px);margin:auto;font-size:18px}
 .contact-fields{gap:16px}
}
@media(max-width:480px){.contact-fields{grid-template-columns:1fr;gap:0}.contact-art{width:220%}}

/* Match the contact mockup's smaller, centered desktop composition. */
@media(min-width:901px){
 .contact-layout{width:min(1080px,100%);margin-left:auto;margin-right:auto}
 .contact-content{font-size:clamp(17px,1.95vw,21px)}
}

/* Small desktop placement correction without changing the artwork scale. */
@media(min-width:901px){
 .contact-layout{overflow:visible}
 .contact-character{margin-top:50px;transform:translateX(-60px)}
}
.contact-status[hidden]{display:none}

/* Lift the desktop contact group beneath the title. */
@media(min-width:901px){
 .contact-layout{margin-top:clamp(25px,3vw,60px)}
}

@media(min-width:901px){
 .contact-art{width:198%}
}

/* Desktop positions from the adjusted Photoshop contact mockup. */
@media(min-width:901px){
 .contact-character{margin-top:120px;transform:translateX(-13px)}
 .contact-content{transform:translate(-1px,55px)}
}

/* Mobile contact: title beside the portrait, followed by stacked fields. */
.contact-art picture{display:block;width:100%}
.contact-actions button{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;min-height:42px}
.contact-actions button span{position:relative;top:.08em}
@media(max-width:900px){
 #contact{padding:83px 15% 55px}
 #contact .page-layout{position:relative}
 #contact .page-title{position:absolute;top:0;right:-2%;width:50%;margin:0;z-index:2}
 #contact .page-title picture{width:100%}
 #contact .page-title img{width:100%;height:auto;max-width:none}
 .contact-layout{overflow:visible;margin-top:0}
 .contact-character{width:83%;margin:10px 0 18px;transform:none}
 .contact-art{width:100%}
 .contact-content{width:100%;font-size:19px;transform:none}
 .contact-fields{grid-template-columns:1fr;gap:0}
 #contact-form label{margin-bottom:16px}
 #contact-form input{padding:8px 12px;min-height:36px;margin-top:8px}
 #contact-form textarea{min-height:90px;height:24vw;margin-top:8px;padding:10px 12px}
 .contact-actions button{padding:6px 18px;min-height:36px}
 .contact-email{margin:24px 0 18px;font-size:18px}
 .contact-filter-note{font-size:14px;color:#888;margin-top:0;line-height:1.35}
}

/* Refined mobile art scale, with the form's existing position preserved. */
.contact-filter-note{font-size:14px;color:#888;line-height:1.35}
@media(max-width:900px){
 .contact-character{aspect-ratio:1058/745}
 .contact-art{position:absolute;left:6px;top:25px;width:85%}
 #contact .page-title{width:45%;right:5%;top:12px}
}

/* Contact spacing and an accessible tap-controlled mobile About portrait. */
@media(min-width:901px){.contact-character{margin-top:64px}}
@media(max-width:900px){
 #contact{min-height:0;padding-bottom:25px}
 .about-mobile-character{position:absolute;display:block;aspect-ratio:546/665;padding:0;border:0;background:none;cursor:pointer}
 .about-mobile-character img{position:absolute;inset:0;width:100%;height:auto;pointer-events:none}
 .mobile-character-hover{opacity:0}
 .about-mobile-character[aria-pressed="true"] .mobile-character-rest{opacity:0}
 .about-mobile-character[aria-pressed="true"] .mobile-character-hover{opacity:1}
}

/* The contact page fills the viewport; its footer remains in normal document flow. */
#contact{min-height:100svh}
@media(min-width:901px){#contact .page-layout{position:relative;top:-8px}}
@media(max-width:900px){
 #contact{display:flex;flex-direction:column}
 #contact .page-layout,.contact-layout,.contact-content,#contact-form{display:flex;flex-direction:column;flex:1}
 .contact-character{flex:none}
 .contact-fields,.contact-actions,.contact-email,.contact-filter-note{flex:none}
 #contact-form .contact-message-field{display:flex;flex-direction:column;flex:1}
 #contact-form textarea{flex:1;height:auto;min-height:35vw}
 /* Touch reveals only the explicit pressed state, avoiding sticky simulated hover. */
 .contact-character:not([aria-pressed="true"]) .contact-rest{opacity:1}
 .contact-character:not([aria-pressed="true"]) :is(.contact-wave,.contact-hello){opacity:0}
}
@media(max-width:780px){
 .scene-link:not(.is-tapped) .normal{opacity:1}
 .scene-link:not(.is-tapped) .hover{opacity:0}
 .scene-link.is-tapped .normal{opacity:0}
 .scene-link.is-tapped .hover{opacity:1}
}

/* Illustrated toys are buttons, with independent persistent tapped states. */
button.scene-link{padding:0;border:0;background:none;cursor:pointer}
.scene-link[aria-pressed="true"] .normal{opacity:0}
.scene-link[aria-pressed="true"] .hover{opacity:1}
@media(max-width:900px){#contact{padding-bottom:55px}}

/* Lower the desktop About composition together, preserving its internal spacing. */
@media(min-width:901px){
 .about-composition{padding-top:calc(clamp(58px,4.7vw,94px) + 20px)}
 /* Lift the heading without changing the space reserved above the prose. */
 .about-title-art{position:relative;top:-20px}
}

/* Contact delivery controls. */
.contact-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#contact-bot-check{margin:0;min-height:0;flex:none}
#contact-bot-check.needs-interaction{margin:0 0 14px}
.contact-actions button:disabled{opacity:.6;cursor:wait}
.contact-privacy{font-size:14px;color:#777;margin-top:12px;flex:none}
.contact-privacy summary{cursor:pointer}
.contact-privacy p{line-height:1.4}

.footer-privacy{display:block;font-size:14px;color:inherit;margin:14px auto 8px;text-underline-offset:3px}
.privacy-page{min-height:100svh;padding:clamp(110px,10vw,170px) 6% 65px}
.privacy-copy{max-width:720px;margin:auto;font-size:19px;line-height:1.5}
.privacy-copy h1{font-size:38px;font-weight:400}
.privacy-copy h2{font-size:24px;font-weight:400;margin-top:30px}
.privacy-copy a{overflow-wrap:anywhere}
.privacy-date{font-size:14px;color:#777}

/* Place feedback below the message box, beside Submit on desktop. */
.contact-submit-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.contact-submit-row .contact-status{margin:0;padding:2px 10px;min-width:0}
.contact-submit-row .contact-actions{grid-column:2;grid-row:1}
@media(max-width:900px){
 .contact-submit-row{flex:none;grid-template-columns:minmax(0,1fr);gap:12px}
 .contact-submit-row .contact-actions{grid-column:1;grid-row:1}
 .contact-submit-row .contact-status{grid-row:2;padding:0}
}

/* Prints: preserve the exported composition, including the floor and shadows. */
#prints{overflow:hidden}
#prints .prints-stage{position:relative;min-height:0;aspect-ratio:1 / .845;isolation:isolate}
#prints .page-title{position:relative;z-index:1;margin-bottom:0}
.prints-illustration{position:absolute;top:0;left:-22.5%;display:block;width:145%;max-width:none;height:auto;margin-top:-4.6%;pointer-events:none}
@media(max-width:900px){
 #prints .prints-stage{aspect-ratio:1 / 1.814}
 #prints .prints-illustration{width:326%;left:-106.5%;top:0;margin-top:-21.3%}
 #prints .page-title{top:11px}
 #prints .page-title picture{transform:none}
}

/* Leave more breathing room between the mobile message box and Submit. */
@media(max-width:900px){
 #contact-form .contact-message-field{margin-bottom:36px}
}