:root { color-scheme: dark; --charcoal: #17191a; --ivory: #f2efe9; --warm: #b79973; }
* { box-sizing: border-box; }
html { background: var(--charcoal); }
body { margin: 0; color: var(--ivory); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.landing { position: relative; isolation: isolate; min-height: 720px; min-height: max(720px, 100svh); overflow: hidden; display: flex; align-items: center; }
.portrait { position: absolute; z-index: -2; inset: 0 0 0 40%; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 20% center; filter: saturate(.52) brightness(.75); }
.portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--charcoal) 0%, rgba(23,25,26,.85) 10%, rgba(23,25,26,.3) 35%, transparent 65%), linear-gradient(0deg, var(--charcoal) 0%, rgba(23,25,26,.45) 15%, transparent 42%), linear-gradient(180deg, rgba(23,25,26,.2), transparent 35%); }
.introduction { margin: -24px 0 0 clamp(32px, 8.3vw, 160px); padding: 90px 24px 140px 0; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(80px, 8.4vw, 146px); font-weight: 400; letter-spacing: -.055em; line-height: .99; }
.period { color: var(--warm); }
.descriptor { margin: 34px 0 0; font-size: clamp(14px, 1.22vw, 19px); line-height: 1.7; letter-spacing: .045em; color: #ccc8c2; }
.accent { display: block; width: 44px; height: 2px; background: var(--warm); margin-top: 34px; }
footer { position: absolute; bottom: 38px; left: clamp(32px, 8.3vw, 160px); right: 24px; font-size: 11px; line-height: 1.8; letter-spacing: .055em; color: #aaa7a1; }
.separator { padding: 0 9px; }
.copyright { white-space: nowrap; }
@media (min-width: 1800px) { .portrait { left: 43%; } }
@media (max-width: 700px) {
  .landing { min-height: max(780px, 100svh); align-items: flex-end; }
  .portrait { inset: 0 0 26% 0; }
  .portrait img { object-position: 20% 28%; }
  .portrait::after { background: linear-gradient(0deg, var(--charcoal) 0%, rgba(23,25,26,.9) 15%, rgba(23,25,26,.1) 60%), linear-gradient(90deg, rgba(23,25,26,.3), transparent 65%); }
  .introduction { margin: 0 0 0 28px; padding: 330px 22px 130px 0; }
  h1 { font-size: clamp(64px, 17vw, 108px); }
  .descriptor { font-size: clamp(11px, 3.1vw, 16px); margin-top: 22px; letter-spacing: .025em; }
  .accent { margin-top: 24px; width: 34px; }
  footer { left: 28px; right: 22px; bottom: 25px; font-size: 10px; letter-spacing: .02em; }
  .separator { padding: 0 5px; }
}
@media (max-width: 350px) { footer .copyright { display: block; } footer .separator { display: none; } }