*,*::before,*::after{box-sizing:border-box}
/* Palette taken from the ORIGINAL stenger.biz, which reads far friendlier than
   a near-black scheme: #333 text rather than pure black, #efefef bands rather
   than white, and a MID-grey hero overlay rather than near-black.
   Neutral greys throughout - the previous #fdfdfc carried a warm tint. */
:root{--bg:#ffffff;--fg:#333333;--mut:#6b6b6b;--line:#e2e2e2;--acc:#2B49D4;--card:#efefef;
 --panel:#4a4d51;--panel-fg:#ffffff;--panel-mut:#dcdcdc;--panel-acc:#cdd6ff}
/* NO dark-mode override (Andy 2026-08-24): the content area stays dark-on-light
   whatever the OS is set to. The contrast in this design comes from the dark
   PANEL against light content - inverting the content collapses that and, as
   Andy put it, black on white simply reads friendlier here.
   color-scheme:light stops the browser auto-darkening scrollbars and controls. */
:root{color-scheme:light}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
 font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-feature-settings:"kern","liga"}
h1,h2,h3{line-height:1.2;margin:0}
a{color:var(--acc)}
a:focus-visible,:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
p{margin:0 0 .9em}
.wrap{max-width:66ch;margin:0 auto;padding:0 1.25rem}
section{margin:3.25rem 0}
section:last-of-type{margin-bottom:5rem}
h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
 margin-bottom:1.4rem;font-weight:600}
.job{margin-bottom:2.6rem}
.job h3{font-size:1.22rem;letter-spacing:-.01em}
.place{color:var(--mut);margin:.15rem 0 .5rem;font-size:.94rem}
.note{color:var(--mut);font-size:.86rem;font-style:italic;margin:0 0 .7rem}
ul{margin:0;padding:0;list-style:none}
.roles{margin:0 0 .9rem;border-left:2px solid var(--line);padding-left:.9rem}
.roles li{display:flex;flex-wrap:wrap;gap:.3rem .8rem;justify-content:space-between;
 padding:.16rem 0;font-size:.95rem}
.role{font-weight:600}
.dates{color:var(--mut);font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}
.strengths{color:var(--mut);font-size:.94rem}
.creds li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
 border-bottom:1px solid var(--line);align-items:baseline}
.creds li:last-child{border-bottom:0}
.year{color:var(--mut);font-variant-numeric:tabular-nums;font-size:.9rem;white-space:nowrap}
.inst{color:var(--mut);font-weight:400;font-size:.9rem}
.contact{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:.4rem}
@media print{
 :root{--bg:#fff;--fg:#000;--mut:#444;--line:#ccc;--acc:#000;--card:#fff}
 body{font-size:10.5pt;line-height:1.42}
 nav,.portrait{display:none!important}
 section{margin:1.2rem 0;break-inside:avoid}
 .job{margin-bottom:1rem;break-inside:avoid}
 h2{margin-bottom:.6rem;font-size:8.5pt}
 a{text-decoration:none;color:#000}
 .wrap{max-width:none;padding:0}
}
/* B - two-tone: dark hero band carrying the portrait, light content below.
   The portrait is the ORIGINAL square shot on black, so it melts into the panel
   - no cut-out edge, no seam, no fade hack needed. */
.heroimg{background:var(--panel)}
.herobox{position:relative;max-width:1080px;margin:0 auto;
 min-height:min(56vh,420px);display:flex;align-items:center}
/* The portrait is a genuine CUT-OUT (RGBA, alpha 0 around the subject), exactly
   as the original site used it - so it composites straight onto the panel with
   no rectangle and no left edge to disguise.
   The RIGHT edge still needs a feather: the subject is cropped by the image
   boundary there, so that edge is a hard cut whatever the transparency does.
   Masking this layer (sized to the image, not the box) keeps the fade anchored
   to the photo at any viewport width. */
.herobox::before{content:"";position:absolute;top:0;bottom:0;right:0;
 aspect-ratio:1300/682;pointer-events:none;
 background:url("./assets/portrait.png") right center/auto 100% no-repeat;
 -webkit-mask-image:linear-gradient(to right,#000 0,#000 90%,transparent 100%);
 mask-image:linear-gradient(to right,#000 0,#000 90%,transparent 100%)}
/* NO overlay over the text. ::after paints above the element's children, so an
   overlay here washed the copy - the mask on the image is the only feather. */
.heroinner{position:relative;z-index:1;padding-top:3rem;padding-bottom:3rem;width:100%}
.heroinner h1{font-size:clamp(2.1rem,6.5vw,3.2rem);letter-spacing:-.03em;font-weight:650;
 max-width:12ch;color:var(--panel-fg)}
/* 26ch wrapped the 41-character tagline. No cap, and nowrap above the stacking
   breakpoint so it stays on one line; below that it wraps naturally. */
.tag{color:var(--panel-mut);font-size:1.05rem;margin:.6rem 0 1.2rem;max-width:none}
@media(min-width:901px){.tag{white-space:nowrap}}
.heroinner .loc{color:var(--panel-mut);font-size:.94rem;margin:0 0 .5rem}
.heroinner .contact a{color:var(--panel-acc)}
@media(max-width:900px){
 .herobox{min-height:0;display:block;max-width:none}
 .herobox::before{position:relative;aspect-ratio:1300/682;width:100%;display:block;
  background:url("./assets/portrait.png") center bottom/contain no-repeat;
  -webkit-mask-image:none;mask-image:none}
 .heroinner{padding-top:min(44vw,220px)}
 .heroinner h1{max-width:none}}
/* Signature - white in the source SVG, so it sits on the dark panel untouched.
   Decorative: aria-hidden with an empty alt, since the name is already text. */
.sig{display:block;width:clamp(150px,17vw,196px);height:auto;opacity:.92;
 margin-top:1.6rem;user-select:none}
@media print{.sig{display:none}}

@media print{.heroimg{background:none}
 .herobox{min-height:0;background:none;display:block}
 .herobox::before{display:none}
 .heroinner{padding:0}
 .heroinner h1{color:#000}.tag{color:#444}.heroinner .contact a{color:#000}}