:root {
  --s: 1;
  --navy: #15203A;
  --cream: #F2ECE1;
  --muted: #A9B3C9;
  --rule: #F2ECE129;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --hand: "Patrick Hand SC", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background-color: var(--navy);
  background-image: linear-gradient(#15203ABF, #15203ABF), url(assets/bg-paper.png);
  background-position: 50%, 50% top;
  background-size: cover;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 16px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  padding-top: 1px;
}

a { color: inherit; }

/* ---------- Hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
  overflow: clip;
  position: relative;
}

.nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background-color: #F2ECE114;
  flex-shrink: 0;
}
.nav a {
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.nav a:hover { color: var(--cream); }
.nav a.active {
  background-color: var(--cream);
  color: var(--navy);
  font-weight: 500;
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 720px;
  max-width: 100%;
  margin-top: 122px;
  text-align: center;
  flex-shrink: 0;
}
.intro-text { display: flex; flex-direction: column; gap: 14px; }
.intro h1 {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 60px;
}
.lede { font-size: 20px; line-height: 30px; text-wrap: balance; }
.lede .swsh {
  text-decoration: underline 1px #9AA6BA;
  text-underline-position: from-font;
}
.aside { color: var(--muted); font-size: 17px; line-height: 26px; }
.socials { color: var(--muted); font-size: 15px; line-height: 24px; }
.socials a, .lede .swsh { text-underline-position: from-font; }
.socials a { text-decoration: underline 1px; }
.socials a:hover, .lede .swsh:hover { color: var(--cream); }

.skyline-wrap {
  position: relative;
  flex-shrink: 0;
  width: min(100vw, 1440px);
  height: calc(480px * var(--s));
  margin-top: 70px;
}
.skyline {
  position: absolute;
  inset: 0;
  width: 1440px;
  height: 480px;
  transform-origin: 0 0;
  transform: scale(var(--s));
}
.piece {
  position: absolute;
  background-repeat: no-repeat;
}
/* ---------- Skyline animations ---------- */
.windmill-arms {
  transform-origin: 89.4px 139px; /* the red hub */
  animation: windmill-sway 6s ease-in-out infinite;
}
@keyframes windmill-sway {
  0%, 100% { rotate: 0deg; }
  50% { rotate: -9deg; }
}

.junk {
  transform-origin: 50% 95%;
  animation: junk-bob 4s ease-in-out infinite;
}
@keyframes junk-bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: 3px -2px; rotate: 1.2deg; }
  50% { translate: 6px 0; rotate: 0deg; }
  75% { translate: 3px -1px; rotate: -1.2deg; }
}

.merlion-water {
  /* water starts at the mouth, ~86px into the box */
  clip-path: inset(0 0 0 0);
  animation: merlion-spout 3s ease-in-out infinite;
}
@keyframes merlion-spout {
  0%       { clip-path: inset(0 82px 0 0); }
  35%, 70% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(0 82px 0 0); }
}

.lights { opacity: 0; animation: lights-out 6s steps(1, end) infinite; }
.lights.l0 { animation-duration: 3s; animation-delay: -1s; }
.lights.l1 { animation-duration: 5s; animation-delay: -4s; }
@keyframes lights-out {
  0%   { opacity: 0; }
  55%  { opacity: 1; }
  57%  { opacity: 0; }
  59%  { opacity: 1; }
  78%  { opacity: 0; }
  100% { opacity: 0; }
}

/* moon rocks around its own centre (61px, 66.5px) */
.moon { animation: moon-rock 3s ease-in-out infinite; }
@keyframes moon-rock {
  0%, 100% { transform: translate(61px, 66.5px) rotate(0deg) translate(-61px, -66.5px); }
  50% { transform: translate(61px, 63px) rotate(7deg) translate(-61px, -66.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .windmill-arms, .junk, .merlion-water, .lights, .moon { animation: none; }
}

.sign {
  position: absolute;
  align-content: center;
  text-align: center;
  color: #2B2622;
  font-family: var(--hand);
  text-decoration: none;
}
.sign:hover { color: #000; }
.moon {
  position: absolute;
  left: 0;
  top: 0;
  width: 122px;
  height: 133px;
  background-image: url(assets/moon.png);
  background-position: 90%;
  background-size: cover;
  transform-origin: 0 0;
  translate: 1165px 49px;
  rotate: 148.19deg;
}

/* ---------- Content ---------- */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 0 96px;
}
.column {
  display: flex;
  flex-direction: column;
  gap: 88px;
  width: 720px;
  max-width: 100%;
}

.label {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 16px;
}

.currently { display: flex; flex-direction: column; gap: 16px; }
.currently p { font-size: 22px; letter-spacing: -0.01em; line-height: 34px; }

.section { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 96px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.section-head h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.row { display: flex; align-items: baseline; gap: 24px; }
.row .meta, .row .tag {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 16px;
  flex-shrink: 0;
}
.row .meta { width: 120px; }
.row .tag { width: 80px; text-align: right; }
.row .body { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; }
.title { font-size: 17px; font-weight: 500; line-height: 22px; }
a.inline { text-decoration: underline 1px; text-underline-position: from-font; }
a.inline:hover { color: var(--cream); }
.bullets {
  margin-top: 6px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bullets li::marker { color: #6F7A93; }
.desc { color: var(--muted); font-size: 15px; line-height: 24px; }

.tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tiles a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color .15s;
}
.tiles a::after { content: " ↗"; color: var(--muted); font-weight: 400; }
.tiles li {
  border-radius: 12px;
  background-color: #F2ECE10D;
  font-size: 17px;
  transition: background-color .15s;
  font-weight: 500;
  line-height: 22px;
}
.tiles li:hover { background-color: #F2ECE11F; }
.cards { display: flex; gap: 24px; }
.card {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 14px;
  background-color: #F2ECE10D;
}
.card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 24px; }
.card p { color: var(--muted); font-size: 15px; line-height: 23px; }


/* ---------- Narrow screens ---------- */
@media (max-width: 760px) {
  .hero, .content { padding-left: 16px; padding-right: 16px; }
  .nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav { gap: 0; padding: 4px; }
  .nav a { padding: 6px 9px; font-size: 13px; }
  .intro { margin-top: 72px; }
  .intro h1 { font-size: 44px; line-height: 48px; }
  .lede { font-size: 18px; line-height: 27px; }
  .lede br { display: none; }
  .content { padding-top: 72px; }
  .column { gap: 64px; }
  .currently p { font-size: 19px; line-height: 30px; }
  .row { flex-wrap: wrap; gap: 6px 16px; }
  .row .meta { width: auto; order: 1; }
  .row .tag { width: auto; order: 2; margin-left: auto; }
  .row .body { order: 3; flex-basis: 100%; }
  .cards { flex-direction: column; gap: 16px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}