:root{
  --ink:#172b39;
  --muted:#52616b;
  --paper:#fafbf9;
  --navy:#102a3a;
  --gold:#edbc54;
  --line:#d7dedf;
  --max:1160px}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.7}
a{
  color:inherit;
  text-underline-offset:5px}
a:focus-visible{
  outline:3px solid #b77c15;
  outline-offset:6px}
a:hover{
  color:#93621b}
h1,h2,h3,p,figure{
  margin:0}
h1,h2,h3{
  line-height:1.12;
  font-weight:400}
h1,h2{
  font-family:Georgia,'Times New Roman',serif}
.wrap{
  width:min(var(--max),calc(100% - 96px));
  margin-inline:auto}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-block:30px;
  border-bottom:1px solid var(--line)}
.wordmark{
  font-weight:700;
  text-decoration:none;
  font-size:24px;
  letter-spacing:-1px;
  white-space:nowrap}
.wordmark span{
  color:#a66d14}
.site-header nav{
  display:flex;
  gap:34px;
  font-size:14px}
.site-header nav a{
  text-decoration:none}
.hero{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:70px;
  align-items:center;
  padding-block:88px 92px}
.eyebrow,.index{
  font-size:12px;
  letter-spacing:1.7px;
  font-weight:700}
.eyebrow{
  margin-bottom:26px}
h1{
  font-size:clamp(42px,4.5vw,62px);
  letter-spacing:-2.5px}
h1 em{
  font-weight:400;
  color:#4c6877}
.intro{
  font-size:19px;
  line-height:1.65;
  margin-top:30px;
  max-width:540px}
.hero-focus{
  color:var(--muted);
  margin-top:18px;
  max-width:510px}
.hero-focus a{
  font-weight:700;
  color:var(--ink)}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  padding:14px 22px;
  font-size:14px;
  font-weight:700;
  border:1px solid var(--ink);
  min-height:50px}
.button:hover{
  background:#284758;
  color:#fff}
.hero .button{
  margin-top:32px}
.portrait{
  position:relative;
  padding:0 0 16px 16px}
.portrait:before{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:65%;
  height:65%;
  background:var(--gold)}
.portrait img{
  position:relative;
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:50% 30%}
.portrait figcaption{
  position:relative;
  background:#fff;
  padding:14px 18px;
  font-size:14px;
  font-weight:700;
  line-height:1.5}
.portrait figcaption span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:400}
.work-section{
  background:var(--navy);
  color:#fff;
  padding-block:70px}
.work-grid,.about-section{
  display:grid;
  grid-template-columns:1fr 2.15fr;
  gap:70px}
.section-label p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:26px;
  line-height:1.35;
  margin-top:16px}
.work-section .index{
  color:var(--gold)}
.project-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:27px}
.slokie h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:62px;
  font-weight:700;
  letter-spacing:-3px}
.slokie h2 span{
  color:var(--gold)}
.badge{
  font-size:12px;
  border:1px solid #67808c;
  padding:5px 12px;
  color:#d8e3e7}
.slokie h3{
  font-size:25px;
  line-height:1.35;
  margin-bottom:18px}
.slokie p{
  color:#c4d1d8;
  margin-bottom:18px;
  max-width:650px}
.text-link{
  display:inline-flex;
  gap:20px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-block:6px}
.work-section .text-link{
  color:var(--gold);
  margin-top:12px}
.text-link:hover{
  opacity:.75}
.about-section{
  padding-block:88px}
.about-copy h2,.archive-header h2{
  font-size:38px;
  letter-spacing:-1px;
  margin-bottom:24px}
.about-copy p{
  color:var(--muted);
  margin-bottom:18px}
.experience{
  display:flex;
  gap:8px 22px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top:34px;
  padding-top:20px;
  font-size:12px;
  color:var(--muted)}
.archive-section{
  border-top:1px solid var(--line);
  padding-block:58px 88px}
.archive-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:34px}
.archive-header h2{
  margin:14px 0 0}
.archive-header p{
  color:var(--muted);
  font-size:14px}
