:root {
  color-scheme:dark;
  --bg:#151c19;
  --text:#f0f2e9;
  --muted:#b0b9af;
  --accent:#d8f781;
  --line:#37403a;
  font-family:'DM Sans',sans-serif;
  font-synthesis:none;
  scroll-behavior:smooth}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:7px}
::selection {
  background:var(--accent);
  color:var(--bg)}
.shell {
  max-width:1440px;
  margin:auto;
  padding:0 6%}
header {
  height:120px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:25px;
  font-weight:650;
  letter-spacing:-1px}
.brand-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  width:39px;
  height:39px;
  background:var(--accent);
  color:var(--bg);
  font-size:26px;
  letter-spacing:-4px;
  padding-right:5px;
  border-radius:9px}
.brand-mark span {
  transform:translateY(2px)}
.brand-period {
  color:var(--accent)}
.nav-link {
  font-size:14px;
  display:flex;
  gap:30px;
  align-items:center}
.nav-link span {
  font-size:23px;
  color:var(--accent)}
.nav-link:hover {
  color:var(--accent)}
.hero {
  padding:66px 0 52px}
.eyebrow {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:12px;
  font-weight:550;
  letter-spacing:1.5px;
  color:var(--muted)}
.tiny-cross {
  font-size:24px;
  color:var(--accent)}
h1 {
  font-size:clamp(64px,8.4vw,118px);
  line-height:1.02;
  font-weight:500;
  letter-spacing:-.067em;
  margin:30px 0 34px}
h1>span {
  color:var(--accent)}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px}
.hero-bottom>p {
  font-size:18px;
  line-height:1.65;
  margin:0;
  color:var(--muted);
  letter-spacing:-.2px}
.location {
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:4px;
  font-size:12px;
  letter-spacing:1.1px}
.location svg {
  width:39px;
  height:39px;
  color:var(--muted)}
.location span {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:7px;
  letter-spacing:.25px}
.projects {
  padding-top:28px;
  border-top:1px solid var(--line);
  scroll-margin-top:24px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:25px}
.section-heading h2 {
  font-weight:450;
  font-size:17px;
  margin:0;
  letter-spacing:-.2px}
.section-heading>span {
  font-size:12px;
  color:var(--muted);
  letter-spacing:1px}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px}
.project {
  color:#173b39;
  border-radius:8px;
  padding:26px 27px 20px;
  display:flex;
  flex-direction:column;
  min-height:365px;
  transition:transform .22s,background .22s;
  position:relative}
.tides {
  background:#d1e4e1}
.punnawithi {
  background:#efdfc7;
  color:#553b27}
.glance {
  background:#dfdcf1;
  color:#3c345b}
.project:hover {
  transform:translateY(-6px);
  background:#edf3df}
.project:focus-visible {
  outline-offset:5px}
.card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px}
.category {
  font-size:12px;
  letter-spacing:1.15px;
  font-weight:650}
.arrow {
  width:32px;
  height:32px;
  border:1px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:22px;
  transition:transform .22s}
.project:hover .arrow {
  transform:rotate(45deg)}
.project-symbol {
  margin:25px 0 19px;
  width:66px;
  height:66px}
.project-symbol svg {
  width:100%;
  height:100%}
.project h3 {
  font-size:29px;
  letter-spacing:-1.25px;
  font-weight:550;
  margin:0 0 12px}
.project p {
  font-size:16px;
  line-height:1.6;
  margin:0 0 26px;
  max-width:310px}
.card-bottom {
  border-top:1px solid #173b392e;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:17px;
  margin-top:auto;
  font-size:12px;
  font-weight:550}
.project-number {
  opacity:.65;
  font-variant-numeric:tabular-nums}
.closing {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:42px 0;
  color:var(--muted)}
.closing p {
  font-size:14px;
  margin:0}
.closing .tiny-cross {
  font-size:21px}
footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border-top:1px solid var(--line);
  padding:28px 0 32px;
  font-size:12px;
  color:var(--muted)}
footer>span:nth-child(2) {
  font-size:12px;
  letter-spacing:1.1px}
footer a {
  display:flex;
  gap:14px}
footer a:hover {
  color:var(--accent)}
.skip-link {
  position:fixed;
  left:15px;
  top:-100px;
  background:var(--accent);
  color:var(--bg);
  padding:12px;
  z-index:5}
.skip-link:focus {
  top:15px}

@media(min-width:1600px) {
  .shell {
  padding:0 86px}
}
@media(max-width:1000px) {
  .shell {
  padding:0 5%}
.project {
  padding:22px 20px}
.category {
  font-size:12px;
  letter-spacing:.7px}
.project h3 {
  font-size:25px}
.location {
  font-size:12px}
.section-heading>span {
  font-size:12px}
.hero {
  padding-top:52px}
}
@media(max-width:760px) {
  header {
  height:91px}
.brand {
  font-size:22px}
.nav-link {
  gap:12px;
  font-size:13px}
.hero {
  padding:42px 0 34px}
h1 {
  font-size:clamp(57px,11.4vw,85px);
  margin:25px 0 27px}
.eyebrow {
  font-size:12px;
  letter-spacing:1px}
.hero-bottom {
  align-items:flex-start;
  flex-direction:column;
  gap:27px}
.hero-bottom>p {
  font-size:16px}
.location {
  font-size:12px}
.location svg {
  width:29px;
  height:29px}
.location span {
  font-size:12px;
  margin-top:4px}
.section-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:9px}
.section-heading h2 {
  font-size:17px}
.section-heading>span {
  font-size:12px}
.project-grid {
  grid-template-columns:1fr;
  gap:14px}
.project {
  padding:24px;
  min-height:0}
.category {
  font-size:12px}
.project-symbol {
  margin:18px 0 16px;
  width:58px;
  height:58px}
.project h3 {
  font-size:30px}
.project p {
  max-width:100%;
  font-size:16px;
  margin-bottom:24px}
.card-bottom {
  font-size:13px}
.closing {
  padding:32px 0}
footer {
  flex-wrap:wrap;
  gap:20px;
  padding:24px 0}
footer>span:nth-child(2) {
  order:3;
  width:100%;
  font-size:12px}
footer a {
  margin-left:auto}
}

@media(prefers-reduced-motion:reduce) {
  :root {
  scroll-behavior:auto}
.project,.arrow {
  transition:none}
.project:hover {
  transform:none}
}