:root{
  --paper:#f6f3ec; --paper2:#efeadf; --ink:#14213a; --ink2:#3b4660; --muted:#6b7385;
  --rule:#d9d2c3; --rule2:#e7e1d4; --brass:#a8742a; --brass2:#c99540; --white:#fffdf8;
  --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--ink);text-decoration-color:var(--brass);text-underline-offset:3px}
a:hover{color:var(--brass)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}

/* header */
header.top{border-bottom:1px solid var(--rule);background:var(--paper)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none}
.brand b{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:21px;font-weight:700;letter-spacing:.01em}
nav.links{display:flex;gap:26px;font-size:15px}
nav.links a{text-decoration:none;color:var(--ink2)}
nav.links a:hover{color:var(--brass)}

/* hero */
.hero{padding:88px 0 76px;background:
  repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule2) 31px 32px);
  border-bottom:1px solid var(--rule)}
.hero .wrap{position:relative}
.hero .wrap:before{content:"";position:absolute;left:4px;top:-88px;bottom:-76px;border-left:2px solid #e2b8b0;opacity:.7}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.hero h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:700;font-size:56px;line-height:1.08;margin:14px 0 20px;max-width:760px;letter-spacing:-.01em}
.hero p.lede{font-size:20px;color:var(--ink2);max-width:640px;margin:0 0 32px}
.btn{display:inline-block;background:var(--ink);color:var(--white);text-decoration:none;font-weight:700;font-size:15px;padding:13px 22px;border-radius:6px}
.btn:hover{background:var(--brass);color:var(--white)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);margin-left:10px}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent}

/* sections */
section{padding:76px 0}
section h2{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:34px;margin:8px 0 14px;letter-spacing:-.005em}
section .intro{color:var(--ink2);max-width:640px;margin:0 0 36px}
.alt{background:var(--paper2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* apps */
.apps{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
.card{background:var(--white);border:1px solid var(--rule);border-radius:10px;padding:28px}
.app{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start}
.app img{width:96px;height:96px;border-radius:22px;box-shadow:0 6px 18px rgba(20,33,58,.18)}
.app h3{margin:0 0 4px;font-size:24px}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass2);border-radius:999px;padding:2px 10px;margin-bottom:12px}
.app p{margin:0 0 14px;color:var(--ink2)}
.app ul{margin:0 0 20px;padding-left:20px;color:var(--ink2)}
.app ul li{margin:3px 0}
.more{display:flex;flex-direction:column;justify-content:center;border-style:dashed;background:transparent}
.more h3{margin:0 0 8px;font-size:20px}
.more p{margin:0;color:var(--muted);font-size:15px}

/* principles */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.three .card{padding:24px}
.three h3{margin:6px 0 8px;font-size:19px}
.three p{margin:0;color:var(--ink2);font-size:16px}
.num{font-family:"Iowan Old Style",Georgia,serif;color:var(--brass);font-size:15px;font-weight:700;border-bottom:1px solid var(--rule);display:block;padding-bottom:10px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact .card h3{margin:0 0 6px;font-size:19px}
.contact .card p{margin:0;color:var(--ink2)}

/* legal pages */
.legal{padding:56px 0 72px}
.legal .wrap{max-width:760px}
.legal h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:40px;margin:0 0 6px}
.legal .updated{color:var(--muted);font-size:15px;margin:0 0 30px}
.legal h2{font-size:21px;margin:34px 0 8px;font-family:inherit}
.legal p,.legal li{color:var(--ink2)}
.ph{background:#fbe7a6;color:#5a4300;padding:0 4px;border-radius:3px;font-weight:700}

/* footer */
footer{border-top:1px solid var(--rule);padding:34px 0 44px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer .fl{display:flex;gap:20px}
footer .fine{flex-basis:100%;font-size:13px;margin-top:6px}

@media (max-width:820px){
  .hero{padding:60px 0 54px}
  .hero h1{font-size:40px}
  .hero p.lede{font-size:18px}
  .apps,.three,.contact{grid-template-columns:1fr}
  nav.links{gap:16px;font-size:14px}
  section{padding:56px 0}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .hero h1{font-size:33px}
  .hero .wrap:before{display:none}
  .app{grid-template-columns:1fr}
  .app img{width:76px;height:76px;border-radius:18px}
  nav.links a.hide-sm{display:none}
  .brand b{font-size:18px}
  .btn.ghost{margin:10px 0 0}
  .legal h1{font-size:32px}
}