:root{--text-face:"Segoe UI",Tahoma,sans-serif;--display-face:Constantia,"Palatino Linotype",Palatino,serif;color-scheme:light;--paper:#f6f2e8;--ink:#202a23;--green:#254d3a;--line:#c8c5b5;--muted:#48554a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#faf7ef 0%,#e8ecdf 18rem,#ccd9c3 34rem,#e2e8d9 max(38rem, 66%),#faf7ef 100%);color:var(--ink);font:1rem/1.65 var(--text-face)}
header,main,footer{width:min(1100px,calc(100% - 40px));margin:auto}
header,footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.identity{font-family:var(--display-face);font-size:1.35rem;font-weight:bold;text-decoration:none}
small{display:block;font: .76rem/1.5 var(--text-face);color:var(--muted)}
nav,.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1rem}
nav a{padding:.4rem .65rem;text-decoration:none}
nav a[aria-current]{background:#dfe7d9;box-shadow:inset 0 -2px var(--green)}
a{color:var(--green);text-underline-offset:.22em}
a:focus-visible{outline:3px solid #8b462d;outline-offset:4px}
.skip{position:absolute;top:-4rem;left:1rem;background:white;padding:.5rem}.skip:focus{top:1rem}
.intro{padding:clamp(2.8rem,7vw,6rem) 0;border-bottom:1px solid var(--line)}
.label{margin:0 0 .75rem;color:var(--green);font:600 .9rem/1.4 var(--text-face)}
h1,h2,h3{font-family:var(--display-face);font-weight:normal;line-height:1.05;margin:.25em 0}
h1{font-size:clamp(2.8rem,8vw,6rem);letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.5vw,3.3rem);letter-spacing:-.015em}
h3{font-size:1.65rem}
.lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:53ch;color:var(--muted)}
.status{font-weight:650;color:var(--green)}
.actions{margin-top:1.4rem}
.primary{display:inline-block;background:var(--green);color:white;padding:.62rem .95rem;text-decoration:none}
.primary:hover{text-decoration:underline}
.work,.background{padding:clamp(2rem,5vw,4rem) 0;border-bottom:1px solid var(--line)}
.spread{display:grid;grid-template-columns:minmax(0,2.45fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,3.5rem);margin-top:1.8rem}
.paper{background:#fffdf6;border:1px solid var(--line);padding:clamp(1rem,4vw,2.4rem)}
aside{border-top:2px solid var(--green);align-self:start;padding-top:1rem}
aside p{margin-top:0}
.workflow{padding-left:1.6rem;margin-bottom:0}.workflow li{padding:.7rem 0;border-top:1px solid var(--line)}.workflow span{display:block}
dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;border-bottom:1px solid var(--line);padding-bottom:1rem}dt{font-weight:bold}dd{margin:0}
footer{font-size:.9rem;border-bottom:0}
@media(max-width:620px){header{align-items:flex-start;flex-direction:column} .spread{grid-template-columns:1fr} footer{flex-wrap:wrap}}
.resume{max-width:760px;padding:2rem 0}
.resume h1{font-size:clamp(2.7rem,7vw,4.5rem)}
.resume h2{font-size:1.65rem;margin-top:1.3em}
.resume h3{font:700 1rem/1.4 var(--text-face)}
@media print{body{background:white;color:black;font-size:10pt}header{display:none}.resume{width:100%;padding:0}.resume h1{font-size:26pt}.resume h2{font-size:14pt}.resume a{color:inherit}}

.opening {
  display:grid;
  grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
  align-items:center;
  gap:clamp(2rem, 6vw, 6rem);
  padding:clamp(2rem, 6vw, 5.25rem) 0;
  border-bottom:1px solid var(--line);
}
.opening .intro { padding:0; border:0; }
.opening h1 { font-size:clamp(2.7rem, 5.2vw, 4.7rem); font-weight:600; }
.portrait { display:block; width:88px; height:101px; object-fit:cover; object-position:center; margin-bottom:1.35rem; border:1px solid var(--line); }
.opening .lead { max-width:39ch; }
.specimen { min-width:0; margin:0; padding:1.3rem clamp(1rem, 3vw, 2rem) 1.65rem; border-top:2px solid var(--green); background:#fffdf6; }
.specimen figcaption { font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted); margin-bottom:.75rem; }
.specimen h2 { font-size:clamp(1.8rem, 3.5vw, 2.8rem); }
.ledger ol { list-style:none; padding:0; margin:1rem 0 0; }
.ledger li { display:grid; grid-template-columns:2rem minmax(0, 1fr); gap:.45rem; padding:.62rem 0; border-top:1px solid var(--line); }
.ledger li > span { font-size:.83rem; font-variant-numeric:tabular-nums; color:var(--muted); }
.ledger p { margin:0; }
.specimen mark { background:#f1ded0; color:#672f22; padding:0 .17em; }
.specimen aside { margin-top:.5rem; padding:.08rem 0 .08rem .65rem; border:0; border-left:2px solid #9c5c46; color:#733e30; font-size:.91rem; }
.manuscript blockquote { margin:1rem 0 .75rem; padding-top:.4rem; border-top:1px solid var(--line); font:500 1.24rem/1.35 var(--display-face); }
.manuscript blockquote p { margin:.55rem 0; }
.sample-link { display:inline-block; margin-top:1rem; font-weight:700; }
@media (max-width:740px) {
  .opening { grid-template-columns:minmax(0,1fr); gap:1.6rem; padding-top:1.6rem; }
  .portrait { width:65px; height:75px; margin-bottom:.75rem; }
  .opening .lead { margin:.7rem 0; }
  .opening .actions { margin-top:.65rem; }
}


/* The hidden first name sets the portrait width using the heading typography. */
.opening h1, .portrait-size {
  font: 600 clamp(2.7rem, 5.2vw, 4.7rem)/1.05 var(--display-face);
  letter-spacing: -.02em;
}
.portrait-size {
  display: inline-block;
  position: relative;
  aspect-ratio: 1305 / 1206;
  max-width: 100%;
  vertical-align: top;
  margin-bottom: .75rem;
}
.portrait-size > span { visibility: hidden; }
.portrait-size .portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  min-width: 0;
  margin: 0;
  border: 0;
}