/* A single paper block, using the same grid, type and ink as Work and About. */
.contact-section{border-top:1px solid var(--ink);background:var(--ink)}
.contact-section:focus{outline:none}
.contact-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-height:clamp(560px,76svh,780px);overflow:hidden}
.contact-doodle{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;color:var(--ink);pointer-events:none;transition:color .45s ease}
.contact-doodle svg{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.contact-doodle .contact-art-small{display:none}
/* Side drawings use the full left/right space without stretching their shapes. */
.contact-doodle .contact-art-left{width:30%;right:auto}
.contact-doodle .contact-art-right{width:30%;left:auto;right:0}
/* The ink width is synchronized with the hero’s 3.7-unit rounded marker. */
.contact-doodle path{vector-effect:non-scaling-stroke;stroke-width:var(--contact-ink-width,3.7px)}
.contact-connected-art{transform-box:view-box;transform-origin:center;transition:transform .65s cubic-bezier(.2,.7,.3,1)}
/* Move the complete connected drawing as one piece so every join stays attached. */
@media(hover:hover){.contact-stage:hover .contact-doodle{color:var(--brand-primary)}.contact-stage:hover .contact-connected-art{transform:translateY(-4px) rotate(.3deg)}}
.contact-stage:is(:focus-within,.is-touched) .contact-doodle{color:var(--brand-primary)}
.contact-stage:is(:focus-within,.is-touched) .contact-connected-art{transform:translateY(-4px) rotate(.3deg)}
.contact-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:24px;width:min(50%,600px);padding:60px 0;text-align:center;pointer-events:none}
.contact-copy h3{margin:0;font:500 clamp(2.5rem,4.5vw,4.5rem)/1.12 var(--display-font);letter-spacing:normal;text-wrap:balance}
.contact-email{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:56px;margin:6px 0 0;padding:15px 25px;border:1px solid var(--ink);border-radius:var(--block-radius);background:var(--paper);color:var(--ink);font-size:1.125rem;line-height:1.4;text-decoration:none;pointer-events:auto;touch-action:manipulation;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.contact-email svg{display:block;width:20px;height:20px;flex:none;transition:transform .2s ease}
.contact-email:focus-visible{outline:2px solid var(--focus-ring);outline-offset:5px}
@media(hover:hover){.contact-email:hover{color:var(--action-primary);border-color:var(--action-primary);background:var(--surface-subtle)}.contact-email:hover svg{transform:translate(2px,-2px)}}
.contact-email:is(:focus-visible,:active){color:var(--action-primary);border-color:var(--action-primary);background:var(--surface-subtle)}
.contact-address{max-width:100%;margin:0;color:var(--muted);font-size:1rem;line-height:1.5;overflow-wrap:anywhere;pointer-events:auto;user-select:text}
.header-menu a[href$="#contact"]{text-transform:none}
@media(max-width:900px){.contact-stage{min-height:600px}.contact-copy{width:min(54%,480px)}.contact-copy h3{font-size:clamp(2.375rem,5vw,3.5rem)}}
@media(max-width:800px){.contact-stage{min-height:720px}.contact-doodle .contact-art-wide{display:none}.contact-doodle .contact-art-small{display:block}.contact-copy{width:calc(100% - 48px);max-width:360px;gap:24px;padding:150px 0}.contact-copy h3{font-size:clamp(2.5rem,9.8vw,3.25rem)}.contact-email{min-height:56px;margin-top:0}.contact-address{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.contact-doodle,.contact-connected-art,.contact-email,.contact-email svg{transition:none}.contact-stage .contact-connected-art,.contact-email:hover svg{transform:none!important}}

/* Horizontal cup sketches retain the site’s rounded outline treatment. */
.contact-doodle .contact-cup-art{left:auto;right:5%;right:max(4%,calc(50% - 560px));width:min(28%,360px);height:100%}
.contact-cups-sketch{transform-box:view-box;transform-origin:50% 50%;transition:transform .65s cubic-bezier(.2,.7,.3,1)}
.contact-doodle .contact-cup-detail{stroke-width:calc(var(--contact-ink-width,3.7px) * .8)}
@media(hover:hover){.contact-stage:hover .contact-cups-sketch{transform:translateY(-3px) rotate(-1deg)}}
.contact-stage:is(:focus-within,.is-touched) .contact-cups-sketch{transform:translateY(-3px) rotate(-1deg)}
@media(max-width:800px){
 .contact-stage{min-height:620px}
 .contact-copy{justify-self:start;align-items:flex-start;width:54%;max-width:220px;margin:0 0 0 24px;padding:70px 0;text-align:left}
 .contact-copy h3{font-size:clamp(2rem,10.25vw,2.5rem);overflow-wrap:anywhere}
 .contact-email{gap:12px;padding:14px 16px;font-size:1rem;max-width:100%}
 .contact-doodle .contact-cup-art{width:40%;right:8px}
}
@media(prefers-reduced-motion:reduce){.contact-stage .contact-cups-sketch{transition:none;transform:none!important}}

/* Keep the cups at full size, inset from the site-aligned block edge. */
@media(min-width:801px){
 .contact-doodle .contact-art-left{left:3%;width:28%;max-width:340px;}
 .contact-doodle .contact-cup-art{right:32px;width:min(28%,360px);max-width:360px;}
 .contact-copy{width:40%;max-width:520px;margin:0;align-items:center;text-align:center;justify-self:center}
}
@media(max-width:800px){
 .contact-stage{min-height:760px}
 .contact-copy{justify-self:center;align-items:center;width:calc(100% - 48px);max-width:360px;margin:0;padding:240px 0;text-align:center}
 .contact-copy h3{font-size:clamp(2.5rem,9vw,3.25rem)}
 .contact-doodle .contact-art-small{inset:0 8% auto;width:84%;height:240px;object-fit:contain}
 .contact-doodle .contact-cup-art{inset:auto 0 36px;margin:auto;width:min(82%,360px);height:180px}
}

/* Reference cup arrangement in the bottom-right, sharing the plane/envelope ink. */
.contact-doodle .contact-cup-art{inset:auto 24px 24px auto;margin:0;width:clamp(280px,32vw,440px);max-width:440px;height:auto;aspect-ratio:810/590}
@media(max-width:800px){
 .contact-doodle .contact-cup-art{inset:auto 16px 20px auto;margin:0;width:min(82%,340px);max-width:340px;height:auto}
 .contact-copy{padding-bottom:280px}
}

/* Contact occupies exactly the viewport beneath the sticky site header. */
.contact-section{display:flex;flex-direction:column;height:calc(100vh - var(--sticky-header-height,var(--header-height)));min-height:0}
@supports(height:1dvh){.contact-section{height:calc(100dvh - var(--sticky-header-height,var(--header-height)))}}
.contact-section > .projects-header{flex:none}
.contact-section > .contact-stage{flex:1;min-height:0;height:auto}
.contact-section .contact-copy{padding-top:24px;padding-bottom:24px}

/* A smaller cup cluster; the shared baseline is measured from the envelope. */
.contact-doodle .contact-cup-art{width:clamp(220px,25vw,340px);max-width:340px}
@media(max-width:800px){
 .contact-doodle .contact-art-small{left:0;right:auto;width:50%}
 .contact-doodle .contact-cup-art{width:42%;max-width:240px}
}
@media(hover:hover){.contact-stage:hover :is(.contact-connected-art,.contact-cups-sketch){transform:translateY(-3px)}}
.contact-stage:is(:focus-within,.is-touched) :is(.contact-connected-art,.contact-cups-sketch){transform:translateY(-3px)}

/* Keep the cup illustration inside the requested 80px right margin. */
.contact-doodle .contact-cup-art{right:80px}

/* A clearer email icon with an 8px label gap. */
.contact-email{gap:8px}
.contact-email svg{width:28px;height:28px}

/* Match the portfolio arrow controls: soft gray fill and the shared 8px radius. */
.contact-email{border:0;border-radius:var(--control-radius);background:var(--surface-subtle)}
@media(hover:hover){.contact-email:hover svg{transform:none}}

/* Contact actions share the portfolio control treatment and sentence-case labels. */
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:100%;pointer-events:auto}
.contact-actions .contact-email{margin:0;font-family:inherit;font-weight:400;cursor:pointer;text-transform:none}

/* Keep mobile contact focused on the copy and actions. */
@media(max-width:700px){#contact .contact-doodle{display:none}}