* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #05060a; color: rgba(228, 233, 245, .82);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }

.wrap {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  padding: clamp(40px, 8vh, 110px) clamp(22px, 5vw, 56px) 48px;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* intro */
.eyebrow { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: rgba(150, 190, 240, .6); }
.intro h1 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.4rem); line-height: .98; letter-spacing: -.01em;
  color: #fff; margin: 18px 0 24px;
}
.lead { max-width: 64ch; font-size: clamp(.95rem, 1.4vw, 1.12rem); line-height: 1.7; color: rgba(210, 220, 240, .68); }
.lead em { color: #fff; font-style: italic; }

/* works */
.works {
  margin: clamp(48px, 8vh, 96px) 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px);
}
.work {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 30px 26px 26px;
  text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  min-height: 340px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s;
}
.work::before {                                   /* accent glow, top-right */
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--accent); opacity: .14; filter: blur(36px);
  transition: opacity .35s;
}
.work:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(255,255,255,.05); }
.work:hover::before { opacity: .32; }

.num { font-family: Georgia, serif; font-size: 13px; letter-spacing: .12em; color: var(--accent); opacity: .9; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); margin: 16px 0 18px; }
.work h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: #fff; line-height: 1.05; }
.medium { margin-top: 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); opacity: .85; }
.desc { margin-top: 16px; font-size: 13px; line-height: 1.6; color: rgba(210, 220, 240, .62); }
.enter { margin-top: auto; padding-top: 22px; font-size: 13px; letter-spacing: .1em; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.enter i { font-style: normal; transition: transform .3s; }
.work:hover .enter i { transform: translateX(6px); }

/* footer */
.foot { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 11px; letter-spacing: .04em; color: rgba(190, 205, 230, .4); }

@media (max-width: 820px) {
  .works { grid-template-columns: 1fr; }
  .work { min-height: 0; }
}

/* --- home link + about page + homepage about nav --- */
.home-link { position: relative; z-index: 1; pointer-events: auto; display: inline-block; margin-bottom: 36px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.45); transition: color .2s; }
.home-link:hover { color: #fff; }
.top-about { position: fixed; z-index: 2; top: clamp(18px,4vh,40px); right: clamp(22px,5vw,56px); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.55); transition: color .2s; }
.top-about:hover { color: #fff; }
.about .intro h1 { margin: 14px 0 8px; }
.col { max-width: 64ch; }
.col p { font-size: clamp(.95rem,1.35vw,1.08rem); line-height: 1.75; color: rgba(210,220,240,.7); margin-top: 18px; }
.col p.big { font-size: clamp(1.2rem,2vw,1.6rem); line-height: 1.5; color: #fff; margin-top: 8px; }
.col em { color: #fff; font-style: italic; }
.block { margin-top: clamp(40px,6vh,72px); max-width: 70ch; }
.block h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(1.4rem,2.4vw,2rem); color: #fff; margin-bottom: 6px; }
.muted { font-size: 13px; color: rgba(210,220,240,.5); margin-top: 8px; }
.ws { list-style: none; margin-top: 22px; display: grid; gap: 16px; }
.ws li { padding-left: 18px; border-left: 2px solid rgba(120,170,230,.35); font-size: 14px; line-height: 1.55; color: rgba(210,220,240,.72); }
.ws li b { color: #fff; font-weight: 600; }
.ws .meta { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .08em; color: rgba(150,180,220,.45); }
.about .foot { margin-top: clamp(48px,8vh,90px); }