/* ---------- Fonts (self-hosted: no third-party requests) ---------- */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/bodoni-moda-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/bodoni-moda-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/spectral-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/spectral-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/spectral-latin-ext-400-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/spectral-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/spectral-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/spectral-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ---------- */
:root{
  --ground:#130807;      /* matched to the photograph's own background */
  --ground-deep:#0C0504;
  --bone:#E9DFD8;
  --bone-dim:#A8968E;
  --paper:#EDE7E5;
  --ink:#2A1D1E;
  --ink-soft:#5E4A4A;
  --wine:#7A2733;
  --rule:#D3C6C3;
  --measure:34rem;
  --rubric:13rem;
  --gap:3.5rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Spectral',Georgia,'Times New Roman',serif;
  font-size:1.1875rem;
  line-height:1.72;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--wine);color:var(--paper)}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}

/* ---------- Hero ---------- */
.hero{
  background:var(--ground);
  color:var(--bone);
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(17rem,40vw,32rem);
  align-items:center;
  min-height:min(92vh,48rem);
}
.hero__text{
  padding:clamp(3rem,7vw,5rem) clamp(2rem,5vw,4rem) clamp(3rem,7vw,5rem) clamp(1.5rem,7vw,7rem);
}

.name{
  font-family:'Bodoni Moda',Didot,'Bodoni MT',Georgia,serif;
  font-weight:500;
  font-size:clamp(3.2rem,11vw,7rem);
  line-height:.92;
  letter-spacing:-.015em;
  margin:0;
  color:var(--bone);
}
.name span{display:block}

.standfirst{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;
  max-width:26rem;
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--bone-dim);
}
.hero__rule{
  width:4.5rem;height:1px;border:0;margin:1.75rem 0 0;
  background:var(--wine);
}

/* The portrait bleeds off the page edge; only its inner edge fades into the ground */
.portrait{position:relative;margin:0;align-self:stretch;line-height:0;overflow:hidden}
.portrait img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:52% 26%;
}
.portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right, var(--ground) 0%, rgba(19,8,7,.55) 14%, rgba(19,8,7,0) 42%);
}

/* ---------- Biography ---------- */
main{
  padding:clamp(2.5rem,5vw,4rem) clamp(2rem,5vw,4rem) 0 clamp(1.5rem,7vw,7rem);
}
.bio{max-width:calc(var(--rubric) + var(--gap) + var(--measure))}

.chapter{
  display:grid;
  grid-template-columns:var(--rubric) minmax(0,var(--measure));
  gap:var(--gap);
  padding-block:clamp(2rem,4vw,3rem);
}
.chapter + .chapter{border-top:1px solid var(--rule)}

.chapter h2{
  margin:.35em 0 0;
  font-family:'Spectral',Georgia,serif;
  font-weight:600;
  font-size:1rem;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--wine);
  text-align:right;
  hyphens:none;
}
.chapter__body{min-width:0}
.chapter__body > p{margin:0 0 1.15em;hyphens:auto}
.chapter__body > p:last-child{margin-bottom:0}
.chapter__body > p:first-child{margin-top:0}

.lead{font-size:1.28rem;line-height:1.6}
.lead::first-letter{
  font-family:'Bodoni Moda',Didot,Georgia,serif;
  float:left;font-size:3.55em;line-height:.78;
  padding:.06em .1em 0 0;color:var(--wine);
}

/* ---------- Footer ---------- */
footer{
  margin-top:clamp(3rem,7vw,5.5rem);
  background:var(--ground-deep);
  color:var(--bone-dim);
  padding:clamp(2.5rem,5vw,3.5rem) clamp(2rem,5vw,4rem) clamp(2.5rem,5vw,3.5rem) clamp(1.5rem,7vw,7rem);
  font-size:.9375rem;
  line-height:1.65;
}
.footer__inner{
  max-width:calc(var(--rubric) + var(--gap) + var(--measure));
  display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between;
}
footer p{margin:0}
footer a{color:var(--bone);text-decoration-thickness:1px;text-underline-offset:.18em}
footer a:hover{color:#fff}

/* ---------- One orchestrated page-load moment ---------- */
@media (prefers-reduced-motion:no-preference){
  .portrait img{animation:emerge 1400ms cubic-bezier(.2,.6,.25,1) both}
  .name,.standfirst,.hero__rule{animation:settle 900ms ease-out both}
  .standfirst{animation-delay:140ms}
  .hero__rule{animation-delay:240ms}
  @keyframes emerge{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
  @keyframes settle{from{opacity:0}to{opacity:1}}
}

/* ---------- Narrow screens ---------- */
@media (max-width:60rem){
  :root{--rubric:auto;--gap:.5rem}
  .hero__inner{grid-template-columns:1fr;min-height:0}
  .hero__text{order:2;padding:clamp(2rem,7vw,3rem) clamp(1.5rem,6vw,2.5rem) clamp(2.75rem,9vw,4rem)}
  .portrait{order:1;height:min(56vh,26rem)}
  .portrait img{object-position:52% 22%}
  .portrait::after{
    background:linear-gradient(to bottom, rgba(19,8,7,0) 55%, rgba(19,8,7,.7) 82%, var(--ground) 100%);
  }
  .chapter{grid-template-columns:1fr;gap:.75rem;max-width:var(--measure)}
  .chapter h2{text-align:left;margin:0;font-size:1.05rem}
  .footer__inner{flex-direction:column}
}
@media (max-width:30rem){
  body{font-size:1.125rem}
  .lead{font-size:1.19rem}
}

/* ---------- Legal / secondary pages ---------- */
.page{
  padding:clamp(3rem,7vw,5rem) clamp(2rem,5vw,4rem) 0 clamp(1.5rem,7vw,7rem);
  max-width:calc(var(--measure) + 12rem);
}
.page h1{
  font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:500;
  font-size:clamp(2.25rem,6vw,3.5rem);line-height:1;letter-spacing:-.01em;
  margin:0 0 1.5rem;
}
.page h2{
  font-weight:600;font-size:1.05rem;color:var(--wine);
  margin:2.25rem 0 .5rem;
}
.page p{max-width:var(--measure);margin:0 0 1.1em}
.page a{color:var(--wine);text-underline-offset:.18em}
.back{
  display:inline-block;margin-bottom:2.5rem;font-size:.95rem;
  color:var(--ink-soft);text-underline-offset:.18em;
}
.todo{
  background:#F7E9C9;color:#5A4212;border-left:3px solid #C79A2B;
  padding:.9rem 1.1rem;margin:0 0 2rem;font-size:.95rem;line-height:1.55;
  max-width:var(--measure);
}