:root { color-scheme: dark; --blue:#1746d1; --cream:#fff6df; --yellow:#ffce62; }
* { box-sizing:border-box; }
html { background:var(--blue); }
body { margin:0; color:var(--cream); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
.page { width:min(1440px,100%); min-height:100svh; margin:auto; padding:38px clamp(24px,5.6vw,80px) 26px; display:flex; flex-direction:column; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { font-size:1.65rem; letter-spacing:-.08em; font-weight:800; }
.brand-light { font-weight:400; }
.brand-period { color:var(--yellow); }
.edition { font-size:.75rem; font-weight:700; letter-spacing:.17em; text-align:right; }
.hero { flex:1; display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:12px; padding:72px 0 50px; }
.words { position:relative; z-index:1; }
.eyebrow { color:var(--yellow); font-size:.8125rem; font-weight:700; letter-spacing:.14em; margin:0 0 30px; }
h1 { font-size:clamp(3.9rem,6.7vw,6.1rem); letter-spacing:-.065em; line-height:1.02; margin:0; font-weight:800; }
h1 span { color:var(--yellow); }
.intro { font-size:clamp(1.125rem,1.7vw,1.45rem); line-height:1.55; margin:32px 0 0; }
.portrait { margin:0; text-align:center; min-width:0; }
.portrait img { display:block; width:100%; height:auto; object-fit:contain; border-radius:26px; }
figcaption { font-size:.875rem; line-height:1.5; margin-top:12px; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid #ffffff40; padding-top:22px; font-size:.875rem; line-height:1.5; }
.closing { font-weight:800; color:var(--yellow); letter-spacing:.12em; }
@media (max-width:760px) {
  .page { padding:25px 24px 22px; }
  .hero { grid-template-columns:1fr; gap:30px; padding:64px 0 40px; }
  .eyebrow { font-size:.75rem; letter-spacing:.11em; margin-bottom:24px; }
  h1 { font-size:clamp(3.35rem,12.8vw,5.3rem); }
  .intro { margin-top:24px; }
  .portrait { width:min(460px,100%); justify-self:center; }
  .edition { max-width:105px; line-height:1.5; }
}
@media (max-width:350px) {
  .page { padding-right:18px; padding-left:18px; }
  h1 { font-size:3rem; }
  .brand { font-size:1.45rem; }
}