:root{
  --bg:#eceff0;
  --paper:#ffffff;
  --ink:#13201f;
  --muted:#5d716e;
  --accent:#0e6b62;
  --signal:#a8501f;
  --line:#d5dcda;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.wrap{width:100%;max-width:1010px;margin:0 auto;padding:0 22px}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.mark{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink)}
.mark b{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em}
.mark span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
nav a{
  text-decoration:none;color:var(--muted);font-size:15px;
  padding-bottom:3px;border-bottom:2px solid transparent;
}
nav a:hover{color:var(--ink)}
nav a.here{color:var(--ink);border-bottom-color:var(--accent)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;
  padding:7px 11px;font-family:var(--mono);font-size:13px;color:var(--ink);cursor:pointer}

/* generic blocks */
.band{padding:52px 0;border-bottom:1px solid var(--line)}
.band.tint{background:var(--paper)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--signal);margin:0 0 14px}
h1{font-family:var(--serif);font-weight:600;font-size:39px;line-height:1.18;letter-spacing:-.015em;margin:0 0 16px}
h2{font-family:var(--serif);font-weight:600;font-size:27px;line-height:1.25;margin:0 0 14px}
h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 8px}
p{margin:0 0 16px}
.lead{font-size:19px;color:#2c3d3b;max-width:60ch}
.small{font-size:15px;color:var(--muted)}

/* hero */
.hero{padding:58px 0 46px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}
.shot{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#dfe5e3}
.shot img{width:100%;height:270px;object-fit:cover}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.facts li{font-family:var(--mono);font-size:12px;color:var(--muted);
  border:1px solid var(--line);background:var(--paper);border-radius:2px;padding:5px 10px}

/* notes list */
.note{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.note:first-of-type{border-top:none}
.note .thumb{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#dfe5e3}
.note .thumb img{width:100%;height:92px;object-fit:cover}
.note h3{margin-bottom:6px}
.note h3 a{color:var(--ink);text-decoration:none}
.note h3 a:hover{color:var(--accent)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.05em;margin-bottom:6px}
.meta i{font-style:normal;color:var(--signal)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:22px}
.card .no{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em}

/* tool table */
.tools{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line)}
.tools th,.tools td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top}
.tools th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tools tr:last-child td{border-bottom:none}
.tools td b{font-weight:600}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px}
blockquote{margin:0;padding-left:16px;border-left:3px solid var(--accent);font-size:16.5px;color:#2c3d3b}
blockquote footer{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:8px;letter-spacing:.05em}

/* form */
form{max-width:520px}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px}
input,textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);
  border-radius:3px;background:var(--paper);color:var(--ink)}
textarea{min-height:120px;resize:vertical}
button.send{margin-top:20px;background:var(--accent);color:#fff;border:none;border-radius:3px;
  padding:11px 22px;font:inherit;font-size:16px;cursor:pointer}
button.send:hover{background:#0b564f}
.ok{margin-top:14px;color:var(--accent);font-size:15px}

/* footer */
footer.site{background:var(--paper);border-top:1px solid var(--line);padding:34px 0 40px;font-size:14.5px;color:var(--muted)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer.site h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin:0 0 10px;font-weight:600}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:5px}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--accent)}
.rule{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;font-size:13px}

@media (max-width:820px){
  .hero-grid,.cards,.quotes,.fgrid{grid-template-columns:1fr}
  h1{font-size:31px}
  nav{display:none;width:100%}
  nav.open{display:block}
  .top .wrap{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  nav ul{flex-direction:column;gap:11px;padding:12px 0 4px}
  .burger{display:block}
  .note{grid-template-columns:1fr}
  .note .thumb img{height:150px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}