:root{
--side:86px;
--side-m:20px;
--black:#000;
--white:#fff; --intro-top-d:132px; --intro-top-m:92px;  --gap-bottom-d:72px; --gap-bottom-m:56px;  --smiley-m: min(48vw, 256px);
}
#contact-page *{ box-sizing:border-box; }
#contact-page img{ display:block; max-width:100%; height:auto; } #contact-page h1,#contact-page h2,#contact-page h3,#contact-page h4,#contact-page h5,#contact-page h6{
font-family:"Swear Display",serif; font-weight:400; color:var(--black);
}
#contact-page p,#contact-page .copy,#contact-page li{
font-family:"Swear Text",serif; font-weight:400; color:var(--black);
} #contact-page .wrap{ padding-inline:var(--side); }
@media (max-width:768px){ #contact-page .wrap{ padding-inline:var(--side-m); } } #contact-page .fullbleed{
position:relative; width:100vw;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
overflow:hidden; background:#fff;
}
@supports (width:100dvw){
#contact-page .fullbleed{ width:100dvw; margin-left:calc(50% - 50dvw); margin-right:calc(50% - 50dvw); }
} .contact-hero{ background:#fff; color:#000; --header-h:0px; }
.hero-inner{
position:relative; z-index:2;
min-height:calc(100svh - var(--header-h));
display:flex; flex-direction:column;
padding-top:var(--intro-top-d);
padding-bottom:var(--gap-bottom-d);
} .hero-media{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.smiley-bg{
position:absolute; right:-2px; top:var(--intro-top-d);
width:min(28vw, 420px);
aspect-ratio:1/1;
background-image:var(--smiley), var(--smiley-fallback);
background-repeat:no-repeat,no-repeat;
background-size:contain,44%;
background-position:right center,right center;
opacity:.98;
} #contact-page .intro{
font-size:clamp(28px, 2.3vw, 42px);
line-height:1.15; letter-spacing:-.01em;
margin:0 0 72px 0;
max-width:22ch;
} .hero-spacer{ height:clamp(320px, 28vh, 420px);
} #contact-page .mail{
font-size:clamp(40px, 4.4vw, 86px);
line-height:.95; letter-spacing:-.01em;
margin:0;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
hyphens:auto;
}
#contact-page .mail a{ color:var(--black); text-decoration:none; }
#contact-page .mail a:hover{ text-decoration:underline; }  @media (min-width:1081px) and (max-width:1919px){
.smiley-bg{ width:min(24vw, 360px); }
#contact-page .intro{ margin-bottom:64px; }
} @media (min-width:1880px){
.hero-spacer{ height:clamp(560px, 31.25vw, 640px); } } @media (min-width:769px) and (max-width:1080px){
.smiley-bg{ width:min(26vw, 300px); }
#contact-page .intro{ margin-bottom:56px; }
} @media (max-width:768px){
.hero-inner{
min-height:calc(100svh - var(--header-h));
padding-top:var(--intro-top-m);
padding-bottom:var(--gap-bottom-m); } .smiley-bg{
right:-2px; top:var(--intro-top-m);
width:var(--smiley-m);
}
#contact-page .intro{
margin-bottom:32px; max-width:24ch;
} .hero-spacer{
height:calc(var(--smiley-m) + 280px);
}
#contact-page .mail{
font-size:clamp(36px, 8vw, 64px);
}
} @supports selector(body:has(main)){
body:has(main#contact-page) .grid-container,
body:has(main#contact-page) .container,
body:has(main#contact-page) .site-content,
body:has(main#contact-page) .content-area,
body:has(main#contact-page) .inside-article,
body:has(main#contact-page) .entry-content{
max-width:none !important; width:100% !important;
padding:0 !important; margin:0 !important;
border:0 !important; box-shadow:none !important; overflow:visible !important;
}
body.separate-containers:has(main#contact-page) .site-main > .inside-article{ padding:0 !important; }
html, body{ overflow-x:hidden !important; scrollbar-gutter:stable both-edges; }
}