:root{
 --bg:#f7f5f0;
 --text:#2d2d2d;
 --muted:#666;
 --accent:#61768d;
 --rule:#ddd4c8;
 --paper:rgba(248,245,238,.90);
}
@media(prefers-color-scheme:dark){
:root{
 --bg:#181a1d;
 --text:#ece8e2;
 --muted:#b9b9b9;
 --accent:#9eb8d2;
 --rule:#34383c;
 --paper:rgba(28,30,33,.82);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--bg);
 color:var(--text);
 font:400 18px/1.85 Inter,sans-serif;
}
.hero{
 min-height:78vh;
 display:flex;
 justify-content:flex-end;
 align-items:center;
 padding:4rem 6%;
 position:relative;
 background:
 linear-gradient(270deg,rgba(42,31,18,.28),rgba(42,31,18,.10) 40%,transparent 70%),
 url("images/hero.png") center center/cover no-repeat;
}
.hero-panel{
 max-width:520px;
 background:var(--paper);
 backdrop-filter:blur(3px);
 border-radius:14px;
 padding:2.4rem;
 box-shadow:0 10px 40px rgba(0,0,0,.18);
}
h1,h2{
 font-family:"Source Serif 4",serif;
}
h1{
 margin:0;
 font-size:3.6rem;
 line-height:1.05;
}
.hero-quote{
 font-style:italic;
 font-size:1.25rem;
 margin:1.2rem 0 .6rem;
 color:var(--text);
}
.hero-tagline{
 color:var(--accent);
 font-weight:600;
 margin:.2rem 0 1.5rem;
}
.hero-since{
 color:var(--muted);
 font-size:.92rem;
}
nav{
 text-align:center;
 padding:1.2rem;
}
nav a{
 text-decoration:none;
 color:var(--accent);
 margin:0 .9rem;
}
nav a:hover{text-decoration:underline}
main{
 max-width:760px;
 margin:auto;
 padding:3rem 2rem 4rem;
}
section{
 padding:2.8rem 0;
 border-top:1px solid var(--rule);
}
section:first-child{border-top:none}
h2{
 font-size:2rem;
 margin-bottom:.5rem;
}
.lead{
 font-size:1.2rem;
}
.lead:first-letter{
 float:left;
 font-family:"Source Serif 4",serif;
 font-size:4rem;
 line-height:.8;
 padding:.15rem .3rem 0 0;
}
footer{
 text-align:center;
 color:var(--muted);
 padding:3rem 2rem;
 border-top:1px solid var(--rule);
}
.footer-note{font-size:.9rem}
@media (max-width:900px){
.hero{
 justify-content:center;
 padding:2rem;
 min-height:68vh;
 background:
 linear-gradient(rgba(30,22,14,.42),rgba(30,22,14,.20)),
 url("images/hero.png") center/cover no-repeat;
}
.hero-panel{
 max-width:100%;
}
h1{font-size:2.8rem}
main{padding:2rem 1.5rem}
nav a{display:inline-block;margin:.35rem .6rem}
}