:root {
  color-scheme: light;
  --sky-a: #7997b1;
  --sky-b: #d4bdad;
  --ink: #253144;
  --paper: #f6ebd6;
  --paper-deep: #eddfc5;
  --accent: #b45f46;
  --accent-light: #efbd82;
  --cloud: #e8dfd5;
  font-family: 'Pixelify Sans', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b)) fixed;
  transition: background 1s;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 4px dashed var(--accent); outline-offset: 4px; }
.weather-world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.weather-world::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(90deg, var(--ink) 1px, transparent 1px), linear-gradient(var(--ink) 1px, transparent 1px);
  background-size: 16px 16px;
}
.cloud {
  position: absolute;
  width: 96px;
  height: 20px;
  background: var(--cloud);
  box-shadow: 16px -12px 0 var(--cloud), 32px -20px 0 var(--cloud), 56px -20px 0 var(--cloud), 72px -12px 0 var(--cloud), 96px 0 0 var(--cloud);
  opacity: .7;
}
.cloud-one { top: 140px; left: 6%; }
.cloud-two { top: 260px; right: 15%; }
.cloud-three { top: 600px; left: 54%; }
.site-shell { position: relative; z-index: 1; width: min(1112px, calc(100% - 40px)); margin: 0 auto; }
.weather-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 4px solid var(--ink);
  border-top: 0;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: .84rem;
  font-weight: 700;
}
.weather-pip { width: 8px; height: 8px; flex: none; background: var(--accent); box-shadow: 4px 0 0 var(--ink), 0 4px 0 var(--ink); }
.weather-bar-end { margin-left: auto; font-size: .7rem; letter-spacing: .08em; white-space: nowrap; }
.site-header { min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 16px; font-size: 1.7rem; font-weight: 700; }
.wordmark-mark { width: 12px; height: 12px; background: var(--accent-light); box-shadow: -8px -8px 0 var(--accent-light), 8px -8px 0 var(--accent-light), -8px 8px 0 var(--accent-light), 8px 8px 0 var(--accent-light); }
.site-header nav { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 38px); font-size: 1.04rem; font-weight: 700; }
.site-header nav a:hover, .text-link:hover, .site-footer a:hover { color: var(--accent); }
.hero { min-height: 490px; padding: 74px 32px 86px; border: 4px solid var(--ink); background: color-mix(in srgb, var(--paper) 87%, transparent); box-shadow: 8px 8px 0 var(--ink); }
.overline { display: inline-block; margin: 0 0 20px; padding: 8px 12px; background: var(--ink); color: var(--paper); font-size: .82rem; font-weight: 700; letter-spacing: .07em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0 0 22px; font-size: clamp(4rem, 7vw, 7rem); line-height: .93; letter-spacing: -.075em; font-weight: 700; }
h1 span { color: var(--accent); }
.intro { max-width: 690px; font-size: clamp(1.16rem, 1.8vw, 1.4rem); line-height: 1.45; }
.pixel-button { display: inline-block; margin-top: 13px; padding: 12px 20px; border: 4px solid var(--ink); background: var(--accent-light); box-shadow: 8px 8px 0 var(--ink); font-size: 1.1rem; font-weight: 700; }
.pixel-button:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); }
.projects-section { margin-top: 88px; padding: 35px 32px 42px; border: 4px solid var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 8px 8px 0 var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.section-heading .overline { margin-bottom: 12px; }
h2 { margin: 0; font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.06em; }
.text-link { display: inline-block; padding-bottom: 2px; border-bottom: 4px solid var(--ink); font-size: 1.08rem; font-weight: 700; overflow-wrap: anywhere; }
.section-intro { margin: 21px 0 26px; font-size: 1.1rem; line-height: 1.45; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.project-card { min-height: 185px; padding: 20px; border: 4px solid var(--ink); background: var(--paper-deep); box-shadow: 4px 4px 0 var(--ink); }
.project-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--accent); font-size: .79rem; font-weight: 700; }
.pixel-spark { width: 8px; height: 8px; background: var(--accent); box-shadow: -4px -4px 0 var(--accent), 4px -4px 0 var(--accent), -4px 4px 0 var(--accent), 4px 4px 0 var(--accent); }
.project-card h3 { margin: 0 0 9px; font-size: 1.7rem; letter-spacing: -.04em; }
.project-card h3 a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.project-card p { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.project-note { margin: 24px 0 0; font-size: .88rem; }
.contact-section { margin-top: 88px; padding: 35px 32px 40px; border: 4px solid var(--ink); background: var(--accent-light); box-shadow: 8px 8px 0 var(--ink); }
.contact-section .overline { margin-bottom: 12px; }
.contact-section p:not(.overline) { margin: 18px 0 22px; font-size: 1.1rem; line-height: 1.4; }
.site-footer { min-height: 120px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 25px; font-size: .88rem; }
.site-footer a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#particles { position: absolute; inset: 0; }
.particle { position: absolute; top: -30px; animation: fall var(--duration) linear infinite; animation-delay: var(--delay); }
.particle.rain { width: 4px; height: 16px; background: #d8e9f1; box-shadow: 4px 16px 0 #9bbacd; }
.particle.leaf { width: 12px; height: 12px; background: #bf6944; clip-path: polygon(0 33%, 33% 33%, 33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%); animation-name: leaf-fall; }
.particle.leaf:nth-child(3n) { background: #e4a459; }
.particle.leaf:nth-child(4n) { background: #8e7e54; }
.particle.snow { width: 8px; height: 8px; background: #f3f5f2; animation-name: leaf-fall; }
.particle.firefly { top: var(--y); width: 8px; height: 8px; background: #ffe89a; box-shadow: 0 0 0 4px #f1d67d55; animation: blink var(--duration) steps(1) infinite; }
@keyframes fall { to { transform: translate3d(-32px, 110vh, 0); } }
@keyframes leaf-fall { to { transform: translate3d(90px, 110vh, 0) rotate(360deg); } }
@keyframes blink { 0%, 45%, 100% { opacity: .15; } 50%, 72% { opacity: 1; } }
@media (max-width: 700px) {
  .site-header { align-items: start; flex-direction: column; justify-content: center; padding: 23px 0; gap: 20px; }
  .hero { min-height: 0; padding: 46px 22px 58px; }
  h1 { font-size: clamp(3.5rem, 11vw, 5rem); }
  .projects-section, .contact-section { margin-top: 58px; padding: 26px 20px 32px; }
  .section-heading { align-items: start; flex-direction: column; gap: 18px; }
  .project-grid { grid-template-columns: 1fr; }
  .weather-bar-end { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .particle { animation: none !important; }
  .particle.rain, .particle.leaf, .particle.snow { display: none; }
}

.games-section{padding:40px 32px 48px;border:4px solid var(--ink);background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:8px 8px 0 var(--ink)}.games-section h1{font-size:clamp(3.5rem,6vw,5.5rem);margin-bottom:20px}.game-showcase{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:4px solid var(--ink);background:var(--paper-deep);box-shadow:4px 4px 0 var(--ink);margin-top:32px}.game-preview{position:relative;display:block;overflow:hidden;border-right:4px solid var(--ink);background:#303537;min-height:260px}.game-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.preview-play{position:absolute;left:20px;bottom:20px;border:4px solid var(--ink);padding:8px 16px;background:var(--accent-light);box-shadow:4px 4px 0 var(--ink);font-weight:700}.game-preview:hover .preview-play{background:var(--paper)}.game-details{padding:28px}.game-details h2{font-size:clamp(2.3rem,4vw,3.3rem);margin-bottom:18px}.game-details p{font-size:1.15rem;line-height:1.45}.game-tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.game-tags span{border:2px solid var(--ink);padding:4px 8px;font-size:.88rem;background:var(--paper)}.game-details .pixel-button{margin:0 8px 8px 0}.site-header [aria-current=page]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}@media(max-width:760px){.games-section{padding:30px 20px}.game-showcase{grid-template-columns:1fr}.game-preview{border-right:0;border-bottom:4px solid var(--ink);min-height:0;aspect-ratio:16/10}.game-details{padding:24px 20px}}

.weather-night .site-header{color:var(--paper)}
.weather-night .site-header nav a:hover{color:var(--accent-light)}