:root{
  --bg:#FDFCF8;
  --ink:#33403E;
  --deep:#3F736F;
  --muted:#6E7C79;
  --rule:#D9D3C8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16.5px/1.85 "Avenir Next","Avenir","Futura","Century Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  letter-spacing:.012em;
  text-align:center;
}
.wrap{max-width:640px;margin:0 auto;padding:0 28px}
.wide{max-width:1040px;margin:0 auto;padding:0 28px}

/* ---------- header ---------- */
header{padding:44px 0 0}
.mark{
  width:68px;height:90px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
}
.mark img{width:100%;height:100%;object-fit:contain}
.sitetitle{
  font-weight:300;font-size:33px;line-height:1.25;color:var(--deep);
  letter-spacing:.005em;margin:0;
}
.sitetitle a{color:inherit;text-decoration:none}
nav{
  display:inline-flex;gap:26px;margin:26px auto 0;padding:0 34px 14px;
  border-bottom:1px solid var(--deep);
}
nav a{color:var(--muted);text-decoration:none;font-size:14px;letter-spacing:.03em}
nav a:hover,nav a.on{color:var(--deep)}

/* ---------- hero ---------- */
.hero{padding:70px 0 54px}
.hero h1{
  font-weight:300;font-size:40px;line-height:1.28;color:var(--deep);
  margin:0 0 22px;letter-spacing:.004em;
}
.hero .sub{color:var(--deep);font-size:16px;letter-spacing:.02em;margin:0;opacity:.9}

/* ---------- banner image ---------- */
.banner{position:relative;margin:0 0 78px;width:100%;padding:0}
.banner .frame{
  position:relative;overflow:hidden;
  aspect-ratio:24/9;background:#E8E4DA;
  display:flex;align-items:center;justify-content:center;
}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .quote{
  position:relative;z-index:2;color:#fff;font-weight:300;
  font-size:23px;line-height:1.65;letter-spacing:.015em;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  max-width:620px;padding:0 28px;
}
.banner .quote span{display:block;margin-top:16px;font-size:15px}
.banner .hint{position:relative;z-index:2;color:#7E8A87;font-size:13px;line-height:1.7;padding:0 28px;max-width:440px}
.banner .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,34,38,.10) 0%,rgba(20,34,38,.42) 55%,rgba(20,34,38,.52) 100%)}

/* ---------- type ---------- */
main{padding:0 0 30px}
section{padding:0 0 64px}
h2{
  font-weight:300;font-size:30px;line-height:1.3;color:var(--deep);
  margin:0 0 30px;letter-spacing:.004em;
}
h3{font-weight:400;font-size:17px;color:var(--deep);margin:36px 0 10px;letter-spacing:.02em}
p{margin:0 0 22px}
.theme{margin:0 0 22px}
/* Category headings in "Who I work with". Deliberately heavier and darker
   than the rest of the teal, because these sit inline above their own body
   text and at 500 they were barely distinguishable from it. Desktop and
   mobile both. 600 is DemiBold, a real weight in Avenir Next. */
.theme b{color:#2C5551;font-weight:600}
.email{color:var(--deep);white-space:nowrap}
a{color:var(--deep)}
.morelink{display:inline-block;margin-top:14px;color:var(--deep);font-size:15.5px}
.rule{width:54px;height:1px;background:var(--rule);margin:52px auto}
.crisis{color:var(--muted);font-size:15px;line-height:1.8;max-width:520px;margin:0 auto}

/* ---------- portrait ---------- */
.portrait{width:250px;margin:0 auto 42px}
.portrait img{width:100%;border-radius:2px;display:block}
.portrait .ph{
  aspect-ratio:4/5;background:#EDE9E0;border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12.5px;line-height:1.6;padding:18px;
}

footer{padding:46px 0 54px;color:var(--muted);font-size:13px;letter-spacing:.02em}
footer p{margin:0 0 6px}

/* ---------- tablet ---------- */
@media (max-width:820px){
  .hero{padding:56px 0 44px}
  .hero h1{font-size:33px}
  .banner{margin-bottom:60px}
  h2{font-size:27px}
}

/* ---------- phone ---------- */
@media (max-width:620px){
  /* Headings on phones. Avenir Next has no 300 weight, so font-weight:300
     resolves to UltraLight (100) and looks far too thin, while 400 jumps
     straight to Regular and looks heavy. There is nothing in between to ask
     for, so instead we keep the light letterform and thicken the strokes
     fractionally. Adjust the stroke width, not the weight. */
  .sitetitle,.hero h1,h2{font-weight:300;-webkit-text-stroke:0.35px currentColor}
  .banner .quote{font-weight:400;text-shadow:0 2px 16px rgba(0,0,0,.75),0 0 3px rgba(0,0,0,.45)}
  .banner .scrim{background:linear-gradient(180deg,rgba(16,28,32,.34) 0%,rgba(16,28,32,.60) 55%,rgba(16,28,32,.66) 100%)}

  body{font-size:16px;line-height:1.8}
  .wrap,.wide{padding:0 22px}
  header{padding:34px 0 0}
  .mark{width:56px;height:74px;margin-bottom:16px}
  .sitetitle{font-size:25px}
  nav{
    display:flex;width:100%;gap:0;padding:0;margin-top:22px;
    border-bottom:1px solid var(--deep);
  }
  nav a{flex:1;padding:13px 4px;font-size:12.5px}
  .hero{padding:40px 0 34px}
  .hero h1{font-size:26px;line-height:1.3}
  .hero .sub{font-size:14px}
  .banner{margin-bottom:46px}
  .banner .frame{aspect-ratio:3/2}
  .banner .quote{font-size:17.5px;padding:0 20px}
  .banner .quote span{font-size:13.5px}
  section{padding-bottom:48px}
  h2{font-size:23px;margin-bottom:24px}
  .rule{margin:40px auto}
  .portrait{width:min(230px,68%);margin-bottom:34px}
  footer{padding:36px 0 44px}
}

@media (max-width:380px){
  .wrap,.wide{padding:0 17px}
  .sitetitle{font-size:22px}
  nav a{font-size:11.5px;padding:12px 2px}
  .hero h1{font-size:23px}
  h2{font-size:21px}
}