:root {
  color: #14384a;
  background: #f2a77f;
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --sea-ink: #123949;
  --cream: #fff4db;
  --coral: #ff715c;
  --sun: #ffd45c;
  --aqua: #55d6ce;
  --cobalt: #2459aa;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #e9a278; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }

.page-shell {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(90deg, rgba(16, 52, 69, .62) 0%, rgba(19, 55, 73, .18) 47%, rgba(255, 160, 113, .05) 100%),
    linear-gradient(180deg, rgba(25, 76, 96, .08) 45%, rgba(11, 52, 67, .48) 100%),
    url("/assets/paradise-beach.webp");
  background-position: center;
  background-size: cover;
}

.page-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.page-shell::after {
  content: "PE/CAM  —  SIGNALS FROM 23°33′S";
  position: absolute;
  z-index: -1;
  right: -48px;
  top: 48%;
  color: rgba(255, 244, 219, .7);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  transform: rotate(90deg);
  transform-origin: center;
}

.site-header,
.site-footer,
.hero {
  width: min(100% - 64px, 1380px);
  margin-inline: auto;
}

.site-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 244, 219, .52);
  color: var(--cream);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--cream);
  font-size: .92rem;
  font-weight: 850;
  letter-spacing: .19em;
  text-decoration: none;
}

.wordmark-sun {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 219, .8);
  border-radius: 50%;
}

.wordmark-sun::before,
.wordmark-sun::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 5px rgba(255, 212, 92, .16);
}

.wordmark-sun::after {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 244, 219, .34);
  background: transparent;
  box-shadow: none;
}

.wordmark-sun i { display: none; }
.site-header > p { margin: 0; font-size: .62rem; font-weight: 700; line-height: 1.45; letter-spacing: .13em; text-align: right; text-transform: uppercase; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .7fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: end;
  padding-block: clamp(72px, 12vh, 150px) clamp(56px, 9vh, 108px);
}

.hero-copy { align-self: center; color: var(--cream); text-shadow: 0 2px 22px rgba(13, 49, 65, .22); }
.kicker { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; font-size: .67rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.kicker span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,244,219,.74); border-radius: 50%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .58rem; }
h1 { max-width: 830px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.3rem, 8vw, 8.4rem); font-weight: 400; letter-spacing: -.075em; line-height: .82; }
.intro { max-width: 620px; margin: 30px 0 0; padding-left: 20px; border-left: 3px solid var(--sun); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; }

.project-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 244, 219, .76);
  border-radius: 4px 34px 4px 4px;
  color: var(--sea-ink);
  background: rgba(255, 244, 219, .9);
  box-shadow: 0 28px 70px rgba(22, 54, 65, .27);
  backdrop-filter: blur(16px) saturate(1.12);
}

.project-card::before { content: ""; position: absolute; right: -54px; top: -64px; width: 155px; height: 155px; border: 26px solid rgba(85, 214, 206, .25); border-radius: 50%; }
.project-index { min-height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid rgba(18, 57, 73, .17); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .61rem; font-weight: 800; letter-spacing: .09em; }
.live-status { display: inline-flex; align-items: center; gap: 7px; }
.live-status i { width: 7px; height: 7px; border-radius: 50%; background: #1fa56f; box-shadow: 0 0 0 5px rgba(31, 165, 111, .12); }
.project-wave { height: 82px; display: flex; align-items: center; gap: 5px; padding: 0 24px; border-bottom: 1px solid rgba(18,57,73,.12); background: linear-gradient(90deg, rgba(85,214,206,.16), rgba(255,113,92,.08)); }
.project-wave i { width: 4px; border-radius: 4px; background: var(--cobalt); }
.project-wave i:nth-child(1), .project-wave i:nth-child(9) { height: 10px; }
.project-wave i:nth-child(2), .project-wave i:nth-child(8) { height: 25px; }
.project-wave i:nth-child(3), .project-wave i:nth-child(7) { height: 42px; background: #398caa; }
.project-wave i:nth-child(4), .project-wave i:nth-child(6) { height: 59px; background: var(--coral); }
.project-wave i:nth-child(5) { height: 34px; background: #eca742; }
.project-copy { padding: 27px 25px 22px; }
.project-copy > p:first-child { margin: 0 0 6px; color: #397186; font-size: .64rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 4vw, 4.1rem); font-weight: 400; letter-spacing: -.055em; }
.project-description { margin: 14px 0 0; color: #315868; font-size: .88rem; line-height: 1.55; }
.project-link { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; color: #fff7e8; background: var(--coral); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background .18s ease, padding .18s ease; }
.project-link span:last-child { font-size: 1.45rem; font-weight: 400; }
.project-link:hover { padding-inline: 27px 19px; background: #e95245; }

.site-footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 244, 219, .45); color: var(--cream); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .6rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.site-footer span { color: var(--sun); font-size: 1rem; }

@media (max-width: 900px) {
  .page-shell { background-position: 46% center; }
  .hero { grid-template-columns: 1fr; align-items: start; gap: 50px; padding-block: 64px 70px; }
  .hero-copy { max-width: 760px; }
  .project-card { width: min(100%, 540px); }
}

@media (max-width: 620px) {
  .page-shell {
    background-image:
      linear-gradient(180deg, rgba(20, 61, 78, .36) 0%, rgba(18, 57, 73, .08) 35%, rgba(18, 57, 73, .45) 100%),
      url("/assets/paradise-beach.webp");
    background-position: 42% center;
  }
  .page-shell::after { display: none; }
  .site-header, .site-footer, .hero { width: min(100% - 36px, 1380px); }
  .site-header { min-height: 78px; }
  .site-header > p { max-width: 145px; font-size: .52rem; }
  .wordmark { font-size: .78rem; }
  .wordmark-sun { width: 32px; height: 32px; }
  .hero { gap: 38px; padding-block: 54px 50px; }
  .kicker { margin-bottom: 18px; font-size: .58rem; }
  .kicker span { width: 27px; height: 27px; }
  h1 { font-size: clamp(3.6rem, 18.5vw, 5.9rem); line-height: .84; }
  .intro { margin-top: 24px; font-size: .93rem; }
  .project-card { border-radius: 3px 25px 3px 3px; }
  .project-copy { padding: 24px 21px 20px; }
  .project-index { padding-inline: 19px; }
  .project-wave { height: 68px; padding-inline: 21px; }
  .project-description { font-size: .82rem; }
  .project-link { min-height: 58px; }
  .site-footer { min-height: 72px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}