/* Approved About content: editable native blocks, independent of article templates. */
.spj-about-frame{container:spj-about / inline-size;max-width:1178px;margin:0 auto}
.spj-about{max-width:1066px;margin:0 auto;color:var(--text);font:400 18px/1.85 Inter,system-ui,sans-serif}
.spj-about :is(h1,h2,p,figure){margin:0}
.spj-about .about-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding:54px 0}
.spj-about .eyebrow{font:600 10px/1.5 Inter,system-ui,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--warm)}
.spj-about h1{font:500 64px/1.12 "Playfair Display",Georgia,serif;letter-spacing:-1.7px;margin:20px 0}
.spj-about .about-deck{font:400 27px/1.5 "Playfair Display",Georgia,serif;color:var(--muted)}
.spj-about .about-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:32px}
.spj-about .about-actions .button{font:500 13px/1.4 Inter,system-ui,sans-serif}
.spj-about .about-unavailable{color:var(--muted);font:500 13px/1.4 Inter,system-ui,sans-serif}
.spj-about .about-footnote{font:400 12px/1.8 Inter,system-ui,sans-serif;color:var(--muted);margin-top:28px;position:relative;padding-left:42px}
.spj-about .about-photo{min-width:0}
.spj-about .about-photo img{display:block;width:100%;aspect-ratio:1.3;object-fit:cover;object-position:center 45%;height:auto}
.spj-about .about-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;margin:60px auto 64px;max-width:1060px;align-items:start}
.spj-about .about-body{max-width:750px;min-width:0}
.spj-about .about-body p{margin-bottom:26px}
.spj-about .about-body h2{font:500 34px/1.25 "Playfair Display",Georgia,serif;letter-spacing:-.6px;margin:52px 0 24px}
.spj-about .about-body strong{font-weight:600}
.spj-about [id^=about-section-]{scroll-margin-top:32px}
.spj-about .about-sidebar{position:sticky;top:24px;font:400 14px/1.6 Inter,system-ui,sans-serif}
.spj-about .about-nav-title{font-weight:600;font-size:16px;margin-bottom:16px}
.spj-about .about-jump{display:none}
.spj-about .about-section-nav{display:flex;flex-direction:column;gap:4px}
.spj-about .about-section-nav a{display:flex;align-items:center;min-height:48px;padding:10px 12px;color:var(--text);text-decoration:none;border-radius:3px}
.spj-about .about-section-nav a:is(:hover,:focus-visible){background:var(--nav-feedback);color:var(--accent)}
.spj-about .about-section-nav a[aria-current=location]{color:var(--accent);text-decoration:underline;text-underline-offset:5px;font-weight:600}
.spj-about .about-section-nav a:focus-visible,.spj-about .about-jump:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@container spj-about (min-width:801px){
 .spj-about .about-hero{display:block;position:relative;isolation:isolate;overflow:hidden;margin:0 -56px;padding:80px 56px;min-height:620px}
 .spj-about .about-hero-copy{position:relative;z-index:1;width:52%}
 .spj-about .about-photo{position:absolute;right:0;top:0;width:55%;height:100%;z-index:-2;mask-image:linear-gradient(90deg,transparent,#000 30%)}
 .spj-about .about-photo img{height:100%;aspect-ratio:auto;object-position:center 35%}
 .spj-about .about-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--background) 0%,var(--background) 43%,color-mix(in srgb,var(--background) 90%,transparent) 49%,color-mix(in srgb,var(--background) 48%,transparent) 56%,transparent 65%)}
}
@container spj-about (max-width:800px){
 .spj-about .about-hero{grid-template-columns:1fr;gap:30px;padding:32px 0 0}
 .spj-about .about-photo{order:-1}
 .spj-about h1{font-size:43px}
 .spj-about .about-deck{font-size:23px}
 .spj-about .about-layout{grid-template-columns:1fr;gap:28px}
 .spj-about .about-body{font-size:17px}
 .spj-about .about-body h2{font-size:28px;margin-top:38px}
 .spj-about .about-sidebar{position:static}
 .spj-about .about-nav-title{display:none}
 .spj-about .about-jump{display:flex;justify-content:space-between;align-items:center;min-height:48px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--text);font:400 16px/1.6 Inter,system-ui,sans-serif}
 .spj-about .about-jump[aria-expanded=false]+nav{display:none}
 .spj-about .about-section-nav{margin-top:12px}
}
@media print{.spj-about .about-sidebar{display:none}.spj-about .about-layout{display:block}}

.spj-about .about-footnote:before{content:"";position:absolute;left:0;top:10px;width:28px;height:1px;background:var(--warm)}

/* Match the homepage hero boundary; scope out the résumé and other pages. */
.wp-site-blocks>.wp-block-post-content:has(.about-hero){margin-block-start:0}
.spj-about .about-hero{position:relative}
.spj-about .about-hero:before{content:"";position:absolute;bottom:0;left:56px;right:56px;height:1px;background:var(--line);pointer-events:none;z-index:2}
@container spj-about (max-width:800px){
 .spj-about .about-hero{padding-top:32px;padding-bottom:32px}
 .spj-about .about-hero:before{left:0;right:0}
}

/* Approved compact hero image frame. */
@container spj-about (max-width:800px){.spj-about .about-photo{border:1px solid var(--line);border-radius:6px;overflow:hidden}.spj-about .about-photo img{border-radius:5px}}

.spj-about .about-hero .about-actions .button{font:500 12px/1.6 Inter,sans-serif;min-height:48px;padding:12px 20px;gap:10px;border-radius:4px}
.spj-about .about-hero .about-primary{background:var(--accent);color:var(--background)}
.spj-about .about-hero .about-primary:is(:hover,:focus-visible){background:#a34f35;border-color:#a34f35;color:#fff}
.spj-about .about-hero .about-secondary:is(:hover,:focus-visible){background:var(--nav-feedback);border-color:var(--warm);color:var(--warm)}
.spj-about .about-body .about-actions a{display:inline-flex;align-items:center;gap:18px;min-height:44px;font:500 12px/1.85 Inter,sans-serif;color:var(--link-default);text-decoration:none}
.spj-about .about-body .about-actions a:visited{color:var(--link-visited)}
.spj-about .about-body .about-actions a:is(:hover,:focus-visible){color:var(--link-default);text-decoration:underline;text-decoration-thickness:2px}
.spj-about .about-body .about-actions a:active{color:var(--link-active)}
@container spj-about (max-width:800px){
 .spj-about .about-actions{gap:18px}
 .spj-about .about-hero .about-actions .button{font-size:11px;padding:11px 14px}
}

/* Let the section layout gap set spacing between the sidebar and content. */
.spj-about .about-layout > .about-sidebar + :is(.about-body, .resume-content) {
    margin-block-start: 0;
}

/* Policy pages pair the approved section styling with the About navigation. */
.spj-information .about-layout{margin-block:20px 64px}
.spj-information .information-body{max-width:750px;min-width:0}
.spj-information .information-section{border-top:1px solid var(--line);padding-block:26px;margin:0 0 12px}
.spj-information .information-section h2{font:500 32px/1.25 "Playfair Display",Georgia,serif;margin:0 0 20px;scroll-margin-top:32px}
.spj-information .information-section p{color:var(--muted)}
.spj-information .information-actions{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px}
.spj-information .information-actions a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
@container spj-about (max-width:800px){
 .spj-information .about-layout{margin-bottom:38px}
 .spj-information .information-body{font-size:17px}
 .spj-information .information-section h2{font-size:28px}
 .spj-information .information-actions{gap:18px}
}