:root {
  --bg: #fbfbf9;
  --text: #181816;
  --muted: #777570;
  --link: #5f5d58;
  --link-hover: #181816;
  --rule: #ebe9e4;
  --mark-op: 0.55;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Google Sans Flex', 'Google Sans', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

::selection { background: rgba(140, 160, 210, 0.22); }

/* ---------- Floating decorative marks ---------- */
.marks {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mark {
  position: absolute;
  line-height: 1;
  opacity: var(--mark-op);
}

.mark--a { animation: mtFloatA 9s ease-in-out infinite; }
.mark--b { animation: mtFloatB 11s ease-in-out infinite; }

/* On narrow screens the content column fills the width, leaving no margin
   for the decorative marks — they'd overlap the text, so hide them. */
@media (max-width: 880px) {
  .marks { display: none; }
}

/* ---------- Layout ---------- */
.page {
  position: relative;
  z-index: 1;
  max-width: 604px;
  margin: 0 auto;
  padding: 84px 28px 56px;
}

.block {
  margin-bottom: 50px;
  animation: mtFadeUp .7s cubic-bezier(.2, .7, .3, 1) both;
}

.block--header     { animation-delay: 0s; }
.block--intro      { animation-delay: .07s; }
.block--writing    { animation-delay: .18s; }
.block--quotes     { margin-bottom: 52px; animation-delay: .21s; }
.block--sidequests { margin-bottom: 52px; animation-delay: .28s; }
.block--connect    { margin-bottom: 8px; animation-delay: .35s; }

/* ---------- Header ---------- */
.logo {
  display: block;
  width: 80px;
  height: auto;
}

/* While active, the emoji takes over the cursor everywhere (set by script.js),
   and lingers briefly after leaving the logo before resetting. */
html.emoji-cursor,
html.emoji-cursor * {
  cursor: var(--emoji-cursor), auto !important;
}

/* Balloon-burst left behind when the cursor resets: the emoji inflates and
   ruptures, throwing coloured shards outward. (Built by script.js.) */
.emoji-burst {
  position: fixed;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;
}

.emoji-burst .core {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 26px;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: burstCore .12s ease-out forwards;
}

.emoji-burst .bit {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz, 7px);
  height: var(--sz, 7px);
  border-radius: 50%;
  background: var(--c, #8aa6d9);
  opacity: 0;
  animation: burstBit .46s cubic-bezier(.15, .7, .25, 1) forwards;
}

/* Rupture instantly — no swell */
@keyframes burstCore {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Shards fly outward to a per-shard --dx/--dy and fade */
@keyframes burstBit {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); }
}

/* ---------- Intro ---------- */
.lead {
  font-size: 17px;
  line-height: 1.52;
  letter-spacing: -0.011em;
  color: var(--text);
  margin: 0 0 18px;
}

.body {
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.002em;
  color: var(--muted);
  margin: 0 0 14px;
}

.body:last-of-type { margin-bottom: 0; }

.link-strong {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.link-strong:hover {
  background: rgba(255, 222, 89, 0.5);
  box-shadow: 0.16em 0 0 rgba(255, 222, 89, 0.5), -0.16em 0 0 rgba(255, 222, 89, 0.5);
}

/* ---------- Section headings ---------- */
.heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.heading--writing    { color: #8aa6d9; }
.heading--quotes     { color: #d98a86; margin-bottom: 22px; }
.heading--sidequests { color: #b69ad9; }
.heading--connect    { color: #8fbf9c; }

/* ---------- Entry links (writing & side quests) ---------- */
.entry {
  display: block;
  width: max-content;
  max-width: 100%;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.45;
  text-decoration: none;
  margin-bottom: 12px;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* Each section's links get a highlighter swipe in that section's accent colour */
.block--writing .entry:hover {
  background: rgba(138, 166, 217, 0.32);
  box-shadow: 0.16em 0 0 rgba(138, 166, 217, 0.32), -0.16em 0 0 rgba(138, 166, 217, 0.32);
}

.block--sidequests .entry:hover {
  background: rgba(182, 154, 217, 0.32);
  box-shadow: 0.16em 0 0 rgba(182, 154, 217, 0.32), -0.16em 0 0 rgba(182, 154, 217, 0.32);
}

.entry--last { margin-bottom: 0; }

.block--writing .entry--last { margin-bottom: 12px; }

.read-all {
  display: inline-block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.read-all:hover {
  background: rgba(138, 166, 217, 0.32);
  box-shadow: 0.16em 0 0 rgba(138, 166, 217, 0.32), -0.16em 0 0 rgba(138, 166, 217, 0.32);
}

/* ---------- Quotes ---------- */
.quote {
  margin: 0 0 24px;
}

.quote--last { margin-bottom: 0; }

.quote p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.002em;
  color: var(--text);
  margin: 0 0 9px;
}

.cite {
  font-size: 14px;
  color: var(--muted);
}

/* ---------- Connect ---------- */
.socials {
  display: flex;
  align-items: center;
  gap: 18px;
}

.social {
  display: inline-flex;
  color: var(--link);
  line-height: 0;
  transition: color .18s ease;
}

.social:hover {
  color: #8fbf9c;
}

.social__icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* Optically match the others — the rounded mark reads smaller at 20px */
.social__icon--github {
  width: 22px;
  height: 22px;
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  animation: mtFadeUp .7s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: .4s;
}

.footer span {
  font-size: 13.5px;
  color: var(--muted);
}

.footer-link {
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.footer-link:hover {
  background: rgba(255, 222, 89, 0.5);
  box-shadow: 0.16em 0 0 rgba(255, 222, 89, 0.5), -0.16em 0 0 rgba(255, 222, 89, 0.5);
}

/* ---------- Animations ---------- */
@keyframes mtFloatA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-6px, -14px) rotate(10deg); }
}

@keyframes mtFloatB {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(8px, 11px) rotate(-9deg); }
}

@keyframes mtFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}