/* A personal introduction shared by the Fold and Type editions. */
.creator-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);padding:clamp(64px,7vw,112px) var(--gutter);background:#090c0f;color:#eaece8;border-top:1px solid #d7e2e224}
.creator-kicker{margin:0 0 24px;font-size:10px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:#a5b4b7}
.creator-intro h2{margin:0;font-family:Archivo,Arial,sans-serif;font-weight:300;font-size:clamp(44px,5vw,76px);line-height:1.08;letter-spacing:-.055em}
.creator-name{margin:20px 0 0;font-size:12px;color:#8f9da3}
.creator-copy{max-width:540px;font-size:clamp(16px,1.4vw,20px);line-height:1.7;color:#bdc8ca}
.creator-copy p{margin:0 0 22px}
.creator-copy a{display:inline-flex;align-items:center;gap:28px;min-height:44px;border-bottom:1px solid #829ba260;color:#eaece8;font-size:13px;text-decoration:none}
.creator-copy a:hover{border-color:#d3e4e9}
@media(max-width:700px){.creator-intro{grid-template-columns:1fr;gap:30px;padding:60px var(--gutter)}.creator-kicker{margin-bottom:18px}.creator-name{margin-top:15px}.creator-copy{font-size:16px}}

/* Christopher's portrait sits inside About as atmosphere, not as a profile card. */
#about{position:relative;isolation:isolate;overflow:hidden}
#about.about-dialog{width:min(1120px,calc(100% - 28px));overflow-y:auto}
#about:not(.about-dialog){width:min(1120px,100%)}
#about .about-portrait{position:absolute;z-index:0;inset:0 0 0 auto;width:44%;pointer-events:none;opacity:.38;overflow:hidden;filter:saturate(.72) contrast(1.06)}
#about .about-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080a0c 0%,rgba(8,10,12,.72) 18%,transparent 58%),linear-gradient(180deg,#080a0c 0%,transparent 17% 72%,#080a0c 100%)}
#about .about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(1.02)}
#about>.dialog-top,#about>.about-name,#about>h2,#about>.about-body,#about>.dialog-heading,#about>.wrap{position:relative;z-index:1}
.about-signature{font-family:"Segoe Script","Bradley Hand",cursive;font-size:clamp(24px,3.2vw,40px);line-height:1.15;color:#f2f4f5;margin:30px 0 28px!important;transform:rotate(-2deg);transform-origin:left center}
.about-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 28px;border-block:1px solid rgba(255,255,255,.16)}
.about-values span{display:flex;align-items:center;justify-content:center;min-height:70px;padding:12px;text-align:center;text-transform:uppercase;letter-spacing:.13em;font-size:11px;line-height:1.35;color:#d8dde1}
.about-values span+span{border-left:1px solid rgba(255,255,255,.16)}
@media(max-width:600px){.about-values{grid-template-columns:1fr}.about-values span{min-height:48px}.about-values span+span{border-left:0;border-top:1px solid rgba(255,255,255,.16)}.about-signature{margin:24px 0 20px!important}}
#about.about-dialog>h2,#about.about-dialog>.about-body{max-width:58%;margin-left:0}
#about .bio{position:relative;z-index:1;max-width:58%;margin-left:0}

@media(max-width:700px){
 #about .about-portrait{left:auto;right:0;width:64%;opacity:.18}
 #about .about-portrait::after{background:linear-gradient(90deg,#080a0c 0%,rgba(8,10,12,.68) 38%,rgba(8,10,12,.18) 100%),linear-gradient(180deg,#080a0c 0%,transparent 18% 66%,#080a0c 100%)}
 #about .about-portrait img{object-position:48% 56%}
 #about .bio{max-width:none;margin-left:0}
 #about.about-dialog>h2,#about.about-dialog>.about-body{max-width:none}
}