@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
:root {
  --fog: #e5e9e4;
  --bottle: #203b31;
  --clay: #925d48;
  --muted: #4e6055;
  --rule: #acb9ae;
  --mono: Consolas, "Liberation Mono", monospace;
  color: var(--bottle);
  background: var(--fog);
  font: 16px/1.5 "DM Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.outer { max-width: 1660px; padding: 0 clamp(22px, 4.7vw, 80px); margin: auto; }
.skip { position: absolute; z-index: 3; transform: translateY(-120%); padding: 10px; background: var(--fog); }
.skip:focus { transform: none; }
.masthead, nav, .brand, footer { display: flex; align-items: center; }
.masthead { justify-content: space-between; min-height: 80px; border-bottom: 1px solid var(--bottle); }
.brand { gap: 9px; text-decoration: none; }
.brand img { object-fit: contain; filter: brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(718%) hue-rotate(101deg) brightness(96%); }
.brand > span { display: grid; gap: 3px; }
.brand b { font-size: 28px; font-weight: 720; letter-spacing: -.06em; line-height: .95; }
.brand small { font-size: 10px; font-weight: 650; letter-spacing: .035em; }
nav { gap: 30px; }
nav a, footer a { padding: 8px 0; text-decoration: none; font-size: 14px; }
nav a[aria-current], nav a:hover, footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
nav .nav-contact { padding-left: 22px; border-left: 1px solid var(--rule); }
.nav-contact span { margin-left: 5px; }
.home-intro, .about-intro { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); align-items: center; gap: clamp(28px,6.5vw,105px); padding: clamp(35px,3.8vw,65px) 0; }
.kicker { display: flex; align-items: center; gap: 10px; font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .11em; }
.kicker::before { content: ""; display: inline-block; width: 20px; height: 2px; background: currentColor; flex: none; }
h1, h2, h3 { text-wrap: balance; }
h1 { margin-top: 17px; font-size: clamp(46px,4.95vw,80px); font-weight: 540; line-height: .99; letter-spacing: -.067em; }
.intro-copy, .body-copy { max-width: 53ch; }
.intro-copy { font-size: clamp(15px,1.17vw,19px); line-height: 1.45; letter-spacing: -.012em; }
.intro-copy p+p, .body-copy p+p, .focus p+p { margin-top: 11px; }
.action { display: inline-flex; align-items: center; gap: 19px; margin-top: 19px; padding: 11px 15px; background: var(--bottle); color: var(--fog); text-decoration: none; font-size: 14px; font-weight: 600; }
.action:hover { background: #304d40; }
.action span { font-size: 18px; line-height: 1; }
.action:focus-visible { outline-color: var(--bottle); }
.explore, .split, footer { border-top: 1px solid var(--bottle); }
.explore { padding: 25px 0 36px; }
.explore > h2 { font-size: clamp(28px,2.6vw,42px); margin-bottom: 21px; }
h2 { font-size: clamp(35px,3.6vw,60px); font-weight: 540; letter-spacing: -.055em; line-height: 1.07; }
.system-layout { display: grid; grid-template-columns: minmax(0,1.95fr) minmax(0,.95fr); align-items: stretch; }
.plate { min-width: 0; display: flex; flex-direction: column; }
.plate-heading { display: flex; align-items: baseline; gap: 13px; padding: 12px 18px; color: #253846; background: #e4ebef; }
.plate-heading strong { font-size: 19px; line-height: 1; letter-spacing: .015em; }
.art { display: block; width: 100%; background: #e9eff2; }
.art img { display: block; width: 100%; height: auto; }
.plate-heading strong { padding-left: 9px; border-left: 3px solid var(--clay); }
figcaption { padding: 9px 0 0; font: 11px/1.45 var(--mono); color: var(--muted); }
.panel { align-self: start; position: relative; color: var(--fog); background: var(--bottle); padding: clamp(21px,2.35vw,38px); min-height: calc(100% - 25px); }
.component:not(.active) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inverse { color: #c4d1c6; font-size: 10px; }
.inverse::before { width: 12px; height: 1px; }
.component h3 { font-size: clamp(30px,2.8vw,45px); font-weight: 530; line-height: 1.02; letter-spacing: -.055em; margin: 15px 0 15px; }
.component > p:not(.kicker), .component dd { font-size: clamp(14px,1.12vw,18px); line-height: 1.45; }
.component dl { border-top: 1px solid #688075; padding-top: 16px; margin-top: 21px; }
.component dt { font: 600 10px/1.5 var(--mono); letter-spacing: .10em; text-transform: uppercase; color: #c4d1c6; margin-bottom: 4px; }
.component dd+dt { margin-top: 14px; }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(28px,7vw,114px); padding: clamp(35px,3.6vw,60px) 0; }
.split h2, .focus h2 { margin-top: 16px; }
.body-copy, .focus > p:not(.kicker) { font-size: clamp(16px,1.24vw,20px); letter-spacing: -.012em; max-width: 53ch; }
.contact h2 { max-width: 12em; }
footer { padding: 18px 0 26px; gap: 27px; font-size: 13px; }
footer span { font-weight: 650; margin-right: auto; }
.about-intro h1 { max-width: 18ch; }
.about-intro .intro-copy { font-size: clamp(19px,1.65vw,27px); }
.about-feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px,6vw,95px); padding-bottom: 40px; align-items: center; }
.harbor img { width: 100%; aspect-ratio: 1.9; height: auto; display: block; object-fit: cover; object-position: center 52%; }
.harbor figcaption { display: flex; justify-content: space-between; column-gap: 8px; }
.harbor a { text-decoration: none; }
.harbor a:hover { text-decoration: underline; }
.focus h2 { margin-bottom: 19px; }
@media (max-width: 1000px) {
  .home-intro, .about-intro { grid-template-columns: 1.28fr 1fr; gap: 30px; }
  .desktop-break { display: none; }
  .system-layout { grid-template-columns: 1.55fr 1fr; }
  .about-intro h1 { font-size: 50px; }
  .about-feature { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .outer { padding: 0 20px; }
  .masthead { min-height: 69px; }
  .brand { gap: 6px; }
  .brand img { width: 36px; height: 36px; }
  .brand b { font-size: 23px; }
  .brand small { font-size: 9px; }
  nav { gap: 15px; }
  nav a { font-size: 13px; }
  nav .nav-contact { border: 0; padding-left: 0; }
  .home-intro, .about-intro, .system-layout, .split, .about-feature { grid-template-columns: 1fr; }
  .home-intro, .about-intro { padding: 33px 0 30px; gap: 21px; }
  h1, .about-intro h1 { font-size: clamp(44px,8.6vw,62px); max-width: 20ch; margin-top: 13px; }
  .intro-copy { font-size: 16px; }
  .about-intro .intro-copy { font-size: 19px; }
  .explore { padding: 23px 0 27px; }
  .explore > h2 { margin-bottom: 15px; }
  .system-layout { gap: 13px; }
  .panel { min-height: 0; padding: 23px; }
  .component h3 { margin: 11px 0; }
  .component dl { margin-top: 16px; }
  .split { gap: 17px; padding: 28px 0; }
  .about-feature { padding-bottom: 26px; gap: 25px; }
  .split h2, .focus h2 { margin-top: 10px; }
  .split h2 br, .focus h2 br { display: none; }
  .focus h2 { margin-bottom: 13px; }
  figcaption { font-size: 10px; }
  footer { gap: 16px; }
}
@media (max-width: 360px) {
  .outer { padding: 0 14px; }
  nav { gap: 10px; }
  .nav-contact span { display: none; }
}
@media print {
  .component:not(.active) { position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
  .component + .component { margin-top: 22px; }
}