:root{
  --cream:#f6f0e5; --paper:#efe6d6; --ink:#1f1b16; --muted:#5f574c; --line:#d9cdb8;
  --navy:#1e3a7b; --navy-d:#162c5e; --gold:#c49a52; --dark:#1d1a16;
  --serif:'Cormorant Garamond',Georgia,serif; --body:'EB Garamond',Georgia,serif; --sans:'Jost',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 40px}
.eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em}
p{text-wrap:pretty}
.btn{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:14px 24px;border:1px solid var(--navy);transition:.2s}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-d)}

/* hero */
.hero{padding:96px 0 110px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.hero h1{font-size:clamp(56px,7.5vw,104px);margin:22px 0 28px}
.hero .lede{font-size:21px;color:var(--muted);max-width:520px}
.hero .lens{font-family:var(--serif);font-style:italic;font-size:23px;color:var(--navy);margin-top:18px;max-width:520px;padding-left:18px;border-left:1px solid var(--gold)}
.hero .by{font-style:italic;margin:22px 0 36px;font-size:19px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{grid-column:1/-1;margin-top:40px}
.hero-photo img{display:block;width:100%;aspect-ratio:1024/771;max-height:620px;object-fit:cover;object-position:center 30%;filter:sepia(.12);box-shadow:0 30px 50px -30px rgba(0,0,0,.4)}
.cover{justify-self:center;width:340px;aspect-ratio:2/3;background:linear-gradient(100deg,#172f66 0,#1e3a7b 7%,#223f84 60%,#1b3572);color:#f4ead8;padding:48px 38px;display:flex;flex-direction:column;box-shadow:0 40px 60px -30px rgba(20,30,60,.55),0 10px 20px -10px rgba(0,0,0,.25);position:relative;transform:rotate(1.5deg)}
.cover::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.12)}
.cover small{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.cover h2{font-size:46px;margin-top:18px;font-weight:500}
.cover .rule{width:44px;height:1px;background:var(--gold);margin:26px 0}
.cover .sub{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.cover .auth{margin-top:auto;font-family:var(--serif);font-size:20px;font-style:italic}

/* intro */
.intro{padding:110px 0 140px;border-top:1px solid var(--line)}
.intro .wrap{display:grid;grid-template-columns:.8fr 1.6fr;gap:80px}
.intro h2{font-size:52px;margin-top:18px}
.intro .body p{margin-bottom:22px;color:#3a342c;font-size:19px}
.intro .body p:first-child::first-letter{font-family:var(--serif);font-size:64px;float:left;line-height:.85;padding:6px 10px 0 0;color:var(--navy)}
.intro-photo{margin-top:40px;max-width:340px}
.intro-photo img{display:block;width:100%;aspect-ratio:771/1024;object-fit:cover;box-shadow:0 30px 50px -30px rgba(0,0,0,.4)}

@media (max-width:900px){
  .wrap{padding:0 24px}
  .hero .wrap,.intro .wrap{grid-template-columns:1fr;gap:48px}
  .cover{width:280px}
}