:root{--g:#dfe5dc;--p:#f7f5ec;--i:#202a27;--t:#64706a;--l:#c3cbbf;--green:#344f3f;--deep-green:#263c31;--gold:#c49a5a}
*{box-sizing:border-box}
body{margin:0;background:var(--g);color:var(--i);font:16px/1.55 Archivo,sans-serif}
header,.hero,.directory,footer{width:min(1180px,calc(100% - 40px));margin:auto}
header{height:72px;display:flex;align-items:center;justify-content:space-between}
header a{display:flex;align-items:center;gap:12px;color:inherit;font-size:.7rem;text-decoration:none;text-transform:uppercase}
header img{width:65px}
.hero{display:grid;grid-template-columns:1.35fr .65fr;gap:9vw;align-items:end;margin:18px auto 0;padding:clamp(70px,9vw,112px) clamp(28px,6vw,76px);border:1px solid #ffffff17;border-radius:3px 36px 3px 3px;background:var(--deep-green);color:#f6f1e5;box-shadow:0 24px 70px #263c3129}
.hero p,.head>div>p{color:var(--gold);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.hero h1{max-width:13ch;margin:12px 0 0;font:600 clamp(3.2rem,7vw,6.7rem)/.92 Fraunces,serif}
.hero blockquote{margin:0;padding:24px 0 0;border-top:3px solid var(--gold);color:#ced8d0;font:1.1rem Fraunces,serif}
.directory{padding:80px 0}
.head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:40px}
.head h2{margin:4px 0;font:600 3rem Fraunces,serif}
.head span{color:var(--t);font-size:.8rem}
label{width:min(370px,100%);color:var(--t);font-size:.62rem;text-transform:uppercase}
input{width:100%;margin-top:7px;padding:13px;border:1px solid var(--l);background:var(--p);font:inherit}
ol{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;padding:0;list-style:none}
article{min-height:250px;display:grid;grid-template-columns:170px 1fr;align-items:start;overflow:hidden;border:1px solid var(--l);border-radius:2px 22px 2px 2px;background:var(--p);transition:.2s}
article:hover{transform:translateY(-4px);box-shadow:0 18px 40px #28342c1c}
.portrait{width:138px;height:184px;min-height:0;display:grid;place-content:center;justify-items:center;position:relative;margin:24px 8px 24px 24px;overflow:hidden;border:1px solid var(--l);border-radius:2px 12px 2px 2px;background:linear-gradient(145deg,#d5ddcf,#aebcab);color:var(--green)}
.portrait img{width:100%;height:100%;display:block;position:absolute;inset:0;object-fit:cover;object-position:center center;filter:grayscale(1) sepia(.16)}
.portrait>span{font:600 3rem Fraunces,serif}
.portrait small{font-size:.5rem;text-align:center;text-transform:uppercase}
.body{position:relative;padding:25px 23px}
.body>i{position:absolute;right:20px;color:#d2d9cf;font:1.5rem Fraunces,serif}
.body>small{display:block;margin-right:40px;color:#9a713b;font-size:.55rem;text-transform:uppercase}
.body h3{margin:8px 0;font:600 1.35rem/1.1 Fraunces,serif}
.body h3 a{color:inherit;text-decoration-color:#789080;text-decoration-thickness:1px;text-underline-offset:4px}
.body h3 a:hover,.body h3 a:focus-visible{color:var(--green);text-decoration-thickness:2px}
.body p{margin:0;color:var(--t);font-size:.7rem}
.body blockquote{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--l);color:var(--t);font:.82rem Fraunces,serif}
.body .profile-link,.body em{display:block;margin-top:20px;color:var(--green);font-size:.6rem;font-style:normal;font-weight:700;text-decoration:none;text-transform:uppercase}
.body .profile-link:hover,.body .profile-link:focus-visible{text-decoration:underline;text-underline-offset:4px}
.body em{color:var(--t)}
.source{display:block;max-width:80ch;margin-top:42px;padding-top:22px;border-top:1px solid var(--l);color:var(--t)}
footer{padding:28px 0;border-top:1px solid var(--l);color:var(--t);font-size:.7rem}
@media(max-width:800px){.hero,ol{grid-template-columns:1fr}.head{align-items:start;flex-direction:column}article{grid-template-columns:145px 1fr}.portrait{width:112px;height:150px;margin:20px 8px 20px 20px}}
@media(max-width:480px){header,.hero,.directory,footer{width:calc(100% - 28px)}header b{display:none}.hero{padding:58px 24px}article{grid-template-columns:112px 1fr}.portrait{width:88px;height:118px;margin:16px 8px 16px 16px}.body{padding:20px 15px}.hero h1{font-size:3rem}}