/* Contact-only layout and F: Black-current teal. Email behaviour stays in contact-email-v1.js. */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('/works/self-portrait/assets/eb-garamond-latin-normal.woff2') format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('/works/self-portrait/assets/eb-garamond-latin-italic.woff2') format('woff2')}
[hidden]{display:none!important}
.contact-email{user-select:text;overflow-wrap:anywhere}
.contact-skip{position:fixed;top:10px;left:12px;z-index:100;transform:translateY(-180%);padding:8px 14px;background:#DDE3DB;color:#101E20}
.contact-skip:focus{transform:translateY(0)}

@media screen{
 html:has(.site-shell[data-view="contact"]){height:auto;min-height:100%;overflow:visible;color-scheme:dark}
 body:has(.site-shell[data-view="contact"]){height:auto;min-height:100svh;overflow:visible}
 .site-shell[data-view="contact"]{--contact-paper:#101E20;--contact-ink:#DDE3DB;--contact-water:#9ECBC7;--contact-muted:#9BAEAA;--contact-line:#9DBDB633;height:auto;min-height:100svh;overflow:visible}
 .site-shell[data-view="contact"]>.site-header{position:relative;height:74px;min-height:74px;background:transparent;border:0}
 .site-shell[data-view="contact"] .foreground-stage{height:auto;min-height:0}
 .site-shell[data-view="contact"] .content-layer{position:relative;inset:auto;height:auto;min-height:calc(100svh - 74px);overflow:visible;padding:22px 7vw 42px;align-items:flex-start}
 .site-shell[data-view="contact"] .contact-email-panel{display:block;width:min(100%,1120px);min-width:0;max-height:none;padding:clamp(25px,4.8vw,70px);overflow:visible;background-color:var(--contact-paper);background-image:radial-gradient(ellipse 80% 620px at 100% 0%,#2A4A4655 0%,transparent 84%);color:var(--contact-ink);box-shadow:none;border:1px solid var(--contact-line)}
 .site-shell[data-view="contact"] .contact-section__intro{margin:0;min-width:0;padding-bottom:clamp(20px,4vw,56px)}
 .site-shell[data-view="contact"] .eyebrow{color:var(--contact-muted);opacity:1;font:11px/1.4 -apple-system,BlinkMacSystemFont,Arial,sans-serif;letter-spacing:.17em;margin:0 0 25px}
 .site-shell[data-view="contact"] .contact-section__intro h1{font:italic 400 clamp(44px,4.6vw,70px)/1.03 var(--reading-font);letter-spacing:-.025em;max-width:17ch;margin:22px 0 clamp(35px,4vw,54px);color:var(--contact-water);text-wrap:balance}
 html[data-site-language="zh"] .site-shell[data-view="contact"] .contact-section__intro h1{font-style:normal}
 .site-shell[data-view="contact"] .contact-section__intro>.contact-address{font-size:clamp(25px,3.4vw,43px);line-height:1.25;margin:0 0 20px;color:var(--contact-water);opacity:1;max-width:100%;overflow-wrap:anywhere}
 .site-shell[data-view="contact"] .contact-email{color:var(--contact-water);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:#9ECBC780}
 .site-shell[data-view="contact"] .contact-email:hover{text-decoration-color:var(--contact-water)}
 .site-shell[data-view="contact"] .contact-section__intro>.contact-context{font-size:20px;color:var(--contact-ink);margin:0 0 18px;overflow-wrap:anywhere}
 .site-shell[data-view="contact"] .contact-actions{display:flex;align-items:baseline;gap:14px 24px;flex-wrap:wrap;min-width:0}
 .site-shell[data-view="contact"] .copy-email{font:18px/1.4 var(--reading-font);color:var(--contact-muted);border-bottom-color:var(--contact-line);min-height:44px;max-width:100%;white-space:normal}
 .site-shell[data-view="contact"] .copy-email:hover{color:var(--contact-water)}
 .site-shell[data-view="contact"] #copy-status{font-size:17px;line-height:1.4;color:var(--contact-muted);max-width:40ch;overflow-wrap:anywhere}
 .site-shell[data-view="contact"] .contact-section__intro>.contact-mail-note{font-size:16px;line-height:1.5;color:var(--contact-muted);margin:21px 0 0;opacity:1}
 .site-shell[data-view="contact"] .contact-email:focus-visible,.site-shell[data-view="contact"] .copy-email:focus-visible{outline:2px solid var(--contact-water);outline-offset:6px}
 .site-shell[data-view="contact"] .site-header :is(a,button):focus-visible{outline:1px solid #E4E1D9;outline-offset:6px}
 .site-shell[data-view="contact"] .contact-email-panel ::selection{background:var(--contact-water);color:var(--contact-paper)}
}
@media screen and (max-width:960px){
 .site-shell[data-view="contact"]>.site-header:not([data-menu-ready="true"]){height:auto;min-height:74px;padding-top:12px;padding-bottom:12px}
}
@media screen and (max-width:860px){
 .site-shell[data-view="contact"]>.site-header{height:64px;min-height:64px}
 .site-shell[data-view="contact"] .content-layer{min-height:calc(100svh - 64px);padding:20px 16px 24px}
 .site-shell[data-view="contact"] .contact-email-panel{padding:32px 25px}
}
@media screen and (max-width:680px){
 .site-shell[data-view="contact"] .contact-section__intro{padding-bottom:25px}
 .site-shell[data-view="contact"] .contact-section__intro h1{font-size:clamp(42px,10vw,58px);margin:20px 0 35px}
 .site-shell[data-view="contact"] .contact-section__intro>.contact-context{font-size:19px}
 .site-shell[data-view="contact"] .contact-actions{gap:8px 20px}
}
@media screen and (max-width:380px){.site-shell[data-view="contact"] .contact-email-panel{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{
 .site-shell[data-view="contact"],.site-shell[data-view="contact"] .foreground-stage{min-height:0}
 .site-shell[data-view="contact"] .content-layer{position:static;inset:auto;display:block;height:auto;min-height:0;overflow:visible;padding:0}
 .site-shell[data-view="contact"] .contact-email-panel{display:block;width:100%;max-height:none;overflow:visible;padding:0;border:0;box-shadow:none;background:white;color:black}
 .site-shell[data-view="contact"] .contact-section__intro{margin:0;padding:0}
 .site-shell[data-view="contact"] .eyebrow{color:black;opacity:1}
 .site-shell[data-view="contact"] .contact-section__intro h1{font-size:30pt;margin:16pt 0 24pt;color:black}
 .site-shell[data-view="contact"] .contact-section__intro>p:not(.eyebrow){font-size:14pt;line-height:1.4;color:black;opacity:1;margin:0 0 12pt}
 .site-shell[data-view="contact"] .contact-email{color:black;text-decoration:underline;text-underline-offset:3px}
 .site-shell[data-view="contact"] .contact-actions,.site-shell[data-view="contact"] .contact-mail-note,.contact-skip{display:none!important}
}