:root{ --blue:#0a6591; --link:#6594A4; --hover:#0D6894; --ink:#3A3A3A; }
*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
body{ margin:0; font-family:Arial,Helvetica,sans-serif; background:#DFEDF0; color:var(--ink); }
.wrap{ position:relative; max-width:1140px; margin:0 auto 30px; background:#fff; box-shadow:0 2px 24px rgba(0,0,0,.10); }

/* header */
header.site{ position:relative; overflow:hidden; min-height:132px; padding:28px clamp(28px,7vw,110px) 24px;
  background:linear-gradient(180deg, rgb(74,159,200) 0%, rgb(108,175,207) 26%, rgb(182,214,226) 64%, #ffffff 100%); }
header.site .swirl{ position:absolute; left:0; top:0; bottom:0; width:min(58%,480px);
  background:url('/images/swirl.png') left center / contain no-repeat; opacity:1; pointer-events:none; }
header.site .brand{ position:relative; z-index:2; }
header.site .nm{ font-family:'EB Garamond',Georgia,serif; font-weight:500; color:var(--blue);
  font-size:clamp(30px,5.4vw,54px); line-height:1; letter-spacing:1px; }
header.site .sub{ font-family:'EB Garamond',Georgia,serif; font-weight:600; color:var(--blue);
  text-transform:uppercase; letter-spacing:.22em; font-size:clamp(10px,1.6vw,15px); margin-top:8px; }
header.site .sub.two{ font-size:clamp(9px,1.45vw,13.5px); letter-spacing:.2em; margin-top:3px; }

/* layout */
.layout{ display:flex; align-items:flex-start; }
nav.side{ flex:0 0 212px; padding:26px 0 34px; }
nav.side a{ display:block; color:var(--link); text-decoration:none; padding:11px 26px;
  border-bottom:1px solid #cfcfcf; font-size:15px; }
nav.side a:hover, nav.side a.selected{ color:var(--hover); font-weight:bold; }
main.content{ flex:1; min-width:0; padding:18px clamp(24px,4vw,56px) 34px; line-height:1.55; font-size:15px; border-left:1px solid #eee; }
.pageHeader{ font-family:'Tangerine',cursive; font-weight:700; font-size:46px; line-height:1; color:var(--ink); margin:4px 0 20px; }
.blk, .centerDiv{ margin:0 0 18px; }
main.content ul{ margin:0 0 18px; padding-left:22px; }
footer.site{ clear:both; text-align:center; color:#555; font-size:13px; line-height:1.7;
  padding:16px 20px 26px; border-top:1px solid #eee; }

/* expandable sections (About) */
.subHeader{ margin:14px 0 14px; }
.subHeaderText{ display:block; position:relative; text-decoration:none; color:#337FA3;
  padding:0 0 5px 26px; border-bottom:1px solid #AFAFAF; font-size:16px; }
.plusMinus{ position:absolute; left:0; top:2px; width:16px; height:16px; border:none; }
.toExpand{ padding-top:6px; }
.eduDiv{ margin-bottom:22px; overflow:hidden; }
.eduUnderline{ text-decoration:underline; }
.clearEdu{ clear:both; }
.leftCol{ float:left; width:190px; }
.rightCol{ float:left; width:240px; }
.contactBlock{ line-height:1.9; }
.contactBlock a{ color:var(--link); text-decoration:none; }

/* responsive */
@media (max-width:900px){ nav.side{ flex-basis:186px; } }
@media (max-width:680px){
  .layout{ flex-direction:column; align-items:stretch; }
  nav.side{ flex:none; width:100%; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:2px 4px; padding:10px 8px; border-bottom:1px solid #eee; }
  nav.side a{ border-bottom:none; padding:8px 13px; white-space:nowrap; }
  main.content{ border-left:none; padding:16px 22px 28px; }
  .pageHeader{ font-size:40px; }
  header.site .swirl{ width:76%; opacity:.7; }
  .leftCol, .rightCol{ float:none; width:auto; }
}
@media (max-width:449px){ nav.side a{ padding:8px 9px; } }
@media (max-width:407px){ nav.side a{ padding:8px 4px; } }