.project-row{
  display:grid;
  grid-template-columns:35px 1fr 140px 20px;
  gap:20px;
  align-items:center;
  padding-block:25px;
  border-top:1px solid var(--line);
  text-decoration:none}
.project-row:last-child{
  border-bottom:1px solid var(--line)}
.project-row:hover{
  background:#edf1f1;
  color:var(--ink)}
.project-row h3{
  font-size:21px;
  margin-bottom:7px}
.project-row p{
  font-size:14px;
  color:var(--muted);
  max-width:540px}
.project-number,.project-type{
  font-size:12px;
  color:var(--muted)}
.contact-section{
  background:#e7edf0;
  padding-block:68px}
.contact-inner{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:70px;
  align-items:center}
.contact-inner h2{
  font-size:46px;
  letter-spacing:-1.5px;
  margin-block:20px}
.contact-inner p{
  color:var(--muted);
  max-width:580px}
.contact-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  justify-self:end}
.contact-actions .button{
  min-width:230px}
.site-footer{
  padding-block:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.site-footer p,.site-footer>a:last-child{
  font-size:12px;
  color:var(--muted)}
.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  background:#fff;
  padding:12px;
  z-index:10;
  transform:translateY(-160%)}
.skip-link:focus{
  transform:translateY(0)}
@media(min-width:1450px){
  .hero{
  padding-block:105px}
.portrait img{
  height:440px}
}
@media(max-width:950px){
  .wrap{
  width:calc(100% - 56px)}
.hero{
  gap:35px;
  grid-template-columns:1.3fr 1fr;
  padding-block:64px}
.portrait img{
  height:370px}
h1{
  font-size:46px}
.work-grid,.about-section{
  gap:35px;
  grid-template-columns:1fr 2fr}
.section-label p{
  font-size:23px}
.archive-header{
  display:block}
.archive-header p{
  margin-top:16px}
.project-row{
  grid-template-columns:25px 1fr 20px}
.project-type{
  display:none}
.contact-inner{
  gap:35px}
.contact-inner h2{
  font-size:38px}
}
@media(max-width:650px){
  .wrap{
  width:calc(100% - 40px)}
.site-header{
  padding-block:20px;
  align-items:flex-start;
  gap:15px}
.wordmark{
  font-size:21px}
.site-header nav{
  gap:10px 18px;
  justify-content:flex-end;
  flex-wrap:wrap;
  font-size:12px}
.site-header nav a{
  min-height:32px}
.hero{
  grid-template-columns:1fr;
  padding-block:48px;
  gap:38px}
h1{
  font-size:46px;
  letter-spacing:-2px}
.intro{
  font-size:18px}
.portrait{
  width:min(100%,340px)}
.portrait img{
  height:330px}
.work-grid,.about-section{
  grid-template-columns:1fr;
  gap:32px}
.work-section{
  padding-block:46px}
.section-label p{
  display:none}
.slokie h2{
  font-size:52px}
.slokie h3{
  font-size:23px}
.about-section{
  padding-block:50px}
.about-copy h2,.archive-header h2{
  font-size:34px}
.archive-section{
  padding-block:42px 50px}
.project-row{
  gap:12px;
  padding-block:23px}
.project-row h3{
  font-size:19px}
.project-number{
  align-self:start}
.contact-inner{
  grid-template-columns:1fr;
  gap:28px}
.contact-actions{
  justify-self:start}
.contact-section{
  padding-block:46px}
.site-footer{
  flex-wrap:wrap}
.site-footer p{
  margin-left:auto}
.site-footer>a:last-child{
  width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
}


/* About page */
.profile-main { padding-block: 64px; }
.profile-intro { display: grid; grid-template-columns: 1fr 200px; gap: 64px; align-items: center; padding-bottom: 54px; border-bottom: 1px solid var(--line); }
.profile-intro h1 { font-size: clamp(38px, 4vw, 54px); }
.profile-portrait { width: 200px; height: 240px; object-fit: cover; object-position: 50% 28%; }
.profile-content { max-width: 790px; margin: 48px auto 0; }
.profile-content > p { color: var(--muted); margin-bottom: 20px; }
.profile-content h2 { font-size: 34px; margin: 52px 0 24px; letter-spacing: -1px; }
.profile-content h3 { font-size: 23px; margin: 34px 0 14px; }
.profile-content li { margin-bottom: 12px; }
.profile-content ul { padding-left: 24px; }
.profile-content strong { color: var(--ink); }
.profile-content a { overflow-wrap: anywhere; }
.profile-contact { max-width: 790px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--line); display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.earlier-story { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; color: var(--muted); }
.earlier-story summary { color: var(--ink); cursor: pointer; font-weight: 700; padding-block: 12px; }
.earlier-story summary:focus-visible { outline: 3px solid #b77c15; outline-offset: 4px; }
.earlier-story p { margin-block: 20px; }
.earlier-story img { max-width: 100%; height: auto; }
.earlier-story .image { max-width: 220px; }
.earlier-story .image.left { float: left; margin: 8px 24px 12px 0; }
.earlier-story .image.right { float: right; margin: 8px 0 12px 24px; }
.earlier-story::after { content: ''; display: block; clear: both; }
@media (max-width: 650px) {
  .profile-main { padding-block: 40px; }
  .profile-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 36px; }
  .profile-portrait { width: 140px; height: 165px; }
  .profile-content { margin-top: 32px; }
  .profile-content h2 { font-size: 30px; }
  .profile-content h3 { font-size: 21px; }
  .profile-contact { align-items: flex-start; flex-direction: column; }
}
/* Project imagery and brand marks */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.slokie-banner { display: block; width: 100%; height: auto; margin-bottom: 28px; }
.slokie-mark { display: block; width: 172px; max-width: 100%; margin-top: 30px; }
.slokie-mark img { display: block; width: 100%; height: auto; border-radius: 22%; }
.background-marks { display: grid; gap: 26px; margin-top: 32px; max-width: 220px; }
.background-marks figure { padding: 16px; background: #fff; border: 1px solid var(--line); }
.background-marks img { display: block; width: 100%; height: 76px; object-fit: contain; }
.background-marks figcaption { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }
.project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: #fff; text-decoration: none; }
.project-card:hover { color: var(--ink); border-color: #7f949f; }
.project-art { height: 210px; background: #e8eef0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.project-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.storm-art { background: #18364a; }
.storm-art img { width: 210px; object-fit: contain; }
.engineering-art { background: #b5b5b5; }
.engineering-art img { object-fit: contain; }
.model-art { padding: 18px; background: #f4f5f5; }
.model-art img { object-fit: contain; }
.project-card-copy { padding: 25px 24px 28px; }
.project-card h3 { font-size: 22px; line-height: 1.3; margin: 12px 0; }
.project-card h3 span { font-size: 18px; }
.project-card p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.career-mark { float: right; width: 130px; margin: 28px 0 16px 28px; background: #fff; padding: 8px; }
.career-mark img { display: block; width: 100%; height: 96px; object-fit: contain; }
.wordmark-image { width: 170px; }
.wordmark-image img { height: 70px; }
.profile-content h2 { clear: both; }
.career-photo { margin-block: 30px; clear: both; }
.career-photo img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; object-position: 50% 58%; }
.career-photo figcaption { font-size: 13px; color: var(--muted); padding-top: 8px; }
@media (max-width: 950px) {
  .project-gallery { gap: 16px; }
  .project-card-copy { padding: 20px 16px; }
  .project-card h3 { font-size: 20px; }
}
@media (max-width: 650px) {
  .slokie-mark { width: 100px; margin-top: 22px; }
  .background-marks { grid-template-columns: 1fr 1fr; max-width: none; gap: 14px; margin-top: 24px; }
  .background-marks figure { padding: 12px; }
  .background-marks img { height: 64px; }
  .project-gallery { grid-template-columns: 1fr; gap: 24px; }
  .project-art { height: 210px; }
  .project-card-copy { padding: 24px; }
  .career-mark, .wordmark-image { width: 110px; margin-left: 16px; }
  .career-mark img { height: 70px; }
}