:root {
  color-scheme: dark;
  --ink: #111522;
  --ink-soft: #171d2d;
  --paper: #f5f0e5;
  --muted: #9da2b3;
  --pink: #ff6078;
  --mint: #a4f3df;
  --yellow: #f5ce70;
  --line: rgba(245, 240, 229, .14);
  font-family: "Space Grotesk", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 75% 9%, rgba(52, 70, 111, .21), transparent 34rem),
    radial-gradient(ellipse at 5% 43%, rgba(36, 63, 83, .14), transparent 34rem),
    var(--ink);
  color: var(--paper);
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) .55px, transparent .55px);
  background-size: 5px 5px;
  content: "";
  opacity: .16;
  pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--ink); background: var(--mint); }
.sr-only, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
}
.page-shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.rain {
  position: fixed;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .17;
}
.raindrop {
  position: absolute;
  top: -15vh;
  width: 1px;
  height: var(--drop-length, 48px);
  background: linear-gradient(transparent, rgba(197, 226, 255, .8));
  animation: rainfall var(--drop-speed, 1.15s) linear infinite;
  animation-delay: var(--drop-delay, 0s);
}
@keyframes rainfall { to { transform: translate3d(-6vw, 125vh, 0); } }
.site-header {
  position: relative;
  z-index: 8;
  display: flex;
  height: 86px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  font-family: "Space Mono", monospace;
  font-size: 17px;
  font-weight: 700;
  transform: rotate(-9deg);
}
.brand-mark span { color: var(--pink); }
.brand-name { font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: .13em; }
.brand-name > span { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .24em; }
.site-nav { display: flex; align-items: center; gap: 37px; color: #c3c4cf; font-size: 12px; }
.site-nav a { transition: color .2s ease; }
.site-nav a:hover, .text-link:hover { color: var(--mint); }
.nav-contact { padding: 10px 14px; border: 1px solid rgba(245,240,229,.36); border-radius: 3px; color: var(--paper); }
.nav-contact span { margin-left: 9px; color: var(--pink); }
.menu-toggle { display: none; }
.hero { position: relative; display: grid; min-height: 640px; grid-template-columns: 1fr .93fr; align-items: center; gap: 58px; padding: 53px 0 82px; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 13px; }
.eyebrow { margin: 0 0 24px; color: var(--mint); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px rgba(255,96,120,.8); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin-bottom: 22px; font-size: clamp(52px, 6.7vw, 82px); font-weight: 700; letter-spacing: -.075em; line-height: .99; }
.title-highlight { color: var(--mint); }
.title-period { color: var(--pink); }
.hero-description { max-width: 430px; margin-bottom: 27px; color: #b6b8c5; font-size: 14px; line-height: 1.8; }
.hero-description strong { color: var(--paper); }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.button { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 19px; padding: 0 18px; border-radius: 3px; font-size: 12px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--pink); color: #201824; box-shadow: 4px 4px 0 #9c3454; }
.button-primary span { font-size: 17px; }
.text-link { color: var(--paper); font-size: 12px; transition: color .2s ease; }
.text-link span { margin-left: 6px; color: var(--pink); }
.hero-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 52px; color: #898e9f; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .13em; }
.note-star { color: var(--yellow); font-size: 17px; }
.hero-art { position: relative; z-index: 1; width: 100%; max-width: 457px; justify-self: end; transform: rotate(1.4deg); }
.comic-frame { padding: 10px; border: 2px solid #111522; background: var(--paper); box-shadow: 9px 10px 0 var(--pink), 10px 11px 0 #111522; }
.frame-label { display: flex; height: 28px; align-items: center; gap: 8px; padding-inline: 8px; color: var(--ink); font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .1em; }
.frame-label span { color: var(--pink); }
.art-sky { position: relative; height: 415px; overflow: hidden; background: linear-gradient(160deg, #212a4b 0%, #475376 47%, #283648 100%); }
.art-sky::before { position: absolute; z-index: 4; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 26px, rgba(198,228,255,.21) 27px, transparent 28px 44px); content: ""; opacity: .46; }
.moon { position: absolute; top: 50px; right: 68px; z-index: 1; width: 83px; height: 83px; border-radius: 50%; background: #f6d88c; box-shadow: 0 0 36px rgba(246,216,140,.34); }
.moon-glow { position: absolute; top: 36px; right: 53px; width: 113px; height: 113px; border: 1px solid rgba(246,216,140,.3); border-radius: 50%; }
.star { position: absolute; z-index: 1; color: #fff0c1; }
.star-one { top: 74px; left: 60px; font-size: 21px; }
.star-two { top: 145px; right: 176px; font-size: 13px; }
.lightning { position: absolute; top: 16px; left: 91px; width: 78px; height: 110px; background: rgba(174,217,244,.23); clip-path: polygon(53% 0, 100% 0, 67% 37%, 91% 37%, 22% 100%, 42% 52%, 11% 52%); filter: blur(7px); }
.mountain { position: absolute; z-index: 1; right: -15%; bottom: 86px; width: 135%; height: 185px; clip-path: polygon(0 100%, 19% 34%, 34% 64%, 51% 0, 64% 57%, 79% 28%, 100% 100%); }
.mountain-back { background: #333c59; }
.mountain-front { right: 15%; bottom: 76px; width: 115%; height: 142px; background: #232c45; opacity: .9; transform: scaleX(-1); }
.city { position: absolute; z-index: 2; bottom: 83px; width: 30px; background: #20283e; }
.city-one { left: 25px; height: 83px; box-shadow: 30px 19px 0 -3px #20283e, 61px 3px 0 -4px #20283e, 88px 24px 0 -2px #20283e; }
.city-two { right: 19px; height: 104px; box-shadow: -32px 22px 0 -5px #20283e, -62px 9px 0 -4px #20283e; }
.wet-ground { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 95px; background: linear-gradient(180deg,#26354a,#192437 70%,#1d3343); }
.wet-ground::after { position: absolute; inset: 10px 0 0; background: repeating-linear-gradient(174deg, transparent 0 18px, rgba(155,215,220,.19) 19px, transparent 21px 37px); content: ""; opacity: .65; }
.puddle { position: absolute; z-index: 4; bottom: 28px; height: 8px; border-radius: 50%; background: #a1e2d7; filter: blur(2px); opacity: .72; }
.puddle-one { left: 30px; width: 70px; }
.puddle-two { right: 40px; bottom: 53px; width: 43px; }
.adventurer { position: absolute; z-index: 5; right: 104px; bottom: 15px; width: 255px; height: 374px; filter: drop-shadow(7px 7px 0 rgba(17,21,34,.5)); }
.speech-bubble { position: absolute; z-index: 6; top: 158px; left: 19px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 46% 52% 47% 45%; background: var(--paper); color: var(--ink); font-family: "Space Mono", monospace; font-size: 10px; line-height: 1.35; text-align: center; transform: rotate(-8deg); }
.speech-bubble::after { position: absolute; right: 2px; bottom: -11px; width: 13px; height: 13px; border-right: 2px solid var(--ink); background: var(--paper); content: ""; transform: skew(15deg) rotate(45deg); }
.art-caption { position: absolute; z-index: 6; right: 10px; bottom: 8px; color: #d3dedc; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .03em; }
.frame-corner { position: absolute; right: 20px; bottom: 9px; color: var(--pink); font-size: 15px; }
.hero-index { position: absolute; right: 1px; bottom: 27px; color: #6f7485; font-family: "DM Mono", monospace; font-size: 9px; }
.hero-index span { color: var(--pink); }
.scroll-cue { position: absolute; bottom: 26px; left: 0; display: flex; align-items: center; gap: 11px; color: #818697; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .13em; }
.scroll-cue span { display: inline-block; width: 28px; height: 1px; background: var(--mint); }
.section-wrap { padding-top: 94px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.section-number { display: inline-block; margin-right: 10px; color: var(--pink); }
.section-heading .eyebrow, .about-copy .eyebrow, .skills-heading .eyebrow { margin-bottom: 14px; }
.section-heading h2, .skills-heading h2 { margin: 0; font-size: clamp(37px, 5vw, 54px); letter-spacing: -.06em; line-height: 1.1; }
.section-heading h2 span, .skills-heading h2 span { color: var(--mint); }
.section-aside { margin: 0 0 4px; color: #9398a9; font-size: 11px; line-height: 1.7; text-align: right; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 23px; }
.project-card { min-width: 0; }
.project-card-large { grid-column: 1 / -1; }
.project-link { display: block; }
.project-visual { position: relative; min-height: 250px; overflow: hidden; border: 1px solid rgba(245,240,229,.2); transition: transform .25s ease, border-color .25s ease; }
.project-card-large .project-visual { min-height: 320px; }
.project-link:hover .project-visual { border-color: var(--mint); transform: translateY(-4px); }
.visual-stamp { position: absolute; z-index: 4; top: 15px; left: 17px; color: rgba(255,255,255,.72); font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .12em; }
.visual-arrow { position: absolute; z-index: 4; right: 15px; bottom: 12px; display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 16px; transition: background .2s, color .2s; }
.project-link:hover .visual-arrow { background: var(--paper); color: var(--ink); }
.visual-cloud { background: linear-gradient(130deg,#97d5ce,#527f93 48%,#373b68); }
.cloud-sun { position: absolute; top: 52px; right: 19%; width: 112px; height: 112px; border: 1px solid rgba(255,244,200,.72); border-radius: 50%; background: #f6d37f; box-shadow: 0 0 0 14px rgba(255,235,185,.12), 0 0 50px rgba(255,235,185,.55); }
.cloud-island { position: absolute; bottom: 42px; z-index: 2; width: 230px; height: 72px; border-radius: 50%; background: #395772; box-shadow: inset 0 12px 0 rgba(179,237,211,.62), 0 14px 0 -5px rgba(30,53,78,.75); }
.island-a { left: 7%; transform: rotate(-8deg); }
.island-b { right: 9%; bottom: 24px; width: 190px; background: #5a7391; transform: rotate(8deg) scale(.8); }
.cloud-tower { position: absolute; z-index: 3; bottom: 91px; left: 33%; width: 54px; height: 120px; background: repeating-linear-gradient(0deg,#eee1bc 0 27px,#b89571 28px 30px); clip-path: polygon(0 100%,0 28%,19% 28%,19% 10%,50% 0,81% 10%,81% 28%,100% 28%,100% 100%); }
.cloud-tower::after { position: absolute; top: 42px; left: 18px; width: 16px; height: 30px; border-radius: 9px 9px 0 0; background: #edac77; content: ""; }
.cloud-title { position: absolute; z-index: 3; top: 31%; left: 8%; color: #fff0d0; font-family: "Space Mono", monospace; font-size: clamp(28px, 4vw, 50px); font-weight: 700; letter-spacing: -.09em; line-height: .92; text-shadow: 3px 4px 0 #43516c; transform: rotate(-5deg); }
.cloud-title span { margin-left: 4px; color: var(--yellow); font-size: 11px; vertical-align: top; }
.visual-potion { background: radial-gradient(ellipse at 60% 48%,#36325f,#171f3b 68%,#171a2a); }
.potion-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { top: 65px; left: 20%; width: 94px; height: 94px; border: 1px solid rgba(255,96,120,.65); background: radial-gradient(circle at 35% 30%,#ffb0ac,#db4f86 55%,#6a316e); box-shadow: 0 0 42px rgba(255,85,136,.43); }
.orb-two { right: 16%; bottom: 37px; width: 60px; height: 60px; background: radial-gradient(circle at 35% 30%,#c2ffdd,#43c9bc 65%,#354e81); box-shadow: 0 0 35px rgba(103,238,211,.55); }
.potion-bottle { position: absolute; z-index: 2; top: 26%; left: 47%; width: 75px; height: 114px; border: 3px solid rgba(255,235,224,.8); border-radius: 25px 25px 17px 17px; background: linear-gradient(0deg,rgba(232,82,130,.75) 0 40%,rgba(223,247,237,.13) 41%); box-shadow: inset 10px 0 20px rgba(255,255,255,.12),0 0 40px rgba(255,96,120,.22); transform: rotate(10deg); }
.potion-bottle::before { position: absolute; top: -23px; left: 21px; width: 27px; height: 22px; border: 3px solid rgba(255,235,224,.8); background: #df638c; content: ""; }
.potion-bottle span { display: grid; height: 100%; place-items: center; color: #fff5d5; font-size: 28px; }
.potion-title { position: absolute; z-index: 3; right: 9%; bottom: 18%; color: #fff2d6; font-family: "Space Mono", monospace; font-size: clamp(23px, 3vw, 34px); font-weight: 700; line-height: .93; text-align: right; text-shadow: 3px 3px 0 #d35483; transform: rotate(-6deg); }
.visual-city { background: linear-gradient(180deg,#15283b,#244e66 58%,#152331); }
.city-moon { position: absolute; top: 44px; left: 13%; width: 61px; height: 61px; border-radius: 50%; background: #f2d694; box-shadow: 0 0 28px rgba(242,214,148,.33); }
.cityline { position: absolute; bottom: 0; width: 115%; height: 135px; background: repeating-linear-gradient(90deg,#1b2639 0 30px,#31445a 31px 43px,#1c2a3c 44px 68px); clip-path: polygon(0 43%,10% 43%,10% 25%,23% 25%,23% 50%,35% 50%,35% 16%,47% 16%,47% 40%,58% 40%,58% 30%,71% 30%,71% 48%,83% 48%,83% 5%,96% 5%,96% 40%,100% 40%,100% 100%,0 100%); }
.cityline-a { right: -8%; }
.cityline-b { right: 15%; z-index: 2; height: 85px; opacity: .68; transform: scaleX(-1); }
.city-rain { position: absolute; z-index: 3; inset: 0; background: repeating-linear-gradient(105deg,transparent 0 24px,rgba(182,222,239,.5) 25px,transparent 26px 39px); opacity: .45; }
.city-title { position: absolute; z-index: 4; top: 25%; right: 14%; color: #f6e8cc; font-family: "Space Mono", monospace; font-size: clamp(25px, 3.2vw, 39px); font-weight: 700; letter-spacing: -.1em; line-height: .95; text-align: right; text-shadow: 3px 4px 0 #263649; transform: rotate(3deg); }
.city-title em { color: var(--mint); font-style: normal; }
.project-info { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px 3px; }
.project-info h3 { margin-bottom: 4px; font-size: 15px; }
.project-info p { margin: 0; color: #9297a7; font-size: 10px; }
.project-index { color: #7d8293; font-family: "DM Mono", monospace; font-size: 10px; }
.work-footnote { margin-top: 34px; color: #9297a7; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .11em; text-align: center; }
.work-footnote span { margin-right: 7px; color: var(--pink); font-size: 15px; vertical-align: -1px; }
.about-section { padding-top: 104px; }
.about-panel { display: grid; min-height: 420px; grid-template-columns: .87fr 1fr; align-items: center; gap: 65px; padding: 48px 58px; border: 1px solid var(--line); background: linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); }
.about-art { position: relative; display: grid; min-height: 310px; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 50%,#394562,#222b41 63%,#1b2233); }
.about-art::before { position: absolute; inset: 0; background: repeating-linear-gradient(112deg,transparent 0 26px,rgba(194,229,238,.18) 27px,transparent 29px 44px); content: ""; opacity: .45; }
.about-orbit { position: absolute; width: 224px; height: 224px; border: 1px solid rgba(164,243,223,.46); border-radius: 50%; }
.orbit-two { width: 270px; height: 130px; border-color: rgba(255,96,120,.6); transform: rotate(-38deg); }
.about-portrait { position: relative; z-index: 1; width: 142px; height: 195px; }
.portrait-face { position: absolute; top: 24px; left: 31px; width: 86px; height: 103px; border: 4px solid var(--ink); border-radius: 43% 48% 42% 44%; background: #d89779; transform: rotate(-4deg); }
.portrait-hair { position: absolute; z-index: 1; top: 12px; left: 26px; width: 101px; height: 58px; border: 4px solid var(--ink); border-radius: 54% 46% 21% 28%; background: #1a1b2b; clip-path: polygon(0 0,100% 0,100% 67%,78% 53%,71% 100%,52% 60%,35% 84%,25% 63%,0 82%); }
.portrait-eye { position: absolute; z-index: 2; top: 76px; left: 86px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: -35px 2px 0 -1px var(--ink); }
.portrait-jacket { position: absolute; top: 112px; left: 8px; width: 128px; height: 100px; border: 4px solid var(--ink); border-radius: 48% 48% 0 0; background: linear-gradient(115deg,#ff6078 0 43%,#313a60 44%); clip-path: polygon(26% 0,74% 0,100% 100%,0 100%); }
.portrait-spark { position: absolute; top: 22px; right: -23px; color: var(--yellow); font-size: 25px; }
.about-doodle { position: absolute; z-index: 2; color: var(--yellow); font-size: 27px; }
.doodle-top { top: 20px; left: 24px; }
.doodle-bottom { right: 24px; bottom: 16px; color: var(--pink); }
.about-art-label { position: absolute; z-index: 2; bottom: 13px; left: 15px; color: #c3c8d2; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .1em; }
.about-copy h2 { margin-bottom: 19px; font-size: clamp(37px, 4.5vw, 51px); letter-spacing: -.07em; line-height: 1.04; }
.about-copy h2 span { color: var(--pink); }
.about-copy > p:not(.eyebrow) { max-width: 445px; margin-bottom: 13px; color: #a9adbb; font-size: 12px; line-height: 1.85; }
.about-link { display: inline-block; margin-top: 9px; }
.skills-section { display: grid; grid-template-columns: .85fr 1fr; gap: 74px; padding-top: 104px; }
.skills-heading h2 { max-width: 360px; }
.skill-list { border-top: 1px solid var(--line); }
.skill-item { display: grid; min-height: 61px; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.skill-symbol { color: var(--pink); font-size: 17px; }
.skill-item:nth-child(even) .skill-symbol { color: var(--mint); }
.skill-level { color: #777e90; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .06em; }
.contact-section { padding-top: 110px; }
.contact-card { position: relative; min-height: 368px; padding: 51px 24px; overflow: hidden; background: var(--mint); color: var(--ink); text-align: center; }
.contact-card::before, .contact-card::after { position: absolute; top: -84px; width: 260px; height: 520px; border: 1px solid rgba(17,21,34,.16); border-radius: 50%; content: ""; transform: rotate(32deg); }
.contact-card::before { left: -99px; }
.contact-card::after { right: -90px; transform: rotate(-32deg); }
.contact-spark { position: relative; z-index: 1; margin-bottom: 7px; color: #dc536d; font-size: 26px; }
.contact-card .eyebrow { position: relative; z-index: 1; margin-bottom: 14px; color: #42584f; }
.contact-card h2 { position: relative; z-index: 1; margin-bottom: 10px; font-size: clamp(48px, 6.2vw, 67px); letter-spacing: -.075em; line-height: .94; }
.contact-card h2 span { color: #ed5570; }
.contact-description { position: relative; z-index: 1; margin-bottom: 20px; color: #40564f; font-size: 12px; }
.button-dark { position: relative; z-index: 1; background: var(--ink); color: var(--paper); }
.button-dark span { color: var(--pink); font-size: 16px; }
.contact-doodle { position: absolute; z-index: 1; color: #e85a72; font-size: 29px; }
.doodle-left { top: 30%; left: 19%; }
.doodle-right { right: 18%; bottom: 24%; color: var(--ink); }
.site-footer { display: flex; min-height: 107px; align-items: center; justify-content: space-between; margin-top: 48px; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; color: #858b9d; font-size: 10px; }
.site-footer p span { color: var(--pink); }
.back-top { color: #a4a8b5; font-family: "DM Mono", monospace; font-size: 8px; letter-spacing: .08em; }
.back-top:hover { color: var(--mint); }

@media (min-width: 1300px) {
  .rain { opacity: .22; }
}
@media (max-width: 850px) {
  .page-shell { width: min(100% - 44px, 680px); }
  .hero { min-height: unset; grid-template-columns: 1fr 1fr; gap: 25px; padding: 76px 0 83px; }
  .hero h1 { font-size: clamp(49px, 8vw, 66px); }
  .hero-art { width: 100%; }
  .art-sky { height: 355px; }
  .adventurer { right: 55px; width: 223px; height: 338px; }
  .speech-bubble { left: 10px; font-size: 8px; }
  .about-panel { gap: 35px; padding: 36px; }
  .skills-section { gap: 38px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 70px; }
  .page-shell { width: calc(100% - 36px); }
  .site-header { height: 72px; }
  .menu-toggle { display: grid; width: 42px; height: 42px; align-content: center; justify-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--paper); }
  .menu-toggle > span:not(.sr-only) { width: 17px; height: 1px; background: var(--paper); }
  .site-nav { position: absolute; top: 62px; right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 9px 16px; border: 1px solid var(--line); background: #171d2d; box-shadow: 0 14px 25px rgba(0,0,0,.24); }
  .site-nav.is-open { display: flex; flex-direction: column; }
  .site-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .site-nav .nav-contact { margin-top: 7px; padding-inline: 10px; border: 1px solid rgba(245,240,229,.25); }
  .hero { grid-template-columns: 1fr; gap: 33px; padding: 59px 0 81px; }
  .hero h1 { font-size: clamp(58px, 15vw, 77px); }
  .hero-description { max-width: 390px; font-size: 13px; }
  .hero-note { margin-top: 30px; }
  .hero-art { width: min(100% - 18px, 400px); justify-self: center; }
  .art-sky { height: min(99vw, 380px); }
  .adventurer { right: 20%; width: 62%; height: 91%; }
  .moon { right: 16%; width: 69px; height: 69px; }
  .moon-glow { right: calc(16% - 14px); width: 97px; height: 97px; }
  .speech-bubble { top: 37%; }
  .hero-index { right: 6px; bottom: 27px; }
  .scroll-cue { bottom: 28px; }
  .section-wrap { padding-top: 73px; }
  .section-heading { align-items: start; gap: 16px; }
  .section-heading h2, .skills-heading h2 { font-size: 39px; }
  .section-aside { display: none; }
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-card-large { grid-column: auto; }
  .project-card-large .project-visual, .project-visual { min-height: 250px; }
  .project-card-large .project-visual { min-height: 270px; }
  .cloud-title { font-size: 39px; }
  .about-section { padding-top: 79px; }
  .about-panel { grid-template-columns: 1fr; gap: 31px; padding: 18px 18px 26px; }
  .about-art { min-height: 270px; }
  .about-copy { padding: 0 3px; }
  .about-copy h2 { font-size: 43px; }
  .skills-section { grid-template-columns: 1fr; gap: 28px; }
  .skill-item { grid-template-columns: 25px 1fr; gap: 8px; }
  .skill-level { grid-column: 2; margin-top: -17px; padding-bottom: 10px; }
  .contact-section { padding-top: 82px; }
  .contact-card { min-height: 350px; padding: 50px 16px; }
  .contact-card h2 { font-size: 59px; }
  .contact-description { max-width: 260px; margin-inline: auto; line-height: 1.7; }
  .doodle-left { left: 7%; }
  .doodle-right { right: 7%; }
  .site-footer { min-height: 130px; flex-wrap: wrap; gap: 12px; padding: 23px 0; }
  .site-footer p { order: 3; width: 100%; }
  .back-top { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rain { display: none; }
}